mirror of
https://github.com/GNS3/gns3-web-ui.git
synced 2025-06-11 03:31:37 +00:00
Draw menu rewritten
This commit is contained in:
Piotr Pekala
parent
9925b49725
commit
290f8820bc
@ -95,39 +95,30 @@
|
|||||||
</mat-toolbar>
|
</mat-toolbar>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="draw-menu" *ngIf="!inReadOnlyMode">
|
<div id="show-menu-wrapper" [ngClass]="{shadowed: !drawTools.visibility}">
|
||||||
<mat-drawer-container [ngClass]="{shadow: drawTools.visibility}" class="drawer-container">
|
<button class="arrow-button" mat-icon-button (click)="showMenu()">
|
||||||
<mat-drawer #drawer class="drawer">
|
<mat-icon>keyboard_arrow_right</mat-icon>
|
||||||
<div class="drawer-buttons">
|
</button>
|
||||||
<button matTooltip="Add a note" mat-icon-button class="drawer-button" [color]="drawTools.isTextChosen ? 'primary': 'basic'" (click)="addDrawing('text')">
|
</div>
|
||||||
<mat-icon>create</mat-icon>
|
|
||||||
</button>
|
<div id="menu-wrapper" [ngClass]="{extended: drawTools.visibility}">
|
||||||
<button matTooltip="Draw a rectangle" mat-icon-button class="drawer-button" [color]="drawTools.isRectangleChosen ? 'primary': 'basic'" (click)="addDrawing('rectangle')">
|
<button matTooltip="Add a note" mat-icon-button class="menu-button" [color]="drawTools.isTextChosen ? 'primary': 'basic'" (click)="addDrawing('text')">
|
||||||
<mat-icon>crop_3_2</mat-icon>
|
<mat-icon>create</mat-icon>
|
||||||
</button>
|
</button>
|
||||||
<button matTooltip="Draw an ellipse" mat-icon-button class="drawer-button" [color]="drawTools.isEllipseChosen ? 'primary': 'basic'" (click)="addDrawing('ellipse')">
|
<button matTooltip="Draw a rectangle" mat-icon-button class="menu-button" [color]="drawTools.isRectangleChosen ? 'primary': 'basic'" (click)="addDrawing('rectangle')">
|
||||||
<mat-icon>panorama_fish_eye</mat-icon>
|
<mat-icon>crop_3_2</mat-icon>
|
||||||
</button>
|
</button>
|
||||||
<button matTooltip="Draw line" mat-icon-button class="drawer-button" (click)="addDrawing('line')">
|
<button matTooltip="Draw an ellipse" mat-icon-button class="menu-button" [color]="drawTools.isEllipseChosen ? 'primary': 'basic'" (click)="addDrawing('ellipse')">
|
||||||
<svg height="40" width="40">
|
<mat-icon>panorama_fish_eye</mat-icon>
|
||||||
<line [ngClass]="{selected: drawTools.isLineChosen}" x1="30" y1="10" x2="10" y2="30" style="stroke:white;stroke-width:2" />
|
</button>
|
||||||
</svg>
|
<button matTooltip="Draw line" mat-icon-button class="menu-button" (click)="addDrawing('line')">
|
||||||
</button>
|
<svg height="40" width="40">
|
||||||
<div class="drawer-arrow-button-left">
|
<line [ngClass]="{selected: drawTools.isLineChosen}" x1="30" y1="10" x2="10" y2="30" style="stroke:white;stroke-width:2" />
|
||||||
<button mat-icon-button (click)="drawer.toggle(); hideMenu()">
|
</svg>
|
||||||
<mat-icon>keyboard_arrow_left</mat-icon>
|
</button>
|
||||||
</button>
|
<button class="arrow-button" mat-icon-button (click)="hideMenu()">
|
||||||
</div>
|
<mat-icon>keyboard_arrow_left</mat-icon>
|
||||||
</div>
|
</button>
|
||||||
</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>
|
</div>
|
||||||
|
|
||||||
<app-node-context-menu [project]="project" [server]="server"></app-node-context-menu>
|
<app-node-context-menu [project]="project" [server]="server"></app-node-context-menu>
|
||||||
|
|||||||
@ -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);
|
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;
|
position: fixed;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
top: 20px;
|
top: 20px;
|
||||||
left: 92px;
|
left: 92px;
|
||||||
width: 296px !important;
|
background:#263238;
|
||||||
height: 72px !important;
|
height: 72px;
|
||||||
|
padding-top: 16px;
|
||||||
|
|
||||||
|
.arrow-button {
|
||||||
|
outline: 0!important;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.draw-menu button {
|
.shadowed {
|
||||||
outline: none;
|
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() {
|
@-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 {
|
.shadow {
|
||||||
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
|
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 {
|
.mat-drawer-backdrop.mat-drawer-shown {
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
}
|
}
|
||||||
@ -35,7 +35,7 @@ import { ToolsService } from '../../services/tools.service';
|
|||||||
selector: 'app-project-map',
|
selector: 'app-project-map',
|
||||||
encapsulation: ViewEncapsulation.None,
|
encapsulation: ViewEncapsulation.None,
|
||||||
templateUrl: './project-map.component.html',
|
templateUrl: './project-map.component.html',
|
||||||
styleUrls: ['./project-map.component.css'],
|
styleUrls: ['./project-map.component.scss'],
|
||||||
})
|
})
|
||||||
export class ProjectMapComponent implements OnInit, OnDestroy {
|
export class ProjectMapComponent implements OnInit, OnDestroy {
|
||||||
public nodes: Node[] = [];
|
public nodes: Node[] = [];
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user