diff --git a/angular.json b/angular.json index 6cf01da..f39ca94 100644 --- a/angular.json +++ b/angular.json @@ -51,7 +51,7 @@ "docx", "qrcode" ] -}, + }, "configurations": { "production": { "fileReplacements": [ @@ -64,7 +64,7 @@ { "type": "initial", "maximumWarning": "500kB", - "maximumError": "1MB" + "maximumError": "10MB" }, { "type": "anyComponentStyle", @@ -82,7 +82,7 @@ }, "defaultConfiguration": "production" }, - "serve": { + "serve": { "builder": "@angular/build:dev-server", "configurations": { "production": { @@ -99,5 +99,8 @@ } } } + }, + "cli": { + "analytics": false } } diff --git a/src/app/app.component.html b/src/app/app.component.html index 321da3c..49fec08 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,5 +1,5 @@ -
- +
+
diff --git a/src/app/modules/presentation/remote/remote.component.html b/src/app/modules/presentation/remote/remote.component.html index ba69847..1f55146 100644 --- a/src/app/modules/presentation/remote/remote.component.html +++ b/src/app/modules/presentation/remote/remote.component.html @@ -1,83 +1,81 @@ @if (show) { -
- - @if (!progress) { -
- @if (show) { -
-
-
Veranstaltung
-
-
-
Leer
-
+ + @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) { +
+
{{ 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" + > +
{{ 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 - - - - +
+
Freier Text
- } @if (show) { - - } } - -
+ } + + Überschrift + + + + Text + + +
+ @if (show) { +
+ + + Hintergrund + + kein Hintergrund + Sternenhimmel + Blätter + Leder + Lobpreis + Bibel + + + + +
+ } @if (show) { + + } } + } diff --git a/src/app/modules/songs/song-list/filter/filter.component.less b/src/app/modules/songs/song-list/filter/filter.component.less index 7d183ee..7e9b9b9 100644 --- a/src/app/modules/songs/song-list/filter/filter.component.less +++ b/src/app/modules/songs/song-list/filter/filter.component.less @@ -1,5 +1,15 @@ -.third { - display: grid; - grid-template-columns: 1fr 1fr 1fr 1fr; - column-gap: 20px; +.third, +:host ::ng-deep form, +div[formGroup] { + display: flex; + flex-direction: column; + gap: 12px; +} + +.third { + gap: 0; +} + +:host ::ng-deep .mat-mdc-form-field { + width: 100%; } 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 f12f95a..5bf5028 100644 --- a/src/app/modules/songs/song-list/song-list.component.html +++ b/src/app/modules/songs/song-list/song-list.component.html @@ -1,43 +1,48 @@ @if (songs$ | async; as songs) { -
- + +
- - - @for (song of songs; track trackBy($index, song)) { -
-
{{ song.number }}
-
- {{ song.title }} - @if (song.hasChordValidationIssues) { - * - } -
-
- - @if (song.status === 'draft') { +
+ Neuen Song anlegen +
+
+
+ + @for (song of songs; track trackBy($index, song)) { +
+
{{ song.number }}
+
+ {{ song.title }} + @if (song.hasChordValidationIssues) { + * + } +
+
+ + @if (song.status === 'draft') { +
+ +
+ } @if (song.status === 'set') { +
+ +
+ } @if (song.status === 'final') { +
+ +
+ } + + @if (song.legalType === 'open') {
- -
- } @if (song.status === 'set') { -
- -
- } @if (song.status === 'final') { -
- +
} - - @if (song.legalType === 'open') { -
-
- } +
{{ song.key }}
-
{{ song.key }}
-
- } - -
+ } + +
+ } diff --git a/src/app/modules/songs/song-list/song-list.component.less b/src/app/modules/songs/song-list/song-list.component.less index a5dd51a..2773d68 100644 --- a/src/app/modules/songs/song-list/song-list.component.less +++ b/src/app/modules/songs/song-list/song-list.component.less @@ -1,3 +1,15 @@ +.sidebar-content { + padding: 20px; + height: 100%; + box-sizing: border-box; + display: flex; + flex-direction: column; +} + +.sidebar-actions { + margin-top: auto; +} + .list-item { padding: 5px 20px; display: grid; 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 402ac44..594ea65 100644 --- a/src/app/modules/songs/song-list/song-list.component.ts +++ b/src/app/modules/songs/song-list/song-list.component.ts @@ -6,15 +6,16 @@ import {fade} from '../../../animations'; import {ActivatedRoute, RouterLink} from '@angular/router'; import {filterSong} from '../../../services/filter.helper'; import {FilterValues} from './filter/filter-values'; -import {faBalanceScaleRight, faCheck, faPencilRuler} from '@fortawesome/free-solid-svg-icons'; +import {faBalanceScaleRight, faCheck, faPencilRuler, faPlus} from '@fortawesome/free-solid-svg-icons'; import {TextRenderingService} from '../services/text-rendering.service'; import {FilterStoreService} from '../../../services/filter-store.service'; import {AsyncPipe} from '@angular/common'; -import {ListHeaderComponent} from '../../../widget-modules/components/list-header/list-header.component'; 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 {ButtonComponent} from '../../../widget-modules/components/button/button.component'; interface SongListItem extends Song { hasChordValidationIssues: boolean; @@ -26,20 +27,21 @@ interface SongListItem extends Song { styleUrls: ['./song-list.component.less'], changeDetection: ChangeDetectionStrategy.OnPush, animations: [fade], - imports: [ListHeaderComponent, FilterComponent, CardComponent, RouterLink, RoleDirective, FaIconComponent, AsyncPipe], + imports: [FilterComponent, CardComponent, RouterLink, RoleDirective, FaIconComponent, AsyncPipe, SidebarComponent, ButtonComponent], }) export class SongListComponent { + public faLegal = faBalanceScaleRight; + public faDraft = faPencilRuler; + public faFinal = faCheck; + public faNewSong = faPlus; private route = inject(ActivatedRoute); private textRenderingService = inject(TextRenderingService); private filterStore = inject(FilterStoreService); - - public anyFilterActive = false; public songs$: Observable = combineLatest([ this.filterStore.songFilter$, this.route.data.pipe(map(data => (data['songs'] as Song[]).slice().sort((a, b) => a.number - b.number))), ]).pipe( map(([filter, songs]) => { - this.anyFilterActive = this.checkIfFilterActive(filter); return songs .filter(song => this.filter(song, filter)) .map(song => ({ @@ -49,9 +51,6 @@ export class SongListComponent { .sort((a, b) => a.title?.localeCompare(b.title)); }) ); - public faLegal = faBalanceScaleRight; - public faDraft = faPencilRuler; - public faFinal = faCheck; public trackBy = (index: number, show: SongListItem) => show.id; @@ -65,10 +64,6 @@ export class SongListComponent { return baseFilter; } - private checkIfFilterActive(filter: FilterValues): boolean { - return !!filter.q || !!filter.type || !!filter.key || !!filter.legalType || !!filter.flag; - } - private checkFlag(flag: string, flags: string) { if (!flags) { return false; diff --git a/src/app/widget-modules/components/card/card.component.html b/src/app/widget-modules/components/card/card.component.html index 25afc59..33b48b5 100644 --- a/src/app/widget-modules/components/card/card.component.html +++ b/src/app/widget-modules/components/card/card.component.html @@ -1,4 +1,4 @@ -
+
@if (closeLink && !fullscreen) { + }
-@if (filterVisible || anyFilterActive) { +@if (showFilterButton && (filterVisible || anyFilterActive)) {
diff --git a/src/app/widget-modules/components/list-header/list-header.component.less b/src/app/widget-modules/components/list-header/list-header.component.less index 0a35883..db62572 100644 --- a/src/app/widget-modules/components/list-header/list-header.component.less +++ b/src/app/widget-modules/components/list-header/list-header.component.less @@ -10,11 +10,15 @@ display: flex; align-items: center; justify-content: flex-end; - color: var(--primary-hover); - } -.filter-active { - color: var(--danger); +.header .mat-mdc-icon-button { + --icon-button-color: var(--primary-hover); + --icon-button-hover-color: var(--primary-active); +} + +.header .mat-mdc-icon-button.filter-active { + --icon-button-color: var(--danger); + --icon-button-hover-color: var(--danger); cursor: not-allowed; } diff --git a/src/app/widget-modules/components/list-header/list-header.component.ts b/src/app/widget-modules/components/list-header/list-header.component.ts index 94a3b9a..fa6d0cd 100644 --- a/src/app/widget-modules/components/list-header/list-header.component.ts +++ b/src/app/widget-modules/components/list-header/list-header.component.ts @@ -20,6 +20,7 @@ export class ListHeaderComponent { public filterVisible = false; @Output() public filterVisibleChanged = new EventEmitter(); @Input() public anyFilterActive = false; + @Input() public showFilterButton = true; public onFilterClick(): void { this.filterVisible = !this.filterVisible || this.anyFilterActive; diff --git a/src/app/widget-modules/components/menu-button/menu-button.component.less b/src/app/widget-modules/components/menu-button/menu-button.component.less index fc3f5aa..aee239f 100644 --- a/src/app/widget-modules/components/menu-button/menu-button.component.less +++ b/src/app/widget-modules/components/menu-button/menu-button.component.less @@ -1,4 +1,6 @@ -button { +.mat-mdc-button { + --icon-button-color: var(--primary-color); + --icon-button-hover-color: var(--primary-active); min-width: 0; padding: 0 var(--button-padding, 5px); font-size: var(--button-font-size, 1em); diff --git a/src/app/widget-modules/components/sidebar/sidebar.component.html b/src/app/widget-modules/components/sidebar/sidebar.component.html index d96c5a6..a734791 100644 --- a/src/app/widget-modules/components/sidebar/sidebar.component.html +++ b/src/app/widget-modules/components/sidebar/sidebar.component.html @@ -1 +1,12 @@ - + + +
+ +
diff --git a/src/app/widget-modules/components/sidebar/sidebar.component.less b/src/app/widget-modules/components/sidebar/sidebar.component.less index b60bf6e..652288c 100644 --- a/src/app/widget-modules/components/sidebar/sidebar.component.less +++ b/src/app/widget-modules/components/sidebar/sidebar.component.less @@ -1,5 +1,48 @@ +:host { + --sidebar-width: 300px; + --sidebar-toggle-size: 48px; + --sidebar-toggle-offset: 12px; + display: grid; + width: 100%; + max-width: 100%; + min-width: 0; + grid-template-columns: var(--sidebar-width) minmax(0, 1fr); + align-items: start; + box-sizing: border-box; + transition: grid-template-columns 200ms ease; +} + +:host.collapsed { + grid-template-columns: 0 minmax(0, 1fr); +} + +.sidebar-toggle { + --icon-button-color: var(--primary-hover); + --icon-button-hover-color: var(--primary-active); + position: fixed; + top: calc(50px + var(--sidebar-toggle-offset)); + left: var(--sidebar-toggle-offset); + z-index: 11; + color: var(--icon-button-color); + background: transparent; + box-shadow: none; +} + +:host.collapsed .sidebar-toggle { + --icon-button-color: var(--text-inverse); + --icon-button-hover-color: var(--text-inverse); +} + +.sidebar-toggle fa-icon { + color: inherit; +} + +.sidebar-toggle:hover { + color: var(--icon-button-hover-color); +} + aside { - width: 200px; + width: var(--sidebar-width); height: calc(100vh - 50px); position: fixed; @@ -8,4 +51,28 @@ aside { bottom: 0; background: var(--surface); + box-shadow: var(--shadow-card-2); + overflow: hidden; + transform: translateX(0); + transition: transform 200ms ease; +} + +aside.collapsed { + transform: translateX(calc(-1 * var(--sidebar-width))); +} + +.sidebar-toggle-placeholder { + height: calc(var(--sidebar-toggle-size) + var(--sidebar-toggle-offset)); + flex: 0 0 auto; +} + +.sidebar-body { + height: calc(100% - var(--sidebar-toggle-size) - var(--sidebar-toggle-offset)); +} + +.content { + grid-column: 2; + min-width: 0; + width: 100%; + padding: 0; } diff --git a/src/app/widget-modules/components/sidebar/sidebar.component.ts b/src/app/widget-modules/components/sidebar/sidebar.component.ts index 18e850a..c7825cf 100644 --- a/src/app/widget-modules/components/sidebar/sidebar.component.ts +++ b/src/app/widget-modules/components/sidebar/sidebar.component.ts @@ -1,9 +1,23 @@ import {Component} 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', - imports: [], + imports: [MatIconButton, FaIconComponent], templateUrl: './sidebar.component.html', styleUrl: './sidebar.component.less', + host: { + '[class.collapsed]': 'collapsed', + }, }) -export class SidebarComponent {} +export class SidebarComponent { + public collapsed = true; + public openIcon = faChevronLeft; + public closedIcon = faBars; + + public toggle(): void { + this.collapsed = !this.collapsed; + } +} diff --git a/src/custom-theme.scss b/src/custom-theme.scss index 4610a01..86dd12e 100644 --- a/src/custom-theme.scss +++ b/src/custom-theme.scss @@ -16,7 +16,7 @@ $wgenerator-theme: mat.m2-define-light-theme(( warn: $wgenerator-warn, ), typography: mat.m2-define-typography-config(), - density: 0, + density: -2, )); @include mat.all-component-themes($wgenerator-theme); diff --git a/src/styles/styles.less b/src/styles/styles.less index 259d458..aed15a6 100644 --- a/src/styles/styles.less +++ b/src/styles/styles.less @@ -34,6 +34,10 @@ --focus-ring: 0 0 0 2px rgba(111, 143, 149, 0.28); --transition: all 300ms ease-in-out; --transition-fast: all 150ms ease-in-out; + --icon-button-color: var(--primary-color); + --icon-button-hover-color: var(--primary-active); + --icon-button-opacity: 1; + --icon-button-hover-opacity: 1; --mat-dialog-supporting-text-color: var(--text); @@ -78,11 +82,11 @@ a { } .mat-mdc-icon-button { - color: var(--primary-color) !important; + color: var(--icon-button-color, var(--primary-color)); transition: var(--transition); &:hover { - color: var(--primary-active) !important; + color: var(--icon-button-hover-color, var(--primary-active)); } } @@ -103,11 +107,11 @@ body .cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing { } .btn-icon { - opacity: 0.2; + opacity: var(--icon-button-opacity); transition: var(--transition); &:hover { - opacity: 1; + opacity: var(--icon-button-hover-opacity); } } @@ -126,6 +130,5 @@ body { opacity: 0; } - --mat-form-field-container-text-line-height: 16px; - --mat-form-field-container-text-size: 16px; + }