Merge pull request #816 from jtremolo/add_dark_mode

Add dark mode
2020-08-19 11:59:53 -04:00 · 2020-08-19 11:59:53 -04:00 · e949daed02
commit e949daed02
--- a/main/gen_gdl90.go
+++ b/main/gen_gdl90.go
@ -1103,6 +1103,7 @@ func getProductNameFromId(product_id int) string {
 }

 type settings struct {
+	DarkMode             bool
 	UAT_Enabled          bool
 	ES_Enabled           bool
 	Ping_Enabled         bool
@ -1186,6 +1187,7 @@ var globalSettings settings
 var globalStatus status

 func defaultSettings() {
+	globalSettings.DarkMode = false
 	globalSettings.UAT_Enabled = true
 	globalSettings.ES_Enabled = true
 	globalSettings.GPS_Enabled = true
--- a/main/managementinterface.go
+++ b/main/managementinterface.go
@ -271,6 +271,8 @@ func handleSettingsSetRequest(w http.ResponseWriter, r *http.Request) {
 				for key, val := range msg {
 					// log.Printf("handleSettingsSetRequest:json: testing for key:%s of type %s\n", key, reflect.TypeOf(val))
 					switch key {
+					case "DarkMode":
+						globalSettings.DarkMode = val.(bool)
 					case "UAT_Enabled":
 						globalSettings.UAT_Enabled = val.(bool)
 					case "ES_Enabled":
--- a/web/css/dark-mode.css
+++ b/web/css/dark-mode.css
@ -0,0 +1,184 @@
+pre {
+	color: #9b9b9b;
+}
+
+.app-body,
+.panel-default,
+.scrollable-content,
+.form-group {
+	color: #9b9b9b;
+        background-color: #121212;
+}
+
+.help-page {
+	background-color: #121212;
+}
+
+a,
+.btn,
+.navbar-app .btn {
+	color: #1e88e5;
+}
+
+a:hover,
+a:focus,
+.btn:hover,
+.btn:focus,
+.navbar-app .btn:hover,
+.navbar-app .btn:focus {
+	color: #42a5f5;
+}
+
+.btn-primary {
+	color: #121212;
+	background-color: #1e88e5;
+	border-color: #1e88e5;
+}
+
+.btn-primary:hover {
+	color: #121212;
+	background-color: #42a5f5;
+	border-color: #42a5f5;
+}
+
+.btn-default {
+	color: #e0e0e0;
+	background-color: #343434;
+}
+
+.btn-default:hover {
+	background-color: #383838;
+}
+
+a.list-group-item,
+.list-group-item {
+	color: #e0e0e0;
+	border-color: #373737;
+	background-color: #242424;
+}
+
+a.list-group-item:hover,
+.list-group-item:hover {
+	text-decoration: none;
+	color: #e0e0e0;
+	background-color: #373737;
+}
+
+.list-group-item.active,
+.list-group-item.active:focus,
+.list-group-item.active:hover {
+	color: #121212;
+	background-color: #1e88e5;
+	border-color: #1e88e5;
+}
+
+.navbar-app {
+	background-color: #2d2d2d;
+	border-color: #373737;
+}
+
+.panel {
+	border-color: #373737;
+}
+
+.panel-default>.panel-heading {
+	color: #e0e0e0;
+	background-color: #2d2d2d;
+	border-color: #373737;
+}
+
+.panel-default>.panel-footer {
+	color: #e0e0e0;
+	background-color: #2d2d2d;
+	border-color: #373737;
+}
+
+.row-header {
+	background-color: #212121;
+}
+
+.separator {
+	border-bottom-color: #2d2d2d;
+}
+
+.sidebar-header,
+.app-name {
+	color: #e0e0e0;
+	background-color: #2d2d2d;
+	border-color: #373737;
+}
+
+.switch {
+	background-color: #2d2d2d;
+	border-color: #9b9b9b;
+}
+
+.switch .switch-handle {
+	background-color: #9b9b9b;
+	border-color: #9b9b9b;
+}
+
+.switch.active {
+	background-color: #1e88e5;
+	border-color: #1e88e5;
+}
+
+.text-primary {
+	color: #1e88e5;
+}
+
+.label-success {
+	color: #121212;
+	background-color: #4caf50;
+}
+
+.label-warning {
+	color: #121212;
+	background-color: #ffeb3b;
+}
+
+.label-danger {
+	color: #121212;
+	background-color: #f44336;
+}
+
+/* Input changes */
+input[type=text],
+input[type=number] {
+	color: #e0e0e0;
+	background-color: #212121;
+	border: 2px solid #2d2d2d;
+	border-radius: 4px;
+}
+
+input.ng-invalid:not(.grayout) {
+	color: #121212;
+}
+
+select {
+	color: #e0e0e0;
+	background-color: #212121;
+	border: 2px solid #2d2d2d;
+	border-radius: 4px;
+}
+
+/* Modal changes */
+.modal-content {
+	background-color: #343434;
+}
+
+.modal-header {
+	border-color: #9b9b9b;
+}
+
+.modal-title {
+	color: #e0e0e0;
+}
+
+.modal-body {
+	color: #9b9b9b;
+}
+
+.modal-footer {
+	border-color: #9b9b9b;
+}
--- a/web/css/main.css
+++ b/web/css/main.css
@ -262,6 +262,9 @@
 	width: 100%;
 }

+.row-header {
+	background-color: #f7f7f7;
+}

 /* ***************************************************************************
 everything below this comment represents tweaks to the mobile-angular-uis CSS
--- a/web/index.html
+++ b/web/index.html
@ -50,6 +50,7 @@

 	<link rel="stylesheet" href="css/main.css" />
 	<link rel="stylesheet" href="css/ahrs.css" />
+	<link rel="stylesheet" id="themeStylesheet" href="" />

 	<script src="maui/js/angular.min.js"></script>
 	<script src="maui/js/angular-ui-router.min.js"></script>
--- a/web/js/main.js
+++ b/web/js/main.js
@ -99,7 +99,23 @@ app.controller('MainCtrl', function ($scope, $http) {
    .then(function(response) {
 			var settings = angular.fromJson(response.data);
            $scope.DeveloperMode = settings.DeveloperMode;
+
+            // Update theme
+            $scope.updateTheme(settings.DarkMode);
    }, function(response) {
        //Second function handles error
    });	
+
+    $scope.updateTheme = function(darkMode) {
+        if(darkMode != $scope.DarkMode) {
+            // console.log("Updating theme, use dark mode?", darkMode);
+            $scope.DarkMode = darkMode;
+
+            if($scope.DarkMode) {
+                document.getElementById('themeStylesheet').href = 'css/dark-mode.css';
+            } else {
+                document.getElementById('themeStylesheet').href = '';
+            }
+        }
+    };
 });
--- a/web/plates/js/settings.js
+++ b/web/plates/js/settings.js
@ -8,7 +8,7 @@ function SettingsCtrl($rootScope, $scope, $state, $location, $window, $http) {
 	$scope.$parent.helppage = 'plates/settings-help.html';

 	var toggles = ['UAT_Enabled', 'ES_Enabled', 'Ping_Enabled', 'GPS_Enabled', 'IMU_Sensor_Enabled',
-		'BMP_Sensor_Enabled', 'DisplayTrafficSource', 'DEBUG', 'ReplayLog', 'AHRSLog'];
+		'BMP_Sensor_Enabled', 'DisplayTrafficSource', 'DEBUG', 'ReplayLog', 'AHRSLog', 'DarkMode'];
 	var settings = {};
 	for (var i = 0; i < toggles.length; i++) {
 		settings[toggles[i]] = undefined;
@ -24,6 +24,9 @@ function SettingsCtrl($rootScope, $scope, $state, $location, $window, $http) {
 			$scope.Baud = settings.SerialOutputs['/dev/serialout0'].Baud;
 			$scope.visible_serialout = true;
 		}
+
+		$scope.DarkMode = settings.DarkMode;
+
 		$scope.UAT_Enabled = settings.UAT_Enabled;
 		$scope.ES_Enabled = settings.ES_Enabled;
 		$scope.Ping_Enabled = settings.Ping_Enabled;
@ -50,6 +53,9 @@ function SettingsCtrl($rootScope, $scope, $state, $location, $window, $http) {
        $scope.WiFiSmartEnabled = settings.WiFiSmartEnabled;

        $scope.Channels = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
+
+		// Update theme
+		$scope.$parent.updateTheme($scope.DarkMode);
 	}

 	function getSettings() {
--- a/web/plates/settings.html
+++ b/web/plates/settings.html
@ -56,6 +56,21 @@
                </div>
            </div>
        </div>
+<!-- App Theme -->
+        <div class="panel-group col-sm-12">
+            <div class="panel panel-default">
+                <div class="panel-heading">Theme</div>
+                <div class="panel-body">
+                    <!-- Dark Mode -->
+                    <div class="form-group">
+                        <label class="control-label col-xs-7">Dark Mode</label>
+                        <div class="col-xs-5">
+                            <ui-switch ng-model='DarkMode' settings-change></ui-switch>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
    </div>
 <!-- End Left Col -->
 <!-- Begin Right Col -->
--- a/web/plates/status.html
+++ b/web/plates/status.html
@ -56,10 +56,10 @@
 				</div>
 				<div class="row" ng-class="{'section_invisible': !visible_uat}">
 					<div class="col-sm-12">
-						<span align="center" style="background-color: #f7f7f7" class="col-xs-3">Towers</span>
-						<span align="center" style="background-color: #f7f7f7" class="col-xs-3">METARS</span>
-						<span align="center" style="background-color: #f7f7f7" class="col-xs-3">TAFS</span>
-						<span align="center" style="background-color: #f7f7f7" class="col-xs-3">NEXRAD</span>
+						<span align="center" class="col-xs-3 row-header">Towers</span>
+						<span align="center" class="col-xs-3 row-header">METARS</span>
+						<span align="center" class="col-xs-3 row-header">TAFS</span>
+						<span align="center" class="col-xs-3 row-header">NEXRAD</span>
 					</div>
 				</div>
 				<div class="row" ng-class="{'section_invisible': !visible_uat}">
@ -72,10 +72,10 @@
 				</div>
 				<div class="row" ng-class="{'section_invisible': !visible_uat}">
 					<div class="col-sm-12">
-						<span align="center" style="background-color: #f7f7f7" class="col-xs-3">PIREP</span>
-						<span align="center" style="background-color: #f7f7f7" class="col-xs-3">SIGMET</span>
-						<span align="center" style="background-color: #f7f7f7" class="col-xs-3">NOTAMS</span>
-						<span align="center" style="background-color: #f7f7f7" class="col-xs-3">Other</span>
+						<span align="center" class="col-xs-3 row-header">PIREP</span>
+						<span align="center" class="col-xs-3 row-header">SIGMET</span>
+						<span align="center" class="col-xs-3 row-header">NOTAMS</span>
+						<span align="center" class="col-xs-3 row-header">Other</span>
 					</div>
 				</div>
 				<div class="row" ng-class="{'section_invisible': !visible_uat}">