Initial stylesheet refactoring for new config

This commit is contained in:
Florian Bruhin 2017-06-13 14:38:58 +02:00
parent e2b0fdf8aa
commit 61fe40f4a1
13 changed files with 73 additions and 103 deletions

View File

@ -64,8 +64,8 @@ class DownloadView(QListView):
STYLESHEET = """ STYLESHEET = """
QListView { QListView {
background-color: {{ color['downloads.bg.bar'] }}; background-color: {{ conf.colors.downloads.bar.bg }};
font: {{ font['downloads'] }}; font: {{ conf.fonts.downloads }};
} }
QListView::item { QListView::item {

View File

@ -65,10 +65,10 @@ class HintLabel(QLabel):
STYLESHEET = """ STYLESHEET = """
QLabel { QLabel {
background-color: {{ color['hints.bg'] }}; background-color: {{ conf.colors.hints.bg }};
color: {{ color['hints.fg'] }}; color: {{ conf.colors.hints.fg }};
font: {{ font['hints'] }}; font: {{ conf.fonts.hints }};
border: {{ config.val.hints.border }}; border: {{ conf.hints.border }};
padding-left: -3px; padding-left: -3px;
padding-right: -3px; padding-right: -3px;
} }
@ -108,7 +108,7 @@ class HintLabel(QLabel):
matched = html.escape(matched) matched = html.escape(matched)
unmatched = html.escape(unmatched) unmatched = html.escape(unmatched)
match_color = html.escape(config.val.colors.hints.fg.match) match_color = html.escape(config.val.colors.hints.match.fg)
self.setText('<font color="{}">{}</font>{}'.format( self.setText('<font color="{}">{}</font>{}'.format(
match_color, matched, unmatched)) match_color, matched, unmatched))
self.adjustSize() self.adjustSize()

View File

@ -189,7 +189,7 @@ class CompletionItemDelegate(QStyledItemDelegate):
self._doc.setDefaultTextOption(text_option) self._doc.setDefaultTextOption(text_option)
self._doc.setDefaultStyleSheet(style.get_stylesheet(""" self._doc.setDefaultStyleSheet(style.get_stylesheet("""
.highlight { .highlight {
color: {{ color['completion.match.fg'] }}; color: {{ conf.colors.completion.match.fg }};
} }
""")) """))
self._doc.setDocumentMargin(2) self._doc.setDocumentMargin(2)

View File

@ -57,27 +57,27 @@ class CompletionView(QTreeView):
# don't define that in this stylesheet. # don't define that in this stylesheet.
STYLESHEET = """ STYLESHEET = """
QTreeView { QTreeView {
font: {{ font['completion'] }}; font: {{ conf.fonts.completion.entry }};
background-color: {{ color['completion.bg'] }}; background-color: {{ conf.colors.completion.bg }};
alternate-background-color: {{ color['completion.alternate-bg'] }}; alternate-background-color: {{ conf.colors.completion.alternate_bg }};
outline: 0; outline: 0;
border: 0px; border: 0px;
} }
QTreeView::item:disabled { QTreeView::item:disabled {
background-color: {{ color['completion.category.bg'] }}; background-color: {{ conf.colors.completion.category.bg }};
border-top: 1px solid border-top: 1px solid
{{ color['completion.category.border.top'] }}; {{ conf.colors.completion.category.border.top }};
border-bottom: 1px solid border-bottom: 1px solid
{{ color['completion.category.border.bottom'] }}; {{ conf.colors.completion.category.border.bottom }};
} }
QTreeView::item:selected, QTreeView::item:selected:hover { QTreeView::item:selected, QTreeView::item:selected:hover {
border-top: 1px solid border-top: 1px solid
{{ color['completion.item.selected.border.top'] }}; {{ conf.colors.completion.item.selected.border.top }};
border-bottom: 1px solid border-bottom: 1px solid
{{ color['completion.item.selected.border.bottom'] }}; {{ conf.colors.completion.item.selected.border.bottom }};
background-color: {{ color['completion.item.selected.bg'] }}; background-color: {{ conf.colors.completion.item.selected.bg }};
} }
QTreeView:item::hover { QTreeView:item::hover {
@ -85,14 +85,14 @@ class CompletionView(QTreeView):
} }
QTreeView QScrollBar { QTreeView QScrollBar {
width: {{ config.val.completion.scrollbar_width }}px; width: {{ conf.completion.scrollbar.width }}px;
background: {{ color['completion.scrollbar.bg'] }}; background: {{ conf.colors.completion.scrollbar.bg }};
} }
QTreeView QScrollBar::handle { QTreeView QScrollBar::handle {
background: {{ color['completion.scrollbar.fg'] }}; background: {{ conf.colors.completion.scrollbar.fg }};
border: {{ config.val.completion.scrollbar_padding }}px solid border: {{ conf.completion.scrollbar.padding }}px solid
{{ color['completion.scrollbar.bg'] }}; {{ conf.colors.completion.scrollbar.bg }};
min-height: 10px; min-height: 10px;
} }

View File

@ -1409,7 +1409,7 @@ colors.statusbar.url.success.http.fg:
type: QssColor type: QssColor
desc: Foreground color of the URL in the statusbar on successful load (http). desc: Foreground color of the URL in the statusbar on successful load (http).
colors.statusbar.url.success.https.bg: colors.statusbar.url.success.https.fg:
default: lime default: lime
type: QssColor type: QssColor
desc: Foreground color of the URL in the statusbar on successful load (https). desc: Foreground color of the URL in the statusbar on successful load (https).

View File

@ -40,10 +40,8 @@ def get_stylesheet(template_str):
Return: Return:
The formatted template as string. The formatted template as string.
""" """
colordict = ColorDict(config)
template = jinja2.Template(template_str) template = jinja2.Template(template_str)
return template.render(color=colordict, font=config.section('fonts'), return template.render(conf=config.val)
config=objreg.get('config'))
def set_register_stylesheet(obj): def set_register_stylesheet(obj):
@ -68,32 +66,3 @@ def _update_stylesheet(obj):
get_stylesheet.cache_clear() get_stylesheet.cache_clear()
if not sip.isdeleted(obj): if not sip.isdeleted(obj):
obj.setStyleSheet(get_stylesheet(obj.STYLESHEET)) obj.setStyleSheet(get_stylesheet(obj.STYLESHEET))
class ColorDict:
"""A dict aimed at Qt stylesheet colors."""
def __init__(self, config):
self._config = config
def __getitem__(self, key):
"""Override dict __getitem__.
Args:
key: The key to get from the dict.
Return:
If a value wasn't found, return an empty string.
(Color not defined, so no output in the stylesheet)
else, return the plain value.
"""
val = self._config.get('colors', key)
if isinstance(val, QColor):
# This could happen when accidentally declaring something as
# QtColor instead of Color in the config, and it'd go unnoticed as
# the CSS is invalid then.
raise TypeError("QColor passed to ColorDict!")
else:
return val

View File

@ -22,6 +22,7 @@ th pre { color: grey; text-align: left; }
<noscript><h1 class="noscript">View Only</h1><p class="noscript-text">Changing settings requires javascript to be enabled!</p></noscript> <noscript><h1 class="noscript">View Only</h1><p class="noscript-text">Changing settings requires javascript to be enabled!</p></noscript>
<header><h1>{{ title }}</h1></header> <header><h1>{{ title }}</h1></header>
<table> <table>
<!-- FIXME:conf refactor -->
{% for section in config.DATA %} {% for section in config.DATA %}
<tr><th colspan="2"><h3>{{ section }}</h3><pre>{{ config.SECTION_DESC.get(section)|wordwrap(width=120) }}</pre></th></tr> <tr><th colspan="2"><h3>{{ section }}</h3><pre>{{ config.SECTION_DESC.get(section)|wordwrap(width=120) }}</pre></th></tr>
{% for d, e in config.DATA.get(section).items() %} {% for d, e in config.DATA.get(section).items() %}

View File

@ -41,25 +41,25 @@ class Message(QLabel):
""" """
if level == usertypes.MessageLevel.error: if level == usertypes.MessageLevel.error:
stylesheet += """ stylesheet += """
background-color: {{ color['messages.bg.error'] }}; background-color: {{ conf.colors.messages.error.bg }};
color: {{ color['messages.fg.error'] }}; color: {{ conf.colors.messages.error.fg }};
font: {{ font['messages.error'] }}; font: {{ conf.fonts.messages.error }};
border-bottom: 1px solid {{ color['messages.border.error'] }}; border-bottom: 1px solid {{ conf.colors.messages.error.border }};
""" """
elif level == usertypes.MessageLevel.warning: elif level == usertypes.MessageLevel.warning:
stylesheet += """ stylesheet += """
background-color: {{ color['messages.bg.warning'] }}; background-color: {{ conf.colors.messages.warning.bg }};
color: {{ color['messages.fg.warning'] }}; color: {{ conf.colors.messages.warning.fg }};
font: {{ font['messages.warning'] }}; font: {{ conf.fonts.messages.warning }};
border-bottom: border-bottom:
1px solid {{ color['messages.border.warning'] }}; 1px solid {{ conf.colors.messages.warning.border }};
""" """
elif level == usertypes.MessageLevel.info: elif level == usertypes.MessageLevel.info:
stylesheet += """ stylesheet += """
background-color: {{ color['messages.bg.info'] }}; background-color: {{ conf.colors.messages.info.bg }};
color: {{ color['messages.fg.info'] }}; color: {{ conf.colors.messages.info.fg }};
font: {{ font['messages.info'] }}; font: {{ conf.fonts.messages.info }};
border-bottom: 1px solid {{ color['messages.border.info'] }} border-bottom: 1px solid {{ conf.colors.messages.info.border }}
""" """
else: # pragma: no cover else: # pragma: no cover
raise ValueError("Invalid level {!r}".format(level)) raise ValueError("Invalid level {!r}".format(level))

View File

@ -234,27 +234,27 @@ class PromptContainer(QWidget):
STYLESHEET = """ STYLESHEET = """
QWidget#PromptContainer { QWidget#PromptContainer {
{% if config.val.statusbar.position == 'top' %} {% if conf.statusbar.position == 'top' %}
border-bottom-left-radius: {{ config.val.prompt.radius }}px; border-bottom-left-radius: {{ conf.prompt.radius }}px;
border-bottom-right-radius: {{ config.val.prompt.radius }}px; border-bottom-right-radius: {{ conf.prompt.radius }}px;
{% else %} {% else %}
border-top-left-radius: {{ config.val.prompt.radius }}px; border-top-left-radius: {{ conf.prompt.radius }}px;
border-top-right-radius: {{ config.val.prompt.radius }}px; border-top-right-radius: {{ conf.prompt.radius }}px;
{% endif %} {% endif %}
} }
QWidget { QWidget {
font: {{ font['prompts'] }}; font: {{ conf.fonts.prompts }};
color: {{ color['prompts.fg'] }}; color: {{ conf.colors.prompts.fg }};
background-color: {{ color['prompts.bg'] }}; background-color: {{ conf.colors.prompts.bg }};
} }
QTreeView { QTreeView {
selection-background-color: {{ color['prompts.selected.bg'] }}; selection-background-color: {{ conf.colors.prompts.selected.bg }};
} }
QTreeView::item:selected, QTreeView::item:selected:hover { QTreeView::item:selected, QTreeView::item:selected:hover {
background-color: {{ color['prompts.selected.bg'] }}; background-color: {{ conf.colors.prompts.selected.bg }};
} }
""" """
update_geometry = pyqtSignal() update_geometry = pyqtSignal()

View File

@ -81,21 +81,21 @@ class ColorFlags:
def _generate_stylesheet(): def _generate_stylesheet():
flags = [ flags = [
('private', 'statusbar.{}.private'), ('private', 'statusbar.private'),
('caret', 'statusbar.{}.caret'), ('caret', 'statusbar.caret'),
('caret-selection', 'statusbar.{}.caret-selection'), ('caret-selection', 'statusbar.caret.selection'),
('prompt', 'prompts.{}'), ('prompt', 'prompts'),
('insert', 'statusbar.{}.insert'), ('insert', 'statusbar.insert'),
('command', 'statusbar.{}.command'), ('command', 'statusbar.command'),
('private-command', 'statusbar.{}.command.private'), ('private-command', 'statusbar.command.private'),
] ]
stylesheet = """ stylesheet = """
QWidget#StatusBar, QWidget#StatusBar,
QWidget#StatusBar QLabel, QWidget#StatusBar QLabel,
QWidget#StatusBar QLineEdit { QWidget#StatusBar QLineEdit {
font: {{ font['statusbar'] }}; font: {{ conf.fonts.statusbar }};
background-color: {{ color['statusbar.bg'] }}; background-color: {{ conf.colors.statusbar.normal.bg }};
color: {{ color['statusbar.fg'] }}; color: {{ conf.colors.statusbar.normal.fg }};
} }
""" """
for flag, option in flags: for flag, option in flags:
@ -103,11 +103,11 @@ def _generate_stylesheet():
QWidget#StatusBar[color_flags~="%s"], QWidget#StatusBar[color_flags~="%s"],
QWidget#StatusBar[color_flags~="%s"] QLabel, QWidget#StatusBar[color_flags~="%s"] QLabel,
QWidget#StatusBar[color_flags~="%s"] QLineEdit { QWidget#StatusBar[color_flags~="%s"] QLineEdit {
color: {{ color['%s'] }}; color: {{ conf.colors.%s }};
background-color: {{ color['%s'] }}; background-color: {{ conf.colors.%s }};
} }
""" % (flag, flag, flag, # flake8: disable=S001 """ % (flag, flag, flag, # flake8: disable=S001
option.format('fg'), option.format('bg')) option + '.fg', option + '.bg')
return stylesheet return stylesheet

View File

@ -35,11 +35,11 @@ class Progress(QProgressBar):
border-radius: 0px; border-radius: 0px;
border: 2px solid transparent; border: 2px solid transparent;
background-color: transparent; background-color: transparent;
font: {{ font['statusbar'] }}; font: {{ conf.fonts.statusbar }};
} }
QProgressBar::chunk { QProgressBar::chunk {
background-color: {{ color['statusbar.progress.bg'] }}; background-color: {{ conf.colors.statusbar.progress.bg }};
} }
""" """

View File

@ -53,27 +53,27 @@ class UrlText(textbase.TextBase):
STYLESHEET = """ STYLESHEET = """
QLabel#UrlText[urltype="normal"] { QLabel#UrlText[urltype="normal"] {
color: {{ color['statusbar.url.fg'] }}; color: {{ conf.colors.statusbar.url.fg }};
} }
QLabel#UrlText[urltype="success"] { QLabel#UrlText[urltype="success"] {
color: {{ color['statusbar.url.fg.success'] }}; color: {{ conf.colors.statusbar.url.success.http.fg }};
} }
QLabel#UrlText[urltype="success_https"] { QLabel#UrlText[urltype="success_https"] {
color: {{ color['statusbar.url.fg.success.https'] }}; color: {{ conf.colors.statusbar.url.success.https.fg }};
} }
QLabel#UrlText[urltype="error"] { QLabel#UrlText[urltype="error"] {
color: {{ color['statusbar.url.fg.error'] }}; color: {{ conf.colors.statusbar.url.error.fg }};
} }
QLabel#UrlText[urltype="warn"] { QLabel#UrlText[urltype="warn"] {
color: {{ color['statusbar.url.fg.warn'] }}; color: {{ conf.colors.statusbar.url.warn.fg }};
} }
QLabel#UrlText[urltype="hover"] { QLabel#UrlText[urltype="hover"] {
color: {{ color['statusbar.url.fg.hover'] }}; color: {{ conf.colors.statusbar.url.hover.fg }};
} }
""" """

View File

@ -47,11 +47,11 @@ class KeyHintView(QLabel):
STYLESHEET = """ STYLESHEET = """
QLabel { QLabel {
font: {{ font['keyhint'] }}; font: {{ conf.fonts.keyhint }};
color: {{ color['keyhint.fg'] }}; color: {{ conf.colors.keyhint.fg }};
background-color: {{ color['keyhint.bg'] }}; background-color: {{ conf.colors.keyhint.bg }};
padding: 6px; padding: 6px;
{% if config.val.statusbar.position == 'top' %} {% if conf.statusbar.position == 'top' %}
border-bottom-right-radius: 6px; border-bottom-right-radius: 6px;
{% else %} {% else %}
border-top-right-radius: 6px; border-top-right-radius: 6px;
@ -109,7 +109,7 @@ class KeyHintView(QLabel):
# delay so a quickly typed keychain doesn't display hints # delay so a quickly typed keychain doesn't display hints
self._show_timer.setInterval(config.val.keyhint.delay) self._show_timer.setInterval(config.val.keyhint.delay)
self._show_timer.start() self._show_timer.start()
suffix_color = html.escape(config.val.colors.keyhint.fg.suffix) suffix_color = html.escape(config.val.colors.keyhint.suffix.fg)
text = '' text = ''
for key, cmd in bindings: for key, cmd in bindings: