Skip to content

Commit

Permalink
final fixes to expanded view
Browse files Browse the repository at this point in the history
  • Loading branch information
@beebls
beebls committed Oct 12, 2024
1 parent b909ed1 commit 102e5de
Show file tree
Hide file tree
Showing 5 changed files with 89 additions and 84 deletions.
3 changes: 0 additions & 3 deletions src/backend/state/theme-store.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -145,7 +145,6 @@ export const createCSSLoaderStore = (backend: Backend) =>
set({ backendVersion });

const themes = (await backend.getThemes()) ?? [];
console.log("THEMES", themes.length, themes.filter((e) => e.enabled).length);
set({
themes,
selectedPreset: themes.find((e) => e.flags.includes(Flags.isPreset) && e.enabled),
Expand Down Expand Up @@ -288,9 +287,7 @@ export const createCSSLoaderStore = (backend: Backend) =>
async function fetchThemeIDS(idsToQuery: string[]): Promise<MinimalCSSThemeInfo[]> {
const queryStr = "?ids=" + idsToQuery.join(".");
try {
console.log("FETCHTHEMEIDS STRING", themes.length);
const value = await apiFetch<MinimalCSSThemeInfo[]>(`/themes/ids${queryStr}`);
console.log("VALUE", value);
if (value) return value;
} catch {}
return [];
Expand Down
62 changes: 32 additions & 30 deletions src/modules/expanded-view/components/ExpandedViewButtonsSection.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,41 +73,43 @@ export function ExpandedViewButtonsSection() {
{shortenNumber(data.download.downloadCount) ?? data.download.downloadCount} Download
{data.download.downloadCount === 1 ? "" : "s"}
</span>
<DialogButton
// @ts-ignore
ref={downloadButtonRef}
className="cl_expandedview_bluebutton"
disabled={isWorking}
onClick={() => {
installTheme(data.id);
}}
>
<span className="CssLoader_ThemeBrowser_ExpandedView_InstallText">
{/* Technically 'local' should mean a remote copy doesn't exist, but there might be weird network race conditions on the install status check */}
{(installStatus === "installed" || installStatus === "local") && "Reinstall"}
{installStatus === "outdated" && "Update"}
{installStatus === "notinstalled" && "Install"}
</span>
</DialogButton>
{installStatus === "installed" && (
<Focusable className="flex gap-1">
<DialogButton
// @ts-ignore
ref={downloadButtonRef}
className="cl_expandedview_bluebutton"
disabled={isWorking}
onClick={() => {
// TODO: THEME SETTINGS MODAL
// showModal(
// <ThemeSettingsModalRoot
// selectedTheme={
// installedThemes.find((e) => e.id === fullThemeData.id)?.id ||
// // using name here because in submissions id is different
// installedThemes.find((e) => e.name === fullThemeData.name)!.id
// }
// />
// );
installTheme(data.id);
}}
className="relative"
>
<ImCog className="absolute-center" />
<span className="CssLoader_ThemeBrowser_ExpandedView_InstallText">
{/* Technically 'local' should mean a remote copy doesn't exist, but there might be weird network race conditions on the install status check */}
{(installStatus === "installed" || installStatus === "local") && "Reinstall"}
{installStatus === "outdated" && "Update"}
{installStatus === "notinstalled" && "Install"}
</span>
</DialogButton>
)}
{(installStatus === "installed" || installStatus === "local") && (
<DialogButton
onClick={() => {
// TODO: THEME SETTINGS MODAL
// showModal(
// <ThemeSettingsModalRoot
// selectedTheme={
// installedThemes.find((e) => e.id === fullThemeData.id)?.id ||
// // using name here because in submissions id is different
// installedThemes.find((e) => e.name === fullThemeData.name)!.id
// }
// />
// );
}}
className="cl_expandedview_configure_button"
>
<ImCog className="absolute-center" />
</DialogButton>
)}
</Focusable>
</div>
</div>
</Focusable>
Expand Down
2 changes: 1 addition & 1 deletion src/modules/expanded-view/components/ExpandedViewImageContainer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ export function ExpandedViewImageContainer() {
width={imageCarouselEntryWidth}
height={imageCarouselEntryHeight}
style={{ objectFit: "contain" }}
src={`https://api.deckthemes.com/blobs/${focusedImageId}`}
src={`https://api.deckthemes.com/blobs/${image.id}`}
/>
</Focusable>
))}
Expand Down
53 changes: 28 additions & 25 deletions src/styles/styles-as-string.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,10 +78,10 @@ export const styles = `
}
.absolute-center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
position: absolute !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
}
/* Fullscreen Routes */
Expand Down Expand Up @@ -352,8 +352,7 @@ export const styles = `
.cl_expandedview_scrollpanel {
display: flex !important;
margin-bottom: 40px !important;
/* To be completely honest, I'm not sure why this isn't inherited from fullscrenroute_container */
height: calc(100vh - 40px) !important
height: calc(100vh - 80px) !important
}
.cl_expandedview_themedatacontainer {
Expand Down Expand Up @@ -392,25 +391,24 @@ export const styles = `
}
.cl_expandedview_imagenumbercontainer {
.image-number-container {
width: 3em !important;
height: 2em !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: #000a !important;
position: absolute !important;
bottom: 1em !important;
right: 1em !important;
}
width: 3em !important;
height: 2em !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: #000a !important;
position: absolute !important;
bottom: 1em !important;
right: 1em !important;
}
.cl_expandedview_infocontainer {
padding-left: 1rem;
padding-right: 1rem;
display: flex;
flex-direction: column;
gap: 0.25rem
padding-left: 1rem !important;
padding-right: 1rem !important;
padding-bottom: 1rem !important;
display: flex !important;
flex-direction: column !important;
gap: 0.25rem !important;
}
.cl_expandedview_title {
Expand All @@ -437,7 +435,6 @@ export const styles = `
.cl_expandedview_targetbuttonscontainer {
display: flex !important;
gap: 0.25rem !important;
padding-bottom: 80px !important;
}
.cl_expandedview_targetbutton {
Expand All @@ -454,7 +451,7 @@ export const styles = `
.cl_expandedview_buttonscontainer {
position: sticky !important;
padding-top: 1em !important;
padding-top: 1rem !important;
flex: 1 !important;
display: flex !important;
flex-direction: column !important;
Expand All @@ -463,7 +460,7 @@ export const styles = `
.cl_expandedview_singlebuttoncontainer {
background: #2a4153 !important;
padding: 1em !important;
padding: 1rem !important;
}
.cl_expandedview_starbutton {
Expand All @@ -485,4 +482,10 @@ export const styles = `
.cl_expandedview_bluebutton.gpfocuswithin {
background: white !important;
}
.cl_expandedview_configure_button {
width: 1rem !important;
min-width: 1rem !important;
position: relative;
}
`;
53 changes: 28 additions & 25 deletions src/styles/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,10 +80,10 @@
}

.absolute-center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
position: absolute !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
}

/* Fullscreen Routes */
Expand Down Expand Up @@ -354,8 +354,7 @@
.cl_expandedview_scrollpanel {
display: flex !important;
margin-bottom: 40px !important;
/* To be completely honest, I'm not sure why this isn't inherited from fullscrenroute_container */
height: calc(100vh - 40px) !important
height: calc(100vh - 80px) !important
}

.cl_expandedview_themedatacontainer {
Expand Down Expand Up @@ -394,25 +393,24 @@
}

.cl_expandedview_imagenumbercontainer {
.image-number-container {
width: 3em !important;
height: 2em !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: #000a !important;
position: absolute !important;
bottom: 1em !important;
right: 1em !important;
}
width: 3em !important;
height: 2em !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: #000a !important;
position: absolute !important;
bottom: 1em !important;
right: 1em !important;
}

.cl_expandedview_infocontainer {
padding-left: 1rem;
padding-right: 1rem;
display: flex;
flex-direction: column;
gap: 0.25rem
padding-left: 1rem !important;
padding-right: 1rem !important;
padding-bottom: 1rem !important;
display: flex !important;
flex-direction: column !important;
gap: 0.25rem !important;
}

.cl_expandedview_title {
Expand All @@ -439,7 +437,6 @@
.cl_expandedview_targetbuttonscontainer {
display: flex !important;
gap: 0.25rem !important;
padding-bottom: 80px !important;
}

.cl_expandedview_targetbutton {
Expand All @@ -456,7 +453,7 @@

.cl_expandedview_buttonscontainer {
position: sticky !important;
padding-top: 1em !important;
padding-top: 1rem !important;
flex: 1 !important;
display: flex !important;
flex-direction: column !important;
Expand All @@ -465,7 +462,7 @@

.cl_expandedview_singlebuttoncontainer {
background: #2a4153 !important;
padding: 1em !important;
padding: 1rem !important;
}

.cl_expandedview_starbutton {
Expand All @@ -486,4 +483,10 @@
}
.cl_expandedview_bluebutton.gpfocuswithin {
background: white !important;
}

.cl_expandedview_configure_button {
width: 1rem !important;
min-width: 1rem !important;
position: relative;
}

0 comments on commit 102e5de

Please sign in to comment.