Started to implement Pierres layout changes.

playground/static/playground/js/views.js

@@ -861,7 +861,7 @@ window.W = window.W || {};
             //show mainline nodes if they are present
             if (sublines.length) {
                 var sublinesView = new W.TreeView({ collection: sublines });
-
+                this.$el.attr("data-sublines", "true");
                 this.showChildView('tree', sublinesView);
             }
         }
@@ -1026,7 +1026,9 @@ window.W = window.W || {};
             'save': '.save',
             'edit': '.edit',
             'expandLevel': '[name="expand-level"]',
-            'scoreMeta': '.score-meta'
+            'scoreMeta': '.score-meta',
+            'title': '#title',
+            'sidebar': '#sidebar'
         },
 
         events: {
@@ -1038,7 +1040,7 @@ window.W = window.W || {};
             'click .fold': 'fold',
             'change @ui.expandLevel': 'expandUntill',
             'click [data-name="export"]': 'downloadAsJSON',
-            'click .score-meta-expand-toggle': 'toggleMeta'
+            'click @ui.title': 'toggleMeta'
         },
 
         childViewEvents: {
@@ -1222,7 +1224,7 @@ window.W = window.W || {};
 
         toggleMeta: function () {
             this.metaExpanded = !this.metaExpanded;
-            this.ui.scoreMeta.attr('data-expanded', this.metaExpanded);
+            this.ui.sidebar.attr('data-expanded', this.metaExpanded);
         }
     });
 
@@ -1516,7 +1518,7 @@ window.W = window.W || {};
             'click @ui.toggle': 'toggle',
         },
 
-        onToggle: function() {
+        onToggle: function () {
             this.$el.toggleClass('main-header--collapsed');
         }
     });

playground/templates/playground/underscore/node-vue.mtpl

@@ -30,7 +30,7 @@
         <% } %>
 
     <!-- More visible aleternative, bullet: &#8729; -->
-    <span class="axis-title-edit"><%- title %><% if (!hasSublines) { %>.<% } %></span>
+    <span class="axis-title-edit"><%- title %><!-- <% if (!hasSublines) { %>.<% } %> --></span>
     
     <span class="axis-inline-title-form"></span>
 

playground/templates/playground/underscore/score-vue.mtpl

-<div id="main-area">
-        <div id="expand-level-slider"></div>
-        <div id="axis-wrapper">
-        <ol></ol>
-        </div>
-</div>
-
-
-<header id="sidebar">
+<header id="sidebar" data-expanded="<%- metaExpanded %>">
     <div class="score-actions">
         <button class="save" data-label-progress="Saving..." data-label="Enregistrer" <% if (!hasChanges) { %>disabled<% } %>>Enregistrer</button>
         <button class="duplicate">Dupliquer</button>
         <button class="delete">Supprimer</button>
+        <button class="edit score-edit">Éditer</button>
+        <button data-name="export">Export</button>
     </div>
 
     <h1 id="title"><%- title %></h1>
 
-    <dl class="score-meta" data-expanded="<%- metaExpanded %>">
+    <dl class="score-meta">
         <% if (presentation) { %>
         <dt>Présentation</dt>
         <dd><%- presentation %></dd>
@@ -99,12 +93,16 @@
         <dt class="extended">Modifié le</dt>
         <dd class="extended"><%- formatTimestamp(updated_at) %></dd>
 
-        <dt class="score-meta-expand-toggle"></dt>
+        <!-- <dt class="score-meta-expand-toggle"></dt> -->
     </dl>
 
-    <button class="edit score-edit">Éditer</button>
-    <button data-name="export">Export</button>
 
     <form></form>
 </header>
 
+<div id="main-area">
+        <div id="expand-level-slider"></div>
+        <div id="axis-wrapper">
+        <ol></ol>
+        </div>
+</div>
\ No newline at end of file