From aa5765971e1506bb6373b3b72461c0e2109b8dac Mon Sep 17 00:00:00 2001
From: lyswhut <lyswhut@qq.com>
Date: Sat, 7 Mar 2020 13:21:13 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E5=96=84=E9=80=89=E6=8B=A9=E5=99=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/renderer/assets/styles/variables.less     |  2 ++
 src/renderer/components/material/Btn.vue      |  2 +-
 src/renderer/components/material/FlowBtn.vue  |  2 +-
 src/renderer/components/material/Input.vue    |  2 +-
 .../components/material/ListButtons.vue       |  2 +-
 .../components/material/SearchInput.vue       |  2 +-
 .../components/material/Selection.vue         | 36 +++++++++++++++----
 7 files changed, 36 insertions(+), 12 deletions(-)

diff --git a/src/renderer/assets/styles/variables.less b/src/renderer/assets/styles/variables.less
index 2c526a9f..b33da89b 100644
--- a/src/renderer/assets/styles/variables.less
+++ b/src/renderer/assets/styles/variables.less
@@ -578,3 +578,5 @@
 @radius-progress-border: 5px;
 
 @transition-theme: .4s ease;
+
+@form-radius: 3px;
diff --git a/src/renderer/components/material/Btn.vue b/src/renderer/components/material/Btn.vue
index 45811c1a..f464d7bd 100644
--- a/src/renderer/components/material/Btn.vue
+++ b/src/renderer/components/material/Btn.vue
@@ -24,7 +24,7 @@ export default {
 .btn {
   display: inline-block;
   border: none;
-  border-radius: 3px;
+  border-radius: @form-radius;
   cursor: pointer;
   padding: 8px 15px;
   color: @color-btn;
diff --git a/src/renderer/components/material/FlowBtn.vue b/src/renderer/components/material/FlowBtn.vue
index 65d6b28c..56a270a3 100644
--- a/src/renderer/components/material/FlowBtn.vue
+++ b/src/renderer/components/material/FlowBtn.vue
@@ -78,7 +78,7 @@ export default {
   button {
     background-color: transparent;
     border: none;
-    border-radius: 3px;
+    border-radius: @form-radius;
     margin-right: 5px;
     cursor: pointer;
     padding: 4px 7px;
diff --git a/src/renderer/components/material/Input.vue b/src/renderer/components/material/Input.vue
index 80102493..478e12e2 100644
--- a/src/renderer/components/material/Input.vue
+++ b/src/renderer/components/material/Input.vue
@@ -49,7 +49,7 @@ export default {
 .input {
   display: inline-block;
   border: none;
-  border-radius: 3px;
+  border-radius: @form-radius;
   padding: 7px 8px;
   color: @color-btn;
   outline: none;
diff --git a/src/renderer/components/material/ListButtons.vue b/src/renderer/components/material/ListButtons.vue
index 62c68346..baf9e72f 100644
--- a/src/renderer/components/material/ListButtons.vue
+++ b/src/renderer/components/material/ListButtons.vue
@@ -91,7 +91,7 @@ export default {
   button {
     background-color: transparent;
     border: none;
-    border-radius: 3px;
+    border-radius: @form-radius;
     margin-right: 5px;
     cursor: pointer;
     padding: 4px 7px;
diff --git a/src/renderer/components/material/SearchInput.vue b/src/renderer/components/material/SearchInput.vue
index cbfa3ccd..c9e19cd0 100644
--- a/src/renderer/components/material/SearchInput.vue
+++ b/src/renderer/components/material/SearchInput.vue
@@ -133,7 +133,7 @@ export default {
 @import '../../assets/styles/layout.less';
 
 .search {
-  border-radius: 3px;
+  border-radius: @form-radius;
   transition: box-shadow .4s ease, background-color @transition-theme;
   display: flex;
   flex-flow: column nowrap;
diff --git a/src/renderer/components/material/Selection.vue b/src/renderer/components/material/Selection.vue
index 8cf08817..49b1e282 100644
--- a/src/renderer/components/material/Selection.vue
+++ b/src/renderer/components/material/Selection.vue
@@ -2,7 +2,7 @@
   div(:class="[$style.select, show ? $style.active : '']")
     div(:class="$style.label" ref="dom_btn" @click="handleShow") {{label}}
     ul(:class="$style.list")
-      li(v-for="item in list" @click="handleClick(item)" :title="itemName ? item[itemName] : item") {{itemName ? item[itemName] : item}}
+      li(v-for="item in list" :class="(itemKey ? item[itemKey] : item) == value ? $style.active : null" @click="handleClick(item)" :title="itemName ? item[itemName] : item") {{itemName ? item[itemName] : item}}
 </template>
 
 <script>
@@ -70,11 +70,17 @@ export default {
 <style lang="less" module>
 @import '../../assets/styles/layout.less';
 
+@selection-height: 28px;
+
 .select {
   font-size: 12px;
   position: relative;
+  width: 300px;
 
   &.active {
+    .label {
+      background-color: @color-btn-background;
+    }
     .list {
       transform: scaleY(1);
       opacity: 1;
@@ -83,13 +89,16 @@ export default {
 }
 
 .label {
-  // background-color: @color-btn-background;
+  background-color: @color-btn-background;
+  padding: 0 10px;
   transition: background-color @transition-theme;
-  border: 1px solid #ccc;
-  height: 28px;
+  height: @selection-height;
+  line-height: 27px;
   box-sizing: border-box;
   color: @color-btn;
+  border-radius: @form-radius;
   cursor: pointer;
+  .mixin-ellipsis-1;
 
   &:hover {
     background-color: @color-theme_2-hover;
@@ -101,24 +110,30 @@ export default {
 
 .list {
   position: absolute;
-  top: 100%;
+  top: 0;
   left: 0;
+  width: 100%;
   background-color: @color-theme_2-background_2;
   opacity: 0;
   transform: scaleY(0);
-  transform-origin: 0 0 0;
+  transform-origin: 0 @selection-height / 2 0;
   transition: .25s ease;
   transition-property: transform, opacity;
   z-index: 10;
+  border-radius: @form-radius;
+  overflow: hidden;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
 
   li {
     cursor: pointer;
-    padding: 8px 15px;
+    padding: 0 10px;
+    line-height: @selection-height;
     // color: @color-btn;
     outline: none;
     transition: background-color @transition-theme;
     background-color: @color-btn-background;
     box-sizing: border-box;
+    .mixin-ellipsis-1;
 
     &:hover {
       background-color: @color-theme_2-hover;
@@ -126,6 +141,9 @@ export default {
     &:active {
       background-color: @color-theme_2-active;
     }
+    &.active {
+      color: @color-btn;
+    }
   }
 }
 
@@ -134,6 +152,7 @@ each(@themes, {
   :global(#container.@{value}) {
     .label {
       color: ~'@{color-@{value}-btn}';
+      background-color: ~'@{color-@{value}-btn-background}';
       &:hover {
         background-color: ~'@{color-@{value}-theme_2-hover}';
       }
@@ -153,6 +172,9 @@ each(@themes, {
         &:active {
           background-color: ~'@{color-@{value}-theme_2-active}';
         }
+        &.active {
+          color: ~'@{color-@{value}-btn}';
+        }
       }
     }
   }