diff options
author | ys9693 <ys9693@att.com> | 2020-01-19 13:50:02 +0200 |
---|---|---|
committer | Ofir Sonsino <ofir.sonsino@intl.att.com> | 2020-01-22 12:33:31 +0000 |
commit | 16a9fce0e104a38371a9e5a567ec611ae3fc7f33 (patch) | |
tree | 03a2aff3060ddb5bc26a90115805a04becbaffc9 /catalog-ui/src/app/ng2/components/ui/panel-wrapper | |
parent | aa83a2da4f911c3ac89318b8e9e8403b072942e1 (diff) |
Catalog alignment
Issue-ID: SDC-2724
Signed-off-by: ys9693 <ys9693@att.com>
Change-Id: I52b4aacb58cbd432ca0e1ff7ff1f7dd52099c6fe
Diffstat (limited to 'catalog-ui/src/app/ng2/components/ui/panel-wrapper')
3 files changed, 91 insertions, 0 deletions
diff --git a/catalog-ui/src/app/ng2/components/ui/panel-wrapper/panel-wrapper.component.html b/catalog-ui/src/app/ng2/components/ui/panel-wrapper/panel-wrapper.component.html new file mode 100644 index 0000000000..277702e336 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/panel-wrapper/panel-wrapper.component.html @@ -0,0 +1,11 @@ +<div class="w-sdc-designer-sidebar-toggle" [class.active]="(withSidebar$ | async)" (click)="toggleSidebarDisplay()"> + <div class="w-sdc-designer-sidebar-toggle-icon sprite-new pointer menu-open-left"></div> +</div> + +<div class="w-sdc-designer-sidebar"> + <ng-content></ng-content> +</div> + + + + diff --git a/catalog-ui/src/app/ng2/components/ui/panel-wrapper/panel-wrapper.component.less b/catalog-ui/src/app/ng2/components/ui/panel-wrapper/panel-wrapper.component.less new file mode 100644 index 0000000000..cacb85d6b1 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/panel-wrapper/panel-wrapper.component.less @@ -0,0 +1,55 @@ +@import '../../../../../assets/styles/variables'; + +.w-sdc-designer-sidebar { + background-color:@main_color_p ; + font-family: @font-opensans-regular; + font-size: 13px; + color: #191919; + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + bottom: 0; + position: fixed; + right: -302px; + width: 302px; + top: 103px; + transition: right 0.2s; + z-index: 1010; + box-shadow: -7px -3px 6px -8px @main_color_n; +} + +.w-sdc-designer-sidebar-toggle { + background-color: @main_color_p; + border-left: 1px solid @main_color_o; + border-bottom: 1px solid @main_color_o; + height: 21px; + position: absolute; + right: 0; + top: 53px; + width: 17px; + transition: right 0.2s; + z-index: 1005; + box-shadow: -1px 1px 3px 0 @main_color_n; + cursor: pointer; + + &.active { + right: 302px; + .w-sdc-designer-sidebar-toggle-icon{ + transform: rotate(180deg); + } + } +} + +.w-sdc-designer-sidebar-toggle-icon { + margin-left: 6px; + margin-top: 6px; +} + +.w-sdc-designer-sidebar-toggle.active + .w-sdc-designer-sidebar { + right: 0; + display: flex; + flex-direction: column; +}
\ No newline at end of file diff --git a/catalog-ui/src/app/ng2/components/ui/panel-wrapper/panel-wrapper.component.ts b/catalog-ui/src/app/ng2/components/ui/panel-wrapper/panel-wrapper.component.ts new file mode 100644 index 0000000000..e9c4a7d354 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/panel-wrapper/panel-wrapper.component.ts @@ -0,0 +1,25 @@ +import {Component} from "@angular/core"; +import {Select, Store} from "@ngxs/store"; +import {Subscription} from "rxjs/Subscription"; +import {GraphState} from "../../../pages/composition/common/store/graph.state"; +import {OnSidebarOpenOrCloseAction} from "../../../pages/composition/common/store/graph.actions"; + +@Component({ + selector: 'panel-wrapper-component', + templateUrl: './panel-wrapper.component.html', + styleUrls: ['./panel-wrapper.component.less'] +}) +export class PanelWrapperComponent { + @Select(GraphState.withSidebar) withSidebar$: boolean; + + tabs: Array<any>; + subscription: Subscription; + + constructor(public store: Store) { + } + + private toggleSidebarDisplay = () => { + // this.withSidebar = !this.withSidebar; + this.store.dispatch(new OnSidebarOpenOrCloseAction()); + } +} |