From 1694daaa9c8435ed4e3b6e086c0d15196b42b0fb Mon Sep 17 00:00:00 2001
From: GabrielMeyer <meyergabriel@live.de>
Date: Thu, 21 Feb 2019 17:03:46 +0100
Subject: [PATCH] Added anchor column

Added an anchor column, so the user can open a separate tab.

prettified

Changed name of variable

Resolves answer from pull-request

- Moved the style for the anchor columns to `styles.scss`
- Set the anchor column to the last place in the array
---
 .../motion-list/motion-list.component.html    |  9 +++++++-
 .../motion-list/motion-list.component.ts      |  4 ++--
 .../user-list/user-list.component.html        |  8 +++++++
 .../user-list/user-list.component.ts          |  4 ++--
 client/src/styles.scss                        | 23 +++++++++++++++++++
 5 files changed, 43 insertions(+), 5 deletions(-)

diff --git a/client/src/app/site/motions/components/motion-list/motion-list.component.html b/client/src/app/site/motions/components/motion-list/motion-list.component.html
index 49895fe6e..0a5b20f52 100644
--- a/client/src/app/site/motions/components/motion-list/motion-list.component.html
+++ b/client/src/app/site/motions/components/motion-list/motion-list.component.html
@@ -121,6 +121,14 @@
             </mat-cell>
         </ng-container>
 
+        <!-- Anchor column to open separate tab -->
+        <ng-container matColumnDef="anchor">
+            <mat-header-cell *matHeaderCellDef></mat-header-cell>
+            <mat-cell *matCellDef="let motion">
+                <a [routerLink]="motion.id"></a>
+            </mat-cell>
+        </ng-container>
+
         <!-- Speakers column -->
         <ng-container matColumnDef="speakers">
             <mat-header-cell *matHeaderCellDef mat-sort-header>Speakers</mat-header-cell>
@@ -139,7 +147,6 @@
         <mat-header-row *matHeaderRowDef="getColumnDefinition()"></mat-header-row>
         <mat-row
             [ngClass]="selectedRows.indexOf(row) >= 0 ? 'selected' : ''"
-            (click)="selectItem(row, $event)"
             *matRowDef="let row; columns: getColumnDefinition()"
             class="lg"
         >
diff --git a/client/src/app/site/motions/components/motion-list/motion-list.component.ts b/client/src/app/site/motions/components/motion-list/motion-list.component.ts
index 04bbc373e..bd511cd1c 100644
--- a/client/src/app/site/motions/components/motion-list/motion-list.component.ts
+++ b/client/src/app/site/motions/components/motion-list/motion-list.component.ts
@@ -41,12 +41,12 @@ export class MotionListComponent extends ListViewBaseComponent<ViewMotion, Motio
     /**
      * Columns to display in table when desktop view is available
      */
-    public displayedColumnsDesktop: string[] = ['identifier', 'title', 'state'];
+    public displayedColumnsDesktop: string[] = ['identifier', 'title', 'state', 'anchor'];
 
     /**
      * Columns to display in table when mobile view is available
      */
-    public displayedColumnsMobile = ['identifier', 'title'];
+    public displayedColumnsMobile = ['identifier', 'title', 'anchor'];
 
     /**
      * Value of the configuration variable `motions_statutes_enabled` - are statutes enabled?
diff --git a/client/src/app/site/users/components/user-list/user-list.component.html b/client/src/app/site/users/components/user-list/user-list.component.html
index 39fd4f47e..440a12b5e 100644
--- a/client/src/app/site/users/components/user-list/user-list.component.html
+++ b/client/src/app/site/users/components/user-list/user-list.component.html
@@ -64,6 +64,14 @@
             </mat-cell>
         </ng-container>
 
+        <!-- Anchor column to open separate tab -->
+        <ng-container matColumnDef="anchor">
+            <mat-header-cell *matHeaderCellDef></mat-header-cell>
+            <mat-cell *matCellDef="let user">
+                <a [routerLink]="user.id"></a>
+            </mat-cell>
+        </ng-container>
+
         <!-- Presence column -->
         <ng-container matColumnDef="presence">
             <mat-header-cell *matHeaderCellDef mat-sort-header>Presence</mat-header-cell>
diff --git a/client/src/app/site/users/components/user-list/user-list.component.ts b/client/src/app/site/users/components/user-list/user-list.component.ts
index 45b635641..8fad1bc08 100644
--- a/client/src/app/site/users/components/user-list/user-list.component.ts
+++ b/client/src/app/site/users/components/user-list/user-list.component.ts
@@ -80,12 +80,12 @@ export class UserListComponent extends ListViewBaseComponent<ViewUser, User> imp
     /**
      * Columns to display in table when desktop view is available
      */
-    public displayedColumnsDesktop: string[] = ['name', 'group'];
+    public displayedColumnsDesktop: string[] = ['name', 'group', 'anchor'];
 
     /**
      * Columns to display in table when mobile view is available
      */
-    public displayedColumnsMobile = ['name'];
+    public displayedColumnsMobile = ['name', 'anchor'];
 
     /**
      * Stores the observed configuration if the presence view is available to administrators
diff --git a/client/src/styles.scss b/client/src/styles.scss
index 95c7e5177..3d700b587 100644
--- a/client/src/styles.scss
+++ b/client/src/styles.scss
@@ -193,6 +193,7 @@ mat-card {
 
     /** size of the mat row  */
     mat-row {
+        position: relative;
         min-height: 60px;
     }
     mat-row.lg {
@@ -653,3 +654,25 @@ button.mat-menu-item.selected {
 .white {
     color: white;
 }
+
+/** Style for the anchor column */
+.mat-column-anchor {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    opacity: 0.1;
+    z-index: 1;
+
+    a {
+        display: block;
+        height: 100%;
+        width: 100%;
+    }
+}
+
+/** functional items should lay over the anchor column */
+.mat-cell > * {
+    z-index: 2;
+}