Commit 6685faf4 authored by alexandre's avatar alexandre

Implementing help views

parent 82059947
......@@ -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; }
......@@ -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) {
......
......@@ -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>
......
<header class="main-header"></header>
<main class="main-area"></main>
<div id="help"></div>
<div class="modal"></div>
......@@ -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>
<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>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment