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

Merge pull request #1048 from mother/ui

Browse Source 
GNS3 web-ui - UI Updates
This commit is contained in:
piotrpekala7 2021-04-08 10:15:57 +02:00 committed by GitHub
commit 330d004e3b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 499 additions and 425 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
src/app/components/project-map/nodes-menu/nodes-menu.component.html
View File

@ -1,45 +1,43 @@
<button
<div class="menu-button-group">
<button
matTooltip="Console connect to all nodes"
matTooltipClass="custom-tooltip"
mat-icon-button
(click)="startConsoleForAllNodes()"
class="menu-button"
>
class="menu-button">
<mat-icon>web_asset</mat-icon>
</button>
<button
</button>
<button
matTooltip="Start/Resume all nodes"
matTooltipClass="custom-tooltip"
mat-icon-button
(click)="startNodes()"
class="menu-button"
>
class="menu-button">
<mat-icon>play_arrow</mat-icon>
</button>
<button
</button>
<button
matTooltip="Suspend all nodes"
matTooltipClass="custom-tooltip"
mat-icon-button
(click)="suspendNodes()"
class="menu-button"
>
class="menu-button">
<mat-icon>pause</mat-icon>
</button>
<button
</button>
<button
matTooltip="Stop all nodes"
matTooltipClass="custom-tooltip"
mat-icon-button
(click)="stopNodes()"
class="menu-button"
>
class="menu-button">
<mat-icon>stop</mat-icon>
</button>
<button
</button>
<button
matTooltip="Reload all nodes"
matTooltipClass="custom-tooltip"
mat-icon-button
(click)="reloadNodes()"
class="menu-button"
>
class="menu-button">
<mat-icon>replay</mat-icon>
</button>
</button>
</div>

11
src/app/components/project-map/nodes-menu/nodes-menu.component.scss
View File

@ -1,14 +1,5 @@
.menu-button {
outline: 0 !important;
transition: 0.5s;
margin-bottom: 16px;
width: 40px;
margin-right: 12px !important;
margin-left: 12px !important;
background: transparent;
padding: 0;
border: none;
background-color: transparent;
margin: 0px 5px !important;
}
.marked {

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

@ -36,7 +36,8 @@
(click)="addDrawing('ellipse')">
<mat-icon [ngClass]="getCssClassForIcon('ellipse')">panorama_fish_eye</mat-icon>
</button>
<button *ngIf="!isLightThemeEnabled"
<button
*ngIf="!isLightThemeEnabled"
matTooltip="Draw a line"
matTooltipClass="custom-tooltip"
mat-icon-button class="menu-button"
@ -51,7 +52,8 @@
style="stroke:white;stroke-width:2"/>
</svg>
</button>
<button *ngIf="isLightThemeEnabled"
<button
*ngIf="isLightThemeEnabled"
matTooltip="Draw a line"
matTooltipClass="custom-tooltip"
mat-icon-button class="menu-button"

21
src/app/components/project-map/project-map-menu/project-map-menu.component.scss
View File

@ -1,24 +1,3 @@
.menu-button {
outline: 0 !important;
transition: 0.5s;
margin-bottom: 16px;
width: 40px;
margin-right: 12px !important;
margin-left: 12px !important;
background: transparent;
padding: 0;
border: none;
background-color: transparent;
}
mat-divider.divider {
height: 40px;
margin-left: 1px;
margin-right: 7px;
width: 10px;
color: gray;
}
.non-visible {
display: none;
}

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

@ -1,47 +1,39 @@
<div *ngIf="project" class="project-map">
<app-d3-map
*ngIf="!settings.angular_map"
[server]="server"
[project]="project"
[symbols]="symbols"
[nodes]="nodes"
[links]="links"
[drawings]="drawings"
[width]="project.scene_width"
[height]="project.scene_height"
[show-interface-labels]="isInterfaceLabelVisible"
[readonly]="inReadOnlyMode"
(nodeDragged)="onNodeDragged($event)"
(drawingDragged)="onDrawingDragged($event)"
(onLinkCreated)="onLinkCreated($event)"
(onDrawingResized)="onDrawingResized($event)"
></app-d3-map>
<div *ngIf="project" [ngClass]="{lightTheme: isLightThemeEnabled}" class="project-map">
<app-d3-map *ngIf="!settings.angular_map" [server]="server" [project]="project" [symbols]="symbols" [nodes]="nodes" [links]="links" [drawings]="drawings" [width]="project.scene_width" [height]="project.scene_height"
[show-interface-labels]="isInterfaceLabelVisible" [readonly]="inReadOnlyMode" (nodeDragged)="onNodeDragged($event)" (drawingDragged)="onDrawingDragged($event)" (onLinkCreated)="onLinkCreated($event)"
(onDrawingResized)="onDrawingResized($event)">
</app-d3-map>
<app-experimental-map
*ngIf="settings.angular_map"
[symbols]="symbols"
[nodes]="nodes"
[links]="links"
[drawings]="drawings"
[width]="project.scene_width"
[height]="project.scene_height"
[show-interface-labels]="isInterfaceLabelVisible"
[selection-tool]="tools.selection"
[moving-tool]="tools.moving"
[draw-link-tool]="tools.draw_link"
[readonly]="inReadOnlyMode"
></app-experimental-map>
<app-experimental-map *ngIf="settings.angular_map" [symbols]="symbols" [nodes]="nodes" [links]="links" [drawings]="drawings" [width]="project.scene_width" [height]="project.scene_height" [show-interface-labels]="isInterfaceLabelVisible"
[selection-tool]="tools.selection" [moving-tool]="tools.moving" [draw-link-tool]="tools.draw_link" [readonly]="inReadOnlyMode">
</app-experimental-map>
<div *ngIf="toolbarVisibility" class="project-toolbar">
<mat-toolbar color="primary" class="project-toolbar" [ngClass]="{lightTheme: isLightThemeEnabled}">
<mat-toolbar-row *ngIf="!isLightThemeEnabled">
<button matTooltip="Open menu" matTooltipClass="custom-tooltip" mat-icon-button [matMenuTriggerFor]="mainMenu"><mat-icon svgIcon="gns3"></mat-icon></button>
</mat-toolbar-row>
<mat-toolbar-row *ngIf="isLightThemeEnabled">
<button matTooltip="Open menu" matTooltipClass="custom-tooltip" mat-icon-button [matMenuTriggerFor]="mainMenu"><mat-icon svgIcon="gns3black"></mat-icon></button>
</mat-toolbar-row>
<!-- Project Titlebar -->
<div id="project-titlebar" [ngClass]="{lightTheme: isLightThemeEnabled}">
<button matTooltip="Open menu" matTooltipClass="custom-tooltip" mat-icon-button class="gns3-button menu-button" [matMenuTriggerFor]="mainMenu">
<mat-icon svgIcon="gns3"></mat-icon>
</button>
<div class="project-titlebar-controls">
<div *ngIf="!readonly" class="menu-button-group primary-controls">
<app-template [server]="server" [project]="project" (onNodeCreation)="onNodeCreation($event)">
</app-template>
<button matTooltip="Add a link" matTooltipClass="custom-tooltip" class="menu-button" mat-icon-button [ngClass]="{selected: tools.draw_link}" [color]="tools.draw_link ? 'primary' : 'basic'" (click)="toggleDrawLineMode()">
<mat-icon>timeline</mat-icon>
</button>
</div>
<div class="menu-button-group">
<app-nodes-menu [server]="server" [project]="project"></app-nodes-menu>
<app-context-menu [project]="project" [server]="server"></app-context-menu>
<app-context-console-menu [project]="project" [server]="server"></app-context-console-menu>
</div>
</div>
<div>
<button matTooltip="Toggle topology/servers summary" matTooltipClass="custom-tooltip" mat-icon-button [color]="isTopologySummaryVisible ? 'primary' : 'basic'" (click)="toggleShowTopologySummary(!isTopologySummaryVisible)">
<mat-icon>toc</mat-icon>
</button>
</div>
<!-- GNS3 menu -->
<mat-menu #mainMenu="matMenu" [overlapTrigger]="false">
<button mat-menu-item [routerLink]="['/server', server.id, 'projects']">
<mat-icon>work</mat-icon>
@ -78,6 +70,7 @@
</button>
</mat-menu>
<!-- Project Settings sub-menu -->
<mat-menu #projectMenu="matMenu" [overlapTrigger]="false">
<div>
<button mat-menu-item (click)="addNewProject()">
@ -111,101 +104,74 @@
</div>
</mat-menu>
<!-- Map Settings sub-menu -->
<mat-menu #viewMenu="matMenu" [overlapTrigger]="false">
<div class="options-item">
<mat-checkbox [ngModel]="isInterfaceLabelVisible" (change)="toggleShowInterfaceLabels($event.checked)">
Show interface labels
</mat-checkbox><br/>
</mat-checkbox><br />
<mat-checkbox [ngModel]="isConsoleVisible" (change)="toggleShowConsole($event.checked)">
Show console
</mat-checkbox><br/>
</mat-checkbox><br />
<mat-checkbox [ngModel]="isTopologySummaryVisible" (change)="toggleShowTopologySummary($event.checked)">
Show topology/servers summary
</mat-checkbox><br/>
</mat-checkbox><br />
<mat-checkbox [ngModel]="notificationsVisibility" (change)="toggleNotifications($event.checked)">
Show notifications
</mat-checkbox><br/>
</mat-checkbox><br />
<mat-checkbox [ngModel]="layersVisibility" (change)="toggleLayers($event.checked)">
Show layers
</mat-checkbox><br/>
</mat-checkbox><br />
<mat-checkbox [ngModel]="gridVisibility" (change)="toggleGrid($event.checked)">
Show grid
</mat-checkbox><br/>
</mat-checkbox><br />
<mat-checkbox [ngModel]="project.snap_to_grid" (change)="toggleSnapToGrid($event.checked)">
Snap to grid
</mat-checkbox><br/>
</mat-checkbox><br />
</div>
</mat-menu>
</div>
<mat-toolbar-row *ngIf="!readonly">
<app-template [server]="server" [project]="project" (onNodeCreation)="onNodeCreation($event)"></app-template>
</mat-toolbar-row>
<mat-toolbar-row *ngIf="!readonly">
<button matTooltip="Add a link" matTooltipClass="custom-tooltip" mat-icon-button [color]="tools.draw_link ? 'primary' : 'basic'" (click)="toggleDrawLineMode()">
<mat-icon>timeline</mat-icon>
<!-- Project toolbar -->
<div id="project-toolbar" [ngClass]="{lightTheme: isLightThemeEnabled}">
<div class="section">
<button matTooltip="Selection mode" matTooltipClass="custom-tooltip" mat-icon-button class="selection-button menu-button" [color]="tools.moving ? 'basic' : 'primary'" (click)="toggleMovingMode()">
<mat-icon>near_me</mat-icon>
</button>
</mat-toolbar-row>
<mat-toolbar-row>
<button matTooltip="Enable/disable moving mode" matTooltipClass="custom-tooltip" mat-icon-button [color]="tools.moving ? 'primary' : 'basic'" (click)="toggleMovingMode()">
<button matTooltip="Pan workspace" matTooltipClass="custom-tooltip" class="pan-button menu-button" mat-icon-button [color]="tools.moving ? 'primary' : 'basic'" (click)="toggleMovingMode()">
<mat-icon>zoom_out_map</mat-icon>
</button>
</mat-toolbar-row>
<mat-toolbar-row *ngIf="!readonly">
<app-snapshot-menu-item [server]="server" [project]="project"> </app-snapshot-menu-item>
</mat-toolbar-row>
<mat-toolbar-row *ngIf="!readonly">
<button matTooltip="Fit in view" matTooltipClass="custom-tooltip" mat-icon-button (click)="fitInView()">
<mat-icon>fullscreen</mat-icon>
<button matTooltip="Zoom in" matTooltipClass="custom-tooltip" [ngClass]="{lightTheme: isLightThemeEnabled}" class="menu-button" (click)="zoomIn()">
<mat-icon>zoom_in</mat-icon>
</button>
</mat-toolbar-row>
<mat-toolbar-row *ngIf="!readonly">
<button matTooltip="Center view" matTooltipClass="custom-tooltip" mat-icon-button (click)="centerView()">
<mat-icon>center_focus_strong</mat-icon>
<button matTooltip="Reset zoom" matTooltipClass="custom-tooltip" [ngClass]="{lightTheme: isLightThemeEnabled}" class="menu-button" (click)="resetZoom()">
<mat-icon>adjust</mat-icon>
</button>
<button matTooltip="Zoom out" matTooltipClass="custom-tooltip" [ngClass]="{lightTheme: isLightThemeEnabled}" class="menu-button" (click)="zoomOut()">
<mat-icon>zoom_out</mat-icon>
</button>
</mat-toolbar-row>
</mat-toolbar>
</div>
<div *ngIf="toolbarVisibility" id="show-menu-wrapper" [ngClass]="{lightTheme: isLightThemeEnabled, shadowed: !isProjectMapMenuVisible }">
<button [ngClass]="{lightTheme: isLightThemeEnabled, darkTheme: !isLightThemeEnabled}" class="arrow-button" mat-icon-button (click)="showMenu()"><mat-icon class="unmarked">keyboard_arrow_right</mat-icon></button>
</div>
<div *ngIf="toolbarVisibility" id="menu-wrapper" [ngClass]="{lightTheme: isLightThemeEnabled, extended: isProjectMapMenuVisible }">
<app-nodes-menu [server]="server" [project]="project"></app-nodes-menu>
<mat-divider class="divider" [vertical]="true"></mat-divider>
<div class="section">
<app-project-map-menu [server]="server" [project]="project"></app-project-map-menu>
<button [ngClass]="{lightTheme: isLightThemeEnabled}" class="arrow-button" mat-icon-button (click)="hideMenu()"><mat-icon class="unmarked">keyboard_arrow_left</mat-icon></button>
</div>
<div *ngIf="!readonly" class="section">
<app-snapshot-menu-item [server]="server" [project]="project"> </app-snapshot-menu-item>
</div>
</div>
<app-context-menu [project]="project" [server]="server"></app-context-menu>
<app-context-console-menu [project]="project" [server]="server"></app-context-console-menu>
</div>
<div [ngClass]="{lightTheme: isLightThemeEnabled}" class="zoom-buttons">
<button matTooltip="Zoom in" matTooltipClass="custom-tooltip" [ngClass]="{lightTheme: isLightThemeEnabled}" class="zoom-button" (click)="zoomIn()"><mat-icon>zoom_in</mat-icon></button>
<button matTooltip="Reset zoom" matTooltipClass="custom-tooltip" [ngClass]="{lightTheme: isLightThemeEnabled}" class="zoom-button" (click)="resetZoom()"><mat-icon>adjust</mat-icon></button>
<button matTooltip="Zoom out" matTooltipClass="custom-tooltip" [ngClass]="{lightTheme: isLightThemeEnabled}" class="zoom-button" (click)="zoomOut()"><mat-icon>zoom_out</mat-icon></button>
</div>
<app-progress></app-progress>
<app-draw-link-tool [links]="links" *ngIf="tools.draw_link"></app-draw-link-tool>
<app-drawing-dragged [server]="server" [project]="project"></app-drawing-dragged>
<app-drawing-resized [server]="server"></app-drawing-resized>
<app-interface-label-dragged [server]="server"></app-interface-label-dragged>
<app-link-created [server]="server" [project]="project"></app-link-created>
<app-node-dragged [server]="server" [project]="project"></app-node-dragged>
<app-node-label-dragged [server]="server"></app-node-label-dragged>
<app-text-added [server]="server" [project]="project" (drawingSaved)="onDrawingSaved()"> </app-text-added>
<app-text-edited [server]="server"></app-text-edited>
<div [ngClass]="{ visible: !isConsoleVisible }">
<app-progress></app-progress>
<app-draw-link-tool [links]="links" *ngIf="tools.draw_link"></app-draw-link-tool>
<app-drawing-dragged [server]="server" [project]="project"></app-drawing-dragged>
<app-drawing-resized [server]="server"></app-drawing-resized>
<app-interface-label-dragged [server]="server"></app-interface-label-dragged>
<app-link-created [server]="server" [project]="project"></app-link-created>
<app-node-dragged [server]="server" [project]="project"></app-node-dragged>
<app-node-label-dragged [server]="server"></app-node-label-dragged>
<app-text-added [server]="server" [project]="project" (drawingSaved)="onDrawingSaved()"> </app-text-added>
<app-text-edited [server]="server"></app-text-edited>
<div [ngClass]="{ visible: !isConsoleVisible }">
<app-console-wrapper *ngIf="project" [server]="server" [project]="project" (closeConsole)='toggleShowConsole($event)'></app-console-wrapper>
</div>
<div [ngClass]="{ visible: !isTopologySummaryVisible }">
</div>
<div [ngClass]="{ visible: !isTopologySummaryVisible }">
<app-topology-summary *ngIf="project" [server]="server" [project]="project" (closeTopologySummary)='toggleShowTopologySummary($event)'></app-topology-summary>
</div>
</div>

182
src/app/components/project-map/project-map.component.scss
View File

@ -9,20 +9,154 @@ app-map {
width: auto;
}
svg.map {
background-color: #f0f0f0;
}
g.node:hover {
background-color: #0097a7;
}
.project-toolbar {
width: 70px;
.project-map {
background-color: #e8ecef;
}
#project-titlebar {
position: fixed;
top: 20px;
left: 20px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
top: 0px;
left: 0px;
right: 0px;
height: 60px;
padding: 0px 20px;
background-color: #20313b;
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: 3px 3px 10px rgba(0,0,0,0.2);
z-index: 2;
.gns3-button {
position: relative;
top: -2px;
mat-icon {
width: 30px !important;
height: 30px !important;
}
}
.primary-controls {
border-right: 1px solid rgba(255,255,255,0.3);
padding-right: 15px;
margin-right: 15px;
}
.menu-button-group {
display: flex;
align-items: center;
height: 24px;
}
.menu-button {
display: flex;
justify-content: center;
align-items: center;
height: 36px;
width: 36px;
margin: 0px 8px;
border-radius: 18px;
background: none;
font-size: 20px;
}
.add-menu-button mat-icon {
font-size: 28px !important;
}
.selected {
background: rgba(0, 151, 167, 0.1);
mat-icon {
color: #0097a7 !important;
}
}
.project-titlebar-controls {
display: flex;
align-items: center;
}
&.lightTheme {
background-color: #20313b !important;
mat-icon {
color: #fff !important;
}
.selected mat-icon {
color: #0097a7 !important;
}
}
}
#project-toolbar {
position: fixed;
top: 60px;
left: 0px;
width: 50px;
margin: 20px;
background-color: rgba(15,18,20,0.90);
border-radius: 6px;
box-shadow: 1px 1px 10px rgba(0,0,0,0.2);
z-index: 2;
mat-icon {
font-size: 20px;
}
.menu-button {
display: flex;
justify-content: center;
align-items: center;
height: 36px;
width: 36px;
border-radius: 18px;
background: none;
margin: 2px 0px;
}
.selection-button {
margin-bottom: 0px !important;
}
.snapshot-button mat-icon {
font-size: 16px;
}
.section {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border-top: 1px solid rgba(255,255,255,0.3);
padding: 5px 0px;
&:first-child {
border: none;
}
}
&.lightTheme {
background-color: rgba(244, 248, 252, 0.95) !important;
.menu-button {
opacity: 0.7;
}
.section {
border-top: 1px solid rgba(0,0,0,0.1);
&:first-child {
border: none;
}
}
}
}
img {
@ -31,7 +165,6 @@ img {
}
.lightTheme {
background: white!important;
color: black!important;
}
@ -42,7 +175,7 @@ img {
#show-menu-wrapper {
position: fixed;
background: transparent;
top: 20px;
top: 0px;
left: 92px;
background: #263238;
height: 72px;
@ -64,8 +197,9 @@ img {
#menu-wrapper {
position: fixed;
background: transparent;
top: 20px;
top: 0px;
left: 92px;
right: 0px;
background: #263238;
height: 72px;
padding-top: 16px;
@ -111,30 +245,6 @@ mat-divider.divider {
color: gray;
}
.zoom-buttons {
position: fixed;
background: #263238;
bottom: 20px;
right: 20px;
display: grid;
color: white;
.zoom-button {
outline: none;
height: 40px;
width: 40px;
background: transparent;
border: none;
color: white;
font-size: 1.25rem;
font-weight: bold;
mat-icon {
margin-left: -6px;
}
}
}
@-moz-document url-prefix() {
/** fixes gray background of drawing menu on Firefox **/
.mat-drawer-content {

9
src/app/components/snapshots/snapshot-menu-item/snapshot-menu-item.component.html
View File

@ -1 +1,8 @@
<button matTooltip="Manage snapshots" matTooltipClass="custom-tooltip" mat-icon-button (click)="createSnapshotModal()"><mat-icon>snooze</mat-icon></button>
<button
matTooltip="Manage snapshots"
matTooltipClass="custom-tooltip"
mat-icon-button
class="snapshot-button menu-button"
(click)="createSnapshotModal()">
<mat-icon>filter_none</mat-icon>
</button>

17
src/app/components/template/template.component.html
View File

@ -1,14 +1,23 @@
<button class="addNode" matTooltip="Add a node" matTooltipClass="custom-tooltip" mat-icon-button [matMenuTriggerFor]="mainMenu">
<mat-icon>add_to_queue</mat-icon>
<button
class="addNode"
matTooltip="Add a node"
matTooltipClass="custom-tooltip"
mat-icon-button
class="menu-button add-menu-button"
[matMenuTriggerFor]="mainMenu">
<mat-icon>add</mat-icon>
</button>
<mat-menu #mainMenu="matMenu">
<button mat-menu-item (click)="openDialog()">
<mat-icon>add</mat-icon>
<mat-icon>add_to_queue</mat-icon>
<span>Open dialog to configure</span>
</button>
<mat-form-field (click)="$event.stopPropagation()" class="form-field" floatPlaceholder="never">
<mat-form-field
(click)="$event.stopPropagation()"
class="form-field"
floatPlaceholder="never">
<input
matInput
placeholder="Search by name"

21
src/app/components/topology-summary/topology-summary.component.html
View File

@ -16,12 +16,11 @@
(resizeStart)="toggleDragging(false)"
(resizeEnd)="onResizeEnd($event)">
<div class="summaryHeader">
<button class="titleButton" [ngClass]="{ marked: isTopologyVisible }" (click)="toogleTopologyVisibility(true)" mat-button>Map topology</button>
<button class="titleButton" [ngClass]="{ marked: !isTopologyVisible }" (click)=toogleTopologyVisibility(false) mat-button>Servers</button>
<mat-icon (click)="close()" class="closeButton">close</mat-icon>
</div>
<div [ngClass]="{ notvisible: !isTopologyVisible }">
<mat-divider class="divider"></mat-divider>
<mat-tab-group>
<mat-tab
(click)="toggleTopologyVisibility(true)"
label="Map topology">
<div class="tabContent">
<div class="summaryFilters">
<mat-select placeholder="Filter nodes" multiple>
<mat-optgroup label="Status filter">
@ -67,8 +66,11 @@
</div>
</div>
</div>
<div [ngClass]="{ notvisible: isTopologyVisible }">
<mat-divider class="divider"></mat-divider>
</mat-tab>
<mat-tab
(click)="toggleTopologyVisibility(false)"
label="Servers">
<div class="tabContent">
<div class="summaryContentServers">
<div class="nodeRow" *ngFor="let compute of computes">
<div>
@ -89,4 +91,7 @@
</div>
</div>
</div>
</mat-tab>
</mat-tab-group>
</div>
</div>

25
src/app/components/topology-summary/topology-summary.component.scss
View File

@ -7,19 +7,23 @@
.summaryWrapper {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
position: fixed;
top: 20px;
right: 20px;
top: 60px;
right: 0px;
height: 400px;
width: 300px;
width: 320px;
background: #263238;
color: white;
overflow: hidden;
font-size: 12px;
margin: 20px;
border-radius: 8px;
}
.lightTheme {
background: white!important;
background-color: rgba(244, 248, 252, 0.95);
color: black;
margin: 20px;
border-radius: 8px;
}
.summaryHeaderMenu {
@ -28,10 +32,7 @@
.summaryHeader {
width: 100%;
height: 34px;
display: flex;
justify-content: space-between;
margin-right: 5px;
}
.summaryFilters {
@ -46,17 +47,17 @@
margin-right: 5px;
}
.tabContent {
padding: 10px;
}
.summaryContent {
margin-left: 5px;
margin-right: 5px;
overflow: auto;
scrollbar-color: darkgrey #263238;
scrollbar-width: thin;
}
.summaryContentServers {
margin-left: 5px;
margin-right: 5px;
max-height: 350px;
overflow: auto;
scrollbar-color: darkgrey #263238;
@ -67,10 +68,12 @@
margin-left: 5px;
margin-top: 4px;
outline: none;
border-radius: 0px;
}
.marked {
color: #0097a7;
border-bottom: 2px solid #0097a7;
}
.divider {

4
src/app/components/topology-summary/topology-summary.component.ts
View File

@ -77,7 +77,7 @@ export class TopologySummaryComponent implements OnInit, OnDestroy {
this.computes = computes;
});
this.style = { top: '20px', right: '20px', width: '300px', height: '400px'};
this.style = { top: '60px', right: '0px', width: '320px', height: '400px'};
}
toggleDragging(value: boolean) {
@ -138,7 +138,7 @@ export class TopologySummaryComponent implements OnInit, OnDestroy {
};
}
toogleTopologyVisibility(value: boolean) {
toggleTopologyVisibility(value: boolean) {
this.isTopologyVisible = value;
}

4
src/styles.scss
View File

@ -1,3 +1,7 @@
body {
background-color: #e8ecef;
}
img.logo-header {
width: 50px;
}