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

39
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 () {

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