Improve visibility of other sessions for group of selected session in schedule editor. Fixes ietf-tools#3219. Commit ready for merge.

 - Legacy-Id: 19135

Author: jennifer-richards

ietf/meeting/tests_js.py

@@ -108,8 +108,15 @@ def test_edit_meeting_schedule(self):
 
         # select - show session info
         s2_element = self.driver.find_element_by_css_selector('#session{}'.format(s2.pk))
+        s2b_element = self.driver.find_element_by_css_selector('#session{}'.format(s2b.pk))
+        self.assertNotIn('other-session-selected', s2b_element.get_attribute('class'))
         s2_element.click()
 
+        # other session for group should be flagged for highlighting
+        s2b_element = self.driver.find_element_by_css_selector('#session{}'.format(s2b.pk))
+        self.assertIn('other-session-selected', s2b_element.get_attribute('class'))
+
+        # other session for group should appear in the info panel
         session_info_container = self.driver.find_element_by_css_selector('.session-info-container')
         self.assertIn(s2.group.acronym, session_info_container.find_element_by_css_selector(".title").text)
         self.assertEqual(session_info_container.find_element_by_css_selector(".other-session .time").text, "not yet scheduled")
@@ -118,6 +125,7 @@ def test_edit_meeting_schedule(self):
         self.driver.find_element_by_css_selector('.scheduling-panel').click()
 
         self.assertEqual(session_info_container.find_elements_by_css_selector(".title"), [])
+        self.assertNotIn('other-session-selected', s2b_element.get_attribute('class'))
 
         # unschedule
 

ietf/static/ietf/css/ietf.css

@@ -1164,6 +1164,11 @@ a.fc-event, .fc-event, .fc-content, .fc-title, .fc-event-container {
 
 .edit-meeting-schedule .session.selected {
   cursor: grabbing;
+  outline: #0000ff solid 0.2em; /* blue, width matches margin on .session */
+}
+
+.edit-meeting-schedule .session.other-session-selected {
+  outline: #00008b solid 0.2em; /* darkblue, width matches margin on .session */
 }
 
 .edit-meeting-schedule .read-only .session.selected {
@@ -1186,6 +1191,7 @@ a.fc-event, .fc-event, .fc-content, .fc-title, .fc-event-container {
 }
 
 .edit-meeting-schedule .session.highlight {
+  outline-color: #ff8c00;  /* darkorange */
   background-color: #f3f3f3;
 }
 
@@ -1427,7 +1433,6 @@ a.fc-event, .fc-event, .fc-content, .fc-title, .fc-event-container {
   height: 19px;
   top: 0px;
   font-size: 13px;
-  overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   cursor: pointer;

ietf/static/ietf/js/edit-meeting-schedule.js

@@ -40,6 +40,7 @@ jQuery(document).ready(function () {
 
     // selecting
     function selectSessionElement(element) {
+        sessions.removeClass("other-session-selected");
         if (element) {
             sessions.not(element).removeClass("selected");
             jQuery(element).addClass("selected");
@@ -54,8 +55,11 @@ jQuery(document).ready(function () {
             sessionInfoContainer.find(".time").text(jQuery(element).closest(".timeslot").data('scheduledatlabel'));
 
             sessionInfoContainer.find(".other-session").each(function () {
-                let scheduledAt = sessions.filter("#session" + this.dataset.othersessionid).closest(".timeslot").data('scheduledatlabel');
+                let otherSessionElement = sessions.filter("#session" + this.dataset.othersessionid).first();
+                let scheduledAt = otherSessionElement.closest(".timeslot").data('scheduledatlabel');
                 let timeElement = jQuery(this).find(".time");
+
+                otherSessionElement.addClass("other-session-selected");
                 if (scheduledAt)
                     timeElement.text(timeElement.data("scheduled").replace("{time}", scheduledAt));
                 else

ietf/templates/meeting/edit_meeting_schedule.html

@@ -10,6 +10,7 @@
     .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 }}; }
+    .parent-{{ parent.acronym }}.other-session-selected { background-color: {{ parent.light_scheduling_color }}; }
   {% endfor %}
 {% endblock morecss %}