created UI for custom status length

src/app/components/floating-column/manage-account/my-account/my-account.component.html

@@ -9,21 +9,21 @@
 
     <h4 class="my-account__label my-account__margin-top">manage list:</h4>
     <div class="my-account__link--margin-bottom" *ngFor="let list of availableLists">
-        <a href class="my-account__list--button" title="delete list" 
-            (click)="openCloseDeleteConfirmation(list, true)" *ngIf="!list.confirmDeletion">
+        <a href class="my-account__list--button" title="delete list" (click)="openCloseDeleteConfirmation(list, true)"
+            *ngIf="!list.confirmDeletion">
             <fa-icon class="my-account__link--icon" [icon]="faTrash"></fa-icon>
         </a>
-        <a href class="my-account__list--button" title="edit list" 
-            (click)="editList(list)" *ngIf="!list.confirmDeletion">
+        <a href class="my-account__list--button" title="edit list" (click)="editList(list)"
+            *ngIf="!list.confirmDeletion">
             <fa-icon class="my-account__link--icon" [icon]="faPenAlt"></fa-icon>
         </a>
 
-        <a href class="my-account__list--button" title="cancel" 
-            (click)="openCloseDeleteConfirmation(list, false)" *ngIf="list.confirmDeletion">
+        <a href class="my-account__list--button" title="cancel" (click)="openCloseDeleteConfirmation(list, false)"
+            *ngIf="list.confirmDeletion">
             <fa-icon class="my-account__link--icon" [icon]="faTimes"></fa-icon>
         </a>
-        <a href class="my-account__list--button my-account__red" title="delete list" 
-            (click)="deleteList(list)" *ngIf="list.confirmDeletion">
+        <a href class="my-account__list--button my-account__red" title="delete list" (click)="deleteList(list)"
+            *ngIf="list.confirmDeletion">
             <fa-icon class="my-account__link--icon" [icon]="faCheck"></fa-icon>
         </a>
 
@@ -38,7 +38,16 @@
     <a href class="my-account__list--button" title="create list" (click)="createList()">
         <fa-icon class="my-account__link--icon" [icon]="faPlus"></fa-icon>
     </a>
-    <input class="my-account__list--new-list-title" placeholder="new list title" [(ngModel)]="listTitle" (keyup.enter)="createList()" [disabled]="creationLoading"/>
+    <input class="my-account__list--new-list-title" placeholder="new list title" [(ngModel)]="listTitle"
+        (keyup.enter)="createList()" [disabled]="creationLoading" />
+
+    <h4 class="my-account__label my-account__margin-top">advanced settings:</h4>
+    <div class="advanced-settings">
+        <input class="advanced-settings__checkbox" [value]="customStatusLength" (change)="onCustomLengthChange()"
+            type="checkbox" name="customCharLength" value="customCharLength" id="customCharLength"> <label class="noselect advanced-settings__label" for="customCharLength">status'
+            custom length</label><br>
+        <input *ngIf="customStatusLength" class="themed-form advanced-settings__input" type="number" />
+    </div>
 
     <h4 class="my-account__label my-account__margin-top">remove account from sengi:</h4>
     <a class="my-account__link my-account__red" href (click)="removeAccount()">

src/app/components/floating-column/manage-account/my-account/my-account.component.scss

@@ -102,4 +102,24 @@
     &__margin-top {
         margin-top: 25px;
     }
+}
+
+.advanced-settings {
+    position: relative;
+
+    &__checkbox{
+        position: relative;
+        top:3px;
+        left: 5px;
+        margin-right: 7px;
+    }
+
+    &__label {
+
+
+    }
+
+    &__input {
+        margin-left: 5px;
+    }
 }

src/app/components/floating-column/manage-account/my-account/my-account.component.ts

@@ -23,6 +23,8 @@ export class MyAccountComponent implements OnInit, OnDestroy {
     faCheckSquare = faCheckSquare;
     faCheck = faCheck;
     faTimes = faTimes;
+
+    customStatusLength: boolean;
     
     availableStreams: StreamWrapper[] = [];
     availableLists: StreamWrapper[] = [];
@@ -58,6 +60,11 @@ export class MyAccountComponent implements OnInit, OnDestroy {
         }
     }
 
+    onCustomLengthChange(): boolean {
+        this.customStatusLength = !this.customStatusLength;
+        return false;
+    }
+
     private loadStreams(account: AccountWrapper){
         const instance = account.info.instance;
         this.availableStreams.length = 0;

src/app/components/stream/status/poll/poll.component.scss

@@ -1,5 +1,5 @@
-// @import "variables";
-// @import "commons";
+@import "variables";
+@import "commons";
 // @import "panel";
 @import "buttons";
 
@@ -171,19 +171,4 @@
         display: inline-block;
         margin: 0 5px;
     }
-}
-
-.noselect {
-    -webkit-touch-callout: none;
-    /* iOS Safari */
-    -webkit-user-select: none;
-    /* Safari */
-    -khtml-user-select: none;
-    /* Konqueror HTML */
-    -moz-user-select: none;
-    /* Firefox */
-    -ms-user-select: none;
-    /* Internet Explorer/Edge */
-    user-select: none;
-    /* Non-prefixed version, currently supported by Chrome and Opera */
 }

src/sass/_commons.scss

@@ -1,3 +1,23 @@
+@import "variables";
+
+.themed-form{
+    background-color: $column-color;
+    border: 1px $button-border-color solid;
+    padding: 2px 0 2px 5px;
+    // border-width: 1px;
+    color: #fff;    
+    &:focus {
+        -webkit-box-shadow: none;
+        -moz-box-shadow: none;
+        box-shadow: none;
+        outline: 0px;
+    }
+    -webkit-box-shadow: none;
+    -moz-box-shadow: none;
+    box-shadow: none;
+}
+
+
 .waiting-icon {
     width: 40px;
     display: block;