diff --git a/src/base/single/label/abstract.label.js b/src/base/single/label/abstract.label.js index 0835e57c05..753fe6d6cd 100644 --- a/src/base/single/label/abstract.label.js +++ b/src/base/single/label/abstract.label.js @@ -59,6 +59,7 @@ BI.createWidget({ type: "bi.center_adapt", height: o.height, + columnSize: [o.whiteSpace === "normal" ? "auto" : ""], // important! 让文字在normal下shrink为1 scrollable: o.whiteSpace === "normal", element: this, items: [ @@ -71,6 +72,7 @@ } BI.createWidget({ // 1.2 type: "bi.center_adapt", + columnSize: [o.whiteSpace === "normal" ? "auto" : ""], // important! 让文字在normal下shrink为1 scrollable: o.whiteSpace === "normal", element: this, items: [ @@ -93,6 +95,7 @@ this.text = BI.createWidget(json); BI.createWidget({ type: "bi.center_adapt", + columnSize: [o.whiteSpace === "normal" ? "auto" : ""], // important! 让文字在normal下shrink为1 scrollable: o.whiteSpace === "normal", element: this, items: [this.text] @@ -127,6 +130,7 @@ this.text = BI.createWidget(json); BI.createWidget({ type: "bi.center_adapt", + columnSize: [o.whiteSpace === "normal" ? "auto" : ""], // important! 让文字在normal下shrink为1 scrollable: o.whiteSpace === "normal", element: this, items: [this.text] @@ -137,6 +141,7 @@ json.maxWidth = o.textWidth; BI.createWidget({ type: "bi.center_adapt", + columnSize: [o.whiteSpace === "normal" ? "auto" : ""], // important! 让文字在normal下shrink为1 scrollable: o.whiteSpace === "normal", element: this, items: [ @@ -159,6 +164,7 @@ this.text = BI.createWidget(json); BI.createWidget({ type: "bi.center_adapt", + columnSize: [o.whiteSpace === "normal" ? "auto" : ""], // important! 让文字在normal下shrink为1 scrollable: true, element: this, items: [this.text] @@ -195,6 +201,7 @@ })); BI.createWidget({ type: "bi.center_adapt", + columnSize: [o.whiteSpace === "normal" ? "auto" : ""], // important! 让文字在normal下shrink为1 element: this, items: [this.text] }); @@ -211,6 +218,7 @@ BI.createWidget({ type: adaptLayout, horizontalAlign: o.textAlign, + columnSize: [o.whiteSpace === "normal" ? "auto" : ""], // important! 让文字在normal下shrink为1 height: o.height, scrollable: o.whiteSpace === "normal", element: this, @@ -225,6 +233,7 @@ BI.createWidget({ // 2.2 type: adaptLayout, horizontalAlign: o.textAlign, + columnSize: [o.whiteSpace === "normal" ? "auto" : ""], // important! 让文字在normal下shrink为1 scrollable: o.whiteSpace === "normal", hgap: o.hgap, vgap: o.vgap, @@ -262,6 +271,7 @@ BI.createWidget({ // 2.4 type: adaptLayout, horizontalAlign: o.textAlign, + columnSize: [o.whiteSpace === "normal" ? "auto" : ""], // important! 让文字在normal下shrink为1 scrollable: o.whiteSpace === "normal", hgap: o.hgap, vgap: o.vgap, @@ -281,6 +291,7 @@ BI.createWidget({ // 2.5 type: adaptLayout, horizontalAlign: o.textAlign, + columnSize: [o.whiteSpace === "normal" ? "auto" : ""], // important! 让文字在normal下shrink为1 scrollable: o.whiteSpace === "normal", hgap: o.hgap, vgap: o.vgap, @@ -329,6 +340,7 @@ BI.createWidget({ type: adaptLayout, horizontalAlign: o.textAlign, + columnSize: [o.whiteSpace === "normal" ? "auto" : ""], // important! 让文字在normal下shrink为1 element: this, scrollable: o.whiteSpace === "normal", items: [this.text] diff --git a/src/core/wrapper/layout/flex/flex.horizontal.js b/src/core/wrapper/layout/flex/flex.horizontal.js index c3b5aaeb16..22cd106af9 100644 --- a/src/core/wrapper/layout/flex/flex.horizontal.js +++ b/src/core/wrapper/layout/flex/flex.horizontal.js @@ -34,7 +34,7 @@ BI.FlexHorizontalLayout = BI.inherit(BI.Layout, { w.element.css({ position: "relative" }); - if (BI.contains([BI.HorizontalAlign.Left, BI.HorizontalAlign.Right, BI.HorizontalAlign.Center], o.horizontalAlign)) { + if (o.horizontalAlign !== BI.HorizontalAlign.Stretch && o.columnSize[i] !== "auto") { w.element.css({ "flex-shrink": "0" }); diff --git a/src/core/wrapper/layout/flex/flex.vertical.js b/src/core/wrapper/layout/flex/flex.vertical.js index 8660ff3fd4..8de8e6d310 100644 --- a/src/core/wrapper/layout/flex/flex.vertical.js +++ b/src/core/wrapper/layout/flex/flex.vertical.js @@ -33,7 +33,7 @@ BI.FlexVerticalLayout = BI.inherit(BI.Layout, { w.element.css({ position: "relative" }); - if (o.verticalAlign === BI.VerticalAlign.Top || o.verticalAlign === BI.VerticalAlign.Bottom) { + if (o.verticalAlign !== BI.VerticalAlign.Stretch && o.rowSize[i] !== "auto") { w.element.css({ "flex-shrink": "0" }); diff --git a/src/core/wrapper/layout/flex/wrapper/flex.wrapper.horizontal.js b/src/core/wrapper/layout/flex/wrapper/flex.wrapper.horizontal.js index 7383626263..ce695e8c3d 100644 --- a/src/core/wrapper/layout/flex/wrapper/flex.wrapper.horizontal.js +++ b/src/core/wrapper/layout/flex/wrapper/flex.wrapper.horizontal.js @@ -35,7 +35,7 @@ BI.FlexWrapperHorizontalLayout = BI.inherit(BI.Layout, { w.element.css({ position: "relative" }); - if (o.horizontalAlign === BI.HorizontalAlign.Left || o.horizontalAlign === BI.HorizontalAlign.Right) { + if (o.horizontalAlign !== BI.HorizontalAlign.Stretch && o.columnSize[i] !== "auto") { w.element.css({ "flex-shrink": "0" }); diff --git a/src/core/wrapper/layout/flex/wrapper/flex.wrapper.vertical.js b/src/core/wrapper/layout/flex/wrapper/flex.wrapper.vertical.js index 2809f38f1b..0c373fa191 100644 --- a/src/core/wrapper/layout/flex/wrapper/flex.wrapper.vertical.js +++ b/src/core/wrapper/layout/flex/wrapper/flex.wrapper.vertical.js @@ -35,7 +35,7 @@ BI.FlexWrapperVerticalLayout = BI.inherit(BI.Layout, { w.element.css({ position: "relative" }); - if (o.verticalAlign === BI.VerticalAlign.Top || o.verticalAlign === BI.VerticalAlign.Bottom) { + if (o.verticalAlign !== BI.VerticalAlign.Stretch && o.rowSize[i] !== "auto") { w.element.css({ "flex-shrink": "0" }); diff --git a/src/less/core/wrapper/flex.horizontal.less b/src/less/core/wrapper/flex.horizontal.less index 2128de4483..565cd3bb72 100644 --- a/src/less/core/wrapper/flex.horizontal.less +++ b/src/less/core/wrapper/flex.horizontal.less @@ -1,10 +1,23 @@ -.bi-flex-horizontal-layout { +.flex() { display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */ display: -ms-flexbox; /* TWEENER - IE 10 */ display: -webkit-flex; /* NEW - Chrome */ display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */ +} + +.vertical() { + /* 09版 */ + -webkit-box-orient: vertical; + /* 12版 */ + -webkit-flex-direction: column; + -moz-flex-direction: column; + -ms-flex-direction: column; + -o-flex-direction: column; + flex-direction: column; +} +.horizontal() { /* 09版 */ -webkit-box-orient: horizontal; /* 12版 */ @@ -13,6 +26,12 @@ -ms-flex-direction: row; -o-flex-direction: row; flex-direction: row; +} + +.bi-flex-horizontal-layout { + .flex(); + + .horizontal(); /* 09版 */ -webkit-box-pack: flex-start; @@ -20,12 +39,12 @@ -webkit-justify-content: flex-start; -moz-justify-content: flex-start; -ms-justify-content: flex-start; - -o-justify-content: flex-start; -ms-flex-pack: start; + -o-justify-content: flex-start; justify-content: flex-start; /* 09版 */ - -webkit-box-align: start; + -webkit-box-align: flex-start; /* 12版 */ -webkit-align-items: flex-start; -moz-align-items: flex-start; @@ -101,14 +120,17 @@ } &.h-stretch { + .vertical(); + /* 09版 */ - -webkit-box-orient: vertical; + -webkit-box-align: stretch; /* 12版 */ - -webkit-flex-direction: column; - -moz-flex-direction: column; - -ms-flex-direction: column; - -o-flex-direction: column; - flex-direction: column; + -webkit-align-items: stretch; + -moz-align-items: stretch; + -ms-align-items: stretch; + -ms-flex-align: stretch; + -o-align-items: stretch; + align-items: stretch; &.v-middle { /* 09版 */ @@ -133,18 +155,5 @@ -ms-flex-pack: flex-end; justify-content: flex-end; } - - &.v-stretch { - } - - /* 09版 */ - -webkit-box-align: stretch; - /* 12版 */ - -webkit-align-items: stretch; - -moz-align-items: stretch; - -ms-align-items: stretch; - -ms-flex-align: stretch; - -o-align-items: stretch; - align-items: stretch; } } diff --git a/src/less/core/wrapper/flex.vertical.less b/src/less/core/wrapper/flex.vertical.less index e4ab847b3f..d324e2fa5d 100644 --- a/src/less/core/wrapper/flex.vertical.less +++ b/src/less/core/wrapper/flex.vertical.less @@ -1,10 +1,12 @@ -.bi-flex-vertical-layout { +.flex() { display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */ display: -ms-flexbox; /* TWEENER - IE 10 */ display: -webkit-flex; /* NEW - Chrome */ display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */ +} +.vertical() { /* 09版 */ -webkit-box-orient: vertical; /* 12版 */ @@ -13,6 +15,22 @@ -ms-flex-direction: column; -o-flex-direction: column; flex-direction: column; +} + +.horizontal() { + /* 09版 */ + -webkit-box-orient: horizontal; + /* 12版 */ + -webkit-flex-direction: row; + -moz-flex-direction: row; + -ms-flex-direction: row; + -o-flex-direction: row; + flex-direction: row; +} + +.bi-flex-vertical-layout { + .flex(); + .vertical(); /* 09版 */ -webkit-box-pack: flex-start; @@ -20,12 +38,12 @@ -webkit-justify-content: flex-start; -moz-justify-content: flex-start; -ms-justify-content: flex-start; - -o-justify-content: flex-start; -ms-flex-pack: start; + -o-justify-content: flex-start; justify-content: flex-start; /* 09版 */ - -webkit-box-align: start; + -webkit-box-align: flex-start; /* 12版 */ -webkit-align-items: flex-start; -moz-align-items: flex-start; @@ -101,14 +119,17 @@ } &.v-stretch { + .horizontal(); + /* 09版 */ - -webkit-box-orient: horizontal; + -webkit-box-align: stretch; /* 12版 */ - -webkit-flex-direction: row; - -moz-flex-direction: row; - -ms-flex-direction: row; - -o-flex-direction: row; - flex-direction: row; + -webkit-align-items: stretch; + -moz-align-items: stretch; + -ms-align-items: stretch; + -ms-flex-align: stretch; + -o-align-items: stretch; + align-items: stretch; &.h-center { /* 09版 */ @@ -133,18 +154,5 @@ -o-justify-content: flex-end; justify-content: flex-end; } - - &.h-stretch { - } - - /* 09版 */ - -webkit-box-align: stretch; - /* 12版 */ - -webkit-align-items: stretch; - -moz-align-items: stretch; - -ms-align-items: stretch; - -ms-flex-align: stretch; - -o-align-items: stretch; - align-items: stretch; } } diff --git a/src/less/core/wrapper/flex.wrapper.horizontal.less b/src/less/core/wrapper/flex.wrapper.horizontal.less index d5036ed19f..607275b4c5 100644 --- a/src/less/core/wrapper/flex.wrapper.horizontal.less +++ b/src/less/core/wrapper/flex.wrapper.horizontal.less @@ -1,18 +1,37 @@ +.flex() { + display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ + display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */ + display: -ms-flexbox; /* TWEENER - IE 10 */ + display: -webkit-flex; /* NEW - Chrome */ + display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */ +} + +.vertical() { + /* 09版 */ + -webkit-box-orient: vertical; + /* 12版 */ + -webkit-flex-direction: column; + -moz-flex-direction: column; + -ms-flex-direction: column; + -o-flex-direction: column; + flex-direction: column; +} + +.horizontal() { + /* 09版 */ + -webkit-box-orient: horizontal; + /* 12版 */ + -webkit-flex-direction: row; + -moz-flex-direction: row; + -ms-flex-direction: row; + -o-flex-direction: row; + flex-direction: row; +} + .bi-flex-scrollable-horizontal-layout { & .flex-scrollable-horizontal-layout-wrapper { - display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ - display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */ - display: -ms-flexbox; /* TWEENER - IE 10 */ - display: -webkit-flex; /* NEW - Chrome */ - display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */ - /* 09版 */ - -webkit-box-orient: horizontal; - /* 12版 */ - -webkit-flex-direction: row; - -moz-flex-direction: row; - -ms-flex-direction: row; - -o-flex-direction: row; - flex-direction: row; + .flex(); + .horizontal(); /* 09版 */ -webkit-box-pack: flex-start; @@ -52,6 +71,7 @@ -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; + -ms-flex-align: center; -o-align-items: center; align-items: center; @@ -68,6 +88,7 @@ -webkit-align-items: flex-end; -moz-align-items: flex-end; -ms-align-items: flex-end; + -ms-flex-align: end; -o-align-items: flex-end; align-items: flex-end; } @@ -79,6 +100,7 @@ -webkit-align-items: stretch; -moz-align-items: stretch; -ms-align-items: stretch; + -ms-flex-align: stretch; -o-align-items: stretch; align-items: stretch; } @@ -90,8 +112,8 @@ -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; - -o-justify-content: center; -ms-flex-pack: center; + -o-justify-content: center; justify-content: center; } @@ -105,6 +127,8 @@ } &.h-stretch { + .vertical(); + /* 09版 */ -webkit-box-align: stretch; /* 12版 */ @@ -134,7 +158,7 @@ -webkit-justify-content: flex-end; -moz-justify-content: flex-end; -ms-justify-content: flex-end; - -ms-flex-pack: flex-end; + -ms-flex-pack: end; -o-justify-content: flex-end; justify-content: flex-end; } diff --git a/src/less/core/wrapper/flex.wrapper.vertical.less b/src/less/core/wrapper/flex.wrapper.vertical.less index 749701485e..5806e81086 100644 --- a/src/less/core/wrapper/flex.wrapper.vertical.less +++ b/src/less/core/wrapper/flex.wrapper.vertical.less @@ -1,18 +1,37 @@ +.flex() { + display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ + display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */ + display: -ms-flexbox; /* TWEENER - IE 10 */ + display: -webkit-flex; /* NEW - Chrome */ + display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */ +} + +.vertical() { + /* 09版 */ + -webkit-box-orient: vertical; + /* 12版 */ + -webkit-flex-direction: column; + -moz-flex-direction: column; + -ms-flex-direction: column; + -o-flex-direction: column; + flex-direction: column; +} + +.horizontal() { + /* 09版 */ + -webkit-box-orient: horizontal; + /* 12版 */ + -webkit-flex-direction: row; + -moz-flex-direction: row; + -ms-flex-direction: row; + -o-flex-direction: row; + flex-direction: row; +} + .bi-flex-scrollable-vertical-layout { & .flex-scrollable-vertical-layout-wrapper { - display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ - display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */ - display: -ms-flexbox; /* TWEENER - IE 10 */ - display: -webkit-flex; /* NEW - Chrome */ - display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */ - /* 09版 */ - -webkit-box-orient: vertical; - /* 12版 */ - -webkit-flex-direction: column; - -moz-flex-direction: column; - -ms-flex-direction: column; - -o-flex-direction: column; - flex-direction: column; + .flex(); + .vertical(); /* 09版 */ -webkit-box-pack: flex-start; @@ -108,6 +127,8 @@ } &.v-stretch { + .horizontal(); + /* 09版 */ -webkit-box-align: stretch; /* 12版 */ diff --git a/src/less/resource/font.less b/src/less/resource/font.less index 8b171cf853..bb401f315f 100644 --- a/src/less/resource/font.less +++ b/src/less/resource/font.less @@ -5,26 +5,24 @@ .addFontRes(); .activateFont(); +//关闭 .font(close-font, @font-cross); .font-hover(close-h-font, @font-cross); .font-hover-active(close-ha-font, @font-cross); - +//关闭-圆形 .font(circle-close-font, @font-circle-close); - -//搜索框中的带有hover后颜色变红的图标 +//关闭-搜索用,搜索框中的带有hover后颜色变红的图标 .font-hover(search-close-h-font, @font-cross, inherit, @color-bi-text-failure); -.font-hover(pre-page-h-font, @font-arrow-left); - -.font-hover(next-page-h-font, @font-arrow-right); - +//搜索 .font(search-font, @font-search); +//日期时间 .font(date-font, @font-date); .font(time-font, @font-time); .font-hover(date-change-h-font, @font-change); -//子菜单选中 +//一个点,子菜单选中 .font(dot-font, @font-dot, @color-bi-text-black); .font-hover(dot-h-font, @font-dot, @color-bi-text-black); .font-hover-active(dot-ha-font, @font-dot, @color-bi-text, @color-bi-text-gray, @color-bi-text-black); @@ -42,27 +40,30 @@ .font-hover-active(copy-ha-font, @font-copy); .font-effect(copy-e-font, @font-copy); -//选中的字段 +//✔对号家族 .font(check-mark-font, @font-check-mark); .font-hover(check-mark-h-font, @font-check-mark); .font-hover-active(check-mark-ha-font, @font-check-mark); .font-effect(check-mark-e-font, @font-check-mark); - -/** dashboard组件/控件 下拉列表图标字体 ~end~**/ - +//✔两个特定场景下的对号 +.font(check-font, @font-check-mark, @color-bi-text-highlight); +.font-hover-active(item-check-font, @font-check-mark, @color-bi-text, @color-bi-text-gray, @color-bi-font-active); //翻页按钮字体图标 .font-hover(row-pre-page-h-font, @font-arrow-left); .font-hover(row-next-page-h-font, @font-arrow-right); .font-hover(column-pre-page-h-font, @font-up-triangle); .font-hover(column-next-page-h-font, @font-down-triangle); +//用在日期控件内部的翻页 +.font-hover(pre-page-h-font, @font-arrow-left); +.font-hover(next-page-h-font, @font-arrow-right); -.font(expander-right-font, @font-solid-right); -.font(expander-down-font, @font-solid-bottom); - -// 实心下拉三角 +//实心下拉三角 .font-hover(solid-triangle-top-font, @font-solid-top); .font-hover(solid-triangle-bottom-font, @font-solid-bottom); +//实心展开三角 +.font(expander-right-font, @font-solid-right); +.font(expander-down-font, @font-solid-bottom); //下拉框小小三角 .font(trigger-triangle-font, @font-no-sort-no-filter); @@ -74,18 +75,28 @@ .font-hover(pull-down-h-font, @font-down-triangle, @color-bi-text-light-gray); .font-hover-active(pull-down-ha-font, @font-down-triangle, @color-bi-text-light-gray); -.font(check-font, @font-check-mark, @color-bi-text-highlight); - -.font-hover-active(item-check-font, @font-check-mark, @color-bi-text, @color-bi-text-gray, @color-bi-font-active); - -.font-hover(primary-key-font, @font-key); - -.font(drag-tag-font, @font-cross, @color-bi-text-redmark); +//toast +.font(toast-error-font, @font-tip-error); +.font(toast-success-font, @font-tip-success); +.font(toast-warning-font, @font-tip-warning); +.font(toast-message-font, @font-tip-message); //数值区间 .font(less-font, @font-less); .font(less-equal-font, @font-less-equal); +//数值微调器 +.font(add-up-font, @font-up-triangle); +.font(minus-down-font, @font-down-triangle); + +//不在fineui中的字体 +//钥匙 +.font-hover(primary-key-font, @font-key); +//一个绿色的➕加号 +.font(text-add-tip-font, @font-add, @color-bi-text-success); +//一个红色的×叉号 +.font(drag-tag-font, @font-cross, @color-bi-text-redmark); + //文本控件 .font(text-bold-font, @font-bold); .font(text-italic-font, @font-italic); @@ -96,14 +107,3 @@ .font(text-align-left-font, @font-align-left); .font(text-align-center-font, @font-align-center); .font(text-align-right-font, @font-align-right); - -//toast -.font(toast-error-font, @font-tip-error); -.font(toast-success-font, @font-tip-success); -.font(toast-warning-font, @font-tip-warning); -.font(toast-message-font, @font-tip-message); - -.font(text-add-tip-font, @font-add, @color-bi-text-success); - -.font(add-up-font, @font-up-triangle); -.font(minus-down-font, @font-down-triangle); \ No newline at end of file