Skip to content

Commit ba7c487

Browse files
jiromaykinjiromaykin
committed
[#3081] New checkbox and modal design for plan-previews screen
1 parent 788a90a commit ba7c487

File tree

26 files changed

+413
-186
lines changed

26 files changed

+413
-186
lines changed

‎src/open_inwoner/cms/collaborate/urls.py

+6
Original file line numberDiff line numberDiff line change
@@ -13,12 +13,18 @@
1313
PlanFileUploadView,
1414
PlanGoalEditView,
1515
PlanListView,
16+
PlanTemplateChooseView,
1617
)
1718

1819
app_name = "collaborate"
1920

2021
urlpatterns = [
2122
path("", PlanListView.as_view(), name="plan_list"),
23+
path(
24+
"template-choice/",
25+
PlanTemplateChooseView.as_view(),
26+
name="plan_choose_template",
27+
),
2228
path("create/", PlanCreateView.as_view(), name="plan_create"),
2329
path("<uuid:uuid>/", PlanDetailView.as_view(), name="plan_detail"),
2430
path("<uuid:uuid>/edit/", PlanEditView.as_view(), name="plan_edit"),

‎src/open_inwoner/components/templates/components/File/File.html

+3-3
Original file line numberDiff line numberDiff line change
@@ -18,11 +18,11 @@
1818
<span class="file__name">
1919
{{ name }}
2020
{% if extension and size %}
21-
({{ extension }}, {{ size|readable_size }})
21+
<span class="file__extension">({{ extension }}</span>, <span class="file__size">{{ size|readable_size }})</span>
2222
{% elif extension %}
23-
({{ extension }})
23+
<span class="file__extension">({{ extension }})</span>
2424
{% elif size %}
25-
({{ size|readable_size }})
25+
<span class="file__size">({{ size|readable_size }})</span>
2626
{% endif %}
2727
</span>
2828
<span class="file__date">{{ created|date:'j F Y' }}</span>

‎src/open_inwoner/components/templates/components/Form/FormActions.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{% load button_tags %}
2-
<div class="form__actions {% if single %}form__actions--single{% endif %} {% if fullwidth %}form__actions--fullwidth{% endif %}">
2+
<div class="form__actions {% if nogrid %}form__actions--nogrid{% endif %} {% if single %}form__actions--single{% endif %} {% if fullwidth %}form__actions--fullwidth{% endif %}">
33
{% 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 %}
44
{% 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 %}
55
{% 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 %}

‎src/open_inwoner/js/components/form/ChoiceListSingle.js

+1
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ export class ChoiceListSingle {
1919
// Add event listeners for click events
2020
this.labels.forEach((label) => {
2121
label.addEventListener('click', () => {
22+
console.log('A click on the .choice-list__label element.')
2223
const selectedListItem = node.querySelector('.selected')
2324
if (selectedListItem) {
2425
selectedListItem.classList.remove('selected')

‎src/open_inwoner/js/components/plan-preview/index.js

+10-2
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,17 @@ export class PlanPreview {
1212
openPreview(event) {
1313
event.stopPropagation()
1414
event.preventDefault()
15+
console.log('button for plan is clicked')
1516

16-
const modalId = document.getElementById(this.node.dataset.id)
17-
const modal = new Modal(modalId)
17+
const modalId = this.node.dataset.id || 'modal'
18+
const modalElement = document.getElementById(modalId)
19+
20+
if (!modalElement) {
21+
console.error(`Modal with ID "${modalId}" not found`)
22+
return
23+
}
24+
25+
const modal = new Modal(modalElement)
1826
modal.setModalIcons(false)
1927
modal.setConfirmButtonVisibility(false)
2028
modal.setCancelButtonVisibility(true)

‎src/open_inwoner/plans/templates/plans/preview.html

+12-23
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,28 @@
1-
{% load i18n link_tags %}
1+
{% load i18n link_tags file_tags %}
22

3-
<div class='preview'>
3+
<div class='plan-preview'>
4+
<p class='plan-preview__key'>{% trans "Titel" %}</p>
5+
<h2 class="utrecht-heading-2">{{ plan_template.name }}</h2>
46
{% if plan_template.goal %}
5-
<div class='preview__title'>{% trans "Doel:" %}</div>
6-
<div>{{ plan_template.goal }}</div>
7+
<p class='plan-preview__key'>{% trans "Doel" %}</p>
8+
<div>{{ plan_template.goal|truncatewords:20 }}</div>
79
{% endif %}
810

911
{% if plan_template.description %}
10-
<div class='preview__title'>{% trans "Description:" %}</div>
11-
<div>{{ plan_template.description }}</div>
12+
<div class='plan-preview__key'>{% trans "Description:" %}</div>
13+
<div>{{ plan_template.description|truncatewords:10 }}</div>
1214
{% endif %}
1315

1416
{% if plan_template.file %}
15-
<div class='preview__title'>{% trans 'File:' %}</div>
16-
<div>{% link href=plan_template.file.url text=plan_template.file %}</div>
17+
<div class='plan-preview__key'>{% trans 'Bestand' %}</div>
18+
<div>{% file file=plan_template.file extension=plan_template.file.extension size=plan_template.file.size show_download=False %}</div>
1719
{% endif %}
1820

1921
{% if plan_template.actiontemplates.exists %}
20-
<div class='preview__title'>{% trans 'Actions:' %}</div>
22+
<div class='plan-preview__key'>{% trans 'Actions:' %}</div>
2123

2224
{% for action_template in plan_template.actiontemplates.all %}
23-
<div class='preview__span'>
24-
<div class='preview__title'>{{ forloop.counter }}</div>
25-
<div class='preview__title'>{% trans 'Name:' %}</div>
26-
<div>{{ action_template.name }}</div>
27-
<div></div>
28-
<div class='preview__title'>{% trans 'Description:' %}</div>
29-
<div>{{ action_template.description }}</div>
30-
<div></div>
31-
<div class='preview__title'>{% trans 'Type:' %}</div>
32-
<div>{{ action_template.get_type_display }}</div>
33-
<div></div>
34-
<div class='preview__title'>{% trans 'Eindigt' %}</div>
35-
<div>{% trans "Over" %}{{ over }} {{ action_template.end_in_days }} {% trans "dagen" %} {{ days }}</div>
36-
</div>
25+
<div class='plan-preview__span'>{{ forloop.counter }}. {{ action_template.name }}</div>
3726
{% endfor %}
3827
{% endif %}
3928
</div>

‎src/open_inwoner/plans/tests/test_views.py

+2-1
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@ def setUp(self) -> None:
4444

4545
self.login_url = reverse("login")
4646
self.list_url = reverse("collaborate:plan_list")
47+
self.choose_template_url = reverse("collaborate:plan_choose_template")
4748
self.create_url = reverse("collaborate:plan_create")
4849
self.detail_url = reverse(
4950
"collaborate:plan_detail", kwargs={"uuid": self.plan.uuid}
@@ -381,7 +382,7 @@ def test_plan_create_plan(self):
381382
def test_plan_create_plan_with_template(self):
382383
plan_template = PlanTemplateFactory(file=None)
383384
self.assertEqual(Plan.objects.count(), 1)
384-
response = self.app.get(self.create_url, user=self.user)
385+
response = self.app.get(self.choose_template_url, user=self.user)
385386
form = response.forms["plan-form"]
386387
form["title"] = "Plan"
387388
form["end_date"] = "2022-01-01"

‎src/open_inwoner/plans/views.py

+37
Original file line numberDiff line numberDiff line change
@@ -231,6 +231,43 @@ def get_context_data(self, **kwargs):
231231
return context
232232

233233

234+
class PlanTemplateChooseView(
235+
PlanActionsEnabledMixin,
236+
LogMixin,
237+
LoginRequiredMixin,
238+
CommonPageMixin,
239+
BaseBreadcrumbMixin,
240+
CreateView,
241+
):
242+
template_name = "pages/plans/choose-template.html"
243+
model = Plan
244+
form_class = PlanForm
245+
246+
@cached_property
247+
def crumbs(self):
248+
return [
249+
(_("Samenwerken"), reverse("collaborate:plan_list")),
250+
(_("Kies voorstel"), reverse("collaborate:plan_choose_template")),
251+
]
252+
253+
def get_form_kwargs(self):
254+
kwargs = super().get_form_kwargs()
255+
kwargs.update(user=self.request.user)
256+
return kwargs
257+
258+
def form_valid(self, form):
259+
self.object = form.save(self.request.user)
260+
261+
# Add plan creator as a plan_contact as well
262+
self.object.plan_contacts.add(self.object.created_by)
263+
264+
self.log_addition(self.object, _("plan was created"))
265+
return HttpResponseRedirect(self.get_success_url())
266+
267+
def get_success_url(self) -> str:
268+
return self.object.get_absolute_url()
269+
270+
234271
class PlanCreateView(
235272
PlanActionsEnabledMixin,
236273
LogMixin,

‎src/open_inwoner/scss/components/Actions/Actions.scss

+6-3
Original file line numberDiff line numberDiff line change
@@ -70,17 +70,20 @@
7070

7171
&.actions__status-selector {
7272
&--approval {
73-
border-color: var(--color-danger);
73+
background-color: var(--color-danger-lightest);
74+
border-color: var(--color-danger-lightest);
7475
color: var(--color-danger);
7576
}
7677

7778
&--open {
78-
border-color: var(--color-info-darker);
79+
background-color: var(--color-info-lightest);
80+
border-color: var(--color-info-lightest);
7981
color: var(--color-info-darker);
8082
}
8183

8284
&--closed {
83-
border-color: var(--color-success);
85+
background-color: var(--color-success-lighter);
86+
border-color: var(--color-success-lighter);
8487
color: var(--color-success);
8588
}
8689
}

‎src/open_inwoner/scss/components/Button/Button.scss

+6
Original file line numberDiff line numberDiff line change
@@ -111,6 +111,12 @@
111111
color: var(--color-primary);
112112
text-decoration: underline;
113113
}
114+
115+
&:focus {
116+
background-color: transparent;
117+
color: var(--font-color-body);
118+
text-decoration: underline;
119+
}
114120
}
115121

116122
&.button--secondary {

‎src/open_inwoner/scss/components/Card/Card.scss

+4
Original file line numberDiff line numberDiff line change
@@ -196,6 +196,10 @@
196196
color: var(--color-body);
197197
font-size: var(--font-size-body-small);
198198
}
199+
.card__text--small ~ .link {
200+
background-color: yellow;
201+
margin-top: var(--spacing-medium);
202+
}
199203

200204
&__text--dark {
201205
color: var(--font-color-body);

‎src/open_inwoner/scss/components/File/File.scss

+5
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,11 @@
4646
text-overflow: ellipsis;
4747
overflow: hidden;
4848
}
49+
50+
.file__extension,
51+
.file__size {
52+
text-transform: uppercase;
53+
}
4954
}
5055

5156
&__file .link,

‎src/open_inwoner/scss/components/Form/Form.scss

+7-2
Original file line numberDiff line numberDiff line change
@@ -106,7 +106,6 @@
106106
}
107107

108108
@media (min-width: 360px) {
109-
&__control > .label .input,
110109
&__control > .label .input[type='file'] {
111110
max-width: var(--form-width);
112111
}
@@ -193,10 +192,16 @@
193192
margin-top: 0;
194193
}
195194

195+
&--nogrid {
196+
display: block;
197+
margin: 0;
198+
max-width: 100%;
199+
}
200+
196201
&--fullwidth {
197202
display: block;
198203
margin: 0;
199-
max-width: var(--form-width);
204+
max-width: min-content;
200205

201206
.button {
202207
width: 100%;

‎src/open_inwoner/scss/components/List/_List.scss

+7
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,13 @@
44
padding: 0;
55
width: 100%;
66
overflow-y: auto;
7+
8+
&--styled {
9+
list-style: disc;
10+
margin: 0 0 0 var(--spacing-extra-large);
11+
padding: 0;
12+
width: 100%;
13+
}
714
}
815

916
.search + .list {

‎src/open_inwoner/scss/components/Plan/PlanCreate.scss

+6-30
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@
22
.form__control {
33
.label {
44
position: relative;
5-
max-width: var(--form-width);
65
}
76

87
[class*='icons'] {
@@ -16,39 +15,16 @@
1615

1716
&:focus,
1817
&:focus-visible {
19-
background-color: var(--color-gray-lightest);
2018
border-radius: var(--border-radius);
2119
}
2220
}
2321

24-
.modal--open {
25-
.modal__container {
26-
padding: var(--spacing-giant);
27-
28-
[class*='icons'] {
29-
font-size: var(--font-size-body-large);
30-
}
31-
32-
.button-icon--primary {
33-
color: var(--color-white);
34-
font-size: var(--font-size-body);
35-
transform: none;
36-
}
37-
38-
.modal__actions {
39-
.modal__button {
40-
&:focus-visible {
41-
box-shadow: none;
42-
outline: none;
43-
}
44-
}
45-
}
46-
47-
.modal__title .modal__button {
48-
height: var(--font-size-body);
49-
min-width: initial;
50-
padding: 0;
51-
}
22+
.form__grid-box {
23+
gap: 10px;
24+
.checkbox {
25+
padding: 6px;
26+
border-radius: var(--border-radius);
27+
border: 1px solid var(--font-color-body);
5228
}
5329
}
5430
}

‎src/open_inwoner/scss/components/Plan/PlanEdit.scss

-4
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
.plan-edit {
22
.form {
3-
max-width: var(--form-width);
43
.form__control [class*='icons'] {
54
transform: initial;
65
}
@@ -13,9 +12,6 @@
1312
input[type='file'] {
1413
min-width: 100%;
1514
}
16-
.input {
17-
max-width: var(--form-width);
18-
}
1915
}
2016
}
2117
}

‎src/open_inwoner/scss/components/Plan/PlanModalNoReset.scss

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
.modal--no-reset {
2+
&.modal--open {
3+
.modal__container {
4+
padding: var(--spacing-giant);
5+
6+
[class*='icons'] {
7+
font-size: var(--font-size-body-large);
8+
}
9+
10+
.button-icon--primary {
11+
color: var(--color-white);
12+
font-size: var(--font-size-body);
13+
transform: none;
14+
}
15+
16+
.modal__actions {
17+
justify-content: flex-start;
18+
margin: 0;
19+
.button__icon-close {
20+
min-width: 0;
21+
}
22+
23+
.modal__button {
24+
&:focus-visible {
25+
box-shadow: none;
26+
outline: none;
27+
}
28+
}
29+
}
30+
}
31+
}
32+
}

0 commit comments

Comments
 (0)