From 0db82b4ce3de3a02907332a956efb35975d32ee4 Mon Sep 17 00:00:00 2001
From: Nicolas Constant <github@nicolas-constant.com>
Date: Thu, 14 Nov 2019 22:58:09 -0500
Subject: [PATCH] added settings forms and positionning

---
 .../settings/settings.component.html          | 41 +++++++++++---
 .../settings/settings.component.scss          | 53 ++++++++++++++++++-
 .../settings/settings.component.ts            | 22 +++++++-
 src/sass/_panel.scss                          |  6 +++
 4 files changed, 111 insertions(+), 11 deletions(-)

diff --git a/src/app/components/floating-column/settings/settings.component.html b/src/app/components/floating-column/settings/settings.component.html
index 210b62e5..d55b0854 100644
--- a/src/app/components/floating-column/settings/settings.component.html
+++ b/src/app/components/floating-column/settings/settings.component.html
@@ -5,12 +5,39 @@
         <option *ngFor="let p of branchService.provinces" [value]="p">{{p}}</option>
     </select> -->
 
-    <form [formGroup]="notificationForm">
-        <select formControlName="countryControl" (change)="onChange($event.target.value)">
-            <option [value]="s.id" *ngFor="let s of notificationSounds"> {{s.name}}</option>
-        </select>
-    </form>
-    <a href class="form-button" type="submit" (click)="playNotificationSound()">play</a>
+    <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>
 
-    <p class="version">Sengi version: {{version}}</p>
+            <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 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>
+
+            notification sound:<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">About</h4>
+        <p class="version">Sengi version: {{version}}</p>
+
+
+    </div>
 </div>
\ No newline at end of file
diff --git a/src/app/components/floating-column/settings/settings.component.scss b/src/app/components/floating-column/settings/settings.component.scss
index 9f21a68a..2ed8d822 100644
--- a/src/app/components/floating-column/settings/settings.component.scss
+++ b/src/app/components/floating-column/settings/settings.component.scss
@@ -1,7 +1,56 @@
 @import "variables";
+@import "commons";
 @import "panel";
 
+.panel {
+    padding-left: 0px;
+    padding-right: 0px;
+}
+
+.content {
+    overflow: auto;
+    height: calc(100% - #{$stream-header-height});
+}
+
 .version {
     display: block;
-    padding: 10px;
-}
\ No newline at end of file
+    padding: 0 5px;
+}
+
+.sub-section {
+    padding: 0 5px 15px 5px;
+    position: relative;
+
+    &__checkbox{
+        position: relative;
+        top:3px;
+        left: 5px;
+        margin-right: 7px;
+    }  
+
+    &__text {
+        display: block;
+        margin: 0 6px 9px 6px;
+        color: rgb(140, 152, 173);
+    }
+
+    &__input {
+        margin-left: 5px;
+    }
+}
+
+.sound {
+    &__select {
+        float: left;
+        width: calc(100% - 70px);
+        padding: 3px 0;
+    }
+
+    &__play {
+        display: inline-block;
+        width: calc(60px);
+        padding: 3px 0;
+        text-align: center;
+    }
+}
+
diff --git a/src/app/components/floating-column/settings/settings.component.ts b/src/app/components/floating-column/settings/settings.component.ts
index bf389962..d8df3508 100644
--- a/src/app/components/floating-column/settings/settings.component.ts
+++ b/src/app/components/floating-column/settings/settings.component.ts
@@ -12,12 +12,17 @@ import { UserNotificationService, NotificationSoundDefinition } from '../../../s
     styleUrls: ['./settings.component.scss']
 })
 export class SettingsComponent implements OnInit {
-
-    version: string;
+    
     notificationSounds: NotificationSoundDefinition[];
     notificationSoundId: string;
     notificationForm: FormGroup;
 
+    disableAutofocusEnabled: boolean;
+    disableAvatarNotificationsEnabled: boolean;
+    disableSoundsEnabled: boolean;
+    version: string;
+
+
     constructor(
         private formBuilder: FormBuilder,
         private readonly toolsService: ToolsService,
@@ -50,4 +55,17 @@ export class SettingsComponent implements OnInit {
 
         return false;
     }
+
+    onDisableAutofocusChanged(){
+
+    }
+
+    onDisableAvatarNotificationsChanged(){
+
+    }
+
+    onDisableSoundsEnabledChanged(){
+
+    }
+
 }
\ No newline at end of file
diff --git a/src/sass/_panel.scss b/src/sass/_panel.scss
index c5cb87e0..74983948 100644
--- a/src/sass/_panel.scss
+++ b/src/sass/_panel.scss
@@ -10,6 +10,12 @@
         text-transform: uppercase;
         margin: 4px 0 12px 5px;
     }
+
+    &__subtitle {
+        font-size: 11px;
+        text-transform: uppercase;
+        margin: 4px 0 6px 5px;
+    }
 } 
 
 .sliding-column {