Move to template-driven resource generation.
24
README.md
|
@ -13,7 +13,7 @@ The current status of the migration is:
|
||||||
|
|
||||||
# C++ Installation
|
# C++ Installation
|
||||||
|
|
||||||
Copy `breeze.qrc`, `dark.qss`, `light.qss` and the `dark` and `light` folders into your project directory and add the qrc file to your project file.
|
Copy `breeze.qrc` and the `dark` and `light` folders into your project directory and add the qrc file to your project file.
|
||||||
|
|
||||||
For example:
|
For example:
|
||||||
|
|
||||||
|
@ -37,7 +37,7 @@ int main(int argc, char *argv[])
|
||||||
QApplication app(argc, argv);
|
QApplication app(argc, argv);
|
||||||
|
|
||||||
// set stylesheet
|
// set stylesheet
|
||||||
QFile file(":/dark.qss");
|
QFile file(":/dark/stylesheet.qss");
|
||||||
file.open(QFile::ReadOnly | QFile::Text);
|
file.open(QFile::ReadOnly | QFile::Text);
|
||||||
QTextStream stream(&file);
|
QTextStream stream(&file);
|
||||||
app.setStyleSheet(stream.readAll());
|
app.setStyleSheet(stream.readAll());
|
||||||
|
@ -64,7 +64,7 @@ def main():
|
||||||
app = QtWidgets.QApplication(sys.argv)
|
app = QtWidgets.QApplication(sys.argv)
|
||||||
|
|
||||||
# set stylesheet
|
# set stylesheet
|
||||||
file = QFile(":/dark.qss")
|
file = QFile(":/dark/stylesheet.qss")
|
||||||
file.open(QFile.ReadOnly | QFile.Text)
|
file.open(QFile.ReadOnly | QFile.Text)
|
||||||
stream = QTextStream(file)
|
stream = QTextStream(file)
|
||||||
app.setStyleSheet(stream.readAll())
|
app.setStyleSheet(stream.readAll())
|
||||||
|
@ -74,11 +74,7 @@ def main():
|
||||||
app.exec_()
|
app.exec_()
|
||||||
```
|
```
|
||||||
|
|
||||||
# License
|
# Gallery
|
||||||
|
|
||||||
MIT, see [license](/LICENSE.md).
|
|
||||||
|
|
||||||
# Example
|
|
||||||
|
|
||||||
**Breeze/BreezeDark**
|
**Breeze/BreezeDark**
|
||||||
|
|
||||||
|
@ -86,6 +82,14 @@ Example user interface using the Breeze and BreezeDark stylesheets side-by-side.
|
||||||
|
|
||||||
![BreezeDark](/assets/Breeze.gif)
|
![BreezeDark](/assets/Breeze.gif)
|
||||||
|
|
||||||
|
For an extensive view of screenshots of the theme, see the [gallery](assets/gallery.md).
|
||||||
|
|
||||||
|
# Customization
|
||||||
|
|
||||||
|
It's easy to design your own themes using `configure.py`. First, add the styles you want into [configure](/configure/), run configure with a list of styles you want to include...
|
||||||
|
|
||||||
|
# TOOD(ahuszagh) Add documentation.
|
||||||
|
|
||||||
# Limitations
|
# Limitations
|
||||||
|
|
||||||
There are some limitations of using Qt stylesheets in general, which cannot be solved by stylesheets. To get more fine-grained style control, you should subclass `QCommonStyle`:
|
There are some limitations of using Qt stylesheets in general, which cannot be solved by stylesheets. To get more fine-grained style control, you should subclass `QCommonStyle`:
|
||||||
|
@ -113,6 +117,10 @@ Have an issue with the styles? Here's a few suggestions, prior to filing a bug r
|
||||||
- Modified the application font? Make sure you do **before** setting the application stylesheet.
|
- Modified the application font? Make sure you do **before** setting the application stylesheet.
|
||||||
- Modified the application style? Make sure you do **before** you creating a `QApplication instance`.
|
- Modified the application style? Make sure you do **before** you creating a `QApplication instance`.
|
||||||
|
|
||||||
|
# License
|
||||||
|
|
||||||
|
MIT, see [license](/LICENSE.md).
|
||||||
|
|
||||||
# Contributing
|
# Contributing
|
||||||
|
|
||||||
To configure the assets and the stylesheets, run `configure.py`. To compile the assets and stylesheets for Python, run `pyrcc5 breeze.qrc -o breeze_resources.py`.
|
To configure the assets and the stylesheets, run `configure.py`. To compile the assets and stylesheets for Python, run `pyrcc5 breeze.qrc -o breeze_resources.py`.
|
||||||
|
|
|
@ -0,0 +1,2 @@
|
||||||
|
# TODO(ahuszagh) Have screenshots of everything
|
||||||
|
Also need to update the Breeze.gif with a newer version.
|
108
breeze.qrc
|
@ -1,52 +1,49 @@
|
||||||
<RCC>
|
<RCC>
|
||||||
<qresource>
|
<qresource>
|
||||||
<file>light/hmovetoolbar.svg</file>
|
|
||||||
<file>light/vmovetoolbar.svg</file>
|
|
||||||
<file>light/hsepartoolbar.svg</file>
|
|
||||||
<file>light/vsepartoolbars.svg</file>
|
|
||||||
<file>light/stylesheet-branch-end.svg</file>
|
|
||||||
<file>light/stylesheet-branch-end-closed.svg</file>
|
|
||||||
<file>light/stylesheet-branch-end-open.svg</file>
|
|
||||||
<file>light/stylesheet-vline.svg</file>
|
|
||||||
<file>light/stylesheet-branch-more.svg</file>
|
|
||||||
<file>light/branch_closed.svg</file>
|
|
||||||
<file>light/branch_closed-on.svg</file>
|
<file>light/branch_closed-on.svg</file>
|
||||||
<file>light/branch_open.svg</file>
|
<file>light/branch_closed.svg</file>
|
||||||
<file>light/branch_open-on.svg</file>
|
<file>light/branch_open-on.svg</file>
|
||||||
<file>light/down_arrow.svg</file>
|
<file>light/branch_open.svg</file>
|
||||||
<file>light/down_arrow_disabled.svg</file>
|
|
||||||
<file>light/down_arrow-hover.svg</file>
|
|
||||||
<file>light/left_arrow.svg</file>
|
|
||||||
<file>light/left_arrow_disabled.svg</file>
|
|
||||||
<file>light/right_arrow.svg</file>
|
|
||||||
<file>light/right_arrow_disabled.svg</file>
|
|
||||||
<file>light/up_arrow.svg</file>
|
|
||||||
<file>light/up_arrow_disabled.svg</file>
|
|
||||||
<file>light/up_arrow-hover.svg</file>
|
|
||||||
<file>light/sizegrip.svg</file>
|
|
||||||
<file>light/transparent.svg</file>
|
|
||||||
<file>light/close.svg</file>
|
|
||||||
<file>light/close-hover.svg</file>
|
|
||||||
<file>light/close-pressed.svg</file>
|
|
||||||
<file>light/undock.svg</file>
|
|
||||||
<file>light/undock-hover.svg</file>
|
|
||||||
<file>light/checkbox_checked-hover.svg</file>
|
<file>light/checkbox_checked-hover.svg</file>
|
||||||
<file>light/checkbox_checked.svg</file>
|
<file>light/checkbox_checked.svg</file>
|
||||||
<file>light/checkbox_checked_disabled.svg</file>
|
<file>light/checkbox_checked_disabled.svg</file>
|
||||||
<file>light/checkbox_indeterminate.svg</file>
|
|
||||||
<file>light/checkbox_indeterminate-hover.svg</file>
|
<file>light/checkbox_indeterminate-hover.svg</file>
|
||||||
|
<file>light/checkbox_indeterminate.svg</file>
|
||||||
<file>light/checkbox_indeterminate_disabled.svg</file>
|
<file>light/checkbox_indeterminate_disabled.svg</file>
|
||||||
<file>light/checkbox_unchecked-hover.svg</file>
|
<file>light/checkbox_unchecked-hover.svg</file>
|
||||||
<file>light/checkbox_unchecked_disabled.svg</file>
|
<file>light/checkbox_unchecked_disabled.svg</file>
|
||||||
|
<file>light/close-hover.svg</file>
|
||||||
|
<file>light/close-pressed.svg</file>
|
||||||
|
<file>light/close.svg</file>
|
||||||
|
<file>light/down_arrow-hover.svg</file>
|
||||||
|
<file>light/down_arrow.svg</file>
|
||||||
|
<file>light/down_arrow_disabled.svg</file>
|
||||||
|
<file>light/hmovetoolbar.svg</file>
|
||||||
|
<file>light/hsepartoolbar.svg</file>
|
||||||
|
<file>light/left_arrow.svg</file>
|
||||||
|
<file>light/left_arrow_disabled.svg</file>
|
||||||
<file>light/radio_checked-hover.svg</file>
|
<file>light/radio_checked-hover.svg</file>
|
||||||
<file>light/radio_checked.svg</file>
|
<file>light/radio_checked.svg</file>
|
||||||
<file>light/radio_checked_disabled.svg</file>
|
<file>light/radio_checked_disabled.svg</file>
|
||||||
<file>light/radio_unchecked-hover.svg</file>
|
<file>light/radio_unchecked-hover.svg</file>
|
||||||
<file>light/radio_unchecked_disabled.svg</file>
|
<file>light/radio_unchecked_disabled.svg</file>
|
||||||
<file>dark/hmovetoolbar.svg</file>
|
<file>light/right_arrow.svg</file>
|
||||||
<file>dark/vmovetoolbar.svg</file>
|
<file>light/right_arrow_disabled.svg</file>
|
||||||
<file>dark/hseptoolbar.svg</file>
|
<file>light/sizegrip.svg</file>
|
||||||
<file>dark/vseptoolbar.svg</file>
|
<file>light/stylesheet-branch-end-closed.svg</file>
|
||||||
|
<file>light/stylesheet-branch-end-open.svg</file>
|
||||||
|
<file>light/stylesheet-branch-end.svg</file>
|
||||||
|
<file>light/stylesheet-branch-more.svg</file>
|
||||||
|
<file>light/stylesheet-vline.svg</file>
|
||||||
|
<file>light/transparent.svg</file>
|
||||||
|
<file>light/undock-hover.svg</file>
|
||||||
|
<file>light/undock.svg</file>
|
||||||
|
<file>light/up_arrow-hover.svg</file>
|
||||||
|
<file>light/up_arrow.svg</file>
|
||||||
|
<file>light/up_arrow_disabled.svg</file>
|
||||||
|
<file>light/vmovetoolbar.svg</file>
|
||||||
|
<file>light/vsepartoolbars.svg</file>
|
||||||
|
<file>light/stylesheet.qss</file>
|
||||||
<file>dark/branch_closed.svg</file>
|
<file>dark/branch_closed.svg</file>
|
||||||
<file>dark/branch_closed_hover.svg</file>
|
<file>dark/branch_closed_hover.svg</file>
|
||||||
<file>dark/branch_end.svg</file>
|
<file>dark/branch_end.svg</file>
|
||||||
|
@ -55,37 +52,40 @@
|
||||||
<file>dark/branch_more_arrow.svg</file>
|
<file>dark/branch_more_arrow.svg</file>
|
||||||
<file>dark/branch_open.svg</file>
|
<file>dark/branch_open.svg</file>
|
||||||
<file>dark/branch_open_hover.svg</file>
|
<file>dark/branch_open_hover.svg</file>
|
||||||
<file>dark/down_arrow.svg</file>
|
<file>dark/calendar_next.svg</file>
|
||||||
<file>dark/down_arrow_disabled.svg</file>
|
<file>dark/calendar_previous.svg</file>
|
||||||
<file>dark/down_arrow_hover.svg</file>
|
|
||||||
<file>dark/left_arrow.svg</file>
|
|
||||||
<file>dark/left_arrow_disabled.svg</file>
|
|
||||||
<file>dark/right_arrow.svg</file>
|
|
||||||
<file>dark/right_arrow_disabled.svg</file>
|
|
||||||
<file>dark/up_arrow.svg</file>
|
|
||||||
<file>dark/up_arrow_disabled.svg</file>
|
|
||||||
<file>dark/up_arrow_hover.svg</file>
|
|
||||||
<file>dark/sizegrip.svg</file>
|
|
||||||
<file>dark/transparent.svg</file>
|
|
||||||
<file>dark/close.svg</file>
|
|
||||||
<file>dark/close_hover.svg</file>
|
|
||||||
<file>dark/close_pressed.svg</file>
|
|
||||||
<file>dark/undock.svg</file>
|
|
||||||
<file>dark/undock_hover.svg</file>
|
|
||||||
<file>dark/checkbox_checked.svg</file>
|
<file>dark/checkbox_checked.svg</file>
|
||||||
<file>dark/checkbox_checked_disabled.svg</file>
|
<file>dark/checkbox_checked_disabled.svg</file>
|
||||||
<file>dark/checkbox_indeterminate.svg</file>
|
<file>dark/checkbox_indeterminate.svg</file>
|
||||||
<file>dark/checkbox_indeterminate_disabled.svg</file>
|
<file>dark/checkbox_indeterminate_disabled.svg</file>
|
||||||
<file>dark/checkbox_unchecked.svg</file>
|
<file>dark/checkbox_unchecked.svg</file>
|
||||||
<file>dark/checkbox_unchecked_disabled.svg</file>
|
<file>dark/checkbox_unchecked_disabled.svg</file>
|
||||||
<file>dark/calendar_next.svg</file>
|
<file>dark/close.svg</file>
|
||||||
<file>dark/calendar_previous.svg</file>
|
<file>dark/close_hover.svg</file>
|
||||||
|
<file>dark/close_pressed.svg</file>
|
||||||
|
<file>dark/down_arrow.svg</file>
|
||||||
|
<file>dark/down_arrow_disabled.svg</file>
|
||||||
|
<file>dark/down_arrow_hover.svg</file>
|
||||||
|
<file>dark/hmovetoolbar.svg</file>
|
||||||
|
<file>dark/hseptoolbar.svg</file>
|
||||||
|
<file>dark/left_arrow.svg</file>
|
||||||
|
<file>dark/left_arrow_disabled.svg</file>
|
||||||
<file>dark/radio_checked.svg</file>
|
<file>dark/radio_checked.svg</file>
|
||||||
<file>dark/radio_checked_disabled.svg</file>
|
<file>dark/radio_checked_disabled.svg</file>
|
||||||
<file>dark/radio_unchecked.svg</file>
|
<file>dark/radio_unchecked.svg</file>
|
||||||
<file>dark/radio_unchecked_disabled.svg</file>
|
<file>dark/radio_unchecked_disabled.svg</file>
|
||||||
|
<file>dark/right_arrow.svg</file>
|
||||||
|
<file>dark/right_arrow_disabled.svg</file>
|
||||||
|
<file>dark/sizegrip.svg</file>
|
||||||
|
<file>dark/transparent.svg</file>
|
||||||
|
<file>dark/undock.svg</file>
|
||||||
|
<file>dark/undock_hover.svg</file>
|
||||||
|
<file>dark/up_arrow.svg</file>
|
||||||
|
<file>dark/up_arrow_disabled.svg</file>
|
||||||
|
<file>dark/up_arrow_hover.svg</file>
|
||||||
<file>dark/vline.svg</file>
|
<file>dark/vline.svg</file>
|
||||||
<file>light.qss</file>
|
<file>dark/vmovetoolbar.svg</file>
|
||||||
<file>dark.qss</file>
|
<file>dark/vseptoolbar.svg</file>
|
||||||
|
<file>dark/stylesheet.qss</file>
|
||||||
</qresource>
|
</qresource>
|
||||||
</RCC>
|
</RCC>
|
||||||
|
|
5960
breeze_resources.py
145
configure.py
|
@ -2,15 +2,13 @@
|
||||||
configure
|
configure
|
||||||
=========
|
=========
|
||||||
|
|
||||||
Configure the assets and stylesheets.
|
Configure icons, stylesheets, and resource files.
|
||||||
'''
|
'''
|
||||||
|
|
||||||
import glob
|
import glob
|
||||||
import os
|
import os
|
||||||
|
|
||||||
home = os.path.dirname(os.path.realpath(__file__))
|
home = os.path.dirname(os.path.realpath(__file__))
|
||||||
# TODO(ahuszagh) Need configure for the stylesheets.
|
|
||||||
# TODO(ahuszagh) Need configure for the assets.
|
|
||||||
# TODO(ahuszagh) Need a script to generate the qrc
|
# TODO(ahuszagh) Need a script to generate the qrc
|
||||||
# Should be easy: styles.qss + assets.
|
# Should be easy: styles.qss + assets.
|
||||||
|
|
||||||
|
@ -19,84 +17,100 @@ home = os.path.dirname(os.path.realpath(__file__))
|
||||||
colors_map = {
|
colors_map = {
|
||||||
'light': {},
|
'light': {},
|
||||||
'dark': {
|
'dark': {
|
||||||
|
# Might want to change the icon names as well to include the color changes.
|
||||||
|
# First we need to stabilize the names.
|
||||||
|
# Main theme colors.
|
||||||
|
# -----------------
|
||||||
|
# Note: these colors are inversed for light
|
||||||
|
# themes.
|
||||||
'foreground': '#eff0f1',
|
'foreground': '#eff0f1',
|
||||||
|
'foreground-light': '#ffffff',
|
||||||
'background': '#31363b',
|
'background': '#31363b',
|
||||||
'hover': '#3daee9',
|
'alternate-background': '#3b4045',
|
||||||
'hover_light': '#58d3ff',
|
'background-light': '#454a4f',
|
||||||
# Going to need more than 1 disabled.
|
'highlight': '#3daee9',
|
||||||
'disabled': '#b0b0b0',
|
'highlight-light': '#58d3ff',
|
||||||
'disabled_light': '#c8c9ca',
|
'highlight-dark': '#2a79a3',
|
||||||
# Single-use colors.
|
'alternate-hover': '#369cd1',
|
||||||
'close': '#626568',
|
'midtone': '#76797c',
|
||||||
'close_hover': '#b37979',
|
'midtone-light': '#b0b0b0',
|
||||||
'close_pressed': '#b33e3e',
|
'midtone-dark': '#626568',
|
||||||
'undock': '#a2a2a2',
|
'midtone:hover': '#8a8d8f', #9ea0a3
|
||||||
|
'view:border': '#3A3939',
|
||||||
|
'view:checked': '#334e5e',
|
||||||
|
'view:hover': 'rgba(61, 173, 232, 0.1)',
|
||||||
|
'view:background': '#232629',
|
||||||
|
'tab:background': '#54575B',
|
||||||
'tree': '#afafaf',
|
'tree': '#afafaf',
|
||||||
'toolbar': '#5f5f5f',
|
'checkbox:disabled': '#c8c9ca',
|
||||||
|
'button:disabled': '#454545',
|
||||||
|
'close:hover': '#b37979',
|
||||||
|
'close:pressed': '#b33e3e',
|
||||||
|
'dock:float': '#a2a2a2',
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|
||||||
assets = {
|
icons = {
|
||||||
# Arrows
|
# Arrows
|
||||||
'down_arrow': {
|
'down_arrow': {
|
||||||
'default': ['foreground'],
|
'default': ['foreground'],
|
||||||
'hover': ['hover'],
|
'hover': ['highlight'],
|
||||||
'disabled': ['disabled'],
|
'disabled': ['midtone-light'],
|
||||||
},
|
},
|
||||||
'left_arrow': {
|
'left_arrow': {
|
||||||
'default': ['foreground'],
|
'default': ['foreground'],
|
||||||
'disabled': ['disabled'],
|
'disabled': ['midtone-light'],
|
||||||
},
|
},
|
||||||
'right_arrow': {
|
'right_arrow': {
|
||||||
'default': ['foreground'],
|
'default': ['foreground'],
|
||||||
'disabled': ['disabled'],
|
'disabled': ['midtone-light'],
|
||||||
},
|
},
|
||||||
'up_arrow': {
|
'up_arrow': {
|
||||||
'default': ['foreground'],
|
'default': ['foreground'],
|
||||||
'hover': ['hover'],
|
'hover': ['highlight'],
|
||||||
'disabled': ['disabled'],
|
'disabled': ['midtone-light'],
|
||||||
},
|
},
|
||||||
# Abstract buttons.
|
# Abstract buttons.
|
||||||
'checkbox_checked': {
|
'checkbox_checked': {
|
||||||
'default': ['hover_light'],
|
'default': ['highlight-light'],
|
||||||
'disabled': ['disabled_light'],
|
'disabled': ['checkbox:disabled'],
|
||||||
},
|
},
|
||||||
'checkbox_indeterminate': {
|
'checkbox_indeterminate': {
|
||||||
'default': ['hover_light'],
|
'default': ['highlight-light'],
|
||||||
'disabled': ['disabled_light'],
|
'disabled': ['checkbox:disabled'],
|
||||||
},
|
},
|
||||||
'checkbox_unchecked': {
|
'checkbox_unchecked': {
|
||||||
'default': ['hover_light'],
|
'default': ['highlight-light'],
|
||||||
'disabled': ['disabled_light'],
|
'disabled': ['checkbox:disabled'],
|
||||||
},
|
},
|
||||||
'radio_checked': {
|
'radio_checked': {
|
||||||
'default': ['hover_light'],
|
'default': ['highlight-light'],
|
||||||
'disabled': ['disabled_light'],
|
'disabled': ['checkbox:disabled'],
|
||||||
},
|
},
|
||||||
'radio_unchecked': {
|
'radio_unchecked': {
|
||||||
'default': ['hover_light'],
|
'default': ['highlight-light'],
|
||||||
'disabled': ['disabled_light'],
|
'disabled': ['checkbox:disabled'],
|
||||||
},
|
},
|
||||||
# Dock/Tab widgets
|
# Dock/Tab widgets
|
||||||
'close': {
|
'close': {
|
||||||
'default': ['close'],
|
'default': ['midtone-dark'],
|
||||||
'hover': ['close_hover'],
|
'hover': ['close:hover'],
|
||||||
'pressed': ['close_pressed'],
|
'pressed': ['close:pressed'],
|
||||||
},
|
},
|
||||||
'undock': {
|
'undock': {
|
||||||
'default': ['undock'],
|
'default': ['dock:float'],
|
||||||
},
|
},
|
||||||
'undock_hover': {
|
'undock_hover': {
|
||||||
'default': ['undock', 'foreground'],
|
'default': ['dock:float', 'foreground'],
|
||||||
},
|
},
|
||||||
# Tree views.
|
# Tree views.
|
||||||
'branch_open': {
|
'branch_open': {
|
||||||
'default': ['tree'],
|
'default': ['tree'],
|
||||||
'hover': ['hover'],
|
'hover': ['highlight'],
|
||||||
},
|
},
|
||||||
'branch_closed': {
|
'branch_closed': {
|
||||||
'default': ['tree'],
|
'default': ['tree'],
|
||||||
'hover': ['hover'],
|
'hover': ['highlight'],
|
||||||
},
|
},
|
||||||
'branch_end': {
|
'branch_end': {
|
||||||
'default': ['tree'],
|
'default': ['tree'],
|
||||||
|
@ -115,29 +129,29 @@ assets = {
|
||||||
},
|
},
|
||||||
'calendar_next': {
|
'calendar_next': {
|
||||||
'default': ['foreground'],
|
'default': ['foreground'],
|
||||||
'hover': ['hover'],
|
'hover': ['highlight'],
|
||||||
},
|
},
|
||||||
'calendar_previous': {
|
'calendar_previous': {
|
||||||
'default': ['foreground'],
|
'default': ['foreground'],
|
||||||
'hover': ['hover'],
|
'hover': ['highlight'],
|
||||||
},
|
},
|
||||||
'transparent': {
|
'transparent': {
|
||||||
'default': [],
|
'default': [],
|
||||||
},
|
},
|
||||||
'hmovetoolbar': {
|
'hmovetoolbar': {
|
||||||
'default': ['disabled'],
|
'default': ['midtone-light'],
|
||||||
},
|
},
|
||||||
'vmovetoolbar': {
|
'vmovetoolbar': {
|
||||||
'default': ['disabled'],
|
'default': ['midtone-light'],
|
||||||
},
|
},
|
||||||
'hseptoolbar': {
|
'hseptoolbar': {
|
||||||
'default': ['disabled'],
|
'default': ['midtone-light'],
|
||||||
},
|
},
|
||||||
'vseptoolbar': {
|
'vseptoolbar': {
|
||||||
'default': ['disabled'],
|
'default': ['midtone-light'],
|
||||||
},
|
},
|
||||||
'sizegrip': {
|
'sizegrip': {
|
||||||
'default': ['disabled'],
|
'default': ['midtone-light'],
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -149,23 +163,48 @@ def replace(contents, colors, color_map):
|
||||||
contents = contents.replace(sub, color_map[color])
|
contents = contents.replace(sub, color_map[color])
|
||||||
return contents
|
return contents
|
||||||
|
|
||||||
def configure_assets(style):
|
def configure_icons(style):
|
||||||
'''Configure assets for a given style.'''
|
'''Configure icons for a given style.'''
|
||||||
|
|
||||||
os.makedirs(f'{home}/{style}', exist_ok=True)
|
|
||||||
color_map = colors_map[style]
|
color_map = colors_map[style]
|
||||||
for base_image, extensions in assets.items():
|
for icon, extensions in icons.items():
|
||||||
template = f'{home}/assets/{base_image}.svg.in'
|
template = f'{home}/template/{icon}.svg.in'
|
||||||
template_contents = open(template).read()
|
template_contents = open(template).read()
|
||||||
for extension, colors in extensions.items():
|
for extension, colors in extensions.items():
|
||||||
contents = replace(template_contents, colors, color_map)
|
contents = replace(template_contents, colors, color_map)
|
||||||
if extension == 'default':
|
if extension == 'default':
|
||||||
filename = f'{home}/{style}/{base_image}.svg'
|
filename = f'{home}/{style}/{icon}.svg'
|
||||||
else:
|
else:
|
||||||
filename = f'{home}/{style}/{base_image}_{extension}.svg'
|
filename = f'{home}/{style}/{icon}_{extension}.svg'
|
||||||
with open(filename, 'w') as file:
|
with open(filename, 'w') as file:
|
||||||
file.write(contents)
|
file.write(contents)
|
||||||
|
|
||||||
|
def configure_stylesheet(style):
|
||||||
|
'''Configure the stylesheet for a given style.'''
|
||||||
|
|
||||||
|
color_map = colors_map[style]
|
||||||
|
contents = open(f'{home}/template/stylesheet.qss.in').read()
|
||||||
|
for key, color in color_map.items():
|
||||||
|
contents = contents.replace(f'^{key}^', color)
|
||||||
|
contents = contents.replace('^style^', style)
|
||||||
|
with open(f'{home}/{style}/stylesheet.qss', 'w') as file:
|
||||||
|
file.write(contents)
|
||||||
|
|
||||||
|
def configure_style(style):
|
||||||
|
'''Configure the icons and stylesheet for a given style.'''
|
||||||
|
|
||||||
|
os.makedirs(f'{home}/{style}', exist_ok=True)
|
||||||
|
configure_icons(style)
|
||||||
|
configure_stylesheet(style)
|
||||||
|
|
||||||
|
def configure(styles, resource):
|
||||||
|
'''Configure all styles and write the files to a QRC file.'''
|
||||||
|
|
||||||
|
for style in styles:
|
||||||
|
configure_style(style)
|
||||||
|
|
||||||
if __name__ == '__main__':
|
if __name__ == '__main__':
|
||||||
configure_assets('dark')
|
# TODO(ahuszagh) Replace with argparse values.
|
||||||
|
# Also need to parse from JSON.
|
||||||
|
configure(['dark'], None)
|
||||||
#configure('light')
|
#configure('light')
|
||||||
|
|
|
@ -61,12 +61,6 @@ QWidget:disabled
|
||||||
background-color: #31363b;
|
background-color: #31363b;
|
||||||
}
|
}
|
||||||
|
|
||||||
QGroupBox QWidget
|
|
||||||
{
|
|
||||||
}
|
|
||||||
|
|
||||||
/*margin-right: 1em;*/
|
|
||||||
|
|
||||||
QCheckBox
|
QCheckBox
|
||||||
{
|
{
|
||||||
spacing: 0.23em;
|
spacing: 0.23em;
|
||||||
|
@ -78,7 +72,7 @@ QCheckBox
|
||||||
|
|
||||||
QCheckBox:disabled
|
QCheckBox:disabled
|
||||||
{
|
{
|
||||||
color: #9ea0a3;
|
color: #b0b0b0;
|
||||||
}
|
}
|
||||||
|
|
||||||
QGroupBox
|
QGroupBox
|
||||||
|
@ -393,9 +387,9 @@ QScrollBar:horizontal
|
||||||
{
|
{
|
||||||
height: 0.65em;
|
height: 0.65em;
|
||||||
margin: 0.13em 0.65em 0.13em 0.65em;
|
margin: 0.13em 0.65em 0.13em 0.65em;
|
||||||
border: 0.09em transparent #2A2929;
|
border: 0.09em transparent #232629;
|
||||||
border-radius: 0.17em;
|
border-radius: 0.17em;
|
||||||
background-color: #2A2929;
|
background-color: #232629;
|
||||||
}
|
}
|
||||||
|
|
||||||
QScrollBar:horizontal:hover
|
QScrollBar:horizontal:hover
|
||||||
|
@ -464,10 +458,10 @@ QScrollBar::sub-page:horizontal
|
||||||
|
|
||||||
QScrollBar:vertical
|
QScrollBar:vertical
|
||||||
{
|
{
|
||||||
background-color: #2A2929;
|
background-color: #232629;
|
||||||
width: 0.65em;
|
width: 0.65em;
|
||||||
margin: 0.65em 0.13em 0.65em 0.13em;
|
margin: 0.65em 0.13em 0.65em 0.13em;
|
||||||
border: 0.04em transparent #2A2929;
|
border: 0.04em transparent #232629;
|
||||||
border-radius: 0.17em;
|
border-radius: 0.17em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -544,7 +538,7 @@ QTextEdit
|
||||||
|
|
||||||
QPlainTextEdit
|
QPlainTextEdit
|
||||||
{
|
{
|
||||||
background-color: #232629;;
|
background-color: #232629;
|
||||||
color: #eff0f1;
|
color: #eff0f1;
|
||||||
border-radius: 0.09em;
|
border-radius: 0.09em;
|
||||||
border: 0.04em solid #76797c;
|
border: 0.04em solid #76797c;
|
||||||
|
@ -612,7 +606,6 @@ QFrame[frameShape] QAbstractItemView:hover
|
||||||
|
|
||||||
QToolBar
|
QToolBar
|
||||||
{
|
{
|
||||||
border: 0.09em transparent #393838;
|
|
||||||
background: 0.09em solid #31363b;
|
background: 0.09em solid #31363b;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
spacing: 0.2em;
|
spacing: 0.2em;
|
||||||
|
@ -653,7 +646,12 @@ QToolBar:horizontal QToolButton
|
||||||
QPushButton
|
QPushButton
|
||||||
{
|
{
|
||||||
color: #eff0f1;
|
color: #eff0f1;
|
||||||
background-color: qlineargradient(x1: 0.5, y1: 0.5 x2: 0.5, y2: 1, stop: 0 #3b4045, stop: 0.5 #31363b);
|
background-color: qlineargradient(
|
||||||
|
x1: 0.5, y1: 0.5
|
||||||
|
x2: 0.5, y2: 1,
|
||||||
|
stop: 0 #3b4045,
|
||||||
|
stop: 0.5 #31363b
|
||||||
|
);
|
||||||
border-width: 0.04em;
|
border-width: 0.04em;
|
||||||
border-color: #76797c;
|
border-color: #76797c;
|
||||||
border-style: solid;
|
border-style: solid;
|
||||||
|
@ -692,7 +690,7 @@ QPushButton:disabled
|
||||||
|
|
||||||
QPushButton:focus
|
QPushButton:focus
|
||||||
{
|
{
|
||||||
color: white;
|
color: #ffffff;
|
||||||
}
|
}
|
||||||
|
|
||||||
QPushButton:pressed
|
QPushButton:pressed
|
||||||
|
@ -714,19 +712,29 @@ QComboBox
|
||||||
QPushButton:checked
|
QPushButton:checked
|
||||||
{
|
{
|
||||||
background-color: #76797c;
|
background-color: #76797c;
|
||||||
border-color: #6A6969;
|
border-color: #626568;
|
||||||
}
|
}
|
||||||
|
|
||||||
QPushButton:hover
|
QPushButton:hover
|
||||||
{
|
{
|
||||||
background-color: qlineargradient(x1: 0.5, y1: 0.5 x2: 0.5, y2: 1, stop: 0 #454a4f, stop: 0.5 #3b4045);
|
background-color: qlineargradient(
|
||||||
|
x1: 0.5, y1: 0.5
|
||||||
|
x2: 0.5, y2: 1,
|
||||||
|
stop: 0 #454a4f,
|
||||||
|
stop: 0.5 #3b4045
|
||||||
|
);
|
||||||
border: 0.04em solid #3daee9;
|
border: 0.04em solid #3daee9;
|
||||||
color: #eff0f1;
|
color: #eff0f1;
|
||||||
}
|
}
|
||||||
|
|
||||||
QPushButton:checked:hover
|
QPushButton:checked:hover
|
||||||
{
|
{
|
||||||
background-color: qlineargradient(x1: 0.5, y1: 0.5 x2: 0.5, y2: 1, stop: 0 #808386, stop: 0.5 #76797c);
|
background-color: qlineargradient(
|
||||||
|
x1: 0.5, y1: 0.5
|
||||||
|
x2: 0.5, y2: 1,
|
||||||
|
stop: 0 #8a8d8f,
|
||||||
|
stop: 0.5 #76797c
|
||||||
|
);
|
||||||
border: 0.04em solid #3daee9;
|
border: 0.04em solid #3daee9;
|
||||||
color: #eff0f1;
|
color: #eff0f1;
|
||||||
}
|
}
|
||||||
|
@ -803,13 +811,8 @@ QAbstractSpinBox
|
||||||
background-color: #232629;
|
background-color: #232629;
|
||||||
color: #eff0f1;
|
color: #eff0f1;
|
||||||
border-radius: 0.09em;
|
border-radius: 0.09em;
|
||||||
min-width: 2.6em;
|
min-width: 3em;
|
||||||
min-height: 1em;
|
min-height: 1em;
|
||||||
margin: 0.9em;
|
|
||||||
margin-left: 2.3em;
|
|
||||||
/* To deal with the padding of the arrows */
|
|
||||||
padding-left: 0.8em;
|
|
||||||
padding-right: 0.8em;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
QAbstractSpinBox:hover
|
QAbstractSpinBox:hover
|
||||||
|
@ -821,65 +824,59 @@ QAbstractSpinBox:up-button,
|
||||||
QAbstractSpinBox:up-button:hover
|
QAbstractSpinBox:up-button:hover
|
||||||
{
|
{
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
|
subcontrol-origin: padding;
|
||||||
subcontrol-position: center right;
|
subcontrol-position: center right;
|
||||||
|
padding-right: 0.1em;
|
||||||
|
width: 0.8em;
|
||||||
|
height: 0.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
QAbstractSpinBox:down-button,
|
QAbstractSpinBox:down-button,
|
||||||
QAbstractSpinBox:down-button:hover
|
QAbstractSpinBox:down-button:hover
|
||||||
{
|
{
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
|
subcontrol-origin: padding;
|
||||||
subcontrol-position: center left;
|
subcontrol-position: center left;
|
||||||
|
padding-left: 0.1em;
|
||||||
|
width: 0.8em;
|
||||||
|
height: 0.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
QAbstractSpinBox::up-arrow
|
QAbstractSpinBox::up-arrow
|
||||||
{
|
{
|
||||||
border-image: url(:/dark/up_arrow.svg);
|
border-image: url(:/dark/up_arrow.svg);
|
||||||
width: 0.8em;
|
|
||||||
height: 0.5em;
|
|
||||||
margin-right: 0.8em;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
QAbstractSpinBox::up-arrow:disabled,
|
QAbstractSpinBox::up-arrow:disabled,
|
||||||
QAbstractSpinBox::up-arrow:off
|
QAbstractSpinBox::up-arrow:off
|
||||||
{
|
{
|
||||||
border-image: url(:/dark/up_arrow_disabled.svg);
|
border-image: url(:/dark/up_arrow_disabled.svg);
|
||||||
width: 0.8em;
|
|
||||||
height: 0.5em;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
QAbstractSpinBox::up-arrow:hover
|
QAbstractSpinBox::up-arrow:hover
|
||||||
{
|
{
|
||||||
border-image: url(:/dark/up_arrow_hover.svg);
|
border-image: url(:/dark/up_arrow_hover.svg);
|
||||||
width: 0.8em;
|
|
||||||
height: 0.5em;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
QAbstractSpinBox::down-arrow
|
QAbstractSpinBox::down-arrow
|
||||||
{
|
{
|
||||||
border-image: url(:/dark/down_arrow.svg);
|
border-image: url(:/dark/down_arrow.svg);
|
||||||
width: 0.8em;
|
|
||||||
height: 0.5em;
|
|
||||||
margin-left: 0.8em;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
QAbstractSpinBox::down-arrow:disabled,
|
QAbstractSpinBox::down-arrow:disabled,
|
||||||
QAbstractSpinBox::down-arrow:off
|
QAbstractSpinBox::down-arrow:off
|
||||||
{
|
{
|
||||||
border-image: url(:/dark/down_arrow_disabled.svg);
|
border-image: url(:/dark/down_arrow_disabled.svg);
|
||||||
width: 0.8em;
|
|
||||||
height: 0.5em;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
QAbstractSpinBox::down-arrow:hover
|
QAbstractSpinBox::down-arrow:hover
|
||||||
{
|
{
|
||||||
border-image: url(:/dark/down_arrow_hover.svg);
|
border-image: url(:/dark/down_arrow_hover.svg);
|
||||||
width: 0.8em;
|
|
||||||
height: 0.5em;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
QDoubleSpinBox
|
QDoubleSpinBox
|
||||||
{
|
{
|
||||||
min-width: 5em;
|
min-width: 4em;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -1244,7 +1241,7 @@ QTabBar QToolButton::left-arrow:disabled
|
||||||
QDockWidget
|
QDockWidget
|
||||||
{
|
{
|
||||||
background: #31363b;
|
background: #31363b;
|
||||||
border: 0.09em solid #403F3F;
|
border: 0.09em solid #54575B;
|
||||||
titlebar-close-icon: url(:/dark/transparent.svg);
|
titlebar-close-icon: url(:/dark/transparent.svg);
|
||||||
titlebar-normal-icon: url(:/dark/transparent.svg);
|
titlebar-normal-icon: url(:/dark/transparent.svg);
|
||||||
}
|
}
|
||||||
|
@ -1415,7 +1412,7 @@ QSlider::handle:vertical
|
||||||
QSlider::groove:horizontal,
|
QSlider::groove:horizontal,
|
||||||
QSlider::groove:vertical
|
QSlider::groove:vertical
|
||||||
{
|
{
|
||||||
background: #565a5e;
|
background: #54575B;
|
||||||
border: 0em solid #31363b;
|
border: 0em solid #31363b;
|
||||||
border-radius: 0.19em;
|
border-radius: 0.19em;
|
||||||
}
|
}
|
||||||
|
@ -1586,19 +1583,29 @@ QAbstractItemView::item:pressed
|
||||||
|
|
||||||
QAbstractItemView::item:selected:!active
|
QAbstractItemView::item:selected:!active
|
||||||
{
|
{
|
||||||
background: rgba(61, 173, 232, 0.3);
|
background: rgba(61, 173, 232, 0.1);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Use background with qlineargradient to avoid ugly border on widget. */
|
/* Use background with qlineargradient to avoid ugly border on widget. */
|
||||||
QAbstractItemView::item:selected:active
|
QAbstractItemView::item:selected:active
|
||||||
{
|
{
|
||||||
background: qlineargradient(x1: 0.5, y1: 0.5 x2: 0.5, y2: 1, stop: 0 #2a79a3, stop: 1 #2a79a3);
|
background: qlineargradient(
|
||||||
|
x1: 0.5, y1: 0.5
|
||||||
|
x2: 0.5, y2: 1,
|
||||||
|
stop: 0 #2a79a3,
|
||||||
|
stop: 1 #2a79a3
|
||||||
|
);
|
||||||
color: #eff0f1;
|
color: #eff0f1;
|
||||||
}
|
}
|
||||||
|
|
||||||
QAbstractItemView::item:selected:hover
|
QAbstractItemView::item:selected:hover
|
||||||
{
|
{
|
||||||
background: qlineargradient(x1: 0.5, y1: 0.5 x2: 0.5, y2: 1, stop: 0 #369cd1, stop: 1 #369cd1);
|
background: qlineargradient(
|
||||||
|
x1: 0.5, y1: 0.5
|
||||||
|
x2: 0.5, y2: 1,
|
||||||
|
stop: 0 #369cd1,
|
||||||
|
stop: 1 #369cd1
|
||||||
|
);
|
||||||
color: #eff0f1;
|
color: #eff0f1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -1646,7 +1653,7 @@ QHeaderView::section::horizontal
|
||||||
|
|
||||||
QHeaderView::section:checked
|
QHeaderView::section:checked
|
||||||
{
|
{
|
||||||
color: white;
|
color: #ffffff;
|
||||||
background-color: #334e5e;
|
background-color: #334e5e;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -1719,8 +1726,8 @@ QToolBox::tab:hover
|
||||||
|
|
||||||
QSplitter::handle
|
QSplitter::handle
|
||||||
{
|
{
|
||||||
border: 0.09em solid #4a4a4a;
|
border: 0.09em solid #54575B;
|
||||||
background: -0.5em solid #4a4a4a;
|
background: -0.5em solid #54575B;
|
||||||
max-width: 0em;
|
max-width: 0em;
|
||||||
max-height: 0em;
|
max-height: 0em;
|
||||||
}
|
}
|
|
@ -506,7 +506,7 @@ def main(argv=None):
|
||||||
|
|
||||||
# setup stylesheet
|
# setup stylesheet
|
||||||
if args.stylesheet != 'native':
|
if args.stylesheet != 'native':
|
||||||
file = QtCore.QFile(f':/{args.stylesheet}.qss')
|
file = QtCore.QFile(f':/{args.stylesheet}/stylesheet.qss')
|
||||||
file.open(QtCore.QFile.ReadOnly | QtCore.QFile.Text)
|
file.open(QtCore.QFile.ReadOnly | QtCore.QFile.Text)
|
||||||
stream = QtCore.QTextStream(file)
|
stream = QtCore.QTextStream(file)
|
||||||
app.setStyleSheet(stream.readAll())
|
app.setStyleSheet(stream.readAll())
|
||||||
|
|
Before Width: | Height: | Size: 517 B After Width: | Height: | Size: 517 B |
Before Width: | Height: | Size: 211 B After Width: | Height: | Size: 211 B |
Before Width: | Height: | Size: 186 B After Width: | Height: | Size: 186 B |
Before Width: | Height: | Size: 186 B After Width: | Height: | Size: 186 B |
Before Width: | Height: | Size: 245 B After Width: | Height: | Size: 245 B |
Before Width: | Height: | Size: 529 B After Width: | Height: | Size: 529 B |
Before Width: | Height: | Size: 498 B After Width: | Height: | Size: 498 B |
Before Width: | Height: | Size: 501 B After Width: | Height: | Size: 501 B |
Before Width: | Height: | Size: 263 B After Width: | Height: | Size: 263 B |
Before Width: | Height: | Size: 421 B After Width: | Height: | Size: 421 B |
Before Width: | Height: | Size: 195 B After Width: | Height: | Size: 195 B |
Before Width: | Height: | Size: 988 B After Width: | Height: | Size: 988 B |
Before Width: | Height: | Size: 498 B After Width: | Height: | Size: 498 B |
Before Width: | Height: | Size: 151 B After Width: | Height: | Size: 151 B |
Before Width: | Height: | Size: 93 B After Width: | Height: | Size: 93 B |
Before Width: | Height: | Size: 501 B After Width: | Height: | Size: 501 B |
Before Width: | Height: | Size: 164 B After Width: | Height: | Size: 164 B |
Before Width: | Height: | Size: 117 B After Width: | Height: | Size: 117 B |
Before Width: | Height: | Size: 498 B After Width: | Height: | Size: 498 B |
Before Width: | Height: | Size: 276 B After Width: | Height: | Size: 276 B |
Before Width: | Height: | Size: 30 B After Width: | Height: | Size: 30 B |
Before Width: | Height: | Size: 197 B After Width: | Height: | Size: 197 B |
Before Width: | Height: | Size: 257 B After Width: | Height: | Size: 257 B |
Before Width: | Height: | Size: 490 B After Width: | Height: | Size: 490 B |
Before Width: | Height: | Size: 124 B After Width: | Height: | Size: 124 B |
Before Width: | Height: | Size: 151 B After Width: | Height: | Size: 151 B |
Before Width: | Height: | Size: 93 B After Width: | Height: | Size: 93 B |
22
test.py
|
@ -161,7 +161,7 @@ def main(argv=None):
|
||||||
|
|
||||||
# setup stylesheet
|
# setup stylesheet
|
||||||
if args.stylesheet != 'native':
|
if args.stylesheet != 'native':
|
||||||
file = QtCore.QFile(f':/{args.stylesheet}.qss')
|
file = QtCore.QFile(f':/{args.stylesheet}/stylesheet.qss')
|
||||||
file.open(QtCore.QFile.ReadOnly | QtCore.QFile.Text)
|
file.open(QtCore.QFile.ReadOnly | QtCore.QFile.Text)
|
||||||
stream = QtCore.QTextStream(file)
|
stream = QtCore.QTextStream(file)
|
||||||
app.setStyleSheet(stream.readAll())
|
app.setStyleSheet(stream.readAll())
|
||||||
|
@ -262,12 +262,24 @@ def main(argv=None):
|
||||||
window.setStatusBar(child)
|
window.setStatusBar(child)
|
||||||
elif args.widget == 'spinbox':
|
elif args.widget == 'spinbox':
|
||||||
layout_type = 'horizontal'
|
layout_type = 'horizontal'
|
||||||
child = QtWidgets.QSpinBox(window)
|
child = []
|
||||||
child.setValue(10);
|
spin1 = QtWidgets.QSpinBox(window)
|
||||||
|
spin1.setValue(10)
|
||||||
|
child.append(spin1)
|
||||||
|
spin2 = QtWidgets.QSpinBox(window)
|
||||||
|
spin2.setValue(10)
|
||||||
|
spin2.setEnabled(False)
|
||||||
|
child.append(spin2)
|
||||||
elif args.widget == 'double_spinbox':
|
elif args.widget == 'double_spinbox':
|
||||||
layout_type = 'horizontal'
|
layout_type = 'horizontal'
|
||||||
child = QtWidgets.QDoubleSpinBox(window)
|
child = []
|
||||||
child.setValue(10.5);
|
spin1 = QtWidgets.QDoubleSpinBox(window)
|
||||||
|
spin1.setValue(10.5)
|
||||||
|
child.append(spin1)
|
||||||
|
spin2 = QtWidgets.QDoubleSpinBox(window)
|
||||||
|
spin2.setValue(10.5)
|
||||||
|
spin2.setEnabled(False)
|
||||||
|
child.append(spin2)
|
||||||
elif args.widget == 'combobox':
|
elif args.widget == 'combobox':
|
||||||
layout_type = 'horizontal'
|
layout_type = 'horizontal'
|
||||||
child = []
|
child = []
|
||||||
|
|