From cd8881bbb899f2fc3f75fa5d0be8eb2a78c7bde4 Mon Sep 17 00:00:00 2001
From: AkiraFukushima <h3.poteto@gmail.com>
Date: Sat, 23 Apr 2022 00:13:04 +0900
Subject: [PATCH] Fix timeline design

---
 .../TimelineSpace/Contents/Bookmarks.vue      |  6 +-
 .../TimelineSpace/Contents/DirectMessages.vue |  6 +-
 .../TimelineSpace/Contents/Favourites.vue     |  6 +-
 .../TimelineSpace/Contents/Hashtag.vue        |  1 -
 .../TimelineSpace/Contents/Hashtag/Tag.vue    |  6 +-
 .../TimelineSpace/Contents/Home.vue           | 10 +--
 .../TimelineSpace/Contents/Lists/Index.vue    | 68 +++++++------------
 .../TimelineSpace/Contents/Lists/Show.vue     |  6 +-
 .../TimelineSpace/Contents/Local.vue          |  9 ++-
 .../TimelineSpace/Contents/Mentions.vue       |  6 +-
 .../TimelineSpace/Contents/Notifications.vue  |  6 +-
 .../TimelineSpace/Contents/Public.vue         |  6 +-
 .../TimelineSpace/Contents/Search.vue         | 58 +++++++---------
 src/renderer/components/organisms/Toot.vue    |  2 +-
 14 files changed, 102 insertions(+), 94 deletions(-)

diff --git a/src/renderer/components/TimelineSpace/Contents/Bookmarks.vue b/src/renderer/components/TimelineSpace/Contents/Bookmarks.vue
index f366dfa4..312f204c 100644
--- a/src/renderer/components/TimelineSpace/Contents/Bookmarks.vue
+++ b/src/renderer/components/TimelineSpace/Contents/Bookmarks.vue
@@ -21,7 +21,7 @@
     </DynamicScroller>
     <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="upper-icon" />
       </el-button>
     </div>
   </div>
@@ -215,5 +215,9 @@ export default {
     right: calc(20px + var(--current-sidebar-width));
     transition: all 0.5s;
   }
+
+  .upper-icon {
+    padding: 3px;
+  }
 }
 </style>
diff --git a/src/renderer/components/TimelineSpace/Contents/DirectMessages.vue b/src/renderer/components/TimelineSpace/Contents/DirectMessages.vue
index 9aa952cb..39507558 100644
--- a/src/renderer/components/TimelineSpace/Contents/DirectMessages.vue
+++ b/src/renderer/components/TimelineSpace/Contents/DirectMessages.vue
@@ -23,7 +23,7 @@
     </DynamicScroller>
     <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="upper-icon" />
       </el-button>
     </div>
   </div>
@@ -299,6 +299,10 @@ export default {
     right: calc(20px + var(--current-sidebar-width));
     transition: all 0.5s;
   }
+
+  .upper-icon {
+    padding: 3px;
+  }
 }
 </style>
 
diff --git a/src/renderer/components/TimelineSpace/Contents/Favourites.vue b/src/renderer/components/TimelineSpace/Contents/Favourites.vue
index 7ad9021e..531d4ac3 100644
--- a/src/renderer/components/TimelineSpace/Contents/Favourites.vue
+++ b/src/renderer/components/TimelineSpace/Contents/Favourites.vue
@@ -22,7 +22,7 @@
     </DynamicScroller>
     <div :class="openSideBar ? 'upper-with-side-bar' : 'upper'" v-show="!heading">
       <el-button type="primary" :icon="ElIconArrowUp" @click="upper" circle>
-        <font-awesome-icon icon="arrow-up" />
+        <font-awesome-icon icon="angle-up" class="upper-icon" />
       </el-button>
     </div>
   </div>
@@ -210,5 +210,9 @@ export default {
     right: calc(20px + var(--current-sidebar-width));
     transition: all 0.5s;
   }
+
+  .upper-icon {
+    padding: 3px;
+  }
 }
 </style>
diff --git a/src/renderer/components/TimelineSpace/Contents/Hashtag.vue b/src/renderer/components/TimelineSpace/Contents/Hashtag.vue
index e62c4d4b..ed2ee0c2 100644
--- a/src/renderer/components/TimelineSpace/Contents/Hashtag.vue
+++ b/src/renderer/components/TimelineSpace/Contents/Hashtag.vue
@@ -65,7 +65,6 @@ export default {
 
 <style lang="scss" scoped>
 #hashtag {
-  border-top: 1px solid var(--theme-border-color);
   height: calc(100% - 1px);
   overflow: hidden;
 
diff --git a/src/renderer/components/TimelineSpace/Contents/Hashtag/Tag.vue b/src/renderer/components/TimelineSpace/Contents/Hashtag/Tag.vue
index 19b9e0ac..35a7f808 100644
--- a/src/renderer/components/TimelineSpace/Contents/Hashtag/Tag.vue
+++ b/src/renderer/components/TimelineSpace/Contents/Hashtag/Tag.vue
@@ -23,7 +23,7 @@
     </DynamicScroller>
     <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="upper-icon" />
       </el-button>
     </div>
   </div>
@@ -306,6 +306,10 @@ export default {
     right: calc(20px + var(--current-sidebar-width));
     transition: all 0.5s;
   }
+
+  .upper-icon {
+    padding: 3px;
+  }
 }
 </style>
 
diff --git a/src/renderer/components/TimelineSpace/Contents/Home.vue b/src/renderer/components/TimelineSpace/Contents/Home.vue
index edb17d6b..b7de7f81 100644
--- 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="angle-up" class="icon" />
+        <font-awesome-icon icon="angle-up" class="upper-icon" />
       </el-button>
     </div>
   </div>
@@ -307,10 +307,6 @@ export default {
     bottom: 20px;
     right: 20px;
     transition: all 0.5s;
-
-    .icon {
-      padding: 3px;
-    }
   }
 
   .upper-with-side-bar {
@@ -319,6 +315,10 @@ export default {
     right: calc(20px + var(--current-sidebar-width));
     transition: all 0.5s;
   }
+
+  .upper-icon {
+    padding: 3px;
+  }
 }
 </style>
 
diff --git a/src/renderer/components/TimelineSpace/Contents/Lists/Index.vue b/src/renderer/components/TimelineSpace/Contents/Lists/Index.vue
index da9dfffe..5881a6b4 100644
--- a/src/renderer/components/TimelineSpace/Contents/Lists/Index.vue
+++ b/src/renderer/components/TimelineSpace/Contents/Lists/Index.vue
@@ -1,16 +1,8 @@
 <template>
   <div id="lists">
-    <div
-      class="new-list"
-      v-loading="creating"
-      :element-loading-background="loadingBackground"
-    >
+    <div class="new-list" v-loading="creating" :element-loading-background="loadingBackground">
       <el-form :inline="true">
-        <input
-          v-model="title"
-          :placeholder="$t('lists.index.new_list')"
-          class="list-title"
-        />
+        <input v-model="title" :placeholder="$t('lists.index.new_list')" class="list-title" />
         <el-button type="text" class="create" @click="createList">
           <font-awesome-icon icon="plus" />
         </el-button>
@@ -40,14 +32,14 @@ export default {
   data() {
     return {
       title: '',
-      creating: false,
+      creating: false
     }
   },
   computed: {
     ...mapState({
-      lists: (state) => state.TimelineSpace.Contents.Lists.Index.lists,
-      loadingBackground: (state) => state.App.theme.wrapper_mask_color,
-    }),
+      lists: state => state.TimelineSpace.Contents.Lists.Index.lists,
+      loadingBackground: state => state.App.theme.wrapper_mask_color
+    })
   },
   created() {
     this.$store.commit('TimelineSpace/changeLoading', true)
@@ -60,29 +52,22 @@ export default {
       return this.$route.params.id
     },
     fetch() {
-      return this.$store
-        .dispatch('TimelineSpace/Contents/Lists/Index/fetchLists')
-        .catch(() => {
-          this.$message({
-            message: this.$t('message.lists_fetch_error'),
-            type: 'error',
-          })
+      return this.$store.dispatch('TimelineSpace/Contents/Lists/Index/fetchLists').catch(() => {
+        this.$message({
+          message: this.$t('message.lists_fetch_error'),
+          type: 'error'
         })
+      })
     },
     async createList() {
       this.creating = true
       try {
-        await this.$store.dispatch(
-          'TimelineSpace/Contents/Lists/Index/createList',
-          this.title
-        )
-        await this.$store.dispatch(
-          'TimelineSpace/Contents/Lists/Index/fetchLists'
-        )
+        await this.$store.dispatch('TimelineSpace/Contents/Lists/Index/createList', this.title)
+        await this.$store.dispatch('TimelineSpace/Contents/Lists/Index/fetchLists')
       } catch (err) {
         this.$message({
           message: this.$t('message.list_create_error'),
-          type: 'error',
+          type: 'error'
         })
       } finally {
         this.creating = false
@@ -93,24 +78,17 @@ export default {
       return this.$router.push(`/${this.id()}/lists/${list.id}/edit`)
     },
     del(list) {
-      this.$confirm(
-        this.$t('lists.index.delete.confirm.message'),
-        this.$t('lists.index.delete.confirm.title'),
-        {
-          confirmButtonText: this.$t('lists.index.delete.confirm.ok'),
-          cancelButtonText: this.$t('lists.index.delete.confirm.cancel'),
-          type: 'warning',
-        }
-      )
+      this.$confirm(this.$t('lists.index.delete.confirm.message'), this.$t('lists.index.delete.confirm.title'), {
+        confirmButtonText: this.$t('lists.index.delete.confirm.ok'),
+        cancelButtonText: this.$t('lists.index.delete.confirm.cancel'),
+        type: 'warning'
+      })
         .then(() => {
-          this.$store.dispatch(
-            'TimelineSpace/Contents/Lists/Index/deleteList',
-            list
-          )
+          this.$store.dispatch('TimelineSpace/Contents/Lists/Index/deleteList', list)
         })
         .catch(() => {})
-    },
-  },
+    }
+  }
 }
 </script>
 
@@ -145,7 +123,7 @@ export default {
   .list {
     padding: 4px 24px;
     display: flex;
-    flex-dirrection: row;
+    flex-direction: row;
     align-items: baseline;
     justify-content: space-between;
     border-bottom: 1px solid var(--theme-border-color);
diff --git a/src/renderer/components/TimelineSpace/Contents/Lists/Show.vue b/src/renderer/components/TimelineSpace/Contents/Lists/Show.vue
index f9a065fa..bc5f49bd 100644
--- a/src/renderer/components/TimelineSpace/Contents/Lists/Show.vue
+++ b/src/renderer/components/TimelineSpace/Contents/Lists/Show.vue
@@ -23,7 +23,7 @@
     </DynamicScroller>
     <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="upper-icon" />
       </el-button>
     </div>
   </div>
@@ -306,6 +306,10 @@ export default {
     right: calc(20px + var(--current-sidebar-width));
     transition: all 0.5s;
   }
+
+  .upper-icon {
+    padding: 3px;
+  }
 }
 </style>
 
diff --git a/src/renderer/components/TimelineSpace/Contents/Local.vue b/src/renderer/components/TimelineSpace/Contents/Local.vue
index 3cb68b8c..658df670 100644
--- a/src/renderer/components/TimelineSpace/Contents/Local.vue
+++ b/src/renderer/components/TimelineSpace/Contents/Local.vue
@@ -23,7 +23,7 @@
     </DynamicScroller>
     <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="upper-icon" />
       </el-button>
     </div>
   </div>
@@ -61,7 +61,7 @@ export default {
       openSideBar: state => state.TimelineSpace.Contents.SideBar.openSideBar,
       backgroundColor: state => state.App.theme.background_color,
       startReload: state => state.TimelineSpace.HeaderMenu.reload,
-      unreadNotification: state => state.TimelineSpace.unreadNotification
+      unreadNotification: state => state.TimelineSpace.timelineSetting.unreadNotification
     }),
     ...mapGetters('TimelineSpace/Modals', ['modalOpened']),
     shortcutEnabled: function () {
@@ -77,6 +77,7 @@ export default {
     }
   },
   async mounted() {
+    console.log(this.unreadNotification)
     this.$store.commit('TimelineSpace/SideMenu/changeUnreadLocalTimeline', false)
     document.getElementById('scroller').addEventListener('scroll', this.onScroll)
     if (!this.unreadNotification.local) {
@@ -296,6 +297,10 @@ export default {
     right: calc(20px + var(--current-sidebar-width));
     transition: all 0.5s;
   }
+
+  .upper-icon {
+    padding: 3px;
+  }
 }
 </style>
 
diff --git a/src/renderer/components/TimelineSpace/Contents/Mentions.vue b/src/renderer/components/TimelineSpace/Contents/Mentions.vue
index 19db37e2..6cf92b2c 100644
--- a/src/renderer/components/TimelineSpace/Contents/Mentions.vue
+++ b/src/renderer/components/TimelineSpace/Contents/Mentions.vue
@@ -29,7 +29,7 @@
     </DynamicScroller>
     <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="upper-icon" />
       </el-button>
     </div>
   </div>
@@ -300,6 +300,10 @@ export default {
     right: calc(20px + var(--current-sidebar-width));
     transition: all 0.5s;
   }
+
+  .upper-icon {
+    padding: 3px;
+  }
 }
 </style>
 
diff --git a/src/renderer/components/TimelineSpace/Contents/Notifications.vue b/src/renderer/components/TimelineSpace/Contents/Notifications.vue
index d3cde175..b9be1e59 100644
--- a/src/renderer/components/TimelineSpace/Contents/Notifications.vue
+++ b/src/renderer/components/TimelineSpace/Contents/Notifications.vue
@@ -28,7 +28,7 @@
     </DynamicScroller>
     <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="upper-icon" />
       </el-button>
     </div>
   </div>
@@ -297,6 +297,10 @@ export default {
     right: calc(20px + var(--current-sidebar-width));
     transition: all 0.5s;
   }
+
+  .upper-icon {
+    padding: 3px;
+  }
 }
 </style>
 
diff --git a/src/renderer/components/TimelineSpace/Contents/Public.vue b/src/renderer/components/TimelineSpace/Contents/Public.vue
index 74f69676..3140784f 100644
--- a/src/renderer/components/TimelineSpace/Contents/Public.vue
+++ b/src/renderer/components/TimelineSpace/Contents/Public.vue
@@ -23,7 +23,7 @@
     </DynamicScroller>
     <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="upper-icon" />
       </el-button>
     </div>
   </div>
@@ -299,6 +299,10 @@ export default {
     right: calc(20px + var(--current-sidebar-width));
     transition: all 0.5s;
   }
+
+  .upper-icon {
+    padding: 3px;
+  }
 }
 </style>
 
diff --git a/src/renderer/components/TimelineSpace/Contents/Search.vue b/src/renderer/components/TimelineSpace/Contents/Search.vue
index a1dddc5b..bed327c5 100644
--- a/src/renderer/components/TimelineSpace/Contents/Search.vue
+++ b/src/renderer/components/TimelineSpace/Contents/Search.vue
@@ -2,7 +2,7 @@
   <div id="search">
     <div class="search-header">
       <el-form :inline="true">
-        <el-select v-model="target" :placeholder="$t('search.search')" class="search-target">
+        <el-select :model-value="target" :placeholder="$t('search.search')" class="search-target" size="large">
           <el-option v-for="item in searchTargets" :key="item.target" :label="item.label" :value="item.target"> </el-option>
         </el-select>
         <input v-model="query" :placeholder="$t('search.keyword')" class="search-keyword" v-on:keyup.enter="search" autofocus />
@@ -18,6 +18,7 @@
 </template>
 
 <script>
+import { ref } from 'vue'
 import SearchAccount from './Search/Account'
 import SearchTag from './Search/Tag'
 import SearchToots from './Search/Toots'
@@ -27,28 +28,22 @@ export default {
   components: { SearchAccount, SearchTag, SearchToots },
   data() {
     return {
-      target: 'account',
-      query: ''
-    }
-  },
-  computed: {
-    searchTargets: {
-      get() {
-        return [
-          {
-            target: 'account',
-            label: this.$t('search.account')
-          },
-          {
-            target: 'tag',
-            label: this.$t('search.tag')
-          },
-          {
-            target: 'toot',
-            label: this.$t('search.toot')
-          }
-        ]
-      }
+      target: ref('account'),
+      query: '',
+      searchTargets: [
+        {
+          target: 'account',
+          label: this.$t('search.account')
+        },
+        {
+          target: 'tag',
+          label: this.$t('search.tag')
+        },
+        {
+          target: 'toot',
+          label: this.$t('search.toot')
+        }
+      ]
     }
   },
   methods: {
@@ -88,22 +83,21 @@ export default {
 
 <style lang="scss" scoped>
 #search {
-  border-top: 1px solid var(--theme-border-color);
-
   .search-header {
     background-color: var(--theme-selected-background-color);
     padding: 8px 12px;
 
-    .search-target /deep/ {
+    .search-target {
       float: left;
       width: 20%;
+    }
 
-      .el-input__inner {
-        background-color: var(--theme-background-color);
-        border: none;
-        border-radius: 4px 0 0 4px;
-        color: var(--theme-primary-color);
-      }
+    .search-target :deep(.el-input__inner) {
+      background-color: var(--theme-background-color);
+      border: none;
+      border-radius: 4px 0 0 4px;
+      color: var(--theme-primary-color);
+      box-shadow: none;
     }
 
     .search-keyword {
diff --git a/src/renderer/components/organisms/Toot.vue b/src/renderer/components/organisms/Toot.vue
index fb77f9c4..10a272d6 100644
--- a/src/renderer/components/organisms/Toot.vue
+++ b/src/renderer/components/organisms/Toot.vue
@@ -992,7 +992,7 @@ export default {
 
 <style lang="scss">
 .status-menu-popper {
-  padding: 2px 0;
+  padding: 2px 0 !important;
   border-color: #909399;
 
   .menu-list {