better language handling in settings + ui fix
This commit is contained in:
parent
b37a2a2f0c
commit
449506092a
|
@ -35,7 +35,7 @@
|
||||||
</form>
|
</form>
|
||||||
<a href class="form-button sound__play" type="submit" (click)="playNotificationSound()">play</a>
|
<a href class="form-button sound__play" type="submit" (click)="playNotificationSound()">play</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h4 class="panel__subtitle">Shortcuts</h4>
|
<h4 class="panel__subtitle">Shortcuts</h4>
|
||||||
<div class="sub-section">
|
<div class="sub-section">
|
||||||
<span class="sub-section__title">switch column:</span><br />
|
<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>
|
<label class="noselect sub-section__label" for="colmun-win">Win + Alt + Left | Win + Alt + Right</label>
|
||||||
<br>
|
<br>
|
||||||
</div>
|
</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>
|
<h4 class="panel__subtitle">Twitter Bridge</h4>
|
||||||
<div class="sub-section">
|
<div class="sub-section">
|
||||||
<input class="sub-section__checkbox" [(ngModel)]="twitterBridgeEnabled"
|
<input class="sub-section__checkbox" [(ngModel)]="twitterBridgeEnabled"
|
||||||
(change)="onTwitterBridgeEnabledChanged()" type="checkbox" name="onTwitterBridgeEnabled"
|
(change)="onTwitterBridgeEnabledChanged()" type="checkbox" name="onTwitterBridgeEnabled"
|
||||||
value="onTwitterBridgeEnabled" id="onTwitterBridgeEnabled">
|
value="onTwitterBridgeEnabled" id="onTwitterBridgeEnabled">
|
||||||
<label class="noselect sub-section__label" for="onTwitterBridgeEnabled">enable bridge</label>
|
<label class="noselect sub-section__label" for="onTwitterBridgeEnabled">enable bridge</label>
|
||||||
<br>
|
<br>
|
||||||
<div *ngIf="twitterBridgeEnabled">
|
<div *ngIf="twitterBridgeEnabled">
|
||||||
<p>Please provide your bridge instance:
|
<p>Please provide your bridge instance:
|
||||||
<input type="text" class="form-control form-control-sm sub_section__text-input"
|
<input type="text" class="form-control form-control-sm sub_section__text-input"
|
||||||
[(ngModel)]="setTwitterBridgeInstance" placeholder="bridge.tld" />
|
[(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>
|
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>
|
||||||
<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>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
@ -31,6 +31,13 @@
|
||||||
padding: 0 5px 15px 5px;
|
padding: 0 5px 15px 5px;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
|
&__content {
|
||||||
|
display: block;
|
||||||
|
padding: 0 0 0 5px;
|
||||||
|
|
||||||
|
// outline: 1px dotted greenyellow;
|
||||||
|
}
|
||||||
|
|
||||||
&__checkbox {
|
&__checkbox {
|
||||||
position: relative;
|
position: relative;
|
||||||
top: 3px;
|
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 {
|
.form-control {
|
||||||
border: 1px solid $settings-text-input-border;
|
border: 1px solid $settings-text-input-border;
|
||||||
color: $settings-text-input-foreground;
|
color: $settings-text-input-foreground;
|
||||||
|
|
|
@ -1,6 +1,7 @@
|
||||||
import { Component, OnInit } from '@angular/core';
|
import { Component, OnDestroy, OnInit } from '@angular/core';
|
||||||
import { FormBuilder, FormGroup } from '@angular/forms';
|
import { FormBuilder, FormGroup } from '@angular/forms';
|
||||||
import { Howl } from 'howler';
|
import { Howl } from 'howler';
|
||||||
|
import { Subscription } from 'rxjs';
|
||||||
|
|
||||||
import { environment } from '../../../../environments/environment';
|
import { environment } from '../../../../environments/environment';
|
||||||
import { ToolsService, InstanceType } from '../../../services/tools.service';
|
import { ToolsService, InstanceType } from '../../../services/tools.service';
|
||||||
|
@ -18,7 +19,7 @@ import { LanguageService } from '../../../services/language.service';
|
||||||
styleUrls: ['./settings.component.scss']
|
styleUrls: ['./settings.component.scss']
|
||||||
})
|
})
|
||||||
|
|
||||||
export class SettingsComponent implements OnInit {
|
export class SettingsComponent implements OnInit, OnDestroy {
|
||||||
|
|
||||||
notificationSounds: NotificationSoundDefinition[];
|
notificationSounds: NotificationSoundDefinition[];
|
||||||
notificationSoundId: string;
|
notificationSoundId: string;
|
||||||
|
@ -40,6 +41,10 @@ export class SettingsComponent implements OnInit {
|
||||||
timeLineMode: TimeLineModeEnum = TimeLineModeEnum.OnTop;
|
timeLineMode: TimeLineModeEnum = TimeLineModeEnum.OnTop;
|
||||||
contentWarningPolicy: ContentWarningPolicyEnum = ContentWarningPolicyEnum.None;
|
contentWarningPolicy: ContentWarningPolicyEnum = ContentWarningPolicyEnum.None;
|
||||||
|
|
||||||
|
configuredLangs: ILanguage[] = [];
|
||||||
|
searchedLangs: ILanguage[] = [];
|
||||||
|
searchLang: string;
|
||||||
|
|
||||||
private addCwOnContent: string;
|
private addCwOnContent: string;
|
||||||
set setAddCwOnContent(value: string) {
|
set setAddCwOnContent(value: string) {
|
||||||
this.setCwPolicy(null, value, null, null);
|
this.setCwPolicy(null, value, null, null);
|
||||||
|
@ -77,6 +82,8 @@ export class SettingsComponent implements OnInit {
|
||||||
return this.twitterBridgeInstance;
|
return this.twitterBridgeInstance;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
private languageSub: Subscription;
|
||||||
|
|
||||||
constructor(
|
constructor(
|
||||||
private readonly languageService: LanguageService,
|
private readonly languageService: LanguageService,
|
||||||
private readonly settingsService: SettingsService,
|
private readonly settingsService: SettingsService,
|
||||||
|
@ -85,9 +92,15 @@ export class SettingsComponent implements OnInit {
|
||||||
private serviceWorkersService: ServiceWorkerService,
|
private serviceWorkersService: ServiceWorkerService,
|
||||||
private readonly toolsService: ToolsService,
|
private readonly toolsService: ToolsService,
|
||||||
private readonly notificationService: NotificationService,
|
private readonly notificationService: NotificationService,
|
||||||
private readonly userNotificationsService: UserNotificationService) { }
|
private readonly userNotificationsService: UserNotificationService) { }
|
||||||
|
|
||||||
ngOnInit() {
|
ngOnInit() {
|
||||||
|
this.languageSub = this.languageService.configuredLanguagesChanged.subscribe(l => {
|
||||||
|
if(l){
|
||||||
|
this.configuredLangs = l;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
this.version = environment.VERSION;
|
this.version = environment.VERSION;
|
||||||
|
|
||||||
const settings = this.settingsService.getSettings();
|
const settings = this.settingsService.getSettings();
|
||||||
|
@ -135,20 +148,18 @@ export class SettingsComponent implements OnInit {
|
||||||
this.configuredLangs = this.languageService.getConfiguredLanguages();
|
this.configuredLangs = this.languageService.getConfiguredLanguages();
|
||||||
}
|
}
|
||||||
|
|
||||||
configuredLangs: ILanguage[] = [];
|
ngOnDestroy(): void {
|
||||||
searchedLangs: ILanguage[] = [];
|
if(this.languageSub) this.languageSub.unsubscribe();
|
||||||
|
}
|
||||||
searchLang: string;
|
|
||||||
|
|
||||||
onSearchLang(input: string) {
|
onSearchLang(input: string) {
|
||||||
console.warn(input);
|
|
||||||
this.searchedLangs = this.languageService.searchLanguage(input);
|
this.searchedLangs = this.languageService.searchLanguage(input);
|
||||||
}
|
}
|
||||||
|
|
||||||
onAddLang(lang: ILanguage): boolean {
|
onAddLang(lang: ILanguage): boolean {
|
||||||
if(this.configuredLangs.findIndex(x => x.iso639 === lang.iso639) >= 0) return false;
|
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.languageService.addLanguage(lang);
|
||||||
|
|
||||||
this.searchLang = '';
|
this.searchLang = '';
|
||||||
|
@ -158,7 +169,7 @@ export class SettingsComponent implements OnInit {
|
||||||
}
|
}
|
||||||
|
|
||||||
onRemoveLang(lang: ILanguage): boolean {
|
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);
|
this.languageService.removeLanguage(lang);
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
|
|
|
@ -132,7 +132,8 @@ export interface Instancev2 extends Instance {
|
||||||
|
|
||||||
export interface Instancev2Configuration {
|
export interface Instancev2Configuration {
|
||||||
urls: Instancev2Urls;
|
urls: Instancev2Urls;
|
||||||
statuses: Instancev2Statuses
|
statuses: Instancev2Statuses;
|
||||||
|
translation: Instancev2Translation;
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface InstanceUrls {
|
export interface InstanceUrls {
|
||||||
|
@ -147,6 +148,10 @@ export interface Instancev2Statuses {
|
||||||
max_characters: number;
|
max_characters: number;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export interface Instancev2Translation {
|
||||||
|
enabled: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
export interface Mention {
|
export interface Mention {
|
||||||
url: string;
|
url: string;
|
||||||
username: string;
|
username: string;
|
||||||
|
|
Loading…
Reference in New Issue