Rename files and add fab

frontend/src/app/components/footer/footer.component.html

@@ -1,15 +1,21 @@
 <footer class="container">
   <p>
+    <span class="line">
       Made with 🤍 by
       <a class="link-unstyled" href="https://rubikscraft.nl" target="_blank"
         >Rubikscraft</a
       >
+
       {{ isDemo ? " - Demo Version" : "" }}
-    -
+    </span>
+
+    <span class="line">
+      &nbsp;-
       {{ version }}
       -
       <a class="link-unstyled" href="https://github.com/rubikscraft/picsur"
         >Source Code</a
       >
+    </span>
   </p>
 </footer>

frontend/src/app/components/footer/footer.component.scss

@@ -4,4 +4,10 @@ footer {
   align-items: center;
 
   margin-top: 16px;
+
+  text-align: center;
+}
+
+span.line {
+  display: inline-block;
 }

frontend/src/app/routes/settings/settings.module.ts

@@ -2,8 +2,8 @@ import { CommonModule } from '@angular/common';
 import { Injector, NgModule } from '@angular/core';
 import { MatIconModule } from '@angular/material/icon';
 import { MatListModule } from '@angular/material/list';
-import { SettingsSidebarComponent } from './settings-sidebar/settings-sidebar.component';
 import { SettingsRoutingModule } from './settings.routing.module';
+import { SettingsSidebarComponent } from './sidebar/settings-sidebar.component';
 
 @NgModule({
   declarations: [SettingsSidebarComponent],

frontend/src/app/routes/settings/settings.routing.module.ts

@@ -4,10 +4,10 @@ import { Permission } from 'picsur-shared/dist/dto/permissions';
 import { PermissionGuard } from 'src/app/guards/permission.guard';
 import { PRoutes } from 'src/app/models/picsur-routes';
 import { SidebarResolverService } from 'src/app/services/sidebar-resolver/sidebar-resolver.service';
-import { SettingsGeneralRouteModule } from './settings-general/settings-general.module';
+import { SettingsGeneralRouteModule } from './general/settings-general.module';
-import { SettingsSidebarComponent } from './settings-sidebar/settings-sidebar.component';
+import { SettingsSidebarComponent } from './sidebar/settings-sidebar.component';
-import { SettingsSysprefRouteModule } from './settings-syspref/settings-syspref.module';
+import { SettingsSysprefRouteModule } from './syspref/settings-syspref.module';
-import { SettingsUsersRouteModule } from './settings-users/settings-users.module';
+import { SettingsUsersRouteModule } from './users/settings-users.module';
 
 const SettingsRoutes: PRoutes = [
   {

frontend/src/app/routes/settings/syspref/settings-syspref.component.ts

@@ -1,7 +1,10 @@
 import { Component, OnInit } from '@angular/core';
 import { AutoUnsubscribe } from 'ngx-auto-unsubscribe-decorator';
 import { SysPreferenceResponse } from 'picsur-shared/dist/dto/api/pref.dto';
+import { HasFailed } from 'picsur-shared/dist/types';
+import { SnackBarType } from 'src/app/models/snack-bar-type';
 import { SysprefService as SysPrefService } from 'src/app/services/api/syspref.service';
+import { UtilService } from 'src/app/util/util.service';
 
 @Component({
   templateUrl: './settings-syspref.component.html',
@@ -10,11 +13,20 @@ export class SettingsSysprefComponent implements OnInit {
   render = true;
   preferences: SysPreferenceResponse[] = [];
 
-  constructor(private sysprefService: SysPrefService) {}
+  constructor(
+    private sysprefService: SysPrefService,
+    private utilService: UtilService
+  ) {}
 
   async ngOnInit() {
     this.subscribePreferences();
-    await this.sysprefService.getPreferences();
+    const success = await this.sysprefService.getPreferences();
+    if (HasFailed(success)) {
+      this.utilService.showSnackBar(
+        'Failed to load preferences',
+        SnackBarType.Error
+      );
+    }
   }
 
   @AutoUnsubscribe()

frontend/src/app/routes/settings/syspref/settings-syspref.module.ts

@@ -2,9 +2,9 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { MatInputModule } from '@angular/material/input';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
-import { SettingsSysprefOptionComponent } from './settings-syspref-option/settings-syspref-option.component';
 import { SettingsSysprefComponent } from './settings-syspref.component';
 import { SettingsSysprefRoutingModule } from './settings-syspref.routing.module';
+import { SettingsSysprefOptionComponent } from './syspref-option/settings-syspref-option.component';
 
 @NgModule({
   declarations: [SettingsSysprefComponent, SettingsSysprefOptionComponent],

frontend/src/app/routes/settings/users/settings-users.component.html

@@ -1,6 +1,6 @@
 <h1>Users</h1>
 
-<mat-table [dataSource]="dataSubject" class="mat-elevation-z8">
+<mat-table [dataSource]="dataSubject" class="mat-elevation-z2">
   <ng-container matColumnDef="id">
     <mat-header-cell *matHeaderCellDef>ID</mat-header-cell>
     <mat-cell *matCellDef="let user">{{ user.id }}</mat-cell>
@@ -21,17 +21,11 @@
   </ng-container>
 
   <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
-  <mat-row *matRowDef="let row; columns: displayedColumns">
+  <mat-row *matRowDef="let row; columns: displayedColumns"> pog </mat-row>
-    pog
-  </mat-row>
 </mat-table>
 
-<mat-paginator
+<div class="fabholder">
-  color="accent"
+  <button mat-fab color="accent" class="fabbutton fullanimate mat-elevation-z6">
-  [pageSizeOptions]="pageSizeOptions"
+    <mat-icon>add</mat-icon>
-  [pageSize]="startingPageSize"
+  </button>
-  length="Infinity"
+</div>
-  aria-label="Select page of periodic elements"
-  (page)="updateSubject.next($event)"
->
-</mat-paginator>

frontend/src/app/routes/settings/users/settings-users.component.scss

@@ -5,3 +5,4 @@ mat-table {
 .mat-column-actions {
   justify-content: end;
 }
+

frontend/src/scss/fixes.scss

@@ -1,3 +1,4 @@
+// General styling
 html,
 body {
   height: 100%;
@@ -19,13 +20,6 @@ html {
 *:before,
 *:after {
   box-sizing: inherit;
-
-  -webkit-transition: 0.2s;
-  -moz-transition: 0.2s;
-  -o-transition: 0.2s;
-  transition: 0.2s;
-
-  transition-property: width, height, background-color, color, opacity;
 }
 
 :not(input) {
@@ -42,6 +36,8 @@ html {
   width: initial !important;
 }
 
+// Fix small form inputs
+
 form mat-form-field {
   width: inherit;
   max-width: 40rem;

frontend/src/scss/personal.scss

@@ -1,3 +1,4 @@
+// Create white border around content
 .content-border {
   border-radius: 20px;
   height: 100%;
@@ -6,6 +7,7 @@
   border-width: 5px;
 }
 
+// Easily center content
 .centered {
   display: flex;
   flex-direction: column;
@@ -18,6 +20,7 @@
   width: 100%;
 }
 
+// Unstyled links
 .link-unstyled {
   &,
   &:visited,
@@ -42,3 +45,24 @@
     vertical-align: inherit;
   }
 }
+
+// Fabs
+.fabholder {
+  display: flex;
+  justify-content: flex-end;
+
+  & > .fabbutton {
+    position: fixed;
+    bottom: 1.5rem;
+
+    @include media-breakpoint-up(xl) {
+      bottom: 4rem;
+    }
+  }
+}
+
+// Anim
+
+.fullanimate, .fullanimate * {
+  transition: ease-in-out all 0.2s !important;
+}