Add new pages

VernissageApp · Nov 17, 2023 · 2e3fa8f · 2e3fa8f
1 parent 2e8c75c
commit 2e3fa8f
Show file tree

Hide file tree

Showing 17 changed files with 339 additions and 12 deletions.
diff --git a/src/app/components/angular-material.module.ts b/src/app/components/angular-material.module.ts
@@ -25,6 +25,9 @@ import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatNativeDateModule } from '@angular/material/core';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
+import { MatBadgeModule } from '@angular/material/badge';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import { MatRadioModule } from '@angular/material/radio';
 
 @NgModule({
     imports: [
@@ -53,7 +56,10 @@ import { MatButtonToggleModule } from '@angular/material/button-toggle';
         MatNativeDateModule,
         MatCheckboxModule,
         MatStepperModule,
-        MatButtonToggleModule
+        MatButtonToggleModule,
+        MatBadgeModule,
+        MatSlideToggleModule,
+        MatRadioModule
     ],
     exports: [
         MatToolbarModule,
@@ -81,7 +87,10 @@ import { MatButtonToggleModule } from '@angular/material/button-toggle';
         MatNativeDateModule,
         MatCheckboxModule,
         MatStepperModule,
-        MatButtonToggleModule
+        MatButtonToggleModule,
+        MatBadgeModule,
+        MatSlideToggleModule,
+        MatRadioModule
     ]
 })
 export class AngularMaterialModule { }
diff --git a/src/app/components/core/header/header.component.html b/src/app/components/core/header/header.component.html
@@ -7,22 +7,83 @@
             <button mat-button [routerLink]="['/login']">Log in</button>
         </ng-container>
         <ng-container *ngIf="user">
+            <ng-container *ngIf="deviceResolution === resolution.handsetLandscape || deviceResolution === resolution.tablet || deviceResolution === resolution.browser">
+                <ng-container *ngIf="deviceResolution === resolution.handsetLandscape">
+                    <button mat-icon-button color="primary" [routerLink]="['/trending']" aria-label="Trending">
+                        <mat-icon>timeline</mat-icon>
+                    </button>
+                    <button mat-icon-button color="primary" [routerLink]="['/editors']" aria-label="Editor's choice">
+                        <mat-icon>stars</mat-icon>
+                    </button>
+                    <button mat-icon-button color="primary" [routerLink]="['/categories']" aria-label="Categories">
+                        <mat-icon>loyalty</mat-icon>
+                    </button>
+                </ng-container>
+
+
+                <ng-container *ngIf="deviceResolution === resolution.tablet || deviceResolution === resolution.browser">
+                    <button mat-button color="primary" [routerLink]="['/trending']" aria-label="Trending" class="margin-right-5">
+                        <mat-icon>timeline</mat-icon> Trending
+                    </button>
+                    <button mat-button color="primary" [routerLink]="['/editors']" aria-label="Editor's choice" class="margin-right-5">
+                        <mat-icon>stars</mat-icon> Editor's choice
+                    </button>
+                    <button mat-button color="primary" [routerLink]="['/categories']" aria-label="Categories" class="margin-right-5">
+                        <mat-icon>loyalty</mat-icon> Categories
+                    </button>
+                </ng-container>
+            </ng-container>
+
             <div class="flex-spacer"></div>
 
-            <button *ngIf="deviceResolution === resolution.browser" mat-stroked-button color="primary" class="margin-right-10" [routerLink]="['/upload']">
-                <mat-icon>arrow_upward</mat-icon> Upload
-            </button>
+            <ng-container *ngIf="deviceResolution === resolution.handsetLandscape || deviceResolution === resolution.tablet || deviceResolution === resolution.browser">
+                <button *ngIf="deviceResolution === resolution.handsetLandscape" mat-icon-button color="primary" [routerLink]="['/upload']" aria-label="Upload">
+                    <mat-icon>arrow_upward</mat-icon>
+                </button>
+                <button *ngIf="deviceResolution === resolution.tablet || deviceResolution === resolution.browser" mat-stroked-button color="primary" class="margin-right-10" [routerLink]="['/upload']">
+                    <mat-icon>arrow_upward</mat-icon> Upload
+                </button>
+            </ng-container>
 
-            <button *ngIf="deviceResolution !== resolution.browser" mat-icon-button color="primary" [routerLink]="['/upload']">
-                <mat-icon>arrow_upward</mat-icon>
-            </button>
+            <ng-container *ngIf="deviceResolution === resolution.handsetPortrait">
+                <button mat-icon-button [matMenuTriggerFor]="discover" color="primary" aria-label="More options">
+                    <mat-icon>menu</mat-icon>
+                </button>
+                <mat-menu #discover="matMenu">
+                    <button mat-menu-item [routerLink]="['/trending']" aria-label="Trending">
+                        <mat-icon>timeline</mat-icon>
+                        <span>Trending</span>
+                    </button>
+                    <button mat-menu-item [routerLink]="['/editors']" aria-label="Editor's choice">
+                        <mat-icon>stars</mat-icon>
+                        <span>Editor's choice</span>
+                    </button>
+                    <button mat-menu-item [routerLink]="['/categories']" aria-label="Categories">
+                        <mat-icon>loyalty</mat-icon>
+                        <span>Categories</span>
+                    </button>
+
+                    <mat-divider></mat-divider>
 
-            <button mat-icon-button color="primary" [routerLink]="['/search']" aria-label="Search">
+                    <button mat-menu-item [routerLink]="['/upload']" aria-label="Upload">
+                        <mat-icon>arrow_upward</mat-icon>
+                        <span>Upload</span>
+                    </button>
+                    <button mat-menu-item [routerLink]="['/search']" aria-label="Search">
+                        <mat-icon>search</mat-icon>
+                        <span>Search</span>
+                    </button>
+                </mat-menu>
+            </ng-container>
+
+            <mat-divider class="menu-divider" [vertical]="true"></mat-divider>
+
+            <button *ngIf="deviceResolution !== resolution.handsetPortrait" mat-icon-button color="primary" [routerLink]="['/search']" aria-label="Search">
                 <mat-icon>search</mat-icon>
             </button>
 
             <button mat-icon-button color="primary" [routerLink]="['/notifications']" aria-label="Notifications">
-                <mat-icon>notifications_none</mat-icon>
+                <mat-icon matBadge="15" matBadgeColor="warn" matBadgeSize="small" aria-hidden="false">notifications_none</mat-icon>
             </button>
 
             <div>
@@ -52,6 +113,10 @@
                         <mat-icon>account_circle</mat-icon>
                         <span>Account</span>
                     </button>
+                    <button mat-menu-item [routerLink]="['/preferences']" aria-label="Preferences">
+                        <mat-icon>build</mat-icon>
+                        <span>Preferences</span>
+                    </button>
                     <button *ngIf="isAdministrator()" mat-menu-item [routerLink]="['/settings']" aria-label="Settings">
                         <mat-icon>settings</mat-icon>
                         <span>Settings</span>

diff --git a/src/app/components/core/header/header.component.scss b/src/app/components/core/header/header.component.scss
@@ -9,6 +9,12 @@ mat-toolbar {
   height: 64px !important;
 }
 
+.menu-divider {
+    height: 24px;
+    margin-left: 12px;
+    margin-right: 12px;
+}
+
 .avatar {
     border-radius: 50%;
 }

diff --git a/src/app/pages/categories/categories.page.html b/src/app/pages/categories/categories.page.html
@@ -0,0 +1,5 @@
+<div *ngIf="isReady" @fadeIn [ngClass]="{ 'padding-30': !isHandset, 'padding-10': isHandset }">
+    <section>
+        <h1>Categories</h1>
+    </section>
+</div>
diff --git a/src/app/pages/categories/categories.page.scss b/src/app/pages/categories/categories.page.scss
diff --git a/src/app/pages/categories/categories.page.ts b/src/app/pages/categories/categories.page.ts
@@ -0,0 +1,13 @@
+import { Component } from "@angular/core";
+import { fadeInAnimation } from "src/app/animations/fade-in.animation";
+import { Responsive } from "src/app/common/responsive";
+
+@Component({
+    selector: 'app-categories',
+    templateUrl: './categories.page.html',
+    styleUrls: ['./categories.page.scss'],
+    animations: fadeInAnimation
+})
+export class CategoriesPage extends Responsive {
+    isReady = true;
+}
diff --git a/src/app/pages/editors/editors.page.html b/src/app/pages/editors/editors.page.html
@@ -0,0 +1,5 @@
+<div *ngIf="isReady" @fadeIn [ngClass]="{ 'padding-30': !isHandset, 'padding-10': isHandset }">
+    <section>
+        <h1>Editor's choice</h1>
+    </section>
+</div>
diff --git a/src/app/pages/editors/editors.page.scss b/src/app/pages/editors/editors.page.scss
diff --git a/src/app/pages/editors/editors.page.ts b/src/app/pages/editors/editors.page.ts
@@ -0,0 +1,13 @@
+import { Component } from "@angular/core";
+import { fadeInAnimation } from "src/app/animations/fade-in.animation";
+import { Responsive } from "src/app/common/responsive";
+
+@Component({
+    selector: 'app-editors',
+    templateUrl: './editors.page.html',
+    styleUrls: ['./editors.page.scss'],
+    animations: fadeInAnimation
+})
+export class EditorsPage extends Responsive {
+    isReady = true;
+}
diff --git a/src/app/pages/pages-routing.module.ts b/src/app/pages/pages-routing.module.ts
@@ -22,6 +22,10 @@ import { StatusPage } from './status/status.page';
 import { NotificationsPage } from './notifications/notifications.page';
 import { InvitationsPage } from './invitations/invitations.page';
 import { SettingsPage } from './settings/settings.page';
+import { TrendingPage } from './trending/trending.page';
+import { EditorsPage } from './editors/editors.page';
+import { CategoriesPage } from './categories/categories.page';
+import { PreferencesPage } from './preferences/preferences.page';
 
 const routes: Routes = [
     { path: 'login', component: LoginPage, canActivate: [ LoggedOutGuardService ] },
@@ -41,6 +45,10 @@ const routes: Routes = [
     { path: 'notifications', component: NotificationsPage, canActivate: [ AuthorizationGuardService ] },
     { path: 'invitations', component: InvitationsPage, canActivate: [ AuthorizationGuardService ] },
     { path: 'settings', component: SettingsPage, canActivate: [ AuthorizationGuardService ] },
+    { path: 'trending', component: TrendingPage, canActivate: [ AuthorizationGuardService ] },
+    { path: 'editors', component: EditorsPage, canActivate: [ AuthorizationGuardService ] },
+    { path: 'categories', component: CategoriesPage, canActivate: [ AuthorizationGuardService ] },
+    { path: 'preferences', component: PreferencesPage, canActivate: [ AuthorizationGuardService ] },
     { path: ':userName', component: ProfilePage, children: [
         { path: 'following', component: ProfilePage },
         { path: 'followers', component: ProfilePage }

diff --git a/src/app/pages/pages.module.ts b/src/app/pages/pages.module.ts
@@ -24,6 +24,10 @@ import { StatusPage } from './status/status.page';
 import { NotificationsPage } from './notifications/notifications.page';
 import { InvitationsPage } from './invitations/invitations.page';
 import { SettingsPage } from './settings/settings.page';
+import { TrendingPage } from './trending/trending.page';
+import { EditorsPage } from './editors/editors.page';
+import { CategoriesPage } from './categories/categories.page';
+import { PreferencesPage } from './preferences/preferences.page';
 
 @NgModule({
     imports: [
@@ -51,7 +55,11 @@ import { SettingsPage } from './settings/settings.page';
         StatusPage,
         NotificationsPage,
         InvitationsPage,
-        SettingsPage
+        SettingsPage,
+        TrendingPage,
+        EditorsPage,
+        CategoriesPage,
+        PreferencesPage
     ],
     exports: [
         ComponentsModule,
@@ -74,7 +82,11 @@ import { SettingsPage } from './settings/settings.page';
         SearchPage,
         NotificationsPage,
         InvitationsPage,
-        SettingsPage
+        SettingsPage,
+        TrendingPage,
+        EditorsPage,
+        CategoriesPage,
+        PreferencesPage
     ]
 })
 export class PagesModule { }
diff --git a/src/app/pages/preferences/preferences.page.html b/src/app/pages/preferences/preferences.page.html
@@ -0,0 +1,89 @@
+<div *ngIf="isReady && preferences" @fadeIn [ngClass]="{ 'padding-30': !isHandset, 'padding-10': isHandset }">
+    <div class="flex-row flex-space-around">
+        <div class="preferences-container width-100">
+            <section>
+                <h1>Preferences</h1>
+            </section>
+
+            <form name="form" (ngSubmit)="f.form.valid && onSubmit()" #f="ngForm" novalidate>
+
+                <mat-card *ngIf="preferences" class="preferences-card" appearance="outlined">
+                    <mat-card-content>
+                        <h4>Theme</h4>
+                        <div class="margin-bottom-20">
+                            <mat-radio-group name="theme" [(ngModel)]="theme" aria-label="Select theme">
+                                <div>
+                                    <mat-radio-button value="1" [disableRipple]="true"> Light</mat-radio-button>
+                                </div>
+                                <div>
+                                    <mat-radio-button value="2" [disableRipple]="true"> Dark</mat-radio-button>
+                                </div>
+                            </mat-radio-group>
+                        </div>
+
+                        <mat-divider></mat-divider>
+
+                        <div class="margin-top-20">
+                            <h4>Avatar</h4>
+                        </div>
+
+                        <div class="margin-bottom-20">
+                            <mat-radio-group name="avatar" [(ngModel)]="avatar" aria-label="Select avatar">
+                                <div>
+                                    <mat-radio-button value="1" [disableRipple]="true"> Circle</mat-radio-button>
+                                </div>
+                                <div>
+                                    <mat-radio-button value="2" [disableRipple]="true"> Rounded rectangle</mat-radio-button>
+                                </div>
+                            </mat-radio-group>
+                        </div>
+
+                        <mat-divider></mat-divider>
+
+                        <div class="margin-top-20">
+                            <h4>Media settings</h4>
+                        </div>
+
+                        <div class="margin-bottom-20">
+                            <mat-slide-toggle color="warn" [checked]="alwaysShowNSFW">
+                                Always show NSFW <div class="text-muted fs-90">Force show all NSFW (sensitive) media without warnings.</div>
+                            </mat-slide-toggle>
+                        </div>
+
+                        <div class="margin-bottom-20">
+                            <mat-slide-toggle color="warn" [checked]="showAlternativeText">
+                                Show alternative text <div class="text-muted fs-90">Show alternative text if present on status details screen.</div>
+                            </mat-slide-toggle>
+                        </div>
+
+                        <div class="margin-bottom-20">
+                            <mat-slide-toggle color="warn" [checked]="showAvatars">
+                                Show avatars <div class="text-muted fs-90">Avatars will be displayed on timelines.</div>
+                            </mat-slide-toggle>
+                        </div>
+
+                        <div class="margin-bottom-20">
+                            <mat-slide-toggle color="warn" [checked]="showFavourites">
+                                Show favourites <div class="text-muted fs-90">Favourites will be displayed on timelines.</div>
+                            </mat-slide-toggle>
+                        </div>
+
+                        <div class="margin-bottom-20">
+                            <mat-slide-toggle color="warn" [checked]="showAltIcon">
+                                Show ALT icon <div class="text-muted fs-90">ALT icon will be displayed on timelines.</div>
+                            </mat-slide-toggle>
+                        </div>
+                    </mat-card-content>
+
+                    <mat-card-actions>
+                        <div class="actions margin-top-20">
+                            <button type="submit" mat-raised-button color="primary" aria-label="Save">Save</button>
+                        </div>
+                    </mat-card-actions>
+                </mat-card>
+
+            </form>
+
+        </div>
+    </div>
+</div>
diff --git a/src/app/pages/preferences/preferences.page.scss b/src/app/pages/preferences/preferences.page.scss
@@ -0,0 +1,29 @@
+.preferences-container {
+    max-width: 640px;
+
+    mat-form-field {
+        width: 100%;
+    }
+
+    ::ng-deep .mat-mdc-form-field-subscript-wrapper {
+        height: 0;
+    }
+
+    .actions {
+        margin-left: 8px;
+        margin-right: 8px;
+        margin-bottom: 10px;
+    }
+
+    .rounded {
+        width: 32px;
+        height: 32px;
+        border-radius: 15%;
+    }
+
+    .circle {
+        width: 32px;
+        height: 32px;
+        border-radius: 50%;
+    }
+}