From 2f5a732ffc00f693ab1b99cfd0f7778ee73ee831 Mon Sep 17 00:00:00 2001 From: smuddyx Date: Sun, 11 Feb 2024 17:37:50 +0100 Subject: [PATCH] fixes after ng update --- src/app/app.component.less | 7 --- src/app/modules/brand/brand.component.html | 2 +- .../presentation/presentation.module.ts | 10 +-- .../presentation/remote/remote.component.html | 12 ++-- .../presentation/remote/remote.component.less | 16 ++--- src/app/modules/shows/show/show.component.ts | 2 +- .../shows/show/song/song.component.html | 7 ++- .../shows/show/song/song.component.less | 15 ++++- .../modules/shows/show/song/song.component.ts | 9 ++- src/app/modules/shows/shows.module.ts | 16 ++--- .../songs/song-list/song-list.module.ts | 8 +-- .../edit/edit-song/edit-song.component.html | 9 ++- .../edit/edit-song/edit-song.component.ts | 4 +- .../modules/songs/song/edit/edit.module.ts | 14 ++--- src/app/modules/songs/song/new/new.module.ts | 4 +- .../modules/songs/song/song.component.html | 9 +-- src/app/modules/songs/song/song.module.ts | 6 +- src/app/modules/user/user.module.ts | 8 +-- .../components/add-song/add-song.component.ts | 2 +- .../components/add-song/add-song.module.ts | 4 +- .../components/button/button.module.ts | 2 +- .../components/card/card.module.ts | 2 +- .../list-header/list-header.module.ts | 2 +- .../menu-button/menu-button.module.ts | 2 +- .../components/song-text/song-text.module.ts | 2 +- src/custom-theme.scss | 24 +++---- src/styles/styles.less | 62 +++---------------- 27 files changed, 115 insertions(+), 145 deletions(-) diff --git a/src/app/app.component.less b/src/app/app.component.less index 8b506d4..adc68fa 100644 --- a/src/app/app.component.less +++ b/src/app/app.component.less @@ -1,10 +1,3 @@ h1 { color: red; } - - -.manager { - //display: grid; - //grid-template-columns: 1fr 1fr; - //transition: all 1s ease-in-out; -} diff --git a/src/app/modules/brand/brand.component.html b/src/app/modules/brand/brand.component.html index 7f940f1..9c1d6ef 100644 --- a/src/app/modules/brand/brand.component.html +++ b/src/app/modules/brand/brand.component.html @@ -1,4 +1,4 @@
-
© 2019 - 2023 - Benjamin Ifland
+
© 2019 - 2024 - Benjamin Ifland
diff --git a/src/app/modules/presentation/presentation.module.ts b/src/app/modules/presentation/presentation.module.ts index 5e8cf4a..b211d2e 100644 --- a/src/app/modules/presentation/presentation.module.ts +++ b/src/app/modules/presentation/presentation.module.ts @@ -5,20 +5,20 @@ import {PresentationRoutingModule} from './presentation-routing.module'; import {MonitorComponent} from './monitor/monitor.component'; import {RemoteComponent} from './remote/remote.component'; import {CardModule} from '../../widget-modules/components/card/card.module'; -import {MatLegacyFormFieldModule as MatFormFieldModule} from '@angular/material/legacy-form-field'; -import {MatLegacySelectModule as MatSelectModule} from '@angular/material/legacy-select'; +import {MatFormFieldModule} from '@angular/material/form-field'; +import {MatSelectModule} from '@angular/material/select'; import {ShowTypeTranslaterModule} from '../../widget-modules/pipes/show-type-translater/show-type-translater.module'; import {SectionTypeTranslatorModule} from '../../widget-modules/pipes/section-type-translator/section-type-translator.module'; import {SongTextModule} from '../../widget-modules/components/song-text/song-text.module'; import {LegalComponent} from './monitor/legal/legal.component'; -import {MatLegacyButtonModule as MatButtonModule} from '@angular/material/legacy-button'; +import {MatButtonModule} from '@angular/material/button'; import {FontAwesomeModule} from '@fortawesome/angular-fontawesome'; -import {MatLegacySliderModule as MatSliderModule} from '@angular/material/legacy-slider'; +import {MatSliderModule} from '@angular/material/slider'; import {FormsModule, ReactiveFormsModule} from '@angular/forms'; import {AddSongModule} from '../../widget-modules/components/add-song/add-song.module'; import {LogoComponent} from './monitor/logo/logo.component'; import {SelectComponent} from './select/select.component'; -import {MatLegacyInputModule as MatInputModule} from '@angular/material/legacy-input'; +import {MatInputModule} from '@angular/material/input'; import {UserNameModule} from '../../services/user/user-name/user-name.module'; @NgModule({ diff --git a/src/app/modules/presentation/remote/remote.component.html b/src/app/modules/presentation/remote/remote.component.html index 752d615..8e2ba08 100644 --- a/src/app/modules/presentation/remote/remote.component.html +++ b/src/app/modules/presentation/remote/remote.component.html @@ -77,7 +77,7 @@
- @@ -98,17 +98,19 @@ + #slider + ngDefaultControl + > +
{{ iSong.title }} - {{ iSong.keyOriginal }} →  - - + {{ iSong.keyOriginal }} → {{ iSong.key }} + + {{ key }} diff --git a/src/app/modules/shows/show/song/song.component.less b/src/app/modules/shows/show/song/song.component.less index afdd82f..d6758ed 100644 --- a/src/app/modules/shows/show/song/song.component.less +++ b/src/app/modules/shows/show/song/song.component.less @@ -17,8 +17,18 @@ } .keys { - width: 40px; - margin: -24px 0 -20px 0; + position: relative; + margin-right: 10px; + cursor: pointer; + + &:hover { + color: var(--color-primary); + } +} + +.transpose { + height: 0; + position: absolute; } .btn-up { @@ -54,6 +64,7 @@ grid-area: delete; justify-content: flex-end; } + .btn-edit { grid-area: edit; justify-content: flex-end; diff --git a/src/app/modules/shows/show/song/song.component.ts b/src/app/modules/shows/show/song/song.component.ts index abf52b2..bf799aa 100644 --- a/src/app/modules/shows/show/song/song.component.ts +++ b/src/app/modules/shows/show/song/song.component.ts @@ -1,4 +1,4 @@ -import {Component, Input, OnInit} from '@angular/core'; +import {Component, Input, OnInit, ViewChild} from '@angular/core'; import {ShowSongService} from '../../services/show-song.service'; import {ShowSong} from '../../services/show-song'; import {getScale} from '../../../songs/services/key.helper'; @@ -7,6 +7,7 @@ import {ChordMode} from '../../../../widget-modules/components/song-text/song-te import {Show} from '../../services/show'; import {faEraser, faPenToSquare, faSave, faTrash} from '@fortawesome/free-solid-svg-icons'; import {fade} from '../../../../animations'; +import {MatSelect} from '@angular/material/select'; @Component({ selector: 'app-song', @@ -21,6 +22,8 @@ export class SongComponent implements OnInit { @Input() public index = -1; @Input() public fullscreen = false; + @ViewChild('option') private keyOptions: MatSelect; + public keys: string[] = []; public faDelete = faTrash; public faEdit = faPenToSquare; @@ -75,4 +78,8 @@ export class SongComponent implements OnInit { chordMode: value, }); } + + public openKeySelect(): void { + this.keyOptions.open(); + } } diff --git a/src/app/modules/shows/shows.module.ts b/src/app/modules/shows/shows.module.ts index b64b8e3..6da70c7 100644 --- a/src/app/modules/shows/shows.module.ts +++ b/src/app/modules/shows/shows.module.ts @@ -4,17 +4,17 @@ import {CommonModule} from '@angular/common'; import {ShowsRoutingModule} from './shows-routing.module'; import {NewComponent} from './new/new.component'; import {CardModule} from '../../widget-modules/components/card/card.module'; -import {MatLegacyFormFieldModule as MatFormFieldModule} from '@angular/material/legacy-form-field'; +import {MatFormFieldModule} from '@angular/material/form-field'; import {FormsModule, ReactiveFormsModule} from '@angular/forms'; -import {MatLegacyInputModule as MatInputModule} from '@angular/material/legacy-input'; +import {MatInputModule} from '@angular/material/input'; import {ListComponent} from './list/list.component'; import {ListItemComponent} from './list/list-item/list-item.component'; import {ListHeaderModule} from '../../widget-modules/components/list-header/list-header.module'; -import {MatLegacyCheckboxModule as MatCheckboxModule} from '@angular/material/legacy-checkbox'; +import {MatCheckboxModule} from '@angular/material/checkbox'; import {ButtonRowModule} from '../../widget-modules/components/button-row/button-row.module'; -import {MatLegacyButtonModule as MatButtonModule} from '@angular/material/legacy-button'; +import {MatButtonModule} from '@angular/material/button'; import {MatDatepickerModule} from '@angular/material/datepicker'; -import {MatLegacySelectModule as MatSelectModule} from '@angular/material/legacy-select'; +import {MatSelectModule} from '@angular/material/select'; import {ShowTypeTranslaterModule} from '../../widget-modules/pipes/show-type-translater/show-type-translater.module'; import {MatNativeDateModule} from '@angular/material/core'; import {ShowComponent} from './show/show.component'; @@ -27,15 +27,15 @@ import {AddSongModule} from '../../widget-modules/components/add-song/add-song.m import {ButtonModule} from '../../widget-modules/components/button/button.module'; import {OwnerModule} from '../../services/user/owner.module'; import {UserNameModule} from '../../services/user/user-name/user-name.module'; -import {MatLegacyMenuModule as MatMenuModule} from '@angular/material/legacy-menu'; +import {MatMenuModule} from '@angular/material/menu'; import {DragDropModule} from '@angular/cdk/drag-drop'; import {RoleModule} from '../../services/user/role.module'; import {SortByModule} from '../../widget-modules/pipes/sort-by/sort-by.module'; -import {MatLegacyTooltipModule as MatTooltipModule} from '@angular/material/legacy-tooltip'; +import {MatTooltipModule} from '@angular/material/tooltip'; import {FilterComponent} from './list/filter/filter.component'; import {EditComponent} from './edit/edit.component'; import {ArchiveDialogComponent} from './dialog/archive-dialog/archive-dialog.component'; -import {MatLegacyDialogModule as MatDialogModule} from '@angular/material/legacy-dialog'; +import {MatDialogModule} from '@angular/material/dialog'; @NgModule({ declarations: [NewComponent, ListComponent, ListItemComponent, ShowComponent, SongComponent, FilterComponent, EditComponent, ArchiveDialogComponent], diff --git a/src/app/modules/songs/song-list/song-list.module.ts b/src/app/modules/songs/song-list/song-list.module.ts index 83d9bc9..2762965 100644 --- a/src/app/modules/songs/song-list/song-list.module.ts +++ b/src/app/modules/songs/song-list/song-list.module.ts @@ -5,14 +5,14 @@ import {CardModule} from '../../../widget-modules/components/card/card.module'; import {RouterModule} from '@angular/router'; import {LegalTypeTranslatorModule} from '../../../widget-modules/pipes/legal-type-translator/legal-type-translator.module'; import {ListHeaderModule} from '../../../widget-modules/components/list-header/list-header.module'; -import {MatLegacyFormFieldModule as MatFormFieldModule} from '@angular/material/legacy-form-field'; -import {MatLegacyInputModule as MatInputModule} from '@angular/material/legacy-input'; +import {MatFormFieldModule} from '@angular/material/form-field'; +import {MatInputModule} from '@angular/material/input'; import {FilterComponent} from './filter/filter.component'; import {ReactiveFormsModule} from '@angular/forms'; -import {MatLegacySelectModule as MatSelectModule} from '@angular/material/legacy-select'; +import {MatSelectModule} from '@angular/material/select'; import {SongTypeTranslaterModule} from '../../../widget-modules/pipes/song-type-translater/song-type-translater.module'; import {FontAwesomeModule} from '@fortawesome/angular-fontawesome'; -import {MatLegacyTooltipModule as MatTooltipModule} from '@angular/material/legacy-tooltip'; +import {MatTooltipModule} from '@angular/material/tooltip'; import {RoleModule} from '../../../services/user/role.module'; import {KeyTranslatorModule} from '../../../widget-modules/pipes/key-translator/key-translator.module'; diff --git a/src/app/modules/songs/song/edit/edit-song/edit-song.component.html b/src/app/modules/songs/song/edit/edit-song/edit-song.component.html index 989c070..aade6e8 100644 --- a/src/app/modules/songs/song/edit/edit-song/edit-song.component.html +++ b/src/app/modules/songs/song/edit/edit-song/edit-song.component.html @@ -95,16 +95,15 @@ - - + {{ flag }}  - + - +
diff --git a/src/app/modules/songs/song/edit/edit-song/edit-song.component.ts b/src/app/modules/songs/song/edit/edit-song/edit-song.component.ts index 485b7ef..7c42a62 100644 --- a/src/app/modules/songs/song/edit/edit-song/edit-song.component.ts +++ b/src/app/modules/songs/song/edit/edit-song/edit-song.component.ts @@ -7,9 +7,9 @@ import {EditService} from '../edit.service'; import {first, map, switchMap} from 'rxjs/operators'; import {KEYS} from '../../../services/key.helper'; import {COMMA, ENTER} from '@angular/cdk/keycodes'; -import {MatLegacyChipInputEvent as MatChipInputEvent} from '@angular/material/legacy-chips'; +import {MatChipInputEvent} from '@angular/material/chips'; import {faExternalLinkAlt, faSave, faTimesCircle} from '@fortawesome/free-solid-svg-icons'; -import {MatLegacyDialog as MatDialog} from '@angular/material/legacy-dialog'; +import {MatDialog} from '@angular/material/dialog'; import {SaveDialogComponent} from './save-dialog/save-dialog.component'; @Component({ diff --git a/src/app/modules/songs/song/edit/edit.module.ts b/src/app/modules/songs/song/edit/edit.module.ts index 027926d..64e54f6 100644 --- a/src/app/modules/songs/song/edit/edit.module.ts +++ b/src/app/modules/songs/song/edit/edit.module.ts @@ -4,10 +4,10 @@ import {EditComponent} from './edit.component'; import {CardModule} from '../../../../widget-modules/components/card/card.module'; import {SongTypeTranslaterModule} from '../../../../widget-modules/pipes/song-type-translater/song-type-translater.module'; import {ReactiveFormsModule} from '@angular/forms'; -import {MatLegacyInputModule as MatInputModule} from '@angular/material/legacy-input'; -import {MatLegacyCheckboxModule as MatCheckboxModule} from '@angular/material/legacy-checkbox'; -import {MatLegacySelectModule as MatSelectModule} from '@angular/material/legacy-select'; -import {MatLegacyButtonModule as MatButtonModule} from '@angular/material/legacy-button'; +import {MatInputModule} from '@angular/material/input'; +import {MatCheckboxModule} from '@angular/material/checkbox'; +import {MatSelectModule} from '@angular/material/select'; +import {MatButtonModule} from '@angular/material/button'; import {ButtonRowModule} from '../../../../widget-modules/components/button-row/button-row.module'; import {RouterModule} from '@angular/router'; import {EditSongComponent} from './edit-song/edit-song.component'; @@ -17,13 +17,13 @@ import {FileComponent} from './edit-file/file/file.component'; import {LegalOwnerTranslatorModule} from '../../../../widget-modules/pipes/legal-owner-translator/legal-owner-translator.module'; import {LegalTypeTranslatorModule} from '../../../../widget-modules/pipes/legal-type-translator/legal-type-translator.module'; import {KeyTranslatorModule} from '../../../../widget-modules/pipes/key-translator/key-translator.module'; -import {MatLegacyChipsModule as MatChipsModule} from '@angular/material/legacy-chips'; +import {MatChipsModule} from '@angular/material/chips'; import {FontAwesomeModule} from '@fortawesome/angular-fontawesome'; import {StatusTranslaterModule} from '../../../../widget-modules/pipes/status-translater/status-translater.module'; import {ButtonModule} from '../../../../widget-modules/components/button/button.module'; -import {MatLegacyTooltipModule as MatTooltipModule} from '@angular/material/legacy-tooltip'; +import {MatTooltipModule} from '@angular/material/tooltip'; import {SaveDialogComponent} from './edit-song/save-dialog/save-dialog.component'; -import {MatLegacyDialogModule as MatDialogModule} from '@angular/material/legacy-dialog'; +import {MatDialogModule} from '@angular/material/dialog'; import {HistoryComponent} from './history/history.component'; import {SongTextModule} from '../../../../widget-modules/components/song-text/song-text.module'; diff --git a/src/app/modules/songs/song/new/new.module.ts b/src/app/modules/songs/song/new/new.module.ts index 6e51ed5..7cebdf3 100644 --- a/src/app/modules/songs/song/new/new.module.ts +++ b/src/app/modules/songs/song/new/new.module.ts @@ -3,8 +3,8 @@ import {CommonModule} from '@angular/common'; import {NewComponent} from './new.component'; import {CardModule} from '../../../../widget-modules/components/card/card.module'; import {ReactiveFormsModule} from '@angular/forms'; -import {MatLegacyFormFieldModule as MatFormFieldModule} from '@angular/material/legacy-form-field'; -import {MatLegacyInputModule as MatInputModule} from '@angular/material/legacy-input'; +import {MatFormFieldModule} from '@angular/material/form-field'; +import {MatInputModule} from '@angular/material/input'; import {ButtonRowModule} from '../../../../widget-modules/components/button-row/button-row.module'; import {ButtonModule} from '../../../../widget-modules/components/button/button.module'; import {AutofocusModule} from '../../../../widget-modules/directives/autofocus/autofocus.module'; diff --git a/src/app/modules/songs/song/song.component.html b/src/app/modules/songs/song/song.component.html index 92d2ee9..d706157 100644 --- a/src/app/modules/songs/song/song.component.html +++ b/src/app/modules/songs/song/song.component.html @@ -40,14 +40,15 @@ [text]="song.text" > - - {{ + {{ flag - }} - + }} + +
{{ song.comment }} diff --git a/src/app/modules/songs/song/song.module.ts b/src/app/modules/songs/song/song.module.ts index 7b5ada9..715be7b 100644 --- a/src/app/modules/songs/song/song.module.ts +++ b/src/app/modules/songs/song/song.module.ts @@ -3,17 +3,17 @@ import {CommonModule} from '@angular/common'; import {SongComponent} from './song.component'; import {CardModule} from '../../../widget-modules/components/card/card.module'; import {SongTypeTranslaterModule} from '../../../widget-modules/pipes/song-type-translater/song-type-translater.module'; -import {MatLegacyButtonModule as MatButtonModule} from '@angular/material/legacy-button'; +import {MatButtonModule} from '@angular/material/button'; import {ButtonRowModule} from '../../../widget-modules/components/button-row/button-row.module'; import {RouterModule} from '@angular/router'; import {LegalOwnerTranslatorModule} from '../../../widget-modules/pipes/legal-owner-translator/legal-owner-translator.module'; import {SongTextModule} from '../../../widget-modules/components/song-text/song-text.module'; -import {MatLegacyChipsModule as MatChipsModule} from '@angular/material/legacy-chips'; +import {MatChipsModule} from '@angular/material/chips'; import {RoleModule} from '../../../services/user/role.module'; import {StatusTranslaterModule} from '../../../widget-modules/pipes/status-translater/status-translater.module'; import {ButtonModule} from '../../../widget-modules/components/button/button.module'; import {FileComponent} from './file/file.component'; -import {MatLegacyMenuModule as MatMenuModule} from '@angular/material/legacy-menu'; +import {MatMenuModule} from '@angular/material/menu'; import {ShowTypeTranslaterModule} from '../../../widget-modules/pipes/show-type-translater/show-type-translater.module'; @NgModule({ diff --git a/src/app/modules/user/user.module.ts b/src/app/modules/user/user.module.ts index a37e8d3..24b288a 100644 --- a/src/app/modules/user/user.module.ts +++ b/src/app/modules/user/user.module.ts @@ -3,16 +3,16 @@ import {CommonModule} from '@angular/common'; import {LoginComponent} from './login/login.component'; import {UserRoutingModule} from './user-routing.module'; import {CardModule} from '../../widget-modules/components/card/card.module'; -import {MatLegacyFormFieldModule as MatFormFieldModule} from '@angular/material/legacy-form-field'; +import {MatFormFieldModule} from '@angular/material/form-field'; import {FormsModule, ReactiveFormsModule} from '@angular/forms'; -import {MatLegacyInputModule as MatInputModule} from '@angular/material/legacy-input'; +import {MatInputModule} from '@angular/material/input'; import {ButtonRowModule} from '../../widget-modules/components/button-row/button-row.module'; -import {MatLegacyButtonModule as MatButtonModule} from '@angular/material/legacy-button'; +import {MatButtonModule} from '@angular/material/button'; import {AuthMessagePipe} from './login/auth-message.pipe'; import {InfoComponent} from './info/info.component'; import {LogoutComponent} from './logout/logout.component'; import {RolePipe} from './info/role.pipe'; -import {MatLegacySelectModule as MatSelectModule} from '@angular/material/legacy-select'; +import {MatSelectModule} from '@angular/material/select'; import {PasswordComponent} from './password/password.component'; import {PasswordSendComponent} from './password-send/password-send.component'; import {UsersComponent} from './info/users/users.component'; diff --git a/src/app/widget-modules/components/add-song/add-song.component.ts b/src/app/widget-modules/components/add-song/add-song.component.ts index fefdd9c..3ceba53 100644 --- a/src/app/widget-modules/components/add-song/add-song.component.ts +++ b/src/app/widget-modules/components/add-song/add-song.component.ts @@ -1,7 +1,7 @@ import {ChangeDetectionStrategy, Component, Input} from '@angular/core'; import {UntypedFormControl} from '@angular/forms'; import {filterSong} from '../../../services/filter.helper'; -import {MatLegacySelectChange as MatSelectChange} from '@angular/material/legacy-select'; +import {MatSelectChange} from '@angular/material/select'; import {Song} from '../../../modules/songs/services/song'; import {ShowSong} from '../../../modules/shows/services/show-song'; import {ShowSongService} from '../../../modules/shows/services/show-song.service'; diff --git a/src/app/widget-modules/components/add-song/add-song.module.ts b/src/app/widget-modules/components/add-song/add-song.module.ts index eee53af..5b5984f 100644 --- a/src/app/widget-modules/components/add-song/add-song.module.ts +++ b/src/app/widget-modules/components/add-song/add-song.module.ts @@ -1,8 +1,8 @@ import {NgModule} from '@angular/core'; import {CommonModule} from '@angular/common'; import {AddSongComponent} from './add-song.component'; -import {MatLegacyFormFieldModule as MatFormFieldModule} from '@angular/material/legacy-form-field'; -import {MatLegacySelectModule as MatSelectModule} from '@angular/material/legacy-select'; +import {MatFormFieldModule} from '@angular/material/form-field'; +import {MatSelectModule} from '@angular/material/select'; import {NgxMatSelectSearchModule} from 'ngx-mat-select-search'; import {ReactiveFormsModule} from '@angular/forms'; diff --git a/src/app/widget-modules/components/button/button.module.ts b/src/app/widget-modules/components/button/button.module.ts index ec2f56e..5383313 100644 --- a/src/app/widget-modules/components/button/button.module.ts +++ b/src/app/widget-modules/components/button/button.module.ts @@ -2,7 +2,7 @@ import {NgModule} from '@angular/core'; import {CommonModule} from '@angular/common'; import {ButtonComponent} from './button.component'; import {FontAwesomeModule} from '@fortawesome/angular-fontawesome'; -import {MatLegacyButtonModule as MatButtonModule} from '@angular/material/legacy-button'; +import {MatButtonModule} from '@angular/material/button'; @NgModule({ declarations: [ButtonComponent], diff --git a/src/app/widget-modules/components/card/card.module.ts b/src/app/widget-modules/components/card/card.module.ts index b1a7782..60da707 100644 --- a/src/app/widget-modules/components/card/card.module.ts +++ b/src/app/widget-modules/components/card/card.module.ts @@ -1,7 +1,7 @@ import {NgModule} from '@angular/core'; import {CommonModule} from '@angular/common'; import {CardComponent} from './card.component'; -import {MatLegacyButtonModule as MatButtonModule} from '@angular/material/legacy-button'; +import {MatButtonModule} from '@angular/material/button'; import {RouterModule} from '@angular/router'; import {FontAwesomeModule} from '@fortawesome/angular-fontawesome'; diff --git a/src/app/widget-modules/components/list-header/list-header.module.ts b/src/app/widget-modules/components/list-header/list-header.module.ts index 2878c0a..38d9e8f 100644 --- a/src/app/widget-modules/components/list-header/list-header.module.ts +++ b/src/app/widget-modules/components/list-header/list-header.module.ts @@ -2,7 +2,7 @@ import {NgModule} from '@angular/core'; import {CommonModule} from '@angular/common'; import {ListHeaderComponent} from './list-header.component'; import {FontAwesomeModule} from '@fortawesome/angular-fontawesome'; -import {MatLegacyButtonModule as MatButtonModule} from '@angular/material/legacy-button'; +import {MatButtonModule} from '@angular/material/button'; import {RouterModule} from '@angular/router'; import {CardModule} from '../card/card.module'; diff --git a/src/app/widget-modules/components/menu-button/menu-button.module.ts b/src/app/widget-modules/components/menu-button/menu-button.module.ts index 4b1db27..84c37f7 100644 --- a/src/app/widget-modules/components/menu-button/menu-button.module.ts +++ b/src/app/widget-modules/components/menu-button/menu-button.module.ts @@ -2,7 +2,7 @@ import {NgModule} from '@angular/core'; import {CommonModule} from '@angular/common'; import {MenuButtonComponent} from './menu-button.component'; import {FontAwesomeModule} from '@fortawesome/angular-fontawesome'; -import {MatLegacyButtonModule as MatButtonModule} from '@angular/material/legacy-button'; +import {MatButtonModule} from '@angular/material/button'; @NgModule({ declarations: [MenuButtonComponent], diff --git a/src/app/widget-modules/components/song-text/song-text.module.ts b/src/app/widget-modules/components/song-text/song-text.module.ts index 296ccd4..ed8fd46 100644 --- a/src/app/widget-modules/components/song-text/song-text.module.ts +++ b/src/app/widget-modules/components/song-text/song-text.module.ts @@ -2,7 +2,7 @@ import {NgModule} from '@angular/core'; import {CommonModule} from '@angular/common'; import {SongTextComponent} from './song-text.component'; import {FontAwesomeModule} from '@fortawesome/angular-fontawesome'; -import {MatLegacyButtonModule as MatButtonModule} from '@angular/material/legacy-button'; +import {MatButtonModule} from '@angular/material/button'; @NgModule({ declarations: [SongTextComponent], diff --git a/src/custom-theme.scss b/src/custom-theme.scss index c43085a..a206f40 100644 --- a/src/custom-theme.scss +++ b/src/custom-theme.scss @@ -14,9 +14,9 @@ // If you specify typography styles for the components you use elsewhere, you should delete this line. // If you don't need the default component typographies but still want the hierarchy styles, // you can delete this line and instead use: -// `@include mat.legacy-typography-hierarchy(mat.define-legacy-typography-config());` -@include mat.all-legacy-component-typographies(); -@include mat.legacy-core(); +// `@include mat.legacy-typography-hierarchy(mat.define-typography-config());` +@include mat.all-component-typographies(); +@include mat.core(); // Define the palettes for your theme using the Material Design palettes available in palette.scss // (imported above). For each palette, you can optionally specify a default, lighter, and darker @@ -33,7 +33,7 @@ $wgenerator-theme: mat.define-light-theme($wgenerator-primary, $wgenerator-accen // Include theme styles for core and each component used in your app. // Alternatively, you can import and @include the theme mixins for each component // that you are using. -@include mat.all-legacy-component-themes($wgenerator-theme); +@include mat.all-component-themes($wgenerator-theme); // Custom Theming for Angular Material @@ -50,9 +50,9 @@ $wgenerator-theme: mat.define-light-theme($wgenerator-primary, $wgenerator-accen // If you specify typography styles for the components you use elsewhere, you should delete this line. // If you don't need the default component typographies but still want the hierarchy styles, // you can delete this line and instead use: -// `@include mat.legacy-typography-hierarchy(mat.define-legacy-typography-config());` -@include mat.all-legacy-component-typographies(); -@include mat.legacy-core(); +// `@include mat.legacy-typography-hierarchy(mat.define-typography-config());` +@include mat.all-component-typographies(); +@include mat.core(); // Define the palettes for your theme using the Material Design palettes available in palette.scss // (imported above). For each palette, you can optionally specify a default, lighter, and darker @@ -69,7 +69,7 @@ $wgenerator-theme: mat.define-light-theme($wgenerator-primary, $wgenerator-accen // Include theme styles for core and each component used in your app. // Alternatively, you can import and @include the theme mixins for each component // that you are using. -@include mat.all-legacy-component-themes($wgenerator-theme); +@include mat.all-component-themes($wgenerator-theme); // Custom Theming for Angular Material // For more information: https://material.angular.io/guide/theming @@ -85,9 +85,9 @@ $wgenerator-theme: mat.define-light-theme($wgenerator-primary, $wgenerator-accen // If you specify typography styles for the components you use elsewhere, you should delete this line. // If you don't need the default component typographies but still want the hierarchy styles, // you can delete this line and instead use: -// `@include mat.legacy-typography-hierarchy(mat.define-legacy-typography-config());` -@include mat.all-legacy-component-typographies(); -@include mat.legacy-core(); +// `@include mat.legacy-typography-hierarchy(mat.define-typography-config());` +@include mat.all-component-typographies(); +@include mat.core(); // Define the palettes for your theme using the Material Design palettes available in palette.scss // (imported above). For each palette, you can optionally specify a default, lighter, and darker @@ -104,5 +104,5 @@ $wgenerator-theme: mat.define-light-theme($wgenerator-primary, $wgenerator-accen // Include theme styles for core and each component used in your app. // Alternatively, you can import and @include the theme mixins for each component // that you are using. -@include mat.all-legacy-component-themes($wgenerator-theme); +@include mat.all-component-themes($wgenerator-theme); diff --git a/src/styles/styles.less b/src/styles/styles.less index 794d9b3..494cbcd 100644 --- a/src/styles/styles.less +++ b/src/styles/styles.less @@ -4,9 +4,11 @@ @transition: all 300ms ease-in-out; -//html, body { -// height: 100%; -//} +:root { + --color-primary: #4286f4; + --color-primary-light: #639af3; +} + html { scroll-behavior: smooth; } @@ -37,17 +39,11 @@ a { color: inherit; } -.mat-form-field { +.mat-mdc-form-field { width: 100%; } -.mat-form-field .mat-form-field-infix { - width: unset; -} -.mat-form-field.mat-form-field-appearance-standard .mat-form-field-underline { - height: 0; -} .content > *:not(router-outlet) { @@ -79,49 +75,6 @@ body { font-family: Roboto, "Helvetica Neue", sans-serif; } -perfect-scrollbar.scroll > .ps.ps--scrolling-y > .ps__rail-y, -perfect-scrollbar.scroll > .ps .ps__rail-y:hover { - background-color: #222; - opacity: .3; -} - -.mat-chip.mat-standard-chip { - background: #fffa; -} - -input:-webkit-autofill, -input:-webkit-autofill:hover, -input:-webkit-autofill:focus, -textarea:-webkit-autofill, -textarea:-webkit-autofill:hover, -textarea:-webkit-autofill:focus, -select:-webkit-autofill, -select:-webkit-autofill:hover, -select:-webkit-autofill:focus { - -webkit-box-shadow: 0 0 0px 1000px #0000 inset; - transition: background-color 5000s ease-in-out 0s; -} - -mat-dialog-container.mat-dialog-container { - background: #fffb; - backdrop-filter: blur(8px); - border-radius: 8px; -} - -.mat-form-field-outline { - background: #fff4; - border-radius: 4px; -} - -.mat-form-field-appearance-outline.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-outline-gap { - border-top-color: inherit !important; -} - -.mat-form-field-appearance-outline.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label, -.mat-form-field-appearance-outline.mat-form-field-can-float .mat-input-server:focus + .mat-form-field-label-wrapper .mat-form-field-label { - transform: translateY(-1.0em) scale(0.75); -} - body { .swiper-button-next, .swiper-button-prev { @@ -131,4 +84,7 @@ body { .swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled { opacity: 0; } + + --mat-form-field-container-text-line-height: 16px; + --mat-form-field-container-text-size: 16px; }