Browse Source

KERNEL-9882 完成checkbox radio switch整理

es6
windy 3 years ago
parent
commit
25bae6661c
  1. 4
      i18n/i18n.cn.js
  2. 39
      src/case/button/switch.js
  3. 18
      src/less/base/single/button/switch.less
  4. 11
      src/less/base/single/input/checkbox.less
  5. 11
      src/less/base/single/input/radio.less
  6. 2
      src/less/lib/constant.less
  7. 13
      src/less/lib/theme.less

4
i18n/i18n.cn.js

@ -198,5 +198,7 @@ BI.i18n = {
"BI-Basic_Year_Quarter_Range_Error": "请选择{R1}年{R2}季度-{R3}年{R4}季度的日期", "BI-Basic_Year_Quarter_Range_Error": "请选择{R1}年{R2}季度-{R3}年{R4}季度的日期",
"BI-Basic_Search_And_Patch_Paste": "搜索,支持批量粘贴、粘贴值通过换行识别", "BI-Basic_Search_And_Patch_Paste": "搜索,支持批量粘贴、粘贴值通过换行识别",
"BI-Basic_Recommend_Color": "推荐色", "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": "关",
}; };

39
src/case/button/switch.js

@ -5,15 +5,16 @@ BI.Switch = BI.inherit(BI.BasicButton, {
props: { props: {
extraCls: "bi-switch", extraCls: "bi-switch",
height: 22, height: 20,
width: 44, width: 44,
logic: { logic: {
dynamic: false dynamic: false
} },
showTip: false
}, },
render: function () { render: function () {
var self = this; var self = this, o = this.options;
return { return {
type: "bi.absolute", type: "bi.absolute",
ref: function () { ref: function () {
@ -22,20 +23,42 @@ BI.Switch = BI.inherit(BI.BasicButton, {
items: [{ items: [{
el: { el: {
type: "bi.text_button", type: "bi.text_button",
cls: "circle-button bi-card" cls: "circle-button"
}, },
width: 18, width: 12,
height: 18, 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, 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) { setSelected: function (v) {
BI.Switch.superclass.setSelected.apply(this, arguments); 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.layout.resize();
this.options.showTip && this.openTip.setVisible(v);
this.options.showTip && this.closeTip.setVisible(!v);
}, },
doClick: function () { doClick: function () {

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

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

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

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

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

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

2
src/less/lib/constant.less

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

13
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-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: @color-bi-border-highlight;
@color-bi-border-hover-active-radio-theme-dark: @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-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: @color-bi-background-disabled;
@color-bi-background-disabled-radio-theme-dark: @color-bi-background-disabled-theme-dark; @color-bi-background-disabled-radio-theme-dark: @color-bi-background-disabled-theme-dark;
@color-bi-background-disabled-active-radio: @color-bi-background-dark-gray; @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-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: @color-bi-background-dark-gray;
@color-bi-background-disabled-active-checkbox-theme-dark: @color-bi-background-dark-gray-theme-dark; @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: @color-bi-background-dark-gray;
@color-bi-background-switch-theme-dark: @color-bi-background-dark-gray-theme-dark; @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: @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-active-switch-theme-dark: @color-bi-background-highlight;
@color-bi-background-disabled-switch: @color-bi-background-disabled; @color-bi-background-disabled-switch: @color-bi-background-disabled;
@color-bi-background-disabled-switch-theme-dark: @color-bi-background-disabled-theme-dark; @color-bi-background-disabled-switch-theme-dark: @color-bi-background-disabled-theme-dark;

Loading…
Cancel
Save