Rewrite tooltip UI for efficiency and Vue 3.0 #230
- Introduce a new UI component for tooltips. - Fix tooltip arrow misalignment issues in code download/execution instructions dialogs. Reasons for dropping `v-tooltip` dependency: - Lack of support for Vue 3.0, which blocks migration to Vue 3.0 (see #230). - Inability to render HTML content that's required for privacy.sexy. - Inefficient, adding an extra 162.48 KB to the production bundle for web distribution (tested using `npm run build -- --mode production`). Advantages of adopting `floating-ui` (Floating UI): - Compatibility across multiple Vue versions including 2.0, 2.7, and 3.0. - Reduced boilerplate resulting in cleaner, more maintainable code. - Efficient position recalculations without reinventing the wheel.
This commit is contained in:
@@ -7,5 +7,3 @@
|
||||
@forward "./mixins";
|
||||
|
||||
@forward "./components/card";
|
||||
|
||||
@forward "./third-party-extensions/tooltip.scss";
|
||||
|
||||
@@ -1,45 +0,0 @@
|
||||
// Based on https://github.com/Akryum/v-tooltip/blob/83615e394c96ca491a4df04b892ae87e833beb97/demo-src/src/App.vue#L179-L303
|
||||
@use "@/presentation/assets/styles/colors" as *;
|
||||
|
||||
.tooltip {
|
||||
display: block !important;
|
||||
z-index: 10000;
|
||||
.tooltip-inner {
|
||||
background: $color-primary-darkest;
|
||||
color: $color-on-primary;
|
||||
border-radius: 16px;
|
||||
padding: 5px 10px 4px;
|
||||
}
|
||||
.tooltip-arrow {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
position: absolute;
|
||||
margin: 5px;
|
||||
border-color: $color-primary-darkest;
|
||||
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;
|
||||
}
|
||||
}
|
||||
&[aria-hidden='true'] {
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
transition: opacity .15s, visibility .15s;
|
||||
}
|
||||
&[aria-hidden='false'] {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
transition: opacity .15s;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user