more ui enhancements
new in this commit: - rounded corners everywhere! cobalt is now safe for everyone who can't handle sharp objects. - proper banner loading. no more jumping text! - proper banner error handling. if banner wasn't loaded, it'll simply go grey instead of disappearing. - links are no longer italic and are instead underlined. - collapsible lists now have corresponding emoji. - donate button is now highlighted with magenta instead of white. - added a list of keyboard shortcuts to about tab. - centered old changelog loader.
This commit is contained in:
wukko
@@ -2,7 +2,11 @@ import { celebrations } from "../config.js";
|
||||
import emoji from "../emoji.js";
|
||||
|
||||
export const backButtonSVG = `<svg width="22" height="22" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M14.7551 27.5102L3 15.7551L14.7551 4L16.7755 5.99417L8.45773 14.312H30V17.1982H8.45773L16.7755 25.4898L14.7551 27.5102Z" fill="#FFFFFF"/>
|
||||
<path d="M14.1905 28.5L2 16L14.1905 3.5L16.2857 5.62054L7.65986 14.4654H30V17.5346H7.65986L16.2857 26.3516L14.1905 28.5Z" fill="#E1E1E1"/>
|
||||
</svg>`
|
||||
|
||||
export const dropdownSVG = `<svg width="18" height="18" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M28 12.0533L16 24L4 12.0533L6.03571 10L14.7188 18.4104L16.25 19.9348L17.7813 18.4104L25.9375 10L28 12.0533Z" fill="#E1E1E1"/>
|
||||
</svg>`
|
||||
|
||||
export function switcher(obj) {
|
||||
@@ -11,7 +15,9 @@ export function switcher(obj) {
|
||||
items = obj.items;
|
||||
} else {
|
||||
for (let i = 0; i < obj.items.length; i++) {
|
||||
let classes = obj.items[i]["classes"] ? obj.items[i]["classes"] : []
|
||||
let classes = obj.items[i]["classes"] ? obj.items[i]["classes"] : [];
|
||||
if (i === 0) classes.push("first");
|
||||
if (i === (obj.items.length - 1)) classes.push("last");
|
||||
items += `<button id="${obj.name}-${obj.items[i]["action"]}" class="switch${classes.length > 0 ? ' ' + classes.join(' ') : ''}" onclick="changeSwitcher('${obj.name}', '${obj.items[i]["action"]}')">${obj.items[i]["text"] ? obj.items[i]["text"] : obj.items[i]["action"]}</button>`
|
||||
}
|
||||
}
|
||||
@@ -102,12 +108,16 @@ export function multiPagePopup(obj) {
|
||||
</div>`
|
||||
}
|
||||
export function collapsibleList(arr) {
|
||||
let items = ``
|
||||
let items = ``;
|
||||
|
||||
for (let i = 0; i < arr.length; i++) {
|
||||
items += `<div id="${arr[i]["name"]}-collapse" class="collapse-list">
|
||||
let classes = arr[i]["classes"] ? arr[i]["classes"] : [];
|
||||
if (i === 0) classes.push("first");
|
||||
if (i === (arr.length - 1)) classes.push("last");
|
||||
items += `<div id="${arr[i]["name"]}-collapse" class="collapse-list${classes.length > 0 ? ' ' + classes.join(' ') : ''}">
|
||||
<div class="collapse-header" onclick="expandCollapsible(event)">
|
||||
<div class="collapse-title">${arr[i]["title"]}</div>
|
||||
<div class="collapse-indicator">^</div>
|
||||
<div class="collapse-indicator">${dropdownSVG}</div>
|
||||
</div>
|
||||
<div id="${arr[i]["name"]}-body" class="collapse-body">${arr[i]["body"]}</div>
|
||||
</div>`
|
||||
@@ -138,7 +148,7 @@ export function popupWithBottomButtons(obj) {
|
||||
</div>`
|
||||
}
|
||||
export function socialLink(emji, name, handle, url) {
|
||||
return `<div class="cobalt-support-link">${emji} ${name}: <a class="text-backdrop italic" href="${url}" target="_blank">${handle}</a></div>`
|
||||
return `<div class="cobalt-support-link">${emji} ${name}: <a class="text-backdrop link" href="${url}" target="_blank">${handle}</a></div>`
|
||||
}
|
||||
export function settingsCategory(obj) {
|
||||
return `<div id="settings-${obj.name}" class="settings-category">
|
||||
@@ -193,3 +203,26 @@ export function celebrationsEmoji() {
|
||||
return false
|
||||
}
|
||||
}
|
||||
export function urgentNotice(obj) {
|
||||
if (obj.visible) {
|
||||
return `<div id="urgent-notice" class="urgent-notice explanation" onclick="${obj.action}" style="visibility: hidden;">${emoji(obj.emoji, 18)} ${obj.text}</div>`
|
||||
}
|
||||
return ``
|
||||
}
|
||||
export function keyboardShortcuts(arr) {
|
||||
let base = `<div id="keyboard-shortcuts" class="explanation">`;
|
||||
|
||||
for (let i = 0; i < arr.length; i++) {
|
||||
base += `<div class="shortcut-category">`;
|
||||
for (let c = 0; c < arr[i].items.length; c++) {
|
||||
let combo = arr[i].items[c].combo.split('+').map(
|
||||
key => `<span class="text-backdrop key">${key}</span>`
|
||||
).join("+")
|
||||
base += `<div class="shortcut">${combo}: ${arr[i].items[c].name}</div>`
|
||||
}
|
||||
base += `</div>`
|
||||
}
|
||||
base += `</div>`;
|
||||
|
||||
return base;
|
||||
}
|
||||
|
||||
@@ -13,8 +13,14 @@ export function changelogHistory() { // blockId 0
|
||||
let separator = (i !== 0 && i !== historyLen) ? '<div class="separator"></div>' : '';
|
||||
|
||||
render += `
|
||||
${separator}${history[i]["banner"] ? `<div class="changelog-banner">
|
||||
<img class="changelog-img" src="${history[i]["banner"]}" onerror="this.style.display='none'" loading="lazy"></img>
|
||||
${separator}${history[i]["banner"] ?
|
||||
`<div class="changelog-banner">
|
||||
<img class="changelog-img" ` +
|
||||
`src="${history[i]["banner"]["url"]}" ` +
|
||||
`width="${history[i]["banner"]["width"]}" ` +
|
||||
`height="${history[i]["banner"]["height"]}" ` +
|
||||
`onerror="this.style.opacity=0" loading="lazy">`+
|
||||
`</img>
|
||||
</div>` : ''}
|
||||
<div id="popup-desc" class="changelog-tags">${history[i]["version"]}</div>
|
||||
<div id="popup-desc" class="changelog-subtitle">${history[i]["title"]}</div>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { checkbox, collapsibleList, explanation, footerButtons, multiPagePopup, popup, popupWithBottomButtons, sep, settingsCategory, switcher, socialLink } from "./elements.js";
|
||||
import { checkbox, collapsibleList, explanation, footerButtons, multiPagePopup, popup, popupWithBottomButtons, sep, settingsCategory, switcher, socialLink, urgentNotice, keyboardShortcuts } from "./elements.js";
|
||||
import { services as s, authorInfo, version, repo, donations, supportedAudio } from "../config.js";
|
||||
import { getCommitInfo } from "../sub/currentCommit.js";
|
||||
import loc from "../../localization/manager.js";
|
||||
@@ -98,13 +98,52 @@ export default function(obj) {
|
||||
}, {
|
||||
text: collapsibleList([{
|
||||
name: "services",
|
||||
title: t("CollapseServices"),
|
||||
title: `${emoji("🔗")} ${t("CollapseServices")}`,
|
||||
body: `${enabledServices}<br/><br/>${t("ServicesNote")}`
|
||||
}, {
|
||||
name: "keyboard",
|
||||
title: `${emoji("⌨")} ${t("CollapseKeyboard")}`,
|
||||
body:
|
||||
`${t("KeyboardShortcutsIntro")}
|
||||
${keyboardShortcuts([{
|
||||
items: [{
|
||||
combo: "Shift+D",
|
||||
name: t("PasteFromClipboard")
|
||||
}, {
|
||||
combo: "Shift+K",
|
||||
name: t("ModeToggleAuto")
|
||||
}, {
|
||||
combo: "Shift+L",
|
||||
name: t("ModeToggleAudio")
|
||||
}]
|
||||
}, {
|
||||
items: [{
|
||||
combo: "Ctrl+V",
|
||||
name: t("KeyboardShortcutQuickPaste")
|
||||
}, {
|
||||
combo: "Esc/Del",
|
||||
name: t("KeyboardShortcutClear")
|
||||
}, {
|
||||
combo: "Esc",
|
||||
name: t("KeyboardShortcutClosePopup")
|
||||
}]
|
||||
}, {
|
||||
items: [{
|
||||
combo: "Shift+B",
|
||||
name: t("AboutTab")
|
||||
}, {
|
||||
combo: "Shift+N",
|
||||
name: t("ChangelogTab")
|
||||
}, {
|
||||
combo: "Shift+M",
|
||||
name: t("TitlePopupSettings")
|
||||
}]
|
||||
}])}`
|
||||
}, {
|
||||
name: "support",
|
||||
title: t("CollapseSupport"),
|
||||
body: `
|
||||
${t("SupportSelfTroubleshooting")}<br/><br/>
|
||||
title: `${emoji("❤️🩹")} ${t("CollapseSupport")}`,
|
||||
body:
|
||||
`${t("SupportSelfTroubleshooting")}<br/><br/>
|
||||
${t("FollowSupport")}<br/>
|
||||
${socialLink(
|
||||
emoji("🐦"), "twitter", authorInfo.support.twitter.handle, authorInfo.support.twitter.url
|
||||
@@ -122,7 +161,7 @@ export default function(obj) {
|
||||
${t("SupportNote")}`
|
||||
}, {
|
||||
name: "privacy",
|
||||
title: t("CollapsePrivacy"),
|
||||
title: `${emoji("🔒")} ${t("CollapsePrivacy")}`,
|
||||
body: t("PrivacyPolicy")
|
||||
}])
|
||||
}]
|
||||
@@ -142,7 +181,12 @@ export default function(obj) {
|
||||
}, {
|
||||
text: changelogManager("banner") ?
|
||||
`<div class="changelog-banner">
|
||||
<img class="changelog-img" src="${changelogManager("banner")}" onerror="this.style.display='none'" loading="lazy"></img>
|
||||
<img class="changelog-img" ` +
|
||||
`src="${changelogManager("banner")["url"]}" ` +
|
||||
`width="${changelogManager("banner")["width"]}" ` +
|
||||
`height="${changelogManager("banner")["height"]}" ` +
|
||||
`onerror="this.style.opacity=0" loading="lazy">`+
|
||||
`</img>
|
||||
</div>`: '',
|
||||
raw: true
|
||||
}, {
|
||||
@@ -192,9 +236,13 @@ export default function(obj) {
|
||||
text: `<div class="category-title">${t('DonateSub')}</div>`,
|
||||
raw: true
|
||||
}, {
|
||||
text: `
|
||||
<div class="changelog-banner">
|
||||
<img class="changelog-img" src="updateBanners/catsleep.webp" onerror="this.style.display='none'" loading="lazy"></img>
|
||||
text: `<div class="changelog-banner">
|
||||
<img class="changelog-img" ` +
|
||||
`src="updateBanners/catsleep.webp"` +
|
||||
`width="480" ` +
|
||||
`height="270" ` +
|
||||
`onerror="this.style.opacity=0" loading="lazy">`+
|
||||
`</img>
|
||||
</div>`,
|
||||
raw: true
|
||||
}, {
|
||||
@@ -356,7 +404,6 @@ export default function(obj) {
|
||||
title: t('SettingsAppearanceSubtitle'),
|
||||
body: switcher({
|
||||
name: "theme",
|
||||
subtitle: t('SettingsThemeSubtitle'),
|
||||
items: [{
|
||||
action: "auto",
|
||||
text: t('SettingsThemeAuto')
|
||||
@@ -448,7 +495,12 @@ export default function(obj) {
|
||||
</div>
|
||||
<div id="popup-backdrop" onclick="hideAllPopups()"></div>
|
||||
<div id="home">
|
||||
<div id="urgent-notice" class="urgent-notice explanation" onclick="popup('about', 1, 'donate')" style="visibility: hidden;">${emoji("💖", 18)} ${t("UrgentDonate")}</div>
|
||||
${urgentNotice({
|
||||
emoji: "🐱",
|
||||
text: "report any issues!",
|
||||
visible: true,
|
||||
action: "popup('about', 1, 'changelog')"
|
||||
})}
|
||||
<div id="cobalt-main-box" class="center" style="visibility: hidden;">
|
||||
<div id="logo">${t("AppTitleCobalt")}</div>
|
||||
<div id="download-area">
|
||||
|
||||
Reference in New Issue
Block a user