Skip to content

Commit

Permalink
chore: changed how grid icons are rendered
Browse files Browse the repository at this point in the history
  • Loading branch information
@Tormak9970
Tormak9970 committed Sep 26, 2024
1 parent 8447fe1 commit db0423f
Show file tree
Hide file tree
Showing 3 changed files with 91 additions and 99 deletions.
111 changes: 55 additions & 56 deletions src/components/core/games/grid-view/GridEntry.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,56 +22,53 @@
<!-- svelte-ignore a11y-click-events-have-key-events -->
<!-- svelte-ignore a11y-no-static-element-interactions -->
<div class="game" class:selected={$selectedGameAppId === game.appid.toString()} on:click={selectGame}>
<div
class="image-control icon-2"
on:click|stopPropagation={() => showAllGrids(game.appid)}
use:AppController.tippy={{ content: "View Grids", placement: "right", onShow: AppController.onTippyShow }}
>
<AllGrids />
</div>
<div
class="image-control icon-30"
on:click|stopPropagation={() => toggleHidden(!isHidden)}
use:AppController.tippy={{ content: isHidden ? "Unhide" : "Hide", placement: "right", onShow: AppController.onTippyShow }}
>
{#if isHidden}
<Show />
{:else}
<Hide />
{/if}
</div>
{#if hasCustomName}
<div
class="image-control icon-58"
on:click|stopPropagation={() => { AppController.clearCustomNameForGame(game.appid.toString()); }}
use:AppController.tippy={{ content: "Clear Custom Name", placement: "right", onShow: AppController.onTippyShow }}
>
<Tag height="1em" />
</div>
{/if}
{#if hasCustomArt}
<div class="button-container">
<div
class="image-control"
class:icon-58={!hasCustomName}
class:icon-86={hasCustomName}
on:click|stopPropagation={() => { AppController.clearCustomArtForGame(game.appid.toString()); }}
use:AppController.tippy={{ content: "Clear Art", placement: "right", onShow: AppController.onTippyShow }}
on:click|stopPropagation={() => showAllGrids(game.appid)}
use:AppController.tippy={{ content: "Grids", placement: "right", onShow: AppController.onTippyShow }}
>
<Ban />
<AllGrids />
</div>
{/if}
{#if canDiscard}
<div
class="image-control"
class:icon-58={!hasCustomName && !hasCustomArt}
class:icon-86={(hasCustomName || hasCustomArt) && !(hasCustomName && hasCustomArt)}
class:icon-114={hasCustomName && hasCustomArt}
on:click|stopPropagation={() => { AppController.discardChangesForGame(game.appid.toString()); }}
use:AppController.tippy={{ content: "Discard Changes", placement: "right", onShow: AppController.onTippyShow }}
on:click|stopPropagation={() => toggleHidden(!isHidden)}
use:AppController.tippy={{ content: isHidden ? "Unhide" : "Hide", placement: "right", onShow: AppController.onTippyShow }}
>
<Recycle />
{#if isHidden}
<Show />
{:else}
<Hide />
{/if}
</div>
{/if}
{#if hasCustomName}
<div
class="image-control"
on:click|stopPropagation={() => { AppController.clearCustomNameForGame(game.appid.toString()); }}
use:AppController.tippy={{ content: "Clear Name", placement: "right", onShow: AppController.onTippyShow }}
>
<Tag height="1em" />
</div>
{/if}
{#if hasCustomArt}
<div
class="image-control"
on:click|stopPropagation={() => { AppController.clearCustomArtForGame(game.appid.toString()); }}
use:AppController.tippy={{ content: "Clear Art", placement: "right", onShow: AppController.onTippyShow }}
>
<Ban />
</div>
{/if}
{#if canDiscard}
<div
class="image-control"
on:click|stopPropagation={() => { AppController.discardChangesForGame(game.appid.toString()); }}
use:AppController.tippy={{ content: "Discard Changes", placement: "right", onShow: AppController.onTippyShow }}
>
<Recycle />
</div>
{/if}
</div>
<GridImage imagePath={imagePath} altText="{game.name}'s {$gridType} image" showImage={showImage} missingMessage="No {$gridType} image for game" />
<div class="name" use:AppController.tippy={{ content: game.name, placement: "right", onShow: AppController.onTippyShow }}>{game.name}</div>
</div>
Expand Down Expand Up @@ -114,38 +111,40 @@
text-align: center;
}
.image-control {
.button-container {
position: absolute;
top: 2px;
left: 2px;
width: 14px;
z-index: 2;
flex-direction: column;
gap: 5px;
display: none;
}
.image-control {
border-radius: 50%;
width: 14px;
height: 14px;
padding: 5px;
left: 2px;
fill: var(--font-color);
background-color: var(--background);
opacity: 0.8;
display: none;
z-index: 2;
}
.image-control:hover {
cursor: pointer;
opacity: 1;
}
.icon-2 { top: 2px; }
.icon-30 { top: 30px; }
.icon-58 { top: 58px; }
.icon-86 { top: 86px; }
.icon-114 { top: 114px; }
.game:hover > .image-control { display: flex; }
.game:hover > .button-container { display: flex; }
</style>
78 changes: 35 additions & 43 deletions src/components/core/grids/Grid.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,22 +34,24 @@
<div class="loading-overlay" class:selected={$dowloadingGridId === grid.id.toString()}>
<LoadingSpinner width="40px" height="40px" />
</div>
<div class="image-control show-view" on:click|stopPropagation={() => { AppController.viewSteamGridImage(grid); }} use:AppController.tippy={{ content: "View Grid", placement: "right", onShow: AppController.onTippyShow }}>
<Expand />
</div>
<div class="image-control show-view-sgdb" on:click|stopPropagation={viewOnSteamGridDB} use:AppController.tippy={{ content: "View on SGDB", placement: "right", onShow: AppController.onTippyShow }}>
<Share />
</div>
{#if grid?.isAnimated}
<div class="image-control show-animated" use:AppController.tippy={{ content: "Animated", placement: "left", onShow: AppController.onTippyShow }}>
<Film />
<div class="button-container">
<div class="image-control" on:click|stopPropagation={() => { AppController.viewSteamGridImage(grid); }} use:AppController.tippy={{ content: "View Grid", placement: "right", onShow: AppController.onTippyShow }}>
<Expand />
</div>
{/if}
{#if grid?.notes}
<div class="image-control show-notes" use:AppController.tippy={{ content: "Notes", placement: "right", onShow: AppController.onTippyShow }}>
<Edit />
<div class="image-control" on:click|stopPropagation={viewOnSteamGridDB} use:AppController.tippy={{ content: "View on SGDB", placement: "right", onShow: AppController.onTippyShow }}>
<Share />
</div>
{/if}
{#if grid?.notes}
<div class="image-control non-interactable" use:AppController.tippy={{ content: "Notes", placement: "right", onShow: AppController.onTippyShow }}>
<Edit />
</div>
{/if}
{#if grid?.isAnimated}
<div class="image-control non-interactable" use:AppController.tippy={{ content: "Animated", placement: "right", onShow: AppController.onTippyShow }}>
<Film />
</div>
{/if}
</div>
<GridImage imagePath={imagePath} altText="{grid.author.name}'s {$gridType} image" missingMessage="Unable to display grid" isVideo={grid.isAnimated} />
<div class="author">By {grid.author.name}</div>
</div>
Expand Down Expand Up @@ -114,55 +116,45 @@
display: flex;
}
.image-control {
.button-container {
position: absolute;
top: 2px;
left: 2px;
width: 14px;
z-index: 2;
flex-direction: column;
gap: 5px;
display: none;
}
.image-control {
border-radius: 50%;
width: 14px;
height: 14px;
padding: 5px;
left: 2px;
fill: var(--font-color);
background-color: var(--background);
opacity: 0.8;
display: none;
z-index: 2;
}
.image-control:hover {
cursor: pointer;
opacity: 1;
}
.show-view { top: 2px; }
.show-view-sgdb { top: 30px; }
.show-notes { cursor: default; top: 58px; }
.show-notes:hover { cursor: default; opacity: 0.8; }
.show-animated {
display: flex;
cursor: default;
.grid:hover > .button-container { display: flex; }
top: 2px;
left: auto;
right: 2px;
background-color: var(--background);
opacity: 0.8;
}
.show-animated:hover {
display: flex;
cursor: default;
.non-interactable,
.non-interactable:hover {
cursor: default; opacity: 0.8;
}
.grid:hover > .image-control { display: flex; }
</style>
1 change: 1 addition & 0 deletions src/windows/globalStyles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -177,6 +177,7 @@ a:visited { color: var(--link-color-visited); }
/* padding-bottom: 3px; */
padding: 3px 5px;
padding-bottom: 2px;
white-space: nowrap;
}

.tippy-box[data-theme~=sarm]>.tippy-backdrop {
Expand Down

0 comments on commit db0423f

Please sign in to comment.