refs #273 Add toot button on header menu

package-lock.json

@@ -7757,7 +7757,7 @@
         },
         "onetime": {
           "version": "1.1.0",
-          "resolved": "https://registry.npmjs.org/onetime/-/onetime-1.1.0.tgz",
+          "resolved": "http://registry.npmjs.org/onetime/-/onetime-1.1.0.tgz",
           "integrity": "sha1-ofeDj4MUxRbwXs78vEzP4EtO14k="
         },
         "pluralize": {
@@ -16514,9 +16514,9 @@
       "integrity": "sha512-3D+lY7HTkKbtswDM4BBHgqyq+qo8IAEE8lz8va1dz3LLmttjgo0FxairO4r1iN2OBqk8o1FyL4hvzzTFEdQSEw=="
     },
     "vue-awesome": {
-      "version": "2.3.5",
-      "resolved": "https://registry.npmjs.org/vue-awesome/-/vue-awesome-2.3.5.tgz",
-      "integrity": "sha512-+Yjsax0+Z8mbFkBtW+bV8qhWwDU774/sjnC5Ch/2GL/mhjlcLNXyhwmO0zpgm4BCSLWsSgU+cBqmtJZd/3KK2g=="
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/vue-awesome/-/vue-awesome-3.0.0.tgz",
+      "integrity": "sha512-SD3x/t9s/vfIVucIMcILGOOqQ9gk4dfVClx8BWaqGLcB1/hgCiemQ2GDYyu2j3bxtiq1Ad6tz6AZTYINDbnung=="
     },
     "vue-electron": {
       "version": "1.0.6",

package.json

@@ -104,7 +104,7 @@
     "simplayer": "0.0.8",
     "tunnel-agent": "^0.6.0",
     "vue": "^2.3.3",
-    "vue-awesome": "^2.3.5",
+    "vue-awesome": "^3.0.0",
     "vue-electron": "^1.0.6",
     "vue-popperjs": "^1.2.6",
     "vue-router": "^3.0.1",

src/renderer/components/TimelineSpace.vue

@@ -109,7 +109,7 @@ export default {
   box-sizing: border-box;
 
   .header {
-    width: 100%;
+    width: calc(100% - 245px);
     position: fixed;
     top: 0;
     left: 245px;

src/renderer/components/TimelineSpace/HeaderMenu.vue

@@ -1,6 +1,11 @@
 <template>
 <div id="header_menu">
   <div class="channel">{{ title }}</div>
+  <div class="tools">
+    <el-button type="text" class="toot" @click="openNewTootModal">
+      <icon name="regular/comment"></icon>
+    </el-button>
+  </div>
 </div>
 </template>
 
@@ -50,6 +55,9 @@ export default {
           this.$store.commit('TimelineSpace/HeaderMenu/updateTitle', 'Home')
           break
       }
+    },
+    openNewTootModal () {
+      this.$store.commit('TimelineSpace/Modals/NewToot/changeModal', true)
     }
   }
 }
@@ -58,11 +66,29 @@ export default {
 <style lang="scss" scoped>
 #header_menu {
   background-color: var(--theme-background-color);
+  padding: 12px 24px;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  align-items: stretch;
 
   .channel {
-    padding: 12px 24px;
     font-weight: bold;
     font-size: 18px;
+    margin-right: auto;
+  }
+
+  .tools {
+    font-size: 18px;
+
+    .toot {
+      color: var(--theme-secondary-color);
+      padding: 0;
+
+      &:hover {
+        color: #409eff;
+      }
+    }
   }
 }
 </style>