Browse Source

Pull request #2878: DESIGN-3951 feat: fineUI的tooltip组件优化

Merge in VISUAL/fineui from ~DAILER/fineui:master to master

* commit '500fd9ce08679abf4dc33987a880d6669249fe75':
  BI-104712 fix: vertical_sticky 降级为vertical_fill的时候要添加 scrolly:true
  DESIGN-110 feat: 反馈-tooltip
  DESIGN-110 feat: 反馈-tooltip
  DESIGN-3951 feat: fineUI的tooltip组件优化
es6
Dailer 2 years ago
parent
commit
65a4b52aba
  1. 22
      demo/js/base/tip/demo.title.js
  2. 16
      src/base/single/0.single.js
  3. 15
      src/base/single/tip/tip.tooltip.js
  4. 23
      src/core/controller/controller.tooltips.js
  5. 4
      src/core/platform/web/config.js

22
demo/js/base/tip/demo.title.js

@ -30,10 +30,30 @@ Demo.Title = BI.inherit(BI.Widget, {
warningTitle: "自定义title提示效果",
text: "自定义title提示效果",
textAlign: "center"
}, {
type: "bi.label",
cls: "layout-bg3",
height: 50,
title: () => "函数返回值作为title提示",
text: "title提示支持函数",
textAlign: "center"
}, {
type: "bi.label",
cls: "layout-bg4",
height: 50,
title: function () {
return {
level: "success",
text: "自定义title\n提示效果",
textAlign: "center"
};
},
text: "title提示支持对象,作为bi.tooltip的props",
textAlign: "center"
}],
hgap: 300,
vgap: 20
};
}
});
BI.shortcut("demo.title", Demo.Title);
BI.shortcut("demo.title", Demo.Title);

16
src/base/single/0.single.js

@ -23,11 +23,17 @@ BI.Single = BI.inherit(BI.Widget, {
_showToolTip: function (e, opt) {
opt || (opt = {});
var self = this, o = this.options;
var type = this.getTipType() || (this.isEnabled() ? "success" : "warning");
var title = type === "success" ? this.getTitle() : (this.getWarningTitle() || this.getTitle());
if (BI.isKey(title)) {
BI.Tooltips.show(e, this.getName(), title, type, this, opt);
var o = this.options;
var tooltipOpt = {};
var title = this.getTitle();
if (BI.isPlainObject(title)) {
tooltipOpt = title;
} else {
tooltipOpt.level = this.getTipType() || (this.isEnabled() ? "success" : "warning");
tooltipOpt.text = tooltipOpt.level === "success" ? title : (this.getWarningTitle() || title);
}
if (BI.isKey(tooltipOpt.text)) {
BI.Tooltips.show(e, this.getName(), tooltipOpt, this, opt);
if (o.action) {
BI.Actions.runAction(o.action, "hover", o, this);
}

15
src/base/single/tip/tip.tooltip.js

@ -7,8 +7,8 @@
*/
BI.Tooltip = BI.inherit(BI.Tip, {
_const: {
hgap: 5,
vgap: 3
hgap: 8,
vgap: 4
},
_defaultConfig: function () {
@ -17,7 +17,8 @@ BI.Tooltip = BI.inherit(BI.Tip, {
text: "",
level: "success", // success或warning
stopEvent: false,
stopPropagation: false
stopPropagation: false,
textAlign: "left",
});
},
@ -44,10 +45,11 @@ BI.Tooltip = BI.inherit(BI.Tip, {
type: "bi.vertical",
element: this,
hgap: this._const.hgap,
innerVgap: this._const.vgap,
items: BI.map(texts, function (i, text) {
return {
type: "bi.label",
textAlign: "left",
textAlign: o.textAlign,
whiteSpace: "normal",
text: text,
textHeight: 18
@ -58,11 +60,12 @@ BI.Tooltip = BI.inherit(BI.Tip, {
this.text = BI.createWidget({
type: "bi.label",
element: this,
textAlign: "left",
textAlign: o.textAlign,
whiteSpace: "normal",
text: o.text,
textHeight: 18,
hgap: this._const.hgap
hgap: this._const.hgap,
vgap: this._const.vgap,
});
}
},

23
src/core/controller/controller.tooltips.js

@ -12,17 +12,25 @@ BI.TooltipsController = BI.inherit(BI.Controller, {
this.showingTips = {};// 存储正在显示的tooltip
},
_createTooltip: function (text, level) {
/**
*
* @param opt
* @param opt.text {String} 文本
* @param opt.level {String} 级别, success或warning
* @param opt.textAlign {String} 文本对齐方式, left, center, right
* @returns {*}
* @private
*/
_createTooltip: function (opt) {
return BI.createWidget({
type: "bi.tooltip",
text: text,
level: level,
...opt,
stopEvent: true
});
},
// opt: {container: '', belowMouse: false}
show: function (e, name, text, level, context, opt) {
show: function (e, name, tooltipOpt, context, opt) {
opt || (opt = {});
var self = this;
BI.each(this.showingTips, function (i, tip) {
@ -30,7 +38,7 @@ BI.TooltipsController = BI.inherit(BI.Controller, {
});
this.showingTips = {};
if (!this.has(name)) {
this.create(name, text, level, opt.container || "body");
this.create(name, tooltipOpt, opt.container || "body");
}
if (!opt.belowMouse) {
var offset = context.element.offset();
@ -41,7 +49,6 @@ BI.TooltipsController = BI.inherit(BI.Controller, {
var top = offset.top + bounds.height + 5;
}
var tooltip = this.get(name);
tooltip.setText(text);
tooltip.element.css({
left: "0px",
top: "0px"
@ -84,9 +91,9 @@ BI.TooltipsController = BI.inherit(BI.Controller, {
return this;
},
create: function (name, text, level, context) {
create: function (name, tooltipOpt, context) {
if (!this.has(name)) {
var tooltip = this._createTooltip(text, level);
var tooltip = this._createTooltip(tooltipOpt);
this.add(name, tooltip);
BI.createWidget({
type: "bi.absolute",

4
src/core/platform/web/config.js

@ -210,12 +210,12 @@ BI.prepares.push(function () {
});
BI.Plugin.configWidget("bi.horizontal_sticky", function (ob) {
if (!isSupportSticky) {
return BI.extend({}, ob, {type: "bi.horizontal_fill"});
return BI.extend({ scrollx: true }, ob, {type: "bi.horizontal_fill"});
}
});
BI.Plugin.configWidget("bi.vertical_sticky", function (ob) {
if (!isSupportSticky) {
return BI.extend({}, ob, {type: "bi.vertical_fill"});
return BI.extend({ scrolly: true }, ob, {type: "bi.vertical_fill"});
}
});

Loading…
Cancel
Save