From 91412faaad4cc69210335a51f028b489347e1ff1 Mon Sep 17 00:00:00 2001 From: alan Date: Fri, 24 May 2019 11:04:06 +0800 Subject: [PATCH] =?UTF-8?q?refactor:=20=E8=B0=83=E6=95=B4color=E5=92=8Cfon?= =?UTF-8?q?t=E4=BB=A5=E7=AC=A6=E5=90=88=E8=A7=84=E8=8C=83?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 2 + src/app/app.ts | 2 +- src/app/link_set/left/left_item/left_item.ts | 2 +- src/less/index.less | 4 + src/less/lib/color.less | 4 + src/less/lib/constant.less | 106 ++++++++++++++++++ src/less/lib/font.less | 4 + src/less/lib/image.less | 18 +++ .../resource/app.less} | 90 ++++++--------- src/less/resource/font.less | 7 ++ src/less/resource/jndi.less | 3 + webpack.config.js | 13 +++ 12 files changed, 198 insertions(+), 57 deletions(-) create mode 100644 src/less/index.less create mode 100644 src/less/lib/color.less create mode 100644 src/less/lib/constant.less create mode 100644 src/less/lib/font.less create mode 100644 src/less/lib/image.less rename src/{app/app.component.scss => less/resource/app.less} (74%) create mode 100644 src/less/resource/font.less create mode 100644 src/less/resource/jndi.less diff --git a/package.json b/package.json index 716314e..ec4a42a 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,8 @@ "eslint": "^5.16.0", "file-loader": "^3.0.1", "html-webpack-plugin": "^3.2.0", + "less": "^3.9.0", + "less-loader": "^5.0.0", "mini-css-extract-plugin": "^0.6.0", "node-sass": "^4.11.0", "path": "^0.12.7", diff --git a/src/app/app.ts b/src/app/app.ts index 6682d8d..ef48ad2 100644 --- a/src/app/app.ts +++ b/src/app/app.ts @@ -5,7 +5,7 @@ import title from './title/title'; import linkSet from './link_set/link_set'; import linkStatus from './link_status/link_status'; import {fetchLinkList} from '../shared/crud/crud.request'; -import './app.component.scss'; +import '../less/index.less'; const className = 'fr.main'; const Widget = BI.inherit(BI.Widget, { diff --git a/src/app/link_set/left/left_item/left_item.ts b/src/app/link_set/left/left_item/left_item.ts index c75dfa6..9b8b06c 100644 --- a/src/app/link_set/left/left_item/left_item.ts +++ b/src/app/link_set/left/left_item/left_item.ts @@ -44,7 +44,7 @@ const Widget: WidgetType = { items: [ { type: ItemIcon, - cls: 'link-text-font', + cls: 'test-font', title: BI.i18nText('Dec-Dcm_Test_Connection'), value: ACTION_TEST, id, diff --git a/src/less/index.less b/src/less/index.less new file mode 100644 index 0000000..cebf288 --- /dev/null +++ b/src/less/index.less @@ -0,0 +1,4 @@ +@import "lib/color"; +@import "resource/app"; +@import "resource/jndi"; +@import "resource/font"; \ No newline at end of file diff --git a/src/less/lib/color.less b/src/less/lib/color.less new file mode 100644 index 0000000..604b677 --- /dev/null +++ b/src/less/lib/color.less @@ -0,0 +1,4 @@ +@import "constant"; + +@color-jndi-notice: @font-color-negative; +@background-color-blue-transparent: rgba(54,133,242,.05); \ No newline at end of file diff --git a/src/less/lib/constant.less b/src/less/lib/constant.less new file mode 100644 index 0000000..671ec05 --- /dev/null +++ b/src/less/lib/constant.less @@ -0,0 +1,106 @@ +//常量库 + +//classified + +// +@font-size-12: 12px; +@font-size-13: 13px; +@font-size-14: 14px; +@font-size-16: 16px; +@font-size-18: 18px; +@font-size-22: 22px; +@font-size-24: 24px; +@font-size-30: 30px; +@font-size-40: 40px; +@font-size-50: 50px; +@font-size-60: 60px; +@font-size-70: 70px; +@radius-2: 2px; +@radius-6: 6px; + +@opacity-15: 0.15; +@opacity-20: 0.2; + +//font color +@font-color-black: #232e40;// +@font-color-normal: #3d4d66;// +@font-color-normal-theme-dark: #d6e0dc;// +@font-color-light-gray: #647185; +@font-color-light-gray-theme-dark: #afb7c6; +@font-color-disabled: #9ea6b2;// +@font-color-disabled-theme-dark: #878d9f;// +@font-color-tips: #9ea6b2;// +@font-color-tips-theme-dark: #6b7084;// +@font-color-light-disabled: #d0d4da;// +@font-color-light-disabled-theme-dark: #606479; +@font-color-gray: #999999; +@font-color-white: #ffffff;// +@font-color-white-theme-dark: #242640;// +@font-color-light-highlight: #eaf2fd; +@font-color-medium-highlight: #d7e7fc; +@font-color-highlight: #3685f2; +@font-color-blue: #23beef; +@font-color-light-blue: #e9f8fd; +@font-color-success: #13cd66; +@font-color-warning: #faaa39;// +@font-color-negative: #ff4949;// +@font-color-yellow: #ffc101;// + +//background color +@background-color-black: #232E40;// +@background-color-light-black: #3d4d66; +@background-color-light-black-theme-dark: #d6e0dc;// +@background-color-default: #ffffff;// +@background-color-default-theme-dark: #242640;// +@background-color-normal: #f7f8fa;// +@background-color-normal-theme-dark: #191B2B;// +@background-color-light-highlight: #eaf2fd; +@background-color-medium-highlight: #d7e7fc; +@background-color-highlight: #3685f2; +@background-color-blue: #23beef; +@background-color-light-blue: #e9f8fd; +@background-color-dark: #d4dadd; +@background-color-light-gray: #F2F4F7; +@background-color-light-gray-theme-dark: #2F3149; +@background-color-dark-gray: #d0d4da; +@background-color-dark-gray-theme-dark: #606479; +@background-color-disabled: #F2F4F7; +@background-color-disabled-theme-dark: #2F3149; +@background-color-yellow: #ffc101;// + +@background-color-negative: #ff4949; +@background-color-light-negative: #ffecec; +@background-color-dark-negative: #3A2940; +@background-color-light-warning: #feeed7; +@background-color-warning: #faaa39; + +@background-color-dark-success: #13cd66; +@background-color-light-success: #e1f4e7; +@background-color-normal-success: #647185; + +//border color +@border-color-default: #ffffff; +@border-color-black: #232e40; +@border-color-line: #e8eaed; +@border-color-line-theme-dark: #3a3c53; +@border-color-light-line: #f2f4f7; +@border-color-light-line-theme-dark: #2F3149; +@border-color-dark-line: #9EA6B2; +@border-color-dark-line-theme-dark: #878D9F; +@border-color-highlight: #3685f2; + +@border-color-warning: #fbb03b; +@border-color-negative: #FF4949; +@border-color-success: #13cd66; +@border-color-light-negative: #f4cbcb; +@border-color-normal-success: #eddea2; + +//split color +@border-color-disabled: #d0d4da; +@border-color-disabled-theme-dark: #606479; + +//scroll color +@scroll-color: #3d4d66; +@scroll-color-theme-dark: #ffffff; + +@water-mark-color-theme-dark: #878d9f; diff --git a/src/less/lib/font.less b/src/less/lib/font.less new file mode 100644 index 0000000..751359f --- /dev/null +++ b/src/less/lib/font.less @@ -0,0 +1,4 @@ +@font-link: "e759"; +@font-link-test: "e763"; +@font-link-info: "e63c"; +@font-link-delete: "e6c4"; \ No newline at end of file diff --git a/src/less/lib/image.less b/src/less/lib/image.less new file mode 100644 index 0000000..232beba --- /dev/null +++ b/src/less/lib/image.less @@ -0,0 +1,18 @@ +@color-bi-font-native: inherit; + +.font(@class,@content, @color: @color-bi-font-native) { + @fc: "\@{content}"; + .@{class} { + & .b-font { + *zoom: ~"expression( this.runtimeStyle['zoom'] = '1',this.innerHTML = '&#x@{content};')"; + } + & .b-font:before { + content: @fc; + color: @color; + } + &.disabled .b-font:before { + content: @fc; + color: @color; + } + } +} \ No newline at end of file diff --git a/src/app/app.component.scss b/src/less/resource/app.less similarity index 74% rename from src/app/app.component.scss rename to src/less/resource/app.less index b6cfed3..7610631 100644 --- a/src/app/app.component.scss +++ b/src/less/resource/app.less @@ -1,10 +1,10 @@ .database-connection-layout{ width: 100%; height: 100%; - background-color: #f7f8fa; + background-color: @background-color-normal; .title{ - background-color: #fff; - border-bottom: 1px solid #e8eaed; + background-color: @background-color-default; + border-bottom: 1px solid @border-color-line; .dec-title-item{ height: 39px; line-height: 39px; @@ -20,8 +20,8 @@ cursor: pointer; } .dec-title-item-selected{ - color: #3685f2; - border-bottom: solid 2px #3685f2; + color: @background-color-highlight; + border-bottom: @border-color-highlight; } .close-button { position: absolute !important; @@ -30,7 +30,7 @@ width: 30px; height: 30px; cursor: pointer; - background-image: url("../img/icon_close9x9_normal.png"); + background-image: url("../../img/icon_close9x9_normal.png"); background-repeat: no-repeat; background-position: center; } @@ -38,25 +38,25 @@ .linkset{ margin: 10px; bottom: 0px; - background-color: #ffffff; + background-color: @background-color-default; } .linkStatus{ margin: 10px; top: 40px; - background-color: #ffffff; + background-color: @background-color-default; } } .database-left{ - border-right: 1px solid #e8eaed; + border-right: 1px solid @border-color-line; .select-group{ - border-bottom: 1px solid #e8eaed; + border-bottom: 1px solid @border-color-line; .select{ margin: 10px; .database-link-items{ padding-left:10px; .link-item{ - border-top: 1px solid #e8eaed; + border-top: 1px solid @border-color-line; } } } @@ -73,7 +73,7 @@ line-height: 24px; cursor: pointer; &:hover{ - background-color: rgba(54,133,242,.05); + background-color: @background-color-blue-transparent; .icons{ .action-icon{ visibility: visible !important; @@ -92,9 +92,9 @@ } } .left-item-selected{ - background-color: rgba(54,133,242,.05); + background-color: @background-color-blue-transparent; .link-title{ - color: #3685f2; + color: @font-color-highlight; } } } @@ -105,13 +105,13 @@ .bi-flex-center-adapt-layout{ height: 100%; .data-connection-background{ - background: url(../img/resources.png) center center no-repeat; + background: url(../../img/resources.png) center center no-repeat; background-size: contain; } } .right-status-title{ - border-bottom: 1px solid #e8eaed; - color: #3d4d66; + border-bottom: 1px solid @border-color-line; + color: @font-color-normal; line-height: 40px; padding-left: 10px; font-weight: 700; @@ -134,8 +134,8 @@ .right-status-board { margin-right: 25px; position: relative !important; left: 25px; } } .right-status-board{ - background-color: #f7f8fa; - color: #3d4d66; + background-color: @background-color-normal; + color: @font-color-normal; width: 100%; height: 100%; .right-status-board-item{ @@ -145,11 +145,11 @@ display: inline-block; } .card-font1{ - color: #13CD66; + color: @font-color-success; font-size: 32px; } .card-font2{ - color: #3685F2; + color: @font-color-highlight; font-size: 32px; } } @@ -159,8 +159,8 @@ .right-content{ height: 100%; .right-title{ - border-bottom: 1px solid #e8eaed; - color: #3d4d66; + border-bottom: 1px solid @border-color-line; + color: @font-color-normal; line-height: 40px; padding-left: 10px; .right-title-text{ @@ -198,21 +198,21 @@ position: relative; flex-shrink: 0; margin-left: 5px; - color: #9ea6b2; + color: @font-color-disabled; } } .shared-component-title{ height: 24px; line-height: 24px; margin-bottom: 10px; - color: #9ea6b2; - border-bottom: 1px solid #e8eaed; + color: @font-color-disabled; + border-bottom: 1px solid @border-color-line; } .comfirm-content{ margin-top: 40px; margin-left: 20px; .comfirm-icon{ - background-image: url("../img/warning.png"); + background-image: url("../../img/warning.png"); background-size: contain; margin-right: 12px; } @@ -236,9 +236,9 @@ margin-left: 10px; margin-bottom: 10px; cursor: pointer; - border: solid 1px #fff; + border: solid 1px @border-color-default; &:hover{ - border: solid 1px #3480f2; + border: solid 1px @border-color-highlight; } .selected{ position: absolute !important; @@ -246,7 +246,7 @@ top: -1px; height: 30px; width: 30px; - background: url(../img/database-selected.png) center center no-repeat; + background: url(../../img/database-selected.png) center center no-repeat; background-size: contain; } .text{ @@ -256,7 +256,7 @@ padding-right: 2px; text-align: center; white-space: nowrap; - background: #F0F3F7; + background: @background-color-light-gray; } } @@ -275,21 +275,21 @@ text-align: center; .loading-icon{ display: block; - background: url(../img/loading.gif) center center no-repeat; + background: url(../../img/loading.gif) center center no-repeat; background-size: contain; margin: 0 auto; margin-bottom: 18px; } .success-icon{ display: block; - background: url(../img/success.png) center center no-repeat; + background: url(../../img/success.png) center center no-repeat; background-size: contain; margin: 0 auto; margin-bottom: 18px; } .error-icon{ display: block; - background: url(../img/error.png) center center no-repeat; + background: url(../../img/error.png) center center no-repeat; background-size: contain; margin: 0 auto; margin-bottom: 18px; @@ -304,29 +304,9 @@ .show-more{ text-align: left !important; height: 73px; - background: #F2F4F7; + background: @background-color-light-gray; margin-bottom: 10px; padding: 5px; margin-top: 10px; } -} - -.link-font .b-font:before { - content: "\e759"; - color: inherit; -} -.link-text-font .b-font:before { - content: "\e763"; - color: inherit; -} -.info-font .b-font:before { - content: "\e63c"; - color: inherit; -} -.delete-font .b-font:before { - content: "\e6c4"; - color: inherit; -} -.jndi-notice{ - color: red; } \ No newline at end of file diff --git a/src/less/resource/font.less b/src/less/resource/font.less new file mode 100644 index 0000000..15cca2e --- /dev/null +++ b/src/less/resource/font.less @@ -0,0 +1,7 @@ +@import "../lib/font"; +@import "../lib//image"; + +.font(link-font, @font-link); +.font(info-font, @font-link-info); +.font(test-font, @font-link-test); +.font(delete-font, @font-link-delete); \ No newline at end of file diff --git a/src/less/resource/jndi.less b/src/less/resource/jndi.less new file mode 100644 index 0000000..570167f --- /dev/null +++ b/src/less/resource/jndi.less @@ -0,0 +1,3 @@ +.jndi-notice{ + color: @color-jndi-notice; +} \ No newline at end of file diff --git a/webpack.config.js b/webpack.config.js index d62ab3b..128091d 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -51,6 +51,19 @@ module.exports = env => { }, 'css-loader','sass-loader' ] + },{ + test:/\.less$/, + exclude: /node_modules/, + use: [ + { + loader: MiniCssExtractPlugin.loader, + options: { + publicPath: './', + hmr: process.env.NODE_ENV === 'development', + }, + }, + 'css-loader','less-loader' + ] },{ test:/(\.jpg|\.png|\.gif|\.svg)$/, exclude: /node_modules/,