Skip to content

Commit

Permalink
feat: added fade-in for modals
Browse files Browse the repository at this point in the history
  • Loading branch information
@Tormak9970
Tormak9970 committed Sep 13, 2024
1 parent fb98da2 commit 78f825e
Show file tree
Hide file tree
Showing 26 changed files with 600 additions and 350 deletions.
28 changes: 13 additions & 15 deletions src/components/modals/DialogModal.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@
import { dialogModalCancel, dialogModalCancelText, dialogModalConfirm, dialogModalConfirmText, dialogModalMessage, dialogModalTitle, dialogModalType, showDialogModal } from "../../stores/Modals";
import ModalBody from "./modal-utils/ModalBody.svelte";
let open = true;
/**
* Function to run on confirmation.
*/
Expand All @@ -20,7 +22,7 @@
}
</script>

<ModalBody title={$dialogModalTitle} canClose={false}>
<ModalBody title={$dialogModalTitle} open={open} on:close={() => open = false} canClose={false}>
<div class="content">
<div class="info">
<div class="type-cont">
Expand All @@ -43,15 +45,15 @@
</div>
<div class="message">{$dialogModalMessage}</div>
</div>
<div class="buttons">
{#if $dialogModalConfirmText !== ""}
<Button label={$dialogModalConfirmText} onClick={onConfirm} width={$dialogModalCancelText !== "" ? "47.5%" : "100%"} />
{/if}
{#if $dialogModalCancelText !== ""}
<Button label={$dialogModalCancelText} onClick={onCancel} width={$dialogModalConfirmText !== "" ? "47.5%" : "100%"} />
{/if}
</div>
</div>
<span slot="buttons" class="buttons">
{#if $dialogModalConfirmText !== ""}
<Button label={$dialogModalConfirmText} onClick={onConfirm} width={$dialogModalCancelText !== "" ? "47.5%" : "100%"} />
{/if}
{#if $dialogModalCancelText !== ""}
<Button label={$dialogModalCancelText} onClick={onCancel} width={$dialogModalConfirmText !== "" ? "47.5%" : "100%"} />
{/if}
</span>
</ModalBody>

<style>
Expand All @@ -73,13 +75,9 @@
}
.buttons {
margin-top: 14px;
margin-bottom: 7px;
margin-left: 7px;
margin-right: 7px;
width: calc(100% - 14px);
width: 100%;
display: flex;
justify-content: space-around;
justify-content: space-between;
justify-self: flex-end;
}
</style>
50 changes: 16 additions & 34 deletions src/components/modals/GridPreviewModal.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
<script lang="ts">
import { open } from "@tauri-apps/plugin-shell";
import MarkDownIt from "markdown-it";
import { AppController } from "@controllers";
Expand All @@ -11,7 +10,7 @@
import Lazy from "svelte-lazy";
import ModalBody from "./modal-utils/ModalBody.svelte";
let modalOpen = true;
$: definedModalInfo = $gridModalInfo!;
/**
Expand Down Expand Up @@ -51,17 +50,21 @@
}
</script>

<ModalBody title={`${games.find((game) => game.appid.toString() === $selectedGameAppId)?.name} - ${$gridType} #${$gridModalInfo?.id}`} onClose={onClose}>
<ModalBody title={`${games.find((game) => game.appid.toString() === $selectedGameAppId)?.name} #${$gridModalInfo?.id}`} open={modalOpen} on:close={() => modalOpen = false} on:closeEnd={onClose}>
<div class="content {$gridType.split(" ").join("-").toLowerCase()}">
<div class="img-cont" style="max-width: {PREVIEW_GRID_DIMENSIONS.widths[$gridType]}px; max-height: {PREVIEW_GRID_DIMENSIONS.heights[$gridType]}px; width: {definedModalInfo.width}px; height: {definedModalInfo.height}px;">
<div class="img" class:logo-background={$gridType === GridTypes.LOGO} class:icon-background={$gridType === GridTypes.ICON} style="max-height: {PREVIEW_GRID_DIMENSIONS.heights[$gridType]}px;">
<Lazy height="{PREVIEW_GRID_DIMENSIONS.heights[$gridType]}px" fadeOption={{ delay: 500, duration: 1000 }}>
<img src="{$gridType === GridTypes.ICON ? $gridModalInfo?.thumb?.toString() : $gridModalInfo?.url?.toString()}" alt="{$gridModalInfo?.author?.name}'s {$gridType} image" style="max-width: {PREVIEW_GRID_DIMENSIONS.widths[$gridType]}px; max-height: {PREVIEW_GRID_DIMENSIONS.heights[$gridType]}px; width: auto; height: auto;" />
<img
src="{$gridType === GridTypes.ICON ? $gridModalInfo?.thumb?.toString() : $gridModalInfo?.url?.toString()}"
alt="{$gridModalInfo?.author?.name}'s {$gridType} image"
style="max-width: {PREVIEW_GRID_DIMENSIONS.widths[$gridType]}px; max-height: {PREVIEW_GRID_DIMENSIONS.heights[$gridType]}px; width: auto; height: auto;"
/>
</Lazy>
</div>
</div>
<div class="info">
<div class="info-cont">
<div>
<div class="author">
<div class="pfp">
<img src="{$gridModalInfo?.author?.avatar?.toString()}" alt="{$gridModalInfo?.author?.name}'s profile picture" />
Expand Down Expand Up @@ -98,29 +101,20 @@
flex-direction: row;
height: calc(100% - 38px);
}
.capsule .info {
margin-top: 10px;
margin-bottom: 10px;
margin-left: 4px;
margin-right: 10px;
.capsule .info, .icon .info {
margin: 10px;
margin-right: 0px;
min-width: 200px;
min-height: calc(100% - 20px);
display: flex;
flex-direction: column;
justify-content: space-between;
}
.capsule .info > .info-cont {
min-width: 200px;
display: flex;
flex-direction: column;
}
.wide-capsule .info, .hero .info, .logo .info {
margin-bottom: 10px;
margin-left: 14px;
margin-right: 10px;
margin-top: 10px;
min-width: 200px;
min-height: calc(100% - 20px);
Expand All @@ -135,27 +129,15 @@
height: calc(100% - 38px);
max-width: 550px;
}
.icon .info {
margin-top: 10px;
margin-bottom: 10px;
margin-left: 4px;
margin-right: 10px;
min-width: 200px;
min-height: calc(100% - 20px);
display: flex;
flex-direction: column;
justify-content: space-between;
}
.icon .info > .info-cont {
min-width: 200px;
.img-cont {
margin-top: 10px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.img-cont { padding: 10px; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.img-cont > .img {
border-radius: 2px;
overflow: hidden;
Expand Down
9 changes: 4 additions & 5 deletions src/components/modals/LogoPositionModal.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,7 @@
let heroPath = "";
let logoPath = "";
let open = true;
let canSave = false;
const gameLogoPos = $steamLogoPositions[$selectedGameAppId];
Expand Down Expand Up @@ -166,7 +167,7 @@
});
</script>

<ModalBody title={`Set Logo Position for ${game?.name}`} onClose={onClose}>
<ModalBody title={`Set Logo Position for ${game?.name}`} open={open} on:close={() => open = false} on:closeEnd={onClose}>
<div class="content">
<div class="view">
<div class="hero-cont">
Expand Down Expand Up @@ -203,8 +204,6 @@
<style>
.content {
margin-bottom: 10px;
margin-left: 10px;
margin-right: 10px;
min-width: 200px;
min-height: calc(100% - 20px);
Expand All @@ -214,9 +213,9 @@
}
.view {
width: calc(100% - 20px);
width: 100%;
position: relative;
margin: 10px;
margin: 10px 0px;
}
.logo-cont {
Expand Down
68 changes: 68 additions & 0 deletions src/components/modals/Modals.svelte
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
<script lang="ts">
import { showBatchApplyModal, showBatchApplyProgress, showCleanConflictDialog, showCleanGridsModal, showCurrentGridsModal, showDialogModal, showGameSearchModal, showGridModal, showInfoModal, showLogoPositionModal, showManualGamesModal, showSettingsModal, showSteamPathModal, showUpdateModal, showUpdateTilesModal } from "@stores/Modals";
import BatchApplyModal from "./batch-apply/BatchApplyModal.svelte";
import BatchApplyProgressModal from "./batch-apply/BatchApplyProgressModal.svelte";
import CleanConflictDialog from "./clean-grids/CleanConflictDialog.svelte";
import CleanGridsModal from "./clean-grids/CleanGridsModal.svelte";
import CurrentGridsModal from "./current-grids/CurrentGridsModal.svelte";
import DialogModal from "./DialogModal.svelte";
import GameSearchModal from "./game-search/GameSearchModal.svelte";
import GridPreviewModal from "./GridPreviewModal.svelte";
import InfoModal from "./info-modal/InfoModal.svelte";
import LogoPositionModal from "./LogoPositionModal.svelte";
import ManualGamesModal from "./manual-games/ManualGamesModal.svelte";
import SettingsModal from "./settings/SettingsModal.svelte";
import SteamPathModal from "./SteamPathModal.svelte";
import UpdateModal from "./updates/UpdateModal.svelte";
import UpdateTilesModal from "./UpdateTilesModal.svelte";
</script>


{#if $showUpdateModal}
<UpdateModal />
{/if}
{#if !$showUpdateModal}
{#if $showDialogModal}
<DialogModal />
{/if}
{#if $showSteamPathModal}
<SteamPathModal />
{/if}
{#if $showGameSearchModal}
<GameSearchModal />
{/if}
{#if $showGridModal}
<GridPreviewModal />
{/if}
{#if $showBatchApplyProgress}
<BatchApplyProgressModal />
{/if}
{#if $showBatchApplyModal}
<BatchApplyModal />
{/if}
{#if $showLogoPositionModal}
<LogoPositionModal />
{/if}
{#if $showManualGamesModal}
<ManualGamesModal />
{/if}
{#if $showCleanGridsModal}
<CleanGridsModal />
{/if}
{#if $showSettingsModal}
<SettingsModal />
{/if}
{#if $showCleanConflictDialog}
<CleanConflictDialog />
{/if}
{#if $showInfoModal}
<InfoModal />
{/if}
{#if $showCurrentGridsModal}
<CurrentGridsModal />
{/if}
{#if $showUpdateTilesModal}
<UpdateTilesModal />
{/if}
{/if}
17 changes: 7 additions & 10 deletions src/components/modals/SteamPathModal.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
import ModalBody from "./modal-utils/ModalBody.svelte";
import FilePathEntry from "./settings/FilePathEntry.svelte";
let open = true;
let canSave = false;
let steamInstallLocation = $steamInstallPath;
Expand Down Expand Up @@ -43,7 +44,7 @@
}
</script>

<ModalBody title={"Choose Your Steam Install Path"} canClose={false}>
<ModalBody title={"Choose Your Steam Install Path"} open={open} on:close={() => open = false} canClose={false}>
<div class="content">
<FilePathEntry
label="Steam Install Path"
Expand All @@ -55,11 +56,11 @@
validator={validateSteamPath}
required
/>

<div class="buttons">
<Button label="Save Changes" onClick={saveInstallLocation} width="100%" disabled={!canSave} />
</div>
</div>

<span slot="buttons" class="buttons">
<Button label="Save Changes" onClick={saveInstallLocation} width="100%" disabled={!canSave} />
</span>
</ModalBody>

<style>
Expand All @@ -72,14 +73,10 @@
flex-direction: column;
justify-content: flex-start;
align-items: center;
margin: 0px 7px;
}
.buttons {
margin-top: 14px;
margin-bottom: 7px;
width: calc(100% - 14px);
width: 100%;
display: flex;
justify-content: space-around;
justify-self: flex-end;
Expand Down
15 changes: 7 additions & 8 deletions src/components/modals/UpdateTilesModal.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
import ModalBody from "./modal-utils/ModalBody.svelte";
import GameFilter from "./modal-utils/game-filter/GameFilter.svelte";
let open = true;
let appsWithTilesIds: string[];
let appsWithTiles: Record<string, string>;
Expand Down Expand Up @@ -62,7 +63,7 @@
});
</script>

<ModalBody title={"Update Start Menu Tiles"} onClose={onClose}>
<ModalBody title={"Update Start Menu Tiles"} open={open} on:close={() => open = false} on:closeEnd={onClose}>
<div class="content">
<div class="description">
Here you can batch update the game icons shown in your Operating System's start menu to match your custom icons shown in steam.
Expand All @@ -78,11 +79,11 @@
<div class="view">
<GameFilter steamGames={filteredSteamGames} bind:selectedGameIds={selectedGameIds} showPlatforms={false} showFilters={false} noGamesMessage={"No games with tiles/new icons were found."}/>
</div>
<div class="buttons">
<Button label="Update" onClick={updateGameTiles} width="47.5%" disabled={selectedGameIds.length === 0} />
<Button label="Cancel" onClick={onClose} width="47.5%" />
</div>
</div>
<span slot="buttons" class="buttons">
<Button label="Update" onClick={updateGameTiles} width="47.5%" disabled={selectedGameIds.length === 0} />
<Button label="Cancel" onClick={onClose} width="47.5%" />
</span>
</ModalBody>

<style>
Expand All @@ -99,7 +100,7 @@
}
.description {
width: calc(100% - 14px);
width: 100%;
font-size: 14px;
margin-top: 7px;
}
Expand All @@ -119,8 +120,6 @@
}
.buttons {
margin-top: 14px;
margin-bottom: 7px;
width: 100%;
display: flex;
justify-content: space-around;
Expand Down
Loading

0 comments on commit 78f825e

Please sign in to comment.