From 5cbe70f923a4765a0d5fdaae8e7ced37c309f889 Mon Sep 17 00:00:00 2001 From: nunoluciano <1905497+gigamaster@users.noreply.github.com> Date: Fri, 4 Oct 2024 17:49:01 +0200 Subject: [PATCH 1/2] UI - HTML + i18n translations --- src/livecodes/UI/icons.ts | 2 +- src/livecodes/UI/login.ts | 4 +- src/livecodes/UI/selectors.ts | 4 +- src/livecodes/UI/share.ts | 44 +- src/livecodes/core.ts | 7 +- src/livecodes/deploy/deploy.ts | 14 +- src/livecodes/html/about.html | 31 +- src/livecodes/html/add-asset.html | 12 +- src/livecodes/html/app-menu-help.html | 2 +- src/livecodes/html/app.html | 3 +- src/livecodes/html/assets.html | 15 +- src/livecodes/html/deploy.html | 4 +- src/livecodes/html/open.html | 7 +- src/livecodes/html/recover-prompt.html | 9 +- src/livecodes/html/snippets.html | 6 +- src/livecodes/html/sync.html | 6 +- src/livecodes/html/welcome.html | 423 +++--- src/livecodes/i18n/app-languages.ts | 11 +- src/livecodes/i18n/locale-paths.ts | 54 + .../locales/ar/language-info.lokalise.json | 239 +++ .../i18n/locales/ar/translation.lokalise.json | 579 ++++++++ .../locales/de/language-info.lokalise.json | 239 +++ .../i18n/locales/de/language-info.ts | 412 +++++ .../i18n/locales/de/translation.lokalise.json | 579 ++++++++ src/livecodes/i18n/locales/de/translation.ts | 902 +++++++++++ .../locales/es/language-info.lokalise.json | 239 +++ .../i18n/locales/es/language-info.ts | 412 +++++ .../i18n/locales/es/translation.lokalise.json | 579 ++++++++ src/livecodes/i18n/locales/es/translation.ts | 902 +++++++++++ .../locales/fr/language-info.lokalise.json | 239 +++ .../i18n/locales/fr/language-info.ts | 412 +++++ .../i18n/locales/fr/translation.lokalise.json | 579 ++++++++ src/livecodes/i18n/locales/fr/translation.ts | 903 +++++++++++ .../locales/hi/language-info.lokalise.json | 239 +++ .../i18n/locales/hi/language-info.ts | 412 +++++ .../i18n/locales/hi/translation.lokalise.json | 579 ++++++++ src/livecodes/i18n/locales/hi/translation.ts | 902 +++++++++++ .../locales/it/language-info.lokalise.json | 239 +++ .../i18n/locales/it/language-info.ts | 412 +++++ .../i18n/locales/it/translation.lokalise.json | 579 ++++++++ src/livecodes/i18n/locales/it/translation.ts | 902 +++++++++++ .../locales/ja/language-info.lokalise.json | 239 +++ .../i18n/locales/ja/language-info.ts | 412 +++++ .../i18n/locales/ja/translation.lokalise.json | 579 ++++++++ src/livecodes/i18n/locales/ja/translation.ts | 902 +++++++++++ .../locales/pt/language-info.lokalise.json | 239 +++ .../i18n/locales/pt/language-info.ts | 412 +++++ .../i18n/locales/pt/translation.lokalise.json | 579 ++++++++ src/livecodes/i18n/locales/pt/translation.ts | 902 +++++++++++ .../locales/ru/language-info.lokalise.json | 239 +++ .../i18n/locales/ru/language-info.ts | 412 +++++ .../i18n/locales/ru/translation.lokalise.json | 579 ++++++++ src/livecodes/i18n/locales/ru/translation.ts | 902 +++++++++++ .../locales/ur/language-info.lokalise.json | 239 +++ .../i18n/locales/ur/language-info.ts | 412 +++++ .../i18n/locales/ur/translation.lokalise.json | 579 ++++++++ src/livecodes/i18n/locales/ur/translation.ts | 902 +++++++++++ .../locales/zh-CN/language-info.lokalise.json | 239 +++ .../locales/zh-CN/translation.lokalise.json | 579 ++++++++ .../i18n/locales/zh-CN/translation.ts | 24 +- src/livecodes/styles/app.scss | 136 +- src/livecodes/styles/icons-share.css | 55 + .../styles/{icons.scss => icons.css} | 13 +- src/livecodes/styles/light.scss | 15 +- src/livecodes/styles/modal.scss | 1322 +++++++++-------- src/livecodes/styles/rtl.scss | 4 +- src/livecodes/toolspane/console.ts | 2 +- src/sdk/index.ts | 2 +- src/sdk/models.ts | 15 +- 69 files changed, 22053 insertions(+), 1018 deletions(-) create mode 100644 src/livecodes/i18n/locales/ar/language-info.lokalise.json create mode 100644 src/livecodes/i18n/locales/ar/translation.lokalise.json create mode 100644 src/livecodes/i18n/locales/de/language-info.lokalise.json create mode 100644 src/livecodes/i18n/locales/de/language-info.ts create mode 100644 src/livecodes/i18n/locales/de/translation.lokalise.json create mode 100644 src/livecodes/i18n/locales/de/translation.ts create mode 100644 src/livecodes/i18n/locales/es/language-info.lokalise.json create mode 100644 src/livecodes/i18n/locales/es/language-info.ts create mode 100644 src/livecodes/i18n/locales/es/translation.lokalise.json create mode 100644 src/livecodes/i18n/locales/es/translation.ts create mode 100644 src/livecodes/i18n/locales/fr/language-info.lokalise.json create mode 100644 src/livecodes/i18n/locales/fr/language-info.ts create mode 100644 src/livecodes/i18n/locales/fr/translation.lokalise.json create mode 100644 src/livecodes/i18n/locales/fr/translation.ts create mode 100644 src/livecodes/i18n/locales/hi/language-info.lokalise.json create mode 100644 src/livecodes/i18n/locales/hi/language-info.ts create mode 100644 src/livecodes/i18n/locales/hi/translation.lokalise.json create mode 100644 src/livecodes/i18n/locales/hi/translation.ts create mode 100644 src/livecodes/i18n/locales/it/language-info.lokalise.json create mode 100644 src/livecodes/i18n/locales/it/language-info.ts create mode 100644 src/livecodes/i18n/locales/it/translation.lokalise.json create mode 100644 src/livecodes/i18n/locales/it/translation.ts create mode 100644 src/livecodes/i18n/locales/ja/language-info.lokalise.json create mode 100644 src/livecodes/i18n/locales/ja/language-info.ts create mode 100644 src/livecodes/i18n/locales/ja/translation.lokalise.json create mode 100644 src/livecodes/i18n/locales/ja/translation.ts create mode 100644 src/livecodes/i18n/locales/pt/language-info.lokalise.json create mode 100644 src/livecodes/i18n/locales/pt/language-info.ts create mode 100644 src/livecodes/i18n/locales/pt/translation.lokalise.json create mode 100644 src/livecodes/i18n/locales/pt/translation.ts create mode 100644 src/livecodes/i18n/locales/ru/language-info.lokalise.json create mode 100644 src/livecodes/i18n/locales/ru/language-info.ts create mode 100644 src/livecodes/i18n/locales/ru/translation.lokalise.json create mode 100644 src/livecodes/i18n/locales/ru/translation.ts create mode 100644 src/livecodes/i18n/locales/ur/language-info.lokalise.json create mode 100644 src/livecodes/i18n/locales/ur/language-info.ts create mode 100644 src/livecodes/i18n/locales/ur/translation.lokalise.json create mode 100644 src/livecodes/i18n/locales/ur/translation.ts create mode 100644 src/livecodes/i18n/locales/zh-CN/language-info.lokalise.json create mode 100644 src/livecodes/i18n/locales/zh-CN/translation.lokalise.json create mode 100644 src/livecodes/styles/icons-share.css rename src/livecodes/styles/{icons.scss => icons.css} (94%) diff --git a/src/livecodes/UI/icons.ts b/src/livecodes/UI/icons.ts index d23974827..316d01dcf 100644 --- a/src/livecodes/UI/icons.ts +++ b/src/livecodes/UI/icons.ts @@ -2,7 +2,7 @@ export const run = ''; // ''; export const checked = ''; - // ''; +// ''; export const unchecked = ''; // ''; diff --git a/src/livecodes/UI/login.ts b/src/livecodes/UI/login.ts index f03171452..7b466d629 100644 --- a/src/livecodes/UI/login.ts +++ b/src/livecodes/UI/login.ts @@ -72,14 +72,14 @@ export const displayLoggedIn = (user: User) => { name: displayName!, }, ); - logOutLink.style.display = 'block'; + logOutLink.style.display = 'flex'; } }; export const displayLoggedOut = () => { const loginLink = getLoginLink(); if (loginLink) { - loginLink.style.display = 'block'; + loginLink.style.display = 'flex'; } const logOutLink = getLogoutLink(); if (logOutLink) { diff --git a/src/livecodes/UI/selectors.ts b/src/livecodes/UI/selectors.ts index 0c7fa61b4..3002bf2bd 100644 --- a/src/livecodes/UI/selectors.ts +++ b/src/livecodes/UI/selectors.ts @@ -107,7 +107,7 @@ export const getSettingToggles = /* @__PURE__ */ () => document.querySelectorAll('#app-menu-settings input'); export const getCssPresetLinks = /* @__PURE__ */ () => -document.querySelectorAll('#css-preset-menu a'); + document.querySelectorAll('#css-preset-menu a'); export const getAppMenuProjectScroller = /* @__PURE__ */ () => document.querySelector('#app-menu-container-project'); @@ -503,7 +503,7 @@ export const getModalWelcomeRecover = /* @__PURE__ */ ( ) => welcomeContainer.querySelector('#modal #welcome-recover') as HTMLElement; export const getModalWelcomeScreen = /* @__PURE__ */ (welcomeContainer: HTMLElement) => - welcomeContainer.querySelector('#welcome-screen-container') as HTMLElement; + welcomeContainer.querySelector('#welcome-screen-container #welcome-start') as HTMLElement; export const getModalWelcomeRecent = /* @__PURE__ */ (welcomeContainer: HTMLElement) => welcomeContainer.querySelector('#modal #welcome-recent') as HTMLElement; diff --git a/src/livecodes/UI/share.ts b/src/livecodes/UI/share.ts index c1e1d4306..e6cf30115 100644 --- a/src/livecodes/UI/share.ts +++ b/src/livecodes/UI/share.ts @@ -3,7 +3,7 @@ import type { createEventsManager } from '../events'; import { shareScreen } from '../html'; import type { ShareData } from '../models'; import { allowedOrigin } from '../services/allowed-origin'; -import { copyToClipboard, getAbsoluteUrl } from '../utils/utils'; +import { copyToClipboard } from '../utils/utils'; import { generateQrCode } from './qrcode'; import { getQrCodeContainer } from './selectors'; @@ -69,11 +69,10 @@ export const createShareContainer = async ( link.rel = 'noopener noreferrer'; link.innerHTML = ` ${service.name} `; @@ -104,30 +103,30 @@ export const createShareContainer = async ( const services: Service[] = [ { name: window.deps.translateString('share.services.facebook', 'Facebook'), - icon: 'facebook.svg', + icon: 'icon-share-facebook', createShareUrl: ({ url }) => `https://www.facebook.com/sharer.php?u=${encode(url)}`, }, { name: window.deps.translateString('share.services.twitter', '𝕏 / Twitter'), - icon: 'x.svg', + icon: 'icon-share-x', createShareUrl: ({ url, title }) => `https://twitter.com/intent/tweet?url=${encode(url)}&text=${encode(title)}`, }, { name: window.deps.translateString('share.services.hackerNews', 'Hacker News'), - icon: 'hacker-news.svg', + icon: 'icon-share-hacker', createShareUrl: ({ url, title }) => `https://news.ycombinator.com/submitlink?u=${encode(url)}&t=${encode(title)}`, }, { name: window.deps.translateString('share.services.reddit', 'Reddit'), - icon: 'reddit.svg', + icon: 'icon-share-reddit', createShareUrl: ({ url, title }) => `https://www.reddit.com/submit?url=${encode(url)}&title=${encode(title)}`, }, { name: window.deps.translateString('share.services.linkedIn', 'LinkedIn'), - icon: 'linkedin.svg', + icon: 'icon-share-linkedin', createShareUrl: ({ url, title }) => `https://www.linkedin.com/shareArticle?url=${encode(url)}&title=${encode( title, @@ -135,7 +134,7 @@ export const createShareContainer = async ( }, { name: window.deps.translateString('share.services.devTo', 'Dev.to'), - icon: 'dev.svg', + icon: 'icon-share-dev', createShareUrl: ({ url, title }) => `https://dev.to/new?prefill=${encode( '---\ntitle: ' + title + '\npublished: true\ntags: livecodes\n---\n\n\n\n' + url, @@ -143,13 +142,13 @@ export const createShareContainer = async ( }, { name: window.deps.translateString('share.services.tumblr', 'Tumblr'), - icon: 'tumblr.svg', + icon: 'icon-share-tumblr', createShareUrl: ({ url, title }) => `https://www.tumblr.com/share/link?url=${encode(url)}&name=${encode(title)}`, }, { name: window.deps.translateString('share.services.pinterest', 'Pinterest'), - icon: 'pinterest.svg', + icon: 'icon-share-pinterest', createShareUrl: ({ url, title }) => `https://pinterest.com/pin/create/bookmarklet/?url=${encode(url)}&description=${encode( title, @@ -157,40 +156,35 @@ export const createShareContainer = async ( }, { name: window.deps.translateString('share.services.whatsApp', 'WhatsApp'), - icon: 'whatsapp.svg', + icon: 'icon-share-whatsapp', createShareUrl: ({ url, title }) => `https://api.whatsapp.com/send?text=${encode(title)} ${encode(url)}`, }, { name: window.deps.translateString('share.services.telegram', 'Telegram'), - icon: 'telegram.svg', + icon: 'icon-share-telegram', createShareUrl: ({ url, title }) => `https://t.me/share/url?url=${encode(url)}&text=${encode(title)}`, }, { name: window.deps.translateString('share.services.pocket', 'Pocket'), - icon: 'pocket.svg', + icon: 'icon-share-pocket', createShareUrl: ({ url, title }) => `https://getpocket.com/save?url=${encode(url)}&title=${encode(title)}`, }, { name: window.deps.translateString('share.services.email', 'Email'), - icon: 'email.svg', + icon: 'icon-share-email', createShareUrl: ({ url, title }) => `mailto:?subject=${encode(title)}&body=${encode(url)}`, }, - /* { - name: window.deps.translateString('share.services.copyUrl', 'Copy URL'), - icon: 'copy.svg', - onClick: ({ url }) => copyUrl(url), - }, */ { name: window.deps.translateString('share.services.qrCode', 'QR code'), - icon: 'qr-code.svg', + icon: 'icon-share-qr', onClick: showQrCode, }, { name: window.deps.translateString('share.services.share', 'Share via …'), - icon: 'share.svg', + icon: 'icon-share', onClick: ({ url, title }) => navigator.share({ url, title }), }, ]; diff --git a/src/livecodes/core.ts b/src/livecodes/core.ts index bf93a115e..fae311dd6 100644 --- a/src/livecodes/core.ts +++ b/src/livecodes/core.ts @@ -391,7 +391,8 @@ const setEditorTitle = (editorId: EditorId, title: string) => { const createCopyButtons = () => { const editorIds: EditorId[] = ['markup', 'style', 'script']; - const copyImgHtml = `copy`; + // const copyImgHtml = `copy`; + const copyImgHtml = ``; editorIds.forEach((editorId) => { const copyButton = document.createElement('div'); copyButton.innerHTML = copyImgHtml; @@ -3258,7 +3259,7 @@ const handleWelcome = () => { const defaultTemplateId = getAppData()?.defaultTemplate; if (!defaultTemplateId) { - UI.getWelcomeLinkNoDefaultTemplate(welcomeContainer).style.display = 'unset'; + UI.getWelcomeLinkNoDefaultTemplate(welcomeContainer).style.display = 'inline-block'; } else { const loadTemplateLink = UI.getWelcomeLinkLoadDefault(welcomeContainer); eventsManager.addEventListener( @@ -3272,7 +3273,7 @@ const handleWelcome = () => { }, false, ); - loadTemplateLink.style.display = 'unset'; + loadTemplateLink.style.display = 'block'; } UI.getWelcomeLinkDefaultTemplateLi(welcomeContainer).style.visibility = 'visible'; diff --git a/src/livecodes/deploy/deploy.ts b/src/livecodes/deploy/deploy.ts index eda506c71..f9c74313b 100644 --- a/src/livecodes/deploy/deploy.ts +++ b/src/livecodes/deploy/deploy.ts @@ -194,12 +194,14 @@ export const deployedConfirmation = (deployResult: DeployResult, sourcePublished const msg = ` `; diff --git a/src/livecodes/html/about.html b/src/livecodes/html/about.html index 6059717df..6f233ae42 100644 --- a/src/livecodes/html/about.html +++ b/src/livecodes/html/about.html @@ -3,12 +3,18 @@