Skip to content

Q
qgroundcontrol
Commit 89b67098 authored by Bryant's avatar Bryant
Browse files
Options

Segregated the coloring of the UI from the rest of the styling in the CSS, so... 

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.
parent 9e572aa8
Hide whitespace changes
Inline Side-by-side
Showing with 333 additions and 677 deletions
files/styles/style-base.css 0 → 100644
View file @ 89b67098
/* 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
files/styles/style-dark2.css
View file @ 89b67098
/* 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;
......
files/styles/style-light.css
View file @ 89b67098
/* 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
src/ui/MainWindow.cc
View file @ 89b67098
......@@ -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;
}
......
src/ui/MainWindow.h
View file @ 89b67098
......@@ -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;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment