Skip to content

Commit

Permalink
Merge pull request #12 from moreonion/datasets_app-tooltips
Browse files Browse the repository at this point in the history 
Datasets app tooltips
  • Loading branch information
@torotil
torotil authored Feb 26, 2019
2 parents ad3bdd3 + af95fe5 commit b4ecdcf
Show file tree
Hide file tree
Showing 5 changed files with 227 additions and 42 deletions.
148 changes: 118 additions & 30 deletions modules_css/vue_app_overrides.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down Expand Up @@ -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;
}
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -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;
}
Expand Down Expand Up @@ -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;
}
96 changes: 96 additions & 0 deletions modules_css/vue_app_overrides/_base.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
9 changes: 8 additions & 1 deletion modules_css/vue_app_overrides/_datasets_app.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -109,7 +109,6 @@
.field-input();
display: inline-block;
width: 12rem;
margin-left: 1rem;
background-color: @active-cell-color;

&[value=""] {
Expand All @@ -118,6 +117,10 @@
}
}

.dsa-filter-tooltip-icon {
margin-left: 0.3rem;
cursor: default;
}

.table-responsive {
overflow-x: auto;
Expand Down Expand Up @@ -205,3 +208,7 @@
}
}
}

.dsa-filter-tooltip .tooltip-arrow {
left: calc(~"50% - 5px")!important;
}
11 changes: 0 additions & 11 deletions modules_css/vue_app_overrides/_messages_app.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down
5 changes: 5 additions & 0 deletions modules_css/vue_app_overrides/_variables.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);

0 comments on commit b4ecdcf

Please sign in to comment.