Skip to content
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

feat(popup): userscript detail view #447

Draft
wants to merge 12 commits into
base: main
Choose a base branch
from
Draft

feat(popup): userscript detail view #447

Changes from 1 commit
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
1830409
chore: fix dev compatibility
ACTCD Mar 10, 2023
2d37a89
feat: add detail button for items in popup
ACTCD Mar 10, 2023
9f0a19f
refactor: use `:active` only when hover available
ACTCD Mar 10, 2023
86e1d5c
feat: add left border when use touch device
ACTCD Mar 10, 2023
7375d5a
feat: add `DetailView` for popup
ACTCD Mar 11, 2023
9bdbc2c
refactor: migrating `InstallView` to `DetailView`
ACTCD Mar 11, 2023
fc9c7e6
style: adjust buttons
ACTCD Mar 11, 2023
1167f5d
style: adjust media query
ACTCD Mar 11, 2023
aceee28
feat: add `DetailView` for `AllItemsView`
ACTCD Mar 11, 2023
357dc87
chore(dev.js): reuse metadata
ACTCD Mar 11, 2023
f82ce6b
feat: trash file and confirmation
ACTCD Mar 13, 2023
8cf0deb
chore: update `i` button styles
quoid Mar 15, 2023
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
38 changes: 26 additions & 12 deletions src/popup/Components/PopupItem.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
<script>
import IconButton from "../../shared/Components/IconButton.svelte";
import Tag from "../../shared/Components/Tag.svelte";
import iconInfo from "../../shared/img/icon-info.svg?raw";

export let background;
export let enabled = false;
Expand All @@ -21,7 +23,12 @@
<div class="truncate">{name}</div>
{#if subframe}<div class="subframe">SUB</div>{/if}
</div>
<div class="more" on:click={detailItem}>ⓘ</div>
<div class="more" on:click={detailItem}>
<IconButton
icon={iconInfo}
title="Show user script details"
ACTCD marked this conversation as resolved.
Show resolved Hide resolved
/>
</div>
</div>

<style>
Expand All @@ -39,23 +46,15 @@
}

@media (hover: hover) {
.item:hover,
.item .base:hover,
.item .more:hover {
.item:hover {
background-color: rgb(255 255 255 / 0.075);
}

.item:active {
background-color: rgb(255 255 255 / 0.15);
}
}

@media (hover: none) {
.item .more {
border-left: .1rem solid rgb(255 255 255 / 0.075);
}
}

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we have an alternate design, or really don't need this? border-left was added to indicate the clickable area on devices without hover.

.item .base {
align-items: center;
cursor: pointer;
Expand All @@ -69,10 +68,25 @@
}

.item .more {
padding: .5rem 1rem;
padding: .5rem;
Copy link
Collaborator Author

@ACTCD ACTCD Mar 15, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There is a scroll bar occlusion problem here. The scroll bar has two widths in different situations. When it becomes wider, it is not easy to click the button. Maybe we should customize the scrollbar.
图片

font-weight: bold;
}

.more :global(button svg) {
opacity: 1;
transform: scale(0.75);
}

@media (hover: hover) {
.more :global(button svg:not(:hover)) {
opacity: 0.25;
}

.more:hover :global(button svg) {
opacity: 1;
}
}

span {
align-items: center;
background-color: var(--color-red);
Expand Down