Skip to content

Commit

Permalink
Merge pull request #1008 from maykinmedia/feature/2081-add-profile-pa…
Browse files Browse the repository at this point in the history
…ge-designs

💄 [#2081] add profile-edit page designs
  • Loading branch information
stevenbal authored Feb 23, 2024
2 parents b2e9e3f + adea6f1 commit a5f3ea5
Show file tree
Hide file tree
Showing 11 changed files with 164 additions and 118 deletions.
2 changes: 1 addition & 1 deletion src/open_inwoner/accounts/tests/test_profile_views.py
Original file line number Diff line number Diff line change
Expand Up @@ -177,7 +177,7 @@ def test_mydata_shown_with_digid_and_brp(self):
login_type=LoginTypeChoices.digid,
)
response = self.app.get(self.url, user=user)
self.assertContains(response, _("My details"))
self.assertContains(response, _("Bekijk alle gegevens"))

# check business profile section not displayed
self.assertNotContains(response, "Bedrijfsgegevens")
Expand Down
1 change: 1 addition & 0 deletions src/open_inwoner/accounts/views/profile.py
Original file line number Diff line number Diff line change
Expand Up @@ -75,6 +75,7 @@ def get_context_data(self, **kwargs):
("#personal-info", _("Persoonlijke gegevens")),
("#notifications", _("Voorkeuren voor meldingen")),
("#overview", _("Overzicht")),
("#profile-remove", _("Profiel verwijderen")),
]

user_files = user.get_all_files()
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{% load button_tags %}
<div class="form__actions {% if single %}form__actions--single{% endif %}">
<div class="form__actions {% if single %}form__actions--single{% endif %} {% if fullwidth %}form__actions--fullwidth{% endif %}">
{% if secondary_text %}{% button href=secondary_href secondary=secondary text=secondary_text icon=secondary_icon icon_position=secondary_icon_position form_id=form_id %}{% endif %}
{% if secondary_name %}{% button name=secondary_name type="submit" secondary=secondary text=secondary_text icon=secondary_icon icon_position=secondary_icon_position form_id=form_id %}{% endif %}
{% if secondary_value %}{% button name=secondary_name value=secondary_value type="submit" secondary=secondary text=secondary_text icon=secondary_icon icon_position=secondary_icon_position form_id=form_id %}{% endif %}
Expand Down
1 change: 1 addition & 0 deletions src/open_inwoner/components/templatetags/form_tags.py
Original file line number Diff line number Diff line change
Expand Up @@ -367,6 +367,7 @@ def form_actions(
{% form_actions primary_text="Submit" %}
Variables:
- fullwidth: bool | if submit-buttons should be in a block instead of grid.
- primary: bool | if false, hide the primary button.
- primary_text: string | The text for the primary button.
- primary_icon: string | The icon for the primary button.
Expand Down
3 changes: 2 additions & 1 deletion src/open_inwoner/scss/components/Cases/CaseDetail.scss
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@
/// cards on case detail
.card {
margin-bottom: var(--spacing-extra-large);

&__body {
&.document-upload-description {
display: flex;
Expand Down Expand Up @@ -61,7 +62,7 @@
}

.file-list,
.form__actions {
.form__actions--fullwidth {
display: block;
margin: 0;

Expand Down
13 changes: 13 additions & 0 deletions src/open_inwoner/scss/components/Form/Form.scss
Original file line number Diff line number Diff line change
Expand Up @@ -81,6 +81,7 @@
}
}
}

&__control
.label
.notifications__errors
Expand Down Expand Up @@ -164,6 +165,7 @@
font-family: var(--font-family-body);
font-size: var(--font-size-body);
font-style: italic;

.label__label--required {
vertical-align: sub;
}
Expand All @@ -190,6 +192,17 @@
gap: 0;
margin-top: 0;
}

&--fullwidth {
display: block;
margin: 0;

.button {
width: 100%;
font-weight: bold;
justify-content: center;
}
}
}

&__actions .button--secondary:last-child {
Expand Down
2 changes: 1 addition & 1 deletion src/open_inwoner/templates/pages/cases/document_form.html
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
{% csrf_token %}
{% input form.type no_label=True no_help=True class="label input" id="id_type" extra_classes="file-type__select" %}
{% file_input form.files max_upload_size=openzaak_config.max_upload_size allowed_file_extensions=openzaak_config.allowed_file_extensions %}
{% form_actions primary_text=_("Upload documenten") enctype="multipart/form-data" %}
{% form_actions primary_text=_("Upload documenten") enctype="multipart/form-data" fullwidth=True %}
<div class="non-field-error" hidden>
<p class="p p--small p--centered">{% trans "Verwijder eerst bestanden die niet voldoen aan de voorwaarden" %}</p>
</div>
Expand Down
90 changes: 53 additions & 37 deletions src/open_inwoner/templates/pages/profile/edit.html
Original file line number Diff line number Diff line change
@@ -1,45 +1,61 @@
{% extends 'master.html' %}
{% load i18n l10n form_tags %}
{% load i18n l10n grid_tags form_tags anchor_menu_tags icon_tags button_tags %}

{% block sidebar_content %}
{% anchor_menu anchors=anchors desktop=True %}
{% endblock sidebar_content %}

{% block extra_head %}
{{form.media}}
{{ form.media }}
{% endblock %}

{% block content %}
<h1 class="h1" id="title">
{% trans "Profiel bewerken" %}
</h1>

{% render_form id="profile-edit" method="POST" form=form form_action=form_action enctype="multipart/form-data" %}
{% csrf_token %}

{% with request.user as user %}
{% if user.is_digid_user_with_brp %}
{% input form.display_name %}
{% input form.email %}
{% input form.phonenumber %}
{% if user.contact_type == "begeleider" %}
{% input form.image no_help=True %}
{% image_crop form.cropping %}
{% endif %}
{% else %}
{% input form.first_name %}
{% input form.infix %}
{% input form.last_name %}
{% input form.display_name %}
{% input form.email %}
{% input form.phonenumber %}
{% input form.street %}
{% input form.housenumber %}
{% input form.postcode %}
{% input form.city %}
{% if user.contact_type == "begeleider" %}
{% input form.image no_help=True %}
{% image_crop form.cropping %}
{% endif %}
{% endif %}
{% endwith %}
{% form_actions primary_text=_("Opslaan") primary_icon="arrow_forward" secondary_href='profile:detail' secondary_text=_('Terug') secondary_icon='arrow_backward' secondary_icon_position="before" enctype="multipart/form-data" %}
{% endrender_form %}

<div class="profile__grid">
<h1 class="h1" id="title">
{% trans "Bewerk contactgegevens" %}
</h1>

{% render_grid %}
{% render_column start=0 span=8 %}

{% render_form id="profile-edit" method="POST" form=form form_action=form_action enctype="multipart/form-data" %}
{% csrf_token %}

{% with request.user as user %}
{% if user.is_digid_user_with_brp %}
{% input form.display_name %}
{% input form.email %}
{% input form.phonenumber %}
{% if user.contact_type == "begeleider" %}
{% input form.image no_help=True %}
{% image_crop form.cropping %}
{% endif %}
{% else %}
{% input form.first_name %}
{% input form.infix %}
{% input form.last_name %}
{% input form.display_name %}
{% input form.email %}
{% input form.phonenumber %}
{% input form.street %}
{% input form.housenumber %}
{% input form.postcode %}
{% input form.city %}
{% if user.contact_type == "begeleider" %}
{% input form.image no_help=True %}
{% image_crop form.cropping %}
{% endif %}
{% endif %}
{% endwith %}
<div class="form__actions form__actions--fullwidth">
{% button text="Sla wijzigingen op" primary=True type="submit" form_id="profile-edit" %}
{% button href="profile:detail" icon="west" text=_("Terug naar Mijn profiel") icon_outlined=True transparent=True %}
</div>
{% endrender_form %}

{% endrender_column %}
{% endrender_grid %}
</div>

{% endblock content %}
8 changes: 4 additions & 4 deletions src/open_inwoner/templates/pages/profile/me.html
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{% extends 'master.html' %}
{% load i18n l10n link_tags file_tags card_tags grid_tags list_tags button_tags utils icon_tags form_tags anchor_menu_tags dropdown_tags %}
{% load i18n l10n link_tags file_tags card_tags list_tags button_tags utils icon_tags form_tags anchor_menu_tags dropdown_tags %}

{% block sidebar_content %}
{% anchor_menu anchors=anchors desktop=True %}
Expand Down Expand Up @@ -47,7 +47,7 @@ <h2 class="h2 title" id="personal-overview">{% trans "Persoonlijke gegevens" %}
<div class="tabled__item--force-right tabled__item--mobile-big">
{% button href="profile:edit" text=_("Bewerk") icon="edit" transparent=True icon_outlined=True %}
{% if user.is_digid_user_with_brp and view.config.my_data %}
{% button href="profile:data" text=_("My details") icon="info" transparent=True icon_outlined=True %}
{% button href="profile:data" text=_("Bekijk alle gegevens") icon="east" transparent=True icon_position="after" icon_outlined=True %}
{% elif not user.is_digid_user %}
{% button href="password_change" text=_("Password") icon="vpn_key" transparent=True icon_outlined=True %}
{% endif %}
Expand Down Expand Up @@ -104,7 +104,7 @@ <h2 class="h2 title" id="notifications">{% trans "Voorkeuren voor meldingen" %}
{% if view.config.mentors or view.config.my_contacts or view.config.actions or view.config.ssd or view.config.selfdiagnose %}
{# Overview #}
<section class="profile-section profile-section__overview">
<h2 class="h2 title" id="profile-overview">{% trans "Overzicht" %}</h2>
<h2 class="h2 title" id="overview">{% trans "Overzicht" %}</h2>
<div class="profile-cards card-container card-container--columns-3">

{# Mentors #}
Expand Down Expand Up @@ -236,7 +236,7 @@ <h4 class="card__heading-4"><span class="link link__text">{% trans "Zelftest" %}

<section class="tabled profile-section profile-section--bordered">
<div class="tabled__section">
<h2 class="h2 title" id="overview">{% trans "Profiel verwijderen" %}</h2></div>
<h2 class="h2 title" id="profile-remove">{% trans "Profiel verwijderen" %}</h2></div>
<div class="tabled">
<p class="p">
{% trans "Hiermee worden alleen uw persoonlijke voorkeuren verwijderd. U krijgt dan bijvoorbeeld geen e-mail meer van ons over wijzigingen van uw lopende zaken. Uw persoonsgegevens en uw lopende zaken zelf worden hiermee niet verwijderd." %}
Expand Down
Loading

0 comments on commit a5f3ea5

Please sign in to comment.