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 f8bc1a88d1eed02be9cd88b274413b01d1da1d39 Author: Cécilia Bossard <bossard@codelutin.com> Date: Thu Feb 27 17:26:00 2020 +0100 ref #253 Ajout du menu accessible quand une carte a été cochée --- .../web/tag/components/CheckboxReboot.tag.html | 126 +++++++++++---------- .../src/main/web/tag/components/MenuItem.tag.html | 16 ++- .../src/main/web/tag/components/Separator.tag.html | 66 +++++++++++ .../src/main/web/tag/poll/MyPollsHeader.tag.html | 33 ++++-- .../src/main/web/tag/poll/PollCardReboot.tag.html | 16 ++- .../src/main/web/tag/poll/Polls.tag.html | 26 ++++- 6 files changed, 204 insertions(+), 79 deletions(-) diff --git a/pollen-ui-riot-js/src/main/web/tag/components/CheckboxReboot.tag.html b/pollen-ui-riot-js/src/main/web/tag/components/CheckboxReboot.tag.html index 2a6e5af5..ee19dca3 100644 --- a/pollen-ui-riot-js/src/main/web/tag/components/CheckboxReboot.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/components/CheckboxReboot.tag.html @@ -28,7 +28,7 @@ this.ontogglecheckbox = () => { this.checked = !this.checked; if (this.opts.ontogglecheckbox) { - this.opts.ontogglecheckbox(); + this.opts.ontogglecheckbox(this); } }; @@ -40,71 +40,75 @@ <style> /* 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 { - padding-left:25px; -} + .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 { + padding-left:25px; + } + + /* Hide the browser's default checkbox */ + .container input { + position: absolute; + opacity: 0; + cursor: pointer; + height: 0; + width: 0; + } + + /* Create a custom checkbox */ + .checkmark { + position: absolute; + height: 18px; + width: 18px; -/* Hide the browser's default checkbox */ -.container input { - position: absolute; - opacity: 0; - cursor: pointer; - height: 0; - width: 0; -} + background-color: var(--White); + border: 1px solid var(--Elm); + box-sizing: border-box; + border-radius: 1px; + } -/* Create a custom checkbox */ -.checkmark { - position: absolute; - top: 0; - left: 0; - height: 18px; - width: 18px; - background-color: #ffffff; - border: 1px solid #000000; - box-sizing: border-box; - border-radius: 1px; -} + /* When the checkbox is checked, add a blue background */ + .container input:checked ~ .checkmark { + background: var(--Elm); -/* When the checkbox is checked, add a blue background */ -.container input:checked ~ .checkmark { - background-color: #000000; -} + /* Elm */ + border: 1px solid var(--Elm); + box-sizing: border-box; + border-radius: 1px; + } -/* Create the checkmark/indicator (hidden when not checked) */ -.checkmark:after { - content: ""; - position: absolute; - display: none; -} + /* Create the checkmark/indicator (hidden when not checked) */ + .checkmark:after { + content: ""; + position: absolute; + display: none; + } -/* Show the checkmark when checked */ -.container input:checked ~ .checkmark:after { - display: block; -} + /* Show the checkmark when checked */ + .container input:checked ~ .checkmark:after { + display: block; + } -/* Style the checkmark/indicator */ -.container .checkmark:after { - left: 4px; - top: 1px; - width: 4px; - height: 8px; - border: solid white; - border-width: 0 3px 3px 0; - -webkit-transform: rotate(45deg); - -ms-transform: rotate(45deg); - transform: rotate(45deg); -} + /* Style the checkmark/indicator */ + .container .checkmark:after { + left: 4px; + top: 1px; + width: 4px; + height: 8px; + border: solid white; + border-width: 0 3px 3px 0; + -webkit-transform: rotate(45deg); + -ms-transform: rotate(45deg); + transform: rotate(45deg); + } </style> </CheckboxReboot> \ No newline at end of file diff --git a/pollen-ui-riot-js/src/main/web/tag/components/MenuItem.tag.html b/pollen-ui-riot-js/src/main/web/tag/components/MenuItem.tag.html index 89de70b4..1c78dfbb 100644 --- a/pollen-ui-riot-js/src/main/web/tag/components/MenuItem.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/components/MenuItem.tag.html @@ -21,9 +21,9 @@ <MenuItem> - <div> + <div class="{mainClassName}"> <a href="{opts.href}" class="{activeClassName}"> - <span >{opts.label}</span> + <span>{opts.label}</span> <div class="selector {visibleSelector}"/> </a> </div> @@ -41,6 +41,15 @@ this.visibleSelector = "visible"; } + this.mainClassName = "visible"; + if(this.opts.mainclassname) { + this.mainClassName = this.opts.mainclassname; + } + + this.display = (mustBeVisible) => { + this.mainClassName = mustBeVisible ? "visible" : "hidden"; + } + </script> <style> @@ -92,8 +101,9 @@ font-family: Open Sans; font-style: normal; color: var(--Elm); - } + + </style> </MenuItem> diff --git a/pollen-ui-riot-js/src/main/web/tag/components/Separator.tag.html b/pollen-ui-riot-js/src/main/web/tag/components/Separator.tag.html new file mode 100644 index 00000000..df6bb85b --- /dev/null +++ b/pollen-ui-riot-js/src/main/web/tag/components/Separator.tag.html @@ -0,0 +1,66 @@ +<!-- + #%L + Pollen :: UI RiotJs + %% + Copyright (C) 2009 - 2017 CodeLutin + %% + This program is free software: you can redistribute it and/or modify + it under the terms of the GNU Affero General Public License as published by + the Free Software Foundation, either version 3 of the License, or + (at your option) any later version. + + This program is distributed in the hope that it will be useful, + but WITHOUT ANY WARRANTY; without even the implied warranty of + MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + GNU General Public License for more details. + + You should have received a copy of the GNU Affero General Public License + along with this program. If not, see <http://www.gnu.org/licenses/>. + #L% + --> + +<Separator> + + <div class="separator {visibility}"> + </div> + + <script type="es6"> + + + this.visibility = "visible"; + if(this.opts.isvisible) { + this.visibility = this.opts.isvisible; + } + + this.display = (mustBeVisible) => { + this.visibility = mustBeVisible ? "visible" : "hidden"; + } + + </script> + + <style> + + .separator { + width: 1px; + height: 12px; + background: var(--Light-Slate-Grey); + border-radius: 3px; + + display: block; + + margin-left: 10px; + margin-right: 10px; + } + + .hidden { + visibility: hidden; + opacity: 0; + } + + .visible { + visibility: visible; + opacity: 1; + } + + </style> +</Separator> diff --git a/pollen-ui-riot-js/src/main/web/tag/poll/MyPollsHeader.tag.html b/pollen-ui-riot-js/src/main/web/tag/poll/MyPollsHeader.tag.html index ea55db90..4c95e77c 100644 --- a/pollen-ui-riot-js/src/main/web/tag/poll/MyPollsHeader.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/poll/MyPollsHeader.tag.html @@ -22,6 +22,7 @@ import "../components/SearchReboot.tag.html"; import "../components/PollenButton.tag.html"; import "../components/IconButton.tag.html"; +import "../components/Separator.tag.html"; import "../components/MenuItem.tag.html"; import "../components/PollenInput.tag.html"; import "../popup/ModalReboot.tag.html"; @@ -48,15 +49,17 @@ import "../popup/ModalReboot.tag.html"; <MenuItem href="#polls/created" label="{_t.myPolls}" ref="createdPolls" method="{this.parent.opts.method}"/> <MenuItem href="#polls/invited" label="{_t.invitedPolls}" ref="invitedPolls" method="{this.parent.opts.method}"/> <MenuItem href="#polls/participated" label="{_t.participatedPolls}" ref="participatedPolls" method="{this.parent.opts.method}"/> - <!-- TODO A remplacer par un separator --> - <MenuItem label="|" ref="none"/> + <Separator /> <MenuItem href="#polls/past" label="{_t.pastPolls}" ref="pastPolls" method="{this.parent.opts.method}"/> <MenuItem href="#polls/current" label="{_t.currentPolls}" ref="currentPolls" method="{this.parent.opts.method}"/> <MenuItem href="#polls/upcomming" label="{_t.upcommingPolls}" ref="upcommingPolls" method="{this.parent.opts.method}"/> </div> <div class="rightSubMenu"> - <div><IconButton icon="icon-List" /></div> - <div><IconButton href="#" icon="icon-Mosaic" active="true"/></div> + <MenuItem href="#" label="Duplicate" ref="duplicatePolls" method="" mainclassname="hidden"/> + <MenuItem href="#" label="Delete" ref="deletePolls" method="" mainclassname="hidden"/> + <Separator isvisible="hidden" ref="rightSubMenuSeparator"/> + <IconButton icon="icon-List" /> + <IconButton href="#" icon="icon-Mosaic" active="true"/> </div> </div> @@ -105,6 +108,22 @@ import "../popup/ModalReboot.tag.html"; this.update(); }); }; + + this.boxChecked = (checkedValues) => { + + var isBoxChecked = false; + + if(checkedValues.length > 0) { + isBoxChecked = true; + } + + this.refs.duplicatePolls.display(isBoxChecked); + this.refs.deletePolls.display(isBoxChecked); + this.refs.rightSubMenuSeparator.display(isBoxChecked); + + this.update(); + } + </script> <style> @@ -122,7 +141,7 @@ import "../popup/ModalReboot.tag.html"; width: 100%; justify-content: space-between; - padding-top: 40px; + padding-top: 35px; padding-left: 2%; padding-right: 2%; } @@ -162,13 +181,13 @@ import "../popup/ModalReboot.tag.html"; .leftSubMenu { display: flex; justify-content: space-between; - align-items: center; + align-items: baseline; } .rightSubMenu { display: flex; justify-content: flex-end; - align-items: center; + align-items: baseline; flex-grow: 2; } diff --git a/pollen-ui-riot-js/src/main/web/tag/poll/PollCardReboot.tag.html b/pollen-ui-riot-js/src/main/web/tag/poll/PollCardReboot.tag.html index 457c5a41..201bf9d9 100644 --- a/pollen-ui-riot-js/src/main/web/tag/poll/PollCardReboot.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/poll/PollCardReboot.tag.html @@ -1,4 +1,4 @@ -import "../components/Checkbox.tag.html"; +import "../components/CheckboxReboot.tag.html"; import "../components/Tooltip.tag.html"; import "../components/Popover.tag.html"; import "../components/Avatar.tag.html"; @@ -72,7 +72,7 @@ import "../components/Avatar.tag.html"; <i class="timing icon-arrow-right"></i> <span class="timing">{endDate}</span> <span class="growing"></span> - <CheckboxReboot class="checkbox-footer"></CheckboxReboot> + <CheckboxReboot class="checkbox-footer" ontogglecheckbox="{ontogglecheckbox}"></CheckboxReboot> </div> </div> @@ -118,6 +118,12 @@ import "../components/Avatar.tag.html"; }); }; + this.ontogglecheckbox = (checkbox) => { + if(this.opts.ontogglecheckbox) { + this.opts.ontogglecheckbox(checkbox); + } + } + </script> @@ -136,7 +142,7 @@ import "../components/Avatar.tag.html"; border-radius: 4px; display: flex; flex-direction: column; - margin: 0 55px 51px 0; + margin: 0 0 51px 0; } .pollcard:hover { @@ -273,7 +279,7 @@ import "../components/Avatar.tag.html"; font-size: 12px; line-height: 16px; - padding: 10px 30px 30px 30px; + padding: 10px 30px 40px 30px; color: var(--Black-Pearl); flex-shrink: 0; @@ -292,7 +298,7 @@ import "../components/Avatar.tag.html"; } .checkbox-footer { - margin-right:18px; + margin-right:20px; } diff --git a/pollen-ui-riot-js/src/main/web/tag/poll/Polls.tag.html b/pollen-ui-riot-js/src/main/web/tag/poll/Polls.tag.html index 998d3e7d..0fc194ef 100644 --- a/pollen-ui-riot-js/src/main/web/tag/poll/Polls.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/poll/Polls.tag.html @@ -29,13 +29,13 @@ import "./NoPoll.tag.html"; <Polls> <div class="container" show="{loaded}"> - <MyPollsHeader search="{search}"/> + <MyPollsHeader search="{search}" ref="pollsHeader"/> <div class="main-content"> <LazyLoad pagination={pagination} onload={lazyLoad} load-size="20" ref="lazyLoad" class="elements"> <yield to="element"> - <PollCardReboot poll={element} on-poll-list-change={parent.parent.refresh}/> + <PollCardReboot poll={element} on-poll-list-change={parent.parent.refresh} ontogglecheckbox="{parent.parent.ontogglecheckbox}"/> </yield> <yield to="loading"> <LoadingCard loading={nbNextGroup}> @@ -68,6 +68,8 @@ import "./NoPoll.tag.html"; this.count = 0; this.filteredCount = 0; + this.boxChecked = []; + this.getCountLabel = () => { let label; if (this.count === 0) { @@ -107,6 +109,19 @@ import "./NoPoll.tag.html"; }); }; + this.ontogglecheckbox = (checkbox) => { + if(checkbox.checked) { + this.boxChecked.push(checkbox.parent); + } else { + var filtered = this.boxChecked.filter(function(value) { + return value.opts.poll.id != checkbox.parent.opts.poll.id; + }); + this.boxChecked = filtered; + } + + this.refs.pollsHeader.boxChecked(this.boxChecked); + } + </script> @@ -119,9 +134,14 @@ import "./NoPoll.tag.html"; .elements { display: flex; flex-wrap: wrap; - justify-content: flex-start; + justify-content: space-between; width: 100%; } + .main-content { + padding-right: 50px; + padding-left: 50px; + } + </style> </Polls> -- To stop receiving notification emails like this one, please contact chorem.org SCM administrator <admin+scm@chorem.org>.