From 4552ad19e9da585bc51241ab646f127da2c6a503 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fr=C3=A9d=C3=A9ric=20P=C3=A9ters?= Date: Sun, 25 Dec 2022 17:08:46 +0100 Subject: [PATCH] manager: redo date navigation/picker buttons (#72324) --- chrono/manager/static/css/style.scss | 64 +++++++++++-------- chrono/manager/static/js/chrono.manager.js | 1 + .../chrono/manager_agenda_day_view.html | 9 ++- .../chrono/manager_agenda_month_view.html | 9 ++- .../chrono/manager_agenda_week_view.html | 9 ++- .../chrono/manager_resource_day_view.html | 9 ++- .../chrono/manager_resource_month_view.html | 9 ++- .../chrono/manager_resource_week_view.html | 9 ++- tests/manager/test_shared_custody_agenda.py | 8 +-- 9 files changed, 77 insertions(+), 50 deletions(-) diff --git a/chrono/manager/static/css/style.scss b/chrono/manager/static/css/style.scss index c37f2163..501790ac 100644 --- a/chrono/manager/static/css/style.scss +++ b/chrono/manager/static/css/style.scss @@ -86,27 +86,13 @@ a.timeperiod-list-all { content: "\f0ad"; /* wrench */ } -.dayview h2 a, -.monthview h2 a { - padding: 0 1ex; -} - -.dayview h2 > span { - display: inline-block; - min-width: 24ex; -} - -.monthview h2 > span { - display: inline-block; - min-width: 16ex; -} - .openevents .section h4:first-child { margin-top: 0; } table.agenda-table { + margin-top: 1em; border-spacing: 0.5vw 0; table-layout: fixed; background-color: white; @@ -328,20 +314,42 @@ span.start-time { .date-title { cursor: pointer; - &::after { - content: "\f073"; /* calendar */ - font-family: FontAwesome; - padding-left: 1ex; - padding-right: 0ex; - opacity: 0.3; - font-size: 80%; - transition: opacity 200ms linear; - } - &:hover::after { - opacity: 0.8; +} + +span.buttons-group { + display: inline-flex; + .date-prev { + margin-left: 0; } } +div#appbar > h2.date-nav { + display: inline-block; + margin: 0; + padding: 0; + font-size: 100%; + position: static; + .date-title { + font-size: 200%; + position: relative; + top: 4px; + margin-left: 0.5em; + margin-right: 0.5em; + } +} + +.date-prev, .date-next, .date-picker-opener { + &::after { + font-weight: normal; + font-size: 1rem; + font-family: FontAwesome; + } +} + +.date-prev::after { content: "\f053"; } /* chevron-left */ +.date-next::after { content: "\f054"; } /* chevron-right */ +.date-picker-opener::after { content: "\f073"; } /* calendar */ + .date-picker { button, select { font-size: 1rem; @@ -355,7 +363,7 @@ span.start-time { border: 1px solid #d0d0d0; border-width: 1px 0 0 1px; top: -0.6ex; - left: 5rem; + left: 9rem; background: #FAFAFA; transform: rotate(45deg); } @@ -365,7 +373,7 @@ span.start-time { box-shadow: 0px 1px 1px 2px rgba(0, 0, 0, 0.04); padding: 1ex 4ex; left: 0; - top: 3ex; + top: 6ex; z-index: 100; } diff --git a/chrono/manager/static/js/chrono.manager.js b/chrono/manager/static/js/chrono.manager.js index 5b324886..e6aa2e40 100644 --- a/chrono/manager/static/js/chrono.manager.js +++ b/chrono/manager/static/js/chrono.manager.js @@ -7,6 +7,7 @@ $(function() { $('.date-title').on('click', function() { $(this).parent().find('.date-picker').toggle(); }); + $('.date-picker-opener').on('click', function() { $('.date-title').trigger('click'); }); $('.date-picker button').on('click', function() { if ($('[name=day]').val()) { window.location = '../../../' + $('[name=year]').val() + '/' + $('[name=month]').val() + '/' + $('[name=day]').val() + '/'; diff --git a/chrono/manager/templates/chrono/manager_agenda_day_view.html b/chrono/manager/templates/chrono/manager_agenda_day_view.html index 4b1b1caf..4ec3cced 100644 --- a/chrono/manager/templates/chrono/manager_agenda_day_view.html +++ b/chrono/manager/templates/chrono/manager_agenda_day_view.html @@ -9,9 +9,13 @@ {% endblock %} {% block appbar %} -

- ← + + {% trans "Previous day" %} + {% trans "Next day" %} + +

{{ view.date|date:"l j F Y" }} + {% with selected_day=view.date|date:"j" selected_month=view.date|date:"n" selected_year=view.date|date:"Y" %} {% endwith %} - →

{% block actions %} diff --git a/chrono/manager/templates/chrono/manager_agenda_month_view.html b/chrono/manager/templates/chrono/manager_agenda_month_view.html index 0b05a9cb..c3186bdc 100644 --- a/chrono/manager/templates/chrono/manager_agenda_month_view.html +++ b/chrono/manager/templates/chrono/manager_agenda_month_view.html @@ -9,9 +9,13 @@ {% endblock %} {% block appbar %} -

- ← + + {% trans "Previous month" %} + {% trans "Next month" %} + +

{{ view.date|date:"F Y" }} + {% with selected_month=view.date|date:"n" selected_year=view.date|date:"Y" %} {% endwith %} - →

{% block actions %} diff --git a/chrono/manager/templates/chrono/manager_agenda_week_view.html b/chrono/manager/templates/chrono/manager_agenda_week_view.html index 029a2b6f..dc6f3346 100644 --- a/chrono/manager/templates/chrono/manager_agenda_week_view.html +++ b/chrono/manager/templates/chrono/manager_agenda_week_view.html @@ -34,9 +34,13 @@ {% endblock %} {% block appbar %} -

- ← + + {% trans "Previous week" %} + {% trans "Next week" %} + +

{{ view.date|date:_("Y \w\e\e\k W") }} + {% with selected_week=view.date|date:"W" selected_year=view.date|date:"Y" %} {% endwith %} - →

{% block actions %} diff --git a/chrono/manager/templates/chrono/manager_resource_day_view.html b/chrono/manager/templates/chrono/manager_resource_day_view.html index 336180ce..47d86126 100644 --- a/chrono/manager/templates/chrono/manager_resource_day_view.html +++ b/chrono/manager/templates/chrono/manager_resource_day_view.html @@ -7,9 +7,13 @@ {% endblock %} {% block appbar-title %} -

- ← + + {% trans "Previous day" %} + {% trans "Next day" %} + +

{{ view.date|date:"l j F Y" }} + {% with selected_day=view.date|date:"j" selected_month=view.date|date:"n" selected_year=view.date|date:"Y" %} {% endwith %} - →

{% endblock %} {% block appbar-extras %} diff --git a/chrono/manager/templates/chrono/manager_resource_month_view.html b/chrono/manager/templates/chrono/manager_resource_month_view.html index e5f1ce60..20c8aa50 100644 --- a/chrono/manager/templates/chrono/manager_resource_month_view.html +++ b/chrono/manager/templates/chrono/manager_resource_month_view.html @@ -9,9 +9,13 @@ {% endblock %} {% block appbar-title %} -

- ← + + {% trans "Previous month" %} + {% trans "Next month" %} + +

{{ view.date|date:"F Y" }} + {% with selected_month=view.date|date:"n" selected_year=view.date|date:"Y" %} {% endwith %} - →

{% endblock %} {% block appbar-extras %} diff --git a/chrono/manager/templates/chrono/manager_resource_week_view.html b/chrono/manager/templates/chrono/manager_resource_week_view.html index 682fefed..70b8a2df 100644 --- a/chrono/manager/templates/chrono/manager_resource_week_view.html +++ b/chrono/manager/templates/chrono/manager_resource_week_view.html @@ -34,9 +34,13 @@ {% endblock %} {% block appbar-title %} -

- ← + + {% trans "Previous week" %} + {% trans "Next week" %} + +

{{ view.date|date:_("Y \w\e\e\k W") }} + {% with selected_week=view.date|date:"W" selected_year=view.date|date:"Y" %} {% endwith %} - →

{% endblock %} {% block appbar-extras %} diff --git a/tests/manager/test_shared_custody_agenda.py b/tests/manager/test_shared_custody_agenda.py index e55fb1a0..f2d4b0e5 100644 --- a/tests/manager/test_shared_custody_agenda.py +++ b/tests/manager/test_shared_custody_agenda.py @@ -199,7 +199,7 @@ def test_shared_custody_agenda_month_view(app, admin_user): assert tds[:7] == ['Jane Doe', 'John Doe', 'John Doe', 'Jane Doe', 'Jane Doe', 'Jane Doe', 'Jane Doe'] old_resp = resp - resp = resp.click('→') + resp = resp.click('Next month') assert 'March 2022' in resp.text assert 'today' not in resp.text assert all('Week %s' % i in resp.text for i in range(9, 14)) @@ -209,7 +209,7 @@ def test_shared_custody_agenda_month_view(app, admin_user): assert days[:3] == ['Monday 28', 'Tuesday 1', 'Wednesday 2'] assert days[-3:] == ['Friday 1', 'Saturday 2', 'Sunday 3'] - resp = resp.click('←') + resp = resp.click('Previous month') assert resp.text == old_resp.text app.get('/manage/shared-custody/%s/42/42/' % agenda.pk, status=404) @@ -260,13 +260,13 @@ def test_shared_custody_agenda_month_view_dates(app, admin_user): assert 'This agenda applies from Feb. 14, 2022 to Feb. 14, 2022.' in resp.text # month before date_start - resp = resp.click('←') + resp = resp.click('Previous month') assert resp.text.count('') == 42 assert len([x.text for x in resp.pyquery('tbody tr td.guardian')]) == 0 # month after date_end resp = app.get('/manage/shared-custody/%s/' % agenda.pk).follow() - resp = resp.click('→') + resp = resp.click('Next month') assert resp.text.count('') == 35 assert len([x.text for x in resp.pyquery('tbody tr td.guardian')]) == 0