Change composer display

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

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;

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,23 +24,26 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-.comment-list {
-  &-enter-active {
-    animation: lightSpeedInLeft /* animate.css */ 1s ease-in;
+.comment-list__container {
+  .comment-list {
+    &-enter-active {
+      animation: lightSpeedInLeft /* animate.css */ var(--animation-timeout) ease-in;
+    }
+    // &-leave-active {
+    //   position: absolute;
+    //   transform-origin: center center;
+    //   animation: lightSpeedOutRight /* animate.css */ 1s ease-in;
+    // }
+    &-move {
+      transition: transform 0.3s ease;
+      transition-delay: 0.3s;
+    }
   }
-  // &-leave-active {
-  //   position: absolute;
-  //   transform-origin: center center;
-  //   animation: lightSpeedOutRight /* animate.css */ 1s ease-in;
-  // }
-  &-move {
-    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>

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>
+              :disableRipple="true"
+            >
+              <template #label-positive>
+                <span>
+                  <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>
-          <!-- <i class="fas fa-unlock"></i> -->
-          <!-- <i class="fas fa-globe"></i> -->
-          <div class="option anynomous">
-            <span>
-              <i class="fas fa-user-secret"></i>
-              {{ messages.privacy.anynomous.title }}
-            </span>
+          <div class="option anynomous" v-tippy="{ content: messages.privacy.anynomous.title }">
             <Switcher
               v-model:checked="privacyIsAnynomous"
               positiveLabel=""
               negativeLabel=""
-            ></Switcher>
+              :disableRipple="true"
+            >
+              <template #label-positive>
+                <span>
+                  <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>
-          <!-- <i class="fas fa-theater-masks"></i> -->
-          <div class="option inform">
-            <span>
-              <i class="fas fa-envelope"></i>
-              {{ messages.privacy.email.title }}
-            </span>
+          <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;

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>

src/layouts/components/header/NavDrawer.vue

@@ -101,8 +101,6 @@ export default defineComponent({
             `${collapseContent.scrollHeight}px`
           )
         }
-      } else {
-        console.log('open')
       }
     }