From 25bae6661cacbce21db02fe6cdac73ac96755ff7 Mon Sep 17 00:00:00 2001 From: windy <1374721899@qq.com> Date: Thu, 6 Jan 2022 17:23:58 +0800 Subject: [PATCH] =?UTF-8?q?KERNEL-9882=20=E5=AE=8C=E6=88=90checkbox=20radi?= =?UTF-8?q?o=20switch=E6=95=B4=E7=90=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- i18n/i18n.cn.js | 4 ++- src/case/button/switch.js | 41 ++++++++++++++++++------ src/less/base/single/button/switch.less | 18 +++-------- src/less/base/single/input/checkbox.less | 11 ++++++- src/less/base/single/input/radio.less | 11 +++++-- src/less/lib/constant.less | 2 ++ src/less/lib/theme.less | 13 ++++++++ 7 files changed, 74 insertions(+), 26 deletions(-) diff --git a/i18n/i18n.cn.js b/i18n/i18n.cn.js index 9a43ca507..74fb1e212 100644 --- a/i18n/i18n.cn.js +++ b/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": "关", }; \ No newline at end of file diff --git a/src/case/button/switch.js b/src/case/button/switch.js index 5ae460960..1e9501661 100644 --- a/src/case/button/switch.js +++ b/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); \ No newline at end of file +BI.shortcut("bi.switch", BI.Switch); diff --git a/src/less/base/single/button/switch.less b/src/less/base/single/button/switch.less index 26f4b496b..21206d89e 100644 --- a/src/less/base/single/button/switch.less +++ b/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; } } \ No newline at end of file diff --git a/src/less/base/single/input/checkbox.less b/src/less/base/single/input/checkbox.less index 9bf8f3542..21088cdc7 100644 --- a/src/less/base/single/input/checkbox.less +++ b/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; + } } } } diff --git a/src/less/base/single/input/radio.less b/src/less/base/single/input/radio.less index 334569278..53dfc7952 100644 --- a/src/less/base/single/input/radio.less +++ b/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; + } } } } diff --git a/src/less/lib/constant.less b/src/less/lib/constant.less index fdae83a72..f5cf713f2 100644 --- a/src/less/lib/constant.less +++ b/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; diff --git a/src/less/lib/theme.less b/src/less/lib/theme.less index 42aed4e30..02480c449 100644 --- a/src/less/lib/theme.less +++ b/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;