ExternalVendorCode/gns3-web-ui
1
0
Fork 0
mirror of https://github.com/GNS3/gns3-web-ui.git synced 2025-06-18 06:48:09 +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
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) => { mergeMap((project: Project) => {
this.project = project; this.project = project;
this.projectService.open(this.server, this.project.project_id);
this.title.setTitle(this.project.name); this.title.setTitle(this.project.name);
if (this.mapSettingsService.interfaceLabels.has(project.project_id)) { 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> </mat-form-field>
<div class="menu"> <div class="menu">
<mat-list> <div class="templateList">
<mat-list-item *ngFor="let template of filteredTemplates" class="templateIcon"> <mat-list-item *ngFor="let template of filteredTemplates;let i = index">
<span> <span *ngIf="i%4===0" class="templateRow">
<span mwlDraggable (dragStart)="dragStart($event)" (dragEnd)="dragEnd($event, template)"> <span class="templateIcon">
<img class="image" [src]="getImageSourceForTemplate(template)"/> <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> </span>
{{template.name}}
</span> </span>
</mat-list-item> </mat-list-item>
</mat-list> </div>
</div> </div>
</mat-menu> </mat-menu>

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

@ -1,10 +1,10 @@
// ::ng-deep .menu { ::ng-deep .mat-menu-panel {
// scrollbar-color: darkgrey #263238!important; max-width: 400px;
// scrollbar-width: thin!important; max-height: 400px;
// } }
.menu { .menu {
height: 200px; width: 100%;
overflow-y: scroll; overflow-y: scroll;
scrollbar-color: darkgrey #263238; scrollbar-color: darkgrey #263238;
scrollbar-width: thin; scrollbar-width: thin;
@ -36,6 +36,20 @@
--webkit-filter: invert(0)!important; --webkit-filter: invert(0)!important;
} }
.templateIcon { .templateList {
height: 80px!important; 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) { dragEnd(ev, template: Template) {
this.symbolService.raw(this.server, template.symbol.substring(1)).subscribe((symbolSvg: string) => { 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 scale = this.scaleService.getScale();
let nodeAddedEvent: NodeAddedEvent = { let nodeAddedEvent: NodeAddedEvent = {