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"
|
||||
><Icon icon="menu" /></div>
|
||||
|
||||
<div class="header-toggles">
|
||||
<Icon
|
||||
v-show="!sfw"
|
||||
v-tooltip="'Hit S to enable safe mode'"
|
||||
icon="flower"
|
||||
class="toggle noselect"
|
||||
@click.native="setSfw(true)"
|
||||
/>
|
||||
<v-popover>
|
||||
<div class="header-account">
|
||||
<div class="account">
|
||||
<Icon
|
||||
icon="user3-long"
|
||||
class="avatar"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Icon
|
||||
v-show="sfw"
|
||||
v-tooltip="'Hit N to disable safe mode'"
|
||||
icon="fire"
|
||||
class="toggle noselect"
|
||||
@click.native="setSfw(false)"
|
||||
/>
|
||||
<div
|
||||
slot="popover"
|
||||
class="menu"
|
||||
>
|
||||
<ul class="menu-items noselect">
|
||||
<li class="menu-item disabled">
|
||||
<Icon icon="enter2" />Sign in
|
||||
</li>
|
||||
|
||||
<Icon
|
||||
v-show="theme === 'light'"
|
||||
v-tooltip="'Hit D to use dark theme'"
|
||||
icon="moon"
|
||||
class="toggle noselect"
|
||||
@click.native="setTheme('dark')"
|
||||
/>
|
||||
<li
|
||||
v-show="!sfw"
|
||||
class="menu-item"
|
||||
@click="setSfw(true)"
|
||||
>
|
||||
<Icon
|
||||
icon="flower"
|
||||
class="toggle noselect"
|
||||
/>Safe mode
|
||||
</li>
|
||||
|
||||
<Icon
|
||||
v-show="theme === 'dark'"
|
||||
v-tooltip="'Hit L to use light theme'"
|
||||
icon="sun"
|
||||
class="toggle noselect"
|
||||
@click.native="setTheme('light')"
|
||||
/>
|
||||
</div>
|
||||
<li
|
||||
v-show="sfw"
|
||||
class="menu-item"
|
||||
@click="setSfw(false)"
|
||||
>
|
||||
<Icon
|
||||
icon="fire"
|
||||
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" />
|
||||
|
||||
|
|
@ -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 {
|
||||
display: none;
|
||||
height: 100%;
|
||||
|
|
@ -352,8 +455,8 @@ export default {
|
|||
display: flex;
|
||||
}
|
||||
|
||||
.header-toggles {
|
||||
margin: 0;
|
||||
.header-account {
|
||||
padding: 1rem .5rem 1rem 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -374,16 +477,7 @@ export default {
|
|||
display: none;
|
||||
}
|
||||
|
||||
.header-toggles {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width: $breakpoint-micro) {
|
||||
}
|
||||
|
||||
@media(max-width: $breakpoint-nano) {
|
||||
.header-toggles {
|
||||
.header-account {
|
||||
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