restyle left component box

static/src/app/admin/admin.component.html

@@ -54,7 +54,7 @@
             </select>
           </td>
           <td class="text-center">
-            <span class="glyphicon glyphicon-trash trash" title="Löschen" (click)="deleteUser(user)"></span>
+            <span class="glyphicon glyphicon-trash trash" matTooltip="Löschen" (click)="deleteUser(user)"></span>
           </td>
         </tr>
         </tbody>

static/src/app/common/user-interface/list-filter/list-filter.component.css

@@ -13,3 +13,22 @@
   height: 32px;
   width: 32px;
 }
+
+:host/deep/.mat-icon > svg {
+  color: #222222;
+}
+
+:host/deep/.mat-icon {
+  height: 32px;
+  width: 32px;
+}
+
+:host/deep/.mat-button-toggle {
+  background: white;
+  color: darkslategrey;
+}
+
+:host/deep/.mat-button-toggle-checked {
+  background: rgba(51, 122, 183, 0.64);
+  color: white;
+}

static/src/app/common/user-interface/list-filter/list-filter.component.html

@@ -4,9 +4,11 @@
       {{button.label}}
     </mat-button-toggle>
   </mat-button-toggle-group>
-  <button mat-icon-button class="add-btn">
+  <button mat-icon-button
-    <mat-icon svgIcon="{{addButton.svgIcon}}"
+          class="add-btn"
-              title="{{addButton.tooltip}}"
+          matTooltip="{{addButton.tooltip}}"
-              (click)="add()"></mat-icon>
+          (click)="add()">
+      <mat-icon svgIcon="{{addButton.svgIcon}}">
+    </mat-icon>
   </button>
 </div>

static/src/app/common/user-interface/list-filter/list-filter.component.ts

@@ -23,6 +23,7 @@ export class ListFilterComponent {
   }
 
   add() {
+    console.log("in child");
     this.openAddFrom.emit();
   }
 }

static/src/app/decorations/decoration-list/decoration-item.component.html

@@ -18,7 +18,7 @@
            [style.max-width]="imgStyle.width"
            [style.margin-top]="imgStyle.marginTop"
            class="decoration-list-preview">
-      <span (click)="delete(); $event.stopPropagation()" title="Löschen" class="glyphicon glyphicon-trash trash"></span>
+      <span (click)="delete(); $event.stopPropagation()" matTooltip="Löschen" class="glyphicon glyphicon-trash trash"></span>
     </div>
   </div>
 </div>

static/src/app/ranks/rank-list/rank-item.component.html

@@ -13,7 +13,7 @@
 
     <div class="col-xs-4">
       <img src="{{imageSrc}}" class="rank-list-preview">
-      <span (click)="delete(); $event.stopPropagation()" title="Löschen" class="glyphicon glyphicon-trash trash"></span>
+      <span (click)="delete(); $event.stopPropagation()" matTooltip="Löschen" class="glyphicon glyphicon-trash trash"></span>
     </div>
 
   </div>

static/src/app/request/confirm-award/confirm-award.component.html

@@ -32,7 +32,6 @@
         <td>
           <textarea style="width:100%;"
                     rows="3"
-                    title="reason"
                     #reason>{{award.reason}}</textarea>
         </td>
         <td>
@@ -44,7 +43,6 @@
         <td>
           <textarea style="width: 100%;"
                     rows="3"
-                    title="rejectReason"
                     placeholder="Begründung für Ablehnung (optional)"
                     #rejectReason></textarea>
         </td>

static/src/app/request/confirm-promotion/confirm-promotion.component.html

@@ -38,7 +38,6 @@
         <td>
           <textarea style="width: 100%;"
                     rows="3"
-                    title="rejectReason"
                     placeholder="Begründung für Ablehnung (optional)"
                     #rejectReason></textarea>
         </td>

static/src/app/shared.module.ts

@@ -4,15 +4,16 @@ import {ShowErrorComponent} from './common/show-error/show-error.component';
 import {CommonModule} from '@angular/common';
 import {ListFilterComponent} from './common/user-interface/list-filter/list-filter.component';
 import {SearchFieldComponent} from './common/user-interface/search-field/search-field.component';
-import {MatButtonToggleModule} from '@angular/material';
+import {MatButtonToggleModule, MatTooltipModule} from '@angular/material';
 import {MatButtonModule} from '@angular/material/button';
 import {MatIconModule} from '@angular/material/icon';
 
 @NgModule({
   declarations: [ShowErrorComponent, ListFilterComponent, SearchFieldComponent],
-  imports: [CommonModule, FormsModule, ReactiveFormsModule, MatButtonToggleModule, MatButtonModule, MatIconModule],
+  imports: [CommonModule, FormsModule, ReactiveFormsModule, MatButtonToggleModule, MatButtonModule, MatIconModule,
+    MatTooltipModule],
   exports: [FormsModule, ReactiveFormsModule, MatButtonToggleModule, MatButtonModule, MatIconModule, ShowErrorComponent,
-    ListFilterComponent, SearchFieldComponent],
+    ListFilterComponent, SearchFieldComponent, MatTooltipModule],
 })
 export class SharedModule {
 }

static/src/app/squads/squad-list/squad-item.component.html

@@ -12,7 +12,7 @@
 
     <div class="col-xs-4">
       <img src="{{imageSrc}}" height="50px" class="squad-list-preview">
-      <span (click)="delete(); $event.stopPropagation()" title="Löschen" class="glyphicon glyphicon-trash trash"></span>
+      <span (click)="delete(); $event.stopPropagation()" matTooltip="Löschen" class="glyphicon glyphicon-trash trash"></span>
     </div>
   </div>
 </div>

static/src/app/squads/squad-list/squad-list.component.html

@@ -4,7 +4,7 @@
                       {label: fraction.OPFOR, value: 'OPFOR'}]"
     [addButton]="{svgIcon: 'add', tooltip: 'Neues Squad hinzufügen'}"
     (executeSearch)="filterSquads($event)"
-    (openAddFrom)="openNewRankForm()">
+    (openAddFrom)="openNewSquadForm()">
   </cc-list-filter>
 
   <cc-list-search [searchTerm]="searchTerm"

static/src/app/statistic/campaign/highscore/highscore.component.html

@@ -38,7 +38,7 @@
       <ngx-datatable-column [width]="valueColWidth" prop="{{attributeMap.prop}}">
         <ng-template ngx-datatable-header-template let-sort="sortFn">
         <span class="datatable-header-cell-wrapper">
-          <span class="datatable-header-cell-label text-truncate" title="{{attributeMap.head}}" (click)="sort()">
+          <span class="datatable-header-cell-label text-truncate" matTooltip="{{attributeMap.head}}" (click)="sort()">
             <img src="../../../../assets/scoreboard/{{attributeMap.prop}}.png" alt="{{attributeMap.head}}">
           </span>
         </span>

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

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

static/src/app/statistic/war/war-list/war-list.component.css

@@ -1,3 +1,7 @@
+.war-list-header {
+  margin: auto;
+}
+
 span > a {
   font-weight: 600 !important;
 }
@@ -25,12 +29,6 @@ mat-expansion-panel-header.mat-expansion-panel-header:focus {
   background-color: #4e4e4e;
 }
 
-.select-list {
-  height: 120%;
-  background: #ececec;
-  box-shadow: 2px 1px 5px grey;
-}
-
 .select-list > div:last-child {
   margin: 20px 0;
 }
@@ -70,6 +68,6 @@ mat-expansion-panel-header.mat-expansion-panel-header:focus {
   background: white;
   font-weight: 700;
   color: #3e3e3e;
-  margin: 5px;
+  margin: 0 10px 10px 10px;
   width: 95%;
 }

static/src/app/statistic/war/war-list/war-list.component.html

@@ -1,5 +1,5 @@
 <div class="select-list">
-  <div class="input-group list-header" *ngIf="loginService.hasPermission(3)">
+  <div class="input-group war-list-header" *ngIf="loginService.hasPermission(3)">
     <button mat-stroked-button class="stats-add-btn" (click)="selectNewWar()">
       Schlacht hinzufügen
     </button>
@@ -15,10 +15,10 @@
           {{campaign.title}}
         </mat-panel-title>
         <mat-panel-description class="war-interaction-panel" *ngIf="loginService.hasPermission(3)">
-          <span (click)="deleteCampaign(campaign); $event.stopPropagation()" title="Löschen"
+          <span (click)="deleteCampaign(campaign); $event.stopPropagation()" matTooltip="Löschen"
                 class="glyphicon glyphicon-trash trash">
           </span>
-          <span (click)="editCampaign(campaign); $event.stopPropagation()" title="Bearbeiten"
+          <span (click)="editCampaign(campaign); $event.stopPropagation()" matTooltip="Bearbeiten"
                 class="glyphicon glyphicon-edit trash"
                 style="padding-right: 10px;">
           </span>

static/src/app/style/list-entry.css

@@ -2,6 +2,7 @@ div.list-entry, a.list-entry {
   padding: 8px;
   border-radius: 2px;
   border: lightgrey solid 1px;
+  background: white;
   cursor: pointer;
   margin-bottom: -1px;
 }
@@ -39,7 +40,7 @@ span > a, span.glyphicon, span.icon-award {
 }
 
 .selected {
-  background-color: aliceblue;
+  background-color: aliceblue !important;
 }
 
 @-webkit-keyframes fadeIn {

static/src/app/users/user-list/user-item.component.html

@@ -13,9 +13,9 @@
     </div>
 
     <div class="col-sm-4">
-      <span (click)="delete(); $event.stopPropagation()" title="Löschen"
+      <span (click)="delete(); $event.stopPropagation()" matTooltip="Löschen"
             class="glyphicon glyphicon-trash trash pull-right"></span>
-      <span (click)="award(); $event.stopPropagation()" title="Auszeichnungen" class="icon-award pull-right"></span>
+      <span (click)="award(); $event.stopPropagation()" matTooltip="Auszeichnungen" class="icon-award pull-right"></span>
     </div>
   </div>
 </div>

static/src/app/users/user-list/user-list.component.ts

@@ -53,6 +53,7 @@ export class UserListComponent implements OnInit {
   }
 
   openNewUserForm() {
+    console.log("message!")
     this.selectedUserId = null;
     this.router.navigate([{outlets: {'right': ['new']}}], {relativeTo: this.route});
   }

static/src/styles.css

@@ -40,10 +40,17 @@ form {
 }
 
 #left {
+  display: none;
   width: 20%;
   min-width: 350px;
   max-width: 450px;
   float: left;
+  background: #ececec;
+  box-shadow: 2px 1px 5px grey;
+}
+
+#left:not(:empty) {
+  display:block!important;
 }
 
 #right {