Merge pull request #231 from sverweij/feature/move-panels-to-the-right

Move panels to the right
sverweij · Apr 27, 2016 · 51d092c · 51d092c
2 parents 18a38f8 + f9bba60
commit 51d092c
Show file tree

Hide file tree

Showing 7 changed files with 245 additions and 185 deletions.
diff --git a/src/index.html b/src/index.html
diff --git a/src/jsdependencies.mk b/src/jsdependencies.mk
@@ -24,8 +24,7 @@ src/script/interpreter/editor-events.js: \
 	src/script/utl/maps.js
 
 src/script/interpreter/general-actions.js: \
-	src/script/interpreter/animator.js \
-	src/script/utl/domutl.js
+	src/script/interpreter/animator.js
 
 src/script/interpreter/input-actions.js: \
 	src/script/interpreter/general-actions.js \
@@ -62,6 +61,7 @@ src/script/interpreter/raster-exporter.js: \
 	src/script/lib/mscgenjs-core/render/graphics/svgutensils.js
 
 src/script/interpreter/uistate.js: \
+	src/script/interpreter/sampleListReader.js \
 	src/script/lib/mscgenjs-core/parse/msgennyparser.js \
 	src/script/lib/mscgenjs-core/parse/xuparser.js \
 	src/script/lib/mscgenjs-core/render/graphics/renderast.js \
@@ -264,6 +264,7 @@ INTERPRETER_JS_SOURCES=src/script/mscgen-interpreter.js \
 	src/script/interpreter/output-actions.js \
 	src/script/interpreter/param-actions.js \
 	src/script/interpreter/raster-exporter.js \
+	src/script/interpreter/sampleListReader.js \
 	src/script/interpreter/uistate.js \
 	src/script/lib/codemirror/addon/dialog/dialog.js \
 	src/script/lib/codemirror/addon/display/placeholder.js \

diff --git a/src/script/interpreter/general-actions.js b/src/script/interpreter/general-actions.js
@@ -1,30 +1,25 @@
 /* global define */
 /* jshint browser:true */
-define(["./animator", "../utl/domutl"],
-        function(animctrl, dq) {
+define(["./animator"],
+        function(animctrl) {
     "use strict";
 
     var ESC_KEY   = 27;
-    // function _closeAboutPanel(){
-    //     window.__aboutsheet.style.height = '0';
-    // }
 
     function _hideAllPanels(){
-        dq.SS(window.__cheatsheet).hide();
-        dq.SS(window.__embedsheet).hide();
-        // dq.SS(window.__aboutsheet).hide();
         animctrl.close();
-        window.__color_panel.style.height = '0';
-        window.__output_panel.style.height = '0';
-        window.__aboutsheet.style.height = '0';
-        // window.__cheatsheet.style.height = '0';
+        window.__color_panel.style.width  = '0';
+        window.__output_panel.style.width = '0';
+        window.__aboutsheet.style.width   = '0';
+        window.__embed_panel.style.width  = '0';
+        window.__learn_panel.style.width  = '0';
     }
 
     function _togglePanel(pPanelElement, pOpenFn, pCloseFn){
-        var lHeight = pPanelElement.style.height.toString();
+        var lHeight = pPanelElement.style.width.toString();
         if ( lHeight === '0px' || lHeight === ""){
             _hideAllPanels();
-            pPanelElement.style.height = '250px';
+            pPanelElement.style.width = '340px';
             pOpenFn();
         } else {
             _hideAllPanels();

diff --git a/src/script/interpreter/nav-actions.js b/src/script/interpreter/nav-actions.js
@@ -12,28 +12,39 @@ define(["./uistate",
 
     return {
         closeCheatSheet: function() {
-            dq.SS(window.__cheatsheet).hide();
+            gactions.hideAllPanels();
             gaga.g('send', 'event', 'close_source_lightbox', 'button');
         },
         closeEmbedSheet: function() {
-            dq.SS(window.__embedsheet).hide();
+            gactions.hideAllPanels();
             gaga.g('send', 'event', 'close_embedsheet', 'button');
         },
         closeAboutSheet: function() {
             gactions.hideAllPanels();
-            // _closeAboutPanel();
             gaga.g('send', 'event', 'close_aboutsheet', 'button');
         },
         helpMeOnClick: function() {
-            gactions.hideAllPanels();
-            dq.SS(window.__cheatsheet).toggle();
-            gaga.g('send', 'event', 'link', "helpme");
+            gactions.togglePanel(
+                window.__learn_panel,
+                function(){
+                    gaga.g('send', 'event', 'link', 'helpme');
+                },
+                function(){
+                    gaga.g('send', 'event', 'close_helpme', 'button');
+                }
+            );
         },
         embedMeOnClick: function() {
-            gactions.hideAllPanels();
             window.__embedsnippet.textContent = xport.toHTMLSnippet(uistate.getSource(), uistate.getLanguage(), uistate.getLinkToInterpeter());
-            dq.SS(window.__embedsheet).toggle();
-            gaga.g('send', 'event', 'link', "embedme");
+            gactions.togglePanel(
+                window.__embed_panel,
+                function(){
+                    gaga.g('send', 'event', 'link', 'embedme');
+                },
+                function(){
+                    gaga.g('send', 'event', 'close_embedsheet', 'button');
+                }
+            );
         },
         linkToInterpreterOnClick: function() {
             uistate.setLinkToInterpeter(!(uistate.getLinkToInterpeter()));

diff --git a/src/script/mscgen-interpreter.js b/src/script/mscgen-interpreter.js
@@ -49,7 +49,7 @@ require(["interpreter/input-actions",
 
     function setupInfoNavigationEvents(){
         window.__close_lightbox.addEventListener("click", nactions.closeCheatSheet, false);
-        window.__close_embedsheet.addEventListener("click", nactions.closeEmbedSheet, false);
+        window.__btn_embed_panel_close.addEventListener("click", nactions.closeEmbedSheet, false);
         window.__close_aboutsheet.addEventListener("click", nactions.closeAboutSheet, false);
         window.__helpme.addEventListener("click", nactions.helpMeOnClick, false);
         window.__embedme.addEventListener("click", nactions.embedMeOnClick, false);

diff --git a/src/style/interp.css b/src/style/interp.css
diff --git a/src/style/snippets/_slidingpanel.scss b/src/style/snippets/_slidingpanel.scss
@@ -5,13 +5,14 @@
     flex-direction: column;
     -webkit-flex-direction: column;
     background-color: $background-color;
-    width: 100%;
-    height: 0;
+    width: 0;
+    height: 640px;
     position: fixed;
     z-index: 314;
-    bottom: 0;
-    box-shadow: 0px -3px 6px $shadow-color;
-    transition: height 0.7s cubic-bezier(0.68,-0.55,0.27,1.55);
+    top: 80px;
+    right:0;
+    box-shadow: -6px 0px 6px $shadow-color;
+    transition: width 0.7s cubic-bezier(0.68,-0.55,0.27,1.55);
 }
 .sliding-panel .header {
     display: flex;
@@ -21,18 +22,28 @@
     justify-content: space-between;
     -webkit-justify-content: space-between;
 }
-.sliding-panel > span.row {
+.sliding-panel > span.sliding-panel-content {
     display: flex;
     display: -webkit-flex;
-    flex-direction: row;
-    -webkit-flex-direction: row;
+    flex-direction: column;
+    -webkit-flex-direction: column;
     justify-content: space-around;
     -webkit-justify-content: space-around;
+    overflow: auto;
+    margin: 12px;
 }
-.sliding-panel > a, .sliding-panel > span.row {
-    padding: 8px;
+.sliding-panel > a {
     border-bottom: $demarcation-line;
 }
+.sliding-panel .sliding-panel-content-section {
+    display: flex;
+    display: -webkit-flex;
+    flex-direction: row;
+    -webkit-flex-direction: row;
+    justify-content: flex-start;
+    -webkit-justify-content: flex-start;
+    margin-bottom: 1em;
+}
 .sliding-panel a:hover {
     cursor: pointer;
     text-decoration: underline;
@@ -57,12 +68,13 @@
     text-shadow: black 0px 0px 6px;
     font-size: 3.5em;
 }
-.sliding-panel .column-picture {
-    width: 4em;
+.sliding-panel .row-picture {
+    width: 60px;
+    min-width: 60px;
     margin: 0 0.5em 0 0.5em;
 }
-.sliding-panel .column-text {
-    width: 25%;
+.sliding-panel .row-text {
+    margin: 0 1em 1em 1em;
 }
 .sliding-panel h2 {
     margin: 0.5em 0 0 0.5em;