Add hover to view border

This commit is contained in:
the1812 2019-05-08 21:12:59 +08:00
parent b6fea71931
commit 606a30eacb
6 changed files with 20 additions and 10 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -138,12 +138,12 @@ li.nav-item[report-id='playpage_dynamic'] .i-frame,
.custom-navbar>ul>li.view-border::before
{
content: "";
width: 100%;
height: 100%;
width: 94%;
height: 94%;
border: 2px dashed #888a;
position: absolute;
top: 0;
left: 0;
top: 3%;
left: 3%;
box-sizing: border-box;
}
.custom-navbar>ul>li:not(.disabled)

View File

@ -45,6 +45,8 @@ const attributes = {
props: ["item"],
template: /*html*/`
<li v-bind:style="{order: item.order}"
v-on:pointerover="viewBorder(true)"
v-on:pointerout="viewBorder(false)"
v-bind:class="{hidden: hidden()}">
<i class="mdi mdi-menu"></i>
{{item.displayName}}
@ -59,6 +61,14 @@ const attributes = {
{
return settings.customNavbarHidden.includes(this.item.name);
},
viewBorder(view)
{
const navbarItem = document.querySelector(`.custom-navbar li[data-name='${this.item.name}']`);
if (navbarItem !== null)
{
navbarItem.classList[view ? "add" : "remove"]("view-border");
}
},
toggleHidden()
{
const isHidden = this.hidden();