-
Notifications
You must be signed in to change notification settings - Fork 8
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix(KtComment): fix/enhance/refact KtComments
- fix: stop avatar from getting squished - fix: prefix all class names with `kt-` - fix: stop the inline edit from resizing - feat: add translations to edit/delete options - fix: options not skipping stacking context (by using tippy) - refact: introduce common components for reply button - refact: common component for inline edit - refact: common component for options - refact: migrate to ts where possible - refact: delete dead classes and move style sheets to ..relevant components rather than _comments.scss
- versions/yoco/2.11.0
- versions/yoco/2.6.0
- versions/yoco/2.5.0
- versions/vue-use-tippy/3.0.0
- versions/kotti-ui/8.5.0
- versions/kotti-ui/8.4.0
- versions/kotti-ui/8.3.2
- versions/kotti-ui/8.3.0
- versions/kotti-ui/8.2.0
- versions/kotti-ui/8.1.0
- versions/kotti-ui/8.0.0
- versions/kotti-ui/7.3.0
- versions/kotti-ui/7.2.0
- versions/kotti-ui/7.1.0
- versions/kotti-ui/7.0.0
- versions/kotti-ui/6.0.1
- versions/kotti-ui/6.0.0
- versions/kotti-ui/6.0.0-rc
- versions/eslint-config/0.1.2
- versions/eslint-config/0.0.9
- versions/eslint-config/0.0.7
- versions/eslint-config/0.0.4
- v5.7.2
- v5.7.0
- v5.6.0
- v5.5.0
- v5.4.1
- v5.4.0
- v5.3.3
- v5.3.2
- v5.3.1
- v5.3.0
- v5.2.1
- v5.2.0
- v5.1.0
- v5.0.0
- v4.1.0
- v4.0.8
- v4.0.7
- v4.0.6
- v4.0.5
- v4.0.4
- v4.0.3
- v4.0.2
- v4.0.1
- v4.0.0
- v3.0.0-beta.45
- v3.0.0-beta.44
- v3.0.0-beta.43
- v3.0.0-beta.42
- v3.0.0-beta.41
- v3.0.0-beta.40
- v3.0.0-beta.39
- v3.0.0-beta.38
- v3.0.0-beta.37
- v3.0.0-beta.36
- v3.0.0-beta.35
- v3.0.0-beta.34
- v3.0.0-beta.33
- v3.0.0-beta.32
- v3.0.0-beta.31
- v3.0.0-beta.30
- v3.0.0-beta.29
- v3.0.0-beta.28
- v3.0.0-beta.27
- v3.0.0-beta.26
- v3.0.0-beta.25
- v3.0.0-beta.24
- v3.0.0-beta.23
- v3.0.0-beta.22
- v3.0.0-beta.21
- v3.0.0-beta.20
- v3.0.0-beta.19
- 8.1.0
Showing
19 changed files
with
539 additions
and
485 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
58 changes: 58 additions & 0 deletions
58
packages/kotti-ui/source/kotti-comment/components/CommentActions.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,58 @@ | ||
<template> | ||
<div class="kt-comment__content__actions"> | ||
<CommentActionsReply @click="handleReplyClick" /> | ||
<CommentActionsOptions :options="options" /> | ||
</div> | ||
</template> | ||
|
||
<script lang="ts"> | ||
import { defineComponent } from '@vue/composition-api' | ||
import { Kotti } from '../../types' | ||
import CommentActionsOptions from './CommentActionsOptions.vue' | ||
import CommentActionsReply from './CommentActionsReply.vue' | ||
export default defineComponent<{ | ||
options: Kotti.Popover.Props['options'] | ||
userData: Kotti.Comment.UserData | ||
}>({ | ||
name: 'CommentActions', | ||
props: { | ||
options: { type: Array, required: true }, | ||
userData: { type: Object, required: true }, | ||
}, | ||
components: { | ||
CommentActionsOptions, | ||
CommentActionsReply, | ||
}, | ||
setup(props, { emit }) { | ||
return { | ||
handleReplyClick: () => emit('replyClick', props.userData), | ||
} | ||
}, | ||
}) | ||
</script> | ||
|
||
<style lang="scss" scoped> | ||
.kt-comment__content__actions { | ||
display: flex; | ||
justify-content: space-between; | ||
margin: 0.2rem 0; | ||
font-size: 0.7rem; | ||
font-weight: 600; | ||
line-height: 1.2rem; | ||
color: var(--link-02); | ||
> * { | ||
&:hover { | ||
color: var(--link-03); | ||
cursor: pointer; | ||
} | ||
} | ||
.yoco { | ||
font-size: 0.9rem; | ||
} | ||
} | ||
</style> |
32 changes: 32 additions & 0 deletions
32
packages/kotti-ui/source/kotti-comment/components/CommentActionsOptions.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,32 @@ | ||
<template> | ||
<KtPopover | ||
v-if="options.length > 0" | ||
class="kt-comment__actions__more-options" | ||
:clickBehavior="clickBehavior" | ||
:options="options" | ||
placement="bottom" | ||
trigger="click" | ||
> | ||
<i class="yoco" v-text="'dots'" /> | ||
</KtPopover> | ||
</template> | ||
|
||
<script lang="ts"> | ||
import { defineComponent } from '@vue/composition-api' | ||
import { Kotti } from '../../types' | ||
export default defineComponent<{ | ||
options: Array<Kotti.Popover.Props['options']> | ||
}>({ | ||
name: 'CommentActionsOptions', | ||
props: { | ||
options: { type: Array, required: true }, | ||
}, | ||
setup() { | ||
return { | ||
clickBehavior: Kotti.Popover.ClickBehavior.HIDE_ON_CLICK_AWAY, | ||
} | ||
}, | ||
}) | ||
</script> |
37 changes: 37 additions & 0 deletions
37
packages/kotti-ui/source/kotti-comment/components/CommentActionsReply.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,37 @@ | ||
<template> | ||
<div class="kt-comment__actions__reply" @click="$emit('click')"> | ||
<i class="yoco" v-text="'comment'" /> | ||
<span v-text="replyButtonText" /> | ||
</div> | ||
</template> | ||
|
||
<script lang="ts"> | ||
import { computed, defineComponent } from '@vue/composition-api' | ||
import { useTranslationNamespace } from '../../kotti-i18n/hooks' | ||
export default defineComponent({ | ||
name: 'CommentAcionsReply', | ||
props: {}, | ||
setup() { | ||
const translations = useTranslationNamespace('KtComment') | ||
return { | ||
replyButtonText: computed(() => translations.value.replyButton), | ||
} | ||
}, | ||
}) | ||
</script> | ||
|
||
<style lang="scss" scoped> | ||
.kt-comment__actions__reply { | ||
display: flex; | ||
flex: 0 0 auto; | ||
align-items: center; | ||
padding: 0 var(--unit-01); | ||
> *:not(:last-child) { | ||
margin-right: var(--unit-01); | ||
} | ||
} | ||
</style> |
96 changes: 96 additions & 0 deletions
96
packages/kotti-ui/source/kotti-comment/components/CommentInlineEdit.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,96 @@ | ||
<template> | ||
<div v-if="!isEditing" class="kt-comment-inline-edit__message"> | ||
<!-- eslint-disable vue/no-v-html --> | ||
<span v-html="postEscapeParser(dangerouslyOverrideParser(message))" /> | ||
<!-- eslint-enable vue/no-v-html --> | ||
</div> | ||
<div v-else class="kt-comment-inline-edit"> | ||
<textarea v-model="inlineValue" class="form-input" /> | ||
<KtButtonGroup class="kt-comment-inline-edit__buttons"> | ||
<KtButton icon="close" @click="handleCancel" /> | ||
<KtButton icon="check" @click="handleConfirm" /> | ||
</KtButtonGroup> | ||
</div> | ||
</template> | ||
|
||
<script lang="ts"> | ||
import { defineComponent, ref, watch } from '@vue/composition-api' | ||
import { Kotti } from '../../types' | ||
export default defineComponent<{ | ||
dangerouslyOverrideParser: () => void | ||
id: Kotti.Comment.PropsInternal['id'] | ||
isEditing: boolean | ||
postEscapeParser: () => void | ||
message: string | ||
}>({ | ||
name: 'CommentInlineEdit', | ||
props: { | ||
dangerouslyOverrideParser: { type: Function, required: true }, | ||
id: { type: Number, required: true }, | ||
isEditing: { type: Boolean, required: true }, | ||
postEscapeParser: { type: Function, required: true }, | ||
message: { type: String, required: true }, | ||
}, | ||
setup(props, { emit }) { | ||
const inlineValue = ref<string | null>(null) | ||
watch( | ||
() => props.isEditing, | ||
(newValue) => { | ||
if (newValue === true) { | ||
inlineValue.value = props.message | ||
} | ||
}, | ||
{ immediate: true }, | ||
) | ||
return { | ||
handleConfirm: () => { | ||
emit('update:isEditing', false) | ||
if (inlineValue.value === null) return | ||
const payload: Kotti.Comment.Events.InternalEdit = { | ||
id: props.id, | ||
message: inlineValue.value, | ||
} | ||
emit('edit', payload) | ||
}, | ||
handleCancel: () => { | ||
emit('update:isEditing', false) | ||
inlineValue.value === null | ||
}, | ||
inlineValue, | ||
} | ||
}, | ||
}) | ||
</script> | ||
|
||
<style lang="scss" scoped> | ||
@import '../../kotti-field/mixins'; | ||
.kt-comment-inline-edit { | ||
position: relative; | ||
width: 100%; | ||
textarea { | ||
resize: vertical; | ||
@include prettify-scrollbar; | ||
} | ||
&__buttons { | ||
position: absolute; | ||
right: 0; | ||
z-index: 9999; // use tippy | ||
} | ||
&__message { | ||
display: flex; | ||
align-items: center; | ||
word-break: break-word; | ||
} | ||
} | ||
</style> |
176 changes: 74 additions & 102 deletions
176
packages/kotti-ui/source/kotti-comment/components/CommentReply.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,131 +1,103 @@ | ||
<template> | ||
<div class="comment-reply"> | ||
<KtAvatar class="comment-reply__avatar" size="sm" :src="userAvatar" /> | ||
<div class="comment-reply__wrapper"> | ||
<div class="comment-reply__info"> | ||
<div class="comment-reply__name" v-text="userName" /> | ||
<div class="comment-reply__time" v-text="createdTime" /> | ||
</div> | ||
<div class="comment-reply__body"> | ||
<div | ||
v-if="!isInlineEdit" | ||
class="comment-reply__message" | ||
@click="$emit('_inlineReplyClick', { userName, userId })" | ||
> | ||
<!-- eslint-disable vue/no-v-html --> | ||
<span | ||
v-html="postEscapeParser(dangerouslyOverrideParser(inlineMessage))" | ||
/> | ||
<!-- eslint-enable vue/no-v-html --> | ||
<i class="yoco" v-text="'comment'" /> | ||
</div> | ||
<div v-else class="comment-inline-edit form-group"> | ||
<textarea | ||
v-model="inlineMessageValue" | ||
class="comment-inline-edit-input form-input" | ||
></textarea> | ||
<KtButtonGroup class="comment-inline-edit-buttons"> | ||
<KtButton icon="close" @click="cancelInlineEdit" /> | ||
<KtButton icon="check" @click="handleConfirm" /> | ||
</KtButtonGroup> | ||
</div> | ||
<div | ||
v-if="!isInlineEdit & (actionOptions.length > 0)" | ||
class="comment-reply__action action__more" | ||
> | ||
<i class="yoco">dots</i> | ||
<div class="action__options"> | ||
<a | ||
v-for="(option, index) in actionOptions" | ||
:key="index" | ||
@click="option.onClick" | ||
> | ||
<li v-text="option.label" /> | ||
</a> | ||
</div> | ||
</div> | ||
<div class="comment-reply__content"> | ||
<div class="comment-reply__content__info"> | ||
<div class="info__name" v-text="userName" /> | ||
<div class="info__time" v-text="createdTime" /> | ||
</div> | ||
|
||
<CommentInlineEdit | ||
:id="id" | ||
:dangerouslyOverrideParser="dangerouslyOverrideParser" | ||
:isEditing="isEditing" | ||
:message="message" | ||
:postEscapeParser="postEscapeParser" | ||
@edit="($event) => $emit('edit', $event)" | ||
@update:isEditing="($event) => (isEditing = $event)" | ||
/> | ||
|
||
<CommentActions | ||
:options="actionOptions" | ||
:userData="{ userId, userName }" | ||
@replyClick="($event) => $emit('click', $event)" | ||
/> | ||
</div> | ||
</div> | ||
</template> | ||
|
||
<script> | ||
<script lang="ts"> | ||
import { computed, defineComponent, ref } from '@vue/composition-api' | ||
import escape from 'lodash/escape' | ||
import { KtAvatar } from '../../kotti-avatar' | ||
import { KtButton } from '../../kotti-button' | ||
import { KtButtonGroup } from '../../kotti-button-group' | ||
import { useTranslationNamespace } from '../../kotti-i18n/hooks' | ||
import { Kotti } from '../../types' | ||
export default { | ||
import CommentActions from './CommentActions.vue' | ||
import CommentInlineEdit from './CommentInlineEdit.vue' | ||
export default defineComponent<Kotti.Comment.Reply.PropsInternal>({ | ||
name: 'CommentReply', | ||
components: { | ||
KtAvatar, | ||
KtButton, | ||
KtButtonGroup, | ||
CommentActions, | ||
CommentInlineEdit, | ||
}, | ||
props: { | ||
createdTime: String, | ||
createdTime: { default: () => null, type: String }, | ||
dangerouslyOverrideParser: { default: escape, type: Function }, | ||
isDeletable: { default: false, type: Boolean }, | ||
isEditable: { default: false, type: Boolean }, | ||
id: [Number, String], | ||
message: String, | ||
id: { default: () => null, type: [Number, String] }, | ||
message: { type: String, required: true }, | ||
parser: { default: escape, type: Function }, | ||
postEscapeParser: { default: (_) => _, type: Function }, | ||
userAvatar: String, | ||
userId: [Number, String], | ||
userName: String, | ||
userAvatar: { default: () => null, type: String }, | ||
userId: { default: () => null, type: Number }, | ||
userName: { default: () => null, type: String }, | ||
}, | ||
data() { | ||
setup(props, { emit }) { | ||
const isEditing = ref<boolean>(false) | ||
const translations = useTranslationNamespace('KtComment') | ||
return { | ||
inlineMessageValue: '', | ||
isInlineEdit: false, | ||
actionOptions: computed(() => { | ||
const options = [] | ||
if (props.isEditable) | ||
options.push({ | ||
label: translations.value.editButton, | ||
onClick: () => (isEditing.value = true), | ||
}) | ||
if (props.isDeletable) | ||
options.push({ | ||
label: translations.value.deleteButton, | ||
onClick: () => emit('delete', props.id), | ||
}) | ||
return options | ||
}), | ||
isEditing, | ||
} | ||
}, | ||
computed: { | ||
inlineMessage() { | ||
return this.inlineMessageValue || this.message | ||
}, | ||
actionOptions() { | ||
const options = [] | ||
if (this.isEditable) | ||
options.push({ | ||
label: 'Edit', | ||
onClick: () => { | ||
this.inlineMessageValue = this.inlineMessage | ||
this.isInlineEdit = true | ||
}, | ||
}) | ||
if (this.isDeletable) | ||
options.push({ | ||
label: 'Delete', | ||
onClick: () => this.$emit('_inlineDeleteClick', this.id), | ||
}) | ||
return options | ||
}, | ||
}, | ||
methods: { | ||
cancelInlineEdit() { | ||
this.inlineMessageValue = '' | ||
this.isInlineEdit = false | ||
}, | ||
handleInlineInput(event) { | ||
this.inlineMessageValue = event.target.value | ||
}, | ||
handleConfirm() { | ||
this.isInlineEdit = false | ||
if (!this.inlineMessageValue) return | ||
this.$emit('_inlineEditSubmit', { | ||
message: this.inlineMessageValue, | ||
id: this.id, | ||
}) | ||
}, | ||
}, | ||
} | ||
}) | ||
</script> | ||
|
||
<style lang="scss" scoped> | ||
.comment-reply__message { | ||
.comment-reply { | ||
display: flex; | ||
align-items: center; | ||
padding: var(--unit-1) 0; | ||
&__content { | ||
display: flex; | ||
flex-direction: column; | ||
width: 100%; | ||
margin-left: var(--unit-2); | ||
&__info { | ||
display: flex; | ||
flex-direction: row; | ||
margin-bottom: var(--unit-h); | ||
font-size: calc(var(--unit-3) + var(--unit-h)); | ||
line-height: calc(var(--unit-3) + var(--unit-h)); | ||
} | ||
} | ||
} | ||
</style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,4 +1,5 @@ | ||
import escape from 'lodash/escape' | ||
|
||
export const defaultParser = (message: string) => escape(message) | ||
export const defaultPostEscapeParser = (message: string) => message | ||
export const defaultPostEscapeParser = (message: string) => | ||
message.replace(/\n/g, '</br>') |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,222 +1,12 @@ | ||
.comment { | ||
display: flex; | ||
flex-flow: row; | ||
|
||
+ .comment { | ||
padding-top: var(--unit-1); | ||
border-top: 1px solid var(--ui-02); | ||
} | ||
} | ||
|
||
.comment__avatar { | ||
flex: 0 0 2.4rem; | ||
height: 2.4rem; | ||
} | ||
|
||
.comment__wrapper { | ||
display: flex; | ||
flex: 1 1 auto; | ||
flex-direction: column; | ||
margin-left: 0.4rem; | ||
} | ||
|
||
.comment__info { | ||
display: flex; | ||
flex-direction: row; | ||
width: 100%; | ||
font-size: 0.7rem; | ||
line-height: 1.2rem; | ||
} | ||
|
||
.info__name { | ||
flex: 1 1; | ||
font-weight: 600; | ||
} | ||
|
||
.info__time { | ||
flex: 1 1; | ||
color: $lightgray-500; | ||
text-align: right; | ||
} | ||
|
||
.comment__message { | ||
font-size: 0.75rem; | ||
line-height: 1.2rem; | ||
word-break: break-word; | ||
} | ||
|
||
.comment__action, | ||
.comment-reply__action { | ||
display: flex; | ||
flex-direction: row; | ||
justify-content: space-between; | ||
margin: 0.2rem 0; | ||
font-size: 0.7rem; | ||
font-weight: 600; | ||
line-height: 1.2rem; | ||
color: $lightgray-500; | ||
.yoco { | ||
font-size: 0.9rem; | ||
} | ||
} | ||
|
||
.comment-inline-edit { | ||
position: relative; | ||
width: 100%; | ||
} | ||
.comment-inline-edit-buttons { | ||
position: absolute; | ||
right: 0; | ||
z-index: $zindex-4; | ||
} | ||
|
||
.action__options { | ||
position: absolute; | ||
top: 1.2rem; | ||
right: 0; | ||
z-index: $zindex-4; | ||
display: none; | ||
height: auto; | ||
padding: 0.4rem 0; | ||
line-height: 1.4rem; | ||
text-align: left; | ||
background: #ffffff; | ||
border-radius: var(--border-radius); | ||
box-shadow: $box-shadow; | ||
li { | ||
padding: 0.2rem 1rem; | ||
list-style: none; | ||
} | ||
li:hover { | ||
background: $lightgray-300; | ||
} | ||
} | ||
|
||
.action__reply { | ||
flex: 0 0 auto; | ||
padding: 0 0.2rem; | ||
border-radius: 0.2rem; | ||
&:hover { | ||
color: $darkgray-400; | ||
cursor: pointer; | ||
background: $lightgray-400; | ||
} | ||
} | ||
.action__more { | ||
position: relative; | ||
display: inline-block; | ||
flex: 0 0 2rem; | ||
padding: 0 0.2rem; | ||
text-align: center; | ||
border-radius: 0.2rem; | ||
&:hover { | ||
color: $darkgray-400; | ||
cursor: pointer; | ||
background: $lightgray-400; | ||
.action__options { | ||
display: block; | ||
} | ||
} | ||
} | ||
|
||
// Comment Reply => KtCommentReply | ||
|
||
.comment-reply { | ||
display: flex; | ||
flex-direction: row; | ||
padding: 0.2rem 0; | ||
&__wrapper { | ||
display: flex; | ||
flex-direction: column; | ||
width: 100%; | ||
margin-left: 0.4rem; | ||
} | ||
&__avatar { | ||
flex: 0 0 1.6rem; | ||
} | ||
&__info { | ||
display: flex; | ||
flex-direction: row; | ||
margin-bottom: 0.1rem; | ||
font-size: 0.7rem; | ||
line-height: 0.7rem; | ||
} | ||
.info { | ||
&__name { | ||
flex: 1 1; | ||
font-weight: 600; | ||
} | ||
|
||
&__time { | ||
flex: 1 1 auto; | ||
flex: 1 1; | ||
color: $lightgray-500; | ||
text-align: right; | ||
} | ||
&__body { | ||
display: flex; | ||
flex-direction: row; | ||
justify-content: space-between; | ||
} | ||
&__message { | ||
width: 100%; | ||
font-size: 0.65rem; | ||
line-height: 1rem; | ||
word-break: break-word; | ||
.yoco { | ||
display: none; | ||
font-size: 0.8rem; | ||
color: #a8a8a8; | ||
} | ||
&:hover { | ||
cursor: pointer; | ||
.yoco { | ||
display: inline; | ||
color: $darkgray-400; | ||
} | ||
} | ||
} | ||
} | ||
|
||
// KtCommentInput | ||
|
||
.comment-input { | ||
box-sizing: border-box; | ||
display: flex; | ||
flex-direction: row; | ||
&--inline { | ||
margin: 0; | ||
} | ||
&__wrapper { | ||
display: flex; | ||
flex-direction: row; | ||
align-items: center; | ||
width: 100%; | ||
padding: 0.4rem; | ||
background: #fff; | ||
border: 1px solid #dbdbdb; | ||
border-radius: var(--border-radius); | ||
&--focus { | ||
border: 1px solid #bbb; | ||
} | ||
&--inline { | ||
padding: 0.2rem; | ||
} | ||
} | ||
&__avatar { | ||
flex: 0 0 1.6rem; | ||
align-self: flex-start; | ||
} | ||
&__textarea { | ||
flex: 1 1; | ||
width: 100%; | ||
height: 1.2rem; | ||
padding: 0; | ||
margin: 0 0.2rem; | ||
resize: none; | ||
border: 0; | ||
&:focus { | ||
outline: none; | ||
} | ||
} | ||
&__button { | ||
height: 1.6rem; | ||
} | ||
} |