fanruan
/
decision-webui-dcm
2
0
Fork 0
Code Issues 8 Pull Requests Projects Releases Wiki Activity
Browse Source

refactor: 调整color和font以符合规范

qufenxi
alan 6 years ago
parent
0c7bc0425d
commit
91412faaad
12 changed files with 198 additions and 57 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      package.json
  2. 2
      src/app/app.ts
  3. 2
      src/app/link_set/left/left_item/left_item.ts
  4. 4
      src/less/index.less
  5. 4
      src/less/lib/color.less
  6. 106
      src/less/lib/constant.less
  7. 4
      src/less/lib/font.less
  8. 18
      src/less/lib/image.less
  9. 90
      src/less/resource/app.less
  10. 7
      src/less/resource/font.less
  11. 3
      src/less/resource/jndi.less
  12. 13
      webpack.config.js

2
package.json
Unescape View File

@ -18,6 +18,8 @@
"eslint": "^5.16.0", "eslint": "^5.16.0",
"file-loader": "^3.0.1", "file-loader": "^3.0.1",
"html-webpack-plugin": "^3.2.0", "html-webpack-plugin": "^3.2.0",
"less": "^3.9.0",
"less-loader": "^5.0.0",
"mini-css-extract-plugin": "^0.6.0", "mini-css-extract-plugin": "^0.6.0",
"node-sass": "^4.11.0", "node-sass": "^4.11.0",
"path": "^0.12.7", "path": "^0.12.7",

2
src/app/app.ts
Unescape View File

@ -5,7 +5,7 @@ import title from './title/title';
import linkSet from './link_set/link_set'; import linkSet from './link_set/link_set';
import linkStatus from './link_status/link_status'; import linkStatus from './link_status/link_status';
import {fetchLinkList} from '../shared/crud/crud.request'; import {fetchLinkList} from '../shared/crud/crud.request';
import './app.component.scss'; import '../less/index.less';
const className = 'fr.main'; const className = 'fr.main';
const Widget = BI.inherit(BI.Widget, { const Widget = BI.inherit(BI.Widget, {

2
src/app/link_set/left/left_item/left_item.ts
Unescape View File

@ -44,7 +44,7 @@ const Widget: WidgetType = {
items: [ items: [
{ {
type: ItemIcon, type: ItemIcon,
cls: 'link-text-font', cls: 'test-font',
title: BI.i18nText('Dec-Dcm_Test_Connection'), title: BI.i18nText('Dec-Dcm_Test_Connection'),
value: ACTION_TEST, value: ACTION_TEST,
id, id,

4
src/less/index.less
Unescape View File

@ -0,0 +1,4 @@
@import "lib/color";
@import "resource/app";
@import "resource/jndi";
@import "resource/font";

4
src/less/lib/color.less
Unescape View File

@ -0,0 +1,4 @@
@import "constant";
@color-jndi-notice: @font-color-negative;
@background-color-blue-transparent: rgba(54,133,242,.05);

106
src/less/lib/constant.less
Unescape View File

@ -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;

4
src/less/lib/font.less
Unescape View File

@ -0,0 +1,4 @@
@font-link: "e759";
@font-link-test: "e763";
@font-link-info: "e63c";
@font-link-delete: "e6c4";

18
src/less/lib/image.less
Unescape View File

@ -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;
}
}
}

90
src/app/app.component.scss → src/less/resource/app.less
Unescape View File

@ -1,10 +1,10 @@
.database-connection-layout{ .database-connection-layout{
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: #f7f8fa; background-color: @background-color-normal;
.title{ .title{
background-color: #fff; background-color: @background-color-default;
border-bottom: 1px solid #e8eaed; border-bottom: 1px solid @border-color-line;
.dec-title-item{ .dec-title-item{
height: 39px; height: 39px;
line-height: 39px; line-height: 39px;
@ -20,8 +20,8 @@
cursor: pointer; cursor: pointer;
} }
.dec-title-item-selected{ .dec-title-item-selected{
color: #3685f2; color: @background-color-highlight;
border-bottom: solid 2px #3685f2; border-bottom: @border-color-highlight;
} }
.close-button { .close-button {
position: absolute !important; position: absolute !important;
@ -30,7 +30,7 @@
width: 30px; width: 30px;
height: 30px; height: 30px;
cursor: pointer; cursor: pointer;
background-image: url("../img/icon_close9x9_normal.png"); background-image: url("../../img/icon_close9x9_normal.png");
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
} }
@ -38,25 +38,25 @@
.linkset{ .linkset{
margin: 10px; margin: 10px;
bottom: 0px; bottom: 0px;
background-color: #ffffff; background-color: @background-color-default;
} }
.linkStatus{ .linkStatus{
margin: 10px; margin: 10px;
top: 40px; top: 40px;
background-color: #ffffff; background-color: @background-color-default;
} }
} }
.database-left{ .database-left{
border-right: 1px solid #e8eaed; border-right: 1px solid @border-color-line;
.select-group{ .select-group{
border-bottom: 1px solid #e8eaed; border-bottom: 1px solid @border-color-line;
.select{ .select{
margin: 10px; margin: 10px;
.database-link-items{ .database-link-items{
padding-left:10px; padding-left:10px;
.link-item{ .link-item{
border-top: 1px solid #e8eaed; border-top: 1px solid @border-color-line;
} }
} }
} }
@ -73,7 +73,7 @@
line-height: 24px; line-height: 24px;
cursor: pointer; cursor: pointer;
&:hover{ &:hover{
background-color: rgba(54,133,242,.05); background-color: @background-color-blue-transparent;
.icons{ .icons{
.action-icon{ .action-icon{
visibility: visible !important; visibility: visible !important;
@ -92,9 +92,9 @@
} }
} }
.left-item-selected{ .left-item-selected{
background-color: rgba(54,133,242,.05); background-color: @background-color-blue-transparent;
.link-title{ .link-title{
color: #3685f2; color: @font-color-highlight;
} }
} }
} }
@ -105,13 +105,13 @@
.bi-flex-center-adapt-layout{ .bi-flex-center-adapt-layout{
height: 100%; height: 100%;
.data-connection-background{ .data-connection-background{
background: url(../img/resources.png) center center no-repeat; background: url(../../img/resources.png) center center no-repeat;
background-size: contain; background-size: contain;
} }
} }
.right-status-title{ .right-status-title{
border-bottom: 1px solid #e8eaed; border-bottom: 1px solid @border-color-line;
color: #3d4d66; color: @font-color-normal;
line-height: 40px; line-height: 40px;
padding-left: 10px; padding-left: 10px;
font-weight: 700; font-weight: 700;
@ -134,8 +134,8 @@
.right-status-board { margin-right: 25px; position: relative !important; left: 25px; } .right-status-board { margin-right: 25px; position: relative !important; left: 25px; }
} }
.right-status-board{ .right-status-board{
background-color: #f7f8fa; background-color: @background-color-normal;
color: #3d4d66; color: @font-color-normal;
width: 100%; width: 100%;
height: 100%; height: 100%;
.right-status-board-item{ .right-status-board-item{
@ -145,11 +145,11 @@
display: inline-block; display: inline-block;
} }
.card-font1{ .card-font1{
color: #13CD66; color: @font-color-success;
font-size: 32px; font-size: 32px;
} }
.card-font2{ .card-font2{
color: #3685F2; color: @font-color-highlight;
font-size: 32px; font-size: 32px;
} }
} }
@ -159,8 +159,8 @@
.right-content{ .right-content{
height: 100%; height: 100%;
.right-title{ .right-title{
border-bottom: 1px solid #e8eaed; border-bottom: 1px solid @border-color-line;
color: #3d4d66; color: @font-color-normal;
line-height: 40px; line-height: 40px;
padding-left: 10px; padding-left: 10px;
.right-title-text{ .right-title-text{
@ -198,21 +198,21 @@
position: relative; position: relative;
flex-shrink: 0; flex-shrink: 0;
margin-left: 5px; margin-left: 5px;
color: #9ea6b2; color: @font-color-disabled;
} }
} }
.shared-component-title{ .shared-component-title{
height: 24px; height: 24px;
line-height: 24px; line-height: 24px;
margin-bottom: 10px; margin-bottom: 10px;
color: #9ea6b2; color: @font-color-disabled;
border-bottom: 1px solid #e8eaed; border-bottom: 1px solid @border-color-line;
} }
.comfirm-content{ .comfirm-content{
margin-top: 40px; margin-top: 40px;
margin-left: 20px; margin-left: 20px;
.comfirm-icon{ .comfirm-icon{
background-image: url("../img/warning.png"); background-image: url("../../img/warning.png");
background-size: contain; background-size: contain;
margin-right: 12px; margin-right: 12px;
} }
@ -236,9 +236,9 @@
margin-left: 10px; margin-left: 10px;
margin-bottom: 10px; margin-bottom: 10px;
cursor: pointer; cursor: pointer;
border: solid 1px #fff; border: solid 1px @border-color-default;
&:hover{ &:hover{
border: solid 1px #3480f2; border: solid 1px @border-color-highlight;
} }
.selected{ .selected{
position: absolute !important; position: absolute !important;
@ -246,7 +246,7 @@
top: -1px; top: -1px;
height: 30px; height: 30px;
width: 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; background-size: contain;
} }
.text{ .text{
@ -256,7 +256,7 @@
padding-right: 2px; padding-right: 2px;
text-align: center; text-align: center;
white-space: nowrap; white-space: nowrap;
background: #F0F3F7; background: @background-color-light-gray;
} }
} }
@ -275,21 +275,21 @@
text-align: center; text-align: center;
.loading-icon{ .loading-icon{
display: block; display: block;
background: url(../img/loading.gif) center center no-repeat; background: url(../../img/loading.gif) center center no-repeat;
background-size: contain; background-size: contain;
margin: 0 auto; margin: 0 auto;
margin-bottom: 18px; margin-bottom: 18px;
} }
.success-icon{ .success-icon{
display: block; display: block;
background: url(../img/success.png) center center no-repeat; background: url(../../img/success.png) center center no-repeat;
background-size: contain; background-size: contain;
margin: 0 auto; margin: 0 auto;
margin-bottom: 18px; margin-bottom: 18px;
} }
.error-icon{ .error-icon{
display: block; display: block;
background: url(../img/error.png) center center no-repeat; background: url(../../img/error.png) center center no-repeat;
background-size: contain; background-size: contain;
margin: 0 auto; margin: 0 auto;
margin-bottom: 18px; margin-bottom: 18px;
@ -304,29 +304,9 @@
.show-more{ .show-more{
text-align: left !important; text-align: left !important;
height: 73px; height: 73px;
background: #F2F4F7; background: @background-color-light-gray;
margin-bottom: 10px; margin-bottom: 10px;
padding: 5px; padding: 5px;
margin-top: 10px; 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;
} }

7
src/less/resource/font.less
Unescape View File

@ -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);

3
src/less/resource/jndi.less
Unescape View File

@ -0,0 +1,3 @@
.jndi-notice{
color: @color-jndi-notice;
}

13
webpack.config.js
Unescape View File

@ -51,6 +51,19 @@ module.exports = env => {
}, },
'css-loader','sass-loader' '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)$/, test:/(\.jpg|\.png|\.gif|\.svg)$/,
exclude: /node_modules/, exclude: /node_modules/,

Write Preview
Loading…
Cancel
Save