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

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

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

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 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,
},
],
},

2
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,
},

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

2
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'),
},
},

2
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'),
},
},

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';
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: [
{

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 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: [
{

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 {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: [
{

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

4
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,
};

16
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();
},
},
],

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

8
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);
.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);

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

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

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 {
/**
*
@ -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],

Loading…
Cancel
Save