Add header profile drawer

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/cards/postThumbCards/PostThumbCardMobile.vue

@@ -8,14 +8,18 @@
           :alt="$props.data.title"
           placeholder="https://via.placeholder.com/1024x768"
           :draggable="false"
+          :ratio="9 / 16"
         />
       </Link>
     </div>
-    <div class="row__wrapper--title">
+    <div class="row__wrapper--date">
+      <span><i class="far fa-clock"></i> {{ $props.data.publistTime }}</span>
+    </div>
+    <h3 class="row__wrapper--title">
       <Link :url="$props.data.link">
         <span>{{ $props.data.title }}</span>
       </Link>
-    </div>
+    </h3>
     <div class="row__wrapper--statistics">
       <div class="column__wrapper--read_count">
         <span><i class="fab fa-hotjar"></i> {{ $props.data.readCount }}</span>
@@ -82,11 +86,21 @@ export default defineComponent({
   user-select: none;
   @include polyfills.flex-gap(12px, 'column nowrap');
   > * {
-    width: calc(100% - 24px);
+    width: calc(100% - 48px);
   }
   > .row__wrapper {
     &--thumbnail {
-      width: 100%;
+      width: calc(100% - 24px);
+      border-radius: 10px;
+      overflow: hidden;
+      .image {
+        object-fit: cover;
+        transform: scale(1);
+        transition: transform 0.3s ease-in-out;
+        &:hover {
+          transform: scale(1.1);
+        }
+      }
     }
     &--tags {
       max-height: 32px;
@@ -106,6 +120,10 @@ export default defineComponent({
         }
       }
     }
+    &--date {
+      color: #888888;
+      font-size: 12px;
+    }
     &--title {
       line-height: 30px;
       font-size: x-large; // 24

src/components/content/components/comment/Composer.vue

@@ -82,9 +82,9 @@
               </template>
             </Switcher>
           </div>
-          <div class="option inform" v-tippy="{ content: messages.privacy.email.title }">
+          <div class="option subscribe" v-tippy="{ content: messages.privacy.subscribe.title }">
             <Switcher
-              v-model:checked="privacyShouldInform"
+              v-model:checked="privacyIsSubscribe"
               positiveLabel=""
               negativeLabel=""
               :disableRipple="true"
@@ -92,13 +92,13 @@
               <template #label-positive>
                 <span>
                   <i class="fas fa-bell"></i>
-                  {{ messages.privacy.email.positive }}
+                  {{ messages.privacy.subscribe.positive }}
                 </span>
               </template>
               <template #label-negative>
                 <span>
                   <i class="fas fa-bell-slash"></i>
-                  {{ messages.privacy.email.negative }}
+                  {{ messages.privacy.subscribe.negative }}
                 </span>
               </template>
             </Switcher>
@@ -174,10 +174,6 @@ export default defineComponent({
   setup(props, { emit }) {
     const intl = useIntl()
     const messages = {
-      markdownTips: intl.formatMessage({
-        id: 'posts.comment.composer.tips.markdownSupported',
-        defaultMessage: 'Markdown Supported',
-      }),
       textareaLabel: intl.formatMessage({
         id: 'posts.comment.composer.content.label',
         defaultMessage: 'You are a surprise that I will only meet once in my life',
@@ -216,7 +212,7 @@ export default defineComponent({
           defaultMessage: 'Privacy settings',
         }),
         markdownTooltip: intl.formatMessage({
-          id: 'posts.comment.composer.toolkits.preview.tooltip',
+          id: 'posts.comment.composer.toolkits.markdown.tooltip',
           defaultMessage:
             '\'<a href="https://guides.github.com/features/mastering-markdown/" target="_blank">Markdown</a>\' supported',
         }),
@@ -243,25 +239,25 @@ export default defineComponent({
               'Whether to create secret comment that only admins and peoples mentioned can see?',
           }),
           positive: intl.formatMessage({
-            id: 'posts.comment.composer.privacy.anynomous.positive',
+            id: 'posts.comment.composer.privacy.visibility.positive',
             defaultMessage: 'Secret',
           }),
           negative: intl.formatMessage({
-            id: 'posts.comment.composer.privacy.anynomous.negative',
+            id: 'posts.comment.composer.privacy.visibility.negative',
             defaultMessage: 'Public',
           }),
         },
-        email: {
+        subscribe: {
           title: intl.formatMessage({
-            id: 'posts.comment.composer.privacy.email.title',
+            id: 'posts.comment.composer.privacy.subscribe.title',
             defaultMessage: 'Whether to inform you with email when receiving reply?',
           }),
           positive: intl.formatMessage({
-            id: 'posts.comment.composer.privacy.email.positive',
+            id: 'posts.comment.composer.privacy.subscribe.positive',
             defaultMessage: 'Subscribe',
           }),
           negative: intl.formatMessage({
-            id: 'posts.comment.composer.privacy.email.negative',
+            id: 'posts.comment.composer.privacy.subscribe.negative',
             defaultMessage: 'Unsubscribe',
           }),
         },
@@ -275,7 +271,7 @@ export default defineComponent({
 
     const privacyIsPrivate = ref(false)
     const privacyIsAnynomous = ref(false)
-    const privacyShouldInform = ref(true)
+    const privacyIsSubscribe = ref(true)
 
     // TODO: debounce
     const handleSubmitEvent = () => {
@@ -365,7 +361,7 @@ export default defineComponent({
       handleTogglePrivacyOptionsEvent,
       privacyIsPrivate,
       privacyIsAnynomous,
-      privacyShouldInform,
+      privacyIsSubscribe,
     }
   },
 })

src/components/image/Image.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="['image__container', state]">
+  <div :class="['image__container', state]" :ref="setContainerRef" :style="{ height: imageHeight }">
     <img
       :class="['image', state]"
       :src="$props.src"
@@ -20,7 +20,7 @@
 
 <script lang="ts">
 import { defineComponent, computed } from 'vue'
-import { useState } from '@/hooks'
+import { useState, useResizeObserver, useElementRef } from '@/hooks'
 import gravatar from '@/utils/gravatar'
 
 export default defineComponent({
@@ -31,6 +31,7 @@ export default defineComponent({
     avatar: { type: Boolean, default: false },
     alt: String,
     draggable: { type: Boolean, default: false },
+    ratio: { type: Number, default: NaN },
   },
   setup(props, { emit }) {
     const [state, setState] = useState('loading')
@@ -53,11 +54,24 @@ export default defineComponent({
       emit('load', event)
     }
 
+    const [containerRef, setContainerRef] = useElementRef()
+    const containerSize = useResizeObserver(containerRef)
+
+    const imageHeight = computed(() => {
+      if (!isNaN(props.ratio) && props.ratio >= 0) {
+        return `${containerSize.value.width * props.ratio}px`
+      } else {
+        return '100%'
+      }
+    })
+
     return {
       placeholderImage,
       handleError,
       handleLoad,
       state,
+      setContainerRef,
+      imageHeight,
     }
   },
 })

src/components/link/Link.vue

@@ -5,9 +5,12 @@
   <router-link v-else-if="to" :to="to">
     <slot></slot>
   </router-link>
-  <a v-else href="https://google.com" target="_blank">
+  <a v-else-if="hyperlink" href="hyperlink" target="_blank">
     <slot></slot>
   </a>
+  <span v-else>
+    <slot></slot>
+  </span>
 </template>
 
 <script lang="ts">
@@ -46,7 +49,15 @@ export default defineComponent({
       }
     })
 
-    return { to }
+    const hyperlink = computed(() => {
+      if (props.url === '' || props.url === '#') {
+        return false
+      } else {
+        return props.url
+      }
+    })
+
+    return { to, hyperlink }
   },
 })
 </script>

src/layouts/components/header/Header.vue

@@ -2,6 +2,9 @@
   <div class="header__container mdc-elevation--z4">
     <div class="header__content">
       <div class="logo__wrapper">
+        <Ripple>
+          <Link :to="{ name: 'Home' }">
+            <div class="logo__container">
               <img
                 class="logo"
                 :src="logo"
@@ -10,6 +13,9 @@
                 @load="computeShouldHideNavItemList"
               />
             </div>
+          </Link>
+        </Ripple>
+      </div>
       <div class="nav__wrapper" :ref="setNavBarWrapperRef" @resize="handleNavBarWrapperResizeEvent">
         <div class="nav__ul nav__ul--parent" :ref="setNavBarItemRefs">
           <div
@@ -67,8 +73,33 @@
         </div>
       </div>
       <div class="profile__wrapper">
+        <Ripple>
+          <div class="image__wrapper">
             <img class="avatar" :src="avatar" alt="avatar" />
           </div>
+        </Ripple>
+        <div class="drop-down__wrapper">
+          <div class="ul mdc-elevation--z8">
+            <div class="content-logined" v-if="logined">logined</div>
+            <div class="content-unsigned" v-else>unsigned</div>
+            <div class="li" v-for="(item, index) in languageOptions" :key="index">
+              <NavItem :context="item.title" :prefix="item.icon" :url="item.url"></NavItem>
+              <div class="child__ul language mdc-elevation--z8" v-if="item.child.length > 0">
+                <div class="child__li" v-for="(child, childIndex) in item.child" :key="childIndex">
+                  <NavItem :context="child.title" :prefix="child.icon" :url="child.url"></NavItem>
+                </div>
+              </div>
+            </div>
+            <div
+              class="li"
+              v-for="(item, index) in logined ? loginedOptions : unsignedOptions"
+              :key="index"
+            >
+              <NavItem :context="item.title" :prefix="item.icon" :url="item.url"></NavItem>
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -87,9 +118,10 @@ import { init } from '@/store'
 import sakuraOptions from '@/utils/sakuraOptions'
 import camelcaseKeys from 'camelcase-keys'
 import NavItem from '@/layouts/components/header/NavItem.vue'
+import Ripple from '@/components/ripple/Ripple.vue'
 
 export default defineComponent({
-  components: { NavItem },
+  components: { NavItem, Ripple },
   setup() {
     const avatar = 'https://view.moezx.cc/images/2021/06/13/d6b010a378d392d4633008b915f98ab1.md.png'
     const logo = sakuraOptions['basic.site.logo'][0]?.url || 'https://v3.vuejs.org/logo.png'
@@ -142,6 +174,33 @@ export default defineComponent({
       return items
     })
 
+    const unsignedOptions = [
+      { title: 'Register', icon: 'fas fa-user-plus', url: '' },
+      { title: 'Sign in', icon: 'fas fa-sign-out-alt', url: '' },
+    ]
+    const loginedOptions = [
+      { title: 'User Center', icon: 'fas fa-user', url: '' },
+      { title: 'Sign out', icon: 'fas fa-sign-out-alt', url: '' },
+    ]
+    const languageOptions = [
+      {
+        title: 'Language',
+        icon: 'fas fa-globe',
+        url: '',
+        child: [
+          { title: '简体中文', value: 'zh-CN' },
+          { title: '繁體中文', value: 'zh-HK' },
+          { title: 'English', value: 'en' },
+          { title: 'Español', value: 'es' },
+          { title: 'Deutsch', value: 'de' },
+          { title: 'Français', value: 'fr' },
+          { title: 'Русский', value: 'ru' },
+          { title: '日本語', value: 'ja' },
+        ],
+      },
+    ]
+    const logined = ref(true)
+
     return {
       navItems,
       setNavBarWrapperRef,
@@ -153,6 +212,10 @@ export default defineComponent({
       logo,
       initState,
       useMDCRipple,
+      logined,
+      loginedOptions,
+      unsignedOptions,
+      languageOptions,
     }
   },
 })
@@ -168,17 +231,23 @@ export default defineComponent({
   align-items: center;
   background: #ffffff;
   > .header__content {
-    width: calc(100% - 48px);
+    // width: calc(100% - 48px);
+    width: 100%;
     height: 48px;
     display: flex;
     flex-flow: row nowrap;
     > .logo__wrapper {
       flex: 0 0 auto;
+      height: 100%;
+      .logo__container {
+        height: 100%;
         display: flex;
         justify-content: center;
         align-items: center;
-      > .logo {
+        .logo {
           height: 32px;
+          padding: 0 24px;
+        }
       }
     }
     > .nav__wrapper {
@@ -186,7 +255,7 @@ export default defineComponent({
       width: 100%;
       display: flex;
       flex-flow: row nowrap;
-      padding: 0 24px;
+      // padding: 0 24px;
       .nav__ul {
         &.hide {
           position: absolute;
@@ -309,9 +378,14 @@ export default defineComponent({
 
     > .profile__wrapper {
       flex: 0 0 auto;
+      height: 100%;
+      position: relative;
+      .image__wrapper {
+        height: 100%;
         display: flex;
         justify-content: center;
         align-items: center;
+        padding: 0 24px;
         > .avatar {
           height: 32px;
           width: 32px;
@@ -319,6 +393,72 @@ export default defineComponent({
           border-radius: 50%;
         }
       }
+      .drop-down__wrapper {
+        position: absolute;
+        top: 48px;
+        right: 0;
+        width: auto;
+        z-index: -1;
+        pointer-events: none;
+        visibility: hidden;
+        transform: translate(0, -100%);
+        // pointer-events: all;
+        // cursor: pointer;
+        // visibility: visible;
+        // transform: translate(0, 0%);
+        transition: all 0.2s ease-in-out;
+        .ul {
+          position: relative;
+          padding: 16px 0;
+          background: #ffffff;
+          border-radius: 0 0 5px 5px;
+          > .li {
+            height: 48px;
+            display: flex;
+            flex-flow: row nowrap;
+            justify-content: flex-start;
+            align-items: center;
+            position: relative;
+            > .child__ul {
+              position: absolute;
+              top: 0;
+              left: 0;
+              z-index: -1;
+              padding: 16px 0;
+              transform: translate(-100%, -16px) scale(0, 0);
+              transform-origin: right (16px + math.div(48px, 2));
+              background: #ffffff;
+              border-radius: 5px;
+              width: auto;
+              transition: all 0.2s ease-in-out;
+              > .child__li {
+                height: 48px;
+                display: flex;
+                flex-flow: row nowrap;
+                justify-content: flex-start;
+                align-items: center;
+              }
+            }
+            &:hover {
+              > .child__ul {
+                transform: translate(-100%, -16px) scale(1, 1);
+              }
+            }
+          }
+        }
+        ::v-deep() {
+          .link__container .nav-item__container .nav-item__content {
+            justify-content: flex-start;
+          }
+        }
+      }
+      &:hover .drop-down__wrapper {
+        pointer-events: all;
+        cursor: pointer;
+        visibility: visible;
+        transform: translate(0, 0%);
+      }
+    }
   }
 }
 </style>

src/locales/default.json

@@ -10,7 +10,13 @@
   "messages.admin.uplicateUrls": "Duplicate URLs",
   "messages.comment.submit.error": "Comment post failure.",
   "messages.comment.submit.success": "Comment post successfully.",
+  "messages.commentList.cache.updateError": "Opps! Something went wrong when updating comment list.",
+  "messages.commentList.cache.updateSuccess": "Comment list updated.",
+  "messages.commentList.cache.updating": "Updating the latest comment list...",
+  "messages.commentList.title.commentCount": "{commentCount, plural, =0 {Be the first one to leave a comment!} =1 {One comment} other {{commentCount, number, ::compact-short} Comments}}",
+  "messages.commentList.title.heading": "Comments",
   "messages.commonMessages.javascriptErrorTitle": "Opps, something when wrong!",
+  "messages.content.status.errorLoadingComponent": "Something went wrong when loading this component.",
   "messages.popup.close": "Close",
   "messages.popup.dismiss": "Dismiss",
   "messages.popup.showDetails": "Show details",
@@ -69,8 +75,21 @@
   "posts.comment.composer.authorUrl.label": "Link",
   "posts.comment.composer.captcha.toggleButton": "Captcha",
   "posts.comment.composer.content.label": "You are a surprise that I will only meet once in my life",
+  "posts.comment.composer.privacy.anynomous.negative": "Autonym",
+  "posts.comment.composer.privacy.anynomous.positive": "Anynomous",
+  "posts.comment.composer.privacy.anynomous.title": "Whether to comment as an anynomous user?",
+  "posts.comment.composer.privacy.subscribe.negative": "Unsubscribe",
+  "posts.comment.composer.privacy.subscribe.positive": "Subscribe",
+  "posts.comment.composer.privacy.subscribe.title": "Whether to inform you with email when receiving reply?",
+  "posts.comment.composer.privacy.visibility.negative": "Public",
+  "posts.comment.composer.privacy.visibility.positive": "Secret",
+  "posts.comment.composer.privacy.visibility.title": "Whether to create secret comment that only admins and peoples mentioned can see?",
   "posts.comment.composer.submit.button": "Submit",
-  "posts.comment.composer.tips.markdownSupported": "Markdown Supported",
+  "posts.comment.composer.toolkits.emoji.tooltip": "Insert emoji",
+  "posts.comment.composer.toolkits.image.tooltip": "Attach image",
+  "posts.comment.composer.toolkits.markdown.tooltip": "'<a href=\"https://guides.github.com/features/mastering-markdown/\" target=\"_blank\">Markdown</a>' supported",
+  "posts.comment.composer.toolkits.preview.tooltip": "'<i class=\"fab fa-markdown\"></i>' Markdown preview",
+  "posts.comment.composer.toolkits.privacy.tooltip": "Privacy settings",
   "posts.commentCount": "{commentCount, plural, =0 {No comment} =1 {One comment} other {{commentCount, number, ::compact-short} Comments}}",
   "posts.postTimeOn.brief": "{publistTimeDate, date, long}",
   "posts.postTimeOn.full": "Post on {publistTimeDate, date, long}",

src/locales/defaultMessages.json

@@ -32,9 +32,27 @@
   "messages.comment.submit.success": {
     "defaultMessage": "Comment post successfully."
   },
+  "messages.commentList.cache.updateError": {
+    "defaultMessage": "Opps! Something went wrong when updating comment list."
+  },
+  "messages.commentList.cache.updateSuccess": {
+    "defaultMessage": "Comment list updated."
+  },
+  "messages.commentList.cache.updating": {
+    "defaultMessage": "Updating the latest comment list..."
+  },
+  "messages.commentList.title.commentCount": {
+    "defaultMessage": "{commentCount, plural, =0 {Be the first one to leave a comment!} =1 {One comment} other {{commentCount, number, ::compact-short} Comments}}"
+  },
+  "messages.commentList.title.heading": {
+    "defaultMessage": "Comments"
+  },
   "messages.commonMessages.javascriptErrorTitle": {
     "defaultMessage": "Opps, something when wrong!"
   },
+  "messages.content.status.errorLoadingComponent": {
+    "defaultMessage": "Something went wrong when loading this component."
+  },
   "messages.popup.close": {
     "defaultMessage": "Close"
   },
@@ -209,11 +227,50 @@
   "posts.comment.composer.content.label": {
     "defaultMessage": "You are a surprise that I will only meet once in my life"
   },
+  "posts.comment.composer.privacy.anynomous.negative": {
+    "defaultMessage": "Autonym"
+  },
+  "posts.comment.composer.privacy.anynomous.positive": {
+    "defaultMessage": "Anynomous"
+  },
+  "posts.comment.composer.privacy.anynomous.title": {
+    "defaultMessage": "Whether to comment as an anynomous user?"
+  },
+  "posts.comment.composer.privacy.subscribe.negative": {
+    "defaultMessage": "Unsubscribe"
+  },
+  "posts.comment.composer.privacy.subscribe.positive": {
+    "defaultMessage": "Subscribe"
+  },
+  "posts.comment.composer.privacy.subscribe.title": {
+    "defaultMessage": "Whether to inform you with email when receiving reply?"
+  },
+  "posts.comment.composer.privacy.visibility.negative": {
+    "defaultMessage": "Public"
+  },
+  "posts.comment.composer.privacy.visibility.positive": {
+    "defaultMessage": "Secret"
+  },
+  "posts.comment.composer.privacy.visibility.title": {
+    "defaultMessage": "Whether to create secret comment that only admins and peoples mentioned can see?"
+  },
   "posts.comment.composer.submit.button": {
     "defaultMessage": "Submit"
   },
-  "posts.comment.composer.tips.markdownSupported": {
+  "posts.comment.composer.toolkits.emoji.tooltip": {
-    "defaultMessage": "Markdown Supported"
+    "defaultMessage": "Insert emoji"
+  },
+  "posts.comment.composer.toolkits.image.tooltip": {
+    "defaultMessage": "Attach image"
+  },
+  "posts.comment.composer.toolkits.markdown.tooltip": {
+    "defaultMessage": "'<a href=\"https://guides.github.com/features/mastering-markdown/\" target=\"_blank\">Markdown</a>' supported"
+  },
+  "posts.comment.composer.toolkits.preview.tooltip": {
+    "defaultMessage": "'<i class=\"fab fa-markdown\"></i>' Markdown preview"
+  },
+  "posts.comment.composer.toolkits.privacy.tooltip": {
+    "defaultMessage": "Privacy settings"
   },
   "posts.commentCount": {
     "defaultMessage": "{commentCount, plural, =0 {No comment} =1 {One comment} other {{commentCount, number, ::compact-short} Comments}}"