OpenSlides/client/src/app/site/site.component.html

155 lines
6.3 KiB
HTML
Raw Normal View History

<div class="offline-banner" *ngIf="isOffline"><mat-icon>cloud_off</mat-icon><span translate>Offline mode</span></div>
<div class="history-mode-indicator" *ngIf="OSStatus.isInHistoryMode">
<span translate>You are using the history mode of OpenSlides. Changes will not be saved.</span>
<span>({{ getHistoryTimestamp() }})</span>
<a (click)="timeTravel.resumeTime()" translate>Exit</a>
</div>
<mat-sidenav-container
#siteContainer
class="main-container"
(backdropClick)="toggleSideNav()"
(touchstart)="swipe($event, 'start')"
(touchend)="swipe($event, 'end')"
>
2018-11-07 08:43:48 +01:00
<mat-sidenav
#sideNav
[mode]="vp.isMobile ? 'over' : 'side'"
2018-11-07 08:43:48 +01:00
[opened]="!vp.isMobile"
disableClose="!vp.isMobile"
class="side-panel"
>
2019-01-16 15:54:34 +01:00
<div class="nav-toolbar">
<!-- logo -->
2019-01-16 15:54:34 +01:00
<a routerLink="/" (click)="toggleSideNav()">
<os-logo class="os-logo-container" [footer]="false"></os-logo>
2019-01-16 15:54:34 +01:00
</a>
</div>
2018-06-25 17:03:52 +02:00
<!-- User Menu -->
2018-11-07 08:43:48 +01:00
<mat-expansion-panel class="user-menu mat-elevation-z0">
2019-01-09 08:31:13 +01:00
<mat-expansion-panel-header class="username">
<!-- Get the username from operator -->
<span *ngIf="username">{{ username }}</span>
</mat-expansion-panel-header>
2018-08-03 11:05:21 +02:00
<mat-nav-list>
<a mat-list-item [matMenuTriggerFor]="languageMenu">
<mat-icon>language</mat-icon>
<span>{{ getLangName() }}</span>
</a>
<div *ngIf="isLoggedIn">
<a
[routerLink]="operator.user ? ['/users/', operator.user.id] : []"
(click)="mobileAutoCloseNav()"
mat-list-item
>
<mat-icon>person</mat-icon>
2019-01-31 08:20:15 +01:00
<span translate>Show profile</span>
</a>
<a
*osPerms="'users.can_change_password'"
routerLink="/users/password"
(click)="mobileAutoCloseNav()"
mat-list-item
>
<mat-icon>vpn_key</mat-icon>
<span translate>Change password</span>
</a>
<a *ngIf="isLoggedIn" (click)="logout()" mat-list-item>
<mat-icon>exit_to_app</mat-icon>
<span translate>Logout</span>
</a>
</div>
<div *ngIf="!isLoggedIn">
<a routerLink="/login" mat-list-item>
<mat-icon>exit_to_app</mat-icon>
<span translate>Login</span>
</a>
</div>
2018-08-03 11:05:21 +02:00
</mat-nav-list>
</mat-expansion-panel>
<mat-menu #languageMenu="matMenu">
2019-02-14 22:17:16 +01:00
<button mat-menu-item (click)="selectLang('en')">{{ getLangName('en') }}</button>
<button mat-menu-item (click)="selectLang('de')">{{ getLangName('de') }}</button>
<button mat-menu-item (click)="selectLang('cs')">{{ getLangName('cs') }}</button>
</mat-menu>
2018-06-25 17:03:52 +02:00
<!-- navigation -->
2018-11-07 08:43:48 +01:00
<mat-nav-list class="main-nav">
<span *ngFor="let entry of mainMenuService.entries">
2018-11-07 08:43:48 +01:00
<a
[@navItemAnim]
*osPerms="entry.permission"
mat-list-item
(click)="mobileAutoCloseNav()"
2018-11-07 08:43:48 +01:00
[routerLink]="entry.route"
routerLinkActive="active"
[routerLinkActiveOptions]="{ exact: entry.route === '/' }"
>
<mat-icon>{{ entry.icon }}</mat-icon>
2018-11-07 08:43:48 +01:00
<span>{{ entry.displayName | translate }}</span>
</a>
</span>
2019-01-09 08:31:13 +01:00
<mat-divider></mat-divider>
<a [@navItemAnim] *ngIf="vp.isMobile" mat-list-item routerLinkActive="active" (click)="toggleSearch()">
2019-01-09 08:31:13 +01:00
<mat-icon>search</mat-icon>
<span translate>Search</span>
</a>
<a
[@navItemAnim]
mat-list-item
routerLink="/legalnotice"
routerLinkActive="active"
(click)="mobileAutoCloseNav()"
2019-01-09 08:31:13 +01:00
>
<mat-icon>info</mat-icon>
<span translate>Legal notice</span>
</a>
<a
[@navItemAnim]
mat-list-item
routerLink="/privacypolicy"
routerLinkActive="active"
(click)="mobileAutoCloseNav()"
2019-01-09 08:31:13 +01:00
>
<mat-icon>security</mat-icon>
<span translate>Privacy policy</span>
</a>
<a
[@navItemAnim]
mat-list-item
href="https://openslides.org"
target="_blank"
(click)="mobileAutoCloseNav()"
2019-01-09 08:31:13 +01:00
>
<span>
<small><os-copyright-sign></os-copyright-sign>&nbsp;Copyright by OpenSlides</small>
</span>
2019-01-09 08:31:13 +01:00
</a>
<div class="os-footer-logo-container">
<os-logo [footer]="true"></os-logo>
</div>
</mat-nav-list>
<!-- Toggle-button -->
<div class="nav-toggle-button-container" *ngIf="!vp.isMobile">
<button *ngIf="sideNav.opened" mat-raised-button (click)="toggleSideNav()" class="nav-toggle-button left">
<mat-icon>arrow_back_ios</mat-icon>
</button>
</div>
</mat-sidenav>
<mat-sidenav-content>
<!-- Toggle-button -->
<div class="nav-toggle-button-container" *ngIf="!vp.isMobile">
<button *ngIf="!sideNav.opened" mat-raised-button (click)="toggleSideNav()" class="nav-toggle-button right">
<mat-icon>arrow_forward_ios</mat-icon>
</button>
</div>
<div (touchstart)="swipe($event, 'start')" (touchend)="swipe($event, 'end')" class="content">
2019-01-09 08:31:13 +01:00
<main [@pageTransition]="o.isActivated ? o.activatedRoute : ''">
<router-outlet #o="outlet"></router-outlet>
</main>
</div>
</mat-sidenav-content>
</mat-sidenav-container>
<os-global-spinner></os-global-spinner>