Browse Source

feature: 气泡支持品牌色

es6
guy 2 years ago
parent
commit
a0b271ba8c
  1. 2
      jsy.lessconfig.json
  2. 4
      src/base/layer/layer.popup.js
  3. 17
      src/case/combo/bubblecombo/combo.bubble.js
  4. 2
      src/less/base/combo/combo.bubble.less
  5. 13
      src/less/base/view/popupview.less
  6. 2
      src/less/core/utils/common.less
  7. 2
      src/less/lib/constant.less

2
jsy.lessconfig.json

@ -1,5 +1,5 @@
{ {
"@background-color-primary": "#003D4D", "@background-color-card-primary": "#003D4D",
"@color-primary": "#00acbe", "@color-primary": "#00acbe",
"font-color-normal": "#0d1540", "font-color-normal": "#0d1540",
"font-color-light-gray": "#0d1540", "font-color-light-gray": "#0d1540",

4
src/base/layer/layer.popup.js

@ -4,9 +4,9 @@
* @extends BI.Widget * @extends BI.Widget
*/ */
BI.PopupView = BI.inherit(BI.Widget, { BI.PopupView = BI.inherit(BI.Widget, {
_defaultConfig: function () { _defaultConfig: function (props) {
return BI.extend(BI.PopupView.superclass._defaultConfig.apply(this, arguments), { return BI.extend(BI.PopupView.superclass._defaultConfig.apply(this, arguments), {
_baseCls: "bi-popup-view", _baseCls: "bi-popup-view" + (props.primary ? " bi-primary" : ""),
// 品牌色 // 品牌色
primary: false, primary: false,
maxWidth: "auto", maxWidth: "auto",

17
src/case/combo/bubblecombo/combo.bubble.js

@ -99,7 +99,7 @@ BI.BubbleCombo = BI.inherit(BI.Widget, {
}, },
_createTriangle: function (direction) { _createTriangle: function (direction) {
var o = this.options, pos = {}, op = {}; var self = this, o = this.options, pos = {}, op = {};
var adjustLength = this.options.adjustLength; var adjustLength = this.options.adjustLength;
var offset = this.element.offset(); var offset = this.element.offset();
var left = offset.left, right = offset.left + this.element.outerWidth(); var left = offset.left, right = offset.left + this.element.outerWidth();
@ -147,15 +147,18 @@ BI.BubbleCombo = BI.inherit(BI.Widget, {
cls: "button-combo-triangle-wrapper", cls: "button-combo-triangle-wrapper",
items: [{ items: [{
type: "bi.layout", type: "bi.layout",
cls: "bubble-combo-triangle-" + direction + (o.primary ? " bi-primary": "") cls: "bubble-combo-triangle-" + direction + (o.primary ? " bi-primary" : "")
}] }]
}); });
pos.el = this.triangle; pos.el = this.triangle;
BI.createWidget({ // 动画结束后再画三角
type: "bi.absolute", setTimeout(function () {
element: this, BI.createWidget({
items: [pos] type: "bi.absolute",
}); element: self,
items: [pos]
});
}, 200);
}, },
_createLeftTriangle: function () { _createLeftTriangle: function () {

2
src/less/base/combo/combo.bubble.less

@ -30,7 +30,7 @@
background-color: @color-bi-background-bubble-combo-triangle; background-color: @color-bi-background-bubble-combo-triangle;
} }
&.bi-primary:before { &.bi-primary:before {
background-color: @background-color-primary; background-color: @background-color-card-primary;
} }
} }
} }

13
src/less/base/view/popupview.less

@ -85,6 +85,17 @@
} }
} }
.bi-popup-view.bi-primary {
.bi-bubble-arrow {
.bubble-arrow {
&:before {
background-color: @background-color-card-primary;
color: @color-card-primary;
}
}
}
}
.bi-theme-dark { .bi-theme-dark {
.bubble-arrow:before { .bubble-arrow:before {
background: @color-bi-background-default-theme-dark; background: @color-bi-background-default-theme-dark;
@ -102,4 +113,4 @@
& .list-view-shadow { & .list-view-shadow {
.box-shadow(0 1px 5px 0, fade(@background-color-normal-theme-dark, 80)); .box-shadow(0 1px 5px 0, fade(@background-color-normal-theme-dark, 80));
} }
} }

2
src/less/core/utils/common.less

@ -123,7 +123,7 @@
color: @color-bi-text-card; color: @color-bi-text-card;
} }
&.bi-primary { &.bi-primary {
background-color: @background-color-primary; background-color: @background-color-card-primary;
color: @color-card-primary; color: @color-card-primary;
} }
} }

2
src/less/lib/constant.less

@ -24,7 +24,7 @@
// 品牌 // 品牌
@color-primary: #3685f2; @color-primary: #3685f2;
@color-card-primary: @color-white; @color-card-primary: @color-white;
@background-color-primary: #1e4092; @background-color-card-primary: #1e4092;
//green //green
@color-green-100: #13cd66; @color-green-100: #13cd66;

Loading…
Cancel
Save