Merge pull request #3845 from tsiegleauq/motion_desktop_view

Add Motion Detail Desktop view

client/src/app/site/motions/motion-detail/motion-detail.component.html

@@ -33,11 +33,13 @@
     </mat-menu>
 </mat-toolbar>
 
-<mat-accordion multi='true' class='on-transition-fade'>
+<ng-container *ngIf="vp.isMobile ; then mobileView; else desktopView"></ng-container>
 
-    <!-- MetaInfo -->
+<ng-template #mobileView>
-    <!-- <mat-expansion-panel #metaInfoPanel [expanded]='true' class='meta-info-panel'> -->
+    <mat-accordion multi='true' class='on-transition-fade'>
-    <mat-expansion-panel #metaInfoPanel [expanded]='this.editMotion && this.newMotion' class='meta-info-panel'>
+
+        <!-- MetaInfo Panel-->
+        <mat-expansion-panel #metaInfoPanel [expanded]='this.editMotion && this.newMotion' class='meta-info-block meta-info-panel'>
             <mat-expansion-panel-header>
                 <mat-panel-title>
                     <fa-icon icon='info-circle' [fixedWidth]="true"></fa-icon>
@@ -46,7 +48,79 @@
             </mat-expansion-panel-header>
 
             <!-- Meta info -->
-        <form [formGroup]='metaInfoForm' class='expansion-panel-custom-body' (ngSubmit)='saveMotion()'>
+            <div class="expansion-panel-custom-body">
+                <ng-container *ngTemplateOutlet="metaInfoTemplate"></ng-container>
+            </div>
+        </mat-expansion-panel>
+
+        <!-- Personal Note -->
+        <mat-expansion-panel>
+            <mat-expansion-panel-header>
+                <mat-panel-title>
+                    <fa-icon icon='file-signature' [fixedWidth]="true"></fa-icon>
+                    <span translate>Personal note</span>
+                </mat-panel-title>
+            </mat-expansion-panel-header>
+            TEST
+        </mat-expansion-panel>
+
+        <!-- Content -->
+        <mat-expansion-panel #contentPanel [expanded]='true' class='content-panel'>
+            <mat-expansion-panel-header>
+                <mat-panel-title>
+                    <fa-icon icon='align-left' [fixedWidth]="true"></fa-icon>
+                    <span translate>Content</span>
+                </mat-panel-title>
+            </mat-expansion-panel-header>
+
+            <div class="expansion-panel-custom-body">
+                <ng-container *ngTemplateOutlet="contentTemplate"></ng-container>
+            </div>
+        </mat-expansion-panel>
+    </mat-accordion>
+</ng-template>
+
+<ng-template #desktopView>
+    <div class="desktop-view">
+        <div class="desktop-left on-transition-fade">
+
+            <!-- Meta Info -->
+            <div class="meta-info-block meta-info-desktop">
+                <ng-container *ngTemplateOutlet="metaInfoTemplate"></ng-container>
+            </div>
+
+            <!-- Personal Note -->
+            <div class="personal-note">
+                <mat-card>
+                    <mat-card-header>
+                        <mat-card-title>
+                            <span translate>Personal Note</span>
+                            <div class="title-right">
+                                <fa-icon icon="pen" [fixedWidth]=" true"></fa-icon>
+                                <fa-icon icon="ellipsis-v" [fixedWidth]="true"></fa-icon>
+                            </div>
+
+                        </mat-card-title>
+                    </mat-card-header>
+                    <mat-card-content>
+                        Hier könnte ihre Werbung stehen. 1 2 3 4 5 6 Hier könnte ihre Werbung stehen. 1 2 3 4 5 6
+                    </mat-card-content>
+                </mat-card>
+            </div>
+
+        </div>
+        <div class="desktop-right ">
+
+            <!-- Content -->
+            <mat-card class="content-panel">
+                <ng-container *ngTemplateOutlet="contentTemplate"></ng-container>
+            </mat-card>
+        </div>
+    </div>
+</ng-template>
+
+<ng-template #metaInfoTemplate>
+    <form [formGroup]='metaInfoForm' (ngSubmit)='saveMotion()'>
 
         <!-- Identifier -->
         <div *ngIf="editMotion && !newMotion">
@@ -143,38 +217,20 @@
                 <h3 translate>Voting</h3>
             </div> -->
     </form>
-    </mat-expansion-panel>
+</ng-template>
 
-    <!-- Personal Note -->
+<ng-template #contentTemplate>
-    <mat-expansion-panel>
+    <form [formGroup]='contentForm' (ngSubmit)='saveMotion()'>
-        <mat-expansion-panel-header>
-            <mat-panel-title>
-                <fa-icon icon='file-signature' [fixedWidth]="true"></fa-icon>
-                <span translate>Personal note</span>
-            </mat-panel-title>
-        </mat-expansion-panel-header>
-        TEST
-    </mat-expansion-panel>
-
-    <!-- Content -->
-    <mat-expansion-panel #contentPanel [expanded]='true' class='content-panel'>
-        <mat-expansion-panel-header>
-            <mat-panel-title>
-                <fa-icon icon='align-left' [fixedWidth]="true"></fa-icon>
-                <span translate>Content</span>
-            </mat-panel-title>
-        </mat-expansion-panel-header>
-
-        <form [formGroup]='contentForm' class='expansion-panel-custom-body' (ngSubmit)='saveMotion()'>
 
         <!-- Title -->
         <div *ngIf="motion && motion.currentTitle || editMotion">
             <div *ngIf='!editMotion'>
                 <h2>{{motion.currentTitle}}</h2>
             </div>
-                <mat-form-field *ngIf="editMotion" class='wide-text'>
+            <mat-form-field *ngIf="editMotion" class="wide-form">
                 <input matInput placeholder='Title' formControlName='currentTitle' [value]='motionCopy.currentTitle'>
             </mat-form-field>
+
         </div>
 
         <!-- Text -->
@@ -183,21 +239,21 @@
         <div *ngIf='motion && !editMotion'>
             <div [innerHtml]='motion.currentText'></div>
         </div>
-            <mat-form-field *ngIf="motion && editMotion" class='wide-text'>
+        <mat-form-field *ngIf="motion && editMotion" class="wide-form">
             <textarea matInput placeholder='Motion Text' formControlName='currentText' [value]='motionCopy.currentText'></textarea>
         </mat-form-field>
 
+
         <!-- Reason -->
         <div *ngIf="motion && motion.currentReason || editMotion">
             <div *ngIf='!editMotion'>
                 <h4 translate>Reason</h4>
                 <div [innerHtml]='motion.currentReason'></div>
             </div>
-                <mat-form-field *ngIf="editMotion" class='wide-text'>
+            <mat-form-field *ngIf="editMotion" class="wide-form">
                 <textarea matInput placeholder="Reason" formControlName='currentReason' [value]='motionCopy.currentReason'></textarea>
             </mat-form-field>
         </div>
 
     </form>
-    </mat-expansion-panel>
+</ng-template>
-</mat-accordion>

client/src/app/site/motions/motion-detail/motion-detail.component.scss

@@ -27,13 +27,7 @@ mat-panel-title {
     }
 }
 
-.meta-info-panel {
+.meta-info-block {
-    padding-top: 25px;
-
-    a:hover {
-        cursor: pointer;
-    }
-
     h3 {
         display: block;
         margin-top: 12px; //distance between heading and text
@@ -62,11 +56,21 @@ mat-panel-title {
     }
 }
 
-.wide-text {
+.wide-form {
-    width: 95%;
-
     textarea {
-        height: 200px;
+        height: 25vh;
+    }
+
+    ::ng-deep {
+        width: 100%;
+    }
+}
+
+.meta-info-panel {
+    padding-top: 25px;
+
+    a:hover {
+        cursor: pointer;
     }
 }
 
@@ -95,3 +99,61 @@ mat-expansion-panel {
         font-size: 100%;
     }
 }
+
+.desktop-view {
+    .desktop-left {
+        width: 30%;
+        float: left;
+
+        .meta-info-desktop {
+            padding: 40px 20px 10px 20px;
+        }
+
+        .personal-note {
+            mat-card {
+                padding: 0px;
+                margin: 20px;
+                min-width: 10hv;
+                min-width: 200px;
+
+                .mat-card-header-text {
+                    width: 100%;
+                }
+
+                mat-card-header {
+                    display: inherit;
+                    padding: 15px;
+                    margin: 0;
+                    background-color: #eee;
+
+                    .title-right {
+                        float: right;
+                        fa-icon {
+                            padding-left: 10px;
+                        }
+                    }
+
+                    mat-card-title {
+                        font-weight: bold;
+                        display: inline;
+                    }
+                }
+
+                mat-card-content {
+                    padding: 30px 15px 15px 15px;
+                }
+            }
+        }
+    }
+
+    .desktop-right {
+        display: grid;
+
+        min-width: 70%;
+
+        mat-card {
+            display: inline;
+            margin: 20px;
+        }
+    }
+}

client/src/app/site/motions/motion-detail/motion-detail.component.ts

@@ -1,11 +1,13 @@
 import { Component, OnInit, ViewChild } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
+import { FormGroup, FormBuilder, Validators } from '@angular/forms';
+import { MatExpansionPanel } from '@angular/material';
+
 import { BaseComponent } from '../../../base.component';
 import { Motion } from '../../../shared/models/motions/motion';
 import { Category } from '../../../shared/models/motions/category';
-import { FormGroup, FormBuilder, Validators } from '@angular/forms';
-import { MatExpansionPanel } from '@angular/material';
 import { DataSendService } from '../../../core/services/data-send.service';
+import { ViewportService } from '../../../core/services/viewport.service';
 
 /**
  * Component for the motion detail view
@@ -59,11 +61,14 @@ export class MotionDetailComponent extends BaseComponent implements OnInit {
     /**
      * Constuct the detail view.
      *
-     *
+     * @param vp the viewport service
+     * @param router to navigate back to the motion list and to an existing motion
      * @param route determine if this is a new or an existing motion
      * @param formBuilder For reactive forms. Form Group and Form Control
+     * @param dataSend To send changes of the motion
      */
     public constructor(
+        public vp: ViewportService,
         private router: Router,
         private route: ActivatedRoute,
         private formBuilder: FormBuilder,
@@ -180,8 +185,11 @@ export class MotionDetailComponent extends BaseComponent implements OnInit {
             this.motionCopy = new Motion();
             this.motionCopy.patchValues(this.motion);
             this.patchForm(this.motionCopy);
+
+            if (this.vp.isMobile) {
                 this.metaInfoPanel.open();
                 this.contentPanel.open();
+            }
         } else {
             this.saveMotion();
         }

client/src/app/site/motions/motion-list/motion-list.component.html

@@ -1,24 +1,3 @@
-<!-- <mat-toolbar color='primary'>
-
-    <button class='generic-plus-button on-transition-fade' routerLink='new' mat-fab>
-        <fa-icon icon='plus'></fa-icon>
-    </button>
-
-    <span class='app-name on-transition-fade' translate>Motions</span>
-
-
-    <span class='spacer'></span>
-    <button class='on-transition-fade' mat-icon-button [matMenuTriggerFor]="motionExtraMenu">
-        <fa-icon icon='ellipsis-v'></fa-icon>
-    </button>
-    <mat-menu #motionExtraMenu="matMenu">
-
-        <button mat-menu-item translate><fa-icon icon='download'></fa-icon> Export As...</button>
-        <button mat-menu-item routerLink='category' translate>Categories</button>
-    </mat-menu>
-
-</mat-toolbar> -->
-
 <os-head-bar appName="Motions" plusButton=true (plusButtonClicked)=onPlusButton() [menuList]=motionMenuList (ellipsisMenuItem)=onEllipsisItem($event)>
 </os-head-bar>