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
Split 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",
"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",

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 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, {

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

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

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

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'
]
},{
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/,

Write Preview
Loading…
Cancel
Save