mirror of
https://github.com/the1812/Bilibili-Evolved.git
synced 2025-11-04 21:22:45 +08:00
New feature: hide navbar component
This commit is contained in:
parent
729ceee564
commit
1e3c0de898
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
2
min/custom-navbar.min.css
vendored
2
min/custom-navbar.min.css
vendored
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 |
2
min/custom-navbar.min.js
vendored
2
min/custom-navbar.min.js
vendored
File diff suppressed because one or more lines are too long
@ -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
|
||||
{
|
||||
|
||||
@ -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 |
@ -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()
|
||||
{
|
||||
|
||||
Loading…
Reference in New Issue
Block a user