fanruan
/
fineui
4
1
Fork 3
Code Issues 1 Pull Requests Releases Wiki Activity
Browse Source

Pull request #2398: KERNEL-9882 checkbox radio switch整理 

Merge in VISUAL/fineui from ~WINDY/fui:master to master

* commit '77a322a12a92e0e4befeb9e578ca2431ddd293b4':
  KERNEL-9882 完成checkbox radio switch整理
es6
windy 3 years ago
parent
d33b3e9fe2 77a322a12a
commit
e9b008c0fa
7 changed files with 74 additions and 26 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      i18n/i18n.cn.js
  2. 41
      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
Unescape View File

@ -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": "关",
};

41
src/case/button/switch.js
Unescape View File

@ -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);

18
src/less/base/single/button/switch.less
Unescape View File

@ -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;
}
}

11
src/less/base/single/input/checkbox.less
Unescape View File

@ -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;
}
}
}
}

11
src/less/base/single/input/radio.less
Unescape View File

@ -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;
}
}
}
}

2
src/less/lib/constant.less
Unescape View File

@ -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;

13
src/less/lib/theme.less
Unescape View File

@ -112,7 +112,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;
@ -128,10 +133,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;

Write Preview
Loading…
Cancel
Save