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,
|
||||
customNavbarOrder: { [key in keyof CustomNavbarComponents]: number },
|
||||
customNavbarHidden: Array<keyof CustomNavbarComponents>,
|
||||
customNavbarBoundsPadding: number,
|
||||
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
@ -127,6 +127,7 @@ const settings = {
|
||||
blank3: 19
|
||||
},
|
||||
customNavbarHidden: [],
|
||||
customNavbarBoundsPadding: 5,
|
||||
playerShadow: false,
|
||||
narrowDanmaku: true,
|
||||
favoritesRedirect: true,
|
||||
@ -1833,6 +1834,12 @@ Resource.manifest = {
|
||||
slip: "Slip.js"
|
||||
},
|
||||
},
|
||||
debounce: {
|
||||
path: "debounce.min.js",
|
||||
displayNames: {
|
||||
slip: "debounce.js"
|
||||
},
|
||||
},
|
||||
};
|
||||
const resourceManifest = Resource.manifest;
|
||||
class StyleManager
|
||||
|
||||
@ -127,6 +127,7 @@ const settings = {
|
||||
blank3: 19
|
||||
},
|
||||
customNavbarHidden: [],
|
||||
customNavbarBoundsPadding: 5,
|
||||
playerShadow: false,
|
||||
narrowDanmaku: true,
|
||||
favoritesRedirect: true,
|
||||
@ -1833,6 +1834,12 @@ Resource.manifest = {
|
||||
slip: "Slip.js"
|
||||
},
|
||||
},
|
||||
debounce: {
|
||||
path: "debounce.min.js",
|
||||
displayNames: {
|
||||
slip: "debounce.js"
|
||||
},
|
||||
},
|
||||
};
|
||||
const resourceManifest = Resource.manifest;
|
||||
class StyleManager
|
||||
|
||||
@ -597,5 +597,11 @@ Resource.manifest = {
|
||||
slip: "Slip.js"
|
||||
},
|
||||
},
|
||||
debounce: {
|
||||
path: "debounce.min.js",
|
||||
displayNames: {
|
||||
slip: "debounce.js"
|
||||
},
|
||||
},
|
||||
};
|
||||
export const resourceManifest = Resource.manifest;
|
||||
@ -102,6 +102,7 @@ export const settings = {
|
||||
blank3: 19
|
||||
},
|
||||
customNavbarHidden: [],
|
||||
customNavbarBoundsPadding: 5,
|
||||
playerShadow: false,
|
||||
narrowDanmaku: 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-foreground: #555;
|
||||
--navbar-background: white;
|
||||
--navbar-bounds-padding: 0 5%;
|
||||
}
|
||||
body.no-banner #banner_link,
|
||||
body.no-banner .z-top-container.has-banner>.header,
|
||||
@ -114,7 +115,7 @@ li.nav-item[report-id='playpage_dynamic'] .i-frame,
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin: 0 5%;
|
||||
margin: var(--navbar-bounds-padding);
|
||||
height: 100%;
|
||||
flex-grow: 1;
|
||||
}
|
||||
@ -767,7 +768,7 @@ li.nav-item[report-id='playpage_dynamic'] .i-frame,
|
||||
.custom-navbar-settings .order-list
|
||||
{
|
||||
padding: 0 24px;
|
||||
max-height: 77vh;
|
||||
max-height: 60vh;
|
||||
overflow: auto;
|
||||
overscroll-behavior: contain;
|
||||
}
|
||||
@ -824,6 +825,49 @@ li.nav-item[report-id='playpage_dynamic'] .i-frame,
|
||||
{
|
||||
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
|
||||
{
|
||||
|
||||
@ -334,8 +334,15 @@
|
||||
<i class="mdi mdi-close"></i>
|
||||
</button>
|
||||
</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 class="orders">
|
||||
<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 import("slip");
|
||||
const { debounce } = await import("debounce");
|
||||
// const customNavbar = document.querySelector(".custom-navbar");
|
||||
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({
|
||||
el: ".custom-navbar-settings",
|
||||
mounted()
|
||||
@ -167,6 +174,15 @@ const attributes = {
|
||||
});
|
||||
},
|
||||
},
|
||||
data: {
|
||||
boundsPadding: settings.customNavbarBoundsPadding,
|
||||
},
|
||||
watch: {
|
||||
boundsPadding(value)
|
||||
{
|
||||
updateBoundsPadding(value);
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
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