KERNEL-9882 完成checkbox radio switch整理

i18n/i18n.cn.js

@@ -198,5 +198,7 @@ BI.i18n = {
     "BI-Basic_Year_Quarter_Range_Error": "请选择{R1}年{R2}季度-{R3}年{R4}季度的日期",
     "BI-Basic_Search_And_Patch_Paste": "搜索，支持批量粘贴、粘贴值通过换行识别",
     "BI-Basic_Recommend_Color": "推荐色",
-    "BI-Basic_Too_Much_Value_Get_Two_Thousand": "粘贴的值过多，只能识别出前2000个值"
+    "BI-Basic_Too_Much_Value_Get_Two_Thousand": "粘贴的值过多，只能识别出前2000个值",
+    "BI-Basic_Open": "开",
+    "BI-Basic_Close": "关",
 };

src/case/button/switch.js

@@ -5,15 +5,16 @@ BI.Switch = BI.inherit(BI.BasicButton, {
 
     props: {
         extraCls: "bi-switch",
-        height: 22,
+        height: 20,
         width: 44,
         logic: {
             dynamic: false
-        }
+        },
+        showTip: false
     },
 
     render: function () {
-        var self = this;
+        var self = this, o = this.options;
         return {
             type: "bi.absolute",
             ref: function () {
@@ -22,20 +23,42 @@ BI.Switch = BI.inherit(BI.BasicButton, {
             items: [{
                 el: {
                     type: "bi.text_button",
-                    cls: "circle-button bi-card"
+                    cls: "circle-button"
                 },
-                width: 18,
-                height: 18,
+                width: 12,
+                height: 12,
+                top: 4,
+                left: this.options.selected ? 28 : 4
+            }, {
+                type: "bi.label",
+                text: BI.i18nText("BI-Basic_Open"),
+                cls: "content-tip",
+                left: 8,
                 top: 2,
-                left: this.options.selected ? 24 : 2
+                invisible: !o.showTip,
+                ref: function (ref) {
+                    self.openTip = ref;
+                }
+            }, {
+                type: "bi.label",
+                text: BI.i18nText("BI-Basic_Close"),
+                cls: "content-tip",
+                right: 8,
+                top: 2,
+                invisible: !o.showTip,
+                ref: function (ref) {
+                    self.closeTip = ref;
+                }
             }]
         };
     },
 
     setSelected: function (v) {
         BI.Switch.superclass.setSelected.apply(this, arguments);
-        this.layout.attr("items")[0].left = v ? 24 : 2;
+        this.layout.attr("items")[0].left = v ? 28 : 4;
         this.layout.resize();
+        this.options.showTip && this.openTip.setVisible(v);
+        this.options.showTip && this.closeTip.setVisible(!v);
     },
 
     doClick: function () {
@@ -44,4 +67,4 @@ BI.Switch = BI.inherit(BI.BasicButton, {
     }
 });
 BI.Switch.EVENT_CHANGE = "EVENT_CHANGE";
-BI.shortcut("bi.switch", BI.Switch);
+BI.shortcut("bi.switch", BI.Switch);

src/less/base/single/button/switch.less

@@ -8,22 +8,14 @@
     background-color: @color-bi-background-active-switch;
   }
   & .circle-button{
-    .border-radius(9px 9px 9px 9px);
+    .border-radius(6px 6px 6px 6px);
     .transition(all .2s ease-in-out);
+    background-color: @color-bi-background-active-switch-content;
   }
   &.disabled {
-    background-color: @color-bi-background-disabled-switch;
+    opacity: 0.5;
   }
-}
-
-.bi-theme-dark {
-  .bi-switch{
-    background-color: @color-bi-background-switch-theme-dark;
-    &.active {
-      background-color: @color-bi-background-active-switch-theme-dark;
-    }
-    &.disabled {
-      background-color: @color-bi-background-disabled-switch-theme-dark;
-    }
+  & .content-tip {
+    color: @color-bi-font-switch-tip;
   }
 }

src/less/base/single/input/checkbox.less

@@ -30,8 +30,9 @@
   &.active, &:active {
     & .checkbox-content, &.checkbox-content{
       border-color: @color-bi-border-hover-active-checkbox;
+      background-color: @color-bi-background-active-checkbox;
       &:after {
-        border-color: @color-bi-border-default;
+        border-color: @color-bi-background-active-checkbox-content;
         opacity: 1;
       }
     }
@@ -49,6 +50,7 @@
         background-color: @color-bi-background-disabled-active-checkbox;
         &:after {
           opacity: 1;
+          border-color: @color-bi-background-disabled-active-checkbox-content;
         }
       }
     }
@@ -66,6 +68,10 @@
     &.active, &:active {
       & .checkbox-content, &.checkbox-content {
         border-color: @color-bi-border-hover-active-checkbox-theme-dark;
+        background-color: @color-bi-background-active-checkbox-theme-dark;
+        &:after {
+          border-color: @color-bi-background-active-checkbox-content-theme-dark;
+        }
       }
     }
     &.disabled {
@@ -76,6 +82,9 @@
         & .checkbox-content, &.checkbox-content {
           background-color: @color-bi-background-disabled-active-checkbox-theme-dark;
           border-color: @color-bi-border-disabled-checkbox-theme-dark;
+          &:after {
+            border-color: @color-bi-background-disabled-active-checkbox-content-theme-dark;
+          }
         }
       }
     }

src/less/base/single/input/radio.less

@@ -16,6 +16,7 @@
   &:active, &.active {
     & .radio-content, &.radio-content {
       border-color:  @color-bi-border-hover-active-radio;
+      background-color: @color-bi-background-active-radio;
       &:after {
         width: 6px;
         height: 6px;
@@ -24,7 +25,7 @@
         top: 50%;
         left: 50%;
         .border-radius(3px);
-        background-color: @color-bi-background-radio;
+        background-color: @color-bi-background-active-radio-content;
         .transform(translate(-50%, -50%));
         @transition: all .1s cubic-bezier(.71,-.46,.88,.6),opacity .1s;
         .transition(@transition);
@@ -43,7 +44,7 @@
       & .radio-content, &.radio-content {
         background-color: @color-bi-background-disabled-active-radio;
         &:after {
-          background-color: @color-bi-background-radio;
+          background-color: @color-bi-background-disabled-active-radio-content;
         }
       }
     }
@@ -61,6 +62,9 @@
     &.active, &:active {
       & .radio-content, &.radio-content {
         border-color:@color-bi-border-hover-active-radio-theme-dark;
+        &:after {
+          background-color: @color-bi-background-active-radio-content-theme-dark;
+        }
       }
     }
     &.disabled {
@@ -74,6 +78,9 @@
         & .radio-content, &.radio-content {
           background-color: @color-bi-background-disabled-active-radio-theme-dark;
           border-color: @color-bi-border-disabled-radio-theme-dark;
+          &:after {
+            background-color: @color-bi-background-disabled-active-radio-content-theme-dark;
+          }
         }
       }
     }

src/less/lib/constant.less

@@ -158,6 +158,8 @@
 @color-bi-white: @color-bi-white-100;
 @color-bi-white-theme-dark: #20263B;
 
+@color-bi-transparent: transparent;
+
 
   //font color
 @font-color-black: @color-bi-black;

src/less/lib/theme.less

@@ -103,7 +103,12 @@
 @color-bi-border-disabled-radio-theme-dark: @color-bi-border-disabled-theme-dark;
 @color-bi-border-hover-active-radio: @color-bi-border-highlight;
 @color-bi-border-hover-active-radio-theme-dark: @color-bi-border-highlight;
+@color-bi-background-active-radio-content-theme-dark: @color-bi-background-default;
+@color-bi-background-disabled-active-radio-content-theme-dark: @color-bi-transparent;
 @color-bi-background-radio: @color-bi-background-default;
+@color-bi-background-active-radio: @color-bi-background-highlight;
+@color-bi-background-active-radio-content: @color-bi-background-default;
+@color-bi-background-disabled-active-radio-content: @color-bi-background-default;
 @color-bi-background-disabled-radio: @color-bi-background-disabled;
 @color-bi-background-disabled-radio-theme-dark: @color-bi-background-disabled-theme-dark;
 @color-bi-background-disabled-active-radio: @color-bi-background-dark-gray;
@@ -119,10 +124,18 @@
 @color-bi-background-disabled-checkbox-theme-dark: @color-bi-background-disabled-theme-dark;
 @color-bi-background-disabled-active-checkbox: @color-bi-background-dark-gray;
 @color-bi-background-disabled-active-checkbox-theme-dark: @color-bi-background-dark-gray-theme-dark;
+@color-bi-background-active-checkbox: @color-bi-background-highlight;
+@color-bi-background-active-checkbox-theme-dark: @color-bi-background-highlight;
+@color-bi-background-active-checkbox-content: @color-bi-background-default;
+@color-bi-background-disabled-active-checkbox-content: @color-bi-background-default;
+@color-bi-background-active-checkbox-content-theme-dark: @color-bi-background-default;
+@color-bi-background-disabled-active-checkbox-content-theme-dark: @color-bi-transparent;
 // 开关
 @color-bi-background-switch: @color-bi-background-dark-gray;
 @color-bi-background-switch-theme-dark: @color-bi-background-dark-gray-theme-dark;
 @color-bi-background-active-switch: @color-bi-background-highlight;
+@color-bi-background-active-switch-content: @color-bi-background-default;
+@color-bi-font-switch-tip: @color-bi-white;
 @color-bi-background-active-switch-theme-dark: @color-bi-background-highlight;
 @color-bi-background-disabled-switch: @color-bi-background-disabled;
 @color-bi-background-disabled-switch-theme-dark: @color-bi-background-disabled-theme-dark;