feat: remove fit option for now, in favor of blur; fix settings link

garuda-linux · Oct 14, 2024 · c285a28 · c285a28
1 parent 144b85f
commit c285a28
Show file tree

Hide file tree

Showing 8 changed files with 98 additions and 71 deletions.
diff --git a/config.ts b/config.ts
@@ -196,11 +196,11 @@ export const defaultSettings: DefaultSettings = {
     searchEngineName: "Custom",
     searchEngineUrl: "Set a custom search engine URL (omit %s)",
     theme: "mocha" as StartpageTheme,
-    wallpaper: "",
-    wallpaperBlur: false,
+    wallpaper: "wallpapers/evening-sky.png",
+    wallpaperBlur: true,
     wallpaperCustomUrl: "",
     wallpaperFit: false,
-    welcomeText: " Welcome! 👋🏻",
+    welcomeText: "Welcome! 👋🏻",
 }
 
 // How many forum posts to load

diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -1,12 +1,12 @@
-import { isPlatformBrowser } from "@angular/common"
-import { Component, ElementRef, Inject, OnInit, PLATFORM_ID, Renderer2 } from "@angular/core"
-import { RouterModule } from "@angular/router"
-import { initFlowbite } from "flowbite"
-import { AppService } from "./app.service"
-import { loadTheme } from "./functions"
-import { MenubarComponent } from "./menubar/menubar.component"
-import { RedirectGuard } from "./redirect/redirect.guard"
-import { StartpageSettings } from "./types"
+import { isPlatformBrowser } from '@angular/common';
+import { Component, ElementRef, Inject, OnInit, PLATFORM_ID, Renderer2 } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { initFlowbite } from 'flowbite';
+import { AppService } from './app.service';
+import { loadTheme } from './functions';
+import { MenubarComponent } from './menubar/menubar.component';
+import { RedirectGuard } from './redirect/redirect.guard';
+import { StartpageSettings } from './types';
 
 @Component({
     standalone: true,
@@ -32,12 +32,8 @@ export class AppComponent implements OnInit {
         if (this.settings.theme) {
             loadTheme(this.settings.theme, this.renderer, this.el)
         }
-        if (this.settings.wallpaper) {
-            this.appService.loadWallpaper(this.el, this.renderer, this.settings.wallpaper)
-        } else {
-            this.renderer.setStyle(this.el.nativeElement.ownerDocument.body, "backgroundColor", "#1e1e2e")
-        }
         this.appService.applyWallpaperStyle(this.el, this.renderer)
+        this.appService.loadWallpaper(this.el, this.renderer, this.appService.settings.wallpaper)
     }
 
     ngOnInit(): void {

diff --git a/src/app/app.service.ts b/src/app/app.service.ts
@@ -1,7 +1,7 @@
-import { ElementRef, Injectable, Renderer2 } from "@angular/core"
-import { BehaviorSubject } from "rxjs"
-import { defaultSettings } from "../../config"
-import { StartpageSettings } from "./types"
+import { ElementRef, Injectable, Renderer2 } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
+import { defaultSettings } from '../../config';
+import { StartpageSettings } from './types';
 
 @Injectable({
     providedIn: "root",
@@ -51,6 +51,7 @@ export class AppService {
         if (wallpaper === null) {
             renderer.removeStyle(el.nativeElement.ownerDocument.body, "backgroundImage")
         } else {
+            console.log(wallpaper)
             renderer.setStyle(el.nativeElement.ownerDocument.body, "background-image", `url(${wallpaper})`)
         }
     }
@@ -59,21 +60,39 @@ export class AppService {
      * Apply wallpaper style to the body element.
      * @param el ElementRef to the origin element.
      * @param renderer Renderer2 to the origin element.
+     * @param kind Kind of wallpaper style to apply.
      */
-    applyWallpaperStyle(el: ElementRef, renderer: Renderer2): void {
-        if (this.settings.wallpaperFit) {
-            renderer.addClass(el.nativeElement.ownerDocument.body, "bg-contain")
-        } else {
-            renderer.removeClass(el.nativeElement.ownerDocument.body, "bg-contain")
+    applyWallpaperStyle(el: ElementRef, renderer: Renderer2, kind?: string): void {
+        switch (kind) {
+            case "contain":
+                this.applyBgContain(el, renderer)
+                break
+            case "blur":
+                this.applyBgBlur(el, renderer)
+                break
+            default:
+                this.applyBgContain(el, renderer)
+                this.applyBgBlur(el, renderer)
+                break
         }
+    }
 
+    private applyBgBlur(el: ElementRef, renderer: Renderer2): void {
         if (this.settings.wallpaperBlur) {
             renderer.addClass(el.nativeElement.ownerDocument.body, "background-blurred")
         } else {
             renderer.removeClass(el.nativeElement.ownerDocument.body, "background-blurred")
         }
     }
 
+    private applyBgContain(el: ElementRef, renderer: Renderer2): void {
+        if (this.settings.wallpaperFit) {
+            renderer.addClass(el.nativeElement.ownerDocument.body, "bg-contain")
+        } else {
+            renderer.removeClass(el.nativeElement.ownerDocument.body, "bg-contain")
+        }
+    }
+
     /**
      * Save data to the AppService instance.
      * @param key Key to save the data under.

diff --git a/src/app/menubar/menubar.component.html b/src/app/menubar/menubar.component.html
@@ -3,7 +3,7 @@
   <div class="flex flex-wrap items-center justify-between md:justify-end mx-auto p-4">
     <a class="flex md:mr-auto  items-center space-x-3 rtl:space-x-reverse" routerLink="/">
       <img src="/favicon.png" class="h-8" alt="Garuda Logo">
-      <span class="self-center text-xl font-semibold whitespace-nowrap text-maroon"> {{ settings.welcomeText }}</span>
+      <span class="self-center text-xl font-semibold whitespace-nowrap text-maroon"> {{ welcomeText }}</span>
       <div class="w-full"></div>
     </a>
     <div class="flex md:order-2 space-x-3 md:space-x-0 rtl:space-x-reverse">

diff --git a/src/app/menubar/menubar.component.ts b/src/app/menubar/menubar.component.ts
@@ -1,10 +1,10 @@
-import { NgClass, NgStyle } from "@angular/common"
-import { ChangeDetectionStrategy, Component, ViewChild } from "@angular/core"
-import { RouterLink } from "@angular/router"
-import { menubarItems } from "../../../config"
-import { AppService } from "../app.service"
-import { ThemeToggleComponent } from "../theme-toggle/theme-toggle.component"
-import { MenuBarItems, StartpageSettings } from "../types"
+import { NgClass, NgStyle } from '@angular/common';
+import { Component, ViewChild } from '@angular/core';
+import { RouterLink } from '@angular/router';
+import { menubarItems } from '../../../config';
+import { AppService } from '../app.service';
+import { ThemeToggleComponent } from '../theme-toggle/theme-toggle.component';
+import { MenuBarItems } from '../types';
 
 @Component({
     selector: "app-menubar",
@@ -15,13 +15,12 @@ import { MenuBarItems, StartpageSettings } from "../types"
 })
 export class MenubarComponent {
     items: MenuBarItems = menubarItems
-    settings: StartpageSettings = {} as StartpageSettings
-
-    @ViewChild(ThemeToggleComponent) themeToggle!: ThemeToggleComponent
+    welcomeText: string
 
     constructor(private appService: AppService) {
         this.appService.getSettings.subscribe((settings) => {
-            this.settings = settings
+            this.welcomeText = settings.welcomeText
         })
+        this.welcomeText = this.appService.settings.welcomeText
     }
 }
diff --git a/src/app/settings/settings.component.html b/src/app/settings/settings.component.html
@@ -49,6 +49,7 @@ <h1 class="bold text-maroon text-lg text-center">Configure startpage settings</h
             <label for="input-welcome" class="block mb-2 text-md text-text">Custom welcome message</label>
             <input type="text" id="input-welcome"
                    [formControl]="welcomeText"
+                   (keydown.enter)="saveSettings()"
                    class="block w-full md:w-3/4 p-2 text-base text-maroon bg-surface0/60 backdrop-blur focus:ring-maroon focus:border-maroon rounded-lg">
           </div>
           <button type="submit"
@@ -79,20 +80,25 @@ <h1 class="bold text-maroon text-lg text-center">Configure startpage settings</h
             </div>
           }
           <div class="mt-10">
+            @if (false) {
+              <label class="inline-flex center items-center cursor-pointer">
+                <input type="checkbox" [formControl]="wallpaperFit" class="sr-only peer"
+                       (change)="loadWallpaperStyle('contain')">
+                <div
+                  class="relative w-11 h-6 bg-surface0/60 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-maroon dark:peer-focus:ring-mauve rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-maroon/60"></div>
+                <span class="ms-3 mr-10 text-sm font-medium text-text">Fit wallpaper</span>
+              </label>
+            }
             <label class="inline-flex center items-center cursor-pointer">
-              <input type="checkbox" [formControl]="wallpaperFit" class="sr-only peer">
-              <div
-                class="relative w-11 h-6 bg-surface0/60 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-maroon dark:peer-focus:ring-mauve rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-maroon/60"></div>
-              <span class="ms-3 mr-10 text-sm font-medium text-text">Fit wallpaper</span>
-            </label>
-            <label class="inline-flex center items-center cursor-pointer">
-              <input type="checkbox" [formControl]="wallpaperBlur" class="sr-only peer">
+              <input type="checkbox" [formControl]="wallpaperBlur" class="sr-only peer"
+                     (change)="loadWallpaperStyle('blur')">
               <div
                 class="relative w-11 h-6 bg-surface0/60 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-maroon dark:peer-focus:ring-mauve rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-maroon/60"></div>
               <span class="ms-3 mr-10 text-sm font-medium text-text">Blur background</span>
             </label>
             <label class="inline-flex center items-center cursor-pointer">
-              <input type="checkbox" [formControl]="jokesEnabled" class="sr-only peer">
+              <input type="checkbox" [formControl]="jokesEnabled" class="sr-only peer"
+                     (change)="saveSettings()">>
               <div
                 class="relative w-11 h-6 bg-surface0/60 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-maroon dark:peer-focus:ring-mauve rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-maroon/60"></div>
               <span class="ms-3 mr-10 text-sm font-medium text-text">Enable jokes</span>

diff --git a/src/app/settings/settings.component.ts b/src/app/settings/settings.component.ts
@@ -1,28 +1,28 @@
-import { CommonModule } from "@angular/common"
+import { CommonModule } from '@angular/common';
 import {
     AfterViewInit,
     ChangeDetectionStrategy,
     ChangeDetectorRef,
     Component,
     ElementRef,
-    Renderer2,
-} from "@angular/core"
-import { FormControl, FormsModule, ReactiveFormsModule } from "@angular/forms"
-import { flavorEntries } from "@catppuccin/palette"
+    Renderer2
+} from '@angular/core';
+import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { flavorEntries } from '@catppuccin/palette';
 import {
-    SearchEngine,
     amountForumPostsSettings,
     defaultSettings,
+    SearchEngine,
     searchEngineMappings,
-    wallpapers,
-} from "../../../config"
-import { AppService } from "../app.service"
-import { loadTheme } from "../functions"
-import { LinkSectionComponent } from "../link-section/link-section.component"
-import { NewsComponent } from "../news/news.component"
-import { SearchComponent } from "../search/search.component"
-import { ToastComponent } from "../toast/toast.component"
-import { StartpageSettings, StartpageTheme } from "../types"
+    wallpapers
+} from '../../../config';
+import { AppService } from '../app.service';
+import { loadTheme } from '../functions';
+import { LinkSectionComponent } from '../link-section/link-section.component';
+import { NewsComponent } from '../news/news.component';
+import { SearchComponent } from '../search/search.component';
+import { ToastComponent } from '../toast/toast.component';
+import { StartpageSettings, StartpageTheme } from '../types';
 
 @Component({
     selector: "app-settings",
@@ -107,15 +107,9 @@ export class SettingsComponent implements AfterViewInit {
             loadTheme(settings.theme, this.renderer, this.el)
         }
 
-        if (settings.wallpaper === "custom") {
-            this.appService.loadWallpaper(this.el, this.renderer, settings["wallpaperCustomUrl"])
-            this.appService.applyWallpaperStyle(this.el, this.renderer)
-        } else if (settings.wallpaper !== "") {
-            this.appService.loadWallpaper(this.el, this.renderer, settings.wallpaper)
-            this.appService.applyWallpaperStyle(this.el, this.renderer)
-        } else if (settings.wallpaper === "") {
-            this.appService.loadWallpaper(this.el, this.renderer, null)
-        }
+        this.loadWallpaper(settings)
+        this.loadWallpaperStyle()
+
         this.settings = settings
 
         this.showToast = true
@@ -126,4 +120,18 @@ export class SettingsComponent implements AfterViewInit {
 
         this.cdr.detectChanges()
     }
+
+    loadWallpaper(settings: StartpageSettings): void {
+        if (settings.wallpaper === "custom") {
+            this.appService.loadWallpaper(this.el, this.renderer, settings["wallpaperCustomUrl"])
+        } else if (settings.wallpaper !== "") {
+            this.appService.loadWallpaper(this.el, this.renderer, settings.wallpaper)
+        } else if (settings.wallpaper === "") {
+            this.appService.loadWallpaper(this.el, this.renderer, null)
+        }
+    }
+
+    loadWallpaperStyle(kind?: string): void {
+        this.appService.applyWallpaperStyle(this.el, this.renderer, kind)
+    }
 }
diff --git a/src/styles.scss b/src/styles.scss
@@ -71,5 +71,4 @@ samp {
 .non-blurred {
   position: relative;
   z-index: 1;
-  overflow: scroll;
 }