Added tooltip menu with header toggles and upcoming filter access.

This commit is contained in:
DebaucheryLibrarian 2020-12-20 23:20:41 +01:00
parent d50cfb8dd6
commit ced8f447a7
12 changed files with 220 additions and 42 deletions

View File

@ -78,39 +78,75 @@
@click.stop="toggleSidebar" @click.stop="toggleSidebar"
><Icon icon="menu" /></div> ><Icon icon="menu" /></div>
<div class="header-toggles"> <v-popover>
<div class="header-account">
<div class="account">
<Icon <Icon
v-show="!sfw" icon="user3-long"
v-tooltip="'Hit S to enable safe mode'" class="avatar"
icon="flower"
class="toggle noselect"
@click.native="setSfw(true)"
/>
<Icon
v-show="sfw"
v-tooltip="'Hit N to disable safe mode'"
icon="fire"
class="toggle noselect"
@click.native="setSfw(false)"
/>
<Icon
v-show="theme === 'light'"
v-tooltip="'Hit D to use dark theme'"
icon="moon"
class="toggle noselect"
@click.native="setTheme('dark')"
/>
<Icon
v-show="theme === 'dark'"
v-tooltip="'Hit L to use light theme'"
icon="sun"
class="toggle noselect"
@click.native="setTheme('light')"
/> />
</div> </div>
</div>
<div
slot="popover"
class="menu"
>
<ul class="menu-items noselect">
<li class="menu-item disabled">
<Icon icon="enter2" />Sign in
</li>
<li
v-show="!sfw"
class="menu-item"
@click="setSfw(true)"
>
<Icon
icon="flower"
class="toggle noselect"
/>Safe mode
</li>
<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" /> <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;
} }
} }

View File

@ -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

View File

@ -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

View File

@ -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

View File

@ -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

View File

@ -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

View File

@ -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

View File

@ -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

View File

@ -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

View File

@ -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

View File

@ -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

View File

@ -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