mirror of
https://github.com/GNS3/gns3-web-ui.git
synced 2025-04-07 18:44:13 +00:00
List restyled
This commit is contained in:
parent
6b6ac2f312
commit
fe51a1797d
@ -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)) {
|
||||
|
@ -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>
|
||||
|
@ -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;
|
||||
}
|
||||
|
@ -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 = {
|
||||
|
Loading…
x
Reference in New Issue
Block a user