Add order settings

This commit is contained in:
the1812 2019-05-08 15:59:48 +08:00
parent 536b11d703
commit 729ceee564
12 changed files with 183 additions and 58 deletions

View File

@ -55,6 +55,27 @@ declare global
isIncognito: boolean;
version: string;
}
interface CustomNavbarComponents
{
logo: number;
category: number;
rankingLink: number;
drawingLink: number;
musicLink: number;
gamesIframe: number;
livesIframe: number;
shopLink: number;
mangaLink: number;
blank: number;
search: number;
userInfo: number;
messages: number;
activities: number;
watchlaterList: number;
favoritesList: number;
historyList: number;
upload: number;
}
const GM_info: MonkeyInfo;
const unsafeWindow: Window;
class SpinQuery
@ -228,6 +249,8 @@ declare global
customNavbarShadow: boolean,
customNavbarCompact: boolean,
customNavbarBlur: boolean,
customNavbarOrder: { [key in keyof CustomNavbarComponents]: number },
customNavbarHidden: Array<keyof CustomNavbarComponents>,
playerShadow: boolean,
narrowDanmaku: boolean,
favoritesRedirect: boolean,

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -104,6 +104,27 @@ const settings = {
customNavbarShadow: true,
customNavbarCompact: false,
customNavbarBlur: false,
customNavbarOrder: {
logo: 0,
category: 1,
rankingLink: 2,
drawingLink: 3,
musicLink: 4,
gamesIframe: 5,
livesIframe: 6,
shopLink: 7,
mangaLink: 8,
blank: 9,
search: 10,
userInfo: 11,
messages: 12,
activities: 13,
watchlaterList: 14,
favoritesList: 15,
historyList: 16,
upload: 17,
},
customNavbarHidden: [],
playerShadow: false,
narrowDanmaku: true,
favoritesRedirect: true,

View File

@ -104,6 +104,27 @@ const settings = {
customNavbarShadow: true,
customNavbarCompact: false,
customNavbarBlur: false,
customNavbarOrder: {
logo: 0,
category: 1,
rankingLink: 2,
drawingLink: 3,
musicLink: 4,
gamesIframe: 5,
livesIframe: 6,
shopLink: 7,
mangaLink: 8,
blank: 9,
search: 10,
userInfo: 11,
messages: 12,
activities: 13,
watchlaterList: 14,
favoritesList: 15,
historyList: 16,
upload: 17,
},
customNavbarHidden: [],
playerShadow: false,
narrowDanmaku: true,
favoritesRedirect: true,

View File

@ -79,6 +79,27 @@ export const settings = {
customNavbarShadow: true,
customNavbarCompact: false,
customNavbarBlur: false,
customNavbarOrder: {
logo: 0,
category: 1,
rankingLink: 2,
drawingLink: 3,
musicLink: 4,
gamesIframe: 5,
livesIframe: 6,
shopLink: 7,
mangaLink: 8,
blank: 9,
search: 10,
userInfo: 11,
messages: 12,
activities: 13,
watchlaterList: 14,
favoritesList: 15,
historyList: 16,
upload: 17,
},
customNavbarHidden: [],
playerShadow: false,
narrowDanmaku: true,
favoritesRedirect: true,

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

@ -707,7 +707,10 @@ li.nav-item[report-id='playpage_dynamic'] .i-frame,
}
.custom-navbar-settings
{
display: none;
display: flex;
flex-direction: column;
pointer-events: none;
opacity: 0;
width: 500px;
height: 400px;
position: fixed;
@ -727,53 +730,33 @@ li.nav-item[report-id='playpage_dynamic'] .i-frame,
{
color: var(--navbar-foreground);
font-size: 16pt;
font-weight: bold;
}
.custom-navbar-settings.show
{
display: flex;
pointer-events: initial;
opacity: 1;
}
.custom-navbar-settings .style
.custom-navbar-settings .header,
.custom-navbar-settings .orders
{
width: 50%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: stretch;
align-items: stretch;
}
.custom-navbar-settings .style input
{
display: none;
width: 0;
height: 0;
}
.custom-navbar-settings .style-label
{
font-size: 12pt;
padding: 8px 0;
display: flex;
justify-content: space-between;
align-items: center;
}
.custom-navbar-settings .close
{
border: none;
background-color: transparent;
color: var(--navbar-foreground);
padding: 8px;
font-size: 16pt;
cursor: pointer;
}
.custom-navbar-settings .style input ~ span
{
color: var(--navbar-foreground);
}
.custom-navbar-settings .style input:checked ~ span
.custom-navbar-settings .close:hover
{
color: var(--theme-color);
}
.custom-navbar-settings .style input ~ i
{
color: var(--theme-color);
font-size: 20px;
margin-right: 8px;
opacity: 0;
}
.custom-navbar-settings .style input:checked ~ i
{
opacity: 1;
}
.custom-navbar .blur-layer-container
{

View File

@ -313,8 +313,8 @@
<div class="blur-layer right-pad"></div>
</div>
<ul>
<li v-for="component of components" v-bind:data-name="component.name"
v-bind:class="{disabled: component.disabled}" v-bind:style="{flex: component.flex}"
<li v-for="component of components" v-bind:data-name="component.name" v-show="!component.hidden"
v-bind:class="{disabled: component.disabled}" v-bind:style="{flex: component.flex, order: component.order}"
v-on:pointerover="requestPopup(component)">
<a class="main-content" v-if="component.href" v-bind:href="!component.touch && component.href"
v-html="component.html"></a>
@ -330,11 +330,11 @@
<div class="custom-navbar-settings">
<div class="header">
<h1>调整顶栏元素的次序</h1>
<button class="close">
<button class="close" v-on:click="close">
<i class="mdi mdi-close"></i>
</button>
</div>
<div>
<div class="orders">
</div>
</div>

Before

Width:  |  Height:  |  Size: 49 KiB

After

Width:  |  Height:  |  Size: 49 KiB

View File

@ -9,20 +9,26 @@ const attributes = {
<i class="mdi mdi-24px mdi-auto-fix"></i>
<span>顶栏次序</span>
</div>`,
condition: () => false, // TODO: remove this line after complete
condition: () => true, // TODO: remove this line after complete
success: async () =>
{
const settingsPanel = await SpinQuery.select(".custom-navbar-settings");
await SpinQuery.select(".custom-navbar-settings");
// const customNavbar = document.querySelector(".custom-navbar");
document.querySelector("#custom-navbar-settings").addEventListener("click", () =>
{
settingsPanel.classList.toggle("show");
document.querySelector(".custom-navbar-settings").classList.toggle("show");
document.querySelector(".gui-settings-mask").click();
});
new Vue({
el: ".custom-navbar-settings",
data: {
},
methods: {
close()
{
document.querySelector(".custom-navbar-settings").classList.remove("show");
},
},
});
},
},
@ -98,6 +104,14 @@ class NavbarComponent
{
return "undefined";
}
get order()
{
return settings.customNavbarOrder[this.name];
}
get hidden()
{
return settings.customNavbarHidden.includes(this.name);
}
}
class Blank extends NavbarComponent
{
@ -138,7 +152,7 @@ class SimpleLink extends NavbarComponent
}
get name()
{
return this.linkName + "-link";
return this.linkName + "Link";
}
}
class Upload extends NavbarComponent
@ -445,7 +459,7 @@ class UserInfo extends NavbarComponent
}
get name()
{
return "user-info";
return "userInfo";
}
async init()
{
@ -601,7 +615,7 @@ class Iframe extends NavbarComponent
}
get name()
{
return "iframe-" + this.iframeName;
return this.iframeName + "Iframe";
}
}
class NotifyIframe extends Iframe
@ -720,7 +734,7 @@ class VideoList extends NavbarComponent
}
get name()
{
return "list-" + this.listName;
return this.listName + "List";
}
}
class WatchlaterList extends VideoList