From 5cbe402036e41795de7f798fa5321aff26a5ee31 Mon Sep 17 00:00:00 2001 From: Jennifer Richards Date: Thu, 21 Oct 2021 14:59:02 +0000 Subject: [PATCH] Improvements to the timeslot and schedule editors (move new toggles to modals, handle overflowing session names, fix timeslot editor scrolling, add buttons to quickly create single timeslot, accept trailing slash on edit URL) - Legacy-Id: 19449 --- ietf/meeting/urls.py | 2 +- ietf/static/ietf/css/ietf.css | 23 ++-- ietf/static/ietf/js/edit-meeting-schedule.js | 20 +++- .../static/ietf/js/meeting/create_timeslot.js | 43 +++++++ ietf/templates/meeting/create_timeslot.html | 5 +- .../meeting/edit_meeting_schedule.html | 111 ++++++++++-------- ietf/templates/meeting/timeslot_edit.html | 47 ++++++-- ietf/utils/templatetags/misc_filters.py | 10 ++ 8 files changed, 185 insertions(+), 76 deletions(-) create mode 100644 ietf/static/ietf/js/meeting/create_timeslot.js diff --git a/ietf/meeting/urls.py b/ietf/meeting/urls.py index e4d58d25d..c9c388c0e 100644 --- a/ietf/meeting/urls.py +++ b/ietf/meeting/urls.py @@ -54,7 +54,7 @@ type_ietf_only_patterns = [ url(r'^agendas/edit$', RedirectView.as_view(pattern_name='ietf.meeting.views.list_schedules', permanent=True)), url(r'^agendas/diff/$', views.diff_schedules), url(r'^agenda/new/$', views.new_meeting_schedule), - url(r'^timeslots/edit$', views.edit_timeslots), + url(r'^timeslots/edit/?$', views.edit_timeslots), url(r'^timeslot/new$', views.create_timeslot), url(r'^timeslot/(?P\d+)/edit$', views.edit_timeslot), url(r'^timeslot/(?P\d+)/edittype$', views.edit_timeslot_type), diff --git a/ietf/static/ietf/css/ietf.css b/ietf/static/ietf/css/ietf.css index 1ab9e40b2..448827f12 100644 --- a/ietf/static/ietf/css/ietf.css +++ b/ietf/static/ietf/css/ietf.css @@ -1239,6 +1239,9 @@ a.fc-event, .fc-event, .fc-content, .fc-title, .fc-event-container { .edit-meeting-schedule .session .session-label { flex-grow: 1; margin-left: 0.1em; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; } .edit-meeting-schedule .session .session-label .bof-tag { @@ -1333,20 +1336,11 @@ a.fc-event, .fc-event, .fc-content, .fc-title, .fc-event-container { .edit-meeting-schedule .scheduling-panel .preferences { margin: 0.5em 0; - display: flex; - align-items: flex-start; } -.edit-meeting-schedule .scheduling-panel .preferences > div { - display: flex; - flex-direction: column; - align-items: flex-start; -} - -.edit-meeting-schedule .scheduling-panel .preferences > div > span { +.edit-meeting-schedule .scheduling-panel .preferences > span { margin-top: 0; margin-right: 1em; - white-space: nowrap; } .edit-meeting-schedule .sort-unassigned select { @@ -1354,17 +1348,20 @@ a.fc-event, .fc-event, .fc-content, .fc-title, .fc-event-container { display: inline-block; } -.edit-meeting-schedule #timeslot-group-toggles-modal .modal-body { +.edit-meeting-schedule #timeslot-group-toggles-modal .modal-body > div { + margin-bottom: 1.5em; +} +.edit-meeting-schedule #timeslot-group-toggles-modal .modal-body .individual-timeslots { /*column-count: 3;*/ display: flex; flex-flow: row wrap; } -.edit-meeting-schedule #timeslot-group-toggles-modal .modal-body > * { +.edit-meeting-schedule #timeslot-group-toggles-modal .modal-body .individual-timeslots > * { margin-right: 1.5em; } -.edit-meeting-schedule #timeslot-group-toggles-modal .modal-body label { +.edit-meeting-schedule #timeslot-group-toggles-modal .modal-body .individual-timeslots label { display: block; font-weight: normal; } diff --git a/ietf/static/ietf/js/edit-meeting-schedule.js b/ietf/static/ietf/js/edit-meeting-schedule.js index add0957b1..191a435ba 100644 --- a/ietf/static/ietf/js/edit-meeting-schedule.js +++ b/ietf/static/ietf/js/edit-meeting-schedule.js @@ -738,13 +738,13 @@ jQuery(document).ready(function () { timeslots.not(checked.join(",")).addClass('hidden-timeslot-type'); } if (timeSlotTypeInputs.length > 0) { - timeSlotTypeInputs.on("click", updateTimeSlotTypeToggling); + timeSlotTypeInputs.on("change", updateTimeSlotTypeToggling); updateTimeSlotTypeToggling(); } // Toggling session purposes let sessionPurposeInputs = content.find('.session-purpose-toggles input'); - function updateSessionPurposeToggling() { + function updateSessionPurposeToggling(evt) { let checked = []; sessionPurposeInputs.filter(":checked").each(function () { checked.push(".purpose-" + this.value); @@ -754,12 +754,24 @@ jQuery(document).ready(function () { sessions.not(checked.join(",")).addClass('hidden-purpose'); } if (sessionPurposeInputs.length > 0) { - sessionPurposeInputs.on("click", updateSessionPurposeToggling); + sessionPurposeInputs.on("change", updateSessionPurposeToggling); updateSessionPurposeToggling(); + content.find('#session-toggles-modal .select-all').get(0).addEventListener( + 'click', + function() { + sessionPurposeInputs.prop('checked', true); + updateSessionPurposeToggling(); + }); + content.find('#session-toggles-modal .clear-all').get(0).addEventListener( + 'click', + function() { + sessionPurposeInputs.prop('checked', false); + updateSessionPurposeToggling(); + }); } // toggling visible timeslots - let timeslotGroupInputs = content.find("#timeslot-group-toggles-modal .modal-body input"); + let timeslotGroupInputs = content.find("#timeslot-group-toggles-modal .modal-body .individual-timeslots input"); function updateTimeslotGroupToggling() { let checked = []; timeslotGroupInputs.filter(":checked").each(function () { diff --git a/ietf/static/ietf/js/meeting/create_timeslot.js b/ietf/static/ietf/js/meeting/create_timeslot.js new file mode 100644 index 000000000..7d0cbd271 --- /dev/null +++ b/ietf/static/ietf/js/meeting/create_timeslot.js @@ -0,0 +1,43 @@ +// Copyright The IETF Trust 2021, All Rights Reserved +/* global URLSearchParams */ +(function() { + 'use strict'; + + function initialize() { + const form = document.getElementById('timeslot-form'); + if (!form) { + return; + } + + const params = new URLSearchParams(document.location.search); + const day = params.get('day'); + const date = params.get('date'); + const location = params.get('location'); + const time = params.get('time'); + const duration = params.get('duration'); + + if (day) { + const inp = form.querySelector('#id_days input[value="' + day +'"]'); + if (inp) { + inp.checked = true; + } else if (date) { + const date_field = form.querySelector('#id_other_date'); + date_field.value = date; + } + } + if (location) { + const inp = form.querySelector('#id_locations input[value="' + location + '"]'); + inp.checked=true; + } + if (time) { + const inp = form.querySelector('input#id_time'); + inp.value = time; + } + if (duration) { + const inp = form.querySelector('input#id_duration'); + inp.value = duration; + } + } + + window.addEventListener('load', initialize); +})(); \ No newline at end of file diff --git a/ietf/templates/meeting/create_timeslot.html b/ietf/templates/meeting/create_timeslot.html index c3ff73058..75a7af0a8 100755 --- a/ietf/templates/meeting/create_timeslot.html +++ b/ietf/templates/meeting/create_timeslot.html @@ -1,6 +1,6 @@ {% extends "base.html" %} {# Copyright The IETF Trust 2021, All Rights Reserved #} -{% load origin %} +{% load origin static %} {% load bootstrap3 %} {% block pagehead %} @@ -12,7 +12,7 @@ {% block content %} {% origin %}

Create timeslot for {{meeting}}

-
+ {% csrf_token %} {% bootstrap_form form %} {% buttons %} @@ -23,5 +23,6 @@ {% endblock %} {% block js %} + {{ form.media.js }} {% endblock %} \ No newline at end of file diff --git a/ietf/templates/meeting/edit_meeting_schedule.html b/ietf/templates/meeting/edit_meeting_schedule.html index 3bea2dba5..6f6fd6c0b 100644 --- a/ietf/templates/meeting/edit_meeting_schedule.html +++ b/ietf/templates/meeting/edit_meeting_schedule.html @@ -175,48 +175,27 @@
-
- - Sort unassigned: - - + + Sort unassigned: + + - - - -
+ + Show: + {% for p in session_parents %} + + {% endfor %} + -
- - Show: - {% for p in session_parents %} - - {% endfor %} - - - {% if session_purposes|length > 1 %} - - Purpose: - {% for purpose in session_purposes %} - - {% endfor %} - - {% endif %} - - {% if timeslot_types|length > 1 %} - - Type: - {% for type in timeslot_types %} - - {% endfor %} - - {% endif %} -
+ {% if session_purposes|length > 1 %} + + {% endif %} +
@@ -235,14 +214,52 @@
- {% for day, t_groups in timeslot_groups %} -
-
{{ day|date:"M. d" }}
- {% for start, end, key in t_groups %} - +
+ {% for day, t_groups in timeslot_groups %} +
+
{{ day|date:"M. d" }}
+ {% for start, end, key in t_groups %} + + {% endfor %} +
+ {% endfor %} +
+
+ Type: + {% for type in timeslot_types %} + {% endfor %} -
- {% endfor %} +
+
+ +
+ +
+ + + + +