diff --git a/ietf/meeting/tests_js.py b/ietf/meeting/tests_js.py index 7d4dcc312..f7773cba1 100644 --- a/ietf/meeting/tests_js.py +++ b/ietf/meeting/tests_js.py @@ -228,9 +228,21 @@ class EditMeetingScheduleTests(IetfSeleniumTestCase): # hide sessions in area self.assertTrue(s1_element.is_displayed()) self.driver.find_element_by_css_selector(".session-parent-toggles [value=\"{}\"]".format(s1.group.parent.acronym)).click() - self.assertTrue(not s1_element.is_displayed()) + self.assertTrue(s1_element.is_displayed()) # should still be displayed + self.assertIn('hidden-parent', s1_element.get_attribute('class'), + 'Session should be hidden when parent disabled') + s1_element.click() # try to select + self.assertNotIn('selected', s1_element.get_attribute('class'), + 'Session should not be selectable when parent disabled') + self.driver.find_element_by_css_selector(".session-parent-toggles [value=\"{}\"]".format(s1.group.parent.acronym)).click() self.assertTrue(s1_element.is_displayed()) + self.assertNotIn('hidden-parent', s1_element.get_attribute('class'), + 'Session should not be hidden when parent enabled') + s1_element.click() # try to select + self.assertIn('selected', s1_element.get_attribute('class'), + 'Session should be selectable when parent enabled') + # hide timeslots self.driver.find_element_by_css_selector(".timeslot-group-toggles button").click() diff --git a/ietf/static/ietf/css/ietf.css b/ietf/static/ietf/css/ietf.css index f66e600f4..36abdd9ce 100644 --- a/ietf/static/ietf/css/ietf.css +++ b/ietf/static/ietf/css/ietf.css @@ -1175,6 +1175,12 @@ a.fc-event, .fc-event, .fc-content, .fc-title, .fc-event-container { background-color: #ddd; } +.edit-meeting-schedule .session.hidden-parent * { + /* This makes .session.hidden-parent's children transparent but keeps the + * .session itself opaque so the timeslot label does not show through. */ + opacity: 0.7; +} + .edit-meeting-schedule .session.selected .session-label { font-weight: bold; } @@ -1198,7 +1204,7 @@ a.fc-event, .fc-event, .fc-content, .fc-title, .fc-event-container { } .edit-meeting-schedule .timeslot.overfull .session { - border-radius: 0.4em 0 0 0.4em; /* remove bottom rounding to illude to being cut off */ + border-radius: 0.4em 0 0 0.4em; /* remove right-side rounding to allude to being cut off */ margin-right: 0; } diff --git a/ietf/static/ietf/js/edit-meeting-schedule.js b/ietf/static/ietf/js/edit-meeting-schedule.js index 9adf8a032..9b57f9146 100644 --- a/ietf/static/ietf/js/edit-meeting-schedule.js +++ b/ietf/static/ietf/js/edit-meeting-schedule.js @@ -168,7 +168,10 @@ jQuery(document).ready(function () { sessions.on("click", function (event) { event.stopPropagation(); - selectSessionElement(this); + // do not allow hidden sessions to be selected + if (!jQuery(this).hasClass('hidden-parent')) { + selectSessionElement(this); + } }); @@ -478,14 +481,19 @@ jQuery(document).ready(function () { // toggling visible sessions by session parents let sessionParentInputs = content.find(".session-parent-toggles input"); + function setSessionHidden(sess, hide) { + sess.toggleClass('hidden-parent', hide); + sess.prop('draggable', !hide); + } + function updateSessionParentToggling() { let checked = []; sessionParentInputs.filter(":checked").each(function () { checked.push(".parent-" + this.value); }); - sessions.not(".untoggleable").filter(checked.join(",")).show(); - sessions.not(".untoggleable").not(checked.join(",")).hide(); + setSessionHidden(sessions.not(".untoggleable").filter(checked.join(",")), false); + setSessionHidden(sessions.not(".untoggleable").not(checked.join(",")), true); } sessionParentInputs.on("click", updateSessionParentToggling); diff --git a/ietf/templates/meeting/edit_meeting_schedule.html b/ietf/templates/meeting/edit_meeting_schedule.html index 6e451f836..759ea0abe 100644 --- a/ietf/templates/meeting/edit_meeting_schedule.html +++ b/ietf/templates/meeting/edit_meeting_schedule.html @@ -7,7 +7,8 @@ {% block morecss %} {# set the group colors with CSS here #} {% for parent in session_parents %} - .parent-{{ parent.acronym }} { background: linear-gradient(to right, {{ parent.scheduling_color }} 0.4em, transparent 0.5em); } + .parent-{{ parent.acronym }} { background-image: linear-gradient(to right, {{ parent.scheduling_color }} 0.4em, transparent 0.5em); } + .parent-{{ parent.acronym }}.hidden-parent { filter: blur(3px); }{# blur masks contents but keeps the parent color visible #} .parent-{{ parent.acronym }}.selected { background-color: {{ parent.light_scheduling_color }}; } {% endfor %} {% endblock morecss %}