Merge pull request #3845 from tsiegleauq/motion_desktop_view

Add Motion Detail Desktop view
This commit is contained in:
Finn Stutzenstein 2018-09-04 12:33:35 +02:00 committed by GitHub
commit 05dd25bf0d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 286 additions and 181 deletions

View File

@ -33,11 +33,13 @@
</mat-menu> </mat-menu>
</mat-toolbar> </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-expansion-panel-header>
<mat-panel-title> <mat-panel-title>
<fa-icon icon='info-circle' [fixedWidth]="true"></fa-icon> <fa-icon icon='info-circle' [fixedWidth]="true"></fa-icon>
@ -46,7 +48,79 @@
</mat-expansion-panel-header> </mat-expansion-panel-header>
<!-- Meta info --> <!-- 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 --> <!-- Identifier -->
<div *ngIf="editMotion && !newMotion"> <div *ngIf="editMotion && !newMotion">
@ -143,38 +217,20 @@
<h3 translate>Voting</h3> <h3 translate>Voting</h3>
</div> --> </div> -->
</form> </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 --> <!-- Title -->
<div *ngIf="motion && motion.currentTitle || editMotion"> <div *ngIf="motion && motion.currentTitle || editMotion">
<div *ngIf='!editMotion'> <div *ngIf='!editMotion'>
<h2>{{motion.currentTitle}}</h2> <h2>{{motion.currentTitle}}</h2>
</div> </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'> <input matInput placeholder='Title' formControlName='currentTitle' [value]='motionCopy.currentTitle'>
</mat-form-field> </mat-form-field>
</div> </div>
<!-- Text --> <!-- Text -->
@ -183,21 +239,21 @@
<div *ngIf='motion && !editMotion'> <div *ngIf='motion && !editMotion'>
<div [innerHtml]='motion.currentText'></div> <div [innerHtml]='motion.currentText'></div>
</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> <textarea matInput placeholder='Motion Text' formControlName='currentText' [value]='motionCopy.currentText'></textarea>
</mat-form-field> </mat-form-field>
<!-- Reason --> <!-- Reason -->
<div *ngIf="motion && motion.currentReason || editMotion"> <div *ngIf="motion && motion.currentReason || editMotion">
<div *ngIf='!editMotion'> <div *ngIf='!editMotion'>
<h4 translate>Reason</h4> <h4 translate>Reason</h4>
<div [innerHtml]='motion.currentReason'></div> <div [innerHtml]='motion.currentReason'></div>
</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> <textarea matInput placeholder="Reason" formControlName='currentReason' [value]='motionCopy.currentReason'></textarea>
</mat-form-field> </mat-form-field>
</div> </div>
</form> </form>
</mat-expansion-panel> </ng-template>
</mat-accordion>

View File

@ -27,13 +27,7 @@ mat-panel-title {
} }
} }
.meta-info-panel { .meta-info-block {
padding-top: 25px;
a:hover {
cursor: pointer;
}
h3 { h3 {
display: block; display: block;
margin-top: 12px; //distance between heading and text margin-top: 12px; //distance between heading and text
@ -62,11 +56,21 @@ mat-panel-title {
} }
} }
.wide-text { .wide-form {
width: 95%;
textarea { 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%; 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;
}
}
}

View File

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

View File

@ -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 appName="Motions" plusButton=true (plusButtonClicked)=onPlusButton() [menuList]=motionMenuList (ellipsisMenuItem)=onEllipsisItem($event)>
</os-head-bar> </os-head-bar>