This is an automated email from the git hooks/post-receive script. New commit to branch develop in repository pollen. See https://gitlab.nuiton.org/chorem/pollen.git commit c5dcdcaf041e171423b6cedfcf6ee5b4bd3a68b4 Author: Kevin Morin <morin@codelutin.com> Date: Fri Jun 30 17:24:52 2017 +0200 on renvoie le nom du créateur même en consultation du sondage --- .../src/main/java/org/chorem/pollen/services/service/PollService.java | 1 - 1 file changed, 1 deletion(-) diff --git a/pollen-services/src/main/java/org/chorem/pollen/services/service/PollService.java b/pollen-services/src/main/java/org/chorem/pollen/services/service/PollService.java index 3b270f76..49483f5e 100644 --- a/pollen-services/src/main/java/org/chorem/pollen/services/service/PollService.java +++ b/pollen-services/src/main/java/org/chorem/pollen/services/service/PollService.java @@ -70,7 +70,6 @@ public class PollService extends PollenServiceSupport { if (isNotPermitted(PermissionVerb.editPoll, input.getEntityId())) { input.setPermission(null); input.setCreatorEmail(null); - input.setCreatorName(null); } else { ReportResumeBean report = getReportService().getReport(input.getEntityId()); -- 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 develop in repository pollen. See https://gitlab.nuiton.org/chorem/pollen.git commit c3ba73e2f0df0902cce409657ba00930d80bbdea Author: Kevin Morin <morin@codelutin.com> Date: Fri Jun 30 17:25:35 2017 +0200 style --- pollen-ui-riot-js/src/main/web/conf.js | 2 +- pollen-ui-riot-js/src/main/web/css/Pacifico.ttf | Bin 0 -> 75568 bytes pollen-ui-riot-js/src/main/web/css/custom.css | 40 ++- pollen-ui-riot-js/src/main/web/css/main.css | 148 +++++++-- pollen-ui-riot-js/src/main/web/i18n.json | 31 +- pollen-ui-riot-js/src/main/web/tag/Pollen.tag.html | 8 +- .../src/main/web/tag/PollenFooter.tag.html | 2 +- .../src/main/web/tag/PollenHeader.tag.html | 101 ++++--- pollen-ui-riot-js/src/main/web/tag/SignIn.tag.html | 13 +- pollen-ui-riot-js/src/main/web/tag/SignUp.tag.html | 7 +- .../web/tag/components/date-time-picker.tag.html | 16 +- .../src/main/web/tag/poll/ChoiceDate.tag.html | 249 --------------- .../src/main/web/tag/poll/Choices.tag.html | 9 + .../src/main/web/tag/poll/Description.tag.html | 109 +++---- .../src/main/web/tag/poll/EditPoll.tag.html | 114 ++++--- .../src/main/web/tag/poll/Poll.tag.html | 221 ++++++++------ .../src/main/web/tag/poll/Polls.tag.html | 2 +- .../src/main/web/tag/poll/Settings.tag.html | 334 +++++++++++---------- .../src/main/web/tag/poll/Summary.tag.html | 100 +++--- 19 files changed, 763 insertions(+), 743 deletions(-) diff --git a/pollen-ui-riot-js/src/main/web/conf.js b/pollen-ui-riot-js/src/main/web/conf.js index a6203bac..eeb2148f 100644 --- a/pollen-ui-riot-js/src/main/web/conf.js +++ b/pollen-ui-riot-js/src/main/web/conf.js @@ -1,6 +1,6 @@ window.pollenConf = { endPoint: "http://localhost:8888/pollen-rest-api", - piwikUrl: "", // add the piwik url, eg: http://localhost/piwik<; + piwikUrl: "", // add the piwik url, eg: http://localhost/piwik piwikSiteId: "", // add the site id, eg: 3 defaultMessageTimeout: 15, resourceMaxSize: 10000000 // octets => 10 Mo diff --git a/pollen-ui-riot-js/src/main/web/css/Pacifico.ttf b/pollen-ui-riot-js/src/main/web/css/Pacifico.ttf new file mode 100644 index 00000000..6d47cdc9 Binary files /dev/null and b/pollen-ui-riot-js/src/main/web/css/Pacifico.ttf differ diff --git a/pollen-ui-riot-js/src/main/web/css/custom.css b/pollen-ui-riot-js/src/main/web/css/custom.css index 7a5e5d68..bdf67d1b 100644 --- a/pollen-ui-riot-js/src/main/web/css/custom.css +++ b/pollen-ui-riot-js/src/main/web/css/custom.css @@ -1,15 +1,16 @@ :root{ - --main: #13a2ff; + --main: #04c4bb; --background: #ffffff; - --default: #042d44; + --default: #2c3e50; + --field-border: #96a8b2; --winner: #ff9e0d; --anonymous: #666666; --poll-created: grey; --poll-adding_choices: orange; - --poll-voting: #13a2ff; + --poll-voting: #04c4bb; --poll-closed: #53bd41; --link: #96a8b2; @@ -17,17 +18,23 @@ --separator: #b2c7d3; --dropdown: #f9f9f9; - --dropdown-text: #96a8b2; + --dropdown-text: #353535; --dropdown-shadow: #aaa; --dropdown-hover: #f1f1f1; + --header: #353535; + --header-title: #04c4bb; + --header-actions: #535353; + --header-link: #eeeeee; + --header-link-hover: #04c4bb; + --footer: black; --footer-text: #ffffff; - --footer-text-hover: blue; + --footer-text-hover: #eeeeee; --qrcode: #ffffff; - --focus: #2196f3; + --focus: #04c4bb; --shadow: #4dabf5; --active: #7b929e; --btn-hover: #b0bec5; @@ -36,9 +43,9 @@ --brand: #2c3e50; --brand-active: #1c2732; --brand-hover: #3c556e; - --info: #2196f3; - --info-active: #0c7fda; - --info-hover: #4dabf5; + --info: #04c4bb; + --info-active: #00aba3; + --info-hover: #32c7bd; --warning: #ff9800; --warning-active: #d17d00; --warning-hover: #ffab2e; @@ -61,4 +68,19 @@ --favorit-member: #ffffff; --title: "Pollen"; + --title-font: pacifico; + + --h1: #777777; + --h1-background: #f3f3f3; + + --h4: #555555; + + --body-content-background: #fff; + --container-border: #a9a9a9; + + --tabs-background: #f3f3f3; + --tab-color: #777; + --tab-selected-background: #fff; + + --poll-info: #aaa; } diff --git a/pollen-ui-riot-js/src/main/web/css/main.css b/pollen-ui-riot-js/src/main/web/css/main.css index 7f8d622c..bd434d0d 100644 --- a/pollen-ui-riot-js/src/main/web/css/main.css +++ b/pollen-ui-riot-js/src/main/web/css/main.css @@ -18,14 +18,17 @@ * along with this program. If not, see <http://www.gnu.org/licenses/>. * #L% */ - +@font-face { +font-family: 'pacifico'; +src: url('Pacifico.ttf'); +} html { -webkit-text-size-adjust:none; } body { - font-size: 16px; + font-size: 14px; } * { @@ -74,6 +77,7 @@ input, textarea { .body-content { flex-grow: 1; overflow: hidden; + background-color: var(--body-content-background); } @media (orientation: portrait) { @@ -97,20 +101,14 @@ a { } .container { - max-width: 1024px; - margin: 15px auto 0 auto; -} - -@media (max-width: 1034px) { - .container { - margin: 15px 5px 0 5px; - } + height: 100%; + background-color: var(--background); } .actions { - padding: 5px 0; + padding: 10px 0; display: flex; - justify-content: space-between; + justify-content: center; } .actions .c-button, @@ -152,6 +150,10 @@ ul { cursor: pointer; } +.cursor-help { + cursor: help; +} + .c-overlay, .o-modal { position: fixed; } @@ -161,7 +163,7 @@ ul { .colors-main textarea, .colors-main select { background-color: var(--background); - color: var(--default); + color: var(--main); } .colors-main-invers, @@ -170,6 +172,28 @@ ul { color: var(--background); } +.colors-default, +.colors-default input, +.colors-default textarea, +.colors-default select { + background-color: var(--background); + color: var(--default); +} + +.colors-default-invers, +.colors-default-invers a { + background-color: var(--default); + color: var(--background); +} + +.border-main { + border-color: var(--main); +} + +.border-main-invers { + border-color: var(--background); +} + .card { display: block; margin: 5px auto; @@ -222,43 +246,79 @@ ul { /* Steps */ .tabs { - border-bottom: 1px solid var(--separator); display: flex; flex-direction: row; - justify-content: center; + justify-content: left; align-items: center; margin: 0 auto; } +.tabs.below-h1 { + background-color: var(--tabs-background); + border-bottom: 1px solid var(--separator); +} + +.tab-container { + display: flex; + position: relative; + top: 1px; + padding: 0 10px; +} + .tab { - margin-left: 12px; - margin-right: 12px; + padding: 0.5em 1.5em 0.75em; + text-align: center; } +.tab, .tab button, .tab a { border: none; font-size: 1em; - color: var(--default); + color: var(--tab-color); background: transparent; } +.tab span { + font-style: italic; +} + +.tab.selected span { + font-style: normal; +} + +.tab.selected { + background: var(--tab-selected-background); + border: 1px solid var(--separator); + border-bottom: 0; + border-radius: 4px 4px 0 0; +} + .tab.selected, -.tab.selected a { +.tab.selected a, +.tab.selected button { + color: var(--main); + font-weight: bold; +} + +.tab a:hover, +.tab button:hover { color: var(--main); - border-bottom: 2px solid; } @media (max-width: 640px) { + + .tabs.tabs-one-small .tab-container { + flex-grow: 1; + } + .tabs.tabs-one-small .tab { display: none; } .tabs.tabs-one-small .tab.selected { display: block; - width: 100%; - text-align: center; - border-bottom: none; + flex-grow: 1; } } @@ -304,7 +364,7 @@ time-picker .next:hover { .dropdown-content { background-color: var(--dropdown); - box-shadow: 0 8px 16px 0 var(--dropdown-shadow); + box-shadow: 0 2px 2px 0 var(--dropdown-shadow); } .dropdown-content a { @@ -346,6 +406,38 @@ qrcode { background-color: var(--qrcode); } +pollenheader { + background-color: var(--header); +} + +pollenheader .header-home { + font-family: var(--title-font); + color: var(--header-title); +} + +pollenheader .header-actions { + background-color: var(--header-actions); +} + +pollenheader .header-link { + color: var(--header-link); +} + +pollenheader .header-link:hover { + color: var(--header-link-hover); +} + +h1 { + color: var(--h1); + background-color: var(--h1-background); + padding: 30px 20px 15px 20px; + border-bottom: 1px solid var(--separator); +} + +h4 { + color: var(--h4); +} + pollenfooter, pollenfooter a { background-color: var(--footer); @@ -375,3 +467,11 @@ pollenfooter a:hover { .error { color: var(--error); } + +.c-field { + border-color: var(--field-border); +} + +.no-border { + border: 0; +} \ No newline at end of file diff --git a/pollen-ui-riot-js/src/main/web/i18n.json b/pollen-ui-riot-js/src/main/web/i18n.json index 90ab739e..80581654 100644 --- a/pollen-ui-riot-js/src/main/web/i18n.json +++ b/pollen-ui-riot-js/src/main/web/i18n.json @@ -31,6 +31,7 @@ "summary_members": "Participants", "summary_membersNb": "participants ont reçu un email avec un lien pour voter.", "poll_403": "Erreur : le sondage n'est pas accessible", + "poll_newPoll": "Nouveau sondage", "poll_closePoll": "Clôturer le sondage", "poll_reopenPoll": "Réouvrir le sondage", "poll_clonePoll": "Cloner le sondage", @@ -47,17 +48,15 @@ "poll_ADDING_CHOICES": "Ajout de choix", "poll_VOTING": "Ouvert", "poll_CREATED": "Créé", - "poll_createdBy": "Créé par", - "poll_createdIn": "le", + "poll_createdBy": "Auteur :", "poll_voteCountingType": "Type de sondage : ", - "poll_beginChoiceFrom": "ajout de choix à partir du", - "poll_votingFrom": "ouverture à partir du", - "poll_votingFromTo": "jusqu'au", - "poll_beginChoiceTo": "ajout de choix jusqu'au", + "poll_dateVotes": "Période de vote", + "poll_dateAddChoices": "Période d'ajout de choix", + "poll_dateFrom": "Du", + "poll_dateTo": "Au", "poll_noChoice": "aucun choix", "poll_choice": "choix", "poll_choices": "choix", - "poll_votingTo": "ouvert jusqu'au", "poll_noVote": "aucun vote", "poll_vote": "vote", "poll_votes": "votes", @@ -223,10 +222,12 @@ "home_createPoll": "Créer un sondage", "poll_cancel": "Annuler", "poll_description_next": "Suivant", + "poll_description_info": "Informations", "poll_description_title": "Titre", "poll_description_titlePlaceHolder": "Renseignez le titre du sondage", "poll_description_description": "Description", "poll_description_descriptionPlaceHolder": "Renseignez la description du sondage", + "poll_description_user": "Créateur", "poll_description_name": "Votre nom", "poll_description_namePlaceHolder": "Renseignez votre nom", "poll_description_email": "Votre courriel", @@ -285,7 +286,7 @@ "poll_settings_addChoices": "Ajout de choix par les participants", "poll_settings_limitChoices": "Limiter le nombre de choix par vote", "poll_settings_votesConfiguration": "Configuration des votes", - "poll_settings_voteCountingType": "Type de scrutin pour effecter le dépouillement du sondage", + "poll_settings_voteCountingType": "Type de scrutin pour effectuer le dépouillement du sondage", "poll_settings_voteCountingType_normal": "Normal", "poll_settings_voteCountingType_pourcentage": "Pourcentage", "poll_settings_voteCountingType_condorcet": "Condorcet", @@ -306,9 +307,11 @@ "poll_settings_restrictedPoll": "Seul les invités peuvent voter (Sondage privé)", "poll_settings_restrictedPoll_withMe": "Je participe au sondage", "poll_settings_voteNotification": "Recevoir des notifications", + "poll_settings_voteNotification_disabled": "Pour activer les notifications, vous devez renseigner votre courriel dans la partie 'Description'.", "poll_settings_voteNotification_never": "Jamais", "poll_settings_voteNotification_everyVote": "À chaque vote", "poll_settings_notifyMeBeforePollEnds": "Recevoir une notification avant la fin des votes", + "poll_settings_notifyMeBeforePollEnds_disabled": "Pour activer le rappel de la fin du sondage, vous devez renseigner votre courriel dans la partie 'Description', et choisir une date de fin pour le sondage en activant la période d'ouverture des votes.", "poll_settings_notifyMeHoursBeforePollEnds": "Combien d'heures avant ?", "poll_choices_title": "Liste des choix", "poll_choices_label": "Choix", @@ -552,17 +555,15 @@ "poll_ADDING_CHOICES": "Adding choices", "poll_VOTING": "Voting", "poll_CREATED": "Created", - "poll_createdBy": "Create by", - "poll_createdIn": "in", + "poll_createdBy": "Author", "poll_voteCountingType": "Poll type: ", "poll_beginChoiceFrom": "add choice from", - "poll_votingFrom": "voting from", - "poll_votingFromTo": "to", + "poll_votingFrom": "Start date:", + "poll_votingTo": "End date:", "poll_beginChoiceTo": "add choice to", "poll_noChoice": "no choice", "poll_choice": "choice", "poll_choices": "choices", - "poll_votingTo": "voting to", "poll_noVote": "no vote", "poll_vote": "vote", "poll_votes": "votes", @@ -729,10 +730,12 @@ "poll_saveSuccess": "Your poll {0} has been successfully saved.", "poll_description_cancel": "Cancel", "poll_description_next": "Next", + "poll_description_info": "Information", "poll_description_title": "Title", "poll_description_titlePlaceHolder": "Enter poll title", "poll_description_description": "Description", "poll_description_descriptionPlaceHolder": "Enter poll description", + "poll_description_user": "Creator", "poll_description_name": "Your name", "poll_description_namePlaceHolder": "Enter your name", "poll_description_email": "Your email", @@ -803,9 +806,11 @@ "poll_settings_restrictedPoll": "Only invited people can vote (Private poll)", "poll_settings_restrictedPoll_withMe": "I also want to participate", "poll_settings_voteNotification": "Receive notifications", + "poll_settings_voteNotification_disabled": "To enable the notifications, you need to enter you email address in the 'Description' part.", "poll_settings_voteNotification_never": "Never", "poll_settings_voteNotification_everyVote": "For every vote", "poll_settings_notifyMeBeforePollEnds": "Receive a notification before the end of the votes", + "poll_settings_notifyMeBeforePollEnds_disabled": "To enable the notifications, you need to enter you email address in the 'Description' part, and select an end date for the poll by enabling the vote opening period.", "poll_settings_notifyMeHoursBeforePollEnds": "How many hours before?", "poll_choices_title": "Choices List", "poll_choices_label": "Choice", diff --git a/pollen-ui-riot-js/src/main/web/tag/Pollen.tag.html b/pollen-ui-riot-js/src/main/web/tag/Pollen.tag.html index 56c85f3d..8825148a 100644 --- a/pollen-ui-riot-js/src/main/web/tag/Pollen.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/Pollen.tag.html @@ -36,7 +36,7 @@ require("./favoriteList/FavoriteLists.tag.html"); require("./favoriteList/FavoriteList.tag.html"); require("./popup/ConfirmPopup.tag.html"); require("./popup/InformationPopup.tag.html"); -<Pollen class="body-wrapper colors-main"> +<Pollen class="body-wrapper colors-default"> <ConfirmPopup/> <InformationPopup/> <PollenHeader/> @@ -189,7 +189,7 @@ require("./popup/InformationPopup.tag.html"); this.bus.trigger("pageChanged", "editPoll"); riot.mount(this.refs.content, "editpoll", {pollId: pollId, permission: permission, clone: true}); }); - route("/poll/*/summary/*/*", (pollId, permission) => { + route("/poll/*/summary/*", (pollId, permission) => { riot.mount(this.refs.content, "editpoll", {pollId: pollId, permission: permission, showSummary:true}); }); route("/poll/*", (pollId) => { @@ -235,6 +235,10 @@ require("./popup/InformationPopup.tag.html"); position: relative; } + .body-content > div { + height: 100%; + } + pollenmessagemanager { position: fixed; bottom: 20px; diff --git a/pollen-ui-riot-js/src/main/web/tag/PollenFooter.tag.html b/pollen-ui-riot-js/src/main/web/tag/PollenFooter.tag.html index 93b8d385..359ad824 100644 --- a/pollen-ui-riot-js/src/main/web/tag/PollenFooter.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/PollenFooter.tag.html @@ -45,7 +45,7 @@ .links a { display: inline-block; - font-size: 0.8em; + font-size: 0.9em; padding: 0 20px; } diff --git a/pollen-ui-riot-js/src/main/web/tag/PollenHeader.tag.html b/pollen-ui-riot-js/src/main/web/tag/PollenHeader.tag.html index f91e4474..7a434820 100644 --- a/pollen-ui-riot-js/src/main/web/tag/PollenHeader.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/PollenHeader.tag.html @@ -19,46 +19,46 @@ * #L% */ require("./HeaderI18n.tag.html"); -<PollenHeader class="colors-main-invers"> - <a class="header-link "href="#home" ><i class="fa fa-home"/></a> - - <div class="header-home"> - <a class="header-link instance-title" href="#home" target="_top"></a> - </div> +<PollenHeader> + + <a class="header-home instance-title" href="#home" target="_top"></a> + + <div class="header-actions"> + <div class="dropdown" if="{user && user.administrator}"> + <a class="header-link"> + <i class="fa fa-wrench"/> + </a> + <div class="dropdown-content right"> + <a href="#user">{__.users}</a> + <a href="#poll">{__.polls}</a> + </div> + </div> - <div class="dropdown" if="{user && user.administrator}"> - <a class="header-link"> - <i class="fa fa-wrench"/> - </a> - <div class="dropdown-content right"> - <a href="#user">{__.users}</a> - <a href="#poll">{__.polls}</a> + <div class="dropdown" if={user}> + <a class="header-link"> + <i class="fa fa-user-circle"/> + <span class="user-name action-label"> {user && user.name}</span> + </a> + <div class="dropdown-content right"> + <a href="#user/profile">{__.myProfile}</a> + <a href="#poll/created">{__.myPolls}</a> + <a href="#poll/invited">{__.myInvitedPolls}</a> + <a href="#poll/participated">{__.myParticipatedPolls}</a> + <a href="#favoriteLists">{__.myFavoriteLists}</a> + <span role="separator" class="divider"></span> + <a onclick="{signOut}">{__.signout}</a> + </div> </div> - </div> - <div class="dropdown" if={user}> - <a class="header-link"> - <i class="fa fa-user"/> - <span class="user-name"> {user && user.name}</span> - </a> - <div class="dropdown-content right"> - <a href="#user/profile">{__.myProfile}</a> - <a href="#poll/created">{__.myPolls}</a> - <a href="#poll/invited">{__.myInvitedPolls}</a> - <a href="#poll/participated">{__.myParticipatedPolls}</a> - <a href="#favoriteLists">{__.myFavoriteLists}</a> - <span role="separator" class="divider"></span> - <a onclick="{signOut}">{__.signout}</a> + <div if="{!user}"> + <a class="header-link" onclick="{signIn}"> + <i class="fa fa-sign-in" aria-hidden="true" /><span class="action-label">{__.signin}</span> + </a> </div> - </div> - <div if="{!user}"> - <button type="button" class="c-button c-button--ghost-info colors-main" onclick="{signIn}"> - <i class="fa fa-sign-in" aria-hidden="true" /> {__.signin} - </button> - </div> + <HeaderI18n/> - <HeaderI18n/> + </div> <script type="es6"> let route = require("riot-route"); @@ -97,26 +97,39 @@ require("./HeaderI18n.tag.html"); pollenheader { display: flex; align-items: center; + justify-content: space-between; } .header-home { - font-size: 1.3em; - flex-grow: 1; - min-width: 0px; + font-size: 2em; + margin-left: 50px; + height: 3.5rem; + line-height: 3.3rem; } - .header-home .header-link { - text-transform: uppercase; + .header-actions { + display: flex; + align-items: center; } - .header-link { - font-size: 1.3em; + .header-actions .header-link { + font-size: 1em; display: flex; text-align: center; - justify-content: center; align-items: center; - height: 3rem; - padding: 10px 10px; + height: 3.5rem; + } + + .header-actions .header-link i { + font-size: 1.5em; + } + + .header-actions .header-link .action-label { + margin-left: 5px; + } + + .header-link { + padding: 0px 15px; cursor: pointer; } diff --git a/pollen-ui-riot-js/src/main/web/tag/SignIn.tag.html b/pollen-ui-riot-js/src/main/web/tag/SignIn.tag.html index 0a0d8405..f4cdc57c 100644 --- a/pollen-ui-riot-js/src/main/web/tag/SignIn.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/SignIn.tag.html @@ -22,7 +22,7 @@ require("./popup/NewPassword.tag.html"); require("./SignUp.tag.html"); require("./components/HumanInput.tag.html"); <SignIn> - <div class="body-container colors-main sign-in-layer" show={openSignIn}> + <div class="body-container colors-default sign-in-layer" show={openSignIn}> <div class="body-content"> <h1 class="c-heading">{__.title}</h1> <form class="signin"> @@ -138,5 +138,16 @@ require("./components/HumanInput.tag.html"); font-size: 1em; } + .body-content { + margin-bottom: 20px; + } + + @media (orientation: landscape) { + .body-content { + flex-basis: 50%; + } + } + + </style> </SignIn> diff --git a/pollen-ui-riot-js/src/main/web/tag/SignUp.tag.html b/pollen-ui-riot-js/src/main/web/tag/SignUp.tag.html index 5fb2c701..52c6e6ee 100644 --- a/pollen-ui-riot-js/src/main/web/tag/SignUp.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/SignUp.tag.html @@ -161,7 +161,6 @@ require("./components/HumanInput.tag.html"); <style> .container { - max-width: 450px; margin-top: 0px; } @@ -169,6 +168,12 @@ require("./components/HumanInput.tag.html"); text-align: center; } + form { + padding: 0 1em; + margin: 0 auto; + max-width: 450px; + } + @media (min-width: 640px) { .o-form-element .c-label:first-child { width: 35%; diff --git a/pollen-ui-riot-js/src/main/web/tag/components/date-time-picker.tag.html b/pollen-ui-riot-js/src/main/web/tag/components/date-time-picker.tag.html index 3c1331d4..032d1d95 100644 --- a/pollen-ui-riot-js/src/main/web/tag/components/date-time-picker.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/components/date-time-picker.tag.html @@ -2,7 +2,7 @@ require("./date-picker.tag.html"); require("./time-picker.tag.html"); <date-time-picker> - <div if={!session.dateInputSupported} class="c-input-group"> + <div if={!session.dateInputSupported} class="c-input-group date-time-field"> <date-picker class="o-field o-field--icon-left" inputclass="c-field o-field--icon-left" iconleftclass="calendar" @@ -18,15 +18,15 @@ require("./time-picker.tag.html"); disabled={opts.disabled} time="{time}" onchange="{opts.onchange}"/> - <button if="{!opts.required}" - class="c-button c-button--brand input-right-button" - disabled={opts.disabled} - onclick="{reset}"> + <a if="{!opts.required}" + class="c-button c-button--brand input-right-button" + disabled={opts.disabled} + onclick="{reset}"> <i class="fa fa-fw fa-times"></i> - </button> + </a> </div> <input if={session.dateInputSupported} - class="c-field" + class="c-field date-time-field" ref="dateInputSupportedField" value="{dateTime}" type="datetime-local" @@ -71,7 +71,7 @@ require("./time-picker.tag.html"); <style scoped> .input-right-button { - padding: 0; + padding: 0.5em 0.1em; } </style> diff --git a/pollen-ui-riot-js/src/main/web/tag/poll/ChoiceDate.tag.html b/pollen-ui-riot-js/src/main/web/tag/poll/ChoiceDate.tag.html deleted file mode 100644 index 8beab761..00000000 --- a/pollen-ui-riot-js/src/main/web/tag/poll/ChoiceDate.tag.html +++ /dev/null @@ -1,249 +0,0 @@ -/*- -* #%L -* Pollen :: UI (Riot Js) -* %% -* 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% -*/ -<ChoiceDate> - - <div class="choice-body"> - - <div class="choice-actions"> - <div show="{mode =='edit' && !editing}" id="{choice.id}"> - <a onclick="{deleteChoice}"><i class="fa fa-trash danger fa-15x"/></a> - <a onclick="{onEditChoice}"><i class="fa fa-pencil-square-o fa-15x"/></a> - </div> - <div show="{editing}"> - <a onclick="{cancelEditChoice}" class="danger"> - <i class="fa fa-remove fa-15x"/> - </a> - <button class="icon" type="submit" onclick="{prepareSave}"> - <i class="fa fa-check fa-15x"/> - </button> - </div> - </div> - <div ref="edit_choice" id="edit_choice_{number}" class="choice-container"> - <div class="choice-container-child"> - <label class="choice-wide" for="choice{number}">{__.label} {number + 1}</label> - <label class="choice-wider" if="{number == 0}">{__.description}</label> - <label class="choice-wider" if="{number > 0}"/> - </div> - <div class="choice-container-child"> - <input type="hidden" name="id{number}" value="{choice.id}"> - <div class="choice-inputs"> - <div class="choice-wide choice-date"> - <input type="hidden" ref="choice" name="choice{number}" id="choice{number}" - value="{choice.choiceValue}"> - <input type="date" ref="date" name="date{number}" id="date{number}" value="{choice.date}" - class="choice-wide" - disabled="{!edit || (mode==='edit' && !editing && choice.choiceValue)?'disabled':''}"> - <i class="fa fa-clock-o fa-15x"/> - <input type="checkbox" ref="timed" checked="{timed?'checked':''}" onclick="{toggleTimed}" - disabled="{!edit || (mode==='edit' && !editing)?'disabled':''}"> - <input type="time" ref="time" name="time{number}" id="time{number}" value="{choice.time}" - disabled="{!edit || (mode==='edit' && !editing) || !timed?'disabled':''}" - required="{timed?'required':''}"> - </div> - <input type="text" ref="description" name="description{number}" value="{choice.description}" - disabled="{!edit || (mode==='edit' && !editing && choice.choiceValue)?'disabled':''}" - class="choice-wider"> - </div> - </div> - </div> - </div> - - <script type="es6"> - this.installBundle(this.opts.session, "poll_choices"); - this.number = parseInt(this.opts.number, 10); - this.mode = this.opts.mode; - this.edit = this.opts.mode === "create" || this.opts.mode === "edit"; - this.choice = this.opts.choice; - - this.opts.emitter.on("prepareSave", () => { - let choiceValue = this.refs.date.value; - if (choiceValue && this.timed && this.refs.time.value) { - choiceValue += "T" + this.refs.time.value; - } - this.refs.choice.value = choiceValue; - }); - - let choiceValue = this.choice.choiceValue; - - if (choiceValue) { - let index = choiceValue.indexOf("T"); - if (index === -1) { - this.choice.date = choiceValue; - this.timed = false; - } else { - this.choice.date = choiceValue.substring(0, index); - this.choice.time = choiceValue.substring(index + 1); - this.timed = true; - } - this.logger.info("init choice: (" + this.timed + ")"); - this.logger.info(this.choice); - } - - this.on("mount", () => { - if (this.number === 0 || this.mode === "edit") { - this.refs.choice.required = "required"; - } - if (this.mode === "edit") { - this.refs.edit_choice.classList.add("choice-view"); - } - }); - - this.toggleTimed = () => { - this.timed = !this.timed; - }; - - this.prepareSave = () => { - let date = this.refs.choice.value; - let time = this.refs.time.value; - let choiceValue2 = date; - if (this.timed) { - choiceValue2 += "T" + time; - } - this.$choice = { - date: date, - time: time, - choiceValue: choiceValue2, - description: this.refs.description.value - }; - }; - - this.onEditChoice = () => { - this.editing = true; - let ref = this.refs.edit_choice; - ref.classList.add("choice-edit"); - ref.classList.remove("choice-view"); - this.trigger("editChoice", this.number); - Object.assign(this.$choice = {}, this.choice); - this.logger.info(this.$choice); - }; - - this.cancelEditChoice = () => { - if (this.editing) { - let ref = this.refs.edit_choice; - ref.classList.remove("choice-edit"); - ref.classList.add("choice-view"); - Object.assign(this.choice, this.$choice); - this.logger.info(this.choice); - this.refs.choice.value = this.choice.date; - this.refs.time.value = this.choice.time; - this.timed = !!this.choice.time; - this.refs.description.value = this.choice.description; - - } - this.editing = false; - this.trigger("cancelEditChoice", this.number); - }; - - this.deleteChoice = () => { - if (this.confirm("Delete choice?")) { - this.trigger("deleteChoice", this.number); - } - }; - - </script> - - <style> - - .fa-15x { - font-size: 1.5em; - } - - .icon { - border-style: none; - background-color: white; - cursor: pointer; - color: #13a2ff; - } - - .danger { - color: red; - } - - .choice-wide { - width: 440px; - } - - .choice-wider { - width: 640px; - } - - .choice-actions { - padding-right: 5px; - } - - .choice-body { - display: flex; - flex-direction: row; - justify-content: flex-start; - align-items: center; - } - - .choice-container { - display: flex; - flex-direction: column; - justify-content: flex-start; - align-items: center; - } - - .choice-container-child { - display: flex; - } - - .choice-inputs { - display: flex; - flex-direction: row; - } - - .choice-date { - display: flex; - flex-direction: row; - } - - .choice-date > i { - padding-top: 5px; - } - - .choice-edit { - border: 2px solid #13a2ff; - } - - .choice-view { - border: 2px solid white; - } - - input[type=date] { - width: 165px; - } - - input[type=time] { - width: 130px; - } - - input[type=checkbox] { - width: 20px; - } - - input[disabled=disabled] { - cursor: not-allowed; - } - - </style> -</ChoiceDate> diff --git a/pollen-ui-riot-js/src/main/web/tag/poll/Choices.tag.html b/pollen-ui-riot-js/src/main/web/tag/poll/Choices.tag.html index 068a991e..2130a4e1 100644 --- a/pollen-ui-riot-js/src/main/web/tag/poll/Choices.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/poll/Choices.tag.html @@ -64,6 +64,11 @@ require("./Choice.tag.html"); </script> <style> + + h4 { + margin-bottom: 1em; + } + .choice.c-field { padding: 0 0 0 1px; } @@ -73,5 +78,9 @@ require("./Choice.tag.html"); width: 90%; } + .choices-actions { + margin-top: 1em; + } + </style> </Choices> diff --git a/pollen-ui-riot-js/src/main/web/tag/poll/Description.tag.html b/pollen-ui-riot-js/src/main/web/tag/poll/Description.tag.html index c71b2f23..956c27ae 100644 --- a/pollen-ui-riot-js/src/main/web/tag/poll/Description.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/poll/Description.tag.html @@ -19,45 +19,55 @@ * #L% */ <Description> - <div class="o-form-element"> - <label class="c-label" for="title">{__.title}</label> - <input ref="title" - type="text" - class="c-field" - required - name="title" - value="{form.model.title}" - disabled={opts.form.model.isClosed} - placeholder="{__.titlePlaceHolder}"/> - </div> - <div class="o-form-element"> - <label class="c-label" for="description">{__.description}</label> - <textarea ref="description" - class="c-field" - name="description" - disabled={opts.form.model.isClosed} - placeholder="{__.descriptionPlaceHolder}">{form.model.description}</textarea> - </div> - <div class="o-form-element"> - <label class="c-label" for="name">{__.name}</label> - <input ref="name" - type="text" - class="c-field" - required - name="name" - value="{form.model.creatorName}" - disabled={opts.form.model.isClosed} - placeholder="{__.namePlaceHolder}"/> + + <div class="description-part"> + <h4><i class="fa fa-info-circle"></i> {__.info}</h4> + + <div class="o-form-element"> + <label class="c-label" for="title">{__.title}</label> + <input ref="title" + type="text" + class="c-field c-field--label" + required + name="title" + value="{form.model.title}" + disabled={opts.form.model.isClosed} + placeholder="{__.titlePlaceHolder}"/> + </div> + <div class="o-form-element"> + <label class="c-label" for="description">{__.description}</label> + <textarea ref="description" + class="c-field c-field--label" + name="description" + disabled={opts.form.model.isClosed} + placeholder="{__.descriptionPlaceHolder}">{form.model.description}</textarea> + </div> </div> - <div class="o-form-element"> - <label class="c-label" for="email">{__.email}</label> - <input ref="email" - type="email" - class="c-field" - name="email" - value="{form.model.creatorEmail}" - disabled={opts.form.model.isClosed} - placeholder="{__.emailPlaceHolder}"/> + + <div class="description-part"> + <h4><i class="fa fa-user-circle"></i> {__.user}</h4> + + <div class="o-form-element"> + <label class="c-label" for="name">{__.name}</label> + <input ref="name" + type="text" + class="c-field c-field--label" + required + name="name" + value="{form.model.creatorName}" + disabled={opts.form.model.isClosed} + placeholder="{__.namePlaceHolder}"/> + </div> + <div class="o-form-element"> + <label class="c-label" for="email">{__.email}</label> + <input ref="email" + type="email" + class="c-field c-field--label" + name="email" + value="{form.model.creatorEmail}" + disabled={opts.form.model.isClosed} + placeholder="{__.emailPlaceHolder}"/> + </div> </div> <script type="es6"> @@ -73,20 +83,17 @@ </script> <style> - @media (min-width: 640px) { - .o-form-element .c-label:first-child { - width: 25%; - display: inline-block; - text-align: right; - float: left; - padding-top: 0.5em; - padding-right: 5px; - } - .o-form-element .c-field { - width: 75%; - display: inline-block; - } + description { + display: flex; + flex-wrap: wrap; + justify-content: space-around; + } + + .description-part { + flex-grow: 1; + max-width: 500px; + padding: 0 5px; } </style> diff --git a/pollen-ui-riot-js/src/main/web/tag/poll/EditPoll.tag.html b/pollen-ui-riot-js/src/main/web/tag/poll/EditPoll.tag.html index e9dc00e7..f3609140 100644 --- a/pollen-ui-riot-js/src/main/web/tag/poll/EditPoll.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/poll/EditPoll.tag.html @@ -26,26 +26,34 @@ require("./Summary.tag.html"); require("../components/HumanInput.tag.html"); <EditPoll> - <form show={loaded} ref="poll" class="form"> - <HumanInput onsubmit="{submitStep}"/> - <div class="tabs tabs-one-small"> - <div each={step, index in form.steps} class="tab {selected : !showSummary && form.step === index}"> - <button type="submit" if="{form.step > index || !form.creation}" class="{cursor-pointer: !form.creation}" onclick="{goto(index)}"> - {getStepLabel(step)} - </button> - <span if="{form.step <= index && form.creation}" class="cursor-pointer"> - {getStepLabel(step)} - </span> - </div> - <div if="{showSummary}" class="tab selected"> - <button type="submit" class="cursor-pointer"> - {__.summaryTab} - </button> + + <form show={loaded} ref="poll" onsubmit="{submitStep}" class="container"> + + <h1 class="no-border"> + <span if="{form.creation}">{__.newPoll}</span> + <span if="{!form.creation}">{form.model.title}</span> + </h1> + + + <div class="tabs tabs-one-small below-h1"> + <div class="tab-container"> + <div each={step, index in form.steps} class="tab {selected : !showSummary && form.step === index}"> + <button type="submit" if="{form.step > index || !form.creation}" class="cursor-pointer" onclick="{goto(index)}"> + {getStepLabel(step)} + </button> + <span if="{form.step <= index && form.creation}" class="{cursor-pointer: !form.creation}"> + {getStepLabel(step)} + </span> + </div> + <div if="{showSummary}" class="tab selected"> + <button type="submit" class="cursor-pointer"> + {__.summaryTab} + </button> + </div> </div> </div> - <div class="container"> - + <div class="form"> <Description if={!showSummary && form.step === 0} form={form}/> <Choices if={!showSummary && form.step === 1} form={form}/> <Settings if={!showSummary && form.step === 2} form={form}/> @@ -53,36 +61,33 @@ require("../components/HumanInput.tag.html"); <Summary if={showSummary} form={form}/> <div class="actions" if={!showSummary}> - <div class="actions-left"> - <a class="c-button c-button--ghost-info" - href={form.creation ? "#/home" : ("#/poll/" + form.model.id + "/vote/" + form.model.permission)}> - <i class="fa fa-undo" aria-hidden="true"></i> - {__.cancel} - </a> - <button type={form.creation || form.model.isClosed ? "button" : "submit"} if={form.step > 0} - class="c-button c-button--ghost-info" - onclick={previousStep}> - <i class="fa fa-chevron-left" aria-hidden="true"></i> - {__.previous} - </button> - </div> - <div class="actions-right"> - <button if={form.step < form.steps.length - 1} - type="submit" - class="c-button c-button--info" - onclick={nextStep}> - {__.next} - <i class="fa fa-chevron-right " aria-hidden="true"></i> - </button> + <a class="c-button c-button--ghost" + href={form.creation ? "#/home" : ("#/poll/" + form.model.id + "/vote/" + form.model.permission)}> + <i class="fa fa-undo" aria-hidden="true"></i> + {__.cancel} + </a> + <button type={form.creation || form.model.isClosed ? "button" : "submit"} if={form.step > 0} + class="c-button c-button--ghost" + onclick={previousStep}> + <i class="fa fa-chevron-left" aria-hidden="true"></i> + {__.previous} + </button> + <button if={form.step < form.steps.length - 1} + type="submit" + class="c-button c-button--ghost-info" + onclick={nextStep}> + {__.next} + <i class="fa fa-chevron-right " aria-hidden="true"></i> + </button> - <button type="submit" - if={!form.creation || form.step === form.steps.length - 1} - class="c-button c-button--info" - show={!form.model.isClosed} - onclick={savePoll}> - <i class="fa fa-{form.creation ? 'plus' : 'check'}" aria-hidden="true"></i> - {__.save} - </button> + <button type="submit" + if={!form.creation || form.step === form.steps.length - 1} + class="c-button c-button--info" + show={!form.model.isClosed} + onclick={savePoll}> + <i class="fa fa-{form.creation ? 'plus' : 'check'}" aria-hidden="true"></i> + {__.save} + </button> </div> </div> </div> @@ -130,6 +135,7 @@ require("../components/HumanInput.tag.html"); this.tags.voters.submit(); } if (this.callAfterSubmit) { + console.log("callAfterSubmit"); this.callAfterSubmit(); this.update(); } @@ -148,7 +154,7 @@ require("../components/HumanInput.tag.html"); if (this.form.creation) { this.form.create().then(() => { let route = require("riot-route"); - route("poll/" + this.form.model.id + "/summary/" + this.form.model.permission + "/creation"); + route("poll/" + this.form.model.id + "/summary/" + this.form.model.permission); this.bus.trigger("successMessage", this._l("creationSuccess", this.form.model.title)); }, errorFn); @@ -173,4 +179,18 @@ require("../components/HumanInput.tag.html"); </script> + <style> + + .form { + padding: 30px 20px 60px 20px; + } + + .actions { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + } + </style> + </EditPoll> diff --git a/pollen-ui-riot-js/src/main/web/tag/poll/Poll.tag.html b/pollen-ui-riot-js/src/main/web/tag/poll/Poll.tag.html index 8017a2f3..64eed951 100644 --- a/pollen-ui-riot-js/src/main/web/tag/poll/Poll.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/poll/Poll.tag.html @@ -7,94 +7,111 @@ require("../popup/QrCodeButton.tag.html"); require("./Report.tag.html"); <Poll> - <div class="tabs"> - <div class={tab : true, selected : selectedTab === "votes"}> - <a href="#poll/{poll.id}/vote{poll.getPermission()?'/' + poll.getPermission() : ''}"> - <i class="fa fa-thumbs-o-up fa-flip-horizontal fa-15x"></i> {__.votes} ({poll.voteCount}) - </a> - </div> - <div class={tab : true, selected : selectedTab === "results"}> - <a href="#poll/{poll.id}/result{poll.getPermission()?'/' + poll.getPermission() : ''}"> - <i class="fa fa-trophy fa-15x"></i> {__.results} - </a> - </div> - - <div if="{poll.permission}" - class="poll-options dropdown"> - <a class="header-link"><i class="fa fa-bars"/></a> - <div class="dropdown-content"> - <a href="#/poll/{poll.id}/edit/{poll.permission}"> - <i class="link fa fa-pencil-square-o"/> - {__.editPoll} - </a> - <a if="{!poll.isClosed}" onclick="{closePoll}"> - <i class="link fa fa-close"/> - {__.closePoll}</a> - <a if="{poll.isClosed}" onclick="{reopenPoll}"> - <i class="link fa fa-play"/> - {__.reopenPoll}</a> - <a href="#/poll/{poll.id}/clone/{poll.permission}"> - <i class="link fa fa-clone"/> - {__.clonePoll} - </a> - <a onclick="{deletePoll}"> - <i class="link fa fa-trash"/> - {__.deletePoll} - </a> - </div> - </div> - </div> - <div class="container"> - <div class="poll-info"> - <h1> - <QrCodeButton if={poll.pollType === "FREE"} value="{window.location.origin}{window.location.pathname}#poll/{poll.id}/vote"/> - {poll.title} - <Report target={poll}/> - <a href="{session.configuration.endPoint}/v1/polls/{poll.id}/feed?permission={poll.permission}" class="fa fa-rss-square" aria-hidden="true"></a> - </h1> - - <h3>{poll.description}</h3> - - <div> - {__.createdBy} {poll.creatorName} {__.createdIn} {formatDate(poll.createDate)} + <h1 class="no-border"> + <span class="title">{poll.title}</span> + <QrCodeButton if="{poll.pollType === 'FREE'}" value="{window.location.origin}{window.location.pathname}#poll/{poll.id}/vote"/> + <a href="{session.configuration.endPoint}/v1/polls/{poll.id}/feed?permission={poll.permission}" class="c-button c-button--info"> + <i class="fa fa-rss" aria-hidden="true"></i> + </a> + <Report target={poll}/> + </h1> + + <div class="tabs below-h1"> + <div class="tab-container"> + <div class="tab {selected : selectedTab === 'votes'}"> + <a href="#poll/{poll.id}/vote{poll.getPermission()?'/' + poll.getPermission() : ''}"> + <i class="fa fa-thumbs-o-up fa-flip-horizontal fa-15x"></i> {__.votes} ({poll.voteCount}) + </a> + </div> + <div class="tab {selected : selectedTab === 'results'}"> + <a href="#poll/{poll.id}/result{poll.getPermission()?'/' + poll.getPermission() : ''}"> + <i class="fa fa-trophy fa-15x"></i> {__.results} + </a> + </div> </div> - <div if={poll.status === "CREATED" && poll.choiceAddAllowed}> - {__.beginChoiceFrom} {formatDate(poll.beginChoiceDate)} - </div> - <div if={poll.status === "CREATED"}> - {__.votingFrom} {formatDate(poll.beginDate)} - <span if={poll.endDate}> {__votingFromTo} {formatDate(poll.endDate)}</span> + <div if="{poll.permission}" + class="poll-options dropdown"> + <a class="header-link"><i class="fa fa-bars"/></a> + <div class="dropdown-content"> + <a href="#/poll/{poll.id}/edit/{poll.permission}"> + <i class="link fa fa-pencil-square-o"/> + {__.editPoll} + </a> + <a if="{!poll.isClosed}" onclick="{closePoll}"> + <i class="link fa fa-close"/> + {__.closePoll}</a> + <a if="{poll.isClosed}" onclick="{reopenPoll}"> + <i class="link fa fa-play"/> + {__.reopenPoll}</a> + <a href="#/poll/{poll.id}/clone/{poll.permission}"> + <i class="link fa fa-clone"/> + {__.clonePoll} + </a> + <a onclick="{deletePoll}"> + <i class="link fa fa-trash"/> + {__.deletePoll} + </a> + </div> </div> + </div> - <div if={poll.status === "ADDING_CHOICES"}> - {__.beginChoiceTo} {formatDate(poll.endChoiceDate)} + <div class="main-content"> + <div class="poll-info"> + + <div class="left-icon"> + <i class="fa fa-clock-o"></i> + <p>{__.dateVotes}</p> + <p>{__.dateFrom} <span class="brand">{formatDate(poll.beginDate)}</span></p> + <p if={poll.endDate}> {__.dateTo} <span class="brand">{formatDate(poll.endDate)}</span></p> + </div> + + <div class="left-icon" if={poll.choiceAddAllowed}> + <i class="fa fa-check-square"></i> + <p>{__.dateAddChoices}</p> + <p>{__.dateFrom} <span class="brand">{formatDate(poll.beginChoiceDate)}</span></p> + <p if={poll.endDate}> {__.dateTo} <span class="brand">{formatDate(poll.endChoiceDate)}</span></p> + </div> + + <div class="cursor-pointer left-icon" if="{poll.voteCountingTypeValue}" onclick="{toggleHelp}"> + <i class="fa fa-cog" aria-hidden="true"></i> + <p> + {__.voteCountingType} <span class="brand">{poll.voteCountingTypeValue.name}</span> + <i class="info-label fa fa-question-circle" aria-hidden="true"></i> + </p> + </div> + + <div class="left-icon"> + <i class="fa fa-user-circle"></i> + <p>{__.createdBy} <span class="brand">{poll.creatorName}</span></p> + </div> + + <div class="left-icon"> + <i class="fa fa-envelope"></i> + <p if={poll.voteCount === 0}>{__.noVote}</p> + <p if={poll.voteCount === 1}><span class="brand">1</span> {__.vote}</p> + <p if={poll.voteCount > 1}><span class="brand">{poll.voteCount}</span> {__.votes}</p> + </div> + + <div class="left-icon" if="{poll.pollType === 'RESTRICTED'}"> + <i class="fa fa-users"></i> + <p><span class="brand">{poll.participantCount}</span> {__.subscribers}</p> + <p><span class="brand">{((poll.voteCount / poll.participantCount) * 100).toFixed(2)} %</span> {__.participation}</p> + </div> </div> - <div class="cursor-pointer" if="{poll.voteCountingTypeValue}" onclick="{toggleHelp}"> - {__.voteCountingType} {poll.voteCountingTypeValue.name} - <span class="info-label"> - <i class="fa fa-question-circle" aria-hidden="true"></i> - </span> + <div class="poll-description left-icon" if="{poll.description}"> + <i class="fa fa-info-circle"></i> + <p>{poll.description}</p> </div> - <div if={poll.status === "VOTING" || poll.status === "CLOSED"}> - <span if={poll.voteCount === 0}>{__.noVote}</span> - <span if={poll.voteCount === 1}>1 {__.vote}</span> - <span if={poll.voteCount > 1}>{poll.voteCount} {__.votes}</span> - <span if={poll.pollType === "RESTRICTED"}> - - {poll.participantCount} {__.subscribers} - - {((poll.voteCount / poll.participantCount) * 100).toFixed(2)} % {__.participation}</span> - <span if={poll.status === "VOTING" && poll.endDate}> {__.votingTo} {formatDate(poll.endDate)}</span> - <span if={poll.status === "CLOSED" && poll.endDate}> {__.closedFrom} {formatDate(poll.endDate)}</span> - </div> - </div> + <Votes if={selectedTab === "votes"}/> - <Votes if={selectedTab === "votes"}/> + <Results if={selectedTab === "results"}/> - <Results if={selectedTab === "results"}/> + </div> <Comments/> </div> @@ -167,10 +184,6 @@ require("./Report.tag.html"); </script> <style> - .poll-info { - text-align: center; - } - /* The container <div> - needed to position the dropdown content */ .dropdown { position: relative; @@ -201,21 +214,53 @@ require("./Report.tag.html"); z-index: 1; } - .container { - padding-bottom: 1.2em; + .info-label { + vertical-align: text-top; } - .poll-urls .o-form-element { - padding: 0.3em 0; + h1 { + display: flex; } - .info-label { - vertical-align: text-top; + h1 .title { + flex-grow: 1; } - h1 QrCodeButton { + h1 .c-button { font-size: 1rem; - font-weight: normal; + margin: 0 2px; + } + + .main-content { + padding: 20px 20px 40px 20px; + } + + .poll-info { + display: flex; + flex-direction: row; + flex-wrap: wrap; + color: var(--poll-info); + } + + .poll-info > div { + padding: 15px 30px; + } + + .poll-info p { + margin-bottom: 5px; + } + + .poll-description { + padding: 10px 30px; + color: var(--poll-info); + } + + .left-icon > i { + float: left; + } + + .left-icon p { + margin-left: 20px; } </style> 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 9a4c60db..9cb22265 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 @@ -4,7 +4,7 @@ require("../components/HumanInput.tag.html"); <Polls> <div class="container" > <div show="{loaded}"> - <h1 class="c-heading">{__[opts.method]}</h1> + <h1>{__[opts.method]}</h1> <div show={polls.length > 0} > <div class="o-form-element sort"> diff --git a/pollen-ui-riot-js/src/main/web/tag/poll/Settings.tag.html b/pollen-ui-riot-js/src/main/web/tag/poll/Settings.tag.html index 2b44bdef..cb9051b0 100644 --- a/pollen-ui-riot-js/src/main/web/tag/poll/Settings.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/poll/Settings.tag.html @@ -21,73 +21,75 @@ require("../components/date-time-picker.tag.html"); <Settings> - <div class="form-section" - show={form.creation}> - <div class="section-title"> - <h4>{__.basic_usage}</h4> + <div class="form-section" show={form.creation}> + <h4><i class="fa fa-cogs"></i> {__.basic_usage}</h4> + <div class="o-form-element"> + <label class="c-toggle c-toggle--info"> + {__.use_basic_usage} + <input type="checkbox" + checked={!showOptions} + onclick={toggleShowOptions} + disabled={opts.form.model.isClosed}> + <div class="c-toggle__track"> + <div class="c-toggle__handle"></div> + </div> + </label> </div> - <div class="section-content"> - <div class="o-form-element"> - <label class="c-toggle c-toggle--info"> - {__.use_basic_usage} - <input type="checkbox" - checked={!showOptions} - onclick={toggleShowOptions} - disabled={opts.form.model.isClosed}> - <div class="c-toggle__track"> - <div class="c-toggle__handle"></div> - </div> - </label> - </div> - <div class="c-alert c-alert--info" if={!showOptions}> - {__.basic_usage_detail} - <ul> - <li>{__.basic_usage_detail_type}</li> - <li>{__.basic_usage_detail_multi_choices}</li> - <li>{__.basic_usage_detail_opening}</li> - <li>{__.basic_usage_detail_closing}</li> - <li>{__.basic_usage_detail_comments}</li> - <li>{__.basic_usage_detail_results}</li> - <li>{__.basic_usage_detail_notifications}</li> - </ul> - </div> + <div class="c-alert c-alert--info" if={!showOptions}> + {__.basic_usage_detail} + <ul> + <li>{__.basic_usage_detail_type}</li> + <li>{__.basic_usage_detail_multi_choices}</li> + <li>{__.basic_usage_detail_opening}</li> + <li>{__.basic_usage_detail_closing}</li> + <li>{__.basic_usage_detail_comments}</li> + <li>{__.basic_usage_detail_results}</li> + <li>{__.basic_usage_detail_notifications}</li> + </ul> </div> </div> - <div show={showOptions || !form.creation}> - <hr> - <div class="form-section"> - <div class="section-title"> - <h4>{__.nav_voteCountingType}</h4> - </div> - <div class="section-content"> - <div class="o-form-element"> - <label class="c-label"> - {__.voteCountingType} - </label> - <select class="c-field" - ref="voteCountingType" - value={form.model.voteCountingType} - disabled={form.hasVotes || opts.form.model.isClosed} - onchange={voteCountingTypeChanged}> - <option each={type in form.voteCountingTypes} - value={type.id}> - {type.name} - </option> - </select> - <p> - <i class="fa fa-question-circle" aria-hidden="true"></i> - <span ref="voteCountingTypeHelper"></span> - </p> - </div> - </div> - </div> - <hr> - <div class="form-section"> - <div class="section-title"> - <h4>{__.nav_choices}</h4> + <div class="settings-options {with-default: form.creation}" show={showOptions || !form.creation}> + + <div class="settings-options-row"> + <div class="form-section"> + <h4><i class="fa fa-cog"></i> {__.nav_voteCountingType}</h4> + <div class="o-form-element select-or-radio"> + <fieldset class="o-fieldset choice-radio" + disabled={form.hasVotes || opts.form.model.isClosed}> + <legend class="o-fieldset__legend">{__.voteCountingType}</legend> + <label each={type in form.voteCountingTypes} + class="c-field c-field--choice" + title="{type.shortHelper}"> + <input type="radio" + name="voteCountingTypeRadios" + ref="voteCountingType{type.id}" + checked="{type && type.id.toString() === form.model.voteCountingType}" + onchange={voteCountingTypeChanged}/> + <span>{type.name}</span> + </label> + </fieldset> + + <select class="c-field choice-select" + ref="voteCountingType" + value={form.model.voteCountingType} + disabled={form.hasVotes || opts.form.model.isClosed} + onchange={voteCountingTypeChanged}> + <option each={type in form.voteCountingTypes} + value={type.id} + title="{type.shortHelper}"> + {type.name} + </option> + </select> + + <div class="help-selected"> + <i class="fa fa-info-circle" aria-hidden="true"></i> + <span ref="voteCountingTypeHelper"></span> + </div> + </div> </div> - <div class="section-content"> - <div class="o-form-element"> + <div class="form-section"> + <h4><i class="fa fa-check-square"></i> {__.nav_choices}</h4> + <div class="o-form-element"> <label class="c-toggle c-toggle--info"> {__.addChoices} <input type="checkbox" @@ -146,7 +148,7 @@ require("../components/date-time-picker.tag.html"); <input name="maxChoiceNumber" id="maxChoiceNumber" ref="maxChoiceNumber" - class="c-field" + class="c-field c-field--label" disabled={form.hasVotes || opts.form.model.isClosed} value={form.model.maxChoiceNumber} min="{form.model.limitChoices ? 1 : 0}" max="{form.choices.length}" @@ -154,12 +156,10 @@ require("../components/date-time-picker.tag.html"); </div> </div> </div> - <hr> - <div class="form-section"> - <div class="section-title"> - <h4>{__.nav_votes}</h4> - </div> - <div class="section-content"> + + <div class="settings-options-row"> + <div class="form-section"> + <h4><i class="fa fa-envelope"></i> {__.nav_votes}</h4> <div class="o-form-element"> <label class="c-toggle c-toggle--info"> {__.votePeriod} @@ -203,7 +203,7 @@ require("../components/date-time-picker.tag.html"); <label class="c-label"> {__.voteVisibility} </label> - <select class="c-field" + <select class="c-field c-field--label" ref="voteVisibility" disabled={form.hasVotes || opts.form.model.isClosed} value={form.model.voteVisibility}> @@ -229,18 +229,13 @@ require("../components/date-time-picker.tag.html"); </label> </div> </div> - </div> - <hr> - <div class="form-section"> - <div class="section-title"> - <h4>{__.nav_result}</h4> - </div> - <div class="section-content"> + <div class="form-section"> + <h4><i class="fa fa-trophy"></i> {__.nav_result}</h4> <div class="o-form-element"> <label class="c-label"> {__.resultVisibility} </label> - <select class="c-field" + <select class="c-field c-field--label" ref="resultVisibility" disabled={form.hasVotes || opts.form.model.isClosed} value={form.model.resultVisibility}> @@ -266,17 +261,15 @@ require("../components/date-time-picker.tag.html"); </div> </div> </div> - <hr> - <div class="form-section"> - <div class="section-title"> - <h4>{__.nav_comments}</h4> - </div> - <div class="section-content"> + + <div class="settings-options-row"> + <div class="form-section"> + <h4><i class="fa fa-comments"></i> {__.nav_comments}</h4> <div class="o-form-element"> <label class="c-label"> {__.commentVisibility} </label> - <select class="c-field" + <select class="c-field c-field--label" ref="commentVisibility" disabled={form.hasVotes || opts.form.model.isClosed} value={form.model.commentVisibility}> @@ -286,50 +279,48 @@ require("../components/date-time-picker.tag.html"); </select> </div> </div> - </div> - <hr> - <div class="form-section"> - <div class="section-title"> - <h4>{__.nav_notification}</h4> - </div> - <div class="section-content"> - <div class="o-form-element"> - <label class="c-toggle c-toggle--info"> - {__.voteNotification} - <input type="checkbox" - ref="voteNotification" - checked={form.model.voteNotification} - disabled={!form.model.creatorEmail || opts.form.model.isClosed}> - <div class="c-toggle__track"> - <div class="c-toggle__handle"></div> - </div> - </label> - </div> - <div class="o-form-element"> - <label class="c-toggle c-toggle--info"> - {__.notifyMeBeforePollEnds} - <input type="checkbox" - checked={notifyMeBeforePollEnds} - onclick={toggleNotifyMeBeforePollEnds} - disabled={disableNotifyMeBeforePollEnds || opts.form.model.isClosed}> - <div class="c-toggle__track"> - <div class="c-toggle__handle"></div> - </div> - </label> - <div if={notifyMeBeforePollEnds}> - <label class="c-label"> - {__.notifyMeHoursBeforePollEnds} - </label> - <input type="number" - class="c-field" - ref="notifyMeHoursBeforePollEnds" - value={form.model.notifyMeHoursBeforePollEnds} - min="{notifyMeBeforePollEnds ? 1 : 0}" - disabled={opts.form.model.isClosed}> + + <div class="form-section"> + <h4><i class="fa fa-paper-plane"></i> {__.nav_notification}</h4> + <div class="o-form-element"> + <label class="c-toggle c-toggle--info"> + {__.voteNotification} + <input type="checkbox" + ref="voteNotification" + checked={form.model.voteNotification} + disabled={!form.model.creatorEmail || opts.form.model.isClosed}> + <div class="c-toggle__track"> + <div class="c-toggle__handle"></div> + </div> + <i class="fa fa-question-circle cursor-help warning" if="{!form.model.creatorEmail}" title="{__.voteNotification_disabled}"></i> + </label> + </div> + <div class="o-form-element"> + <label class="c-toggle c-toggle--info"> + {__.notifyMeBeforePollEnds} + <input type="checkbox" + checked={notifyMeBeforePollEnds} + onclick={toggleNotifyMeBeforePollEnds} + disabled={disableNotifyMeBeforePollEnds || opts.form.model.isClosed}> + <div class="c-toggle__track"> + <div class="c-toggle__handle"></div> + </div> + <i class="fa fa-question-circle cursor-help warning" if="{disableNotifyMeBeforePollEnds}" title="{__.notifyMeBeforePollEnds_disabled}"></i> + </label> + <div if={notifyMeBeforePollEnds}> + <label class="c-label"> + {__.notifyMeHoursBeforePollEnds} + </label> + <input type="number" + class="c-field c-field--label" + ref="notifyMeHoursBeforePollEnds" + value={form.model.notifyMeHoursBeforePollEnds} + min="{notifyMeBeforePollEnds ? 1 : 0}" + disabled={opts.form.model.isClosed}> + </div> + </div> </div> - </div> </div> - </div> </div> <script type="es6"> @@ -350,6 +341,7 @@ require("../components/date-time-picker.tag.html"); this.disableNotifyMeBeforePollEnds = !this.form.model.creatorEmail || !this.form.model.votePeriod || !this.form.model.endDate; this.on("mount", () => { + this.refs["voteCountingType" + this.form.model.voteCountingType].checked = true; this.refs.voteCountingType.value = this.form.model.voteCountingType; if (!this.form.model.creatorEmail) { this.refs.voteNotification.value = "NEVER"; @@ -359,6 +351,15 @@ require("../components/date-time-picker.tag.html"); this.updateVoteCountingTypeHelp = () => { this.refs.voteCountingTypeHelper.innerHTML = this.voteCountingTypes.get(this.form.model.voteCountingType.toString()).helper; + this.update(); + }; + + this.updateHelpHover = (helper) => () => { + this.refs.voteCountingTypeHelpHover.innerHTML = helper; + }; + + this.clearHelpHover = () => { + this.refs.voteCountingTypeHelpHover.innerHTML = ""; }; this.updateDisableNotifyMeBeforePollEnds = () => { @@ -404,7 +405,11 @@ require("../components/date-time-picker.tag.html"); }; this.voteCountingTypeChanged = e => { - this.form.model.voteCountingType = e.target.value; + if (e.item) { + this.form.model.voteCountingType = e.item.type.id.toString(); + } else { + this.form.model.voteCountingType = e.target.value; + } this.canLimitNumberOfChoices = this.voteCountingTypes.get(this.form.model.voteCountingType).canLimitNumberOfChoices; this.form.model.limitChoices &= this.canLimitNumberOfChoices; this.updateVoteCountingTypeHelp(); @@ -428,8 +433,6 @@ require("../components/date-time-picker.tag.html"); this.form.model.endChoiceDate = this.refs.addChoices.checked ? this.refs.endChoiceDate.getValue() : undefined; this.form.model.maxChoiceNumber = this.refs.limitChoices.checked ? this.refs.maxChoiceNumber.value : undefined; - this.form.model.voteCountingType = this.refs.voteCountingType.value; - this.form.model.beginDate = this.refs.votePeriod.checked ? this.refs.beginDate.getValue() : undefined; this.form.model.voteVisibility = this.refs.voteVisibility.value; this.form.model.anonymousVoteAllowed = this.refs.anonymousVote.checked; @@ -453,42 +456,71 @@ require("../components/date-time-picker.tag.html"); </script> <style> - .config-period { - display: flex; + ul { + padding-left: 40px; } - .config-period .o-form-element { - flex-grow: 1; + h4 { + margin-bottom: 0.5em; } - .config-period .o-form-element:first-child { - margin-right: 3px; + .settings-options.with-default { + border-radius: 4px; + box-shadow: 0 0 1px hsla(0,0%,7%,.6); + padding: 0.1em 1.5em; + margin-bottom: 1em; } - .form-section { + .settings-options-row { display: flex; - flex-wrap: wrap; + flex-direction: column; } - .form-section .section-title { - width : 25%; - padding: 1em 0; + @media (min-width: 640px) { + .settings-options-row { + flex-direction: row; + } + + .settings-options-row .form-section { + flex-basis: 50%; + padding: 0 2em; + } + + .settings-options-row .form-section:first-child { + padding-left: 0; + } + + .settings-options-row .form-section:last-child { + padding-right: 0; + } } - .form-section .section-content { - width : 75%; + + .o-form-element { + margin: 0.5em 0; + padding: 0.5em 0; + } + + .settings-options .form-section { + margin: 1.5em 0; + } + + .select-or-radio .choice-select { + display: none; + } + + .choice-radio label { + cursor: help; } @media (max-width: 640px) { - .form-section .section-title { - width : 100%; + .select-or-radio .choice-radio { + display: none; } - .form-section .section-content { - width : 100%; + + .select-or-radio .choice-select { + display: inline; } - } - ul { - padding-left: 40px; } </style> diff --git a/pollen-ui-riot-js/src/main/web/tag/poll/Summary.tag.html b/pollen-ui-riot-js/src/main/web/tag/poll/Summary.tag.html index 6e79a749..7f246767 100644 --- a/pollen-ui-riot-js/src/main/web/tag/poll/Summary.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/poll/Summary.tag.html @@ -4,73 +4,69 @@ require("../popup/QrCodeButton.tag.html"); <Summary> - <div class="container"> + <div if={successMessage} class="c-alert c-alert--success">{successMessage}</div> - <div if={successMessage} class="c-alert c-alert--success">{successMessage}</div> + <div class="summary-part"> + <h2> + {opts.form.model.title} + </h2> - <div class="poll-info"> - <h2> - {opts.form.model.title} - </h2> + <p><em>{opts.form.model.description}</em></p> - <p><em>{opts.form.model.description}</em></p> - - <div if="{opts.form.model.voteCountingTypeValue}"> - {__.voteCountingType} : - <strong>{opts.form.model.voteCountingTypeValue.name}</strong> (<em>{opts.form.model.voteCountingTypeValue.helper}</em>) - </div> + <div if="{opts.form.model.voteCountingTypeValue}"> + {__.voteCountingType} : + <strong>{opts.form.model.voteCountingTypeValue.name}</strong> (<em>{opts.form.model.voteCountingTypeValue.helper}</em>) </div> + </div> - <div> - <h3>{__.choices}</h3> - <div each={choice, index in opts.form.choices} class="{odd-row: index % 2 > 0}"> - <ChoiceView choice={choice} showdescription="true"/> - </div> + <div class="summary-part"> + <h3>{__.choices}</h3> + <div each={choice, index in opts.form.choices} class="{odd-row: index % 2 > 0}"> + <ChoiceView choice={choice} showdescription="true"/> </div> + </div> + <div class="summary-part"> + <h3>{__.dates}</h3> + <div if={opts.form.model.choiceAddAllowed}> + {__.addingChoices} + <span if={opts.form.model.beginChoiceDate}>{__.fromDate} <strong>{formatDate(opts.form.model.beginChoiceDate)}</strong></span> + <span if={opts.form.model.endChoiceDate}> {__.toDate} <strong>{formatDate(opts.form.model.endChoiceDate)}</strong></span> + </div> <div> - <h3>{__.dates}</h3> - <div if={opts.form.model.choiceAddAllowed}> - {__.addingChoices} - <span if={opts.form.model.beginChoiceDate}>{__.fromDate} <strong>{formatDate(opts.form.model.beginChoiceDate)}</strong></span> - <span if={opts.form.model.endChoiceDate}> {__.toDate} <strong>{formatDate(opts.form.model.endChoiceDate)}</strong></span> - </div> - <div> - {__.voting} - {__.fromDate} <strong>{formatDate(opts.form.model.beginDate)}</strong> - <span if={opts.form.model.endDate}> {__.toDate} <strong>{formatDate(opts.form.model.endDate)}</strong></span> - </div> + {__.voting} + {__.fromDate} <strong>{formatDate(opts.form.model.beginDate)}</strong> + <span if={opts.form.model.endDate}> {__.toDate} <strong>{formatDate(opts.form.model.endDate)}</strong></span> </div> + </div> - <div if={opts.form.model.pollType === "FREE"}> - <h3>{__.sharing}</h3> - <div if={opts.form.model.participants && opts.form.model.participants.length > 0}> - {__.invitations} <strong>{opts.form.model.participants.length}</strong> - </div> - <div> - <QrCodeButton value="{voteUrl}" title="{__.shareByQR}"/> - <a href="mailto:?subject={opts.form.model.title}&body={opts.form.model.title}%0D%0A{opts.form.model.description}%0D%0A{voteUrl}" - title="{__.shareByEmail}" - class="c-button c-button--info"> - <i class="fa fa-paper-plane"></i> - </a> - </div> + <div if={opts.form.model.pollType === "FREE"} class="summary-part"> + <h3>{__.sharing}</h3> + <div if={opts.form.model.participants && opts.form.model.participants.length > 0}> + {__.invitations} <strong>{opts.form.model.participants.length}</strong> </div> - - <div if={opts.form.model.pollType === "RESTRICTED"}> - <h3>{__.members}</h3> - <div> - <strong>{opts.form.model.participantCount}</strong> {__.membersNb} - </div> + <div> + <QrCodeButton value="{voteUrl}" title="{__.shareByQR}"/> + <a href="mailto:?subject={opts.form.model.title}&body={opts.form.model.title}%0D%0A{opts.form.model.description}%0D%0A{voteUrl}" + title="{__.shareByEmail}" + class="c-button c-button--info"> + <i class="fa fa-paper-plane"></i> + </a> </div> + </div> + <div if={opts.form.model.pollType === "RESTRICTED"} class="summary-part"> + <h3>{__.members}</h3> <div> - <a if={opts.form.model.pollType === "FREE"} - href="{window.location.origin}{window.location.pathname}#poll/{opts.form.model.id}/vote" class="c-button c-button--info">{__.vote}</a> - <a href="{window.location.origin}{window.location.pathname}#poll/{opts.form.model.id}/vote/{opts.form.model.permission}" - class="c-button c-button--info">{__.administrate}</a> + <strong>{opts.form.model.participantCount}</strong> {__.membersNb} </div> + </div> + <div class="summary-part"> + <a if={opts.form.model.pollType === "FREE"} + href="{window.location.origin}{window.location.pathname}#poll/{opts.form.model.id}/vote" class="c-button c-button--info">{__.vote}</a> + <a href="{window.location.origin}{window.location.pathname}#poll/{opts.form.model.id}/vote/{opts.form.model.permission}" + class="c-button c-button--info">{__.administrate}</a> </div> <script type="es6"> @@ -96,7 +92,7 @@ require("../popup/QrCodeButton.tag.html"); <style> - .container > div { + .summary-part { margin-bottom: 20px; line-height: 25px; } -- To stop receiving notification emails like this one, please contact chorem.org SCM administrator <admin+scm@chorem.org>.