refs #98 Set color from theme color in sidebar

h3poteto · Apr 13, 2018 · d2c967b · d2c967b
1 parent bfd08b6
commit d2c967b
Show file tree

Hide file tree

Showing 5 changed files with 126 additions and 95 deletions.
diff --git a/src/renderer/components/TimelineSpace/Contents/SideBar.vue b/src/renderer/components/TimelineSpace/Contents/SideBar.vue
@@ -1,6 +1,6 @@
 <template>
-<div id="side_bar" v-if="openSideBar">
-  <div class="header">
+<div id="side_bar" v-if="openSideBar" :style="theme">
+  <div class="header" >
     <i class="el-icon-close" @click="close"></i>
   </div>
   <account-profile v-if="component === 1"></account-profile>
@@ -22,7 +22,13 @@ export default {
   computed: {
     ...mapState({
       openSideBar: state => state.TimelineSpace.Contents.SideBar.openSideBar,
-      component: state => state.TimelineSpace.Contents.SideBar.component
+      component: state => state.TimelineSpace.Contents.SideBar.component,
+      theme: (state) => {
+        return {
+          '--theme-border-color': state.App.theme.border_color,
+          '--theme-header-color': state.App.theme.selected_background_color
+        }
+      }
     })
   },
   methods: {
@@ -35,19 +41,22 @@ export default {
 
 <style lang="scss" scoped>
 #side_bar {
+  --theme-border-color: #ebeef5;
+  --theme-header-color: #f2f6fc;
+
   position: fixed;
   top: 48px;
   right: 0;
   width: 320px;
   height: calc(100% - 48px);
   overflow: auto;
-  border-left: solid 1px #dcdfe6;
+  border-left: solid 1px var(--theme-border-color);
 
   .header {
-    background-color: #f3f6fc;
+    background-color: var(--theme-header-color);
     padding: 4px 8px;
-    border-top: solid 1px #dcdfe6;
-    border-bottom: solid 1px #dcdfe6;
+    border-top: solid 1px var(--theme-border-color);
+    border-bottom: solid 1px var(--theme-border-color);
     text-align: right;
 
     .el-icon-close {

diff --git a/src/renderer/components/TimelineSpace/Contents/SideBar/AccountProfile.vue b/src/renderer/components/TimelineSpace/Contents/SideBar/AccountProfile.vue
@@ -3,7 +3,8 @@
      v-loading="loading"
      element-loading-text="Loading..."
      element-loading-spinner="el-icon-loading"
-     element-loading-background="rgba(0, 0, 0, 0.8)">
+     element-loading-background="rgba(0, 0, 0, 0.8)"
+     :style="theme">
   <div class="header-background" v-bind:style="{ backgroundImage: 'url(' + account.header + ')' }">
     <div class="header">
       <div class="follow-follower" v-if="relationship !== null && relationship !== ''">
@@ -84,7 +85,14 @@ export default {
     ...mapState({
       account: state => state.TimelineSpace.Contents.SideBar.AccountProfile.account,
       relationship: state => state.TimelineSpace.Contents.SideBar.AccountProfile.relationship,
-      loading: state => state.TimelineSpace.Contents.SideBar.AccountProfile.loading
+      loading: state => state.TimelineSpace.Contents.SideBar.AccountProfile.loading,
+      theme: (state) => {
+        return {
+          '--theme-mask-color': state.App.theme.wrapper_mask_color,
+          '--theme-border-color': state.App.theme.border_color,
+          '--theme-primary-color': state.App.theme.primary_color
+        }
+      }
     })
   },
   watch: {
@@ -147,107 +155,110 @@ function findLink (target) {
 <style lang="scss" scoped>
 #account_profile {
   height: 100%;
-}
+  --theme-mask-color: rgba(255, 255, 255, 0.7);
+  --theme-border-color: #ebeef5;
+  --theme-primary-color: #303133;
 
-.header-background {
-  background-position: 50% 50%;
-  background-size: cover;
-}
+  .header-background {
+    background-position: 50% 50%;
+    background-size: cover;
+  }
 
-.header {
-  background-color: rgba(255, 255, 255, 0.7);
-  text-align: center;
-  padding: 12px;
-  box-sizing: border-box;
-  word-wrap: break-word;
-  font-size: 14px;
-
-  .follow-follower {
-    .follower-status {
-      float: left;
-
-      .status {
-        border-radius: 4px;
-        background-color: rgba(0, 0, 0, 0.3);
-        padding: 4px 8px;
+  .header {
+    background-color: var(--theme-mask-color);
+    text-align: center;
+    padding: 12px;
+    box-sizing: border-box;
+    word-wrap: break-word;
+    font-size: 14px;
+
+    .follow-follower {
+      .follower-status {
+        float: left;
+
+        .status {
+          border-radius: 4px;
+          background-color: rgba(0, 0, 0, 0.3);
+          padding: 4px 8px;
+        }
       }
-    }
-    .follow-status {
-      float: right;
+      .follow-status {
+        float: right;
 
-      .follow {
-        cursor: pointer;
+        .follow {
+          cursor: pointer;
+        }
+
+        .unfollow {
+          color: #409eff;
+          cursor: pointer;
+        }
       }
+    }
 
-      .unfollow {
-        color: #409eff;
-        cursor: pointer;
+    .icon {
+      padding: 12px;
+
+      img {
+        width: 72px;
+        border-radius: 8px;
       }
     }
-  }
 
-  .icon {
-    padding: 12px;
+    .username {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      font-size: 24px;
+      margin: 0 auto 12px auto;
+    }
 
-    img {
-      width: 72px;
-      border-radius: 8px;
+    .account {
+      color: #409eff;
     }
   }
 
-  .username {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    font-size: 24px;
-    margin: 0 auto 12px auto;
-  }
+  .basic-info {
+    .info {
+      border-top: solid 1px var(--theme-border-color);
+      border-bottom: solid 1px var(--theme-border-color);
+      border-left: solid 1px var(--theme-border-color);
+      padding: 0 4px;
 
-  .account {
-    color: #409eff;
-  }
-}
+      .tab {
+        margin: 0;
+        padding: 0;
+        width: 100%;
+        text-align: left;
+        line-height: 20px;
+      }
 
-.basic-info {
-  .info {
-    border-top: solid 1px #dcdfe6;
-    border-bottom: solid 1px #dcdfe6;
-    border-left: solid 1px #dcdfe6;
-    padding: 0 4px;
-
-    .tab {
-      margin: 0;
-      padding: 0;
-      width: 100%;
-      text-align: left;
-      line-height: 20px;
-    }
+      .title {
+        font-size: 11px;
+        color: #909399;
+      }
 
-    .title {
-      font-size: 11px;
-      color: #909399;
+      .count {
+        font-weight: 800;
+        font-size: 16px;
+        color: var(--theme-primary-color);
+      }
     }
 
-    .count {
-      font-weight: 800;
-      font-size: 16px;
-      color: #303133;
-    }
-  }
+    .info-active {
+      border-bottom: solid 1px #409eff;
 
-  .info-active {
-    border-bottom: solid 1px #409eff;
+      .count {
+        color: #409eff;
+      }
+    }
 
-    .count {
-      color: #409eff;
+    .info:first-of-type {
+      border-left: none;
     }
   }
 
-  .info:first-of-type {
-    border-left: none;
+  .timeline {
+    font-size: 12px;
   }
 }
-
-.timeline {
-  font-size: 12px;
-}
 </style>
diff --git a/src/renderer/components/TimelineSpace/Contents/SideBar/TootDetail.vue b/src/renderer/components/TimelineSpace/Contents/SideBar/TootDetail.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="toot-detail" ref="detail">
+  <div class="toot-detail" ref="detail" :style="theme">
     <div class="toot-ancestors" v-for="(message, index) in ancestors" v-bind:key="'ancestors-' + index">
       <toot :message="message"></toot>
     </div>
@@ -23,7 +23,12 @@ export default {
     ...mapState({
       message: state => state.TimelineSpace.Contents.SideBar.TootDetail.message,
       ancestors: state => state.TimelineSpace.Contents.SideBar.TootDetail.ancestors,
-      descendants: state => state.TimelineSpace.Contents.SideBar.TootDetail.descendants
+      descendants: state => state.TimelineSpace.Contents.SideBar.TootDetail.descendants,
+      theme: (state) => {
+        return {
+          '--theme-selected-color': state.App.theme.selected_background_color
+        }
+      }
     })
   },
   created () {
@@ -53,10 +58,14 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.original-toot{
-  .toot{
-    background-color: #f2f6fc;
-    outline: 0;
+.toot-detail {
+  --theme-selected-color: #f2f6fc;
+
+  .original-toot {
+    .toot {
+      background-color: var(--theme-selected-color);
+      outline: 0;
+    }
   }
 }
 </style>
diff --git a/src/renderer/components/TimelineSpace/HeaderMenu.vue b/src/renderer/components/TimelineSpace/HeaderMenu.vue
@@ -14,7 +14,7 @@ export default {
       title: state => state.TimelineSpace.HeaderMenu.title,
       theme: (state) => {
         return {
-          '--theme-background-color': state.App.theme.selected_background_color
+          '--theme-background-color': state.App.theme.header_menu_color
         }
       }
     })

diff --git a/src/renderer/store/App.js b/src/renderer/store/App.js
@@ -10,7 +10,9 @@ const App = {
       global_header_color: '#393f4f', // #4a5664
       side_menu_color: '#191b22', // #373d48
       primary_color: '#ffffff', // #303133
-      border_color: '#606266' // #ebeef5
+      border_color: '#606266', // #ebeef5
+      header_menu_color: '#444b5d', // #ffffff
+      wrapper_mask_color: 'rgba(0, 0, 0, 0.7)' // rgba(255, 255, 255, 0.7)
     }
   },
   mutations: {},