[Pollen-commits] 01/01: personnalisation de l'UI (fix #59)

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>.