Index: lams_monitoring/web/css/_monitorLesson_base.scss =================================================================== diff -u -r636f9ba7fe62388aa283bda7a815315001834596 -r2832aa7ac13f264889b51d8129e14f25d121bd21 --- lams_monitoring/web/css/_monitorLesson_base.scss (.../_monitorLesson_base.scss) (revision 636f9ba7fe62388aa283bda7a815315001834596) +++ lams_monitoring/web/css/_monitorLesson_base.scss (.../_monitorLesson_base.scss) (revision 2832aa7ac13f264889b51d8129e14f25d121bd21) @@ -309,58 +309,65 @@ text-align: center; width: 100%; height: 100%; - overflow: auto; + overflow: auto; } -div#sequenceCanvas div.learner-icon, #completedLearnersContainer div.learner-icon { - display: inline-block; - border-radius : 20px; - background-color : #FFFFFF; +div#sequenceCanvas div.learner-icon-container { + position: relative; } + +div#sequenceCanvas div.learner-icon-container div.learner-icon, #completedLearnersContainer div.learner-icon { + border-radius: 20px; + background-color: #FFFFFF; +} +div#sequenceCanvas div.learner-icon-container div.learner-icon, div#sequenceCanvas div.learner-icon-container div.more-learner-icon { + position: absolute; +} + #completedLearnersContainer div.learner-icon { - margin-right: 5px; + display: inline-block; + margin-right: 5px; } +div#sequenceCanvas div.more-learner-icon, #completedLearnersContainer div.more-learner-icon { + display: inline-block; + width: 35px; + height: 35px; + line-height: 35px; + font-size: 16px; + border-radius: 20px; + cursor: pointer; + background-color: #e7e7e7; + text-align: center; +} + div#sequenceCanvas div.learner-icon.learner-searched { - border: red 3px solid; - border-radius: 25px; - z-index: 109 !important; + border: red 3px solid; + border-radius: 25px; + z-index: 109 !important; } div#sequenceCanvas div.portrait-generic-sm.learner-icon.learner-searched { - border: none; + border: none; } div#sequenceCanvas div.portrait-generic-sm.learner-icon.learner-searched::before { - border: red 3px solid; - border-radius: 25px; + border: red 3px solid; + border-radius: 25px; } - -div#sequenceCanvas div.more-learner-icon, #completedLearnersContainer div.more-learner-icon { - display: inline-block; - width : 35px; - height : 35px; - line-height : 35px; - font-size : 16px; - border-radius : 20px; - cursor: pointer; - background-color : #e7e7e7; - text-align: center; -} div#sequenceCanvas .activity-requires-attention { - position: absolute; - cursor : pointer; - width: 16px; - height: 16px; + cursor: pointer; + width: 16px; + height: 16px; } #completedLearnersContainer #completedLessonLearnersIcon { - width: 35px; - height: 35px; + width: 35px; + height: 35px; } - + div#sequenceCanvas svg.learningDesignSvg { display: block; overflow: hidden; Index: lams_monitoring/web/includes/javascript/monitorLesson.js =================================================================== diff -u -re22011dc0ff650e5ae0579f5389cd5fcdfd7d5ae -r2832aa7ac13f264889b51d8129e14f25d121bd21 --- lams_monitoring/web/includes/javascript/monitorLesson.js (.../monitorLesson.js) (revision e22011dc0ff650e5ae0579f5389cd5fcdfd7d5ae) +++ lams_monitoring/web/includes/javascript/monitorLesson.js (.../monitorLesson.js) (revision 2832aa7ac13f264889b51d8129e14f25d121bd21) @@ -1568,12 +1568,13 @@ return; } - + /* + activity.requiresAttention = true; if (activity.learners) { - activity.learners = [...activity.learners,...activity.learners,...activity.learners,...activity.learners,...activity.learners,...activity.learners,...activity.learners] + activity.learners = [...activity.learners,...activity.learners,...activity.learners,...activity.learners,...activity.learners,...activity.learners,...activity.learners,...activity.learners] activity.learnerCount = activity.learners.length; } - + */ // add group of users icon var learningDesignSvg = $('svg.learningDesignSvg', sequenceCanvas), @@ -1583,36 +1584,26 @@ isBranching = [10,11,12,13].indexOf(activity.type) > -1, isGate = [3,4,5,14].indexOf(activity.type) > -1, isContainer = [6,7].indexOf(activity.type) > -1, + activityGroup = $('g[id="' + activity.id + '"]', learningDesignSvg), requiresAttentionIcon = activity.requiresAttention ? - $('') + $('') .attr({ 'id' : 'act' + activity.id + 'attention', 'src' : LAMS_URL + 'images/exclamation.svg', 'title' : LABELS.CONTRIBUTE_ATTENTION }) .addClass('activity-requires-attention') - .appendTo(sequenceCanvas) : null, allLearnersIcon = activity.learnerCount > 0 ? - $('
') - .css({ - 'position' : 'absolute' - }) - .attr('id', 'act' + activity.id + 'learnerGroup') - .addClass('more-learner-icon') - : null, - learningDesignSvgViewbox = learningDesignSvg.attr('viewBox').split(' '), - learningDesignSvgInternalLeftOffset = +learningDesignSvgViewbox[0], - learningDesignSvgInternalTopOffset = +learningDesignSvgViewbox[1], - learningDesignSvgExternalOffset = learningDesignSvg.offset(), - activityLeftOffset = learningDesignSvgExternalOffset.left + coord.x - learningDesignSvgInternalLeftOffset + sequenceCanvas.scrollLeft(), - activityTopOffset = learningDesignSvgExternalOffset.top + coord.y - learningDesignSvgInternalTopOffset + sequenceCanvas.scrollTop(); + $('
') + .attr('id', 'act' + activity.id + 'learnerGroup') + .addClass('more-learner-icon') + : null; if (isTool || isGrouping) { if (activity.learnerCount > 0) { // if learners reached the activity, make room for their icons: make activity icon and label smaller and move to top - var activityGroup = $('g[id="' + activity.id + '"]', learningDesignSvg); $('svg', activityGroup).attr({ 'x' : coord.x + 20, 'y' : coord.y + 3, @@ -1628,16 +1619,22 @@ }) .addClass('svg-activity-title-label svg-activity-title-label-small') .appendTo(activityGroup); - + + var learnersContainer = $('
').addClass('learner-icon-container'); + $('').append(learnersContainer).appendTo(activityGroup).attr({ + 'x' : coord.x + 20, + 'y' : coord.y + 40, + 'width' : 184, + 'height' : 40 + }); + $.each(activity.learners, function(learnerIndex, learner){ if (learnerIndex >= 5 && activity.learnerCount > 6) { return false; } $(definePortrait(learner.portraitId, learner.id, STYLE_SMALL, true, LAMS_URL)) .css({ - 'position' : 'absolute', - 'left' : activityLeftOffset + (learnerIndex * (activity.learnerCount < 5 ? 45 : 27)) - 2 + 'px', - 'top' : activityTopOffset - 60 + 'px', + 'left' : learnerIndex * (activity.learnerCount < 5 ? 46 : 28) + 'px', 'z-index' : 100 + learnerIndex }) .addClass('new-popover learner-icon') @@ -1648,76 +1645,83 @@ 'data-portrait' : learner.portraitId, 'data-fullname' : getLearnerDisplayName(learner) }) - .appendTo(sequenceCanvas); + .appendTo(learnersContainer); }); if (activity.learnerCount > 6) { allLearnersIcon .css({ - 'left' : activityLeftOffset + 135 + 'px', - 'top' : activityTopOffset - 60 + 'px', + 'left' : '140px', 'z-index' : 108 }) .text('+' + (activity.learnerCount - 5)) - .appendTo(sequenceCanvas); + .appendTo(learnersContainer); } } if (requiresAttentionIcon) { - requiresAttentionIcon.css({ - 'left' : activityLeftOffset + 157 + 'px', - 'top' : activityTopOffset - 93 + 'px' + $('').append(requiresAttentionIcon).appendTo(activityGroup).attr({ + 'x' : coord.x + 180, + 'y' : coord.y - 1, + 'width' : 20, + 'height' : 20 }); } } else if (isGate) { if (activity.learnerCount > 0) { - allLearnersIcon - .css({ - 'left' : activityLeftOffset + 'px', - 'top' : activityTopOffset - 80 + 'px' - }) - .text(activity.learnerCount) - .appendTo(sequenceCanvas); + $('').append(allLearnersIcon).appendTo(activityGroup).attr({ + 'x' : coord.x + 20, + 'y' : coord.y + 20, + 'width' : 40, + 'height' : 40 + }); + allLearnersIcon.text(activity.learnerCount); } if (requiresAttentionIcon) { - requiresAttentionIcon.css({ - 'left' : activityLeftOffset + 5 + 'px', - 'top' : activityTopOffset - 100 + 'px' + $('').append(requiresAttentionIcon).appendTo(activityGroup).attr({ + 'x' : coord.x + 25, + 'y' : coord.y - 5, + 'width' : 20, + 'height' : 20 }); } } else if (isBranching) { if (activity.learnerCount > 0) { - allLearnersIcon - .css({ - 'left' : activityLeftOffset - 20 + 'px', - 'top' : activityTopOffset - 100 + 'px' - }) - .text(activity.learnerCount) - .appendTo(sequenceCanvas); + $('').append(allLearnersIcon).appendTo(activityGroup).attr({ + 'x' : coord.x, + 'y' : coord.y, + 'width' : 40, + 'height' : 40 + }); + allLearnersIcon.text(activity.learnerCount); } if (requiresAttentionIcon) { - requiresAttentionIcon.css({ - 'left' : activityLeftOffset - 13 + 'px', - 'top' : activityTopOffset - 124 + 'px' + $('').append(requiresAttentionIcon).appendTo(activityGroup).attr({ + 'x' : coord.x + 8, + 'y' : coord.y - 28, + 'width' : 20, + 'height' : 20 }); } } else if (isContainer) { if (activity.learnerCount > 0) { - allLearnersIcon - .css({ - 'left' : activityLeftOffset + coord.width - 50 + 'px', - 'top' : activityTopOffset - 98 + 'px' - }) - .text(activity.learnerCount) - .appendTo(sequenceCanvas); + $('').append(allLearnersIcon).appendTo(activityGroup).attr({ + 'x' : coord.x + coord.width - 20, + 'y' : coord.y - 17, + 'width' : 40, + 'height' : 40 + }); + allLearnersIcon.text(activity.learnerCount); } if (requiresAttentionIcon) { - requiresAttentionIcon.css({ - 'left' : activityLeftOffset - 20 + 'px', - 'top' : activityTopOffset - 80 + 'px' + $('').append(requiresAttentionIcon).appendTo(activityGroup).attr({ + 'x' : coord.x, + 'y' : coord.y + 15, + 'width' : 20, + 'height' : 20 }); } }