diff --git a/private/constants.ts b/private/constants.ts index 68aa3a3..80ba494 100644 --- a/private/constants.ts +++ b/private/constants.ts @@ -362,3 +362,12 @@ export const CONNECT_CHARSET = [ value: 'CP850', }, ]; + + +const DecDcm = { + TEST_STATUS_WAITING: 1, + TEST_STATUS_SUCCESS: 2, + TEST_STATUS_FAIL: 3, +}; + +export default DecDcm; diff --git a/src/app/app.ts b/src/app/app.ts index 2a11d1c..baafeba 100644 --- a/src/app/app.ts +++ b/src/app/app.ts @@ -1,4 +1,4 @@ -import {Vtape} from '../ui/index'; +import {Vtape, Left, Vertical, Absolute} from '../ui/index'; import appModel from './app.model'; import title from './title/title'; import linkSet from './link_set/link_set'; @@ -13,19 +13,34 @@ const Widget = BI.inherit(BI.Widget, { render() { return { type: Vtape, - cls: 'database-connection-layout', - items: [{ - el: { - type: title, + cls: 'dec-webui-dcm-layout', + items: [ + { + el: { + type: title, + }, + height: 40, + }, + { + type: Absolute, + items: [{ + el: { + type: linkSet, + }, + left: 10, + top: 10, + right: 10, + bottom: 10, + }, { + el: { + type: linkStatus, + }, + left: 10, + top: 10, + right: 10, + bottom: 10, + }], }, - height: 40, - }, - { - type: linkSet, - }, - { - type: linkStatus, - }, ], }; }, diff --git a/src/app/link_set/left/left_item/left_item.ts b/src/app/link_set/left/left_item/left_item.ts index 9b8b06c..65d85ee 100644 --- a/src/app/link_set/left/left_item/left_item.ts +++ b/src/app/link_set/left/left_item/left_item.ts @@ -1,4 +1,4 @@ -import {WidgetType, Left, Label, Icon, TextButton} from '@ui'; +import {WidgetType, Left, Label, Icon, TextButton, Right, LeftRightVerticalAdapt} from '@ui'; import ItemIcon from './left_item_icon'; import Model from '../../link_set.model'; import {ACTION_COPY, ACTION_TEST, ACTION_DELETE, DEFAULT_INFO} from '@private/constants'; @@ -16,63 +16,62 @@ const Widget: WidgetType = { const {title, extraCls, creator, text, id} = this.options; return { - type: Left, - cls: 'left-item', + type: LeftRightVerticalAdapt, + cls: 'link-item cursor-pointer', + height: 24, extraCls, - items: [ - { - type: Icon, - cls: 'link-font', - height: 24, - width: 26, - text: BI.i18nText('Dec-Dcm_Connections'), - title, - }, - { - type: TextButton, - cls: 'link-title', - textAlign: 'left', - text: title, - title, - handler: () => { - this.store.setLinkSelected(title); + items: { + left: [ + { + type: Icon, + cls: 'link-font', + height: 24, + width: 26, + text: BI.i18nText('Dec-Dcm_Connections'), + title, }, - }, - { - type: Left, - cls: 'icons', - items: [ - { - type: ItemIcon, - cls: 'test-font', - title: BI.i18nText('Dec-Dcm_Test_Connection'), - value: ACTION_TEST, - id, + { + type: TextButton, + cls: 'link-title', + textHeight: 24, + textAlign: 'left', + text: title, + title, + handler: () => { + this.store.setLinkSelected(title); }, - { - type: ItemIcon, - cls: 'copy-font', - title: BI.i18nText('Dec-Dcm_Copy'), - value: ACTION_COPY, - id, - }, - { - type: ItemIcon, - cls: '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: 'delete-font', - title: BI.i18nText('Dec-Dcm_Delete'), - value: ACTION_DELETE, - id, - }, - ], - }, - - ], + }, + ], + right: [ + { + type: ItemIcon, + cls: 'link-item-icon test-font', + title: BI.i18nText('Dec-Dcm_Test_Connection'), + value: ACTION_TEST, + id, + }, + { + type: ItemIcon, + cls: 'link-item-icon copy-font', + title: BI.i18nText('Dec-Dcm_Copy'), + value: ACTION_COPY, + id, + }, + { + type: ItemIcon, + cls: 'link-item-icon 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', + title: BI.i18nText('Dec-Dcm_Delete'), + value: ACTION_DELETE, + id, + }, + ], + }, }; }, }; diff --git a/src/app/link_set/link_set.model.ts b/src/app/link_set/link_set.model.ts index ba8aae4..04b0cf8 100644 --- a/src/app/link_set/link_set.model.ts +++ b/src/app/link_set/link_set.model.ts @@ -5,7 +5,6 @@ import {getCnnectionName} from './select/select.service'; import {DATA_BASE_TYPE} from '@private/constants'; import dialog from '@shared/service/dialog.service'; import {saveConnection} from './link_set.service'; - const className = 'fr.model.linkset'; const Model: ModelType = { context: ['tab', 'linkList', 'linkSelected', 'linkUpdate', 'connectionNameErr'], @@ -54,10 +53,10 @@ const Model: ModelType = { } }, _textLink(id: string) { - const loadingId = dialog.loading(BI.i18nText('Dec-Dcm_Connection_Testing')); const link = this.model.linkList.find((item: LinkType) => item.connectionId === id); + const loadingId = dialog.loading(BI.i18nText('Dec-Dcm_Connection_Testing')); testConnection(link, (res: any) => { - dialog.close(loadingId); + dialog.remove(loadingId); if (res && res.errorCode) { dialog.linkFail(`${link.connectionName}${BI.i18nText('Dec-Dcm_Connection_Test_Fail')}`, res.errorMsg, () => { this._textLink(id); diff --git a/src/app/link_set/link_set.ts b/src/app/link_set/link_set.ts index 599efb2..3a810db 100644 --- a/src/app/link_set/link_set.ts +++ b/src/app/link_set/link_set.ts @@ -17,19 +17,21 @@ const Widget: WidgetType = { render() { return { type: Htape, - cls: 'linkset', + cls: 'dcm-link-group', items: [{ el: { type: Vtape, - cls: 'database-left', + cls: 'dcm-link-left bi-border-right', items: [ { el: { type: Left, - cls: 'select-group', + cls: 'bi-border-bottom', items: [ { type: Select, + hgap: 10, + tgap: 10, }, ], }, @@ -37,6 +39,8 @@ const Widget: WidgetType = { }, { type: LeftList, cls: 'left-list', + vgap: 10, + hgap: 10, }, ], }, diff --git a/src/app/link_set/more/item/more_link_item.ts b/src/app/link_set/more/item/more_link_item.ts index 9764053..7e4715c 100644 --- a/src/app/link_set/more/item/more_link_item.ts +++ b/src/app/link_set/more/item/more_link_item.ts @@ -1,4 +1,4 @@ -import {WidgetType, Vertical, Img, Label, Layout} from '@ui/index'; +import {WidgetType, Vertical, Img, Label, Layout, Absolute} from '@ui/index'; import ModelName from './more_link_litem.model'; const className = 'fr.component.linkSet.morelink.item'; @@ -17,7 +17,7 @@ const Widget: WidgetType = { return { type: Vertical, - cls: 'link-item', + cls: 'dcm-link-more bi-border cursor-pointer', width: 120, height: 117, items: [ @@ -25,19 +25,29 @@ const Widget: WidgetType = { type: Img, width: 120, height: 90, - src: `./img/${name}.jpg`, + src: `img/${name}.jpg`, }, { - type: Layout, - cls: 'selected', - invisible: true, - width: 30, - height: 30, - ref: _ref => { - this.selected = _ref; - }, + type: Absolute, + left: 90, + top: -90, + items: [ + { + el: { + type: Layout, + cls: 'dcm-link-more-selected', + invisible: true, + width: 30, + height: 30, + ref: _ref => { + this.selected = _ref; + }, + }, + }, + ], }, { type: Label, - cls: 'text', + cls: 'dcm-link-more-text', + height: 27, text, }, ], diff --git a/src/app/link_set/more/more_link.service.ts b/src/app/link_set/more/more_link.service.ts index b225ccc..e9a11da 100644 --- a/src/app/link_set/more/more_link.service.ts +++ b/src/app/link_set/more/more_link.service.ts @@ -8,7 +8,7 @@ export const moreLink = (onConfirm?: Function): void => { type: 'bi.bar_popover', size: 'normal', header: BI.i18nText('Dec-Dcm_Connection_More-Title'), - width: 550, + width: 560, height: 500, body: { type: MoreLink, diff --git a/src/app/link_set/more/more_link.ts b/src/app/link_set/more/more_link.ts index 2a9ff9b..ad1ca97 100644 --- a/src/app/link_set/more/more_link.ts +++ b/src/app/link_set/more/more_link.ts @@ -10,7 +10,6 @@ const Widget: WidgetType = { render() { return { type: Vtape, - cls: 'more-link', items: [ { el: { @@ -25,7 +24,13 @@ const Widget: WidgetType = { }, { type: Left, - cls: 'more-link-item', + scrolly: true, + width: 528, + height: 380, + tgap: 2, + rgap: 2, + bgap: 2, + lgap: 2, items: this._createItems(), }, ], diff --git a/src/app/link_set/right/nothing.ts b/src/app/link_set/right/nothing.ts index b98307f..81fc1c2 100644 --- a/src/app/link_set/right/nothing.ts +++ b/src/app/link_set/right/nothing.ts @@ -4,6 +4,7 @@ const Widget: WidgetType = { render() { return { type: CenterAdapt, + top: 200, items: [{ type: Vertical, width: 260, @@ -21,7 +22,6 @@ const Widget: WidgetType = { text: BI.i18nText('Dec-Dcm_Connection_Plase_Add_One'), }, ], - }], }; }, diff --git a/src/app/link_set/right/right.ts b/src/app/link_set/right/right.ts index 59429bf..f969c23 100644 --- a/src/app/link_set/right/right.ts +++ b/src/app/link_set/right/right.ts @@ -21,7 +21,8 @@ const Widget: WidgetType = { render() { return { type: ListView, - cls: 'database-right', + cls: 'dcm-link-form', + minWidth: 400, ref(_ref: any) { rightContent = _ref; }, diff --git a/src/app/link_set/right/right_detail/right_detail.ts b/src/app/link_set/right/right_detail/right_detail.ts index 86e3d3c..44b1c8a 100644 --- a/src/app/link_set/right/right_detail/right_detail.ts +++ b/src/app/link_set/right/right_detail/right_detail.ts @@ -27,7 +27,6 @@ const Widget: WidgetType = { return { type: ListView, - cls: 'right-content', ref: _ref => { this.rightDetail = _ref; }, @@ -64,6 +63,8 @@ const Widget: WidgetType = { linkSelected, }, { type: linkSelected.isSelected ? editPage : showPage, + vgap: 10, + hgap: 10, linkSelected, }, ]; diff --git a/src/app/link_set/right/right_edit/right_edit.ts b/src/app/link_set/right/right_edit/right_edit.ts index b9bc1c2..16ac610 100644 --- a/src/app/link_set/right/right_edit/right_edit.ts +++ b/src/app/link_set/right/right_edit/right_edit.ts @@ -28,7 +28,7 @@ const Widget: WidgetType = { return { type: Vertical, - cls: 'right-show', + vgap: 10, items: [ { type: FormItem, @@ -61,10 +61,10 @@ const Widget: WidgetType = { { type: FormItem, text: BI.i18nText('Dec-Dcm_First_Step'), - height: 400, + height: 420, form: { type: Vertical, - cls: 'right-form', + vgap: 10, items: [ { type: FormItem, @@ -252,6 +252,7 @@ const Widget: WidgetType = { text: BI.i18nText('Dec-Dcm_Second_Step'), form: { type: Button, + width: 80, text: BI.i18nText('Dec-Dcm_Test_Connection'), level: 'ignore', }, diff --git a/src/app/link_set/right/right_edit/right_edit_jndi.ts b/src/app/link_set/right/right_edit/right_edit_jndi.ts index 68f7398..7278121 100644 --- a/src/app/link_set/right/right_edit/right_edit_jndi.ts +++ b/src/app/link_set/right/right_edit/right_edit_jndi.ts @@ -11,7 +11,7 @@ const Widget = BI.inherit(BI.Widget, { }, watch: { isCollapse(isCollapse) { - const height = isCollapse ? 550 : 160; + const height = isCollapse ? 550 : 180; const text = isCollapse ? BI.i18nText('Dec-Dcm_Connection_Form_JNDI_Collapse-Attributes') : BI.i18nText('Dec-Dcm_Connection_Form_JNDI_Other_Attributes'); this.jndiFormRef.setHeight(height); this.collapseRef.setText(text); @@ -23,7 +23,7 @@ const Widget = BI.inherit(BI.Widget, { return { type: Vertical, - cls: 'right-show', + vgap: 10, items: [ { type: FormItem, @@ -39,13 +39,12 @@ const Widget = BI.inherit(BI.Widget, { { type: FormItem, text: BI.i18nText('Dec-Dcm_Connection_Form_JNDI_Context'), - height: 160, + height: 180, ref: _ref => { this.jndiFormRef = _ref; }, form: { type: Vertical, - cls: 'right-form', items: [ { type: FormItem, @@ -118,8 +117,7 @@ const Widget = BI.inherit(BI.Widget, { }, { type: Vertical, - cls: 'right-form', - invisible: false, + invisible: true, ref: _ref => { this.otherAttributesRef = _ref; }, @@ -154,10 +152,9 @@ const Widget = BI.inherit(BI.Widget, { { type: FormItem, text: BI.i18nText('Dec-Dcm_Connection_Form_JNDI_Advanced'), - height: 25, + height: 40, form: { type: Vertical, - cls: 'right-form', items: [ { type: FormItem, diff --git a/src/app/link_set/right/right_edit/right_edit_mysql.ts b/src/app/link_set/right/right_edit/right_edit_mysql.ts index 8ed5437..56b3718 100644 --- a/src/app/link_set/right/right_edit/right_edit_mysql.ts +++ b/src/app/link_set/right/right_edit/right_edit_mysql.ts @@ -16,7 +16,7 @@ const Widget: WidgetType = { return { type: Vertical, - cls: 'right-show', + vgap: 10, items: [ { type: FormItem, diff --git a/src/app/link_set/right/right_show/right_show.ts b/src/app/link_set/right/right_show/right_show.ts index 57b34cc..53f8b34 100644 --- a/src/app/link_set/right/right_show/right_show.ts +++ b/src/app/link_set/right/right_show/right_show.ts @@ -13,7 +13,7 @@ const Widget: WidgetType = { return { type: Vertical, - cls: 'right-show', + vgap: 10, items: [ { type: BothSide, diff --git a/src/app/link_set/right/right_show/right_show_jndi.ts b/src/app/link_set/right/right_show/right_show_jndi.ts index a1365eb..6a28a1a 100644 --- a/src/app/link_set/right/right_show/right_show_jndi.ts +++ b/src/app/link_set/right/right_show/right_show_jndi.ts @@ -10,7 +10,7 @@ const Widget = BI.inherit(BI.Widget, { return { type: Vertical, - cls: 'right-show', + vgap: 10, items: [ { type: FormItem, @@ -29,7 +29,6 @@ const Widget = BI.inherit(BI.Widget, { }, form: { type: Vertical, - cls: 'right-form', items: [ { type: FormItem, @@ -92,7 +91,6 @@ const Widget = BI.inherit(BI.Widget, { }, { type: Vertical, - cls: 'right-form', invisible: false, ref: _ref => { this.otherAttributesRef = _ref; diff --git a/src/app/link_set/right/right_title/right_title.ts b/src/app/link_set/right/right_title/right_title.ts index 1e44851..04b8d5d 100644 --- a/src/app/link_set/right/right_title/right_title.ts +++ b/src/app/link_set/right/right_title/right_title.ts @@ -1,4 +1,4 @@ -import {WidgetType, Left, Label, Button} from '@ui/index'; +import {WidgetType, Left, Label, Button, LeftRightVerticalAdapt} from '@ui/index'; import RightTitleModel from '../../link_set.model'; import {LinkType} from '@ui/type'; import {OTHER_CONNECT} from '@private/constants'; @@ -15,49 +15,55 @@ const Widget: WidgetType = { const title = linkSelected.text === OTHER_CONNECT ? BI.i18nText('Dec-Dcm_Connection_Other') : linkSelected.text; return { - type: Left, + type: LeftRightVerticalAdapt, height: 40, - cls: 'right-title', - items: [ - { - type: Label, - cls: 'right-title-text', - text: `${BI.i18nText('Dec-Dcm_Data_Connections')}(${title ? title : BI.i18nText('Dec-Dcm_Default')})`, - }, - { - type: Button, - cls: 'right-title-button', - invisible: isEdit, - text: BI.i18nText('Dec-Dcm_Edit'), - handler() { - that.store.setEdit(true); + cls: 'bi-border-bottom', + items: { + left: [ + { + type: Label, + cls: 'bi-font-bold', + hgap: 10, + textHeight: 40, + text: `${BI.i18nText('Dec-Dcm_Data_Connections')}(${title ? title : BI.i18nText('Dec-Dcm_Default')})`, }, - }, - { - type: Button, - cls: 'right-title-button', - invisible: !isEdit, - text: BI.i18nText('Dec-Dcm_Save'), - handler() { - const result = BI.find(linkList, (idx: number, value: LinkType) => that.model.linkUpdate.connectionName === value.connectionName && value.connectionId !== that.model.linkUpdate.connectionId); - if (result) { - that.store.setConnectionNameErr(BI.i18nText('Dec-Dcm_Connection_Is_Existence')); - } else { - that.store.saveLink(); - } + ], + right: [ + { + type: Button, + hgap: 10, + invisible: isEdit, + text: BI.i18nText('Dec-Dcm_Edit'), + handler() { + that.store.setEdit(true); + }, }, - }, - { - type: Button, - cls: 'right-title-button', - invisible: !isEdit, - level: 'ignore', - text: BI.i18nText('BI-Basic_Cancel'), - handler() { - that.store.setCancel(); + { + type: Button, + hgap: 10, + invisible: !isEdit, + level: 'ignore', + text: BI.i18nText('BI-Basic_Cancel'), + handler() { + that.store.setCancel(); + }, }, - }, - ], + { + type: Button, + hgap: 10, + invisible: !isEdit, + text: BI.i18nText('Dec-Dcm_Save'), + handler() { + const result = BI.find(linkList, (idx: number, value: LinkType) => that.model.linkUpdate.connectionName === value.connectionName && value.connectionId !== that.model.linkUpdate.connectionId); + if (result) { + that.store.setConnectionNameErr(BI.i18nText('Dec-Dcm_Connection_Is_Existence')); + } else { + that.store.saveLink(); + } + }, + }, + ], + }, }; }, }; diff --git a/src/app/link_set/select/select.ts b/src/app/link_set/select/select.ts index ce333c9..5ee9ad8 100644 --- a/src/app/link_set/select/select.ts +++ b/src/app/link_set/select/select.ts @@ -13,7 +13,6 @@ const Widget: WidgetType = { return { type: Combo, - cls: 'select', trigger: 'click', adjustYOffset: 4, el: { @@ -24,29 +23,30 @@ const Widget: WidgetType = { popup: { el: { type: ButtonGroup, - cls: 'database-link-items', items: [...BI.map([...DATA_LINKS, ...BI.Constants.getConstant(connectList)], (index: number, item: string) => { return { type: TextItem, height: 24, width: 152, + textLgap: 10, text: item, title: item, value: item, }; }), { type: TextItem, - cls: 'link-item', height: 24, width: 152, + textLgap: 10, text: BI.i18nText('Dec-Dcm_Connection_More'), title: BI.i18nText('Dec-Dcm_Connection_More'), value: 'more', }, { type: TextItem, - cls: 'link-item', + cls: 'bi-border-top', height: 24, width: 152, + textLgap: 10, text: BI.i18nText('Dec-Dcm_Connection_Other'), title: BI.i18nText('Dec-Dcm_Connection_Other'), value: 'other', diff --git a/src/app/link_status/left/left_item.ts b/src/app/link_status/left/left_item.ts index b568ab8..13ff6b3 100644 --- a/src/app/link_status/left/left_item.ts +++ b/src/app/link_status/left/left_item.ts @@ -15,12 +15,15 @@ const Widget: WidgetType = { return { type: Left, - cls: 'left-item', + cls: 'left-item cursor-pointer', + height: 30, extraCls, items: [ { type: TextButton, cls: 'link-title', + textHeight: 30, + lgap: 10, textAlign: 'left', text: title, title, diff --git a/src/app/link_status/link_status.ts b/src/app/link_status/link_status.ts index 85579d3..3d26c88 100644 --- a/src/app/link_status/link_status.ts +++ b/src/app/link_status/link_status.ts @@ -17,20 +17,22 @@ const Widget: WidgetType = { render() { return { type: Htape, - cls: 'linkStatus', + cls: 'dcm-link-group', items: [{ el: { type: Vtape, - cls: 'database-left', + cls: 'dcm-link-left bi-border-right', items: [ { el: { type: Left, - cls: 'select-group', + cls: 'bi-border-bottom', items: [ { type: Label, - cls: 'status-title', + cls: 'bi-font-bold', + hgap: 6, + vgap: 6, text: BI.i18nText('Dec-Dcm_Data_Connections'), }, ], diff --git a/src/app/link_status/right/right.ts b/src/app/link_status/right/right.ts index d4f50ee..8f1d945 100644 --- a/src/app/link_status/right/right.ts +++ b/src/app/link_status/right/right.ts @@ -32,15 +32,19 @@ const Widget: WidgetType = { render() { return { type: Vertical, - cls: 'database-right', + cls: 'dcm-link-form', + minWidth: 400, items: [ { type: Left, + cls: 'right-status-title bi-border-bottom', height: 40, - cls: 'right-status-title', items: [ { type: Label, + cls: 'bi-font-bold', + textHeight: 40, + lgap: 10, text: BI.i18nText('Dec-Dcm_Data_Connections'), }, ], @@ -50,6 +54,8 @@ const Widget: WidgetType = { }, { type: ListView, cls: 'right-status-body', + vgap: 10, + hgap: 10, ref(ref: any) { Group = ref; }, diff --git a/src/app/link_status/right/right_card.ts b/src/app/link_status/right/right_card.ts index 3b9f86c..64c73fc 100644 --- a/src/app/link_status/right/right_card.ts +++ b/src/app/link_status/right/right_card.ts @@ -1,39 +1,50 @@ -import {WidgetType, Left, Label, Vertical} from '@ui/index'; +import {WidgetType, Left, Label, Vertical, FloatCenter, CenterAdapt} from '@ui/index'; const className = 'fr.component.linkStatus.right.card'; const Widget: WidgetType = { render() { const {maxActive, maxIdle, numActive, numIdle} = this.options; return { - type: Left, + type: FloatCenter, + height: 150, + hgap: 20, items: [ { type: Left, - cls: 'right-status-item', items: [ { type: Vertical, cls: 'right-status-board', + height: 150, + width: '100%', items: [ { - type: Vertical, + type: CenterAdapt, cls: 'right-status-board-item', + tgap: 40, items: [ { - type: Label, - cls: 'right-status-text', - extraCls: 'card-font1', - text: numActive, - }, - { - type: Label, - cls: 'right-status-text', - text: '/', - }, - { - type: Label, - cls: 'right-status-text', - text: maxActive, + 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, + }, + ], }, ], }, @@ -53,26 +64,36 @@ const Widget: WidgetType = { { type: Vertical, cls: 'right-status-board', + height: 150, + width: '100%', items: [ { - type: Vertical, + type: CenterAdapt, + tgap: 40, cls: 'right-status-board-item', items: [ { - type: Label, - cls: 'right-status-text', - extraCls: 'card-font2', - text: numIdle, - }, - { - type: Label, - cls: 'right-status-text', - text: '/', - }, - { - type: Label, - cls: 'right-status-text', - text: maxIdle, + 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, + }, + ], }, ], }, diff --git a/src/app/title/title.ts b/src/app/title/title.ts index fafcbd7..8013461 100644 --- a/src/app/title/title.ts +++ b/src/app/title/title.ts @@ -1,4 +1,4 @@ -import {Left, WidgetType, IconButton} from '@ui/index'; +import {WidgetType, IconButton, LeftRightVerticalAdapt} from '@ui/index'; import TitleItem from './title_item/title_item'; import {isDesigner, closeWindow} from '@shared/crud/crud.request'; import {TAB_LINK_SET, TAB_LINK_POOL} from '@private/constants'; @@ -6,44 +6,51 @@ const className = 'fr.title'; const Widget: WidgetType = { render() { return { - type: Left, - cls: 'title', - items: [ - { - type: TitleItem, - cls: 'dec-title-item-selected', - text: BI.i18nText('Dec-Dcm_Connection_Management'), - value: TAB_LINK_SET, - ref: _ref => { - this.ConnectSet = _ref; + type: LeftRightVerticalAdapt, + cls: 'dcm-title bi-border-bottom bi-font-bold', + items: { + left: [ + { + type: TitleItem, + 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.ConnectSet.select(); + { + type: TitleItem, + text: BI.i18nText('Dec-Dcm_Pool_Connection_Management'), + value: TAB_LINK_POOL, + ref: _ref => { + this.ConnectPool = _ref; + }, + handler: () => { + this.ConnectPool.select(); + }, }, - }, - { - type: TitleItem, - text: BI.i18nText('Dec-Dcm_Pool_Connection_Management'), - value: TAB_LINK_POOL, - ref: _ref => { - this.ConnectPool = _ref; + ], + right: [ + { + type: IconButton, + cls: 'close-ha-font', + invisible: true, + width: 30, + height: 30, + rgap: 10, + handler() { + closeWindow(); + }, + ref: _ref => { + this.CloseButton = _ref; + }, }, - handler: () => { - this.ConnectPool.select(); - }, - }, - { - type: IconButton, - cls: 'close-button', - handler() { - closeWindow(); - }, - invisible: true, - ref: _ref => { - this.CloseButton = _ref; - }, - }, - ], + ], + }, }; }, mounted() { diff --git a/src/app/title/title_item/title_item.ts b/src/app/title/title_item/title_item.ts index 84b0981..1dcb198 100644 --- a/src/app/title/title_item/title_item.ts +++ b/src/app/title/title_item/title_item.ts @@ -20,7 +20,9 @@ const Widget = BI.inherit(BI.BasicButton, { return { type: Label, - cls: 'dec-title-item', + cls: 'dcm-title-item cursor-pointer', + height: 39, + hgap: 15, text, }; }, diff --git a/src/less/app.less b/src/less/app.less deleted file mode 100644 index c30e453..0000000 --- a/src/less/app.less +++ /dev/null @@ -1,318 +0,0 @@ -.database-connection-layout{ - width: 100%; - height: 100%; - background-color: @background-color-normal; - .title{ - background-color: @background-color-default; - border-bottom: 1px solid @border-color-line; - .dec-title-item{ - height: 39px; - line-height: 39px; - padding-left: 15px; - padding-right: 15px; - text-align: center; - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; - position: relative; - flex-shrink: 0; - font-weight: 700; - cursor: pointer; - } - .dec-title-item-selected{ - color: @background-color-highlight; - border-bottom: @border-color-highlight; - } - .close-button { - position: absolute !important; - right: 5px; - top: 5px; - width: 30px; - height: 30px; - cursor: pointer; - background-image: url("../img/icon_close9x9_normal.png"); - background-repeat: no-repeat; - background-position: center; - } - } - .linkset{ - margin: 10px; - bottom: 0px; - background-color: @background-color-default; - } - .linkStatus{ - margin: 10px; - top: 40px; - background-color: @background-color-default; - } -} - -.database-left{ - border-right: 1px solid @border-color-line; - .select-group{ - border-bottom: 1px solid @border-color-line; - .select{ - margin: 10px; - .database-link-items{ - padding-left:10px; - .link-item{ - border-top: 1px solid @border-color-line; - } - } - } - .status-title{ - font-weight: 700; - margin-left: 12px; - margin-top: 12px; - } - } - .left-list{ - margin: 10px; - .left-item{ - height: 24px; - line-height: 24px; - cursor: pointer; - &:hover{ - background-color: @background-color-blue-transparent; - .icons{ - .action-icon{ - visibility: visible !important; - } - - } - } - .icons{ - float: right !important; - .action-icon{ - visibility: hidden; - } - .b-font{ - font-size: 16px; - } - } - } - .left-item-selected{ - background-color: @background-color-blue-transparent; - .link-title{ - color: @font-color-highlight; - } - } - } -} -.database-right{ - min-width: 400px; - overflow: auto; - >.bi-vertical-layout{ - height: 100%; - } - .bi-flex-center-adapt-layout{ - height: 100%; - .data-connection-background{ - background: url(../img/resources.png) center center no-repeat; - background-size: contain; - } - } - .right-status-title{ - border-bottom: 1px solid @border-color-line; - color: @font-color-normal; - line-height: 40px; - padding-left: 10px; - font-weight: 700; - } - .right-status-body{ - margin: 10px 30px 0px 30px; - height: 50%; - .right-status-item{ - height: 150px; - width: 50%; - top: 0; left: 0; - position: absolute !important; - .right-status-board { margin-left: 25px; position: relative !important; left: -25px;} - } - .right-status-right{ - height: 150px; - width: 50%; - top: 0; right:0; - position: absolute !important; - .right-status-board { margin-right: 25px; position: relative !important; left: 25px; } - } - .right-status-board{ - background-color: @background-color-normal; - color: @font-color-normal; - width: 100%; - height: 100%; - .right-status-board-item{ - text-align: center; - margin-top: 38px; - .right-status-text{ - display: inline-block; - } - .card-font1{ - color: @font-color-success; - font-size: 32px; - } - .card-font2{ - color: @font-color-highlight; - font-size: 32px; - } - } - - } - } - .right-content{ - height: 100%; - .right-title{ - border-bottom: 1px solid @border-color-line; - color: @font-color-normal; - line-height: 40px; - padding-left: 10px; - .right-title-text{ - font-weight: 700; - } - .right-title-button{ - float: right !important; - margin-right: 10px; - margin-top: 8px; - } - } - .right-show{ - margin: 10px; - .right-form{ - width: 100%; - } - } - } -} -.both-side{ - line-height: 24px; - margin-bottom: 10px; - .left{ - white-space: nowrap; - text-overflow: ellipsis; - position: relative; - flex-shrink: 0; - font-weight: 700; - } - .hint{ - padding-left: 5px; - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; - position: relative; - flex-shrink: 0; - margin-left: 5px; - color: @font-color-disabled; - } -} -.shared-component-title{ - height: 24px; - line-height: 24px; - margin-bottom: 10px; - 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-size: contain; - margin-right: 12px; - } - .bi-text{ - height: 50px; - line-height: 50px; - margin-left: 12px; - } -} -.more-link{ - .more-link-item{ - width: 538px; - overflow: hidden auto; - left: -10px !important; - right: 0px; - top: 10px; - bottom: 0px; - position: absolute; - height: 380px; - .link-item{ - margin-left: 10px; - margin-bottom: 10px; - cursor: pointer; - border: solid 1px @border-color-default; - &:hover{ - border: solid 1px @border-color-highlight; - } - .selected{ - position: absolute !important; - right: -1px; - top: -1px; - height: 30px; - width: 30px; - background: url(../img/database-selected.png) center center no-repeat; - background-size: contain; - } - .text{ - height: 27px; - line-height: 27px; - padding-left: 2px; - padding-right: 2px; - text-align: center; - white-space: nowrap; - background: @background-color-light-gray; - } - } - - } -} -.popover-notitle{ - .bi-header-background{ - display: none; - } - .bi-absolute-layout{ - top:0px !important; - } -} -.bi-custom-show{ - .show-content{ - text-align: center; - .loading-icon{ - display: block; - 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-size: contain; - margin: 0 auto; - margin-bottom: 18px; - } - .error-icon{ - display: block; - background: url(../img/error.png) center center no-repeat; - background-size: contain; - margin: 0 auto; - margin-bottom: 18px; - } - .buttons{ - margin-top: 18px; - div{ - margin: 0 4px; - } - } - } - .show-more{ - text-align: left !important; - height: 73px; - background: @background-color-light-gray; - margin-bottom: 10px; - padding: 5px; - margin-top: 10px; - } -} -.jndi-notice{ - color: @color-jndi-notice; -} \ No newline at end of file diff --git a/src/less/color.less b/src/less/color.less deleted file mode 100644 index a1a49e7..0000000 --- a/src/less/color.less +++ /dev/null @@ -1,3 +0,0 @@ -@import "../../node_modules/fineui/src/less/lib/colors.less"; -@color-jndi-notice: @font-color-negative; -@background-color-blue-transparent: rgba(54,133,242,.05); \ No newline at end of file diff --git a/src/less/font.less b/src/less/font.less deleted file mode 100644 index 1c9d074..0000000 --- a/src/less/font.less +++ /dev/null @@ -1,7 +0,0 @@ -@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 diff --git a/src/less/index.less b/src/less/index.less index e866921..7a227dc 100644 --- a/src/less/index.less +++ b/src/less/index.less @@ -1,3 +1,5 @@ -@import "color"; -@import "app"; -@import "font"; \ No newline at end of file +@import "lib/background"; +@import "lib/color"; +@import "resource/background"; +@import "resource/font"; +@import "resource/common"; \ No newline at end of file diff --git a/src/less/lib/background.less b/src/less/lib/background.less new file mode 100644 index 0000000..e5baaf9 --- /dev/null +++ b/src/less/lib/background.less @@ -0,0 +1,7 @@ +@background-color-blue-transparent: @color-bi-blue-5; +@background-resources: "resources.png"; +@background-warning: "warning.png"; +@background-database-selected: "database-selected.png"; +@background-loading-gif: "loading.gif"; +@background-success: "success.png"; +@background-error: "error.png"; \ No newline at end of file diff --git a/src/less/lib/color.less b/src/less/lib/color.less new file mode 100644 index 0000000..3b63c6d --- /dev/null +++ b/src/less/lib/color.less @@ -0,0 +1 @@ +@import "../../../node_modules/fineui/src/less/lib/colors"; \ No newline at end of file diff --git a/src/less/resource/background.less b/src/less/resource/background.less new file mode 100644 index 0000000..ffec451 --- /dev/null +++ b/src/less/resource/background.less @@ -0,0 +1,23 @@ +@import "../lib/background"; +@import "../var"; + +.data-connection-background { + .image2xPath(@background-resources) +} + +.dcm-comfirm-icon{ + .image2xPath(@background-warning) +} +.dcm-link-more-selected{ + .image2xPath(@background-database-selected) +} + +.dcm-loading-icon{ + .image2xPath(@background-loading-gif) +} +.dcm-success-icon{ + .image2xPath(@background-success) +} +.dcm-error-icon{ + .image2xPath(@background-error) +} \ No newline at end of file diff --git a/src/less/resource/common.less b/src/less/resource/common.less new file mode 100644 index 0000000..c43b34a --- /dev/null +++ b/src/less/resource/common.less @@ -0,0 +1,66 @@ +.dec-webui-dcm-layout{ + background-color: @background-color-normal; + .dcm-title{ + background-color: @background-color-default; + } + .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; + } + } + .link-item-icon{ + visibility: hidden; + } + } + .left-item-selected{ + background-color: @background-color-blue-transparent; + .link-title{ + color: @font-color-highlight; + } + } + } + } + .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{ + color: @font-color-highlight; + font-size: @font-size-30; + } + } + .form-item-hint{ + color: @font-color-disabled; + } + .jndi-notice{ + color: @font-color-negative; + } + } +} + +.dcm-link-more{ + &: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; + } +} \ No newline at end of file diff --git a/src/less/resource/font.less b/src/less/resource/font.less new file mode 100644 index 0000000..db1fd98 --- /dev/null +++ b/src/less/resource/font.less @@ -0,0 +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 diff --git a/src/less/var.less b/src/less/var.less new file mode 100644 index 0000000..964e94b --- /dev/null +++ b/src/less/var.less @@ -0,0 +1,3 @@ +@import "../../node_modules/fineui/src/less/var"; +@imageUrl: '/img/'; +@image2xUrl: '/img/'; \ No newline at end of file diff --git a/src/shared/components/both_side.ts b/src/shared/components/both_side.ts index 5e7b654..4db6c94 100644 --- a/src/shared/components/both_side.ts +++ b/src/shared/components/both_side.ts @@ -11,7 +11,7 @@ const Widget: WidgetType = { items: [{ el: { type: Label, - cls: 'left', + cls: 'bi-font-bold', textAlign: 'left', text: leftText, }, diff --git a/src/shared/components/form_item.ts b/src/shared/components/form_item.ts index b15f3db..133ee89 100644 --- a/src/shared/components/form_item.ts +++ b/src/shared/components/form_item.ts @@ -11,17 +11,18 @@ const Widget: WidgetType = { items: [{ el: { type: Label, - cls: 'left', + cls: 'bi-font-bold', textAlign: 'left', text, }, width, - }, form, { + }, form, hint ? { type: Label, - cls: 'hint', + cls: 'form-item-hint', + lgap: 5, textAlign: 'left', text: hint, - }], + } : null], }; }, }; diff --git a/src/shared/components/title.ts b/src/shared/components/title.ts index df1bc8a..0dbef68 100644 --- a/src/shared/components/title.ts +++ b/src/shared/components/title.ts @@ -6,7 +6,10 @@ const Widget: WidgetType = { return { type: Label, - cls: 'shared-component-title', + cls: 'form-item-hint bi-border-bottom', + height: 24, + textHeight: 24, + bgap: 10, textAlign: 'left', text, }; diff --git a/src/shared/crud/crud.request.ts b/src/shared/crud/crud.request.ts index 63d6495..de71075 100644 --- a/src/shared/crud/crud.request.ts +++ b/src/shared/crud/crud.request.ts @@ -11,7 +11,7 @@ export function isDesigner(): boolean { return PluginHelper.isDesigner(); } - return false; + return true; } /** @@ -82,7 +82,7 @@ export function testConnection(data: LinkType, cb: Function): void{ }); } else { setTimeout(() => { - cb({errorCode:'500', errorMsg:'createConnectionThread not start!'}); + cb({errorCode: '500', errorMsg: 'createConnectionThread not start!'}); }, 2000); } } @@ -125,6 +125,6 @@ export function info(name: string, cb: Function): void{ cb(res.data); }); } else { - cb({maxActive:50, maxIdle:10, numActive:0, numIdle:0}); + cb({maxActive: 50, maxIdle: 10, numActive: 0, numIdle: 0}); } } diff --git a/src/shared/service/dialog.service.ts b/src/shared/service/dialog.service.ts index 4f087ae..3863982 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} from '@ui/index'; +import {Label, Vertical, Left, Button, Layout, Absolute, CenterAdapt} from '@ui/index'; class Dialog { /** * 提示 @@ -16,15 +16,19 @@ class Dialog { body: { type: 'bi.left', cls: 'comfirm-content', + vgap: 40, + hgap: 20, items: [ { type: 'bi.layout', - cls: 'comfirm-icon', + cls: 'dcm-comfirm-icon', width: 50, height: 50, }, { type: 'bi.label', + textHeight: 50, + lgap: 10, text: message, }, ], @@ -51,13 +55,15 @@ class Dialog { const body = { type: 'bi.center_adapt', cls: 'show-content', + width: 450, + height: 220, items: [ { type: Vertical, items: [ { type: 'bi.layout', - cls: 'loading-icon', + cls: 'dcm-loading-icon', width: 100, height: 100, }, @@ -83,7 +89,7 @@ class Dialog { items: [ { type: 'bi.layout', - cls: 'success-icon', + cls: 'dcm-success-icon', width: 100, height: 100, }, @@ -108,7 +114,7 @@ class Dialog { items: [ { type: 'bi.layout', - cls: 'error-icon', + cls: 'dcm-error-icon', width: 100, height: 100, }, @@ -139,12 +145,14 @@ class Dialog { items: [ { type: Vertical, + vgap: 10, items: [ { type: Layout, - cls: 'error-icon', - width: 100, + cls: 'dcm-error-icon', + width: 270, height: 100, + textAlign: 'center', }, { type: Label, @@ -153,6 +161,7 @@ class Dialog { { type: Left, cls: 'buttons', + hgap: 5, items: [ { type: Button, @@ -172,7 +181,7 @@ class Dialog { text: BI.i18nText('Dec-Dcm_Back'), level: 'ignore', handler() { - that.close(id); + that.remove(id); }, }, { @@ -195,6 +204,7 @@ class Dialog { text: more, invisible: true, height: 73, + width: 400, value: false, ref(ref: any) { More = ref; @@ -202,17 +212,26 @@ class Dialog { }, ], }; - BI.Popovers.create(id, { - type: 'bi.popover', - cls: 'popover-notitle bi-custom-show', - size: 'normal', - width: 450, - height: 220, - body, - ref(ref: any) { - Popover = ref; + + BI.Maskers.create(id, null, { + render: { + type: CenterAdapt, + cls: 'bi-z-index-mask', + items: [{ + el: { + type: 'bi.center_adapt', + cls: 'show-content', + width: 450, + height: 220, + items: [body], + ref(ref: any) { + Popover = ref; + }, + }, + }], }, - }).open(id); + }); + BI.Maskers.show(id); return id; } @@ -220,12 +239,15 @@ class Dialog { public close(id: string): void{ BI.Popovers.close(id); } - public show(body: any, autoClose = 0): string { + public remove(id: string): void{ + BI.Maskers.remove(id); + } + public show1(body: any, autoClose = 0): string { const id = BI.UUID(); BI.Popovers.create(id, { type: 'bi.popover', cls: 'popover-notitle bi-custom-show', - size: 'normal', + size: 'small', width: 450, height: 220, body, @@ -238,6 +260,29 @@ class Dialog { return id; } + + public show(body: any, autoClose = 0): string { + const name = BI.UUID(); + BI.Maskers.create(name, null, { + render: { + type: CenterAdapt, + cls: 'bi-z-index-mask', + items: [{ + el: { + ...body, + }, + }], + }, + }); + BI.Maskers.show(name); + if (autoClose > 0) { + setTimeout(() => { + BI.Maskers.remove(name); + }, autoClose); + } + + return name; + } } export default new Dialog(); diff --git a/src/ui/fineui.ts b/src/ui/fineui.ts index 2b2dcd5..8653849 100644 --- a/src/ui/fineui.ts +++ b/src/ui/fineui.ts @@ -34,9 +34,6 @@ export const TextBubblePopupBarView = 'bi.text_bubble_bar_popup_view'; export const BubbleCombo = 'bi.bubble_combo'; export const SearchEditor = 'bi.search_editor'; export const Img = 'bi.img'; -export const LeftRightVerticalAdapt = 'bi.left_right_vertical_adapt'; -export const VertualGroup = 'bi.virtual_group'; -export const ListView = 'bi.list_view'; // 布局 export const VerticalAdapt = 'bi.vertical_adapt'; @@ -47,3 +44,9 @@ export const Layout = 'bi.layout'; export const Absolute = 'bi.absolute'; export const Vertical = 'bi.vertical'; export const Left = 'bi.left'; +export const Right = 'bi.right'; +export const LeftRightVerticalAdapt = 'bi.left_right_vertical_adapt'; +export const VertualGroup = 'bi.virtual_group'; +export const ListView = 'bi.list_view'; +export const FloatCenter = 'bi.float_center'; +export const HorizotalAdapt = 'bi.horizontal_adapt';