branch develop updated (2fd99578 -> b64f15ba)
This is an automated email from the git hooks/post-receive script. New change to branch develop in repository pollen. See https://gitlab.nuiton.org/chorem/pollen.git from 2fd99578 Ajout des mails manquants new b64f15ba personnalisation de l'UI (fix #59) 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 b64f15baa29c2525c98bb28338942761e0096c0b Author: Sylvain Bavencoff <bavencoff@codelutin.com> Date: Wed Jun 7 16:14:27 2017 +0200 personnalisation de l'UI (fix #59) Summary of changes: pollen-ui-riot-js/package.json | 7 +- pollen-ui-riot-js/src/main/web/css/custom.css | 59 + pollen-ui-riot-js/src/main/web/css/main.css | 1301 +++++++++++++++++++- pollen-ui-riot-js/src/main/web/index.html | 3 +- pollen-ui-riot-js/src/main/web/tag/Pollen.tag.html | 27 +- .../src/main/web/tag/PollenErrorManager.tag.html | 17 +- .../src/main/web/tag/PollenFooter.tag.html | 7 - .../src/main/web/tag/PollenHeader.tag.html | 37 +- .../src/main/web/tag/PollenWaiter.tag.html | 5 +- pollen-ui-riot-js/src/main/web/tag/SignIn.tag.html | 3 +- .../src/main/web/tag/UserCard.tag.html | 12 +- .../main/web/tag/components/date-picker.tag.html | 4 +- .../web/tag/components/date-time-picker.tag.html | 2 +- .../main/web/tag/components/time-picker.tag.html | 91 +- .../web/tag/favoriteList/ChildListCard.tag.html | 12 +- .../web/tag/favoriteList/FavoriteList.tag.html | 3 - .../web/tag/favoriteList/FavoriteListCard.tag.html | 12 +- .../main/web/tag/favoriteList/MemberCard.tag.html | 12 +- .../src/main/web/tag/poll/Choice.tag.html | 12 +- .../src/main/web/tag/poll/ChoiceDate.tag.html | 2 +- .../src/main/web/tag/poll/ChoiceView.tag.html | 21 +- .../src/main/web/tag/poll/CommentPopup.tag.html | 192 --- .../src/main/web/tag/poll/Comments.tag.html | 1 - .../src/main/web/tag/poll/Created.tag.html | 64 - .../src/main/web/tag/poll/EditPoll.tag.html | 62 +- .../src/main/web/tag/poll/Podium.tag.html | 18 +- .../src/main/web/tag/poll/Poll.tag.html | 73 +- .../src/main/web/tag/poll/PollCard.tag.html | 104 +- .../src/main/web/tag/poll/Polls.tag.html | 113 +- .../src/main/web/tag/poll/Results.tag.html | 9 +- .../src/main/web/tag/poll/Votes.tag.html | 37 +- .../main/web/tag/popup/InformationPopup.tag.html | 6 +- .../src/main/web/tag/voterList/VoterList.tag.html | 17 +- .../web/tag/voterList/VoterListActions.tag.html | 1 - pollen-ui-riot-js/webpack.config.js | 12 +- 35 files changed, 1543 insertions(+), 815 deletions(-) create mode 100644 pollen-ui-riot-js/src/main/web/css/custom.css delete mode 100644 pollen-ui-riot-js/src/main/web/tag/poll/CommentPopup.tag.html delete mode 100644 pollen-ui-riot-js/src/main/web/tag/poll/Created.tag.html -- 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 b64f15baa29c2525c98bb28338942761e0096c0b Author: Sylvain Bavencoff <bavencoff@codelutin.com> Date: Wed Jun 7 16:14:27 2017 +0200 personnalisation de l'UI (fix #59) --- pollen-ui-riot-js/package.json | 7 +- pollen-ui-riot-js/src/main/web/css/custom.css | 59 + pollen-ui-riot-js/src/main/web/css/main.css | 1301 +++++++++++++++++++- pollen-ui-riot-js/src/main/web/index.html | 3 +- pollen-ui-riot-js/src/main/web/tag/Pollen.tag.html | 27 +- .../src/main/web/tag/PollenErrorManager.tag.html | 17 +- .../src/main/web/tag/PollenFooter.tag.html | 7 - .../src/main/web/tag/PollenHeader.tag.html | 37 +- .../src/main/web/tag/PollenWaiter.tag.html | 5 +- pollen-ui-riot-js/src/main/web/tag/SignIn.tag.html | 3 +- .../src/main/web/tag/UserCard.tag.html | 12 +- .../main/web/tag/components/date-picker.tag.html | 4 +- .../web/tag/components/date-time-picker.tag.html | 2 +- .../main/web/tag/components/time-picker.tag.html | 91 +- .../web/tag/favoriteList/ChildListCard.tag.html | 12 +- .../web/tag/favoriteList/FavoriteList.tag.html | 3 - .../web/tag/favoriteList/FavoriteListCard.tag.html | 12 +- .../main/web/tag/favoriteList/MemberCard.tag.html | 12 +- .../src/main/web/tag/poll/Choice.tag.html | 12 +- .../src/main/web/tag/poll/ChoiceDate.tag.html | 2 +- .../src/main/web/tag/poll/ChoiceView.tag.html | 21 +- .../src/main/web/tag/poll/CommentPopup.tag.html | 192 --- .../src/main/web/tag/poll/Comments.tag.html | 1 - .../src/main/web/tag/poll/Created.tag.html | 64 - .../src/main/web/tag/poll/EditPoll.tag.html | 62 +- .../src/main/web/tag/poll/Podium.tag.html | 18 +- .../src/main/web/tag/poll/Poll.tag.html | 73 +- .../src/main/web/tag/poll/PollCard.tag.html | 104 +- .../src/main/web/tag/poll/Polls.tag.html | 113 +- .../src/main/web/tag/poll/Results.tag.html | 9 +- .../src/main/web/tag/poll/Votes.tag.html | 37 +- .../main/web/tag/popup/InformationPopup.tag.html | 6 +- .../src/main/web/tag/voterList/VoterList.tag.html | 17 +- .../web/tag/voterList/VoterListActions.tag.html | 1 - pollen-ui-riot-js/webpack.config.js | 12 +- 35 files changed, 1543 insertions(+), 815 deletions(-) diff --git a/pollen-ui-riot-js/package.json b/pollen-ui-riot-js/package.json index cc3a8c96..8fcb8ae2 100644 --- a/pollen-ui-riot-js/package.json +++ b/pollen-ui-riot-js/package.json @@ -32,17 +32,16 @@ "babel-cli": "^6.18.0", "babel-core": "^6.17.0", "babel-loader": "^6.2.5", - "copy-webpack-plugin": "^3.0.1", + "copy-webpack-plugin": "^4.0.1", "eslint": "^3.16.0", "eslint-plugin-riot": "^0.1.6", "json-loader": "^0.5.4", "loader-utils": "^0.2.6", "riot-compiler": "^3.0.5", - "webpack": "^1.13.2", - "webpack-dev-server": "^1.16.2" + "webpack": "^2.6.1", + "webpack-dev-server": "^2.4.5" }, "dependencies": { - "blaze": "^3.2.0", "font-awesome": "4.7.0", "moment": "^2.17.1", "nprogress": "^0.2.0", diff --git a/pollen-ui-riot-js/src/main/web/css/custom.css b/pollen-ui-riot-js/src/main/web/css/custom.css new file mode 100644 index 00000000..44074cc0 --- /dev/null +++ b/pollen-ui-riot-js/src/main/web/css/custom.css @@ -0,0 +1,59 @@ + +:root{ + --main: #13a2ff; + --background: #ffffff; + --default: #042d44; + + --winner: #ff9e0d; + --anonymous: #666666; + + --poll-created: grey; + --poll-adding_choices: orange; + --poll-voting: #13a2ff; + --poll-closed: #53bd41; + + --separator: #b2c7d3; + + --dropdown: #f9f9f9; + --dropdown-text: #96a8b2; + --dropdown-shadow: #00000004; + --dropdown-hover: #f1f1f1; + + --footer: black; + --footer-text: #ffffff; + --footer-text-hover: blue; + + --qrcode: #13a2ff; + + --focus: #2196f3; + --shadow: #4dabf5; + --active: #7b929e; + --btn-hover: #b0bec5; + --disabled: #e5eaec; + + --brand: #2c3e50; + --brand-active: #1c2732; + --brand-hover: #3c556e; + --info: #2196f3; + --info-active: #0c7fda; + --info-hover: #4dabf5; + --warning: #ff9800; + --warning-active: #d17d00; + --warning-hover: #ffab2e; + --success: #4caf50; + --success-active: #3e8f41; + --success-hover: #6abe6e; + --error: #f44336; + --error-active: #ef1d0d; + --error-hover: #f66c62; + + --overlay: hsla(0, 0%, 7%, 0.4); + + --toggle: #fff; + --toggle-shadow: #111; + + --code: #e5eaec; + --code-text: #111; + + --title: "Pollen"; +} 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 1c9266fe..c36f531e 100644 --- a/pollen-ui-riot-js/src/main/web/css/main.css +++ b/pollen-ui-riot-js/src/main/web/css/main.css @@ -48,7 +48,6 @@ input, textarea { } .body-wrapper { - background-color: white; width: 100%; min-height: 100%; display: flex; @@ -65,6 +64,13 @@ input, textarea { margin-bottom: 30px; } +.instance-title::before { + content: var(--title); + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; +} + .body-content { flex-grow: 1; overflow: hidden; @@ -84,16 +90,9 @@ input, textarea { } } -a.mainColorBackground, input.mainColorBackground, button.mainColorBackground { - background-color: #13a2ff; -} - -.mainColor { - color: #13a2ff; -} a { text-decoration: none; - color: #13a2ff; + color: var(--main); cursor: pointer; } @@ -155,4 +154,1286 @@ ul { .c-overlay, .o-modal { position: fixed; -} \ No newline at end of file +} + +.colors-main, +.colors-main input, +.colors-main textarea, +.colors-main select { + background-color: var(--background); + color: var(--default); +} + +.colors-main-invers, +.colors-main-invers a { + background-color: var(--main); + color: var(--background); +} + +.card { + display: block; + margin: 5px auto; + padding: 0.5em; + border-radius: 4px; + border: 1px solid var(--main); + box-shadow: 0 0 1px hsla(0,0%,7%,.6); + color: var(--main); +} + +.poll-created { + color: var(--poll-created); + border-color: var(--poll-created); +} + +.poll-adding_choices { + color: var(--poll-adding_choices); + border-color: var(--poll-adding_choices); +} + +.poll-voting { + color: var(--poll-voting); + border-color: var(--poll-voting); +} + +.poll-closed { + color: var(--poll-closed); + border-color: var(--poll-closed); +} + +.info-label { + font-size: 0.5em; + color: var(--info); +} + +/* Steps */ +.tabs { + border-bottom: 1px solid var(--separator); + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + margin: 0 auto; +} + +.tab { + margin-left: 12px; + margin-right: 12px; +} + +.tab button, +.tab a { + border: none; + font-size: 1em; + color: var(--default); + background: transparent; +} + +.tab.selected, +.tab.selected a { + color: var(--main); + border-bottom: 2px solid; +} + +@media (max-width: 640px) { + .tabs.tabs-one-small .tab { + display: none; + } + + .tabs.tabs-one-small .tab.selected { + display: block; + width: 100%; + text-align: center; + border-bottom: none; + } +} + +time-picker .next, +time-picker .prev { + border-color: var(--brand); +} + +time-picker .prev:hover, +time-picker .next:hover { + background-color: var(--brand); +} + +.dropdown-content { + background-color: var(--dropdown); + box-shadow: 0 8px 16px 0 var(--dropdown-shadow); +} + +.dropdown-content a { + background-color: var(--dropdown); + color: var(--dropdown-text); +} + +.dropdown-content a:hover { + background-color: var(--dropdown-hover); +} + +.separator-top { + border-top: 1px solid var(--separator); +} + +.separator-bottom { + border-bottom: 1px solid var(--separator); +} + +.separator-left { + border-left: 1px solid var(--separator); +} + +.separator-right { + border-right: 1px solid var(--separator); +} + +.winner { + color: var(--winner); +} + +.anonymous-voter { + color: var(--anonymous); + font-style: italic; +} + +qrcodebutton .o-modal, +qrcode { + background-color: var(--qrcode); +} + +pollenfooter, +pollenfooter a { + background-color: var(--footer); + color: var(--footer-text); +} + +pollenfooter a:hover { + color: var(--footer-text-hover); +} + +/************************************************************** +***** Reprise de blaze CSS ******************************** +***************************************************************/ +.c-button{ + border:1px solid transparent; + background-color:var(--default); + color:var(--background); + display:inline; + max-width:100%; + margin:0; + padding:.5em; + border-radius:4px; + outline:0; + font-family:inherit; + font-size:1em; + line-height:normal; + text-align:center; + text-decoration:none; + text-overflow:ellipsis; + white-space:nowrap; + cursor:pointer; + overflow:hidden; + vertical-align:middle; + -webkit-appearance:none; + -moz-appearance:none; + appearance:none; + -webkit-user-select:none; + -moz-user-select:none; + -ms-user-select:none; + user-select:none; +} + +.c-button.c-button--active { + background-color:var(--active); +} + +.c-button:not(:disabled):hover { + background-color:var(--btn-hover); +} + +.c-button:not(:disabled):focus { + border-color:var(--focus); + box-shadow:inset 0 0 0 2px var(--shadow); +} + +.c-button:not(:disabled):active { + background-color:var(--active); +} + +.c-button:disabled { + cursor:not-allowed; + opacity:.5; +} + +.c-button--close { + border:1px solid transparent; + color:inherit; + position:absolute; + right:.5em; + padding:0; + outline:0; + font-size:1.4em; + font-weight:700; + line-height:1; +} + + +.c-button--close,.c-button--close.c-button--active { + background-color:transparent; +} + +.c-button--close:not(:disabled):hover { + background-color:hsla(0,0%,9%,0); +} + +.c-button--close:not(:disabled):focus { + border-color:var(--focus); + box-shadow:inset 0 0 0 2px var(--shadow); +} + +.c-button--close:not(:disabled):active { + background-color:transparent; +} + +.c-button--block { + display:inline-block; + width:100%; +} + +.c-button--rounded { + border-radius:30em; +} + +.c-button--brand { + border:1px solid transparent; + background-color:var(--brand); + color:var(--background); +} + +.c-button--brand.c-button--active { + background-color:var(--brand-active); +} + +.c-button--brand:not(:disabled):hover { + background-color:var(--brand-hover); +} + +.c-button--brand:not(:disabled):focus { + border-color:var(--focus); + box-shadow:inset 0 0 0 2px var(--shadow); +} + +.c-button--brand:not(:disabled):active { + background-color:var(--brand-active); +} + +.c-button--info { + border:1px solid transparent; + background-color:var(--info); + color:var(--background); +} + +.c-button--info.c-button--active { + background-color:var(--info-active); +} + +.c-button--info:not(:disabled):hover { + background-color:var(--info-hover); +} + +.c-button--info:not(:disabled):focus { + border-color:var(--focus); + box-shadow:inset 0 0 0 2px var(--shadow); +} + +.c-button--info:not(:disabled):active { + background-color:var(--info-active); +} + +.c-button--warning { + border:1px solid transparent; + background-color:var(--warning); + color:var(--background); +} + +.c-button--warning.c-button--active { + background-color:var(--warning-active); +} + +.c-button--warning:not(:disabled):hover { + background-color:var(--warning-hover); +} + +.c-button--warning:not(:disabled):focus { + border-color:var(--focus); + box-shadow:inset 0 0 0 2px var(--shadow); +} + +.c-button--warning:not(:disabled):active { + background-color:var(--warning-active); +} + +.c-button--success { + border:1px solid transparent; + background-color:var(--success); + color:var(--background); +} + +.c-button--success.c-button--active { + background-color:var(--success-active); +} + +.c-button--success:not(:disabled):hover { + background-color:var(--success-hover); +} + +.c-button--success:not(:disabled):focus { + border-color:var(--focus); + box-shadow:inset 0 0 0 2px var(--shadow); +} + +.c-button--success:not(:disabled):active { + background-color:var(--success-active); +} + +.c-button--error { + border:1px solid transparent; + background-color:var(--error); + color:var(--background); +} + +.c-button--error.c-button--active { + background-color:var(--error-active); +} + +.c-button--error:not(:disabled):hover { + background-color:var(--error-hover); +} + +.c-button--error:not(:disabled):focus { + border-color:var(--focus); + box-shadow:inset 0 0 0 2px var(--shadow); +} + +.c-button--error:not(:disabled):active { + background-color:var(--error-active); +} + +.c-button--ghost { + border:1px solid var(--default); + background-color:transparent; + color:var(--default); +} + +.colors-main-invers .c-button--ghost, +.colors-main-invers .c-button--ghost-brand, +.colors-main-invers .c-button--ghost-info, +.colors-main-invers .c-button--ghost-warning, +.colors-main-invers .c-button--ghost-success, +.colors-main-invers .c-button--ghost-error { + background-color: var(--background); +} + +.c-button--ghost.c-button--active { + border-color:var(--active); + background-color:var(--active); + color:var(--background); +} + +.c-button--ghost:not(:disabled):hover { + background-color:var(--default); + color:var(--background); +} + +.c-button--ghost:not(:disabled):focus { + border-color:var(--focus); + box-shadow:inset 0 0 0 2px var(--shadow); +} + +.c-button--ghost:not(:disabled):active { + border-color:var(--active); + background-color:var(--active); + color:var(--background); +} + +.c-button--ghost-brand { + border:1px solid var(--brand); + background-color:transparent; + color:var(--brand); +} + +.c-button--ghost-brand.c-button--active { + border-color:var(--brand-active); + background-color:var(--brand-active); + color:var(--background); +} + +.c-button--ghost-brand:not(:disabled):hover { + background-color:var(--brand); + color:var(--background); +} + +.c-button--ghost-brand:not(:disabled):focus { + border-color:var(--focus); + box-shadow:inset 0 0 0 2px var(--shadow); +} + +.c-button--ghost-brand:not(:disabled):active { + border-color:var(--brand-active); + background-color:var(--brand-active); + color:var(--background); +} + +.c-button--ghost-info { + border:1px solid var(--info); + background-color:transparent; + color:var(--info); +} + +.c-button--ghost-info.c-button--active { + border-color:var(--info-active); + background-color:var(--info-active); + color:var(--background); +} + +.c-button--ghost-info:not(:disabled):hover { + background-color:var(--info); + color:var(--background); +} + +.c-button--ghost-info:not(:disabled):focus { + border-color:var(--focus); + box-shadow:inset 0 0 0 2px var(--shadow); +} + +.c-button--ghost-info:not(:disabled):active { + border-color:var(--info-active); + background-color:var(--info-active); + color:var(--background); +} + +.c-button--ghost-warning { + border:1px solid var(--warning); + background-color:transparent; + color:var(--warning); +} + +.c-button--ghost-warning.c-button--active { + border-color:var(--warning-active); + background-color:var(--warning-active); + color:var(--background); +} + +.c-button--ghost-warning:not(:disabled):hover { + background-color:var(--warning); + color:var(--background); +} + +.c-button--ghost-warning:not(:disabled):focus { + border-color:var(--focus); + box-shadow:inset 0 0 0 2px var(--shadow); +} + +.c-button--ghost-warning:not(:disabled):active { + border-color:var(--warning-active); + background-color:var(--warning-active); + color:var(--background); +} + +.c-button--ghost-success { + border:1px solid var(--success); + background-color:transparent; + color:var(--success); +} + +.c-button--ghost-success.c-button--active { + border-color:var(--success-active); + background-color:var(--success-active); + color:var(--background); +} + +.c-button--ghost-success:not(:disabled):hover { + background-color:var(--success); + color:var(--background); +} + +.c-button--ghost-success:not(:disabled):focus { + border-color:var(--focus); + box-shadow:inset 0 0 0 2px var(--shadow); +} + +.c-button--ghost-success:not(:disabled):active { + border-color:var(--success-active); + background-color:var(--success-active); + color:var(--background); +} + +.c-button--ghost-error { + border:1px solid var(--error); + background-color:transparent; + color:var(--error); +} + +.c-button--ghost-error.c-button--active { + border-color:var(--error-active); + background-color:var(--error-active); + color:var(--background); +} + +.c-button--ghost-error:not(:disabled):hover { + background-color:var(--error); + color:var(--background); +} + +.c-button--ghost-error:not(:disabled):focus { + border-color:var(--focus); + box-shadow:inset 0 0 0 2px var(--shadow); +} + +.c-button--ghost-error:not(:disabled):active { + border-color:var(--error-active); + background-color:var(--error-active); + color:var(--background); +} + +.c-button__icon-left { + padding-right:.5em; +} + +.c-button__icon-right { + padding-left:.5em; +} + +.c-input-group { + display:-ms-flexbox; + display:flex; +} + +.c-input-group .c-button { + border-radius:0; +} + +.c-input-group .c-button:not(:first-child) { + border-left-width:0; +} + +.c-input-group .c-button:first-child { + border-top-left-radius:4px; + border-bottom-left-radius:4px; +} + +.c-input-group .c-button:last-child { + border-top-right-radius:4px; + border-bottom-right-radius:4px; +} + +.c-input-group .o-field { + -ms-flex:1; + flex:1; +} + +.c-input-group .o-field .c-field { + border-radius:0; +} + +.c-input-group .o-field:not(:first-child) .c-field { + border-left-width:0; +} + +.c-input-group .o-field:first-child .c-field { + border-top-left-radius:4px; + border-bottom-left-radius:4px; +} + +.c-input-group .o-field:last-child .c-field { + border-top-right-radius:4px; + border-bottom-right-radius:4px; +} + +.c-input-group .o-field--fixed { + -ms-flex:0 1 auto; + flex:0 1 auto; +} + +.c-input-group--rounded .c-button:first-child { + border-top-left-radius:30em; + border-bottom-left-radius:30em; +} + +.c-input-group--rounded .c-button:last-child { + border-top-right-radius:30em; + border-bottom-right-radius:30em; +} + +.c-input-group--rounded .o-field:first-child .c-field { + border-top-left-radius:30em; + border-bottom-left-radius:30em; +} + +.c-input-group--rounded .o-field:last-child .c-field { + border-top-right-radius:30em; + border-bottom-right-radius:30em; +} + +.c-input-group--rounded-left .c-button:first-child,.c-input-group--rounded-left .o-field:first-child .c-field { + border-top-left-radius:30em; + border-bottom-left-radius:30em; +} + +.c-input-group--rounded-right .c-button:last-child,.c-input-group--rounded-right .o-field:last-child .c-field { + border-top-right-radius:30em; + border-bottom-right-radius:30em; +} + +.c-input-group--stacked { + display:-ms-flexbox; + display:flex; + -ms-flex-wrap:wrap; + flex-wrap:wrap; +} + +.c-input-group--stacked .c-button:not(:first-child),.c-input-group--stacked .o-field:not(:first-child) .c-field { + border-left-width:1px; +} + +.c-input-group--stacked .c-button,.c-input-group--stacked .o-field { + -ms-flex:0 0 100%; + flex:0 0 100%; + max-width:100%; + margin-left:0; +} + +.c-input-group--stacked .c-button:not(:first-child) { + border-top:0; +} + +.c-input-group--stacked .c-button:not(:first-child):not(:last-child) { + border-radius:0; +} + +.c-input-group--stacked .c-button:first-child { + border-radius:4px 4px 0 0; +} + +.c-input-group--stacked .c-button:last-child { + border-radius:0 0 4px 4px; +} + +.c-input-group--stacked .o-field:not(:first-child) .c-field { + border-top:0; +} + +.c-input-group--stacked .o-field:not(:first-child):not(:last-child) .c-field { + border-radius:0; +} + +.c-input-group--stacked .o-field:first-child .c-field { + border-radius:4px 4px 0 0; +} + +.c-input-group--stacked .o-field:last-child .c-field { + border-radius:0 0 4px 4px; +} + +.o-field { + position:relative; +} + +.o-field .c-field--success~.c-icon { + color:var(--success); +} + +.o-field .c-field--error~.c-icon { + color:var(--error); +} + +.o-field .c-field:disabled~.c-icon { + color:var(--default); +} + +.o-field .c-icon { + position:absolute;top:50%; + transform:translateY(-50%); + color:var(--default); +} + +.o-field--icon-right .c-field+.c-icon { + right:.5em; +} + +.o-field--icon-right .c-field { + padding-right:2em; +} + +.o-field--icon-left .c-icon:first-child { + left:.5em; +} + +.o-field--icon-left .c-field { + padding-left:2em; +} + +.c-label { + padding:1em 0; +} + +.c-field { + display:block; + width:100%; + margin:0; + padding:.5em; + border:1px solid var(--default); + border-radius:4px; + outline:0; + background-color:var(--background); + font-family:inherit; + font-size:1em; + font-weight:400; + resize:vertical; + -webkit-appearance:none; + -moz-appearance:none; + appearance:none; +} + +.c-field:focus { + border-color:var(--focus); + box-shadow:inset 0 0 0 2px var(--shadow); + +} + +select.c-field { + cursor:pointer; +} + +select.c-field:not([multiple]) { + padding-right:1em; + background:url("data:image/png;base64,R0lGODlhDwAUAIABAAAAAP///yH5BAEAAAEALAAAAAAPABQAAAIXjI+py+0Po5wH2HsXzmw//lHiSJZmUAAAOw==") no-repeat 99% 50%; +} + +.c-field input { + margin-right:.125em; + outline:0; + font-size:1em; +} + +.c-field--label { + margin:.5em 0 0; +} + +.c-field--error { + border-color:var(--error); + color:var(--error); +} + +.c-field--success { + border-color:var(--success); + color:inherit; +} + +.c-field--choice { + border:0; + border-radius:0; + background-color:transparent; +} + +.c-field--disabled, +.c-field:disabled { + color:var(--default); + cursor:not-allowed; + border-color:var(--default); + background-color:var(--disabled); +} + +.c-field--disabled.c-field--choice, +.c-field:disabled.c-field--choice { + background-color:transparent; +} + +.c-field input:disabled { + color:var(--default); + cursor:not-allowed; +} + +.o-form-element { + position:relative; + padding:1em 0 +} + +.o-form-element .c-label:first-child { + padding:0 0 .5em +} + +.c-toggle { + display:-ms-flexbox; + display:flex; + -ms-flex-align:center; + align-items:center; + width:auto; + cursor:pointer; + -webkit-user-select:none; + -moz-user-select:none; + -ms-user-select:none; + user-select:none; +} + +.c-toggle input:not(:checked)+.c-toggle__track { + background-color:var(--disabled); +} + +.c-toggle input:not(:checked)+.c-toggle__track .c-toggle__handle { + transform:translateZ(0); +} + +.c-toggle input:disabled+.c-toggle__track, +.c-toggle input:disabled+.c-toggle__track .c-toggle__handle { + background-color:var(--disabled); + cursor:not-allowed; +} + +.c-toggle--brand .c-toggle__track { + background-color:var(--brand); +} + +.c-toggle--info .c-toggle__track { + background-color:var(--info); +} + +.c-toggle--warning .c-toggle__track { + background-color:var(--warning); +} + +.c-toggle--success .c-toggle__track { + background-color:var(--success); +} + +.c-toggle--error .c-toggle__track { + background-color:var(--error); +} + +.c-toggle input { + display:none; +} + +.c-toggle__track { + -ms-flex:1; + flex:1; + padding-right:1em; + padding-left:1em; + -ms-flex:0 1 auto; + flex:0 1 auto; + background-color:var(--default); + position:relative; + width:1em; + height:.5em; + margin:0 .5em; + border-radius:30em; +} + +.c-toggle__handle { + position:absolute; + top:-.25em; + left:0; + width:1em; + height:1em; + transform:translateX(100%); + border-radius:30em; + background-color:var(--toggle); + box-shadow:0 1px 4px -1px var(--toggle-shadow); +} + +.o-modal { + position:absolute; + top:50%; + left:50%; + transform:translate(-50%,-50%); + display:block; + width:80%; + border:0 solid var(--default); + border-radius:4px; + background-color:var(--background); + overflow:hidden; + z-index:1; +} + +.o-modal .c-card { + background-color:transparent; + box-shadow:none; +} + +.o-modal .c-card__body { + position:relative; +} + +.c-card { + padding:0; + list-style:none; + display:block; + border-radius:4px; + background-color:var(--background); + box-shadow:0 0 1px hsla(0,0%,7%,.6); + overflow:hidden; +} + +.c-card>.o-image:not(:first-child) { + padding:1em 0 0; +} + +.c-card+.c-card { + margin:.5em 0 0; +} + +.c-card__header { + padding:.5em .5em 0; +} + +.c-card__header .c-heading { + padding:0; +} + +.c-card__body, +.c-card__footer, +.c-card__item { + padding:.5em; +} + +.c-card__item+.c-card__footer--block { + padding:0; +} + +.c-card__footer--block { + padding:.5em 0 0; +} + +.c-card__footer--block .c-input-group .c-button:first-child { + border-top-left-radius:0; + border-bottom-left-radius:0; +} + +.c-card__footer--block .c-input-group .c-button:last-child { + border-top-right-radius:0; + border-bottom-right-radius:0; +} + +.c-card__item:not(:last-child) { + border-bottom:1px solid rgba(202,212,216,.5); +} + +.c-overlay { + display:block; + position:absolute; + top:0; + right:0; + bottom:0; + left:0; + width:100%; + height:100%; + background-color: var(--overlay); + z-index:1; +} + +.c-hint { + position:absolute; + padding:0 .5em; + transform:scale(.8); + transform-origin:top left; + color:var(--active); + font-size:1em; + opacity:0; + pointer-events:none; +} + +.c-field:focus~.c-hint, +.c-hint--static, +.c-label__field:focus~.c-hint { + transform:scale(.9);opacity:1; +} + +.c-hint--success { + color:var(--success); +} + +.c-hint--error { + color:var(--error); +} + +.c-alerts { + display:block; + position:absolute; + width:250px; + max-height:100%; + background-color:transparent; + z-index:1; + overflow-y:auto +} + +.c-alert { + background-color:var(--default); + color:var(--background); + position:relative; + margin:0 0 1em; + padding:1em 3em 1em 1em; + border-radius:4px; +} + +.c-alert--brand { + background-color:var(--brand); + color:var(--background); +} + +.c-alert--info { + background-color:var(--info); + color:var(--background); +} + +.c-alert--warning { + background-color:var(--warning); + color:var(--background); +} + +.c-alert--success { + background-color:var(--success); + color:var(--background); +} + +.c-alert--error { + background-color:var(--error); + color:var(--background); +} + +.c-pagination { + display:block; + width:100%; + padding:1em; + font-size:.83em; + text-align:center; +} + +.c-pagination__controls { + display:inline-block; + text-align:center; +} + +.c-pagination__controls--backward { + float:left; + text-align:left; +} + +.c-pagination__controls--forward { + float:right; + text-align:right; +} + +.c-pagination__control,.c-pagination__page { + border:1px solid transparent; + background-color: var(--default); + color: var(--background); + display:inline; + max-width:100%; + margin:0; + padding:.5em; + border-radius:4px; + outline:0; + font-family:inherit; + font-size:1em; + line-height:normal; + text-align:center; + text-decoration:none; + text-overflow:ellipsis; + white-space:nowrap; + cursor:pointer; + overflow:hidden; + vertical-align:middle; + -webkit-appearance:none; + -moz-appearance:none; + appearance:none; + -webkit-user-select:none; + -moz-user-select:none; + -ms-user-select:none; + user-select:none; + border:1px solid var(--brand); + background-color:transparent; + color: var(--brand); + min-width:2.4em; + border-radius:30em; +} + +.c-pagination__control.c-button--active,.c-pagination__page.c-button--active { + background-color:var(--active); +} + +.c-pagination__control:not(:disabled):hover,.c-pagination__page:not(:disabled):hover { + background-color:var(--btn-hover); +} + +.c-pagination__control:not(:disabled):active,.c-pagination__page:not(:disabled):active { + background-color:var(--active); +} + +.c-pagination__control:disabled,.c-pagination__page:disabled { + cursor:not-allowed; + opacity:.5; +} + +.c-pagination__control.c-button--active,.c-pagination__page.c-button--active { + border-color: var(--brand-active); + background-color: var(--brand-active); + color: var(--background); +} + +.c-pagination__control:not(:disabled):hover,.c-pagination__page:not(:disabled):hover { + background-color: var(--brand); + color: var(--background); +} + +.c-pagination__control:not(:disabled):focus,.c-pagination__page:not(:disabled):focus { + border-color: var(--focus); + box-shadow:inset 0 0 0 2px var(--shadow); +} + +.c-pagination__control:not(:disabled):active,.c-pagination__page:not(:disabled):active { + border-color: var(--brand-active); + background-color: var(--brand-active); + color: var(--background); +} + +.c-pagination__page--current { + background-color: var(--brand); + color: var(--background); +} + +.c-pagination__ellipsis { + padding:0 1em; +} +.c-code { + margin:-.125em; + padding:.25em .25em .125em; + background-color: var(--code); + color: var(--code-text); + display:inline; + font-family:Consolas,Andale Mono WT,Andale Mono,Lucida Console,Lucida Sans Typewriter,DejaVu Sans Mono,Bitstream Vera Sans Mono,Liberation Mono,Nimbus Mono L,Monaco,Courier New,Courier,monospace; + font-weight:400; +} + +.c-code--multiline { + display:block; + padding:.5em 1em; + border-radius:4px; + white-space:pre; + overflow-x:auto; +} + +.c-calendar { + display:-ms-flexbox; + display:flex; + -ms-flex-wrap:wrap; + flex-wrap:wrap; + -ms-flex-align:center; + align-items:center; + padding-right:.001em; + padding-left:.001em; + max-width:400px; + padding:.25em; + border:1px solid #96a8b2; + border-radius:4px; + background-color:#fff; + text-align:center; + z-index:1; +} + +.c-calendar__control,.c-calendar__date { + background-color:#fff; + color:#96a8b2; + display:inline; + -ms-flex:0 0 14.28%; + flex:0 0 14.28%; + max-width:14.28%; + margin:0; + padding:1em .5em; + border:1px solid transparent; + border-radius:4px; + outline:0; + font-size:1em; + cursor:pointer; + -webkit-user-select:none; + -moz-user-select:none; + -ms-user-select:none; + user-select:none; +} + +.c-calendar__control.c-button--active,.c-calendar__date.c-button--active { + background-color:#e8e8e8; +} + +.c-calendar__control:not(:disabled):hover,.c-calendar__date:not(:disabled):hover { + background-color:#fff; +} + +.c-calendar__control:not(:disabled):focus,.c-calendar__date:not(:disabled):focus { + border-color:#2196f3; + box-shadow:inset 0 0 0 2px #4dabf5; +} + +.c-calendar__control:not(:disabled):active,.c-calendar__date:not(:disabled):active { + background-color:#e8e8e8; +} + +.c-calendar__header { + -ms-flex:1; + flex:1; + -ms-flex:0 0 70%; + flex:0 0 70%; + max-width:70%; +} + +.c-calendar__day,.c-calendar__header { + padding-right:1em; + padding-left:1em; + padding-right:.001em; + padding-left:.001em; + padding:.5em 0; +} + +.c-calendar__day { + -ms-flex:1; + flex:1; + -ms-flex:0 0 14.28%; + flex:0 0 14.28%; + max-width:14.28%; + font-weight:700; +} + +.c-calendar__date:hover { + border:1px solid #96a8b2; +} + +.c-calendar__date--in-month { + color:#111; +} + +.c-calendar__date--today { + border-color:#cad4d8; +} + +.c-calendar__date--selected,.c-calendar__date--selected:hover { + border:1px solid transparent; + background-color:#2c3e50; + color:#fff; + border-color:#2c3e50; +} + +.c-calendar__date--selected.c-button--active,.c-calendar__date--selected:hover.c-button--active { + background-color:#1c2732; +} + +.c-calendar__date--selected:hover:not(:disabled):hover,.c-calendar__date--selected:not(:disabled):hover { + background-color:#3c556e; +} + +.c-calendar__date--selected:hover:not(:disabled):focus,.c-calendar__date--selected:not(:disabled):focus { + border-color:#2196f3; + box-shadow:inset 0 0 0 2px #4dabf5; +} + +.c-calendar__date--selected:hover:not(:disabled):active,.c-calendar__date--selected:not(:disabled):active { + background-color:#1c2732; +} diff --git a/pollen-ui-riot-js/src/main/web/index.html b/pollen-ui-riot-js/src/main/web/index.html index 7bc1e49e..1b1aaa44 100644 --- a/pollen-ui-riot-js/src/main/web/index.html +++ b/pollen-ui-riot-js/src/main/web/index.html @@ -25,9 +25,8 @@ <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Pollen</title> - <link href="./css/blaze.min.css" rel="stylesheet"> <link href="./css/font-awesome.css" rel="stylesheet"> - <link href="./css/nprogress.css" rel="stylesheet"> + <link href="./css/custom.css" rel="stylesheet"> <link href="./css/main.css" rel="stylesheet"> </head> <body> 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 6dcf8e2e..cbc3da8f 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 @@ -35,8 +35,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"> - <div id="infoMessages"></div> +<Pollen class="body-wrapper colors-main"> <ConfirmPopup/> <InformationPopup/> <PollenHeader/> @@ -56,9 +55,8 @@ require("./popup/InformationPopup.tag.html"); this.installBundle(session, "main"); this.pageTitle = undefined; - this.onLocaleChange = (locale) => { + this.onLocaleChange = () => { this.updatePageTitle(); - this.showInfoMessages(locale); }; this.updatePageTitle = () => { @@ -71,22 +69,7 @@ require("./popup/InformationPopup.tag.html"); this.updatePageTitle(); }); - this.showInfoMessages = (locale) => { - var infoMessages = session.configuration.infoMessages; - if (infoMessages) { - i18nInfoMessages = infoMessages[locale]; - if (i18nInfoMessages) { - var messages = ""; - for (var index in i18nInfoMessages) { - messages += "<div class='infoMessages'>" + i18nInfoMessages[index] + "</div>"; - } - document.getElementById("infoMessages").innerHTML = messages; - } - } - }; - this.on("mount", () => { - this.showInfoMessages(session.locale); this.listen("locale", this.onLocaleChange); this.listen("unauthorize", this.refs.signIn.open); this.listen("signIn", this.refs.signIn.open); @@ -248,12 +231,6 @@ require("./popup/InformationPopup.tag.html"); position: relative; } - .infoMessages { - background: #000; - color: #ccc; - padding: 10px; - } - pollenerrormanager { position: fixed; bottom: 20px; diff --git a/pollen-ui-riot-js/src/main/web/tag/PollenErrorManager.tag.html b/pollen-ui-riot-js/src/main/web/tag/PollenErrorManager.tag.html index 97531e9e..ea29f222 100644 --- a/pollen-ui-riot-js/src/main/web/tag/PollenErrorManager.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/PollenErrorManager.tag.html @@ -1,7 +1,7 @@ <PollenErrorManager> - <div each={error in errors} class="pollen-error" id="{error.id}"> - <div class="close-error" onclick="{closeError(error.id)}"><i class="fa fa-times" aria-hidden="true"></i></div> + <div each={error in errors} class="c-alert c-alert--error pollen-error" id="{error.id}"> + <button class="c-button c-button--close" onclick={closeError(error.id)}>×</button> <span if={!Array.isArray(error.message)}> {error.message}</span> <ul if={Array.isArray(error.message)}> <li each={message in error.message}>{message}</li> @@ -55,23 +55,12 @@ <style> .pollen-error { width: 300px; - background: #ffcccc; - padding: 10px 30px 10px; - box-shadow: 5px 5px 5px 0px #9b9b9b; - border-radius: 5px; - margin: 10px; + margin-right: 20px; transform: scaleY(1); transform-origin: 50% 100%; transition: transform 0.5s; } - .close-error { - position: absolute; - top: 10px; - right: 10px; - color: #666; - cursor: pointer; - } </style> </PollenErrorManager> 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 a3990c29..93b8d385 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 @@ -40,21 +40,14 @@ .links { width: 100%; - background-color: black; text-align: center; } .links a { display: inline-block; font-size: 0.8em; - text-decoration: none; - color: white; padding: 0 20px; } - .links a:hover { - color: blue; - } - </style> </PollenFooter> 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 3e6a1403..dda1dc12 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,11 +19,11 @@ * #L% */ require("./HeaderI18n.tag.html"); -<PollenHeader> +<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" href="#home" target="_top">Pollen</a> + <a class="header-link instance-title" href="#home" target="_top"></a> </div> <div class="dropdown" if="{user && user.administrator}"> @@ -53,9 +53,9 @@ require("./HeaderI18n.tag.html"); </div> <div if="{!user}"> - <a id="loginButton" class="c-button mainColorBackground" onclick="{signIn}"> + <button type="button" class="c-button c-button--ghost-info colors-main" onclick="{signIn}"> <i class="fa fa-sign-in" aria-hidden="true" /> {__.signin} - </a> + </button> </div> <HeaderI18n/> @@ -97,19 +97,16 @@ require("./HeaderI18n.tag.html"); pollenheader { display: flex; align-items: center; - background-color: #13a2ff; - color : #ffffff; } .header-home { font-size: 1.3em; flex-grow: 1; - margin: 0 20px; - text-transform: uppercase; + min-width: 0px; } - pollenheader a { - color : #ffffff; + .header-home .header-link { + text-transform: uppercase; } .header-link { @@ -133,9 +130,7 @@ require("./HeaderI18n.tag.html"); .dropdown-content { display: none; position: absolute; - background-color: #f9f9f9; min-width: 188px; - box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2); } .dropdown-content.right { @@ -144,17 +139,11 @@ require("./HeaderI18n.tag.html"); /* Links inside the dropdown */ .dropdown-content a { - color: black; padding: 12px 16px; text-decoration: none; display: block; } - /* Change color of dropdown links on hover */ - .dropdown-content a:hover { - background-color: #f1f1f1; - } - /* Show the dropdown menu on hover */ .dropdown:hover .dropdown-content { display: block; @@ -166,17 +155,5 @@ require("./HeaderI18n.tag.html"); display: none; } } - - #loginButton { - border: 2px solid #FFF; - margin-right: 5px; - font-weight: bold; - } - - #loginButton:hover { - background-color: #FFF; - color: #13a2ff; - } - </style> </PollenHeader> diff --git a/pollen-ui-riot-js/src/main/web/tag/PollenWaiter.tag.html b/pollen-ui-riot-js/src/main/web/tag/PollenWaiter.tag.html index 4571cea2..6355ecba 100644 --- a/pollen-ui-riot-js/src/main/web/tag/PollenWaiter.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/PollenWaiter.tag.html @@ -1,7 +1,7 @@ <PollenWaiter> <script> - let NProgress = require("../../../../node_modules/nprogress/nprogress.js"); + let NProgress = require("nprogress"); NProgress.configure({ parent: "#" + this.opts.parentId}); let inProgress = new Set(); @@ -23,5 +23,8 @@ }); </script> + <style> + @import "css/nprogress.css"; + </style> </PollenWaiter> 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 2127f7f3..6c5e6d31 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 @@ -21,7 +21,7 @@ require("./popup/NewPassword.tag.html"); require("./SignUp.tag.html"); <SignIn> - <div class="body-container sign-in-layer" show={openSignIn}> + <div class="body-container colors-main sign-in-layer" show={openSignIn}> <div class="body-content"> <h1 class="c-heading">{__.title}</h1> <form class="signin" onsubmit={signIn}> @@ -113,7 +113,6 @@ require("./SignUp.tag.html"); top: 0px; height: 100%; width: 100%; - background-color: white; } #closeLogin { diff --git a/pollen-ui-riot-js/src/main/web/tag/UserCard.tag.html b/pollen-ui-riot-js/src/main/web/tag/UserCard.tag.html index 2c5946b9..8cefac50 100644 --- a/pollen-ui-riot-js/src/main/web/tag/UserCard.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/UserCard.tag.html @@ -1,4 +1,4 @@ -<UserCard> +<UserCard class="card"> <div class="user-card-view" if={!editing}> <div class="login"> <span> @@ -134,16 +134,6 @@ <style> - usercard { - display: block; - margin: 5px auto; - border-radius: 4px; - border: 1px solid #13a2ff; - box-shadow: 0 0 1px hsla(0,0%,7%,.6); - padding: 0.5em; - color: #13a2ff; - } - .user-card-view { display: flex; justify-content: space-between; diff --git a/pollen-ui-riot-js/src/main/web/tag/components/date-picker.tag.html b/pollen-ui-riot-js/src/main/web/tag/components/date-picker.tag.html index bdc6a1cf..f0d08c32 100644 --- a/pollen-ui-riot-js/src/main/web/tag/components/date-picker.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/components/date-picker.tag.html @@ -150,7 +150,7 @@ }); this.open = () => { - this.root.style.overflow = 'visible'; + this.root.style.overflow = "visible"; this.opts.date.isVisible = true; this.trigger("open"); }; @@ -165,7 +165,7 @@ this.select = e => { this.opts.date.date = e.item.day.date; - this.trigger('select', this.opts.date.date); + this.trigger("select", this.opts.date.date); }; this.setToday = () => { 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 489fee0d..3c1331d4 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 @@ -42,7 +42,7 @@ require("./time-picker.tag.html"); let moment = require("moment"); moment.locale(this.session.locale); this.dateTime = this.formatDateTimeForInput(this.opts.datetime); - var timestamp =this.opts.datetime; + var timestamp = this.opts.datetime; this.date = {date: this.opts.datetime ? moment(timestamp) : undefined}; this.time = {time: this.opts.datetime ? moment(timestamp) : undefined}; diff --git a/pollen-ui-riot-js/src/main/web/tag/components/time-picker.tag.html b/pollen-ui-riot-js/src/main/web/tag/components/time-picker.tag.html index 0b68158d..d849eeb8 100644 --- a/pollen-ui-riot-js/src/main/web/tag/components/time-picker.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/components/time-picker.tag.html @@ -12,17 +12,17 @@ <div class="c-calendar c-calendar--higher" if="{opts.time.isVisible && !session.timeInputSupported}"> <div class="time"> - <div class="prev action-prev" onclick={nextHour}></div> + <button type="button" class="c-button c-button--ghost-info u-small" onclick={nextHour}><i class="fa fa-chevron-up"></i> </button> <div class="ti_tx"><input class="timepicki-input" type="text" readonly value="{opts.time.time ? opts.time.time.format('HH') : moment().format('HH')}"></div> - <div class="next action-next" onclick={prevHour}></div> + <button type="button" class="c-button c-button--ghost-info u-small" onclick={prevHour}><i class="fa fa-chevron-down"></i> </button> </div> <div class="colon"> <div class="colon_tx">:</div> </div> <div class="mins"> - <div class="prev action-prev" onclick={nextMinute}></div> + <button type="button" class="c-button c-button--ghost-info u-small" onclick={nextMinute}><i class="fa fa-chevron-up"></i> </button> <div class="mi_tx"><input class="timepicki-input" type="text" readonly value="{opts.time.time ? opts.time.time.format('mm') : moment().format('mm')}"></div> - <div class="next action-next" onclick={prevMinute}></div> + <button type="button" class="c-button c-button--ghost-info u-small" onclick={prevMinute}><i class="fa fa-chevron-down"></i> </button> </div> </div> @@ -81,7 +81,7 @@ }); this.open = () => { - this.root.style.overflow = 'visible'; + this.root.style.overflow = "visible"; this.opts.time.isVisible = true; this.trigger("open"); }; @@ -156,84 +156,43 @@ .ti_tx, .colon_tx, .mi_tx { - width: 100%; - text-align: center; - margin: 10px 0; + width: 100%; + text-align: center; + margin: 10px 0; } .time, .colon, .mins { - float: left; - margin: 0 10px; - font-size: 20px; - color: #2d2e2e; - font-family: arial; - font-weight: 700; + float: left; + margin: 0 10px; + font-size: 20px; + font-family: arial; + font-weight: 700; } .time, .mins { - width: 60px; + width: 60px; } - .prev, - .next { - cursor: pointer; - padding: 18px; - width: 28%; - border: 1px solid #ccc; - margin: auto; - background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAA4CAYAAAD959hAAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJk [...] - border-radius: 5px; - } - - .prev:hover, - .next:hover { - background-color: #ccc; - } - - .next { - background-position: 50% 150%; - } - - .prev { - background-position: 50% -50%; + .time .c-button, + .mins .c-button { + border-radius: 4px; } .time_pick { - position: relative; - } - - .timepicker_wrap { - padding: 10px; - border-radius: 5px; - z-index: 998; - display: none; - box-shadow: 2px 2px 5px 0 rgba(50,50,50,0.35); - background: #f6f6f6; - border: 1px solid #ccc; - float: left; - position: absolute; - top: 27px; - left: 0; + position: relative; } input.timepicki-input { - background: none repeat scroll 0 0 #FFFFFF; - border: none; - float: none; - margin: 0; - text-align: center; - width: 70%; - outline: 0; - font-size: 1em; - } - - a.reset_time { - float: left; - margin-top: 5px; - color: #000; + border: none; + float: none; + margin: 0; + text-align: center; + width: 70%; + outline: 0; + font-size: 1em; } </style> diff --git a/pollen-ui-riot-js/src/main/web/tag/favoriteList/ChildListCard.tag.html b/pollen-ui-riot-js/src/main/web/tag/favoriteList/ChildListCard.tag.html index eca806de..43f9bd55 100644 --- a/pollen-ui-riot-js/src/main/web/tag/favoriteList/ChildListCard.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/favoriteList/ChildListCard.tag.html @@ -1,4 +1,4 @@ -<ChildListCard> +<ChildListCard class="card"> <div class="child-list-card-view" if={!editing}> <div class="info"> @@ -105,16 +105,6 @@ <style> - childlistcard { - display: block; - margin: 5px auto; - border-radius: 4px; - border: 1px solid #13a2ff; - box-shadow: 0 0 1px hsla(0,0%,7%,.6); - padding: 0.5em; - color: #13a2ff; - } - .child-list-card-view { display: flex; justify-content: space-between; diff --git a/pollen-ui-riot-js/src/main/web/tag/favoriteList/FavoriteList.tag.html b/pollen-ui-riot-js/src/main/web/tag/favoriteList/FavoriteList.tag.html index 2118852e..09956572 100644 --- a/pollen-ui-riot-js/src/main/web/tag/favoriteList/FavoriteList.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/favoriteList/FavoriteList.tag.html @@ -502,10 +502,7 @@ require("./ChildListCard.tag.html"); width: 75%; display: inline-block; } - - } - </style> </FavoriteList> diff --git a/pollen-ui-riot-js/src/main/web/tag/favoriteList/FavoriteListCard.tag.html b/pollen-ui-riot-js/src/main/web/tag/favoriteList/FavoriteListCard.tag.html index ef2e2224..6292dd8d 100644 --- a/pollen-ui-riot-js/src/main/web/tag/favoriteList/FavoriteListCard.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/favoriteList/FavoriteListCard.tag.html @@ -1,6 +1,6 @@ require("../Pagination.tag.html"); require("./MemberCard.tag.html"); -<FavoriteListCard> +<FavoriteListCard class="card"> <div class="favoriteList-card-view"> <div class="name"> <a href="#favoriteLists/{opts.favoriteList.id}"> @@ -35,16 +35,6 @@ require("./MemberCard.tag.html"); <style> - favoritelistcard { - display: block; - margin: 5px auto; - border-radius: 4px; - border: 1px solid #13a2ff; - box-shadow: 0 0 1px hsla(0,0%,7%,.6); - padding: 0.5em; - color: #13a2ff; - } - .favoriteList-card-view { display: flex; justify-content: space-between; diff --git a/pollen-ui-riot-js/src/main/web/tag/favoriteList/MemberCard.tag.html b/pollen-ui-riot-js/src/main/web/tag/favoriteList/MemberCard.tag.html index f17fb4a9..9306d2de 100644 --- a/pollen-ui-riot-js/src/main/web/tag/favoriteList/MemberCard.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/favoriteList/MemberCard.tag.html @@ -1,4 +1,4 @@ -<MemberCard> +<MemberCard class="card"> <div class="member-card-view" if={!editing}> <div class="info"> @@ -116,16 +116,6 @@ <style> - membercard { - display: block; - margin: 5px auto; - border-radius: 4px; - border: 1px solid #13a2ff; - box-shadow: 0 0 1px hsla(0,0%,7%,.6); - padding: 0.5em; - color: #13a2ff; - } - .member-card-view { display: flex; justify-content: space-between; diff --git a/pollen-ui-riot-js/src/main/web/tag/poll/Choice.tag.html b/pollen-ui-riot-js/src/main/web/tag/poll/Choice.tag.html index 310c7595..32df6368 100644 --- a/pollen-ui-riot-js/src/main/web/tag/poll/Choice.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/poll/Choice.tag.html @@ -3,7 +3,7 @@ require("../components/time-picker.tag.html"); <Choice> <div class="choice-container"> <button type="button" - class="choice-type-button" + class="choice-type-button colors-main-invers" alt="texte" disabled={opts.disabled} onclick="{setTextType}" @@ -19,7 +19,7 @@ require("../components/time-picker.tag.html"); required={opts.choice.choiceType === 'TEXT'} onchange={onTextChange}/> <button type="button" - class="choice-type-button" + class="choice-type-button colors-main-invers" alt="resource" show={!opts.disabled} disabled={opts.disabled} @@ -60,7 +60,7 @@ require("../components/time-picker.tag.html"); <button type="button" - class="choice-type-button" + class="choice-type-button colors-main-invers" alt="date" disabled={opts.disabled} onclick="{setDateType}" @@ -73,7 +73,7 @@ require("../components/time-picker.tag.html"); date="{date}"/> <button type="button" - class="choice-type-button" + class="choice-type-button colors-main-invers" alt="heure" disabled={opts.disabled} onclick="{toggleTime}" @@ -86,7 +86,7 @@ require("../components/time-picker.tag.html"); time="{time}"/> <button type="button" - class="choice-type-button" + class="choice-type-button colors-main-invers" alt="description" onclick="{toggleDescription}" title="{__.description}"> @@ -233,8 +233,6 @@ require("../components/time-picker.tag.html"); } .choice-type-button { - background-color: #3399ff; - color: white; border: none; border-radius: 4px; padding: 4px; 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 index f962a20d..8beab761 100644 --- 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 @@ -153,7 +153,7 @@ }; this.deleteChoice = () => { - if (confirm("Delete choice?")) { + if (this.confirm("Delete choice?")) { this.trigger("deleteChoice", this.number); } }; diff --git a/pollen-ui-riot-js/src/main/web/tag/poll/ChoiceView.tag.html b/pollen-ui-riot-js/src/main/web/tag/poll/ChoiceView.tag.html index faaebc94..53e0b7ef 100644 --- a/pollen-ui-riot-js/src/main/web/tag/poll/ChoiceView.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/poll/ChoiceView.tag.html @@ -8,11 +8,11 @@ </span> <span class="choice-date" if={opts.choice.choiceType === "DATE"}> - {formatDate(parseInt(opts.choice.choiceValue, 10),"LL")} + {formatDate(parseInt(opts.choice.choiceValue, 10),"L")} </span> - <span class="choice-datetimetext" + <span class="choice-datetime" if={opts.choice.choiceType === "DATETIME"}> - {formatDate(parseInt(opts.choice.choiceValue, 10))} + {formatDate(parseInt(opts.choice.choiceValue, 10), "L LT")} </span> <div class="choice-ressource" if={opts.choice.choiceType === "RESOURCE" && meta && isImage(meta)}> @@ -22,7 +22,7 @@ if={opts.choice.choiceType === "RESOURCE" && meta && !isImage(meta)}> {meta.name} </div> - <div if={opts.choice.choiceType === "RESOURCE" || opts.choice.description} class="info"> + <div if={opts.choice.choiceType === "RESOURCE" || opts.choice.description} class="info-label"> <i class="fa fa-question-circle" aria-hidden="true"></i> </div> </div> @@ -109,13 +109,16 @@ justify-content: center; } - .choice-view.with-info { - cursor: pointer; + .choice-view .choice-text, + .choice-view .choice-date, + .choice-view .choice-datetime { + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; } - .choice-view .info { - font-size: 0.5em; - color: #13a2ff; + .choice-view.with-info { + cursor: pointer; } .choice-ressource .image-preview{ diff --git a/pollen-ui-riot-js/src/main/web/tag/poll/CommentPopup.tag.html b/pollen-ui-riot-js/src/main/web/tag/poll/CommentPopup.tag.html deleted file mode 100644 index b877e252..00000000 --- a/pollen-ui-riot-js/src/main/web/tag/poll/CommentPopup.tag.html +++ /dev/null @@ -1,192 +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% -*/ -<CommentPopup class="close"> - - <div class="popup-background"></div> - - <div class="popup-content"> - <div class="popup-close" onclick="{close}"> - <i class="fa fa-times"></i> - </div> - <div class="popup-title">{title}</div> - <form class="popup-message" onsubmit="{action}"> - <div class="popup-message-header"> - <div if="{error}" class="error">{error}</div> - </div> - <input ref="author" type="text" required placeholder="{__.authorPlaceholder}"> - <textarea ref="text" required placeholder="{__.textPlaceholder}"/> - <input type="submit" class="button" value="{__.action}"> - </form> - - </div> - - <script type="es6"> - let session = require("../../js/Session"); - this.installBundle(session, "comment_popup"); - - this.error = ""; - - this.oldParent = this.parent.root; - - this.openForEdit = (pollId, comment, callback) => { - this.title = this.__.edit; - this.open(pollId, comment, callback); - }; - - this.openForCreate = (pollId, comment, callback) => { - this.title = this.__.create; - this.open(pollId, comment, callback); - }; - - this.open = (pollId, comment, callback) => { - this.comment = Object.assign({}, comment); - this.refs.author.value = comment.authorName; - this.refs.text.value = comment.text; - this.pollId = pollId; - this.callback = callback; - this.error = ""; - document.body.appendChild(this.root); - this.root.classList.toggle("close"); - this.root.classList.toggle("open"); - }; - - this.close = () => { - this.oldParent.appendChild(this.root); - this.root.classList.toggle("close"); - this.root.classList.toggle("open"); - }; - - this.action = (e) => { - e.preventDefault(); - e.stopPropagation(); - this.error = ""; - this.comment.authorName = this.refs.author.value; - this.comment.text = this.refs.text.value; - this.callback(this.comment).then(() => { - this.close(); - }).catch((error) => { - this.error = error; - this.update(); - }); - }; - </script> - - <style> - commentpopup { - justify-content: center; - align-items: center; - flex-direction: column; - position: absolute; - top: 0; - width: 100%; - height: 100%; - } - - .popup-background { - width: 100%; - height: 100%; - background-color: white; - opacity: .8; - position: absolute; - top: 0; - left: 0; - } - - commentpopup.close { - display: none; - } - - commentpopup.open { - display: flex; - } - - .popup-title { - height: 70px; - border-bottom: 1px solid #b2c7d3; - background-color: white; - display: flex; - justify-content: center; - align-items: center; - margin-bottom: 20px; - font-size: 20px; - } - - .popup-content { - position: relative; - z-index: 1; - border-radius: 10px; - background-color: #f2f2f2; - box-shadow: 0 0 12px 12px rgba(0, 0, 0, 0.1); - } - - .popup-content .button { - padding: 0; - border: none; - border-radius: 0; - width: 100%; - margin: 20px 0 0; - } - - .popup-close { - cursor: pointer; - position: absolute; - top: 20px; - right: 20px; - } - - .popup-message { - display: flex; - flex-direction: column; - width: 420px; - text-align: left; - } - - .popup-message > div { - margin-right: 22px; - } - - .popup-message-header { - display: flex; - flex-direction: row; - justify-content: flex-end; - height: 30px; - } - - .popup-message > input { - width: 390px; - margin-top: 10px; - margin-bottom: 5px; - } - - .popup-message > textarea { - width: 390px; - margin-top: 10px; - margin-bottom: 5px; - } - - .error { - margin: 3px; - color: red; - } - - </style> - -</CommentPopup> diff --git a/pollen-ui-riot-js/src/main/web/tag/poll/Comments.tag.html b/pollen-ui-riot-js/src/main/web/tag/poll/Comments.tag.html index 9d037bcb..9865aeed 100644 --- a/pollen-ui-riot-js/src/main/web/tag/poll/Comments.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/poll/Comments.tag.html @@ -1,5 +1,4 @@ require("../Pagination.tag.html"); -require("./CommentPopup.tag.html"); <Comments> <form show="{loaded}" onsubmit="{addComment}" class="comment-form"> diff --git a/pollen-ui-riot-js/src/main/web/tag/poll/Created.tag.html b/pollen-ui-riot-js/src/main/web/tag/poll/Created.tag.html deleted file mode 100644 index e861920e..00000000 --- a/pollen-ui-riot-js/src/main/web/tag/poll/Created.tag.html +++ /dev/null @@ -1,64 +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% - */ -<Created> - - <div class="container"> - - <div class="legend"> - {__.title} «{form.model.title}». - </div> - <div> - {__.message} - <br/> - <div> - {__.vote} (<a href="#poll/{form.model.id}/{form.model.permission}">{__.editUrl}</a>). - </div> - <div if="{form.model.pollType==='FREE'}"> - {__.vote} (<a href="#poll/{form.model.id}/vote">{__.voteUrl}</a>). - </div> - </div> - </div> - - <script type="es6"> - this.installBundle(this.opts.session, "poll_created"); - this.form = this.opts.form; - this.logger.info("Created poll"); - this.logger.info(this.form); - </script> - <style> - - .container { - margin-left: 20px; - } - - .legend { - width: 100%; - height: 70px; - border-bottom: 1px solid #b2c7d3; - display: flex; - justify-content: flex-start; - align-items: center; - margin-bottom: 20px; - font-size: 20px; - } - - </style> -</Created> 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 7d3099bf..10972d11 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 @@ -22,13 +22,12 @@ require("./Description.tag.html"); require("./Choices.tag.html"); require("./Settings.tag.html"); require("./Voters.tag.html"); -require("./Created.tag.html"); <EditPoll> <form show={loaded} ref="poll" onsubmit="{submitStep}" class="form"> - <div class="steps"> + <div class="tabs tabs-one-small"> <div each={step, index in form.steps} - class={step : true, selected : form.step === index}> + class="tab {selected : form.step === index}"> <button type="submit" if="{form.step > index || !form.creation}" onclick="{goto(index)}"> {getStepLabel(step)} </button> @@ -134,13 +133,12 @@ require("./Created.tag.html"); promiseSave = this.form.save(); } promiseSave.then(() => { - let route = require("riot-route"); - route("poll/" + this.form.model.id + "/vote/" + this.form.model.permission); - }, errors => { - this.bus.trigger("error", errors); - this.update(); - } - ); + let route = require("riot-route"); + route("poll/" + this.form.model.id + "/vote/" + this.form.model.permission); + }, errors => { + this.bus.trigger("error", errors); + this.update(); + }); }; }; @@ -153,49 +151,5 @@ require("./Created.tag.html"); }; </script> - <style> - - - .steps { - border-bottom: 1px solid #b2c7d3; - display: flex; - flex-direction: row; - justify-content: center; - align-items: center; - margin: 0 auto; - } - - .step { - margin-left: 12px; - margin-right: 12px; - } - - .step button { - border: none; - font-size: 1em; - background: transparent; - color : black; - } - - .step.selected { - color: #13a2ff; - border-bottom: 2px solid; - } - - @media (max-width: 640px) { - .step { - display: none; - } - - .step.selected { - display: block; - width: 100%; - text-align: center; - color : black; - border-bottom: none; - } - } - - </style> </EditPoll> diff --git a/pollen-ui-riot-js/src/main/web/tag/poll/Podium.tag.html b/pollen-ui-riot-js/src/main/web/tag/poll/Podium.tag.html index 0263ebe1..adcb2d98 100644 --- a/pollen-ui-riot-js/src/main/web/tag/poll/Podium.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/poll/Podium.tag.html @@ -1,20 +1,20 @@ require("./ChoiceView.tag.html"); <Podium> <div class="podium"> - <div if={podium.step2} each={choice in podium.step2} class="step second-step"> - <div class="step-score">2</div> + <div if={podium.step2} each={choice in podium.step2} class="podium-step second-step"> + <div class="step-score colors-main-invers">2</div> <div class="choice"> <ChoiceView choice={choice}/> </div> </div> - <div if={podium.step1} each={choice in podium.step1} class="step first-step"> - <div class="step-score">1</div> + <div if={podium.step1} each={choice in podium.step1} class="podium-step first-step"> + <div class="step-score colors-main-invers">1</div> <div class="choice"> <ChoiceView choice={choice}/> </div> </div> - <div if={podium.step3} each={choice in podium.step3} class="step third-step"> - <div class="step-score">3</div> + <div if={podium.step3} each={choice in podium.step3} class="podium-step third-step"> + <div class="step-score colors-main-invers">3</div> <div class="choice"> <ChoiceView choice={choice}/> </div> @@ -42,15 +42,13 @@ require("./ChoiceView.tag.html"); margin-bottom: 15px; } - .step { + .podium-step { display: flex; flex-direction: column-reverse; min-width: 20%; } .step-score { - background-color: #13a2ff; - color : #ffffff; font-size: 2em; text-align: center; height: 1em; @@ -64,7 +62,7 @@ require("./ChoiceView.tag.html"); height: 2em; } - .step .choice { + .podium-step .choice { display: flex; justify-content: center; font-size: 2em; 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 85c3d77e..f433e424 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 @@ -125,37 +125,30 @@ require("../popup/QrCodeButton.tag.html"); <h3>{poll.description}</h3> - <div class="poll-creation"> + <div> {__.createdBy} {poll.creatorName} {__.createdIn} {formatDate(poll.createDate)} </div> - <div class="beginChoiceDate" - if={poll.status === "CREATED" && poll.choiceAddAllowed}> + <div if={poll.status === "CREATED" && poll.choiceAddAllowed}> {__.beginChoiceFrom} {formatDate(poll.beginChoiceDate)} </div> - <div class="poll-created" - if={poll.status === "CREATED"}> + <div if={poll.status === "CREATED"}> {__.votingFrom} {formatDate(poll.beginDate)} <span if={poll.endDate}> {__votingFromTo} {formatDate(poll.endDate)}</span> </div> - <div class="poll-adding-choices" - if={poll.status === "ADDING_CHOICES"}> + <div if={poll.status === "ADDING_CHOICES"}> {__.beginChoiceTo} {formatDate(poll.endChoiceDate)} </div> - <div class="poll-vote-counting-type" if="{poll.voteCountingTypeValue}"> + <div class="cursor-pointer" if="{poll.voteCountingTypeValue}" onclick="{toggleHelp}"> {__.voteCountingType} {poll.voteCountingTypeValue.name} - <i class="fa fa-question-circle cursor-pointer" aria-hidden="true" onclick="{toggleHelp}"></i> + <span class="info-label"> + <i class="fa fa-question-circle" aria-hidden="true"></i> + </span> </div> - <div id="voteCountingTypeHelper" - ref="voteCountingTypeHelper" - show="{showVoteCountingTypeHelper}"> - </div> - - <div class="poll-voting" - if={poll.status === "VOTING" || poll.status === "CLOSED"}> + <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> @@ -189,9 +182,6 @@ require("../popup/QrCodeButton.tag.html"); this.poll = poll; this.update(); this.bus.trigger("pageChanged", poll.title); - if (poll && poll.voteCountingTypeValue && this.refs.voteCountingTypeHelper) { - this.refs.voteCountingTypeHelper.innerHTML = poll.voteCountingTypeValue.helper; - } }; this.listen("poll", this.onPollChange); @@ -234,7 +224,7 @@ require("../popup/QrCodeButton.tag.html"); }; this.toggleHelp = () => { - this.showVoteCountingTypeHelper = !this.showVoteCountingTypeHelper; + this.info(this.poll.voteCountingTypeValue.name, this.poll.voteCountingTypeValue.helper, null, "info"); }; </script> @@ -244,29 +234,6 @@ require("../popup/QrCodeButton.tag.html"); text-align: center; } - .tabs { - border-bottom: 1px solid #b2c7d3; - display: flex; - flex-direction: row; - justify-content: center; - align-items: center; - margin: 0 auto; - } - - .tab { - margin-left: 12px; - margin-right: 12px; - } - - .tab a { - color : black; - } - - .tab.selected { - color: #13a2ff; - border-bottom: 2px solid; - } - /* The container <div> - needed to position the dropdown content */ .dropdown { position: relative; @@ -277,9 +244,7 @@ require("../popup/QrCodeButton.tag.html"); .dropdown-content { display: none; position: absolute; - background-color: #f9f9f9; min-width: 188px; - box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2); } .dropdown-content.right { @@ -288,17 +253,11 @@ require("../popup/QrCodeButton.tag.html"); /* Links inside the dropdown */ .dropdown-content a { - color: black; padding: 12px 16px; text-decoration: none; display: block; } - /* Change color of dropdown links on hover */ - .dropdown-content a:hover { - background-color: #f1f1f1; - } - /* Show the dropdown menu on hover */ .dropdown:hover .dropdown-content { display: block; @@ -309,18 +268,14 @@ require("../popup/QrCodeButton.tag.html"); padding: 0.3em 0; } + .info-label { + vertical-align: text-top; + } + h1 QrCodeButton { font-size: 1rem; font-weight: normal; } - #voteCountingTypeHelper { - margin: 5px; - padding: 5px; - border: 1px solid #CCC; - border-radius: 5px; - background-color: #EEE; - } - </style> </Poll> diff --git a/pollen-ui-riot-js/src/main/web/tag/poll/PollCard.tag.html b/pollen-ui-riot-js/src/main/web/tag/poll/PollCard.tag.html index 8d63d1eb..02322db8 100644 --- a/pollen-ui-riot-js/src/main/web/tag/poll/PollCard.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/poll/PollCard.tag.html @@ -1,52 +1,45 @@ -<PollCard> - <div class="poll-card {opts.poll.status}"> - <div class="poll-header"> - <a class="poll-title" href="#poll/{opts.poll.id}/vote/{opts.poll.permission}"> - {opts.poll.title} - </a> - <div class="poll-status"> - {__[opts.poll.status]} - </div> +<PollCard class="card poll-{opts.poll.status.toLowerCase()}"> + <div class="poll-header"> + <a class="poll-title" href="#poll/{opts.poll.id}/vote/{opts.poll.permission}"> + {opts.poll.title} + </a> + <div class="poll-status"> + {__[opts.poll.status]} </div> + </div> - <p>{opts.poll.description}</p> - <div class="poll-creation"> - {__.createdBy} {opts.poll.creatorName} {__.createdIn} {formatDate(opts.poll.createDate)} - </div> - <div class="beginChoiceDate" - if={opts.poll.status === "CREATED" && opts.poll.choiceAddAllowed}> - {__.beginChoiceFrom} {formatDate(opts.poll.beginChoiceDate)} - </div> - <div class="poll-created" - if={opts.poll.status === "CREATED"}> - {__.votingFrom} {formatDate(opts.poll.beginDate)} - <span if={opts.poll.endDate}> {__votingFromTo} {formatDate(opts.poll.endDate)}</span> - </div> + <p>{opts.poll.description}</p> + <div> + {__.createdBy} {opts.poll.creatorName} {__.createdIn} {formatDate(opts.poll.createDate)} + </div> + <div if={opts.poll.status === "CREATED" && opts.poll.choiceAddAllowed}> + {__.beginChoiceFrom} {formatDate(opts.poll.beginChoiceDate)} + </div> + <div if={opts.poll.status === "CREATED"}> + {__.votingFrom} {formatDate(opts.poll.beginDate)} + <span if={opts.poll.endDate}> {__votingFromTo} {formatDate(opts.poll.endDate)}</span> + </div> - <div class="poll-adding-choices" - if={opts.poll.status === "ADDING_CHOICES"}> - {__.beginChoiceTo} {formatDate(opts.poll.endChoiceDate)} ( - <span if={opts.poll.choiceCount === 0}>{__.noChoice}</span> - <span if={opts.poll.choiceCount === 1}>1 {__.choice}</span> - <span if={opts.poll.choiceCount > 1}>{opts.poll.choiceCount} {__.choices}</span> - ) - </div> + <div if={opts.poll.status === "ADDING_CHOICES"}> + {__.beginChoiceTo} {formatDate(opts.poll.endChoiceDate)} ( + <span if={opts.poll.choiceCount === 0}>{__.noChoice}</span> + <span if={opts.poll.choiceCount === 1}>1 {__.choice}</span> + <span if={opts.poll.choiceCount > 1}>{opts.poll.choiceCount} {__.choices}</span> + ) + </div> - <div class="poll-voting" - if={opts.poll.status === "VOTING"}> - <span if={opts.poll.voteCount === 0}>{__.noVote}</span> - <span if={opts.poll.voteCount === 1}>1 {__.vote}</span> - <span if={opts.poll.voteCount > 1}>{opts.poll.voteCount} {__.votes}</span> - <span if={opts.poll.endDate}> {__.votingTo} {formatDate(opts.poll.endDate)}</span> - </div> + <div if={opts.poll.status === "VOTING"}> + <span if={opts.poll.voteCount === 0}>{__.noVote}</span> + <span if={opts.poll.voteCount === 1}>1 {__.vote}</span> + <span if={opts.poll.voteCount > 1}>{opts.poll.voteCount} {__.votes}</span> + <span if={opts.poll.endDate}> {__.votingTo} {formatDate(opts.poll.endDate)}</span> + </div> - <div class="poll-voting" - if={opts.poll.status === "CLOSED"}> - <span if={opts.poll.voteCount === 0}>{__.noVote}</span> - <span if={opts.poll.voteCount === 1}>1 {__.vote}</span> - <span if={opts.poll.voteCount > 1}>{opts.poll.voteCount} {__.votes}</span> - <span if={opts.poll.endDate}> {__.closedFrom} {formatDate(opts.poll.endDate)}</span> - </div> + <div if={opts.poll.status === "CLOSED"}> + <span if={opts.poll.voteCount === 0}>{__.noVote}</span> + <span if={opts.poll.voteCount === 1}>1 {__.vote}</span> + <span if={opts.poll.voteCount > 1}>{opts.poll.voteCount} {__.votes}</span> + <span if={opts.poll.endDate}> {__.closedFrom} {formatDate(opts.poll.endDate)}</span> </div> <script type="es6"> @@ -55,29 +48,6 @@ </script> <style> - .poll-card { - margin: 5px auto; - border-radius: 4px; - box-shadow: 0 0 1px hsla(0,0%,7%,.6); - padding: 0.5em; - } - - .poll-card.CREATED { - background-color: grey; - } - - .poll-card.ADDING_CHOICES { - background-color: orange; - } - - .poll-card.VOTING { - background-color: #13a2ff; - color: white - } - - .poll-card.CLOSED { - background-color: #53bd41; - } .poll-title { color: inherit; 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 243d00e0..96b5e3b9 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 @@ -33,48 +33,33 @@ require("./PollCard.tag.html"); {__.noPoll} </div> - - - <form if={opts.method === "createdPolls"} onsubmit="{assignPoll}" class="assign-form"> - <fieldset> - <legend>{__.assignPollToMe_title}</legend> - - <p><i class="fa fa-question-circle-o"></i> {__.assignPollToMe_desc}</p> - <div class="o-form-element"> - <div class="o-field o-field--icon-left"> - <i class="fa fa-fw fa-link c-icon"></i> - <input class="c-field" - type="text" - name="pollToAssign" - ref="pollToAssign" - placeholder={pollToAssignPlaceholder} - pattern={pollToAssignUrlPattern} - required> - </div> - </div> - - <div class="actions"> - <div class="actions-left"> - <div id="assign-poll-success-message" if={assignedPollTitle}> - <div class="close-message" onclick="{closeMessage}"><i class="fa fa-times" aria-hidden="true"></i></div> - <p> - {__.assignSuccessMessage} - </p> - <p> - <em>{assignedPollTitle}</em> - </p> - </div> - </div> - <div class="actions-right"> - <button type="submit" - class="c-button c-button--info pull-right"> - <i class="fa fa-link"/> - {__.assignPollToMe} - </button> - </div> - </div> - </fieldset> - </form> + <div if={opts.method === "createdPolls"}> + <hr/> + <form onsubmit="{assignPoll}" class="assign-form"> + <h3 class="c-heading">{__.assignPollToMe_title}</h3> + + <div class="o-form-element"> + <label class="c-label" for="pollToAssign">{__.assignPollToMe_desc}</label> + <div class="o-field o-field--icon-left"> + <i class="fa fa-fw fa-link c-icon"></i> + <input class="c-field" + type="text" + name="pollToAssign" + ref="pollToAssign" + placeholder={pollToAssignPlaceholder} + pattern={pollToAssignUrlPattern} + required> + </div> + </div> + <div class="actions-right"> + <button type="submit" + class="c-button c-button--success"> + <i class="fa fa-link"/> + {__.assignPollToMe} + </button> + </div> + </form> + </div> </div> </div> @@ -133,20 +118,13 @@ require("./PollCard.tag.html"); if (result) { this.refresh(); this.logger.log(result); - this.assignedPollTitle = result.title; + this.info(this.__.assignSuccessMessage, result.title, null, "success"); + this.refs.pollToAssign.value = ""; this.update(); } }); }; - this.closeMessage = (e) => { - e.preventDefault(); - e.stopPropagation(); - var messageElement = document.getElementById("assign-poll-success-message"); - messageElement.parentNode.removeChild(messageElement); - this.assignedPollTitle = undefined; - }; - </script> <style> @@ -166,37 +144,6 @@ require("./PollCard.tag.html"); .o-form-element.sort .c-input-group { width: 200px; } - - .assign-form { - margin: 20px 0; - } - - .assign-form legend { - font-weight: bold; - color: #2c3e50; - } - - .assign-form fieldset { - padding: 20px; - border: 1px solid #96a8b2; - border-radius: 5px; - } - - #assign-poll-success-message { - position: relative; - background: #aaffaa; - padding: 10px 30px 10px; - box-shadow: 5px 5px 5px 0px #9b9b9b; - border-radius: 5px; - } - - .close-message { - position: absolute; - top: 10px; - right: 10px; - color: #666; - cursor: pointer; - } - + </style> </Polls> diff --git a/pollen-ui-riot-js/src/main/web/tag/poll/Results.tag.html b/pollen-ui-riot-js/src/main/web/tag/poll/Results.tag.html index 18f4221b..22a9888d 100644 --- a/pollen-ui-riot-js/src/main/web/tag/poll/Results.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/poll/Results.tag.html @@ -18,9 +18,9 @@ require("./Podium.tag.html"); </thead> <tbody> <tr each="{result in poll.results.scores}"> - <td class="score">{result.scoreOrder + 1}</td> - <td class="votes">{result.scoreValue} {parent.__["unit_" + poll.voteCountingType + "_" + (result.scoreValue > 1 ? "many" : "one")]}</td> - <td class="choice"> + <td class="score separator-top">{result.scoreOrder + 1}</td> + <td class="votes separator-top">{result.scoreValue} {parent.__["unit_" + poll.voteCountingType + "_" + (result.scoreValue > 1 ? "many" : "one")]}</td> + <td class="choice separator-top"> <ChoiceView choice={poll.getChoice(result.choiceId)}/> </td> </tr> @@ -70,10 +70,7 @@ require("./Podium.tag.html"); .table-results td { text-align: center; padding: 2px 5px; - border-top: 1px solid #b2c7d3; } - - </style> </Results> diff --git a/pollen-ui-riot-js/src/main/web/tag/poll/Votes.tag.html b/pollen-ui-riot-js/src/main/web/tag/poll/Votes.tag.html index 2f437351..c819e119 100644 --- a/pollen-ui-riot-js/src/main/web/tag/poll/Votes.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/poll/Votes.tag.html @@ -28,7 +28,7 @@ require("./Podium.tag.html"); {__.choices} </div> </div> - <div each={choice in poll.choices} class="choice"> + <div each={choice in poll.choices} class="choice separator-top"> <div class="choice-value"> <ChoiceView choice={choice}/> </div> @@ -50,7 +50,7 @@ require("./Podium.tag.html"); disabled={voteId}> </div> </div> - <div class="current-voter-actions"> + <div class="current-voter-actions separator-top"> <button if={poll.canVote} class="c-button c-button--brand pull-right" type="submit" @@ -71,19 +71,19 @@ require("./Podium.tag.html"); </form> <div class="window"> <div class="frame"> - <div if={poll.resultIsVisible} class="results"> + <div if={poll.resultIsVisible} class="results separator-left"> <div class="result-label"> {__.results} </div> - <div each={choice in poll.choices} class="score-choice"> + <div each={choice in poll.choices} class="score-choice separator-top"> <span if={!choice.score}>{parent.__.noVote}</span> <span if={choice.score}> - <i if={choice.score.scoreOrder === 0} class="fa fa-trophy fa-15x"></i> + <i if={choice.score.scoreOrder === 0} class="fa fa-trophy fa-15x winner"></i> {choice.score.scoreValue} {parent.__["results_unit_" + poll.voteCountingType + "_" + (choice.score.scoreValue > 1 ? "many" : "one")]} </span> </div> - <div class="results-actions"> + <div class="results-actions separator-top"> </div> </div> @@ -99,7 +99,7 @@ require("./Podium.tag.html"); onclick="{onHideVotes}"> <i class="fa fa-caret-left"/> </button> - <form if={showVotes} each={vote in poll.votes} class="vote" onsubmit="{updateVote(vote)}"> + <form if={showVotes} each={vote, index in poll.votes} class="vote {separator-right : index < (poll.votes.length -1)}" onsubmit="{updateVote(vote)}"> <div class="voter"> <span class="voter-name" if="{vote.id !== voteId}"> @@ -120,7 +120,7 @@ require("./Podium.tag.html"); placeholder="{__.authorPlaceHolder}"> </div> </div> - <div each={choice in poll.choices} class="vote-choice" > + <div each={choice in poll.choices} class="vote-choice separator-top" > <input if={poll.voteCountingTypeValue.renderType==='checkbox' && (poll.getVoteChoice(vote, choice) || voteId === vote.id)} ref="vote_{vote.id}_{choice.id}" name="vote_{vote.id}_{choice.id}" @@ -139,7 +139,7 @@ require("./Podium.tag.html"); disabled={voteId !== vote.id} value={poll.getVoteValue(vote, choice)}> </div> - <div class="vote-actions"> + <div class="vote-actions separator-top"> <span class="c-input-group"> <button type="button" class="c-button c-button--error" @@ -412,7 +412,8 @@ require("./Podium.tag.html"); .voters .fix .choice .choice-value { flex-grow: 1; - font-size: 1.5em + font-size: 1.5em; + min-width: 0; } .voters .fix .choice .current-choice { @@ -438,16 +439,10 @@ require("./Podium.tag.html"); .voters .window .frame .results { min-width: 100px; - border-left: 1px solid #b2c7d3; } .voters .window .frame .vote { min-width: 100px; - border-right: 1px solid #b2c7d3; - } - - .voters .window .frame .vote:last-child { - border-right: none; } .voters .window .frame .expand, @@ -473,11 +468,6 @@ require("./Podium.tag.html"); display: flex; align-items: center; justify-content: center; - border-top: 1px solid #b2c7d3; - } - - .voters .window .frame .results .score-choice .fa-trophy { - color: #ff9e0d; } .check { @@ -495,10 +485,5 @@ require("./Podium.tag.html"); padding: 0 0 0 1px; } - .anonymous-voter { - color: #666; - font-style: italic; - } - </style> </Votes> diff --git a/pollen-ui-riot-js/src/main/web/tag/popup/InformationPopup.tag.html b/pollen-ui-riot-js/src/main/web/tag/popup/InformationPopup.tag.html index 0f7c4379..62e95c8e 100644 --- a/pollen-ui-riot-js/src/main/web/tag/popup/InformationPopup.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/popup/InformationPopup.tag.html @@ -8,8 +8,8 @@ {title} </h2> </header> - <div class="c-card__body"> - {message} + <div class="c-card__body" + ref="body"> </div> <footer class="c-card__footer c-card__footer--block"> <div class="c-input-group"> @@ -32,7 +32,7 @@ this.open = (title, message, label, type) => { this.title = title; - this.message = message; + this.refs.body.innerHTML = message; this.label = label || this.__.ok; this.type = type || "brand"; this.openModal = true; diff --git a/pollen-ui-riot-js/src/main/web/tag/voterList/VoterList.tag.html b/pollen-ui-riot-js/src/main/web/tag/voterList/VoterList.tag.html index 1700c026..4485d767 100644 --- a/pollen-ui-riot-js/src/main/web/tag/voterList/VoterList.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/voterList/VoterList.tag.html @@ -2,7 +2,7 @@ require("./VoterListMember.tag.html"); require("./VoterListActions.tag.html"); require("../popup/Modal.tag.html"); -<VoterList> +<VoterList class="card"> <div class="voter-list-header"> <div class="voter-list-icone" onclick={toggleExpand}> <i class="fa fa-caret-{expand ? 'down' : 'right'}" aria-hidden="true"></i> @@ -44,7 +44,7 @@ require("../popup/Modal.tag.html"); <VoterList each={voterlist in opts.voterList.subLists} voter-list={voterlist} form={parent.opts.form} ref="voterLists"/> <voterListmember each={member in opts.voterList.members} member={member} form={parent.opts.form} ref="voterListMembers"/> - <VoterListActions voter-list={opts.voterList} form={parent.opts.form}/> + <VoterListActions if={opts.voterList.subLists.length + opts.voterList.members.length > 5} voter-list={opts.voterList} form={parent.opts.form}/> </div> <script type="es6"> @@ -100,23 +100,13 @@ require("../popup/Modal.tag.html"); <style> - voterlist { - display: block; - margin: 5px auto; - border-radius: 4px; - border: 1px solid #13a2ff; - box-shadow: 0 0 1px hsla(0,0%,7%,.6); - padding: 0 0.5em 0.5em 0.5em; - color: #13a2ff; - } - .voter-list-header { display: flex; } .voter-list-icone { display: flex; - margin: 0.8em 0 auto 0; + margin: 0.3em 0 auto 0; font-size: 1.2em; } @@ -132,7 +122,6 @@ require("../popup/Modal.tag.html"); } .voter-list-fields { - margin-top: 0.5em; flex-grow: 1; } diff --git a/pollen-ui-riot-js/src/main/web/tag/voterList/VoterListActions.tag.html b/pollen-ui-riot-js/src/main/web/tag/voterList/VoterListActions.tag.html index 0f38cddd..dcb11adf 100644 --- a/pollen-ui-riot-js/src/main/web/tag/voterList/VoterListActions.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/voterList/VoterListActions.tag.html @@ -164,7 +164,6 @@ <style> voterlistactions { - margin-top: 0.5em; display: flex; justify-content: flex-end; } diff --git a/pollen-ui-riot-js/webpack.config.js b/pollen-ui-riot-js/webpack.config.js index 2fb9a7bc..b54f7d6b 100644 --- a/pollen-ui-riot-js/webpack.config.js +++ b/pollen-ui-riot-js/webpack.config.js @@ -39,13 +39,11 @@ module.exports = { {from: "src/main/web/css", to: "css"}, {from: "./node_modules/font-awesome/css", to: "css"}, {from: "./node_modules/font-awesome/fonts", to: "fonts"}, - {from: "./node_modules/bootstrap/dist/css", to: "css"}, - {from: "./node_modules/bootstrap/dist/fonts", to: "fonts"}, - {from: "./node_modules/scrollspy-js/js/scrollspy.js", to: "js"}, - {from: "./node_modules/bootstrap/dist/js/bootstrap.js", to: "js"}, - {from: "./node_modules/jquery/dist/js/jquery.js", to: "js"}, - {from: "./node_modules/blaze/dist/blaze.min.css", to: "css"}, - {from: "./node_modules/nprogress/nprogress.css", to: "css"} + {from: "./node_modules/nprogress/nprogress.css", to: "css", + transform: function(content) { + return content.toString().replace(/#29d/g, "var(--main)"); + } + } ]) ], -- To stop receiving notification emails like this one, please contact chorem.org SCM administrator <admin+scm@chorem.org>.
participants (1)
-
chorem.org scm