Mercurial > gemma
changeset 565:4bc27eea4f09
feat: Added tooltips for user roles
Added v-tooltip as library.
Implemented tooltips for user roles
| author | Thomas Junk <thomas.junk@intevation.de> |
|---|---|
| date | Tue, 04 Sep 2018 16:24:39 +0200 |
| parents | 51a0c3e57ba6 |
| children | 5e45f441aed6 |
| files | client/package.json client/src/assets/tooltip.scss client/src/main.js client/src/stores/usermanagement.js client/src/views/Users.vue client/yarn.lock |
| diffstat | 6 files changed, 150 insertions(+), 3 deletions(-) [+] |
line wrap: on
line diff
--- a/client/package.json Tue Sep 04 15:45:06 2018 +0200 +++ b/client/package.json Tue Sep 04 16:24:39 2018 +0200 @@ -18,6 +18,7 @@ "font-awesome": "^4.7.0", "locale2": "^2.2.0", "ol": "^5.0.0", + "v-tooltip": "^2.0.0-rc.33", "vue": "^2.5.16", "vue-router": "^3.0.1", "vuex": "^3.0.1"
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/client/src/assets/tooltip.scss Tue Sep 04 16:24:39 2018 +0200 @@ -0,0 +1,109 @@ +.tooltip { + display: block !important; + z-index: 10000; + + .tooltip-inner { + background: black; + color: white; + border-radius: 16px; + padding: 5px 10px 4px; + } + + .tooltip-arrow { + width: 0; + height: 0; + border-style: solid; + position: absolute; + margin: 5px; + border-color: black; + z-index: 1; + } + + &[x-placement^="top"] { + margin-bottom: 5px; + + .tooltip-arrow { + border-width: 5px 5px 0 5px; + border-left-color: transparent !important; + border-right-color: transparent !important; + border-bottom-color: transparent !important; + bottom: -5px; + left: calc(50% - 5px); + margin-top: 0; + margin-bottom: 0; + } + } + + &[x-placement^="bottom"] { + margin-top: 5px; + + .tooltip-arrow { + border-width: 0 5px 5px 5px; + border-left-color: transparent !important; + border-right-color: transparent !important; + border-top-color: transparent !important; + top: -5px; + left: calc(50% - 5px); + margin-top: 0; + margin-bottom: 0; + } + } + + &[x-placement^="right"] { + margin-left: 5px; + + .tooltip-arrow { + border-width: 5px 5px 5px 0; + border-left-color: transparent !important; + border-top-color: transparent !important; + border-bottom-color: transparent !important; + left: -5px; + top: calc(50% - 5px); + margin-left: 0; + margin-right: 0; + } + } + + &[x-placement^="left"] { + margin-right: 5px; + + .tooltip-arrow { + border-width: 5px 0 5px 5px; + border-top-color: transparent !important; + border-right-color: transparent !important; + border-bottom-color: transparent !important; + right: -5px; + top: calc(50% - 5px); + margin-left: 0; + margin-right: 0; + } + } + + &.popover { + $color: #f9f9f9; + + .popover-inner { + background: $color; + color: black; + padding: 24px; + border-radius: 5px; + box-shadow: 0 5px 30px rgba(black, 0.1); + } + + .popover-arrow { + border-color: $color; + } + } + + &[aria-hidden="true"] { + visibility: hidden; + opacity: 0; + transition: opacity 0.15s, visibility 0.15s; + } + + &[aria-hidden="false"] { + visibility: visible; + opacity: 1; + transition: opacity 0.15s; + } +}
--- a/client/src/main.js Tue Sep 04 15:45:06 2018 +0200 +++ b/client/src/main.js Tue Sep 04 16:24:39 2018 +0200 @@ -11,6 +11,9 @@ import "../node_modules/animate.css/animate.min.css"; import "../node_modules/ol/ol.css"; import "../node_modules/cxlt-vue2-toastr/dist/css/cxlt-vue2-toastr.css"; +import VTooltip from "v-tooltip"; + +Vue.use(VTooltip); var toastrConfigs = { position: "bottom center",
--- a/client/src/stores/usermanagement.js Tue Sep 04 15:45:06 2018 +0200 +++ b/client/src/stores/usermanagement.js Tue Sep 04 16:24:39 2018 +0200 @@ -7,7 +7,8 @@ country: null, role: null, isNew: true, - password: "" + password: "", + roleLabel: "" }; }; @@ -42,7 +43,19 @@ state.userDetailsVisible = true; }, usersLoaded: (state, data) => { - state.users = data.users; + const resolveLabel = x => { + const labels = { + waterway_user: "Waterway User", + waterway_admin: "Waterway Administrator", + sys_admin: "System Admininistrator" + }; + return labels[x]; + }; + let users = data.users.map(u => { + u["roleLabel"] = resolveLabel(u["role"]); + return u; + }); + state.users = users; }, setCurrentUser: (state, data) => { state.currentUser = data;
--- a/client/src/views/Users.vue Tue Sep 04 15:45:06 2018 +0200 +++ b/client/src/views/Users.vue Tue Sep 04 16:24:39 2018 +0200 @@ -40,7 +40,7 @@ <td>{{ user.country }}</td> <td>{{ user.email}}</td> <td> - <i :class="{ + <i v-tooltip="user.roleLabel" :class="{ fa:true, icon:true, 'fa-user':user.role==='waterway_user', @@ -71,6 +71,7 @@ <style lang="scss"> @import "../assets/application.scss"; +@import "../assets/tooltip.scss"; .main { height: 100vh; }
--- a/client/yarn.lock Tue Sep 04 15:45:06 2018 +0200 +++ b/client/yarn.lock Tue Sep 04 16:24:39 2018 +0200 @@ -5575,6 +5575,10 @@ version "4.1.2" resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe" +lodash.merge@^4.6.0: + version "4.6.1" + resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.1.tgz#adc25d9cb99b9391c59624f379fbba60d7111d54" + lodash.mergewith@^4.0.0, lodash.mergewith@^4.6.0: version "4.6.1" resolved "https://registry.yarnpkg.com/lodash.mergewith/-/lodash.mergewith-4.6.1.tgz#639057e726c3afbdb3e7d42741caa8d6e4335927" @@ -6688,6 +6692,10 @@ version "1.0.11" resolved "https://registry.yarnpkg.com/pofile/-/pofile-1.0.11.tgz#35aff58c17491d127a07336d5522ebc9df57c954" +popper.js@^1.12.9: + version "1.14.4" + resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.14.4.tgz#8eec1d8ff02a5a3a152dd43414a15c7b79fd69b6" + portfinder@^1.0.13, portfinder@^1.0.9: version "1.0.17" resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.17.tgz#a8a1691143e46c4735edefcf4fbcccedad26456a" @@ -8818,6 +8826,14 @@ version "3.3.2" resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.3.2.tgz#1b4af4955eb3077c501c23872fc6513811587131" +v-tooltip@^2.0.0-rc.33: + version "2.0.0-rc.33" + resolved "https://registry.yarnpkg.com/v-tooltip/-/v-tooltip-2.0.0-rc.33.tgz#78f7d8e9c34265622be65ba9dc78c67f1dc02b73" + dependencies: + lodash.merge "^4.6.0" + popper.js "^1.12.9" + vue-resize "^0.4.3" + validate-npm-package-license@^3.0.1: version "3.0.4" resolved "https://registry.yarnpkg.com/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz#fc91f6b9c7ba15c857f4cb2c5defeec39d4f410a" @@ -8895,6 +8911,10 @@ vue-hot-reload-api "^2.3.0" vue-style-loader "^4.1.0" +vue-resize@^0.4.3: + version "0.4.4" + resolved "https://registry.yarnpkg.com/vue-resize/-/vue-resize-0.4.4.tgz#dee9b8dd1b189e7e3f6ec47f86c60694a241bb17" + vue-router@^3.0.1: version "3.0.1" resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-3.0.1.tgz#d9b05ad9c7420ba0f626d6500d693e60092cc1e9"