From 91b2a4e609eb40d9b31954bbccee806998bebefe Mon Sep 17 00:00:00 2001 From: Victor Zarubkin Date: Sat, 19 May 2018 23:40:01 +0300 Subject: [PATCH] #89 [UI] High DPI displays fix + System scaling factor --- CMakeLists.txt | 2 +- profiler_gui/images/attribution.txt | 2 + .../images/default/arrow-down-disabled.svg | 2 +- .../images/default/arrow-down-hover.svg | 2 +- .../images/default/arrow-down-pressed.svg | 12 + .../images/default/arrow-up-disabled.svg | 2 +- .../images/default/arrow-up-hover.svg | 2 +- .../images/default/arrow-up-pressed.svg | 12 + profiler_gui/main_window.cpp | 116 +++- profiler_gui/main_window.h | 3 + profiler_gui/resources.qrc | 2 + profiler_gui/themes/default.css | 580 ++++++++++-------- profiler_gui/themes/default.scss | 314 +++++----- 13 files changed, 626 insertions(+), 425 deletions(-) create mode 100644 profiler_gui/images/default/arrow-down-pressed.svg create mode 100644 profiler_gui/images/default/arrow-up-pressed.svg diff --git a/CMakeLists.txt b/CMakeLists.txt index 04d36f8..2394245 100644 --- a/CMakeLists.txt +++ b/CMakeLists.txt @@ -7,7 +7,7 @@ option(EASY_PROFILER_NO_GUI "Build easy_profiler without the GUI application (re set(EASY_PROGRAM_VERSION_MAJOR 2) set(EASY_PROGRAM_VERSION_MINOR 0) -set(EASY_PROGRAM_VERSION_PATCH 0) +set(EASY_PROGRAM_VERSION_PATCH 1) set(EASY_PRODUCT_VERSION_STRING "${EASY_PROGRAM_VERSION_MAJOR}.${EASY_PROGRAM_VERSION_MINOR}.${EASY_PROGRAM_VERSION_PATCH}") set(CMAKE_RUNTIME_OUTPUT_DIRECTORY ${CMAKE_CURRENT_BINARY_DIR}/bin) diff --git a/profiler_gui/images/attribution.txt b/profiler_gui/images/attribution.txt index e39b0a0..9f57334 100644 --- a/profiler_gui/images/attribution.txt +++ b/profiler_gui/images/attribution.txt @@ -36,9 +36,11 @@ default/minimize-white.svg - Icon made by Freepik from www.flaticon.com default/minimize-white-pressed.svg - Icon made by Freepik from www.flaticon.com default/arrow-down.svg - Icon made by Freepik from www.flaticon.com default/arrow-down-hover.svg - Icon made by Freepik from www.flaticon.com +default/arrow-down-pressed.svg - Icon made by Freepik from www.flaticon.com default/arrow-down-disabled.svg - Icon made by Freepik from www.flaticon.com default/arrow-up.svg - Icon made by Freepik from www.flaticon.com default/arrow-up-hover.svg - Icon made by Freepik from www.flaticon.com +default/arrow-up-pressed.svg - Icon made by Freepik from www.flaticon.com default/arrow-up-disabled.svg - Icon made by Freepik from www.flaticon.com default/arrow-left.svg - Icon made by Freepik from www.flaticon.com default/arrow-right.svg - Icon made by Freepik from www.flaticon.com diff --git a/profiler_gui/images/default/arrow-down-disabled.svg b/profiler_gui/images/default/arrow-down-disabled.svg index 46d7c82..b7813cc 100644 --- a/profiler_gui/images/default/arrow-down-disabled.svg +++ b/profiler_gui/images/default/arrow-down-disabled.svg @@ -5,7 +5,7 @@ width="451.847px" height="451.847px" viewBox="0 0 451.847 451.847" style="enable-background:new 0 0 451.847 451.847;" xml:space="preserve"> - diff --git a/profiler_gui/images/default/arrow-down-hover.svg b/profiler_gui/images/default/arrow-down-hover.svg index e16736a..1fedf69 100644 --- a/profiler_gui/images/default/arrow-down-hover.svg +++ b/profiler_gui/images/default/arrow-down-hover.svg @@ -5,7 +5,7 @@ width="451.847px" height="451.847px" viewBox="0 0 451.847 451.847" style="enable-background:new 0 0 451.847 451.847;" xml:space="preserve"> - diff --git a/profiler_gui/images/default/arrow-down-pressed.svg b/profiler_gui/images/default/arrow-down-pressed.svg new file mode 100644 index 0000000..aac360c --- /dev/null +++ b/profiler_gui/images/default/arrow-down-pressed.svg @@ -0,0 +1,12 @@ + + + + + + + + diff --git a/profiler_gui/images/default/arrow-up-disabled.svg b/profiler_gui/images/default/arrow-up-disabled.svg index 4581ed1..7c5d9db 100644 --- a/profiler_gui/images/default/arrow-up-disabled.svg +++ b/profiler_gui/images/default/arrow-up-disabled.svg @@ -5,7 +5,7 @@ width="451.847px" height="451.846px" viewBox="0 0 451.847 451.846" style="enable-background:new 0 0 451.847 451.846;" xml:space="preserve"> - diff --git a/profiler_gui/images/default/arrow-up-hover.svg b/profiler_gui/images/default/arrow-up-hover.svg index da0da91..9c4f637 100644 --- a/profiler_gui/images/default/arrow-up-hover.svg +++ b/profiler_gui/images/default/arrow-up-hover.svg @@ -5,7 +5,7 @@ width="451.847px" height="451.846px" viewBox="0 0 451.847 451.846" style="enable-background:new 0 0 451.847 451.846;" xml:space="preserve"> - diff --git a/profiler_gui/images/default/arrow-up-pressed.svg b/profiler_gui/images/default/arrow-up-pressed.svg new file mode 100644 index 0000000..0cb3a34 --- /dev/null +++ b/profiler_gui/images/default/arrow-up-pressed.svg @@ -0,0 +1,12 @@ + + + + + + + + diff --git a/profiler_gui/main_window.cpp b/profiler_gui/main_window.cpp index a061396..84289f4 100644 --- a/profiler_gui/main_window.cpp +++ b/profiler_gui/main_window.cpp @@ -63,38 +63,41 @@ #include #include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include #include -#include -#include -#include -#include -#include -#include -#include + +#include +#include +#include #include -#include -#include -#include -#include #include #include #include #include +#include +#include +#include +#include +#include +#include +#include +#include +#include #include -#include +#include +#include +#include +#include +#include +#include +#include +#include +#include +#include +#include +#include +#include +#include +#include #include "main_window.h" #include "arbitrary_value_inspector.h" @@ -156,6 +159,42 @@ inline void loadTheme(const QString& _theme) QString style = in.readAll(); if (!style.isEmpty()) { + // Find font family + const auto fontFamilyString = QRegularExpression("font-family:.*;").match(style).captured(); + + // Calculate point size using current font + auto dummy = new QWidget(); + dummy->setStyleSheet(QString("QWidget { %1\nfont-size: 100pt; }").arg(fontFamilyString)); + dummy->show(); // actual font become valid only after widget showEvent + const auto pointSizeF = QFontMetricsF(dummy->font()).height() * 1e-2; + delete dummy; + + //QMessageBox::information(nullptr, "asfdasf", QString("100pt = %1 = %2").arg(pointSizeF * 1e2).arg((int)(pointSizeF * 1e2 + 0.5))); + + // Find and convert all sizes from points to pixels + QRegularExpression re("(\\d+\\.?\\d*)ex"); + auto it = re.globalMatch(style); + + QSet matchedTexts; + std::vector all; + while (it.hasNext()) + { + const auto match = it.next(); + if (!matchedTexts.contains(match.captured())) + { + matchedTexts.insert(match.captured()); + all.emplace_back(match.capturedTexts()); + } + } + + for (const auto& match : all) + { + const auto pt = match.back().toDouble(); + const int pixels = static_cast(pointSizeF * pt + 0.5); + //QMessageBox::information(nullptr, "bbb", QString("Replacing %1\nwith\n%2\n\npt = %3").arg(match.front()).arg(QString("%1px").arg(pixels)).arg(pt)); + style.replace(match.front(), QString("%1px").arg(pixels)); + } + qApp->setStyleSheet(style); } } @@ -228,10 +267,12 @@ void MainWindow::configureSizes() const auto fontFamily = w.font().family(); const auto pixelSize = w.font().pixelSize(); - const auto updateFont = [&fontFamily, pixelSize] (QFont& font) + const auto pointSize = w.font().pointSize(); + const auto updateFont = [&] (QFont& font) { font.setFamily(fontFamily); font.setPixelSize(pixelSize); + font.setPointSize(pointSize); }; auto& fonts = EASY_GLOBALS.font; @@ -892,7 +933,12 @@ void MainWindow::onThemeChange(bool) if (m_theme != newTheme) { m_theme = std::move(newTheme); - QMessageBox::information(this, "Theme", "You should restart the application to apply the theme."); + + QMessageBox::information(this, "UI theme changed", "You may need to restart the application\nto apply the theme correctly."); + + loadTheme(m_theme); + validateLineEdits(); + configureSizes(); } } @@ -1358,6 +1404,22 @@ void MainWindow::onDescTreeDialogClose(int) ////////////////////////////////////////////////////////////////////////// +void MainWindow::validateLineEdits() +{ + m_addressEdit->setFixedWidth((m_addressEdit->fontMetrics().width(QString("255.255.255.255")) * 3) / 2); + m_portEdit->setFixedWidth(m_portEdit->fontMetrics().width(QString("000000")) + 10); + m_frameTimeEdit->setFixedWidth(m_frameTimeEdit->fontMetrics().width(QString("000000"))); +} + +////////////////////////////////////////////////////////////////////////// + +void MainWindow::showEvent(QShowEvent* show_event) +{ + Parent::showEvent(show_event); + validateLineEdits(); + configureSizes(); +} + void MainWindow::closeEvent(QCloseEvent* close_event) { if (m_bNetworkFileRegime) diff --git a/profiler_gui/main_window.h b/profiler_gui/main_window.h index 7330eca..547a354 100644 --- a/profiler_gui/main_window.h +++ b/profiler_gui/main_window.h @@ -303,6 +303,7 @@ public: // Public virtual methods + void showEvent(QShowEvent* event) override; void closeEvent(QCloseEvent* close_event) override; void dragEnterEvent(QDragEnterEvent* drag_event) override; void dragMoveEvent(QDragMoveEvent* drag_event) override; @@ -384,6 +385,8 @@ private: void destroyProgressDialog(); void createProgressDialog(const QString& text); + void validateLineEdits(); + }; // END of class MainWindow. ////////////////////////////////////////////////////////////////////////// diff --git a/profiler_gui/resources.qrc b/profiler_gui/resources.qrc index 78b03c7..366d3d0 100644 --- a/profiler_gui/resources.qrc +++ b/profiler_gui/resources.qrc @@ -46,9 +46,11 @@ images/default/close-white-pressed.svg images/default/arrow-up.svg images/default/arrow-up-hover.svg + images/default/arrow-up-pressed.svg images/default/arrow-up-disabled.svg images/default/arrow-down.svg images/default/arrow-down-hover.svg + images/default/arrow-down-pressed.svg images/default/arrow-down-disabled.svg images/default/arrow-right.svg images/default/yx.svg diff --git a/profiler_gui/themes/default.css b/profiler_gui/themes/default.css index 7a60f2b..3de9ed8 100644 --- a/profiler_gui/themes/default.css +++ b/profiler_gui/themes/default.css @@ -6,404 +6,478 @@ * default.scss by pysassc tool * * * ***********************************/ -/* ****************************************************************************************************************** */ -/* Functions */ -/* ****************************************************************************************************************** */ -/* Constants */ -/* ****************************************************************************************************************** */ -/* StyleSheet */ * { - font-family: "DejaVu Sans"; - font-size: 13px; - color: #504040; } + font-family: "DejaVu Sans"; + font-size: 10pt; + color: #504040; +} *:disabled { - color: #a08888; } + color: #c4c4c4; +} + +RoundProgressIndicator { + qproperty-color: #3297FD; + qproperty-background: #c4c4c4; + background: transparent; +} MainWindow, QToolBar, QDialog { - background-color: #f8f2f2; } + background-color: #f8f2f2; +} QToolTip { - background-color: #ffeccc; - border: 1px solid #c4c4c4; - color: #504040; } + background-color: #ffeccc; + border: 1px solid #c4c4c4; + color: #504040; +} ArbitraryValueToolTip { - margin: 0; - border: none; - background-color: #ffeccc; } - ArbitraryValueToolTip QWidget#cnt { - border: 1px solid #c4c4c4; - background-color: transparent; - margin: 0; } - ArbitraryValueToolTip QLabel { - background-color: transparent; - border: none; - color: #504040; } - ArbitraryValueToolTip QTextEdit { - background-color: transparent; - border: none; - color: #504040; - selection-color: #504040; - selection-background-color: rgba(152, 222, 152, 0.5); } + margin: 0; + border: none; + background-color: #ffeccc; +} + +ArbitraryValueToolTip QWidget#cnt { + border: 1px solid #c4c4c4; + background-color: transparent; + margin: 0; +} + +ArbitraryValueToolTip QLabel { + background-color: transparent; + border: none; + color: #504040; +} + +ArbitraryValueToolTip QTextEdit { + background-color: transparent; + border: none; + color: #504040; + selection-color: white; + selection-background-color: #3297FD; +} QWidget#DiagramPopup, QWidget#ThreadsPopup { - background-color: #ffeccc; - border: 1px solid #c4c4c4; } + background-color: #ffeccc; + border: 1px solid #c4c4c4; +} QGraphicsView { - border: 1px solid #c4c4c4; } + border: 1px solid #c4c4c4; +} QSplitter::handle:hover { - background-color: rgba(244, 67, 54, 0.5); } + background-color: #3297FD; +} QSplitter::handle:pressed { - background-color: #f44336; } + background-color: #0264c7; +} + +QLabel#BlocksTreeWidget_HintLabel { + color: gray; + font-size: 13pt; +} /* ****************************************************************************************************************** */ -QLineEdit, QComboBox, QSpinBox { - height: 24px; - border: 1px solid #c4c4c4; - background-color: white; - selection-background-color: rgba(152, 222, 152, 0.5); - selection-color: #504040; } +QLineEdit, QSpinBox { + border: 1px solid #c4c4c4; + background-color: white; + selection-background-color: #3297FD; + selection-color: white; + height: 15ex; +} + +QComboBox { + border: 1px solid #c4c4c4; + background-color: white; + selection-background-color: #B4D5FE; + selection-color: #504040; + height: 15ex; + padding-right: 11ex; +} QLineEdit:disabled, QComboBox:disabled, QSpinBox:disabled { - background-color: #f0f0f0; - color: #a08888; - selection-background-color: rgba(152, 222, 152, 0.5); - selection-color: #a08888; } + background-color: #f0f0f0; + color: #c4c4c4; + selection-background-color: #B4D5FE; + selection-color: #c4c4c4; +} QLineEdit:focus { - border: 1px solid #ffbcbc; } + border: 1px solid #3297FD; +} /* ****************************************************************************************************************** */ QComboBox::drop-down { - subcontrol-origin: padding; - subcontrol-position: top right; - width: 24px; - border: none; - margin-left: 0; } + subcontrol-origin: border; + subcontrol-position: center right; + border: none; + width: 10ex; +} QComboBox::down-arrow { - image: url(":/images/default/arrow-down"); - height: 8px; - width: 8px; } + image: url(":/images/default/arrow-down"); + width: 5ex; + height: 5ex; +} QComboBox::down-arrow:hover { - image: url(":/images/default/arrow-down-hover"); } + image: url(":/images/default/arrow-down-hover"); +} QComboBox::down-arrow:disabled { - image: url(":/images/default/arrow-down-disabled"); } + image: url(":/images/default/arrow-down-disabled"); +} /* ****************************************************************************************************************** */ QSpinBox::up-button { - subcontrol-origin: padding; - subcontrol-position: top right; - margin-left: 5px; - width: 24px; - border-left: 1px solid #c4c4c4; - border-bottom: 1px solid #c4c4c4; } + subcontrol-origin: padding; + subcontrol-position: top right; + border: none; + width: 10ex; +} QSpinBox::down-button { - subcontrol-origin: padding; - subcontrol-position: bottom right; - margin-left: 5px; - width: 24px; - border-left: 1px solid #c4c4c4; } - -QSpinBox::up-button:pressed, QSpinBox::down-button:pressed { - background-color: #eaeaea; } - -QSpinBox::up-button:!pressed:hover, QSpinBox::down-button:!pressed:hover { - background-color: #fafafa; } + subcontrol-origin: padding; + subcontrol-position: bottom right; + border: none; + width: 10ex; +} QSpinBox::up-arrow { - image: url(":/images/default/arrow-up"); - height: 8px; - width: 8px; } + image: url(":/images/default/arrow-up"); + width: 5ex; + height: 5ex; +} QSpinBox::up-arrow:hover { - image: url(":/images/default/arrow-up-hover"); } + image: url(":/images/default/arrow-up-hover"); +} + +QSpinBox::up-arrow:pressed { + image: url(":/images/default/arrow-up-pressed"); +} QSpinBox::up-arrow:disabled { - image: url(":/images/default/arrow-up-disabled"); } + image: url(":/images/default/arrow-up-disabled"); +} QSpinBox::down-arrow { - image: url(":/images/default/arrow-down"); - height: 8px; - width: 8px; } + image: url(":/images/default/arrow-down"); + width: 5ex; + height: 5ex; +} QSpinBox::down-arrow:hover { - image: url(":/images/default/arrow-down-hover"); } + image: url(":/images/default/arrow-down-hover"); +} + +QSpinBox::down-arrow:pressed { + image: url(":/images/default/arrow-down-pressed"); +} QSpinBox::down-arrow:disabled { - image: url(":/images/default/arrow-down-disabled"); } + image: url(":/images/default/arrow-down-disabled"); +} /* ****************************************************************************************************************** */ QPushButton { - height: 24px; - min-width: 50px; - border: 1px solid #c4c4c4; - background-color: white; - padding: 0 5px 0 5px; } + height: 15ex; + min-width: 30ex; + border: 1px solid #c4c4c4; + background-color: white; +} QPushButton:disabled { - background-color: #f0f0f0; - color: #a08888; } + background-color: #f0f0f0; + color: #c4c4c4; +} QPushButton:hover { - border: 1px solid #ffbcbc; - color: #922c2c; } + border: 1px solid #3297FD; + color: #3297FD; +} QPushButton:pressed { - border: 1px solid #922c2c; - color: #370400; } + border: 1px solid #3297FD; + color: #0264c7; +} /* ****************************************************************************************************************** */ QListView { - background-color: white; - border: 1px solid #c4c4c4; } + background-color: white; + border: 1px solid #c4c4c4; +} QListView, QTableView, QTreeView { - alternate-background-color: #e4e4ec; - selection-background-color: rgba(152, 222, 152, 0.8); - selection-color: #504040; } + alternate-background-color: #e4e4ec; + selection-background-color: #B4D5FE; + selection-color: #504040; +} QTreeView::branch { - selection-background-color: rgba(152, 222, 152, 0.8); - border-bottom: 1px solid #c4c4c4; } + padding: 5ex 0 5ex 0; + selection-background-color: #B4D5FE; + border-bottom: 1px solid #c4c4c4; +} QTreeView::branch:selected { - background-color: rgba(152, 222, 152, 0.8); } + background-color: #B4D5FE; +} QTreeView::branch:open:has-children { - padding: 9px 0 9px 0; - border-image: none; - image: url(":/images/default/arrow-down"); } + border-image: none; + image: url(":/images/default/arrow-down"); +} QTreeView::branch:closed:has-children { - padding: 9px 0 9px 0; - border-image: none; - image: url(":/images/default/arrow-right"); } + border-image: none; + image: url(":/images/default/arrow-right"); +} QListView::item, QTableView::item, QTreeView::item { - height: 26px; - border-bottom: 1px solid #c4c4c4; } + height: 15ex; + border-bottom: 1px solid #c4c4c4; +} QListView::item:selected, QTableView::item:selected, QTreeView::item:selected { - background-color: rgba(152, 222, 152, 0.8); } + background-color: #B4D5FE; +} QTreeView::indicator { - width: 14px; - height: 14px; - background-color: transparent; - border: 1px solid transparent; - padding: 1px; - margin: 0; } + width: 9ex; + height: 9ex; + background-color: transparent; + border: 1px solid transparent; + padding: 1px; + margin: 0; +} QTreeView::indicator:hover, QTreeView::indicator:checked, QTreeView::indicator:indeterminate { - background-color: white; - border: 1px solid #c4c4c4; } + background-color: white; + border: 1px solid #c4c4c4; +} QTreeView::indicator:checked { - image: url(":/images/default/check"); } + image: url(":/images/default/check"); +} QTreeView::indicator:checked:disabled { - image: url(":/images/default/check-disabled"); } + image: url(":/images/default/check-disabled"); +} QTreeView::indicator:indeterminate { - image: url(":/images/default/partial-check"); } + image: url(":/images/default/partial-check"); +} QTreeView::indicator:indeterminate:disabled { - image: url(":/images/default/partial-check-disabled"); } + image: url(":/images/default/partial-check-disabled"); +} /* ****************************************************************************************************************** */ QMenu { - background-color: white; - border: 1px solid #c4c4c4; - padding-top: 4px; - padding-bottom: 4px; } + background-color: white; + border: 1px solid #c4c4c4; + padding: 2ex 1ex 2ex 1ex; +} QMenu::item { - height: 24px; - padding: 0 16px 0 25px; - border: 1px solid transparent; - /* reserve space for selection border */ } + height: 15ex; + padding-left: 15ex; + padding-right: 5ex; + border: 1px solid transparent; + /* reserve space for selection border */; +} QMenu::item:selected { - border: 1px solid rgba(152, 222, 152, 0.5); - background-color: rgba(152, 222, 152, 0.5); } + border: 1px solid transparent; + background-color: #B4D5FE; + color: #504040; +} QMenu::icon { - width: 14px; - height: 14px; - background: none; - border: 1px inset transparent; - padding: 1px; - margin-left: 2px; } + width: 8ex; + height: 8ex; + background: none; + border: 1px inset transparent; + padding: 1px; + margin: 0 0 0 2ex; +} QMenu::icon:checked { /* appearance of a 'checked' icon */ - background-color: #dddddd; - border: 1px inset #aaaaaa; } + background-color: #dddddd; + border: 1px inset #aaaaaa; +} QMenu::separator { - height: 1px; - background: #c4c4c4; - margin-left: 5px; - margin-right: 5px; } + height: 1px; + background: #c4c4c4; + margin-left: 4ex; + margin-right: 4ex; +} QMenu::indicator { - width: 14px; - height: 14px; - background-color: white; - border: 1px solid #c4c4c4; - margin-left: 2px; - padding: 1px; } + width: 9ex; + height: 9ex; + background-color: white; + border: 1px solid #c4c4c4; + padding: 1px; + margin: 0 0 0 2ex; +} QMenu::indicator:non-exclusive:checked { - image: url(":/images/default/check"); } + image: url(":/images/default/check"); +} QMenu::indicator:non-exclusive:checked:disabled { - image: url(":/images/default/check-disabled"); } + image: url(":/images/default/check-disabled"); +} QMenu::indicator:exclusive { - border-radius: 8px; } + border-radius: 5ex; +} QMenu::indicator:exclusive:checked { - image: url(":/images/default/radio-check"); } + image: url(":/images/default/radio-check"); +} QMenu::indicator:exclusive:checked:disabled { - image: url(":/images/default/radio-check-disabled"); } - -/* ****************************************************************************************************************** */ -/*QToolButton { - border: 1px solid transparent; - background: none; - padding: 2px; + image: url(":/images/default/radio-check-disabled"); } -QToolButton:hover { - border: 1px solid $BorderColor; -} - -QToolButton[popupMode="1"] { - padding-right: 13px; -} - -QToolButton:pressed { - background-color: #808080; -} - -QToolButton::menu-button { - border: none; - border-left: 1px solid transparent; - width: 12px; -} - -QToolButton::menu-button:hover { - border-left: 1px solid $BorderColor; - background-color: #bbbbbb; -} - -QToolButton::menu-button:pressed { - border-left: 1px solid $BorderColor; - background-color: #808080; -}*/ /* ****************************************************************************************************************** */ QHeaderView::section { - height: 28px; - width: 96px; - min-width: 64px; - background: #eeeeee; } + height: 15.3ex; + width: 60ex; + min-width: 40ex; + background: #eeeeee; +} /* ****************************************************************************************************************** */ DockWidget QWidget#EasyDockWidgetTitle { - background-color: #686464; } - DockWidget QWidget#EasyDockWidgetTitle QLabel { - color: white; - margin-left: 4px; } - DockWidget QWidget#EasyDockWidgetTitle QPushButton { - background: none; - border: none; - max-height: 12px; - min-width: 12px; - max-width: 12px; - margin-right: 4px; - padding: 0; } - DockWidget QWidget#EasyDockWidgetTitle QPushButton#EasyDockWidgetFloatButton { - image: url(":/images/default/dock-maximize-white"); } - DockWidget QWidget#EasyDockWidgetTitle QPushButton#EasyDockWidgetFloatButton:hover { - image: url(":/images/default/dock-maximize-white-hover"); } - DockWidget QWidget#EasyDockWidgetTitle QPushButton#EasyDockWidgetFloatButton:pressed { - image: url(":/images/default/dock-maximize-white-pressed"); } - DockWidget QWidget#EasyDockWidgetTitle QPushButton#EasyDockWidgetFloatButton[floating=true] { - image: url(":/images/default/dock-minimize-white"); } - DockWidget QWidget#EasyDockWidgetTitle QPushButton#EasyDockWidgetFloatButton[floating=true]:hover { - image: url(":/images/default/dock-minimize-white-hover"); } - DockWidget QWidget#EasyDockWidgetTitle QPushButton#EasyDockWidgetFloatButton[floating=true]:pressed { - image: url(":/images/default/dock-minimize-white-pressed"); } - DockWidget QWidget#EasyDockWidgetTitle QPushButton#EasyDockWidgetCloseButton { - image: url(":/images/default/dock-close-white"); } - DockWidget QWidget#EasyDockWidgetTitle QPushButton#EasyDockWidgetCloseButton:hover { - image: url(":/images/default/dock-close-white-hover"); } - DockWidget QWidget#EasyDockWidgetTitle QPushButton#EasyDockWidgetCloseButton:pressed { - image: url(":/images/default/dock-close-white-pressed"); } + background-color: #686464; +} + +DockWidget QWidget#EasyDockWidgetTitle QLabel { + color: white; + margin-left: 4px; +} + +DockWidget QWidget#EasyDockWidgetTitle QPushButton { + background: none; + border: none; + max-height: 8ex; + min-width: 8ex; + max-width: 8ex; + margin-right: 3ex; + padding: 0; +} + +DockWidget QWidget#EasyDockWidgetTitle QPushButton#EasyDockWidgetFloatButton { + image: url(":/images/default/dock-maximize-white"); +} + +DockWidget QWidget#EasyDockWidgetTitle QPushButton#EasyDockWidgetFloatButton:hover { + image: url(":/images/default/dock-maximize-white-hover"); +} + +DockWidget QWidget#EasyDockWidgetTitle QPushButton#EasyDockWidgetFloatButton:pressed { + image: url(":/images/default/dock-maximize-white-pressed"); +} + +DockWidget QWidget#EasyDockWidgetTitle QPushButton#EasyDockWidgetFloatButton[floating=true] { + image: url(":/images/default/dock-minimize-white"); +} + +DockWidget QWidget#EasyDockWidgetTitle QPushButton#EasyDockWidgetFloatButton[floating=true]:hover { + image: url(":/images/default/dock-minimize-white-hover"); +} + +DockWidget QWidget#EasyDockWidgetTitle QPushButton#EasyDockWidgetFloatButton[floating=true]:pressed { + image: url(":/images/default/dock-minimize-white-pressed"); +} + +DockWidget QWidget#EasyDockWidgetTitle QPushButton#EasyDockWidgetCloseButton { + image: url(":/images/default/dock-close-white"); +} + +DockWidget QWidget#EasyDockWidgetTitle QPushButton#EasyDockWidgetCloseButton:hover { + image: url(":/images/default/dock-close-white-hover"); +} + +DockWidget QWidget#EasyDockWidgetTitle QPushButton#EasyDockWidgetCloseButton:pressed { + image: url(":/images/default/dock-close-white-pressed"); +} /* ****************************************************************************************************************** */ QProgressBar { - height: 24px; - background-color: white; - border: 1px solid #c4c4c4; - color: #0B530B; - text-align: center; } + background-color: #a4a4b4; + border: none; + color: white; + text-align: center; + height: 14ex; +} QProgressBar::chunk { - background-color: #98DE98; - width: 2px; - margin: 0; } + background-color: #3297FD; + width: 2px; + margin: 0; +} /* ****************************************************************************************************************** */ QScrollBar { - background-color: transparent; - border: none; - padding: 0; } + background-color: transparent; + border: none; + padding: 0; +} QScrollBar:hover { - background-color: rgba(0, 0, 0, 0.1); } + background-color: rgba(0, 0, 0, 0.1); +} QScrollBar:horizontal { - margin: 0; - height: 8px; } + margin: 0; + height: 5ex; +} QScrollBar:vertical { - margin: 0; - width: 8px; } + margin: 0; + width: 5ex; +} QScrollBar::handle { - background-color: rgba(0, 0, 0, 0.4); - border: none; - margin: 0; - padding: 0; } + background-color: rgba(0, 0, 0, 0.4); + border: none; + margin: 0; + padding: 0; +} QScrollBar::handle:pressed { - background-color: rgba(0, 0, 0, 0.6); } + background-color: rgba(0, 0, 0, 0.6); +} QScrollBar::handle:vertical { - min-height: 30px; - margin-left: 4px; } + min-height: 20ex; + margin-left: 3ex; +} QScrollBar::handle:vertical:hover, QScrollBar::handle:vertical:pressed { - margin-left: 0; } + margin-left: 0; +} QScrollBar::handle:horizontal { - min-width: 30px; - margin-top: 4px; } + min-width: 20ex; + margin-top: 3ex; +} QScrollBar::handle:horizontal:hover, QScrollBar::handle:horizontal:pressed { - margin-top: 0; } + margin-top: 0; +} QScrollBar::add-line, QScrollBar::sub-line { - background: none; - border: none; } + background: none; + border: none; +} diff --git a/profiler_gui/themes/default.scss b/profiler_gui/themes/default.scss index b63e9bc..e7895f6 100644 --- a/profiler_gui/themes/default.scss +++ b/profiler_gui/themes/default.scss @@ -7,35 +7,45 @@ * * ***********************************/ -/* ****************************************************************************************************************** */ -/* Functions */ @function rgb_a($color, $opacity) { @return fade_out($color, 1.0 - $opacity); } -/* ****************************************************************************************************************** */ -/* Constants */ +// CONSTANTS ---------------------------------------------- +$FontSize: 10pt; + $TextColor: #504040; -$DisabledTextColor: #a08888; +$DisabledTextColor: #c4c4c4; +$SelectedTextColor: $TextColor; +$DarkSelectedTextColor: white; +$DisabledSelectedTextColor: $DisabledTextColor; + $BorderColor: #c4c4c4; $MainColor: #f44336; -$HoveredMenuRowColor: rgb_a(#98DE98, 0.5); + +$DarkSelectionColor: #3297FD; + +$SelectionBorderColor: transparent; +$SelectionColor: #B4D5FE; +$DisabledSelectionColor: #B4D5FE; +$TreeViewSelectionColor: $SelectionColor; +$TreeViewSelectionTextColor: $TextColor; + $BackgroundColor: white; $DisabledBackgroundColor: #f0f0f0; -$ButtonHoverColor: #922c2c;//#d77d7d; -$ButtonPressedColor: #370400;//#922c2c; -$FocusBorderColor: #ffbcbc; + +$ButtonHoverColor: $DarkSelectionColor;//#922c2c; +$ButtonPressedColor: darken($DarkSelectionColor, 20%);//#370400; + +$FocusBorderColor: $DarkSelectionColor;//#ffbcbc; $TooltipColor: #ffeccc; -$DefaultHeight: 24px; -$ComboBoxArrowSize: 8px; -$SpinBoxArrowSize: 8px; -/* ****************************************************************************************************************** */ -/* StyleSheet */ +$InputHeight: 15ex; +// STYLES ------------------------------------------------- * { font-family: "DejaVu Sans"; - font-size: 13px; + font-size: $FontSize; color: $TextColor; } @@ -43,6 +53,12 @@ $SpinBoxArrowSize: 8px; color: $DisabledTextColor; } +RoundProgressIndicator { + qproperty-color: $DarkSelectionColor; + qproperty-background: $BorderColor; + background: transparent; +} + MainWindow, QToolBar, QDialog { background-color: #f8f2f2; } @@ -57,22 +73,25 @@ ArbitraryValueToolTip { margin: 0; border: none; background-color: $TooltipColor; + QWidget#cnt { border: 1px solid $BorderColor; background-color: transparent; margin: 0; } + QLabel { background-color: transparent; border: none; color: $TextColor; } + QTextEdit { background-color: transparent; border: none; color: $TextColor; - selection-color: $TextColor; - selection-background-color: $HoveredMenuRowColor; + selection-color: $DarkSelectedTextColor; + selection-background-color: $DarkSelectionColor; } } @@ -86,85 +105,124 @@ QGraphicsView { } QSplitter::handle:hover { - background-color: rgb_a($MainColor, 0.5); + background-color: $FocusBorderColor; } QSplitter::handle:pressed { - background-color: $MainColor; + background-color: darken($FocusBorderColor, 20%); +} + +QLabel#BlocksTreeWidget_HintLabel { + color: gray; + font-size: 13pt; } /* ****************************************************************************************************************** */ -QLineEdit, QComboBox, QSpinBox { - height: $DefaultHeight; +QLineEdit, QSpinBox { border: 1px solid $BorderColor; background-color: $BackgroundColor; - selection-background-color: $HoveredMenuRowColor; - selection-color: $TextColor; + selection-background-color: $DarkSelectionColor; + selection-color: $DarkSelectedTextColor; + height: $InputHeight; +} + +QComboBox { + border: 1px solid $BorderColor; + background-color: $BackgroundColor; + selection-background-color: $SelectionColor; + selection-color: $SelectedTextColor; + height: $InputHeight; + padding-right: 11ex; } QLineEdit:disabled, QComboBox:disabled, QSpinBox:disabled { background-color: $DisabledBackgroundColor; color: $DisabledTextColor; - selection-background-color: $HoveredMenuRowColor; - selection-color: $DisabledTextColor; + selection-background-color: $DisabledSelectionColor; + selection-color: $DisabledSelectedTextColor; } QLineEdit:focus { border: 1px solid $FocusBorderColor; } /* ****************************************************************************************************************** */ QComboBox::drop-down { - subcontrol-origin: padding; - subcontrol-position: top right; - width: $DefaultHeight; + subcontrol-origin: border; + subcontrol-position: center right; border: none; - margin-left: 0; + width: 10ex; } -QComboBox::down-arrow { image: url(":/images/default/arrow-down"); height: $ComboBoxArrowSize; width: $ComboBoxArrowSize; } -QComboBox::down-arrow:hover { image: url(":/images/default/arrow-down-hover"); } -QComboBox::down-arrow:disabled { image: url(":/images/default/arrow-down-disabled"); } +QComboBox::down-arrow { + image: url(":/images/default/arrow-down"); + width: 5ex; + height: 5ex; +} + +QComboBox::down-arrow:hover { + image: url(":/images/default/arrow-down-hover"); +} + +QComboBox::down-arrow:disabled { + image: url(":/images/default/arrow-down-disabled"); +} /* ****************************************************************************************************************** */ QSpinBox::up-button { subcontrol-origin: padding; subcontrol-position: top right; - margin-left: 5px; - width: $DefaultHeight; - border-left: 1px solid $BorderColor; - border-bottom: 1px solid $BorderColor; + border: none; + width: 10ex; } QSpinBox::down-button { subcontrol-origin: padding; subcontrol-position: bottom right; - margin-left: 5px; - width: $DefaultHeight; - border-left: 1px solid $BorderColor; + border: none; + width: 10ex; } -QSpinBox::up-button:pressed, QSpinBox::down-button:pressed { - background-color: #eaeaea; +QSpinBox::up-arrow { + image: url(":/images/default/arrow-up"); + width: 5ex; + height: 5ex; } -QSpinBox::up-button:!pressed:hover, QSpinBox::down-button:!pressed:hover { - background-color: #fafafa; +QSpinBox::up-arrow:hover { + image: url(":/images/default/arrow-up-hover"); } -QSpinBox::up-arrow { image: url(":/images/default/arrow-up"); height: $SpinBoxArrowSize; width: $SpinBoxArrowSize; } -QSpinBox::up-arrow:hover { image: url(":/images/default/arrow-up-hover"); } -QSpinBox::up-arrow:disabled { image: url(":/images/default/arrow-up-disabled"); } +QSpinBox::up-arrow:pressed { + image: url(":/images/default/arrow-up-pressed"); +} -QSpinBox::down-arrow { image: url(":/images/default/arrow-down"); height: $SpinBoxArrowSize; width: $SpinBoxArrowSize; } -QSpinBox::down-arrow:hover { image: url(":/images/default/arrow-down-hover"); } -QSpinBox::down-arrow:disabled { image: url(":/images/default/arrow-down-disabled"); } +QSpinBox::up-arrow:disabled { + image: url(":/images/default/arrow-up-disabled"); +} + +QSpinBox::down-arrow { + image: url(":/images/default/arrow-down"); + width: 5ex; + height: 5ex; +} + +QSpinBox::down-arrow:hover { + image: url(":/images/default/arrow-down-hover"); +} + +QSpinBox::down-arrow:pressed { + image: url(":/images/default/arrow-down-pressed"); +} + +QSpinBox::down-arrow:disabled { + image: url(":/images/default/arrow-down-disabled"); +} /* ****************************************************************************************************************** */ QPushButton { - height: $DefaultHeight; - min-width: 50px; + height: $InputHeight; + min-width: 30ex; border: 1px solid $BorderColor; background-color: $BackgroundColor; - padding: 0 5px 0 5px; } QPushButton:disabled { @@ -190,44 +248,43 @@ QListView { QListView, QTableView, QTreeView { alternate-background-color: #e4e4ec; - selection-background-color: rgb_a(#98DE98, 0.8); - selection-color: $TextColor; + selection-background-color: $TreeViewSelectionColor; + selection-color: $TreeViewSelectionTextColor; } QTreeView::branch { - selection-background-color: rgb_a(#98DE98, 0.8); + padding: 5ex 0 5ex 0; + selection-background-color: $TreeViewSelectionColor; border-bottom: 1px solid $BorderColor; } QTreeView::branch:selected { - background-color: rgb_a(#98DE98, 0.8); + background-color: $TreeViewSelectionColor; } QTreeView::branch:open:has-children { - padding: 9px 0 9px 0; border-image: none; image: url(":/images/default/arrow-down"); } QTreeView::branch:closed:has-children { - padding: 9px 0 9px 0; border-image: none; image: url(":/images/default/arrow-right"); } QListView::item, QTableView::item, QTreeView::item { - height: $DefaultHeight + 2px; + height: $InputHeight; border-bottom: 1px solid $BorderColor; } QListView::item:selected, QTableView::item:selected, QTreeView::item:selected { - background-color: rgb_a(#98DE98, 0.8); + background-color: $TreeViewSelectionColor; } QTreeView::indicator { - width: 14px; - height: 14px; + width: 9ex; + height: 9ex; background-color: transparent; border: 1px solid transparent; padding: 1px; @@ -239,38 +296,49 @@ QTreeView::indicator:hover, QTreeView::indicator:checked, QTreeView::indicator:i border: 1px solid $BorderColor; } -QTreeView::indicator:checked { image: url(":/images/default/check"); } -QTreeView::indicator:checked:disabled { image: url(":/images/default/check-disabled"); } +QTreeView::indicator:checked { + image: url(":/images/default/check"); +} -QTreeView::indicator:indeterminate { image: url(":/images/default/partial-check"); } -QTreeView::indicator:indeterminate:disabled { image: url(":/images/default/partial-check-disabled"); } +QTreeView::indicator:checked:disabled { + image: url(":/images/default/check-disabled"); +} + +QTreeView::indicator:indeterminate { + image: url(":/images/default/partial-check"); +} + +QTreeView::indicator:indeterminate:disabled { + image: url(":/images/default/partial-check-disabled"); +} /* ****************************************************************************************************************** */ QMenu { background-color: $BackgroundColor; border: 1px solid $BorderColor; - padding-top: 4px; - padding-bottom: 4px; + padding: 2ex 1ex 2ex 1ex; } QMenu::item { - height: $DefaultHeight; - padding: 0 16px 0 25px; + height: $InputHeight; + padding-left: $InputHeight; + padding-right: 5ex; border: 1px solid transparent; /* reserve space for selection border */ } QMenu::item:selected { - border: 1px solid $HoveredMenuRowColor; - background-color: $HoveredMenuRowColor; + border: 1px solid $SelectionBorderColor; + background-color: $SelectionColor; + color: $SelectedTextColor; } QMenu::icon { - width: 14px; - height: 14px; + width: 8ex; + height: 8ex; background: none; border: 1px inset transparent; padding: 1px; - margin-left: 2px; + margin: 0 0 0 2ex; } QMenu::icon:checked { /* appearance of a 'checked' icon */ @@ -281,81 +349,47 @@ QMenu::icon:checked { /* appearance of a 'checked' icon */ QMenu::separator { height: 1px; background: $BorderColor; - margin-left: 5px; - margin-right: 5px; + margin-left: 4ex; + margin-right: 4ex; } QMenu::indicator { - width: 14px; - height: 14px; + width: 9ex; + height: 9ex; background-color: $BackgroundColor; border: 1px solid $BorderColor; - margin-left: 2px; padding: 1px; + margin: 0 0 0 2ex; } -QMenu::indicator:non-exclusive:checked { image: url(":/images/default/check"); } -QMenu::indicator:non-exclusive:checked:disabled { image: url(":/images/default/check-disabled"); } - -QMenu::indicator:exclusive { border-radius: 8px; } -QMenu::indicator:exclusive:checked { image: url(":/images/default/radio-check"); } -QMenu::indicator:exclusive:checked:disabled { image: url(":/images/default/radio-check-disabled"); } - - - - -/* ****************************************************************************************************************** */ -/*QToolButton { - border: 1px solid transparent; - background: none; - padding: 2px; +QMenu::indicator:non-exclusive:checked { + image: url(":/images/default/check"); } -QToolButton:hover { - border: 1px solid $BorderColor; +QMenu::indicator:non-exclusive:checked:disabled { + image: url(":/images/default/check-disabled"); } -QToolButton[popupMode="1"] { - padding-right: 13px; +QMenu::indicator:exclusive { + border-radius: 5ex; } -QToolButton:pressed { - background-color: #808080; +QMenu::indicator:exclusive:checked { + image: url(":/images/default/radio-check"); } -QToolButton::menu-button { - border: none; - border-left: 1px solid transparent; - width: 12px; +QMenu::indicator:exclusive:checked:disabled { + image: url(":/images/default/radio-check-disabled"); } -QToolButton::menu-button:hover { - border-left: 1px solid $BorderColor; - background-color: #bbbbbb; -} - -QToolButton::menu-button:pressed { - border-left: 1px solid $BorderColor; - background-color: #808080; -}*/ - - - - - - /* ****************************************************************************************************************** */ QHeaderView::section { - height: 28px; - width: 96px; - min-width: 64px; + height: 15.3ex; + width: 60ex; + min-width: 40ex; background: #eeeeee; } - - - - /* ****************************************************************************************************************** */ DockWidget { @@ -371,10 +405,10 @@ DockWidget QPushButton { background: none; border: none; - max-height: 12px; - min-width: 12px; - max-width: 12px; - margin-right: 4px; + max-height: 8ex; + min-width: 8ex; + max-width: 8ex; + margin-right: 3ex; padding: 0; } @@ -394,15 +428,15 @@ DockWidget /* ****************************************************************************************************************** */ QProgressBar { - height: $DefaultHeight; - background-color: $BackgroundColor; - border: 1px solid $BorderColor;//#64BC64; - color: #0B530B; + background-color: #a4a4b4; + border: none; + color: white; text-align: center; + height: 14ex; } QProgressBar::chunk { - background-color: #98DE98; + background-color: $DarkSelectionColor; width: 2px; margin: 0; } @@ -420,12 +454,12 @@ QScrollBar:hover { QScrollBar:horizontal { margin: 0; - height: 8px; + height: 5ex; } QScrollBar:vertical { margin: 0; - width: 8px; + width: 5ex; } QScrollBar::handle { @@ -439,10 +473,10 @@ QScrollBar::handle:pressed { background-color: rgb_a(#000000, 0.6); } -QScrollBar::handle:vertical { min-height: 30px; margin-left: 4px; } +QScrollBar::handle:vertical { min-height: 20ex; margin-left: 3ex; } QScrollBar::handle:vertical:hover, QScrollBar::handle:vertical:pressed { margin-left: 0; } -QScrollBar::handle:horizontal { min-width: 30px; margin-top: 4px; } +QScrollBar::handle:horizontal { min-width: 20ex; margin-top: 3ex; } QScrollBar::handle:horizontal:hover, QScrollBar::handle:horizontal:pressed { margin-top: 0; } QScrollBar::add-line, QScrollBar::sub-line {