Merge pull request #383 from jakejarrett/settings-page

Basic Settings Page
Soundnode · Sep 22, 2015 · 88a2f34 · 88a2f34
2 parents e27f93c + 03fab73
commit 88a2f34
Show file tree

Hide file tree

Showing 7 changed files with 159 additions and 11 deletions.
diff --git a/app/index.html b/app/index.html
@@ -72,6 +72,9 @@ <h4>Authenticating your Soundcloud account.</h4>
                     <li class="subNav_nav_item" ng-controller="AboutCtrl">
                         <a ng-click="openModal()">About</a>
                     </li>
+                    <li class="subNav_nav_item">
+                        <a ui-sref="settings">Settings</a>
+                    </li>
                 </ul>
 
             </li>
@@ -250,6 +253,7 @@ <h4 id="playerUser" class="player_user"></h4>
 <script src="public/js/profile/profileCtrl.js"></script>
 <script src="public/js/track/trackCtrl.js"></script>
 <script src="public/js/tag/tagCtrl.js"></script>
+<script src="public/js/settings/settingsCtrl.js"></script>
 
 <!-- directives -->
 <script src="public/js/playlists/collapsibleDirective.js"></script>

diff --git a/app/public/js/app.js b/app/public/js/app.js
@@ -1,4 +1,4 @@
-'use strict';
+'use strict';
 
 var app = angular.module('App', ['ui.router', 'ngSanitize', 'cfp.hotkeys', 'infinite-scroll', 'ngDialog']);
 
@@ -60,10 +60,15 @@ app.config(function ($stateProvider, $urlRouterProvider, hotkeysProvider) {
             url: '/profile/:id',
             templateUrl: 'views/profile/profile.html',
             controller: 'ProfileCtrl'
-    });
+        })
+        .state('settings', {
+            url: '/settings',
+            templateUrl: 'views/settings/settings.html',
+            controller: 'SettingsCtrl'
+        });
 });
 
-app.run(function($rootScope, $log, SCapiService, hotkeys) {
+app.run(function($rootScope, $log, $state, SCapiService, hotkeys) {
 
     //start GA
     window.visitor.pageview("/").send();
@@ -97,6 +102,14 @@ app.run(function($rootScope, $log, SCapiService, hotkeys) {
         }
     });
 
+    hotkeys.add({
+        combo: ['mod+,'],
+        description: 'Open Settings',
+        callback: function() {
+            $state.go('settings');
+        }
+    });
+
 });
 
 angular.module('infinite-scroll').value('THROTTLE_MILLISECONDS', 200);
diff --git a/app/public/js/common/playerService.js b/app/public/js/common/playerService.js
@@ -203,13 +203,15 @@ app.factory('playerService', function($rootScope, $log, $timeout, $window, $stat
 
         var songNotificationTitle = (trackObj.songTitle.length > 63 && process.platform == "win32") ? trackObj.songTitle.substr(0,60) + "..." : trackObj.songTitle;
 
-        songNotification = new Notification(songNotificationTitle, {
-            body: trackObj.songUser,
-            icon: trackObj.songThumbnail
-        });
-        songNotification.onclick = function () {
-            gui.Window.get().show();
-        };
+        if(window.localStorage.notificationToggle === "true") {
+            songNotification = new Notification(songNotificationTitle, {
+                body: trackObj.songUser,
+                icon: trackObj.songThumbnail
+            });
+            songNotification.onclick = function () {
+                gui.Window.get().show();
+            };
+        }
 
         $rootScope.isSongPlaying = true;
         $rootScope.$broadcast('activateQueue');

diff --git a/app/public/js/settings/settingsCtrl.js b/app/public/js/settings/settingsCtrl.js
@@ -0,0 +1,19 @@
+'use strict';
+
+app.controller('SettingsCtrl', function ($scope, $rootScope) {
+    $scope.notificationSettings = function() {
+        window.localStorage.notificationToggle = $scope.notification;
+    };
+
+    $scope.init = function() {
+        if(window.localStorage.notificationToggle === undefined) {
+            window.localStorage.notificationToggle = true;
+            $scope.notification = true;
+        }
+        else {
+            $scope.notification = JSON.parse(window.localStorage.notificationToggle);
+        }
+    };
+
+    $scope.init();
+});
diff --git a/app/public/stylesheets/sass/_components/_settings.scss b/app/public/stylesheets/sass/_components/_settings.scss
@@ -0,0 +1,83 @@
+.settingsView {
+    width: 90%;
+}
+
+.settings-hr {
+    display: block;
+    height: 1px;
+    border: 0;
+    border-top: 1px solid #3e3e40;
+    margin: 1em 0;
+    padding: 0;
+}
+
+.settings-container {
+    width: auto;
+}
+
+.leftSide {
+    width: 400px;
+}
+
+.rightSide {
+    padding-top: 10px;
+}
+
+.full-flex {
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 10px;
+}
+// Switch for Settings
+.onoffswitch {
+    position: relative;
+    width: 50px;
+    -webkit-user-select:none;
+}
+.onoffswitch-checkbox {
+    display: none;
+}
+.onoffswitch-label {
+    display: block;
+    overflow: hidden;
+    cursor: pointer;
+    height: 15px;
+    padding: 0;
+    line-height: 15px;
+    border: 1px solid transparent;
+    border-radius: 25px;
+    background-color: #222326;
+}
+.onoffswitch-label:before {
+    content: "";
+    display: block;
+    width: 24px;
+    margin: -5px;
+    background: #525252;
+    position: absolute; top: 0; bottom: 0;
+    right: 31px;
+    border: 1px solid transparent;
+    border-radius: 25px;
+}
+.onoffswitch-checkbox:checked + .onoffswitch-label {
+    background-color: #FF5500;
+    border: 1px solid transparent;
+    border-radius: 25px;
+}
+.onoffswitch-checkbox:checked + .onoffswitch-label, .onoffswitch-checkbox:checked + .onoffswitch-label:before {
+   border-color: #FF5500;
+   border: 1px solid transparent;
+   border-radius: 25px;
+}
+.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
+    margin-left: 0;
+}
+.onoffswitch-checkbox:checked + .onoffswitch-label:before {
+    right: 0px;
+    background-color: #FF5500;
+    box-shadow: 3px 6px 18px 0px rgba(0, 0, 0, 0.2);
+    border: 1px solid rgba(0, 0, 0, .3);
+}
diff --git a/app/public/stylesheets/sass/app.scss b/app/public/stylesheets/sass/app.scss
@@ -105,4 +105,9 @@
 /* ==========================================================================
 @Buttons
 ========================================================================== */
-@import "_components/_buttons";
+@import "_components/_buttons";
+
+/* ==========================================================================
+@Settings
+========================================================================== */
+@import "_components/_settings";
diff --git a/app/views/settings/settings.html b/app/views/settings/settings.html
@@ -0,0 +1,22 @@
+<div class="settingsView">
+
+    <h2 class="settings">Settings</h2>
+    <hr class="settings-hr" />
+
+    <!-- Notifications & Switch -->
+    <div class="full-flex">
+        <div class="settings-container leftSide">
+            <h2>Notifications</h2>
+            <label ng-if="notification == false">Song Notifications Disabled </label>
+            <label ng-if="notification == true">Song Notifications Enabled </label>
+        </div>
+        <div class="settings-container rightSide">
+            <div class="onoffswitch">
+                <input type="checkbox" class="onoffswitch-checkbox" name="notifications" id="notificationSettings" ng-model="notification" ng-change="notificationSettings()" ng-checked="notification">
+                <label class="onoffswitch-label" for="notificationSettings"></label>
+            </div>
+        </div>
+    </div>
+
+    <div ng-include="'views/common/loading.html'"></div>
+</div>