Commit a68e57bb authored by gijs's avatar gijs

Moving boucle and alternative to a subview

parent f62dcffc
......@@ -18,6 +18,7 @@ body {
#score > div {
display: flex;
flex-direction: row-reverse;
margin-left: 75px;
}
......@@ -65,7 +66,8 @@ label {
margin-bottom: .5em;
}
label.inline {
label.inline,
section.inline {
display: inline-block;
}
......@@ -120,6 +122,7 @@ label .label-text {
margin: 0.25em;
padding: 0.25em;
border: 2px solid;
position: relative;
}
.axis-title .options,
......@@ -155,21 +158,31 @@ label .label-text {
/*width: 450px;*/
}
.conditions-infos-vue, .terme-infos-vue{
.condition,
.indications,
.terme {
position: relative;
}
.condition .full,
.indications .full,
.terme .full {
background: white;
border: 1px solid black;
color: black;
display: none;
padding: 5px;
position:absolute;
white-space: nowrap;
top: 1.5em;
position: absolute;
top: .5em;
left: .5em;
z-index: 1;
z-index: 2;
white-space: nowrap;
}
.axis-title .prefix .condition:hover .conditions-infos-vue {
display: block;
.condition:hover .full,
.indications:hover .full,
.terme:hover .full {
display: inline-block;
}
.el_tag{
......@@ -202,6 +215,25 @@ label .label-text {
text-decoration: none !important;
position: relative;
}
/**
* Insert a block before the line without changing the position
* of the line.
*/
.header {
position: absolute;
white-space: nowrap;
right: 100%; /* Position it before the line, irregardless of the header width */
font-size: 80%;
}
.header .handle,
.header .prefix,
.header .condition,
.header .tag {
color: black;
}
sub, sup {
/* Specified in % so that the sup/sup is the
right size relative to the surrounding text */
......@@ -353,7 +385,7 @@ li li li li li li li li .axis-title { color: rgb(204,194, 16); }
right: 0;
}
li + li > .axis-title #alt_symbole { visibility: hidden; }
li + li > .axis-title #alt_symbole { display: none; }
input[type="text"] {
width: 20em;
......
......@@ -71,20 +71,19 @@ window.W = window.W || {};
// sémelfactif l'action est ponctuelle
piece_jointe: '', //url qui pointe vers un document
terme: '', //(str)
// boucle: on teste d'abord si boucle check est true
// si oui y a t'il une durée de n à p
// si non mettre n et p à 0
// TODO: check if those 4 props can be merge in one
boucle: false, //de n à p
boucle_n: false,
boucle_p: false,
boucle_check: false,
// TODO: check if those 3 props can be merge in one
alternative: false,
alternative_n: false,
alternative_p: false,
// rangeType = enum{undetermined, exact, minimal, range}
// null | { type: rangeType, value: null|number|[number, number]}
boucle: null,
// TODO: check if those 3 props can be merge in one
// null | { type: rangeType, value: null|number|[number, number]}
alternative: null,
alternative_mode: '', //choix dans un array (exclusive, inclusive, conditionnelle) Validation importante des conditions dans une boucle inclusive
// alternative_symbole: '',
......@@ -97,8 +96,8 @@ window.W = window.W || {};
// Si l'objet est focused, il faut que la classe axis-focus
// soit sur ses éléments handle et options.
parent: null,
adresse: '', // string
actant: '', // string
adresse: '', // string
commandement: '', // string
destination: '', // string
code: '', // string
......
This diff is collapsed.
......@@ -39,8 +39,12 @@
{% include "playground/underscore/node-form.mtpl" %}
</script>
<script id="rangefield-template" type="text/template">
{% include "playground/underscore/node-form.mtpl" %}
</script>
<script id="node-template-vue" type="text/template">
{% include "playground/underscore/node-vue.mtpl" %}
{% include "playground/underscore/rangefield.mtpl" %}
</script>
<script id="slider-template" type="text/template">
......
......@@ -3,7 +3,7 @@
<label class="inline"><span class="label-text">condition</span>
<input type="text" name="condition" value="<%= condition %>">
</label>
<label class="inline"><input type="checkbox" name="imperative">
<label class="inline"><input type="checkbox" name="imperative" <% if (imperative) { %>checked<% } %>>
Imperative
</label>
......@@ -12,45 +12,20 @@
<input type="text" name="terme" value="<%= terme %>">
</label>
<!-- boucle [subview] -->
<section data-name="boucle"></section>
<!-- boucle -->
<section class="fieldgroup toggable">
<label class="inline">
<input type="checkbox" name="boucle" <% if (boucle) { %>checked<% } %>>
Boucle
</label>
<label class="inline">de
<input type="number" name="boucle-min" value="<%= ((boucle) ? boucle[0] : 0) %>" min="0" class="small-number">
</label>
<label class="inline">a
<input type="number" name="boucle-max" value="<%= ((boucle) ? boucle[1] : 0) %>" min="0" class="small-number">
</label>
</section>
<!-- alternative -->
<section class="fieldgroup toggable">
<label class="inline">
<input type="checkbox" name="alternative" <% if (alternative) { %>checked<% } %>>
Alternative
</label>
<label class="inline">choisir entre
<input type="number" name="alternative-min" value="<%= ((alternative) ? alternative[0] : 0) %>" min="0" class="small-number">
</label>
<label class="inline">et
<input type="number" name="alternative-max" value="<%= ((alternative) ? alternative[1] : 0) %>" min="0" class="small-number">
axes
</label>
</section>
<!-- alternative [subview] -->
<section data-name="alternative"></section>
<!-- aspect -->
<section class="fieldgroup toggable">
<label class="inline">
<input type="checkbox" name="aspect-toggle">
<input type="checkbox" name="aspect" <% if (aspect) { %>checked<% } %>>
aspect
</label>
<label class="inline">
<select name="aspect">
<select name="aspect-value">
<% _.each(aspectChoices, function(a) {%>
<option value="<%= a %>" <% if (aspect==a) { %>selected<% } %>><%= a %></option>
<% }); %>
......
<div class="axis-title axis-title-view" tabindex="0">
<span class="handle"></span>
<span class="prefix">
<span id="alt_symbole">
<%= altSymbol %>
</span>
<div class="header">
<span class="handle"></span>
<% if (actant) { %>
<span class="actant">
<%= actant %>:
</span>
<% } %>
<span class="prefix">
<span id="alt_symbole">
<%= altSymbol %>
</span>
<span class="invis condition">
<% if (condition) { %>
<span class="trigger_conditions_vue">#</span>
<div class="conditions-infos-vue">
<% if (imperative) { %>!<% } %>
<%= condition %>
</div>
<span class="condition">
# <span class="full"><% if (imperative) { %>! <% } %><%= condition %></span>
</span>
<% } %>
<span class="tag view_tag el_tag">
<%= (tag) ? tag : '&gt;' %>
</span>
</span>
</div>
<span class="tag view_tag el_tag"><% if (tag) { %><%= tag %><% } else { %>&gt;<% }%></span>
<span class="axis-title-edit">
<%- title %>
</span>
<span class="axis-title-edit"><%- title %></span>
<span id="aspect_vue">
<% if (aspect) { %>
<% if (adresse) { %>
<span class="adresse">
@<%= adresse %>
</span>
<% } %>
<% if (aspect) { %>
<span id="aspect_vue">
<% if (aspect == 'duratif') { %> &rarr; <% } %>
<% if (aspect == 'sémelfactif') { %> &darr; <% } %>
<% if (aspect == 'itératif') { %> --- <% } %>
<% } %>
</span>
<% if (indications && indications.trim()) { %><span class="trigger_infos_vue">(i)</span><% } %>
<!-- autre possibilité avec placeholder
<input type="text" id="boucle" value="" placeholder="placeholder" />
-->
</span>
<% } %>
<% if (indications && indications.trim()) { %>
<span class="indications">
(i) <span class="full"><%= indications %></span>
</span>
<% } %>
<span class="options">
<% if (boucle) { %>
<span id="boucle">
......@@ -42,12 +63,11 @@
</sup>
</span>
<% } %>
<span id="terme" >
<% if (terme && !(terme == 'terme')) { %>
&rarr;
<%= terme.substring(0,30) %>
<span class="terme" >
<% if (terme) { %>
&rarr; <%= terme.substring(0,30) %>
<% if(terme.length > 30) { %>
<span class="trigger_terme_vue">...</span>
...<span class="full"><%= terme %></span>
<% } %>
<% } %>
</span>
......@@ -56,62 +76,12 @@
<%= alternative %>
<% } %>
</span> -->
<!--- comme dans les champs d'impression -->
<!--- les conditions sont au niveau des Sous-axes donc ne doit pas apparaitre dans le menu déroulant -->
<!-- <button class="toggle">(Dé)plier</button> -->
</span>
<div class="boucle-infos" class="invis">
boucle de
<input type="text" value="<% if (boucle_n) { %><%= boucle_n %><% } else { %> <% }%>" id="boucle_n" name="boucle_n" />
à
<input type="text" value="<% if (boucle_p) { %><%= boucle_p %><% } else { %> <% }%>" id="boucle_p" name="boucle_p" />
fois
<input type="button" id="boucle_ok" value="ok" />
<input type="button" id="boucle_x" value="effacer" />
</div>
<div class="alt-infos" class="invis">
entre
<input type="text" value="<% if (alternative_n) { %><%= alternative_n %><% } else { %> <% }%>" id="alt_n" name="alt_n" />
et
<input type="text" value="<% if (alternative_p) { %><%= alternative_p %><% } else { %> <% }%>" id="alt_p" name="alt_p" />
axes
<!--- tout vient de la notation de l'alternative n et p ensuite demander si condition impérative? -->
<select id="alt_mode">
<% _.each(alternativeChoices, function(alternativeChoice) {%>
<option value="<%= alternativeChoice %>" <% if (alternative_mode==alternativeChoice) { %>selected<% } %>><%= alternativeChoice %></option>
<% }); %>
</select>
<input type="button" id="alt_ok" value="ok" />
<input type="button" id="alt_x" value="effacer" />
</div>
<div class="axis-infos axis-infos-vue">
<!-- La gestion contingent / modulé est faite par le souligné et le barré, non plus explicitée. -->
<!-- <div>
<input type="checkbox" name="contingent" id="contingent" value="1" <% if (contingent) { %>checked<% } %> tabindex="0"> contingent
</div>
<div>
<input type="checkbox" name="module_" id="module_" value="1" <% if (module_) { %>checked<% } %>> modulé
</div> -->
<!-- <div>Pièce jointe</div> -->
<div>
<div>Indications</div>
<% if (indications) { %><%= indications %><% } %>
</div>
</div>
<% if (terme && !(terme == 'terme') && terme.length > 30) { %>
<div class="terme-infos-vue">
<%= terme %>
</div>
<% } %>
<section class="axis-actions">
<button name="edit" title="Modifier ce axe">🖉</button>
<button name="add" title="Ajoute sous-axe">+</button>
<button name="delete" title="Efface ce axe (et sous-axes) ">x</button>
<button name="delete" title="Efface ce axe (et sous-axes)">x</button>
<% if (sublines.length) { %>
<button name="toggle"></button>
<% } %>
......
<label class="inline">
<input type="checkbox" name="boucle" <% if (boucle) { %>checked<% } %>>
<%= label %>
</label>
<label class="inline">
pour
<select name="boucle-type">
<option value="<%= rangeType.undetermined %>" <% if (!type || type == rangeType.undetermined) { %>selected<% } %>>
indeterminé
</option>
<option value="<%= rangeType.exact %>" <% if (type == rangeType.exact) { %>selected<% } %>>
exactement
</option>
<option value="<%= rangeType.minimal %>" <% if (type == rangeType.minimal) {%>selected<% } %>>
au moins
</option>
<option value="<%= rangeType.range %>" <% if (type == rangeType.range){ %>selected<% } %>>
entre
</option>
</select>
</label>
<section data-range-type="<%= rangeType.exact %>" class="type-fields inline hidden">
<input type="number" name="exact" min="1" class="small-number" value="<%= (type == rangeType.exact) ? value : 1 %>" />
</section>
<section data-range-type="<%= rangeType.minimal %>" class="type-fields inline hidden">
<input type="number" name="minimal" min="0" class="small-number" value="<%= (type == rangeType.minimal) ? value : 0 %>" />
</section>
<section data-range-type="<%= rangeType.range %>" class="type-fields inline hidden">
<input type="number" name="range-min" min="0" class="small-number" value="<%= (type == rangeType.range) ? value[0] : 0 %>" /> á
<input type="number" name="range-max" min="1" class="small-number" value="<%= (type == rangeType.range) ? value[1] : 1 %>" />
</section>
fois
\ No newline at end of file
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