Skip to content

refactor: improve basic popup view structure and fix issues #624

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ACTCD merged 6 commits into from
Feb 20, 2024
Merged

refactor: improve basic popup view structure and fix issues #624

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
821a649
fix: improve platform recognition then fix icon display in visionos
ACTCD Feb 9, 2024
54da240
refactor: solve the unpleasant bounce of loader icon
ACTCD Feb 9, 2024
b660a36
refactor: improve basic popup view structure
ACTCD Feb 10, 2024
af2954f
fix: think of visionos always as ios
ACTCD Feb 10, 2024
8d9b7a2
fix: revert view height and scrolling for macos
ACTCD Feb 12, 2024
9d25daf
fix: make the subview none style consistent
ACTCD Feb 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
286 changes: 132 additions & 154 deletions src/ext/action-popup/App.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,6 @@
let platform;
let initError;
let firstGuide;
let windowHeight = 0;
let header;
let warn;
let err;
Expand All @@ -50,13 +49,10 @@
let installViewUserscriptError;
let showAll;
let allItems = [];
let resizeTimer;
let abort = false;

$: list = items.sort((a, b) => a.name.localeCompare(b.name));

$: if (platform) document.body.classList.add(platform);

function getItemBackgroundColor(elements, index) {
if (elements.length < 2) return null;
if (elements.length % 2 === 0 && index % 2 === 0) return "light";
Expand Down Expand Up @@ -264,9 +260,6 @@
// set toggle state
active = await settingsStorage.get("global_active");

// set popup height
resize();

// get matches
const currentTab = await browser.tabs.getCurrent();
const url = currentTab.url;
Expand Down Expand Up @@ -361,34 +354,15 @@
window.location.reload();
}

async function resize() {
if (!platform || platform === "macos") return;
clearTimeout(resizeTimer);
resizeTimer = setTimeout(async () => {
if (platform === "ipados") {
if (window.matchMedia("(max-width: 360px)").matches) {
// the popup window is no greater than 360px
// ensure body & main element have no leftover styling
main.removeAttribute("style");
document.body.removeAttribute("style");
return;
}
main.style.maxHeight = "unset";
document.body.style.width = "100vw";
}
// on ios and ipados (split view) programmatically set the height of the scrollable container
// first get the header height
const headerHeight = header.offsetHeight;
// then check if a warning or error is visible (ie. taking up height)
let addHeight = 0;
// if warn or error elements visible, also subtract that from applied height
if (warn) addHeight += warn.offsetHeight;
if (err) addHeight += err.offsetHeight;
windowHeight = window.outerHeight - (headerHeight + addHeight);
main.style.height = `${windowHeight}px`;
main.style.paddingBottom = `${headerHeight + addHeight}px`;
}, 25);
}
/** @type {import("svelte/elements").UIEventHandler<Window>} */
// async function resizeHandler(event) {
// if (platform !== "macos") {
// const viewport = event.currentTarget.visualViewport;
// console.debug(platform, viewport);
// // add max limits after the window size has been rendered
// // avoid display overflow when window shrinks dynamically
// }
// }

/**
* Check if the current page contains a user script
Expand Down Expand Up @@ -497,8 +471,6 @@

onMount(async () => {
await initialize();
// run resize again for good measure
resize();
});

// handle native app messages
Expand All @@ -522,114 +494,6 @@
let showBetaNews = true;
</script>

<svelte:window on:resize={resize} />
<div class="header" bind:this={header}>
<IconButton
icon={iconOpen}
title={"Open save location"}
on:click={openSaveLocation}
{disabled}
/>
<IconButton
icon={iconUpdate}
infoDot={!!updates.length}
on:click={() => (showUpdates = true)}
title={"Show updates"}
{disabled}
/>
<IconButton
icon={iconRefresh}
on:click={refreshView}
title={"Refresh view"}
{disabled}
/>
<Toggle
checked={active}
title={"Toggle injection"}
on:click={toggleExtension}
{disabled}
/>
</div>
{#if !active}
<!-- <div class="warn" bind:this={warn}>Injection disabled</div> -->
{/if}
{#if showBetaNews && platform !== "macos"}
<div class="warn">
NEW: <button on:click={gotoExtensionPage}><b>Settings page</b></button> is
now available on iOS!
<IconButton
icon={iconClear}
on:click={() => (showBetaNews = false)}
title={"Close"}
/>
</div>
{/if}
{#if showInstallPrompt}
<div class="warn" class:done={scriptInstalled} bind:this={warn}>
Userscript
{#if scriptChecking}
{showInstallPrompt}
{:else}
{scriptInstalled ? "Installed" : "Detected"}:
<button on:click={showInstallView}>{showInstallPrompt}</button>
{/if}
</div>
{/if}
{#if errorNotification}
<div class="error" bind:this={err}>
{errorNotification}
<IconButton
icon={iconClear}
on:click={() => (errorNotification = undefined)}
title={"Clear error"}
/>
</div>
{/if}
<div class="main {rowColors || ''}" bind:this={main}>
{#if loading}
<Loader abortClick={abortUpdates} {abort} />
{:else if inactive}
<div class="none">Popup inactive on extension page</div>
{:else if firstGuide}
<div class="none">
<p>Welcome, first use please:&nbsp;</p>
<button class="link" on:click={openContainingApp}>
Open Userscripts App
</button>
<p>to complete the initialization</p>
</div>
{:else if initError}
<div class="none">
Something went wrong:&nbsp;
<button class="link" on:click={() => window.location.reload()}>
click to retry
</button>
</div>
{:else if items.length < 1}
<div class="none">No matched userscripts</div>
{:else}
<div class="items" class:disabled>
{#each list as item, i (item.filename)}
<PopupItem
background={getItemBackgroundColor(list, i)}
enabled={!item.disabled}
name={item.name}
subframe={item.subframe}
type={item.type}
request={!!item.request}
on:click={() => toggleItem(item)}
/>
{/each}
</div>
{/if}
</div>
{#if !inactive && platform === "macos"}
<div class="footer">
<button class="link" on:click={gotoExtensionPage}>
Open Extension Page
</button>
</div>
{/if}
{#if showUpdates}
<View
headerTitle={"Updates"}
Expand Down Expand Up @@ -672,33 +536,150 @@
>
<AllItemsView {allItems} allItemsToggleItem={toggleItem} />
</View>
{:else}
<div class="header" bind:this={header}>
<div class="buttons">
<IconButton
icon={iconOpen}
title={"Open save location"}
on:click={openSaveLocation}
{disabled}
/>
<IconButton
icon={iconUpdate}
infoDot={!!updates.length}
on:click={() => (showUpdates = true)}
title={"Show updates"}
{disabled}
/>
<IconButton
icon={iconRefresh}
on:click={refreshView}
title={"Refresh view"}
{disabled}
/>
<Toggle
checked={active}
title={"Toggle injection"}
on:click={toggleExtension}
{disabled}
/>
</div>
{#if !active}
<!-- <div class="warn" bind:this={warn}>Injection disabled</div> -->
{/if}
{#if showBetaNews && platform !== "macos"}
<div class="warn">
NEW: <button on:click={gotoExtensionPage}><b>Settings page</b></button>
is now available!
<IconButton
icon={iconClear}
on:click={() => (showBetaNews = false)}
title={"Close"}
/>
</div>
{/if}
{#if showInstallPrompt}
<div class="warn" class:done={scriptInstalled} bind:this={warn}>
Userscript
{#if scriptChecking}
{showInstallPrompt}
{:else}
{scriptInstalled ? "Installed" : "Detected"}:
<button on:click={showInstallView}>{showInstallPrompt}</button>
{/if}
</div>
{/if}
{#if errorNotification}
<div class="error" bind:this={err}>
{errorNotification}
<IconButton
icon={iconClear}
on:click={() => (errorNotification = undefined)}
title={"Clear error"}
/>
</div>
{/if}
</div>
<div class="main {rowColors || ''}" bind:this={main}>
{#if loading}
<Loader abortClick={abortUpdates} {abort} />
{:else if inactive}
<div class="none">Popup inactive on extension page</div>
{:else if firstGuide}
<div class="none">
<p>Welcome, first use please:&nbsp;</p>
<button class="link" on:click={openContainingApp}>
Open Userscripts App
</button>
<p>to complete the initialization</p>
</div>
{:else if initError}
<div class="none">
Something went wrong:&nbsp;
<button class="link" on:click={() => window.location.reload()}>
click to retry
</button>
</div>
{:else if items.length < 1}
<div class="none">No matched userscripts</div>
{:else}
<div class="items" class:disabled>
{#each list as item, i (item.filename)}
<PopupItem
background={getItemBackgroundColor(list, i)}
enabled={!item.disabled}
name={item.name}
subframe={item.subframe}
type={item.type}
request={!!item.request}
on:click={() => toggleItem(item)}
/>
{/each}
</div>
{/if}
</div>
{#if !inactive && platform === "macos"}
<div class="footer">
<button class="link" on:click={gotoExtensionPage}>
Open Extension Page
</button>
</div>
{/if}
{/if}

<style>
.header {
background-color: var(--color-bg-secondary);
position: sticky;
top: 0;
z-index: 1;
}

.header .buttons {
align-items: center;
border-bottom: 1px solid var(--color-black);
display: flex;
padding: 0.5rem 1rem calc(0.5rem - 1px) 1rem;
}

.header :global(button:nth-of-type(2)) {
.header .buttons :global(button:nth-of-type(2)) {
margin: 0 auto 0 1rem;
}

.header :global(button:nth-of-type(3)) {
.header .buttons :global(button:nth-of-type(3)) {
margin-right: 1rem;
}

.header :global(button:nth-of-type(1) svg) {
.header .buttons :global(button:nth-of-type(1) svg) {
transform: scale(0.75);
}

.header :global(button:nth-of-type(2) svg) {
.header .buttons :global(button:nth-of-type(2) svg) {
transform: scale(0.9);
}

.header :global(button:nth-of-type(4)) {
.header .buttons :global(button:nth-of-type(4)) {
--toggle-font-size: 1.25rem;
}

Expand Down Expand Up @@ -746,15 +727,12 @@
}

.main {
flex-grow: 1;
min-height: 12.5rem;
overflow-y: auto;
position: relative;
}

:global(body:not(.ios) .main) {
max-height: 20rem;
}

.none {
font-weight: 600;
color: var(--text-color-disabled);
Expand Down
Loading