iridium/neko-custom
Archived
2
0
Fork 0
Code Pull Requests Activity

some changes to chat component (wip)

Browse Source
This commit is contained in:
Craig 2020-01-30 23:59:22 +00:00
parent 0f40e0119c
commit 7f26b8bb7b
3 changed files with 73 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
client/src/assets/styles/_variables.scss
View File

@ -26,5 +26,5 @@ $style-error: #d32f2f;
$menu-height: 40px; $menu-height: 40px;
$controls-height: 125px; $controls-height: 125px;
$side-width: 300px; $side-width: 400px;

126
client/src/components/chat.vue
View File

@ -11,15 +11,14 @@
<span>{{ member(message.id).username }}</span> <span>{{ member(message.id).username }}</span>
<span class="timestamp">{{ timestamp(message.created) }}</span> <span class="timestamp">{{ timestamp(message.created) }}</span>
</div> </div>
<div class="content-body"> <neko-markdown class="content-body" :source="message.content" />
<neko-markdown :source="message.content" />
</div>
</div> </div>
</li> </li>
<li :key="index" class="event" v-if="message.type === 'event'"> <li :key="index" class="event" v-if="message.type === 'event'">
<span <div
class="content"
v-tooltip="{ v-tooltip="{
content: `${timestamp(message.created)}, ${member(message.id).username} ${message.content}`, content: timestamp(message.created),
placement: 'left', placement: 'left',
offset: 3, offset: 3,
boundariesElement: 'body', boundariesElement: 'body',
@ -28,7 +27,7 @@
<strong v-if="message.id === id">You</strong> <strong v-if="message.id === id">You</strong>
<strong v-else>{{ member(message.id).username }}</strong> <strong v-else>{{ member(message.id).username }}</strong>
{{ message.content }} {{ message.content }}
</span> </div>
</li> </li>
</template> </template>
</ul> </ul>
@ -37,6 +36,7 @@
<div class="accent" /> <div class="accent" />
<div class="text-container"> <div class="text-container">
<textarea ref="chat" placeholder="Send a message" @keydown="onKeyDown" v-model="content" /> <textarea ref="chat" placeholder="Send a message" @keydown="onKeyDown" v-model="content" />
<div class="emoji"></div>
</div> </div>
</div> </div>
</div> </div>
@ -84,12 +84,13 @@
li { li {
flex: 1; flex: 1;
border-top: 1px solid var(--border-color); border-top: 1px solid var(--border-color);
padding: 10px 10px 0px 10px; padding: 10px 5px 0px 10px;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex-wrap: nowrap;
overflow: hidden; overflow: hidden;
user-select: contain; user-select: text;
max-width: 100%; word-wrap: break-word;
&.message { &.message {
.author { .author {
@ -100,7 +101,7 @@
height: 40px; height: 40px;
border-radius: 50%; border-radius: 50%;
background: $style-primary; background: $style-primary;
margin: 5px 10px 10px 0px; margin: 0px 10px 10px 0px;
img { img {
width: 100%; width: 100%;
@ -111,34 +112,41 @@
flex: 1; flex: 1;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
line-height: 22px; box-sizing: border-box;
word-wrap: break-word;
min-width: 0;
.content-head { .content-head {
cursor: default; cursor: default;
width: 100%;
margin-bottom: 3px;
display: block;
span { span {
display: inline-block;
color: $text-normal; color: $text-normal;
font-weight: 500; font-weight: 500;
float: left; font-size: 16px;
} }
.timestamp { .timestamp {
margin-left: 5px;
color: $text-muted; color: $text-muted;
float: left; font-size: 0.7rem;
font-size: 0.8em; font-weight: 500;
line-height: 1.7em; margin-left: 0.3rem;
line-height: 12px;
&::first-letter {
text-transform: uppercase;
}
} }
} }
::v-deep .content-body {
display: flex;
color: $text-normal;
line-height: 22px;
* { ::v-deep .content-body {
word-wrap: break-word; color: $text-normal;
max-width: 225px; line-height: 20px;
} word-wrap: break-word;
overflow-wrap: break-word;
a { a {
color: $text-link; color: $text-link;
@ -157,19 +165,22 @@
padding-left: 3px; padding-left: 3px;
} }
.spoiler { span {
background: $background-tertiary; &.spoiler {
padding: 0 2px; background: $background-tertiary;
border-radius: 4px; padding: 0 2px;
cursor: pointer; border-radius: 4px;
cursor: pointer;
span { span {
opacity: 0; opacity: 0;
}
} }
&.active { &.spoiler.active {
background: $background-secondary; background: $background-secondary;
cursor: default; cursor: default;
span { span {
opacity: 1; opacity: 1;
} }
@ -189,22 +200,19 @@
white-space: pre-wrap; white-space: pre-wrap;
} }
div { pre {
flex: 1;
color: $interactive-normal;
border: 1px solid $background-tertiary;
background: $background-secondary;
padding: 8px 6px;
margin: 4px 0;
border-radius: 4px;
display: block;
flex: 1; flex: 1;
pre { code {
color: $interactive-normal;
border: 1px solid $background-tertiary;
background: $background-secondary;
padding: 8px 6px;
margin: 4px 0;
border-radius: 4px;
display: block; display: block;
flex: 1;
code {
display: block;
}
} }
} }
} }
@ -212,26 +220,22 @@
} }
&.event { &.event {
flex: 1;
overflow: hidden;
display: flex;
height: 15px;
color: $text-muted; color: $text-muted;
cursor: default; cursor: default;
span { .content {
white-space: nowrap; min-width: 0;
max-width: 250px; box-sizing: border-box;
text-overflow: ellipsis; word-wrap: break-word;
overflow: hidden; display: inline-block;
height: 15px; vertical-align: baseline;
line-height: 20px;
strong { strong {
font-weight: 600; font-weight: 600;
} }
i { i {
float: right;
font-style: italic; font-style: italic;
font-size: 10px; font-size: 10px;
} }
@ -263,6 +267,13 @@
border-radius: 5px; border-radius: 5px;
display: flex; display: flex;
.emoji {
width: 20px;
height: 20px;
// background: #fff;
margin: 3px 3px 0 0;
}
textarea { textarea {
flex: 1; flex: 1;
font-family: $text-family; font-family: $text-family;
@ -364,7 +375,8 @@
} }
timestamp(time: Date) { timestamp(time: Date) {
return formatRelative(time, new Date()) const str = formatRelative(time, new Date())
return `${str.charAt(0).toUpperCase()}${str.slice(1)}`
} }
onContext(event: MouseEvent, data: any) { onContext(event: MouseEvent, data: any) {

6
client/src/components/markdown.ts
View File

@ -202,10 +202,10 @@ const rules: MarkdownRules = {
match: source => /^[\s\S]+?(?=[^0-9A-Za-z\s\u00c0-\uffff-]|\n\n|\n|\w+:\S|$)/.exec(source), match: source => /^[\s\S]+?(?=[^0-9A-Za-z\s\u00c0-\uffff-]|\n\n|\n|\w+:\S|$)/.exec(source),
html(node, output, state) { html(node, output, state) {
if (state.escapeHTML) { if (state.escapeHTML) {
return htmlTag('span', md.sanitizeText(node.content), {}, state) return md.sanitizeText(node.content)
} }
return htmlTag('span', node.content, {}, state) return node.content
}, },
}, },
br: { br: {
@ -234,7 +234,7 @@ const rules: MarkdownRules = {
} }
}, },
html(node, output, state) { html(node, output, state) {
return htmlTag('span', output(node.content, state), { class: 'spoiler' }, state) //htmlTag('span', , { }, state) return htmlTag('span', htmlTag('span', output(node.content, state), {}, state), { class: 'spoiler' }, state) //htmlTag('span', , { }, state)
}, },
}, },
} }