mirror of
https://github.com/the1812/Bilibili-Evolved.git
synced 2025-11-04 21:22:45 +08:00
Add bounds padding
This commit is contained in:
parent
07c0a41d47
commit
a235c366e2
1
@types/global/index.d.ts
vendored
1
@types/global/index.d.ts
vendored
@ -253,6 +253,7 @@ declare global
|
|||||||
customNavbarBlur: boolean,
|
customNavbarBlur: boolean,
|
||||||
customNavbarOrder: { [key in keyof CustomNavbarComponents]: number },
|
customNavbarOrder: { [key in keyof CustomNavbarComponents]: number },
|
||||||
customNavbarHidden: Array<keyof CustomNavbarComponents>,
|
customNavbarHidden: Array<keyof CustomNavbarComponents>,
|
||||||
|
customNavbarBoundsPadding: number,
|
||||||
playerShadow: boolean,
|
playerShadow: boolean,
|
||||||
narrowDanmaku: boolean,
|
narrowDanmaku: boolean,
|
||||||
favoritesRedirect: 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
@ -127,6 +127,7 @@ const settings = {
|
|||||||
blank3: 19
|
blank3: 19
|
||||||
},
|
},
|
||||||
customNavbarHidden: [],
|
customNavbarHidden: [],
|
||||||
|
customNavbarBoundsPadding: 5,
|
||||||
playerShadow: false,
|
playerShadow: false,
|
||||||
narrowDanmaku: true,
|
narrowDanmaku: true,
|
||||||
favoritesRedirect: true,
|
favoritesRedirect: true,
|
||||||
@ -1833,6 +1834,12 @@ Resource.manifest = {
|
|||||||
slip: "Slip.js"
|
slip: "Slip.js"
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
debounce: {
|
||||||
|
path: "debounce.min.js",
|
||||||
|
displayNames: {
|
||||||
|
slip: "debounce.js"
|
||||||
|
},
|
||||||
|
},
|
||||||
};
|
};
|
||||||
const resourceManifest = Resource.manifest;
|
const resourceManifest = Resource.manifest;
|
||||||
class StyleManager
|
class StyleManager
|
||||||
|
|||||||
@ -127,6 +127,7 @@ const settings = {
|
|||||||
blank3: 19
|
blank3: 19
|
||||||
},
|
},
|
||||||
customNavbarHidden: [],
|
customNavbarHidden: [],
|
||||||
|
customNavbarBoundsPadding: 5,
|
||||||
playerShadow: false,
|
playerShadow: false,
|
||||||
narrowDanmaku: true,
|
narrowDanmaku: true,
|
||||||
favoritesRedirect: true,
|
favoritesRedirect: true,
|
||||||
@ -1833,6 +1834,12 @@ Resource.manifest = {
|
|||||||
slip: "Slip.js"
|
slip: "Slip.js"
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
debounce: {
|
||||||
|
path: "debounce.min.js",
|
||||||
|
displayNames: {
|
||||||
|
slip: "debounce.js"
|
||||||
|
},
|
||||||
|
},
|
||||||
};
|
};
|
||||||
const resourceManifest = Resource.manifest;
|
const resourceManifest = Resource.manifest;
|
||||||
class StyleManager
|
class StyleManager
|
||||||
|
|||||||
@ -597,5 +597,11 @@ Resource.manifest = {
|
|||||||
slip: "Slip.js"
|
slip: "Slip.js"
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
debounce: {
|
||||||
|
path: "debounce.min.js",
|
||||||
|
displayNames: {
|
||||||
|
slip: "debounce.js"
|
||||||
|
},
|
||||||
|
},
|
||||||
};
|
};
|
||||||
export const resourceManifest = Resource.manifest;
|
export const resourceManifest = Resource.manifest;
|
||||||
@ -102,6 +102,7 @@ export const settings = {
|
|||||||
blank3: 19
|
blank3: 19
|
||||||
},
|
},
|
||||||
customNavbarHidden: [],
|
customNavbarHidden: [],
|
||||||
|
customNavbarBoundsPadding: 5,
|
||||||
playerShadow: false,
|
playerShadow: false,
|
||||||
narrowDanmaku: true,
|
narrowDanmaku: true,
|
||||||
favoritesRedirect: true,
|
favoritesRedirect: true,
|
||||||
|
|||||||
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: 46 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
1
min/debounce.min.js
vendored
Normal file
1
min/debounce.min.js
vendored
Normal file
@ -0,0 +1 @@
|
|||||||
|
(()=>{return(n,l)=>{function u(n,l,u){var e,t,i,r,f;if(null==l)l=100;function o(){var a=Date.now()-r;if(a<l&&a>=0){e=setTimeout(o,l-a)}else{e=null;if(!u){f=n.apply(i,t);i=t=null}}}var a=function(){i=this;t=arguments;r=Date.now();var a=u&&!e;if(!e)e=setTimeout(o,l);if(a){f=n.apply(i,t);i=t=null}return f};a.clear=function(){if(e){clearTimeout(e);e=null}};a.flush=function(){if(e){f=n.apply(i,t);i=t=null;clearTimeout(e);e=null}};return a}return{export:{debounce:u}}}})();
|
||||||
@ -20,6 +20,7 @@ body
|
|||||||
--navbar-height: 50px;
|
--navbar-height: 50px;
|
||||||
--navbar-foreground: #555;
|
--navbar-foreground: #555;
|
||||||
--navbar-background: white;
|
--navbar-background: white;
|
||||||
|
--navbar-bounds-padding: 0 5%;
|
||||||
}
|
}
|
||||||
body.no-banner #banner_link,
|
body.no-banner #banner_link,
|
||||||
body.no-banner .z-top-container.has-banner>.header,
|
body.no-banner .z-top-container.has-banner>.header,
|
||||||
@ -114,7 +115,7 @@ li.nav-item[report-id='playpage_dynamic'] .i-frame,
|
|||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
margin: 0 5%;
|
margin: var(--navbar-bounds-padding);
|
||||||
height: 100%;
|
height: 100%;
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
}
|
}
|
||||||
@ -767,7 +768,7 @@ li.nav-item[report-id='playpage_dynamic'] .i-frame,
|
|||||||
.custom-navbar-settings .order-list
|
.custom-navbar-settings .order-list
|
||||||
{
|
{
|
||||||
padding: 0 24px;
|
padding: 0 24px;
|
||||||
max-height: 77vh;
|
max-height: 60vh;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
overscroll-behavior: contain;
|
overscroll-behavior: contain;
|
||||||
}
|
}
|
||||||
@ -824,6 +825,49 @@ li.nav-item[report-id='playpage_dynamic'] .i-frame,
|
|||||||
{
|
{
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
}
|
}
|
||||||
|
.custom-navbar-settings .paddings
|
||||||
|
{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 16px 32px;
|
||||||
|
color: var(--navbar-foreground);
|
||||||
|
}
|
||||||
|
.custom-navbar-settings .paddings span
|
||||||
|
{
|
||||||
|
min-width: 40px;
|
||||||
|
}
|
||||||
|
.custom-navbar-settings .paddings input
|
||||||
|
{
|
||||||
|
flex-grow: 1;
|
||||||
|
margin-right: 16px;
|
||||||
|
-webkit-appearance: none;
|
||||||
|
background: transparent;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.custom-navbar-settings .paddings input::-webkit-slider-thumb,
|
||||||
|
.custom-navbar-settings .paddings input::-moz-range-thumb
|
||||||
|
{
|
||||||
|
-webkit-appearance: none;
|
||||||
|
height: 18px;
|
||||||
|
width: 18px;
|
||||||
|
background: var(--theme-color);
|
||||||
|
border-radius: 50%;
|
||||||
|
box-shadow: 0 2px 8px 0 var(--theme-color-50);
|
||||||
|
cursor: pointer;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
.custom-navbar-settings .paddings input::-webkit-slider-thumb
|
||||||
|
{
|
||||||
|
transform: translateY(-7px);
|
||||||
|
}
|
||||||
|
.custom-navbar-settings .paddings input::-webkit-slider-runnable-track,
|
||||||
|
.custom-navbar-settings .paddings input::-moz-range-track
|
||||||
|
{
|
||||||
|
width: 100%;
|
||||||
|
background: #8884;
|
||||||
|
height: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
.custom-navbar .blur-layer-container
|
.custom-navbar .blur-layer-container
|
||||||
{
|
{
|
||||||
|
|||||||
@ -334,8 +334,15 @@
|
|||||||
<i class="mdi mdi-close"></i>
|
<i class="mdi mdi-close"></i>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="header">
|
<div class="header paddings-desc">
|
||||||
拖动可以改变它们的顺序, 点击眼睛图标可以显示/隐藏它们.
|
边缘间距: 设定两侧边缘处的间距, 单位为百分比, 100%为整个顶栏的宽度. 允许设置的范围为 0% ~ 40%
|
||||||
|
</div>
|
||||||
|
<div class="paddings">
|
||||||
|
<input type="range" min="0" max="40" step="0.5" v-model="boundsPadding">
|
||||||
|
<span>{{boundsPadding}}%</span>
|
||||||
|
</div>
|
||||||
|
<div class="header orders-desc">
|
||||||
|
顺序与显示: 在左侧的条状图标上拖动可以改变它们的顺序, 或者按住名字一会再拖动也可以调顺序. 点击右侧的眼睛图标可以显示/隐藏它们.
|
||||||
</div>
|
</div>
|
||||||
<div class="orders">
|
<div class="orders">
|
||||||
<ul class="order-list">
|
<ul class="order-list">
|
||||||
|
|||||||
|
Before Width: | Height: | Size: 49 KiB After Width: | Height: | Size: 50 KiB |
@ -15,6 +15,7 @@ const attributes = {
|
|||||||
{
|
{
|
||||||
await SpinQuery.select(".custom-navbar-settings");
|
await SpinQuery.select(".custom-navbar-settings");
|
||||||
await import("slip");
|
await import("slip");
|
||||||
|
const { debounce } = await import("debounce");
|
||||||
// const customNavbar = document.querySelector(".custom-navbar");
|
// const customNavbar = document.querySelector(".custom-navbar");
|
||||||
document.querySelector("#custom-navbar-settings").addEventListener("click", () =>
|
document.querySelector("#custom-navbar-settings").addEventListener("click", () =>
|
||||||
{
|
{
|
||||||
@ -97,6 +98,12 @@ const attributes = {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const updateBoundsPadding = debounce(value =>
|
||||||
|
{
|
||||||
|
settings.customNavbarBoundsPadding = value;
|
||||||
|
document.body.style.setProperty("--navbar-bounds-padding", `0 ${value}%`);
|
||||||
|
}, 200);
|
||||||
new Vue({
|
new Vue({
|
||||||
el: ".custom-navbar-settings",
|
el: ".custom-navbar-settings",
|
||||||
mounted()
|
mounted()
|
||||||
@ -167,6 +174,15 @@ const attributes = {
|
|||||||
});
|
});
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
data: {
|
||||||
|
boundsPadding: settings.customNavbarBoundsPadding,
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
boundsPadding(value)
|
||||||
|
{
|
||||||
|
updateBoundsPadding(value);
|
||||||
|
},
|
||||||
|
},
|
||||||
methods: {
|
methods: {
|
||||||
close()
|
close()
|
||||||
{
|
{
|
||||||
|
|||||||
83
utils/debounce.js
Normal file
83
utils/debounce.js
Normal file
@ -0,0 +1,83 @@
|
|||||||
|
// https://github.com/component/debounce/
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Returns a function, that, as long as it continues to be invoked, will not
|
||||||
|
* be triggered. The function will be called after it stops being called for
|
||||||
|
* N milliseconds. If `immediate` is passed, trigger the function on the
|
||||||
|
* leading edge, instead of the trailing. The function also has a property 'clear'
|
||||||
|
* that is a function which will clear the timer to prevent previously scheduled executions.
|
||||||
|
*
|
||||||
|
* @source underscore.js
|
||||||
|
* @see http://unscriptable.com/2009/03/20/debouncing-javascript-methods/
|
||||||
|
* @param {Function} function to wrap
|
||||||
|
* @param {Number} timeout in ms (`100`)
|
||||||
|
* @param {Boolean} whether to execute at the beginning (`false`)
|
||||||
|
* @api public
|
||||||
|
*/
|
||||||
|
export function debounce(func, wait, immediate)
|
||||||
|
{
|
||||||
|
var timeout, args, context, timestamp, result;
|
||||||
|
if (null == wait) wait = 100;
|
||||||
|
|
||||||
|
function later()
|
||||||
|
{
|
||||||
|
var last = Date.now() - timestamp;
|
||||||
|
|
||||||
|
if (last < wait && last >= 0)
|
||||||
|
{
|
||||||
|
timeout = setTimeout(later, wait - last);
|
||||||
|
} else
|
||||||
|
{
|
||||||
|
timeout = null;
|
||||||
|
if (!immediate)
|
||||||
|
{
|
||||||
|
result = func.apply(context, args);
|
||||||
|
context = args = null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
var debounced = function ()
|
||||||
|
{
|
||||||
|
context = this;
|
||||||
|
args = arguments;
|
||||||
|
timestamp = Date.now();
|
||||||
|
var callNow = immediate && !timeout;
|
||||||
|
if (!timeout) timeout = setTimeout(later, wait);
|
||||||
|
if (callNow)
|
||||||
|
{
|
||||||
|
result = func.apply(context, args);
|
||||||
|
context = args = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
return result;
|
||||||
|
};
|
||||||
|
|
||||||
|
debounced.clear = function ()
|
||||||
|
{
|
||||||
|
if (timeout)
|
||||||
|
{
|
||||||
|
clearTimeout(timeout);
|
||||||
|
timeout = null;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
debounced.flush = function ()
|
||||||
|
{
|
||||||
|
if (timeout)
|
||||||
|
{
|
||||||
|
result = func.apply(context, args);
|
||||||
|
context = args = null;
|
||||||
|
|
||||||
|
clearTimeout(timeout);
|
||||||
|
timeout = null;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return debounced;
|
||||||
|
};
|
||||||
|
export default {
|
||||||
|
export: {
|
||||||
|
debounce,
|
||||||
|
},
|
||||||
|
};
|
||||||
Loading…
Reference in New Issue
Block a user