From 89b67098defd2183c3bdf79b52258e36e748da19 Mon Sep 17 00:00:00 2001 From: Bryant Date: Tue, 21 May 2013 16:03:34 -0700 Subject: [PATCH] Segregated the coloring of the UI from the rest of the styling in the CSS, so now style-base.css is loaded before the colorizing CSS files. --- files/styles/style-base.css | 319 +++++++++++++++++++++++++++++++ files/styles/style-dark2.css | 322 -------------------------------- files/styles/style-light.css | 351 +---------------------------------- src/ui/MainWindow.cc | 15 +- src/ui/MainWindow.h | 3 +- 5 files changed, 333 insertions(+), 677 deletions(-) create mode 100644 files/styles/style-base.css diff --git a/files/styles/style-base.css b/files/styles/style-base.css new file mode 100644 index 000000000..ada957ba3 --- /dev/null +++ b/files/styles/style-base.css @@ -0,0 +1,319 @@ +/* Due to the lack of support for @include in Qt's CSS implementation (see QTBUG-2047), the following is the base styles for the application. They are later modified with colors.*/ + +* { + font-size: 11px; +} + +QCheckBox::indicator { + border-radius: 2px; + border-width: 1px; + border-style: solid; + width: 10px; + height: 10px; +} + +QComboBox { + border-radius: 2px; + border-width: 1px; + border-style: solid; +} + +QDialog { + border-width: 1px; + border-style: solid; + border-radius: 2px; +} + +QDockWidget { + border-radius: 1px; + border-width: 10px; + border-style: solid; +} + +QDockWidget::title { + text-align: left; + padding-left: 10px; + height: 14px; + border-bottom-width: 2px; + border-bottom-style: solid; +} + +QDockWidget::close-button, QDockWidget::float-button { + border-width: 1px; + border-style: solid; + background: none; + padding: 0; +} + +QDockWidget::close-button:hover, QDockWidget::float-button:hover { + background: none; +} + +QDockWidget::close-button:pressed, QDockWidget::float-button:pressed { + padding: 1px -1px -1px 1px; + background: none; +} + +QGCToolWidgetItem { + border-radius: 3px; + border-width: 1px; + border-style: solid; + padding: 10px 0 0 0; + margin-top: 1ex; /* leave space at the top for the title */ +} + +QGroupBox { + border-radius: 3px; + border-width: 1px; + border-style: solid; + padding: 10px 0 0 0; + margin-top: 1ex; /* leave space at the top for the title */ +} + +QGroupBox::title { + subcontrol-origin: margin; + subcontrol-position: top center; /* position at the top center */ + margin: 0 3px 0 3px; + padding: 0 3px 0 0; + font: bold 8px; +} + +QLabel { + background: rgba(0,0,0,0); +} + +QLabel#toolBarNameLabel { + font: bold 16px; +} + +QLabel#toolBarModeLabel { + font: 12px; +} + +QLabel#toolBarStateLabel { + font: 12px; +} + +QLabel#toolBarMessageLabel { + font: 12px; + font-style: italic; +} + +QLineEdit { + border-radius: 2px; + border-width: 1px; + border-style: solid; +} + +QMainWindow::separator { + width: 2px; /* when vertical */ + height: 2px; /* when horizontal */ +} + +QMenu { + border-width: 1px; + border-style: solid; +} + +QMenu::separator { + height: 1px; + margin: 8px 5px 4px 5px; + } + +QMenuBar::item:disabled { + border: none; + background: none; +} + +QMenuBar::item:disabled:selected { + border: none; + background: none; +} + +QMenuBar::item:disabled:pressed { + background: none; + border: none; +} + +QPlainTextEdit { + border-radius: 2px; + border-width: 1px; + border-style: solid; + font-family: "Monospace"; + font: large; +} + +QPushButton { + min-height: 20px; + max-height: 20px; + margin: 1px; + border-width: 1px; + border-style: solid; + border-radius: 2px; + padding-left: 8px; + padding-right: 8px; +} + +QPushButton#forceLandButton, QPushButton#killButton { + font-weight: bold; + min-height: 30px; + background-clip: border; + border-width: 1px; + border-radius: 5px; +} + +QPushButton#controlButton { + min-height: 25px; +} + +QProgressBar { + border-radius: 4px; + border-width: 1px; + border-style: solid; + text-align: center; + padding: 2px; + height: 10px; +} + +QProgressBar:horizontal { + height: 9px; +} + +QProgressBar:vertical { + width: 9px; +} + +QSlider::groove:horizontal { + border-width: 1px; + border-style: solid; + 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:disabled:horizontal { + border-width: 1px; + border-style: solid; + 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::handle:horizontal { + border-width: 2px; + border-style: solid; + width: 18px; + margin: -5px 0; /* handle is placed by default on the contents rect of the groove. Expand outside the groove */ + border-radius: 3px; +} + +QSlider::handle:disabled:horizontal { + border-width: 2px; + border-style: solid; + width: 18px; + margin: -5px 0; /* handle is placed by default on the contents rect of the groove. Expand outside the groove */ + border-radius: 3px; +} + +QSlider::groove:vertical { + border-width: 1px; + border-style: solid; + width: 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::handle:vertical { + border-width: 2px; + border-style: solid; + height: 18px; + margin: 0 -5px; /* handle is placed by default on the contents rect of the groove. Expand outside the groove */ + border-radius: 3px; +} + +QSpinBox, QDoubleSpinBox { + min-height: 14px; + max-height: 18px; + border-radius: 5px; + border-width: 1px; + border-style: solid; + padding-right: 16px; /* make room for the arrows */ +} + +QSpinBox::up-button, QDoubleSpinBox::up-button { + subcontrol-origin: border; + subcontrol-position: top right; /* position at the top right corner */ + width: 16px; + padding-right: 1px; + border: none; +} + +QSpinBox::down-button, QDoubleSpinBox::down-button { + subcontrol-origin: border; + subcontrol-position: bottom right; /* position at bottom right corner */ + width: 16px; + padding-right: 1px; + border: none; +} + +QSpinBox::up-arrow, QDoubleSpinBox::up-arrow { + width: 16px; +} + +QSpinBox::down-arrow, QDoubleSpinBox::down-arrow { + width: 16px; +} + +QStatusBar { + border-width: 1px 0; + border-style: solid; +} + +QTabWidget::pane { /* The tab widget frame */ + border-radius: 2px; + border-width: 1px; + border-style: solid; + position: absolute; + top: -0.5em; +} + +QTabWidget::tab-bar { + alignment: center; +} + +/* Style the tab using the tab sub-control. Note that + it reads QTabBar _not_ QTabWidget */ +QTabBar::tab { + border-radius: 4px; + min-width: 8ex; + padding: 2px; + border-width: 2px; + border-style: solid; +} + +QTextEdit { + border-radius: 2px; + border-width: 1px; + border-style: solid; +} + +QToolBar { + margin: 0; + border-width: 1px 0; + border-style: solid; +} + +QToolButton { + font-weight: bold; + min-height: 20px; + max-height: 20px; + margin: 1px; + border-radius: 2px; + border-width: 1px; + border-style: solid; + padding-left: 3px; + padding-right: 3px; +} + +QToolTip { + margin: 3px; + border: none; + border-radius: 3px; +} \ No newline at end of file diff --git a/files/styles/style-dark2.css b/files/styles/style-dark2.css index e5b0fb520..acbfbbc38 100644 --- a/files/styles/style-dark2.css +++ b/files/styles/style-dark2.css @@ -1,325 +1,3 @@ -/* Due to the lack of support for @include in Qt's CSS implementation (see QTBUG-2047), the following is the base styles for the application. They are later modified with colors.*/ - -* { - font-size: 11px; -} - -QCheckBox::indicator { - border-radius: 2px; - border-width: 1px; - border-style: solid; - width: 10px; - height: 10px; -} - -QComboBox { - border-radius: 2px; - border-width: 1px; - border-style: solid; -} - -QDialog { - border-width: 1px; - border-style: solid; - border-radius: 2px; -} - -QDockWidget { - border-radius: 1px; - border-width: 10px; - border-style: solid; -} - -QDockWidget::title { - text-align: left; - padding-left: 10px; - height: 14px; - border-bottom-width: 2px; - border-bottom-style: solid; -} - -QDockWidget::close-button, QDockWidget::float-button { - border-width: 1px; - border-style: solid; - background: none; - padding: 0; -} - -QDockWidget::close-button:hover, QDockWidget::float-button:hover { - background: none; -} - -QDockWidget::close-button:pressed, QDockWidget::float-button:pressed { - padding: 1px -1px -1px 1px; - background: none; -} - -QGCToolWidgetItem { - border-radius: 3px; - border-width: 1px; - border-style: solid; - padding: 10px 0 0 0; - margin-top: 1ex; /* leave space at the top for the title */ -} - -QGroupBox { - border-radius: 3px; - border-width: 1px; - border-style: solid; - padding: 10px 0 0 0; - margin-top: 1ex; /* leave space at the top for the title */ -} - -QGroupBox::title { - subcontrol-origin: margin; - subcontrol-position: top center; /* position at the top center */ - margin: 0 3px 0 3px; - padding: 0 3px 0 0; - font: bold 8px; -} - -QLabel { - background: rgba(0,0,0,0); -} - -QLabel#toolBarNameLabel { - font: bold 16px; -} - -QLabel#toolBarModeLabel { - font: 12px; -} - -QLabel#toolBarStateLabel { - font: 12px; -} - -QLabel#toolBarMessageLabel { - font: 12px; - font-style: italic; -} - -QLineEdit { - border-radius: 2px; - border-width: 1px; - border-style: solid; -} - -QMainWindow::separator { - width: 2px; /* when vertical */ - height: 2px; /* when horizontal */ -} - -QMenu { - border-width: 1px; - border-style: solid; -} - -QMenu::separator { - height: 1px; - margin: 8px 5px 4px 5px; - } - -QMenuBar::item:disabled { - border: none; - background: none; -} - -QMenuBar::item:disabled:selected { - border: none; - background: none; -} - -QMenuBar::item:disabled:pressed { - background: none; - border: none; -} - -QPlainTextEdit { - border-radius: 2px; - border-width: 1px; - border-style: solid; - font-family: "Monospace"; - font: large; -} - -QPushButton { - min-height: 20px; - max-height: 20px; - margin: 1px; - border-width: 1px; - border-style: solid; - border-radius: 2px; - padding-left: 8px; - padding-right: 8px; -} - -QPushButton#forceLandButton, QPushButton#killButton { - font-weight: bold; - min-height: 30px; - background-clip: border; - border-width: 1px; - border-radius: 5px; -} - -QPushButton#controlButton { - min-height: 25px; -} - -QProgressBar { - border-radius: 4px; - border-width: 1px; - border-style: solid; - text-align: center; - padding: 2px; - height: 10px; -} - -QProgressBar:horizontal { - height: 9px; -} - -QProgressBar:vertical { - width: 9px; -} - -QSlider::groove:horizontal { - border-width: 1px; - border-style: solid; - 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:disabled:horizontal { - border-width: 1px; - border-style: solid; - 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::handle:horizontal { - border-width: 2px; - border-style: solid; - width: 18px; - margin: -5px 0; /* handle is placed by default on the contents rect of the groove. Expand outside the groove */ - border-radius: 3px; -} - -QSlider::handle:disabled:horizontal { - border-width: 2px; - border-style: solid; - width: 18px; - margin: -5px 0; /* handle is placed by default on the contents rect of the groove. Expand outside the groove */ - border-radius: 3px; -} - -QSlider::groove:vertical { - border-width: 1px; - border-style: solid; - width: 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::handle:vertical { - border-width: 2px; - border-style: solid; - height: 18px; - margin: 0 -5px; /* handle is placed by default on the contents rect of the groove. Expand outside the groove */ - border-radius: 3px; -} - -QSpinBox, QDoubleSpinBox { - min-height: 14px; - max-height: 18px; - border-radius: 5px; - border-width: 1px; - border-style: solid; - padding-right: 16px; /* make room for the arrows */ -} - -QSpinBox::up-button, QDoubleSpinBox::up-button { - subcontrol-origin: border; - subcontrol-position: top right; /* position at the top right corner */ - width: 16px; - padding-right: 1px; - border: none; -} - -QSpinBox::down-button, QDoubleSpinBox::down-button { - subcontrol-origin: border; - subcontrol-position: bottom right; /* position at bottom right corner */ - width: 16px; - padding-right: 1px; - border: none; -} - -QSpinBox::up-arrow, QDoubleSpinBox::up-arrow { - width: 16px; -} - -QSpinBox::down-arrow, QDoubleSpinBox::down-arrow { - width: 16px; -} - -QStatusBar { - border-width: 1px 0; - border-style: solid; -} - -QTabWidget::pane { /* The tab widget frame */ - border-radius: 2px; - border-width: 1px; - border-style: solid; - position: absolute; - top: -0.5em; -} - -QTabWidget::tab-bar { - alignment: center; -} - -/* Style the tab using the tab sub-control. Note that - it reads QTabBar _not_ QTabWidget */ -QTabBar::tab { - border-radius: 4px; - min-width: 8ex; - padding: 2px; - border-width: 2px; - border-style: solid; -} - -QTextEdit { - border-radius: 2px; - border-width: 1px; - border-style: solid; -} - -QToolBar { - margin: 0; - border-width: 1px 0; - border-style: solid; -} - -QToolButton { - font-weight: bold; - min-height: 20px; - max-height: 20px; - margin: 1px; - border-radius: 2px; - border-width: 1px; - border-style: solid; - padding-left: 3px; - padding-right: 3px; -} - -QToolTip { - margin: 3px; - border: none; - border-radius: 3px; -} - -/** The following are the style-specific colorings for QGC. **/ - /* These general styles need to go first so that following definitions override them */ * { background-color: #222; diff --git a/files/styles/style-light.css b/files/styles/style-light.css index c8a3fe3b1..b2661b33b 100644 --- a/files/styles/style-light.css +++ b/files/styles/style-light.css @@ -1,352 +1,3 @@ -/* Due to the lack of support for @include in Qt's CSS implementation (see QTBUG-2047), the following is the base styles for the application. They are later modified with colors.*/ - -* { - font-size: 11px; -} - -QCheckBox::indicator { - border-radius: 2px; - border-width: 1px; - border-style: solid; - width: 10px; - height: 10px; -} - -QCheckBox::indicator:indeterminate:hover { - image: url(:/files/images/checkbox_indeterminate_hover.png); -} - -QCheckBox::indicator:indeterminate:pressed { - image: url(:/files/images/checkbox_indeterminate_pressed.png); -} - -QComboBox { - border-radius: 2px; - border-width: 1px; - border-style: solid; -} - -QMainWindow::separator { - width: 2px; /* when vertical */ - height: 2px; /* when horizontal */ -} - -QDockWidget::close-button, QDockWidget::float-button { - border-width: 1px; - border-style: solid; - background: none; - padding: 0; -} - -QDockWidget::close-button:hover, QDockWidget::float-button:hover { - background: none; -} - -QDockWidget::close-button:pressed, QDockWidget::float-button:pressed { - padding: 1px -1px -1px 1px; - background: none; -} - -QDockWidget { - border-radius: 1px; - border-width: 10px; - border-style: solid; -} - -QDockWidget::title { - text-align: left; - padding-left: 10px; - height: 14px; - border-bottom-width: 2px; - border-bottom-style: solid; -} - -QDoubleSpinBox { - min-height: 14px; - max-height: 18px; - border-radius: 5px; - border-width: 1px; - border-style: solid; -} - -QDoubleSpinBox::up-button { - subcontrol-origin: border; - subcontrol-position: top right; /* position at the top right corner */ - border-image: url(:/files/images/actions/go-up.svg) 1; - border-width: 1px; - max-width: 5px; -} - -QDoubleSpinBox::down-button { - subcontrol-origin: border; - subcontrol-position: bottom right; /* position at the top right corner */ - border-image: url(:/files/images/actions/go-down.svg) 1; - border-width: 1px; - max-width: 5px; -} - -QGCToolWidgetItem { - border-radius: 3px; - border-width: 1px; - border-style: solid; - padding: 10px 0 0 0; - margin-top: 1ex; /* leave space at the top for the title */ -} - -QGroupBox { - border-radius: 3px; - border-width: 1px; - border-style: solid; - padding: 10px 0 0 0; - margin-top: 1ex; /* leave space at the top for the title */ -} - -QDialog { - border-radius: 2px; -} - -QGroupBox::title { - subcontrol-origin: margin; - subcontrol-position: top center; /* position at the top center */ - margin: 0 3px 0 3px; - padding: 0 3px 0 0; - font: bold 8px; -} - -QLabel { - background: rgba(0,0,0,0); -} - -QLabel#toolBarNameLabel { - font: bold 16px; -} - -QLabel#toolBarModeLabel { - font: 12px; -} - -QLabel#toolBarStateLabel { - font: 12px; -} - -QLabel#toolBarMessageLabel { - font: 12px; - font-style: italic; -} - -QLineEdit { - border-radius: 2px; - border-width: 1px; - border-style: solid; -} - -QMenu { - border-width: 1px; - border-style: solid; -} - -QMenu::separator { - height: 1px; - margin: 8px 5px 4px 5px; - } - -QMenuBar::item:disabled { - border: none; - background: none; -} - -QMenuBar::item:disabled:selected { - border: none; - background: none; -} - -QMenuBar::item:disabled:pressed { - background: none; - border: none; -} - -QPlainTextEdit { - border-radius: 2px; - border-width: 1px; - border-style: solid; - font-family: "Monospace"; - font: large; -} - -QPushButton { - min-height: 20px; - max-height: 20px; - margin: 1px; - border-width: 2px; - border-style: solid; - border-radius: 2px; - padding-left: 8px; - padding-right: 8px; -} - -QPushButton#forceLandButton, QPushButton#killButton { - font-weight: bold; - min-height: 30px; - background-clip: border; - border-width: 1px; - border-radius: 5px; -} - -QPushButton#controlButton { - min-height: 25px; -} - -QProgressBar { - border-radius: 4px; - border-width: 1px; - border-style: solid; - text-align: center; - padding: 2px; - height: 10px; -} - -QProgressBar:horizontal { - height: 9px; -} - -QProgressBar:vertical { - width: 9px; -} - -QSlider::groove:horizontal { - border-width: 1px; - border-style: solid; - 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:disabled:horizontal { - border-width: 1px; - border-style: solid; - 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::handle:horizontal { - border-width: 2px; - border-style: solid; - width: 18px; - margin: -5px 0; /* handle is placed by default on the contents rect of the groove. Expand outside the groove */ - border-radius: 3px; -} - -QSlider::handle:disabled:horizontal { - border-width: 2px; - border-style: solid; - width: 18px; - margin: -5px 0; /* handle is placed by default on the contents rect of the groove. Expand outside the groove */ - border-radius: 3px; -} - -QSlider::groove:vertical { - border-width: 1px; - border-style: solid; - width: 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::handle:vertical { - border-width: 2px; - border-style: solid; - height: 18px; - margin: 0 -5px; /* handle is placed by default on the contents rect of the groove. Expand outside the groove */ - border-radius: 3px; -} - -QSpinBox, QDoubleSpinBox { - border-radius: 5px; - border-width: 1px; - border-style: solid; - padding-right: 16px; /* make room for the arrows */ -} - -QSpinBox::up-button, QDoubleSpinBox::up-button { - subcontrol-origin: border; - subcontrol-position: top right; /* position at the top right corner */ - width: 16px; - padding-right: 1px; - border: none; -} - -QSpinBox::down-button, QDoubleSpinBox::down-button { - subcontrol-origin: border; - subcontrol-position: bottom right; /* position at bottom right corner */ - width: 16px; - padding-right: 1px; - border: none; -} - -QSpinBox::up-arrow, QDoubleSpinBox::up-arrow { - width: 16px; -} - -QSpinBox::down-arrow, QDoubleSpinBox::down-arrow { - width: 16px; -} - -QStatusBar { - border-width: 1px 0; - border-style: solid; -} - -QTabWidget::pane { /* The tab widget frame */ - border-radius: 2px; - border-width: 1px; - border-style: solid; - position: absolute; - top: -0.5em; -} - -QTabWidget::tab-bar { - alignment: center; -} - -/* Style the tab using the tab sub-control. Note that - it reads QTabBar _not_ QTabWidget */ -QTabBar::tab { - border-radius: 4px; - min-width: 8ex; - padding: 2px; - border-width: 2px; - border-style: solid; -} - -QTextEdit { - border-radius: 2px; - border-width: 1px; - border-style: solid; -} - -QToolBar { - margin: 0; - border-width: 1px 0; - border-style: solid; -} - -QToolButton { - font-weight: bold; - min-height: 20px; - max-height: 20px; - margin: 1px; - border-radius: 2px; - border-width: 2px; - border-style: solid; - padding-left: 3px; - padding-right: 3px; -} - -QToolTip { - margin: 3px; - border-radius: 3px; -} - -/** The following are the style-specific colorings for QGC. **/ - /* These general styles need to go first so that following definitions override them */ * { background-color: #F6F6F6; @@ -562,4 +213,4 @@ QToolButton:pressed { QToolTip { color: #000; -} +} \ No newline at end of file diff --git a/src/ui/MainWindow.cc b/src/ui/MainWindow.cc index ae2fccd81..d9f339da2 100644 --- a/src/ui/MainWindow.cc +++ b/src/ui/MainWindow.cc @@ -71,6 +71,7 @@ This file is part of the QGROUNDCONTROL project #include "LogCompressor.h" // Set up some constants +const QString MainWindow::baseStyle = ":files/styles/style-base.css"; const QString MainWindow::defaultDarkStyle = ":files/styles/style-dark.css"; const QString MainWindow::defaultLightStyle = ":files/styles/style-light.css"; @@ -1242,15 +1243,21 @@ bool MainWindow::loadStyle(QGC_MAINWINDOW_STYLE style, QString cssFile) // Load the new stylesheet. QFile styleSheet(cssFile); - // Attempt to open the stylesheet, replacing the 'ICONDIR' token here with the proper application path. + // 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); - QString style(styleSheet.readAll()); - qApp->setStyleSheet(style); + // Now fetch the base stylesheet. + QFile baseStyleSheet(baseStyle); + QString newStyle(baseStyleSheet.readAll()); + + // Then append the desired coloring and apply to QGC. + newStyle.append(styleSheet.readAll()); + qApp->setStyleSheet(newStyle); + // And save the new stylesheet path. if (currentStyle == QGC_MAINWINDOW_STYLE_LIGHT) { lightStyleFileName = cssFile; @@ -1260,7 +1267,7 @@ bool MainWindow::loadStyle(QGC_MAINWINDOW_STYLE style, QString cssFile) darkStyleFileName = cssFile; } - // And restore the cursor before returning. + // Finally restore the cursor before returning. qApp->restoreOverrideCursor(); return true; } diff --git a/src/ui/MainWindow.h b/src/ui/MainWindow.h index 61360bfb6..1fa958551 100644 --- a/src/ui/MainWindow.h +++ b/src/ui/MainWindow.h @@ -106,7 +106,8 @@ public: QGC_MAINWINDOW_STYLE_DARK, QGC_MAINWINDOW_STYLE_LIGHT }; - + + static const QString baseStyle; static const QString defaultDarkStyle; static const QString defaultLightStyle; -- 2.22.0