Merge pull request #4519 from tsiegleauq/list-z-levels
Fix some z-level related issues
This commit is contained in:
commit
68175b8cb7
@ -53,8 +53,9 @@
|
||||
<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="fill">
|
||||
<div class="info-col-items">
|
||||
<div *osPerms="'agenda.can_manage';and:item.verboseType">
|
||||
<div *osPerms="'agenda.can_manage'; and: item.verboseType">
|
||||
<mat-icon>visibility</mat-icon>
|
||||
{{ item.verboseType | translate }}
|
||||
</div>
|
||||
@ -67,6 +68,7 @@
|
||||
{{ item.comment }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
@ -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"
|
||||
|
@ -1,3 +1,5 @@
|
||||
@import '~assets/styles/tables.scss';
|
||||
|
||||
.os-listview-table {
|
||||
/** Title */
|
||||
.mat-column-title {
|
||||
|
@ -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.
|
||||
|
@ -1,3 +1,5 @@
|
||||
@import '~assets/styles/tables.scss';
|
||||
|
||||
.os-listview-table {
|
||||
/** Projector button **/
|
||||
.mat-column-projector {
|
||||
|
@ -1,3 +1,5 @@
|
||||
@import '~assets/styles/tables.scss';
|
||||
|
||||
/** css hacks https://codepen.io/edge0703/pen/iHJuA */
|
||||
.innerTable {
|
||||
display: inline-block;
|
||||
|
@ -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>
|
||||
|
@ -32,6 +32,14 @@ mat-sidenav-container {
|
||||
}
|
||||
}
|
||||
|
||||
.username {
|
||||
span {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-toolbar {
|
||||
display: flex;
|
||||
margin: auto;
|
||||
|
@ -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;
|
||||
|
@ -43,13 +43,16 @@
|
||||
<!-- 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="fill">
|
||||
<div class="groupsCell">
|
||||
<span *ngIf="user.groups && user.groups.length">
|
||||
<mat-icon>people</mat-icon>
|
||||
@ -57,12 +60,13 @@
|
||||
>{{ group.getTitle() | translate }}<span *ngIf="!last">, </span>
|
||||
</span>
|
||||
</span>
|
||||
<br *ngIf="user.groups && user.structureLevel" />
|
||||
<span *ngIf="user.structureLevel">
|
||||
<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"
|
||||
>
|
||||
|
@ -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 {
|
||||
|
@ -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);
|
||||
}
|
||||
|
@ -13,6 +13,7 @@
|
||||
padding: 3px 7px 10px 10px;
|
||||
position: fixed;
|
||||
z-index: 5;
|
||||
word-break: break-word;
|
||||
|
||||
h3 {
|
||||
margin-top: 10px;
|
||||
|
@ -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 {
|
||||
|
@ -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;
|
||||
|
Loading…
Reference in New Issue
Block a user