added settings forms and positionning

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> -->
 
+    <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 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)">
+                <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" type="submit" (click)="playNotificationSound()">play</a>
+            <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>

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;
+    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;
+    }
+}
+

src/app/components/floating-column/settings/settings.component.ts

@@ -13,11 +13,16 @@ import { UserNotificationService, NotificationSoundDefinition } from '../../../s
 })
 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(){
+
+    }
+
 }

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 {