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 0910eb55f077507a68736ae27b967fa8eebbcf12 Author: Cécilia Bossard <bossard@codelutin.com> Date: Fri Feb 14 17:29:02 2020 +0100 WIP Mise en place du header de la page 'Mes sondages'. RAF problèmes alignements --- pollen-ui-riot-js/src/main/web/i18n/en.json | 13 ++- pollen-ui-riot-js/src/main/web/i18n/fr.json | 7 ++ .../main/web/tag/components/IconButton.tag.html | 87 ++++++++++++++++ .../src/main/web/tag/components/MenuItem.tag.html | 99 ++++++++++++++++++ .../main/web/tag/components/PollenButton.tag.html | 85 +++++++++++++++ .../main/web/tag/components/SearchReboot.tag.html | 106 +++++++++++++++++++ .../src/main/web/tag/poll/Polls.tag.html | 114 +++++++++++++++++++-- pollen-ui-riot-js/stories/Components.stories.js | 30 +++++- 8 files changed, 531 insertions(+), 10 deletions(-) diff --git a/pollen-ui-riot-js/src/main/web/i18n/en.json b/pollen-ui-riot-js/src/main/web/i18n/en.json index 9bd21eb0..ffa4ae4c 100644 --- a/pollen-ui-riot-js/src/main/web/i18n/en.json +++ b/pollen-ui-riot-js/src/main/web/i18n/en.json @@ -196,13 +196,18 @@ "poll_participants_download_title": "Download voting list", "polls_createdPolls": "My polls", "polls_assignPollToMe": "Link a poll to my account", - "polls_assignPollToMe_title": "Link the poll", + "polls_assignPollToMe_title": "Link a poll", "polls_assignPollToMe_desc": "If you created a poll without being connected, you can link it to your account by fillin the form below with the administration url of the poll.", "polls_assignSuccessMessage": "The poll \"{0}\" has successfully been linked to your account:", "polls_alreadyAssignMessage": "Th poll is already linked to your account", - "polls_invitedPolls": "My invitations", - "polls_participatedPolls": "My participations", + "polls_allPolls": "All", + "polls_myPolls": "My polls", + "polls_invitedPolls": "Invited", + "polls_participatedPolls": "Participated", "polls_polls": "All polls", + "polls_pastPolls": "Past", + "polls_currentPolls": "Current", + "polls_upcommingPolls": "Upcomming", "polls_name": "Name", "polls_sort": "Sort by", "polls_noPoll": "No poll", @@ -211,6 +216,7 @@ "polls_noFound": "No found over ", "polls_oneFound": "{0} found over ", "polls_manyFound": "{0} founds over ", + "polls_newPoll": "New poll", "signup_title": "Create an account", "signup_email": "Email", "signup_email_placeholder": "Enter your email", @@ -527,6 +533,7 @@ "favoriteList_name_placdeholder": "Enter new list name", "favoriteList_add": "Add", "search_label": "Search", + "searchReboot_label": "Search", "favoriteList_createDate": "Creation Date", "favoriteList_email": "Email", "favoriteList_noFavoriteList": "no favorite list", diff --git a/pollen-ui-riot-js/src/main/web/i18n/fr.json b/pollen-ui-riot-js/src/main/web/i18n/fr.json index 0ee43b2b..5d4993cf 100644 --- a/pollen-ui-riot-js/src/main/web/i18n/fr.json +++ b/pollen-ui-riot-js/src/main/web/i18n/fr.json @@ -200,9 +200,14 @@ "polls_assignPollToMe_desc": "Si vous avez créé un sondage sans être connecté, vous pouvez le rattacher à votre compte en remplissant ce formulaire avec le lien d'administration du sondage.", "polls_assignSuccessMessage": "Le sondage « {0} » a bien été rattaché à votre compte.", "polls_alreadyAssignMessage": "Le sondage est déjà rattaché à votre compte", + "polls_allPolls": "Tous", + "polls_myPolls": "Mes sondages", "polls_invitedPolls": "Mes invitations", "polls_participatedPolls": "Mes participations", "polls_polls": "Tous les sondages", + "polls_pastPolls": "Passés", + "polls_currentPolls": "En cours", + "polls_upcommingPolls": "A venir", "polls_name": "Nom", "polls_sort": "Trier par", "polls_noPoll": "Aucun sondage", @@ -211,6 +216,7 @@ "polls_noFound": "Aucun trouvé sur ", "polls_oneFound": "{0} trouvé sur ", "polls_manyFound": "{0} trouvés sur ", + "polls_newPoll": "Nouveau sondage", "signup_title": "Créer un compte", "signup_email": "Email", "signup_email_placeholder": "Entrez votre adresse email", @@ -528,6 +534,7 @@ "favoriteList_name_placdeholder": "Renseignez le nom de la nouvelle liste", "favoriteList_add": "Ajouter", "search_label": "Rechercher", + "searchReboot_label": "Rechercher", "favoriteList_createDate": "Date de création", "favoriteList_email": "Adresse électronique", "favoriteList_noFavoriteList": "Aucune liste de votants", diff --git a/pollen-ui-riot-js/src/main/web/tag/components/IconButton.tag.html b/pollen-ui-riot-js/src/main/web/tag/components/IconButton.tag.html new file mode 100644 index 00000000..51ffb0d6 --- /dev/null +++ b/pollen-ui-riot-js/src/main/web/tag/components/IconButton.tag.html @@ -0,0 +1,87 @@ +<!-- + #%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% + --> + +<IconButton> + <a href="{opts.href}"> + <div class="iconButton {activeClassName}"> + + <i class="icon {opts.icon}"></i> + <div class="selector {this.visibleSelector}" /> + + </div> + </a> + <script type="es6"> + + this.activeClassName = ""; + this.visibleSelector = "hidden"; + + if(this.opts.active) { + this.activeClassName = "active"; + this.visibleSelector = "visible"; + } + + </script> + + <style> + + .iconButton { + display: flex; + flex-direction: column; + } + + .icon { + color: #808E9B; + } + + a:hover { + color: #04C4BB; + } + + .active i { + color: #14A39F; + } + + .selector { + width: 6px; + height: 6px; + right: 57px; + top: 215px; + + background: #14A39F; + border-radius: 4px; + + margin-left: 5px; + + visibility: hidden; + } + + .hidden { + visibility: hidden; + opacity: 0; + } + + .visible { + visibility: visible; + opacity: 1; + } + + </style> +</IconButton> 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 new file mode 100644 index 00000000..825f52b7 --- /dev/null +++ b/pollen-ui-riot-js/src/main/web/tag/components/MenuItem.tag.html @@ -0,0 +1,99 @@ +<!-- + #%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% + --> + +<MenuItem> + + <div> + <a href="{opts.href}"> + <span class="{activeClassName}">{opts.label}</span> + <div class="selector {this.visibleSelector}" /> + </a> + </div> + + <script type="es6"> + + this.activeClassName = ""; + this.visibleSelector = "hidden"; + + if(this.opts.active) { + this.activeClassName = "active"; + this.visibleSelector = "visible"; + } + + </script> + + <style> + + div { + display: flex; + align-items: center; + } + + a { + font-family: Open Sans; + font-style: normal; + font-size: 14px + display: block; + color: black; + text-align: left; + padding-top: 30px; + padding-left: 20px; + padding-right: 20px; + text-decoration: none; + + } + + .active { + color: #29817E; + font-weight: bold; + } + + .selector { + width: 19px; + height: 2px; + left: 50px; + top: 213px; + + background: #29817E; + border-radius: 2px; + + visibility: hidden; + } + + .hidden { + visibility: hidden; + opacity: 0; + } + + .visible { + visibility: visible; + opacity: 1; + } + + a:hover { + font-family: Open Sans; + font-style: normal; + color: #29817E; + + } + + </style> +</MenuItem> diff --git a/pollen-ui-riot-js/src/main/web/tag/components/PollenButton.tag.html b/pollen-ui-riot-js/src/main/web/tag/components/PollenButton.tag.html new file mode 100644 index 00000000..3632035d --- /dev/null +++ b/pollen-ui-riot-js/src/main/web/tag/components/PollenButton.tag.html @@ -0,0 +1,85 @@ +<!-- + #%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% + --> + +<PollenButton> + + <a class="btn {className}" href="{opts.url}"> + <i class="{opts.icon}" /> + <span>{opts.label}</span> + </a> + + <script type="es6"> + + this.className = ""; + + if(this.opts.primary) { + this.className = "primary"; + } + if(this.opts.secondary) { + this.className = "secondary"; + } + + </script> + + <style> + + .btn { + border-radius: 41px; + border: solid 1px transparent; + + padding-top: 9px; + padding-bottom: 9px; + padding-left: 20px; + padding-right: 20px; + + font-family: Open Sans; + font-style: normal; + font-size: 16px; + line-height: 22px; + } + + .btn.primary { + color: #FFFFFF; + background: #14A39F; + font-weight: bold; + } + + .btn.secondary { + font-weight: normal; + color: #14A39F; + border-color: #14A39F; + } + + .btn.primary:hover, + .btn.primary:focus { + color: #14A39F; + background: white; + border-color: #14A39F; + } + + .btn.secondary:hover, + .btn.secondary:focus { + color: #FFFFFF; + background: #14A39F; + } + + </style> +</PollenButton> diff --git a/pollen-ui-riot-js/src/main/web/tag/components/SearchReboot.tag.html b/pollen-ui-riot-js/src/main/web/tag/components/SearchReboot.tag.html new file mode 100644 index 00000000..4f3112e3 --- /dev/null +++ b/pollen-ui-riot-js/src/main/web/tag/components/SearchReboot.tag.html @@ -0,0 +1,106 @@ +<!-- + #%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% + --> +<SearchReboot> + <div class="search"> + <!-- <div class="o-field o-field--icon-left o-field--icon-right">--> + <i class="icon-search"></i> + <input class="searchField" + id="search" + name="search" + ref="search" + oninput={search} + placeholder={_t.label} + type="text"> + <i class="icon-delete" aria-hidden="true" + if={refs && refs.search.value} + onclick={deleteSearch}></i> + <!--</div>--> + </div> + + <script type="es6"> + import session from "../../js/Session"; + + this.installBundle(session, "search"); + + this.search = () => { + if (this.searchTimeoutId) { + window.clearTimeout(this.searchTimeoutId); + } + this.opts.search.value = this.refs.search.value; + this.searchTimeoutId = window.setTimeout(() => { + delete this.searchTimeoutId; + if (this.opts.onsearch) { + this.opts.onsearch(this.refs.search.value); + } + }, 300); + }; + + this.deleteSearch = () => { + this.refs.search.value = ""; + this.search(); + }; + + </script> + + <style> + .search { + + width: 350px; + height: 40px; + + background: #FFFFFF; + border: 1px solid #D2DAE2; + box-sizing: border-box; + border-radius: 31px; + + margin-top: 2px; + font-size: 14px; + + display: flex; + justify-content: flex-evenly; + align-items: center; + } + + .icon-search { + color: #14A39F; + padding-left: 20px; + } + + .searchField { + font-family: Open Sans; + font-style: italic; + font-weight: 300; + font-size: 14px; + line-height: 19px; + border: none; + + /* identical to box height */ + + color: #1E272E; + + width: 280px; + padding-left: 10px; + } + + + + </style> +</SearchReboot> 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 5ec42ae0..5137152a 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 @@ -22,17 +22,47 @@ import "./PollCard.tag.html"; import "./PollCardReboot.tag.html"; import "../components/LazyLoad.tag.html"; import "../components/LoadingCard.tag.html"; -import "../components/Search.tag.html"; +import "../components/SearchReboot.tag.html"; +import "../components/PollenButton.tag.html"; +import "../components/IconButton.tag.html"; +import "../components/MenuItem.tag.html"; + <Polls> <div class="container" show="{loaded}"> - <h1>{_t[opts.method]}</h1> - <div class="main-content"> - <div class="c-alert c-alert--info"> - {getCountLabel()} + <!-- Header --> + <div class="header"> + <div class="leftHeader"> + <span>{_t.createdPolls}</span> + <PollenButton primary="true" label={_t.newPoll} icon="icon-new" url="#poll/new/text"/> + <PollenButton secondary="true" label={_t.assignPollToMe_title} url=""/> + </div> + <div> + <SearchReboot onsearch="{refresh}" search="{search}"/> </div> + </div> + + <!-- Sub-menus --> + <div class="submenu"> + <div class="leftSubMenu"> + <MenuItem active="true" href="#polls/all" label="{_t.allPolls}" /> + <MenuItem href="#polls/created" label="{_t.myPolls}" /> + <MenuItem href="#polls/invited" label="{_t.invitedPolls}" /> + <MenuItem href="#polls/participated" label="{_t.participatedPolls}" /> + <!-- TODO A remplacer par un separator --> + <MenuItem label="|" /> + <MenuItem href="#polls/past" label="{_t.pastPolls}" /> + <MenuItem href="#polls/current" label="{_t.currentPolls}" /> + <MenuItem href="#polls/upcomming" label="{_t.upcommingPolls}" /> + </div> + <div class="rightSubMenu"> + <div><IconButton icon="icon-List" /></div> + <div><IconButton href="#" icon="icon-Mosaic" active="true"/></div> + </div> + </div> - <Search onsearch="{refresh}" search="{search}" if="{count > 1}"/> + + <div class="main-content"> <LazyLoad pagination={pagination} onload={lazyLoad} load-size="20" ref="lazyLoad" class="elements"> <yield to="element"> @@ -162,5 +192,77 @@ import "../components/Search.tag.html"; flex-wrap: wrap; justify-content: flex-start; } + + .header { + font-family: Open Sans; + font-style: normal; + font-weight: 300; + font-size: 40px; + line-height: 54px; + + color: #14A39F; + + display: flex; + width: 100%; + justify-content: space-between; + + padding-top: 40px; + padding-left: 2%; + padding-right: 2%; + } + + .header div:last-child { + margin-left: auto; + } + + .leftHeader { + display: flex; + justify-content: space-between; + align-items: center; + flex-basis: 25%; + } + + PollenButton { + align-content: center; + display: flex; + } + + SearchReboot { + padding-top: 10px; + align-content: center; + display: flex; + } + + /* Submenu styles */ + .submenu { + padding: 0px 2%; + display: flex; + margin-top: 30px; + margin-bottom: 25px; + width: 100%; + line-height: 19px; + } + + .leftSubMenu { + display: flex; + justify-content: space-between; + align-items: center; + } + + .rightSubMenu { + display: flex; + justify-content: flex-end; + align-items: center; + flex-grow: 2; + } + + + + + .active span { + color: #29817E; + font-weight: bold; + } + </style> </Polls> diff --git a/pollen-ui-riot-js/stories/Components.stories.js b/pollen-ui-riot-js/stories/Components.stories.js index 0a33e9da..c5a23603 100644 --- a/pollen-ui-riot-js/stories/Components.stories.js +++ b/pollen-ui-riot-js/stories/Components.stories.js @@ -17,6 +17,9 @@ import "../src/main/web/tag/components/LetterAvatar.tag.html"; import "../src/main/web/tag/components/CheckboxReboot.tag.html"; import "../src/main/web/tag/QrCode.tag.html"; 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"; storiesOf("Components") .addDecorator(withKnobs) @@ -43,4 +46,29 @@ storiesOf("Components") .add("Multiline label", () => { const label = text("Label", "# Avec du markdown \n Ça fait beau"); return {tagName: "multilinelabel", opts: {label}}; - }); + }) + .add("Primary Button", () => { + const label = text("Label", "New Poll"); + const primary = boolean("primary", true); + return {tagName: "pollenbutton", opts: {label, primary}}; + }) + .add("Secondary Button", () => { + const label = text("Label", "Link a poll"); + const secondary = boolean("secondary", true); + return {tagName: "pollenbutton", opts: {label, secondary}}; + }) + .add("Button with icon", () => { + const label = text("Label", "New Poll"); + const primary = boolean("primary", true); + const icon = text("Icon", "icon-new"); + return {tagName: "pollenbutton", opts: {label, primary, icon}}; + }).add("Search field", () => { + return {tagName: "searchreboot", opts: {}}; + }).add("Icon button", () => { + const icon = text("icon", "icon-Mosaic"); + return {tagName: "iconbutton", opts: {icon}}; + }).add("Icon button active", () => { + const icon = text("icon", "icon-Mosaic"); + const active = boolean("active", true); + return {tagName: "iconbutton", opts: {icon, active}}; + }); -- To stop receiving notification emails like this one, please contact chorem.org SCM administrator <admin+scm@chorem.org>.