More dynamic Motion-Detail metainfo

* Adjust login page
* Rework legal notice and pp
* Add more custom animations
* Add Router to navigation panel
This commit is contained in:
Sean Engelhardt 2018-08-14 12:55:45 +02:00 committed by FinnStutzenstein
parent 54cc737ede
commit fa106a46c9
24 changed files with 243 additions and 142 deletions

View File

@ -1,10 +1,12 @@
import { trigger, animate, transition, style, query, stagger, group, state } from '@angular/animations';
import { trigger, animate, transition, style, query, stagger, group, state, sequence } from '@angular/animations';
export const pageTransition = trigger('pageTransition', [
transition('* => *', [
/** keep the dom clean - let all items "just" enter */
query(':enter mat-card', [style({ opacity: 0 })], { optional: true }),
query(':enter .on-transition-fade', [style({ opacity: 0 })], { optional: true }),
query(':enter mat-row', [style({ opacity: 0 })], { optional: true }),
query(':enter mat-expansion-panel', [style({ opacity: 0 })], { optional: true }),
/** parallel vanishing */
group([
@ -15,6 +17,12 @@ export const pageTransition = trigger('pageTransition', [
/** how the material cards are leaving */
query(':leave mat-card', [style({ opacity: 1 }), animate('0.2s', style({ opacity: 0 }))], {
optional: true
}),
query(':leave mat-row', [style({ opacity: 1 }), animate('0.2s', style({ opacity: 0 }))], {
optional: true
}),
query(':leave mat-expansion-panel', [style({ opacity: 1 }), animate('0.2s', style({ opacity: 0 }))], {
optional: true
})
]),
@ -33,6 +41,24 @@ export const pageTransition = trigger('pageTransition', [
animate('300ms ease-in-out', style({ transform: 'translateY(0px)', opacity: 1 }))
]),
{ optional: true }
),
query(
':enter mat-row',
/** stagger = "one after another" with a distance of 50ms" */
stagger(30, [
style({ transform: 'translateY(24px)' }),
animate('200ms ease-in-out', style({ transform: 'translateY(0px)', opacity: 1 }))
]),
{ optional: true }
),
query(
':enter mat-expansion-panel',
/** stagger = "one after another" with a distance of 50ms" */
stagger(100, [
style({ transform: 'translateY(50px)' }),
animate('300ms ease-in-out', style({ transform: 'translateY(0px)', opacity: 1 }))
]),
{ optional: true }
)
])
])

View File

@ -1,9 +0,0 @@
<h2 mat-dialog-title>Impressum</h2>
<mat-dialog-content>
OpenSlides ist ein freies, webbasiertes Präsentations- und Versammlungssystem zur Darstellung und Steuerung von Tagesordnung,
Anträgen und Wahlen einer Versammlung.
</mat-dialog-content>
<br>
<mat-dialog-content>
OpenSlides 3.0 PRE ALPHA (Lizenz: MIT)
</mat-dialog-content>

View File

@ -1,15 +0,0 @@
import { Component } from '@angular/core';
import { MatDialogRef } from '@angular/material';
@Component({
selector: 'app-impressum',
templateUrl: './legal-notice.dialog.component.html',
styleUrls: ['./legal-notice.dialog.component.css']
})
export class LegalnoticeDialogComponent {
constructor(public dialogRef: MatDialogRef<LegalnoticeDialogComponent>) {}
onNoClick(): void {
this.dialogRef.close();
}
}

View File

@ -1,40 +0,0 @@
<h2 mat-dialog-title>Datenschutzerklärung</h2>
<mat-dialog-content>
OpenSlides speichert nur so viele personenbezogene Daten wie unbedingt nötig sind, um Besuchern Informationen und Dienste
zuverlässig und sicher anbieten zu können.
</mat-dialog-content>
<br>
<mat-dialog-content>
Eine Auswertung der Dienste-Protokolle erfolgt nur von uns selbst und auch nur, um mögliche Fehler, Einbruchsversuche oder
technisches Verhalten der Server auf unseren Server zu analysieren.
</mat-dialog-content>
<br>
<mat-dialog-content>
Nachfolgend wird genau aufgeschlüsselt, bei welcher Gelegenheit welche Daten wie lange gespeichert sind. Zudem wird beschrieben,
welche Schritte erforderlich sind um Daten zu löschen.
</mat-dialog-content>
<br>
<h3>Cookies</h3>
<mat-dialog-content>
Beim Besuch der Website wird ein sogenanntes Cookie angelegt. Dieses Cookie wird ausschließlich dazu verwendet, um auf der
Website eingeloggt zu bleiben. Ein sogenanntes "Tracking Cookie" wird nicht verwendet.
</mat-dialog-content>
<br>
<h3>Logfiles</h3>
<mat-dialog-content>
Zu OpenSlides gehören verschiedene Unter-Services. Diese loggen folgende Informationen: Quell-IP-Adresse, Zeitstempel, genutztes
Betriebssystem, verwendeter Web-Browser, Referer-URL, E-Mail-Adresse und besuchte Seite.
</mat-dialog-content>
<br>
<h3>Datenbank</h3>
<mat-dialog-content>
Als Mitglied werden folgende Daten von Ihnen gespeichert: Titel, Vorname, Nachname, EMail, Gliederungsebene, Teilnehmernummer,
Gruppenzugehörigkeit, Initiales Passwort im Klartext, Vergebenes Passwort als kryptografischer Hashwert und ein Kommentar
für interne Notizen. Diese Informationen werden mit den Aktionen innerhalb von OpenSlides in Verbindung gebracht. Diese
Informationen werden nicht an Dritte weiter gegeben und sind auch nicht für diese zugänglich.
</mat-dialog-content>
<br>
<h3>Löschung von Daten</h3>
<mat-dialog-content>
Die Daten dieser OpenSlides-Demo-Instanz werden nächtlich automatisch gelöscht.
</mat-dialog-content>

View File

@ -1,15 +0,0 @@
import { Component } from '@angular/core';
import { MatDialogRef } from '@angular/material';
@Component({
selector: 'app-privacy-policy.dialog',
templateUrl: './privacy-policy.dialog.component.html',
styleUrls: ['./privacy-policy.dialog.component.css']
})
export class PrivacyPolicyDialogComponent {
constructor(public dialogRef: MatDialogRef<PrivacyPolicyDialogComponent>) {}
onNoClick(): void {
this.dialogRef.close();
}
}

View File

@ -154,7 +154,16 @@ export class Motion extends BaseModel {
const workflowId = +motionsWorkflowConfig.value;
//get the workflow for out motion
const selectedWorkflow = this.DS.get(Workflow, workflowId) as Workflow;
return selectedWorkflow.getStateNameById(this.state_id);
const stateName = selectedWorkflow.getStateNameById(this.state_id);
if (stateName !== 'NULL') {
return stateName;
} else {
return '';
}
}
get possibleStates() {
return '';
}
/**

View File

@ -32,9 +32,6 @@ import { TranslateModule } from '@ngx-translate/core';
// directives
import { OsPermsDirective } from './directives/os-perms.directive';
import { DomChangeDirective } from './directives/dom-change.directive';
import { LegalnoticeDialogComponent } from './components/legal-notice/legal-notice.dialog.component';
import { PrivacyPolicyDialogComponent } from './components/privacy-policy/privacy-policy.dialog.component';
// import { CdkTableModule } from '@angular/cdk/table';
library.add(fas);
@ -91,7 +88,6 @@ library.add(fas);
TranslateModule,
OsPermsDirective
],
declarations: [OsPermsDirective, DomChangeDirective, LegalnoticeDialogComponent, PrivacyPolicyDialogComponent],
entryComponents: [LegalnoticeDialogComponent, PrivacyPolicyDialogComponent]
declarations: [OsPermsDirective, DomChangeDirective]
})
export class SharedModule {}

View File

@ -0,0 +1,16 @@
<mat-toolbar color='primary'>
<span class='app-name on-transition-fade' translate>Legal Notice</span>
</mat-toolbar>
<mat-card class="os-card on-transition-fade">
<div>
<div class='legal-notice-text'>
<a href="https://openslides.org/">OpenSlides</a> ist ein freies, webbasiertes Präsentations- und Versammlungssystem zur Darstellung und Steuerung
von Tagesordnung, Anträgen und Wahlen einer Versammlung.
</div>
<mat-divider></mat-divider>
<div class='version-text'>
OpenSlides 3.0 PRE ALPHA (Lizenz: MIT)
</div>
</div>
</mat-card>

View File

@ -0,0 +1,9 @@
.legal-notice-text {
display: block;
padding-bottom: 20px;
}
.version-text {
display: block;
padding-top: 20px;
}

View File

@ -1,19 +1,19 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { LegalnoticeDialogComponent } from './legal-notice.dialog.component';
import { LegalNoticeComponent } from './legal-notice.component';
describe('LegalnoticeDialogComponent', () => {
let component: LegalnoticeDialogComponent;
let fixture: ComponentFixture<LegalnoticeDialogComponent>;
describe('LegalNoticeComponent', () => {
let component: LegalNoticeComponent;
let fixture: ComponentFixture<LegalNoticeComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [LegalnoticeDialogComponent]
declarations: [LegalNoticeComponent]
}).compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(LegalnoticeDialogComponent);
fixture = TestBed.createComponent(LegalNoticeComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});

View File

@ -0,0 +1,12 @@
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-legal-notice',
templateUrl: './legal-notice.component.html',
styleUrls: ['./legal-notice.component.scss']
})
export class LegalNoticeComponent implements OnInit {
constructor() {}
ngOnInit() {}
}

View File

@ -9,6 +9,7 @@ mat-form-field {
margin-left: auto;
margin-right: auto;
width: 90%;
max-width: 400px;
}
}
@ -26,8 +27,8 @@ mat-form-field {
}
.form-wrapper {
padding-left: 15px;
padding-right: 15px;
padding-left: 30px;
padding-right: 30px;
mat-spinner {
position: absolute;
@ -41,5 +42,5 @@ mat-form-field {
.login-form {
padding-top: 60px;
margin: 0 auto;
max-width: 600px;
max-width: 400px;
}

View File

@ -26,25 +26,62 @@
</mat-expansion-panel-header>
<div class='meta-info-panel-body'>
<h3 translate *ngIf="motion.submitterName">Submitters</h3>
{{motion.submitterName}}
<div *ngIf="motion.submitterName">
<h3 translate>Submitters</h3>
{{motion.submitterName}}
</div>
<h3 translate *ngIf='motion.supporters_id && motion.supporters_id.length > 0'>Supporters</h3>
<div *ngIf='motion.supporters_id && motion.supporters_id.length > 0'>
<h3>translate>Supporters</h3>
<!-- print all motion supporters -->
</div>
<h3 translate *ngIf='motion.state_id'>Status</h3>
{{motion.stateName}}
<div *ngIf='motion.state_id'>
<h3>
<a [matMenuTriggerFor]="stateMenu">
<span translate>Status</span>
<fa-icon icon='cog'></fa-icon>
</a>
</h3>
{{motion.stateName}}
</div>
<h3 translate *ngIf='motion.recommendation_id'>{{motion.recomBy}}</h3>
<!-- config.get(motions_recommendations_by) -->
{{motion.recommendation}}
<div *ngIf='motion.recommendation_id'>
<h3>
<a [matMenuTriggerFor]="stateMenu">
<span>{{motion.recomBy}}</span>
<fa-icon icon='cog'></fa-icon>
</a>
</h3>
{{motion.recommendation}}
</div>
<h3 translate *ngIf="motion.category_id">Category</h3>
{{motion.category}}
<div *ngIf="motion.category_id">
<h3>
<a [matMenuTriggerFor]="categoryMenu">
<span translate>Category</span>
<fa-icon icon='cog'></fa-icon>
</a>
</h3>
{{motion.category}}
</div>
<h3 translate *ngIf="motion.origin">Origin</h3>
{{motion.origin}}
<div *ngIf="motion.origin">
<h3>
<span translate>Origin</span>
<fa-icon icon='cog'></fa-icon>
</h3>
<span>{{motion.origin}}</span>
<h3 translate *ngIf='motion.polls && motion.polls.length > 0'>Voting</h3>
<br>
<mat-form-field>
<input matInput #origin placeholder='Origin' value={{motion.origin}}>
</mat-form-field>
</div>
<div *ngIf='motion.polls && motion.polls.length > 0'>
<h3 translate>Voting</h3>
</div>
</div>
</mat-expansion-panel>
<!-- <mat-expansion-panel [expanded]='true'> -->
@ -72,4 +109,16 @@
<div [innerHtml]='motion.currentReason'></div>
</mat-expansion-panel>
</mat-accordion>
</mat-accordion>
<!-- dummy values -->
<mat-menu #stateMenu="matMenu">
<button mat-menu-item translate>Accept</button>
<button mat-menu-item translate>Reject</button>
<button mat-menu-item translate>Do not decice</button>
</mat-menu>
<mat-menu #categoryMenu="matMenu">
<button mat-menu-item translate>B - Bildung</button>
<button mat-menu-item translate>T - Test</button>
</mat-menu>

View File

@ -21,12 +21,36 @@ mat-panel-title {
.meta-info-panel {
padding-top: 25px;
a:hover {
cursor: pointer;
}
h3 {
display: block;
margin-top: 12px; //distance between heading and text
margin-bottom: 3px; //distance between heading and text
font-size: 80%;
color: gray;
fa-icon {
margin-left: 5px;
}
}
mat-form-field {
margin-top: 12px; //distance between heading and text
}
.mat-form-field-label {
font-size: 12pt;
color: gray;
}
.mat-form-field-label-wrapper {
fa-icon {
margin-left: 5px;
}
}
.meta-info-panel-body {

View File

@ -27,6 +27,7 @@ export class MotionDetailComponent extends BaseComponent implements OnInit {
if (newModel.id === +params.id) {
this.motion = newModel as Motion;
console.log('this.motion = ', this.motion);
// console.log('motion state name: ', this.motion.stateName);
}
}
});
@ -35,6 +36,7 @@ export class MotionDetailComponent extends BaseComponent implements OnInit {
ngOnInit() {
console.log('(init)the motion: ', this.motion);
console.log('motion state name: ', this.motion.stateName);
}
downloadSingleMotionButton() {

View File

@ -0,0 +1,27 @@
<mat-toolbar color='primary'>
<span class='app-name on-transition-fade' translate>Privacy Policy</span>
</mat-toolbar>
<mat-card class="os-card on-transition-fade">
<div>
OpenSlides speichert nur so viele personenbezogene Daten wie unbedingt nötig sind, um Besuchern Informationen und Dienste
zuverlässig und sicher anbieten zu können. Eine Auswertung der Dienste-Protokolle erfolgt nur von uns selbst und
auch nur, um mögliche Fehler, Einbruchsversuche oder technisches Verhalten der Server auf unseren Server zu analysieren.
Eine Weitergabe von Teilen der erhobenen Daten erfolgt ausschließlich gemäß gesetzlicher Verpflichtung z.B. an Strafverfolgungs-
oder Steuerbehörden. Nachfolgend wird genau aufgeschlüsselt, bei welcher Gelegenheit welche Daten wie lange gespeichert
sind. Zudem wird beschrieben, welche Schritte erforderlich sind um Daten zu löschen.
<h3 translate>Cookies</h3>
Beim Besuch der Website wird ein sogenanntes Cookie angelegt. Dieses Cookie wird ausschließlich dazu verwendet, um auf der
Website eingeloggt zu bleiben. Ein sogenanntes "Tracking Cookie" wird nicht verwendet.
<h3 translate>Logfiles</h3>
Zu OpenSlides gehören verschiedene Unter-Services. Diese loggen folgende Informationen: Quell-IP-Adresse, Zeitstempel, genutztes
Betriebssystem, verwendeter Web-Browser, Referer-URL, E-Mail-Adresse und besuchte Seite.
<h3 translate>Database</h3>
Als Mitglied werden folgende Daten von Ihnen gespeichert: Titel, Vorname, Nachname, EMail, Gliederungsebene, Teilnehmernummer,
Gruppenzugehörigkeit, Initiales Passwort im Klartext, Vergebenes Passwort als kryptografischer Hashwert und ein Kommentar
für interne Notizen. Diese Informationen werden mit den Aktionen innerhalb von OpenSlides in Verbindung gebracht.
Diese Informationen werden nicht an Dritte weiter gegeben und sind auch nicht für diese zugänglich.
<h3 translate>Deleting Files</h3>
Die Daten dieser OpenSlides-Demo-Instanz werden nächtlich automatisch gelöscht.
</div>
</mat-card>

View File

@ -1,19 +1,19 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { PrivacyPolicyDialogComponent } from './privacy-policy.dialog.component';
import { PrivacyPolicyComponent } from './privacy-policy.component';
describe('PrivacyPolicyDialogComponent', () => {
let component: PrivacyPolicyDialogComponent;
let fixture: ComponentFixture<PrivacyPolicyDialogComponent>;
describe('PrivacyPolicyComponent', () => {
let component: PrivacyPolicyComponent;
let fixture: ComponentFixture<PrivacyPolicyComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [PrivacyPolicyDialogComponent]
declarations: [PrivacyPolicyComponent]
}).compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(PrivacyPolicyDialogComponent);
fixture = TestBed.createComponent(PrivacyPolicyComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});

View File

@ -0,0 +1,12 @@
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-privacy-policy',
templateUrl: './privacy-policy.component.html',
styleUrls: ['./privacy-policy.component.scss']
})
export class PrivacyPolicyComponent implements OnInit {
constructor() {}
ngOnInit() {}
}

View File

@ -4,6 +4,8 @@ import { Routes, RouterModule } from '@angular/router';
import { SiteComponent } from './site.component';
import { StartComponent } from './start/start.component';
import { PrivacyPolicyComponent } from './privacy-policy/privacy-policy.component';
import { LegalNoticeComponent } from './legal-notice/legal-notice.component';
// import { LoginComponent } from './login/login.component';
/**
@ -18,6 +20,8 @@ const routes: Routes = [
component: SiteComponent,
children: [
{ path: '', component: StartComponent },
{ path: 'legalnotice', component: LegalNoticeComponent },
{ path: 'privacypolicy', component: PrivacyPolicyComponent },
{ path: 'agenda', loadChildren: './agenda/agenda.module#AgendaModule' },
{
path: 'assignments',

View File

@ -72,16 +72,29 @@
<fa-icon icon='cog'></fa-icon>
<span translate>Settings</span>
</a>
<mat-divider></mat-divider>
<a [@navItemAnim] *appOsPerms="['core.can_see_projector']" mat-list-item routerLink='/projector' routerLinkActive='active'
(click)='isMobile ? sideNav.toggle() : null'>
<fa-icon icon='video'></fa-icon>
<span translate>Projector</span>
</a>
</mat-nav-list>
<footer>
<button mat-button (click)='openLegalNotice()'>
<span translate>Legal Notice</span>
<button mat-button>
<a routerLink='/legalnotice' (click)='isMobile ? sideNav.toggle() : null'>
<span translate>Legal Notice</span>
</a>
</button>
<button mat-button (click)='openPrivacyPolicy()'>
<button mat-button>
<a routerLink='/privacypolicy' (click)='isMobile ? sideNav.toggle() : null'>
<span translate>Privacy Policy</span>
</a>
</button>
<!-- <button mat-button (click)='openPrivacyPolicy()'>
<span translate>Privacy Policy</span>
</button>
</button> -->
<br>
<span align="center">© Copyright by
<a href='https://openslides.org/'>OpenSlides</a>
@ -103,16 +116,10 @@
<button mat-icon-button (click)='sideNav.toggle()'>
<fa-icon icon='search'></fa-icon>
</button>
</mat-toolbar>
<!-- continue with <mat-toolbar> in the app-->
<main [@pageTransition]="o.isActivated ? o.activatedRoute : ''">
<router-outlet #o="outlet"></router-outlet>
</main>
<!-- the global projector button -->
<!-- <button class='projector-button' mat-fab>
<fa-icon icon='video'></fa-icon>
</button> -->
</mat-sidenav-container>

View File

@ -10,8 +10,6 @@ import { TranslateService } from '@ngx-translate/core'; //showcase
import { BaseComponent } from 'app/base.component';
import { pageTransition, navItemAnim } from 'app/shared/animations';
import { MatDialog } from '@angular/material';
import { LegalnoticeDialogComponent } from '../shared/components/legal-notice/legal-notice.dialog.component';
import { PrivacyPolicyDialogComponent } from '../shared/components/privacy-policy/privacy-policy.dialog.component';
@Component({
selector: 'app-site',
@ -112,18 +110,4 @@ export class SiteComponent extends BaseComponent implements OnInit {
this.authService.logout().subscribe();
this.router.navigate(['/login']);
}
/**
* Opens the legal notice as dialog
*/
openLegalNotice() {
const dialogRef = this.dialog.open(LegalnoticeDialogComponent);
}
/**
* Opens the privacy Policy as dialog
*/
openPrivacyPolicy() {
const dialogRef = this.dialog.open(PrivacyPolicyDialogComponent);
}
}

View File

@ -7,9 +7,11 @@ import { TranslateModule } from '@ngx-translate/core';
import { SiteComponent } from './site.component';
import { StartComponent } from './start/start.component';
import { LegalNoticeComponent } from './legal-notice/legal-notice.component';
import { PrivacyPolicyComponent } from './privacy-policy/privacy-policy.component';
@NgModule({
imports: [CommonModule, SharedModule, SiteRoutingModule, TranslateModule.forChild()],
declarations: [SiteComponent, StartComponent]
declarations: [SiteComponent, StartComponent, LegalNoticeComponent, PrivacyPolicyComponent]
})
export class SiteModule {}