From 34e856774e87b87e1cfccfe9f44e060728f041d3 Mon Sep 17 00:00:00 2001
From: Don Gagne <don@thegagnes.com>
Date: Mon, 17 Nov 2014 15:06:36 -0800
Subject: [PATCH] Create master/slave relationship for styles

The dark css is the master and contains all style information. The
light css is the slave and only contains color information.
---
 files/styles/style-dark.css  |   6 +
 files/styles/style-light.css | 292 ++++++++---------------------------
 src/ui/MainWindow.cc         |  73 +++++----
 3 files changed, 117 insertions(+), 254 deletions(-)

diff --git a/files/styles/style-dark.css b/files/styles/style-dark.css
index f6073df6c..bd66f5572 100644
--- a/files/styles/style-dark.css
+++ b/files/styles/style-dark.css
@@ -1,3 +1,9 @@
+/*
+ This is the master style sheet as well as the dark style. This style sheet should contain both
+ color and size/positioning information for all styled controls. This sheet is always loaded first
+ Then the user specified style sheet is loaded after it to override and color settings.
+*/
+
 * {
     background-color: #222;
     color: #FFF;
diff --git a/files/styles/style-light.css b/files/styles/style-light.css
index 07d496fc2..6414e520c 100644
--- a/files/styles/style-light.css
+++ b/files/styles/style-light.css
@@ -1,8 +1,13 @@
+/*
+ This is a slave style sheet in relationship to the master style sheet. That means that it should only
+ contain color settings. It should not contain position or size information. That comes from the master
+ style sheet.
+*/
+
 * {
     background-color: #F6F6F6;
     color: #000;
     background-clip: border;
-    font-size: 11px;
 }
 
 *::disabled {
@@ -10,10 +15,7 @@
 }
 
 JoystickButton QLabel {
-    border: 1px solid #777;
-    border-radius: 4px;
-    height: 16px;
-    padding: 0 3px;
+    border-color: #777;
 }
 
 QCheckBox {
@@ -21,10 +23,7 @@ QCheckBox {
 }
 
 QCheckBox::indicator {
-    border: 1px solid #111;
-    border-radius: 2px;
-    width: 10px;
-    height: 10px;
+    border-color: #111;
 }
 
 QCheckBox::indicator:hover {
@@ -48,24 +47,20 @@ QCheckBox::indicator:disabled:checked {
 }
 
 QComboBox {
-    border: 1px solid #777;
-    border-radius: 2px;
+    border-color: #777;
 }
 
 QDialog {
-    border: 1px solid #777;
-    border-radius: 2px;
+    border-color: #777;
 }
 
 QDockWidget {
-    border: 1px solid #666;
-    border-radius: 1px;
+    border-color: #666;
 }
 
 QDockWidget::close-button, QDockWidget::float-button {
-    border: 1px solid transparent;
+    border-color: transparent;
     background: none;
-    padding: 0;
 }
 
 QDockWidget::close-button:hover, QDockWidget::float-button:hover {
@@ -73,16 +68,12 @@ QDockWidget::close-button:hover, QDockWidget::float-button:hover {
 }
 
 QDockWidget::close-button:pressed, QDockWidget::float-button:pressed {
-    padding: 1px -1px -1px 1px;
     background: #555;
 }
 
 QDockWidget::title {
-    text-align: left;
     background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #CCC, stop: 1 #888);
     color: #000;
-    padding-left: 3px;
-    height: 14px;
 }
 
 QGCMAVLinkLogPlayer {
@@ -101,16 +92,6 @@ QGCToolBar {
     border-top-color: #969696;
     border-bottom-color: #484848;
     background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #DDD, stop: 1 #999);
-    padding: 0;
-    margin: 0;
-}
-
-QGCToolBar QLabel {
-    font-size: 12pt;
-    font-weight: bold;
-    margin: 4px 2px;
-    padding: 0 2px;
-    border-radius: 4px;
 }
 
 QGCToolBar QLabel#toolBarBatteryBar {
@@ -120,53 +101,31 @@ QGCToolBar QLabel#toolBarBatteryBar {
 QGCToolBar QLabel#toolBarTimeoutLabel {
     color: #FFFFFF;
     background-color: #FF0037;
-    font-size: 15pt;
-}
-
-QGCToolBar QLabel#toolBarSafetyLabel {
-    /* color is for this label defined within the code */
-    font-size: 15pt;
 }
 
 QGCToolBar QLabel#toolBarModeLabel {
     color: #475E66;
-    font-size: 15pt;
 }
 
 QGCToolBar QLabel#toolBarStateLabel {
     color: #80632A;
-    font-size: 15pt;
 }
 
 QGCToolBar QLabel#toolBarBatteryVoltageLabel {
     color: #008000;
-    font-size: 15pt;
 }
 
 QGCToolBar QLabel#toolBarWpLabel {
     color: #475E66;
-    font-size: 15pt;
 }
 
 QGCToolBar QLabel#toolBarMessageLabel {
     color: #475E66;
 }
 
-QGCToolBar QProgressBar {
-    margin: 4px 2px;
-}
-
 QGCToolBar QToolButton {
-    margin: 0;
-    padding: 0;
-    border: none;
-    border-top: 1px solid #DDD;
-    border-bottom: 1px solid #DDD;
-    border-radius: 0;
-    height: 24px;
-    margin-bottom: 4px;
-    text-align: left;
-    font-weight: bold;
+    border-top: #DDD;
+    border-bottom: #DDD;
     background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #333, stop: 1 #444);
     color: #FFF;
 }
@@ -180,60 +139,24 @@ QGCToolBar QToolButton:hover {
     color: #000;
 }
 
-QGCToolBar QToolButton#advancedButton {
-    margin-left: 0;
-    margin-right: 13px;
-    padding: 0 12px 0 4px;
-    padding-right: 8px;
-    border-radius: 0;
-    border-bottom-right-radius: 6px;
-    border-top-right-radius: 6px;
-    border-left: none;
-}
-
-QGCToolBar QToolButton#firstAction {
-    margin-left: 8px;
-    border-bottom-left-radius: 6px;
-    border-top-left-radius: 6px;
-    border-right: none;
-}
-
 QGCToolBar .QWidget {
-    margin: 0;
     background-color: transparent;
 }
 
 QGCToolWidgetItem {
-    border: 1px solid #666;
-    border-radius: 3px;
-    padding: 10px 0 0 0;
-    margin-top: 1ex; /* leave space at the top for the title */
-}
-
-QGCUnconnectedInfoWidget QPushButton {
-    border-radius: 18px;
+    border-color: #666;
 }
 
 QGroupBox {
-    border: 1px solid #666;
-    border-radius: 3px;
-    padding: 10px 0 0 0;
-    margin-top: 1ex; /* leave space at the top for the title */
+    border-color: #666;
 }
 
 QGroupBox::title {
-    subcontrol-origin: margin;
-    subcontrol-position: top center;
-    margin: 0 3px 0 3px;
-    padding: 0 3px 0 0;
-    font: bold 8px;
     color: #000;
 }
 
 QHeaderView::section {
-    border: none;
-	border-right: 1px solid #969696;
-	padding: 2px 0 2px 4px;
+	border-right: #969696;
     background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #DDD, stop: 1 #999);
 }
 
@@ -246,19 +169,12 @@ QLabel:disabled {
     border-color: #999;
 }
 
-QLabel#noUas {
-    font-size: 30pt;
-}
-
 QLineEdit {
-    border: 1px solid #111;
-    border-radius: 2px;
+    border-color: #111;
 }
 
 QMainWindow::separator {
     background-color: #CCC;
-    width: 2px; /* when vertical */
-    height: 2px; /* when horizontal */
 }
 
 QMainWindow::separator:hover {
@@ -266,7 +182,7 @@ QMainWindow::separator:hover {
 }
 
 QMenu {
-    border: 1px solid #379AC3;
+    border-color:#379AC3;
 }
 
 QMenu::item:selected, QMenu::item:checked:selected {
@@ -280,9 +196,7 @@ QMenu::item:checked {
 }
 
 QMenu::separator {
-    height: 1px;
     background: #379AC3;
-    margin: 8px 5px 4px 5px;
 }
 
 /*
@@ -299,25 +213,17 @@ QMenuBar::item:selected {
 }
 
 QMenuBar::item:disabled {
-    border: none;
     background: none;
 }
 
 QPlainTextEdit {
-    border: 1px solid #111;
-    border-radius: 2px;
-    font-family: "Monospace";
-    font: large;
+    border-color: #111;
 }
 
 QProgressBar {
-    border: 1px solid #666;
-    border-radius: 4px;
-    text-align: center;
-    padding: 2px;
+    border-color: #666;
     color: #000;
     background: none;
-    height: 10px;
 }
 
 QProgressBar::chunk {
@@ -336,22 +242,8 @@ QProgressBar::chunk#thrustBar {
     background-color: orange;
 }
 
-QProgressBar:horizontal {
-    height: 9px;
-}
-
-QProgressBar:vertical {
-    width: 9px;
-}
-
 QPushButton, QToolButton {
-    min-height: 20px;
-    max-height: 20px;
-    border: 1px solid #465158;
-    margin: 1px;
-    border-radius: 4px;
-    padding-left: 8px;
-    padding-right: 8px;
+    border-color: #465158;
     background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #BBB, stop: 1 #777);
 }
 
@@ -359,10 +251,6 @@ QPushButton#connectButton, QPushButton#controlButton {
     background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #73D95D, stop: 1 #18A154);
 }
 
-QPushButton#controlButton {
-    min-height: 25px;
-}
-
 QPushButton#deleteButton, QPushButton#killButton {
     background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #D9002F, stop: 1 #AC0025);
 }
@@ -414,8 +302,33 @@ QPushButton:pressed#deleteButton, QPushButton#killButton {
     background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #C9002C, stop: 1 #9C0021);
 }
 
+QPushButton#advancedMenuButton, QPushButton#airframeMenuButton, QPushButton#firmwareMenuButton,
+QPushButton#tuningMenuButton, QPushButton#rcMenuButton, QPushButton#sensorMenuButton,
+QPushButton#flightModeMenuButton, QPushButton#safetyConfigButton {
+    border-color: #465158;
+    background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #BBB, stop: 1 #777);
+}
+
+QPushButton#planePushButton, QPushButton#flyingWingPushButton, QPushButton#quadXPushButton,
+QPushButton#quadPlusPushButton, QPushButton#hexaXPushButton, QPushButton#hexaPlusPushButton,
+QPushButton#octoXPushButton, QPushButton#octoPlusPushButton, QPushButton#hPushButton {
+    border-color: #465158;
+    background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #BBB, stop: 1 #777);
+}
+
+QPushButton:checked#planePushButton, QPushButton:checked#flyingWingPushButton, QPushButton:checked#quadXPushButton,
+QPushButton:checked#quadPlusPushButton, QPushButton:checked#hexaXPushButton, QPushButton:checked#hexaPlusPushButton,
+QPushButton:checked#octoXPushButton, QPushButton:checked#octoPlusPushButton, QPushButton:checked#hPushButton {
+    background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #444, stop: 1 #888);
+    color: #FFF;
+}
+
+QWidget#navBarWidget {
+    background-color: #F6F6F6;
+}
+
 QScrollBar {
-    border: 1px solid #333;
+    border-color: #333;
 }
 
 QSeparator {
@@ -427,48 +340,33 @@ QSlider {
 }
 
 QSlider::groove:horizontal {
-    border: 1px solid #999;
-    height: 4px; /* the groove expands to the size of the slider by default. by giving it a height, it has a fixed size */
+    border-color: #999;
     background-color: #4A4A4A;
-    margin: 2px 0;
 }
 
 QSlider::groove:horizontal:disabled {
-    border: 1px solid #999;
+    border-color: #999;
     background-color: #CCC;
-    height: 4px; /* the groove expands to the size of the slider by default. by giving it a height, it has a fixed size */
-    margin: 2px 0;
 }
 
 QSlider::groove:vertical {
-    border: 1px solid #999;
-    width: 4px; /* the groove expands to the size of the slider by default. by giving it a height, it has a fixed size */
+    border-color: #999;
     background-color: #4A4A4A;
-    margin: 2px 0;
 }
 
 QSlider::handle:horizontal {
     background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #232228, stop: 1 #020208);
-    border: 2px solid #379AC3;
-    width: 18px;
-    margin: -5px 0; /* handle is placed by default on the contents rect of the groove. Expand outside the groove */
-    border-radius: 3px;
+    border-color: #379AC3;
 }
 
 QSlider::handle:horizontal:disabled {
     background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #EEE, stop: 1 #CCC);
-    border: 2px solid #777;
-    width: 18px;
-    margin: -5px 0; /* handle is placed by default on the contents rect of the groove. Expand outside the groove */
-    border-radius: 3px;
+    border-color: #777;
 }
 
 QSlider::handle:vertical {
     background-color: qlineargradient(x1: 0, y1: 0, x2: 1, y2: 0, stop: 0 #232228, stop: 1 #020208);
-    border: 2px solid #379AC3;
-    height: 18px;
-    margin: 0 -5px; /* handle is placed by default on the contents rect of the groove. Expand outside the groove */
-    border-radius: 3px;
+    border-color: #379AC3;
 }
 
 QSizeGrip {
@@ -476,28 +374,7 @@ QSizeGrip {
 }
 
 QSpinBox, QDoubleSpinBox {
-    min-height: 14px;
-    max-height: 18px;
-    border: 1px solid #4A4A4A;
-    border-radius: 5px;
-}
-
-QSpinBox::down-arrow, QDoubleSpinBox::down-arrow {
-    image: url(:/files/images/actions/go-down.svg);
-    width: 16px;
-}
-
-QSpinBox::down-button, QDoubleSpinBox::down-button {
-    border: none;
-}
-
-QSpinBox::up-arrow, QDoubleSpinBox::up-arrow {
-    image: url(:/files/images/actions/go-up.svg);
-    width: 16px;
-}
-
-QSpinBox::up-button, QDoubleSpinBox::up-button {
-    border: none;
+    border-color: #4A4A4A;
 }
 
 QStatusBar {
@@ -505,47 +382,29 @@ QStatusBar {
 }
 
 QTabBar::tab {
-    border: 2px solid #777;
-    border-radius: 4px;
-    min-width: 8ex;
-    padding: 2px;
+    border-color: #777;
 }
 
 QTabBar::tab:hover {
-    border: 2px solid #379AC3;
+    border-color: #379AC3;
 }
 
 QTabBar::tab:selected {
-    border: 2px solid #379AC3;
+    border-color:d #379AC3;
     background: #CCC;
 }
 
-QTabWidget::tab-bar {
-    alignment: center;
-}
-
 QTabWidget::pane {
-    border: 1px solid #777;
-    border-radius: 2px;
-    position: absolute;
-    top: -0.5em;
+    border-color: #777;
 }
 
 QTextEdit {
-    border: 1px solid #222;
-    border-radius: 2px;
-}
-
-QToolButton {
-    padding-left: 3px;
-    padding-right: 3px;
+    border-color: #222;
 }
 
 QToolTip {
     background-color: #F6F6F6;
-    border:0 solid #379AC3;
-    margin: 3px;
-    border-radius: 3px;
+    border-color: #379AC3;
     color: #000;
 }
 
@@ -553,40 +412,17 @@ QTreeView::item {
 	color: #000;
 }
 
-UASQuickViewItem QLabel {
-    padding: 0;
-    margin: 0;
-    min-height: 1em;
-    font-weight: bold;
-}
-
-UASQuickViewItem QLabel#value {
-    font-size: 20pt;
-}
-
 UASView {
     background: #D0D0D0;
-    border: 1px solid #666;
-    border-radius: 12px;
+    border-color: #666;
 }
 
 UASView QLabel#heartBeatLabel, UASView QLabel#typeLabel {
-    border: 1px solid #333;
-    border-radius: 5px;
-    padding: 2px;
-}
-
-QGCUnconnectedInfoWidget QPushButton#connectButton {
-    min-height: 150px;
-    max-height: 275px;
-    margin: 15px;
-    padding: 20px;
+    border-color: #333;
 }
 
 WaypointEditableView, WaypointViewOnlyView {
-    border: 1px solid #333;
-    border-radius: 5px;
-    margin-bottom: 3px;
+    border-color: #333;
 }
 
 WaypointEditableView[RowColoring="odd"], WaypointViewOnlyView[RowColoring="odd"] {
diff --git a/src/ui/MainWindow.cc b/src/ui/MainWindow.cc
index 2dc43ac0a..5462c6801 100644
--- a/src/ui/MainWindow.cc
+++ b/src/ui/MainWindow.cc
@@ -1067,41 +1067,62 @@ void MainWindow::enableAutoReconnect(bool enabled)
 
 bool MainWindow::loadStyle(QGC_MAINWINDOW_STYLE style, QString cssFile)
 {
+    bool success = true;
+    QString styles;
+    static const char* masterCssFile = ":/files/styles/style-dark.css";
+    
+    // Signal to the user that the app will pause to apply a new stylesheet
+    qApp->setOverrideCursor(Qt::WaitCursor);
+    
     // Store the new style classification.
     currentStyle = style;
+    
+    // The dark style sheet is the master. Any other selected style sheet just overrides
+    // the colors of the master sheet.
+    QFile masterStyleSheet(masterCssFile);
+    if (masterStyleSheet.open(QIODevice::ReadOnly | QIODevice::Text)) {
+        styles = masterStyleSheet.readAll();
+    } else {
+        qDebug() << "Unable to load master style sheet";
+        success = false;
+        goto Error;
+    }
 
-    // Load the new stylesheet.
-    QFile styleSheet(cssFile);
+    if (cssFile != masterCssFile) {
+        // Load the slave user specified stylesheet.
+        QFile styleSheet(cssFile);
+        if (styleSheet.open(QIODevice::ReadOnly | QIODevice::Text))
+        {
+            
+            styles += styleSheet.readAll();
 
-    // Attempt to open the stylesheet.
-    if (styleSheet.open(QIODevice::ReadOnly | QIODevice::Text))
-    {
-        // Signal to the user that the app will pause to apply a new stylesheet
-        qApp->setOverrideCursor(Qt::WaitCursor);
+            qApp->setStyleSheet(styles);
 
-        qApp->setStyleSheet(styleSheet.readAll());
+            // And save the new stylesheet path.
+            if (currentStyle == QGC_MAINWINDOW_STYLE_LIGHT)
+            {
+                lightStyleFileName = cssFile;
+            }
+            else
+            {
+                darkStyleFileName = cssFile;
+            }
 
-        // And save the new stylesheet path.
-        if (currentStyle == QGC_MAINWINDOW_STYLE_LIGHT)
-        {
-            lightStyleFileName = cssFile;
-        }
-        else
-        {
-            darkStyleFileName = cssFile;
+            // And trigger any changes to other UI elements that are watching for
+            // theme changes.
+            emit styleChanged(style);
+        } else {
+            qDebug() << "Unable to load slave style sheet:" << cssFile;
+            success = false;
+            goto Error;
         }
-
-        // And trigger any changes to other UI elements that are watching for
-        // theme changes.
-        emit styleChanged(style);
-
-        // Finally restore the cursor before returning.
-        qApp->restoreOverrideCursor();
-        return true;
     }
 
-    // Otherwise alert return a failure code.
-    return false;
+Error:
+    // Finally restore the cursor before returning.
+    qApp->restoreOverrideCursor();
+    
+    return success;
 }
 
 /**
-- 
2.22.0