[Pollen-commits] 01/01: style de la saisie de choix

23 Mar 2017

This is an automated email from the git hooks/post-receive script.

New commit to branch develop in repository pollen.

See https://gitlab.nuiton.org/chorem/pollen.git

commit a12ccca2970f0db4c84d2176bfb76317d000b14e
Author: Sylvain Bavencoff <bavencoff@codelutin.com>
Date:   Thu Mar 23 15:05:27 2017 +0100

    style de la saisie de choix
---
 pollen-ui-riot-js/src/main/web/i18n.json           |   2 +
 pollen-ui-riot-js/src/main/web/js/Poll.js          |   5 +-
 .../src/main/web/tag/PollenHeader.tag.html         |   9 +-
 .../src/main/web/tag/poll/Choice.tag.html          | 131 +++++++++++++++------
 .../src/main/web/tag/poll/Choices.tag.html         |  25 +---
 .../src/main/web/tag/poll/Votes.tag.html           |   7 +-
 6 files changed, 121 insertions(+), 58 deletions(-)

diff --git a/pollen-ui-riot-js/src/main/web/i18n.json b/pollen-ui-riot-js/src/main/web/i18n.json
index c915254..325bbc5 100644
--- a/pollen-ui-riot-js/src/main/web/i18n.json
+++ b/pollen-ui-riot-js/src/main/web/i18n.json
@@ -252,6 +252,7 @@
     "date-picker_today": "Aujourd'hui",
     "choice_text": "Renseignez un text",
     "choice_ressource": "Utiliser une image",
+    "choice_addFile": "Ajouter une image",
     "choice_date": "Renseignez une date",
     "choice_time": "Ajouter une heure à la date",
     "choice_description": "Ajouter un descriptif du choix"
@@ -501,6 +502,7 @@
     "date-picker_today": "Today",
     "choice_text": "Set a text",
     "choice_ressource": "Use image",
+    "choice_addFile": "Add image",
     "choice_date": "Set a date",
     "choice_time": "add hours to date",
     "choice_description": "add description"
diff --git a/pollen-ui-riot-js/src/main/web/js/Poll.js b/pollen-ui-riot-js/src/main/web/js/Poll.js
index 9998bde..794bc92 100644
--- a/pollen-ui-riot-js/src/main/web/js/Poll.js
+++ b/pollen-ui-riot-js/src/main/web/js/Poll.js
@@ -72,7 +72,7 @@ class Poll {
                 choice.choiceValue = undefined;
             }
         } else {
-            choice.choiceType = this.choiceType;
+            choice.choiceType = this.choiceType || "TEXT";
             choice.choiceValue = undefined;
             choice.description = undefined;
         }
@@ -166,8 +166,7 @@ class Poll {
 
     getPodium() {
         let podium = {};
-        if (this.id && this.resultIsVisible && this.results) {
-            podium = [];
+        if (this.id && this.resultIsVisible && this.results && this.results.nbVotants > 0) {
             let choiceCount = 0;
             let index = 0;
 
diff --git a/pollen-ui-riot-js/src/main/web/tag/PollenHeader.tag.html b/pollen-ui-riot-js/src/main/web/tag/PollenHeader.tag.html
index 7dcfdf9..7794bac 100644
--- a/pollen-ui-riot-js/src/main/web/tag/PollenHeader.tag.html
+++ b/pollen-ui-riot-js/src/main/web/tag/PollenHeader.tag.html
@@ -41,7 +41,8 @@ require("./HeaderI18n.tag.html");
 
     <div class="dropdown">
         <a class="header-link">
-            <i class="fa fa-{user ? 'user' : 'ellipsis-v'}"/> {user && user.name}
+            <i class="fa fa-{user ? 'user' : 'ellipsis-v'}"/>
+            <span if={user} class="user-name"> {user && user.name}</span>
         </a>
         <div class="dropdown-content right">
             <virtual if="{!user}">
@@ -176,5 +177,11 @@ require("./HeaderI18n.tag.html");
             z-index: 1;
         }
 
+        @media (max-width: 640px) {
+            .user-name {
+                display: none;
+            }
+        }
+
     </style>
 </PollenHeader>
diff --git a/pollen-ui-riot-js/src/main/web/tag/poll/Choice.tag.html b/pollen-ui-riot-js/src/main/web/tag/poll/Choice.tag.html
index 6a08fc9..6061303 100644
--- a/pollen-ui-riot-js/src/main/web/tag/poll/Choice.tag.html
+++ b/pollen-ui-riot-js/src/main/web/tag/poll/Choice.tag.html
@@ -3,7 +3,7 @@ require("../components/time-picker.tag.html");
 <Choice>
     <div class="choice-container">
         <button type="button"
-                class="c-button"
+                class="choice-type-button"
                 alt="texte"
                 disabled={opts.disabled}
                 onclick="{setTextType}"
@@ -17,7 +17,7 @@ require("../components/time-picker.tag.html");
                value={valueText}
                onchange={onTextChange}/>
         <button type="button"
-                class="c-button"
+                class="choice-type-button"
                 alt="resource"
                 show={!opts.disabled}
                 disabled={opts.disabled}
@@ -25,21 +25,40 @@ require("../components/time-picker.tag.html");
                 title="{__.ressource}">
             <i class="fa fa-image" aria-hidden="true"></i>
         </button>
-        <span if="{originalFile}"
+        <div if="{originalFile}"
               class="original-file {opts.choice.choiceType === 'RESOURCE' ? 'selected' : 'hidden'}">
-            <span>{originalFile.name}</span>
-            <i class="fa fa-remove"
-               if={!opts.disabled}
-               onclick="{deleteFile}"/>
-        </span>
-        <input type="file"
-               ref="choiceResource"
-               class="{opts.choice.choiceType === 'RESOURCE' ? 'selected' : 'hidden'}"
-               disabled={opts.disabled}
-               if="{!originalFile}"/>
+            <img src="{session.configuration.endPoint}/v1/resources/{originalFile}/preview"/>
+            <span>
+                {originalFile.name}
+                <i class="fa fa-remove"
+                   if={!opts.disabled}
+                   onclick="{deleteFile}"/>
+            </span>
+        </div>
+        <div if="{!originalFile}"
+              class="add-file {opts.choice.choiceType === 'RESOURCE' ? 'selected' : 'hidden'}">
+             <img if={hasNewFile} ref="imagePreview"/>
+             <div>
+                 <span if={!opts.disabled  && !hasNewFile}
+                       onclick="{addFile}">
+                     <i class="fa fa-plus"/>
+                     {__.addFile}
+                 </span>
+                 <span if={!opts.disabled  && hasNewFile}
+                       onclick="{deleteFile}">
+                     <i class="fa fa-remove"/>
+                 </span>
+                 <input type="file"
+                        accept="image/*"
+                        ref="choiceResource"
+                        onchange={onRessourceChange}
+                        disabled={opts.disabled}/>
+            </div>
+        </div>
+
 
         <button type="button"
-                class="c-button"
+                class="choice-type-button"
                 alt="date"
                 disabled={opts.disabled}
                 onclick="{setDateType}"
@@ -51,7 +70,7 @@ require("../components/time-picker.tag.html");
                      date="{date}"/>
 
         <button type="button"
-                class="c-button {!opts.choice.choiceType.startsWith('DATE') ? 'hidden' : ''}"
+                class="choice-type-button"
                 alt="heure"
                 disabled={opts.disabled}
                 onclick="{toggleTime}"
@@ -63,7 +82,7 @@ require("../components/time-picker.tag.html");
                      time="{time}"/>
 
         <button type="button"
-                class="c-button"
+                class="choice-type-button"
                 alt="description"
                 onclick="{toggleDescription}"
                 title="{__.description}">
@@ -77,14 +96,15 @@ require("../components/time-picker.tag.html");
     </div>
 
     <script type="es6">
-        let session = require("../../js/Session");
+        this.session = require("../../js/Session");
         let moment = require("moment");
-        moment.locale(session.locale);
+        moment.locale(this.session.locale);
 
-        this.installBundle(session, "choice", locale => {
+        this.installBundle(this.session, "choice", locale => {
             moment.locale(locale);
         });
         this.originalFile = this.opts.choice.choiceType === "RESOURCE" ? this.opts.choice.choiceValue : null;
+        this.hasNewFile = false;
         this.valueText = this.opts.choice.choiceType === "TEXT" ? this.opts.choice.choiceValue : null;
         this.showDescription = false;
 
@@ -121,21 +141,40 @@ require("../components/time-picker.tag.html");
         };
 
         this.setDateType = () => {
-            if (!this.opts.choice.choiceType.startsWith("DATE")) {
-                this.opts.choice.choiceType = "DATE";
-            }
+            this.opts.choice.choiceType = "DATE";
         };
 
         this.toggleTime = () => {
-            if (this.opts.choice.choiceType === "DATE") {
-                this.opts.choice.choiceType = "DATETIME";
-            } else if (this.opts.choice.choiceType === "DATETIME") {
+            if (this.opts.choice.choiceType === "DATETIME") {
                 this.opts.choice.choiceType = "DATE";
+            } else {
+                this.opts.choice.choiceType = "DATETIME";
             }
         };
 
+        this.addFile = () => {
+            this.refs.choiceResource.click();
+        };
+
+        this.onRessourceChange = () => {
+            this.hasNewFile = true;
+            let reader = new FileReader();
+            reader.onload = (e) => {
+                // get loaded data and render thumbnail.
+                this.refs.imagePreview.src = e.target.result;
+            };
+            // read the image file as a data URL.
+            reader.readAsDataURL(this.refs.choiceResource.files[0]);
+        };
+
         this.deleteFile = () => {
-            delete this.originalFile;
+            if (this.originalFile) {
+                delete this.originalFile;
+            } else {
+                this.refs.choiceResource.value = "";
+                this.refs.imagePreview.src = "";
+                this.hasNewFile = false;
+            }
         };
 
         this.toggleDescription = () => {
@@ -175,10 +214,15 @@ require("../components/time-picker.tag.html");
           flex-flow: row nowrap;
       }
 
-      .button {
+      .choice-type-button {
+          background-color: #3399ff;
+          color: white;
+          border: none;
+          border-radius: 4px;
+          padding: 4px;
           width:auto;
           opacity: 1;
-          margin: 0 10px 10px 10px;
+          margin: 2px 1px 2px 0;
           transition: opacity 0.3s ease-in-out 0s, width 0s linear 0.5s;
       }
 
@@ -186,6 +230,7 @@ require("../components/time-picker.tag.html");
          visibility: hidden;
          opacity: 0;
          width: 0;
+         padding: 0;
          border: none;
       }
 
@@ -198,15 +243,19 @@ require("../components/time-picker.tag.html");
           flex-grow: 0;
           margin: 0;
           padding: 0;
+          border: none;
           transition: width 0.5s ease-in-out 0s,
                       flex-grow 0s linear 0.5s,
                       visibility 0.5s ease-in-out 0s,
                       border 0s linear 0s;
       }
 
+      .choice-container input {
+          border: none;
+      }
+
       .choice-container > .selected {
           visibility: visible;
-          width: 100%;
           flex-grow: 1;
       }
 
@@ -214,15 +263,29 @@ require("../components/time-picker.tag.html");
       .choice-container date-picker.selected .calendar-field,
       .choice-container time-picker.selected .calendar-field {
           width: 100%;
-          padding: 10px;
+          min-width: 20px;
+          padding: 8px;
+      }
+
+      .original-file,
+      .add-file {
+          display: flex;
+      }
+
+      .original-file > *,
+      .add-file > * {
+          white-space: nowrap;
+          padding: 8px;
       }
 
-      time-picker {
-          max-width: 200px;
+      .original-file img,
+      .add-file img {
+          padding: 2px 5px 0 5px;
+          height: 2em;
       }
 
-      .original-file.selected * {
-          padding: 10px;
+      .add-file input[type="file"] {
+          display: none;
       }
 
       textarea {
diff --git a/pollen-ui-riot-js/src/main/web/tag/poll/Choices.tag.html b/pollen-ui-riot-js/src/main/web/tag/poll/Choices.tag.html
index 40521d2..0358247 100644
--- a/pollen-ui-riot-js/src/main/web/tag/poll/Choices.tag.html
+++ b/pollen-ui-riot-js/src/main/web/tag/poll/Choices.tag.html
@@ -2,11 +2,10 @@ require("./Choice.tag.html");
 <Choices>
     <div each={choice, index in form.choices}
          class="o-form-element">
-        <div class="c-input-group c-input-group--rounded-left">
-            <div class="o-field o-field--icon-left">
-                <i class="c-icon">{index + 1}</i>
+        <div class="c-input-group">
+            <div class="o-field">
                 <Choice ref="choice"
-                        class="c-field"
+                        class="choice c-field"
                         name={"choice" + index}
                         disabled={form.hasVotes}
                         choice="{choice}"/>
@@ -20,6 +19,7 @@ require("./Choice.tag.html");
             </button>
         </div>
     </div>
+
     <div class="choices-actions">
         <button type="button"
                 class="c-button c-button--brand u-small"
@@ -63,21 +63,8 @@ require("./Choice.tag.html");
     </script>
 
     <style>
-        .choices {
-            display: flex;
-            flex-direction: row;
-            margin: 20px 0;
-        }
-        .choices label {
-            width: 20px;
-            margin: auto 3px auto auto;
-            text-align: right;
-        }
-        .choices input {
-            flex: 1;
-        }
-        .choices button {
-            height: 41px;
+        .choice.c-field {
+            padding: 0 0 0 1px;
         }
 
     </style>
diff --git a/pollen-ui-riot-js/src/main/web/tag/poll/Votes.tag.html b/pollen-ui-riot-js/src/main/web/tag/poll/Votes.tag.html
index 05f4518..e87133a 100644
--- a/pollen-ui-riot-js/src/main/web/tag/poll/Votes.tag.html
+++ b/pollen-ui-riot-js/src/main/web/tag/poll/Votes.tag.html
@@ -173,7 +173,7 @@ require("./Podium.tag.html");
                     <div class="c-input-group">
                         <div class="o-field">
                             <Choice ref="choice"
-                                    class="c-field"
+                                    class="choice c-field"
                                     name="choice"
                                     choice="{choiceToAdd}"/>
                        </div>
@@ -200,6 +200,7 @@ require("./Podium.tag.html");
 
         this.poll = require("../../js/Poll.js");
         this.poll.loadVotes();
+        this.choiceToAdd = this.poll.initChoice();
 
         this.onPollChange = poll => {
             this.loaded = poll.choices !== undefined;
@@ -452,5 +453,9 @@ require("./Podium.tag.html");
            margin: 0 0 0 5px;
        }
 
+       .choice.c-field {
+           padding: 0 0 0 1px;
+       }
+
     </style>
 </Votes>

-- 
To stop receiving notification emails like this one, please contact
chorem.org SCM administrator <admin+scm@chorem.org>.

    

[Pollen-commits] 01/01: style de la saisie de choix

chorem.org scm