[ue.view] updated 'required' colors + 'CM', 'TD', 'TP' with group count + when errors in bold red + error incicators

This commit is contained in:
xdrm-brackets 2018-03-29 21:21:37 +02:00
parent 53e671457d
commit 2d270f5689
7 changed files with 276 additions and 40 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 24 24"
height="24px"
id="Layer_1"
version="1.1"
viewBox="0 0 24 24"
width="24px"
xml:space="preserve"
sodipodi:docname="time.svg"
inkscape:version="0.92.2 5c3e80d, 2017-08-06"><metadata
id="metadata13"><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 /></cc:Work></rdf:RDF></metadata><defs
id="defs11" /><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="namedview9"
showgrid="false"
inkscape:zoom="9.8333333"
inkscape:cx="12"
inkscape:cy="12"
inkscape:window-x="0"
inkscape:window-y="29"
inkscape:window-maximized="1"
inkscape:current-layer="Layer_1" /><path
d="m 12,2.0344069 c -5.5018378,0 -9.9631017,4.4620943 -9.9631017,9.9655931 0,5.503499 4.4612639,9.965593 9.9631017,9.965593 5.502668,0 9.963102,-4.462094 9.963102,-9.965593 0,-5.5034988 -4.460434,-9.9655931 -9.963102,-9.9655931 z m 3.664016,13.8762581 -0.290663,0.290663 c -0.241665,0.241666 -0.649424,0.253292 -0.903547,0.02408 l -3.753707,-3.28449 C 10.460316,12.71254 10.266817,12.244987 10.283427,11.902835 l 0.347965,-5.9245446 c 0.01827,-0.3429825 0.313086,-0.6220191 0.656068,-0.6220191 h 0.40942 c 0.342982,0 0.636967,0.2790366 0.653577,0.6211886 l 0.28485,4.9279861 c 0.01744,0.342982 0.217582,0.830466 0.444299,1.08708 l 2.610985,3.012931 c 0.226718,0.256614 0.215921,0.663542 -0.02657,0.905208 z"
id="fill-edit"
inkscape:connector-curvature="0"
style="clip-rule:evenodd;fill-rule:evenodd;stroke-width:0.83046609" /></svg>

After

Width:  |  Height:  |  Size: 2.3 KiB

View File

@ -45,7 +45,7 @@
<!-- COURS --> <!-- COURS -->
<section class='cours' <section class='bcours'
v-for='(c,i) in gstore.manage.cours' v-for='(c,i) in gstore.manage.cours'
:data-id='c.idCours'> :data-id='c.idCours'>
@ -78,7 +78,7 @@
<!-- TD --> <!-- TD -->
<section class='td' <section class='btd'
v-for='(td,i) in gstore.manage.td' v-for='(td,i) in gstore.manage.td'
:data-id='td.idTD' :data-id='td.idTD'
data-anim-incoming='1' data-anim-incoming='1'
@ -113,7 +113,7 @@
<!-- TP --> <!-- TP -->
<section class='tp' <section class='btp'
v-for='(tp,i) in gstore.manage.tp' v-for='(tp,i) in gstore.manage.tp'
:data-id='tp.idTP' :data-id='tp.idTP'
data-anim-incoming='1' data-anim-incoming='1'

View File

@ -62,15 +62,34 @@
<!-- endif --> <!-- endif -->
<!-- if VIEW MODE --> <!-- if VIEW MODE -->
<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> <h1 v-show='gstore.edit_i!=pi' :class='ue.required?`pin`:`pin disabled`' :title='ue.required?`obligatoire`:`optionnelle`'><span :data-strike='ue.disabled?1:0'>{{ ue.label }}</span><span :data-visible='1'>({{ ue.code }})</span></h1>
<!-- if EDIT MODE --> <!-- if EDIT MODE -->
<h1 v-show='gstore.edit_i==pi' :class="ue.required ? 'warning' : ''"> <h1 v-show='gstore.edit_i==pi' :class='ue.required?`pin`:`pin disabled`'>
<input type='text' placeholder='Libellé' v-model='gstore.edit_label'> <input type='text' placeholder='Libellé' v-model='gstore.edit_label'>
<!-- <span :data-visible='1'>({{ ue.code }})</span> --> <!-- <span :data-visible='1'>({{ ue.code }})</span> -->
<span data-visible='1'>(<input type='text' placeholder='code' v-model='gstore.edit_code'>)</span> <span data-visible='1'>(<input type='text' placeholder='code' v-model='gstore.edit_code'>)</span>
</h1> </h1>
<!-- endif --> <!-- endif -->
<!-- if VIEW MODE -->
<div class='table little' v-show='gstore.edit_i!=pi'>
<div>
<span class='active reflow' :data-error='ue.nbrCours!=ue.nbrProfCours || ue.modCours != 0?1:0'>{{ ue.nbrCours }} CM</span>
<span v-show='ue.nbrCours!=ue.nbrProfCours' class='notlast user reflow nospace' data-tooltip='enseignant(s) manquant(s)'></span>
<span v-show='ue.modCours != 0' class='notlast time reflow nospace' data-tooltip='volume horaire incohérent'></span>
</div>
<div>
<span class='active reflow' :data-error='ue.nbrTD!=ue.nbrProfTD || ue.modTD != 0?1:0'>{{ ue.nbrTD }} TD</span>
<span v-show='ue.nbrTD!=ue.nbrProfTD' class='notlast user reflow nospace' data-tooltip='enseignant(s) manquant(s)'></span>
<span v-show='ue.modTD != 0' class='notlast time reflow nospace' data-tooltip='volume horaire incohérent'></span>
</div>
<div>
<span class='active reflow' :data-error='ue.nbrTP!=ue.nbrProfTP || ue.modTP != 0?1:0'>{{ ue.nbrTP }} TP</span>
<span v-show='ue.nbrTP!=ue.nbrProfTP' class='notlast user reflow nospace' data-tooltip='enseignant(s) manquant(s)'></span>
<span v-show='ue.modTP != 0' class='notlast time reflow nospace' data-tooltip='volume horaire incohérent'></span>
</div>
</div>
<!-- if VIEW MODE --> <!-- if VIEW MODE -->
<div v-show='gstore.edit_i!=pi' class='taglist'> <div v-show='gstore.edit_i!=pi' class='taglist'>
@ -82,25 +101,6 @@
<div v-show='gstore.edit_i==pi' :class="gstore.edit_err.length > 0 ? 'sub warning' : 'sub'" :data-valid='gstore.edit_err_valid?1:0'>{{ gstore.edit_err }}</div> <div v-show='gstore.edit_i==pi' :class="gstore.edit_err.length > 0 ? 'sub warning' : 'sub'" :data-valid='gstore.edit_err_valid?1:0'>{{ gstore.edit_err }}</div>
<!-- endif --> <!-- endif -->
<div class='footer'>
<!-- if VIEW MODE -->
<span v-show='gstore.edit_i!=pi' :class="(ue.volumeCours == 0) ? 'course' : 'course active'">{{ ue.volumeCours }}h <span>Cours</span></span>
<hr v-show='gstore.edit_i!=pi'>
<span v-show='gstore.edit_i!=pi' :class="(ue.volumeTD == 0) ? 'td' : 'td active'">{{ ue.volumeTD }}h <span>TD</span></span>
<hr v-show='gstore.edit_i!=pi'>
<span v-show='gstore.edit_i!=pi' :class="(ue.volumeTP == 0) ? 'tp' : 'tp active'">{{ ue.volumeTP }}h <span>TP</span></span>
<!-- if EDIT MODE -->
<span v-show='gstore.edit_i==pi' class='course'><input type='text' placeholder='???' v-model='gstore.edit_vol.c'><span>Cours</span></span>
<hr v-show='gstore.edit_i==pi'>
<span v-show='gstore.edit_i==pi' class='td'><input type='text' placeholder='???' v-model='gstore.edit_vol.td'><span>TD</span></span>
<hr v-show='gstore.edit_i==pi'>
<span v-show='gstore.edit_i==pi' class='tp'><input type='text' placeholder='???' v-model='gstore.edit_vol.tp'><span>TP</span></span>
<!-- endif -->
</div>
<!-- if VIEW MODE --> <!-- if VIEW MODE -->
<div class='footer' v-show='gstore.edit_i!=pi'> <div class='footer' v-show='gstore.edit_i!=pi'>
@ -114,7 +114,10 @@
<!-- endif --> <!-- endif -->
<div class='info'> <div class='info'>
<strong>{{ ue.volumeCours + ue.volumeTD + ue.volumeTP }}h</strong> totales <strong class='cm reflow'>{{ ue.volumeCours}}</strong> CM
<strong class='td reflow'>{{ ue.volumeTD}}</strong> TD
<strong class='tp reflow'>{{ ue.volumeTP }}</strong> TP
<strong>{{ ue.volumeCours + ue.volumeTD + ue.volumeTP }}h</strong>
</div> </div>
</section> </section>

View File

@ -215,8 +215,8 @@
z-index: 104; z-index: 104;
&:hover{ background-image: url('/asset/svg/pin-disabled.svg@555555'); } &:hover{ background-image: url('/asset/svg/pin-disabled.svg@555555'); }
&[data-active='1']{ background-image: url('/asset/svg/pin.svg@ea4b35'); } &[data-active='1']{ background-image: url('/asset/svg/pin.svg@f4bd18'); }
&[data-active='1']:hover{ background-image: url('/asset/svg/pin.svg@c44130'); } &[data-active='1']:hover{ background-image: url('/asset/svg/pin.svg@f4a118'); }
} }
} }
@ -284,6 +284,8 @@
color: darken($primary-color, 5%); color: darken($primary-color, 5%);
font-size: 1em; font-size: 1em;
margin: .4em 0;
// flex // flex
flex-direction: row; flex-direction: row;
justify-content: flex-start; justify-content: flex-start;
@ -372,9 +374,16 @@
align-items: center; align-items: center;
flex-wrap: nowrap; flex-wrap: nowrap;
&.little{
font-size: .7em;
white-space: nowrap;
}
/* (6.1) Column */ /* (6.1) Column */
& > div{ & > div{
flex: 1;
display: flex; display: flex;
position: relative; position: relative;
height: 2.3em; height: 2.3em;
@ -389,7 +398,7 @@
// flex properties // flex properties
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: center;
align-items: center; align-items: center;
flex-wrap: nowrap; flex-wrap: nowrap;
@ -421,7 +430,7 @@
} }
/* (6.2) Column Emphasis */ /* (6.2) Column Emphasis */
& > span:last-child{ & > span:last-child:not(.notlast){
display: block; display: block;
position: relative; position: relative;
min-width: 4em; min-width: 4em;
@ -599,20 +608,20 @@
display: block; display: block;
position: relative; position: relative;
margin-top: 1.9em; margin-top: 2.1em;
margin-left: -1.9em; margin-left: -2.1em;
height: auto; height: auto;
width: calc( 100% + 2*1.9em - 2*1em); width: calc( 100% + 2*2.1em - 2*1em);
margin-bottom: -1.9em; margin-bottom: -2.1em;
padding: .3em 1em; padding: .3em 1em;
border-top: 1px solid #f3f3f3; border-top: 1px solid #f3f3f3;
background-color: darken(#fafbfd,1%); background-color: darken(#fafbfd,1%);
font-size: .8em; font-size: .7em;
color: #999; color: #bbb;
} }
} }

View File

@ -60,9 +60,9 @@
&.create:hover{ border-left-color: $form-valid-color; } &.create:hover{ border-left-color: $form-valid-color; }
&:hover, &:hover,
&.cours:hover{ border-left-color: $form-search-color; } &.bcours:hover{ border-left-color: $form-search-color; }
&.td:hover{ border-left-color: $form-valid-color; } &.btd:hover{ border-left-color: $form-valid-color; }
&.tp:hover{ border-left-color: $form-invalid-color; } &.btp:hover{ border-left-color: $form-invalid-color; }
} }

View File

@ -13,6 +13,7 @@
@import 'global/tag'; @import 'global/tag';
.error, [data-error='1']{ font-weight: bold; color: $form-invalid-color; }
@ -62,3 +63,46 @@ a{
text-decoration: line-through; text-decoration: line-through;
opacity: .5; opacity: .5;
} }
[data-tooltip]{
position: relative;
cursor: pointer;
&:after{
content: attr(data-tooltip);
display: block;
position: absolute;
top: calc( 100% + .3em );
left: 50%;
margin-left: -.1em;
padding: .4em .6em;
border-radius: 3px / 3px;
box-shadow: 0 0 .5em 0 #fff;
font-size: .7em;
color: #ddd;
background-color: #444;
transform: translateX(-50%) translateY(-50%) scale(0);
transition: transform .1s ease-in-out;
z-index: 1000;
}
&:hover:not([data-tooltip='']):after{
transform: translateX(-50%) translateY(0) scale(1);
}
}

View File

@ -4,7 +4,12 @@
/* (1) Warning icon */ /* (1) Warning icon */
.warning, .warning,
.pin{ .user,
.time,
.pin,
.cm,
.td,
.tp{
// add icon before // add icon before
&:before{ &:before{
@ -21,6 +26,30 @@
background-size: auto 90%; background-size: auto 90%;
} }
&.nospace:before{
margin-right: 0;
}
&.reflow{
white-space: nowrap;
&:before{
font-size: 1.2em;
background-position: center bottom;
background-size: auto 70%;
}
}
&.big{
&:before{
font-size: 1.5em;
}
}
// icon color variants // icon color variants
&.neutral:before{ background-image: url('/asset/svg/warning.svg@#{$rd-form-neutral-color}'); } &.neutral:before{ background-image: url('/asset/svg/warning.svg@#{$rd-form-neutral-color}'); }
&.valid:before{ background-image: url('/asset/svg/warning.svg@#{$rd-form-valid-color}'); } &.valid:before{ background-image: url('/asset/svg/warning.svg@#{$rd-form-valid-color}'); }
@ -40,12 +69,118 @@
// add icon before // add icon before
&:before{ &:before{
background-image: url('/asset/svg/pin.svg@#{$rd-form-invalid-color}'); background-image: url('/asset/svg/pin.svg@f4bd18');
} }
// icon color variants // icon color variants
&.disabled:before{ background-image: url('/asset/svg/pin-disabled.svg@#{$rd-form-neutral-color}'); }
&.neutral:before{ background-image: url('/asset/svg/pin.svg@#{$rd-form-neutral-color}'); } &.neutral:before{ background-image: url('/asset/svg/pin.svg@#{$rd-form-neutral-color}'); }
&.valid:before{ background-image: url('/asset/svg/pin.svg@#{$rd-form-valid-color}'); } &.valid:before{ background-image: url('/asset/svg/pin.svg@#{$rd-form-valid-color}'); }
&.search:before{ background-image: url('/asset/svg/pin.svg@#{$rd-form-search-color}'); } &.search:before{ background-image: url('/asset/svg/pin.svg@#{$rd-form-search-color}'); }
} }
/* (3) CM */
.cm{
// add icon before
&:before{
background-image: url('/asset/svg/course.svg@#{$menu-item-inactive}');
}
&.active:before{ background-image: url('/asset/svg/course.svg@5bb8f0'); }
// icon color variants
&.neutral:before{ background-image: url('/asset/svg/course.svg@#{$rd-form-neutral-color}'); }
&.valid:before{ background-image: url('/asset/svg/course.svg@#{$rd-form-valid-color}'); }
&.search:before{ background-image: url('/asset/svg/course.svg@#{$rd-form-search-color}'); }
}
/* (4) TD */
.td{
// add icon before
&:before{
background-image: url('/asset/svg/td.svg@#{$menu-item-inactive}');
}
&.active:before{ background-image: url('/asset/svg/td.svg@20b565'); }
// icon color variants
&.neutral:before{ background-image: url('/asset/svg/td.svg@#{$rd-form-neutral-color}'); }
&.valid:before{ background-image: url('/asset/svg/td.svg@#{$rd-form-valid-color}'); }
&.search:before{ background-image: url('/asset/svg/td.svg@#{$rd-form-search-color}'); }
}
/* (5) TP */
.tp{
// add icon before
&:before{
background-image: url('/asset/svg/tp.svg@#{$menu-item-inactive}');
}
&.active:before{ background-image: url('/asset/svg/tp.svg@e85456'); }
// icon color variants
&.neutral:before{ background-image: url('/asset/svg/tp.svg@#{$rd-form-neutral-color}'); }
&.valid:before{ background-image: url('/asset/svg/tp.svg@#{$rd-form-valid-color}'); }
&.search:before{ background-image: url('/asset/svg/tp.svg@#{$rd-form-search-color}'); }
}
/* (6) USER */
.user{
// add icon before
&:before{
background-image: url('/asset/svg/teacher.svg@#{$menu-item-inactive}');
}
// icon color variants
&.neutral:before{ background-image: url('/asset/svg/teacher.svg@#{$rd-form-neutral-color}'); }
&.invalid:before{ background-image: url('/asset/svg/teacher.svg@#{$rd-form-invalid-color}'); }
&.valid:before{ background-image: url('/asset/svg/teacher.svg@#{$rd-form-valid-color}'); }
&.search:before{ background-image: url('/asset/svg/teacher.svg@#{$rd-form-search-color}'); }
}
/* (7) TIME */
.time{
// add icon before
&:before{
background-image: url('/asset/svg/time.svg@#{$menu-item-inactive}');
}
// icon color variants
&.neutral:before{ background-image: url('/asset/svg/time.svg@#{$rd-form-neutral-color}'); }
&.invalid:before{ background-image: url('/asset/svg/time.svg@#{$rd-form-invalid-color}'); }
&.valid:before{ background-image: url('/asset/svg/time.svg@#{$rd-form-valid-color}'); }
&.search:before{ background-image: url('/asset/svg/time.svg@#{$rd-form-search-color}'); }
}