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

Projector detail template improvements

Browse Source
This commit is contained in:
Emanuel Schütze 2019-02-28 21:39:05 +01:00
parent 587a0fe443
commit 2257991aba
7 changed files with 98 additions and 70 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;
left: 50px;
top: 50px;
line-height: 1.5em;
}
}

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>
</button>
<!-- Project -->
<button mat-menu-item *osPerms="'core.can_manage_projector'">
<mat-icon>videocam</mat-icon>
<span translate>Project</span>
</button>
<os-projector-button [object]="motion" [menuItem]="true" *osPerms="'core.can_manage_projector'"></os-projector-button>
<!-- New amendment -->
<button mat-menu-item (click)="createAmendment()" *ngIf="perms.isAllowed('can_create_amendments', motion)">
<mat-icon>add</mat-icon>

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

@ -14,36 +14,37 @@
</a>
<!-- Controls under the projector preview -->
<div class="control-group projector-controls">
<!-- scaling indicator -->
<div class="button-size">{{ projector.scale }}</div>
<!-- scale up -->
<button type="button" mat-icon-button (click)="scale(scrollScaleDirection.Up)">
<mat-icon>zoom_in</mat-icon>
</button>
<!-- scale down -->
<button type="button" mat-icon-button (click)="scale(scrollScaleDirection.Down)">
<mat-icon>zoom_out</mat-icon>
</button>
<!-- scroll indicator -->
<div class="button-size">{{ projector.scroll }}</div>
<!-- reset button -->
<button type="button" mat-icon-button (click)="scale(scrollScaleDirection.Reset)">
<mat-icon>refresh</mat-icon>
</button>
<!-- scaling indicator -->
<div class="button-size" [ngClass]="projector.scale != 0 ? 'warn' : ''">{{ projector.scale }}</div>
<!-- scroll down -->
<button type="button" mat-icon-button (click)="scroll(scrollScaleDirection.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>
<!-- refresh 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>
<div class="column-right" *osPerms="'core.can_manage_projector'">
@ -72,11 +73,18 @@
<div>
<div *ngIf="projector.non_stable_elements.length">
<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)">
<mat-icon>videocam</mat-icon>
</button>
{{ 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>
</div>
@ -84,7 +92,7 @@
<!-- Expandable elements -->
<mat-accordion multi="true">
<!-- Queue -->
<mat-expansion-panel *ngIf="projector.elements_preview.length" [expanded]="true">
<mat-expansion-panel *ngIf="projector.elements_preview.length" [expanded]="true" class="queue">
<mat-expansion-panel-header>
<span translate>Queue</span>
</mat-expansion-panel-header>
@ -96,7 +104,7 @@
(cdkDropListDropped)="onSortingChange($event)"
>
<div
class="drop-list-entry"
class="drop-list-entry queue-element backgroundColorLight"
*ngFor="let element of projector.elements_preview; let i = index"
cdkDrag
>
@ -104,7 +112,7 @@
<mat-icon>drag_indicator</mat-icon>
</div>
<div class="drag-handle" *ngIf="!editQueue">
<button type="button" mat-mini-fab (click)="projectNow(i)">
<button type="button" mat-icon-button (click)="projectNow(i)">
<mat-icon>videocam</mat-icon>
</button>
</div>
@ -121,14 +129,17 @@
</div>
</div>
<mat-action-row>
<button type="button" mat-icon-button (click)="editQueue = !editQueue">
<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">
<mat-expansion-panel *ngIf="projector.elements_history.length" class="previous-slides">
<mat-expansion-panel-header>
<span translate>History</span>
</mat-expansion-panel-header>
@ -192,17 +203,17 @@
<button type="button" mat-icon-button (click)="toggleClos(true)">
<mat-icon>videocam</mat-icon>
</button>
<span translate>Current list of speakers overlay</span>
<span translate>Overlay</span>
</mat-list-item>
</mat-list>
<!-- Current Speaker -->
<mat-list *ngIf="!isClosProjected(false)">
<mat-list-item>
<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>Current list of speakers slide</span>
<span translate>Slide</span>
</mat-list-item>
</mat-list>
@ -212,7 +223,7 @@
<button type="button" mat-icon-button (click)="toggleChyron()">
<mat-icon>videocam</mat-icon>
</button>
<span translate>Current speaker chyron</span>
<span translate>Chyron</span>
</mat-list-item>
</mat-list>
</mat-expansion-panel>

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

@ -30,7 +30,7 @@
color: rgba(0, 0, 0, 0.5);
.button-size {
width: 40px;
padding-left: 5px;
display: inline-block;
}
}
@ -43,6 +43,37 @@
text-align: right;
}
.currentElement {
margin-bottom: 20px;
box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.25);
.button-right {
position: absolute;
right: 10px;
}
}
.queue,
.previous-slides {
box-shadow: none !important;
background: none !important;
margin-bottom: 20px;
.queue-element {
margin-bottom: 5px;
}
.mat-expansion-panel-header {
padding: 0 5px 0 0 !important;
height: 36px !important;
}
.mat-action-row {
border-top-style: none;
padding: 0;
}
}
.drop-list {
width: 100%;
display: block;
@ -53,8 +84,6 @@
display: table;
min-height: 50px;
width: 100%;
border-bottom: solid 1px #ccc;
color: rgba(0, 0, 0, 0.87);
.drag-handle {
display: table-cell;
@ -66,11 +95,6 @@
cursor: move;
}
.name {
display: table-cell;
vertical-align: middle;
}
.button-right {
display: table-cell;
padding-right: 10px;
@ -82,6 +106,11 @@
float: right;
}
}
.name {
display: table-cell;
vertical-align: middle;
}
}
.drop-list-entry:last-child {

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

@ -19,7 +19,7 @@
color: mat-color($primary);
}
.accent-text {
.accent, .accent-text {
color: mat-color($accent);
}
@ -42,7 +42,7 @@
font-size: 75%;
display: block;
}
.error {
.error, .warn {
color: mat-color($warn);
}
@ -75,4 +75,13 @@
background-color: mat-color($primary);
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/
// default values fir mat-palette: $default: 500, $lighter: 100, $darker: 700.
$openslides-primary: mat-palette($openslides-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);

16
client/src/styles.scss
View File

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