admin/cobalt
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

6.3: new error and save popups

Browse Source 
- remade error and save popups. both are now properly located and sized on mobile screens. this is the first step in modernizing cobalt ui!
- fixed >> button getting stuck in error state.
This commit is contained in:
wukko
2023-07-19 01:50:51 +06:00
parent ccab047f19
commit bbf450a1fa
13 changed files with 1687 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/modules/emoji.js
View File

@@ -24,19 +24,27 @@ const names = {
"🔮": "crystal_ball",
"💪": "biceps",
"💖": "sparkling_heart",
"👾": "alien_monster"
"👾": "alien_monster",
"😿": "cat_crying",
"🙀": "cat_flabbergasted",
"🤷": "person_shrugging"
}
let sizing = {
18: 0.8,
22: 0.4,
30: 0.7,
48: 0.9,
64: 0.9
64: 0.9,
78: 0.9
}
export default function(emoji, size, disablePadding) {
export default function(emoji, size, disablePadding, fluent) {
if (!size) size = 22;
let padding = size !== 22 ? `margin-right:${sizing[size] ? sizing[size] : "0.4"}rem;` : false;
if (disablePadding) padding = 'margin-right:0!important;';
if (!names[emoji]) emoji = "❓";
return `<img class="emoji" draggable=false height="${size}" width="${size}" ${padding ? `style="${padding}"` : ''}alt="${emoji}" src="emoji/${names[emoji]}.svg" loading="lazy">`
let filePath = `emoji/${names[emoji]}.svg`;
if (fluent) filePath = `emoji/3d/${names[emoji]}.svg`;
return `<img class="emoji" draggable=false height="${size}" width="${size}" ${padding ? `style="${padding}"` : ''}alt="${emoji}" src="${filePath}" loading="lazy">`
}

43
src/modules/pageRender/page.js
View File

@@ -44,7 +44,7 @@ export default function(obj) {
<html lang="${obj.lang}">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=${isIOS ? `1` : `5`}" />
<meta name="viewport" content="viewport-fit=cover width=device-width, initial-scale=1, maximum-scale=${isIOS ? `1` : `5`}" />
<title>${appName}</title>
@@ -324,22 +324,6 @@ export default function(obj) {
})
}],
})}
${popup({
name: "download",
standalone: true,
header: {
closeAria: t('AccessibilityClosePopup'),
subtitle: t('TitlePopupDownload')
},
body: switcher({
name: "download",
subtitle: t('DownloadPopupWayToSave'),
explanation: `${!isIOS ? t('DownloadPopupDescription') : t('DownloadPopupDescriptionIOS')}`,
items: `<a id="pd-download" class="switch full" target="_blank" href="/">${t('Download')}</a>
<div id="pd-share" class="switch full">${t('ShareURL')}</div>
<div id="pd-copy" class="switch full">${t('CopyURL')}</div>`
})
})}
${popupWithBottomButtons({
name: "picker",
closeAria: t('AccessibilityClosePopup'),
@@ -350,18 +334,37 @@ export default function(obj) {
buttons: [`<a id="picker-download" class="switch" target="_blank" href="/">${t('ImagePickerDownloadAudio')}</a>`],
content: '<div id="picker-holder"></div>'
})}
${popup({
name: "download",
standalone: true,
buttonOnly: true,
classes: ["small"],
header: {
closeAria: t('AccessibilityClosePopup'),
emoji: emoji("🤷", 78, 1, 1),
title: t('TitlePopupDownload')
},
body: switcher({
name: "download",
explanation: `${!isIOS ? t('DownloadPopupDescription') : t('DownloadPopupDescriptionIOS')}`,
items: `<a id="pd-download" class="switch full" target="_blank" href="/">${t('Download')}</a>
<div id="pd-share" class="switch full">${t('ShareURL')}</div>
<div id="pd-copy" class="switch full">${t('CopyURL')}</div>`
}),
buttonText: t('PopupCloseDone')
})}
${popup({
name: "error",
standalone: true,
buttonOnly: true,
classes: ["small"],
buttonText: t('ErrorPopupCloseButton'),
header: {
closeAria: t('AccessibilityClosePopup'),
title: t('TitlePopupError'),
emoji: emoji("☹️", 64, 1),
emoji: emoji("😿", 78, 1, 1),
},
body: `<div id="desc-error" class="desc-padding subtext"></div>`
body: `<div id="desc-error" class="desc-padding subtext"></div>`,
buttonText: t('ErrorPopupCloseButton')
})}
<div id="popup-backdrop" style="visibility: hidden;" onclick="hideAllPopups()"></div>
<div id="urgent-notice" class="urgent-notice explanation center" onclick="popup('about', 1, 'donate')" style="visibility: hidden;">${emoji("💖", 18)} ${t("UrgentDonate")}</div>