hardi
/
opt-cc
1
0
Fork 0
Code Pull Requests Releases 47 Activity

Use material buttons in war list

pull/40/head
HardiReady 2018-07-10 19:57:18 +02:00
parent 5ba7c48744
commit fab0b438cd
9 changed files with 107 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
static/src/app/app.component.ts
View File

@ -35,9 +35,13 @@ export class AppComponent implements OnInit {
private sanitizer: DomSanitizer,
@Inject(DOCUMENT) private document) {
this.iconRegistry.addSvgIcon('add',
sanitizer.bypassSecurityTrustResourceUrl('../assets/icon/twotone-add_circle-24px.svg'));
sanitizer.bypassSecurityTrustResourceUrl('../assets/icon/outline-add_box-24px.svg'));
this.iconRegistry.addSvgIcon('add-user',
sanitizer.bypassSecurityTrustResourceUrl('../assets/icon/twotone-person_add-24px.svg'));
this.iconRegistry.addSvgIcon('edit',
sanitizer.bypassSecurityTrustResourceUrl('../assets/icon/twotone-edit-24px.svg'));
this.iconRegistry.addSvgIcon('delete',
sanitizer.bypassSecurityTrustResourceUrl('../assets/icon/twotone-delete-24px.svg'));
router.events.subscribe(event => {
if (event instanceof NavigationStart) {

13
static/src/app/statistic/war/war-list/war-item.component.css
View File

@ -1,13 +0,0 @@
.interact-ico-container {
padding-right: 15px;
float: right;
display: grid;
}
.interact-ico-container > span {
font-size: 17px;
}
.interact-ico-container > span:last-child {
padding-top: 7px;
}

14
static/src/app/statistic/war/war-list/war-item.component.html
View File

@ -11,8 +11,18 @@
<div *ngIf="loginService.hasPermission(3)"
class="interact-ico-container">
<span class="glyphicon glyphicon-edit" (click)="edit(); $event.stopPropagation()" matTooltip="Bearbeiten"></span>
<span class="glyphicon glyphicon-trash" (click)="delete(); $event.stopPropagation()" matTooltip="Löschen"></span>
<button mat-icon-button
class="add-btn"
matTooltip="Bearbeiten"
(click)="edit(); $event.stopPropagation()">
<mat-icon svgIcon="edit"></mat-icon>
</button>
<button mat-icon-button
class="add-btn"
matTooltip="Löschen"
(click)="delete(); $event.stopPropagation()">
<mat-icon svgIcon="delete"></mat-icon>
</button>
</div>
</div>
</div>

19
static/src/app/statistic/war/war-list/war-list.component.html
View File

@ -15,13 +15,18 @@
{{campaign.title}}
</mat-panel-title>
<mat-panel-description class="war-interaction-panel" *ngIf="loginService.hasPermission(3)">
<span (click)="deleteCampaign(campaign); $event.stopPropagation()" matTooltip="Löschen"
class="glyphicon glyphicon-trash trash">
</span>
<span (click)="editCampaign(campaign); $event.stopPropagation()" matTooltip="Bearbeiten"
class="glyphicon glyphicon-edit trash"
style="padding-right: 10px;">
</span>
<button mat-icon-button
class="add-btn"
matTooltip="Bearbeiten"
(click)="editCampaign(campaign); $event.stopPropagation()">
<mat-icon svgIcon="edit"></mat-icon>
</button>
<button mat-icon-button
class="add-btn"
matTooltip="Löschen"
(click)="deleteCampaign(campaign); $event.stopPropagation()">
<mat-icon svgIcon="delete"></mat-icon>
</button>
</mat-panel-description>
</mat-expansion-panel-header>
<div class="top-list-entry">

4
static/src/app/style/list-entry.css
View File

@ -11,6 +11,10 @@ div.list-entry:hover, a.list-entry:hover {
background-color: #f9f9f9;
}
:host/deep/.list-entry mat-icon > svg {
color: #222222;
}
.decoration-list-preview, .squad-list-preview {
float: left;
margin-right: 12px;

2
static/src/app/style/select-list.css
View File

@ -1,3 +1,3 @@
.select-list {
padding: 20px 2% 0 5%;
padding: 20px 3% 12px 5%;
}

11
static/src/assets/icon/twotone-add_circle-24px.svg → static/src/assets/icon/outline-add_box-24px.svg
View File

@ -7,15 +7,12 @@
</g>
<path fill="none" d="M0,0h24v24H0V0z"/>
</g>
<g id="Duotone">
<g id="ui_x5F_spec_x5F_header_copy_2" display="none">
<g id="Outline">
<g id="ui_x5F_spec_x5F_header" display="none">
</g>
<g>
<path opacity="0.3" d="M12,4c-4.41,0-8,3.59-8,8c0,4.41,3.59,8,8,8s8-3.59,8-8C20,7.59,16.41,4,12,4z M17,13h-4v4h-2v-4H7v-2h4V7
h2v4h4V13z"/>
<polygon points="13,7 11,7 11,11 7,11 7,13 11,13 11,17 13,17 13,13 17,13 17,11 13,11 "/>
<path d="M12,2C6.48,2,2,6.48,2,12c0,5.52,4.48,10,10,10s10-4.48,10-10C22,6.48,17.52,2,12,2z M12,20c-4.41,0-8-3.59-8-8
c0-4.41,3.59-8,8-8s8,3.59,8,8C20,16.41,16.41,20,12,20z"/>
<path d="M19,3H5C3.89,3,3,3.9,3,5v14c0,1.1,0.89,2,2,2h14c1.1,0,2-0.9,2-2V5C21,3.9,20.1,3,19,3z M19,19H5V5h14V19z"/>
<polygon points="11,17 13,17 13,13 17,13 17,11 13,11 13,7 11,7 11,11 7,11 7,13 11,13 "/>
</g>
</g>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1002 B

After

Width:  |  Height:  |  Size: 788 B

49
static/src/assets/icon/twotone-delete-24px.svg Normal file
View File

@ -0,0 +1,49 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px"
height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
<g id="Header_x2F_BG" display="none">
<rect x="-270" y="-270" display="inline" fill="#F1F1F2" width="520" height="520"/>
</g>
<g id="Bounding_Boxes">
<g id="ui_x5F_spec_x5F_header_copy_3">
</g>
<path fill="none" d="M0,0h24v24H0V0z"/>
</g>
<g id="Rounded" display="none">
<g id="ui_x5F_spec_x5F_header_copy_5" display="inline">
</g>
<path display="inline" d="M6,19c0,1.1,0.9,2,2,2h8c1.1,0,2-0.9,2-2V9c0-1.1-0.9-2-2-2H8C6.9,7,6,7.9,6,9V19z M18,4h-2.5l-0.71-0.71
C14.61,3.11,14.35,3,14.09,3H9.91C9.65,3,9.39,3.11,9.21,3.29L8.5,4H6C5.45,4,5,4.45,5,5v0c0,0.55,0.45,1,1,1h12c0.55,0,1-0.45,1-1
v0C19,4.45,18.55,4,18,4z"/>
</g>
<g id="Sharp" display="none">
<g id="ui_x5F_spec_x5F_header_copy_4" display="inline">
</g>
<path display="inline" d="M6,21h12V7H6V21z M19,4h-3.5l-1-1h-5l-1,1H5v2h14V4z"/>
</g>
<g id="Outline" display="none">
<g id="ui_x5F_spec_x5F_header" display="inline">
</g>
<path id="XMLID_282_" display="inline" d="M16,9v10H8V9H16 M14.5,3h-5l-1,1H5v2h14V4h-3.5L14.5,3L14.5,3z M18,7H6v12
c0,1.1,0.9,2,2,2h8c1.1,0,2-0.9,2-2V7L18,7z"/>
</g>
<g id="Duotone">
<g id="ui_x5F_spec_x5F_header_copy_2">
</g>
<g>
<rect x="8" y="9" opacity="0.3" width="8" height="10"/>
<g>
<polygon points="15.5,4 14.5,3 9.5,3 8.5,4 5,4 5,6 19,6 19,4 "/>
<path d="M6,19c0,1.1,0.9,2,2,2h8c1.1,0,2-0.9,2-2V7H6V19z M8,9h8v10H8V9z"/>
</g>
</g>
</g>
<g id="Fill" display="none">
<g id="ui_x5F_spec_x5F_header_copy" display="inline">
</g>
<path display="inline" d="M6,19c0,1.1,0.9,2,2,2h8c1.1,0,2-0.9,2-2V7H6V19z M19,4h-3.5l-1-1h-5l-1,1H5v2h14V4z"/>
</g>
<g id="nyt_x5F_exporter_x5F_info" display="none">
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

20
static/src/assets/icon/twotone-edit-24px.svg Normal file
View File

@ -0,0 +1,20 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px"
height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
<g id="Bounding_Boxes">
<g id="ui_x5F_spec_x5F_header_copy_3">
</g>
<path fill="none" d="M0,0h24v24H0V0z"/>
</g>
<g id="Duotone">
<g id="ui_x5F_spec_x5F_header_copy_5">
</g>
<g>
<polygon opacity="0.3" points="5,18.08 5,19 5.92,19 14.98,9.94 14.06,9.02 "/>
<path d="M20.71,7.04c0.39-0.39,0.39-1.02,0-1.41l-2.34-2.34C18.17,3.09,17.92,3,17.66,3s-0.51,0.1-0.7,0.29l-1.83,1.83l3.75,3.75
L20.71,7.04z"/>
<path d="M3,17.25V21h3.75L17.81,9.94l-3.75-3.75L3,17.25z M5.92,19H5v-0.92l9.06-9.06l0.92,0.92L5.92,19z"/>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 891 B