From 30115da8416321802c381617aafe0142f3468ccd Mon Sep 17 00:00:00 2001 From: benjamin Date: Mon, 27 Apr 2026 22:02:15 +0200 Subject: [PATCH] fix styling --- .../presentation/remote/remote.component.html | 239 +++++++++--------- .../presentation/remote/remote.component.ts | 10 +- .../presentation/select/select.component.html | 37 +-- .../presentation/select/select.component.ts | 5 +- .../modules/shows/edit/edit.component.html | 62 ++--- src/app/modules/shows/edit/edit.component.ts | 6 +- .../list/list-item/list-item.component.html | 22 +- .../list/list-item/list-item.component.less | 26 ++ .../modules/shows/list/list.component.html | 73 +++--- .../modules/shows/list/list.component.less | 4 + src/app/modules/shows/list/list.component.ts | 39 ++- src/app/modules/shows/new/new.component.html | 62 ++--- src/app/modules/shows/new/new.component.ts | 4 +- .../modules/shows/show/show.component.html | 223 ++++++++-------- .../modules/shows/show/show.component.less | 4 +- src/app/modules/shows/show/show.component.ts | 20 +- .../shows/show/song/song.component.less | 9 +- .../songs/song-list/song-list.component.html | 86 ++++--- .../songs/song-list/song-list.component.ts | 6 +- .../edit/edit-song/edit-song.component.less | 1 + .../songs/song/edit/edit.component.html | 12 +- .../modules/songs/song/edit/edit.component.ts | 3 +- .../modules/songs/song/new/new.component.html | 32 +-- .../modules/songs/song/new/new.component.ts | 6 +- .../modules/songs/song/song.component.html | 128 ++++++---- src/app/modules/songs/song/song.component.ts | 14 +- src/app/modules/user/info/info.component.html | 51 ++-- src/app/modules/user/info/info.component.ts | 4 +- .../navigation/navigation.component.less | 2 +- .../components/card/card.component.html | 16 +- .../components/card/card.component.less | 8 +- .../sidebar/page-frame.component.html | 27 ++ ...mponent.less => page-frame.component.less} | 38 ++- ...t.spec.ts => page-frame.component.spec.ts} | 10 +- ...r.component.ts => page-frame.component.ts} | 12 +- .../components/sidebar/sidebar.component.html | 15 -- src/styles/styles.less | 2 + 37 files changed, 740 insertions(+), 578 deletions(-) create mode 100644 src/app/widget-modules/components/sidebar/page-frame.component.html rename src/app/widget-modules/components/sidebar/{sidebar.component.less => page-frame.component.less} (75%) rename src/app/widget-modules/components/sidebar/{sidebar.component.spec.ts => page-frame.component.spec.ts} (71%) rename src/app/widget-modules/components/sidebar/{sidebar.component.ts => page-frame.component.ts} (64%) delete mode 100644 src/app/widget-modules/components/sidebar/sidebar.component.html diff --git a/src/app/modules/presentation/remote/remote.component.html b/src/app/modules/presentation/remote/remote.component.html index 666e7d3..81e7dbc 100644 --- a/src/app/modules/presentation/remote/remote.component.html +++ b/src/app/modules/presentation/remote/remote.component.html @@ -1,119 +1,130 @@ -@if (show) { - - @if (!progress) { -
- @if (show) { -
-
-
Veranstaltung
-
-
-
Leer
-
-
- } -
- @for (song of presentationSongs; track trackBy($index, song)) { -
- @if (show) { -
-
- {{ song.title }} -
-
- } @if (show) { -
- @for (section of song.sections; track section.type + '-' + section.number + '-' + $index; let i = $index) { -
+ @if (show) { + + @if (!progress) { +
+ @if (show) { +
+
+
Veranstaltung
+
+
+
Leer
+
+
+ } +
+ @for (song of presentationSongs; track trackBy($index, song)) { +
+ @if (show) { +
+
+ {{ song.title }} +
+
+ } + @if (show) { +
+ @for (section of song.sections; track section.type + '-' + section.number + '-' + $index; let i = $index) { +
-
{{ section.type | sectionType }} {{ section.number + 1 }}
-
{{ getFirstLine(section) }}
-
+ class="song-part" + role="button" + tabindex="0" + > +
{{ section.type | sectionType }} {{ section.number + 1 }}
+
{{ getFirstLine(section) }}
+
+ } +
+ } +
+ } +
+ @if (show) { +
+
+ Freier Text +
+
+ } + + Überschrift + + + + Text + + +
+ @if (show) { +
+ + + Hintergrund + + kein Hintergrund + Sternenhimmel + Blätter + Leder + Lobpreis + Bibel + + + + +
+ } + @if (show) { + + } } -
- } -
+ } -
- @if (show) { -
-
- Freier Text -
-
- } - - Überschrift - - - - Text - - -
- @if (show) { -
- - - Hintergrund - - kein Hintergrund - Sternenhimmel - Blätter - Leder - Lobpreis - Bibel - - - - -
- } @if (show) { - - } } - -} + diff --git a/src/app/modules/presentation/remote/remote.component.ts b/src/app/modules/presentation/remote/remote.component.ts index 1ee1010..e2ed1b5 100644 --- a/src/app/modules/presentation/remote/remote.component.ts +++ b/src/app/modules/presentation/remote/remote.component.ts @@ -1,4 +1,4 @@ -import {ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, inject} from '@angular/core'; +import {ChangeDetectionStrategy, ChangeDetectorRef, Component, inject, OnDestroy} from '@angular/core'; import {combineLatest, Subject} from 'rxjs'; import {PresentationBackground, Show} from '../../shows/services/show'; import {ShowSongService} from '../../shows/services/show-song.service'; @@ -26,6 +26,7 @@ import {MatSlider, MatSliderThumb} from '@angular/material/slider'; import {AddSongComponent} from '../../../widget-modules/components/add-song/add-song.component'; import {ShowTypePipe} from '../../../widget-modules/pipes/show-type-translater/show-type.pipe'; import {SectionTypePipe} from '../../../widget-modules/pipes/section-type-translator/section-type.pipe'; +import {PageFrameComponent} from '../../../widget-modules/components/sidebar/page-frame.component'; export interface PresentationSong { id: string; @@ -58,6 +59,7 @@ export interface PresentationSong { DatePipe, ShowTypePipe, SectionTypePipe, + PageFrameComponent, ], }) export class RemoteComponent implements OnDestroy { @@ -87,12 +89,12 @@ export class RemoteComponent implements OnDestroy { map(_ => _.currentShow), filter((showId): showId is string => !!showId), distinctUntilChanged(), - takeUntil(this.destroy$) + takeUntil(this.destroy$), ); const show$ = currentShowId$.pipe( switchMap(showId => this.showService.read$(showId)), - takeUntil(this.destroy$) + takeUntil(this.destroy$), ); const parsedSongs$ = currentShowId$.pipe( @@ -105,7 +107,7 @@ export class RemoteComponent implements OnDestroy { sections: this.textRenderingService.parse(song.text, null, false), })), })), - takeUntil(this.destroy$) + takeUntil(this.destroy$), ); combineLatest([show$, parsedSongs$]) diff --git a/src/app/modules/presentation/select/select.component.html b/src/app/modules/presentation/select/select.component.html index 6ef0bf4..43d3110 100644 --- a/src/app/modules/presentation/select/select.component.html +++ b/src/app/modules/presentation/select/select.component.html @@ -1,20 +1,23 @@ -@if (shows$ | async; as shows) { -
- @if (visible) { - - @if (!shows.length) { -

Es ist derzeit keine Veranstaltung vorhanden

- } @if (shows.length>0) { -
- @for (show of shows; track show.id) { - + + @if (shows$ | async; as shows) { +
+ @if (visible) { + + @if (!shows.length) { +

Es ist derzeit keine Veranstaltung vorhanden

+ } + @if (shows.length > 0) { +
+ @for (show of shows; track show.id) { + + } +
+ } + }
- } - } -
-} + diff --git a/src/app/modules/presentation/select/select.component.ts b/src/app/modules/presentation/select/select.component.ts index fa2f204..eae6810 100644 --- a/src/app/modules/presentation/select/select.component.ts +++ b/src/app/modules/presentation/select/select.component.ts @@ -1,4 +1,4 @@ -import {Component, OnInit, inject} from '@angular/core'; +import {Component, inject, OnInit} from '@angular/core'; import {map} from 'rxjs/operators'; import {ShowService} from '../../shows/services/show.service'; import {Show} from '../../shows/services/show'; @@ -10,13 +10,14 @@ import {CardComponent} from '../../../widget-modules/components/card/card.compon import {MatButton} from '@angular/material/button'; import {UserNameComponent} from '../../../services/user/user-name/user-name.component'; import {ShowTypePipe} from '../../../widget-modules/pipes/show-type-translater/show-type.pipe'; +import {PageFrameComponent} from '../../../widget-modules/components/sidebar/page-frame.component'; @Component({ selector: 'app-select', templateUrl: './select.component.html', styleUrls: ['./select.component.less'], animations: [fade], - imports: [CardComponent, MatButton, UserNameComponent, AsyncPipe, DatePipe, ShowTypePipe], + imports: [CardComponent, MatButton, UserNameComponent, AsyncPipe, DatePipe, ShowTypePipe, PageFrameComponent], }) export class SelectComponent implements OnInit { private showService = inject(ShowService); diff --git a/src/app/modules/shows/edit/edit.component.html b/src/app/modules/shows/edit/edit.component.html index ef4ba6d..06eb902 100644 --- a/src/app/modules/shows/edit/edit.component.html +++ b/src/app/modules/shows/edit/edit.component.html @@ -1,31 +1,33 @@ -
- -
- - Art der Veranstaltung - - - @for (key of showTypePublic; track key) { - {{ key | showType }} - } - - - @for (key of showTypePrivate; track key) { - {{ key | showType }} - } - - - - - Datum - - - - -
+ +
+ +
+ + Art der Veranstaltung + + + @for (key of showTypePublic; track key) { + {{ key | showType }} + } + + + @for (key of showTypePrivate; track key) { + {{ key | showType }} + } + + + + + Datum + + + + +
- - Speichern - - -
+ + Speichern + + +
+ diff --git a/src/app/modules/shows/edit/edit.component.ts b/src/app/modules/shows/edit/edit.component.ts index dbe9632..0106c75 100644 --- a/src/app/modules/shows/edit/edit.component.ts +++ b/src/app/modules/shows/edit/edit.component.ts @@ -1,4 +1,4 @@ -import {Component, OnInit, inject} from '@angular/core'; +import {Component, inject, OnInit} from '@angular/core'; import {ShowDataService} from '../services/show-data.service'; import {Observable, take} from 'rxjs'; import {Show} from '../services/show'; @@ -18,6 +18,7 @@ import {MatDatepicker, MatDatepickerInput, MatDatepickerToggle} from '@angular/m import {ButtonRowComponent} from '../../../widget-modules/components/button-row/button-row.component'; import {ButtonComponent} from '../../../widget-modules/components/button/button.component'; import {ShowTypePipe} from '../../../widget-modules/pipes/show-type-translater/show-type.pipe'; +import {PageFrameComponent} from '../../../widget-modules/components/sidebar/page-frame.component'; @Component({ selector: 'app-edit', @@ -39,6 +40,7 @@ import {ShowTypePipe} from '../../../widget-modules/pipes/show-type-translater/s ButtonRowComponent, ButtonComponent, ShowTypePipe, + PageFrameComponent, ], }) export class EditComponent implements OnInit { @@ -70,7 +72,7 @@ export class EditComponent implements OnInit { map(param => param as {showId: string}), map(param => param.showId), switchMap((showId: string) => this.showService.read$(showId)), - take(1) + take(1), ) .subscribe(show => { this.form.setValue({ diff --git a/src/app/modules/shows/list/list-item/list-item.component.html b/src/app/modules/shows/list/list-item/list-item.component.html index ff9f912..ecc9ef7 100644 --- a/src/app/modules/shows/list/list-item/list-item.component.html +++ b/src/app/modules/shows/list/list-item/list-item.component.html @@ -1,14 +1,14 @@ @if (show) { -
-
{{ show.date.toDate() | date: "dd.MM.yyyy" }}
-
- +
+
{{ show.date.toDate() | date: "dd.MM.yyyy" }}
+
+ +
+
{{ show.showType | showType }}
+
+ @if (showStatusBadge) { + {{ showStatusBadge }} + } +
-
{{ show.showType | showType }}
-
- @if (showStatusBadge) { - {{ showStatusBadge }} - } -
-
} diff --git a/src/app/modules/shows/list/list-item/list-item.component.less b/src/app/modules/shows/list/list-item/list-item.component.less index 8c5b132..9b6e517 100644 --- a/src/app/modules/shows/list/list-item/list-item.component.less +++ b/src/app/modules/shows/list/list-item/list-item.component.less @@ -2,6 +2,15 @@ padding: 5px 20px; display: grid; grid-template-columns: 100px 150px auto 160px; + grid-template-areas: "date user show-type badge"; + + @media screen and (max-width: 860px) { + grid-template-columns: 1fr 1fr 1fr; + grid-template-rows: auto auto; + grid-template-areas: "date user badge" ". show-type badge"; + row-gap: 3px; + } + min-height: 21px; & > div { @@ -16,6 +25,23 @@ background: var(--hover-background); color: var(--text); } + + .date { + grid-area: date; + } + + .user { + grid-area: user; + } + + .show-type { + grid-area: show-type; + } + + .badge { + grid-area: badge; + justify-content: end; + } } .number { diff --git a/src/app/modules/shows/list/list.component.html b/src/app/modules/shows/list/list.component.html index b6e7e25..ebc2f7b 100644 --- a/src/app/modules/shows/list/list.component.html +++ b/src/app/modules/shows/list/list.component.html @@ -1,40 +1,45 @@ @if (showSidebar$ | async) { - -
- -
-
- @if (privateShows$ | async; as privateShows) { - - @for (show of privateShows; track trackBy($index, show)) { - + +
+ +
+
+ @if (privateShows$ | async; as privateShows) { + + @for (show of privateShows; track trackBy($index, show)) { + + } +
+ Neue Veranstaltung anlegen +
+ } -
- Neue Veranstaltung anlegen -
- - } @if (publicShows$ | async; as shows) { @if (shows.length > 0) { - - @for (show of shows; track trackBy($index, show)) { - + @if (publicShows$ | async; as shows) { + @if (shows.length > 0) { + + @for (show of shows; track trackBy($index, show)) { + + } + + } } - - } } -
- +
+ } @else { -
- @if (publicShows$ | async; as shows) { @if (shows.length > 0) { - - @for (show of shows; track trackBy($index, show)) { - +
+ @if (publicShows$ | async; as shows) { + @if (shows.length > 0) { + + @for (show of shows; track trackBy($index, show)) { + + } + + } } - - } } -
+
} diff --git a/src/app/modules/shows/list/list.component.less b/src/app/modules/shows/list/list.component.less index e93d06d..ceee71e 100644 --- a/src/app/modules/shows/list/list.component.less +++ b/src/app/modules/shows/list/list.component.less @@ -1,3 +1,7 @@ .sidebar-content { padding: 20px; } + +.list-action { + margin: 10px 20px; +} diff --git a/src/app/modules/shows/list/list.component.ts b/src/app/modules/shows/list/list.component.ts index df26186..1fff9ec 100644 --- a/src/app/modules/shows/list/list.component.ts +++ b/src/app/modules/shows/list/list.component.ts @@ -12,7 +12,7 @@ import {FilterComponent} from './filter/filter.component'; import {CardComponent} from '../../../widget-modules/components/card/card.component'; import {ListItemComponent} from './list-item/list-item.component'; import {UserService} from '../../../services/user/user.service'; -import {SidebarComponent} from '../../../widget-modules/components/sidebar/sidebar.component'; +import {PageFrameComponent} from '../../../widget-modules/components/sidebar/page-frame.component'; import {ButtonComponent} from '../../../widget-modules/components/button/button.component'; import {faPlus} from '@fortawesome/free-solid-svg-icons'; import {RoleDirective} from '../../../services/user/role.directive'; @@ -22,21 +22,33 @@ import {RoleDirective} from '../../../services/user/role.directive'; templateUrl: './list.component.html', styleUrls: ['./list.component.less'], animations: [fade], - imports: [FilterComponent, CardComponent, ListItemComponent, RouterLink, AsyncPipe, SidebarComponent, ButtonComponent, RoleDirective], + imports: [FilterComponent, CardComponent, ListItemComponent, RouterLink, AsyncPipe, PageFrameComponent, ButtonComponent, RoleDirective], }) export class ListComponent { public faNewShow = faPlus; - private showService = inject(ShowService); private filterStore = inject(FilterStoreService); - private userService = inject(UserService); - public filter$ = this.filterStore.showFilter$; public lastMonths$ = this.filter$.pipe(map((filterValues: FilterValues) => filterValues.time || 1)); public owner$ = this.filter$.pipe(map((filterValues: FilterValues) => filterValues.owner)); public showType$ = this.filter$.pipe(map((filterValues: FilterValues) => filterValues.showType)); public archived$ = this.filter$.pipe(map((filterValues: FilterValues) => !!filterValues.archived)); + private showService = inject(ShowService); public shows$ = this.showService.list$(); + public fallbackPublicShows$ = combineLatest([this.shows$, this.lastMonths$]).pipe( + map(([shows, lastMonths]) => { + return shows.filter(show => show.published && !show.archived).filter(show => this.matchesTimeFilter(show, lastMonths)); + }), + ); public ownShows$ = this.showService.list$(false, true); + public queriedPublicShows$ = this.lastMonths$.pipe(switchMap(lastMonths => this.showService.listPublicSince$(lastMonths))); + public publicShows$ = combineLatest([this.queriedPublicShows$, this.fallbackPublicShows$, this.owner$, this.showType$]).pipe( + map(([queriedShows, fallbackShows, owner, showType]) => { + const shows = queriedShows.length > 0 || fallbackShows.length === 0 ? queriedShows : fallbackShows; + + return this.sortShowsByDateDesc(shows.filter(show => !owner || show.owner === owner).filter(show => !showType || show.showType === showType)); + }), + ); + private userService = inject(UserService); public privateShows$ = combineLatest([this.ownShows$, this.userService.user$, this.archived$]).pipe( map(([shows, user, showArchived]) => shows.filter(show => { @@ -49,22 +61,9 @@ export class ListComponent { } return !show.published || show.reportedType === 'pending'; - }) + }), ), - map(shows => this.sortShowsByDateDesc(shows)) - ); - public queriedPublicShows$ = this.lastMonths$.pipe(switchMap(lastMonths => this.showService.listPublicSince$(lastMonths))); - public fallbackPublicShows$ = combineLatest([this.shows$, this.lastMonths$]).pipe( - map(([shows, lastMonths]) => { - return shows.filter(show => show.published && !show.archived).filter(show => this.matchesTimeFilter(show, lastMonths)); - }) - ); - public publicShows$ = combineLatest([this.queriedPublicShows$, this.fallbackPublicShows$, this.owner$, this.showType$]).pipe( - map(([queriedShows, fallbackShows, owner, showType]) => { - const shows = queriedShows.length > 0 || fallbackShows.length === 0 ? queriedShows : fallbackShows; - - return this.sortShowsByDateDesc(shows.filter(show => !owner || show.owner === owner).filter(show => !showType || show.showType === showType)); - }) + map(shows => this.sortShowsByDateDesc(shows)), ); public showSidebar$ = this.userService.user$.pipe(map(user => this.hasSidebarAccess(user?.role))); diff --git a/src/app/modules/shows/new/new.component.html b/src/app/modules/shows/new/new.component.html index 8ba4050..bc172e8 100644 --- a/src/app/modules/shows/new/new.component.html +++ b/src/app/modules/shows/new/new.component.html @@ -1,31 +1,33 @@ -
- -
- - Art der Veranstaltung - - - @for (key of showTypePublic; track key) { - {{ key | showType }} - } - - - @for (key of showTypePrivate; track key) { - {{ key | showType }} - } - - - - - Datum - - - - -
+ +
+ +
+ + Art der Veranstaltung + + + @for (key of showTypePublic; track key) { + {{ key | showType }} + } + + + @for (key of showTypePrivate; track key) { + {{ key | showType }} + } + + + + + Datum + + + + +
- - Anlegen - - -
+ + Anlegen + + +
+ diff --git a/src/app/modules/shows/new/new.component.ts b/src/app/modules/shows/new/new.component.ts index c8a0bf1..5e645ce 100644 --- a/src/app/modules/shows/new/new.component.ts +++ b/src/app/modules/shows/new/new.component.ts @@ -1,4 +1,4 @@ -import {Component, OnInit, inject} from '@angular/core'; +import {Component, inject, OnInit} from '@angular/core'; import {ShowDataService} from '../services/show-data.service'; import {Observable} from 'rxjs'; import {Show} from '../services/show'; @@ -16,6 +16,7 @@ import {MatDatepicker, MatDatepickerInput, MatDatepickerToggle} from '@angular/m import {ButtonRowComponent} from '../../../widget-modules/components/button-row/button-row.component'; import {ButtonComponent} from '../../../widget-modules/components/button/button.component'; import {ShowTypePipe} from '../../../widget-modules/pipes/show-type-translater/show-type.pipe'; +import {PageFrameComponent} from '../../../widget-modules/components/sidebar/page-frame.component'; @Component({ selector: 'app-new', @@ -37,6 +38,7 @@ import {ShowTypePipe} from '../../../widget-modules/pipes/show-type-translater/s ButtonRowComponent, ButtonComponent, ShowTypePipe, + PageFrameComponent, ], }) export class NewComponent implements OnInit { diff --git a/src/app/modules/shows/show/show.component.html b/src/app/modules/shows/show/show.component.html index 779d28a..e270490 100644 --- a/src/app/modules/shows/show/show.component.html +++ b/src/app/modules/shows/show/show.component.html @@ -1,110 +1,127 @@ -@if (show$ | async; as show) { -
- + @if (show$ | async; as show) { +
+ - @if (!useSwiper) { -

- {{ show.public ? 'öffentliche' : 'geschlossene' }} Veranstaltung von - - - {{ show.published | publishedType }} - @if (show.reportedType) { - {{ show.reportedType | reportedType }} - } - -

- } -
-
+ > @if (!useSwiper) { - Text anzeigen +

+ {{ show.public ? 'öffentliche' : 'geschlossene' }} Veranstaltung von + + + {{ show.published | publishedType }} + @if (show.reportedType) { + {{ show.reportedType | reportedType }} + } + +

} -
-
- - - -
-
- @if (showSongs && !useSwiper) { -
- @for (song of orderedShowSongs(show); track trackBy(i, song); let i = $index) { -
- -
- } -
- } @if (useSwiper) { - - @for (song of orderedShowSongs(show); track trackBy(i, song); let i = $index) { - - -
{{ currentTime | date: 'HH:mm' }}
- @if (getNextSong(orderedShowSongs(show), i); as next) { -
- {{ next }} - +
+
+ @if (!useSwiper) { + Text anzeigen + } +
+
+ + + +
+ @if (showSongs && !useSwiper) { +
+ @for (song of orderedShowSongs(show); track trackBy(i, song); let i = $index) { +
+ +
+ } +
} - - } - - } @if (songs$ | async; as songs) { @if (songs && !show.published && !useSwiper) { - - } } @if (!useSwiper) { - - - - @if (!show.archived) { - Archivieren - } @if (show.archived) { - Wiederherstellen - } @if (!show.published) { - Veröffentlichen - } @if (show.published) { - Veröffentlichung zurückziehen - } @if (show.published) { - Teilen - } @if (show.published && show.reportedType === 'pending') { - CCLI - } @if (!show.published) { - Ändern + @if (useSwiper) { + + @for (song of orderedShowSongs(show); track trackBy(i, song); let i = $index) { + + +
{{ currentTime | date: 'HH:mm' }}
+ @if (getNextSong(orderedShowSongs(show), i); as next) { +
+ {{ next }} + +
+ } + + } + + } + @if (songs$ | async; as songs) { + @if (songs && !show.published && !useSwiper) { + } - - - Herunterladen - - Ablauf für Lobpreisgruppe - Handout mit Copyright Infos - - - } - -
-} + } + @if (!useSwiper) { + + + + @if (!show.archived) { + Archivieren + } + @if (show.archived) { + Wiederherstellen + } + @if (!show.published) { + Veröffentlichen + } + @if (show.published) { + Veröffentlichung zurückziehen + + } + @if (show.published) { + Teilen + } + @if (show.published && show.reportedType === 'pending') { + CCLI + } + @if (!show.published) { + Ändern + } + + + Herunterladen + + Ablauf für Lobpreisgruppe + Handout mit Copyright Infos + + + } + +
+ } + diff --git a/src/app/modules/shows/show/show.component.less b/src/app/modules/shows/show/show.component.less index e452c97..bbb3f90 100644 --- a/src/app/modules/shows/show/show.component.less +++ b/src/app/modules/shows/show/show.component.less @@ -1,6 +1,6 @@ :host { - --button-padding-mobile: 10px; - --button-font-size-mobile: 25px; + --button-padding-mobile: 4px; + --button-font-size-mobile: 20px; } .song-row:not(:last-child) { diff --git a/src/app/modules/shows/show/show.component.ts b/src/app/modules/shows/show/show.component.ts index 7c67a58..c810129 100644 --- a/src/app/modules/shows/show/show.component.ts +++ b/src/app/modules/shows/show/show.component.ts @@ -1,4 +1,12 @@ -import {ChangeDetectorRef, Component, CUSTOM_ELEMENTS_SCHEMA, HostListener, inject, OnDestroy, OnInit} from '@angular/core'; +import { + ChangeDetectorRef, + Component, + CUSTOM_ELEMENTS_SCHEMA, + HostListener, + inject, + OnDestroy, + OnInit, +} from '@angular/core'; import {filter, map, shareReplay, switchMap, take, tap} from 'rxjs/operators'; import {ActivatedRoute, Router} from '@angular/router'; import {ShowService} from '../services/show.service'; @@ -55,6 +63,7 @@ import {BadgeComponent, BadgeType} from '../../../widget-modules/components/badg import {ReportDialogComponent, ReportDialogSong} from '../dialog/report-dialog/report-dialog.component'; import {PublishedTypePipe} from '../../../widget-modules/pipes/published-type-translator/published-type.pipe'; import {ensureSwiperElement} from '../../../services/swiper-element'; +import {PageFrameComponent} from '../../../widget-modules/components/sidebar/page-frame.component'; @Component({ selector: 'app-show', @@ -87,6 +96,7 @@ import {ensureSwiperElement} from '../../../services/swiper-element'; ReportedTypePipe, PublishedTypePipe, BadgeComponent, + PageFrameComponent, ], }) export class ShowComponent implements OnInit, OnDestroy { @@ -140,7 +150,7 @@ export class ShowComponent implements OnInit, OnDestroy { shareReplay({ bufferSize: 1, refCount: true, - }) + }), ); this.subs.push( this.activatedRoute.params @@ -148,12 +158,12 @@ export class ShowComponent implements OnInit, OnDestroy { map(param => param as {showId: string}), map(param => param.showId), switchMap(showId => this.showSongService.list$(showId)), - filter(_ => !!_ && _.length > 0) + filter(_ => !!_ && _.length > 0), ) .subscribe(_ => { this.showSongs = _; this.cRef.markForCheck(); - }) + }), ); this.songs$ = this.show$.pipe( @@ -161,7 +171,7 @@ export class ShowComponent implements OnInit, OnDestroy { shareReplay({ bufferSize: 1, refCount: true, - }) + }), ); } diff --git a/src/app/modules/shows/show/song/song.component.less b/src/app/modules/shows/show/song/song.component.less index 4ae4872..0db181d 100644 --- a/src/app/modules/shows/show/song/song.component.less +++ b/src/app/modules/shows/show/song/song.component.less @@ -18,7 +18,7 @@ grid-template-areas: "keys title edit delete"; @media screen and (max-width: 860px) { - grid-template-columns: var(--song-key-column-width, 30px) auto 45px 45px; + grid-template-columns: var(--song-key-column-width, 30px) auto 30px 30px; } &.with-drag { @@ -26,7 +26,7 @@ grid-template-areas: "drag keys title edit delete"; @media screen and (max-width: 860px) { - grid-template-columns: 24px var(--song-key-column-width, 30px) auto 45px 45px; + grid-template-columns: 24px var(--song-key-column-width, 30px) auto 30px 30px; } } } @@ -36,7 +36,7 @@ grid-template-areas: "title keys edit delete"; @media screen and (max-width: 860px) { - grid-template-columns: auto var(--song-key-column-width, 30px) 45px 45px; + grid-template-columns: auto var(--song-key-column-width, 30px) 30px 30px; } &.with-drag { @@ -44,7 +44,7 @@ grid-template-areas: "drag title keys edit delete"; @media screen and (max-width: 860px) { - grid-template-columns: 24px auto var(--song-key-column-width, 30px) 45px 45px; + grid-template-columns: 24px auto var(--song-key-column-width, 30px) 30px 30px; } } } @@ -176,4 +176,5 @@ button { textarea.edit { font-family: 'Ubuntu Mono', monospace; + line-height: 15px; } diff --git a/src/app/modules/songs/song-list/song-list.component.html b/src/app/modules/songs/song-list/song-list.component.html index dbe364b..243d72b 100644 --- a/src/app/modules/songs/song-list/song-list.component.html +++ b/src/app/modules/songs/song-list/song-list.component.html @@ -1,48 +1,50 @@ @if (songs$ | async; as songs) { - -
- -
-
- - @for (song of songs; track trackBy($index, song)) { -
-
{{ song.number }}
-
- {{ song.title }} - @if (song.hasChordValidationIssues) { - * - } -
-
- - @if (song.status === 'draft') { -
- + +
+ +
+
+ + @for (song of songs; track trackBy($index, song)) { +
+
{{ song.number }}
+
+ {{ song.title }} + @if (song.hasChordValidationIssues) { + * + }
- } @if (song.status === 'set') { -
- +
+ + @if (song.status === 'draft') { +
+ +
+ } + @if (song.status === 'set') { +
+ +
+ } + @if (song.status === 'final') { +
+ +
+ } + + @if (song.legalType === 'open') { +
+ +
+ }
- } @if (song.status === 'final') { -
- -
- } - - @if (song.legalType === 'open') { -
- +
{{ song.key }}
- } + } +
+ Neuen Song anlegen
-
{{ song.key }}
-
- } -
- Neuen Song anlegen -
- -
- + +
+ } diff --git a/src/app/modules/songs/song-list/song-list.component.ts b/src/app/modules/songs/song-list/song-list.component.ts index 2cbf11a..bf32da6 100644 --- a/src/app/modules/songs/song-list/song-list.component.ts +++ b/src/app/modules/songs/song-list/song-list.component.ts @@ -14,7 +14,7 @@ import {FilterComponent} from './filter/filter.component'; import {CardComponent} from '../../../widget-modules/components/card/card.component'; import {RoleDirective} from '../../../services/user/role.directive'; import {FaIconComponent} from '@fortawesome/angular-fontawesome'; -import {SidebarComponent} from '../../../widget-modules/components/sidebar/sidebar.component'; +import {PageFrameComponent} from '../../../widget-modules/components/sidebar/page-frame.component'; import {ButtonComponent} from '../../../widget-modules/components/button/button.component'; interface SongListItem extends Song { @@ -27,7 +27,7 @@ interface SongListItem extends Song { styleUrls: ['./song-list.component.less'], changeDetection: ChangeDetectionStrategy.OnPush, animations: [fade], - imports: [FilterComponent, CardComponent, RouterLink, RoleDirective, FaIconComponent, AsyncPipe, SidebarComponent, ButtonComponent], + imports: [FilterComponent, CardComponent, RouterLink, RoleDirective, FaIconComponent, AsyncPipe, PageFrameComponent, ButtonComponent], }) export class SongListComponent { public faLegal = faBalanceScaleRight; @@ -48,7 +48,7 @@ export class SongListComponent { ...song, hasChordValidationIssues: this.textRenderingService.validateChordNotation(song.text ?? '').length > 0, })); - }) + }), ); public trackBy = (index: number, show: SongListItem) => show.id; diff --git a/src/app/modules/songs/song/edit/edit-song/edit-song.component.less b/src/app/modules/songs/song/edit/edit-song/edit-song.component.less index d92b086..e4430d8 100644 --- a/src/app/modules/songs/song/edit/edit-song/edit-song.component.less +++ b/src/app/modules/songs/song/edit/edit-song/edit-song.component.less @@ -24,6 +24,7 @@ textarea { font-family: 'Ubuntu Mono', monospace; + line-height: 15px; } } diff --git a/src/app/modules/songs/song/edit/edit.component.html b/src/app/modules/songs/song/edit/edit.component.html index 70748b3..7ae55ae 100644 --- a/src/app/modules/songs/song/edit/edit.component.html +++ b/src/app/modules/songs/song/edit/edit.component.html @@ -1,5 +1,7 @@ -
- - - -
+ +
+ + + +
+ diff --git a/src/app/modules/songs/song/edit/edit.component.ts b/src/app/modules/songs/song/edit/edit.component.ts index 39ae3ba..502ee53 100644 --- a/src/app/modules/songs/song/edit/edit.component.ts +++ b/src/app/modules/songs/song/edit/edit.component.ts @@ -2,12 +2,13 @@ import {Component, ViewChild} from '@angular/core'; import {EditSongComponent} from './edit-song/edit-song.component'; import {EditFileComponent} from './edit-file/edit-file.component'; import {HistoryComponent} from './history/history.component'; +import {PageFrameComponent} from '../../../../widget-modules/components/sidebar/page-frame.component'; @Component({ selector: 'app-edit', templateUrl: './edit.component.html', styleUrls: ['./edit.component.less'], - imports: [EditSongComponent, EditFileComponent, HistoryComponent], + imports: [EditSongComponent, EditFileComponent, HistoryComponent, PageFrameComponent], }) export class EditComponent { @ViewChild(EditSongComponent) public editSongComponent: EditSongComponent | null = null; diff --git a/src/app/modules/songs/song/new/new.component.html b/src/app/modules/songs/song/new/new.component.html index bdf2189..aadb6b7 100644 --- a/src/app/modules/songs/song/new/new.component.html +++ b/src/app/modules/songs/song/new/new.component.html @@ -1,16 +1,18 @@ - -
- - Nummer - - - - Titel - - -
+ + +
+ + Nummer + + + + Titel + + +
- - Anlegen - - + + Anlegen + + + diff --git a/src/app/modules/songs/song/new/new.component.ts b/src/app/modules/songs/song/new/new.component.ts index 1936073..a1ae3f8 100644 --- a/src/app/modules/songs/song/new/new.component.ts +++ b/src/app/modules/songs/song/new/new.component.ts @@ -1,6 +1,5 @@ -import {Component, OnInit, inject} from '@angular/core'; +import {Component, DestroyRef, inject, OnInit} from '@angular/core'; import {faSave} from '@fortawesome/free-solid-svg-icons'; -import {DestroyRef} from '@angular/core'; import {takeUntilDestroyed} from '@angular/core/rxjs-interop'; import {FormControl, FormGroup, ReactiveFormsModule, Validators} from '@angular/forms'; import {SongService} from '../../services/song.service'; @@ -12,12 +11,13 @@ import {MatFormField, MatLabel} from '@angular/material/form-field'; import {MatInput} from '@angular/material/input'; import {ButtonRowComponent} from '../../../../widget-modules/components/button-row/button-row.component'; import {ButtonComponent} from '../../../../widget-modules/components/button/button.component'; +import {PageFrameComponent} from '../../../../widget-modules/components/sidebar/page-frame.component'; @Component({ selector: 'app-new', templateUrl: './new.component.html', styleUrls: ['./new.component.less'], - imports: [CardComponent, ReactiveFormsModule, MatFormField, MatLabel, MatInput, ButtonRowComponent, ButtonComponent], + imports: [CardComponent, ReactiveFormsModule, MatFormField, MatLabel, MatInput, ButtonRowComponent, ButtonComponent, PageFrameComponent], }) export class NewComponent implements OnInit { private songService = inject(SongService); diff --git a/src/app/modules/songs/song/song.component.html b/src/app/modules/songs/song/song.component.html index ddf9a4d..c07a40a 100644 --- a/src/app/modules/songs/song/song.component.html +++ b/src/app/modules/songs/song/song.component.html @@ -1,61 +1,77 @@ -
- @if (song$ | async; as song) { - -
-
-
-
Typ: {{ song.type | songType }}
-
Tonart: {{ song.key }}
-
Tempo: {{ song.tempo }}
-
Status: {{ (song.status | status) || "entwurf" }}
- @if (song.legalOwner) { -
Rechteinhaber: {{ song.legalOwner | legalOwner }}
- } @if (song.legalOwnerId && song.legalOwner === 'CCLI') { + +
+ @if (song$ | async; as song) { + +
- CCLI Nummer: {{ song.legalOwnerId }} +
+
Typ: {{ song.type | songType }}
+
Tonart: {{ song.key }}
+
Tempo: {{ song.tempo }}
+
Status: {{ (song.status | status) || "entwurf" }}
+ @if (song.legalOwner) { +
Rechteinhaber: {{ song.legalOwner | legalOwner }}
+ } + @if (song.legalOwnerId && song.legalOwner === 'CCLI') { + + } + @if (song.legalOwnerId && song.legalOwner !== 'CCLI') { +
Rechteinhaber ID: {{ song.legalOwnerId }}
+ } + @if (song.artist) { +
Künstler: {{ song.artist }}
+ } + @if (song.label) { +
Verlag: {{ song.label }}
+ } + @if (song.origin) { +
Quelle: {{ song.origin }}
+ } +
Wie oft + verwendet: {{ songCount$ | async }} +
+
- } @if (song.legalOwnerId && song.legalOwner !== 'CCLI') { -
Rechteinhaber ID: {{ song.legalOwnerId }}
- } @if (song.artist) { -
Künstler: {{ song.artist }}
- } @if (song.label) { -
Verlag: {{ song.label }}
- } @if (song.origin) { -
Quelle: {{ song.origin }}
+ @if (user$ | async; as user) { + } -
Wie oft verwendet: {{ songCount$ | async }}
+ + @for (flag of getFlags(song.flags); track flag) { + {{ flag }} + } + +
{{ song.comment }}
-
- @if (user$ | async; as user) { - - } - - @for (flag of getFlags(song.flags); track flag) { - {{ flag }} - } - -
{{ song.comment }}
-
- - Löschen - Bearbeiten - - Zu Veranstaltung hinzufügen - - @for (show of privateShows$|async; track show.id) { - {{ show.date.toDate() | date: "dd.MM.yyyy" }} {{ show.showType | showType }} - } - - - - - } @if (files$ | async; as files) { @if (files.length > 0) { - - @for (file of files$ | async; track file.id) { -

- -

+ + Löschen + Bearbeiten + + Zu Veranstaltung hinzufügen + + @for (show of privateShows$|async; track show.id) { + {{ show.date.toDate() | date: "dd.MM.yyyy" }} {{ show.showType | showType }} + + } + + + + } - - } } -
+ @if (files$ | async; as files) { + @if (files.length > 0) { + + @for (file of files$ | async; track file.id) { +

+ +

+ } + + } + } +
+ diff --git a/src/app/modules/songs/song/song.component.ts b/src/app/modules/songs/song/song.component.ts index d5f95f0..e224251 100644 --- a/src/app/modules/songs/song/song.component.ts +++ b/src/app/modules/songs/song/song.component.ts @@ -1,4 +1,4 @@ -import {Component, OnInit, inject} from '@angular/core'; +import {Component, inject, OnInit} from '@angular/core'; import {ActivatedRoute, Router, RouterLink} from '@angular/router'; import {SongService} from '../services/song.service'; import {distinctUntilChanged, map, switchMap} from 'rxjs/operators'; @@ -26,6 +26,7 @@ import {LegalOwnerPipe} from '../../../widget-modules/pipes/legal-owner-translat import {StatusPipe} from '../../../widget-modules/pipes/status-translater/status.pipe'; import {ShowTypePipe} from '../../../widget-modules/pipes/show-type-translater/show-type.pipe'; import {MatTooltip} from '@angular/material/tooltip'; +import {PageFrameComponent} from '../../../widget-modules/components/sidebar/page-frame.component'; @Component({ selector: 'app-song', @@ -50,6 +51,7 @@ import {MatTooltip} from '@angular/material/tooltip'; StatusPipe, ShowTypePipe, MatTooltip, + PageFrameComponent, ], }) export class SongComponent implements OnInit { @@ -84,14 +86,14 @@ export class SongComponent implements OnInit { const song$ = this.activatedRoute.params.pipe( map(param => param as {songId: string}), map(param => param.songId), - switchMap(songId => this.songService.read$(songId)) + switchMap(songId => this.songService.read$(songId)), ); this.song$ = song$; this.files$ = this.activatedRoute.params.pipe( map(param => param as {songId: string}), map(param => param.songId), - switchMap(songId => this.fileService.read$(songId)) + switchMap(songId => this.fileService.read$(songId)), ); this.songCount$ = combineLatest([this.userService.user$, song$]).pipe( @@ -102,7 +104,7 @@ export class SongComponent implements OnInit { return user?.songUsage?.[song.id] ?? 0; }), - distinctUntilChanged() + distinctUntilChanged(), ); this.songUsageShows$ = combineLatest([this.userService.user$, this.showService.list$(), song$]).pipe( @@ -115,7 +117,7 @@ export class SongComponent implements OnInit { .filter(show => show.owner === user.id) .filter(show => (show.songIds ?? []).includes(song.id)) .sort((a, b) => b.date.toMillis() - a.date.toMillis()); - }) + }), ); this.songUsageTooltip$ = combineLatest([this.songCount$, this.songUsageShows$]).pipe( @@ -129,7 +131,7 @@ export class SongComponent implements OnInit { } return shows.map(show => `${this.dateFormatter.format(show.date.toDate())} - ${this.showTypePipe.transform(show.showType)}`).join('\n'); - }) + }), ); } diff --git a/src/app/modules/user/info/info.component.html b/src/app/modules/user/info/info.component.html index 6ead0f5..6196781 100644 --- a/src/app/modules/user/info/info.component.html +++ b/src/app/modules/user/info/info.component.html @@ -1,25 +1,30 @@ -@if (user$ | async; as user) { - -

- @if (getUserRoles(user.role).length === 0) { - Es wurden noch keine Berechtigungen zugeteilt, bitte wende Dich an den Administrator! + +

+ @if (user$ | async; as user) { + +

+ @if (getUserRoles(user.role).length === 0) { + Es wurden noch keine Berechtigungen zugeteilt, bitte wende Dich an den Administrator! + } + {{ transdormUserRoles(user.role) }} +

+ + bevorzugte Anzeige der Akkorde + + + nur den Liedtext anzeigen + in Strophen die Akkorde nur für die erste anzeigen + alle anzeigen + + Das ist nur die Voreinstellung, die Anzeige kann für jedes Lied geändert werden. + + + Abmelden + + } - {{ transdormUserRoles(user.role) }} -

- - bevorzugte Anzeige der Akkorde - - - nur den Liedtext anzeigen - in Strophen die Akkorde nur für die erste anzeigen - alle anzeigen - - Das ist nur die Voreinstellung, die Anzeige kann für jedes Lied geändert werden. - - - Abmelden - - -} - + +
+ diff --git a/src/app/modules/user/info/info.component.ts b/src/app/modules/user/info/info.component.ts index e16fa29..34e277b 100644 --- a/src/app/modules/user/info/info.component.ts +++ b/src/app/modules/user/info/info.component.ts @@ -1,4 +1,4 @@ -import {Component, OnInit, inject} from '@angular/core'; +import {Component, inject, OnInit} from '@angular/core'; import {UserService} from '../../../services/user/user.service'; import {Observable} from 'rxjs'; import {User} from '../../../services/user/user'; @@ -17,6 +17,7 @@ import {ButtonComponent} from '../../../widget-modules/components/button/button. import {RouterLink} from '@angular/router'; import {RoleDirective} from '../../../services/user/role.directive'; import {UsersComponent} from './users/users.component'; +import {PageFrameComponent} from '../../../widget-modules/components/sidebar/page-frame.component'; @Component({ selector: 'app-info', @@ -37,6 +38,7 @@ import {UsersComponent} from './users/users.component'; RoleDirective, UsersComponent, AsyncPipe, + PageFrameComponent, ], }) export class InfoComponent implements OnInit { diff --git a/src/app/widget-modules/components/application-frame/navigation/navigation.component.less b/src/app/widget-modules/components/application-frame/navigation/navigation.component.less index 21fa589..5225736 100644 --- a/src/app/widget-modules/components/application-frame/navigation/navigation.component.less +++ b/src/app/widget-modules/components/application-frame/navigation/navigation.component.less @@ -21,7 +21,7 @@ nav { &.hidden { @media screen and (max-width: 860px) { - top: -60px; + // top: -60px; } } diff --git a/src/app/widget-modules/components/card/card.component.html b/src/app/widget-modules/components/card/card.component.html index 33b48b5..a50c891 100644 --- a/src/app/widget-modules/components/card/card.component.html +++ b/src/app/widget-modules/components/card/card.component.html @@ -1,12 +1,14 @@
@if (closeLink && !fullscreen) { - - } @if (heading && !fullscreen) { -
{{ heading }}
- } @if (subheading && !fullscreen) { -
{{ subheading }}
+ + } + @if (heading && !fullscreen) { +
{{ heading }}
+ } + @if (subheading && !fullscreen) { +
{{ subheading }}
}
diff --git a/src/app/widget-modules/components/card/card.component.less b/src/app/widget-modules/components/card/card.component.less index 2ab243e..622dd3c 100644 --- a/src/app/widget-modules/components/card/card.component.less +++ b/src/app/widget-modules/components/card/card.component.less @@ -1,7 +1,7 @@ @import "../../../../styles/shadow"; .card { - margin: 20px; + margin: 20px 20px 0; border-radius: 8px; background: var(--surface); backdrop-filter: blur(15px); @@ -14,10 +14,8 @@ box-shadow: var(--shadow-card-3); @media screen and (max-width: 860px) { - width: 100vw; - border-radius: 0; - background: var(--surface-strong); - margin: 0; + width: calc(100vw - 10px); + margin: 5px; color: var(--text); } diff --git a/src/app/widget-modules/components/sidebar/page-frame.component.html b/src/app/widget-modules/components/sidebar/page-frame.component.html new file mode 100644 index 0000000..9d4e1f8 --- /dev/null +++ b/src/app/widget-modules/components/sidebar/page-frame.component.html @@ -0,0 +1,27 @@ +@if (withMenu() || title()) { +
+ @if (withMenu()) { + + } +
{{ title() }}
+
+} +@if (!collapsed) { + +} + +
+ +
diff --git a/src/app/widget-modules/components/sidebar/sidebar.component.less b/src/app/widget-modules/components/sidebar/page-frame.component.less similarity index 75% rename from src/app/widget-modules/components/sidebar/sidebar.component.less rename to src/app/widget-modules/components/sidebar/page-frame.component.less index f47203f..93f20a6 100644 --- a/src/app/widget-modules/components/sidebar/sidebar.component.less +++ b/src/app/widget-modules/components/sidebar/page-frame.component.less @@ -19,20 +19,20 @@ .sidebar-toggle { --icon-button-color: var(--primary-hover); - --icon-button-hover-color: var(--primary-active); + --icon-button-hover-color: var(--primary); position: fixed; top: calc(50px + var(--sidebar-toggle-offset)); left: var(--sidebar-toggle-offset); z-index: 11; color: var(--icon-button-color); - background: var(--surface-strong); box-shadow: none; border-radius: 999px; + transition: all 150ms ease-in-out; } :host.collapsed .sidebar-toggle { - --icon-button-color: var(--text); - --icon-button-hover-color: var(--primary-active); + --icon-button-color: var(--surface); + --icon-button-hover-color: var(--surface-subtle); } .sidebar-toggle fa-icon { @@ -92,7 +92,7 @@ aside.collapsed { .sidebar-toggle { top: calc(50px + 8px); - left: 12px; + left: 5px; right: auto; z-index: 13; } @@ -121,6 +121,32 @@ aside.collapsed { .content { grid-column: auto; width: 100%; - padding-top: calc(var(--sidebar-toggle-size) + 6px); + } +} + +.header { + @media screen and (max-width: 860px) { + height: 50px; + } +} + +.title { + color: var(--surface); + font-size: 30px; + text-transform: uppercase; + text-align: right; + opacity: 0.5; + text-shadow: var(--shadow-card-3); + + position: fixed; + right: 10px; + top: 61px; + + transition: all 150ms ease-in-out; + + @media screen and (min-width: 888px) { + transform-origin: top right; + transform: rotate(90deg) translateX(100%) translateX(10px); + text-shadow: 10px 0 20px rgba(0, 0, 0, 0.19), 6px 0 6px rgba(0, 0, 0, 0.23); } } diff --git a/src/app/widget-modules/components/sidebar/sidebar.component.spec.ts b/src/app/widget-modules/components/sidebar/page-frame.component.spec.ts similarity index 71% rename from src/app/widget-modules/components/sidebar/sidebar.component.spec.ts rename to src/app/widget-modules/components/sidebar/page-frame.component.spec.ts index 269c1ba..3a7aed0 100644 --- a/src/app/widget-modules/components/sidebar/sidebar.component.spec.ts +++ b/src/app/widget-modules/components/sidebar/page-frame.component.spec.ts @@ -1,17 +1,17 @@ import {ComponentFixture, TestBed} from '@angular/core/testing'; -import {SidebarComponent} from './sidebar.component'; +import {PageFrameComponent} from './page-frame.component'; describe('SidebarComponent', () => { - let component: SidebarComponent; - let fixture: ComponentFixture; + let component: PageFrameComponent; + let fixture: ComponentFixture; beforeEach(async () => { await TestBed.configureTestingModule({ - imports: [SidebarComponent], + imports: [PageFrameComponent], }).compileComponents(); - fixture = TestBed.createComponent(SidebarComponent); + fixture = TestBed.createComponent(PageFrameComponent); component = fixture.componentInstance; await fixture.whenStable(); }); diff --git a/src/app/widget-modules/components/sidebar/sidebar.component.ts b/src/app/widget-modules/components/sidebar/page-frame.component.ts similarity index 64% rename from src/app/widget-modules/components/sidebar/sidebar.component.ts rename to src/app/widget-modules/components/sidebar/page-frame.component.ts index 066db18..0046738 100644 --- a/src/app/widget-modules/components/sidebar/sidebar.component.ts +++ b/src/app/widget-modules/components/sidebar/page-frame.component.ts @@ -1,21 +1,23 @@ -import {Component} from '@angular/core'; +import {Component, input} from '@angular/core'; import {MatIconButton} from '@angular/material/button'; import {FaIconComponent} from '@fortawesome/angular-fontawesome'; import {faBars, faChevronLeft} from '@fortawesome/free-solid-svg-icons'; @Component({ - selector: 'app-sidebar', + selector: 'app-page-frame', imports: [MatIconButton, FaIconComponent], - templateUrl: './sidebar.component.html', - styleUrl: './sidebar.component.less', + templateUrl: './page-frame.component.html', + styleUrl: './page-frame.component.less', host: { '[class.collapsed]': 'collapsed', }, }) -export class SidebarComponent { +export class PageFrameComponent { public collapsed = true; public openIcon = faChevronLeft; public closedIcon = faBars; + public title = input.required(); + public withMenu = input(true); public toggle(): void { this.collapsed = !this.collapsed; diff --git a/src/app/widget-modules/components/sidebar/sidebar.component.html b/src/app/widget-modules/components/sidebar/sidebar.component.html deleted file mode 100644 index 686ef94..0000000 --- a/src/app/widget-modules/components/sidebar/sidebar.component.html +++ /dev/null @@ -1,15 +0,0 @@ - -@if (!collapsed) { - -} - -
- -
diff --git a/src/styles/styles.less b/src/styles/styles.less index aed15a6..5acc806 100644 --- a/src/styles/styles.less +++ b/src/styles/styles.less @@ -14,6 +14,7 @@ --text-soft: #7a858c; --text-inverse: #f7fbff; + --color-primary-dark: #48686e; --color-primary: #6f8f95; --color-primary-light: #85a4aa; --primary-color: #6f8f95; @@ -41,6 +42,7 @@ --mat-dialog-supporting-text-color: var(--text); + --mat-button-text-label-text-color: var(--color-primary-dark) } html {