From 698a833e42061687bd383a781bccbc663717e61e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?R=C5=ABdolfs=20O=C5=A1i=C5=86=C5=A1?= Date: Thu, 28 Mar 2024 17:02:39 +0100 Subject: [PATCH] Overhaul app responsiveness We introduce more breakpoints to cover mobile, small-desktop, medium-desktop and large-desktop viewports. --- public/index.css | 41 +- src/App/AppLayout.svelte | 8 +- src/App/Footer.svelte | 2 +- src/App/Header/Authenticate.svelte | 2 +- src/App/Header/Breadcrumbs.svelte | 1 + src/App/Header/NodeInfo.svelte | 2 +- src/App/Help.svelte | 4 +- src/App/Settings.svelte | 5 +- src/components/Comment.svelte | 29 +- src/components/ErrorMessage.svelte | 12 +- src/components/File.svelte | 13 + src/components/InlineMarkdown.svelte | 1 + src/components/Markdown.svelte | 1 + src/components/NodeId.svelte | 1 + src/components/Thread.svelte | 7 +- src/views/home/Index.svelte | 15 +- src/views/nodes/ScopePolicyPopover.svelte | 2 +- src/views/nodes/View.svelte | 14 +- src/views/projects/Changeset.svelte | 30 +- src/views/projects/Cob/AssigneeInput.svelte | 43 ++- src/views/projects/Cob/CobCommitTeaser.svelte | 11 +- src/views/projects/Cob/CobHeader.svelte | 4 +- src/views/projects/Cob/Embeds.svelte | 25 +- src/views/projects/Cob/LabelInput.svelte | 50 ++- src/views/projects/Cob/Labels.svelte | 25 ++ src/views/projects/Cob/Reviews.svelte | 75 ++++ src/views/projects/Cob/Revision.svelte | 52 ++- src/views/projects/CommentCounter.svelte | 20 + src/views/projects/Commit.svelte | 7 +- src/views/projects/Commit/CommitTeaser.svelte | 4 + src/views/projects/DiffStatBadgeLoader.svelte | 48 +++ src/views/projects/Header/CloneButton.svelte | 2 +- src/views/projects/History.svelte | 2 +- src/views/projects/Issue.svelte | 247 ++++++------ src/views/projects/Issue/IssueTeaser.svelte | 61 +-- src/views/projects/Issues.svelte | 26 +- src/views/projects/Layout.svelte | 16 +- src/views/projects/Patch.svelte | 352 +++++++----------- src/views/projects/Patch/PatchTeaser.svelte | 119 ++---- .../projects/Patch/RevisionSelector.svelte | 69 ++++ src/views/projects/Patches.svelte | 34 +- src/views/projects/Share.svelte | 6 +- src/views/projects/Sidebar.svelte | 74 ++-- src/views/projects/Source.svelte | 14 +- src/views/projects/Source/Blob.svelte | 12 +- .../projects/Source/ProjectNameHeader.svelte | 19 +- .../projects/components/CommitButton.svelte | 4 +- tests/e2e/project.spec.ts | 2 +- tests/e2e/project/issue.spec.ts | 6 +- tests/e2e/project/issues.spec.ts | 6 +- tests/e2e/project/threads.spec.ts | 6 +- tests/e2e/theme.spec.ts | 6 +- 52 files changed, 966 insertions(+), 671 deletions(-) create mode 100644 src/views/projects/Cob/Labels.svelte create mode 100644 src/views/projects/Cob/Reviews.svelte create mode 100644 src/views/projects/CommentCounter.svelte create mode 100644 src/views/projects/DiffStatBadgeLoader.svelte create mode 100644 src/views/projects/Patch/RevisionSelector.svelte diff --git a/public/index.css b/public/index.css index 373699a16..9ab8efbd7 100644 --- a/public/index.css +++ b/public/index.css @@ -97,17 +97,50 @@ pre { background-color: var(--color-fill-ghost); } -@media (max-width: 720px) { +/* + Breakpoints + =========== + mobile 0px - 719.98px + small desktop 720px - 1010.98px + medium desktop 1011px - 1349.98px + desktop 1350px - ∞ px +*/ + +@media (max-width: 719.98px) { body { min-width: 0; } - .global-hide-on-mobile { + .global-hide-on-mobile-down { display: none !important; } } -@media (min-width: 721px) { - .global-hide-on-desktop { +@media (max-width: 1010.98px) { + .global-hide-on-small-desktop-down { + display: none !important; + } +} + +@media (max-width: 1349.98px) { + .global-hide-on-medium-desktop-down { + display: none !important; + } +} + +@media (min-width: 720px) { + .global-hide-on-small-desktop-up { + display: none !important; + } +} + +@media (min-width: 1011px) { + .global-hide-on-medium-desktop-up { + display: none !important; + } +} + +@media (min-width: 1350px) { + .global-hide-on-desktop-up { display: none !important; } } diff --git a/src/App/AppLayout.svelte b/src/App/AppLayout.svelte index 846776bc4..1e980ad8c 100644 --- a/src/App/AppLayout.svelte +++ b/src/App/AppLayout.svelte @@ -17,7 +17,7 @@ height: 100%; overflow-y: scroll; } - @media (max-width: 720px) { + @media (max-width: 719.98px) { .app { display: grid; grid-template-rows: 1fr auto; @@ -30,17 +30,17 @@
-
+
-
+
-
+
diff --git a/src/App/Footer.svelte b/src/App/Footer.svelte index a5d93b0ed..d057be2b0 100644 --- a/src/App/Footer.svelte +++ b/src/App/Footer.svelte @@ -40,7 +40,7 @@
- + Settings diff --git a/src/App/Header/Authenticate.svelte b/src/App/Header/Authenticate.svelte index 8d3938443..b357f3f0d 100644 --- a/src/App/Header/Authenticate.svelte +++ b/src/App/Header/Authenticate.svelte @@ -41,7 +41,7 @@ {#if $httpdStore.state === "authenticated"} - + diff --git a/src/views/projects/History.svelte b/src/views/projects/History.svelte index 8f39fbc61..3d9243801 100644 --- a/src/views/projects/History.svelte +++ b/src/views/projects/History.svelte @@ -87,7 +87,7 @@ @@ -509,24 +504,28 @@
{#if session && role.isDelegateOrAuthor(session.publicKey, delegates, issue.author.id) && issueState === "read"} - +
+ +
{/if} {#if issueState === "read"} {#if session && role.isDelegateOrAuthor(session.publicKey, delegates, issue.author.id)} - !isEqual(state, issue.state), - )} - {selectedItem} - state={issue.state} - save={partial(saveStatus, session.id)} /> +
+ !isEqual(state, issue.state), + )} + {selectedItem} + state={issue.state} + save={partial(saveStatus, session.id)} /> +
{/if} {/if}
@@ -544,7 +543,55 @@ {issue.state.reason} {/if} + + opened + + {utils.formatObjectId(issue.id)} + + + {utils.formatTimestamp(issue.discussion[0].timestamp)} + + {#if lastDescriptionEdit} +
+ • edited +
+ {/if} +
+
+ { + void saveAssignees(newAssignees); + }} /> + void saveLabels(newLabels)} /> +
+ +
+
+
{#if $experimental && issueState !== "read"} {#if $experimental && session} - { - try { - if (session) { - await reactOnComment(session, issue.id, authors, emoji); +
+ { + try { + if (session) { + await reactOnComment(session, issue.id, authors, emoji); + } + } finally { + closeFocused(); } - } finally { - closeFocused(); - } - }} /> + }} /> +
{/if} {#if issue.discussion[0].reactions.length > 0} -
- - opened - - {utils.formatObjectId(issue.id)} - - - {utils.formatTimestamp(issue.discussion[0].timestamp)} - - {#if lastDescriptionEdit} -
•
-
- edited -
- {/if} -
{#if threads.length > 0} @@ -664,46 +689,40 @@
{/if} {#if $experimental && session} -
- -
- {#if role.isDelegateOrAuthor(session.publicKey, delegates, issue.author.id)} -
- !isEqual(state, issue.state), - )} - {selectedItem} - state={issue.state} - save={partial(saveStatus, session.id)} /> - {/if} +
+
+ +
+ {#if role.isDelegateOrAuthor(session.publicKey, delegates, issue.author.id)} +
+ !isEqual(state, issue.state), + )} + {selectedItem} + state={issue.state} + save={partial(saveStatus, session.id)} /> + {/if} +
{/if}
-
+
{ - if (session) { - assigneeState = "submit"; - try { - await saveAssignees(session.id, newAssignees); - } finally { - assigneeState = "read"; - } - } - await refreshIssue(); + on:save={({ detail: newAssignees }) => { + void saveAssignees(newAssignees); }} /> { - if (session) { - labelState = "submit"; - try { - await saveLabels(session.id, newLabels); - } finally { - labelState = "read"; - } - } - await refreshIssue(); - }} /> + on:save={({ detail: newLabels }) => void saveLabels(newLabels)} />
diff --git a/src/views/projects/Issue/IssueTeaser.svelte b/src/views/projects/Issue/IssueTeaser.svelte index 20ad9b526..682d8f24d 100644 --- a/src/views/projects/Issue/IssueTeaser.svelte +++ b/src/views/projects/Issue/IssueTeaser.svelte @@ -7,12 +7,14 @@ formatTimestamp, } from "@app/lib/utils"; - import Badge from "@app/components/Badge.svelte"; import IconSmall from "@app/components/IconSmall.svelte"; import InlineMarkdown from "@app/components/InlineMarkdown.svelte"; import Link from "@app/components/Link.svelte"; import NodeId from "@app/components/NodeId.svelte"; + import CommentCounter from "../CommentCounter.svelte"; + import Labels from "../Cob/Labels.svelte"; + export let baseUrl: BaseUrl; export let issue: Issue; export let projectId: string; @@ -23,8 +25,6 @@ } return acc; }, 0); - - let hover = false; -
(hover = true)} - on:mouseleave={() => (hover = false)}> +
No title {:else} - + + {#if issue.labels.length > 0} + + + + {/if} + {/if} - - {#each issue.labels.slice(0, 4) as label} - - {label} - - {/each} - {#if issue.labels.length > 4} - - +{issue.labels.length - 4} more labels - - {/if} -
{#if commentCount > 0} -
-
- - {commentCount} -
-
+ {/if}
diff --git a/src/views/projects/Issues.svelte b/src/views/projects/Issues.svelte index 3b0b85a70..11cef18c5 100644 --- a/src/views/projects/Issues.svelte +++ b/src/views/projects/Issues.svelte @@ -69,7 +69,7 @@ @@ -749,24 +731,28 @@ {/if}
{#if session && role.isDelegateOrAuthor(session.publicKey, delegates, patch.author.id) && patchState === "read"} - +
+ +
{/if} {#if patchState === "read"} {#if session && role.isDelegateOrAuthor(session.publicKey, delegates, patch.author.id)} - !isEqual(state, patch.state), - )} - {selectedItem} - state={patch.state} - save={partial(saveStatus, session.id)} /> +
+ !isEqual(state, patch.state), + )} + {selectedItem} + state={patch.state} + save={partial(saveStatus, session.id)} /> +
{/if} {/if} @@ -788,7 +774,46 @@ insertions={stats.insertions} deletions={stats.deletions} /> + + opened + + {utils.formatObjectId(patch.id)} + + + {utils.formatTimestamp(patch.revisions[0].timestamp)} + + {#if patch.revisions[0].edits.length > 1 && lastEdit} +
+ • edited +
+ {/if} +
+
+ + { + void saveLabels(newLabels); + }} /> + +
+
{#if $experimental && session && patchState !== "read" && lastEdit} @@ -832,22 +857,24 @@ {#if ($experimental && session) || (firstRevision.revisionReactions && firstRevision.revisionReactions.length > 0)}
{#if session} - { - if (session) { - try { - await reactOnRevision( - session, - patch.id, - authors, - emoji, - ); - } finally { - closeFocused(); +
+ { + if (session) { + try { + await reactOnRevision( + session, + patch.id, + authors, + emoji, + ); + } finally { + closeFocused(); + } } - } - }} /> + }} /> +
{/if} {#if firstRevision.revisionReactions.length > 0} -
- - opened - - {utils.formatObjectId(patch.id)} - - - {utils.formatTimestamp(patch.revisions[0].timestamp)} - - {#if patch.revisions[0].edits.length > 1 && lastEdit} -
•
-
- edited -
- {/if} -
@@ -923,67 +926,27 @@ {/if} -
- {#if view.name === "changes"} -
- - - - - - - - Revision - - - {utils.formatObjectId(item.id)} - - - - - - -
- {/if} -
+ {#if view.name === "changes"} +
+ +
+ {/if}
+ {#if view.name === "changes"} +
+
+ +
+
+ {/if} {#if view.name === "diff"} {#if index === patch.revisions.length - 1} {#if $experimental && session && view.name === "activity"} -
- - {#if role.isDelegateOrAuthor(session.publicKey, delegates, patch.author.id)} +
-
- !isEqual(state, patch.state), - )} - {selectedItem} - state={patch.state} - save={partial(saveStatus, session.id)} /> -
- {/if} + + {#if role.isDelegateOrAuthor(session.publicKey, delegates, patch.author.id)} +
+
+ !isEqual(state, patch.state), + )} + {selectedItem} + state={patch.state} + save={partial(saveStatus, session.id)} /> +
+ {/if} +
{/if} {/if} @@ -1076,43 +1041,14 @@
-
-
-
Reviews
-
- {#each Object.values(patchReviews) as { latest, review }} -
- - {#if review.verdict === "accept"} - - {:else if review.verdict === "reject"} - - {:else} - - {/if} - - -
- {:else} -
No reviews
- {/each} -
-
+
+ { - if (session) { - labelState = "submit"; - try { - await saveLabels(session.id, newLabels); - } finally { - labelState = "read"; - } - } + on:save={({ detail: newLabels }) => { + void saveLabels(newLabels); }} />
diff --git a/src/views/projects/Patch/PatchTeaser.svelte b/src/views/projects/Patch/PatchTeaser.svelte index 707bb9323..28be7a9d1 100644 --- a/src/views/projects/Patch/PatchTeaser.svelte +++ b/src/views/projects/Patch/PatchTeaser.svelte @@ -2,42 +2,32 @@ import type { BaseUrl } from "@httpd-client"; import type { Patch } from "@httpd-client"; - import { HttpdClient } from "@httpd-client"; import { absoluteTimestamp, formatObjectId, formatTimestamp, - formatCommit, } from "@app/lib/utils"; - import Badge from "@app/components/Badge.svelte"; - import DiffStatBadge from "@app/components/DiffStatBadge.svelte"; import IconSmall from "@app/components/IconSmall.svelte"; import InlineMarkdown from "@app/components/InlineMarkdown.svelte"; import Link from "@app/components/Link.svelte"; import NodeId from "@app/components/NodeId.svelte"; - import Loading from "@app/components/Loading.svelte"; + + import Labels from "../Cob/Labels.svelte"; + import DiffStatBadgeLoader from "../DiffStatBadgeLoader.svelte"; + import CommentCounter from "../CommentCounter.svelte"; export let projectId: string; export let baseUrl: BaseUrl; export let patch: Patch; - const api = new HttpdClient(baseUrl); - const latestRevisionIndex = patch.revisions.length - 1; const latestRevision = patch.revisions[latestRevisionIndex]; - $: diffPromise = api.project.getDiff( - projectId, - latestRevision.base, - latestRevision.oid, - ); - // Counts the amount of comments in all the discussions over all revisions. $: commentCount = patch.revisions.reduce( (acc, curr) => acc + curr.discussions.reduce(acc => acc + 1, 0), 0, ); - let hover = false; -
(hover = true)} - on:mouseleave={() => (hover = false)}> +
- + + {#if patch.labels.length > 0} + + + + {/if} + - - {#each patch.labels.slice(0, 4) as label} - - {label} - - {/each} - {#if patch.labels.length > 4} - - +{patch.labels.length - 4} more labels - - {/if} -
@@ -165,8 +136,10 @@ {patch.revisions.length > 1 ? "updated" : "opened"} {formatObjectId(patch.id)} {#if patch.revisions.length > 1} - to - {formatObjectId(patch.revisions[patch.revisions.length - 1].id)} + + to + {formatObjectId(patch.revisions[patch.revisions.length - 1].id)} + {/if} @@ -176,37 +149,11 @@
-
+
{#if commentCount > 0} -
- - {commentCount} -
+ {/if} - {#await diffPromise} - - {:then { diff }} - - - - {/await} +
diff --git a/src/views/projects/Patch/RevisionSelector.svelte b/src/views/projects/Patch/RevisionSelector.svelte new file mode 100644 index 000000000..94aef77dc --- /dev/null +++ b/src/views/projects/Patch/RevisionSelector.svelte @@ -0,0 +1,69 @@ + + + + + + + + + + Revision + + + {utils.formatObjectId(item.id)} + + + + + + diff --git a/src/views/projects/Patches.svelte b/src/views/projects/Patches.svelte index 33f899b17..4fd1d19f3 100644 --- a/src/views/projects/Patches.svelte +++ b/src/views/projects/Patches.svelte @@ -78,7 +78,7 @@ - +
@@ -136,7 +144,7 @@ filesLinkActive={true} historyLinkActive={false} />
-
+
{#if tree.entries.length > 0}
diff --git a/tests/e2e/project.spec.ts b/tests/e2e/project.spec.ts index 31ba43a06..a08f713f9 100644 --- a/tests/e2e/project.spec.ts +++ b/tests/e2e/project.spec.ts @@ -397,7 +397,7 @@ test("only one modal can be open at a time", async ({ page }) => { await expect(page.getByText("bob")).not.toBeVisible(); await expect(page.getByText("feature/branch")).not.toBeVisible(); - await page.getByText("Settings").click(); + await page.getByRole("button", { name: "Settings" }).click(); await expect(page.getByText("Code font")).toBeVisible(); await expect(page.getByText("Use the Radicle CLI")).not.toBeVisible(); await expect(page.getByText("bob")).not.toBeVisible(); diff --git a/tests/e2e/project/issue.spec.ts b/tests/e2e/project/issue.spec.ts index cacd12357..e69501d63 100644 --- a/tests/e2e/project/issue.spec.ts +++ b/tests/e2e/project/issue.spec.ts @@ -180,7 +180,7 @@ test("handling embeds", async ({ page, authenticatedPeer }) => { `${scheme}://${hostname}:${port}/raw/rad:z2J7s48EbCBckcEmj2dm5eaFVoBsy/blobs/bae036309c2182c7304c97956969369823b5c6ad?mime=image/png`, ); await expect( - page.locator(".badge").filter({ hasText: "radicle-228x228.png" }), + page.getByRole("button", { name: "radicle-228x228.png" }), ).toBeVisible(); await page.getByRole("button", { name: "Edit" }).click(); @@ -201,9 +201,9 @@ test("handling embeds", async ({ page, authenticatedPeer }) => { await page.getByRole("button", { name: "Save" }).click(); await expect(page.getByRole("button", { name: "Submit" })).toBeHidden(); await expect( - page.locator(".badge").filter({ hasText: "apple-touch-icon.png" }), + page.getByRole("button", { name: "apple-touch-icon.png" }), ).toBeVisible(); await expect( - page.locator(".badge").filter({ hasText: "radicle-228x228.png" }), + page.getByRole("button", { name: "radicle-228x228.png" }), ).toBeVisible(); }); diff --git a/tests/e2e/project/issues.spec.ts b/tests/e2e/project/issues.spec.ts index e1cf308e4..a17ecee9e 100644 --- a/tests/e2e/project/issues.spec.ts +++ b/tests/e2e/project/issues.spec.ts @@ -88,12 +88,12 @@ test("create a new issue", async ({ page, authenticatedPeer }) => { await expect(page.getByText("This is a title")).toBeVisible(); await expect(page.getByText("This is a description")).toBeVisible(); await expect( - page.getByText( - `did:key:${authenticatedPeer.nodeId.substring( + page.getByRole("button", { + name: `did:key:${authenticatedPeer.nodeId.substring( 0, 6, )}…${authenticatedPeer.nodeId.slice(-6)}`, - ), + }), ).toBeVisible(); await expect( page.getByRole("button", { name: "documentation" }), diff --git a/tests/e2e/project/threads.spec.ts b/tests/e2e/project/threads.spec.ts index 2d4d52f92..273ec4ca8 100644 --- a/tests/e2e/project/threads.spec.ts +++ b/tests/e2e/project/threads.spec.ts @@ -134,7 +134,7 @@ test("handling embeds", async ({ page, authenticatedPeer }) => { `${scheme}://${hostname}:${port}/raw/rad:z2J7s48EbCBckcEmj2dm5eaFVoBsy/blobs/bae036309c2182c7304c97956969369823b5c6ad?mime=image/png`, ); await expect( - page.locator(".badge").filter({ hasText: "radicle-228x228.png" }), + page.getByRole("button", { name: "radicle-228x228.png" }), ).toBeVisible(); await page.getByRole("button", { name: "edit comment" }).click(); @@ -155,9 +155,9 @@ test("handling embeds", async ({ page, authenticatedPeer }) => { await page.getByRole("button", { name: "Save" }).click(); await expect(page.getByRole("button", { name: "Save" })).toBeHidden(); await expect( - page.locator(".badge").filter({ hasText: "apple-touch-icon.png" }), + page.getByRole("button", { name: "apple-touch-icon.png" }), ).toBeVisible(); await expect( - page.locator(".badge").filter({ hasText: "radicle-228x228.png" }), + page.getByRole("button", { name: "radicle-228x228.png" }), ).toBeVisible(); }); diff --git a/tests/e2e/theme.spec.ts b/tests/e2e/theme.spec.ts index f8cbae53a..8da9ff573 100644 --- a/tests/e2e/theme.spec.ts +++ b/tests/e2e/theme.spec.ts @@ -19,7 +19,7 @@ test("theme persistance", async ({ page }) => { await expect( page.getByRole("banner").getByRole("link", { name: "source-browsing" }), ).toBeVisible(); - await page.getByText("Settings").click(); + await page.getByRole("button", { name: "Settings" }).click(); await page.getByText("System").click(); await page.getByRole("button", { name: "Light Mode" }).click(); @@ -38,7 +38,7 @@ test("change theme", async ({ page }) => { await expect( page.getByRole("banner").getByRole("link", { name: "source-browsing" }), ).toBeVisible(); - await page.getByText("Settings").click(); + await page.getByRole("button", { name: "Settings" }).click(); await page.getByRole("button", { name: "Light Mode" }).click(); await expect(page.locator("html")).toHaveAttribute("data-theme", "light"); @@ -65,7 +65,7 @@ test("change code font", async ({ page }) => { page.getByRole("banner").getByRole("link", { name: "source-browsing" }), ).toBeVisible(); - await page.getByText("Settings").click(); + await page.getByRole("button", { name: "Settings" }).click(); await page.getByText("System").click(); await expect(page.getByText("System")).toHaveClass(/selected/);