Index: lams_central/web/css/_authoring_base.scss =================================================================== diff -u -rc35f49f41499339985cfdeba053d0962ed008e7a -rca9b0a623a0482a1a9144a3f4309622c37c6fc65 --- lams_central/web/css/_authoring_base.scss (.../_authoring_base.scss) (revision c35f49f41499339985cfdeba053d0962ed008e7a) +++ lams_central/web/css/_authoring_base.scss (.../_authoring_base.scss) (revision ca9b0a623a0482a1a9144a3f4309622c37c6fc65) @@ -1,10 +1,3 @@ -/**** Global styles ****/ - -a.ygtvspacer { - border-bottom: none; -} - - /**** Dialog styles ****/ #loadingOverlay { width: 99%; @@ -543,14 +536,95 @@ width: 99%; } +/**** Canvas styles ****/ + #canvas { overflow: auto; vertical-align: top; background: $canvas-dot-background; } +#canvas .tool-activity-border { + fill: none; + stroke: black; + stroke-width: 1; +} + +#canvas .tool-activity-border-require-grouping { + fill: none; + stroke: red; + stroke-width: 3; +} + +#canvas .tool-activity-background { + stroke: none; + fill: white; +} + +#canvas .tool-activity-category-1 { + stroke: none; + fill: #caddfb; +} + +#canvas .tool-activity-category-2 { + stroke: none; + fill: #ffffbb; +} + +#canvas .tool-activity-category-3 { + stroke: none; + fill: #ece9f7; +} + +#canvas .tool-activity-category-4 { + stroke: none; + fill: #fdf1d3; +} + +#canvas .tool-activity-category-5 { + stroke: none; + fill: #caddfb; +} + +#canvas .tool-activity-category-6 { + stroke: none; + fill: #e9f9c0; +} + +#canvas .branching-start { + stroke: black; + fill: green; +} + +#canvas .branching-end { + stroke: black; + fill: red; +} + +#canvas .branching-match { + fill: blue; +} + +#canvas .transition { + stroke-width: 1; + stroke: rgb(119,126,157); + fill: none; +} + +#canvas .transition-element { + stroke: rgb(119,126,157); + fill: rgb(119,126,157); +} + +#canvas .transition-draw { + stroke-width: 2; + stroke: rgb(119,126,157); + stroke-dasharray: 5,3; +} + /**** Template styles */ + #templateErrorMessages { line-height: 200%; border-radius: 4px; Index: lams_central/web/includes/javascript/authoring/authoringActivity.js =================================================================== diff -u -r03cc560d4b04a36d17fe2d914fbbc93b16b65a89 -rca9b0a623a0482a1a9144a3f4309622c37c6fc65 --- lams_central/web/includes/javascript/authoring/authoringActivity.js (.../authoringActivity.js) (revision 03cc560d4b04a36d17fe2d914fbbc93b16b65a89) +++ lams_central/web/includes/javascript/authoring/authoringActivity.js (.../authoringActivity.js) (revision ca9b0a623a0482a1a9144a3f4309622c37c6fc65) @@ -394,11 +394,7 @@ 'y' : y + 8 }) ) - .attr({ - 'stroke' : layout.colors.activityBorder, - 'fill' : this.isStart ? layout.colors.branchingEdgeStart - : layout.colors.branchingEdgeEnd - }), + .addClass('branching-' + (this.isStart ? 'start' : 'end')), title = this.branchingActivity.title, label = paper.text(x + 8, y + 27, title + ' ' + (this.isStart ? LABELS.BRANCHING_START_SUFFIX : LABELS.BRANCHING_END_SUFFIX)) @@ -691,29 +687,18 @@ } // create activity SVG elements - var curve = layout.conf.activityBorderCurve, - width = layout.conf.activityWidth, - height = layout.conf.activityHeight, - bannerWidth = layout.conf.activityBannerWidth, + var curve = layout.activity.borderCurve, + width = layout.activity.width, + height = layout.activity.height, + bannerWidth = layout.activity.bannerWidth, bannerPath = 'M ' + (x + curve) + ' ' + (y + height) + ' q ' + -curve + ' 0 ' + -curve + ' ' + -curve + ' v ' + (-height + 2 * curve) + ' q 0 ' + -curve + ' ' + curve + ' ' + -curve, shapePath = bannerPath + ' h ' + (width - 2 * curve) + ' q ' + curve + ' 0 ' + curve + ' ' + curve + ' v ' + (height - 2 * curve) + ' q 0 ' + curve + ' ' + -curve + ' ' + curve + ' z', shape = paper.path(shapePath) - // activity colour depends on its category ID - .attr({ - 'stroke' : 'none', - 'fill' : '#fff' - }), + .addClass('tool-activity-background'), shapeBorder = paper.path(shapePath) - // activity colour depends on its category ID - .attr({ - 'stroke' : this.requireGrouping - ? layout.colors.activityRequireGrouping - : '#000', - 'stroke-width' : this.requireGrouping ? 3 : 1, - 'fill' : 'none' - }), + .addClass('tool-activity-border' + (this.requireGrouping ? '-require-grouping' : '')), // check for icon in the library imageData = null, // ActivityIcons[this.learningLibraryID], icon = imageData ? paper.image(imageData, x + 5, y + 3, 20, 20) : null, @@ -727,10 +712,7 @@ bannerPath += ' h ' + bannerWidth + ' v ' + height + ' z'; var banner = paper.path(bannerPath) - .attr({ - 'stroke' : 'none', - 'fill' : layout.colors.activity[layout.toolMetadata[this.learningLibraryID].activityCategoryID] - }); + .addClass('tool-activity-category-' + layout.toolMetadata[this.learningLibraryID].activityCategoryID); this.items = paper.g(shape, banner, shapeBorder, label); if (icon) { @@ -762,7 +744,7 @@ this.items = paper.g(); var points = ActivityLib.findTransitionPoints(this.fromActivity, this.toActivity), - curve = layout.conf.transitionCurve, + curve = layout.transition.curve, threshold = 2 * curve + 2; if (points) { @@ -811,16 +793,13 @@ path += Snap.format(' L {endX} {endY}', points); } - this.items.shape = paper.path(path).attr({ - 'fill' : 'none', - 'stroke' : layout.colors.transition - }); + this.items.shape = paper.path(path).addClass('transition'); this.items.append(this.items.shape); var dot = null, - radius = layout.conf.transitionCircleRadius, + radius = layout.transition.dotRadius, triangle = null, - side = layout.conf.transitionArrowLength; + side = layout.transition.arrowLength; switch (points.direction) { case 'up' : @@ -841,16 +820,10 @@ break; } - dot.attr({ - 'fill' : layout.colors.transition, - 'stroke' : layout.colors.transition, - }); + dot.addClass('transition-element'); this.items.append(dot); - triangle.attr({ - 'fill' : layout.colors.transition, - 'stroke' : layout.colors.transition, - }); + triangle.addClass('transition-element'); this.items.append(triangle); @@ -987,20 +960,15 @@ // do not draw twice if it already exists if (!activity.items.groupingEffect) { var shape = activity.items.shape, - activityBox = activity.items.getBBox(), - activityBorderColor = layout.colors.toolActivityBorder[layout.toolMetadata[activity.learningLibraryID].activityCategoryID]; - + activityBox = activity.items.getBBox(); + activity.items.groupingEffect = paper.rect( - activityBox.x + layout.conf.groupingEffectPadding, - activityBox.y + layout.conf.groupingEffectPadding, - activityBox.width, - activityBox.height, - 5, 5) - .attr({ - 'stroke' : activityBorderColor, - 'stroke-width' : '2', - 'fill' : shape.attr('fill') - }); + activityBox.x + layout.conf.groupingEffectPadding, + activityBox.y + layout.conf.groupingEffectPadding, + activityBox.width, + activityBox.height, + 5, 5) + .addClass('tool-activity-border'); activity.items.prepend(activity.items.groupingEffect); Index: lams_central/web/includes/javascript/authoring/authoringGeneral.js =================================================================== diff -u -r03cc560d4b04a36d17fe2d914fbbc93b16b65a89 -rca9b0a623a0482a1a9144a3f4309622c37c6fc65 --- lams_central/web/includes/javascript/authoring/authoringGeneral.js (.../authoringGeneral.js) (revision 03cc560d4b04a36d17fe2d914fbbc93b16b65a89) +++ lams_central/web/includes/javascript/authoring/authoringGeneral.js (.../authoringGeneral.js) (revision ca9b0a623a0482a1a9144a3f4309622c37c6fc65) @@ -76,35 +76,28 @@ // will be initialised when paper gets created 'readOnlyFilter' : null, - 'activityWidth' : 200, - 'activityHeight' : 80, - 'activityBorderCurve' : 5, - 'activityBannerWidth' : 10, + - // the bigger this number, the larger bezier curves will be - 'transitionCurve' : 15, - 'transitionCircleRadius' : 5, - 'transitionArrowLength' : 5, - // snapping grid step when dragging an activity 'snapGridX' : 100, 'snapGridY' : 150 }, + 'activity' : { + 'width' : 200, + 'height' : 80, + 'borderCurve' : 5, + 'bannerWidth' : 10 + }, + + 'transition' : { + 'curve' : 15, + 'dotRadius' : 3, + 'arrowLength' : 5 + }, + 'colors' : { 'activityBorder' : 'black', - - /* - * Colours depend on activity category. - * CATEGORY_SYSTEM = 1; - CATEGORY_COLLABORATION = 2; - CATEGORY_ASSESSMENT = 3; - CATEGORY_CONTENT = 4; - CATEGORY_SPLIT = 5; - CATEGORY_RESPONSE = 6; - */ - 'toolActivityBorder' : ['','#00007f','#ff8300','#625F67','#ffa500','#00007f','#7aa712'], - 'activity' : ['','#caddfb','#ffffbb','#ece9f7','#fdf1d3','#caddfb','#e9f9c0'], 'activityText' : 'black', // default region colour 'annotation' : '#CCFF99', @@ -116,10 +109,6 @@ // when mouse hovers over rubbish bin 'binSelect' : 'red', - 'branchingEdgeStart' : 'green', - 'branchingEdgeEnd' : 'red', - // highlight branching edges on mouse hover - 'branchingEdgeMatch' : 'blue', 'gate' : 'red', 'gateBorder' : '#801515', 'gateText' : 'white', @@ -129,9 +118,7 @@ 'optionalActivityBorder' : '#00007f', // dashed border around a selected activity 'selectEffect' : 'black', - 'transition' : 'rgb(119,126,157)', // highlight TBL activities which should be grouped - 'activityRequireGrouping' : 'red', 'activityReadOnly' : 'red' }, Index: lams_central/web/includes/javascript/authoring/authoringHandler.js =================================================================== diff -u -r8e35b634966400208e300c04d80ca64ae7a5aa01 -rca9b0a623a0482a1a9144a3f4309622c37c6fc65 --- lams_central/web/includes/javascript/authoring/authoringHandler.js (.../authoringHandler.js) (revision 8e35b634966400208e300c04d80ca64ae7a5aa01) +++ lams_central/web/includes/javascript/authoring/authoringHandler.js (.../authoringHandler.js) (revision ca9b0a623a0482a1a9144a3f4309622c37c6fc65) @@ -413,8 +413,8 @@ startItems = branchingActivity.start.items, endItems = branchingActivity.end.items; if (!startItems.isDragged && !endItems.isDragged) { - startItems.shape.attr('fill', layout.colors.branchingEdgeMatch); - endItems.shape.attr('fill', layout.colors.branchingEdgeMatch); + startItems.shape.addClass('branching-match'); + endItems.shape.addClass('branching-match'); } }, @@ -428,8 +428,8 @@ endItems = branchingActivity.end.items; if (!startItems.isDragged && !endItems.isDragged) { - startItems.shape.attr('fill', layout.colors.branchingEdgeStart); - endItems.shape.attr('fill', layout.colors.branchingEdgeEnd); + startItems.shape.removeClass('branching-match'); + endItems.shape.removeClass('branching-match'); } } }, @@ -725,11 +725,7 @@ 'endX' : endX, 'endY' : endY })) - .attr({ - 'stroke' : layout.colors.transition, - 'stroke-width' : 2, - 'stroke-dasharray' : '5,3' - }) + .addClass('transition-draw') ); },