From 02588692debda9bc9b013f4c984d3a4e51f8eadd Mon Sep 17 00:00:00 2001 From: Glenn Date: Wed, 29 Jan 2025 14:00:14 -0800 Subject: [PATCH 01/10] update chevron icons --- hushline/static/css/style.css | 12 ++++++++++++ hushline/static/js/settings-fields.js | 19 +++++++++---------- .../templates/settings/profile-forms.html | 6 +++--- 3 files changed, 24 insertions(+), 13 deletions(-) diff --git a/hushline/static/css/style.css b/hushline/static/css/style.css index 73f87c85e..f4404227d 100644 --- a/hushline/static/css/style.css +++ b/hushline/static/css/style.css @@ -3049,3 +3049,15 @@ strong { font-style: italic; opacity: 0.8; } + +.field-form-toggle .icon { + width: 1.25rem; + height: 1.25rem; + background-size: contain; + background-repeat: no-repeat; + margin-right: .5rem; +} + +.field-form-toggle { + align-items: center; +} diff --git a/hushline/static/js/settings-fields.js b/hushline/static/js/settings-fields.js index d9f29e316..64794788e 100644 --- a/hushline/static/js/settings-fields.js +++ b/hushline/static/js/settings-fields.js @@ -1,15 +1,14 @@ document.addEventListener("DOMContentLoaded", function () { - const arrowClosed = "➤"; - const arrowOpen = "⮟"; - // All field forms start closed document .querySelectorAll(".field-form-content") .forEach(function (fieldContent) { fieldContent.style.display = "none"; }); - document.querySelectorAll(".field-form-arrow").forEach(function (fieldArrow) { - fieldArrow.textContent = arrowClosed; + + // Ensure chevrons start unrotated + document.querySelectorAll(".icon.chevron").forEach(function (chevron) { + chevron.style.transition = "transform 0.2s ease"; }); // Toggle field forms @@ -18,16 +17,16 @@ document.addEventListener("DOMContentLoaded", function () { .forEach(function (fieldToggle) { fieldToggle.addEventListener("click", function () { const fieldContent = fieldToggle.parentElement.querySelector( - ".field-form-content", + ".field-form-content" ); - const fieldArrow = fieldToggle.querySelector(".field-form-arrow"); + const chevron = fieldToggle.querySelector(".icon.chevron"); - if (fieldContent.style.display === "none") { + if (fieldContent.style.display === "none" || !fieldContent.style.display) { fieldContent.style.display = "block"; - fieldArrow.textContent = arrowOpen; + chevron.style.transform = "rotate(90deg)"; // Open state } else { fieldContent.style.display = "none"; - fieldArrow.textContent = arrowClosed; + chevron.style.transform = "rotate(0deg)"; // Closed state } }); }); diff --git a/hushline/templates/settings/profile-forms.html b/hushline/templates/settings/profile-forms.html index ca06afb8b..6e632845e 100644 --- a/hushline/templates/settings/profile-forms.html +++ b/hushline/templates/settings/profile-forms.html @@ -124,7 +124,7 @@

Message Fields

{% for field_form in field_forms %}
- +
Field {{ loop.index }} @@ -155,7 +155,7 @@
- +
Add Field
@@ -167,4 +167,4 @@
-
\ No newline at end of file +
From b778bdf772176266b43c27febb565b9d9bf1f981 Mon Sep 17 00:00:00 2001 From: Glenn Date: Wed, 29 Jan 2025 14:14:36 -0800 Subject: [PATCH 02/10] update child forms --- hushline/static/css/style.css | 13 ++++++++++--- hushline/static/js/settings-fields.js | 6 +++--- hushline/templates/settings/profile-field-form.html | 8 ++++---- 3 files changed, 17 insertions(+), 10 deletions(-) diff --git a/hushline/static/css/style.css b/hushline/static/css/style.css index f4404227d..561e2ad91 100644 --- a/hushline/static/css/style.css +++ b/hushline/static/css/style.css @@ -2998,12 +2998,11 @@ strong { } .fields .choices-container { - margin-left: 2em; - margin-bottom: 0.5em; + margin: 0 0 1rem 0; } .fields .choices-container button { - font-size: 0.8em; + margin-top: 0; } .fields input[type="checkbox"], @@ -3061,3 +3060,11 @@ strong { .field-form-toggle { align-items: center; } + +.choice-item button { + margin-bottom: 1rem; +} + +.fields .choices-container .add-choice { + margin-top: .25rem; +} diff --git a/hushline/static/js/settings-fields.js b/hushline/static/js/settings-fields.js index 64794788e..25b3b9908 100644 --- a/hushline/static/js/settings-fields.js +++ b/hushline/static/js/settings-fields.js @@ -89,9 +89,9 @@ document.addEventListener("DOMContentLoaded", function () { choiceItem.classList.add("choice-item"); choiceItem.innerHTML = ` - - - + + + `; choicesContainer.appendChild(choiceItem); bindChoiceButtons(choiceItem); diff --git a/hushline/templates/settings/profile-field-form.html b/hushline/templates/settings/profile-field-form.html index a3fdaeb9d..98c3d2c4b 100644 --- a/hushline/templates/settings/profile-field-form.html +++ b/hushline/templates/settings/profile-field-form.html @@ -25,9 +25,9 @@
{{ choice.choice.label }} {{ choice.choice(id=choice.choice.id) }} - - - + + +
{% endfor %} @@ -63,4 +63,4 @@ {% endif %} {% endif %} - \ No newline at end of file + From 06ec5771fff755c28e6265c6f330166a348a2e3d Mon Sep 17 00:00:00 2001 From: Glenn Date: Wed, 29 Jan 2025 14:25:07 -0800 Subject: [PATCH 03/10] update delete buttons --- hushline/settings/forms.py | 2 +- hushline/static/css/style.css | 12 ++++++++++-- hushline/templates/settings/profile-field-form.html | 2 +- 3 files changed, 12 insertions(+), 4 deletions(-) diff --git a/hushline/settings/forms.py b/hushline/settings/forms.py index 8bd740e24..ca5f1a8cc 100644 --- a/hushline/settings/forms.py +++ b/hushline/settings/forms.py @@ -306,6 +306,6 @@ class FieldForm(FlaskForm): submit = SubmitField("Add Field", name="add_field", widget=Button()) update = SubmitField("Update Field", name="update_field", widget=Button()) - delete = SubmitField("Delete Field", name="delete_field", widget=Button()) + delete = SubmitField("Delete Field", name="delete_field", widget=Button(), render_kw={"class": "btn-danger"}) move_up = SubmitField("Move Up", name="move_up", widget=Button()) move_down = SubmitField("Move Down", name="move_down", widget=Button()) diff --git a/hushline/static/css/style.css b/hushline/static/css/style.css index 561e2ad91..5dfb0694a 100644 --- a/hushline/static/css/style.css +++ b/hushline/static/css/style.css @@ -3054,7 +3054,7 @@ strong { height: 1.25rem; background-size: contain; background-repeat: no-repeat; - margin-right: .5rem; + margin-right: 0.5rem; } .field-form-toggle { @@ -3066,5 +3066,13 @@ strong { } .fields .choices-container .add-choice { - margin-top: .25rem; + margin-top: 0.25rem; +} + +.field-form-content .field-checkbox input { + margin-bottom: 0.5rem; +} + +#add_field { + margin-top: 1rem; } diff --git a/hushline/templates/settings/profile-field-form.html b/hushline/templates/settings/profile-field-form.html index 98c3d2c4b..c154df164 100644 --- a/hushline/templates/settings/profile-field-form.html +++ b/hushline/templates/settings/profile-field-form.html @@ -54,13 +54,13 @@ {{ field_form.submit }} {% else %} {{ field_form.update }} - {{ field_form.delete }} {% if not is_first %} {{ field_form.move_up }} {% endif %} {% if not is_last %} {{ field_form.move_down }} {% endif %} + {{ field_form.delete }} {% endif %} From 78e2a686c38e80376ece86dc9a680144958b3221 Mon Sep 17 00:00:00 2001 From: Glenn Date: Wed, 29 Jan 2025 14:33:38 -0800 Subject: [PATCH 04/10] reorg fields --- hushline/static/css/style.css | 9 ++++++ .../settings/profile-field-form.html | 31 ++++++++++--------- 2 files changed, 25 insertions(+), 15 deletions(-) diff --git a/hushline/static/css/style.css b/hushline/static/css/style.css index 5dfb0694a..41b4726f5 100644 --- a/hushline/static/css/style.css +++ b/hushline/static/css/style.css @@ -3076,3 +3076,12 @@ strong { #add_field { margin-top: 1rem; } + +.checkbox-group-settings { + margin-bottom: .5rem; +} + +.checkbox-group-settings .group-label { + margin-bottom: .5rem; + font-family: var(--font-sans-bold); +} diff --git a/hushline/templates/settings/profile-field-form.html b/hushline/templates/settings/profile-field-form.html index c154df164..64969ae42 100644 --- a/hushline/templates/settings/profile-field-form.html +++ b/hushline/templates/settings/profile-field-form.html @@ -9,6 +9,22 @@ > {{ field_form.hidden_tag() }} +
+

Field Options

+
+ {{ field_form.encrypted(id='encrypted-' ~ field_form.id.data) }} + {{ field_form.encrypted.label(for='encrypted-' ~ field_form.id.data) }} +
+
+ {{ field_form.required(id='required-' ~ field_form.id.data, class='required-checkbox') }} + {{ field_form.required.label(for='required-' ~ field_form.id.data) }} +
+
+ {{ field_form.enabled(id='enabled-' ~ field_form.id.data) }} + {{ field_form.enabled.label(for='enabled-' ~ field_form.id.data) }} +
+
+
{{ field_form.label.label(for='label-' ~ field_form.id.data) }} {{ field_form.label(id='label-' ~ field_form.id.data, placeholder='Field label') }} @@ -34,21 +50,6 @@
-
- {{ field_form.encrypted(id='encrypted-' ~ field_form.id.data) }} - {{ field_form.encrypted.label(for='encrypted-' ~ field_form.id.data) }} -
- -
- {{ field_form.required(id='required-' ~ field_form.id.data, class='required-checkbox') }} - {{ field_form.required.label(for='required-' ~ field_form.id.data) }} -
- -
- {{ field_form.enabled(id='enabled-' ~ field_form.id.data) }} - {{ field_form.enabled.label(for='enabled-' ~ field_form.id.data) }} -
-
{% if is_new_field %} {{ field_form.submit }} From f8cea20787bb263f342a214a6219a362f6dbd9a2 Mon Sep 17 00:00:00 2001 From: Glenn Date: Wed, 29 Jan 2025 14:50:20 -0800 Subject: [PATCH 05/10] update profile page --- hushline/static/css/style.css | 41 ++++++++++------ hushline/templates/profile.html | 87 +++++++++++++++++---------------- 2 files changed, 70 insertions(+), 58 deletions(-) diff --git a/hushline/static/css/style.css b/hushline/static/css/style.css index 41b4726f5..b3b481226 100644 --- a/hushline/static/css/style.css +++ b/hushline/static/css/style.css @@ -3025,30 +3025,17 @@ strong { } #messageForm .field-group { - padding: 1rem; - margin-bottom: 1rem; + margin-bottom: 0.5rem; border: 1px solid rgba(0, 0, 0, 0.1); border: 1px solid rgba(255, 255, 255, 0.1); } -#messageForm .field-group .label { - margin-bottom: 0.5rem; -} - #messageForm .field-group input, #messageForm .field-group textarea, #messageForm .field-group select { margin-bottom: 0; } -#messageForm .field-group .meta { - margin-left: 0.5rem; - font-size: 0.8125rem; - line-height: 1; - font-style: italic; - opacity: 0.8; -} - .field-form-toggle .icon { width: 1.25rem; height: 1.25rem; @@ -3078,10 +3065,32 @@ strong { } .checkbox-group-settings { - margin-bottom: .5rem; + margin-bottom: 0.5rem; } .checkbox-group-settings .group-label { - margin-bottom: .5rem; + margin-bottom: 0.5rem; font-family: var(--font-sans-bold); } + +label + p.meta { + width: fit-content; + margin: 0; + margin-left: .5rem; +} + +.label { + display: flex; + flex-direction: row; + align-items: baseline; + margin-bottom: 0.5rem; +} + +.label label { + margin-bottom: 0; +} + +#messageForm .helper { + margin-top: 0; + margin-bottom: 1rem; +} diff --git a/hushline/templates/profile.html b/hushline/templates/profile.html index 3afc88c51..41469ab7a 100644 --- a/hushline/templates/profile.html +++ b/hushline/templates/profile.html @@ -107,19 +107,53 @@

{% if user.pgp_key %} {{ form.hidden_tag() }} {% endif %} + + {% if current_user_id == user.id %} + {% if user.pgp_key %} +

+ 🔒 Encrypted fields will be only readable by you. +

+ {% else %} +

+ ⚠️ Your messages will NOT be encrypted. If you expect messages to + contain sensitive information, please + add a public PGP key. +

+ {% endif %} + {% else %} + {% if user.pgp_key %} +

+ 🔒 Encrypted fields will be only readable by + {{ display_name_or_username }}. +

+ {% else %} +

+ ⚠️ Your message will NOT be encrypted. If this message is sensitive, + ask {{ display_name_or_username }} to add a public PGP key. + Here's how they can do it. +

+ {% endif %} + {% endif %} {% for data in field_data %} {% if data['field'].enabled %}
{{ form[data['name']].label(for=data['name']) }} - {% if data['field'].encrypted %} - 🔒 encrypted - {% endif %} {% if data['field'].required %} - required +

Required

{% else %} - optional +

Optional

{% endif %}
@@ -128,8 +162,14 @@

{% else %} {% if data['field'].encrypted %} {{ form[data['name']](id=data['name'], class='form-field encrypted-field', **{'data-label': form[data['name']].label.text}) }} + {% if data['field'].encrypted %} +

🔒 Encrypted

+ {% endif %} {% else %} {{ form[data['name']](id=data['name'], class='form-field', **{'data-label': form[data['name']].label.text}) }} + {% if data['field'].encrypted %} +

🔒 Encrypted

+ {% endif %} {% endif %} {% endif %}

@@ -147,43 +187,6 @@

value="false" /> - {% if current_user_id == user.id %} - {% if user.pgp_key %} -

- 🔒 Encrypted fields will be only readable by you. -

- {% else %} -

- ⚠️ Your messages will NOT be encrypted. If you expect messages to - contain sensitive information, please - add a public PGP key. -

- {% endif %} - {% else %} - {% if user.pgp_key %} -

- 🔒 Encrypted fields will be only readable by - {{ display_name_or_username }}. -

- {% else %} -

- ⚠️ Your message will NOT be encrypted. If this message is sensitive, - ask {{ display_name_or_username }} to add a public PGP key. - Here's how they can do it. -

- {% endif %} - {% endif %} - {% if user.pgp_key %}
From d2a109b083df2c2ef0e287947e3bb21234f16d62 Mon Sep 17 00:00:00 2001 From: Glenn Date: Wed, 29 Jan 2025 14:59:49 -0800 Subject: [PATCH 06/10] remove additional encryption message --- hushline/static/css/style.css | 6 ++++++ hushline/templates/profile.html | 37 --------------------------------- 2 files changed, 6 insertions(+), 37 deletions(-) diff --git a/hushline/static/css/style.css b/hushline/static/css/style.css index b3b481226..781269210 100644 --- a/hushline/static/css/style.css +++ b/hushline/static/css/style.css @@ -3022,6 +3022,7 @@ strong { #messageForm ul { list-style: none; padding: 0; + margin-top: 0; } #messageForm .field-group { @@ -3058,6 +3059,11 @@ strong { .field-form-content .field-checkbox input { margin-bottom: 0.5rem; + margin-left: 0; +} + +.field-group ul li input[type="checkbox"] { + margin-left: 0; } #add_field { diff --git a/hushline/templates/profile.html b/hushline/templates/profile.html index 41469ab7a..dde909aad 100644 --- a/hushline/templates/profile.html +++ b/hushline/templates/profile.html @@ -107,43 +107,6 @@

{% if user.pgp_key %} {{ form.hidden_tag() }} {% endif %} - - {% if current_user_id == user.id %} - {% if user.pgp_key %} -

- 🔒 Encrypted fields will be only readable by you. -

- {% else %} -

- ⚠️ Your messages will NOT be encrypted. If you expect messages to - contain sensitive information, please - add a public PGP key. -

- {% endif %} - {% else %} - {% if user.pgp_key %} -

- 🔒 Encrypted fields will be only readable by - {{ display_name_or_username }}. -

- {% else %} -

- ⚠️ Your message will NOT be encrypted. If this message is sensitive, - ask {{ display_name_or_username }} to add a public PGP key. - Here's how they can do it. -

- {% endif %} - {% endif %} {% for data in field_data %} {% if data['field'].enabled %} From bac1b61128b1975d0a12661d35bd205c1da1000c Mon Sep 17 00:00:00 2001 From: Glenn Date: Wed, 29 Jan 2025 15:03:24 -0800 Subject: [PATCH 07/10] Update profile.html --- hushline/templates/profile.html | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/hushline/templates/profile.html b/hushline/templates/profile.html index dde909aad..6483c6ded 100644 --- a/hushline/templates/profile.html +++ b/hushline/templates/profile.html @@ -113,9 +113,7 @@

{{ form[data['name']].label(for=data['name']) }} - {% if data['field'].required %} -

Required

- {% else %} + {% if not data['field'].required %}

Optional

{% endif %}
From 8a2c4778ecb78f4848eb5f9373c4fab01e80a129 Mon Sep 17 00:00:00 2001 From: Glenn Date: Wed, 29 Jan 2025 15:08:32 -0800 Subject: [PATCH 08/10] type sizes --- hushline/static/css/style.css | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/hushline/static/css/style.css b/hushline/static/css/style.css index 781269210..a6183cab1 100644 --- a/hushline/static/css/style.css +++ b/hushline/static/css/style.css @@ -3062,7 +3062,8 @@ strong { margin-left: 0; } -.field-group ul li input[type="checkbox"] { +.field-group ul li input[type="checkbox"], +.field-group ul li input[type="radio"] { margin-left: 0; } @@ -3100,3 +3101,8 @@ label + p.meta { margin-top: 0; margin-bottom: 1rem; } + +input[type="checkbox"] + label, +input[type="radio"] + label { + font-family: var(--font-sans); +} From 69586807e5fcb7441727512f9d14a1a1feb5e157 Mon Sep 17 00:00:00 2001 From: Glenn Date: Wed, 29 Jan 2025 15:51:46 -0800 Subject: [PATCH 09/10] label length ++ --- hushline/settings/forms.py | 2 +- hushline/static/css/style.css | 14 ++++++++++++-- hushline/templates/profile.html | 4 ++-- 3 files changed, 15 insertions(+), 5 deletions(-) diff --git a/hushline/settings/forms.py b/hushline/settings/forms.py index ca5f1a8cc..d4caa6b34 100644 --- a/hushline/settings/forms.py +++ b/hushline/settings/forms.py @@ -293,7 +293,7 @@ class FieldChoiceForm(Form): class FieldForm(FlaskForm): id = HiddenField() - label = StringField("Label", validators=[DataRequired(), Length(max=50)]) + label = StringField("Label", validators=[DataRequired(), Length(max=500)]) field_type = SelectField( "Field Type", choices=[(field_type.value, field_type.label()) for field_type in FieldType], diff --git a/hushline/static/css/style.css b/hushline/static/css/style.css index a6183cab1..6f890f580 100644 --- a/hushline/static/css/style.css +++ b/hushline/static/css/style.css @@ -3081,7 +3081,8 @@ strong { } label + p.meta { - width: fit-content; + max-width: fit-content; + width: 100%; margin: 0; margin-left: .5rem; } @@ -3089,7 +3090,7 @@ label + p.meta { .label { display: flex; flex-direction: row; - align-items: baseline; + align-items: last baseline; margin-bottom: 0.5rem; } @@ -3106,3 +3107,12 @@ input[type="checkbox"] + label, input[type="radio"] + label { font-family: var(--font-sans); } + +.field-group ul, +.field-group ol { + margin-bottom: .5rem; +} + +ul + p.meta { + margin-top: 0rem; +} diff --git a/hushline/templates/profile.html b/hushline/templates/profile.html index 6483c6ded..d06390148 100644 --- a/hushline/templates/profile.html +++ b/hushline/templates/profile.html @@ -113,8 +113,8 @@

{{ form[data['name']].label(for=data['name']) }} - {% if not data['field'].required %} -

Optional

+ {% if data['field'].required %} +

Required

{% endif %}
From d2da2f607bdc6c88d24b0f1a18cd71db99ca0e05 Mon Sep 17 00:00:00 2001 From: Glenn Date: Wed, 29 Jan 2025 15:52:06 -0800 Subject: [PATCH 10/10] Update style.css --- hushline/static/css/style.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/hushline/static/css/style.css b/hushline/static/css/style.css index 6f890f580..6d3d969df 100644 --- a/hushline/static/css/style.css +++ b/hushline/static/css/style.css @@ -3084,7 +3084,7 @@ label + p.meta { max-width: fit-content; width: 100%; margin: 0; - margin-left: .5rem; + margin-left: 0.5rem; } .label { @@ -3110,7 +3110,7 @@ input[type="radio"] + label { .field-group ul, .field-group ol { - margin-bottom: .5rem; + margin-bottom: 0.5rem; } ul + p.meta {