Skip to content

Commit

Permalink
Merge pull request #816 from jtremolo/add_dark_mode
Browse files Browse the repository at this point in the history 
Add dark mode
  • Loading branch information
@cyoung
cyoung authored Aug 19, 2020
2 parents cf28a07 + b28b002 commit e949dae
Show file tree
Hide file tree
Showing 9 changed files with 238 additions and 9 deletions.
2 changes: 2 additions & 0 deletions main/gen_gdl90.go
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1103,6 +1103,7 @@ func getProductNameFromId(product_id int) string {
}

type settings struct {
DarkMode bool
UAT_Enabled bool
ES_Enabled bool
Ping_Enabled bool
Expand Down Expand Up @@ -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
Expand Down
2 changes: 2 additions & 0 deletions main/managementinterface.go
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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":
Expand Down
184 changes: 184 additions & 0 deletions web/css/dark-mode.css
View file
Original file line number Diff line number Diff line change
@@ -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;
}
3 changes: 3 additions & 0 deletions web/css/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -262,6 +262,9 @@
width: 100%;
}

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

/* ***************************************************************************
everything below this comment represents tweaks to the mobile-angular-uis CSS
Expand Down
1 change: 1 addition & 0 deletions web/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
16 changes: 16 additions & 0 deletions web/js/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 = '';
}
}
};
});
8 changes: 7 additions & 1 deletion web/plates/js/settings.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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;
Expand All @@ -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() {
Expand Down
15 changes: 15 additions & 0 deletions web/plates/settings.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 -->
Expand Down
16 changes: 8 additions & 8 deletions web/plates/status.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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}">
Expand All @@ -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}">
Expand Down

0 comments on commit e949dae

Please sign in to comment.