From 62148e5282958f5121ec0aaef5b30baaff6af7ce Mon Sep 17 00:00:00 2001 From: leiyre Date: Wed, 25 Jan 2023 13:31:43 +0100 Subject: [PATCH] style: Fine tune menu record card (#2240) # Description Include tooltip for event timestamp Include hover status for menu Same space between items in record right area Update tooltip position and size Closes #2224 **Type of change** Please delete options that are not relevant. - [x] Update styles **Checklist** - [x] I have merged the original branch into my forked branch - [x] follows the style guidelines of this project - [x] I did a self-review of my code - [x] My changes generate no new warnings --- frontend/assets/icons/index.js | 2 +- frontend/assets/icons/kebab-menu.js | 27 ---------------- frontend/assets/icons/meatballs.js | 27 ++++++++++++++++ .../scss/abstract/placeholders/_tooltip.scss | 31 ++++++++++++++----- frontend/components/base/BaseButton.vue | 10 ++++++ .../filters/similarity/FilterSimilarity.vue | 11 ++++--- .../commons/results/RecordExtraActions.vue | 13 +++----- .../commons/results/ResultsRecord.vue | 10 ++++-- .../similarity/SimilaritySearch.component.vue | 16 ++-------- .../RecordExtraAtions.spec.js.snap | 7 +++-- frontend/static/icons/kebab-menu.svg | 3 -- frontend/static/icons/meatballs.svg | 5 +++ 12 files changed, 91 insertions(+), 71 deletions(-) delete mode 100644 frontend/assets/icons/kebab-menu.js create mode 100644 frontend/assets/icons/meatballs.js delete mode 100644 frontend/static/icons/kebab-menu.svg create mode 100644 frontend/static/icons/meatballs.svg diff --git a/frontend/assets/icons/index.js b/frontend/assets/icons/index.js index e528178483..a95244b0a8 100644 --- a/frontend/assets/icons/index.js +++ b/frontend/assets/icons/index.js @@ -14,11 +14,11 @@ require('./external') require('./filter') require('./hand-labeling') require('./info') -require('./kebab-menu') require('./link') require('./log-out') require('./matching') require('./math-plus') +require('./meatballs') require('./no-matching') require('./progress') require('./refresh') diff --git a/frontend/assets/icons/kebab-menu.js b/frontend/assets/icons/kebab-menu.js deleted file mode 100644 index 4e4a7e1f9c..0000000000 --- a/frontend/assets/icons/kebab-menu.js +++ /dev/null @@ -1,27 +0,0 @@ -/* - * coding=utf-8 - * Copyright 2021-present, the Recognai S.L. team. - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -/* eslint-disable */ -var icon = require('vue-svgicon') -icon.register({ - 'kebab-menu': { - width: 41, - height: 40, - viewBox: '0 0 41 40', - data: '' - } -}) \ No newline at end of file diff --git a/frontend/assets/icons/meatballs.js b/frontend/assets/icons/meatballs.js new file mode 100644 index 0000000000..d8099d4e16 --- /dev/null +++ b/frontend/assets/icons/meatballs.js @@ -0,0 +1,27 @@ +/* + * coding=utf-8 + * Copyright 2021-present, the Recognai S.L. team. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +/* eslint-disable */ +var icon = require('vue-svgicon') +icon.register({ + 'meatballs': { + width: 16, + height: 16, + viewBox: '0 0 30 8', + data: '' + } +}) \ No newline at end of file diff --git a/frontend/assets/scss/abstract/placeholders/_tooltip.scss b/frontend/assets/scss/abstract/placeholders/_tooltip.scss index d4c215e570..9bf42ae420 100644 --- a/frontend/assets/scss/abstract/placeholders/_tooltip.scss +++ b/frontend/assets/scss/abstract/placeholders/_tooltip.scss @@ -13,7 +13,7 @@ $tooltip-border-radius: $border-radius-s; pointer-events: none; z-index: 2; white-space: nowrap; - padding: $base-space $base-space*2; + padding: 6px $base-space; transform: none; background: $tooltip-bg; color: $tooltip-color; @@ -32,7 +32,12 @@ $tooltip-border-radius: $border-radius-s; right: calc(100% + $tooltip-triangle-size/2); top: 50%; transform: translateY(-50%); - @include triangle(right, $tooltip-triangle-size, $tooltip-triangle-size, $tooltip-bg); + @include triangle( + right, + $tooltip-triangle-size, + $tooltip-triangle-size, + $tooltip-bg + ); } } %has-tooltip--bottom { @@ -45,7 +50,12 @@ $tooltip-border-radius: $border-radius-s; &:before { right: calc(50% - $tooltip-triangle-size/2); top: 100%; - @include triangle(top, $tooltip-triangle-size, $tooltip-triangle-size, $tooltip-bg); + @include triangle( + top, + $tooltip-triangle-size, + $tooltip-triangle-size, + $tooltip-bg + ); } } %has-tooltip--top { @@ -58,7 +68,12 @@ $tooltip-border-radius: $border-radius-s; &:before { right: calc(50% - $tooltip-triangle-size); top: -10px; - @include triangle(bottom, $tooltip-triangle-size, $tooltip-triangle-size, $tooltip-bg); + @include triangle( + bottom, + $tooltip-triangle-size, + $tooltip-triangle-size, + $tooltip-bg + ); } } %tooltip-large-text { @@ -88,17 +103,17 @@ $tooltip-border-radius: $border-radius-s; opacity: 0; pointer-events: none; } - &:hover{ + &:hover { &:after { width: auto; height: auto; opacity: 1; - transition: opacity 0.1s ease 0.2s; + transition: opacity 0.3s ease 0.2s; z-index: 2; } &:before { opacity: 1; - transition: opacity 0.1s ease 0.2s; + transition: opacity 0.3s ease 0.2s; } } -} \ No newline at end of file +} diff --git a/frontend/components/base/BaseButton.vue b/frontend/components/base/BaseButton.vue index cacccfebdd..978c241a63 100644 --- a/frontend/components/base/BaseButton.vue +++ b/frontend/components/base/BaseButton.vue @@ -207,4 +207,14 @@ export default { } } } +.clear { + background: none; + padding: $base-space; + height: 30px; + &:hover, + &:active, + &.active { + background: $black-4; + } +} diff --git a/frontend/components/commons/header/filters/similarity/FilterSimilarity.vue b/frontend/components/commons/header/filters/similarity/FilterSimilarity.vue index 17c308b679..d5bf1e5b33 100644 --- a/frontend/components/commons/header/filters/similarity/FilterSimilarity.vue +++ b/frontend/components/commons/header/filters/similarity/FilterSimilarity.vue @@ -75,12 +75,15 @@ export default { padding: 0 0.8em 0 0.4em; div[data-title] { position: relative; - @extend %has-tooltip--top; + @extend %has-tooltip--bottom; @extend %tooltip-large-text; &:after { - margin-left: 1em; + right: 1em; min-width: 300px; } + &:before { + right: 0.5em !important; + } } &.--active { background: darken(palette(apricot, light), 2%); @@ -88,12 +91,12 @@ export default { align-items: center; &[data-title] { position: relative; - @extend %has-tooltip--top; + @extend %has-tooltip--bottom; &:after { right: 5em !important; } &:before { - right: 3.8em !important; + right: 3.7em !important; } } #{$this}__icon { diff --git a/frontend/components/commons/results/RecordExtraActions.vue b/frontend/components/commons/results/RecordExtraActions.vue index 717ff793f6..8d7d392b64 100644 --- a/frontend/components/commons/results/RecordExtraActions.vue +++ b/frontend/components/commons/results/RecordExtraActions.vue @@ -17,9 +17,9 @@