From e7f5acaece1598251b022ffade4fb678d45ece55 Mon Sep 17 00:00:00 2001 From: Peter Cottle Date: Sun, 7 Jul 2013 21:01:06 -0700 Subject: [PATCH] awesome faded branches for level comparing done --- build/bundle.js | 68 +-- build/main.4c3b3cd5.css | 1127 ----------------------------------- index.html | 2 +- src/js/intl/strings.js | 5 + src/js/level/index.js | 5 +- src/js/views/index.js | 2 +- src/js/visuals/visBranch.js | 22 +- src/style/main.css | 6 + 8 files changed, 43 insertions(+), 1194 deletions(-) delete mode 100644 build/main.4c3b3cd5.css diff --git a/build/bundle.js b/build/bundle.js index c3ad5dde..8a43d5d0 100644 --- a/build/bundle.js +++ b/build/bundle.js @@ -5826,6 +5826,11 @@ require.define("/src/js/intl/strings.js",function(require,module,exports,__dirna 'fr_FR': 'Cible à atteindre' }, /////////////////////////////////////////////////////////////////////////// + 'goal-only-master': { + '__desc__': 'the helper message for the window that shows the goal tree when the goal will only be compared using the master branch', + 'en_US': 'Note: Only the master branch will be checked in this level. The other branches are simply for reference (shown as dashed labels below). As always, you can hide this dialog with "hide goal"' + }, + /////////////////////////////////////////////////////////////////////////// 'hide-goal': { '__desc__': 'the helper message for the window that shows the goal tree', 'en_US': 'You can hide this window with "hide goal"', @@ -6263,8 +6268,11 @@ var Level = Sandbox.extend({ }, initGoalVisualization: function() { + var onlyMaster = TreeCompare.onlyMasterCompared(this.level); // first we make the goal visualization holder - this.goalCanvasHolder = new CanvasTerminalHolder(); + this.goalCanvasHolder = new CanvasTerminalHolder({ + text: (onlyMaster) ? intl.str('goal-only-master') : undefined + }); // then we make a visualization. the "el" here is the element to // track for size information. the container is where the canvas will be placed @@ -11257,7 +11265,7 @@ var CanvasTerminalHolder = BaseView.extend({ this.destination = $('body'); this.JSON = { title: options.title || intl.str('goal-to-reach'), - text: options.text || intl.str('hide-goal') + text: options.text || intl.str('goal-vis-info') }; this.render(); @@ -17519,24 +17527,6 @@ var VisBranch = VisBase.extend({ }); }, - getArrowOpacity: function() { - if (this.getIsGoalAndNotCompared() && - !this.get('isHead') && - this.getBranchStackIndex() === 0) { - return 0.5; - } - return this.getNonTextOpacity(); - }, - - getRectOpacity: function() { - if (this.getIsGoalAndNotCompared() && - !this.get('isHead') && - this.getBranchStackIndex() === 0) { - return 0.8; - } - return this.getNonTextOpacity(); - }, - getNonTextOpacity: function() { if (this.get('isHead')) { return this.gitEngine.getDetachedHead() ? 1 : 0; @@ -17596,7 +17586,7 @@ var VisBranch = VisBase.extend({ y: rectPos.y, width: rectSize.w, height: rectSize.h, - opacity: this.getRectOpacity(), + opacity: this.getNonTextOpacity(), fill: this.getFill(), stroke: this.get('stroke'), 'stroke-dasharray': dashArray, @@ -17604,7 +17594,7 @@ var VisBranch = VisBase.extend({ }, arrow: { path: arrowPath, - opacity: this.getArrowOpacity(), + opacity: this.getNonTextOpacity(), fill: this.getFill(), stroke: this.get('stroke'), transform: this.getArrowTransform(), @@ -27047,6 +27037,11 @@ require.define("/src/js/intl/strings.js",function(require,module,exports,__dirna 'fr_FR': 'Cible à atteindre' }, /////////////////////////////////////////////////////////////////////////// + 'goal-only-master': { + '__desc__': 'the helper message for the window that shows the goal tree when the goal will only be compared using the master branch', + 'en_US': 'Note: Only the master branch will be checked in this level. The other branches are simply for reference (shown as dashed labels below). As always, you can hide this dialog with "hide goal"' + }, + /////////////////////////////////////////////////////////////////////////// 'hide-goal': { '__desc__': 'the helper message for the window that shows the goal tree', 'en_US': 'You can hide this window with "hide goal"', @@ -27854,8 +27849,11 @@ var Level = Sandbox.extend({ }, initGoalVisualization: function() { + var onlyMaster = TreeCompare.onlyMasterCompared(this.level); // first we make the goal visualization holder - this.goalCanvasHolder = new CanvasTerminalHolder(); + this.goalCanvasHolder = new CanvasTerminalHolder({ + text: (onlyMaster) ? intl.str('goal-only-master') : undefined + }); // then we make a visualization. the "el" here is the element to // track for size information. the container is where the canvas will be placed @@ -31615,7 +31613,7 @@ var CanvasTerminalHolder = BaseView.extend({ this.destination = $('body'); this.JSON = { title: options.title || intl.str('goal-to-reach'), - text: options.text || intl.str('hide-goal') + text: options.text || intl.str('goal-vis-info') }; this.render(); @@ -34148,24 +34146,6 @@ var VisBranch = VisBase.extend({ }); }, - getArrowOpacity: function() { - if (this.getIsGoalAndNotCompared() && - !this.get('isHead') && - this.getBranchStackIndex() === 0) { - return 0.5; - } - return this.getNonTextOpacity(); - }, - - getRectOpacity: function() { - if (this.getIsGoalAndNotCompared() && - !this.get('isHead') && - this.getBranchStackIndex() === 0) { - return 0.8; - } - return this.getNonTextOpacity(); - }, - getNonTextOpacity: function() { if (this.get('isHead')) { return this.gitEngine.getDetachedHead() ? 1 : 0; @@ -34225,7 +34205,7 @@ var VisBranch = VisBase.extend({ y: rectPos.y, width: rectSize.w, height: rectSize.h, - opacity: this.getRectOpacity(), + opacity: this.getNonTextOpacity(), fill: this.getFill(), stroke: this.get('stroke'), 'stroke-dasharray': dashArray, @@ -34233,7 +34213,7 @@ var VisBranch = VisBase.extend({ }, arrow: { path: arrowPath, - opacity: this.getArrowOpacity(), + opacity: this.getNonTextOpacity(), fill: this.getFill(), stroke: this.get('stroke'), transform: this.getArrowTransform(), diff --git a/build/main.4c3b3cd5.css b/build/main.4c3b3cd5.css deleted file mode 100644 index c172f6d4..00000000 --- a/build/main.4c3b3cd5.css +++ /dev/null @@ -1,1127 +0,0 @@ -html { - height: 100%; -} - -body { - margin: 0px; - border: 0px; - padding: 0px; - overflow: hidden; -} - -html, body { - font-family: Monaco, Courier, font-monospace; - color: #eee; -} - -li { - margin: 10px 0; -} - -code { - background: grey; - padding: 4px; - border: 1px solid #333; -} - -p { - word-wrap: break-word; -} - -div.modalTerminal a { - color: rgb(253, 152, 209); - font-weight: bold; -} - -div.modalTerminal p { - line-height: 24px; - margin: 1.5em 0; -} - -.textAlignCenter { - text-align: center; -} - -/* Box Model */ -html, -body, -.box { - display: box; - display: -moz-box; - display: -webkit-box; -} - -body, -.flex1 { - -webkit-box-flex: 1; - -moz-box-flex: 1; - -ms-box-flex: 1; - box-flex: 1; -} - -.flex2 { - -webkit-box-flex: 2; - -moz-box-flex: 2; - -ms-box-flex: 2; - box-flex: 2; -} - -.flex3 { - -webkit-box-flex: 3; - -moz-box-flex: 3; - -ms-box-flex: 3; - box-flex: 3; -} - -.flex10 { - -webkit-box-flex: 10; - -moz-box-flex: 10; - -ms-box-flex: 10; - box-flex: 10; -} - -html, -body, -.vertical { - -webkit-box-orient: vertical; - -moz-box-orient: vertical; - -ms-box-orient: vertical; - box-orient: vertical; -} - -.horizontal { - -webkit-box-orient: horizontal; - -moz-box-orient: horizontal; - -ms-box-orient: horizontal; - box-orient: horizontal; -} - -.centerAlign { - -webkit-box-align: center; - -moz-box-align: center; - -ms-box-align: center; - box-align: center; -} - -.startAlign { - -webkit-box-align: start; - -moz-box-align: start; - -ms-box-align: start; - box-align: start; -} - -.center { - -webkit-box-pack: center; - -moz-box-pack: center; - -ms-box-pack: center; - box-pack: center; -} - -.justify { - -webkit-box-pack: justify; - -moz-box-pack: justify; - -ms-box-pack: justify; - box-pack: justify; -} - -/* Transition */ -.transitionBackground { - -webkit-transition: background 700ms cubic-bezier(0.260, 0.860, 0.440, 0.985); - -moz-transition: background 700ms cubic-bezier(0.260, 0.860, 0.440, 0.985); - -ms-transition: background 700ms cubic-bezier(0.260, 0.860, 0.440, 0.985); - -o-transition: background 700ms cubic-bezier(0.260, 0.860, 0.440, 0.985); - transition: background 700ms cubic-bezier(0.260, 0.860, 0.440, 0.985); -} - -.transitionTransform { - -webkit-transition: -webkit-transform 700ms cubic-bezier(0.260, 0.860, 0.440, 0.985); - -moz-transition: -moz-transform 700ms cubic-bezier(0.260, 0.860, 0.440, 0.985); - -ms-transition: -ms-transform 700ms cubic-bezier(0.260, 0.860, 0.440, 0.985); - -o-transition: -o-transform 700ms cubic-bezier(0.260, 0.860, 0.440, 0.985); - transition: transform 700ms cubic-bezier(0.260, 0.860, 0.440, 0.985); -} - -.transitionOpacity { - -webkit-transition: opacity 700ms cubic-bezier(0.260, 0.860, 0.440, 0.985); - -moz-transition: opacity 700ms cubic-bezier(0.260, 0.860, 0.440, 0.985); - -ms-transition: opacity 700ms cubic-bezier(0.260, 0.860, 0.440, 0.985); - -o-transition: opacity 700ms cubic-bezier(0.260, 0.860, 0.440, 0.985); - transition: opacity 700ms cubic-bezier(0.260, 0.860, 0.440, 0.985); -} - -.transitionOpacityLinear { - -webkit-transition: opacity 700ms linear; - -moz-transition: opacity 700ms linear; - -ms-transition: opacity 700ms linear; - -o-transition: opacity 700ms linear; - transition: opacity 700ms linear; -} - - -.transitionOpacitySlow { - -webkit-transition: opacity 1700ms cubic-bezier(0.260, 0.860, 0.440, 0.985); - -moz-transition: opacity 1700ms cubic-bezier(0.260, 0.860, 0.440, 0.985); - -ms-transition: opacity 1700ms cubic-bezier(0.260, 0.860, 0.440, 0.985); - -o-transition: opacity 1700ms cubic-bezier(0.260, 0.860, 0.440, 0.985); - transition: opacity 1700ms cubic-bezier(0.260, 0.860, 0.440, 0.985); -} - -.transitionAll { - -webkit-transition: all 700ms cubic-bezier(0.260, 0.860, 0.440, 0.985); - -moz-transition: all 700ms cubic-bezier(0.260, 0.860, 0.440, 0.985); - -ms-transition: all 700ms cubic-bezier(0.260, 0.860, 0.440, 0.985); - -o-transition: all 700ms cubic-bezier(0.260, 0.860, 0.440, 0.985); - transition: all 700ms cubic-bezier(0.260, 0.860, 0.440, 0.985); -} - -.transitionAllSlow { - -webkit-transition: all 1700ms cubic-bezier(0.260, 0.860, 0.440, 0.985); - -moz-transition: all 1700ms cubic-bezier(0.260, 0.860, 0.440, 0.985); - -ms-transition: all 1700ms cubic-bezier(0.260, 0.860, 0.440, 0.985); - -o-transition: all 1700ms cubic-bezier(0.260, 0.860, 0.440, 0.985); - transition: all 1700ms cubic-bezier(0.260, 0.860, 0.440, 0.985); -} - -/* Some interface things */ - -div.canvasTerminalHolder { - width: 100%; - height: 100%; - position: fixed; - top: 0; - left: 0; -} - -#canvasHolder { - position: absolute; - top: 0; - left: 0; - width: 100%; -} - -div.gitDemonstrationView > div.visHolder, -.visBackgroundColor { - background: #5cbcfc; - background-color: #5cbcfc; -} - -#interfaceWrapper { - min-width: 600px; - min-height: 600px; -} - -div.canvasTerminalHolder > div.terminal-window-holder { - margin: 100px 0; - height: 100%; - -webkit-transform: translate3d(0,0,0); - -moz-transform: translate3d(0,0,0); - -o-transform: translate3d(0,0,0); - -ms-transform: translate3d(0,0,0); - transform: translate3d(0,0,0); -} - -div.canvasTerminalHolder > div.terminal-window-holder.slideOut { - -webkit-transform: translate3d(-150%,0,0); - -moz-transform: translate3d(-150%,0,0); - -o-transform: translate3d(-150%,0,0); - -ms-transform: translate3d(-150%,0,0); - transform: translate3d(-150%,0,0); -} - - -div.canvasTerminalHolder > div.terminal-window-holder > div.wrapper { - margin: 0 20px 0px 20px; - height: 80%; - box-shadow: 0 0 30px rgb(0,0,0); - cursor: pointer; -} - -div.canvasTerminalHolder > div.terminal-window-holder div.terminal-text { - padding: 5px 10px; -} - -div.canvasTerminalHolder > div.terminal-window-holder div.toolbar, -div.canvasTerminalHolder > div.terminal-window-holder div.terminal-text, -div.canvasTerminalHolder > div.terminal-window-holder div.inside { - border: 0px; -} - -div.canvasTerminalHolder > div.terminal-window-holder div.terminal-text, -div.canvasTerminalHolder > div.terminal-window-holder div.inside { - background: #ff4c7e; -} - -div.canvasTerminalHolder.startTree > div.terminal-window-holder div.terminal-text, -div.canvasTerminalHolder.startTree > div.terminal-window-holder div.inside { - background: #4CA2FF; -} - -div.canvasTerminalHolder > div.terminal-window-holder div.inside { - min-height: 200px; - border-radius: 0 0 5px 5px; -} - -#controls { - max-width: 400px; -} - -div.canvasTerminalHolder > div.terminal-window-holder { - max-width: 500px; -} - -/* Toolbar */ - -div.toolbar { - /* borrowed from try.github.com along with a bunch of other things */ - background-image: -webkit-linear-gradient(top, #EFEDEE, #C1C1C1); - background-image: -moz-linear-gradient(top, #EFEDEE, #C1C1C1); - background-image: -o-linear-gradient(top, #EFEDEE, #C1C1C1); - background-image: -ms-linear-gradient(top, #EFEDEE, #C1C1C1); - background-image: linear-gradient(top, #EFEDEE, #C1C1C1); - - border-radius: 5px; - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; - border: 1px solid #6287A4; - border-bottom: 0; - height: 30px; - position: relative; - text-align: center; - font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; - font-size: 14px; - color: #333; -} - -div.toolbar.level-toolbar { - background-image: -webkit-linear-gradient(top, #B2FF2E, #8AD247); - background-image: -moz-linear-gradient(top, #B2FF2E, #8AD247); - background-image: -o-linear-gradient(top, #B2FF2E, #8AD247); - background-image: -ms-linear-gradient(top, #B2FF2E, #8AD247); - background-image: linear-gradient(top, #B2FF2E, #8AD247); - border-radius: 0; - height: 50px; -} - -span.levelToolbarSpan { - font-weight: 800; - font-style: italic; -} - -div.toolbar.level-toolbar.hidden { - opacity: 0; - height: 0px; -} - -div.toolbar > div.controls { - position: absolute; - top: 9px; - left: 9px; - width: 57px; - height: 13px; -} - -div.toolbar > div.controls div i { - text-shadow: 0.1em 0.1em rgba(255, 255, 255, 0.5); -} - -div.toolbar > div.controls div.box.flex1 { - text-align: center; -} - -div.toolbar > div.controls div.box.flex1 div { - border-radius: 100%; - display: inline-block; - width: 12px; - height: 12px; - margin: 1px 0 0 1px; - position: relative; - text-indent: -9999px; - cursor: default; - - -webkit-box-shadow: 0 2px 0 rgba(255, 255, 255, .8), inset 0 0 3px 1px rgba(0, 0, 0, .6), 0 -1px 1px 1px rgba(0, 0, 0, .4); - box-shadow: 0 2px 0 rgba(255, 255, 255, .8), inset 0 0 3px 1px rgba(0, 0, 0, .6), 0 -1px 1px 1px rgba(0, 0, 0, .4); - - background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 50%, #fff 95%, #fff 100%); - background-image: -moz-linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 50%, #fff 95%, #fff 100%); - background-image: -o-linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 50%, #fff 95%, #fff 100%); - background-image: -ms-linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 50%, #fff 95%, #fff 100%); - background-image: linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 50%, #fff 95%, #fff 100%); -} - -div.toolbar > div.controls div.box.flex1 div:hover { - -} - -div.controls div.box.flex1 div.close { - background-color: #fb625f; -} - -div.controls div.box.flex1 div.minimize { - background-color: #f9c57a; -} - -div.controls div.box.flex1 div.plus { - background-color: #8ac872; -} - -/* Command Line */ - -p.commandLine, -div.commandLineResult { - opacity: 1; - font-size: 16px; - margin: 0px; -} - -div.commandLineWarnings p, -div.commandLineResult p { - margin: 0px; -} - -div.commandLineResult p:first-child, -div.commandLineWarnings p:first-child { - padding-top: 8px; -} - -div.commandLineResult p:last-child, -div.commandLineWarnings p:last-child { - padding-bottom: 8px; -} - -div.commandLineWarnings p i.icon-exclamation-sign { - color: yellow; - margin-right: 5px; -} - -p.commandLine span.icons { - float: right; -} - -p.commandLine span.icons i:last-child { - margin-right: 5px; -} - -p.commandLine span.icons i:first-child { - margin-left: 5px; -} - -p.commandLine span.icons i { - opacity: 0; -} - -p.commandLine.inqueue span.icons i.icon-check-empty, -p.commandLine.error span.icons i.icon-exclamation-sign, -p.commandLine.warning span.icons i.icon-exclamation-sign, -p.commandLine.processing span.icons i.icon-retweet, -p.commandLine.finished span.icons i.icon-check { - opacity: 1; -} - -p.commandLine.warning span.icons { - background: #E0FF00; - background-color: #E0FF00; - color: #333; -} - -p.commandLine.inqueue span.icons { - background: #EBEB24; - background-color: #EBEB24; - color: #333; -} - -p.commandLine.processing span.icons { - background: #88E748; - background-color: #88E748; - color: #333; -} - -p.commandLine.finished span.icons { - background: #0066cc; - background-color: #0066cc; - color: white; -} - -p.commandLine.error span.icons { - background: red; - background-color: red; -} - -p.commandResult { - color: blue; -} - -p.commandError, p.errorResult { - color: red; -} - -#commandLineBar #prompt span.promptSign, -p.commandLine span.prompt { - color: greenyellow; - font-weight: bold; -} - -#commandLineBar p.command { - margin: 0; - margin-left: 12px; -} - -#commandLineBar #commandTextField { - position: absolute; - top: -1000px; - left: -1000px; -} - -#commandLineHistory { - margin: 10px; - border-radius: 5px; - box-shadow: 1px 0px 15px rgba(100, 100, 100, 1); -} - -#commandLineHistory #terminal.scrolling { - overflow-y: scroll; - overflow-x: hidden; -} - -#prompt { - text-align: left; - position: relative; - min-height: 22px; -} - -#prompt span { - padding: 0px; - margin: 0px; - border: 0px; - position: absolute; -} - -#prompt span.cursor { - background: #DDD; - opacity: 0; - margin-left: 12px; -} - -#prompt span.cursor.shown { - opacity: 0.7; -} - -#commandLineBar, -.terminal-window .inside, -li.rebaseEntry, -#terminal { - background: #424242; -} - -#terminal, -.terminal-window .inside, -#commandLineBar { - border: 1px solid #303030; -} - -#terminal { - border-bottom: 0; - padding: 0 5px; -} - -.helperBar { - position: absolute; - bottom: 0px; - right: 0px; - background: #424242; - padding: 4px 10px; - border-radius: 5px 0 0 0; - border: 2px solid #EFEDEE; - border-bottom: 0; - border-right: 0; - box-shadow: -1px -1px 5px rgba(0,0,0,0.3); - font-weight: bold; -} - -.helperBar i { - cursor: pointer; -} - -.helperBar a { - cursor: pointer; - font-style: italic; -} - -.helperBar a:after { - content: ' \b7'; - font-style: normal; -} - -.helperBar a:last-child:after { - content: ''; -} - -div.helperBar { - -webkit-transform: translate3d(150%,0,0); - -moz-transform: translate3d(150%,0,0); - -o-transform: translate3d(150%,0,0); - -ms-transform: translate3d(150%,0,0); - transform: translate3d(150%,0,0); -} - -div.helperBar.show { - -webkit-transform: translate3d(0,0,0); - -moz-transform: translate3d(0,0,0); - -o-transform: translate3d(0,0,0); - -ms-transform: translate3d(0,0,0); - transform: translate3d(0,0,0); -} - -#commandLineBar, -.terminal-window .inside { - border-top: 0; - border-radius: 0 0 5px 5px; - padding: 3px; -} - -/* interactive rebase CSS */ -.iRebaseDialog.wrapper { - padding: 20px; -} - -#dialogHolder.shown .iRebaseDialog.wrapper { - margin-top: 30%; -} - -p.helperText, -div.terminal-text p.helperText, -.iRebaseDialog p.helperText { - font-size: 10px; -} - -.iRebaseDialog p.helperText { - color: #999; - margin: 0; - padding: 0; -} - -.iRebaseDialog div.entryHolders { - width: 300px; - margin-left: auto; - margin-right: auto; -} - -.iRebaseDialog div.entryHolders ul.rebaseEntries { - list-style-type: none; - -webkit-padding-start: 0; - -moz-padding-start: 0; - /* optimism, lol */ - -o-padding-start: 0; - -ms-padding-start: 0; -} - -li.rebaseEntry { - margin: 10px; - box-shadow: 0 0 3px rgba(0, 0, 0, 0.5); - cursor: move; - padding: 10px 5px; - border: 1px solid rgba(0, 0, 0, 0.3); -} - -li.rebaseEntry.ui-state-highlight { - padding: 21px; - border: 1px dashed rgba(0, 0, 0, 0.5); -} - -/* wtf jquery UI sortable is barfing here on calculating the position... */ -li.rebaseEntry.ui-sortable-helper { - height: auto !important; - width: auto !important; - position: relative !important; - top: 0px !important; - left: -20px; - display: none; -} - -li.rebaseEntry a#toggleButton { - cursor: pointer; - float: right; - position: relative; - font-size: 14px; - top: -5px; - right: -5px; -} - -li.rebaseEntry.notPicked { - opacity: 0.2; -} -/* Modal Views */ - -div.modalView.box.inFront.show { - overflow-y: auto; -} - -.modalView { - width: 100%; - height: 100%; - position: fixed; - top: 0px; - left: 0px; - - background: rgba(0, 0, 0, 0.6); - z-index: -1; - opacity: 0; -} - -.modalView.inFront { - z-index: 100; -} - -.terminal-window .inside { - padding: 10px; - box-shadow: 0 0 10px rgba(0, 0, 0, 0.7); -} - -.terminal-window .inside h2 { - text-align: center; -} - -.modalView.show { - opacity: 1; -} - -.modalView .terminal-window-holder { - border-radius: 5px; - max-width: 900px; -} - -.modalView .terminal-window { - margin-top: 5%; - margin-bottom: 5%; - -webkit-transform: translate3d(0, -100%, 0); - -moz-transform: translate3d(0, -100%, 0); - -o-transform: translate3d(0, -100%, 0); - -ms-transform: translate3d(0, -100%, 0); - transform: translate3d(0, -100%, 0); -} - -.modalView.show .terminal-window { - -webkit-transform: translate3d(0,0,0); - -moz-transform: translate3d(0,0,0); - -o-transform: translate3d(0,0,0); - -ms-transform: translate3d(0,0,0); - transform: translate3d(0,0,0); -} - -/* Level dropdown view */ -.levelDropdownView { -} - -div.displayName { - border-bottom: 1px dashed grey; - text-align: center; -} - -div.displayName h3 { - margin: 4px; -} - -div.iconHolder { -} - -div.seriesView p.about { - margin: 0px; - padding: 4px; - font-size: 12px; - color: #CCC; -} - -div.levelIcon { - height: 40px; - width: 40px; - border-radius: 5px; - margin: 10px 20px; - box-shadow: 2px 2px 10px rgba(0,0,0,0.7); - background-image: -webkit-linear-gradient(top, white, #AAB1AA); - background-image: -moz-linear-gradient(top, white, #AAB1AA); - background-image: -o-linear-gradient(top, white, #AAB1AA); - background-image: -ms-linear-gradient(top, white, #AAB1AA); - background-image: linear-gradient(top, white, #AAB1AA); - cursor: pointer; -} - -div.levelIcon:hover { - background-image: -webkit-linear-gradient(top, #DADADA, #888686); - background-image: -moz-linear-gradient(top, #DADADA, #888686); - background-image: -o-linear-gradient(top, #DADADA, #888686); - background-image: -ms-linear-gradient(top, #DADADA, #888686); - background-image: linear-gradient(top, #DADADA, #888686); -} - -div.levelIcon:active { - background-image: -webkit-linear-gradient(top, #888686, #7A7A7A); - background-image: -moz-linear-gradient(top, #888686, #7A7A7A); - background-image: -o-linear-gradient(top, #888686, #7A7A7A); - background-image: -ms-linear-gradient(top, #888686, #7A7A7A); - background-image: linear-gradient(top, #888686, #7A7A7A); -} - -div.levelIcon.selected { - box-shadow: 0 0 15px #25F6FF; -} - -div.levelIcon.solved { - background: -webkit-linear-gradient(top, #F3F86B, #35A30F); - background: -moz-linear-gradient(top, #F3F86B, #35A30F); - background: -o-linear-gradient(top, #F3F86B, #35A30F); - background: -ms-linear-gradient(top, #F3F86B, #35A30F); - background: linear-gradient(top, #F3F86B, #35A30F); - border-top: 1px solid #f4ffa1; -} - -div.levelIcon.solved:hover { - border-top-color: #30f03d; - background: #30f03d; -} - -div.levelIcon.solved:active { - border-top-color: #5edb15; - background: #5edb15; -} - -div.levelIcon div.index { - font-weight: 400; - text-shadow: 1px 1px 2px #CCC, 0 2px 0 #C9C9C9; - font-size: 20px; - color: #333; - -webkit-text-stroke: 1px #111; -} - -div.levelIcon div.index i { - display: none; -} - -div.levelIcon.solved div.index i { - display: block; - color: white; - -webkit-text-stroke: 0; - text-shadow: none; - font-size: 30px; -} - -div.levelIcon.solved div.index div.indexNum { - display: none; -} - -/* MultiView Builder */ -.multiViewBuilder div.view { - margin: 10px 0; -} - -.multiViewBuilder .uiButton { - margin: 0 10px; -} - -.multiViewBuilder .buttons { - margin: 20px 0; -} - -.multiViewBuilder div.controlsForView { - margin: 10px 0; - border-top: 1px dashed grey; - padding-top: 10px; -} - -/* DemonstrationBuilder */ - -.demonstrationBuilder { - max-height: 600px; - overflow-y: scroll; - box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.7); - padding: 10px; - margin-bottom: 10px; -} - -.demonstrationBuilder div.buttons { - margin: 8px 0; -} - -.demonstrationBuilder .markdownGrabber{ - min-height: 100px; -} - -.markdownGrabberInput { - margin-top: 32px; -} - -.demonstrationBuilder .markdownGrabber textarea { - height: auto; -} - -.textGrabber textarea { - width: 70%; -} - -/* Git demonstration view, and markdownGrabber */ - -.markdownPresenter textarea { - min-height: 400px; - width: 90%; - margin: 10px; -} - -.markdownGrabber { - padding: 10px; -} - -.markdownGrabber textarea { - width: 90%; - height: 400px; -} - -.demonstrationBuilder .markdownGrabber textarea { - height: 100px; -} - -.markdownGrabberPreview div.insidePreview { - padding: 8px; -} - -.markdownGrabber > div.inputSide, -.gitDemonstrationView > div.demonstrationText { - width: 50%; -} - -div.gitDemonstrationView { - width:100%; -} - -.gitDemonstrationView > div.demonstrationText { - margin-right: 10px; - max-height: 400px; - max-width: 450px; - overflow-y: scroll; - overflow-x: hidden; -} - -.gitDemonstrationView > div.demonstrationText.noLongText { - overflow-y: hidden; -} - -.markdownGrabber div.markdownGrabberPreview, -.gitDemonstrationView > div.visHolder { - box-shadow: 0 0 10px rgba(0, 0, 0, 0.7); - border-radius: 3px; - border: 1px solid #333; -} - -.gitDemonstrationView > div.demonstrationText div.command { - text-align: center; - padding: 10px; -} - -.markdownGrabber, -.gitDemonstrationView { - min-height: 400px; -} - -.gitDemonstrationView div.afterText { - opacity: 0; -} - -.gitDemonstrationView.demonstrated div.afterText { - opacity: 1; -} - -.gitDemonstrationView.demonstrating p.uiButton { - opacity: 0.7; -} - -.gitDemonstrationView.demonstrated p.uiButton { - opacity: 0.4; -} - -/* LeftRightView */ - -.leftRightView div i { - font-size: 45px; - cursor: pointer; -} - -.leftRightView div { - margin: 0 60px; -} - -.leftRightView div.exit { - -webkit-transform: matrix(-1, 0, 0, 1, 0, 0); - -moz-transform: matrix(-1, 0, 0, 1, 0, 0); -} - -.leftRightView div.exit, -.leftRightView div.left { - color: rgb(253, 50, 50); - text-shadow: -1px 1px 3px rgba(0,0,0,0.7); -} - -.leftRightView div.right { - color: rgb(82, 255, 82); - text-shadow: 1px 1px 3px rgba(0,0,0,0.7); -} - -.leftRightView div.right:hover { - color: #74FC74; -} - -.leftRightView div.exit:hover, -.leftRightView div.left:hover { - color: #FF6969; -} - -/* button stuff from liquidGraph */ -.uiButton { - border-top: 1px solid #96d1f8; - background: #65a9d7; - background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#65a9d7)); - background: -webkit-linear-gradient(top, #3e779d, #65a9d7); - background: -moz-linear-gradient(top, #3e779d, #65a9d7); - background: -ms-linear-gradient(top, #3e779d, #65a9d7); - background: -o-linear-gradient(top, #3e779d, #65a9d7); - padding: 5px 10px; - - -webkit-border-radius: 8px; - -moz-border-radius: 8px; - border-radius: 8px; - - -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0; - -moz-box-shadow: rgba(0,0,0,1) 0 1px 0; - box-shadow: rgba(0,0,0,1) 0 1px 0; - text-shadow: rgba(0,0,0,.4) 0 1px 0; - color: white; - - vertical-align: middle; - cursor: pointer; -} - -.uiButton:hover { - border-top-color: #28597a; - background: #28597a; - color: #ccc; -} -.uiButton:active { - border-top-color: #1b435e; - background: #1b435e; -} - -.uiButtonYellow { - border-top: 1px solid #f4ffa1; - background: #288708; - background: -webkit-gradient(linear, left top, left bottom, from(#e0e63c), to(#288708)); - background: -webkit-linear-gradient(top, #e0e63c, #288708); - background: -moz-linear-gradient(top, #e0e63c, #288708); - background: -ms-linear-gradient(top, #e0e63c, #288708); - background: -o-linear-gradient(top, #e0e63c, #288708); -} - -.uiButtonYellow:hover { - border-top-color: #30f03d; - background: #30f03d; - color: #333; -} -.uiButtonYellow:active { - border-top-color: #5edb15; - background: #5edb15; -} - -.uiButtonPink { - border-top: 1px solid #96d1f8; - background: #80007c; - background: -webkit-gradient(linear, left top, left bottom, from(#fa1ee0), to(#80007c)); - background: -webkit-linear-gradient(top, #fa1ee0, #80007c); - background: -moz-linear-gradient(top, #fa1ee0, #80007c); - background: -ms-linear-gradient(top, #fa1ee0, #80007c); - background: -o-linear-gradient(top, #fa1ee0, #80007c); -} -.uiButtonPink:hover { - border-top-color: #fa1ee0; - background: #fa1ee0; - color: #ccc; -} -.uiButtonPink:active { - border-top-color: #80007c; - background: #80007c; -} - -.uiButtonRed { - border-top: 1px solid #ffebee; - background: #cc1212; - background: -webkit-gradient(linear, left top, left bottom, from(#e08992), to(#cc1212)); - background: -webkit-linear-gradient(top, #e08992, #cc1212); - background: -moz-linear-gradient(top, #e08992, #cc1212); - background: -ms-linear-gradient(top, #e08992, #cc1212); - background: -o-linear-gradient(top, #e08992, #cc1212); -} - -.uiButtonRed:hover { - border-top-color: #cc102f; - background: #cc102f; - color: #ccc; -} - -.uiButtonRed:active { - border-top-color: #ff0000; - background: #ff0000; -} - -.uiButtonWhite { - border-top: 1px solid #96d1f8; - background: #449ad4; - background: -webkit-gradient(linear, left top, left bottom, from(#d1edff), to(#449ad4)); - background: -webkit-linear-gradient(top, #d1edff, #449ad4); - background: -moz-linear-gradient(top, #d1edff, #449ad4); - background: -ms-linear-gradient(top, #d1edff, #449ad4); - background: -o-linear-gradient(top, #d1edff, #449ad4); -} - -.uiButtonWhite:hover { - border-top-color: #bae3ff; - background: #bae3ff; - color: #5c5c5c; -} - -.uiButtonWhite:active { - border-top-color: #9bcbeb; - background: #9bcbeb; -} - - -/* Go Home Firefox, you're drunk */ -@-moz-document url-prefix() { - div.wrapper.box.vertical { - -moz-box-flex: 3; - box-flex: 3; - } - - div.toolbar.level-toolbar.box.vertical.center.transitionAll { - width: 100%; - } - - div.controls.box.horizontal.justify { - left: 0 !important; - top: -4px !important; - } - - body { - display: block; - width: 100%; - height: 100%; - } - - #commandLineBar { - min-height: 30px; - } - - #interfaceWrapper { - width: 100%; - height: 100%; - } - - div.canvasTerminalHolder > div.terminal-window-holder { - height: 80%; - margin: 7% 0; - } -} - diff --git a/index.html b/index.html index 163a0de3..edc331d0 100644 --- a/index.html +++ b/index.html @@ -13,7 +13,7 @@ - + diff --git a/src/js/intl/strings.js b/src/js/intl/strings.js index 34b50a01..fff8dd60 100644 --- a/src/js/intl/strings.js +++ b/src/js/intl/strings.js @@ -477,6 +477,11 @@ exports.strings = { 'fr_FR': 'Cible à atteindre' }, /////////////////////////////////////////////////////////////////////////// + 'goal-only-master': { + '__desc__': 'the helper message for the window that shows the goal tree when the goal will only be compared using the master branch', + 'en_US': 'Note: Only the master branch will be checked in this level. The other branches are simply for reference (shown as dashed labels below). As always, you can hide this dialog with "hide goal"' + }, + /////////////////////////////////////////////////////////////////////////// 'hide-goal': { '__desc__': 'the helper message for the window that shows the goal tree', 'en_US': 'You can hide this window with "hide goal"', diff --git a/src/js/level/index.js b/src/js/level/index.js index 9446bc72..f7ddeed7 100644 --- a/src/js/level/index.js +++ b/src/js/level/index.js @@ -166,8 +166,11 @@ var Level = Sandbox.extend({ }, initGoalVisualization: function() { + var onlyMaster = TreeCompare.onlyMasterCompared(this.level); // first we make the goal visualization holder - this.goalCanvasHolder = new CanvasTerminalHolder(); + this.goalCanvasHolder = new CanvasTerminalHolder({ + text: (onlyMaster) ? intl.str('goal-only-master') : undefined + }); // then we make a visualization. the "el" here is the element to // track for size information. the container is where the canvas will be placed diff --git a/src/js/views/index.js b/src/js/views/index.js index b16233fa..1205382e 100644 --- a/src/js/views/index.js +++ b/src/js/views/index.js @@ -792,7 +792,7 @@ var CanvasTerminalHolder = BaseView.extend({ this.destination = $('body'); this.JSON = { title: options.title || intl.str('goal-to-reach'), - text: options.text || intl.str('hide-goal') + text: options.text || intl.str('goal-vis-info') }; this.render(); diff --git a/src/js/visuals/visBranch.js b/src/js/visuals/visBranch.js index 49c5100d..ac94bf3e 100644 --- a/src/js/visuals/visBranch.js +++ b/src/js/visuals/visBranch.js @@ -467,24 +467,6 @@ var VisBranch = VisBase.extend({ }); }, - getArrowOpacity: function() { - if (this.getIsGoalAndNotCompared() && - !this.get('isHead') && - this.getBranchStackIndex() === 0) { - return 0.5; - } - return this.getNonTextOpacity(); - }, - - getRectOpacity: function() { - if (this.getIsGoalAndNotCompared() && - !this.get('isHead') && - this.getBranchStackIndex() === 0) { - return 0.8; - } - return this.getNonTextOpacity(); - }, - getNonTextOpacity: function() { if (this.get('isHead')) { return this.gitEngine.getDetachedHead() ? 1 : 0; @@ -544,7 +526,7 @@ var VisBranch = VisBase.extend({ y: rectPos.y, width: rectSize.w, height: rectSize.h, - opacity: this.getRectOpacity(), + opacity: this.getNonTextOpacity(), fill: this.getFill(), stroke: this.get('stroke'), 'stroke-dasharray': dashArray, @@ -552,7 +534,7 @@ var VisBranch = VisBase.extend({ }, arrow: { path: arrowPath, - opacity: this.getArrowOpacity(), + opacity: this.getNonTextOpacity(), fill: this.getFill(), stroke: this.get('stroke'), transform: this.getArrowTransform(), diff --git a/src/style/main.css b/src/style/main.css index c172f6d4..061c1b2d 100644 --- a/src/style/main.css +++ b/src/style/main.css @@ -28,6 +28,11 @@ p { word-wrap: break-word; } +.fwber { + font-weight: bolder; + font-size: 18px; +} + div.modalTerminal a { color: rgb(253, 152, 209); font-weight: bold; @@ -234,6 +239,7 @@ div.canvasTerminalHolder > div.terminal-window-holder > div.wrapper { height: 80%; box-shadow: 0 0 30px rgb(0,0,0); cursor: pointer; + border-radius: 0 0 5px 5px; } div.canvasTerminalHolder > div.terminal-window-holder div.terminal-text {