Merge pull request #4436 from tsiegleauq/projector-detail-ui
Clean projector detail interface
This commit is contained in:
Emanuel Schütze
GitHub
commit
f8e0718a22
@ -7,6 +7,7 @@
|
|||||||
position: absolute;
|
position: absolute;
|
||||||
left: 50px;
|
left: 50px;
|
||||||
top: 50px;
|
top: 50px;
|
||||||
|
line-height: 1.5em;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -1,5 +1,5 @@
|
|||||||
<div cdkDropList class="os-card" (cdkDropListDropped)="drop($event)">
|
<div cdkDropList class="os-card" (cdkDropListDropped)="drop($event)">
|
||||||
<div class= "box line" *ngIf="!array.length">
|
<div class="box line" *ngIf="!array.length">
|
||||||
<span translate>No data</span>
|
<span translate>No data</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="box line" *ngFor="let item of array; let i = index" cdkDrag>
|
<div class="box line" *ngFor="let item of array; let i = index" cdkDrag>
|
||||||
|
|||||||
@ -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;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -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>
|
||||||
|
|||||||
@ -12,159 +12,222 @@
|
|||||||
<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) }}
|
||||||
|
<div class="button-right">
|
||||||
|
<div>
|
||||||
|
<button type="button" mat-icon-button (click)="unprojectCurrent(element)">
|
||||||
|
<mat-icon>close</mat-icon>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</mat-list-item>
|
</mat-list-item>
|
||||||
</mat-list>
|
</mat-list>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div *ngIf="countdowns.length">
|
<!-- Expandable elements -->
|
||||||
<h4>
|
<mat-accordion multi="true">
|
||||||
<span translate>Countdowns</span>
|
<!-- Queue -->
|
||||||
<button type="button" mat-icon-button disableRipple routerLink="/projectors/countdowns">
|
<mat-expansion-panel *ngIf="projector.elements_preview.length" [expanded]="true" class="queue">
|
||||||
<mat-icon>edit</mat-icon>
|
<mat-expansion-panel-header>
|
||||||
</button>
|
<span translate>Queue</span>
|
||||||
</h4>
|
</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>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div *ngIf="messages.length">
|
<div
|
||||||
<h4>
|
cdkDropList
|
||||||
<span translate>Messages</span>
|
class="drop-list"
|
||||||
<button type="button" mat-icon-button disableRipple routerLink="/projectors/messages">
|
[cdkDropListDisabled]="!editQueue"
|
||||||
<mat-icon>edit</mat-icon>
|
(cdkDropListDropped)="onSortingChange($event)"
|
||||||
</button>
|
>
|
||||||
</h4>
|
<div
|
||||||
<mat-list>
|
class="drop-list-entry queue-element backgroundColorLight"
|
||||||
<mat-list-item *ngFor="let message of messages" [ngClass]="{'projected': isProjected(message)}">
|
*ngFor="let element of projector.elements_preview; let i = index"
|
||||||
<button type="button" mat-icon-button (click)="project(message)">
|
cdkDrag
|
||||||
<mat-icon>videocam</mat-icon>
|
>
|
||||||
</button>
|
<div class="drag-handle" cdkDragHandle *ngIf="editQueue">
|
||||||
<span>{{ message.getPreview(40) }}</span>
|
<mat-icon>drag_indicator</mat-icon>
|
||||||
</mat-list-item>
|
</div>
|
||||||
</mat-list>
|
<div class="drag-handle" *ngIf="!editQueue">
|
||||||
</div>
|
<button type="button" mat-icon-button (click)="projectNow(i)">
|
||||||
|
<mat-icon>videocam</mat-icon>
|
||||||
<div>
|
</button>
|
||||||
<h4>Current list of speakers overlay</h4>
|
</div>
|
||||||
<mat-list>
|
<div class="name">
|
||||||
<mat-list-item [ngClass]="{'projected': isClosProjected(true)}">
|
{{ i + 1 }}. <span>{{ getSlideTitle(element) }}</span>
|
||||||
<button type="button" mat-icon-button (click)="toggleClos(true)">
|
</div>
|
||||||
<mat-icon>videocam</mat-icon>
|
<div class="button-right" *ngIf="editQueue">
|
||||||
</button>
|
<div>
|
||||||
<span translate>Current list of speakers overlay</span>
|
<button type="button" mat-icon-button (click)="removePreviewElement(i)">
|
||||||
</mat-list-item>
|
<mat-icon>close</mat-icon>
|
||||||
</mat-list>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
<div *ngIf="!isClosProjected(false)">
|
|
||||||
<h4>Current list of speakers slide</h4>
|
|
||||||
<mat-list>
|
|
||||||
<mat-list-item>
|
|
||||||
<button type="button" mat-icon-button (click)="toggleClos(false)">
|
|
||||||
<mat-icon>videocam</mat-icon>
|
|
||||||
</button>
|
|
||||||
<span translate>Current list of speakers slide</span>
|
|
||||||
</mat-list-item>
|
|
||||||
</mat-list>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<h4>Current speaker chyron</h4>
|
|
||||||
<mat-list>
|
|
||||||
<mat-list-item [ngClass]="{'projected': isChyronProjected()}">
|
|
||||||
<button type="button" mat-icon-button (click)="toggleChyron()">
|
|
||||||
<mat-icon>videocam</mat-icon>
|
|
||||||
</button>
|
|
||||||
<span translate>Current speaker chyron</span>
|
|
||||||
</mat-list-item>
|
|
||||||
</mat-list>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<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>
|
|
||||||
</div>
|
|
||||||
<div class="name">
|
|
||||||
{{ i+1 }}. <span>{{ getSlideTitle(element) }}</span>
|
|
||||||
</div>
|
|
||||||
<div class="button-right">
|
|
||||||
<div>
|
|
||||||
<button type="button" mat-button (click)="projectNow(i)">
|
|
||||||
<span translate>Project now</span>
|
|
||||||
</button>
|
|
||||||
<button type="button" mat-icon-button (click)="removePreviewElement(i)">
|
|
||||||
<mat-icon>close</mat-icon>
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<mat-action-row>
|
||||||
</div>
|
<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>
|
||||||
|
|||||||
@ -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,73 +27,97 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.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 {
|
.queue-element {
|
||||||
margin-top: 15px;
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
.drop-list {
|
.mat-expansion-panel-header {
|
||||||
width: 100%;
|
padding: 0 5px 0 0 !important;
|
||||||
display: block;
|
height: 36px !important;
|
||||||
overflow: hidden;
|
}
|
||||||
|
|
||||||
.list-entry {
|
.mat-action-row {
|
||||||
display: table;
|
border-top-style: none;
|
||||||
min-height: 50px;
|
padding: 0;
|
||||||
width: 100%;
|
|
||||||
border-bottom: solid 1px #ccc;
|
|
||||||
color: rgba(0, 0, 0, 0.87);
|
|
||||||
|
|
||||||
.drag-handle {
|
|
||||||
display: table-cell;
|
|
||||||
padding: 0 10px;
|
|
||||||
line-height: 0px;
|
|
||||||
vertical-align: middle;
|
|
||||||
width: 25px;
|
|
||||||
color: slategrey;
|
|
||||||
cursor: move;
|
|
||||||
}
|
|
||||||
|
|
||||||
.name {
|
|
||||||
display: table-cell;
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
|
|
||||||
.button-right {
|
|
||||||
display: table-cell;
|
|
||||||
padding-right: 10px;
|
|
||||||
vertical-align: middle;
|
|
||||||
width: auto;
|
|
||||||
white-space: nowrap;
|
|
||||||
|
|
||||||
div {
|
|
||||||
float: right;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.list-entry:last-child {
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.drop-list {
|
||||||
|
width: 100%;
|
||||||
|
display: block;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.drop-list-entry {
|
||||||
|
display: table;
|
||||||
|
min-height: 50px;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
.drag-handle {
|
||||||
|
display: table-cell;
|
||||||
|
padding: 0 10px;
|
||||||
|
line-height: 0px;
|
||||||
|
vertical-align: middle;
|
||||||
|
width: 25px;
|
||||||
|
color: slategrey;
|
||||||
|
cursor: move;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-right {
|
||||||
|
display: table-cell;
|
||||||
|
padding-right: 10px;
|
||||||
|
vertical-align: middle;
|
||||||
|
width: auto;
|
||||||
|
white-space: nowrap;
|
||||||
|
|
||||||
|
div {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.name {
|
||||||
|
display: table-cell;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.drop-list-entry:last-child {
|
||||||
|
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);
|
||||||
|
}
|
||||||
|
|||||||
@ -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
29
client/src/assets/styles/drag.scss
Normal 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);
|
||||||
|
}
|
||||||
@ -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;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -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);
|
||||||
|
|
||||||
|
|||||||
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user