From 6b35ea1bca32977642d156e4a55144db9af6e6bc Mon Sep 17 00:00:00 2001 From: alan Date: Tue, 28 May 2019 14:28:07 +0800 Subject: [PATCH] =?UTF-8?q?refactor:=20=E5=B0=BD=E9=87=8F=E4=BD=BF?= =?UTF-8?q?=E7=94=A8=E9=80=9A=E7=94=A8=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/app.ts | 4 +- src/app/connection/left/item/left_item.ts | 12 +- .../connection/left/item/left_item_icon.ts | 4 +- src/app/connection/link_set.ts | 8 +- .../connection/more/item/more_link_item.ts | 2 +- src/app/connection/right/right.ts | 3 +- .../right/right_edit/right_edit_jndi.ts | 2 +- .../right/right_show/right_show_jndi.ts | 2 +- src/app/status/left/left_item.ts | 8 +- src/app/status/link_status.ts | 6 +- src/app/status/right/right.ts | 7 +- src/app/status/right/right_card.ts | 123 ++++++++---------- src/app/title/item/title_item.ts | 4 +- src/app/title/title.ts | 16 +-- src/less/resource/common.less | 79 ++++------- src/less/resource/font.less | 8 +- src/shared/components/form_item.ts | 2 +- src/shared/components/title.ts | 3 +- src/shared/service/dialog.service.ts | 16 +-- 19 files changed, 125 insertions(+), 184 deletions(-) diff --git a/src/app/app.ts b/src/app/app.ts index 88015b2..f44392b 100644 --- a/src/app/app.ts +++ b/src/app/app.ts @@ -1,4 +1,4 @@ -import {Vtape, Left, Vertical, Absolute} from '../ui/index'; +import {Vtape, Vertical, Absolute} from '../ui/index'; import appModel from './app.model'; import title from './title/title'; import linkSet from './connection/link_set'; @@ -16,7 +16,7 @@ const Widget = BI.inherit(BI.Widget, { render() { return { type: Vtape, - cls: 'dec-webui-dcm-layout', + cls: 'dec-webui-dcm-layout bi-background', items: [ { el: { diff --git a/src/app/connection/left/item/left_item.ts b/src/app/connection/left/item/left_item.ts index 775b6f2..23e53a5 100644 --- a/src/app/connection/left/item/left_item.ts +++ b/src/app/connection/left/item/left_item.ts @@ -13,17 +13,17 @@ const Widget: WidgetType = { return BI.Models.getModel(Model); }, render() { - const {title, cls, creator, text, id} = this.options; + const {title, creator, text, id} = this.options; return { type: LeftRightVerticalAdapt, - cls: `link-item cursor-pointer ${cls}`, + cls: `link-item cursor-pointer`, height: 24, items: { left: [ { type: Icon, - cls: 'link-font', + cls: 'dcm-link-font', height: 24, width: 26, text: BI.i18nText('Dec-Dcm_Connections'), @@ -44,7 +44,7 @@ const Widget: WidgetType = { right: [ { type: ItemIcon, - cls: 'link-item-icon test-font', + cls: 'link-item-icon dcm-test-font', title: BI.i18nText('Dec-Dcm_Test_Connection'), value: ACTION_TEST, id, @@ -58,13 +58,13 @@ const Widget: WidgetType = { }, { type: ItemIcon, - cls: 'link-item-icon info-font', + cls: 'link-item-icon dcm-info-font', title: `${BI.i18nText('Dec-Dcm_Type')}：${text === DEFAULT_INFO ? BI.i18nText('Dec-Dcm_Other') : text} \r\n${BI.i18nText('Dec-Dcm_Creator')}：${creator}`, id, }, { type: ItemIcon, - cls: 'link-item-icon delete-font', + cls: 'link-item-icon dcm-delete-font', title: BI.i18nText('Dec-Dcm_Delete'), value: ACTION_DELETE, id, diff --git a/src/app/connection/left/item/left_item_icon.ts b/src/app/connection/left/item/left_item_icon.ts index 9478c1b..91c7a05 100644 --- a/src/app/connection/left/item/left_item_icon.ts +++ b/src/app/connection/left/item/left_item_icon.ts @@ -8,7 +8,7 @@ const Widget: WidgetType = { return BI.Models.getModel(Model); }, render() { - const {cls, title, id, value} = this.options; + const {title, id, value} = this.options; const that = this; let iconContent: any = null; let combo: any = null; @@ -21,7 +21,6 @@ const Widget: WidgetType = { }, el: { type: Icon, - cls, baseCls: 'action-icon', height: 24, width: 26, @@ -63,7 +62,6 @@ const Widget: WidgetType = { return { type: IconButton, - cls: `action-icon ${cls}`, height: 24, width: 26, title, diff --git a/src/app/connection/link_set.ts b/src/app/connection/link_set.ts index 82b25d2..ab3b8c5 100644 --- a/src/app/connection/link_set.ts +++ b/src/app/connection/link_set.ts @@ -1,4 +1,4 @@ -import {Htape, WidgetType, Vtape, Left} from '@ui'; +import {Htape, WidgetType, Vtape, VerticalAdapt} from '@ui'; import LeftList from './left/left'; import linkSetModel from './link_set.model'; import Select from './select/select'; @@ -17,7 +17,7 @@ const Widget: WidgetType = { render() { return { type: Htape, - cls: 'dcm-link-group', + cls: 'bi-card', items: [{ el: { type: Vtape, @@ -25,13 +25,13 @@ const Widget: WidgetType = { items: [ { el: { - type: Left, + type: VerticalAdapt, cls: 'bi-border-bottom', items: [ { type: Select, hgap: 10, - tgap: 10, + vgap: 10, }, ], }, diff --git a/src/app/connection/more/item/more_link_item.ts b/src/app/connection/more/item/more_link_item.ts index 11b772d..f9a7212 100644 --- a/src/app/connection/more/item/more_link_item.ts +++ b/src/app/connection/more/item/more_link_item.ts @@ -46,7 +46,7 @@ const Widget: WidgetType = { ], }, { type: Label, - cls: 'dcm-link-more-text', + cls: 'bi-header-background', height: 27, text, }, diff --git a/src/app/connection/right/right.ts b/src/app/connection/right/right.ts index 92b69f4..961cabc 100644 --- a/src/app/connection/right/right.ts +++ b/src/app/connection/right/right.ts @@ -1,4 +1,4 @@ -import {WidgetType, Vertical, ListView} from '@ui'; +import {WidgetType, ListView} from '@ui'; import {LinkType} from '@ui/type'; import Nothing from './nothing'; import RightDetail from './right_detail/right_detail'; @@ -22,7 +22,6 @@ const Widget: WidgetType = { return { type: ListView, cls: 'dcm-link-form', - minWidth: 400, ref(_ref: any) { rightContent = _ref; }, diff --git a/src/app/connection/right/right_edit/right_edit_jndi.ts b/src/app/connection/right/right_edit/right_edit_jndi.ts index deb3836..aad12e3 100644 --- a/src/app/connection/right/right_edit/right_edit_jndi.ts +++ b/src/app/connection/right/right_edit/right_edit_jndi.ts @@ -145,7 +145,7 @@ const Widget = BI.inherit(BI.Widget, { height: 25, form: { type: Label, - cls: 'jndi-notice', + cls: 'bi-error', text: BI.i18nText('Dec-Dcm_Connection_Form_JNDI_Notice'), }, }, diff --git a/src/app/connection/right/right_show/right_show_jndi.ts b/src/app/connection/right/right_show/right_show_jndi.ts index 8ac6b8c..65967b0 100644 --- a/src/app/connection/right/right_show/right_show_jndi.ts +++ b/src/app/connection/right/right_show/right_show_jndi.ts @@ -124,7 +124,7 @@ const Widget = BI.inherit(BI.Widget, { height: 25, form: { type: Label, - cls: 'jndi-notice', + cls: 'bi-error', text: BI.i18nText('Dec-Dcm_Connection_Form_JNDI_Notice'), }, }, diff --git a/src/app/status/left/left_item.ts b/src/app/status/left/left_item.ts index 4d57865..36b62b0 100644 --- a/src/app/status/left/left_item.ts +++ b/src/app/status/left/left_item.ts @@ -1,4 +1,4 @@ -import {WidgetType, Left, TextButton} from '@ui'; +import {WidgetType, TextButton, VerticalAdapt} from '@ui'; import Model from './left.model'; const className = 'dec.dcm.component.linkStatus.left.item'; const Widget: WidgetType = { @@ -11,11 +11,11 @@ const Widget: WidgetType = { return BI.Models.getModel(Model); }, render() { - const {title, cls} = this.options; + const {title} = this.options; return { - type: Left, - cls: `left-item cursor-pointer ${cls}`, + type: VerticalAdapt, + cls: `left-item cursor-pointer`, height: 30, items: [ { diff --git a/src/app/status/link_status.ts b/src/app/status/link_status.ts index 594468a..66c56a5 100644 --- a/src/app/status/link_status.ts +++ b/src/app/status/link_status.ts @@ -1,4 +1,4 @@ -import {WidgetType, Htape, Vtape, Left, Label} from '@ui'; +import {WidgetType, Htape, Vtape, Left, Label, VerticalAdapt} from '@ui'; import linkStatusModel from './link_status.model'; import LeftList from './left/left'; import Right from './right/right'; @@ -17,7 +17,7 @@ const Widget: WidgetType = { render() { return { type: Htape, - cls: 'dcm-link-group', + cls: 'bi-card', items: [{ el: { type: Vtape, @@ -25,7 +25,7 @@ const Widget: WidgetType = { items: [ { el: { - type: Left, + type: VerticalAdapt, cls: 'bi-border-bottom', items: [ { diff --git a/src/app/status/right/right.ts b/src/app/status/right/right.ts index 69c54ef..5e9fa42 100644 --- a/src/app/status/right/right.ts +++ b/src/app/status/right/right.ts @@ -1,4 +1,4 @@ -import {WidgetType, Vertical, Left, Label, ListView} from '@ui/index'; +import {WidgetType, Vertical, Left, Label, ListView, VerticalAdapt} from '@ui/index'; import Model from './right.model'; import {info} from '@shared/crud/crud.request'; import RightCard from './right_card'; @@ -33,11 +33,10 @@ const Widget: WidgetType = { return { type: Vertical, cls: 'dcm-link-form', - minWidth: 400, items: [ { - type: Left, - cls: 'right-status-title bi-border-bottom', + type: VerticalAdapt, + cls: 'bi-border-bottom', height: 40, items: [ { diff --git a/src/app/status/right/right_card.ts b/src/app/status/right/right_card.ts index b4fbbb6..00bc02d 100644 --- a/src/app/status/right/right_card.ts +++ b/src/app/status/right/right_card.ts @@ -1,4 +1,4 @@ -import {WidgetType, Left, Label, Vertical, FloatCenter, CenterAdapt} from '@ui/index'; +import {WidgetType, Left, Label, Vertical, FloatCenter, CenterAdapt, VerticalAdapt} from '@ui/index'; const className = 'dec.dcm.component.linkStatus.right.card'; const Widget: WidgetType = { render() { @@ -10,100 +10,83 @@ const Widget: WidgetType = { hgap: 20, items: [ { - type: Left, + type: Vertical, + cls: 'bi-background', + height: 150, items: [ { - type: Vertical, - cls: 'right-status-board', - height: 150, - width: '100%', + type: CenterAdapt, + cls: 'right-status-board-item', + tgap: 40, items: [ { - type: CenterAdapt, - cls: 'right-status-board-item', - tgap: 40, + type: VerticalAdapt, items: [ { - type: Left, - items: [ - { - type: Label, - cls: 'right-status-text card-font-success', - textHeight: 40, - text: numActive, - }, - { - type: Label, - cls: 'right-status-text', - textHeight: 40, - text: '/', - }, - { - type: Label, - cls: 'right-status-text', - textHeight: 40, - text: maxActive, - }, - ], + type: Label, + cls: 'bi-high-light card-font-success', + textHeight: 40, + text: numActive, + }, + { + type: Label, + textHeight: 40, + text: '/', + }, + { + type: Label, + textHeight: 40, + text: maxActive, }, ], }, - { - type: Label, - height: 20, - text: BI.i18nText('Dec-Dcm_Active_Connections_Number'), - }, ], }, + { + type: Label, + height: 20, + text: BI.i18nText('Dec-Dcm_Active_Connections_Number'), + }, ], }, { - type: Left, - cls: 'right-status-right', + type: Vertical, + cls: 'bi-background', + height: 150, items: [ { - type: Vertical, - cls: 'right-status-board', - height: 150, - width: '100%', + type: CenterAdapt, + tgap: 40, + cls: 'right-status-board-item', items: [ { - type: CenterAdapt, - tgap: 40, - cls: 'right-status-board-item', + type: VerticalAdapt, items: [ { - type: Left, - items: [ - { - type: Label, - cls: 'right-status-text card-font-heighlight', - textHeight: 40, - text: numIdle, - }, - { - type: Label, - cls: 'right-status-text', - textHeight: 40, - text: '/', - }, - { - type: Label, - cls: 'right-status-text', - textHeight: 40, - text: maxIdle, - }, - ], + type: Label, + cls: 'bi-high-light card-font-heighlight', + textHeight: 40, + text: numIdle, + }, + { + type: Label, + textHeight: 40, + text: '/', + }, + { + type: Label, + textHeight: 40, + text: maxIdle, }, ], }, - { - type: Label, - height: 20, - text: BI.i18nText('Dec-Dcm_Leisure_Connections_Number'), - }, ], }, + { + type: Label, + height: 20, + text: BI.i18nText('Dec-Dcm_Leisure_Connections_Number'), + }, ], }, ], diff --git a/src/app/title/item/title_item.ts b/src/app/title/item/title_item.ts index b75537b..bc52f81 100644 --- a/src/app/title/item/title_item.ts +++ b/src/app/title/item/title_item.ts @@ -20,8 +20,8 @@ const Widget = BI.inherit(BI.BasicButton, { return { type: Label, - cls: 'dcm-title-item cursor-pointer', - height: 39, + cls: 'cursor-pointer bi-font-bold', + height: 40, hgap: 15, text, }; diff --git a/src/app/title/title.ts b/src/app/title/title.ts index 6d11acd..0b993eb 100644 --- a/src/app/title/title.ts +++ b/src/app/title/title.ts @@ -9,7 +9,7 @@ const Widget: WidgetType = { return { type: LeftRightVerticalAdapt, - cls: 'dcm-title bi-border-bottom bi-font-bold', + cls: 'bi-card bi-border-bottom', items: { left: [ { @@ -17,22 +17,16 @@ const Widget: WidgetType = { cls: 'title-item-selected', text: BI.i18nText('Dec-Dcm_Connection_Management'), value: TAB_LINK_SET, - ref: _ref => { - this.ConnectSet = _ref; - }, - handler: () => { - this.ConnectSet.select(); + handler() { + this.select(); }, }, { type: TitleItem, text: BI.i18nText('Dec-Dcm_Pool_Connection_Management'), value: TAB_LINK_POOL, - ref: _ref => { - this.ConnectPool = _ref; - }, - handler: () => { - this.ConnectPool.select(); + handler() { + this.select(); }, }, ], diff --git a/src/less/resource/common.less b/src/less/resource/common.less index 9a78a2c..2021202 100644 --- a/src/less/resource/common.less +++ b/src/less/resource/common.less @@ -1,70 +1,39 @@ .dec-webui-dcm-layout{ - background-color: @background-color-normal; - .dcm-title{ - background-color: @background-color-default; - .title-item-selected{ - color: @background-color-highlight; - border-bottom: solid 2px @border-color-highlight; - } + .title-item-selected{ + color: @background-color-highlight; + border-bottom: solid 2px @border-color-highlight; } - .dcm-link-group{ - background-color: @background-color-default; - .dcm-link-left{ - .link-item{ - &:hover{ - background-color: @background-color-blue-transparent; - .link-item-icon{ - visibility: visible; - } - } + .dcm-link-left{ + .link-item{ + &:hover{ + background-color: @background-color-blue-transparent; .link-item-icon{ - visibility: hidden; + visibility: visible; } } - .left-item-selected{ - background-color: @background-color-blue-transparent; - .link-title{ - color: @font-color-highlight; - } + .link-item-icon{ + visibility: hidden; } } - } - .dcm-link-form{ - .right-status-title{ - color: @font-color-normal; - } - .right-status-board{ - background-color: @background-color-normal; - color: @font-color-normal; - .card-font-success{ - color: @font-color-success; - font-size: @font-size-30; - } - .card-font-heighlight{ + .left-item-selected{ + background-color: @background-color-blue-transparent; + .link-title{ color: @font-color-highlight; - font-size: @font-size-30; } } - .form-item-hint{ - color: @font-color-disabled; + } + .dcm-link-form{ + .card-font-success{ + font-size: @font-size-30; } - .jndi-notice{ - color: @font-color-negative; + .card-font-heighlight{ + font-size: @font-size-30; } } -} - -.dcm-link-more{ - &:hover{ - border: solid 1px @border-color-highlight; - } - .dcm-link-more-text{ - background: @background-color-light-gray; + .dcm-link-more{ + &:hover{ + border: solid 1px @border-color-highlight; + } } } -.show-content{ - background-color: @background-color-default; - .show-more{ - background: @background-color-light-gray; - } -} \ No newline at end of file + diff --git a/src/less/resource/font.less b/src/less/resource/font.less index db1fd98..9605c6f 100644 --- a/src/less/resource/font.less +++ b/src/less/resource/font.less @@ -1,7 +1,7 @@ @import "../../../node_modules/fineui/src/less/image.less"; @import "../lib/font.less"; -.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 +.font(dcm-link-font, @font-link); +.font(dcm-info-font, @font-link-info); +.font(dcm-test-font, @font-link-test); +.font(dcm-delete-font, @font-link-delete); \ No newline at end of file diff --git a/src/shared/components/form_item.ts b/src/shared/components/form_item.ts index 65689fd..8cd1341 100644 --- a/src/shared/components/form_item.ts +++ b/src/shared/components/form_item.ts @@ -18,7 +18,7 @@ const Widget: WidgetType = { width, }, form, hint ? { type: Label, - cls: 'form-item-hint', + cls: 'bi-water-mark', lgap: 5, textAlign: 'left', text: hint, diff --git a/src/shared/components/title.ts b/src/shared/components/title.ts index 41f405a..0cda0af 100644 --- a/src/shared/components/title.ts +++ b/src/shared/components/title.ts @@ -6,9 +6,8 @@ const Widget: WidgetType = { return { type: Label, - cls: 'form-item-hint bi-border-bottom', + cls: 'bi-water-mark bi-border-bottom', height: 24, - textHeight: 24, bgap: 10, textAlign: 'left', text, diff --git a/src/shared/service/dialog.service.ts b/src/shared/service/dialog.service.ts index 3863982..d9eb404 100644 --- a/src/shared/service/dialog.service.ts +++ b/src/shared/service/dialog.service.ts @@ -1,4 +1,4 @@ -import {Label, Vertical, Left, Button, Layout, Absolute, CenterAdapt} from '@ui/index'; +import {Label, Vertical, Button, Layout, CenterAdapt, VerticalAdapt} from '@ui/index'; class Dialog { /** * 提示 @@ -54,7 +54,7 @@ class Dialog { public loading(message: string): string { const body = { type: 'bi.center_adapt', - cls: 'show-content', + cls: 'bi-card', width: 450, height: 220, items: [ @@ -82,7 +82,7 @@ class Dialog { public success(message: string): string { const body = { type: 'bi.center_adapt', - cls: 'show-content', + cls: 'bi-card', items: [ { type: Vertical, @@ -107,7 +107,7 @@ class Dialog { public error(message: string): string { const body = { type: 'bi.center_adapt', - cls: 'show-content', + cls: 'bi-card', items: [ { type: Vertical, @@ -140,7 +140,7 @@ class Dialog { items: [ { type: 'bi.center_adapt', - cls: 'show-content', + cls: 'bi-card', tgap: 10, items: [ { @@ -159,7 +159,7 @@ class Dialog { text, }, { - type: Left, + type: VerticalAdapt, cls: 'buttons', hgap: 5, items: [ @@ -200,7 +200,7 @@ class Dialog { ], }, { type: Label, - cls: 'show-more', + cls: 'bi-header-background', text: more, invisible: true, height: 73, @@ -220,7 +220,7 @@ class Dialog { items: [{ el: { type: 'bi.center_adapt', - cls: 'show-content', + cls: 'bi-card', width: 450, height: 220, items: [body],