mirror of
https://github.com/SwingTheVine/Wplace-BlueMarble.git
synced 2026-05-06 19:59:40 +00:00
Polish Color Filter stats layout
This commit is contained in:
Alexey
parent
1215b41c83
commit
a051225dc7
7 changed files with 86 additions and 33 deletions
23
dist/BlueMarble-For-GreasyFork.user.css
vendored
23
dist/BlueMarble-For-GreasyFork.user.css
vendored
|
|
@ -626,7 +626,7 @@ input[type=file] {
|
|||
}
|
||||
#bm-window-filter .bm-filter-stat-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, minmax(0, 1fr));
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(8.7rem, 1.28fr);
|
||||
gap: 0.24rem;
|
||||
}
|
||||
#bm-window-filter .bm-filter-stat-card,
|
||||
|
|
@ -642,14 +642,14 @@ input[type=file] {
|
|||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 8px 20px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
#bm-window-filter .bm-filter-stat-card {
|
||||
min-height: 2.7rem;
|
||||
min-height: 2.28rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
gap: 0.08rem;
|
||||
padding: 0.34rem 0.45rem;
|
||||
gap: 0.04rem;
|
||||
padding: 0.24rem 0.42rem;
|
||||
color: rgba(18, 35, 63, 0.96);
|
||||
line-height: 1.22;
|
||||
line-height: 1.12;
|
||||
}
|
||||
#bm-window-filter .bm-filter-stat-label {
|
||||
color: rgba(49, 71, 105, 0.82);
|
||||
|
|
@ -662,13 +662,15 @@ input[type=file] {
|
|||
display: inline-block;
|
||||
min-width: 0;
|
||||
color: rgba(15, 31, 56, 0.96);
|
||||
font-size: 1.04em;
|
||||
font-size: 1em;
|
||||
font-weight: 700;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
#bm-window-filter .bm-filter-stat-card time {
|
||||
font-family: var(--bm-font-mono);
|
||||
font-size: 0.9em;
|
||||
letter-spacing: 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
#bm-window-filter .bm-filter-sort-panel {
|
||||
padding: 0.38rem 0.48rem;
|
||||
|
|
@ -865,19 +867,20 @@ input[type=file] {
|
|||
}
|
||||
#bm-window-filter:not(.bm-windowed) .bm-filter-color-meta {
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
gap: 0.42rem;
|
||||
justify-content: flex-start;
|
||||
gap: 0.36rem;
|
||||
text-align: right;
|
||||
}
|
||||
#bm-window-filter:not(.bm-windowed) .bm-filter-color-progress {
|
||||
align-items: flex-end;
|
||||
gap: 0.08rem;
|
||||
gap: 0.18rem;
|
||||
}
|
||||
#bm-window-filter:not(.bm-windowed) .bm-filter-color .bm-filter-color-pxl-cnt {
|
||||
font-family: var(--bm-font-display);
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
line-height: 1.15;
|
||||
min-height: 2.3em;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
#bm-window-filter .bm-filter-color-toggle:focus-visible {
|
||||
|
|
@ -1402,4 +1405,4 @@ input[type=file] {
|
|||
|
||||
/* src/main.css */
|
||||
|
||||
/* Build Hash: 893c29fe0ffa */
|
||||
/* Build Hash: 79650aaae24f */
|
||||
|
|
|
|||
29
dist/BlueMarble-For-GreasyFork.user.js
vendored
29
dist/BlueMarble-For-GreasyFork.user.js
vendored
|
|
@ -2448,6 +2448,22 @@ Getting Y ${pixelY}-${pixelY + drawSizeY}`);
|
|||
var closeIcon2 = '<svg class="bm-button-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M7 7l10 10M17 7L7 17" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"/></svg>';
|
||||
var fullscreenIcon = '<svg class="bm-button-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M8.5 4.5H4.5v4M15.5 4.5h4v4M19.5 15.5v4h-4M8.5 19.5h-4v-4" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"/><path d="M4.8 4.8l5.2 5.2M19.2 4.8L14 10M19.2 19.2L14 14M4.8 19.2L10 14" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round"/></svg>';
|
||||
var windowedIcon = '<svg class="bm-button-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M4.8 4.8l5.2 5.2M19.2 4.8L14 10M19.2 19.2L14 14M4.8 19.2L10 14" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round"/><path d="M10 7.5V10H7.5M16.5 10H14V7.5M14 16.5V14h2.5M7.5 14H10v2.5" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"/></svg>';
|
||||
function localizeCompactDate(date) {
|
||||
const month = date.getMonth() + 1;
|
||||
const day = date.getDate();
|
||||
const year = String(date.getFullYear()).slice(-2);
|
||||
const minute = String(date.getMinutes()).padStart(2, "0");
|
||||
const uses12HourClock = new Intl.DateTimeFormat(void 0, { hour: "numeric" }).resolvedOptions().hour12;
|
||||
let hour = date.getHours();
|
||||
let period = "";
|
||||
if (uses12HourClock) {
|
||||
period = hour >= 12 ? " PM" : " AM";
|
||||
hour = hour % 12 || 12;
|
||||
} else {
|
||||
hour = String(hour).padStart(2, "0");
|
||||
}
|
||||
return `${month}/${day}/${year} ${hour}:${minute}${period}`;
|
||||
}
|
||||
var _WindowFilter_instances, getWindowState_fn2, prefersWindowedMode_fn, setWindowModePreference_fn, syncSortFormControls_fn, closeWindow_fn2, startAutoRefresh_fn, stopAutoRefresh_fn, cleanupWindowPersistence_fn, clampWindowDimension_fn, clampWindowPosition_fn2, restoreWindowState_fn, saveWindowState_fn, scheduleWindowStateSave_fn, initializeWindowedPersistence_fn, buildColorList_fn, sortColorList_fn, selectColorList_fn, syncColorToggleLabel_fn, toggleColorVisibility_fn, initializeColorBlockToggle_fn, calculatePixelStatistics_fn;
|
||||
var WindowFilter = class extends Overlay {
|
||||
/** Constructor for the color filter window
|
||||
|
|
@ -2691,7 +2707,12 @@ Getting Y ${pixelY}-${pixelY + drawSizeY}`);
|
|||
color.dataset["incorrect"] = colorIncorrect || 0;
|
||||
const pixelCount = document.querySelector(`#${this.windowID} .bm-filter-color[data-id="${colorID}"] .bm-filter-color-pxl-cnt`);
|
||||
if (pixelCount) {
|
||||
pixelCount.textContent = `${colorCorrectLocalized} / ${colorTotalLocalized}`;
|
||||
const isWindowedPixelCount = !!pixelCount.closest(`#${this.windowID}.bm-windowed`);
|
||||
if (isWindowedPixelCount) {
|
||||
pixelCount.textContent = `${colorCorrectLocalized} / ${colorTotalLocalized}`;
|
||||
} else {
|
||||
pixelCount.innerHTML = `${colorCorrectLocalized} /<br>${colorTotalLocalized}`;
|
||||
}
|
||||
}
|
||||
const pixelDesc = document.querySelector(`#${this.windowID} .bm-filter-color[data-id="${colorID}"] .bm-filter-color-pxl-desc`);
|
||||
if (pixelDesc) {
|
||||
|
|
@ -3047,7 +3068,7 @@ Getting Y ${pixelY}-${pixelY + drawSizeY}`);
|
|||
}
|
||||
__privateMethod(this, _WindowFilter_instances, syncColorToggleLabel_fn).call(this, button, color);
|
||||
}
|
||||
).buildElement().buildElement().addDiv({ "class": "bm-filter-color-title" }).addSmall({ "textContent": `#${color.id.toString().padStart(2, 0)} / ${color.id == -2 ? "mixed" : colorValueHex}` }).buildElement().addHeader(2, { "textContent": color.name }).buildElement().buildElement().buildElement().addDiv({ "class": "bm-filter-color-meta" }).addDiv({ "class": "bm-filter-color-progress" }).addSpan({ "class": "bm-filter-color-pxl-cnt", "textContent": `${colorCorrectLocalized} / ${colorTotalLocalized}` }).buildElement().addSmall({ "class": "bm-filter-color-pxl-desc", "innerHTML": `${colorPercent} done<br>${typeof colorIncorrect == "number" && !isNaN(colorIncorrect) ? colorIncorrect : "???"} off` }).buildElement().buildElement().buildElement().buildElement();
|
||||
).buildElement().buildElement().addDiv({ "class": "bm-filter-color-title" }).addSmall({ "textContent": `#${color.id.toString().padStart(2, 0)} / ${color.id == -2 ? "mixed" : colorValueHex}` }).buildElement().addHeader(2, { "textContent": color.name }).buildElement().buildElement().buildElement().addDiv({ "class": "bm-filter-color-meta" }).addDiv({ "class": "bm-filter-color-progress" }).addSpan({ "class": "bm-filter-color-pxl-cnt", "innerHTML": `${colorCorrectLocalized} /<br>${colorTotalLocalized}` }).buildElement().addSmall({ "class": "bm-filter-color-pxl-desc", "innerHTML": `${colorPercent} done<br>${typeof colorIncorrect == "number" && !isNaN(colorIncorrect) ? colorIncorrect : "???"} off` }).buildElement().buildElement().buildElement().buildElement();
|
||||
}
|
||||
}
|
||||
colorList.buildOverlay(parentElement);
|
||||
|
|
@ -3209,7 +3230,7 @@ Getting Y ${pixelY}-${pixelY + drawSizeY}`);
|
|||
confettiManager.createConfetti(document.querySelector(`#${this.windowID}`));
|
||||
}
|
||||
this.timeRemaining = new Date((this.allPixelsTotal - this.allPixelsCorrectTotal) * 30 * 1e3 + Date.now());
|
||||
this.timeRemainingLocalized = localizeDate(this.timeRemaining);
|
||||
this.timeRemainingLocalized = localizeCompactDate(this.timeRemaining);
|
||||
};
|
||||
|
||||
// src/WindowMain.js
|
||||
|
|
@ -4660,4 +4681,4 @@ Time Since Blink: ${String(Math.floor(elapsed / 6e4)).padStart(2, "0")}:${String
|
|||
}
|
||||
})();
|
||||
|
||||
// Build Hash: a2ac3a13a36f
|
||||
// Build Hash: 339f830865b8
|
||||
|
|
|
|||
4
dist/BlueMarble-Standalone.user.js
vendored
4
dist/BlueMarble-Standalone.user.js
vendored
File diff suppressed because one or more lines are too long
4
dist/BlueMarble.user.css
vendored
4
dist/BlueMarble.user.css
vendored
File diff suppressed because one or more lines are too long
4
dist/BlueMarble.user.js
vendored
4
dist/BlueMarble.user.js
vendored
File diff suppressed because one or more lines are too long
|
|
@ -53,7 +53,7 @@
|
|||
|
||||
#bm-window-filter .bm-filter-stat-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, minmax(0, 1fr));
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(8.7rem, 1.28fr);
|
||||
gap: 0.24rem;
|
||||
}
|
||||
|
||||
|
|
@ -69,14 +69,14 @@
|
|||
}
|
||||
|
||||
#bm-window-filter .bm-filter-stat-card {
|
||||
min-height: 2.7rem;
|
||||
min-height: 2.28rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
gap: 0.08rem;
|
||||
padding: 0.34rem 0.45rem;
|
||||
gap: 0.04rem;
|
||||
padding: 0.24rem 0.42rem;
|
||||
color: rgba(18, 35, 63, 0.96);
|
||||
line-height: 1.22;
|
||||
line-height: 1.12;
|
||||
}
|
||||
|
||||
#bm-window-filter .bm-filter-stat-label {
|
||||
|
|
@ -91,14 +91,16 @@
|
|||
display: inline-block;
|
||||
min-width: 0;
|
||||
color: rgba(15, 31, 56, 0.96);
|
||||
font-size: 1.04em;
|
||||
font-size: 1em;
|
||||
font-weight: 700;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
#bm-window-filter .bm-filter-stat-card time {
|
||||
font-family: var(--bm-font-mono);
|
||||
font-size: 0.9em;
|
||||
letter-spacing: 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
#bm-window-filter .bm-filter-sort-panel {
|
||||
|
|
@ -318,14 +320,14 @@
|
|||
|
||||
#bm-window-filter:not(.bm-windowed) .bm-filter-color-meta {
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
gap: 0.42rem;
|
||||
justify-content: flex-start;
|
||||
gap: 0.36rem;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
#bm-window-filter:not(.bm-windowed) .bm-filter-color-progress {
|
||||
align-items: flex-end;
|
||||
gap: 0.08rem;
|
||||
gap: 0.18rem;
|
||||
}
|
||||
|
||||
#bm-window-filter:not(.bm-windowed) .bm-filter-color .bm-filter-color-pxl-cnt {
|
||||
|
|
@ -333,6 +335,7 @@
|
|||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
line-height: 1.15;
|
||||
min-height: 2.3em;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,11 +1,30 @@
|
|||
import ConfettiManager from "./confetttiManager";
|
||||
import Overlay, { minimizeIconExpanded } from "./Overlay";
|
||||
import { calculateRelativeLuminance, localizeDate, localizeNumber, localizePercent, rgbToHex } from "./utils";
|
||||
import { calculateRelativeLuminance, localizeNumber, localizePercent, rgbToHex } from "./utils";
|
||||
|
||||
const closeIcon = '<svg class="bm-button-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M7 7l10 10M17 7L7 17" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"/></svg>';
|
||||
const fullscreenIcon = '<svg class="bm-button-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M8.5 4.5H4.5v4M15.5 4.5h4v4M19.5 15.5v4h-4M8.5 19.5h-4v-4" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"/><path d="M4.8 4.8l5.2 5.2M19.2 4.8L14 10M19.2 19.2L14 14M4.8 19.2L10 14" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round"/></svg>';
|
||||
const windowedIcon = '<svg class="bm-button-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M4.8 4.8l5.2 5.2M19.2 4.8L14 10M19.2 19.2L14 14M4.8 19.2L10 14" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round"/><path d="M10 7.5V10H7.5M16.5 10H14V7.5M14 16.5V14h2.5M7.5 14H10v2.5" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"/></svg>';
|
||||
|
||||
function localizeCompactDate(date) {
|
||||
const month = date.getMonth() + 1;
|
||||
const day = date.getDate();
|
||||
const year = String(date.getFullYear()).slice(-2);
|
||||
const minute = String(date.getMinutes()).padStart(2, '0');
|
||||
const uses12HourClock = new Intl.DateTimeFormat(undefined, {hour: 'numeric'}).resolvedOptions().hour12;
|
||||
|
||||
let hour = date.getHours();
|
||||
let period = '';
|
||||
if (uses12HourClock) {
|
||||
period = hour >= 12 ? ' PM' : ' AM';
|
||||
hour = hour % 12 || 12;
|
||||
} else {
|
||||
hour = String(hour).padStart(2, '0');
|
||||
}
|
||||
|
||||
return `${month}/${day}/${year} ${hour}:${minute}${period}`;
|
||||
}
|
||||
|
||||
/** The overlay builder for the color filter Blue Marble window.
|
||||
* @description This class handles the overlay UI for the color filter window of the Blue Marble userscript.
|
||||
* @class WindowFilter
|
||||
|
|
@ -720,7 +739,7 @@ export default class WindowFilter extends Overlay {
|
|||
.buildElement()
|
||||
.addDiv({'class': 'bm-filter-color-meta'})
|
||||
.addDiv({'class': 'bm-filter-color-progress'})
|
||||
.addSpan({'class': 'bm-filter-color-pxl-cnt', 'textContent': `${colorCorrectLocalized} / ${colorTotalLocalized}`}).buildElement()
|
||||
.addSpan({'class': 'bm-filter-color-pxl-cnt', 'innerHTML': `${colorCorrectLocalized} /<br>${colorTotalLocalized}`}).buildElement()
|
||||
.addSmall({'class': 'bm-filter-color-pxl-desc', 'innerHTML': `${colorPercent} done<br>${((typeof colorIncorrect == 'number') && !isNaN(colorIncorrect)) ? colorIncorrect : '???'} off`}).buildElement()
|
||||
.buildElement()
|
||||
.buildElement()
|
||||
|
|
@ -1001,7 +1020,14 @@ export default class WindowFilter extends Overlay {
|
|||
|
||||
// Updates the pixel count if it exists
|
||||
const pixelCount = document.querySelector(`#${this.windowID} .bm-filter-color[data-id="${colorID}"] .bm-filter-color-pxl-cnt`);
|
||||
if (pixelCount) {pixelCount.textContent = `${colorCorrectLocalized} / ${colorTotalLocalized}`;}
|
||||
if (pixelCount) {
|
||||
const isWindowedPixelCount = !!pixelCount.closest(`#${this.windowID}.bm-windowed`);
|
||||
if (isWindowedPixelCount) {
|
||||
pixelCount.textContent = `${colorCorrectLocalized} / ${colorTotalLocalized}`;
|
||||
} else {
|
||||
pixelCount.innerHTML = `${colorCorrectLocalized} /<br>${colorTotalLocalized}`;
|
||||
}
|
||||
}
|
||||
|
||||
// Updates the pixel description if it exists
|
||||
const pixelDesc = document.querySelector(`#${this.windowID} .bm-filter-color[data-id="${colorID}"] .bm-filter-color-pxl-desc`);
|
||||
|
|
@ -1072,6 +1098,6 @@ export default class WindowFilter extends Overlay {
|
|||
|
||||
// Calculates the date & time the user will complete the templates
|
||||
this.timeRemaining = new Date(((this.allPixelsTotal - this.allPixelsCorrectTotal) * 30 * 1000) + Date.now());
|
||||
this.timeRemainingLocalized = localizeDate(this.timeRemaining);
|
||||
this.timeRemainingLocalized = localizeCompactDate(this.timeRemaining);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue