Fix design sidemenu and header

2025-02-01 01:47:01 +01:00 · 2022-04-22 21:41:36 +09:00 · 2022-04-22 21:41:36 +09:00 · cb2a92ee28
commit cb2a92ee28
parent 7f4b090123
8 changed files with 151 additions and 119 deletions
--- a/src/renderer/components/GlobalHeader.vue
+++ b/src/renderer/components/GlobalHeader.vue
@ -87,7 +87,14 @@ export default {
 </script>

 <style lang="scss" scoped>
-#global_header /deep/ {
+.account-menu :deep(.el-menu-item) {
+  display: flex;
+  justify-content: center;
+  align-items: flex-end;
+  padding: 0 !important;
+}
+
+#global_header {
  .account-menu {
    height: 100%;
    position: fixed;
@ -97,12 +104,6 @@ export default {
    padding-top: 24px;
    border: 0;

-    .el-tooltip {
-      outline: 0;
-      text-align: center;
-      padding: 0 !important;
-    }
-
    .avatar {
      width: 42px;
      height: 42px;
--- a/src/renderer/components/TimelineSpace.vue
+++ b/src/renderer/components/TimelineSpace.vue
@ -178,7 +178,6 @@ export default {
    width: calc(100% - 180px);
    position: fixed;
    top: 0;
-    height: 48px;
    border-bottom: solid 1px var(--theme-border-color);
  }
 }
--- a/src/renderer/components/TimelineSpace/Contents.vue
+++ b/src/renderer/components/TimelineSpace/Contents.vue
@ -1,15 +1,7 @@
 <template>
-  <div
-    id="contents"
-    ref="contents"
-    :style="customWidth"
-    @mouseup="dragEnd"
-    @mousemove="resize"
-  >
+  <div id="contents" ref="contents" :style="customWidth" @mouseup="dragEnd" @mousemove="resize">
    <div
-      :class="
-        openSideBar ? 'timeline-wrapper-with-side-bar' : 'timeline-wrapper'
-      "
+      :class="openSideBar ? 'timeline-wrapper-with-side-bar' : 'timeline-wrapper'"
      v-loading="loading"
      :element-loading-text="$t('message.loading')"
      element-loading-spinner="el-icon-loading"
@ -42,25 +34,25 @@ export default {
  data() {
    return {
      sidebarWidth: 360,
-      dragging: false,
+      dragging: false
    }
  },
  components: {
-    SideBar,
+    SideBar
  },
  computed: {
    ...mapState('TimelineSpace/Contents', {
-      loading: (state) => state.loading,
+      loading: state => state.loading
    }),
    ...mapState('TimelineSpace/Contents/SideBar', {
-      openSideBar: (state) => state.openSideBar,
+      openSideBar: state => state.openSideBar
    }),
    ...mapGetters('TimelineSpace/Modals', ['modalOpened']),
    customWidth: function () {
      return {
-        '--current-sidebar-width': `${this.sidebarWidth}px`,
+        '--current-sidebar-width': `${this.sidebarWidth}px`
      }
-    },
+    }
  },
  methods: {
    resize(event) {
@ -75,8 +67,8 @@ export default {
    dragEnd() {
      this.dragging = false
      this.$refs.contents.style.setProperty('user-select', 'text')
-    },
-  },
+    }
+  }
 }
 </script>

@ -84,7 +76,7 @@ export default {
 #contents {
  --current-sidebar-width: 360px;

-  padding-top: 49px;
+  padding-top: 53px;
  height: 100%;
  box-sizing: border-box;
  user-select: text;
--- a/src/renderer/components/TimelineSpace/Contents/Home.vue
+++ b/src/renderer/components/TimelineSpace/Contents/Home.vue
@ -31,7 +31,7 @@

    <div :class="openSideBar ? 'upper-with-side-bar' : 'upper'" v-show="!heading">
      <el-button type="primary" @click="upper" circle>
-        <font-awesome-icon icon="arrow-up" />
+        <font-awesome-icon icon="angle-up" class="icon" />
      </el-button>
    </div>
  </div>
@ -307,6 +307,10 @@ export default {
    bottom: 20px;
    right: 20px;
    transition: all 0.5s;
+
+    .icon {
+      padding: 3px;
+    }
  }

  .upper-with-side-bar {
--- a/src/renderer/components/TimelineSpace/HeaderMenu.vue
+++ b/src/renderer/components/TimelineSpace/HeaderMenu.vue
@ -11,7 +11,7 @@
      <el-button v-show="reloadable()" type="text" class="action" @click="reload" :title="$t('header_menu.reload')">
        <font-awesome-icon icon="rotate" />
      </el-button>
-      <el-popover placement="left-start" width="180" popper-class="theme-popover" trigger="click" v-model:visible="TLOptionVisible">
+      <el-popover v-if="TLOption()" placement="left-start" width="180" popper-class="theme-popover" trigger="click">
        <div>
          <el-form role="form" label-position="left" label-width="125px" size="default">
            <el-form-item for="show-reblogs" :label="$t('header_menu.option.show_reblogs')">
@ -23,9 +23,11 @@
            <el-button type="primary" @click="applyTLOption">{{ $t('header_menu.option.apply') }}</el-button>
          </el-form>
        </div>
-        <el-button v-show="TLOption()" slot="reference" type="text" class="action" :title="$t('header_menu.option.title')">
-          <font-awesome-icon icon="sliders" />
-        </el-button>
+        <template #reference>
+          <el-button type="text" class="action" :title="$t('header_menu.option.title')">
+            <font-awesome-icon icon="sliders" />
+          </el-button>
+        </template>
      </el-popover>
      <el-button type="text" class="action" @click="settings" :title="$t('header_menu.settings')">
        <font-awesome-icon icon="gear" />
@ -41,7 +43,6 @@ export default {
  name: 'header-menu',
  data() {
    return {
-      TLOptionVisible: false,
      showReblogs: true,
      showReplies: true
    }
@ -177,7 +178,6 @@ export default {
        default:
          console.log('Not implemented')
      }
-      this.TLOptionVisible = false
    },
    TLOption() {
      switch (this.$route.name) {
@ -211,6 +211,7 @@ export default {

    h1 {
      margin: 0;
+      line-height: 32px;
    }
  }

--- a/src/renderer/components/TimelineSpace/SideMenu.vue
+++ b/src/renderer/components/TimelineSpace/SideMenu.vue
@ -12,7 +12,7 @@
          </div>
          <el-dropdown trigger="click" @command="handleProfile" :title="$t('side_menu.profile')">
            <span class="el-dropdown-link">
-              <font-awesome-icon icon="arrow-up" class="el-icon--right" />
+              <font-awesome-icon icon="angle-down" class="el-icon--right" />
            </span>
            <template #dropdown>
              <el-dropdown-menu>
@ -47,10 +47,12 @@
        <div class="menu-item-icon">
          <font-awesome-icon icon="home" />
        </div>
-        <div>
-          <span>{{ $t('side_menu.home') }}</span>
-          <el-badge is-dot :hidden="!unreadHomeTimeline"> </el-badge>
-        </div>
+        <template #title>
+          <div>
+            <span>{{ $t('side_menu.home') }}</span>
+            <el-badge is-dot :hidden="!unreadHomeTimeline"> </el-badge>
+          </div>
+        </template>
      </el-menu-item>
      <el-menu-item
        :index="`/${id()}/notifications`"
@ -62,10 +64,12 @@
        <div class="menu-item-icon">
          <font-awesome-icon icon="bell" />
        </div>
-        <div>
-          <span>{{ $t('side_menu.notification') }}</span>
-          <el-badge is-dot :hidden="!unreadNotifications"> </el-badge>
-        </div>
+        <template #title>
+          <div>
+            <span>{{ $t('side_menu.notification') }}</span>
+            <el-badge is-dot :hidden="!unreadNotifications"> </el-badge>
+          </div>
+        </template>
      </el-menu-item>
      <el-menu-item
        :index="`/${id()}/mentions`"
@ -77,10 +81,12 @@
        <div class="menu-item-icon">
          <font-awesome-icon icon="at" />
        </div>
-        <div>
-          <span>{{ $t('side_menu.mention') }}</span>
-          <el-badge is-dot :hidden="!unreadMentions"> </el-badge>
-        </div>
+        <template #title>
+          <div>
+            <span>{{ $t('side_menu.mention') }}</span>
+            <el-badge is-dot :hidden="!unreadMentions"> </el-badge>
+          </div>
+        </template>
      </el-menu-item>
      <el-menu-item
        :index="`/${id()}/direct-messages`"
@ -92,10 +98,12 @@
        <div class="menu-item-icon">
          <font-awesome-icon icon="envelope" />
        </div>
-        <div>
-          <span>{{ $t('side_menu.direct') }}</span>
-          <el-badge is-dot :hidden="!unreadDirectMessagesTimeline"> </el-badge>
-        </div>
+        <template #title>
+          <div>
+            <span>{{ $t('side_menu.direct') }}</span>
+            <el-badge is-dot :hidden="!unreadDirectMessagesTimeline"> </el-badge>
+          </div>
+        </template>
      </el-menu-item>
      <el-menu-item
        v-if="unreadFollowRequests"
@ -107,10 +115,12 @@
        <div class="menu-item-icon">
          <font-awesome-icon icon="users" />
        </div>
-        <div>
-          <span>{{ $t('side_menu.follow_requests') }}</span>
-          <el-badge is-dot></el-badge>
-        </div>
+        <template #title>
+          <div>
+            <span>{{ $t('side_menu.follow_requests') }}</span>
+            <el-badge is-dot></el-badge>
+          </div>
+        </template>
      </el-menu-item>
      <el-menu-item
        :index="`/${id()}/favourites`"
@ -122,9 +132,11 @@
        <div class="menu-item-icon">
          <font-awesome-icon icon="star" />
        </div>
-        <div>
-          <span>{{ $t('side_menu.favourite') }}</span>
-        </div>
+        <template #title>
+          <div>
+            <span>{{ $t('side_menu.favourite') }}</span>
+          </div>
+        </template>
      </el-menu-item>
      <el-menu-item
        :index="`/${id()}/bookmarks`"
@ -136,9 +148,11 @@
        <div class="menu-item-icon">
          <font-awesome-icon icon="bookmark" />
        </div>
-        <div>
-          <span>{{ $t('side_menu.bookmark') }}</span>
-        </div>
+        <template #title>
+          <div>
+            <span>{{ $t('side_menu.bookmark') }}</span>
+          </div>
+        </template>
      </el-menu-item>
      <el-menu-item
        :index="`/${id()}/local`"
@ -150,10 +164,12 @@
        <div class="menu-item-icon">
          <font-awesome-icon icon="users" />
        </div>
-        <div>
-          <span>{{ $t('side_menu.local') }}</span>
-          <el-badge is-dot :hidden="!unreadLocalTimeline"> </el-badge>
-        </div>
+        <template #title>
+          <div>
+            <span>{{ $t('side_menu.local') }}</span>
+            <el-badge is-dot :hidden="!unreadLocalTimeline"> </el-badge>
+          </div>
+        </template>
      </el-menu-item>
      <el-menu-item
        :index="`/${id()}/public`"
@ -165,26 +181,32 @@
        <div class="menu-item-icon">
          <font-awesome-icon icon="globe" />
        </div>
-        <div>
-          <span>{{ $t('side_menu.public') }}</span>
-          <el-badge is-dot :hidden="!unreadPublicTimeline"> </el-badge>
-        </div>
+        <template #title>
+          <div>
+            <span>{{ $t('side_menu.public') }}</span>
+            <el-badge is-dot :hidden="!unreadPublicTimeline"> </el-badge>
+          </div>
+        </template>
      </el-menu-item>
      <el-menu-item :index="`/${id()}/search`" role="menuitem" :title="$t('side_menu.search')" class="menu-item">
        <div class="menu-item-icon">
          <font-awesome-icon icon="magnifying-glass" />
        </div>
-        <div>
-          <span>{{ $t('side_menu.search') }}</span>
-        </div>
+        <template #title>
+          <div>
+            <span>{{ $t('side_menu.search') }}</span>
+          </div>
+        </template>
      </el-menu-item>
      <el-menu-item :index="`/${id()}/hashtag`" role="menuitem" :title="$t('side_menu.hashtag')" class="menu-item">
        <div class="menu-item-icon">
          <font-awesome-icon icon="hashtag" />
        </div>
-        <div>
-          <span>{{ $t('side_menu.hashtag') }}</span>
-        </div>
+        <template #title>
+          <div>
+            <span>{{ $t('side_menu.hashtag') }}</span>
+          </div>
+        </template>
      </el-menu-item>
      <template v-if="enabledTimelines.tag">
        <template v-for="tag in tags" :key="tag.tagName">
@ -198,9 +220,11 @@
            <div class="menu-item-icon">
              <font-awesome-icon icon="hashtag" size="sm" />
            </div>
-            <div>
-              <span>{{ tag.tagName }}</span>
-            </div>
+            <template #title>
+              <div>
+                <span>{{ tag.tagName }}</span>
+              </div>
+            </template>
          </el-menu-item>
        </template>
      </template>
@ -208,9 +232,11 @@
        <div class="menu-item-icon">
          <font-awesome-icon icon="list-ul" />
        </div>
-        <div>
-          <span>{{ $t('side_menu.lists') }}</span>
-        </div>
+        <template #title>
+          <div>
+            <span>{{ $t('side_menu.lists') }}</span>
+          </div>
+        </template>
      </el-menu-item>
      <template v-if="enabledTimelines.list">
        <template v-for="list in lists" :key="list.id">
@ -224,9 +250,11 @@
            <div class="menu-item-icon">
              <font-awesome-icon icon="list-ul" size="sm" />
            </div>
-            <div>
-              <span>{{ list.title }}</span>
-            </div>
+            <template #title>
+              <div>
+                <span>{{ list.title }}</span>
+              </div>
+            </template>
          </el-menu-item>
        </template>
      </template>
@ -322,7 +350,7 @@ export default {
    flex-direction: row;
    align-content: center;
    align-items: flex-start;
-    justify-content: flex-end;
+    justify-content: space-between;

    .account {
      display: flex;
@ -403,7 +431,13 @@ export default {
    }
  }

-  .timeline-menu /deep/ {
+  .timeline-menu :deep(.el-badge__content) {
+    background-color: #409eff;
+    border: none;
+    margin-left: 8px;
+  }
+
+  .timeline-menu {
    position: fixed;
    top: 82px;
    height: calc(100% - 82px);
@ -411,12 +445,6 @@ export default {
    border: none;
    overflow: hidden;

-    .el-badge__content {
-      background-color: #409eff;
-      border: none;
-      margin-left: 4px;
-    }
-
    .menu-item-title {
      color: rgb(144, 147, 153);
      cursor: default;
@ -435,6 +463,7 @@ export default {

    .menu-item {
      display: flex;
+      align-items: center;

      .menu-item-icon {
        text-align: center;
@ -442,23 +471,23 @@ export default {
        width: 18px;
      }
    }
-  }
-
-  .timeline-menu:hover /deep/ {
-    overflow-y: auto;
-  }
-
-  .narrow-menu /deep/ {
-    width: 64px;
-
-    .el-menu-item {
-      margin-left: 4px;
+    .menu-item * {
+      vertical-align: middle;
    }

    .el-badge {
      vertical-align: top;
      line-height: 32px;
-      margin-left: -8px;
+      margin-left: 0px;
+    }
+  }
+
+  .narrow-menu {
+    width: 64px;
+    justify-content: flex-end;
+
+    .el-menu-item {
+      margin-left: 4px;
    }
  }

--- a/src/renderer/components/organisms/Toot.vue
+++ b/src/renderer/components/organisms/Toot.vue
@ -755,15 +755,15 @@ export default {
      }
    }

-    .reblogger-name /deep/ {
+    .reblogger-name {
      font-size: calc(var(--base-font-size) * 0.86);
      cursor: pointer;
      margin: 0 4px;
+    }

-      .emojione {
-        max-width: 10px;
-        max-height: 10px;
-      }
+    .reblogger-name :deep(.emojione) {
+      max-width: 10px;
+      max-height: 10px;
    }
  }

@ -772,7 +772,7 @@ export default {
    float: left;
    width: calc(100% - 52px);

-    .content-wrapper /deep/ {
+    .content-wrapper {
      font-size: var(--base-font-size);
      color: var(--theme-primary-color);

@ -795,11 +795,11 @@ export default {
      .content p {
        unicode-bidi: plaintext;
      }
+    }

-      .emojione {
-        width: 20px;
-        height: 20px;
-      }
+    .content-wrapper :deep(.emojione) {
+      width: 20px;
+      height: 20px;
    }

    .toot-header {
@ -812,14 +812,14 @@ export default {
        overflow: hidden;
        text-overflow: ellipsis;

-        .display-name /deep/ {
+        .display-name {
          font-weight: 800;
          color: var(--theme-primary-color);
+        }

-          .emojione {
-            max-width: 14px;
-            max-height: 14px;
-          }
+        .display-name :deep(.emojione) {
+          max-width: 14px;
+          max-height: 14px;
        }

        .acct {
@ -908,6 +908,8 @@ export default {

    .tool-box {
      display: flex;
+      align-items: center;
+      margin: -6px 0 -6px 0;

      .fa-icon {
        vertical-align: bottom;
--- a/src/renderer/main.js
+++ b/src/renderer/main.js
@ -6,6 +6,8 @@ import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
+  faAngleDown,
+  faAngleUp,
  faAnglesRight,
  faAnglesLeft,
  faHome,
@ -78,6 +80,8 @@ import store from './store'
 import i18next from '~/src/config/i18n'

 library.add(
+  faAngleDown,
+  faAngleUp,
  faAnglesRight,
  faAnglesLeft,
  faHome,