Browse Source

refactor: 尽量使用通用样式

qufenxi
alan 6 years ago
parent
commit
6b35ea1bca
  1. 4
      src/app/app.ts
  2. 12
      src/app/connection/left/item/left_item.ts
  3. 4
      src/app/connection/left/item/left_item_icon.ts
  4. 8
      src/app/connection/link_set.ts
  5. 2
      src/app/connection/more/item/more_link_item.ts
  6. 3
      src/app/connection/right/right.ts
  7. 2
      src/app/connection/right/right_edit/right_edit_jndi.ts
  8. 2
      src/app/connection/right/right_show/right_show_jndi.ts
  9. 8
      src/app/status/left/left_item.ts
  10. 6
      src/app/status/link_status.ts
  11. 7
      src/app/status/right/right.ts
  12. 123
      src/app/status/right/right_card.ts
  13. 4
      src/app/title/item/title_item.ts
  14. 16
      src/app/title/title.ts
  15. 79
      src/less/resource/common.less
  16. 8
      src/less/resource/font.less
  17. 2
      src/shared/components/form_item.ts
  18. 3
      src/shared/components/title.ts
  19. 16
      src/shared/service/dialog.service.ts

4
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 appModel from './app.model';
import title from './title/title'; import title from './title/title';
import linkSet from './connection/link_set'; import linkSet from './connection/link_set';
@ -16,7 +16,7 @@ const Widget = BI.inherit(BI.Widget, {
render() { render() {
return { return {
type: Vtape, type: Vtape,
cls: 'dec-webui-dcm-layout', cls: 'dec-webui-dcm-layout bi-background',
items: [ items: [
{ {
el: { el: {

12
src/app/connection/left/item/left_item.ts

@ -13,17 +13,17 @@ const Widget: WidgetType = {
return BI.Models.getModel(Model); return BI.Models.getModel(Model);
}, },
render() { render() {
const {title, cls, creator, text, id} = this.options; const {title, creator, text, id} = this.options;
return { return {
type: LeftRightVerticalAdapt, type: LeftRightVerticalAdapt,
cls: `link-item cursor-pointer ${cls}`, cls: `link-item cursor-pointer`,
height: 24, height: 24,
items: { items: {
left: [ left: [
{ {
type: Icon, type: Icon,
cls: 'link-font', cls: 'dcm-link-font',
height: 24, height: 24,
width: 26, width: 26,
text: BI.i18nText('Dec-Dcm_Connections'), text: BI.i18nText('Dec-Dcm_Connections'),
@ -44,7 +44,7 @@ const Widget: WidgetType = {
right: [ right: [
{ {
type: ItemIcon, type: ItemIcon,
cls: 'link-item-icon test-font', cls: 'link-item-icon dcm-test-font',
title: BI.i18nText('Dec-Dcm_Test_Connection'), title: BI.i18nText('Dec-Dcm_Test_Connection'),
value: ACTION_TEST, value: ACTION_TEST,
id, id,
@ -58,13 +58,13 @@ const Widget: WidgetType = {
}, },
{ {
type: ItemIcon, 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}`, title: `${BI.i18nText('Dec-Dcm_Type')}${text === DEFAULT_INFO ? BI.i18nText('Dec-Dcm_Other') : text} \r\n${BI.i18nText('Dec-Dcm_Creator')}${creator}`,
id, id,
}, },
{ {
type: ItemIcon, type: ItemIcon,
cls: 'link-item-icon delete-font', cls: 'link-item-icon dcm-delete-font',
title: BI.i18nText('Dec-Dcm_Delete'), title: BI.i18nText('Dec-Dcm_Delete'),
value: ACTION_DELETE, value: ACTION_DELETE,
id, id,

4
src/app/connection/left/item/left_item_icon.ts

@ -8,7 +8,7 @@ const Widget: WidgetType = {
return BI.Models.getModel(Model); return BI.Models.getModel(Model);
}, },
render() { render() {
const {cls, title, id, value} = this.options; const {title, id, value} = this.options;
const that = this; const that = this;
let iconContent: any = null; let iconContent: any = null;
let combo: any = null; let combo: any = null;
@ -21,7 +21,6 @@ const Widget: WidgetType = {
}, },
el: { el: {
type: Icon, type: Icon,
cls,
baseCls: 'action-icon', baseCls: 'action-icon',
height: 24, height: 24,
width: 26, width: 26,
@ -63,7 +62,6 @@ const Widget: WidgetType = {
return { return {
type: IconButton, type: IconButton,
cls: `action-icon ${cls}`,
height: 24, height: 24,
width: 26, width: 26,
title, title,

8
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 LeftList from './left/left';
import linkSetModel from './link_set.model'; import linkSetModel from './link_set.model';
import Select from './select/select'; import Select from './select/select';
@ -17,7 +17,7 @@ const Widget: WidgetType = {
render() { render() {
return { return {
type: Htape, type: Htape,
cls: 'dcm-link-group', cls: 'bi-card',
items: [{ items: [{
el: { el: {
type: Vtape, type: Vtape,
@ -25,13 +25,13 @@ const Widget: WidgetType = {
items: [ items: [
{ {
el: { el: {
type: Left, type: VerticalAdapt,
cls: 'bi-border-bottom', cls: 'bi-border-bottom',
items: [ items: [
{ {
type: Select, type: Select,
hgap: 10, hgap: 10,
tgap: 10, vgap: 10,
}, },
], ],
}, },

2
src/app/connection/more/item/more_link_item.ts

@ -46,7 +46,7 @@ const Widget: WidgetType = {
], ],
}, { }, {
type: Label, type: Label,
cls: 'dcm-link-more-text', cls: 'bi-header-background',
height: 27, height: 27,
text, text,
}, },

3
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 {LinkType} from '@ui/type';
import Nothing from './nothing'; import Nothing from './nothing';
import RightDetail from './right_detail/right_detail'; import RightDetail from './right_detail/right_detail';
@ -22,7 +22,6 @@ const Widget: WidgetType = {
return { return {
type: ListView, type: ListView,
cls: 'dcm-link-form', cls: 'dcm-link-form',
minWidth: 400,
ref(_ref: any) { ref(_ref: any) {
rightContent = _ref; rightContent = _ref;
}, },

2
src/app/connection/right/right_edit/right_edit_jndi.ts

@ -145,7 +145,7 @@ const Widget = BI.inherit(BI.Widget, {
height: 25, height: 25,
form: { form: {
type: Label, type: Label,
cls: 'jndi-notice', cls: 'bi-error',
text: BI.i18nText('Dec-Dcm_Connection_Form_JNDI_Notice'), text: BI.i18nText('Dec-Dcm_Connection_Form_JNDI_Notice'),
}, },
}, },

2
src/app/connection/right/right_show/right_show_jndi.ts

@ -124,7 +124,7 @@ const Widget = BI.inherit(BI.Widget, {
height: 25, height: 25,
form: { form: {
type: Label, type: Label,
cls: 'jndi-notice', cls: 'bi-error',
text: BI.i18nText('Dec-Dcm_Connection_Form_JNDI_Notice'), text: BI.i18nText('Dec-Dcm_Connection_Form_JNDI_Notice'),
}, },
}, },

8
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'; import Model from './left.model';
const className = 'dec.dcm.component.linkStatus.left.item'; const className = 'dec.dcm.component.linkStatus.left.item';
const Widget: WidgetType = { const Widget: WidgetType = {
@ -11,11 +11,11 @@ const Widget: WidgetType = {
return BI.Models.getModel(Model); return BI.Models.getModel(Model);
}, },
render() { render() {
const {title, cls} = this.options; const {title} = this.options;
return { return {
type: Left, type: VerticalAdapt,
cls: `left-item cursor-pointer ${cls}`, cls: `left-item cursor-pointer`,
height: 30, height: 30,
items: [ items: [
{ {

6
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 linkStatusModel from './link_status.model';
import LeftList from './left/left'; import LeftList from './left/left';
import Right from './right/right'; import Right from './right/right';
@ -17,7 +17,7 @@ const Widget: WidgetType = {
render() { render() {
return { return {
type: Htape, type: Htape,
cls: 'dcm-link-group', cls: 'bi-card',
items: [{ items: [{
el: { el: {
type: Vtape, type: Vtape,
@ -25,7 +25,7 @@ const Widget: WidgetType = {
items: [ items: [
{ {
el: { el: {
type: Left, type: VerticalAdapt,
cls: 'bi-border-bottom', cls: 'bi-border-bottom',
items: [ items: [
{ {

7
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 Model from './right.model';
import {info} from '@shared/crud/crud.request'; import {info} from '@shared/crud/crud.request';
import RightCard from './right_card'; import RightCard from './right_card';
@ -33,11 +33,10 @@ const Widget: WidgetType = {
return { return {
type: Vertical, type: Vertical,
cls: 'dcm-link-form', cls: 'dcm-link-form',
minWidth: 400,
items: [ items: [
{ {
type: Left, type: VerticalAdapt,
cls: 'right-status-title bi-border-bottom', cls: 'bi-border-bottom',
height: 40, height: 40,
items: [ items: [
{ {

123
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 className = 'dec.dcm.component.linkStatus.right.card';
const Widget: WidgetType = { const Widget: WidgetType = {
render() { render() {
@ -10,100 +10,83 @@ const Widget: WidgetType = {
hgap: 20, hgap: 20,
items: [ items: [
{ {
type: Left, type: Vertical,
cls: 'bi-background',
height: 150,
items: [ items: [
{ {
type: Vertical, type: CenterAdapt,
cls: 'right-status-board', cls: 'right-status-board-item',
height: 150, tgap: 40,
width: '100%',
items: [ items: [
{ {
type: CenterAdapt, type: VerticalAdapt,
cls: 'right-status-board-item',
tgap: 40,
items: [ items: [
{ {
type: Left, type: Label,
items: [ cls: 'bi-high-light card-font-success',
{ textHeight: 40,
type: Label, text: numActive,
cls: 'right-status-text card-font-success', },
textHeight: 40, {
text: numActive, type: Label,
}, textHeight: 40,
{ text: '/',
type: Label, },
cls: 'right-status-text', {
textHeight: 40, type: Label,
text: '/', textHeight: 40,
}, text: maxActive,
{
type: Label,
cls: 'right-status-text',
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, type: Vertical,
cls: 'right-status-right', cls: 'bi-background',
height: 150,
items: [ items: [
{ {
type: Vertical, type: CenterAdapt,
cls: 'right-status-board', tgap: 40,
height: 150, cls: 'right-status-board-item',
width: '100%',
items: [ items: [
{ {
type: CenterAdapt, type: VerticalAdapt,
tgap: 40,
cls: 'right-status-board-item',
items: [ items: [
{ {
type: Left, type: Label,
items: [ cls: 'bi-high-light card-font-heighlight',
{ textHeight: 40,
type: Label, text: numIdle,
cls: 'right-status-text card-font-heighlight', },
textHeight: 40, {
text: numIdle, type: Label,
}, textHeight: 40,
{ text: '/',
type: Label, },
cls: 'right-status-text', {
textHeight: 40, type: Label,
text: '/', textHeight: 40,
}, text: maxIdle,
{
type: Label,
cls: 'right-status-text',
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'),
},
], ],
}, },
], ],

4
src/app/title/item/title_item.ts

@ -20,8 +20,8 @@ const Widget = BI.inherit(BI.BasicButton, {
return { return {
type: Label, type: Label,
cls: 'dcm-title-item cursor-pointer', cls: 'cursor-pointer bi-font-bold',
height: 39, height: 40,
hgap: 15, hgap: 15,
text, text,
}; };

16
src/app/title/title.ts

@ -9,7 +9,7 @@ const Widget: WidgetType = {
return { return {
type: LeftRightVerticalAdapt, type: LeftRightVerticalAdapt,
cls: 'dcm-title bi-border-bottom bi-font-bold', cls: 'bi-card bi-border-bottom',
items: { items: {
left: [ left: [
{ {
@ -17,22 +17,16 @@ const Widget: WidgetType = {
cls: 'title-item-selected', cls: 'title-item-selected',
text: BI.i18nText('Dec-Dcm_Connection_Management'), text: BI.i18nText('Dec-Dcm_Connection_Management'),
value: TAB_LINK_SET, value: TAB_LINK_SET,
ref: _ref => { handler() {
this.ConnectSet = _ref; this.select();
},
handler: () => {
this.ConnectSet.select();
}, },
}, },
{ {
type: TitleItem, type: TitleItem,
text: BI.i18nText('Dec-Dcm_Pool_Connection_Management'), text: BI.i18nText('Dec-Dcm_Pool_Connection_Management'),
value: TAB_LINK_POOL, value: TAB_LINK_POOL,
ref: _ref => { handler() {
this.ConnectPool = _ref; this.select();
},
handler: () => {
this.ConnectPool.select();
}, },
}, },
], ],

79
src/less/resource/common.less

@ -1,70 +1,39 @@
.dec-webui-dcm-layout{ .dec-webui-dcm-layout{
background-color: @background-color-normal; .title-item-selected{
.dcm-title{ color: @background-color-highlight;
background-color: @background-color-default; border-bottom: solid 2px @border-color-highlight;
.title-item-selected{
color: @background-color-highlight;
border-bottom: solid 2px @border-color-highlight;
}
} }
.dcm-link-group{ .dcm-link-left{
background-color: @background-color-default; .link-item{
.dcm-link-left{ &:hover{
.link-item{ background-color: @background-color-blue-transparent;
&:hover{
background-color: @background-color-blue-transparent;
.link-item-icon{
visibility: visible;
}
}
.link-item-icon{ .link-item-icon{
visibility: hidden; visibility: visible;
} }
} }
.left-item-selected{ .link-item-icon{
background-color: @background-color-blue-transparent; visibility: hidden;
.link-title{
color: @font-color-highlight;
}
} }
} }
} .left-item-selected{
.dcm-link-form{ background-color: @background-color-blue-transparent;
.right-status-title{ .link-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{
color: @font-color-highlight; 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{ .card-font-heighlight{
color: @font-color-negative; font-size: @font-size-30;
} }
} }
} .dcm-link-more{
&:hover{
.dcm-link-more{ border: solid 1px @border-color-highlight;
&:hover{ }
border: solid 1px @border-color-highlight;
}
.dcm-link-more-text{
background: @background-color-light-gray;
}
}
.show-content{
background-color: @background-color-default;
.show-more{
background: @background-color-light-gray;
} }
} }

8
src/less/resource/font.less

@ -1,7 +1,7 @@
@import "../../../node_modules/fineui/src/less/image.less"; @import "../../../node_modules/fineui/src/less/image.less";
@import "../lib/font.less"; @import "../lib/font.less";
.font(link-font, @font-link); .font(dcm-link-font, @font-link);
.font(info-font, @font-link-info); .font(dcm-info-font, @font-link-info);
.font(test-font, @font-link-test); .font(dcm-test-font, @font-link-test);
.font(delete-font, @font-link-delete); .font(dcm-delete-font, @font-link-delete);

2
src/shared/components/form_item.ts

@ -18,7 +18,7 @@ const Widget: WidgetType = {
width, width,
}, form, hint ? { }, form, hint ? {
type: Label, type: Label,
cls: 'form-item-hint', cls: 'bi-water-mark',
lgap: 5, lgap: 5,
textAlign: 'left', textAlign: 'left',
text: hint, text: hint,

3
src/shared/components/title.ts

@ -6,9 +6,8 @@ const Widget: WidgetType = {
return { return {
type: Label, type: Label,
cls: 'form-item-hint bi-border-bottom', cls: 'bi-water-mark bi-border-bottom',
height: 24, height: 24,
textHeight: 24,
bgap: 10, bgap: 10,
textAlign: 'left', textAlign: 'left',
text, text,

16
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 { class Dialog {
/** /**
* *
@ -54,7 +54,7 @@ class Dialog {
public loading(message: string): string { public loading(message: string): string {
const body = { const body = {
type: 'bi.center_adapt', type: 'bi.center_adapt',
cls: 'show-content', cls: 'bi-card',
width: 450, width: 450,
height: 220, height: 220,
items: [ items: [
@ -82,7 +82,7 @@ class Dialog {
public success(message: string): string { public success(message: string): string {
const body = { const body = {
type: 'bi.center_adapt', type: 'bi.center_adapt',
cls: 'show-content', cls: 'bi-card',
items: [ items: [
{ {
type: Vertical, type: Vertical,
@ -107,7 +107,7 @@ class Dialog {
public error(message: string): string { public error(message: string): string {
const body = { const body = {
type: 'bi.center_adapt', type: 'bi.center_adapt',
cls: 'show-content', cls: 'bi-card',
items: [ items: [
{ {
type: Vertical, type: Vertical,
@ -140,7 +140,7 @@ class Dialog {
items: [ items: [
{ {
type: 'bi.center_adapt', type: 'bi.center_adapt',
cls: 'show-content', cls: 'bi-card',
tgap: 10, tgap: 10,
items: [ items: [
{ {
@ -159,7 +159,7 @@ class Dialog {
text, text,
}, },
{ {
type: Left, type: VerticalAdapt,
cls: 'buttons', cls: 'buttons',
hgap: 5, hgap: 5,
items: [ items: [
@ -200,7 +200,7 @@ class Dialog {
], ],
}, { }, {
type: Label, type: Label,
cls: 'show-more', cls: 'bi-header-background',
text: more, text: more,
invisible: true, invisible: true,
height: 73, height: 73,
@ -220,7 +220,7 @@ class Dialog {
items: [{ items: [{
el: { el: {
type: 'bi.center_adapt', type: 'bi.center_adapt',
cls: 'show-content', cls: 'bi-card',
width: 450, width: 450,
height: 220, height: 220,
items: [body], items: [body],

Loading…
Cancel
Save