From 664bc9b6f6773796c94cea154656830384c165be Mon Sep 17 00:00:00 2001 From: treecat Date: Wed, 1 Jun 2022 14:44:20 +0800 Subject: [PATCH 1/2] =?UTF-8?q?DESIGN-4069=20feat:=20=E6=96=B0=E5=A2=9E?= =?UTF-8?q?=E4=B8=80=E5=A5=97=E6=B5=85=E8=89=B2=E6=8C=89=E9=92=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- demo/js/base/button/demo.button.js | 31 ++++++++++++ src/base/single/button/buttons/button.js | 12 +++-- src/less/base/single/button/button.less | 64 ++++++++++++++++++++++++ src/less/lib/colors.less | 4 ++ src/less/lib/theme.less | 22 ++++++++ 5 files changed, 129 insertions(+), 4 deletions(-) diff --git a/demo/js/base/button/demo.button.js b/demo/js/base/button/demo.button.js index 195fe06e2..45860ff70 100644 --- a/demo/js/base/button/demo.button.js +++ b/demo/js/base/button/demo.button.js @@ -242,6 +242,37 @@ Demo.Button = BI.inherit(BI.Widget, { iconCls: "close-font", iconPosition: "right" } + }, { + el: { + type: "bi.button", + text: "浅色的一般按钮", + iconCls: "close-font", + light: true + } + }, { + el: { + type: "bi.button", + text: "浅色的成功按钮", + level: "success", + iconCls: "close-font", + light: true + } + }, { + el: { + type: "bi.button", + text: "浅色的警告按钮", + level: "warning", + iconCls: "close-font", + light: true + } + }, { + el: { + type: "bi.button", + iconCls: "close-font", + text: "浅色的失败按钮", + level: "error", + light: true + } }]; // BI.each(items, function (i, item) { // item.el.handler = function () { diff --git a/src/base/single/button/buttons/button.js b/src/base/single/button/buttons/button.js index 7c3f4c186..1eb9c0f22 100644 --- a/src/base/single/button/buttons/button.js +++ b/src/base/single/button/buttons/button.js @@ -37,6 +37,7 @@ clear: false, // 是否去掉边框和背景 ghost: false, // 是否幽灵显示, 即正常状态无背景 loading: false, // 是否处于加载中 + light: false, // 是否使用浅色 textAlign: "center", whiteSpace: "nowrap", textWidth: null, @@ -59,7 +60,7 @@ var lineHeight, textHeight = o.textHeight; if (BI.isNumber(o.height)) { if (!isVertical(o.iconPosition)) { - if (o.clear || o.block) { + if (o.clear || o.block || o.light) { lineHeight = o.height; } else { lineHeight = o.height - 2; @@ -146,6 +147,9 @@ if (o.loading === true) { this.element.addClass("loading"); } + if (o.light === true) { + this.element.addClass("light"); + } if (o.minWidth > 0) { this.element.css({"min-width": o.minWidth / BI.pixRatio + BI.pixUnit}); } @@ -168,10 +172,10 @@ }, setLoading: function (loading) { - if(loading) { - this.element.addClass("loading"); + if (loading) { + this.element.addClass("loading"); } else { - this.element.removeClass("loading"); + this.element.removeClass("loading"); } }, diff --git a/src/less/base/single/button/button.less b/src/less/base/single/button/button.less index e34c4f5f0..6faa28452 100644 --- a/src/less/base/single/button/button.less +++ b/src/less/base/single/button/button.less @@ -41,6 +41,22 @@ body .bi-button, #body .bi-button { &, & .b-font:before { color: @color-bi-text-common-button; } + &.light { + border-width: 0; + background-color: @color-bi-background-common-light-button; + + &, & .b-font:before { + color: @color-bi-text-common-light-button; + } + + &:hover, &:focus { + background-color: @color-bi-background-hover-common-light-button; + } + + &.active { + background-color: @color-bi-background-active-common-light-button; + } + } &.clear, &.clear .b-font:before { color: @color-bi-text-common-clear-button; } @@ -92,6 +108,22 @@ body .bi-button, #body .bi-button { background-color: @color-bi-background-success-button; border-color: @color-bi-border-success-button; } + &.light { + border-width: 0; + background-color: @color-bi-background-success-light-button; + + &, & .b-font:before { + color: @color-bi-text-success-light-button; + } + + &:hover, &:focus { + background-color: @color-bi-background-hover-success-light-button; + } + + &.active { + background-color: @color-bi-background-active-success-light-button; + } + } &.clear { &, & .b-font:before { color: @color-bi-text-success-clear-button; @@ -121,6 +153,22 @@ body .bi-button, #body .bi-button { background-color: @color-bi-background-warning-button; border-color: @color-bi-border-warning-button; } + &.light { + border-width: 0; + background-color: @color-bi-background-warning-light-button; + + &, & .b-font:before { + color: @color-bi-text-warning-light-button; + } + + &:hover, &:focus { + background-color: @color-bi-background-hover-warning-light-button; + } + + &.active { + background-color: @color-bi-background-active-warning-light-button; + } + } &.clear { &, & .b-font:before { color: @color-bi-text-warning-clear-button; @@ -150,6 +198,22 @@ body .bi-button, #body .bi-button { background-color: @color-bi-background-error-button; border-color: @color-bi-border-error-button; } + &.light { + border-width: 0; + background-color: @color-bi-background-error-light-button; + + &, & .b-font:before { + color: @color-bi-text-error-light-button; + } + + &:hover, &:focus { + background-color: @color-bi-background-hover-error-light-button; + } + + &.active { + background-color: @color-bi-background-active-error-light-button; + } + } &.clear { &, & .b-font:before { color: @color-bi-text-error-clear-button; diff --git a/src/less/lib/colors.less b/src/less/lib/colors.less index 060768c03..dca2a9989 100644 --- a/src/less/lib/colors.less +++ b/src/less/lib/colors.less @@ -34,6 +34,7 @@ @color-bi-text-success: @font-color-success; //失败字体颜色 @color-bi-text-failure: @font-color-negative; + //基本提亮颜色 @color-bi-text-highlight: @font-color-highlight; //标红色 @@ -98,6 +99,9 @@ @color-bi-background-highlight: @background-color-highlight; //背景提亮色(浅) @color-bi-background-light-highlight: @background-color-light-highlight; +// 浅蓝色的背景 +@color-bi-background-light-blue: @color-blue-10; + //黑色边框色 @color-bi-border-black: @border-color-black; diff --git a/src/less/lib/theme.less b/src/less/lib/theme.less index 3c85b8031..87d578943 100644 --- a/src/less/lib/theme.less +++ b/src/less/lib/theme.less @@ -72,6 +72,12 @@ @color-bi-background-hover-common-ghost-button: @color-bi-background-highlight; @color-bi-text-hover-common-ghost-button-theme-dark: @color-bi-text-normal; @color-bi-background-hover-common-ghost-button-theme-dark: @color-bi-background-default; + +@color-bi-text-common-light-button: @color-bi-text-highlight; +@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-active-common-light-button: @color-bi-background-light-blue; + @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-text-ignore-button: @color-bi-text-highlight; @@ -80,18 +86,34 @@ @color-bi-background-ignore-button-theme-dark: @color-bi-background-default-theme-dark; @color-bi-background-hover-ignore-button-theme-dark: @color-blue-10; @color-bi-background-active-ignore-button-theme-dark: @color-blue-10; + @color-bi-text-success-button: @color-bi-text; @color-bi-background-success-button: @color-bi-background-success; @color-bi-border-success-button: @color-bi-border-success; @color-bi-text-success-clear-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-background-success-light-button: @color-bi-background-light-success; +@color-bi-background-hover-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-light-button: @color-bi-text-redmark; +@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-active-warning-light-button: @color-bi-background-light-warning; + @color-bi-background-warning-button: @color-bi-background-warning; @color-bi-border-warning-button: @color-bi-border-warning; @color-bi-text-warning-clear-button: @color-bi-text-redmark; @color-bi-text-warning-ghost-button: @color-bi-text-redmark; + @color-bi-text-error-button: @color-bi-text; +@color-bi-background-error-light-button: @color-bi-background-light-failure; @color-bi-background-error-button: @color-bi-background-failure; +@color-bi-text-error-light-button: @color-bi-text-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-border-error-button: @color-bi-border-failure; @color-bi-text-error-clear-button: @color-bi-text-failure; @color-bi-text-error-ghost-button: @color-bi-text-failure; From ce3dd546bd467b40efe0a5b626ba06ba69b04603 Mon Sep 17 00:00:00 2001 From: windy <1374721899@qq.com> Date: Thu, 2 Jun 2022 10:15:57 +0800 Subject: [PATCH 2/2] =?UTF-8?q?=E6=97=A0JIRA=E4=BB=BB=E5=8A=A1=20=E6=9B=B4?= =?UTF-8?q?=E6=96=B0lessconfig?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- bi.lessconfig.json | 15 ++++++++++++--- 1 file changed, 12 insertions(+), 3 deletions(-) diff --git a/bi.lessconfig.json b/bi.lessconfig.json index 321466b7c..aa64c08d9 100644 --- a/bi.lessconfig.json +++ b/bi.lessconfig.json @@ -4,20 +4,29 @@ "@color-light-blue-100": "#19B8EA", "@color-orange-100": "#FAAA39", "@color-red-100": "#E65251", - "@color-black": "#000A19", + "@color-black": "#091E40", "@color-light-gray": "#ECEEF3", "@color-light-gray-theme-dark": "#292F45", + "@border-color-line": "rgba(9, 30, 64, 0.15)", + "@border-color-light-line": "#E6E9EF", "@border-color-dark-line": "#2E3A4D", "@color-sliver-theme-dark": "#363E55", - "@border-color-disabled": "#E7E8EB", + "@border-color-disabled": "rgba(9, 30, 64, 0.07)", + "@font-color-gray": "rgba(9, 30, 64, 0.9)", + "@font-color-light-gray": "rgba(9, 30, 64, 0.66)", + "@font-color-tips": "rgba(9, 30, 64, 0.47)", + "@font-color-disabled": "rgba(9, 30, 64, 0.25)", + "@color-bi-background-active-radio": "transparent", + "@color-bi-border-radio": "rgba(9, 30, 64, 0.37)", + "@color-bi-border-disabled-radio": "rgba(9, 30, 64, 0.19)", "@color-bi-background-active-radio-content": "#2C60DB", "@color-bi-background-disabled-active-radio-content": "#FFFFFF", "@color-bi-background-disabled-active-radio-content-theme-dark": "#606479", "@color-bi-background-disabled-active-checkbox-content": "#FFFFFF", "@color-bi-background-disabled-active-checkbox-content-theme-dark": "#606479", - "@color-bi-background-tooltip-success": "#2E3A4D", "@color-bi-text-header-background": "#647185", + "@color-bi-background-tooltip-success": "#2E3A4D", "@color-bi-border-tooltip-success": "#2E3A4D", "@color-bi-background-toast-success": "#FFFFFF", "@color-bi-background-toast-warning": "#FFFFFF",