better language handling in settings + ui fix

2023-08-04 20:12:23 -04:00 · 2023-08-04 20:12:23 -04:00 · 449506092a
parent b37a2a2f0c
commit 449506092a
4 changed files with 90 additions and 31 deletions
--- a/src/app/components/floating-column/settings/settings.component.html
+++ b/src/app/components/floating-column/settings/settings.component.html
@ -35,7 +35,7 @@
            </form>
            <a href class="form-button sound__play" type="submit" (click)="playNotificationSound()">play</a>
        </div>
-        
+
        <h4 class="panel__subtitle">Shortcuts</h4>
        <div class="sub-section">
            <span class="sub-section__title">switch column:</span><br />
@ -50,35 +50,40 @@
            <label class="noselect sub-section__label" for="colmun-win">Win + Alt + Left | Win + Alt + Right</label>
            <br>
        </div>
-        
-        <h4 class="panel__subtitle">Languages</h4>
-        <div *ngFor="let l of configuredLangs">
-            {{ l.name }} ({{l.iso639}})
-            <button (click)="onRemoveLang(l)">remove</button>
-        </div>
-        <div class="sub-section">
-            <input type="text" (input)="onSearchLang($event.target.value)" [(ngModel)]="searchLang" placeholder="Find Language" autocomplete="off"/>
-        </div>
-        <div *ngFor="let l of searchedLangs">
-            {{ l.name }} ({{l.iso639}})
-            <button (click)="onAddLang(l)">add</button>
-        </div>

+        <h4 class="panel__subtitle">Languages</h4>
+        <div class="sub-section">
+            <div class="sub-section__content">
+                <div *ngFor="let l of configuredLangs" class="language__entry">
+                    <span class="language__entry__name">{{ l.name }} ({{l.iso639}})</span>
+                    <a href (click)="onRemoveLang(l)" class="form-button language__entry__action sound__play">remove</a>
+                </div>
+                <input type="text" (input)="onSearchLang($event.target.value)" [(ngModel)]="searchLang"
+                    placeholder="Find Language" autocomplete="off" class="form-control form-control-sm language__search"/>
+                <div *ngFor="let l of searchedLangs" class="language__entry">
+                    <span class="language__entry__name">{{ l.name }} ({{l.iso639}})</span>
+                    <a href (click)="onAddLang(l)" class="form-button language__entry__action sound__play">add</a>
+                </div>
+            </div>
+        </div>
        <h4 class="panel__subtitle">Twitter Bridge</h4>
        <div class="sub-section">
            <input class="sub-section__checkbox" [(ngModel)]="twitterBridgeEnabled"
-            (change)="onTwitterBridgeEnabledChanged()" type="checkbox" name="onTwitterBridgeEnabled"
-            value="onTwitterBridgeEnabled" id="onTwitterBridgeEnabled">
+                (change)="onTwitterBridgeEnabledChanged()" type="checkbox" name="onTwitterBridgeEnabled"
+                value="onTwitterBridgeEnabled" id="onTwitterBridgeEnabled">
            <label class="noselect sub-section__label" for="onTwitterBridgeEnabled">enable bridge</label>
            <br>
            <div *ngIf="twitterBridgeEnabled">
                <p>Please provide your bridge instance:
-                <input type="text" class="form-control form-control-sm sub_section__text-input"
-                [(ngModel)]="setTwitterBridgeInstance" placeholder="bridge.tld" />
-                If you don't know any, consider using <a href="https://github.com/NicolasConstant/BirdsiteLive" target="_blank" class="version__link">BirdsiteLIVE</a></p>
+                    <input type="text" class="form-control form-control-sm sub_section__text-input"
+                        [(ngModel)]="setTwitterBridgeInstance" placeholder="bridge.tld" />
+                    If you don't know any, consider using <a href="https://github.com/NicolasConstant/BirdsiteLive"
+                        target="_blank" class="version__link">BirdsiteLIVE</a>
+                </p>
            </div>
            <div>
-                <a href="https://github.com/NicolasConstant/sengi/wiki/BirdsiteLIVE-integration" target="_blank" class="version__link">What is this?</a>
+                <a href="https://github.com/NicolasConstant/sengi/wiki/BirdsiteLIVE-integration" target="_blank"
+                    class="version__link">What is this?</a>
            </div>
        </div>

--- a/src/app/components/floating-column/settings/settings.component.scss
+++ b/src/app/components/floating-column/settings/settings.component.scss
@ -31,6 +31,13 @@
    padding: 0 5px 15px 5px;
    position: relative;

+    &__content {
+        display: block;
+        padding: 0 0 0 5px;
+
+        // outline: 1px dotted greenyellow;
+    }
+
    &__checkbox {
        position: relative;
        top: 3px;
@ -68,6 +75,37 @@
    }
 }

+.language {
+    &__entry {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: nowrap;
+        justify-content: space-between;
+
+        &:not(:last-child){
+            margin-bottom: 1px;
+        }
+
+        &__name {
+            display: block;
+            align-items: stretch;
+            padding-left: 5px;            
+        }
+        
+        &__action {
+            align-items: stretch;
+            min-width: 70px;
+            text-align: center;
+            padding: 0 10px;
+        }
+    }
+
+    &__search {
+        display: block;
+        margin: 5px 0 5px 0;
+    }
+}
+
 .form-control {
    border: 1px solid $settings-text-input-border;
    color: $settings-text-input-foreground;
--- a/src/app/components/floating-column/settings/settings.component.ts
+++ b/src/app/components/floating-column/settings/settings.component.ts
@ -1,6 +1,7 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnDestroy, OnInit } from '@angular/core';
 import { FormBuilder, FormGroup } from '@angular/forms';
 import { Howl } from 'howler';
+import { Subscription } from 'rxjs';

 import { environment } from '../../../../environments/environment';
 import { ToolsService, InstanceType } from '../../../services/tools.service';
@ -18,7 +19,7 @@ import { LanguageService } from '../../../services/language.service';
    styleUrls: ['./settings.component.scss']
 })

-export class SettingsComponent implements OnInit {
+export class SettingsComponent implements OnInit, OnDestroy {

    notificationSounds: NotificationSoundDefinition[];
    notificationSoundId: string;
@ -40,6 +41,10 @@ export class SettingsComponent implements OnInit {
    timeLineMode: TimeLineModeEnum = TimeLineModeEnum.OnTop;
    contentWarningPolicy: ContentWarningPolicyEnum = ContentWarningPolicyEnum.None;

+    configuredLangs: ILanguage[] = [];
+    searchedLangs: ILanguage[] = [];
+    searchLang: string;
+
    private addCwOnContent: string;
    set setAddCwOnContent(value: string) {
        this.setCwPolicy(null, value, null, null);
@ -77,6 +82,8 @@ export class SettingsComponent implements OnInit {
        return this.twitterBridgeInstance;
    }

+    private languageSub: Subscription;
+
    constructor(
        private readonly languageService: LanguageService,
        private readonly settingsService: SettingsService,
@ -85,9 +92,15 @@ export class SettingsComponent implements OnInit {
        private serviceWorkersService: ServiceWorkerService,
        private readonly toolsService: ToolsService,
        private readonly notificationService: NotificationService,
-        private readonly userNotificationsService: UserNotificationService) { }
+        private readonly userNotificationsService: UserNotificationService) { }   

    ngOnInit() {
+        this.languageSub = this.languageService.configuredLanguagesChanged.subscribe(l => {
+            if(l){
+                this.configuredLangs = l;
+            }
+        });
+
        this.version = environment.VERSION;

        const settings = this.settingsService.getSettings();
@ -135,20 +148,18 @@ export class SettingsComponent implements OnInit {
        this.configuredLangs = this.languageService.getConfiguredLanguages();
    }

-    configuredLangs: ILanguage[] = [];
-    searchedLangs: ILanguage[] = [];
-
-    searchLang: string;
+    ngOnDestroy(): void {
+        if(this.languageSub) this.languageSub.unsubscribe();
+    }   

    onSearchLang(input: string) {
-        console.warn(input);
        this.searchedLangs = this.languageService.searchLanguage(input);
    }

    onAddLang(lang: ILanguage): boolean {
        if(this.configuredLangs.findIndex(x => x.iso639 === lang.iso639) >= 0) return false;

-        this.configuredLangs.push(lang);
+        // this.configuredLangs.push(lang);
        this.languageService.addLanguage(lang);

        this.searchLang = '';
@ -158,7 +169,7 @@ export class SettingsComponent implements OnInit {
    }

    onRemoveLang(lang: ILanguage): boolean {
-        this.configuredLangs = this.configuredLangs.filter(x => x.iso639 !== lang.iso639);
+        // this.configuredLangs = this.configuredLangs.filter(x => x.iso639 !== lang.iso639);
        this.languageService.removeLanguage(lang);
        return false;
    }
--- a/src/app/services/models/mastodon.interfaces.ts
+++ b/src/app/services/models/mastodon.interfaces.ts
@ -132,7 +132,8 @@ export interface Instancev2 extends Instance {

 export interface Instancev2Configuration {
    urls: Instancev2Urls;
-    statuses: Instancev2Statuses
+    statuses: Instancev2Statuses;
+    translation: Instancev2Translation;
 }

 export interface InstanceUrls {
@ -147,6 +148,10 @@ export interface Instancev2Statuses {
    max_characters: number;
 }

+export interface Instancev2Translation {
+    enabled: boolean;
+}
+
 export interface Mention {
    url: string;
    username: string;