Skip to content

Commit

Permalink
wip
Browse files Browse the repository at this point in the history
  • Loading branch information
@emma-sg
emma-sg committed Jan 27, 2025
1 parent ae9a217 commit 52e8433
Show file tree
Hide file tree
Showing 5 changed files with 66 additions and 135 deletions.
14 changes: 13 additions & 1 deletion frontend/src/features/collections/collection-edit-dialog.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,10 @@ import renderGeneral from "./edit-dialog/general-section";
import checkChanged from "./edit-dialog/helpers/check-changed";
import submitTask from "./edit-dialog/helpers/submit-task";
import { type CollectionShareSettings } from "./edit-dialog/sharing-section";
import {
type SelectSnapshotDetail,

Check failure on line 20 in frontend/src/features/collections/collection-edit-dialog.ts

View workflow job for this annotation

GitHub Actions / Lint (20) 

'SelectSnapshotDetail' is defined but never used. Allowed unused vars must match /^_/u

Check failure on line 20 in frontend/src/features/collections/collection-edit-dialog.ts

View workflow job for this annotation

GitHub Actions / Lint (22) 

'SelectSnapshotDetail' is defined but never used. Allowed unused vars must match /^_/u
type SnapshotItem,
} from "./select-collection-start-page";

import { BtrixElement } from "@/classes/BtrixElement";
import type { Dialog } from "@/components/ui/dialog";
Expand Down Expand Up @@ -86,6 +90,9 @@ export class CollectionEdit extends BtrixElement {
defaultThumbnailName: `${Thumbnail}` | null = this.collection
?.defaultThumbnailName as `${Thumbnail}` | null;

@state()
selectedSnapshot: SnapshotItem | null = null;

@query("btrix-dialog")
readonly dialog?: Dialog;

Expand All @@ -103,6 +110,11 @@ export class CollectionEdit extends BtrixElement {
this.onReset();
this.collection = undefined;
}
if (changedProperties.has("collection")) {
this.defaultThumbnailName = this.collection?.defaultThumbnailName as
| `${Thumbnail}`
| null;
}
}

readonly checkChanged = checkChanged.bind(this);
Expand Down Expand Up @@ -196,7 +208,7 @@ export class CollectionEdit extends BtrixElement {
>
${this.renderTab({
panel: "general",
icon: "info-lg",
icon: "info-square",
string: msg("About"),
})}
${this.renderTab({
Expand Down
45 changes: 40 additions & 5 deletions frontend/src/features/collections/edit-dialog/general-section.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import {
DEFAULT_THUMBNAIL_VARIANT,
Thumbnail,
} from "../collection-thumbnail";
import { type SelectSnapshotDetail } from "../select-collection-start-page";

import type { PublicCollection } from "@/types/collection";

Expand Down Expand Up @@ -67,7 +68,19 @@ export default function renderGeneral(this: CollectionEdit) {
</sl-tooltip>
</div>
${renderThumbnails.bind(this)()}
</div>`;
</div>
<btrix-select-collection-start-page
.collection=${this.collection}
.collectionId=${this.collectionId || this.collection.id}
@btrix-select=${async (e: CustomEvent<SelectSnapshotDetail>) => {
this.selectedSnapshot = e.detail.item;
this.dispatchEvent(
new CustomEvent("btrix-change", {
bubbles: true,
}),
);
}}
></btrix-select-collection-start-page>`;
}

function renderThumbnails(this: CollectionEdit) {
Expand All @@ -86,11 +99,23 @@ function renderThumbnails(this: CollectionEdit) {
}

const thumbnail = (
thumbnail: Thumbnail | NonNullable<PublicCollection["thumbnail"]>,
thumbnail?: Thumbnail | NonNullable<PublicCollection["thumbnail"]>,
) => {
let name: Thumbnail | null = null;
let path = "";

if (!thumbnail)
return html` <sl-tooltip content=${msg("Select a page thumbnail")}
><button
class="row-start-2 flex aspect-video items-center justify-center overflow-hidden rounded bg-neutral-50 ring-1 ring-stone-600/10 transition-all hover:ring-2 hover:ring-blue-300"
disabled
>
<sl-icon
class="size-10 stroke-black/50 text-white drop-shadow-md [paint-order:stroke]"
name="plus-lg"
></sl-icon></button
></sl-tooltip>`;

if (Object.values(Thumbnail).some((t) => t === thumbnail)) {
name = thumbnail as Thumbnail;
path = CollectionThumbnail.Variants[name].path;
Expand All @@ -110,7 +135,7 @@ function renderThumbnails(this: CollectionEdit) {
<button
class="${isSelected
? "ring-blue-300 ring-2"
: "ring-stone-600/10 ring-1"} aspect-video flex-1 overflow-hidden rounded transition-all hover:ring-2 hover:ring-blue-300"
: "ring-stone-600/10 ring-1"} row-start-2 aspect-video flex-1 overflow-hidden rounded transition-all hover:ring-2 hover:ring-blue-300"
@click=${() => {
this.defaultThumbnailName = name;
this.dispatchEvent(
Expand All @@ -137,8 +162,18 @@ function renderThumbnails(this: CollectionEdit) {
};

return html`
<div class="flex gap-3">
${when(this.collection?.thumbnail, (t) => thumbnail(t))}
<div class="mt-3 grid grid-cols-5 gap-3">
<div class="row-start-1 text-xs text-neutral-500">
${msg("Page Thumbnail")}
</div>
${when(
this.collection?.thumbnail,
(t) => thumbnail(t),
() => thumbnail(),
)}
<div class="row-start-1 text-xs text-neutral-600">
${msg("Placeholder")}
</div>
${thumbnail(Thumbnail.Cyan)} ${thumbnail(Thumbnail.Green)}
${thumbnail(Thumbnail.Yellow)} ${thumbnail(Thumbnail.Orange)}
</div>
Expand Down
107 changes: 3 additions & 104 deletions frontend/src/features/collections/edit-dialog/sharing-section.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,26 +5,17 @@ import type {
SlSelectEvent,
SlSwitch,
} from "@shoelace-style/shoelace";
import { html, nothing, type PropertyValues } from "lit";
import { html, type PropertyValues } from "lit";
import { customElement, property } from "lit/decorators.js";
import { ifDefined } from "lit/directives/if-defined.js";
import { when } from "lit/directives/when.js";

import {
CollectionThumbnail,
DEFAULT_THUMBNAIL_VARIANT,
Thumbnail,
} from "../collection-thumbnail";
import { type SelectCollectionAccess } from "../select-collection-access";

import { BtrixElement } from "@/classes/BtrixElement";
import { viewStateContext, type ViewStateContext } from "@/context/view-state";
import { RouteNamespace } from "@/routes";
import {
CollectionAccess,
type Collection,
type PublicCollection,
} from "@/types/collection";
import { CollectionAccess, type Collection } from "@/types/collection";

@customElement("btrix-collection-share-settings")
@localized()
Expand All @@ -39,17 +30,11 @@ export class CollectionShareSettings extends BtrixElement {
public access = this.collection?.access;
@property({ type: Boolean })
public allowPublicDownload = this.collection?.allowPublicDownload;
@property({ type: String })
public defaultThumbnailName?: `${Thumbnail}` | null = this.collection
?.defaultThumbnailName as `${Thumbnail}` | null;

protected willUpdate(changedProperties: PropertyValues<this>): void {
if (changedProperties.has("collection")) {
this.access = this.collection?.access;
this.allowPublicDownload = this.collection?.allowPublicDownload;
this.defaultThumbnailName = this.collection?.defaultThumbnailName as
| `${Thumbnail}`
| null;
}
}

Expand Down Expand Up @@ -104,19 +89,7 @@ export class CollectionShareSettings extends BtrixElement {
this.collection?.access != CollectionAccess.Private,
() => html`<div class="mb-7">${this.renderShareLink()}</div>`,
)}
<div class="mb-7">
<div class="form-label flex items-center gap-1.5">
${msg("Thumbnail")}
<sl-tooltip
content=${msg(
"Choose a thumbnail to represent this collection in the org dashboard and profile page.",
)}
>
<sl-icon name="info-circle"></sl-icon>
</sl-tooltip>
</div>
${this.renderThumbnails()}
</div>
<div>
<div class="form-label flex items-center gap-1.5">
${msg("Downloads")}
Expand Down Expand Up @@ -227,78 +200,4 @@ export class CollectionShareSettings extends BtrixElement {
</p>
`;
};
private renderThumbnails() {
let selectedImgSrc = DEFAULT_THUMBNAIL_VARIANT.path;

if (this.defaultThumbnailName) {
const variant = Object.entries(CollectionThumbnail.Variants).find(
([name]) => name === this.defaultThumbnailName,
);

if (variant) {
selectedImgSrc = variant[1].path;
}
} else if (this.collection?.thumbnail) {
selectedImgSrc = this.collection.thumbnail.path;
}

const thumbnail = (
thumbnail: Thumbnail | NonNullable<PublicCollection["thumbnail"]>,
) => {
let name: Thumbnail | null = null;
let path = "";

if (Object.values(Thumbnail).some((t) => t === thumbnail)) {
name = thumbnail as Thumbnail;
path = CollectionThumbnail.Variants[name].path;
} else {
path = (thumbnail as NonNullable<PublicCollection["thumbnail"]>).path;
}

if (!path) {
console.debug("no path for thumbnail:", thumbnail);
return;
}

const isSelected = path === selectedImgSrc;

return html`
<sl-tooltip content=${msg("Use thumbnail")}>
<button
class="${isSelected
? "ring-blue-300 ring-2"
: "ring-stone-600/10 ring-1"} aspect-video flex-1 overflow-hidden rounded transition-all hover:ring-2 hover:ring-blue-300"
@click=${() => {
this.defaultThumbnailName = name;
this.dispatchEvent(
new CustomEvent("btrix-change", {
bubbles: true,
}),
);
}}
>
<div
class="flex size-full flex-col items-center justify-center bg-cover"
style="background-image:url('${path}')"
>
${isSelected
? html`<sl-icon
class="size-10 stroke-black/50 text-white drop-shadow-md [paint-order:stroke]"
name="check-lg"
></sl-icon>`
: nothing}
</div>
</button>
</sl-tooltip>
`;
};

return html`
<div class="flex gap-3">
${when(this.collection?.thumbnail, (t) => thumbnail(t))}
${thumbnail(Thumbnail.Cyan)} ${thumbnail(Thumbnail.Green)}
${thumbnail(Thumbnail.Yellow)} ${thumbnail(Thumbnail.Orange)}
</div>
`;
}
}
33 changes: 9 additions & 24 deletions ...llections/edit-dialog/homepage-section.ts → ...llections/edit-dialog/thumbnail-select.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import {
import type { SelectSnapshotDetail } from "../select-collection-start-page";

import { BtrixElement } from "@/classes/BtrixElement";
import { type Collection } from "@/types/collection";

const OPTIONS: Record<
HomeView,
Expand All @@ -29,11 +30,11 @@ const OPTIONS: Record<
},
};

@customElement("btrix-collection-homepage-settings")
@customElement("btrix-collection-thumbnail-select")
@localized()
export class CollectionHomepageSettings extends BtrixElement {
@property({ type: String })
collectionId?: string;
export class CollectionThumbnailSelect extends BtrixElement {
@property({ type: Object })
collection?: Collection;

@property({ type: String })
homeUrl?: string | null = null;
Expand All @@ -50,8 +51,6 @@ export class CollectionHomepageSettings extends BtrixElement {
@state()
homeView = HomeView.Pages;

useThumbnail = true;

@state()
selectedSnapshot?: SelectSnapshotDetail["item"];

Expand Down Expand Up @@ -88,11 +87,11 @@ export class CollectionHomepageSettings extends BtrixElement {
}
: null);

const replaySource = `/api/orgs/${this.orgId}/collections/${this.collectionId}/replay.json`;
const replaySource = `/api/orgs/${this.orgId}/collections/${this.collection!.id}/replay.json`;
// TODO Get query from replay-web-page embed
const query = queryString.stringify({
source: replaySource,
customColl: this.collectionId,
customColl: this.collection!.id,
embed: "default",
noCache: 1,
noSandbox: 1,
Expand All @@ -107,7 +106,7 @@ export class CollectionHomepageSettings extends BtrixElement {
<btrix-collection-snapshot-preview
class="contents"
id="thumbnailPreview"
collectionId=${this.collectionId || ""}
collectionId=${this.collection!.id || ""}
view=${this.homeView}
replaySrc=${`/replay/?${query}#view=pages`}
.snapshot=${snapshot}
Expand Down Expand Up @@ -176,21 +175,7 @@ export class CollectionHomepageSettings extends BtrixElement {
this.homeView === HomeView.URL,
() => html`
<sl-divider></sl-divider>
<section>
<btrix-select-collection-start-page
.collectionId=${this.collectionId}
.homeUrl=${this.homeUrl}
.homeTs=${this.homeTs}
@btrix-select=${async (e: CustomEvent<SelectSnapshotDetail>) => {
this.selectedSnapshot = e.detail.item;
this.dispatchEvent(
new CustomEvent("btrix-change", {
bubbles: true,
}),
);
}}
></btrix-select-collection-start-page>
</section>
<section></section>
`,
)}
`;
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/features/collections/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,4 +10,4 @@ import("./select-collection-start-page");
import("./share-collection");
import("./collection-thumbnail");
import("./edit-dialog/sharing-section");
import("./edit-dialog/homepage-section");
import("./edit-dialog/thumbnail-select");

0 comments on commit 52e8433

Please sign in to comment.