Implementing help views

6685faf4 · alexandre · 82059947 · 6685faf4 · 6685faf4 · 6685faf4
Commit 6685faf4 authored Apr 12, 2018 by alexandre
6 changed files
--- a/playground/static/playground/css/styles.css
+++ b/playground/static/playground/css/styles.css
@@ -221,6 +221,7 @@ section.hidden { display: none; }
  box-sizing: border-box;
  width: 100vw;
  height: 100vh;
+  overflow: hidden;
 }


@@ -234,23 +235,33 @@ section.hidden { display: none; }
  position: relative;
  left: 0;
  box-sizing: border-box;
-  width: 300px;
-  padding: 30px;
  transition: all .2s;
  color: white;
  background-color: darkgray;
 }

-.main-header--collapsed { left: -300px; }
+.main-header .content {
+  width: 300px;
+  padding: 30px;
+}
+
+.main-header.is-collapsed .content { display: none; }

 .btn-hamburger {
  position: absolute;
-  top: 10px;
-  right: 10px;
  color: grey;
  font-family: Sans-Serif;
  font-size: 16px;
  font-weight: bold;
+  top: 10px;
+}
+
+.btn-hamburger--right {
+  right: 10px;
+}
+
+.btn-hamburger--left {
+  left: 10px;
 }

 .btn-hamburger:hover {
@@ -258,11 +269,14 @@ section.hidden { display: none; }
  color: black;
 }

-.main-header--collapsed .btn-hamburger {
-  position: absolute;
+.main-header.is-collapsed .btn-hamburger {
  right: -26px;
 }

+#help.is-collapsed .btn-hamburger {
+  left: -26px;
+}
+
 .logo { margin: 21px 0 42px 0; }

 .logo h1 {
@@ -281,7 +295,7 @@ section.hidden { display: none; }
 /* Main area (content)
   ========================================================================== */

-.main-header--collapsed + .main-area { margin-left: -300px; }
+/* .main-header.is-collapsed + .main-area { margin-left: -300px; } */

 .main-area {
  overflow: auto;
@@ -900,3 +914,45 @@ li li li li li li li li li li li li form { color: var(--color-12); }
 li li li li li li li li li li li li li form { color: var(--color-13); }

 li li li li li li li li li li li li li li form { color: var(--color-14); }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+#help {
+    position: relative;
+    right: 0;
+    box-sizing: border-box;
+    transition: all .2s;
+    color: white;
+    background-color: darkgray;
+}
+
+.help__content {
+    overflow: auto;
+    width: 500px;
+    padding: 30px;
+    height: 100%;
+}
+
+#help.is-collapsed .help__content { display: none; }
--- a/playground/static/playground/js/views.js
+++ b/playground/static/playground/js/views.js
@@ -1078,7 +1078,7 @@ window.W = window.W || {};
            slider: {
                el: '#expand-level-slider',
                replaceElement: true
-            }
+            },
        },

        ui: {
@@ -1237,7 +1237,6 @@ window.W = window.W || {};
        },

        onRender: function () {
-
            document.title = this.model.get('title');

            var mainlineView = new W.TreeNode({ model: this.model.get('mainline') });
@@ -1627,7 +1626,43 @@ window.W = window.W || {};
    });


-    W.HeaderView = Backbone.Marionette.View.extend({
+    W.ToggableView = Backbone.Marionette.View.extend({
+        onShow: function () {
+            this.$el.removeClass('is-collapsed');
+        },
+
+        onHide: function () {
+            console.log("hiding");
+            this.$el.addClass('is-collapsed');
+        },
+
+        onToggle: function () {
+            this.$el.toggleClass('is-collapsed');
+        },
+    });
+
+
+    W.helpView = W.ToggableView.extend({
+        template: '#help-template',
+
+        attributes: {
+            id: 'help',
+            class: 'is-collapsed'
+        },
+
+        ui: {
+            'toggle': '.btn-hamburger',
+        },
+
+        triggers: {
+            'click @ui.show': 'show',
+            'click @ui.hide': 'hide',
+            'click @ui.toggle': 'toggle',
+        },
+    });
+
+
+    W.HeaderView = W.ToggableView.extend({
        tagName: 'header',
        template: '#header-template',

@@ -1659,19 +1694,6 @@ window.W = window.W || {};
            create: '#create'
        },

-        onShow: function () {
-            this.$el.removeClass('main-header--collapsed');
-        },
-
-        onHide: function () {
-            console.log("hiding");
-            this.$el.addClass('main-header--collapsed');
-        },
-
-        onToggle: function () {
-            this.$el.toggleClass('main-header--collapsed');
-        },
-
        onRender: function () {
            var myCreateView = new W.CreateView();

@@ -1700,6 +1722,10 @@ window.W = window.W || {};
                el: '.main-area',
                // replaceElement: true
            },
+            help: {
+                el: '#help',
+                replaceElement: true
+            },
            modal: {
                el: '.modal',
                // replaceElement: true
@@ -1715,6 +1741,7 @@ window.W = window.W || {};

        onRender: function () {
            this.showChildView('header', new W.HeaderView({model: this.model}));
+            this.showChildView('help', new W.helpView());
        },

        showLogin: function(event) {

--- a/playground/templates/playground/score.html
+++ b/playground/templates/playground/score.html
@@ -47,6 +47,10 @@
    {% include "playground/underscore/header.mtpl" %}
    </script>

+    <script id="help-template" type="text/template">
+    {% include "playground/underscore/help.mtpl" %}
+    </script>
+
    <script id="home-template" type="text/template">
    {% include "playground/underscore/home.mtpl" %}
    </script>

--- a/playground/templates/playground/underscore/base.mtpl
+++ b/playground/templates/playground/underscore/base.mtpl
 <header class="main-header"></header>
 <main class="main-area"></main>
+<div id="help"></div>
 <div class="modal"></div>
--- a/playground/templates/playground/underscore/header.mtpl
+++ b/playground/templates/playground/underscore/header.mtpl
@@ -6,36 +6,38 @@
 <!-- • Aide -->
 <!-- • crédits -->

-<div class="btn-hamburger js-collapse">☰</div>
+<div class="btn-hamburger btn-hamburger--right js-collapse">☰</div>

-<nav>
-    <% if (username) { %>
-    Bienvenue <a href="/users/<%- pk %>"><%- username %></a>
-    <% } else { %>
-    Bienvenue anonymous
-    <% } %>
-    <ul>
-        
+<div class="content">
+    <nav>
        <% if (username) { %>
-        <li><a href="#" class="btn-logout">Se déconnecter</a></li>
+        Bienvenue <a href="/users/<%- pk %>"><%- username %></a>
        <% } else { %>
-        <li><a href="#" class="btn-login">Se connecter</a></li>
-        <li><a href="#" class="btn-register">S'inscrire</a></li>
+        Bienvenue anonymous
        <% } %>
-    </ul>
-</nav>
+        <ul>
+            
+            <% if (username) { %>
+            <li><a href="#" class="btn-logout">Se déconnecter</a></li>
+            <% } else { %>
+            <li><a href="#" class="btn-login">Se connecter</a></li>
+            <li><a href="#" class="btn-register">S'inscrire</a></li>
+            <% } %>
+        </ul>
+    </nav>

-<div class="logo">
-    <h1><a href="/">Organon</a></h1>
-    <h2>Un logiciel pour noter l’action performée, développé par W</h2>
-</div>
+    <div class="logo">
+        <h1><a href="/">Organon</a></h1>
+        <h2>Un logiciel pour noter l’action performée, développé par W</h2>
+    </div>

-<div id="create"></div>
+    <div id="create"></div>

-<nav>
-    <ul>
-        <li><a href="/apropos/">À propos</a></li> <!-- + crédits -->
-        <li><a href="/partitions/">Partitions</a></li> 
-        <li><a href="#">Aide</a></li>
-    </ul>
-</nav>
+    <nav>
+        <ul>
+            <li><a href="/apropos/">À propos</a></li> <!-- + crédits -->
+            <li><a href="/partitions/">Partitions</a></li> 
+            <li><a href="#">Aide</a></li>
+        </ul>
+    </nav>
+</div>
--- a/playground/templates/playground/underscore/score-vue.mtpl
+++ b/playground/templates/playground/underscore/score-vue.mtpl
-<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>
+<div>
+    <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>
+        <h1 id="title"><%- title %></h1>

-    <dl class="score-meta">
-        <% if (presentation) { %>
-        <dt>Présentation</dt>
-        <dd><%- presentation %></dd>
-        <% } %>
-        <% if (stage_set) { %>
-        <dt>Mise</dt>
-        <dd><%= stage_set.replace(/\n/g, "<br />") %></dd>
-        <% } %>
+        <dl class="score-meta">
+            <% if (presentation) { %>
+            <dt>Présentation</dt>
+            <dd><%- presentation %></dd>
+            <% } %>
+            <% if (stage_set) { %>
+            <dt>Mise</dt>
+            <dd><%= stage_set.replace(/\n/g, "<br />") %></dd>
+            <% } %>

-        <!-- Extended fields -->
-        <% if (performance_author && (score_type === 1 || score_type === 3)) { %>
-        <dt class="extended">Auteur de la performance</dt>
-        <dd class="extended"><%- performance_author %></dd>
-        <% } %>
-        <% if (score_author) { %>
-        <dt class="extended">Auteur de la partition</dt>
-        <dd class="extended"><%- score_author %></dd>
-        <% } %>
-        <% if (score_type) { %>
-        <dt class="extended">Type de partition</dt>
-        <dd class="extended">
-            <% switch (score_type) {
-                case 1:
-            %>
-                    transcription
-            <%
-                    break;
-                case 2:
-            %>
-                    prescription
-            <%
-                    break;
-                case 3:
-            %>
-                    traduction
-            <%
-                    break;
-            } %>
-        </dd>
-        <% } %>
-        <dt class="extended">Effectif</dt>
-        <dd class="extended">
-            <% if (effectif && effectif.type === rangeType.exact) { %>
-                <%- effectif.value %> <%- (effectif.value > 1) ? 'performeurs' : 'performeur' %>
-            <% } else if (effectif && effectif.type === rangeType.minimal) { %>
-                au moins <%- effectif.value %> performeurs
-            <% } else if (effectif && effectif.type === rangeType.range) { %>
-                entre <%- effectif.value[0] %> ét <%- effectif.value[1] %> performeurs
-            <% } else { %>
-                indéterminé
+            <!-- Extended fields -->
+            <% if (performance_author && (score_type === 1 || score_type === 3)) { %>
+            <dt class="extended">Auteur de la performance</dt>
+            <dd class="extended"><%- performance_author %></dd>
+            <% } %>
+            <% if (score_author) { %>
+            <dt class="extended">Auteur de la partition</dt>
+            <dd class="extended"><%- score_author %></dd>
            <% } %>
-        </dd>
-        <% if (duration) { %>
-        <dt class="extended">Durée</dt>
-        <dd class="extended"><%- duration %></dd>
-        <% } %>
-        <% if (tags) { %>
-        <dt class="extended">Tags</dt>
-        <dd class="extended">
-            <ul>
-            <% 
-               tag_list = tags;
+            <% if (score_type) { %>
+            <dt class="extended">Type de partition</dt>
+            <dd class="extended">
+                <% switch (score_type) {
+                    case 1:
+                %>
+                        transcription
+                <%
+                        break;
+                    case 2:
+                %>
+                        prescription
+                <%
+                        break;
+                    case 3:
+                %>
+                        traduction
+                <%
+                        break;
+                } %>
+            </dd>
+            <% } %>
+            <dt class="extended">Effectif</dt>
+            <dd class="extended">
+                <% if (effectif && effectif.type === rangeType.exact) { %>
+                    <%- effectif.value %> <%- (effectif.value > 1) ? 'performeurs' : 'performeur' %>
+                <% } else if (effectif && effectif.type === rangeType.minimal) { %>
+                    au moins <%- effectif.value %> performeurs
+                <% } else if (effectif && effectif.type === rangeType.range) { %>
+                    entre <%- effectif.value[0] %> ét <%- effectif.value[1] %> performeurs
+                <% } else { %>
+                    indéterminé
+                <% } %>
+            </dd>
+            <% if (duration) { %>
+            <dt class="extended">Durée</dt>
+            <dd class="extended"><%- duration %></dd>
+            <% } %>
+            <% if (tags) { %>
+            <dt class="extended">Tags</dt>
+            <dd class="extended">
+                <ul>
+                <% 
+                   tag_list = tags;

-               for (var i=0; i < tag_list.length; i++) { %> 
-                <li><%- tag_list[i] %></li>
+                   for (var i=0; i < tag_list.length; i++) { %> 
+                    <li><%- tag_list[i] %></li>
+                <% } %>
+                </ul>
+            </dd>
+            <% } %>
+            <!--
+            <% if (genre) { %>
+            <dt class="extended">Genre</dt>
+            <dd class="extended"><%- genre %></dd>
+            <% } %> -->
+            <% if (language) { %>
+            <dt class="extended">Langue</dt>
+            <dd class="extended"><%- language %></dd>
            <% } %>
-            </ul>
-        </dd>
-        <% } %>
-        <!--
-        <% if (genre) { %>
-        <dt class="extended">Genre</dt>
-        <dd class="extended"><%- genre %></dd>
-        <% } %> -->
-        <% if (language) { %>
-        <dt class="extended">Langue</dt>
-        <dd class="extended"><%- language %></dd>
-        <% } %>
-        <dt class="extended">Publié le</dt>
-        <dd class="extended"><%- formatTimestamp(created_at) %></dd>
-        <dt class="extended">Modifié le</dt>
-        <dd class="extended"><%- formatTimestamp(updated_at) %></dd>
+            <dt class="extended">Publié le</dt>
+            <dd class="extended"><%- formatTimestamp(created_at) %></dd>
+            <dt class="extended">Modifié le</dt>
+            <dd class="extended"><%- formatTimestamp(updated_at) %></dd>

-        <!-- <dt class="score-meta-expand-toggle"></dt> -->
-    </dl>
+            <!-- <dt class="score-meta-expand-toggle"></dt> -->
+        </dl>


-    <form></form>
-</header>
+        <form></form>
+    </header>

-<div id="main-area">
-        <div id="expand-level-slider"></div>
-        <div id="axis-wrapper">
-        <ol></ol>
-        </div>
+    <div id="main-area">
+            <div id="expand-level-slider"></div>
+            <div id="axis-wrapper">
+                <ol></ol>
+            </div>
+    </div>
 </div>