Using Tippy.js for directive tooltips.
This commit is contained in:
DebaucheryLibrarian
parent
8bf9fff7dc
commit
3b91493995
|
|
@ -148,12 +148,14 @@
|
|||
/>Notify me in traxxx
|
||||
</label>
|
||||
|
||||
<!--
|
||||
<label class="alert-label">
|
||||
<Checkbox
|
||||
:checked="email"
|
||||
@change="checked => email = checked"
|
||||
/>Send me an e-mail
|
||||
</label>
|
||||
-->
|
||||
|
||||
<div class="stashes-container">
|
||||
<ul class="stashes nolist">
|
||||
|
|
|
|||
|
|
@ -91,6 +91,13 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<Icon
|
||||
v-if="notification.alert"
|
||||
v-tooltip="`You set an alert for <strong>${notification.alert.tags.map(tag => tag.name).join(', ') || 'all'}</strong> scenes with <strong>${notification.alert.actors.map(actor => actor.name).join(', ') || 'any actor'}</strong> for <strong>${notification.alert.entity?.name || 'any channel'}</strong>`"
|
||||
icon="question5"
|
||||
@click.prevent
|
||||
/>
|
||||
|
||||
<Icon
|
||||
v-if="!notification.seen"
|
||||
v-tooltip="'Mark as seen'"
|
||||
|
|
@ -193,9 +200,18 @@ export default {
|
|||
border-right: solid .5rem var(--primary);
|
||||
}
|
||||
|
||||
.icon {
|
||||
padding: 1rem;
|
||||
fill: var(--shadow-weak);
|
||||
|
||||
&:hover {
|
||||
fill: var(--primary);
|
||||
}
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
.notification-body,
|
||||
.notification-check {
|
||||
.icon {
|
||||
border-bottom: solid 1px var(--shadow-hint);
|
||||
}
|
||||
}
|
||||
|
|
@ -263,15 +279,6 @@ export default {
|
|||
font-weight: bold;
|
||||
}
|
||||
|
||||
.notification-check {
|
||||
padding: 1rem;
|
||||
fill: var(--shadow-weak);
|
||||
|
||||
&:hover {
|
||||
fill: var(--primary);
|
||||
}
|
||||
}
|
||||
|
||||
.poster {
|
||||
width: 5rem;
|
||||
height: 3rem;
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@ import config from 'config';
|
|||
import { createApp } from 'vue';
|
||||
import dayjs from 'dayjs';
|
||||
import mitt from 'mitt';
|
||||
import tippy from 'tippy.js';
|
||||
|
||||
import router from './router';
|
||||
import initStore from './store';
|
||||
|
|
@ -11,6 +12,7 @@ import initAuthObservers from './auth/observers';
|
|||
import { formatDate, formatDuration } from './format';
|
||||
|
||||
import '../css/style.scss';
|
||||
import 'tippy.js/dist/tippy.css';
|
||||
|
||||
import Container from '../components/container/container.vue';
|
||||
import Icon from '../components/icon/icon.vue';
|
||||
|
|
@ -123,8 +125,17 @@ async function init() {
|
|||
|
||||
app.directive('tooltip', {
|
||||
beforeMount(el, binding) {
|
||||
// console.log(binding.modifiers);
|
||||
el.title = binding.value; // eslint-disable-line no-param-reassign
|
||||
// don't include HTML in native title attribute
|
||||
const textEl = document.createElement('div');
|
||||
textEl.innerHTML = binding.value;
|
||||
|
||||
el.title = textEl.textContent; // eslint-disable-line no-param-reassign
|
||||
|
||||
tippy(el, {
|
||||
content: binding.value,
|
||||
allowHTML: true,
|
||||
duration: [0, 0],
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -66,6 +66,14 @@ function initUiActions(store, _router) {
|
|||
slug
|
||||
}
|
||||
}
|
||||
entity: alertsEntityByAlertId {
|
||||
entity {
|
||||
id
|
||||
name
|
||||
slug
|
||||
independent
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -68,6 +68,7 @@
|
|||
"showdown": "^1.9.1",
|
||||
"source-map-support": "^0.5.16",
|
||||
"template-format": "^1.2.5",
|
||||
"tippy.js": "^6.3.1",
|
||||
"tough-cookie": "^3.0.1",
|
||||
"tty-table": "^2.8.12",
|
||||
"tunnel": "0.0.6",
|
||||
|
|
@ -1398,6 +1399,15 @@
|
|||
"upath": "^1.1.1"
|
||||
}
|
||||
},
|
||||
"node_modules/@popperjs/core": {
|
||||
"version": "2.9.2",
|
||||
"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.9.2.tgz",
|
||||
"integrity": "sha512-VZMYa7+fXHdwIq1TDhSXoVmSPEGM/aa+6Aiq3nVVJ9bXr24zScr+NlKFKC3iPljA7ho/GAZr+d2jOf5GIRC30Q==",
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/popperjs"
|
||||
}
|
||||
},
|
||||
"node_modules/@tokenizer/token": {
|
||||
"version": "0.1.1",
|
||||
"resolved": "https://registry.npmjs.org/@tokenizer/token/-/token-0.1.1.tgz",
|
||||
|
|
@ -13748,6 +13758,14 @@
|
|||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/tippy.js": {
|
||||
"version": "6.3.1",
|
||||
"resolved": "https://registry.npmjs.org/tippy.js/-/tippy.js-6.3.1.tgz",
|
||||
"integrity": "sha512-JnFncCq+rF1dTURupoJ4yPie5Cof978inW6/4S6kmWV7LL9YOSEVMifED3KdrVPEG+Z/TFH2CDNJcQEfaeuQww==",
|
||||
"dependencies": {
|
||||
"@popperjs/core": "^2.8.3"
|
||||
}
|
||||
},
|
||||
"node_modules/tmp": {
|
||||
"version": "0.0.33",
|
||||
"resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz",
|
||||
|
|
@ -16755,6 +16773,11 @@
|
|||
"upath": "^1.1.1"
|
||||
}
|
||||
},
|
||||
"@popperjs/core": {
|
||||
"version": "2.9.2",
|
||||
"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.9.2.tgz",
|
||||
"integrity": "sha512-VZMYa7+fXHdwIq1TDhSXoVmSPEGM/aa+6Aiq3nVVJ9bXr24zScr+NlKFKC3iPljA7ho/GAZr+d2jOf5GIRC30Q=="
|
||||
},
|
||||
"@tokenizer/token": {
|
||||
"version": "0.1.1",
|
||||
"resolved": "https://registry.npmjs.org/@tokenizer/token/-/token-0.1.1.tgz",
|
||||
|
|
@ -26804,6 +26827,14 @@
|
|||
"resolved": "https://registry.npmjs.org/tildify/-/tildify-2.0.0.tgz",
|
||||
"integrity": "sha512-Cc+OraorugtXNfs50hU9KS369rFXCfgGLpfCfvlc+Ud5u6VWmUQsOAa9HbTvheQdYnrdJqqv1e5oIqXppMYnSw=="
|
||||
},
|
||||
"tippy.js": {
|
||||
"version": "6.3.1",
|
||||
"resolved": "https://registry.npmjs.org/tippy.js/-/tippy.js-6.3.1.tgz",
|
||||
"integrity": "sha512-JnFncCq+rF1dTURupoJ4yPie5Cof978inW6/4S6kmWV7LL9YOSEVMifED3KdrVPEG+Z/TFH2CDNJcQEfaeuQww==",
|
||||
"requires": {
|
||||
"@popperjs/core": "^2.8.3"
|
||||
}
|
||||
},
|
||||
"tmp": {
|
||||
"version": "0.0.33",
|
||||
"resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz",
|
||||
|
|
|
|||
|
|
@ -129,6 +129,7 @@
|
|||
"showdown": "^1.9.1",
|
||||
"source-map-support": "^0.5.16",
|
||||
"template-format": "^1.2.5",
|
||||
"tippy.js": "^6.3.1",
|
||||
"tough-cookie": "^3.0.1",
|
||||
"tty-table": "^2.8.12",
|
||||
"tunnel": "0.0.6",
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@ module.exports = {
|
|||
],
|
||||
},
|
||||
{
|
||||
test: /\.scss$/,
|
||||
test: /\.s?css$/,
|
||||
use: [
|
||||
MiniCssExtractPlugin.loader,
|
||||
{
|
||||
|
|
|
|||
Loading…
Reference in New Issue