Change composer display

2024-11-22 14:58:14 +08:00 · 2021-08-08 10:57:15 +08:00 · 2021-08-08 10:57:15 +08:00 · c0daba0090
commit c0daba0090
parent 14f56dab39
6 changed files with 126 additions and 52 deletions
--- a/app/functions.php
+++ b/app/functions.php
@ -5,7 +5,7 @@
 define('SAKURA_VERSION', wp_get_theme()->get('Version'));
 define('SAKURA_TEXT_DOMAIN', wp_get_theme()->get('TextDomain'));

-define('SAKURA_DEVEPLOMENT', false);
+define('SAKURA_DEVEPLOMENT', true);
 define('SAKURA_DEVEPLOMENT_HOST', 'http://127.0.0.1:9000');

 // PHP loaders
--- a/src/components/content/components/comment/Comment.vue
+++ b/src/components/content/components/comment/Comment.vue
@ -160,7 +160,9 @@ export default defineComponent({
        .createComment({ authorEmail, authorName, authorUrl, content, parent, post })
        .then((res) => {
          const _commentData = cloneDeep(commentData.value) as Comment[]
-          _commentData.push(camelcaseKeys(res.data))
+          const response = camelcaseKeys(res.data)
+          response['noDisplayDelay'] = true
+          _commentData.push(response)
          setCommentData(_commentData)
          setTotalCount(totalCount.value + 1)
          // console.log(res.data, commentData.value)
@ -326,17 +328,16 @@ export default defineComponent({
    width: 100%;
  }
  .error__wrapper {
-    padding-top: 12px;
    width: 100%;
  }
  .pagination__wrapper {
-    padding-top: 12px;
    align-self: center;
  }
  .composer__wrapper {
    width: 100%;
  }
  .comment-list__title {
+    padding-top: 0;
    width: 100%;
    margin: 0 auto;
    color: #7d7d7d;
@ -354,14 +355,14 @@ export default defineComponent({
      // }
    }
  }
-  // .comment-list__wrapper {
-  // }
+  .comment-list__wrapper {
+    padding: 0;
+  }
  .updating-status__wrapper {
    width: 100%;
    padding: 0;
    .content__wrapper {
      width: 100%;
-      padding-bottom: 12px;
      .content {
        width: calc(100% - 24px);
        padding: 12px;
--- a/src/components/content/components/comment/CommentList.vue
+++ b/src/components/content/components/comment/CommentList.vue
@ -1,7 +1,12 @@
 <template>
  <div class="comment-list__container">
    <transition-group name="comment-list" tag="div">
-      <div class="item__wrapper" v-for="(item, index) in $props.data" :key="index + item.id">
+      <div
+        class="item__wrapper"
+        v-for="(item, index) in $props.data"
+        :key="index + item.id"
+        :style="{ '--animation-timeout': `${1 + (item.noDisplayDelay ? 0 : index) * 0.2}s` }"
+      >
        <CommentListItem :data="item"></CommentListItem>
      </div>
    </transition-group>
@ -19,9 +24,10 @@ export default defineComponent({
 </script>

 <style lang="scss" scoped>
-.comment-list {
+.comment-list__container {
+  .comment-list {
    &-enter-active {
-    animation: lightSpeedInLeft /* animate.css */ 1s ease-in;
+      animation: lightSpeedInLeft /* animate.css */ var(--animation-timeout) ease-in;
    }
    // &-leave-active {
    //   position: absolute;
@ -32,10 +38,12 @@ export default defineComponent({
      transition: transform 0.3s ease;
      transition-delay: 0.3s;
    }
-}
-.item__wrapper {
-  &:not(:first-child) {
+  }
+  .item__wrapper {
    padding-top: 12px;
+    &:last-child {
+      padding-bottom: 12px;
+    }
  }
 }
 </style>
--- a/src/components/content/components/comment/Composer.vue
+++ b/src/components/content/components/comment/Composer.vue
@ -40,41 +40,68 @@
    <div class="row__wrapper--privacy">
      <Toggler :show="shouldShowPrivacyOptions">
        <div class="options__wrapper">
-          <div class="option visibility">
-            <span>
-              <i class="fas fa-lock"></i>
-              {{ messages.privacy.visibility.title }}
-            </span>
+          <div class="option visibility" v-tippy="{ content: messages.privacy.visibility.title }">
            <Switcher
              v-model:checked="privacyIsPrivate"
              positiveLabel=""
              negativeLabel=""
-            ></Switcher>
-          </div>
-          <!-- <i class="fas fa-unlock"></i> -->
-          <!-- <i class="fas fa-globe"></i> -->
-          <div class="option anynomous">
+              :disableRipple="true"
+            >
+              <template #label-positive>
                <span>
-              <i class="fas fa-user-secret"></i>
-              {{ messages.privacy.anynomous.title }}
+                  <i class="fas fa-lock"></i>
+                  {{ messages.privacy.visibility.positive }}
                </span>
+              </template>
+              <template #label-negative>
+                <span>
+                  <i class="fas fa-unlock"></i>
+                  {{ messages.privacy.visibility.negative }}
+                </span>
+              </template>
+            </Switcher>
+          </div>
+          <div class="option anynomous" v-tippy="{ content: messages.privacy.anynomous.title }">
            <Switcher
              v-model:checked="privacyIsAnynomous"
              positiveLabel=""
              negativeLabel=""
-            ></Switcher>
-          </div>
-          <!-- <i class="fas fa-theater-masks"></i> -->
-          <div class="option inform">
+              :disableRipple="true"
+            >
+              <template #label-positive>
                <span>
-              <i class="fas fa-envelope"></i>
-              {{ messages.privacy.email.title }}
+                  <i class="fas fa-user-secret"></i>
+                  {{ messages.privacy.anynomous.positive }}
                </span>
+              </template>
+              <template #label-negative>
+                <span>
+                  <i class="fas fa-user-tie"></i>
+                  {{ messages.privacy.anynomous.negative }}
+                </span>
+              </template>
+            </Switcher>
+          </div>
+          <div class="option inform" v-tippy="{ content: messages.privacy.email.title }">
            <Switcher
              v-model:checked="privacyShouldInform"
              positiveLabel=""
              negativeLabel=""
-            ></Switcher>
+              :disableRipple="true"
+            >
+              <template #label-positive>
+                <span>
+                  <i class="fas fa-bell"></i>
+                  {{ messages.privacy.email.positive }}
+                </span>
+              </template>
+              <template #label-negative>
+                <span>
+                  <i class="fas fa-bell-slash"></i>
+                  {{ messages.privacy.email.negative }}
+                </span>
+              </template>
+            </Switcher>
          </div>
        </div>
      </Toggler>
@ -198,19 +225,44 @@ export default defineComponent({
        anynomous: {
          title: intl.formatMessage({
            id: 'posts.comment.composer.privacy.anynomous.title',
-            defaultMessage: 'Comment as anynomous user',
+            defaultMessage: 'Whether to comment as an anynomous user?',
+          }),
+          positive: intl.formatMessage({
+            id: 'posts.comment.composer.privacy.anynomous.positive',
+            defaultMessage: 'Anynomous',
+          }),
+          negative: intl.formatMessage({
+            id: 'posts.comment.composer.privacy.anynomous.negative',
+            defaultMessage: 'Autonym',
          }),
        },
        visibility: {
          title: intl.formatMessage({
            id: 'posts.comment.composer.privacy.visibility.title',
-            defaultMessage: 'Secret comment (only admins and peoples mentioned can see)',
+            defaultMessage:
+              'Whether to create secret comment that only admins and peoples mentioned can see?',
+          }),
+          positive: intl.formatMessage({
+            id: 'posts.comment.composer.privacy.anynomous.positive',
+            defaultMessage: 'Secret',
+          }),
+          negative: intl.formatMessage({
+            id: 'posts.comment.composer.privacy.anynomous.negative',
+            defaultMessage: 'Public',
          }),
        },
        email: {
          title: intl.formatMessage({
            id: 'posts.comment.composer.privacy.email.title',
-            defaultMessage: 'Inform me with email when receive reply',
+            defaultMessage: 'Whether to inform you with email when receiving reply?',
+          }),
+          positive: intl.formatMessage({
+            id: 'posts.comment.composer.privacy.email.positive',
+            defaultMessage: 'Subscribe',
+          }),
+          negative: intl.formatMessage({
+            id: 'posts.comment.composer.privacy.email.negative',
+            defaultMessage: 'Unsubscribe',
          }),
        },
      },
@ -363,9 +415,18 @@ export default defineComponent({
      }
    }
    &--privacy {
+      padding-top: 0;
      width: 100%;
      .options__wrapper {
+        width: 100%;
+        padding-top: 12px;
+        display: flex;
+        flex-flow: row wrap;
+        justify-content: space-between;
+        align-items: center;
+        gap: 6px;
        .option {
+          --flex-flow: row-reverse nowrap;
          display: flex;
          flex-flow: row nowrap;
          justify-content: flex-start;
--- a/src/components/switcher/Switcher.vue
+++ b/src/components/switcher/Switcher.vue
@ -13,7 +13,7 @@
          <div class="mdc-switch__shadow">
            <div class="mdc-elevation-overlay"></div>
          </div>
-          <div class="mdc-switch__ripple"></div>
+          <div v-show="!$props.disableRipple" class="mdc-switch__ripple"></div>
          <div class="mdc-switch__icons">
            <svg class="mdc-switch__icon mdc-switch__icon--on" viewBox="0 0 24 24">
              <path d="M19.69,5.23L8.96,15.96l-4.23-4.23L2.96,13.5l6,6L21.46,7L19.69,5.23z" />
@ -27,6 +27,9 @@
    </button>
    <label class="label" :for="`switch-${id}`">
      {{ checked ? $props.positiveLabel : $props.negativeLabel }}
+      <slot name="label"></slot>
+      <slot name="label-positive" v-if="checked"></slot>
+      <slot name="label-negative" v-else></slot>
    </label>
  </div>
 </template>
@ -43,6 +46,7 @@ export default defineComponent({
    negativeLabel: { type: String, default: 'current off' },
    checked: { type: Boolean, default: true },
    disabled: { type: Boolean, default: false },
+    disableRipple: { type: Boolean, default: false },
  },
  emits: ['update:checked'],
  setup(props, { emit }) {
@ -93,13 +97,15 @@ export default defineComponent({

 <style lang="scss" scoped>
@use './theme';
+@use '@/styles/mixins/polyfills';
 .switcher__container {
  @include theme.variables;
  height: 56px;
  display: flex;
-  flex-direction: row;
+  flex-flow: var(--flex-flow, row nowrap);
  justify-content: flex-start;
  align-items: center;
+  @include polyfills.flex-gap(6px, 'row nowrap');
  &.disabled {
    cursor: not-allowed;
    .label {
@ -108,7 +114,7 @@ export default defineComponent({
  }
  .label {
    user-select: none;
-    padding-left: 10px;
+    // padding-left: 10px;
  }
 }
 </style>
--- a/src/layouts/components/header/NavDrawer.vue
+++ b/src/layouts/components/header/NavDrawer.vue
@ -101,8 +101,6 @@ export default defineComponent({
            `${collapseContent.scrollHeight}px`
          )
        }
-      } else {
-        console.log('open')
      }
    }