From bf9d4cb4f4e3b95fde6a3f2446cd1d7900eb1bf0 Mon Sep 17 00:00:00 2001 From: Carol Soliman <17387510+carsoli@users.noreply.github.com> Date: Tue, 3 May 2022 12:08:44 +0000 Subject: [PATCH 01/49] fix(KtComment): avatar gets squashed with large comments the comment-wrapper had flex: 1 1 auto changing it to flex: 1 means that it became flex: 1 1 0 the flex-basis is the third property/value changing it to `0` means that the elements WON'T change size after the space is redistributed this guarantees that the comment_wrapper doesn't take more space, ...and therefore squash the avatar --- packages/kotti-ui/source/kotti-style/_comments.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/kotti-ui/source/kotti-style/_comments.scss b/packages/kotti-ui/source/kotti-style/_comments.scss index 117ed41eae..03cdeb912a 100644 --- a/packages/kotti-ui/source/kotti-style/_comments.scss +++ b/packages/kotti-ui/source/kotti-style/_comments.scss @@ -15,7 +15,7 @@ .comment__wrapper { display: flex; - flex: 1 1 auto; + flex: 1; flex-direction: column; margin-left: 0.4rem; } From 802472e4b213769c6d4984bc73c44d2dd650e0f8 Mon Sep 17 00:00:00 2001 From: Carol Soliman <17387510+carsoli@users.noreply.github.com> Date: Thu, 12 May 2022 19:55:12 +0000 Subject: [PATCH 02/49] refact(KtComment): move classes around w/o changes --- .../source/kotti-style/_comments.scss | 169 ++++++++++-------- 1 file changed, 90 insertions(+), 79 deletions(-) diff --git a/packages/kotti-ui/source/kotti-style/_comments.scss b/packages/kotti-ui/source/kotti-style/_comments.scss index 03cdeb912a..a2a6bce87e 100644 --- a/packages/kotti-ui/source/kotti-style/_comments.scss +++ b/packages/kotti-ui/source/kotti-style/_comments.scss @@ -6,44 +6,52 @@ padding-top: var(--unit-1); border-top: 1px solid var(--ui-02); } -} -.comment__avatar { - flex: 0 0 2.4rem; - height: 2.4rem; -} + &__avatar { + flex: 0 0 2.4rem; + height: 2.4rem; + } -.comment__wrapper { - display: flex; - flex: 1; - flex-direction: column; - margin-left: 0.4rem; -} + &__wrapper { + display: flex; + flex: 1; + 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 { + display: flex; + flex-direction: row; + width: 100%; + font-size: 0.7rem; + line-height: 1.2rem; + } + + &__message { + font-size: 0.75rem; + line-height: 1.2rem; + word-break: break-word; + } } -.info__name { + + +.info{ + &__name { flex: 1 1; font-weight: 600; -} + } -.info__time { - flex: 1 1; - color: $lightgray-500; - text-align: right; + &__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 { @@ -54,7 +62,8 @@ font-size: 0.7rem; font-weight: 600; line-height: 1.2rem; - color: $lightgray-500; + color: var(--text-02); + .yoco { font-size: 0.9rem; } @@ -63,64 +72,67 @@ .comment-inline-edit { position: relative; width: 100%; + &-buttons { + position: absolute; + right: 0; + z-index: $zindex-4; + } } -.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 { + &__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; + &__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; + + &__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 - +// CommentReply .comment-reply { display: flex; flex-direction: row; @@ -176,7 +188,6 @@ } // KtCommentInput - .comment-input { box-sizing: border-box; display: flex; From 1e85813ad2a214c18dce69c5f56fd1a28949bdb3 Mon Sep 17 00:00:00 2001 From: Carol Soliman <17387510+carsoli@users.noreply.github.com> Date: Fri, 13 May 2022 09:22:29 +0000 Subject: [PATCH 03/49] feat(KtComment): add translations to edit and delete --- packages/kotti-ui/source/kotti-comment/KtComment.vue | 4 ++-- packages/kotti-ui/source/kotti-comment/types.ts | 2 ++ packages/kotti-ui/source/kotti-i18n/locales/de-DE.ts | 2 ++ packages/kotti-ui/source/kotti-i18n/locales/en-US.ts | 2 ++ packages/kotti-ui/source/kotti-i18n/locales/es-ES.ts | 2 ++ packages/kotti-ui/source/kotti-i18n/locales/fr-FR.ts | 2 ++ packages/kotti-ui/source/kotti-i18n/locales/ja-JP.ts | 2 ++ 7 files changed, 14 insertions(+), 2 deletions(-) diff --git a/packages/kotti-ui/source/kotti-comment/KtComment.vue b/packages/kotti-ui/source/kotti-comment/KtComment.vue index 066a6a485c..f4fe598cbb 100644 --- a/packages/kotti-ui/source/kotti-comment/KtComment.vue +++ b/packages/kotti-ui/source/kotti-comment/KtComment.vue @@ -118,7 +118,7 @@ export default defineComponent({ if (isInlineEdit.value) return options if (props.isEditable) options.push({ - label: 'Edit', + label: translations.value.editButton, onClick: () => { inlineMessageValue.value = props.message isInlineEdit.value = true @@ -127,7 +127,7 @@ export default defineComponent({ }) if (props.isDeletable) options.push({ - label: 'Delete', + label: translations.value.deleteButton, onClick: () => handleDelete(props.id), type: KottiButton.Type.DANGER, }) diff --git a/packages/kotti-ui/source/kotti-comment/types.ts b/packages/kotti-ui/source/kotti-comment/types.ts index 53750bb7fc..10c34bacc1 100644 --- a/packages/kotti-ui/source/kotti-comment/types.ts +++ b/packages/kotti-ui/source/kotti-comment/types.ts @@ -45,6 +45,8 @@ export namespace KottiComment { } export type Translations = { + deleteButton: string + editButton: string postButton: string replyButton: string replyPlaceholder: string diff --git a/packages/kotti-ui/source/kotti-i18n/locales/de-DE.ts b/packages/kotti-ui/source/kotti-i18n/locales/de-DE.ts index cad9388c8f..ce3075d5fd 100644 --- a/packages/kotti-ui/source/kotti-i18n/locales/de-DE.ts +++ b/packages/kotti-ui/source/kotti-i18n/locales/de-DE.ts @@ -21,6 +21,8 @@ export const deDE: KottiI18n.Messages = { expandCloseLabel: 'Schließen', }, KtComment: { + deleteButton: 'Löschen', + editButton: 'Bearbeiten', postButton: 'Beitragen', replyButton: 'Antworten', replyPlaceholder: 'Antwort an', diff --git a/packages/kotti-ui/source/kotti-i18n/locales/en-US.ts b/packages/kotti-ui/source/kotti-i18n/locales/en-US.ts index 4d0744a9e8..0b2c950733 100644 --- a/packages/kotti-ui/source/kotti-i18n/locales/en-US.ts +++ b/packages/kotti-ui/source/kotti-i18n/locales/en-US.ts @@ -21,6 +21,8 @@ export const enUS: KottiI18n.Messages = { expandCloseLabel: 'Close', }, KtComment: { + deleteButton: 'Delete', + editButton: 'Edit', postButton: 'Post', replyButton: 'Reply', replyPlaceholder: 'Reply to', diff --git a/packages/kotti-ui/source/kotti-i18n/locales/es-ES.ts b/packages/kotti-ui/source/kotti-i18n/locales/es-ES.ts index edc8242550..4a514abaf4 100644 --- a/packages/kotti-ui/source/kotti-i18n/locales/es-ES.ts +++ b/packages/kotti-ui/source/kotti-i18n/locales/es-ES.ts @@ -21,6 +21,8 @@ export const esES: KottiI18n.Messages = { expandCloseLabel: 'Cerrar', }, KtComment: { + deleteButton: 'Borrar', + editButton: 'Editar', postButton: 'Publicar', replyButton: 'Responder', replyPlaceholder: 'Responder a', diff --git a/packages/kotti-ui/source/kotti-i18n/locales/fr-FR.ts b/packages/kotti-ui/source/kotti-i18n/locales/fr-FR.ts index 1245a8404d..d515064cd0 100644 --- a/packages/kotti-ui/source/kotti-i18n/locales/fr-FR.ts +++ b/packages/kotti-ui/source/kotti-i18n/locales/fr-FR.ts @@ -21,6 +21,8 @@ export const frFR: KottiI18n.Messages = { expandCloseLabel: 'Fermer', }, KtComment: { + deleteButton: 'Effacer', + editButton: 'Modifier', postButton: 'Commenter', replyButton: 'Répondre', replyPlaceholder: 'Répondre à', diff --git a/packages/kotti-ui/source/kotti-i18n/locales/ja-JP.ts b/packages/kotti-ui/source/kotti-i18n/locales/ja-JP.ts index 1df9ac4881..ed3ff97694 100644 --- a/packages/kotti-ui/source/kotti-i18n/locales/ja-JP.ts +++ b/packages/kotti-ui/source/kotti-i18n/locales/ja-JP.ts @@ -21,6 +21,8 @@ export const jaJP: KottiI18n.Messages = { expandCloseLabel: '閉じる', }, KtComment: { + deleteButton: '消す', + editButton: 'エディット', postButton: '送信', replyButton: '返信', replyPlaceholder: '返信', From 01991668f5ef89e0a15c6f2bbf210c4760767730 Mon Sep 17 00:00:00 2001 From: Carol Soliman <17387510+carsoli@users.noreply.github.com> Date: Fri, 13 May 2022 10:20:08 +0000 Subject: [PATCH 04/49] feat(KtComment): add CommentOptions component --- .../source/kotti-comment/KtComment.vue | 22 +++------- .../components/CommentOptions.vue | 32 +++++++++++++++ .../kotti-comment/components/CommentReply.vue | 19 ++------- .../source/kotti-style/_comments.scss | 40 ------------------- 4 files changed, 42 insertions(+), 71 deletions(-) create mode 100644 packages/kotti-ui/source/kotti-comment/components/CommentOptions.vue diff --git a/packages/kotti-ui/source/kotti-comment/KtComment.vue b/packages/kotti-ui/source/kotti-comment/KtComment.vue index f4fe598cbb..a5a007d78e 100644 --- a/packages/kotti-ui/source/kotti-comment/KtComment.vue +++ b/packages/kotti-ui/source/kotti-comment/KtComment.vue @@ -30,18 +30,7 @@ > {{ replyButton }} -
- dots -
- -
  • {{ option.label }}
    • -     -
    -
    +
    ({ KtButton, KtButtonGroup, CommentReply, + CommentOptions, KtCommentInput, }, props: makeProps(KottiComment.propsSchema), @@ -113,7 +104,7 @@ export default defineComponent({ emit('delete', payload) } return { - actionOptions: computed>(() => { + actionOptions: computed(() => { const options = [] if (isInlineEdit.value) return options if (props.isEditable) @@ -123,13 +114,11 @@ export default defineComponent({ inlineMessageValue.value = props.message isInlineEdit.value = true }, - type: KottiButton.Type.PRIMARY, }) if (props.isDeletable) options.push({ label: translations.value.deleteButton, onClick: () => handleDelete(props.id), - type: KottiButton.Type.DANGER, }) return options }), @@ -157,6 +146,7 @@ export default defineComponent({ inlineMessage: computed(() => inlineMessageValue.value ?? props.message), inlineMessageValue, isInlineEdit, + Kotti, placeholder: computed(() => userBeingRepliedTo.value === null ? null diff --git a/packages/kotti-ui/source/kotti-comment/components/CommentOptions.vue b/packages/kotti-ui/source/kotti-comment/components/CommentOptions.vue new file mode 100644 index 0000000000..4a520b7001 --- /dev/null +++ b/packages/kotti-ui/source/kotti-comment/components/CommentOptions.vue @@ -0,0 +1,32 @@ + + + + diff --git a/packages/kotti-ui/source/kotti-comment/components/CommentReply.vue b/packages/kotti-ui/source/kotti-comment/components/CommentReply.vue index 638928bc86..c38c695269 100644 --- a/packages/kotti-ui/source/kotti-comment/components/CommentReply.vue +++ b/packages/kotti-ui/source/kotti-comment/components/CommentReply.vue @@ -29,21 +29,7 @@
    -
    - dots -
    - -
  • - -
    • -
    + @@ -56,9 +42,12 @@ import { KtAvatar } from '../../kotti-avatar' import { KtButton } from '../../kotti-button' import { KtButtonGroup } from '../../kotti-button-group' +import CommentOptions from './CommentOptions.vue' + export default { name: 'CommentReply', components: { + CommentOptions, KtAvatar, KtButton, KtButtonGroup, diff --git a/packages/kotti-ui/source/kotti-style/_comments.scss b/packages/kotti-ui/source/kotti-style/_comments.scss index a2a6bce87e..45990288ff 100644 --- a/packages/kotti-ui/source/kotti-style/_comments.scss +++ b/packages/kotti-ui/source/kotti-style/_comments.scss @@ -80,29 +80,6 @@ } .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; - } - } - &__reply { flex: 0 0 auto; padding: 0 0.2rem; @@ -113,23 +90,6 @@ background: $lightgray-400; } } - - &__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; - } - } - } } // CommentReply From fe9874af416662b11419465f6f67323e87f28c55 Mon Sep 17 00:00:00 2001 From: Carol Soliman <17387510+carsoli@users.noreply.github.com> Date: Fri, 13 May 2022 17:34:25 +0000 Subject: [PATCH 05/49] fix(CommentActionsOptions): clickbehavior prop rename CommentOptions -> CommentActionsOptions also, delete unnecessary imports / components of Kotti-registered components --- packages/kotti-ui/source/kotti-comment/KtComment.vue | 10 ++-------- .../{CommentOptions.vue => CommentActionsOptions.vue} | 7 ++++--- .../source/kotti-comment/components/CommentReply.vue | 9 ++------- 3 files changed, 8 insertions(+), 18 deletions(-) rename packages/kotti-ui/source/kotti-comment/components/{CommentOptions.vue => CommentActionsOptions.vue} (73%) diff --git a/packages/kotti-ui/source/kotti-comment/KtComment.vue b/packages/kotti-ui/source/kotti-comment/KtComment.vue index a5a007d78e..7f42542748 100644 --- a/packages/kotti-ui/source/kotti-comment/KtComment.vue +++ b/packages/kotti-ui/source/kotti-comment/KtComment.vue @@ -65,14 +65,11 @@ + + diff --git a/packages/kotti-ui/source/kotti-comment/components/CommentActionsReply.vue b/packages/kotti-ui/source/kotti-comment/components/CommentActionsReply.vue new file mode 100644 index 0000000000..b09d7d64ac --- /dev/null +++ b/packages/kotti-ui/source/kotti-comment/components/CommentActionsReply.vue @@ -0,0 +1,37 @@ + + + + + diff --git a/packages/kotti-ui/source/kotti-comment/components/CommentReply.vue b/packages/kotti-ui/source/kotti-comment/components/CommentReply.vue index 6625e7140c..8d9cb2a7e1 100644 --- a/packages/kotti-ui/source/kotti-comment/components/CommentReply.vue +++ b/packages/kotti-ui/source/kotti-comment/components/CommentReply.vue @@ -17,7 +17,6 @@ v-html="postEscapeParser(dangerouslyOverrideParser(inlineMessage))" /> -
    + + + +
    -
    -
    - - - -
    -
    - - - - - -
    diff --git a/packages/kotti-ui/source/kotti-style/_comments.scss b/packages/kotti-ui/source/kotti-style/_comments.scss index 45990288ff..693c2b4bca 100644 --- a/packages/kotti-ui/source/kotti-style/_comments.scss +++ b/packages/kotti-ui/source/kotti-style/_comments.scss @@ -79,73 +79,7 @@ } } -.action { - &__reply { - flex: 0 0 auto; - padding: 0 0.2rem; - border-radius: 0.2rem; - &:hover { - color: $darkgray-400; - cursor: pointer; - background: $lightgray-400; - } - } -} -// CommentReply -.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; - } - &__name { - flex: 1 1; - font-weight: 600; - } - &__time { - flex: 1 1 auto; - 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 { From 1c453d88eec0d01b242abbdf38a1e961efd57479 Mon Sep 17 00:00:00 2001 From: Carol Soliman <17387510+carsoli@users.noreply.github.com> Date: Fri, 13 May 2022 19:14:27 +0000 Subject: [PATCH 08/49] feat(KtCommentInput): prefix classes with `kt-` move styles to component (from _comments.scss) fix margin bottom for inline (try it with a comment below a reply) ..previously it looked ugly removed dead comment-input__button style --- .../source/kotti-comment/KtCommentInput.vue | 75 +++++++++++++++---- .../source/kotti-style/_comments.scss | 47 ------------ 2 files changed, 60 insertions(+), 62 deletions(-) diff --git a/packages/kotti-ui/source/kotti-comment/KtCommentInput.vue b/packages/kotti-ui/source/kotti-comment/KtCommentInput.vue index 1c553d07c2..a23a666393 100644 --- a/packages/kotti-ui/source/kotti-comment/KtCommentInput.vue +++ b/packages/kotti-ui/source/kotti-comment/KtCommentInput.vue @@ -3,19 +3,19 @@
    + /> import { computed, defineComponent, ref } from '@vue/composition-api' -import { KtAvatar } from '../kotti-avatar' -import { KtButton } from '../kotti-button' import { useTranslationNamespace } from '../kotti-i18n/hooks' import { makeProps } from '../make-props' @@ -38,10 +36,6 @@ import { KottiCommentInput } from './types' export default defineComponent({ name: 'KtCommentInput', - components: { - KtAvatar, - KtButton, - }, props: makeProps(KottiCommentInput.propsSchema), setup(props, { emit }) { const translations = useTranslationNamespace('KtComment') @@ -51,8 +45,8 @@ export default defineComponent({ const textFocused = ref(false) return { containerClass: computed(() => ({ - 'comment-input': true, - 'comment-input--inline': props.isInline, + 'kt-comment-input': true, + 'kt-comment-input--inline': props.isInline, })), handleSubmitClick: () => { if (text.value === null) return @@ -77,13 +71,64 @@ export default defineComponent({ const height = textarea.value.scrollHeight textarea.value.style.height = `${height}px` }, - wrapperClass: computed(() => ({ - 'comment-input__wrapper': true, - 'comment-input__wrapper--focus': textFocused.value, - 'comment-input__wrapper--inline': props.isInline, + 'kt-comment-input__wrapper': true, + 'kt-comment-input__wrapper--focus': textFocused.value, + 'kt-comment-input__wrapper--inline': props.isInline, })), } }, }) + + diff --git a/packages/kotti-ui/source/kotti-style/_comments.scss b/packages/kotti-ui/source/kotti-style/_comments.scss index 693c2b4bca..ab8c83d075 100644 --- a/packages/kotti-ui/source/kotti-style/_comments.scss +++ b/packages/kotti-ui/source/kotti-style/_comments.scss @@ -78,50 +78,3 @@ z-index: $zindex-4; } } - - - -// 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; - } -} From e144bc5101a431fb9ec8d428fd249ead53a23016 Mon Sep 17 00:00:00 2001 From: Carol Soliman <17387510+carsoli@users.noreply.github.com> Date: Fri, 13 May 2022 19:16:36 +0000 Subject: [PATCH 09/49] feat(KtComment): prefix classes with `kt-` remove the now dead classes of `comment__action` and `comment-reply__action` ..replaced by components for the actions move ktComment styles to dedicated component instead of _comments.scss --- .../source/kotti-comment/KtComment.vue | 41 ++++++++++--- .../source/kotti-comment/KtCommentInput.vue | 2 +- .../source/kotti-style/_comments.scss | 57 ------------------- 3 files changed, 35 insertions(+), 65 deletions(-) diff --git a/packages/kotti-ui/source/kotti-comment/KtComment.vue b/packages/kotti-ui/source/kotti-comment/KtComment.vue index 1ff09f0594..8b6e732908 100644 --- a/packages/kotti-ui/source/kotti-comment/KtComment.vue +++ b/packages/kotti-ui/source/kotti-comment/KtComment.vue @@ -1,15 +1,16 @@