branch develop updated (b647a86 -> a12ccca)
This is an automated email from the git hooks/post-receive script. New change to branch develop in repository pollen. See https://gitlab.nuiton.org/chorem/pollen.git from b647a86 ajout du composant podium new a12ccca style de la saisie de choix The 1 revisions listed above as "new" are entirely new to this repository and will be described in separate emails. The revisions listed as "adds" were already present in the repository and have only been added to this reference. Detailed log of new commits: commit a12ccca2970f0db4c84d2176bfb76317d000b14e Author: Sylvain Bavencoff <bavencoff@codelutin.com> Date: Thu Mar 23 15:05:27 2017 +0100 style de la saisie de choix Summary of changes: 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(-) -- To stop receiving notification emails like this one, please contact chorem.org SCM administrator <admin+scm@chorem.org>.
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>.
participants (1)
-
chorem.org scm