ExternalVendorCode/gns3-web-ui
1
0
Fork 0
mirror of https://github.com/GNS3/gns3-web-ui.git synced 2025-04-28 15:02:49 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

List restyled

Browse Source
This commit is contained in:
piotrpekala7 2020-05-04 16:36:14 +02:00
parent 6b6ac2f312
commit fe51a1797d
4 changed files with 50 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -180,6 +180,7 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
}),
mergeMap((project: Project) => {
this.project = project;
this.projectService.open(this.server, this.project.project_id);
this.title.setTitle(this.project.name);
if (this.mapSettingsService.interfaceLabels.has(project.project_id)) {

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

@ -29,15 +29,35 @@
</mat-form-field>
<div class="menu">
<mat-list>
<mat-list-item *ngFor="let template of filteredTemplates" class="templateIcon">
<span>
<span mwlDraggable (dragStart)="dragStart($event)" (dragEnd)="dragEnd($event, template)">
<img class="image" [src]="getImageSourceForTemplate(template)"/>
<div class="templateList">
<mat-list-item *ngFor="let template of filteredTemplates;let i = index">
<span *ngIf="i%4===0" class="templateRow">
<span class="templateIcon">
<div mwlDraggable (dragStart)="dragStart($event)" (dragEnd)="dragEnd($event, templates[i])">
<img class="image" [src]="getImageSourceForTemplate(templates[i])"/>
</div>
<div class="templateText">{{templates[i].name}}</div>
</span>
<span *ngIf="templates[i+1]" class="templateIcon">
<div mwlDraggable (dragStart)="dragStart($event)" (dragEnd)="dragEnd($event, templates[i+1])">
<img class="image" [src]="getImageSourceForTemplate(templates[i+1])"/>
</div>
<div class="templateText">{{templates[i+1].name}}</div>
</span>
<span *ngIf="templates[i+2]" class="templateIcon">
<div mwlDraggable (dragStart)="dragStart($event)" (dragEnd)="dragEnd($event, templates[i+2])">
<img class="image" [src]="getImageSourceForTemplate(templates[i+2])"/>
</div>
<div class="templateText">{{templates[i+2].name}}</div>
</span>
<span *ngIf="templates[i+3]" class="templateIcon">
<div mwlDraggable (dragStart)="dragStart($event)" (dragEnd)="dragEnd($event, templates[i+3])">
<img class="image" [src]="getImageSourceForTemplate(templates[i+3])"/>
</div>
<div class="templateText">{{templates[i+3].name}}</div>
</span>
{{template.name}}
</span>
</mat-list-item>
</mat-list>
</div>
</div>
</mat-menu>

28
src/app/components/template/template.component.scss
View File

@ -1,10 +1,10 @@
// ::ng-deep .menu {
// scrollbar-color: darkgrey #263238!important;
// scrollbar-width: thin!important;
// }
::ng-deep .mat-menu-panel {
max-width: 400px;
max-height: 400px;
}
.menu {
height: 200px;
width: 100%;
overflow-y: scroll;
scrollbar-color: darkgrey #263238;
scrollbar-width: thin;
@ -36,6 +36,20 @@
--webkit-filter: invert(0)!important;
}
.templateIcon {
height: 80px!important;
.templateList {
width: 100%;
}
.templateRow {
display: flex;
margin-bottom: 10px;
}
.templateText {
text-overflow: ellipsis;
}
.templateIcon {
width: 80px!important;
padding: 10px;
}

2
src/app/components/template/template.component.ts
View File

@ -70,7 +70,7 @@ export class TemplateComponent implements OnInit {
dragEnd(ev, template: Template) {
this.symbolService.raw(this.server, template.symbol.substring(1)).subscribe((symbolSvg: string) => {
let width = +symbolSvg.split("width=\"")[1].split("\"")[0];
let width = +symbolSvg.split("width=\"")[1].split("\"")[0] ? +symbolSvg.split("width=\"")[1].split("\"")[0] : 0;
let scale = this.scaleService.getScale();
let nodeAddedEvent: NodeAddedEvent = {