Sengi-Windows-MacOS-Linux/src/app/components/floating-column/settings/settings.component.html

<div class="panel">
    <h3 class="panel__title">settings</h3>

    <!-- <select name="notification-sound" class="form-control" [(ngModel)]="branch.PhysicalProvince">
        <option *ngFor="let p of branchService.provinces" [value]="p">{{p}}</option>
    </select> -->

    <div class="content flexcroll">
        <h4 class="panel__subtitle">Notifications</h4>
        <div class="sub-section">
            <input class="sub-section__checkbox" [(ngModel)]="disableAutofocusEnabled"
                (change)="onDisableAutofocusChanged()" type="checkbox" name="disableAutofocus" value="disableAutofocus"
                id="disableAutofocus">
            <label class="noselect sub-section__label" for="disableAutofocus">disable account's panel autofocus</label>
            <br>

            <input class="sub-section__checkbox" [(ngModel)]="disableAvatarNotificationsEnabled"
                (change)="onDisableAvatarNotificationsChanged()" type="checkbox" name="disableAvatarNotifications"
                value="disableAvatarNotifications" id="disableAvatarNotifications">
            <label class="noselect sub-section__label" for="disableAvatarNotifications">disable all avatar(s)
                notifications</label>
            <br>

            <input class="sub-section__checkbox" [(ngModel)]="disableSoundsEnabled"
                (change)="onDisableSoundsEnabledChanged()" type="checkbox" name="disableSounds" value="disableSounds"
                id="disableSounds">
            <label class="noselect sub-section__label" for="disableSounds">disable sounds</label>
            <br>

            <span class="sub-section__title">notification sound:</span><br />
            <form [formGroup]="notificationForm">
                <select formControlName="countryControl" (change)="onChange($event.target.value)" class="sound__select">
                    <option [value]="s.id" *ngFor="let s of notificationSounds"> {{s.name}}</option>
                </select>
            </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 />

            <input class="sub-section__checkbox" [checked]="columnShortcutEnabled === 1" (change)="onShortcutChange(1)"
                type="radio" name="column-ctrl" value="column-ctrl" id="column-ctrl">
            <label class="noselect sub-section__label" for="column-ctrl">Ctrl + Left | Ctrl + Right</label>
            <br>

            <input class="sub-section__checkbox" [checked]="columnShortcutEnabled === 2" (change)="onShortcutChange(2)"
                type="radio" name="colmun-win" value="colmun-win" id="colmun-win">
            <label class="noselect sub-section__label" for="colmun-win">Win + Alt + Left | Win + Alt + Right</label>
            <br>
        </div>

        <h4 class="panel__subtitle">Content-Warning Policies</h4>
        <div class="sub-section">
            <span class="sub-section__title">global behavior:</span><br />
            <input class="sub-section__checkbox" [checked]="contentWarningPolicy === 1" (change)="onCwPolicyChange(1)"
                type="radio" name="cw-none" value="cw-none" id="cw-none">
            <label class="noselect sub-section__label" for="cw-none">None</label>
            <br>

            <input class="sub-section__checkbox" [checked]="contentWarningPolicy === 2" (change)="onCwPolicyChange(2)"
                type="radio" name="cw-hide-all" value="cw-hide-all" id="cw-hide-all">
            <label class="noselect sub-section__label" for="cw-hide-all">Hide all CWs</label>
            <br>
            <div class="sub-section__cw-settings" *ngIf="contentWarningPolicy === 2">
                <span class="sub-section__title">but add CW on content containing:</span><br />
                <div class="sub-text-input">
                    <input type="text" class="form-control form-control-sm sub_section__text-input"
                        [(ngModel)]="setAddCwOnContent" placeholder="example;other example" />
                </div>
            </div>

            <input class="sub-section__checkbox" [checked]="contentWarningPolicy === 3" (change)="onCwPolicyChange(3)"
                type="radio" name="cw-add-on-all" value="cw-add-on-all" id="cw-add-on-all">
            <label class="noselect sub-section__label" for="cw-add-on-all">Add CW on all content</label>
            <br>
            <div class="sub-section__cw-settings" *ngIf="contentWarningPolicy === 3">
                <span class="sub-section__title">unless content is containing:</span><br />
                <div class="sub-text-input">
                    <input type="text" class="form-control form-control-sm sub_section__text-input"
                        [(ngModel)]="setRemoveCwOnContent" placeholder="example;other example" />
                </div>
            </div>

            <span class="sub-section__title">hide completely content containing:</span><br />
            <div class="sub-text-input">
                <input type="text" class="form-control form-control-sm sub_section__text-input"
                    [(ngModel)]="setContentHidedCompletely" placeholder="example;other example" />
            </div>
        </div>

        <h4 class="panel__subtitle">Timelines</h4>
        <div class="sub-section">
            <span class="sub-section__title">header display:</span><br />
            <input class="sub-section__checkbox" [checked]="timeLineHeader === 1" (change)="onTimeLineHeaderChange(1)"
                type="radio" name="timelineheader-1" value="timelineheader-1" id="timelineheader-1">
            <label class="noselect sub-section__label" for="timelineheader-1">Title - Domain Name</label>
            <br>

            <input class="sub-section__checkbox" [checked]="timeLineHeader === 2" (change)="onTimeLineHeaderChange(2)"
                type="radio" name="timelineheader-2" value="timelineheader-2" id="timelineheader-2">
            <label class="noselect sub-section__label" for="timelineheader-2">Title - Username - Domain Name</label>
            <br>

            <input class="sub-section__checkbox" [checked]="timeLineHeader === 3" (change)="onTimeLineHeaderChange(3)"
                type="radio" name="timelineheader-3" value="timelineheader-3" id="timelineheader-3">
            <label class="noselect sub-section__label" for="timelineheader-3">Title - Account Icon - Domain Name</label>
            <br>

            <input class="sub-section__checkbox" [checked]="timeLineHeader === 4" (change)="onTimeLineHeaderChange(4)"
                type="radio" name="timelineheader-4" value="timelineheader-4" id="timelineheader-4">
            <label class="noselect sub-section__label" for="timelineheader-4">Title - Account Icon</label>
            <br>

            <input class="sub-section__checkbox" [checked]="timeLineHeader === 5" (change)="onTimeLineHeaderChange(5)"
                type="radio" name="timelineheader-5" value="timelineheader-5" id="timelineheader-5">
            <label class="noselect sub-section__label" for="timelineheader-5">Title</label>
            <br>

            <span class="sub-section__title">loading behavior:</span><br />

            <input class="sub-section__checkbox" [checked]="timeLineMode === 1" (change)="onTimeLineModeChange(1)"
                type="radio" name="timelinemode-1" value="timelinemode-1" id="timelinemode-1">
            <label class="noselect sub-section__label" for="timelinemode-1">Load new statuses only on top</label>
            <br>

            <input class="sub-section__checkbox" [checked]="timeLineMode === 2" (change)="onTimeLineModeChange(2)"
                type="radio" name="timelinemode-2" value="timelinemode-2" id="timelinemode-2">
            <label class="noselect sub-section__label" for="timelinemode-2">Continuously loading new statuses</label>
            <br>

            <input class="sub-section__checkbox" [checked]="timeLineMode === 3" (change)="onTimeLineModeChange(3)"
                type="radio" name="timelinemode-3" value="timelinemode-3" id="timelinemode-3">
            <label class="noselect sub-section__label" for="timelinemode-3">Slow mode (manual loading)</label>
            <br>
        </div>

        <h4 class="panel__subtitle">Other</h4>
        <div class="sub-section">
            <input class="sub-section__checkbox" [(ngModel)]="disableRemoteStatusFetchingEnabled"
                (change)="onDisableRemoteStatusFetchingChanged()" type="checkbox" name="disableRemoteFetching"
                value="disableRemoteFetching" id="disableRemoteFetching">
            <label class="noselect sub-section__label" for="disableRemoteFetching">disable remote status
                fetching</label>
            <br>
        </div>

        <h4 class="panel__subtitle">About</h4>
        <p class="version">
            Sengi version: {{version}}<br />
            <a href class="version__link" (click)="openTutorial()">open tutorial</a><br/>
            <a href class="version__link" (click)="checkForUpdates()">check for updates</a>            
            <app-waiting-animation *ngIf="isCheckingUpdates" class="waiting-icon"></app-waiting-animation>
        </p>


        <h4 class="panel__subtitle">RESET</h4>
        <div class="sub-section">
            <p>
                If you run into bugs or want to clear all stored Sengi data, please procede:
            </p>
            <a *ngIf="!isCleanningAll" class="sengi-btn sengi-btn__red" href (click)="startClearAllLocalData()">
                Clear all local data
            </a>

            <a *ngIf="isCleanningAll" class="sengi-btn sengi-btn__red sengi-btn__medium" href
                (click)="confirmClearAll()">
                Confirm Clear All
            </a>
            <a *ngIf="isCleanningAll" class="sengi-btn sengi-btn__blue sengi-btn__medium" href
                (click)="cancelClearAll()">
                Cancel
            </a>
            <br />
        </div>

    </div>
</div>