Add bounds padding

This commit is contained in:
the1812 2019-05-09 18:03:42 +08:00
parent 07c0a41d47
commit a235c366e2
15 changed files with 204 additions and 15 deletions

View File

@ -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

View File

@ -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

View File

@ -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

View File

@ -597,5 +597,11 @@ Resource.manifest = {
slip: "Slip.js"
},
},
debounce: {
path: "debounce.min.js",
displayNames: {
slip: "debounce.js"
},
},
};
export const resourceManifest = Resource.manifest;

View File

@ -102,6 +102,7 @@ export const settings = {
blank3: 19
},
customNavbarHidden: [],
customNavbarBoundsPadding: 5,
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: 46 KiB

File diff suppressed because one or more lines are too long

1
min/debounce.min.js vendored Normal file
View 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}}}})();

View File

@ -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
{

View File

@ -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

View File

@ -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
View 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,
},
};