forked from DebaucheryLibrarian/traxxx
Added tooltip menu with header toggles and upcoming filter access.
This commit is contained in:
DebaucheryLibrarian
parent
d50cfb8dd6
commit
ced8f447a7
|
|
@ -78,39 +78,75 @@
|
||||||
@click.stop="toggleSidebar"
|
@click.stop="toggleSidebar"
|
||||||
><Icon icon="menu" /></div>
|
><Icon icon="menu" /></div>
|
||||||
|
|
||||||
<div class="header-toggles">
|
<v-popover>
|
||||||
<Icon
|
<div class="header-account">
|
||||||
v-show="!sfw"
|
<div class="account">
|
||||||
v-tooltip="'Hit S to enable safe mode'"
|
<Icon
|
||||||
icon="flower"
|
icon="user3-long"
|
||||||
class="toggle noselect"
|
class="avatar"
|
||||||
@click.native="setSfw(true)"
|
/>
|
||||||
/>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<Icon
|
<div
|
||||||
v-show="sfw"
|
slot="popover"
|
||||||
v-tooltip="'Hit N to disable safe mode'"
|
class="menu"
|
||||||
icon="fire"
|
>
|
||||||
class="toggle noselect"
|
<ul class="menu-items noselect">
|
||||||
@click.native="setSfw(false)"
|
<li class="menu-item disabled">
|
||||||
/>
|
<Icon icon="enter2" />Sign in
|
||||||
|
</li>
|
||||||
|
|
||||||
<Icon
|
<li
|
||||||
v-show="theme === 'light'"
|
v-show="!sfw"
|
||||||
v-tooltip="'Hit D to use dark theme'"
|
class="menu-item"
|
||||||
icon="moon"
|
@click="setSfw(true)"
|
||||||
class="toggle noselect"
|
>
|
||||||
@click.native="setTheme('dark')"
|
<Icon
|
||||||
/>
|
icon="flower"
|
||||||
|
class="toggle noselect"
|
||||||
|
/>Safe mode
|
||||||
|
</li>
|
||||||
|
|
||||||
<Icon
|
<li
|
||||||
v-show="theme === 'dark'"
|
v-show="sfw"
|
||||||
v-tooltip="'Hit L to use light theme'"
|
class="menu-item"
|
||||||
icon="sun"
|
@click="setSfw(false)"
|
||||||
class="toggle noselect"
|
>
|
||||||
@click.native="setTheme('light')"
|
<Icon
|
||||||
/>
|
icon="fire"
|
||||||
</div>
|
class="toggle noselect"
|
||||||
|
/>Filth mode
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li
|
||||||
|
v-show="theme === 'light'"
|
||||||
|
class="menu-item"
|
||||||
|
@click="setTheme('dark')"
|
||||||
|
>
|
||||||
|
<Icon
|
||||||
|
icon="moon"
|
||||||
|
class="toggle noselect"
|
||||||
|
/>Dark theme
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li
|
||||||
|
v-show="theme === 'dark'"
|
||||||
|
class="menu-item"
|
||||||
|
@click="setTheme('light')"
|
||||||
|
>
|
||||||
|
<Icon
|
||||||
|
icon="sun"
|
||||||
|
class="toggle noselect"
|
||||||
|
/>Light theme
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="menu-item">
|
||||||
|
<Icon icon="filter" />Filters
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</v-popover>
|
||||||
|
|
||||||
<Search class="search-full" />
|
<Search class="search-full" />
|
||||||
|
|
||||||
|
|
@ -318,6 +354,73 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.header-account {
|
||||||
|
padding: 1rem;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
.account {
|
||||||
|
border-color: var(--primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatar {
|
||||||
|
fill: var(--primary);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.account {
|
||||||
|
width: 1.25rem;
|
||||||
|
height: 1.25rem;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
border: solid 2px var(--shadow);
|
||||||
|
border-radius: 1.5rem;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
.avatar {
|
||||||
|
width: 1rem;
|
||||||
|
height: 1rem;
|
||||||
|
margin: .3rem 0 0 0;
|
||||||
|
fill: var(--shadow);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-items {
|
||||||
|
list-style: none;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-item {
|
||||||
|
display: flex;
|
||||||
|
padding: .75rem 1rem .75rem .75rem;
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
fill: var(--darken);
|
||||||
|
margin: 0 1rem 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.disabled {
|
||||||
|
color: var(--darken-weak);
|
||||||
|
cursor: default;
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
fill: var(--darken-weak);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover:not(.disabled) {
|
||||||
|
cursor: pointer;
|
||||||
|
color: var(--primary);
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
fill: var(--primary);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.search-compact {
|
.search-compact {
|
||||||
display: none;
|
display: none;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
@ -352,8 +455,8 @@ export default {
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header-toggles {
|
.header-account {
|
||||||
margin: 0;
|
padding: 1rem .5rem 1rem 1rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -374,16 +477,7 @@ export default {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header-toggles {
|
.header-account {
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media(max-width: $breakpoint-micro) {
|
|
||||||
}
|
|
||||||
|
|
||||||
@media(max-width: $breakpoint-nano) {
|
|
||||||
.header-toggles {
|
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,6 @@
|
||||||
|
<!-- Generated by IcoMoon.io -->
|
||||||
|
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
|
||||||
|
<title>enter</title>
|
||||||
|
<path d="M7 13l4.5-4.5-4.5-4.5v3h-7v3h7v3z"></path>
|
||||||
|
<path d="M15 16h-11v-2h10v-11h-10v-2h11c0.552 0 1 0.448 1 1v13c0 0.552-0.448 1-1 1z"></path>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 304 B |
|
|
@ -0,0 +1,5 @@
|
||||||
|
<!-- Generated by IcoMoon.io -->
|
||||||
|
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
|
||||||
|
<title>enter2</title>
|
||||||
|
<path d="M15 0v16h-12v-5h1v3h7v-12h-7v3h-1v-5zM6 9h-6v-2h6v-3l4 4-4 4z"></path>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 240 B |
|
|
@ -0,0 +1,5 @@
|
||||||
|
<!-- Generated by IcoMoon.io -->
|
||||||
|
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
|
||||||
|
<title>enter3</title>
|
||||||
|
<path d="M6 8h-5v-2h5v-2l3 3-3 3zM16 0v13l-6 3v-3h-6v-4h1v3h5v-9l4-2h-9v4h-1v-5z"></path>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 250 B |
|
|
@ -0,0 +1,6 @@
|
||||||
|
<!-- Generated by IcoMoon.io -->
|
||||||
|
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
|
||||||
|
<title>exit</title>
|
||||||
|
<path d="M11 13l4.5-4.5-4.5-4.5v3h-7v3h7v3z"></path>
|
||||||
|
<path d="M1 1h11v2h-10v11h10v2h-11c-0.552 0-1-0.448-1-1v-13c0-0.552 0.448-1 1-1z"></path>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 301 B |
|
|
@ -0,0 +1,5 @@
|
||||||
|
<!-- Generated by IcoMoon.io -->
|
||||||
|
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
|
||||||
|
<title>exit2</title>
|
||||||
|
<path d="M12 9h-7v-2h7v-3l4 4-4 4zM10 10v6h-10v-16h10v6h-1v-4h-5v12h5v-4z"></path>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 242 B |
|
|
@ -0,0 +1,5 @@
|
||||||
|
<!-- Generated by IcoMoon.io -->
|
||||||
|
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
|
||||||
|
<title>exit3</title>
|
||||||
|
<path d="M12 10v-2h-5v-2h5v-2l3 3zM11 9v4h-5v3l-6-3v-13h11v5h-1v-4h-8l4 2v9h4v-3z"></path>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 250 B |
|
|
@ -0,0 +1,5 @@
|
||||||
|
<!-- Generated by IcoMoon.io -->
|
||||||
|
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
|
||||||
|
<title>user-tie</title>
|
||||||
|
<path d="M5 3c0-1.657 1.343-3 3-3s3 1.343 3 3c0 1.657-1.343 3-3 3s-3-1.343-3-3zM12.001 7h-0.553l-3.111 6.316 1.163-5.816-1.5-1.5-1.5 1.5 1.163 5.816-3.111-6.316h-0.554c-1.999 0-1.999 1.344-1.999 3v5h12v-5c0-1.656 0-3-1.999-3z"></path>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 397 B |
|
|
@ -0,0 +1,32 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<svg
|
||||||
|
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||||
|
xmlns:cc="http://creativecommons.org/ns#"
|
||||||
|
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||||
|
xmlns:svg="http://www.w3.org/2000/svg"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
version="1.1"
|
||||||
|
width="16"
|
||||||
|
height="19"
|
||||||
|
viewBox="0 0 16 19"
|
||||||
|
id="svg6">
|
||||||
|
<metadata
|
||||||
|
id="metadata12">
|
||||||
|
<rdf:RDF>
|
||||||
|
<cc:Work
|
||||||
|
rdf:about="">
|
||||||
|
<dc:format>image/svg+xml</dc:format>
|
||||||
|
<dc:type
|
||||||
|
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||||
|
<dc:title>user3</dc:title>
|
||||||
|
</cc:Work>
|
||||||
|
</rdf:RDF>
|
||||||
|
</metadata>
|
||||||
|
<defs
|
||||||
|
id="defs10" />
|
||||||
|
<title
|
||||||
|
id="title2">user3</title>
|
||||||
|
<path
|
||||||
|
d="M 4,4 C 4,1.791 5.791,0 8,0 10.209,0 12,1.791 12,4 12,6.209 10.209,8 8,8 5.791,8 4,6.209 4,4 Z m 8,5 H 4 C 1.791,9 0,10.791 0,13 v 6 H 16 V 13 C 16,10.791 14.209,9 12,9 Z"
|
||||||
|
id="path4" />
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 953 B |
|
|
@ -0,0 +1,5 @@
|
||||||
|
<!-- Generated by IcoMoon.io -->
|
||||||
|
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
|
||||||
|
<title>user3</title>
|
||||||
|
<path d="M4 5c0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.209-1.791 4-4 4s-4-1.791-4-4zM12 10h-8c-2.209 0-4 1.791-4 4v1h16v-1c0-2.209-1.791-4-4-4z"></path>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 307 B |
|
|
@ -0,0 +1,5 @@
|
||||||
|
<!-- Generated by IcoMoon.io -->
|
||||||
|
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
|
||||||
|
<title>user7</title>
|
||||||
|
<path d="M5 4c0-1.657 1.343-3 3-3s3 1.343 3 3c0 1.657-1.343 3-3 3s-3-1.343-3-3zM8 8c-3.314 0-6 3.134-6 7h2c0-2.761 1.791-5 4-5s4 2.239 4 5h2c0-3.866-2.686-7-6-7z"></path>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 330 B |
|
|
@ -0,0 +1,5 @@
|
||||||
|
<!-- Generated by IcoMoon.io -->
|
||||||
|
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
|
||||||
|
<title>users5</title>
|
||||||
|
<path d="M3 6c0-1.105 0.895-2 2-2s2 0.895 2 2c0 1.105-0.895 2-2 2s-2-0.895-2-2zM9 3c0-1.105 0.895-2 2-2s2 0.895 2 2c0 1.105-0.895 2-2 2s-2-0.895-2-2zM5 9c-2.761 0-5 2.686-5 6h1.5c0-0.64 0.103-1.258 0.308-1.837 0.192-0.546 0.465-1.032 0.809-1.446 0.654-0.785 1.501-1.218 2.383-1.218s1.729 0.432 2.383 1.218c0.345 0.414 0.617 0.9 0.809 1.446 0.204 0.579 0.308 1.197 0.308 1.837h1.5c0-3.314-2.239-6-5-6zM11 6c-1.472 0-2.794 0.763-3.709 1.977 0.112 0.049 0.224 0.101 0.335 0.157 0.34 0.173 0.664 0.376 0.97 0.61 0.007-0.009 0.014-0.018 0.022-0.027 0.654-0.785 1.501-1.218 2.383-1.218s1.729 0.432 2.383 1.218c0.345 0.414 0.617 0.9 0.809 1.446 0.204 0.579 0.308 1.197 0.308 1.837h1.5c0-3.314-2.239-6-5-6z"></path>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 868 B |
Loading…
Reference in New Issue