added clear all local data

NicolasConstant · Dec 1, 2019 · d82d5d3 · d82d5d3
1 parent 4ef26b2
commit d82d5d3
Show file tree

Hide file tree

Showing 5 changed files with 99 additions and 8 deletions.
diff --git a/src/app/components/floating-column/settings/settings.component.html b/src/app/components/floating-column/settings/settings.component.html
@@ -9,24 +9,25 @@ <h3 class="panel__title">settings</h3>
         <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">
+                (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>
+            <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">
+                (change)="onDisableSoundsEnabledChanged()" type="checkbox" name="disableSounds" value="disableSounds"
+                id="disableSounds">
             <label class="noselect sub-section__label" for="disableSounds">disable sounds</label>
             <br>
 
-            <span class="sound__title">notification sound:</span><br/>
+            <span class="sound__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>
@@ -38,6 +39,22 @@ <h4 class="panel__subtitle">Notifications</h4>
         <h4 class="panel__subtitle">About</h4>
         <p class="version">Sengi version: {{version}}</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>
+        </div>
 
     </div>
 </div>
diff --git a/src/app/components/floating-column/settings/settings.component.scss b/src/app/components/floating-column/settings/settings.component.scss
@@ -2,6 +2,7 @@
 @import "commons";
 @import "panel";
 @import "mixins";
+@import "buttons";
 
 .panel {
     padding-left: 0px;

diff --git a/src/app/components/floating-column/settings/settings.component.ts b/src/app/components/floating-column/settings/settings.component.ts
@@ -80,4 +80,21 @@ export class SettingsComponent implements OnInit {
         this.toolsService.saveSettings(settings);
     }
 
+    isCleanningAll: boolean = false;
+    startClearAllLocalData(): boolean {
+        this.isCleanningAll = !this.isCleanningAll;
+        return false;
+    }
+
+    confirmClearAll(): boolean{
+        localStorage.clear();
+        location.reload();
+        return false;
+    }
+
+    cancelClearAll(): boolean {
+        this.isCleanningAll = false;
+        return false;
+    }
+
 }
diff --git a/src/app/components/left-side-bar/left-side-bar.component.html b/src/app/components/left-side-bar/left-side-bar.component.html
@@ -28,7 +28,7 @@
     </a>
 
     <a class="left-bar-button left-bar-button--cog left-bar-button--bottom left-bar-link" href title="settings" (click)="openSettings()"
-        (contextmenu)="openSettings()" *ngIf="hasAccounts">
+        (contextmenu)="openSettings()">
         <fa-icon [icon]="faCog"></fa-icon>
     </a>
 </div>
diff --git a/src/sass/_buttons.scss b/src/sass/_buttons.scss
@@ -5,14 +5,17 @@
     border-color: $btn-primary-color;
     color: $btn-primary-font-color;
     font-size: 14px;
+
     &:hover,
     &:focus,
     &:active,
     &:active {
         background-color: $btn-primary-color-hover;
         border-color: $btn-primary-color-hover;
         box-shadow: none;
-    } // &:focus {
+    }
+
+    // &:focus {
     //     background-color: $btn-primary-color-hover;
     //     border-color: $btn-primary-color-hover;
     //     outline: none;
@@ -39,8 +42,61 @@
     background-color: $button-background-color;
     color: $button-color;
     transition: all .2s;
+
     &:hover {
         background-color: $button-background-color-hover;
         color: $button-color-hover;
     }
+}
+
+.sengi-btn {
+    transition: all .2s;
+    text-decoration: none;
+    display: block; // width: calc(100% - 20px);
+    width: calc(100% - 15px); // height: 30px;
+    padding: 5px 10px; // border: solid 1px black;
+    margin-left: 5px;
+
+    &--icon {
+        float: right;
+    }
+
+    &--disabled {
+        cursor: default;
+        background-color: darken($color-primary, 4);
+
+        &:hover {
+            background-color: darken($color-primary, 4);
+        }
+    }
+
+    &--margin-bottom {
+        &:not(:last-child) {
+            margin-bottom: 5px;
+        }
+    }
+
+    &__blue {
+        background-color: $color-primary;
+        color: #fff;
+
+        &:hover {
+            background-color: lighten($color-primary, 15);
+        }
+    }
+
+    &__red {
+        $red-button-color: rgb(65, 3, 3);
+        background-color: $red-button-color !important;
+        color: #fff;
+
+        &:hover {
+            background-color: lighten($red-button-color, 15) !important;
+        }
+    }
+
+    &__medium {
+        float: left;
+        width: calc((100% - 15px)/2 - 5px);
+    }
 }