Blur sessions for hidden areas instead of hiding entirely. Fixes ietf-tools#3218. Commit ready for merge.

 - Legacy-Id: 19134

Author: jennifer-richards

ietf/meeting/tests_js.py

@@ -228,9 +228,21 @@ def test_edit_meeting_schedule(self):
         # 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()

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

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);

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 %}