From af95fe5251afd731fcda9d236afa462c30477f0a Mon Sep 17 00:00:00 2001 From: mayakokits Date: Thu, 21 Feb 2019 14:54:04 +0100 Subject: [PATCH] [e2t] Add tooltips. --- modules_css/vue_app_overrides.css | 148 ++++++++++++++---- modules_css/vue_app_overrides/_base.less | 96 ++++++++++++ .../vue_app_overrides/_datasets_app.less | 9 +- .../vue_app_overrides/_messages_app.less | 11 -- modules_css/vue_app_overrides/_variables.less | 5 + 5 files changed, 227 insertions(+), 42 deletions(-) diff --git a/modules_css/vue_app_overrides.css b/modules_css/vue_app_overrides.css index 2599fe1..ec155f1 100644 --- a/modules_css/vue_app_overrides.css +++ b/modules_css/vue_app_overrides.css @@ -227,6 +227,117 @@ border-right: .3em solid transparent; border-left: .3em solid transparent; } +.show-help-text { + color: #0275d8; +} +.show-help-text:before { + content: "\e801"; + font-family: "icons"; + font-size: 0.9rem; + font-style: normal; + font-weight: normal; + speak: none; + display: inline-block; + text-decoration: inherit; + width: 1em; + margin-right: 0.2em; + margin-left: 0.2em; + text-align: center; + font-variant: normal; + text-transform: none; + line-height: 1em; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} +.show-help-text > span { + display: none; +} +.show-help-text:focus, +.show-help-text:hover { + text-decoration: none; +} +.v-tooltip { + display: block !important; + z-index: 10000; +} +.v-tooltip .tooltip-inner { + background: #413F3F; + color: #F7F1F1; + border-radius: 0.45rem; + box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1); + padding: 5px 10px 4px; +} +.v-tooltip .tooltip-arrow { + width: 0; + height: 0; + border-style: solid; + position: absolute; + margin: 5px; + border-color: #413F3F; + z-index: 1; +} +.v-tooltip[x-placement^="top"] { + margin-bottom: 5px; +} +.v-tooltip[x-placement^="top"] .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; +} +.v-tooltip[x-placement^="bottom"] { + margin-top: 5px; +} +.v-tooltip[x-placement^="bottom"] .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; +} +.v-tooltip[x-placement^="right"] { + margin-left: 5px; +} +.v-tooltip[x-placement^="right"] .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; +} +.v-tooltip[x-placement^="left"] { + margin-right: 5px; +} +.v-tooltip[x-placement^="left"] .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; +} +.v-tooltip[aria-hidden='true'] { + visibility: hidden; + opacity: 0; + transition: opacity .15s, visibility .15s; +} +.v-tooltip[aria-hidden='false'] { + visibility: visible; + opacity: 1; + transition: opacity .15s; +} .el-dialog { border-radius: 0.45rem; } @@ -456,35 +567,6 @@ .e2tmw .filter-missing { color: #d66540; } -.e2tmw .show-help-text { - color: #0275d8; -} -.e2tmw .show-help-text:before { - content: "\e801"; - font-family: "icons"; - font-size: 0.9rem; - font-style: normal; - font-weight: normal; - speak: none; - display: inline-block; - text-decoration: inherit; - width: 1em; - margin-right: 0.2em; - margin-left: 0.2em; - text-align: center; - font-variant: normal; - text-transform: none; - line-height: 1em; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} -.e2tmw .show-help-text > span { - display: none; -} -.e2tmw .show-help-text:focus, -.e2tmw .show-help-text:hover { - text-decoration: none; -} .e2tmw .el-dialog { max-width: 32rem; } @@ -895,7 +977,6 @@ /* Firefox 18- */ display: inline-block; width: 12rem; - margin-left: 1rem; background-color: #fff5aa; } .datasets-app .dsa-edit-dataset-dialog .VueTables__search input::-webkit-input-placeholder { @@ -924,6 +1005,10 @@ .datasets-app .dsa-edit-dataset-dialog .VueTables__search input[value=""] { background-color: #fff; } +.datasets-app .dsa-edit-dataset-dialog .dsa-filter-tooltip-icon { + margin-left: 0.3rem; + cursor: default; +} .datasets-app .dsa-edit-dataset-dialog .table-responsive { overflow-x: auto; } @@ -994,3 +1079,6 @@ .datasets-app .dsa-edit-dataset-dialog .dsa-edit-value-popup .el-button + .el-button { margin: 0; } +.dsa-filter-tooltip .tooltip-arrow { + left: calc(50% - 5px) !important; +} diff --git a/modules_css/vue_app_overrides/_base.less b/modules_css/vue_app_overrides/_base.less index 234ed73..b9b9739 100644 --- a/modules_css/vue_app_overrides/_base.less +++ b/modules_css/vue_app_overrides/_base.less @@ -232,3 +232,99 @@ border-left: .3em solid transparent; } } + +// small blue info icon +.show-help-text { + .icon(@icon-info-circled, @font-size: 0.9rem); + color: @blue; + & > span { + display: none; + } + &:focus, &:hover { + text-decoration: none; + } +} + +// tooltips via v-tooltip +.v-tooltip { + display: block !important; + z-index: 10000; + .tooltip-inner { + background: @tooltip-bg; + color: @tooltip-color; + border-radius: @tooltip-border-radius; + box-shadow: @tooltip-box-shadow; + padding: 5px 10px 4px; + } + .tooltip-arrow { + width: 0; + height: 0; + border-style: solid; + position: absolute; + margin: 5px; + border-color: @tooltip-bg; + 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; + } + } + &[aria-hidden='true'] { + visibility: hidden; + opacity: 0; + transition: opacity .15s, visibility .15s; + } + &[aria-hidden='false'] { + visibility: visible; + opacity: 1; + transition: opacity .15s; + } +} diff --git a/modules_css/vue_app_overrides/_datasets_app.less b/modules_css/vue_app_overrides/_datasets_app.less index e72568b..289d8d5 100644 --- a/modules_css/vue_app_overrides/_datasets_app.less +++ b/modules_css/vue_app_overrides/_datasets_app.less @@ -109,7 +109,6 @@ .field-input(); display: inline-block; width: 12rem; - margin-left: 1rem; background-color: @active-cell-color; &[value=""] { @@ -118,6 +117,10 @@ } } + .dsa-filter-tooltip-icon { + margin-left: 0.3rem; + cursor: default; + } .table-responsive { overflow-x: auto; @@ -205,3 +208,7 @@ } } } + +.dsa-filter-tooltip .tooltip-arrow { + left: calc(~"50% - 5px")!important; +} diff --git a/modules_css/vue_app_overrides/_messages_app.less b/modules_css/vue_app_overrides/_messages_app.less index 5ee29d5..47d7b31 100644 --- a/modules_css/vue_app_overrides/_messages_app.less +++ b/modules_css/vue_app_overrides/_messages_app.less @@ -137,17 +137,6 @@ color: @red; } - .show-help-text { - .icon(@icon-info-circled, @font-size: 0.9rem); - color: @blue; - & > span { - display: none; - } - &:focus, &:hover { - text-decoration: none; - } - } - .el-dialog { max-width: 32rem; } diff --git a/modules_css/vue_app_overrides/_variables.less b/modules_css/vue_app_overrides/_variables.less index e9f4a55..b62c0f2 100644 --- a/modules_css/vue_app_overrides/_variables.less +++ b/modules_css/vue_app_overrides/_variables.less @@ -40,3 +40,8 @@ @active-cell-color: #fff5aa; @invalid-cell-color: rgba(214, 101, 64, 0.5); + +@tooltip-bg: #413F3F; +@tooltip-color: #F7F1F1; +@tooltip-border-radius: @border-radius; +@tooltip-box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);