Merge branch 'master' of https://framagit.org/Chill-project/Chill-Main

Resources/public/js/collection/collection.scss

@@ -13,6 +13,10 @@ div.chill-collection {
         li.chill-collection__list__entry:nth-last-child(1n+2) {
             margin-bottom: 1rem;
         }
+        
+        button.chill-collection__list__remove-entry {
+            margin-left: 0.5rem;
+        }
     }
     
     button.chill-collection__button--add {

Resources/public/js/collection/collections.js

@@ -76,7 +76,7 @@ var initializeRemove = function(collection, entry) {
         return;
     }
     
-    button.classList.add('sc-button', 'bt-delete');
+    button.classList.add('sc-button', 'bt-delete', 'chill-collection__list__remove-entry');
     button.textContent = content;
     
     button.addEventListener('click', function(e) {

Resources/public/main.js

@@ -0,0 +1,36 @@
+// import jQuery
+const $ = require('jquery');
+// create global $ and jQuery variables
+global.$ = global.jQuery = $;
+
+const moment = require('moment');
+global.moment = moment;
+
+const pikaday = require('pikaday-jquery');
+
+const select2 = require('select2');
+global.select2 = select2;
+
+// import js
+import {chill} from './js/chill.js';
+global.chill = chill;
+
+// css
+require('./sass/scratch.scss');
+require('./css/chillmain.css');
+require('./css/pikaday.css');
+require('./js/collection/collections.js');
+require('./modules/breadcrumb/index.js');
+require('./modules/download-report/index.js');
+//require('./css/scratch.css');
+//require('./css/select2/select2.css');
+require('select2/dist/css/select2.css');
+require('./modules/select_interactive_loading/index.js');
+require('./modules/export-list/export-list.scss');
+
+// img
+require('./img/favicon.ico');
+require('./img/logo-chill-sans-slogan_white.png');
+require('./img/logo-chill-outil-accompagnement_white.png');
+
+

Resources/public/modules/login_page/login.scss

@@ -17,6 +17,10 @@ body {
     position: relative;
     height: 90%;
     padding-top: 10%;
+    footer.footer {
+      position: absolute;
+      bottom: 0;
+   }
 }
 
 #content:before {
@@ -63,10 +67,10 @@ button {
 
 p.forgot-password-link {
     text-align: center;
-    
+
     a {
         font-weight: 300;
         color: #fff;
         text-decoration: none;
     }
-}
+}

Resources/public/modules/show_hide/index.js

@@ -0,0 +1 @@
+require("./show_hide.js");

Resources/public/modules/show_hide/show_hide.js

@@ -0,0 +1,126 @@
+/**
+ * Create a control to show or hide values
+ * 
+ * Possible options are:
+ * 
+ *  - froms: an Element, an Array of Element, or a NodeList. A
+ *    listener will be attached to **all** input of those elements
+ *    and will trigger the check on changes
+ *  - test: a function which will test the element and will return true 
+ *    if the content must be shown, false if it must be hidden.
+ *    The function will receive the `froms` as first argument, and the 
+ *    event as second argument.
+ *  - container: an Element, an Array of Element, or a Node List. The 
+ *    child nodes will be hidden / shown inside this container
+ *  - event_name: the name of the event to listen to. `'change'` by default.
+ * 
+ * @param object options
+ */
+var ShowHide = function(options) {
+    var
+        froms =  typeof options.froms[Symbol.iterator] === "function" ? options.froms : [ options.froms ], //options.froms;
+        test = options.test,
+        container = typeof options.container[Symbol.iterator] === "function" ? options.container : [ options.container ],
+        is_shown = true,
+        event_name = 'event_name' in options ? options.event_name : 'change',
+        container_content = [],
+        debug = 'debug' in options ? options.debug : false,
+        load_event = 'load_event' in options ? options.load_event : 'load',
+        id = 'uid' in options ? options.id : Math.random();
+    
+    var bootstrap = function(event) {
+        if (debug) {
+            console.log('debug is activated on this show-hide', this);
+        }
+        // keep the content in memory
+        for (let c of container.values()) {
+            let contents = [];
+            for (let el of c.childNodes.values()) {
+                contents.push(el);
+            }
+            container_content.push(contents);
+        }
+
+        // attach the listener on each input
+        for (let f of froms.values()) {
+            let inputs = f.querySelectorAll('input');
+            for (let input of inputs.values()) {
+                if (debug) {
+                    console.log('attaching event to input', input);
+                }
+                input.addEventListener(event_name, function(e) {
+                    onChange(e);
+                });
+            }
+        }
+
+        // first launch of the show/hide
+        onChange(event);    
+    };
+
+    
+    var onChange = function (event) {
+        var result = test(froms, event), me;
+
+        if (result === true) {
+            if (is_shown === false) {
+                forceShow();
+                me = new CustomEvent('show-hide-show', { detail: { id: id, container: container, froms: froms } });
+                window.dispatchEvent(me);
+            }
+        } else if (result === false) {
+            if (is_shown) {
+                forceHide();
+                me = new CustomEvent('show-hide-hide', { detail: { id: id, container: container, froms: froms } });
+                window.dispatchEvent(me);
+            }
+        } else {
+            throw "the result of test is not a boolean";
+        }
+        
+    };
+    
+    var forceHide = function() {
+        if (debug) {
+            console.log('force hide');
+        }
+        for (let contents of container_content.values()) {
+            for (let el of contents.values()) {
+                el.remove();
+            }
+        }
+        is_shown = false;
+    };
+    
+    var forceShow = function() {
+        if (debug) {
+            console.log('show');
+        }
+        for (let i of container_content.keys()) {
+            var contents = container_content[i];
+            for (let el of contents.values()) {
+                container[i].appendChild(el);
+            }
+        }
+        is_shown = true;
+    };
+    
+    var forceCompute = function(event) {
+        onChange(event);
+    };
+    
+    
+    if (load_event !== null) {
+        window.addEventListener('load', bootstrap);
+    } else {
+        bootstrap(null);
+    }
+    
+    return {
+        forceHide: forceHide,
+        forceShow: forceShow,
+        forceCompute: forceCompute,
+    };
+};
+
+export {ShowHide};

Resources/public/modules/tabs/index.js

@@ -0,0 +1,2 @@
+require("./tabs.js");
+require("./tabs.scss");

Resources/public/modules/tabs/tabs.js

@@ -0,0 +1,118 @@
+/*
+ * Remove active class on both elements: link and content
+ */
+let resetActive = function(links, contents)
+{
+    for (items of [links, contents]) {
+        items.forEach(function(item) {
+            if (item.classList.contains('active')) {
+                item.classList.remove('active');
+            }
+        });
+    }
+}
+
+/*
+ * Count links array and return rank of given link
+ */
+let countNewActive = function(links, link)
+{
+    let rank = 0;
+    for (let i = 0; i < links.length; ++i) {
+        rank++;
+        if(links[i] == link) {
+            return rank;
+        }
+    }
+}
+
+/*
+ * Set class active on both new elements: link and content
+ */
+let setNewActive = function(links, contents, rank)
+{
+    if (! links[rank-1]) { rank = 1; }
+    link = links[rank-1];
+
+    link.classList.add('active');
+
+    count = 0;
+    contents.forEach(function(pane) {
+        count++;
+        if (rank == count) {
+            pane.classList.add('active');
+        }
+    });
+}
+
+/*
+ * Set height of content pane
+ */
+let setPaneHeight = function(contents) 
+{
+    contents.forEach(function(pane) {
+
+        // let computedStyle = getComputedStyle(pane);
+        // console.log(computedStyle.height);
+        // comment prendre la hauteur d'une div masquée avec display:none
+    });
+}
+
+/*
+ * Check if links are defined in controller
+ * If true, disable javascript listener
+ */
+let isLinkRef = function(link) {
+
+    if (link.getAttribute('href') == "#") {
+
+        return false;
+    }
+    return true;
+
+}
+
+/*
+ * Main function
+ */
+window.addEventListener('load', function()
+{
+    tabParams.forEach(function(unit) {
+        
+        let tabPanel = document.querySelector('#'+ unit.id );
+        if (tabPanel) {
+
+            let
+                nav = tabPanel.querySelector('nav'),
+                tabs = nav.querySelectorAll('ul.nav-tabs li.nav-item'),
+                links = nav.querySelectorAll('ul.nav-tabs li.nav-item a.nav-link'),
+                contents = tabPanel.querySelectorAll('div.tab-content div.tab-pane')
+            ;
+
+            if (unit.type == 'pill') {
+                tabPanel.classList.add('pills');
+            }
+
+            if (! unit.initPane) {
+                unit.initPane = 1;
+            }
+
+            setPaneHeight(contents);
+
+            // initial position
+            setNewActive(links, contents, unit.initPane);
+
+            // listen
+            links.forEach(function(link) {
+                if (isLinkRef(link) == false) {
+                    link.addEventListener('click', function()
+                    {
+                        resetActive(links, contents);
+                        setNewActive(links, contents, countNewActive(links, link));
+                    });
+                }
+            });
+
+        }
+    });
+});

Resources/public/modules/tabs/tabs.scss

@@ -0,0 +1,98 @@
+
+$navigation-color: #334d5c;
+$body-font-color: #ffffff;
+$tab-font-color: #495057;
+$border-color: #dee2e6;
+$pills-color: #ed9345;
+$radius : .25rem;
+
+div.tabs {
+  margin: 3em;
+
+  nav {
+    ul.nav-tabs {
+
+      display: flex;
+        display: -ms-flexbox;
+      flex-wrap: wrap;
+        -ms-flex-wrap: wrap;
+
+      list-style: none;
+      padding-left: 0;
+      margin-bottom: 0;
+
+      li.nav-item {
+        margin-bottom: -1px;
+
+        a.nav-link {
+          display: block;
+          padding: .5rem 1rem;
+        }
+      }
+
+    }
+  }
+
+  div.tab-content {
+
+    div.tab-pane {
+      display: none;
+
+      &.fade {
+        transition: opacity .15s linear;
+      }
+      &.active {
+        display: block;
+      }
+    }
+  }
+
+  &:not(.pills) {
+    nav {
+      ul.nav-tabs {
+        border-bottom: 1px solid $border-color;
+
+        li.nav-item {
+
+          a.nav-link {
+            border: 1px solid transparent;
+            border-top-left-radius: $radius;
+            border-top-right-radius: $radius;
+            color: $navigation-color;
+          }
+
+          &.show a.nav-link,
+          & a.nav-link.active {
+
+            color: $tab-font-color;
+            background-color: $body-font-color;
+            border-color: $border-color $border-color $body-font-color;
+
+          }
+        }
+      }
+    }
+  }
+
+  &.pills {
+    nav {
+      ul.nav-tabs {
+
+        border-bottom: 0;
+        li.nav-item {
+
+          & a.nav-link {
+            border: 0;
+            border-radius: $radius;
+          }
+
+          &.show > a.nav-link,
+          & a.nav-link.active {
+            color: $body-font-color;
+            background-color: $pills-color;
+          }
+        }
+      }
+    }
+  }
+}

Resources/public/sass/_custom.scss

@@ -4,7 +4,6 @@
 @import 'custom/fonts';
 @import 'custom/timeline';
 @import 'custom/mixins/entity';
-@import 'custom/activity';
 @import 'custom/report';
 @import 'custom/person';
 @import 'custom/pagination';

Resources/public/sass/contrib/fontawesome/_path.scss

@@ -3,12 +3,12 @@
 
 @font-face {
   font-family: 'FontAwesome';
-  src: url('#{$fa-font-path}/fontawesome-webfont.eot?v=#{$fa-version}');
-  src: url('#{$fa-font-path}/fontawesome-webfont.eot?#iefix&v=#{$fa-version}') format('embedded-opentype'),
-    url('#{$fa-font-path}/fontawesome-webfont.woff2?v=#{$fa-version}') format('woff2'),
-    url('#{$fa-font-path}/fontawesome-webfont.woff?v=#{$fa-version}') format('woff'),
-    url('#{$fa-font-path}/fontawesome-webfont.ttf?v=#{$fa-version}') format('truetype'),
-    url('#{$fa-font-path}/fontawesome-webfont.svg?v=#{$fa-version}#fontawesomeregular') format('svg');
+  src: url('./../../../fonts/fontawesome-webfont.eot?v=#{$fa-version}');
+  src: url('./../../../fonts/fontawesome-webfont.eot?#iefix&v=#{$fa-version}') format('embedded-opentype'),
+       url('./../../../fonts/fontawesome-webfont.woff2?v=#{$fa-version}') format('woff2'),
+    url('./../../../fonts/fontawesome-webfont.woff?v=#{$fa-version}') format('woff'),
+    url('./../../../fonts/fontawesome-webfont.ttf?v=#{$fa-version}') format('truetype'),
+    url('./../../../fonts/fontawesome-webfont.svg?v=#{$fa-version}#fontawesomeregular') format('svg');
 //  src: url('#{$fa-font-path}/FontAwesome.otf') format('opentype'); // used when developing fonts
   font-weight: normal;
   font-style: normal;

Resources/public/sass/custom/_activity.scss

@@ -1,7 +0,0 @@
-span.entity.entity-activity.activity-reason {
-    @include entity($chill-pink, white);
-}
-
-.activity {
-    color: $chill-green;
-}

Resources/public/sass/custom/_record_actions.scss

@@ -10,6 +10,7 @@ ul.record_actions, ul.record_actions_column {
     display: flex;
     justify-content: flex-end;
     padding: 0.5em 0;
+    flex-wrap: wrap-reverse;
 
     li {
         display: inline-block;

Resources/public/sass/custom/mixins/entity.scss

@@ -1,6 +1,6 @@
 @mixin entity($background-color, $color: white) {
     font-variant: small-caps;
-    display: inline;
+    display: inline-block;
     padding: .2em .6em .3em;
     font-size: 88%;
     font-weight: bold;
@@ -11,5 +11,6 @@
     border-radius: .25em;
     color: $color;
     background-color: $background-color;
+    margin: 0.5em;
 }
 

Resources/public/sass/custom/modules/_buttons.scss

@@ -1,7 +1,7 @@
 .sc-button {
     margin-bottom: 0.5rem;
     
-    &.bt-submit, &.bt-save, &.bt-create, &.bt-new {
+    &.bt-submit, &.bt-save, &.bt-create, &.bt-new, &.bt-duplicate {
         @include button($green, $white);
     }
 
@@ -19,6 +19,7 @@
 
     &:not(.change-icon) {
 
+        // icons using font-awesome "old way"
         &.bt-create::before,
         &.bt-save::before,
         &.bt-new::before,
@@ -31,6 +32,14 @@
             font: normal normal normal 14px/1 FontAwesome;
             margin-right: 0.5em;
         }
+        
+        // icons using font-awesome "new svg way"
+        &.bt-duplicate::before {
+            display: inline-block;
+            width: 1em;
+            margin-right: 0.5em;
+            vertical-align: middle;
+        }
 
         &.bt-save::before {
             // add a floppy
@@ -60,6 +69,10 @@
         &.bt-show::before, &.bt-view::before {
             content: "";
         }
+        
+        &.bt-duplicate::before {
+            content: url("./copy-solid.svg");
+        }
     }
 
     > i.fa {

Resources/public/sass/custom/modules/copy-solid.svg

@@ -0,0 +1,4 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="copy" class="svg-inline--fa fa-copy fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
+    <!-- adapted from original work obtained from font-awesome CC-BY 4.0 International - https://fontawesome.com/license Last updated on July 12, 2018 -->
+    <path fill="white" d="M320 448v40c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V120c0-13.255 10.745-24 24-24h72v296c0 30.879 25.121 56 56 56h168zm0-344V0H152c-13.255 0-24 10.745-24 24v368c0 13.255 10.745 24 24 24h272c13.255 0 24-10.745 24-24V128H344c-13.2 0-24-10.8-24-24zm120.971-31.029L375.029 7.029A24 24 0 0 0 358.059 0H352v96h96v-6.059a24 24 0 0 0-7.029-16.97z"></path>
+</svg>

Resources/public/sass/modules/_forms.scss

@@ -25,10 +25,17 @@ label {
    abbr {
       display: none;
    }
+   
+    // mark the label for empty placeholder
+    &[for$="_placeholder"] {
+       font-style: italic;
+    }
 }
 
 .inline-choice {
    white-space:nowrap;
+   display: inline-block;
+   
    label {
       white-space:normal;
       display: inline;
@@ -38,6 +45,11 @@ label {
    }
 }
 
+div.choice-widget-expanded  {
+    margin-top: 0.5em;
+    margin-bottom: 0.5em;
+}
+
 textarea,
 //input,
 #{$all-text-inputs},