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>.