初始提交

2019-08-16 17:27:23 +08:00
parent 4dc34a48f4
commit 14f7bd10a3
112 changed files with 24294 additions and 2 deletions
@@ -0,0 +1,128 @@
+<template lang="pug">
+  div(:class="$style.toolbar")
+    //- img(v-if="icon")
+    //- h1 {{title}}
+    material-search-input(:class="$style.input")
+    div(:class="$style.control")
+      button(type="button" :class="$style.min" title="最小化" @click="min")
+      //- button(type="button" :class="$style.max" @click="max")
+      button(type="button" :class="$style.close" title="关闭" @click="close")
+</template>
+
+<script>
+import { rendererSend } from 'common/icp'
+// import { mapGetters } from 'vuex'
+export default {
+  // props: {
+  //   color: {
+  //     type: String,
+  //     default: color,
+  //   },
+  //   icon: {
+  //     type: Boolean,
+  //     default: false,
+  //   },
+  // },
+  computed: {
+    // ...mapGetters(['theme']),
+  },
+  methods: {
+    min() {
+      rendererSend('min')
+    },
+    max() {
+      rendererSend('max')
+    },
+    close() {
+      rendererSend('close')
+    },
+  },
+}
+</script>
+
+
+<style lang="less" module>
+@import '../../assets/styles/layout.less';
+
+.toolbar {
+  display: flex;
+  height: @height-toolbar;
+  justify-content: flex-end;
+  background-color: @color-theme_2;
+  align-items: center;
+  padding-left: 15px;
+  -webkit-app-region: drag;
+  z-index: 1;
+  position: relative;
+}
+.input {
+  -webkit-app-region: no-drag;
+}
+each(@themes, {
+  :global(#container.@{value}) {
+    .toolbar {
+      background-color: ~'@{color-@{value}-theme_2}';
+    }
+  }
+})
+
+// img {
+//   flex: none;
+//   height: 100%;
+// }
+
+// h1 {
+//   text-align: center;
+//   padding: 8px;
+//   flex: auto;
+//   -webkit-app-region: drag;
+//   -webkit-user-select: none;
+// }
+
+.control {
+  display: flex;
+  height: 100%;
+  -webkit-app-region: no-drag;
+
+  button {
+    width: @height-toolbar;
+    background: none;
+    border: none;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    outline: none;
+    padding: 0;
+    cursor: pointer;
+
+    &:after {
+      content: ' ';
+      display: block;
+      border-radius: 50%;
+      width: 13px;
+      height: 13px;
+      transition: background-color 0.2s ease-in-out;
+    }
+
+    &.min:after {
+      background-color: @color-minBtn;
+    }
+    &.max:after {
+      background-color: @color-maxBtn;
+    }
+    &.close:after {
+      background-color: @color-closeBtn;
+    }
+
+    &.min:hover:after {
+      background-color: lighten(@color-minBtn, 10%);
+    }
+    &.max:hover:after {
+      background-color: lighten(@color-maxBtn, 10%);
+    }
+    &.close:hover:after {
+      background-color: lighten(@color-closeBtn, 10%);
+    }
+  }
+}
+</style>