branch feature/253-tuiles updated (ae77e95d -> 0910eb55)
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 ae77e95d Popover centering new 0910eb55 WIP Mise en place du header de la page 'Mes sondages'. RAF problèmes alignements 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 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 Summary of changes: 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 +++++++++++++++ .../{Search.tag.html => SearchReboot.tag.html} | 60 +++++++++-- .../src/main/web/tag/poll/Polls.tag.html | 114 +++++++++++++++++++-- pollen-ui-riot-js/stories/Components.stories.js | 30 +++++- 8 files changed, 477 insertions(+), 18 deletions(-) create mode 100644 pollen-ui-riot-js/src/main/web/tag/components/IconButton.tag.html create mode 100644 pollen-ui-riot-js/src/main/web/tag/components/MenuItem.tag.html create mode 100644 pollen-ui-riot-js/src/main/web/tag/components/PollenButton.tag.html copy pollen-ui-riot-js/src/main/web/tag/components/{Search.tag.html => SearchReboot.tag.html} (60%) -- 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 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>.
participants (1)
-
chorem.org scm