[webpack.ue.view] found an design idea for 'required' vs. 'optional' UEs

public_html/asset/svg/pin.svg

@@ -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.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.472"
+     inkscape:cx="14.830508"
+     inkscape:cy="250"
+     inkscape:window-x="0"
+     inkscape:window-y="29"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="Layer_1" /><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"
+     style="clip-rule:evenodd;fill:#010101;fill-rule:evenodd" /></svg>

public_html/asset/svg/warning_radio.svg

@@ -7,17 +7,28 @@
    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="1792"
-   id="Layer_1"
+   viewBox="0 0 1792 1792"
-   version="1.0"
+   width="1792"
-   viewBox="0 0 24 24"
+   version="1.1"
-   xml:space="preserve"
+   id="svg4"
    sodipodi:docname="warning_radio.svg"
-   inkscape:version="0.92.2 5c3e80d, 2017-08-06"><metadata
+   inkscape:version="0.92.2 5c3e80d, 2017-08-06">
-     id="metadata13"><rdf:RDF><cc:Work
+  <metadata
-         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+     id="metadata10">
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
+    <rdf:RDF>
-     id="defs11" /><sodipodi:namedview
+      <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="defs8" />
+  <sodipodi:namedview
      pagecolor="#ffffff"
      bordercolor="#666666"
      borderopacity="1"
@@ -28,15 +39,17 @@
      inkscape:pageshadow="2"
      inkscape:window-width="1920"
      inkscape:window-height="1015"
-     id="namedview9"
+     id="namedview6"
      showgrid="false"
-     inkscape:zoom="9.8333333"
+     inkscape:zoom="0.13169643"
-     inkscape:cx="12"
+     inkscape:cx="896"
-     inkscape:cy="12"
+     inkscape:cy="896"
      inkscape:window-x="0"
      inkscape:window-y="29"
      inkscape:window-maximized="1"
-     inkscape:current-layer="Layer_1" /><path
+     inkscape:current-layer="svg4" />
-     d="M 12,2 C 6.5,2 2,6.5 2,12 2,17.5 6.5,22 12,22 17.5,22 22,17.5 22,12 22,6.5 17.5,2 12,2 Z m 0,2 c 4.4,0 8,3.6 8,8 0,4.4 -3.6,8 -8,8 C 7.6,20 4,16.4 4,12 4,7.6 7.6,4 12,4 Z m -1,3 v 6 h 2 V 7 Z m 0,8 v 2 h 2 v -2 z"
+  <path
+     d="m 1024,1375 v -190 q 0,-14 -9.5,-23.5 Q 1005,1152 992,1152 H 800 q -13,0 -22.5,9.5 -9.5,9.5 -9.5,23.5 v 190 q 0,14 9.5,23.5 9.5,9.5 22.5,9.5 h 192 q 13,0 22.5,-9.5 9.5,-9.5 9.5,-23.5 z m -2,-374 18,-459 q 0,-12 -10,-19 -13,-11 -24,-11 H 786 q -11,0 -24,11 -10,7 -10,21 l 17,457 q 0,10 10,16.5 10,6.5 24,6.5 h 185 q 14,0 23.5,-6.5 9.5,-6.5 10.5,-16.5 z m -14,-934 768,1408 q 35,63 -2,126 -17,29 -46.5,46 -29.5,17 -63.5,17 H 128 Q 94,1664 64.5,1647 35,1630 18,1601 -19,1538 16,1475 L 784,67 q 17,-31 47,-49 30,-18 65,-18 35,0 65,18 30,18 47,49 z"
      id="fill-edit"
-     inkscape:connector-curvature="0" /></svg>
+     inkscape:connector-curvature="0" />
+</svg>

webpack/component/ue/view.vue

@@ -73,7 +73,7 @@
 
 
 				<!-- if VIEW MODE -->
-				<div v-show='gstore.edit_i!=pi' :class="ue.required ? 'sub warning' : 'sub'">{{ ue.required ? 'UE obligatoire' : 'UE optionnelle' }}</div>
+				<div v-show='gstore.edit_i!=pi' class='sub warning' :data-state='ue.required ? 1 : 0'>{{ 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-for='form_id in ue.formations' :class="!!gstore.form_by_id(form_id).isInternal ? 'search' : ''">{{ gstore.form_by_id(form_id).labelForm || '???' }}</span>

webpack/scss/container.scss

@@ -667,6 +667,22 @@
 					color: $form-valid-color;
 				}
 
+				// state style
+				&[data-state]{
+					color: $form-neutral-color;
+
+					&:before,
+					&[data-state='0']:before{
+						background-image: url('/asset/svg/pin.svg@#{$rd-form-neutral-color}');
+						background-position: center center;
+						background-size: auto 100%;
+					}
+
+					&[data-state='1']:before{
+						background-image: url('/asset/svg/pin.svg@#{$rd-form-invalid-color}');
+					}
+				};
+
 			}
 
 		}