Beginning of Settings Page

client/css/client.css

@@ -1,14 +1,16 @@
 :root {
   --primary-color: #5E35B1;
   --secondary-color: #311B92;
-  --accent-color: #FFFF00;
-  --accent-color-secondary: #FFFF8D;
+  --accent-color: #69F0AE;
+  --accent-color-secondary: #00C853;
   --main-bg-color: #FAFAFA;
   --text-color: rgba(0,0,0,.87);
   --secondary-text-color: rgba(0,0,0,.7);
   --light-text-color: #FFFFFF;
   --light-text-color-disabled: rgba(1,1,1,.38);
   --hover-color: #EEEEEE;
+  --toggle-deactive-primary: #BDBDBD;
+  --toggle-deactive-secondary: #E0E0E0;
 }
 
 .material-icons.md-light { color: rgba(255, 255, 255, 1); }
@@ -68,6 +70,63 @@ html, body {
   transform: translateY(-50%);
 }
 
+/* Rounded sliders */
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 60px;
+  height: 34px;
+}
+
+.switch input {display:none;}
+
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: var(--toggle-deactive-secondary);
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+
+.slider:before {
+  position: absolute;
+  content: "";
+  height: 26px;
+  width: 26px;
+  left: 4px;
+  bottom: 4px;
+  background: var(--toggle-deactive-primary);
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+
+input:checked + .slider {
+  background-color: var(--accent-color-secondary);
+}
+
+input:focus + .slider {
+  box-shadow: 0 0 1px var(--secondary-color);
+}
+
+input:checked + .slider:before {
+  -webkit-transform: translateX(26px);
+  -ms-transform: translateX(26px);
+  transform: translateX(26px);
+  background-color: var(--accent-color);
+}
+
+.slider.round {
+  border-radius: 34px;
+}
+
+.slider.round:before {
+  border-radius: 50%;
+}
+
 /* Main Content */
 
 .main_container {
@@ -171,6 +230,13 @@ html, body {
   display: none;
 }
 
+.settings_main {
+  display: none;
+  height: 100%;
+  width: 100%;
+  background: var(--main-bg-color);
+}
+
 /* Right Side User List Panel */
 
 .nick_panel {
@@ -327,7 +393,5 @@ html, body {
 
 .permanent_items {
   background: var(--main-bg-color);
-  /*bottom: 0;
-  position: absolute;*/
   width: 100%;
 }

client/index.html

@@ -57,6 +57,24 @@
   </aside>
 
   <div class="settings_container">
+    <div class="settings_main">
+      <div class="header horizontal_row">
+        <button class="material-icons md-light header__menu-toggle">arrow_back</button>
+        <div class="header_title">
+        Settings
+        </div>
+      </div>
+      <div class="horizontal_row">
+        <label for="">Notifications</label>
+        <label class="switch">
+          <input type="checkbox" checked>
+          <div class="slider round"></div>
+        </label>
+      </div>
+      <div>
+        Logout
+      </div>
+    </div>
     <div class="host_connection">
       <div class="header">
         <div class="vertical_center_text">Host Connection:</div>

client/js/client-ui.js

@@ -56,9 +56,16 @@ constructor () {
     this.supportsPassive = undefined;
     this.addEventListeners();
 
+    document.querySelector('.settings_launcher').addEventListener('click', this.launchSettings.bind(this));
     document.querySelector('.join_server').addEventListener('click', this.joinServer.bind(this));
   }
 
+  launchSettings() {
+    this.hideSideNav();
+    document.querySelector('.settings_container').style.display = "block";
+    document.querySelector('.settings_main').style.display = "block";
+  }
+
   joinServer() {
     this.hideSideNav();
     server_connection_screen.show();
@@ -310,6 +317,8 @@ class BaseUI {
       } else {
         this.input_index = this.input_history.length;
       }
+      //TODO parse irc commands here
+      this.client.send(hostId, serverName, text);
       elem.value = '';
       // TODO(flackr): Only call this when we switch channels.
       this.commandHandler.setActiveChannel(hostId, serverName, room_list.current_channel);
@@ -435,6 +444,20 @@ class RoomList {
   }
 }
 
+class SettingsScreen {
+  constructor() {
+    this.elem = document.querySelector('.settings_main');
+    this.elem.querySelector('.header__menu-toggle').addEventListener('click',this.close.bind(this));
+  }
+
+  close() {
+    this.elem.display = "none";
+    transitionToMainUI();
+  }
+}
+
+new SettingsScreen();
+
 var server_connection_screen = new ServerConnection(document.querySelector('.server_connection'));
 var room_list = new RoomList(document.querySelector('.rooms'));