Using teleport for tooltips. Moved theme class to body tag with UI observer.
This commit is contained in:
parent
12f247a927
commit
229d74d266
|
@ -1,8 +1,5 @@
|
|||
<template>
|
||||
<div
|
||||
class="container"
|
||||
:class="theme"
|
||||
>
|
||||
<div class="container">
|
||||
<Warning
|
||||
v-if="showWarning"
|
||||
class="warning-container"
|
||||
|
@ -26,16 +23,10 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'vuex';
|
||||
|
||||
import Warning from './warning.vue';
|
||||
import Header from '../header/header.vue';
|
||||
import Sidebar from '../sidebar/sidebar.vue';
|
||||
|
||||
function theme(state) {
|
||||
return state.ui.theme;
|
||||
}
|
||||
|
||||
function toggleSidebar(state) {
|
||||
this.showSidebar = typeof state === 'boolean' ? state : !this.showSidebar;
|
||||
}
|
||||
|
@ -59,11 +50,6 @@ export default {
|
|||
showWarning: localStorage.getItem('consent') !== window.env.sessionId,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
theme,
|
||||
}),
|
||||
},
|
||||
methods: {
|
||||
toggleSidebar,
|
||||
setConsent,
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<v-popover class="filter-container">
|
||||
<Tooltip class="filter-container">
|
||||
<div class="filter">
|
||||
<Icon icon="users" />
|
||||
|
||||
|
@ -14,7 +14,8 @@
|
|||
>Actors</div>
|
||||
</div>
|
||||
|
||||
<div slot="popover">
|
||||
<template v-slot:tooltip>
|
||||
<div>
|
||||
<router-link
|
||||
class="filter-clear"
|
||||
:to="{ query: { ...$route.query, actors: undefined } }"
|
||||
|
@ -53,7 +54,8 @@
|
|||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</v-popover>
|
||||
</template>
|
||||
</Tooltip>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<v-popover class="filter-container">
|
||||
<Tooltip class="filter-container">
|
||||
<div class="filter">
|
||||
<Icon icon="antenna" />
|
||||
|
||||
|
@ -14,6 +14,7 @@
|
|||
>Channels</div>
|
||||
</div>
|
||||
|
||||
<template v-slot:popover>
|
||||
<div slot="popover">
|
||||
<router-link
|
||||
class="filter-clear"
|
||||
|
@ -67,7 +68,8 @@
|
|||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</v-popover>
|
||||
</template>
|
||||
</Tooltip>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
@ -20,7 +20,6 @@
|
|||
>New</router-link>
|
||||
</div>
|
||||
|
||||
<!--
|
||||
<div class="filters">
|
||||
<ActorFilter
|
||||
class="filters-filter"
|
||||
|
@ -40,7 +39,6 @@
|
|||
:available-tags="availableTags"
|
||||
/>
|
||||
</div>
|
||||
-->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<v-popover class="filter-container">
|
||||
<Tooltip class="filter-container">
|
||||
<div class="filter">
|
||||
<Icon icon="price-tag4" />
|
||||
|
||||
|
@ -14,7 +14,8 @@
|
|||
>Tags</div>
|
||||
</div>
|
||||
|
||||
<div slot="popover">
|
||||
<template v-slot:tooltip>
|
||||
<div>
|
||||
<select
|
||||
v-model="mode"
|
||||
class="filter-mode"
|
||||
|
@ -59,7 +60,8 @@
|
|||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</v-popover>
|
||||
</template>
|
||||
</Tooltip>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
@ -82,7 +82,7 @@
|
|||
@click.stop="toggleSidebar"
|
||||
><Icon icon="menu" /></div>
|
||||
|
||||
<v-popover>
|
||||
<Tooltip>
|
||||
<div class="header-account">
|
||||
<div class="account">
|
||||
<Icon
|
||||
|
@ -92,7 +92,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<template v-slot:popover>
|
||||
<template v-slot:tooltip>
|
||||
<div class="menu">
|
||||
<ul class="menu-items noselect">
|
||||
<li class="menu-item disabled">
|
||||
|
@ -149,11 +149,11 @@
|
|||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
</v-popover>
|
||||
</Tooltip>
|
||||
|
||||
<Search class="search-full" />
|
||||
|
||||
<v-popover
|
||||
<Tooltip
|
||||
class="search-compact"
|
||||
:open="searching"
|
||||
@show="searching = true"
|
||||
|
@ -167,12 +167,12 @@
|
|||
/></button>
|
||||
|
||||
<Search
|
||||
slot="popover"
|
||||
slot="tooltip"
|
||||
:searching="searching"
|
||||
class="compact"
|
||||
@search="searching = false"
|
||||
/>
|
||||
</v-popover>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</header>
|
||||
</template>
|
||||
|
|
|
@ -4,24 +4,34 @@
|
|||
<slot />
|
||||
</div>
|
||||
|
||||
<teleport to="body">
|
||||
<div class="tooltip">
|
||||
<div class="tooltip-wrapper">
|
||||
<slot name="popover" />
|
||||
<slot name="tooltip" />
|
||||
</div>
|
||||
</div>
|
||||
</teleport>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.tooltip-container {
|
||||
position: relative;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.tooltip-frame {
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
.tooltip {
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
top: 2rem;
|
||||
background: var(--background);
|
||||
background: var(--background-light);
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -12,6 +12,9 @@ $breakpoint4: 1500px;
|
|||
--text-dark: #222;
|
||||
--text-light: #fff;
|
||||
|
||||
--background-light: #fff;
|
||||
--background-dark: #222;
|
||||
|
||||
--darken: rgba(0, 0, 0, .5);
|
||||
--darken-strong: rgba(0, 0, 0, .7);
|
||||
--darken-extreme: rgba(0, 0, 0, .9);
|
||||
|
@ -40,7 +43,7 @@ $breakpoint4: 1500px;
|
|||
--text: #222;
|
||||
--text-contrast: #fff;
|
||||
|
||||
--background: #fff;
|
||||
--background: var(--background-light);
|
||||
--background-dim: #fafafa;
|
||||
--background-soft: #fdfdfd;
|
||||
|
||||
|
@ -71,7 +74,7 @@ $breakpoint4: 1500px;
|
|||
--text: #fff;
|
||||
--text-contrast: #222;
|
||||
|
||||
--background: #222;
|
||||
--background: var(--background-dark);
|
||||
--background-dim: #181818;
|
||||
--background-soft: #111;
|
||||
|
||||
|
|
|
@ -1,4 +1,13 @@
|
|||
function initUiObservers(store, _router) {
|
||||
const body = document.querySelector('body');
|
||||
|
||||
body.classList.add(store.state.ui.theme);
|
||||
|
||||
store.watch(state => state.ui.theme, (newTheme, oldTheme) => {
|
||||
body.classList.add(newTheme);
|
||||
body.classList.remove(oldTheme);
|
||||
});
|
||||
|
||||
document.addEventListener('keypress', (event) => {
|
||||
if (event.target.tagName === 'INPUT') {
|
||||
return;
|
||||
|
|
Loading…
Reference in New Issue