branch feature/component_choice_editor created (now 2e8ad60)
This is an automated email from the git hooks/post-receive script. New change to branch feature/component_choice_editor in repository pollen. See https://gitlab.nuiton.org/chorem/pollen.git at 2e8ad60 debut du composant d'édition de choix This branch includes the following new commits: new 2e8ad60 debut du composant d'édition 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 2e8ad60840f7f460dd1efaea2984724fa5bd0f7f Author: Kevin Morin <morin@codelutin.com> Date: Thu Mar 2 18:29:54 2017 +0100 debut du composant d'édition de choix -- 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 feature/component_choice_editor in repository pollen. See https://gitlab.nuiton.org/chorem/pollen.git commit 2e8ad60840f7f460dd1efaea2984724fa5bd0f7f Author: Kevin Morin <morin@codelutin.com> Date: Thu Mar 2 18:29:54 2017 +0100 debut du composant d'édition de choix --- pollen-ui-riot-js/src/main/web/css/main.css | 3 +- .../src/main/web/tag/poll/ChoiceImage.tag.html | 77 ++++++++++++++++++++++ .../src/main/web/tag/poll/Choices.tag.html | 1 + 3 files changed, 79 insertions(+), 2 deletions(-) diff --git a/pollen-ui-riot-js/src/main/web/css/main.css b/pollen-ui-riot-js/src/main/web/css/main.css index c24af36..1e76cf7 100644 --- a/pollen-ui-riot-js/src/main/web/css/main.css +++ b/pollen-ui-riot-js/src/main/web/css/main.css @@ -53,8 +53,7 @@ input, textarea { .body-container { display: flex; - flex-flow: row wrap; - flex-direction: column; + flex-flow: column wrap; max-width: 1055px; margin-left: auto; diff --git a/pollen-ui-riot-js/src/main/web/tag/poll/ChoiceImage.tag.html b/pollen-ui-riot-js/src/main/web/tag/poll/ChoiceImage.tag.html new file mode 100644 index 0000000..cd180bc --- /dev/null +++ b/pollen-ui-riot-js/src/main/web/tag/poll/ChoiceImage.tag.html @@ -0,0 +1,77 @@ +<ChoiceImage> + <div id="choice-container"> + <span class="button" alt="texte" onclick="{setTextType}"><i class="fa fa-pencil" aria-hidden="true"/></span><input type="text" class="{choiceType === 'text' ? 'selected' : ''}"/> + <span class="button" alt="image" onclick="{setImageType}"><i class="fa fa-image" aria-hidden="true"/></span><input type="file" class="{choiceType === 'image' ? 'selected' : ''}"/> + <span class="button" alt="date" onclick="{setDateType}"><i class="fa fa-calendar" aria-hidden="true"/></span><input type="date" class="{choiceType.startsWith('date') ? 'selected' : ''}"/> + <span class="button {!choiceType.startsWith('date') ? 'hidden' : ''}" alt="heure" onclick="{toggleTime}"><i class="fa fa-clock-o" aria-hidden="true"/></span><input type="text" class="{choiceType === 'datetime' ? 'selected' : ''}"/> + </div> + + <script type="es6"> + this.choiceType = "text"; + + this.setTextType = () => { + this.choiceType = "text"; + }; + + this.setImageType = () => { + this.choiceType = "image"; + }; + + this.setDateType = () => { + if (!this.choiceType.startsWith("date")) { + this.choiceType = "date"; + } + }; + + this.toggleTime = () => { + if (this.choiceType === "date") { + this.choiceType = "datetime"; + } else if (this.choiceType === "datetime") { + this.choiceType = "date"; + } + }; + + </script> + + <style> + + #choice-container { + display: flex; + flex-flow: row nowrap; + } + + .button { + width:auto; + opacity: 1; + margin: 0 10px 10px 10px; + transition: opacity 0.3s ease-in-out 0s, width 0s linear 0.5s; + } + + .hidden { + visibility: hidden; + opacity: 0; + width: 0; + } + + input { + display: inline-block; + visibility: hidden; + width: 0; + height: auto; + flex-grow: 0; + margin: 0; + padding: 0; + transition: width 0.5s ease-in-out 0s, + flex-grow 0s linear 0.5s, + visibility 0.5s ease-in-out 0s; + } + + .selected { + visibility: visible; + width: 100%; + flex-grow: 1; + padding: 10px; + } + + </style> +</ChoiceImage> 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 e142f64..701774d 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 @@ -1,5 +1,6 @@ require("./ChoiceText.tag.html"); require("./ChoiceDate.tag.html"); +require("./ChoiceImage.tag.html"); <Choices> <div if="{choicePeriod}" class="legend"> {__.choicePeriod} {choicePeriod} -- To stop receiving notification emails like this one, please contact chorem.org SCM administrator <admin+scm@chorem.org>.
participants (1)
-
chorem.org scm