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 23a5ddbf31b35500d808ce205545f4a8114f2263 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 0032f71..d51671a 100644 --- a/pollen-ui-riot-js/src/main/web/css/main.css +++ b/pollen-ui-riot-js/src/main/web/css/main.css @@ -62,8 +62,7 @@ input, textarea { .body-container { display: flex; - flex-flow: row wrap; - flex-direction: column; + flex-flow: column wrap; 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 73ee64c..5e71e43 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,6 +1,7 @@ require("./ChoiceText.tag.html"); require("./ChoiceText.tag.html"); require("./ChoiceDate.tag.html"); +require("./ChoiceImage.tag.html"); <Choices> <div each={choice, index in form.choices} class="o-form-element" -- To stop receiving notification emails like this one, please contact chorem.org SCM administrator <admin+scm@chorem.org>.