branch feature/253-tuiles updated (68d69e54 -> b9c61f71)
This is an automated email from the git hooks/post-receive script. New change to branch feature/253-tuiles in repository pollen. See https://gitlab.nuiton.org/chorem/pollen.git from 68d69e54 ref #253 Entête de la page + refonte de la popup de feedback (WIP) new b9c61f71 ref #253 ToggleButton pour le feedback 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 b9c61f7108ed8c2c15b9d8474b3c566739059fd4 Author: Cécilia Bossard <bossard@codelutin.com> Date: Mon Mar 9 12:08:19 2020 +0100 ref #253 ToggleButton pour le feedback Summary of changes: .../main/web/tag/components/PollenInput.tag.html | 2 +- .../web/tag/components/PollenTextArea.tag.html | 1 + ...eckboxReboot.tag.html => ToggleButton.tag.html} | 108 +++++++++++---------- .../web/tag/popup/FeedbackModalReboot.tag.html | 11 ++- pollen-ui-riot-js/stories/Components.stories.js | 5 +- 5 files changed, 69 insertions(+), 58 deletions(-) copy pollen-ui-riot-js/src/main/web/tag/components/{CheckboxReboot.tag.html => ToggleButton.tag.html} (51%) -- 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/253-tuiles in repository pollen. See https://gitlab.nuiton.org/chorem/pollen.git commit b9c61f7108ed8c2c15b9d8474b3c566739059fd4 Author: Cécilia Bossard <bossard@codelutin.com> Date: Mon Mar 9 12:08:19 2020 +0100 ref #253 ToggleButton pour le feedback --- .../main/web/tag/components/PollenInput.tag.html | 2 +- .../web/tag/components/PollenTextArea.tag.html | 1 + .../main/web/tag/components/ToggleButton.tag.html | 118 +++++++++++++++++++++ .../web/tag/popup/FeedbackModalReboot.tag.html | 11 +- pollen-ui-riot-js/stories/Components.stories.js | 5 +- 5 files changed, 131 insertions(+), 6 deletions(-) diff --git a/pollen-ui-riot-js/src/main/web/tag/components/PollenInput.tag.html b/pollen-ui-riot-js/src/main/web/tag/components/PollenInput.tag.html index cc2439e2..dfa5c451 100644 --- a/pollen-ui-riot-js/src/main/web/tag/components/PollenInput.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/components/PollenInput.tag.html @@ -50,7 +50,7 @@ box-sizing: border-box; border-radius: 4px; display: flex; - + padding-top: 1px; height: 38px; } diff --git a/pollen-ui-riot-js/src/main/web/tag/components/PollenTextArea.tag.html b/pollen-ui-riot-js/src/main/web/tag/components/PollenTextArea.tag.html index e4d8e78d..b38f412c 100644 --- a/pollen-ui-riot-js/src/main/web/tag/components/PollenTextArea.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/components/PollenTextArea.tag.html @@ -49,6 +49,7 @@ border-radius: 4px; display: flex; width: 100%; + padding-top: 1px; } .input { diff --git a/pollen-ui-riot-js/src/main/web/tag/components/ToggleButton.tag.html b/pollen-ui-riot-js/src/main/web/tag/components/ToggleButton.tag.html new file mode 100644 index 00000000..53bd6128 --- /dev/null +++ b/pollen-ui-riot-js/src/main/web/tag/components/ToggleButton.tag.html @@ -0,0 +1,118 @@ +<ToggleButton> + <div class="input" > + <label class="container"> + <span if="{opts.label}" class="label">{opts.label}</span> + + <input type="checkbox" + name="{opts.name}" + ref="{opts.ref}"> + <div class="toggle_track"> + <div class="toggle_track_handle"></div> + </div> + + + <yield/> + </label> + </div> + + <script type="es6"> + //import session from "../../js/Session"; + //this.session = session; + + this.checked = this.opts.checkboxchecked; + + if (this.opts.i18nprefix) { + this.installBundle(this.session, this.opts.i18nprefix); + } + + this.keyPressed = e => { + if (!this.opts.disabled && e.keyCode === 13) { + this.ontogglecheckbox(); + } + }; + + this.ontogglecheckbox = () => { + this.checked = !this.checked; + if (this.opts.ontogglecheckbox) { + this.opts.ontogglecheckbox(this); + } + }; + + this.focus = () => { + this.refs.togglehandle.focus(); + }; + + </script> + + <style> + + .input { + line-height: 16px; + border: none; + padding-left: 10px; + padding-top: 10px; + width: 100%; + display: flex; + flex-direction: column; + } + + .container input:not(:checked)+.toggle_track { + background-color: #636E72; + } + + .container input:not(:checked)+.toggle_track .toggle_track_handle { + transform:translateZ(0); + margin-left: 2px; + } + + .toggle_track { + background-color: var(--Mountain-Meadow); + position: relative; + width: 50px; + height: 28px; + border-radius: 20px; + display: flex; + align-items: center; + } + + .toggle_track_handle { + background: #FFFFFF; + width: 24px; + height: 24px; + transform: translateX(100%); + border-radius: 30em; + background-color: var(--toggle); + } + + /* Customize the label (the container) */ + .container { + display: block; + position: relative; + margin-bottom: 12px; + cursor: pointer; + font-size: 22px; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + } + .label { + font-weight: bold; + font-size: 14px; + line-height: 19px; + padding-bottom: 10px; + color: var(--Black-Pearl); + } + + /* Hide the browser's default checkbox */ + .container input { + position: absolute; + opacity: 0; + cursor: pointer; + height: 0; + width: 0; + } + + + </style> +</ToggleButton> \ No newline at end of file diff --git a/pollen-ui-riot-js/src/main/web/tag/popup/FeedbackModalReboot.tag.html b/pollen-ui-riot-js/src/main/web/tag/popup/FeedbackModalReboot.tag.html index 8a6c9020..bf28d071 100644 --- a/pollen-ui-riot-js/src/main/web/tag/popup/FeedbackModalReboot.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/popup/FeedbackModalReboot.tag.html @@ -22,6 +22,7 @@ import "./Modal.tag.html"; import "../components/PollenInput.tag.html"; import "../components/PollenTextArea.tag.html"; import "../components/PollenRadioButton.tag.html"; +import "../components/ToggleButton.tag.html"; <FeedbackModalReboot> @@ -72,8 +73,11 @@ import "../components/PollenRadioButton.tag.html"; title={parent._t.descriptionNotBlank} required/> - <div> - <label class="c-toggle c-toggle--info screenshot"> + <ToggleButton label="{parent._t.uploadScreenShot}" + name="uploadScreenShot" + ref="uploadScreenShot" + /> + <!-- <label class="c-toggle c-toggle--info screenshot"> {parent._t.uploadScreenShot} <input type="checkbox" name="uploadScreenShot" @@ -81,8 +85,7 @@ import "../components/PollenRadioButton.tag.html"; <div class="c-toggle__track"> <div class="c-toggle__handle"></div> </div> - </label> - </div> + </label>--> </div> </ModalReboot> diff --git a/pollen-ui-riot-js/stories/Components.stories.js b/pollen-ui-riot-js/stories/Components.stories.js index c5a23603..aa724a03 100644 --- a/pollen-ui-riot-js/stories/Components.stories.js +++ b/pollen-ui-riot-js/stories/Components.stories.js @@ -20,6 +20,7 @@ import "../src/main/web/tag/components/MultiLineLabel.tag.html"; import "../src/main/web/tag/components/PollenButton.tag.html"; import "../src/main/web/tag/components/SearchReboot.tag.html"; import "../src/main/web/tag/components/IconButton.tag.html"; +import "../src/main/web/tag/components/ToggleButton.tag.html"; storiesOf("Components") .addDecorator(withKnobs) @@ -71,4 +72,6 @@ storiesOf("Components") const icon = text("icon", "icon-Mosaic"); const active = boolean("active", true); return {tagName: "iconbutton", opts: {icon, active}}; - }); + }).add("Toggle button", () => { + return {tagName: "togglebutton", opts: {}}; + }); -- To stop receiving notification emails like this one, please contact chorem.org SCM administrator <admin+scm@chorem.org>.
participants (1)
-
chorem.org scm