From df18031720d871b8fca5d1616e2c53b2526db839 Mon Sep 17 00:00:00 2001 From: Ajit Kumar Date: Thu, 21 Aug 2025 00:54:08 +0530 Subject: [PATCH] fix(big screen ui, global search not working) --- src/components/collapsableList.js | 2 + src/components/contextmenu/style.scss | 25 -- src/components/searchbar/style.scss | 17 - src/components/sidebar/index.js | 2 +- src/components/sidebar/style.scss | 4 +- src/components/tile/style.scss | 15 - src/dialogs/style.scss | 67 ---- src/lib/openFolder.js | 25 +- src/main.js | 11 +- src/main.scss | 26 -- src/pages/plugins/plugins.scss | 161 +--------- src/pages/sponsors/style.scss | 2 - src/pages/themeSetting/themeSetting.js | 4 +- src/sidebarApps/extensions/index.js | 74 +++-- src/sidebarApps/extensions/style.scss | 43 +-- src/sidebarApps/searchInFiles/index.js | 11 +- src/styles/list.scss | 36 --- src/styles/page.scss | 46 --- src/styles/wideScreen.scss | 424 +++++++++++++++++++++++++ webpack.config.js | 1 - 20 files changed, 507 insertions(+), 489 deletions(-) create mode 100644 src/styles/wideScreen.scss diff --git a/src/components/collapsableList.js b/src/components/collapsableList.js index 8be09dbf7..4ea4c68af 100644 --- a/src/components/collapsableList.js +++ b/src/components/collapsableList.js @@ -68,6 +68,8 @@ export default function collapsableList( [$title, $mainWrapper].forEach(defineProperties); + $mainWrapper.dataset.id = `${Math.random().toString(36).substring(2, 15)}`; + return $mainWrapper; function onUlScroll() { diff --git a/src/components/contextmenu/style.scss b/src/components/contextmenu/style.scss index 9afabf032..0b3dbb512 100644 --- a/src/components/contextmenu/style.scss +++ b/src/components/contextmenu/style.scss @@ -29,12 +29,6 @@ body.no-animation { border: solid 1px transparent; border: solid 1px var(--popup-border-color); - @media (min-width: 1024px) { - min-width: 260px; - max-width: 400px; - min-height: 48px; - } - &+.mask { z-index: 110; } @@ -101,25 +95,6 @@ body.no-animation { pointer-events: none; opacity: 0.5; } - - @media (min-width: 1024px) { - height: 55px; - font-size: 1.05em; - - &.notice::after { - font-size: 1.3em; - } - - .text { - .value { - font-size: 0.85em; - } - } - - .icon { - font-size: 1.1em; - } - } } &.hide { diff --git a/src/components/searchbar/style.scss b/src/components/searchbar/style.scss index 82373ee6b..07d56aa78 100644 --- a/src/components/searchbar/style.scss +++ b/src/components/searchbar/style.scss @@ -44,21 +44,4 @@ opacity: 0; transform: translate(0, -100%, 0); } - - @media (min-width: 1024px) { - height: 50px; - - input { - margin: 8px; - border-radius: 6px; - font-size: 1.1em; - padding: 0 12px; - } - - .icon { - height: 50px; - width: 50px; - font-size: 1.3em; - } - } } \ No newline at end of file diff --git a/src/components/sidebar/index.js b/src/components/sidebar/index.js index e77da3290..a331697d4 100644 --- a/src/components/sidebar/index.js +++ b/src/components/sidebar/index.js @@ -1,5 +1,5 @@ -import toast from "components/toast"; import "./style.scss"; +import toast from "components/toast"; import Ref from "html-tag-js/ref"; import actionStack from "lib/actionStack"; import auth, { loginEvents } from "lib/auth"; diff --git a/src/components/sidebar/style.scss b/src/components/sidebar/style.scss index 2ed3ca2eb..fb63c72a5 100644 --- a/src/components/sidebar/style.scss +++ b/src/components/sidebar/style.scss @@ -139,8 +139,8 @@ body.no-animation { max-height: 100%; &.hidden { - max-height: 30px !important; - min-height: 30px !important; + max-height: 30px; + min-height: 30px; overflow: hidden !important; } diff --git a/src/components/tile/style.scss b/src/components/tile/style.scss index 280e2ed0e..9ccf79bb3 100644 --- a/src/components/tile/style.scss +++ b/src/components/tile/style.scss @@ -18,14 +18,6 @@ header { white-space: nowrap; overflow: auto; } - - @media (min-width: 1024px) { - height: 60px; - - >.text { - font-size: 1.4em; - } - } } } @@ -105,12 +97,5 @@ header { transition: all 100ms ease; transform: scale(0.95) translateZ(0); } - - @media (min-width: 1024px) { - height: 60px; - width: 60px; - font-size: 2.5em; - background-size: 2em; - } } } \ No newline at end of file diff --git a/src/dialogs/style.scss b/src/dialogs/style.scss index ad420572c..3fbd1b0f8 100644 --- a/src/dialogs/style.scss +++ b/src/dialogs/style.scss @@ -24,10 +24,6 @@ display: flex; flex-direction: column; - @media (min-width: 1024px) { - max-width: 400px; - } - &.box { z-index: 113; } @@ -70,27 +66,6 @@ background-position: center; } } - - @media (min-width: 1024px) { - min-width: 280px; - max-width: 420px; - - ul { - padding: 15px; - - li { - height: 48px; - font-size: 1.1em; - margin: 2px 0; - padding: 0 8px; - - .icon { - font-size: 1.1em; - margin-right: 8px; - } - } - } - } } ul { @@ -121,11 +96,6 @@ justify-content: center; color: rgb(37, 37, 37); color: var(--popup-text-color); - - @media (min-width: 1024px) { - height: 48px; - font-size: 1.1em; - } } } @@ -158,15 +128,6 @@ min-height: 40px; margin: 5px 10px 0 10px; } - - @media (min-width: 1024px) { - font-size: 1.35em; - - &:not(:empty) { - min-height: 48px; - margin: 8px 15px 0 15px; - } - } } .message { @@ -253,12 +214,6 @@ padding: 10px; min-height: 40px; font-size: 1.2em; - - @media (min-width: 1024px) { - padding: 15px; - min-height: 48px; - font-size: 1.3em; - } } } @@ -282,21 +237,6 @@ height: 40px; width: 50%; } - - @media (min-width: 1024px) { - min-height: 48px; - margin: 4px auto; - max-width: 360px; - - .hero { - height: 48px; - font-size: 1.3em; - } - - .input-checkbox { - height: 48px; - } - } } .input { @@ -320,13 +260,6 @@ border-bottom: solid 1px rgb(51, 153, 255); border-bottom: solid 1px var(--active-color); } - - @media (min-width: 1024px) { - max-width: 360px; - font-size: 1.1em; - margin: 4px auto; - padding: 4px 0; - } } li { diff --git a/src/lib/openFolder.js b/src/lib/openFolder.js index dd769d25a..40c82e80f 100644 --- a/src/lib/openFolder.js +++ b/src/lib/openFolder.js @@ -114,7 +114,6 @@ function openFolder(_path, opts = {}) { $root.expand(); }, }; - addedFolder.push(folder); editorManager.emit("update", "add-folder"); editorManager.onupdate("add-folder", event); @@ -136,6 +135,7 @@ function openFolder(_path, opts = {}) { } folder.listFiles = listFiles; + addedFolder.push(folder); })(); if (listState[_path]) { @@ -834,29 +834,6 @@ function createFileTile(name, url) { return $tile; } -/** - * Create a tail for the tile - * @param {object} param0 - * @param {HTMLElement} param0.target - * @returns {HTMLElement} - */ -// function Tail({ target }) { -// return ( -// { -// e.stopPropagation(); -// e.preventDefault(); -// handleItems({ -// target: target(), -// type: "contextmenu", -// }); -// }} -// > -// ); -// } - /** * Add file or folder to the list if expanded * @param {string} url Url of file or folder to add diff --git a/src/main.js b/src/main.js index 68edb9cf7..d01500c63 100644 --- a/src/main.js +++ b/src/main.js @@ -5,6 +5,7 @@ import "./main.scss"; import "res/icons/style.css"; import "res/file-icons/style.css"; import "styles/overrideAceStyle.scss"; +import "styles/wideScreen.scss"; import "lib/polyfill"; import "ace/supportedModes"; @@ -204,16 +205,6 @@ async function onDeviceReady() { "data-small-msg", "This is taking unexpectedly long time!", ); - // share the log file (but currently doesn't work) - // system.fileAction( - // Url.join(DATA_STORAGE, constants.LOG_FILE_NAME), - // constants.LOG_FILE_NAME, - // "SEND", - // "text/plain", - // () => { - // toast(strings["no app found to handle this file"]); - // }, - // ); } }, 1000 * 10); diff --git a/src/main.scss b/src/main.scss index 124834d79..f1f7b8cd5 100644 --- a/src/main.scss +++ b/src/main.scss @@ -27,10 +27,6 @@ body { width: 100%; height: 100%; font-size: 14px; - - @media (min-width: 1024px) { - font-size: 15px; - } } body { @@ -331,10 +327,6 @@ footer { user-select: none; width: 100%; - @media (min-width: 1024px) { - min-height: 45px; - } - &.primary { button { color: white !important; @@ -411,10 +403,6 @@ footer { .icon { color: inherit; font-size: 1.3em; - - @media (min-width: 1024px) { - font-size: 1.4em; - } } .search, @@ -441,12 +429,6 @@ input { border-bottom-color: #a90000 !important; border-bottom-color: var(--active-color) !important; } - - @media (min-width: 1024px) { - height: 45px; - font-size: 1.1em; - text-indent: 12px; - } } input, @@ -609,14 +591,6 @@ textarea { &.hide { opacity: 0 !important; } - - @media (min-width: 1024px) { - height: 65px; - width: 65px; - font-size: 2rem; - top: 15px; - right: 15px; - } } button { diff --git a/src/pages/plugins/plugins.scss b/src/pages/plugins/plugins.scss index be30c6495..279cddeeb 100644 --- a/src/pages/plugins/plugins.scss +++ b/src/pages/plugins/plugins.scss @@ -52,9 +52,9 @@ } .list-item { - margin: 0 0.75rem 0.5rem 0.75rem; + margin: 0 0.5rem 0.5rem 0.5rem; background: var(--secondary-color); - padding: 1rem; + padding: 0.875rem; border-radius: 12px; transition: all 0.2s ease; display: flex; @@ -78,16 +78,16 @@ .plugin-header { display: flex; align-items: center; - gap: 1rem; + gap: 0.75rem; width: 100%; max-width: 100%; height: fit-content; - min-height: 48px; + min-height: 40px; .plugin-icon { - width: 48px; - height: 48px; - border-radius: 12px; + width: 40px; + height: 40px; + border-radius: 10px; flex-shrink: 0; overflow: hidden; display: flex; @@ -110,7 +110,7 @@ display: flex; align-items: center; justify-content: space-between; - gap: 1rem; + gap: 0.75rem; margin: 0; height: fit-content; @@ -127,7 +127,7 @@ .plugin-name { font-weight: 600; - font-size: 1rem; + font-size: 0.95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; @@ -216,7 +216,7 @@ gap: 0.5rem; cursor: pointer; z-index: 100; - min-width: 120px; + min-width: 100px; pointer-events: auto !important; position: relative; margin-left: auto; @@ -231,8 +231,8 @@ } .plugin-toggle-track { - width: 44px; - height: 24px; + width: 40px; + height: 22px; border-radius: 12px; background: #e5e7eb; position: relative; @@ -252,8 +252,8 @@ position: absolute; left: 2px; top: 2px; - width: 20px; - height: 20px; + width: 18px; + height: 18px; border-radius: 50%; background: white; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); @@ -262,138 +262,7 @@ .plugin-toggle-switch[data-enabled="true"] .plugin-toggle-thumb, .plugin-toggle-track[data-enabled="true"] .plugin-toggle-thumb { - left: 22px; - } - - // Responsive design for larger screens - @media (min-width: 1024px) { - margin: 0 1rem 0.75rem 1rem; - padding: 1.25rem; - border-radius: 16px; - - .plugin-header { - gap: 1.25rem; - min-height: 56px; - - .plugin-icon { - width: 56px; - height: 56px; - border-radius: 14px; - } - - .plugin-info { - gap: 1.25rem; - - .plugin-main { - .plugin-title { - gap: 1rem; - margin-bottom: 0.5rem; - - .plugin-name { - font-size: 1.1rem; - font-weight: 700; - } - - .plugin-version { - font-size: 0.8rem; - padding: 0.3rem 0.6rem; - } - } - - .plugin-meta { - font-size: 0.95rem; - gap: 0.75rem; - - .plugin-stats { - font-size: 0.95rem; - gap: 0.5rem; - - .icon { - width: 16px; - height: 16px; - font-size: 16px; - } - } - } - } - - .plugin-price { - padding: 0.5rem 1rem; - font-size: 0.95rem; - border-radius: 10px; - } - } - } - - .plugin-toggle-switch { - min-width: 140px; - padding: 0.75rem; - - .plugin-toggle-track { - width: 52px; - height: 28px; - border-radius: 14px; - } - - .plugin-toggle-thumb { - width: 24px; - height: 24px; - left: 2px; - top: 2px; - } - - &[data-enabled="true"] .plugin-toggle-thumb { - left: 26px; - } - } - } - - // Responsive design for smaller screens - @media (max-width: 1024px) { - margin: 0 0.5rem 0.5rem 0.5rem; - padding: 0.875rem; - - .plugin-header { - gap: 0.75rem; - min-height: 40px; - - .plugin-icon { - width: 40px; - height: 40px; - border-radius: 10px; - } - - .plugin-info { - gap: 0.75rem; - - .plugin-main { - .plugin-title { - .plugin-name { - font-size: 0.95rem; - } - } - } - } - } - - .plugin-toggle-switch { - min-width: 100px; - } - - .plugin-toggle-track { - width: 40px; - height: 22px; - } - - .plugin-toggle-thumb { - width: 18px; - height: 18px; - } - - .plugin-toggle-switch[data-enabled="true"] .plugin-toggle-thumb, - .plugin-toggle-track[data-enabled="true"] .plugin-toggle-thumb { - left: 20px; - } + left: 20px; } } } \ No newline at end of file diff --git a/src/pages/sponsors/style.scss b/src/pages/sponsors/style.scss index 96e7ad4a1..eb5f6ab89 100644 --- a/src/pages/sponsors/style.scss +++ b/src/pages/sponsors/style.scss @@ -91,8 +91,6 @@ display: block; width: 100%; padding: 2rem; - text-align: center; - color: rgba(255, 255, 255, 0.5); font-style: italic; } } diff --git a/src/pages/themeSetting/themeSetting.js b/src/pages/themeSetting/themeSetting.js index 847dca3f0..671f023d3 100644 --- a/src/pages/themeSetting/themeSetting.js +++ b/src/pages/themeSetting/themeSetting.js @@ -246,8 +246,8 @@ console.log(message);`);
{name}
- {isCurrent ? check : <>} - {isPremium ? star : <>} + {isCurrent && check} + {isPremium && star} ); diff --git a/src/sidebarApps/extensions/index.js b/src/sidebarApps/extensions/index.js index fba0120e2..316690069 100644 --- a/src/sidebarApps/extensions/index.js +++ b/src/sidebarApps/extensions/index.js @@ -57,6 +57,10 @@ const $header = ( ); +const $style = ; +/** @type {Set} */ +const $scrollableLists = new Set(); + let searchTimeout = null; let installedPlugins = []; @@ -104,11 +108,11 @@ function initApp(el) { if (!$installed) { $installed = collapsableList(strings.installed); $installed.ontoggle = loadInstalled; - //$installed.expand(); container.append($installed); } Sidebar.on("show", onSelected); + document.head.append($style); } async function handleScroll(e) { @@ -284,15 +288,6 @@ async function filterPlugins() { } } -async function clearFilter() { - currentFilter = null; - filterCurrentPage = 1; - filterHasMore = true; - isFilterLoading = false; - $searchResult.content = ""; - $searchResult.onscroll = null; -} - async function addSource() { const sourceOption = [ ["remote", strings.remote], @@ -421,30 +416,63 @@ function updateHeight($el) { removeHeight($installed, $el !== $installed); removeHeight($explore, $el !== $explore); - let height = $header.getBoundingClientRect().height; - if ($el === $searchResult) { - height += 60; - } else { - height += $searchResult.getBoundingClientRect().height + 30; - } + try { + let height = $header.getBoundingClientRect().height; + const tileHeight = $el.get(":scope>.tile").getBoundingClientRect().height; + if ($el === $searchResult) { + height += 60; + } else { + height += $searchResult.getBoundingClientRect().height + tileHeight; + } - setHeight($el, height); + setHeight($el, height); + } catch (error) { + console.error(error); + } } +/** + * Remove height styles from an element + * @param {HTMLElement} $el + * @param {Boolean} collapse + */ function removeHeight($el, collapse = false) { if (collapse) $el.collapse?.(); - $el.style.removeProperty("max-height"); - $el.style.removeProperty("height"); + + $scrollableLists.delete($el); + updateStyle(); } +/** + * Change the height of an element + * @param {HTMLElement} $el + * @param {Number} height + */ function setHeight($el, height) { + $scrollableLists.add($el); + const calcHeight = height ? `calc(100% - ${height}px)` : "100%"; - $el.style.maxHeight = calcHeight; + $el.dataset.height = calcHeight; if ($el === $searchResult) { $el.style.height = "fit-content"; return; } - $el.style.height = calcHeight; + + updateStyle(); +} + +function updateStyle() { + let style = ""; + + $scrollableLists.forEach(($el) => { + style += ` + .list.collapsible[data-id="${$el.dataset.id}"] { + max-height: ${$el.dataset.height} !important; + } + `; + }); + + $style.innerHTML = style; } function getLocalRes(id, name) { @@ -640,7 +668,9 @@ async function loadAd(el) { await window.iad.load(); el.textContent = oldText; } - } catch (error) {} + } catch (error) { + console.error(error); + } } async function uninstall(id) { diff --git a/src/sidebarApps/extensions/style.scss b/src/sidebarApps/extensions/style.scss index 85f77147c..18d79cfde 100644 --- a/src/sidebarApps/extensions/style.scss +++ b/src/sidebarApps/extensions/style.scss @@ -64,28 +64,6 @@ color: var(--secondary-text-color); } } - - @media (min-width: 1024px) { - padding: 12px; - - .title { - font-size: 1.25rem; - - .icon-button { - padding: 0.5rem; - margin-left: 0.5rem; - border-radius: 8px; - min-width: 36px; - min-height: 36px; - font-size: 1.1em; - } - } - - input[type="search"] { - padding: 0.6rem; - font-size: 0.95rem; - } - } } .list.search-result { @@ -131,7 +109,7 @@ display: flex; justify-content: space-between; align-items: center; - min-height: 35px; + min-height: 30px; padding: 6px 8px; .text { @@ -189,29 +167,10 @@ transform: scale(0.95); } } - - @media (min-width: 1024px) { - min-height: 40px; - padding: 5px 12px; - - .text { - &.sub-text { - font-size: 0.85rem; - - &::after { - font-size: 0.75rem; - } - } - } - } } .icon { background-size: 24px !important; background-position: center !important; - - @media (min-width: 1024px) { - background-size: 26px !important; - } } } \ No newline at end of file diff --git a/src/sidebarApps/searchInFiles/index.js b/src/sidebarApps/searchInFiles/index.js index d2b84b856..5fc682911 100644 --- a/src/sidebarApps/searchInFiles/index.js +++ b/src/sidebarApps/searchInFiles/index.js @@ -5,6 +5,7 @@ import autosize from "autosize"; import Checkbox from "components/checkbox"; import Sidebar, { preventSlide } from "components/sidebar"; import escapeStringRegexp from "escape-string-regexp"; +import Reactive from "html-tag-js/reactive"; import Ref from "html-tag-js/ref"; import files, { Tree } from "lib/fileList"; import openFile from "lib/openFile"; @@ -27,8 +28,8 @@ const $wholeWord = Ref(); const $caseSensitive = Ref(); const $btnReplaceAll = Ref(); const $resultOverview = Ref(); -const $error = <>; -const $progress = <>0; +const $error = Reactive(); +const $progress = Reactive(); const resultOverview = { filesCount: 0, @@ -238,7 +239,7 @@ async function onWorkerMessage(e) { const editorFile = editorManager.getFile(data, "uri"); if (editorFile) { - content = editorFile.session.getValue(); + content = editorFile.session?.getValue() || ""; } else { try { content = await fsOperation(data).readFile( @@ -528,7 +529,7 @@ function terminateWorker(initializeNewWorkers = true) { * @returns {Worker} A new Worker object that runs the code in 'searchInFilesWorker.build.js'. */ function getWorker() { - return new Worker("./js/build/searchInFilesWorker.build.js"); + return new Worker(new URL("./worker.js", import.meta.url)); } /** @@ -628,7 +629,7 @@ function Details({ onexpand }, children) { function Summary({ marker = true, className }, children) { return (
- {marker ? : <>} + {marker && } {children}
); diff --git a/src/styles/list.scss b/src/styles/list.scss index 5362aa1b0..a0bd46b57 100644 --- a/src/styles/list.scss +++ b/src/styles/list.scss @@ -47,16 +47,6 @@ height: 30px; min-width: 30px; } - - @media (min-width: 1024px) { - height: 35px; - font-size: 1.1em; - - .icon { - height: 35px; - min-width: 35px; - } - } } ul { @@ -72,16 +62,6 @@ min-width: 28px; font-size: 1em; } - - @media (min-width: 1024px) { - height: 35px; - - .icon { - height: 32px; - min-width: 32px; - font-size: 1.1em; - } - } } .collapsible { @@ -131,11 +111,6 @@ } } - @media (min-width: 1024px) { - min-height: 65px; - font-size: 1.1em; - } - .container { flex: 1; display: flex; @@ -196,17 +171,6 @@ &.no-icon { width: 20px; } - - @media (min-width: 1024px) { - height: 65px; - width: 65px; - font-size: 1.6em; - - &.no-icon { - width: 25px; - } - } - } .icon { diff --git a/src/styles/page.scss b/src/styles/page.scss index 4009dbdbf..f77c53eea 100644 --- a/src/styles/page.scss +++ b/src/styles/page.scss @@ -274,18 +274,6 @@ wc-page { background-color: var(--active-color); } } - - @media (min-width: 1024px) { - height: 45px; - min-height: 45px; - font-size: 1.1em; - - >* { - &.active::after { - height: 3px; - } - } - } } } @@ -312,10 +300,6 @@ wc-page { #quicktools-toggler { transform: translate3d(0, -40px, 0); - - @media (min-width: 1024px) { - transform: translate3d(0, -45px, 0); - } } &.top-bar { @@ -345,10 +329,6 @@ wc-page { #quicktools-toggler { transform: translate3d(0, -80px, 0); - - @media (min-width: 1024px) { - transform: translate3d(0, -100px, 0); - } } &.top-bar { @@ -378,10 +358,6 @@ wc-page { #quicktools-toggler { transform: translate3d(0, -140px, 0); - - @media (min-width: 1024px) { - transform: translate3d(0, -150px, 0); - } } &.top-bar { @@ -532,28 +508,6 @@ wc-page { margin: auto 1.5px; } } - - @media (min-width: 1024px) { - height: 35px; - - .nav { - height: 30px; - font-size: 1em; - margin: auto 2px; - - &::after { - padding: 3px; - } - - &:first-of-type { - margin-left: 15px; - } - - &:not(:first-of-type)::before { - margin: auto 2px; - } - } - } } } diff --git a/src/styles/wideScreen.scss b/src/styles/wideScreen.scss new file mode 100644 index 000000000..d74235efc --- /dev/null +++ b/src/styles/wideScreen.scss @@ -0,0 +1,424 @@ +@media screen and (min-width: 1024px) { + + html, + body { + font-size: 15px; + } + + .header, + header { + height: 60px; + + >.text { + font-size: 1.4em; + } + } + + .section, + .button-container { + min-height: 45px; + + .icon { + font-size: 1.4em; + } + } + + input { + height: 45px; + font-size: 1.1em; + text-indent: 12px; + } + + .floating.icon { + height: 65px; + width: 65px; + font-size: 2rem; + top: 15px; + right: 15px; + box-shadow: 0 0 2px 4px rgba(0, 0, 0, 0.2); + } + + .context-menu { + min-width: 260px; + max-width: 400px; + min-height: 48px; + + li { + height: 55px; + font-size: 1.05em; + + &.notice::after { + font-size: 1.3em; + } + + .text { + .value { + font-size: 0.85em; + } + } + + .icon { + font-size: 1.1em; + } + } + } + + #search-bar { + height: 50px; + + input { + margin: 8px; + border-radius: 6px; + font-size: 1.1em; + padding: 0 12px; + } + + .icon { + height: 50px; + width: 50px; + font-size: 1.3em; + } + } + + .tile { + .icon { + height: 60px; + width: 60px; + font-size: 2.5em; + background-size: 2em; + } + } + + .prompt { + max-width: 400px; + + &.select { + min-width: 280px; + max-width: 420px; + + ul { + padding: 15px; + + li { + height: 48px; + font-size: 1.1em; + margin: 2px 0; + padding: 0 8px; + + .icon { + font-size: 1.1em; + margin-right: 8px; + } + } + } + } + + ul li { + height: 48px; + font-size: 1.1em; + } + + .title { + font-size: 1.35em; + + &:not(:empty) { + min-height: 48px; + margin: 8px 15px 0 15px; + } + } + + .message { + + .message, + &:not(.loader) { + padding: 15px; + min-height: 48px; + font-size: 1.3em; + } + } + + .input-group { + min-height: 48px; + margin: 4px auto; + max-width: 360px; + + .hero { + height: 48px; + font-size: 1.3em; + } + + .input-checkbox { + height: 48px; + } + } + + .input { + max-width: 360px; + font-size: 1.1em; + margin: 4px auto; + padding: 4px 0; + } + } + + #plugin { + .list-item { + margin: 0 1rem 0.75rem 1rem; + padding: 1.25rem; + border-radius: 16px; + + .plugin-header { + gap: 1.25rem; + min-height: 56px; + + .plugin-icon { + width: 56px; + height: 56px; + border-radius: 14px; + } + + .plugin-info { + gap: 1.25rem; + + .plugin-main { + .plugin-title { + gap: 1rem; + margin-bottom: 0.5rem; + + .plugin-name { + font-size: 1.1rem; + font-weight: 700; + } + + .plugin-version { + font-size: 0.8rem; + padding: 0.3rem 0.6rem; + } + } + + .plugin-meta { + font-size: 0.95rem; + gap: 0.75rem; + + .plugin-stats { + font-size: 0.95rem; + gap: 0.5rem; + + .icon { + width: 16px; + height: 16px; + font-size: 16px; + } + } + } + } + + .plugin-price { + padding: 0.5rem 1rem; + font-size: 0.95rem; + border-radius: 10px; + } + } + } + + .plugin-toggle-switch { + min-width: 140px; + padding: 0.75rem; + + .plugin-toggle-track { + width: 52px; + height: 28px; + border-radius: 14px; + } + + .plugin-toggle-thumb { + width: 24px; + height: 24px; + left: 2px; + top: 2px; + } + + &[data-enabled="true"] .plugin-toggle-thumb { + left: 26px; + } + } + } + } + + #sidebar { + .container { + .header { + height: 100px; + } + + >.list[class] { + &.hidden[class] { + max-height: 40px; + min-height: 40px; + } + + >ul { + max-height: calc(100% - 40px); + height: calc(100% - 40px); + } + } + + &.extensions { + .header { + padding: 12px; + + .title { + min-height: 40px; + font-size: 1.25rem; + + .icon-button { + padding: 0.5rem; + margin-left: 0.5rem; + border-radius: 8px; + min-width: 36px; + min-height: 36px; + font-size: 1.1em; + } + } + + input[type="search"] { + padding: 0.6rem; + font-size: 0.95rem; + } + } + + .tile { + min-height: 40px; + padding: 5px 12px; + + .text { + &.sub-text { + font-size: 0.85rem; + + &::after { + font-size: 0.75rem; + } + } + } + } + + .icon { + background-size: 26px !important; + } + } + + &.notifications { + .header { + height: unset; + } + } + + &.search-in-files { + .header { + min-height: 100px; + height: fit-content; + } + } + } + } + + .list { + &.collapsible { + >.tile { + height: 35px; + font-size: 1.1em; + + .icon { + height: 35px; + min-width: 35px; + } + } + } + + ul { + >.tile { + height: 35px; + + .icon { + height: 32px; + min-width: 32px; + font-size: 1.1em; + } + } + } + + >.list-item { + min-height: 65px; + font-size: 1.1em; + + .icon { + height: 65px; + width: 65px; + font-size: 1.6em; + + &.no-icon { + width: 25px; + } + } + } + } + + w-page { + .main { + >.options { + height: 45px; + min-height: 45px; + font-size: 1.1em; + + >* { + &.active::after { + height: 3px; + } + } + } + } + + &[footer-height="1"] { + #quicktools-toggler { + transform: translate3d(0, -45px, 0); + } + } + + &[footer-height="2"] { + #quicktools-toggler { + transform: translate3d(0, -100px, 0); + } + } + + &[footer-height="3"] { + #quicktools-toggler { + transform: translate3d(0, -150px, 0); + } + } + + main, + .main { + + .navigation { + height: 35px; + + .nav { + height: 30px; + font-size: 1em; + margin: auto 2px; + + &::after { + padding: 3px; + } + + &:first-of-type { + margin-left: 15px; + } + + &:not(:first-of-type)::before { + margin: auto 2px; + } + } + } + } + } +} \ No newline at end of file diff --git a/webpack.config.js b/webpack.config.js index 46db01f6f..29c42385d 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -56,7 +56,6 @@ module.exports = (env, options) => { entry: { main: './src/main.js', console: './src/lib/console.js', - searchInFilesWorker: './src/sidebarApps/searchInFiles/worker.js', }, output: { path: path.resolve(__dirname, 'www/build/'),