entrouvert
/
chrono
14
1
Fork 0
Code Issues Pull Requests 8 Releases Wiki Activity

manager: redo date navigation/picker buttons (#72324)

This commit is contained in:
Frédéric Péters 2022-12-25 17:08:46 +01:00 committed by Gitea
parent 414ba4c99c
commit 4552ad19e9
9 changed files with 77 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
chrono/manager/static/css/style.scss
View File

@ -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;
}

1
chrono/manager/static/js/chrono.manager.js
View File

@ -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() + '/';

9
chrono/manager/templates/chrono/manager_agenda_day_view.html
View File

@ -9,9 +9,13 @@
{% endblock %}
{% block appbar %}
<h2>
<a href="{{ view.get_previous_day_url }}">←</a>
<span class="buttons-group">
<a class="date-prev pk-button" href="{{ view.get_previous_day_url }}"><span class="sr-only">{% trans "Previous day" %}</span></a>
<a class="date-next pk-button" href="{{ view.get_next_day_url }}"><span class="sr-only">{% trans "Next day" %}</span></a>
</span>
<h2 class="date-nav">
<span class="date-title">{{ view.date|date:"l j F Y" }}</span>
<button class="date-picker-opener"><span class="sr-only">{% trans "Pick a date" %}</span></button>
{% with selected_day=view.date|date:"j" selected_month=view.date|date:"n" selected_year=view.date|date:"Y" %}
<div class="date-picker" style="display: none">
<select name="day">{% for day in view.get_days %}<option value="{{ day }}" {% if selected_day == day %}selected{% endif %}>{{day}}</option>{% endfor %}</select>
@ -20,7 +24,6 @@
<button>{% trans 'Set Date' %}</button>
</div>
{% endwith %}
<a href="{{ view.get_next_day_url }}">→</a>
</h2>
<span class="actions">
{% block actions %}

9
chrono/manager/templates/chrono/manager_agenda_month_view.html
View File

@ -9,9 +9,13 @@
{% endblock %}
{% block appbar %}
<h2>
<a href="{{ view.get_previous_month_url }}">←</a>
<span class="buttons-group">
<a class="date-prev pk-button" href="{{ view.get_previous_month_url }}"><span class="sr-only">{% trans "Previous month" %}</span></a>
<a class="date-next pk-button" href="{{ view.get_next_month_url }}"><span class="sr-only">{% trans "Next month" %}</span></a>
</span>
<h2 class="date-nav">
<span class="date-title">{{ view.date|date:"F Y" }}</span>
<button class="date-picker-opener"><span class="sr-only">{% trans "Pick a month" %}</span></button>
{% with selected_month=view.date|date:"n" selected_year=view.date|date:"Y" %}
<div class="date-picker" style="display: none">
<select name="month">{% for month, month_label in view.get_months %}<option value="{{ month }}" {% if selected_month == month %}selected{% endif %}>{{ month_label }}</option>{% endfor %}</select>
@ -19,7 +23,6 @@
<button>{% trans 'Set Date' %}</button>
</div>
{% endwith %}
<a href="{{ view.get_next_month_url }}">→</a>
</h2>
<span class="actions">
{% block actions %}

9
chrono/manager/templates/chrono/manager_agenda_week_view.html
View File

@ -34,9 +34,13 @@
{% endblock %}
{% block appbar %}
<h2>
<a href="{{ view.get_previous_week_url }}">←</a>
<span class="buttons-group">
<a class="date-prev pk-button" href="{{ view.get_previous_week_url }}"><span class="sr-only">{% trans "Previous week" %}</span></a>
<a class="date-next pk-button" href="{{ view.get_next_week_url }}"><span class="sr-only">{% trans "Next week" %}</span></a>
</span>
<h2 class="date-nav">
<span class="date-title">{{ view.date|date:_("Y \w\e\e\k W") }}</span>
<button class="date-picker-opener"><span class="sr-only">{% trans "Pick a week" %}</span></button>
{% with selected_week=view.date|date:"W" selected_year=view.date|date:"Y" %}
<div class="date-picker" style="display: none">
<select name="week">{% for week, week_label in view.get_weeks %}<option value="{{ week }}" {% if selected_week == week %}selected{% endif %}>{{ week_label }}</option>{% endfor %}</select>
@ -44,7 +48,6 @@
<button>{% trans 'Set Date' %}</button>
</div>
{% endwith %}
<a href="{{ view.get_next_week_url }}">→</a>
</h2>
<span class="actions">
{% block actions %}

9
chrono/manager/templates/chrono/manager_resource_day_view.html
View File

@ -7,9 +7,13 @@
{% endblock %}
{% block appbar-title %}
<h2>
<a href="{{ view.get_previous_day_url }}">←</a>
<span class="buttons-group">
<a class="date-prev pk-button" href="{{ view.get_previous_day_url }}"><span class="sr-only">{% trans "Previous day" %}</span></a>
<a class="date-next pk-button" href="{{ view.get_next_day_url }}"><span class="sr-only">{% trans "Next day" %}</span></a>
</span>
<h2 class="date-nav">
<span class="date-title">{{ view.date|date:"l j F Y" }}</span>
<button class="date-picker-opener"><span class="sr-only">{% trans "Pick a date" %}</span></button>
{% with selected_day=view.date|date:"j" selected_month=view.date|date:"n" selected_year=view.date|date:"Y" %}
<div class="date-picker" style="display: none">
<select name="day">{% for day in view.get_days %}<option value="{{ day }}" {% if selected_day == day %}selected{% endif %}>{{day}}</option>{% endfor %}</select>
@ -18,7 +22,6 @@
<button>{% trans 'Set Date' %}</button>
</div>
{% endwith %}
<a href="{{ view.get_next_day_url }}">→</a>
</h2>
{% endblock %}
{% block appbar-extras %}

9
chrono/manager/templates/chrono/manager_resource_month_view.html
View File

@ -9,9 +9,13 @@
{% endblock %}
{% block appbar-title %}
<h2>
<a href="{{ view.get_previous_month_url }}">←</a>
<span class="buttons-group">
<a class="date-prev pk-button" href="{{ view.get_previous_month_url }}"><span class="sr-only">{% trans "Previous month" %}</span></a>
<a class="date-next pk-button" href="{{ view.get_next_month_url }}"><span class="sr-only">{% trans "Next month" %}</span></a>
</span>
<h2 class="date-nav">
<span class="date-title">{{ view.date|date:"F Y" }}</span>
<button class="date-picker-opener"><span class="sr-only">{% trans "Pick a month" %}</span></button>
{% with selected_month=view.date|date:"n" selected_year=view.date|date:"Y" %}
<div class="date-picker" style="display: none">
<select name="month">{% for month, month_label in view.get_months %}<option value="{{ month }}" {% if selected_month == month %}selected{% endif %}>{{ month_label }}</option>{% endfor %}</select>
@ -19,7 +23,6 @@
<button>{% trans 'Set Date' %}</button>
</div>
{% endwith %}
<a href="{{ view.get_next_month_url }}">→</a>
</h2>
{% endblock %}
{% block appbar-extras %}

9
chrono/manager/templates/chrono/manager_resource_week_view.html
View File

@ -34,9 +34,13 @@
{% endblock %}
{% block appbar-title %}
<h2>
<a href="{{ view.get_previous_week_url }}">←</a>
<span class="buttons-group">
<a class="date-prev pk-button" href="{{ view.get_previous_week_url }}"><span class="sr-only">{% trans "Previous week" %}</span></a>
<a class="date-next pk-button" href="{{ view.get_next_week_url }}"><span class="sr-only">{% trans "Next week" %}</span></a>
</span>
<h2 class="date-nav">
<span class="date-title">{{ view.date|date:_("Y \w\e\e\k W") }}</span>
<button class="date-picker-opener"><span class="sr-only">{% trans "Pick a week" %}</span></button>
{% with selected_week=view.date|date:"W" selected_year=view.date|date:"Y" %}
<div class="date-picker" style="display: none">
<select name="week">{% for week, week_label in view.get_weeks %}<option value="{{ week }}" {% if selected_week == week %}selected{% endif %}>{{ week_label }}</option>{% endfor %}</select>
@ -44,7 +48,6 @@
<button>{% trans 'Set Date' %}</button>
</div>
{% endwith %}
<a href="{{ view.get_next_week_url }}">→</a>
</h2>
{% endblock %}
{% block appbar-extras %}

8
tests/manager/test_shared_custody_agenda.py
View File

@ -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('<td></td>') == 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('<td></td>') == 35
assert len([x.text for x in resp.pyquery('tbody tr td.guardian')]) == 0