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

Fix some z-level related issues

Browse Source 
Fixes some z-layer effects
This commit is contained in:
Sean Engelhardt 2019-03-20 12:45:34 +01:00
parent 94080df663
commit ca18d59ac3
14 changed files with 122 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
client/src/app/site/agenda/components/agenda-list/agenda-list.component.html
View File

@ -53,18 +53,20 @@
<ng-container matColumnDef="info">
<mat-header-cell *matHeaderCellDef mat-sort-header>Info</mat-header-cell>
<mat-cell (click)="openEditInfo(item, $event)" *matCellDef="let item">
<div class="info-col-items">
<div *osPerms="'agenda.can_manage';and:item.verboseType">
<mat-icon>visibility</mat-icon>
{{ item.verboseType | translate }}
</div>
<div *ngIf="item.duration">
<mat-icon>access_time</mat-icon>
{{ durationService.durationToString(item.duration, 'h') }}
</div>
<div *ngIf="item.comment">
<mat-icon>comment</mat-icon>
{{ item.comment }}
<div class="fill">
<div class="info-col-items">
<div *osPerms="'agenda.can_manage'; and: item.verboseType">
<mat-icon>visibility</mat-icon>
{{ item.verboseType | translate }}
</div>
<div *ngIf="item.duration">
<mat-icon>access_time</mat-icon>
{{ durationService.durationToString(item.duration, 'h') }}
</div>
<div *ngIf="item.comment">
<mat-icon>comment</mat-icon>
{{ item.comment }}
</div>
</div>
</div>
</mat-cell>
@ -74,8 +76,7 @@
<ng-container matColumnDef="speakers">
<mat-header-cell *matHeaderCellDef mat-sort-header>Speakers</mat-header-cell>
<mat-cell *matCellDef="let item">
<button mat-icon-button (click)="onSpeakerIcon(item, $event)"
[disabled]="isMultiSelect">
<button mat-icon-button (click)="onSpeakerIcon(item, $event)" [disabled]="isMultiSelect">
<mat-icon
[matBadge]="item.waitingSpeakerAmount > 0 ? item.waitingSpeakerAmount : null"
matBadgeColor="accent"

2
client/src/app/site/agenda/components/agenda-list/agenda-list.component.scss
View File

@ -1,3 +1,5 @@
@import '~assets/styles/tables.scss';
.os-listview-table {
/** Title */
.mat-column-title {

12
client/src/app/site/base/list-view-base.ts
View File

@ -165,6 +165,18 @@ export abstract class ListViewBaseComponent<V extends BaseViewModel, M extends B
}
}
/**
* row clicks that should be ignored.
* Required for buttons or check boxes in tables
*
* @param event click event
*/
public ignoreClick(event: MouseEvent): void {
if (!this.isMultiSelect) {
event.stopPropagation();
}
}
/**
* Method to perform an action on click on a row, if not in MultiSelect Modus.
* Should be overridden by implementations. Currently there is no default action.

2
client/src/app/site/mediafiles/components/mediafile-list/mediafile-list.component.scss
View File

@ -1,3 +1,5 @@
@import '~assets/styles/tables.scss';
.os-listview-table {
/** Projector button **/
.mat-column-projector {

2
client/src/app/site/motions/modules/motion-list/components/motion-list/motion-list.component.scss
View File

@ -1,3 +1,5 @@
@import '~assets/styles/tables.scss';
/** css hacks https://codepen.io/edge0703/pen/iHJuA */
.innerTable {
display: inline-block;

8
client/src/app/site/site.component.html
View File

@ -28,7 +28,7 @@
<mat-expansion-panel class="user-menu mat-elevation-z0">
<mat-expansion-panel-header class="username">
<!-- Get the username from operator -->
{{ username }}
<span *ngIf="username">{{ username }}</span>
</mat-expansion-panel-header>
<mat-nav-list>
<a mat-list-item [matMenuTriggerFor]="languageMenu">
@ -36,7 +36,11 @@
<span>{{ getLangName() }}</span>
</a>
<div *ngIf="isLoggedIn">
<a [routerLink]="operator.user ? ['/users/', operator.user.id] : []" (click)="mobileAutoCloseNav()" mat-list-item>
<a
[routerLink]="operator.user ? ['/users/', operator.user.id] : []"
(click)="mobileAutoCloseNav()"
mat-list-item
>
<mat-icon>person</mat-icon>
<span translate>Show profile</span>
</a>

8
client/src/app/site/site.component.scss
View File

@ -32,6 +32,14 @@ mat-sidenav-container {
}
}
.username {
span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.nav-toolbar {
display: flex;
margin: auto;

4
client/src/app/site/site.component.ts
View File

@ -15,6 +15,7 @@ import { MainMenuService } from '../core/core-services/main-menu.service';
import { OpenSlidesStatusService } from '../core/core-services/openslides-status.service';
import { TimeTravelService } from '../core/core-services/time-travel.service';
import { langToLocale } from 'app/shared/utils/lang-to-locale';
import { ConfigService } from 'app/core/ui-services/config.service';
@Component({
selector: 'os-site',
@ -60,6 +61,7 @@ export class SiteComponent extends BaseComponent implements OnInit {
public constructor(
title: Title,
translate: TranslateService,
configService: ConfigService,
private authService: AuthService,
private router: Router,
public operator: OperatorService,
@ -74,7 +76,7 @@ export class SiteComponent extends BaseComponent implements OnInit {
this.operator.getViewUserObservable().subscribe(user => {
if (user) {
this.username = user.short_name;
} else {
} else if (!user && configService.instant<boolean>('general_system_enable_anonymous')) {
this.username = translate.instant('Guest');
}
this.isLoggedIn = !!user;

36
client/src/app/site/users/components/user-list/user-list.component.html
View File

@ -43,25 +43,29 @@
<!-- name column -->
<ng-container matColumnDef="name">
<mat-header-cell *matHeaderCellDef mat-sort-header>Name</mat-header-cell>
<mat-cell *matCellDef="let user">{{ user.full_name }}</mat-cell>
<mat-cell *matCellDef="let user">
{{ user.full_name }}
</mat-cell>
</ng-container>
<!-- prefix column -->
<!-- group column -->
<ng-container matColumnDef="group">
<mat-header-cell *matHeaderCellDef mat-sort-header>Group</mat-header-cell>
<mat-cell (click)="openEditInfo(user, $event)" *matCellDef="let user">
<div class="groupsCell">
<span *ngIf="user.groups && user.groups.length">
<mat-icon>people</mat-icon>
<span *ngFor="let group of user.groups; let last = last"
>{{ group.getTitle() | translate }}<span *ngIf="!last">,&nbsp;</span>
<div class="fill">
<div class="groupsCell">
<span *ngIf="user.groups && user.groups.length">
<mat-icon>people</mat-icon>
<span *ngFor="let group of user.groups; let last = last"
>{{ group.getTitle() | translate }}<span *ngIf="!last">,&nbsp;</span>
</span>
</span>
</span>
<br *ngIf="user.groups && user.structureLevel" />
<span *ngIf="user.structureLevel">
<mat-icon>flag</mat-icon>
{{ user.structure_level }}
</span>
<br *ngIf="user.groups && user.structure_level" />
<span *ngIf="user.structure_level">
<mat-icon>flag</mat-icon>
{{ user.structure_level }}
</span>
</div>
</div>
</mat-cell>
</ng-container>
@ -77,11 +81,11 @@
<!-- Presence column -->
<ng-container matColumnDef="presence">
<mat-header-cell *matHeaderCellDef mat-sort-header>Presence</mat-header-cell>
<mat-cell *matCellDef="let user" class="presentCell">
<div *ngIf="user.is_active">
<mat-cell (click)="ignoreClick($event)" *matCellDef="let user" class="presentCell">
<div class="fill" *ngIf="user.is_active">
<mat-checkbox
class="checkboxPresent"
(click)="setPresent(user, $event)"
(change)="setPresent(user)"
[checked]="user.is_present"
[disabled]="isMultiSelect"
>

17
client/src/app/site/users/components/user-list/user-list.component.scss
View File

@ -1,12 +1,4 @@
.groupsCell {
display: inline-block;
vertical-align: middle;
line-height: normal;
mat-icon {
font-size: 80%;
}
}
@import '~assets/styles/tables.scss';
.os-listview-table {
.mat-column-projector {
@ -18,8 +10,13 @@
}
.mat-column-group {
z-index: 3;
flex: 2 0 60px;
.groupsCell {
mat-icon {
font-size: 80%;
}
}
}
.mat-column-presence {

3
client/src/app/site/users/components/user-list/user-list.component.ts
View File

@ -399,8 +399,7 @@ export class UserListComponent extends ListViewBaseComponent<ViewUser, User> imp
* @param viewUser the viewUser Object
* @param event the mouse event (to prevent propagaton to row triggers)
*/
public async setPresent(viewUser: ViewUser, event: MouseEvent): Promise<void> {
event.stopPropagation();
public async setPresent(viewUser: ViewUser): Promise<void> {
viewUser.user.is_present = !viewUser.user.is_present;
await this.repo.update(viewUser.user, viewUser);
}

1
client/src/app/slides/motions/motion/motion-slide.component.scss
View File

@ -13,6 +13,7 @@
padding: 3px 7px 10px 10px;
position: fixed;
z-index: 5;
word-break: break-word;
h3 {
margin-top: 10px;

41
client/src/assets/styles/tables.scss
View File

@ -2,6 +2,47 @@
.mat-table {
width: 100%;
/** Style for the anchor column */
.mat-column-anchor {
position: absolute !important;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0.1;
z-index: 1;
a {
display: block;
height: 100%;
width: 100%;
}
}
.mat-cell {
position: relative;
/** child element to overwrite the a tag. */
.fill {
position: absolute;
display: inherit;
height: 100%;
width: 100%;
line-height: 0;
// try to put all children in the in the vertical middle
* {
margin-top: auto;
margin-bottom: auto;
}
}
}
/** functional items should lay over the anchor column */
.mat-cell > * {
z-index: 2;
}
// important is necessary, since the "sticky" attribute does not alter the real `.mat-table-sticky-class`
// but rather "patches" the DOM tree.
.mat-table-sticky {

25
client/src/styles.scss
View File

@ -50,7 +50,8 @@
* {
font-family: OSFont, Fira Sans, Roboto, Arial, Helvetica, sans-serif;
}
.mat-toolbar h2, .mat-dialog-title {
.mat-toolbar h2,
.mat-dialog-title {
font-family: OSFont, Fira Sans, Roboto, Arial, Helvetica, sans-serif !important;
}
@ -627,28 +628,6 @@ button.mat-menu-item.selected {
color: white;
}
/** Style for the anchor column */
.mat-column-anchor {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0.1;
z-index: 1;
a {
display: block;
height: 100%;
width: 100%;
}
}
/** functional items should lay over the anchor column */
.mat-cell > * {
z-index: 2;
}
.queue {
.mat-expansion-panel-body {
padding: 0 !important;