-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #285 from swisstopo/feature/assets-206-ui-sidebar-…
…header-anpassen Feature 206: UI Sidebar & Header anpassen
- Loading branch information
Showing
61 changed files
with
620 additions
and
572 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
57 changes: 45 additions & 12 deletions
57
apps/client-asset-sg/src/app/components/app-bar/app-bar.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,16 +1,49 @@ | ||
| <a routerLink="/"> | ||
| <img class="logo" src="../../../assets/swissgeol_assets.svg" alt="{{ 'logoSwissGeol' | translate }}" /> | ||
| <a routerLink="/" class="logo"> | ||
| <img src="../../../assets/swissgeol_assets.svg" alt="{{ 'logoSwissGeol' | translate }}" width="130" height="36" /> | ||
| </a> | ||
| <ng-content /> | ||
| <div class="spacer"></div> | ||
| <span class="version">{{ version }}</span> | ||
| <div class="language-links" *rxLet="links$ | push; let l"> | ||
| <a | ||
| asset-sg-reset | ||
| *rxFor="let link of l.links" | ||
| [routerLink]="link.params" | ||
| [queryParams]="link.queryParams" | ||
| [disabled]="link.disabled" | ||
| >{{ link.lang }}</a | ||
| > | ||
| </div> | ||
|
|
||
| <button mat-button type="button" class="language" [matMenuTriggerFor]="languageMenu" *rxLet="currentLang$; let lang"> | ||
| {{ lang.lang }} | ||
|
|
||
| <svg-icon key="arrow-down" class="open" /> | ||
| <svg-icon key="arrow-up" class="close" /> | ||
| </button> | ||
| <mat-menu #languageMenu="matMenu" backdropClass="languages"> | ||
| <ng-container *rxLet="languages$; let languages"> | ||
| @for (language of languages; track language.lang) { | ||
| <a | ||
| asset-sg-reset | ||
| [routerLink]="language.params" | ||
| [queryParams]="language.queryParams" | ||
| [class.is-active]="language.isActive" | ||
| > | ||
| <span class="icon"> | ||
| <svg-icon key="checkmark" /> | ||
| </span> | ||
| <span class="name"> | ||
| {{ language.lang }} | ||
| </span> | ||
| </a> | ||
| } | ||
| </ng-container> | ||
| </mat-menu> | ||
|
|
||
| <ng-container *ngIf="(isAnonymous$ | async) === false"> | ||
| <button mat-button type="button" class="profile" [matMenuTriggerFor]="profileMenu"> | ||
| <svg-icon key="profile" /> | ||
| </button> | ||
|
|
||
| <mat-menu #profileMenu="matMenu" backdropClass="profile"> | ||
| <ng-container *rxLet="user$; let user"> | ||
| <div> | ||
| {{ user.email }} | ||
| </div> | ||
| <div> | ||
| <button asset-sg-primary translate (click)="logout()">logout</button> | ||
| </div> | ||
| </ng-container> | ||
| </mat-menu> | ||
| </ng-container> |
154 changes: 125 additions & 29 deletions
154
apps/client-asset-sg/src/app/components/app-bar/app-bar.component.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,52 +1,148 @@ | ||
| @use "../../styles/variables"; | ||
|
|
||
| :host { | ||
| box-shadow: 0px 4px 4px #00000029; | ||
| box-shadow: 0 4px 4px #00000029; | ||
| z-index: 10; | ||
| display: flex; | ||
| align-items: center; | ||
| gap: 8px; | ||
| padding-inline: 16px; | ||
| } | ||
|
|
||
| .logo { | ||
| margin-left: 24px; | ||
| height: 56px; | ||
| a.logo { | ||
| width: 130px; | ||
| height: 36px; | ||
| } | ||
|
|
||
| .search-input { | ||
| margin-left: 6rem; | ||
| line-height: 3.5rem; | ||
| padding: 0 1rem; | ||
| border: none; | ||
| outline: none; | ||
| background-color: variables.$cyan-01; | ||
| width: 33rem; | ||
| font-weight: variables.$font-medium; | ||
| .spacer { | ||
| flex: 10; | ||
| } | ||
|
|
||
| .version { | ||
| color: #828e9a; | ||
| } | ||
|
|
||
| button.language { | ||
| text-transform: uppercase; | ||
| width: 69px; | ||
| height: 36px; | ||
| padding: 8px 12px; | ||
| border-radius: 4px; | ||
| color: #337083; | ||
| transition: 150ms ease-in; | ||
| transition-property: color, background-color; | ||
|
|
||
| & > ::ng-deep .mdc-button__label { | ||
| width: 100%; | ||
| height: 100%; | ||
|
|
||
| display: flex; | ||
| justify-content: space-between; | ||
| align-items: center; | ||
| padding: 0; | ||
| } | ||
|
|
||
| &:focus { | ||
| background-color: variables.$focused; | ||
| &:hover, | ||
| &[aria-expanded="true"] { | ||
| background-color: #adc6cd; | ||
| color: #2f4356; | ||
| } | ||
|
|
||
| &::placeholder { | ||
| color: variables.$grey-09; | ||
| svg-icon { | ||
| display: flex; | ||
| align-items: center; | ||
| width: 20px; | ||
| height: 20px; | ||
| } | ||
|
|
||
| svg-icon.close { | ||
| display: none; | ||
| } | ||
|
|
||
| &[aria-expanded="true"] svg-icon { | ||
| &.open { | ||
| display: none; | ||
| } | ||
| &.close { | ||
| display: flex; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| .spacer { | ||
| flex: 10; | ||
| ::ng-deep .languages + * .mat-mdc-menu-panel { | ||
| text-transform: uppercase; | ||
| min-width: 85px; | ||
| max-width: 85px; | ||
|
|
||
| & > .mat-mdc-menu-content { | ||
| display: flex; | ||
| flex-direction: column; | ||
| padding: 0; | ||
| } | ||
|
|
||
| a { | ||
| color: #1c2834; | ||
| text-decoration: none; | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: space-between; | ||
| padding: 8px 12px; | ||
| transition: color 150ms ease-in; | ||
| } | ||
| a:hover { | ||
| background-color: #dfe4e9; | ||
| } | ||
|
|
||
| a > span.name { | ||
| flex-basis: 30%; | ||
| } | ||
|
|
||
| a > span.icon { | ||
| flex-grow: 1; | ||
| display: flex; | ||
| justify-content: flex-start; | ||
| } | ||
| a:not(.is-active) > span.icon { | ||
| visibility: hidden; | ||
| } | ||
| } | ||
|
|
||
| .version { | ||
| color: #828e9a; | ||
| button.profile { | ||
| background-color: #295969; | ||
| color: white; | ||
| min-width: 36px; | ||
| max-width: 36px; | ||
| min-height: 36px; | ||
| max-height: 36px; | ||
| border-radius: 50%; | ||
|
|
||
| & > ::ng-deep .mdc-button__label { | ||
| width: 100%; | ||
| height: 100%; | ||
|
|
||
| display: flex; | ||
| justify-content: space-between; | ||
| align-items: center; | ||
| padding: 0; | ||
| } | ||
| } | ||
|
|
||
| .language-links { | ||
| margin-right: 24px; | ||
| a { | ||
| margin-left: 0.5rem; | ||
| color: variables.$grey-09; | ||
| &[aria-disabled="true"] { | ||
| color: variables.$grey-06; | ||
| cursor: default; | ||
| ::ng-deep .profile + * .mat-mdc-menu-panel > .mat-mdc-menu-content { | ||
| display: flex; | ||
| flex-direction: column; | ||
|
|
||
| & > div { | ||
| padding: 8px 12px; | ||
| } | ||
|
|
||
| ::ng-deep button { | ||
| width: 100%; | ||
| color: #337083; | ||
| border: 1px solid #337083; | ||
| background-color: transparent; | ||
|
|
||
| &:hover { | ||
| background-color: #adc6cd; | ||
| } | ||
| } | ||
| } |
Oops, something went wrong.