From 2767bc1a54410ab6f9437ec037dd3602c4483fe6 Mon Sep 17 00:00:00 2001 From: Ingrid Budau Date: Fri, 5 Nov 2021 16:01:45 +0100 Subject: Initial PoC of new settings design. The following commit contains updates of CSS and a bit of JS: - font update - lists are represented as buttons - color update - buttons work with f hint search --- qutebrowser/html/settings.html | 72 +++++++++++++++++++++++++++++++++--------- 1 file changed, 57 insertions(+), 15 deletions(-) diff --git a/qutebrowser/html/settings.html b/qutebrowser/html/settings.html index 44824eeac..4c42336c2 100644 --- a/qutebrowser/html/settings.html +++ b/qutebrowser/html/settings.html @@ -10,25 +10,42 @@ var cset = function(option, value) { xhr.open("GET", url); xhr.send(); } + +let configVal; +let inputId; +let input; +let currentVal; {% endblock %} {% block style %} -table { border: 1px solid grey; border-collapse: collapse; } +table { border: hidden; border-spacing: 10px; } +tbody tr:nth-child(odd) { background: #eaf4fb; } pre { margin: 2px; } -th, td { border: 1px solid grey; padding: 0px 5px; } -th { background: lightgrey; } +th, td { border: hidden; } +th { background: #a6dfff; font-weight: normal; padding: 10px; text-align: left; + border-radius: 5px; font-size: 1.5rem; color: #084c88; } +td { padding: 5px 5px; } th pre { color: grey; text-align: left; } -input { width: 98%; } -.setting { width: 75%; } +input { width: 98%; font-size: 0.9rem; font-family: DejaVu, serif; box-sizing: border-box; + border-radius: 4px; border: 1px solid #01cdd0; padding: 8px; } +input:focus { outline: none; border: 2px solid #7a589ea6; } +.setting { width: 60%; } +input[type="radio"] { position: absolute; opacity: 1%; width: min-content; margin: 0; } +.valid_value { text-align: center; } +label { display: inline-flex; ; cursor: pointer; position: relative; + background-color: #454545; color: white; padding: 5px 10px; + border-radius: 5px; margin-bottom: 2px; } +input[type="radio"]:checked + label { background-color: #a6dfff; color: #084c88; } .value { width: 25%; text-align: center; } .noscript, .noscript-text { color:red; } .noscript-text { margin-bottom: 5cm; } -.option_description { margin: .5ex 0; color: grey; font-size: 80%; font-style: italic; white-space: pre-line; } +.option_description { margin: .5ex 0; color: grey; font-size: 80%; font-style: italic; + white-space: pre-line; } +.current-setting { font-family: monospace; font-size: 1.2rem; } {% endblock %} {% block content %} -

{{ title }}

@@ -37,18 +54,43 @@ input { width: 98%; } {% for option in configdata.DATA.values()|sort(attribute='name') if not option.no_autoconfig %} - - + {% if option.typ.valid_values is not none %} + + {% else %} + + {% endif %} {% endfor %}
Setting
{{ option.name }} (Current: {{ confget(option.name) | string |truncate(100) }}) + {{ option.name }} (Current: {{ confget(option.name) | string |truncate(100) }}) {% if option.description %}

{{ option.description|e }}

{% endif %} 		- - - + {% for value in option.typ.valid_values.values %} + + + + {% endfor %} + + + +
-- cgit v1.2.3-54-g00ecf From d379bebafd31b08326df62102dec295b1eb66474 Mon Sep 17 00:00:00 2001 From: Ingrid Budau Date: Tue, 9 Nov 2021 08:49:46 +0100 Subject: Refactore JS function which checks the input with the configured value --- qutebrowser/html/settings.html | 29 +++++++++++++---------------- 1 file changed, 13 insertions(+), 16 deletions(-) diff --git a/qutebrowser/html/settings.html b/qutebrowser/html/settings.html index 4c42336c2..9fc478565 100644 --- a/qutebrowser/html/settings.html +++ b/qutebrowser/html/settings.html @@ -11,10 +11,14 @@ var cset = function(option, value) { xhr.send(); } -let configVal; -let inputId; -let input; -let currentVal; +function checkInput(optionName, loopIndex) { + // Checks the input which has the configured value + + let inputId = `input-${optionName}-${loopIndex}` + let input = document.getElementById(inputId) + + input.checked = true +} {% endblock %} {% block style %} @@ -68,18 +72,11 @@ input[type="radio"]:checked + label { background-color: #a6dfff; color: #084c88; - + {% if confget(option.name) == value %} + + {% endif %} {% endfor %} {% else %} -- cgit v1.2.3-54-g00ecf From 259907158906ed6ca3403370091bf463745c494e Mon Sep 17 00:00:00 2001 From: Ingrid Budau Date: Tue, 9 Nov 2021 14:35:31 +0100 Subject: Format CSS --- qutebrowser/html/settings.html | 148 ++++++++++++++++++++++++++++++++--------- 1 file changed, 118 insertions(+), 30 deletions(-) diff --git a/qutebrowser/html/settings.html b/qutebrowser/html/settings.html index 9fc478565..5cd09d956 100644 --- a/qutebrowser/html/settings.html +++ b/qutebrowser/html/settings.html @@ -22,30 +22,116 @@ function checkInput(optionName, loopIndex) { {% endblock %} {% block style %} -table { border: hidden; border-spacing: 10px; } -tbody tr:nth-child(odd) { background: #eaf4fb; } -pre { margin: 2px; } -th, td { border: hidden; } -th { background: #a6dfff; font-weight: normal; padding: 10px; text-align: left; - border-radius: 5px; font-size: 1.5rem; color: #084c88; } -td { padding: 5px 5px; } -th pre { color: grey; text-align: left; } -input { width: 98%; font-size: 0.9rem; font-family: DejaVu, serif; box-sizing: border-box; - border-radius: 4px; border: 1px solid #01cdd0; padding: 8px; } -input:focus { outline: none; border: 2px solid #7a589ea6; } -.setting { width: 60%; } -input[type="radio"] { position: absolute; opacity: 1%; width: min-content; margin: 0; } -.valid_value { text-align: center; } -label { display: inline-flex; ; cursor: pointer; position: relative; - background-color: #454545; color: white; padding: 5px 10px; - border-radius: 5px; margin-bottom: 2px; } -input[type="radio"]:checked + label { background-color: #a6dfff; color: #084c88; } -.value { width: 25%; text-align: center; } -.noscript, .noscript-text { color:red; } -.noscript-text { margin-bottom: 5cm; } -.option_description { margin: .5ex 0; color: grey; font-size: 80%; font-style: italic; - white-space: pre-line; } -.current-setting { font-family: monospace; font-size: 1.2rem; } +table { + border-spacing: 10px; +} + +tbody tr:nth-child(odd) { + background: #eaf4fb; +} + +pre { + margin: 2px; +} + +th { + padding: 10px; + border-radius: 5px; + background: #a6dfff; + text-align: left; + font-weight: normal; + font-size: 1.5rem; + color: #084c88; +} + +td { + padding: 5px 5px; +} + +th pre { + color: grey; + text-align: left; +} + +input { + padding: 8px; + width: 98%; + box-sizing: border-box; + border-radius: 4px; + border: 1px solid #01cdd0; + font-size: 0.9rem; + font-family: DejaVu, serif; +} + +input:focus { + outline: none; + border: 2px solid #7a589ea6; +} + +input[type="radio"] { + position: absolute; + opacity: 1%; + width: min-content; + margin: 0; +} + +label { + display: inline-flex; + cursor: pointer; + margin-bottom: 2px; + padding: 5px 10px; + border-radius: 5px; + background-color: #454545; + color: white; +} + +input[type="radio"]:checked + label { + background-color: #a6dfff; + color: #084c88; +} + +.setting { + width: 60%; +} + +.value { + width: 25%; + text-align: center; +} + +.valid_value { + display: flex; + flex-wrap: wrap; + justify-content: center; + text-align: center; +} + +.noscript, .noscript-text { + color: red; +} + +.noscript-text { + margin-bottom: 5cm; +} + +.option_description { + margin: .5ex 0; + color: grey; + font-size: 80%; + font-style: italic; + white-space: pre-line; +} + +.current-setting { + font-size: 1.2rem; + font-family: monospace; +} + +.radio-button { + position: relative; + display: flex; + margin: 5px; +} {% endblock %} {% block content %} @@ -66,12 +152,14 @@ input[type="radio"]:checked + label { background-color: #a6dfff; color: #084c88; {% if option.typ.valid_values is not none %} {% for value in option.typ.valid_values.values %} - - +
+ + +
{% if confget(option.name) == value %} - {% endif %} + {% endfor %} {% else %} -- cgit v1.2.3-54-g00ecf From 3ace60c93b008d791fcb38d5378813f9f5f38a66 Mon Sep 17 00:00:00 2001 From: Ingrid Budau Date: Tue, 30 Nov 2021 12:15:17 +0100 Subject: Hide radio button using CSS `appearance` property - Hide radio button using the property `-webkit-appearance: none;` instead of `opacity` - It is also supported on older QtWebEngine version 5.12 --- qutebrowser/html/settings.html | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/qutebrowser/html/settings.html b/qutebrowser/html/settings.html index e89cd6437..dfbc5c168 100644 --- a/qutebrowser/html/settings.html +++ b/qutebrowser/html/settings.html @@ -59,12 +59,12 @@ input:focus { border: 2px solid #7a589ea6; } -/* Hides the radio button */ input[type="radio"] { - position: absolute; - opacity: 1%; + position: absolute; /* Positions the radio button relative to the edges of its containing element */ + -webkit-appearance: none; /* Removes its native styling */ width: min-content; margin: 0; + border: none; } label { @@ -111,7 +111,7 @@ input[type="radio"]:checked + label { } .radio-button { - position: relative; + position: relative; /* The absolutely positioned element inside this tag (the radio button) gets positioned relative to it. */ display: inline-flex; margin: 3px 1px; } -- cgit v1.2.3-54-g00ecf