Browse Source

Pull request #82955: REPORT-74080 把按钮 master 分支上的提交合并到 release

Merge in DEC/fineui from ~TREECAT/dec-fineui:release/11.0 to release/11.0

* commit '2ee2fa945df6765ec33b5cf26928512f92395e47':
  REPORT-74080 fix: 修复自定义图标无法居中,调整了撑开的公式
  DESIGN-4069 fix: button 的 setIcon 不使用 IconChangeButton
  DESIGN-4069 feat: button 增加 setIcon 属性
  DESIGN-4069 feat: 增加了一组 plain 按钮
master
treecat 2 years ago
parent
commit
54d5b2c303
  1. 93
      demo/js/base/button/demo.button.js
  2. 34
      src/base/single/button/buttons/button.js
  3. 75
      src/less/base/single/button/button.less
  4. 8
      src/less/lib/theme.less

93
demo/js/base/button/demo.button.js

@ -256,6 +256,17 @@ Demo.Button = BI.inherit(BI.Widget, {
iconGap: 24, iconGap: 24,
iconPosition: "top" iconPosition: "top"
} }
},{
el: {
type: "bi.button",
text: "自动撑开高度",
iconCls: "close-font",
textHeight: 32,
iconGap: 24,
vgap: 16,
hgap: 100,
iconPosition: "top"
}
}, { }, {
el: { el: {
type: "bi.button", type: "bi.button",
@ -309,6 +320,88 @@ Demo.Button = BI.inherit(BI.Widget, {
cls: "hover-mask", cls: "hover-mask",
light: true light: true
} }
}, {
el: {
type: "bi.button",
iconCls: "plus-font",
text: "朴素的按钮",
level: "common",
plain: true
}
}, {
el: {
type: "bi.button",
iconCls: "plus-font",
text: "朴素的按钮",
level: "success",
plain: true
}
}, {
el: {
type: "bi.button",
iconCls: "plus-font",
text: "朴素的按钮",
level: "error",
plain: true
}
}, {
el: {
type: "bi.button",
iconCls: "plus-font",
text: "朴素的按钮",
level: "warning",
plain: true
}
}, {
el: {
type: "bi.button",
iconCls: "plus-font",
text: "朴素的按钮",
level: "ignore",
plain: true
}
}, {
el: {
type: "bi.button",
iconCls: "plus-font",
text: "朴素的按钮",
level: "ignore",
plain: true,
disabled: true
}
}, {
el: {
type: "bi.button",
iconCls: "plus-font",
text: "朴素的按钮",
level: "error",
plain: true,
disabled: true
}
}, {
el: {
type: "bi.button",
iconCls: "plus-font",
text: "朴素的按钮",
level: "common",
plain: true,
disabled: true
}
}, {
el: {
type: "bi.button",
iconCls: "plus-font",
text: "点我,更改图标",
handler() {
this.i = this.i === undefined ? 0 : ++this.i;
const arr = ["text-background-font", "check-mark-ha-font", "close-font", "search-font", "date-change-h-font"];
if(this.i >= arr.length) {
this.i = 0;
}
this.setIcon(arr[this.i]);
},
height: 24
}
}]; }];
// BI.each(items, function (i, item) { // BI.each(items, function (i, item) {
// item.el.handler = function () { // item.el.handler = function () {

34
src/base/single/button/buttons/button.js

@ -14,20 +14,29 @@
BI.Button = BI.inherit(BI.BasicButton, { BI.Button = BI.inherit(BI.BasicButton, {
_const: { _const: {
iconWidth: 16 iconWidth: 18
}, },
_defaultConfig: function (props) { _defaultConfig: function (props) {
var conf = BI.Button.superclass._defaultConfig.apply(this, arguments); var conf = BI.Button.superclass._defaultConfig.apply(this, arguments);
var adaptiveHeight = 0;
if (isVertical(props.iconPosition)) {
// 图标高度和文字高度默认相等
adaptiveHeight += (props.textHeight || 16) * 2;
adaptiveHeight += props.iconGap || 4;
var tGap = props.tgap || props.vgap || 2;
var bGap = props.bgap || props.vgap || 2;
adaptiveHeight += (tGap + bGap);
}
return BI.extend(conf, { return BI.extend(conf, {
baseCls: (conf.baseCls || "") + " bi-button" + ((BI.isIE() && BI.isIE9Below()) ? " hack" : ""), baseCls: (conf.baseCls || "") + " bi-button" + ((BI.isIE() && BI.isIE9Below()) ? " hack" : ""),
attributes: { attributes: {
tabIndex: 1 tabIndex: 1
}, },
minWidth: (props.block === true || props.clear === true) ? 0 : 80, minWidth: (props.block === true || props.clear === true) ? 0 : 80,
// 44 = 垂直间距 6 + 边框 2 + 图标 16 + 图标和文字间隔 8 + 文字 12 height: isVertical(props.iconPosition) ? adaptiveHeight : 24,
height: isVertical(props.iconPosition) ? 44 + ((props.iconGap || 8) - 8) : 24,
shadow: props.clear !== true, shadow: props.clear !== true,
isShadowShowingOnSelected: true, isShadowShowingOnSelected: true,
readonly: true, readonly: true,
@ -38,6 +47,7 @@
ghost: false, // 是否幽灵显示, 即正常状态无背景 ghost: false, // 是否幽灵显示, 即正常状态无背景
loading: false, // 是否处于加载中 loading: false, // 是否处于加载中
light: false, // 是否使用浅色 light: false, // 是否使用浅色
plain: false, // 是否是朴素按钮,和 clear 的区别是 plain 有悬浮效果
textAlign: "center", textAlign: "center",
whiteSpace: "nowrap", whiteSpace: "nowrap",
textWidth: null, textWidth: null,
@ -48,7 +58,7 @@
bgap: 0, bgap: 0,
lgap: 0, lgap: 0,
rgap: 0, rgap: 0,
iconGap: 8, iconGap: 4,
iconPosition: "left" iconPosition: "left"
}); });
}, },
@ -80,7 +90,10 @@
cls: o.iconCls, cls: o.iconCls,
width: this._const.iconWidth, width: this._const.iconWidth,
height: lineHeight, height: lineHeight,
lineHeight: lineHeight lineHeight: lineHeight,
// 不设置,自定义按钮无法居中
iconWidth: o.iconWidth,
iconHeight: o.iconHeight
}); });
this.text = BI.createWidget({ this.text = BI.createWidget({
type: "bi.label", type: "bi.label",
@ -144,6 +157,9 @@
if (o.ghost === true) { if (o.ghost === true) {
this.element.addClass("ghost"); this.element.addClass("ghost");
} }
if (o.plain === true) {
this.element.addClass("plain");
}
if (o.loading === true) { if (o.loading === true) {
this.element.addClass("loading"); this.element.addClass("loading");
} }
@ -191,6 +207,14 @@
} }
}, },
setIcon: function (cls) {
var o = this.options;
if (this.icon && o.iconCls !== cls) {
this.icon.element.removeClass(o.iconCls).addClass(cls);
o.iconCls = cls;
}
},
doRedMark: function () { doRedMark: function () {
this.text.doRedMark.apply(this.text, arguments); this.text.doRedMark.apply(this.text, arguments);
}, },

75
src/less/base/single/button/button.less

@ -33,6 +33,11 @@ body .bi-button, #body .bi-button {
display: none; display: none;
} }
} }
&.plain {
font-size: inherit;
border-width: 0;
background-color: transparent;
}
&.ghost { &.ghost {
font-size: inherit; font-size: inherit;
background-color: transparent; background-color: transparent;
@ -60,6 +65,18 @@ body .bi-button, #body .bi-button {
&.clear, &.clear .b-font:before { &.clear, &.clear .b-font:before {
color: @color-bi-text-common-clear-button; color: @color-bi-text-common-clear-button;
} }
&.plain, &.plain .b-font:before {
background-color: transparent;
color: @color-bi-text-common-plain-button;
}
&.plain {
&:hover {
background-color: @color-bi-background-hover-plain-button;
}
&:focus {
background-color: @color-bi-background-active-plain-button;
}
}
&.ghost { &.ghost {
&, & .b-font:before { &, & .b-font:before {
color: @color-bi-text-common-ghost-button; color: @color-bi-text-common-ghost-button;
@ -99,6 +116,18 @@ body .bi-button, #body .bi-button {
background-color: transparent; background-color: transparent;
border-color: @color-bi-border-dark-gray-line; border-color: @color-bi-border-dark-gray-line;
} }
&.plain, &.plain .b-font:before {
background-color: transparent;
color: @color-bi-text-ignore-plain-button;
}
&.plain {
&:hover {
background-color: @color-bi-background-hover-plain-button;
}
&:focus {
background-color: @color-bi-background-active-plain-button;
}
}
} }
&.button-success { &.button-success {
& { & {
@ -144,6 +173,18 @@ body .bi-button, #body .bi-button {
background-color: @color-bi-background-success-button; background-color: @color-bi-background-success-button;
} }
} }
&.plain, &.plain .b-font:before {
background-color: transparent;
color: @color-bi-text-success-plain-button;
}
&.plain {
&:hover {
background-color: @color-bi-background-hover-plain-button;
}
&:focus {
background-color: @color-bi-background-active-plain-button;
}
}
} }
&.button-warning { &.button-warning {
& { & {
@ -189,6 +230,18 @@ body .bi-button, #body .bi-button {
background-color: @color-bi-background-warning-button; background-color: @color-bi-background-warning-button;
} }
} }
&.plain, &.plain .b-font:before {
background-color: transparent;
color: @color-bi-text-warning-plain-button;
}
&.plain {
&:hover {
background-color: @color-bi-background-hover-plain-button;
}
&:focus {
background-color: @color-bi-background-active-plain-button;
}
}
} }
&.button-error { &.button-error {
& { & {
@ -234,6 +287,18 @@ body .bi-button, #body .bi-button {
background-color: @color-bi-background-error-button; background-color: @color-bi-background-error-button;
} }
} }
&.plain, &.plain .b-font:before {
background-color: transparent;
color: @color-bi-text-error-plain-button;
}
&.plain {
&:hover {
background-color: @color-bi-background-hover-plain-button;
}
&:focus {
background-color: @color-bi-background-active-plain-button;
}
}
} }
&.button-common.disabled, &.button-common.disabled,
&.button-success.disabled, &.button-success.disabled,
@ -277,6 +342,16 @@ body .bi-button, #body .bi-button {
.opacity(1); .opacity(1);
} }
} }
&.plain {
&, & .b-font:before {
color: @color-bi-text-disabled-plain-clear-button !important;
}
background: transparent !important;
border-width: 0 !important;
&:hover, &:focus, &:active {
.opacity(1);
}
}
&.ghost { &.ghost {
&, & .b-font:before { &, & .b-font:before {
// color: @color-bi-text-disabled-ignore-ghost-button !important; // color: @color-bi-text-disabled-ignore-ghost-button !important;

8
src/less/lib/theme.less

@ -64,6 +64,7 @@
@color-bi-background-button: @color-bi-background-highlight; @color-bi-background-button: @color-bi-background-highlight;
@color-bi-text-common-button: @color-bi-text; @color-bi-text-common-button: @color-bi-text;
@color-bi-text-common-clear-button: @color-bi-text-highlight; @color-bi-text-common-clear-button: @color-bi-text-highlight;
@color-bi-text-common-plain-button: @color-bi-text-highlight;
@color-bi-text-common-ghost-button: @color-bi-text-highlight; @color-bi-text-common-ghost-button: @color-bi-text-highlight;
@color-bi-text-common-ghost-button-theme-dark: @color-bi-text; @color-bi-text-common-ghost-button-theme-dark: @color-bi-text;
@color-bi-text-disabled-common-ghost-button-theme-dark: @color-bi-text; @color-bi-text-disabled-common-ghost-button-theme-dark: @color-bi-text;
@ -77,10 +78,13 @@
@color-bi-background-common-light-button: @color-bi-background-light-blue; @color-bi-background-common-light-button: @color-bi-background-light-blue;
@color-bi-background-hover-common-light-button: @color-bi-background-light-blue; @color-bi-background-hover-common-light-button: @color-bi-background-light-blue;
@color-bi-background-active-common-light-button: @color-bi-background-light-blue; @color-bi-background-active-common-light-button: @color-bi-background-light-blue;
@color-bi-background-hover-plain-button: @color-black-5;
@color-bi-background-active-plain-button: @color-black-10;
@color-bi-background-active-common-ghost-button: @color-bi-background-highlight; @color-bi-background-active-common-ghost-button: @color-bi-background-highlight;
@color-bi-background-active-common-ghost-button-theme-dark: @color-bi-background-default; @color-bi-background-active-common-ghost-button-theme-dark: @color-bi-background-default;
@color-bi-text-ignore-button: @color-bi-text-highlight; @color-bi-text-ignore-button: @color-bi-text-highlight;
@color-bi-text-ignore-plain-button: @background-color-light-black;
@color-bi-border-ignore-button: @color-bi-border-highlight; @color-bi-border-ignore-button: @color-bi-border-highlight;
@color-bi-background-ignore-button: @color-bi-background-default; @color-bi-background-ignore-button: @color-bi-background-default;
@color-bi-background-ignore-button-theme-dark: @color-bi-background-default-theme-dark; @color-bi-background-ignore-button-theme-dark: @color-bi-background-default-theme-dark;
@ -91,6 +95,7 @@
@color-bi-background-success-button: @color-bi-background-success; @color-bi-background-success-button: @color-bi-background-success;
@color-bi-border-success-button: @color-bi-border-success; @color-bi-border-success-button: @color-bi-border-success;
@color-bi-text-success-clear-button: @color-bi-text-success; @color-bi-text-success-clear-button: @color-bi-text-success;
@color-bi-text-success-plain-button: @color-bi-text-success;
@color-bi-text-success-ghost-button: @color-bi-text-success; @color-bi-text-success-ghost-button: @color-bi-text-success;
@color-bi-text-success-light-button: @color-bi-text-success; @color-bi-text-success-light-button: @color-bi-text-success;
@color-bi-background-success-light-button: @color-bi-background-light-success; @color-bi-background-success-light-button: @color-bi-background-light-success;
@ -98,6 +103,7 @@
@color-bi-background-active-success-light-button: @color-bi-background-light-success; @color-bi-background-active-success-light-button: @color-bi-background-light-success;
@color-bi-text-warning-button: @color-bi-text; @color-bi-text-warning-button: @color-bi-text;
@color-bi-text-warning-plain-button: @color-bi-text-redmark;
@color-bi-text-warning-light-button: @color-bi-text-redmark; @color-bi-text-warning-light-button: @color-bi-text-redmark;
@color-bi-background-warning-light-button: @color-bi-background-light-warning; @color-bi-background-warning-light-button: @color-bi-background-light-warning;
@color-bi-background-hover-warning-light-button: @color-bi-background-light-warning; @color-bi-background-hover-warning-light-button: @color-bi-background-light-warning;
@ -115,6 +121,7 @@
@color-bi-background-hover-error-light-button: @color-bi-background-light-failure; @color-bi-background-hover-error-light-button: @color-bi-background-light-failure;
@color-bi-background-active-error-light-button: @color-bi-background-light-failure; @color-bi-background-active-error-light-button: @color-bi-background-light-failure;
@color-bi-border-error-button: @color-bi-border-failure; @color-bi-border-error-button: @color-bi-border-failure;
@color-bi-text-error-plain-button: @color-bi-text-failure;
@color-bi-text-error-clear-button: @color-bi-text-failure; @color-bi-text-error-clear-button: @color-bi-text-failure;
@color-bi-text-error-ghost-button: @color-bi-text-failure; @color-bi-text-error-ghost-button: @color-bi-text-failure;
@color-bi-text-disabled-button: @color-bi-text-disabled; @color-bi-text-disabled-button: @color-bi-text-disabled;
@ -124,6 +131,7 @@
@color-bi-background-disabled-ignore-button: @color-bi-background-default; @color-bi-background-disabled-ignore-button: @color-bi-background-default;
@color-bi-border-disabled-ignore-button: @color-bi-border-line; @color-bi-border-disabled-ignore-button: @color-bi-border-line;
@color-bi-text-disabled-ignore-clear-button: @color-bi-text-disabled; @color-bi-text-disabled-ignore-clear-button: @color-bi-text-disabled;
@color-bi-text-disabled-plain-clear-button: @color-bi-text-disabled;
@color-bi-text-disabled-common-ghost-button: @color-bi-text-highlight; @color-bi-text-disabled-common-ghost-button: @color-bi-text-highlight;
@color-bi-border-disabled-common-ghost-button: @color-bi-border-highlight; @color-bi-border-disabled-common-ghost-button: @color-bi-border-highlight;
@color-bi-text-disabled-success-ghost-button: @color-bi-text-success; @color-bi-text-disabled-success-ghost-button: @color-bi-text-success;

Loading…
Cancel
Save