From 0f33b21f42a15ef4f6cffc7bef350ff01a239d11 Mon Sep 17 00:00:00 2001 From: guy Date: Wed, 21 Mar 2018 09:53:05 +0800 Subject: [PATCH] update --- demo/css/main.css | 7 +++ demo/js/face.js | 87 +++++++++++++++++++++++++--------- demo/js/preview.js | 26 +--------- demo/less/main.less | 8 ++++ dist/demo.css | 7 +++ dist/demo.js | 113 ++++++++++++++++++++++++++------------------ 6 files changed, 156 insertions(+), 92 deletions(-) diff --git a/demo/css/main.css b/demo/css/main.css index 09095033e..092a291f1 100644 --- a/demo/css/main.css +++ b/demo/css/main.css @@ -42,6 +42,13 @@ body { background-color: #fafbfc; } +#wrapper { + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; +} .bi-theme-dark body { background-color: #191B2B; } diff --git a/demo/js/face.js b/demo/js/face.js index e3e47048b..c168fc7f1 100644 --- a/demo/js/face.js +++ b/demo/js/face.js @@ -73,7 +73,15 @@ Demo.Face = BI.inherit(BI.Widget, { self.activeFontColor = this; }, function () { self._runGlobalStyle(); - })] + }), { + width: 100, + el: { + type: "bi.text_button", + cls: "bi-list-item-active", + text: "测试激活状态", + forceCenter: true + } + }] }; }, @@ -87,7 +95,15 @@ Demo.Face = BI.inherit(BI.Widget, { self.selectFontColor = this; }, function () { self._runGlobalStyle(); - })] + }), { + width: 100, + el: { + type: "bi.text_button", + cls: "bi-list-item-active", + text: "测试选中状态", + forceCenter: true + } + }] }; }, @@ -97,11 +113,19 @@ Demo.Face = BI.inherit(BI.Widget, { type: "bi.htape", cls: "config-item bi-border-bottom", height: 40, - items: [this._createLabel("灰色字体颜色(用于Card2)："), this._createColorPicker(function () { + items: [this._createLabel("tip提示字体颜色："), this._createColorPicker(function () { self.grayFontColor = this; }, function () { self._runGlobalStyle(); - })] + }), { + width: 100, + el: { + type: "bi.icon_text_item", + cls: "bi-tips copy-font", + height: 40, + text: "测试提示文字" + } + }] }; }, @@ -127,28 +151,19 @@ Demo.Face = BI.inherit(BI.Widget, { }; }, - _createCard1BackgroundConfig: function () { + _createCardBackgroundConfig: function () { var self = this; return { type: "bi.htape", cls: "config-item bi-border-bottom", height: 40, - items: [this._createLabel("Card1背景颜色："), this._createColorPicker(function () { + items: [this._createLabel("Card背景颜色："), this._createColorPicker(function () { self.cardBackgroundColor = this; }, function () { self._runGlobalStyle(); })] }; }, - _createCard2BackgroundConfig: function () { - var self = this; - return { - type: "bi.htape", - cls: "config-item bi-border-bottom", - height: 40, - items: [this._createLabel("Card2背景颜色：无颜色")] - }; - }, _createHoverBackgroundColor: function () { var self = this; @@ -160,7 +175,15 @@ Demo.Face = BI.inherit(BI.Widget, { self.hoverBackgroundColor = this; }, function () { self._runGlobalStyle(); - })] + }), { + width: 100, + el: { + type: "bi.text_button", + cls: "bi-list-item-active", + text: "测试悬浮状态", + forceCenter: true + } + }] }; }, @@ -174,7 +197,15 @@ Demo.Face = BI.inherit(BI.Widget, { self.activeBackgroundColor = this; }, function () { self._runGlobalStyle(); - })] + }), { + width: 100, + el: { + type: "bi.text_button", + cls: "bi-list-item-active", + text: "测试激活状态", + forceCenter: true + } + }] }; }, @@ -188,7 +219,15 @@ Demo.Face = BI.inherit(BI.Widget, { self.selectBackgroundColor = this; }, function () { self._runGlobalStyle(); - })] + }), { + width: 100, + el: { + type: "bi.text_button", + cls: "bi-list-item-active", + text: "测试选中状态", + forceCenter: true + } + }] }; }, @@ -198,7 +237,7 @@ Demo.Face = BI.inherit(BI.Widget, { type: "bi.htape", cls: "config-item bi-border-bottom", height: 40, - items: [this._createLabel("分割线颜色(只对左边的表格有效)："), this._createColorPicker(function () { + items: [this._createLabel("分割线颜色："), this._createColorPicker(function () { self.slitColor = this; }, function () { self._runGlobalStyle(); @@ -211,13 +250,12 @@ Demo.Face = BI.inherit(BI.Widget, { type: "bi.vertical", items: [this._createLabel("--通用配色--"), this._createBackgroundConfig(), + this._createCardBackgroundConfig(), this._createFontConfig(), this._createActiveFontConfig(), this._createSelectFontConfig(), this._createGrayFontConfig(), this._createDisableFontConfig(), - this._createCard1BackgroundConfig(), - this._createCard2BackgroundConfig(), this._createHoverBackgroundColor(), this._createActiveBackgroundColor(), this._createSelectBackgroundColor(), @@ -568,7 +606,8 @@ Demo.Face = BI.inherit(BI.Widget, { color: fontColor }, "#wrapper .bi-card": { - "background-color": cardBackgroundColor + "background-color": cardBackgroundColor, + color: fontColor }, "#wrapper .bi-tips": { color: grayFontColor @@ -617,6 +656,10 @@ Demo.Face = BI.inherit(BI.Widget, { ".bi-button.button-ignore": { "background-color": button4BackgroundColor }, + // 以下是分割线颜色 + "#wrapper .bi-border,#wrapper .bi-border-top,#wrapper .bi-border-bottom,#wrapper .bi-border-left,#wrapper .bi-border-right": { + "border-color": slitColor + }, ".bi-collection-table-cell": { "border-right-color": slitColor, "border-bottom-color": slitColor diff --git a/demo/js/preview.js b/demo/js/preview.js index 9f16123b3..1602077f8 100644 --- a/demo/js/preview.js +++ b/demo/js/preview.js @@ -30,28 +30,6 @@ Demo.Preview = BI.inherit(BI.Widget, { type: "bi.absolute", cls: "preview-background", items: [{ - el: { - type: "bi.left", - cls: "preview-header bi-tips", - height: 40, - items: [{ - type: "bi.label", - height: 40, - text: "Card2", - hgap: 10, - textAlign: "left" - }, { - type: "bi.icon_text_item", - cls: "filter-font", - text: "测试图标", - width: 100, - height: 40 - }] - }, - left: 60, - right: 60, - top: 60 - }, { el: { type: "bi.vtape", cls: "preview-card bi-card", @@ -60,7 +38,7 @@ Demo.Preview = BI.inherit(BI.Widget, { type: "bi.label", cls: "preview-title bi-border-bottom", height: 40, - text: "Card1", + text: "Card", hgap: 10, textAlign: "left" }, @@ -92,7 +70,7 @@ Demo.Preview = BI.inherit(BI.Widget, { }, left: 60, right: 60, - top: 160, + top: 60, bottom: 60 }] }; diff --git a/demo/less/main.less b/demo/less/main.less index e209e803e..184d3c197 100644 --- a/demo/less/main.less +++ b/demo/less/main.less @@ -57,6 +57,14 @@ body { background-color: @color-bi-background-normal; } +#wrapper { + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; +} + .bi-theme-dark body { background-color: @color-bi-background-normal-theme-dark; } diff --git a/dist/demo.css b/dist/demo.css index 42d2ecbb6..0f5eb014a 100644 --- a/dist/demo.css +++ b/dist/demo.css @@ -45,6 +45,13 @@ body { background-color: #fafbfc; } +#wrapper { + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; +} .bi-theme-dark body { background-color: #191B2B; } diff --git a/dist/demo.js b/dist/demo.js index a7e233df0..ed3520053 100644 --- a/dist/demo.js +++ b/dist/demo.js @@ -8789,7 +8789,15 @@ BI.shortcut("demo.searcher_view", Demo.Func);Demo.Face = BI.inherit(BI.Widget, { self.activeFontColor = this; }, function () { self._runGlobalStyle(); - })] + }), { + width: 100, + el: { + type: "bi.text_button", + cls: "bi-list-item-active", + text: "测试激活状态", + forceCenter: true + } + }] }; }, @@ -8803,7 +8811,15 @@ BI.shortcut("demo.searcher_view", Demo.Func);Demo.Face = BI.inherit(BI.Widget, { self.selectFontColor = this; }, function () { self._runGlobalStyle(); - })] + }), { + width: 100, + el: { + type: "bi.text_button", + cls: "bi-list-item-active", + text: "测试选中状态", + forceCenter: true + } + }] }; }, @@ -8813,11 +8829,19 @@ BI.shortcut("demo.searcher_view", Demo.Func);Demo.Face = BI.inherit(BI.Widget, { type: "bi.htape", cls: "config-item bi-border-bottom", height: 40, - items: [this._createLabel("灰色字体颜色(用于Card2)："), this._createColorPicker(function () { + items: [this._createLabel("tip提示字体颜色："), this._createColorPicker(function () { self.grayFontColor = this; }, function () { self._runGlobalStyle(); - })] + }), { + width: 100, + el: { + type: "bi.icon_text_item", + cls: "bi-tips copy-font", + height: 40, + text: "测试提示文字" + } + }] }; }, @@ -8843,28 +8867,19 @@ BI.shortcut("demo.searcher_view", Demo.Func);Demo.Face = BI.inherit(BI.Widget, { }; }, - _createCard1BackgroundConfig: function () { + _createCardBackgroundConfig: function () { var self = this; return { type: "bi.htape", cls: "config-item bi-border-bottom", height: 40, - items: [this._createLabel("Card1背景颜色："), this._createColorPicker(function () { + items: [this._createLabel("Card背景颜色："), this._createColorPicker(function () { self.cardBackgroundColor = this; }, function () { self._runGlobalStyle(); })] }; }, - _createCard2BackgroundConfig: function () { - var self = this; - return { - type: "bi.htape", - cls: "config-item bi-border-bottom", - height: 40, - items: [this._createLabel("Card2背景颜色：无颜色")] - }; - }, _createHoverBackgroundColor: function () { var self = this; @@ -8876,7 +8891,15 @@ BI.shortcut("demo.searcher_view", Demo.Func);Demo.Face = BI.inherit(BI.Widget, { self.hoverBackgroundColor = this; }, function () { self._runGlobalStyle(); - })] + }), { + width: 100, + el: { + type: "bi.text_button", + cls: "bi-list-item-active", + text: "测试悬浮状态", + forceCenter: true + } + }] }; }, @@ -8890,7 +8913,15 @@ BI.shortcut("demo.searcher_view", Demo.Func);Demo.Face = BI.inherit(BI.Widget, { self.activeBackgroundColor = this; }, function () { self._runGlobalStyle(); - })] + }), { + width: 100, + el: { + type: "bi.text_button", + cls: "bi-list-item-active", + text: "测试激活状态", + forceCenter: true + } + }] }; }, @@ -8904,7 +8935,15 @@ BI.shortcut("demo.searcher_view", Demo.Func);Demo.Face = BI.inherit(BI.Widget, { self.selectBackgroundColor = this; }, function () { self._runGlobalStyle(); - })] + }), { + width: 100, + el: { + type: "bi.text_button", + cls: "bi-list-item-active", + text: "测试选中状态", + forceCenter: true + } + }] }; }, @@ -8914,7 +8953,7 @@ BI.shortcut("demo.searcher_view", Demo.Func);Demo.Face = BI.inherit(BI.Widget, { type: "bi.htape", cls: "config-item bi-border-bottom", height: 40, - items: [this._createLabel("分割线颜色(只对左边的表格有效)："), this._createColorPicker(function () { + items: [this._createLabel("分割线颜色："), this._createColorPicker(function () { self.slitColor = this; }, function () { self._runGlobalStyle(); @@ -8927,13 +8966,12 @@ BI.shortcut("demo.searcher_view", Demo.Func);Demo.Face = BI.inherit(BI.Widget, { type: "bi.vertical", items: [this._createLabel("--通用配色--"), this._createBackgroundConfig(), + this._createCardBackgroundConfig(), this._createFontConfig(), this._createActiveFontConfig(), this._createSelectFontConfig(), this._createGrayFontConfig(), this._createDisableFontConfig(), - this._createCard1BackgroundConfig(), - this._createCard2BackgroundConfig(), this._createHoverBackgroundColor(), this._createActiveBackgroundColor(), this._createSelectBackgroundColor(), @@ -9284,7 +9322,8 @@ BI.shortcut("demo.searcher_view", Demo.Func);Demo.Face = BI.inherit(BI.Widget, { color: fontColor }, "#wrapper .bi-card": { - "background-color": cardBackgroundColor + "background-color": cardBackgroundColor, + color: fontColor }, "#wrapper .bi-tips": { color: grayFontColor @@ -9333,6 +9372,10 @@ BI.shortcut("demo.searcher_view", Demo.Func);Demo.Face = BI.inherit(BI.Widget, { ".bi-button.button-ignore": { "background-color": button4BackgroundColor }, + // 以下是分割线颜色 + "#wrapper .bi-border,#wrapper .bi-border-top,#wrapper .bi-border-bottom,#wrapper .bi-border-left,#wrapper .bi-border-right": { + "border-color": slitColor + }, ".bi-collection-table-cell": { "border-right-color": slitColor, "border-bottom-color": slitColor @@ -11592,28 +11635,6 @@ BI.shortcut("demo.north", Demo.North);Demo.Preview = BI.inherit(BI.Widget, { type: "bi.absolute", cls: "preview-background", items: [{ - el: { - type: "bi.left", - cls: "preview-header bi-tips", - height: 40, - items: [{ - type: "bi.label", - height: 40, - text: "Card2", - hgap: 10, - textAlign: "left" - }, { - type: "bi.icon_text_item", - cls: "filter-font", - text: "测试图标", - width: 100, - height: 40 - }] - }, - left: 60, - right: 60, - top: 60 - }, { el: { type: "bi.vtape", cls: "preview-card bi-card", @@ -11622,7 +11643,7 @@ BI.shortcut("demo.north", Demo.North);Demo.Preview = BI.inherit(BI.Widget, { type: "bi.label", cls: "preview-title bi-border-bottom", height: 40, - text: "Card1", + text: "Card", hgap: 10, textAlign: "left" }, @@ -11654,7 +11675,7 @@ BI.shortcut("demo.north", Demo.North);Demo.Preview = BI.inherit(BI.Widget, { }, left: 60, right: 60, - top: 160, + top: 60, bottom: 60 }] };