[webpack.ue.manage] SCSS for adding/removing formations to an existing cours|td|tp (must implement now in JS)

This commit is contained in:
xdrm-brackets 2018-03-15 15:15:12 +01:00
parent 5bf11d0b6d
commit 1d0f8933be
5 changed files with 180 additions and 10 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="plus.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="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 23.008475,14.610169 h -8.5 v 8.5 c 0,0.276 -0.224,0.5 -0.5,0.5 h -4 c -0.2760004,0 -0.5000004,-0.224 -0.5000004,-0.5 v -8.5 h -8.5 c -0.27600002,0 -0.50000002,-0.224 -0.50000002,-0.5 v -4 c 0,-0.2759995 0.224,-0.4999995 0.50000002,-0.4999995 h 8.5 v -8.5 c 0,-0.27600001 0.224,-0.50000001 0.5000004,-0.50000001 h 4 c 0.276,0 0.5,0.224 0.5,0.50000001 v 8.5 h 8.5 c 0.276,0 0.5,0.224 0.5,0.4999995 v 4 c 0,0.276 -0.224,0.5 -0.5,0.5 z"
id="fill-edit"
inkscape:connector-curvature="0"
style="clip-rule:evenodd;fill-rule:evenodd" /></svg>

After

Width:  |  Height:  |  Size: 2.0 KiB

View File

@ -43,7 +43,7 @@ module.exports = [ {
output: { output: {
path: path.resolve(__dirname, './public_html/js/bundle'), path: path.resolve(__dirname, './public_html/js/bundle'),
publicPath: '/js/bundle/', publicPath: '/js/bundle/',
filename: 'home@[hash].js' filename: 'home@0.js'
}, },
module: mod_common, module: mod_common,
devtool: (process.env.NODE_ENV==='development') ? '#eval-source-map' : false devtool: (process.env.NODE_ENV==='development') ? '#eval-source-map' : false
@ -55,7 +55,7 @@ module.exports = [ {
output: { output: {
path: path.resolve(__dirname, './public_html/js/bundle'), path: path.resolve(__dirname, './public_html/js/bundle'),
publicPath: '/js/bundle/', publicPath: '/js/bundle/',
filename: 'teacher@[hash].js' filename: 'teacher@0.js'
}, },
module: mod_common, module: mod_common,
devtool: (process.env.NODE_ENV==='development') ? '#eval-source-map' : false devtool: (process.env.NODE_ENV==='development') ? '#eval-source-map' : false
@ -67,7 +67,7 @@ module.exports = [ {
output: { output: {
path: path.resolve(__dirname, './public_html/js/bundle'), path: path.resolve(__dirname, './public_html/js/bundle'),
publicPath: '/js/bundle/', publicPath: '/js/bundle/',
filename: 'ue@[hash].js' filename: 'ue@0.js'
}, },
module: mod_common, module: mod_common,
devtool: (process.env.NODE_ENV==='development') ? '#eval-source-map' : false devtool: (process.env.NODE_ENV==='development') ? '#eval-source-map' : false
@ -79,7 +79,7 @@ module.exports = [ {
output: { output: {
path: path.resolve(__dirname, './public_html/js/bundle'), path: path.resolve(__dirname, './public_html/js/bundle'),
publicPath: '/js/bundle/', publicPath: '/js/bundle/',
filename: 'fiche@[hash].js' filename: 'fiche@0.js'
}, },
module: mod_common, module: mod_common,
devtool: (process.env.NODE_ENV==='development') ? '#eval-source-map' : false devtool: (process.env.NODE_ENV==='development') ? '#eval-source-map' : false
@ -91,7 +91,7 @@ module.exports = [ {
output: { output: {
path: path.resolve(__dirname, './public_html/js/bundle'), path: path.resolve(__dirname, './public_html/js/bundle'),
publicPath: '/js/bundle/', publicPath: '/js/bundle/',
filename: 'settings@[hash].js' filename: 'settings@0.js'
}, },
module: mod_common, module: mod_common,
devtool: (process.env.NODE_ENV==='development') ? '#eval-source-map' : false devtool: (process.env.NODE_ENV==='development') ? '#eval-source-map' : false
@ -103,7 +103,7 @@ module.exports = [ {
output: { output: {
path: path.resolve(__dirname, './public_html/js/bundle'), path: path.resolve(__dirname, './public_html/js/bundle'),
publicPath: '/js/bundle/', publicPath: '/js/bundle/',
filename: 'login@[hash].js' filename: 'login@0.js'
}, },
module: mod_common, module: mod_common,
devtool: (process.env.NODE_ENV==='development') ? '#eval-source-map' : false devtool: (process.env.NODE_ENV==='development') ? '#eval-source-map' : false

View File

@ -25,7 +25,21 @@
<div :data-prof='c.idProf'>{{ c.idProf ? `${c.firstName} ${c.lastName}` : 'Aucun enseignant affecté' }}</div> <div :data-prof='c.idProf'>{{ c.idProf ? `${c.firstName} ${c.lastName}` : 'Aucun enseignant affecté' }}</div>
<div>{{ c.volume }}</div> <div>{{ c.volume }}</div>
<div class='taglist'> <div class='taglist'>
<span v-for='f in c.formations' class='tag'>{{ gstore.form_by_id(f).labelForm || '???' }}</span> <div v-for='f in c.formations' data-action>
<span class='tag'>{{ gstore.form_by_id(f).labelForm || '???' }}</span>
<span data-remove @click='gstore.rem_for(0, c.idCours, f)'></span>
</div>
<div data-action>
<select class='tag'>
<option value='-' disbabled selected>Ajouter</option>
<option
v-for='f in gstore.formations'
v-show='c.formations.indexOf(f.idForm) < 0'
:value='f.idForm'>{{ f.labelForm }}</option>
</select>
<span class='pointer' data-create @click='gstore.add_for(0, c.idCours)'></span>
</div>
</div> </div>
</section> </section>
@ -42,7 +56,21 @@
<div :data-prof='td.idProf'>{{ td.idProf ? `${td.firstName} ${td.lastName}` : 'Aucun enseignant affecté' }}</div> <div :data-prof='td.idProf'>{{ td.idProf ? `${td.firstName} ${td.lastName}` : 'Aucun enseignant affecté' }}</div>
<div>{{ td.volume }}</div> <div>{{ td.volume }}</div>
<div class='taglist'> <div class='taglist'>
<span v-for='f in td.formations' class='tag'>{{ gstore.form_by_id(f).labelForm || '???' }}</span> <div v-for='f in td.formations' data-action>
<span class='tag'>{{ gstore.form_by_id(f).labelForm || '???' }}</span>
<span data-remove @click='gstore.rem_for(1, td.idTD, f)'></span>
</div>
<div data-action>
<select class='tag'>
<option value='-' disbabled selected>Ajouter</option>
<option
v-for='f in gstore.formations'
v-show='td.formations.indexOf(f.idForm) < 0'
:value='f.idForm'>{{ f.labelForm }}</option>
</select>
<span class='pointer' data-create @click='gstore.add_for(1, td.idTD)'></span>
</div>
</div> </div>
</section> </section>
@ -59,7 +87,21 @@
<div :data-prof='tp.idProf'>{{ tp.idProf ? `${tp.firstName} ${tp.lastName}` : 'Aucun enseignant affecté' }}</div> <div :data-prof='tp.idProf'>{{ tp.idProf ? `${tp.firstName} ${tp.lastName}` : 'Aucun enseignant affecté' }}</div>
<div>{{ tp.volume }}</div> <div>{{ tp.volume }}</div>
<div class='taglist'> <div class='taglist'>
<span v-for='f in tp.formations' class='tag'>{{ gstore.form_by_id(f).labelForm || '???' }}</span> <div v-for='f in tp.formations' data-action>
<span class='tag'>{{ gstore.form_by_id(f).labelForm || '???' }}</span>
<span data-remove @click='gstore.rem_for(2, tp.idTP, f)'></span>
</div>
<div data-action>
<select class='tag'>
<option value='-' disbabled selected>Ajouter</option>
<option
v-for='f in gstore.formations'
v-show='tp.formations.indexOf(f.idForm) < 0'
:value='f.idForm'>{{ f.labelForm }}</option>
</select>
<span class='pointer' data-create @click='gstore.add_for(2, tp.idTP)'></span>
</div>
</div> </div>
</section> </section>

View File

@ -45,3 +45,7 @@ a{
color: $secondary-color; color: $secondary-color;
} }
/* (6) pointer cursor (2 times the class to increase priority) */
.pointer.pointer{
cursor: pointer;
}

View File

@ -14,10 +14,17 @@
flex-wrap: wrap; flex-wrap: wrap;
/* (9.1) inner tags */ /* (9.1) inner tags */
& > span.tag{ & .tag,
& [data-action] .tag + span[data-remove],
& [data-action] .tag + span[data-create]{
display: inline-block;
position: relative;
padding: .2em .5em; padding: .2em .5em;
margin-top: .2em;
margin-right: .5em; margin-right: .5em;
border: 1px solid lighten($form-neutral-color, 5%); border: 1px solid lighten($form-neutral-color, 5%);
border-radius: 3px; border-radius: 3px;
@ -32,6 +39,78 @@
&.invalid{ border-color: lighten($form-invalid-color, 20%); } &.invalid{ border-color: lighten($form-invalid-color, 20%); }
&.search{ border-color: lighten($form-search-color, 10%); } &.search{ border-color: lighten($form-search-color, 10%); }
}
/* (9.2) container for action tags */
& [data-action]{
display: flex;
flex-direction: row;
justify-content: center;
flex-wrap: nowrap;
.tag{
border-radius: 3px 0 0 3px;
margin-right: 0;
/* (9.2.1) Removable tags */
& + span[data-remove]{
display: inline-block;
position: relative;
width: .8em;
height: 1.3em;
border-left: 0;
border-radius: 0 3px 3px 0;
background: #fff url('/asset/svg/cross.svg@aaaaaa') center center no-repeat;
background-size: 40% auto;
cursor: pointer;
z-index: 102;
&:hover{ background-image: url('/asset/svg/cross.svg@#{$rd-form-invalid-color}'); }
}
/* (9.2.2) NEW tags */
& + span[data-create]{
display: inline-block;
position: relative;
width: .8em;
height: 1.3em;
border-left: 0;
border-radius: 0 3px 3px 0;
background: #fff url('/asset/svg/plus.svg@aaaaaa') center center no-repeat;
background-size: 40% auto;
cursor: pointer;
z-index: 102;
&:hover{ background-image: url('/asset/svg/plus.svg@#{$rd-form-valid-color}'); }
}
}
}
/* (9.3) select tag */
& select.tag{
height: 1.8em;
margin-left: 0;
padding-right: 1em;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: transparent url('/asset/svg/down_arrow.svg@bbbbbb') right .5em bottom .1em no-repeat;
background-size: auto 80%;
} }
} }