From 75a9f050d7b92996b464488001829042cb5051a0 Mon Sep 17 00:00:00 2001 From: YuanHu Date: Tue, 27 Mar 2018 15:57:07 +0800 Subject: Modify css files Modify css files Issue-ID: SDC-1130,SDC-1131 Change-Id: I5da79bb12b7f9e52a4317bae190f873d2949b84f Signed-off-by: YuanHu --- .../editable-property.component.css | 51 ++- .../src/app/components/menus/menus.component.css | 13 +- .../app/components/menus/menus.component.spec.ts | 36 +- .../src/app/components/node/node.component.css | 5 +- .../components/parameter/parameter.component.css | 40 ++- .../components/property/properties.component.css | 13 +- .../node-parameters/node-parameters.component.css | 0 .../rest-parameters/rest-parameters.component.css | 11 + .../service-task/service-task.component.css | 11 + .../property/start-event/start-event.component.css | 44 +++ .../app/components/toolbar/toolbar.component.css | 31 +- .../app/paletx/plx-datepicker/picker.component.css | 366 +++++++++++++++++++++ .../plx-datepicker/pickerrange.component.css | 18 + 13 files changed, 570 insertions(+), 69 deletions(-) create mode 100644 sdc-workflow-designer-ui/src/app/components/property/rest-task/node-parameters/node-parameters.component.css create mode 100644 sdc-workflow-designer-ui/src/app/components/property/rest-task/rest-parameters/rest-parameters.component.css create mode 100644 sdc-workflow-designer-ui/src/app/components/property/service-task/service-task.component.css create mode 100644 sdc-workflow-designer-ui/src/app/components/property/start-event/start-event.component.css create mode 100644 sdc-workflow-designer-ui/src/app/paletx/plx-datepicker/picker.component.css create mode 100644 sdc-workflow-designer-ui/src/app/paletx/plx-datepicker/pickerrange.component.css diff --git a/sdc-workflow-designer-ui/src/app/components/editable-property/editable-property.component.css b/sdc-workflow-designer-ui/src/app/components/editable-property/editable-property.component.css index 257a07df..35d21fce 100644 --- a/sdc-workflow-designer-ui/src/app/components/editable-property/editable-property.component.css +++ b/sdc-workflow-designer-ui/src/app/components/editable-property/editable-property.component.css @@ -10,17 +10,52 @@ * ZTE - initial API and implementation and/or initial documentation */ -.edit{ - font-size: 24px; +.editable-content { + display: inline-block; width: 300px; - height: 30px; - border: 1px solid #fff; + visibility: visible; +} + +.editable-main { + border: 1px solid transparent; + border-radius: 3px; + cursor: pointer; + font-size: 24px; + min-height: 34px; + padding: 2px 20px 2px 2px; + position: relative; + word-wrap: break-word; +} + +.editable-main:hover { + border: 1px solid #ddd; +} + +.editable-main span { + background-color: #f0f0f0; + border-left: 1px solid #ddd; + display: none; + padding: 0 4px 0 4px; + height: 100%; + position: absolute; + right: 0; + top: 0; + -moz-border-radius-topright: 3px; + -moz-border-radius-bottomright: 3px; + -webkit-border-top-right-radius: 3px; + -webkit-border-bottom-right-radius: 3px; +} + +.editable-main span i { + font-size: 16px; + color: #707070; } -.edit:hover{ - border-color: #80bdff; +.editable-main:hover span { + display: inline; } -.edit:focus{ - border-color: #80bdff; +.editable-field { + display: inline-block; + width: 100%; } \ No newline at end of file diff --git a/sdc-workflow-designer-ui/src/app/components/menus/menus.component.css b/sdc-workflow-designer-ui/src/app/components/menus/menus.component.css index 6ba4133b..ac50221e 100644 --- a/sdc-workflow-designer-ui/src/app/components/menus/menus.component.css +++ b/sdc-workflow-designer-ui/src/app/components/menus/menus.component.css @@ -10,14 +10,17 @@ * ZTE - initial API and implementation and/or initial documentation */ -.btn-right{ - float: right; +.wf-name{ + float: left; + font-size: 20px; + font-weight: bold; } -.btn-left{ - float: left; +.btn-right{ + float: right; + margin-right: 5px; } button i{ padding-right: 3px; -} +} \ No newline at end of file diff --git a/sdc-workflow-designer-ui/src/app/components/menus/menus.component.spec.ts b/sdc-workflow-designer-ui/src/app/components/menus/menus.component.spec.ts index b80edce7..6ac02fde 100644 --- a/sdc-workflow-designer-ui/src/app/components/menus/menus.component.spec.ts +++ b/sdc-workflow-designer-ui/src/app/components/menus/menus.component.spec.ts @@ -11,26 +11,26 @@ */ import { async, ComponentFixture, TestBed } from '@angular/core/testing'; -import { MenuComponent } from './menu.component'; +import { MenusComponent } from './menus.component'; -describe('MenuComponent', () => { - let component: MenuComponent; - let fixture: ComponentFixture; +describe('MenusComponent', () => { + let component: MenusComponent; + let fixture: ComponentFixture; - beforeEach(async(() => { - TestBed.configureTestingModule({ - declarations: [MenuComponent] - }) - .compileComponents(); - })); + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ MenusComponent ] + }) + .compileComponents(); + })); - beforeEach(() => { - fixture = TestBed.createComponent(MenuComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); + beforeEach(() => { + fixture = TestBed.createComponent(MenusComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); - it('should be created', () => { - expect(component).toBeTruthy(); - }); + it('should be created', () => { + expect(component).toBeTruthy(); + }); }); diff --git a/sdc-workflow-designer-ui/src/app/components/node/node.component.css b/sdc-workflow-designer-ui/src/app/components/node/node.component.css index 85cb0422..f1fead94 100644 --- a/sdc-workflow-designer-ui/src/app/components/node/node.component.css +++ b/sdc-workflow-designer-ui/src/app/components/node/node.component.css @@ -18,6 +18,7 @@ } .node-icon{ + position: relative; border-radius: 4px; } @@ -54,12 +55,12 @@ .anchor-left { left: -6px; - top: calc(50%); + top: calc(50% - 6px); } .anchor-right { right: -6px; - top: calc(50%); + top: calc(50% - 6px); } .anchor-top { diff --git a/sdc-workflow-designer-ui/src/app/components/parameter/parameter.component.css b/sdc-workflow-designer-ui/src/app/components/parameter/parameter.component.css index 9cf5d60f..4002997c 100644 --- a/sdc-workflow-designer-ui/src/app/components/parameter/parameter.component.css +++ b/sdc-workflow-designer-ui/src/app/components/parameter/parameter.component.css @@ -9,30 +9,42 @@ * Contributors: * ZTE - initial API and implementation and/or initial documentation */ -.form-control-label{ - margin-bottom: 0; - width: 100px; - vertical-align: middle; + +.parameter{ + margin-bottom: 1rem; +} + +.parameter-section{ + display: inline; + margin-right: 5px; } .parameter-item{ display: inline; - margin-left: 5px; - vertical-align: middle; } -.form-control-required{ +.parameter-required{ color: red; - height: 30px; - line-height: 30px; } -.form-control-input{ - width: 120px; - vertical-align: middle; +.parameter-label{ + width: 100px; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + vertical-align: bottom; + /* display: inline-table; */ } -.form-control-value{ +.parameter-value{ width: 160px; - display: inline-block; + vertical-align: baseline; +} + +.plx-input{ + vertical-align: baseline; +} + +.plx-btn{ + vertical-align: baseline; } diff --git a/sdc-workflow-designer-ui/src/app/components/property/properties.component.css b/sdc-workflow-designer-ui/src/app/components/property/properties.component.css index 6c8c67d3..5189f551 100644 --- a/sdc-workflow-designer-ui/src/app/components/property/properties.component.css +++ b/sdc-workflow-designer-ui/src/app/components/property/properties.component.css @@ -30,14 +30,7 @@ overflow: auto; } -.edit { - display: none; -} - -.editing .view { - display: none; -} - -.editing .edit { - display: block; +.plx-btn{ + float: right; + margin-right: 0; } diff --git a/sdc-workflow-designer-ui/src/app/components/property/rest-task/node-parameters/node-parameters.component.css b/sdc-workflow-designer-ui/src/app/components/property/rest-task/node-parameters/node-parameters.component.css new file mode 100644 index 00000000..e69de29b diff --git a/sdc-workflow-designer-ui/src/app/components/property/rest-task/rest-parameters/rest-parameters.component.css b/sdc-workflow-designer-ui/src/app/components/property/rest-task/rest-parameters/rest-parameters.component.css new file mode 100644 index 00000000..a2dc6ff6 --- /dev/null +++ b/sdc-workflow-designer-ui/src/app/components/property/rest-task/rest-parameters/rest-parameters.component.css @@ -0,0 +1,11 @@ +/******************************************************************************* + * Copyright (c) 2017 ZTE Corporation. + * All rights reserved. This program and the accompanying materials + * are made available under the terms of the Eclipse Public License v1.0 + * and the Apache License 2.0 which both accompany this distribution, + * and are available at http://www.eclipse.org/legal/epl-v10.html + * and http://www.apache.org/licenses/LICENSE-2.0 + * + * Contributors: + * ZTE - initial API and implementation and/or initial documentation + *******************************************************************************/ \ No newline at end of file diff --git a/sdc-workflow-designer-ui/src/app/components/property/service-task/service-task.component.css b/sdc-workflow-designer-ui/src/app/components/property/service-task/service-task.component.css new file mode 100644 index 00000000..670c050a --- /dev/null +++ b/sdc-workflow-designer-ui/src/app/components/property/service-task/service-task.component.css @@ -0,0 +1,11 @@ +/** + * Copyright (c) 2017 ZTE Corporation. + * All rights reserved. This program and the accompanying materials + * are made available under the terms of the Eclipse Public License v1.0 + * and the Apache License 2.0 which both accompany this distribution, + * and are available at http://www.eclipse.org/legal/epl-v10.html + * and http://www.apache.org/licenses/LICENSE-2.0 + * + * Contributors: + * ZTE - initial API and implementation and/or initial documentation + */ \ No newline at end of file diff --git a/sdc-workflow-designer-ui/src/app/components/property/start-event/start-event.component.css b/sdc-workflow-designer-ui/src/app/components/property/start-event/start-event.component.css new file mode 100644 index 00000000..ac88051d --- /dev/null +++ b/sdc-workflow-designer-ui/src/app/components/property/start-event/start-event.component.css @@ -0,0 +1,44 @@ +/** + * Copyright (c) 2017 ZTE Corporation. + * All rights reserved. This program and the accompanying materials + * are made available under the terms of the Eclipse Public License v1.0 + * and the Apache License 2.0 which both accompany this distribution, + * and are available at http://www.eclipse.org/legal/epl-v10.html + * and http://www.apache.org/licenses/LICENSE-2.0 + * + * Contributors: + * ZTE - initial API and implementation and/or initial documentation + */ +table{ + border: 1px solid #eceeef; + width: 100%; +} + +.table-body{ + background-color: #fff; +} + +th{ + background-color: #f5f5f5; +} + +td input{ + width: 100%; +} + +td span{ + color: #ff5b55; +} + +.delete-icon{ + color: #ff5b55; + font-size: 16px; +} + +.delete-icon:hover{ + cursor: pointer; +} + +.plx-btn{ + margin-top: 10px; +} \ No newline at end of file diff --git a/sdc-workflow-designer-ui/src/app/components/toolbar/toolbar.component.css b/sdc-workflow-designer-ui/src/app/components/toolbar/toolbar.component.css index 4da64d16..6b0d5436 100644 --- a/sdc-workflow-designer-ui/src/app/components/toolbar/toolbar.component.css +++ b/sdc-workflow-designer-ui/src/app/components/toolbar/toolbar.component.css @@ -9,22 +9,22 @@ * Contributors: * ZTE - initial API and implementation and/or initial documentation */ -.toolbar-head{ - color:#404040; +.toolbar-head { + color: #404040; font-size: 14px; } -.toolbar-head:hover{ +.toolbar-head:hover { cursor: pointer; } -.fold-icon{ +.fold-icon { width: 15px; font-size: 8px; color: #00abff; } -.item{ +.item { width: 50px; height: 50px; text-align: center; @@ -33,30 +33,37 @@ margin-bottom: 10px; } -.item:hover{ +.item:hover { cursor: pointer; } -.item svg{ - width:24px; - height:24px; +.item svg { + width: 24px; + height: 24px; margin: 4px 13px; display: block; /* fill: #A9B2BA; */ fill: #00ABFF; } -.item span{ +.item img { + width: 24px; + height: 24px; + margin: 4px 13px; + display: block; +} + +.item span { font-size: 12px; color: #595959; display: block; } -.getway{ +.getway { padding-top: 5px; } -.getway div{ +.getway div { width: 30px !important; height: 30px !important; } \ No newline at end of file diff --git a/sdc-workflow-designer-ui/src/app/paletx/plx-datepicker/picker.component.css b/sdc-workflow-designer-ui/src/app/paletx/plx-datepicker/picker.component.css new file mode 100644 index 00000000..02983835 --- /dev/null +++ b/sdc-workflow-designer-ui/src/app/paletx/plx-datepicker/picker.component.css @@ -0,0 +1,366 @@ +.owl-dateTime-input { + width: 100%; + padding-right: 1.5em; } + +.owl-dateTime-cancel { + position: absolute; + top: 50%; + right: .1em; + border-radius: 50%; + transform: translateY(-50%); + cursor: pointer; + color: inherit; } + +.owl-dateTime-inputWrapper { + position: relative; } + +.owl-dateTime-customTemp { + display: inline-block; + position: relative; } + +.owl-dateTime-dialog { + position: absolute; } + +.owl-dateTime-dialogHeader { + display: flex; + justify-content: center; + align-items: center; + width: 100%; } + +.owl-calendar-wrapper, +.owl-timer-wrapper { + position: relative; + width: 100%; + padding: .2em .5em; } + +.owl-calendar-control { + display: flex; + justify-content: space-around; + width: 100%; + height: 2em; } + .owl-calendar-control .owl-calendar-controlNav { + position: relative; + cursor: pointer; + width: 12.5%; } + .owl-calendar-control .owl-calendar-controlContent { + display: flex; + justify-content: center; + align-items: center; + width: 75%; + height: 100%; } + +.owl-calendar { + position: relative; + min-height: 13.7em; } + .owl-calendar table { + width: 100%; + border-collapse: collapse; } + .owl-calendar tbody td { + position: relative; + text-align: center; } + .owl-calendar tbody td a { + display: block; + width: 100%; + height: 100%; + text-decoration: none; + color: inherit; + font-size:12px; + } + .owl-calendar .owl-calendar-yearArrow { + position: absolute; + top: 50%; + width: 1.5em; + height: 1.5em; + transform: translateY(-50%); + cursor: pointer; } + .owl-calendar .owl-calendar-yearArrow.left { + left: -.5em; } + .owl-calendar .owl-calendar-yearArrow.right { + right: -.5em; } + +.owl-timer-wrapper { + position: relative; + display: flex; + justify-content: center; } + .owl-timer-wrapper .owl-timer { + position: relative; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + width: 25%; + height: 100%; } + .owl-timer-wrapper .owl-timer-control { + display: flex; + justify-content: center; + align-items: center; + height: 30%; + width: 100%; + cursor: pointer; } + .owl-timer-wrapper .owl-timer-control .icon:before { + margin: 0; } + .owl-timer-wrapper .owl-timer-input { + width: 60%; + height: 100%; } + +/*# sourceMappingURL=picker.component.css.map */ +.font-face { + font-weight: normal; + font-style: normal; } +[class^="icon-"]:before, [class*=" icon-"]:before { + font-family: "fontello"; + font-style: normal; + font-weight: normal; + speak: none; + display: inline-block; + text-decoration: inherit; + width: 1em; + margin-right: .2em; + text-align: center; + /* opacity: .8; */ + /* For safety - reset parent styles, that can break glyph codes*/ + font-variant: normal; + text-transform: none; + /* fix buttons height, for twitter bootstrap */ + line-height: 1em; + /* Animation center compensation - margins should be symmetric */ + /* remove if not needed */ + margin-left: .2em; + /* you can be more comfortable with increased icons size */ + /* font-size: 120%; */ + /* Font smoothing. That was taken from TWBS */ + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + /* Uncomment for 3D effect */ + /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */ } + +.icon-cancel:before { + content: '\e802'; } + +/* '' */ +.icon-up-open:before { + content: '\e805'; } + +/* '' */ +.icon-down-open:before { + content: '\e80b'; } + +/* '' */ +.icon-left-open:before { + content: '\e817'; } + +/* '' */ +.icon-right-open:before { + content: '\e818'; } + +/* '' */ +.owl-widget, +.owl-widget * { + box-sizing: border-box; } + +.owl-widget { + font-size: 1em; } + +.owl-state-focus { + box-shadow: 0px 0px 5px #1f89ce; } + +.owl-corner-all { + border-radius: 3px; } + +.owl-corner-top { + border-top-left-radius: 3px; + border-top-right-radius: 3px; } + +.owl-state-default { + border: 1px solid #d6d6d6; + background: #ffffff; + color: #555555; } + +.owl-inputtext { + margin: 0; + outline: medium none; + padding: .25em; + background: #ffffff; + color: #222222; + transition: .2s; } + .owl-inputtext:focus, .owl-inputtext.owl-state-focus { + box-shadow: 0 0 5px #1f89ce; } + +.owl-dateTime { + display: inline-block; + position: relative; + width: 100%; } + .owl-dateTime.owl-dateTime-inline { + width: auto; } + .owl-dateTime.owl-dateTime-inline .owl-dateTime-dialog { + position: relative; + z-index: auto; } + +.owl-dateTime-dialog { + width: 300px; + user-select: none; + z-index: 99999; } + +.owl-dateTime-dialogHeader { + height: 2.5em; + padding: .25em; + background-color: rgba(0, 0, 0, 0.1); + overflow-y: auto; } + +.owl-calendar-control .owl-calendar-controlNav .nav-prev, +.owl-calendar-control .owl-calendar-controlNav .nav-next { + position: absolute; + top: 50%; + right: auto; + bottom: auto; + left: 50%; + transform: translate(-50%, -50%); } + .owl-calendar-control .owl-calendar-controlNav .nav-prev:before, + .owl-calendar-control .owl-calendar-controlNav .nav-next:before { + content: " "; + border-top: .5em solid transparent; + border-bottom: .5em solid transparent; + border-right: 0.75em solid #000000; + width: 0; + height: 0; + display: block; + margin: 0 auto; } +.owl-calendar-control .owl-calendar-controlNav .nav-next:before { + border-right: 0; + border-left: 0.75em solid #000000; } +.owl-calendar-control .owl-calendar-controlContent .month-control, +.owl-calendar-control .owl-calendar-controlContent .year-control { + display: inline-block; + cursor: pointer; + transition: transform 200ms ease; } + .owl-calendar-control .owl-calendar-controlContent .month-control:hover, + .owl-calendar-control .owl-calendar-controlContent .year-control:hover { + transform: scale(1.2); } +.owl-calendar-control .owl-calendar-controlContent .month-control { + font-size: 1em; + margin-right: .8rem; + font-weight: 700; } +.owl-calendar-control .owl-calendar-controlContent .year-control { + font-size: .8em; + font-style: italic; + color: #999; } + + +.owl-calendar tbody td .owl-calendar-selected { + background-color: #00abff; + color: #FFFFFF; } +.owl-calendar tbody td.owl-calendar-invalid { + color: #acacac; } +.owl-calendar tbody td.owl-calendar-outFocus { + color: #dddddd; } +.owl-calendar tbody td.owl-calendar-hidden { + visibility: hidden; } +.owl-calendar tbody td:not(.owl-calendar-selected):not(.owl-calendar-invalid):hover { + background-color: #bae4ff; + color: #000000; } + +.owl-years td.owl-year, +.owl-years td.owl-month, +.owl-months td.owl-year, +.owl-months td.owl-month { + font-size: 1.2em; + height: 2.5em; + width: 33.33%; + line-height: 2.5em; } + +.owl-weekdays th.owl-weekday { + height: 1em; + line-height: 2em; + text-align: center; + font-size: .7em; + color: #999; } + +.owl-days td.owl-day { + height: 2em; + width: calc(100% / 7); + line-height: 2em; } + .owl-days td.owl-day.owl-day-today:before { + content: ''; + display: block; + position: absolute; + right: 2px; + top: 2px; + border-top: 0.5em solid #21a7ff; + border-left: .5em solid transparent; + } + +.owl-timer-wrapper { + height: 5.4em; + background-color: rgba(0, 0, 0, 0.1); } + .owl-timer-wrapper .owl-timer-text { + display: flex; + justify-content: center; + align-items: center; + width: 100%; + height: 40%; + font-size: 1.5em; } + .owl-timer-wrapper .owl-meridian-btn { + font-size: .8em; + color: #00abff; + background-image: none; + background-color: transparent; + border-color: #00abff; } + .owl-timer-wrapper .owl-meridian-btn:hover { + color: #FFFFFF; + background-color: #00abff; + border-color: #00abff; } + +.owl-timer-divider { + display: inline-block; + align-self: flex-end; + position: absolute; + width: .6em; + height: 100%; + left: -.3em; } + .owl-timer-divider .owl-timer-dot { + display: block; + width: .3em; + height: .3em; + position: absolute; + left: 50%; + border-radius: 50%; + transform: translateX(-50%); } + .owl-timer-divider .owl-timer-dot.dot-top { + top: 38%; } + .owl-timer-divider .owl-timer-dot.dot-bottom { + bottom: 38%; } +.owl-icon{ + position: absolute; + top: 50%; + right: .1em; + border-radius: 50%; + -webkit-transform: translateY(-50%); + transform: translateY(-50%); + cursor: pointer; + color: #9a9a9a; +} +.plx-btn{color: #00abff; +min-width: 80px; +letter-spacing: 1px; +padding: 0px 16px; +height: 32px; +font-size: 12px; +cursor: pointer; +text-align: center; +white-space: nowrap; +margin-right: 10px; +vertical-align: middle; +border: 1px solid #d9d9d9; +background-color: #fff; +border-radius: 3px; +line-height: 30px; +} +.plx-btn-xs{ + height: 24px; + padding: 0px 12px; + min-width: 60px; + margin-right: 5px; + line-height: 22px; +} +/*# sourceMappingURL=picker.css.map */ + diff --git a/sdc-workflow-designer-ui/src/app/paletx/plx-datepicker/pickerrange.component.css b/sdc-workflow-designer-ui/src/app/paletx/plx-datepicker/pickerrange.component.css new file mode 100644 index 00000000..2fb5b2b4 --- /dev/null +++ b/sdc-workflow-designer-ui/src/app/paletx/plx-datepicker/pickerrange.component.css @@ -0,0 +1,18 @@ +.datepickboxleft +{ + width:45%; + margin-right: 3%; + float: left; +} +.datepickboxright +{ + width:45%; + margin-left: 3%; + float: left; +} +.datepickboxto{ + width:4%; + float: left; + margin-top: 6px; + text-align: center; +} \ No newline at end of file -- cgit 1.2.3-korg