ag-admin/OpenSlides
0
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge pull request #4436 from tsiegleauq/projector-detail-ui

Browse Source 
Clean projector detail interface
This commit is contained in:
Emanuel Schütze 2019-02-28 22:29:29 +01:00 committed by GitHub
commit f8e0718a22
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 331 additions and 233 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
client/src/app/shared/components/slide-container/slide-container.component.scss
View File

@ -7,6 +7,7 @@
position: absolute; position: absolute;
left: 50px; left: 50px;
top: 50px; top: 50px;
line-height: 1.5em;
} }
} }

17
client/src/app/shared/components/sorting-list/sorting-list.component.scss
View File

@ -1,3 +1,5 @@
@import '../../../../assets/styles/drag.scss';
.box { .box {
width: 100%; width: 100%;
border-bottom: solid 1px #ccc; border-bottom: solid 1px #ccc;
@ -5,21 +7,6 @@
font-size: 14px; font-size: 14px;
} }
.cdk-drag-preview {
box-sizing: border-box;
border-radius: 4px;
box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14),
0 3px 14px 2px rgba(0, 0, 0, 0.12);
}
.cdk-drag-placeholder {
opacity: 0;
}
.cdk-drag-animating {
transition: transform 125ms ease-in-out;
}
.box:last-child { .box:last-child {
border: none; border: none;
} }

5
client/src/app/site/motions/components/motion-detail/motion-detail.component.html
View File

@ -72,10 +72,7 @@
<span translate>List of speakers</span> <span translate>List of speakers</span>
</button> </button>
<!-- Project --> <!-- Project -->
<button mat-menu-item *osPerms="'core.can_manage_projector'"> <os-projector-button [object]="motion" [menuItem]="true" *osPerms="'core.can_manage_projector'"></os-projector-button>
<mat-icon>videocam</mat-icon>
<span translate>Project</span>
</button>
<!-- New amendment --> <!-- New amendment -->
<button mat-menu-item (click)="createAmendment()" *ngIf="perms.isAllowed('can_create_amendments', motion)"> <button mat-menu-item (click)="createAmendment()" *ngIf="perms.isAllowed('can_create_amendments', motion)">
<mat-icon>add</mat-icon> <mat-icon>add</mat-icon>

279
client/src/app/site/projector/components/projector-detail/projector-detail.component.html
View File

@ -12,152 +12,115 @@
<os-projector [projector]="projector"></os-projector> <os-projector [projector]="projector"></os-projector>
</div> </div>
</a> </a>
</div> <!-- Controls under the projector preview -->
<div class="column-right" *osPerms="'core.can_manage_projector'"> <div class="control-group projector-controls">
<div class="control-group">
<div class="button-size">{{ projector.scroll }}</div> <!-- scale up -->
<button type="button" mat-icon-button (click)="scroll(scrollScaleDirection.Up)">
<mat-icon>arrow_upward</mat-icon>
</button>
<button type="button" mat-icon-button (click)="scroll(scrollScaleDirection.Down)">
<mat-icon>arrow_downward</mat-icon>
</button>
<button type="button" mat-icon-button (click)="scroll(scrollScaleDirection.Reset)">
<mat-icon>refresh</mat-icon>
</button>
</div>
<div class="control-group">
<div class="button-size">{{ projector.scale }}</div>
<button type="button" mat-icon-button (click)="scale(scrollScaleDirection.Up)"> <button type="button" mat-icon-button (click)="scale(scrollScaleDirection.Up)">
<mat-icon>zoom_in</mat-icon> <mat-icon>zoom_in</mat-icon>
</button> </button>
<!-- scale down -->
<button type="button" mat-icon-button (click)="scale(scrollScaleDirection.Down)"> <button type="button" mat-icon-button (click)="scale(scrollScaleDirection.Down)">
<mat-icon>zoom_out</mat-icon> <mat-icon>zoom_out</mat-icon>
</button> </button>
<!-- reset button -->
<button type="button" mat-icon-button (click)="scale(scrollScaleDirection.Reset)"> <button type="button" mat-icon-button (click)="scale(scrollScaleDirection.Reset)">
<mat-icon>refresh</mat-icon> <mat-icon>refresh</mat-icon>
</button> </button>
<!-- scaling indicator -->
<div class="button-size" [ngClass]="projector.scale != 0 ? 'warn' : ''">{{ projector.scale }}</div>
<!-- scroll down -->
<button type="button" class="spacer-left-40" mat-icon-button (click)="scroll(scrollScaleDirection.Down)">
<mat-icon>arrow_downward</mat-icon>
</button>
<!-- scroll up -->
<button type="button" mat-icon-button (click)="scroll(scrollScaleDirection.Up)">
<mat-icon>arrow_upward</mat-icon>
</button>
<!-- reset button -->
<button type="button" mat-icon-button (click)="scroll(scrollScaleDirection.Reset)">
<mat-icon>refresh</mat-icon>
</button>
<!-- scroll indicator -->
<div class="button-size" [ngClass]="projector.scroll != 0 ? 'warn' : ''">{{ projector.scroll }}</div>
</div> </div>
<hr> </div>
<div class="control-group"> <div class="column-right" *osPerms="'core.can_manage_projector'">
<button type="button" mat-button (click)="projectPreviousSlide()" [disabled]="projector?.elements_history.length === 0"> <div class="control-group slide-controls">
<button
type="button"
mat-button
(click)="projectPreviousSlide()"
[disabled]="projector?.elements_history.length === 0"
>
<mat-icon>arrow_back</mat-icon> <mat-icon>arrow_back</mat-icon>
<span translate>Previous</span> <span translate>Previous</span>
</button> </button>
<button type="button" mat-button (click)="projectNextSlide()" [disabled]="projector?.elements_preview.length === 0"> <button
type="button"
mat-button
(click)="projectNextSlide()"
[disabled]="projector?.elements_preview.length === 0"
>
<span translate>Next</span> <span translate>Next</span>
<mat-icon>arrow_forward</mat-icon> <mat-icon>arrow_forward</mat-icon>
</button> </button>
</div> <hr />
<div class="queue" *ngIf="projector.elements_history.length">
<h5 translate>History</h5>
<p *ngFor="let elements of projector.elements_history">
{{ getSlideTitle(elements[0]) }}
</p>
</div> </div>
<div> <div>
<h5 translate>Current</h5>
<div *ngIf="projector.non_stable_elements.length"> <div *ngIf="projector.non_stable_elements.length">
<h4 translate>Slides</h4>
<mat-list> <mat-list>
<mat-list-item *ngFor="let element of projector.non_stable_elements" class="projected"> <mat-list-item *ngFor="let element of projector.non_stable_elements" class="currentElement backgroundColorAccent">
<button type="button" mat-icon-button (click)="unprojectCurrent(element)"> <button type="button" mat-icon-button (click)="unprojectCurrent(element)">
<mat-icon>videocam</mat-icon> <mat-icon>videocam</mat-icon>
</button> </button>
{{ getSlideTitle(element) }} {{ getSlideTitle(element) }}
</mat-list-item> <div class="button-right">
</mat-list>
</div>
<div *ngIf="countdowns.length">
<h4>
<span translate>Countdowns</span>
<button type="button" mat-icon-button disableRipple routerLink="/projectors/countdowns">
<mat-icon>edit</mat-icon>
</button>
</h4>
<mat-list>
<mat-list-item *ngFor="let countdown of countdowns" [ngClass]="{'projected': isProjected(countdown)}">
<button type="button" mat-icon-button (click)="project(countdown)">
<mat-icon>videocam</mat-icon>
</button>
{{ countdown.description }}
</mat-list-item>
</mat-list>
</div>
<div *ngIf="messages.length">
<h4>
<span translate>Messages</span>
<button type="button" mat-icon-button disableRipple routerLink="/projectors/messages">
<mat-icon>edit</mat-icon>
</button>
</h4>
<mat-list>
<mat-list-item *ngFor="let message of messages" [ngClass]="{'projected': isProjected(message)}">
<button type="button" mat-icon-button (click)="project(message)">
<mat-icon>videocam</mat-icon>
</button>
<span>{{ message.getPreview(40) }}</span>
</mat-list-item>
</mat-list>
</div>
<div> <div>
<h4>Current list of speakers overlay</h4> <button type="button" mat-icon-button (click)="unprojectCurrent(element)">
<mat-list> <mat-icon>close</mat-icon>
<mat-list-item [ngClass]="{'projected': isClosProjected(true)}">
<button type="button" mat-icon-button (click)="toggleClos(true)">
<mat-icon>videocam</mat-icon>
</button> </button>
<span translate>Current list of speakers overlay</span> </div>
</div>
</mat-list-item> </mat-list-item>
</mat-list> </mat-list>
</div> </div>
<div *ngIf="!isClosProjected(false)"> <!-- Expandable elements -->
<h4>Current list of speakers slide</h4> <mat-accordion multi="true">
<mat-list> <!-- Queue -->
<mat-list-item> <mat-expansion-panel *ngIf="projector.elements_preview.length" [expanded]="true" class="queue">
<button type="button" mat-icon-button (click)="toggleClos(false)"> <mat-expansion-panel-header>
<mat-icon>videocam</mat-icon> <span translate>Queue</span>
</button> </mat-expansion-panel-header>
<span translate>Current list of speakers slide</span>
</mat-list-item>
</mat-list>
</div>
</div>
<div> <div
<h4>Current speaker chyron</h4> cdkDropList
<mat-list> class="drop-list"
<mat-list-item [ngClass]="{'projected': isChyronProjected()}"> [cdkDropListDisabled]="!editQueue"
<button type="button" mat-icon-button (click)="toggleChyron()"> (cdkDropListDropped)="onSortingChange($event)"
<mat-icon>videocam</mat-icon> >
</button> <div
<span translate>Current speaker chyron</span> class="drop-list-entry queue-element backgroundColorLight"
</mat-list-item> *ngFor="let element of projector.elements_preview; let i = index"
</mat-list> cdkDrag
</div> >
<div class="drag-handle" cdkDragHandle *ngIf="editQueue">
<div class="queue" *ngIf="projector.elements_preview.length">
<h5 translate>Queue</h5>
<div cdkDropList class="drop-list" (cdkDropListDropped)="onSortingChange($event)">
<div class="list-entry" *ngFor="let element of projector.elements_preview; let i = index" cdkDrag>
<div class="drag-handle" cdkDragHandle>
<mat-icon>drag_indicator</mat-icon> <mat-icon>drag_indicator</mat-icon>
</div> </div>
<div class="drag-handle" *ngIf="!editQueue">
<button type="button" mat-icon-button (click)="projectNow(i)">
<mat-icon>videocam</mat-icon>
</button>
</div>
<div class="name"> <div class="name">
{{ i + 1 }}.&nbsp;<span>{{ getSlideTitle(element) }}</span> {{ i + 1 }}.&nbsp;<span>{{ getSlideTitle(element) }}</span>
</div> </div>
<div class="button-right"> <div class="button-right" *ngIf="editQueue">
<div> <div>
<button type="button" mat-button (click)="projectNow(i)">
<span translate>Project now</span>
</button>
<button type="button" mat-icon-button (click)="removePreviewElement(i)"> <button type="button" mat-icon-button (click)="removePreviewElement(i)">
<mat-icon>close</mat-icon> <mat-icon>close</mat-icon>
</button> </button>
@ -165,6 +128,106 @@
</div> </div>
</div> </div>
</div> </div>
<mat-action-row>
<button *ngIf="!editQueue" type="button" mat-icon-button (click)="editQueue = !editQueue">
<mat-icon>edit</mat-icon>
</button>
<button *ngIf="editQueue" type="button" mat-icon-button (click)="editQueue = !editQueue">
<mat-icon>close</mat-icon>
</button>
</mat-action-row>
</mat-expansion-panel>
<!-- Previous Slides -->
<mat-expansion-panel *ngIf="projector.elements_history.length" class="previous-slides">
<mat-expansion-panel-header>
<span translate>History</span>
</mat-expansion-panel-header>
<p *ngFor="let elements of projector.elements_history; let i = index">
{{ i + 1 }}. {{ getSlideTitle(elements[0]) }}
</p>
</mat-expansion-panel>
<!-- countdowns -->
<mat-expansion-panel *ngIf="countdowns.length">
<mat-expansion-panel-header>
<span translate>Countdowns</span>
</mat-expansion-panel-header>
<mat-list>
<mat-list-item
*ngFor="let countdown of countdowns"
[ngClass]="{ projected: isProjected(countdown) }"
>
<button type="button" mat-icon-button (click)="project(countdown)">
<mat-icon>videocam</mat-icon>
</button>
{{ countdown.description }}
</mat-list-item>
</mat-list>
<mat-action-row>
<button type="button" mat-icon-button routerLink="/projectors/countdowns">
<mat-icon>edit</mat-icon>
</button>
</mat-action-row>
</mat-expansion-panel>
<!-- messages -->
<mat-expansion-panel *ngIf="messages.length">
<mat-expansion-panel-header>
<span translate>Messages</span>
</mat-expansion-panel-header>
<mat-list>
<mat-list-item *ngFor="let message of messages" [ngClass]="{ projected: isProjected(message) }">
<button type="button" mat-icon-button (click)="project(message)">
<mat-icon>videocam</mat-icon>
</button>
<span>{{ message.getPreview(40) }}</span>
</mat-list-item>
</mat-list>
<mat-action-row>
<button type="button" mat-icon-button routerLink="/projectors/messages">
<mat-icon>edit</mat-icon>
</button>
</mat-action-row>
</mat-expansion-panel>
<!-- Current List of Speakers -->
<mat-expansion-panel>
<mat-expansion-panel-header>
<span translate>Current list of speakers</span>
</mat-expansion-panel-header>
<!-- Overlay -->
<mat-list>
<mat-list-item [ngClass]="{ projected: isClosProjected(true) }">
<button type="button" mat-icon-button (click)="toggleClos(true)">
<mat-icon>videocam</mat-icon>
</button>
<span translate>Overlay</span>
</mat-list-item>
</mat-list>
<!-- Current Speaker -->
<mat-list>
<mat-list-item [ngClass]="{ projected: isClosProjected(false) }">
<button type="button" mat-icon-button (click)="toggleClos(false)">
<mat-icon>videocam</mat-icon>
</button>
<span translate>Slide</span>
</mat-list-item>
</mat-list>
<!-- Chyron -->
<mat-list>
<mat-list-item [ngClass]="{ projected: isChyronProjected() }">
<button type="button" mat-icon-button (click)="toggleChyron()">
<mat-icon>videocam</mat-icon>
</button>
<span translate>Chyron</span>
</mat-list-item>
</mat-list>
</mat-expansion-panel>
</mat-accordion>
</div> </div>
</div> </div>
</div> </div>

70
client/src/app/site/projector/components/projector-detail/projector-detail.component.scss
View File

@ -1,3 +1,5 @@
@import '../../../../../assets/styles/drag.scss';
#projector { #projector {
width: 100%; /*1000px;*/ width: 100%; /*1000px;*/
border: 1px solid lightgrey; border: 1px solid lightgrey;
@ -25,42 +27,63 @@
} }
.control-group { .control-group {
text-align: center; color: rgba(0, 0, 0, 0.5);
color: rgba(0, 0, 0, 0.54);
.button-size { .button-size {
width: 40px; padding-left: 5px;
display: inline-block; display: inline-block;
} }
} }
h4 { .slide-controls {
margin-top: 5px; text-align: center;
}
button { .projector-controls {
width: 20px; text-align: right;
height: 20px; }
.currentElement {
margin-bottom: 20px;
box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.25);
.button-right {
position: absolute;
right: 10px;
} }
} }
h5 { .queue,
margin-bottom: 0; .previous-slides {
box-shadow: none !important;
background: none !important;
margin-bottom: 20px;
.queue-element {
margin-bottom: 5px;
} }
.queue { .mat-expansion-panel-header {
margin-top: 15px; padding: 0 5px 0 0 !important;
height: 36px !important;
}
.mat-action-row {
border-top-style: none;
padding: 0;
}
}
.drop-list { .drop-list {
width: 100%; width: 100%;
display: block; display: block;
overflow: hidden; overflow: hidden;
}
.list-entry { .drop-list-entry {
display: table; display: table;
min-height: 50px; min-height: 50px;
width: 100%; width: 100%;
border-bottom: solid 1px #ccc;
color: rgba(0, 0, 0, 0.87);
.drag-handle { .drag-handle {
display: table-cell; display: table-cell;
@ -72,11 +95,6 @@ h5 {
cursor: move; cursor: move;
} }
.name {
display: table-cell;
vertical-align: middle;
}
.button-right { .button-right {
display: table-cell; display: table-cell;
padding-right: 10px; padding-right: 10px;
@ -88,10 +106,18 @@ h5 {
float: right; float: right;
} }
} }
.name {
display: table-cell;
vertical-align: middle;
}
} }
.list-entry:last-child { .drop-list-entry:last-child {
border: none; border: none;
} }
}
// move away from preview.
.drop-list.cdk-drop-list-dragging .drop-list-entry:not(.cdk-drag-placeholder) {
transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
} }

5
client/src/app/site/projector/components/projector-detail/projector-detail.component.ts
View File

@ -43,6 +43,11 @@ export class ProjectorDetailComponent extends BaseViewComponent implements OnIni
public messages: ViewProjectorMessage[] = []; public messages: ViewProjectorMessage[] = [];
/**
* true if the queue might be altered
*/
public editQueue = false;
/** /**
* @param titleService * @param titleService
* @param translate * @param translate

29
client/src/assets/styles/drag.scss Normal file
View File

@ -0,0 +1,29 @@
//shared CSS rules that are required for all components that implement drag and drop
/**
* Moving list entries away from preview cannot be stored in this scss file, cause the naming
* of the css classes is relevant. Use it like the following.
*
* transform can somehow not be stored as css variable
*
* @example
* ```css
* .drop-list.cdk-drop-list-dragging .list-entry:not(.cdk-drag-placeholder) {
* transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
* }
*/
.cdk-drag-preview {
box-sizing: border-box;
border-radius: 4px;
background-color: white;
box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14),
0 3px 14px 2px rgba(0, 0, 0, 0.12);
}
.cdk-drag-placeholder {
opacity: 0;
}
.cdk-drag-animating {
transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}

13
client/src/assets/styles/global-components-style.scss
View File

@ -19,7 +19,7 @@
color: mat-color($primary); color: mat-color($primary);
} }
.accent-text { .accent, .accent-text {
color: mat-color($accent); color: mat-color($accent);
} }
@ -42,7 +42,7 @@
font-size: 75%; font-size: 75%;
display: block; display: block;
} }
.error { .error, .warn {
color: mat-color($warn); color: mat-color($warn);
} }
@ -75,4 +75,13 @@
background-color: mat-color($primary); background-color: mat-color($primary);
color: white; // TODO color: white; // TODO
} }
.backgroundColorAccent {
background-color: mat-color($accent);
color: mat-color($accent, default-contrast) !important;
}
.backgroundColorLight {
background-color: mat-color($background, status-bar);
color: mat-color($foreground, text) !important;
}
} }

35
client/src/assets/styles/openslides-theme.scss
View File

@ -32,46 +32,11 @@ $openslides-blue: (
) )
); );
$openslides-green: (
50: #e9f2e6,
100: #c8e0bf,
200: #a3cb95,
300: #7eb66b,
400: #62a64b,
500: #46962b,
600: #3f8e26,
700: #0a321e,
800: #092d1a,
900: #072616,
A100: #acff9d,
A200: #80ff6a,
A400: #55ff37,
A700: #3fff1e,
contrast: (
50: #000000,
100: #000000,
200: #000000,
300: #000000,
400: #000000,
500: #ffffff,
600: #ffffff,
700: #ffffff,
800: #ffffff,
900: #ffffff,
A100: #000000,
A200: #000000,
A400: #000000,
A700: #000000
)
);
// Generate paletes using: https://material.io/design/color/ // Generate paletes using: https://material.io/design/color/
// default values fir mat-palette: $default: 500, $lighter: 100, $darker: 700. // default values fir mat-palette: $default: 500, $lighter: 100, $darker: 700.
$openslides-primary: mat-palette($openslides-blue); $openslides-primary: mat-palette($openslides-blue);
$openslides-accent: mat-palette($mat-light-blue); $openslides-accent: mat-palette($mat-light-blue);
// $openslides-primary: mat-palette($openslides-green);
// $openslides-accent: mat-palette($mat-amber);
$openslides-warn: mat-palette($mat-red); $openslides-warn: mat-palette($mat-red);

16
client/src/styles.scss
View File

@ -409,6 +409,9 @@ button.mat-menu-item.selected {
.spacer-left-10 { .spacer-left-10 {
margin-left: 10px; margin-left: 10px;
} }
.spacer-left-40 {
margin-left: 40px !important;
}
.button24 { .button24 {
background-color: white; background-color: white;
@ -469,6 +472,12 @@ button.mat-menu-item.selected {
.center { .center {
text-align: center; text-align: center;
} }
.pointer:hover {
cursor: pointer;
}
.pointer.selected {
cursor: pointer;
}
/** Colors **/ /** Colors **/
.lightblue { .lightblue {
@ -638,3 +647,10 @@ button.mat-menu-item.selected {
.mat-cell > * { .mat-cell > * {
z-index: 2; z-index: 2;
} }
.queue {
.mat-expansion-panel-body {
padding: 0 !important;
}
}