update and relocate the theme selector slider

*update the theme selector slider to angular material slide toggle
*move the  slider to left menu

Issue-ID: OAM-100
Signed-off-by: Jun (Nicolas) Hu <jh245g@att.com>
Change-Id: I089a94bb5f2c0a70d1b5a96e9058176f0396e3f5

diff --git a/dashboard/webapp-frontend/src/app/rd.component.html b/dashboard/webapp-frontend/src/app/rd.component.html
index 61e0b45..c624bf1 100644 (file)
--- a/dashboard/webapp-frontend/src/app/rd.component.html
+++ b/dashboard/webapp-frontend/src/app/rd.component.html
@@ -62,15 +62,21 @@
         <a mat-list-item (click)="openInstanceSelectorDialog(); drawer.toggle()">
           <mat-icon>link</mat-icon> <span class="nav-caption">{{selectedInstanceName}}</span>
         </a>
+        <a mat-list-item>
+          <mat-icon>palette</mat-icon>
+          <div class="nav-caption">
+            <mat-slide-toggle (click)="modeToggleSwitch()">
+              Dark Mode
+            </mat-slide-toggle>
+          </div>
+        </a>
       </mat-nav-list>
     </section>
   </mat-drawer>
 
   <mat-drawer-content>
     <div class="root__container">
-
       <header [ngClass]="{'main__header-dark': darkModeActive}" class="main__header">
-
         <div class="left__section3Col" *ngIf="!drawer.opened">
           <svg (click)="drawer.toggle()" class="hamburger__icon" id="Menu_Burger_Icon" data-name="Menu Burger Icon"
                viewBox="31.5 30 49.9 32">
@@ -92,21 +98,7 @@
               <tspan x="0" y="0">RIC Dashboard</tspan>
             </text>
           </svg>
-
         </div>
-
-        <div>    </div>
-
-        <div class="mode-toggle__container">
-          <span class="mode-toggle__text">Light</span>
-          <label class="toggle-button__container">
-            <input (click)="modeToggleSwitch()" type="checkbox" class="mode-toggle__input" />
-            <span [ngClass]="{'mode-toggle__bg-checked': darkModeActive}" class="mode-toggle__bg"></span>
-            <span [ngClass]="{'mode-toggle__circle-checked': darkModeActive}" class="mode-toggle__circle"></span>
-          </label>
-          <span class="mode-toggle__text">Dark</span>
-        </div>
-
       </header>
 
       <!-- Main Content -->

diff --git a/dashboard/webapp-frontend/src/app/rd.component.scss b/dashboard/webapp-frontend/src/app/rd.component.scss
index 35fbb1b..fd113e7 100644 (file)
--- a/dashboard/webapp-frontend/src/app/rd.component.scss
+++ b/dashboard/webapp-frontend/src/app/rd.component.scss
@@ -211,53 +211,6 @@ mat-drawer-content {
   color: white;
 }
 
-.toggle-button__container {
-  cursor: pointer;
-  position: relative;
-  margin: 0 0.5rem;
-}
-
-.mode-toggle__input {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-}
-
-.mode-toggle__bg {
-  height: 1rem;
-  width: 2rem;
-  border-radius: 0.5rem;
-  background-color: rgba(0, 0, 0, 0.5);
-  display: inline-block;
-  transition: background-color 300ms linear;
-}
-
-.mode-toggle__circle {
-  height: 1.30rem;
-  width: 1.30rem;
-  background-color: #2B244D;
-  position: absolute;
-  top: -0.2rem;
-  border-radius: 50%;
-  box-shadow: 0 0 0 rgba(0, 0, 255, 0.5);
-  transition: left 300ms linear;
-  left: 0.1rem;
-}
-
-.mode-toggle__circle-checked {
-  background-color: white;
-  left: 1.75rem;
-}
-
-.mode-toggle__bg-checked {
-  background-color: #FF0070;
-}
-
-.mode-toggle__text {
-  font-size: 0.75rem;
-  text-transform: uppercase;
-  letter-spacing: 0.1rem;
-}
-
 /*Content*/
 .left__section {
   display: grid;

diff --git a/docs/release-notes.rst b/docs/release-notes.rst
index 6468354..70e6305 100644 (file)
--- a/docs/release-notes.rst
+++ b/docs/release-notes.rst
@@ -5,8 +5,9 @@
 RIC Dashboard Release Notes
 ===========================
 
-Version 2.0.1, 17 Mar 2020
+Version 2.0.1, 8 Apr 2020
 --------------------------
+* update and relocate the theme selector button
 * Revise controllers to use ResponseEntity
 * Drop AC xApp control/config screen from front-end
 * Drop A1 Mediator controller and tests from back-end