New feature: hide navbar component

This commit is contained in:
the1812 2019-05-08 20:50:19 +08:00
parent 729ceee564
commit 1e3c0de898
8 changed files with 147 additions and 17 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

Before

Width:  |  Height:  |  Size: 45 KiB

After

Width:  |  Height:  |  Size: 45 KiB

File diff suppressed because one or more lines are too long

View File

@ -711,15 +711,14 @@ li.nav-item[report-id='playpage_dynamic'] .i-frame,
flex-direction: column;
pointer-events: none;
opacity: 0;
width: 500px;
height: 400px;
width: 300px;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 10001;
background: var(--navbar-background);
padding: 16px 24px;
padding: 16px 0;
box-shadow: #0002 0 1px 10px 1px;
}
.custom-navbar-settings.dark
@ -744,19 +743,69 @@ li.nav-item[report-id='playpage_dynamic'] .i-frame,
justify-content: space-between;
align-items: center;
}
.custom-navbar-settings .close
.custom-navbar-settings .header
{
padding: 0 24px;
}
.custom-navbar-settings .orders
{
flex-grow: 1;
}
.custom-navbar-settings .order-list
{
padding: 0 24px;
max-height: 75vh;
overflow: auto;
}
.custom-navbar-settings .close,
.custom-navbar-settings button
{
border: none;
background-color: transparent;
color: var(--navbar-foreground);
padding: 8px;
font-size: 16pt;
cursor: pointer;
}
.custom-navbar-settings .close
{
font-size: 16pt;
}
.custom-navbar-settings button
{
font-size: 14pt;
}
.custom-navbar-settings .close:hover
{
color: var(--theme-color);
}
.custom-navbar-settings .order-list
{
list-style: none;
width: 100%;
margin: 16px 0;
}
.custom-navbar-settings .order-list li .mdi-menu
{
padding: 8px;
}
.custom-navbar-settings .order-list i
{
font-size: 14pt;
}
.custom-navbar-settings .order-list li
{
color: var(--navbar-foreground);
font-size: 12pt;
cursor: move;
display: flex !important;
justify-content: space-between;
align-items: center;
user-select: none;
}
.custom-navbar-settings .order-list li.hidden
{
opacity: 0.5;
}
.custom-navbar .blur-layer-container
{

View File

@ -335,6 +335,8 @@
</button>
</div>
<div class="orders">
<ul class="order-list">
<order-item v-for="item of orderList" v-bind:key="item.name" v-bind:item="item"></order-item>
</ul>
</div>
</div>

Before

Width:  |  Height:  |  Size: 49 KiB

After

Width:  |  Height:  |  Size: 49 KiB

View File

@ -19,10 +19,89 @@ const attributes = {
document.querySelector(".custom-navbar-settings").classList.toggle("show");
document.querySelector(".gui-settings-mask").click();
});
const displayNames = {
logo: "Logo",
category: "主站及分区",
rankingLink: "排行",
drawingLink: "画友",
musicLink: "音频",
gamesIframe: "游戏中心",
livesIframe: "直播",
shopLink: "会员购",
mangaLink: "漫画",
blank: "弹性空白",
search: "搜索框",
userInfo: "用户信息",
messages: "消息",
activities: "动态",
watchlaterList: "稍后再看",
favoritesList: "收藏",
historyList: "历史",
upload: "投稿入口",
};
Vue.component("order-item", {
props: ["item"],
template: /*html*/`
<li v-bind:style="{order: item.order}"
v-bind:class="{hidden: hidden()}">
<i class="mdi mdi-menu"></i>
{{item.displayName}}
<button v-on:click="toggleHidden()">
<i v-if="hidden()" class="mdi mdi-eye-off"></i>
<i v-else class="mdi mdi-eye"></i>
</button>
</li>
`,
methods: {
hidden()
{
return settings.customNavbarHidden.includes(this.item.name);
},
toggleHidden()
{
const isHidden = this.hidden();
if (isHidden === false)
{
settings.customNavbarHidden.push(this.item.name);
settings.customNavbarHidden = settings.customNavbarHidden;
}
else
{
const index = settings.customNavbarHidden.indexOf(this.item.name);
if (index === -1)
{
return;
}
settings.customNavbarHidden.splice(index, 1);
settings.customNavbarHidden = settings.customNavbarHidden;
}
this.$forceUpdate();
const navbarItem = document.querySelector(`.custom-navbar li[data-name='${this.item.name}']`);
if (navbarItem !== null)
{
navbarItem.style.display = isHidden ? "flex" : "none";
}
}
}
});
new Vue({
el: ".custom-navbar-settings",
data: {
},
computed: {
orderList()
{
const orders = Object.entries(settings.customNavbarOrder);
return orders.sort((a, b) => a[1] - b[1]).map(it =>
{
return {
displayName: displayNames[it[0]],
name: it[0],
order: it[1],
};
});
},
},
methods: {
close()
{