[scss.container.card] added 'info' (mini-header for little informations) + added icon to update 'required'/'optional' in right top corner + [vue.ue.view] moved 'required' with pin before name and 'enabled' with line-through [scss.global]

This commit is contained in:
xdrm-brackets 2018-03-29 19:30:05 +02:00
parent 1997af49f4
commit e64667a955
6 changed files with 127 additions and 13 deletions

View File

@ -0,0 +1,45 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
enable-background="new 0 0 500 500"
height="500px"
id="Layer_1"
version="1.1"
viewBox="0 0 500 500"
width="500px"
xml:space="preserve"
sodipodi:docname="pin-disabled.svg"
inkscape:version="0.92.2 5c3e80d, 2017-08-06"><metadata
id="metadata9"><rdf:RDF><cc:Work
rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
id="defs7" /><sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1920"
inkscape:window-height="1015"
id="namedview5"
showgrid="false"
inkscape:zoom="0.6675088"
inkscape:cx="186.10652"
inkscape:cy="69.51775"
inkscape:window-x="0"
inkscape:window-y="29"
inkscape:window-maximized="1"
inkscape:current-layer="Layer_1"
inkscape:snap-page="true" /><path
style="clip-rule:evenodd;fill:#010101;fill-rule:evenodd"
d="M 463.1543 1 L 349.9375 114.2168 L 349.9375 77.375 L 363.56836 77.375 C 376.10336 77.375 386.2832 67.198109 386.2832 54.662109 C 386.2832 42.126109 376.10336 31.949219 363.56836 31.949219 L 136.43164 31.949219 C 123.89564 31.949219 113.71875 42.126109 113.71875 54.662109 C 113.71875 67.199109 123.89564 77.375 136.43164 77.375 L 150.06055 77.375 L 150.06055 232.73828 L 82.828125 300.60742 C 79.465125 303.87442 77.376953 308.50466 77.376953 313.59766 C 77.376953 323.58866 85.459234 331.77148 95.365234 331.77148 L 132.38281 331.77148 L 1 463.1543 L 36.845703 499 L 499 36.845703 L 463.1543 1 z M 213.6582 77.375 C 223.6532 77.375 231.83008 85.552828 231.83008 95.548828 L 231.83008 213.65625 C 231.83008 223.65225 223.6542 231.82812 213.6582 231.82812 C 203.6642 231.82812 195.48633 223.65225 195.48633 213.65625 L 195.48633 95.548828 C 195.48633 85.552828 203.6642 77.375 213.6582 77.375 z M 352.55469 235.29102 L 222.74414 365.10156 L 222.74414 445.33984 C 222.74414 457.87584 232.92103 468.05078 245.45703 468.05078 C 257.99403 468.05078 268.17188 457.87584 268.17188 445.33984 L 268.17188 331.77148 L 404.63281 331.77148 C 414.53181 331.77148 422.62305 323.58866 422.62305 313.59766 C 422.62305 308.60466 420.61847 304.06211 417.35547 300.78711 L 352.55469 235.29102 z "
id="fill-edit" /></svg>

After

Width:  |  Height:  |  Size: 2.8 KiB

View File

@ -32,13 +32,14 @@
inkscape:window-height="1015"
id="namedview5"
showgrid="false"
inkscape:zoom="0.472"
inkscape:cx="14.830508"
inkscape:cy="250"
inkscape:zoom="0.6675088"
inkscape:cx="186.10652"
inkscape:cy="69.51775"
inkscape:window-x="0"
inkscape:window-y="29"
inkscape:window-maximized="1"
inkscape:current-layer="Layer_1" /><path
inkscape:current-layer="Layer_1"
inkscape:snap-page="true" /><path
d="m 150.061,232.739 -67.232,67.868 c -3.363,3.267 -5.453,7.898 -5.453,12.991 0,9.991 8.083,18.173 17.989,18.173 H 222.744 V 445.34 c 0,12.536 10.177,22.711 22.713,22.711 12.537,0 22.715,-10.175 22.715,-22.711 V 331.771 h 136.46 c 9.899,0 17.992,-8.182 17.992,-18.173 0,-4.993 -2.006,-9.536 -5.269,-12.811 L 349.938,232.644 V 77.375 h 13.631 c 12.535,0 22.715,-10.177 22.715,-22.713 0,-12.536 -10.18,-22.713 -22.715,-22.713 H 136.432 c -12.536,0 -22.713,10.177 -22.713,22.713 0,12.537 10.177,22.713 22.713,22.713 h 13.629 V 232.739 Z M 231.83,95.548 v 118.109 c 0,9.996 -8.176,18.172 -18.172,18.172 -9.994,0 -18.171,-8.176 -18.171,-18.172 V 95.548 c 0,-9.996 8.177,-18.173 18.171,-18.173 9.995,0 18.172,8.177 18.172,18.173 z"
id="fill-edit"
inkscape:connector-curvature="0"

Before

Width:  |  Height:  |  Size: 2.3 KiB

After

Width:  |  Height:  |  Size: 2.3 KiB

View File

@ -45,9 +45,10 @@
<!-- if VIEW MODE -->
<div class='goo-menu' v-show='gstore.edit_i!=pi'>
<div class='enabled' :data-enabled='ue.code' :data-active='ue.disabled?0:1' title='UE activée' @click="gstore.ia_handler(pi)"></div>
<div class='remove' :data-remove='ue.code' title='Supprimer' @click="gstore.ir_handler(ue.code)"></div>
<div class='edit' :data-edit='ue.code' title='Modifier' @click="gstore.ie_toggle(pi)"></div>
<div class='enabled' :data-enabled='ue.code' :data-active='ue.disabled?0:1' title='UE activée' @click="gstore.ia_handler(pi)"></div>
<div class='required' :data-required='ue.code' :data-active='ue.required?1:0' title='UE obligatoire' @click="gstore.io_handler(pi)"></div>
<div class='remove' :data-remove='ue.code' title='Supprimer' @click="gstore.ir_handler(ue.code)"></div>
<div class='edit' :data-edit='ue.code' title='Modifier' @click="gstore.ie_toggle(pi)"></div>
</div>
<!-- if VIEW MODE -->
@ -61,7 +62,7 @@
<!-- endif -->
<!-- if VIEW MODE -->
<h1 v-show='gstore.edit_i!=pi'>{{ ue.label }}<span :data-visible='1'>({{ ue.code }})</span></h1>
<h1 v-show='gstore.edit_i!=pi' :class='ue.required?`pin`:`pin neutral`'><span :data-strike='ue.disabled?1:0'>{{ ue.label }}</span><span :data-visible='1'>({{ ue.code }})</span></h1>
<!-- if EDIT MODE -->
<h1 v-show='gstore.edit_i==pi' :class="ue.required ? 'warning' : ''">
<input type='text' placeholder='Libellé' v-model='gstore.edit_label'>
@ -72,8 +73,6 @@
<!-- if VIEW MODE -->
<div v-show='gstore.edit_i!=pi' :class="ue.required ? 'sub pin' : 'sub pin neutral'">{{ ue.required ? 'UE obligatoire' : 'UE optionnelle' }}</div>
<div v-show='gstore.edit_i!=pi' class='sub'><strong>{{ ue.volumeCours + ue.volumeTD + ue.volumeTP }}h</strong> totales</div>
<div v-show='gstore.edit_i!=pi' class='taglist'>
<span v-if='ue.formations.length==0' class='tag invalid'>Aucune formation</span>
<span v-for='form_id in ue.formations' :class="!!gstore.form_by_id(form_id).isInternal ? 'tag search' : 'tag'">{{ gstore.form_by_id(form_id).labelForm || '???' }}</span>
@ -114,6 +113,10 @@
</div>
<!-- endif -->
<div class='info'>
<strong>{{ ue.volumeCours + ue.volumeTD + ue.volumeTP }}h</strong> totales
</div>
</section>
</div>

View File

@ -504,9 +504,9 @@ gstore.add('ie_handler', function(ue_i){
/* (8) Manage instant admin
/* (8) Manage instant toggle
---------------------------------------------------------*/
/* (1) Define admin handler */
/* (1) Define 'disabled' handler */
gstore.add('ia_handler', function(ue_i){
/* (1) Abort if wrong ue_i */
@ -532,6 +532,32 @@ gstore.add('ia_handler', function(ue_i){
});
/* (1) Define 'required' / 'optional handler */
gstore.add('io_handler', function(ue_i){
/* (1) Abort if wrong ue_i */
if( ue_i == null || isNaN(ue_i) || gstore.get.ues[ue_i] == null)
return;
/* (2) Toggle current value */
var local = gstore.get.ues[ue_i];
var is_required = local.required == '1' || local.required === true;
var new_state = !is_required;
/* (3.1) Update in database */
api.call('PUT ue/'+local.code, { required: new_state }, function(rs){
/* (3.1.1) Abort on error */
if( rs.error !== 0 || rs.updated !== true )
return console.log('Impossible de changer le status \'requis\' / \'optionnel\', erreur '+rs.error);
/* (3.1.2) Success */
gstore.get.ues[ue_i].required = new_state ? 1 : 0;
});
});
/* (9) Manage 'manage' sub-page
---------------------------------------------------------*/

View File

@ -110,7 +110,7 @@
$btn-size: 1.8em;
$btn-space: 0em;
$nb-btn: 3;
$nb-btn: 4;
$nb-spc: $nb-btn - 1;
$cont-w: $btn-size * $nb-btn + $nb-spc * $btn-space;
@ -138,12 +138,14 @@
& > div.remove[data-remove],
& > div.edit[data-edit],
& > div.enabled[data-enabled],
& > div.required[data-required],
& > div.admin[data-admin]{
background-color: darken(#fff, 12%);
/* (2.1.2) displace all but 1st element */
&.edit[data-edit]{ left: calc( 100% - #{$btn-size * 2 + $btn-space} ); }
&.remove[data-remove]{ left: calc( 100% - #{$btn-size * 3 + $btn-space * 2} ); }
&.required[data-required]{ left: calc( 100% - #{$btn-size * 4 + $btn-space * 3} ); }
}
@ -153,6 +155,7 @@
& > div.remove[data-remove],
& > div.edit[data-edit],
& > div.enabled[data-enabled],
& > div.required[data-required],
& > div.admin[data-admin]{
display: inline-block;
position: absolute;
@ -206,6 +209,16 @@
&[data-active='1']:hover{ background-image: url('/asset/svg/bell.svg@f4a118'); }
}
/* (2.4) REQUIRED switch */
&.required[data-required]{
background-image: url('/asset/svg/pin-disabled.svg@aaaaaa');
z-index: 104;
&:hover{ background-image: url('/asset/svg/pin-disabled.svg@555555'); }
&[data-active='1']{ background-image: url('/asset/svg/pin.svg@ea4b35'); }
&[data-active='1']:hover{ background-image: url('/asset/svg/pin.svg@c44130'); }
}
}
@ -581,7 +594,26 @@
}
/* (9) Infobar */
& > div.info{
display: block;
position: relative;
margin-top: 1.9em;
margin-left: -1.9em;
height: auto;
width: calc( 100% + 2*1.9em - 2*1em);
margin-bottom: -1.9em;
padding: .3em 1em;
border-top: 1px solid #f3f3f3;
background-color: darken(#fafbfd,1%);
font-size: .8em;
color: #999;
}
}

View File

@ -54,4 +54,11 @@ a{
.mono{
font-family: 'Mono';
font-size: .9em;
}
[data-strike='1'],
.strike{
text-decoration: line-through;
opacity: .5;
}