diff --git a/hushline/settings/forms.py b/hushline/settings/forms.py index 8bd740e24..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], @@ -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 73f87c85e..6d3d969df 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"], @@ -3023,29 +3022,97 @@ strong { #messageForm ul { list-style: none; padding: 0; + margin-top: 0; } #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 { +.field-form-toggle .icon { + width: 1.25rem; + height: 1.25rem; + background-size: contain; + background-repeat: no-repeat; + margin-right: 0.5rem; +} + +.field-form-toggle { + align-items: center; +} + +.choice-item button { + margin-bottom: 1rem; +} + +.fields .choices-container .add-choice { + margin-top: 0.25rem; +} + +.field-form-content .field-checkbox input { + margin-bottom: 0.5rem; + margin-left: 0; +} + +.field-group ul li input[type="checkbox"], +.field-group ul li input[type="radio"] { + margin-left: 0; +} + +#add_field { + margin-top: 1rem; +} + +.checkbox-group-settings { + margin-bottom: 0.5rem; +} + +.checkbox-group-settings .group-label { + margin-bottom: 0.5rem; + font-family: var(--font-sans-bold); +} + +label + p.meta { + max-width: fit-content; + width: 100%; + margin: 0; margin-left: 0.5rem; - font-size: 0.8125rem; - line-height: 1; - font-style: italic; - opacity: 0.8; +} + +.label { + display: flex; + flex-direction: row; + align-items: last baseline; + margin-bottom: 0.5rem; +} + +.label label { + margin-bottom: 0; +} + +#messageForm .helper { + margin-top: 0; + margin-bottom: 1rem; +} + +input[type="checkbox"] + label, +input[type="radio"] + label { + font-family: var(--font-sans); +} + +.field-group ul, +.field-group ol { + margin-bottom: 0.5rem; +} + +ul + p.meta { + margin-top: 0rem; } diff --git a/hushline/static/js/settings-fields.js b/hushline/static/js/settings-fields.js index d9f29e316..25b3b9908 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 } }); }); @@ -90,9 +89,9 @@ document.addEventListener("DOMContentLoaded", function () { choiceItem.classList.add("choice-item"); choiceItem.innerHTML = ` - - - + + + `; choicesContainer.appendChild(choiceItem); bindChoiceButtons(choiceItem); diff --git a/hushline/templates/profile.html b/hushline/templates/profile.html index 3afc88c51..d06390148 100644 --- a/hushline/templates/profile.html +++ b/hushline/templates/profile.html @@ -113,13 +113,8 @@

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

Required

{% endif %}
@@ -128,8 +123,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 +148,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 %}
diff --git a/hushline/templates/settings/profile-field-form.html b/hushline/templates/settings/profile-field-form.html index a3fdaeb9d..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') }} @@ -25,42 +41,27 @@
{{ choice.choice.label }} {{ choice.choice(id=choice.choice.id) }} - - - + + +
{% endfor %}
-
- {{ 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 }} {% 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 %}
- \ No newline at end of file + 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 +