ExternalVendorCode/gns3-web-ui
1
0
Fork 0
mirror of https://github.com/GNS3/gns3-web-ui.git synced 2024-12-19 04:57:51 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Draw menu rewritten

Browse Source
This commit is contained in:
Piotr Pekala 2019-01-09 06:24:04 -08:00
parent 9925b49725
commit 290f8820bc
3 changed files with 76 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
src/app/components/project-map/project-map.component.html
View File

@ -95,39 +95,30 @@
</mat-toolbar>
</div>
<div class="draw-menu" *ngIf="!inReadOnlyMode">
<mat-drawer-container [ngClass]="{shadow: drawTools.visibility}" class="drawer-container">
<mat-drawer #drawer class="drawer">
<div class="drawer-buttons">
<button matTooltip="Add a note" mat-icon-button class="drawer-button" [color]="drawTools.isTextChosen ? 'primary': 'basic'" (click)="addDrawing('text')">
<mat-icon>create</mat-icon>
</button>
<button matTooltip="Draw a rectangle" mat-icon-button class="drawer-button" [color]="drawTools.isRectangleChosen ? 'primary': 'basic'" (click)="addDrawing('rectangle')">
<mat-icon>crop_3_2</mat-icon>
</button>
<button matTooltip="Draw an ellipse" mat-icon-button class="drawer-button" [color]="drawTools.isEllipseChosen ? 'primary': 'basic'" (click)="addDrawing('ellipse')">
<mat-icon>panorama_fish_eye</mat-icon>
</button>
<button matTooltip="Draw line" mat-icon-button class="drawer-button" (click)="addDrawing('line')">
<svg height="40" width="40">
<line [ngClass]="{selected: drawTools.isLineChosen}" x1="30" y1="10" x2="10" y2="30" style="stroke:white;stroke-width:2" />
</svg>
</button>
<div class="drawer-arrow-button-left">
<button mat-icon-button (click)="drawer.toggle(); hideMenu()">
<mat-icon>keyboard_arrow_left</mat-icon>
</button>
</div>
</div>
</mat-drawer>
<mat-drawer-content class="drawer-content">
<div [ngClass]="{shadow: !drawTools.visibility}" class="drawer-arrow-button-right">
<button mat-icon-button (click)="drawer.toggle(); showMenu()">
<mat-icon>keyboard_arrow_right</mat-icon>
</button>
</div>
</mat-drawer-content>
</mat-drawer-container>
<div id="show-menu-wrapper" [ngClass]="{shadowed: !drawTools.visibility}">
<button class="arrow-button" mat-icon-button (click)="showMenu()">
<mat-icon>keyboard_arrow_right</mat-icon>
</button>
</div>
<div id="menu-wrapper" [ngClass]="{extended: drawTools.visibility}">
<button matTooltip="Add a note" mat-icon-button class="menu-button" [color]="drawTools.isTextChosen ? 'primary': 'basic'" (click)="addDrawing('text')">
<mat-icon>create</mat-icon>
</button>
<button matTooltip="Draw a rectangle" mat-icon-button class="menu-button" [color]="drawTools.isRectangleChosen ? 'primary': 'basic'" (click)="addDrawing('rectangle')">
<mat-icon>crop_3_2</mat-icon>
</button>
<button matTooltip="Draw an ellipse" mat-icon-button class="menu-button" [color]="drawTools.isEllipseChosen ? 'primary': 'basic'" (click)="addDrawing('ellipse')">
<mat-icon>panorama_fish_eye</mat-icon>
</button>
<button matTooltip="Draw line" mat-icon-button class="menu-button" (click)="addDrawing('line')">
<svg height="40" width="40">
<line [ngClass]="{selected: drawTools.isLineChosen}" x1="30" y1="10" x2="10" y2="30" style="stroke:white;stroke-width:2" />
</svg>
</button>
<button class="arrow-button" mat-icon-button (click)="hideMenu()">
<mat-icon>keyboard_arrow_left</mat-icon>
</button>
</div>
<app-node-context-menu [project]="project" [server]="server"></app-node-context-menu>

110
src/app/components/project-map/project-map.component.css → src/app/components/project-map/project-map.component.scss
View File

@ -18,17 +18,63 @@ g.node:hover {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.draw-menu {
#show-menu-wrapper {
position: fixed;
background: transparent;
top: 20px;
left: 92px;
width: 296px !important;
height: 72px !important;
background:#263238;
height: 72px;
padding-top: 16px;
.arrow-button {
outline: 0!important;
}
}
.draw-menu button {
outline: none;
.shadowed {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
#menu-wrapper {
position: fixed;
background: transparent;
top: 20px;
left: 92px;
background:#263238;
height: 72px;
padding-top: 16px;
padding-bottom: 16px;
transition: 35s;
width: 0;
overflow: hidden;
transition: 0.15s;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
.menu-button {
outline: 0!important;
transition: 0.5s;
margin-bottom: 16px;
width: 40px;
margin-right: 12px!important;
margin-left: 12px!important;
background: #263238;
padding: 0;
border: none;
background-color: transparent;
}
.arrow-button {
outline: 0!important;
transition: 0.5s;
margin-bottom: 16px;
}
}
.extended {
width: 296px!important;
height: 100%;
overflow: hidden;
}
@-moz-document url-prefix() {
@ -38,64 +84,10 @@ g.node:hover {
}
}
.mat-drawer-content {
height: auto !important;
}
.drawer-container {
height: 72px !important;
background: transparent;
}
.shadow {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.drawer {
width: 296px !important;
height: 72px !important;
background:#263238;
}
.drawer-content {
background: #F0F0F0!important;
}
.drawer-button {
width: 40px;
margin-right: 12px!important;
margin-left: 12px!important;
background: #263238;
padding: 0;
border: none;
outline: none;
background-color: transparent;
}
.drawer-arrow-button-right {
width: 40px;
height: 72px;
padding-top: 16px;
background:#263238;
position: fixed;
}
.drawer-arrow-button-left {
width: 40px;
margin-left: 256px;
background:#263238;
position: fixed;
}
.drawer-buttons {
background:#263238;
padding-top: 16px;
height: 72px;
display: flex;
flex-direction: row;
}
.mat-drawer-backdrop.mat-drawer-shown {
background-color: transparent;
}

2
src/app/components/project-map/project-map.component.ts
View File

@ -35,7 +35,7 @@ import { ToolsService } from '../../services/tools.service';
selector: 'app-project-map',
encapsulation: ViewEncapsulation.None,
templateUrl: './project-map.component.html',
styleUrls: ['./project-map.component.css'],
styleUrls: ['./project-map.component.scss'],
})
export class ProjectMapComponent implements OnInit, OnDestroy {
public nodes: Node[] = [];