From 1f09d8a2a88da3419ddcddee894f08c9c24aec21 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?R=C5=ABdolfs=20O=C5=A1i=C5=86=C5=A1?= Date: Fri, 21 Apr 2023 17:23:39 +0200 Subject: [PATCH] Allow opening links in a new tab MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Rūdolfs Ošiņš --- public/typography.css | 8 - src/App/Header/SearchResultsModal.svelte | 2 +- src/App/Header/SettingsDropdown.svelte | 4 +- src/components/Authorship.svelte | 2 +- src/components/Avatar.svelte | 1 - src/components/Chip.svelte | 2 +- src/components/Clipboard.svelte | 32 +- src/components/ErrorMessage.svelte | 1 + src/components/Icon.svelte | 407 ++++++++++-------- src/components/Link.svelte | 17 +- src/components/ProjectCard.svelte | 3 +- src/components/ProjectLink.svelte | 31 +- src/components/SquareButton.svelte | 74 ++++ src/components/TabBar.svelte | 68 --- src/lib/router.ts | 10 + src/views/home/Index.svelte | 44 +- src/views/projects/Blob.svelte | 8 +- src/views/projects/BranchSelector.svelte | 20 +- src/views/projects/Browser.svelte | 60 ++- src/views/projects/Cob/AssigneeInput.svelte | 25 +- src/views/projects/Cob/TagInput.svelte | 1 + src/views/projects/Commit.svelte | 10 +- .../projects/Commit/CommitAuthorship.svelte | 1 - src/views/projects/Commit/CommitTeaser.svelte | 88 ++-- src/views/projects/Header.svelte | 167 ++++--- src/views/projects/HeaderToggleLabel.svelte | 49 --- src/views/projects/History.svelte | 44 +- src/views/projects/Issue/IssueTeaser.svelte | 28 +- src/views/projects/Issues.svelte | 140 +++--- src/views/projects/Patch.svelte | 83 ++-- src/views/projects/Patch/PatchTeaser.svelte | 29 +- src/views/projects/Patches.svelte | 128 +++--- src/views/projects/PeerSelector.svelte | 72 ++-- src/views/projects/ProjectMeta.svelte | 20 +- .../projects/SourceBrowser/Changeset.svelte | 7 +- .../projects/SourceBrowser/FileDiff.svelte | 100 ++--- src/views/projects/Tree.svelte | 17 +- src/views/projects/Tree/File.svelte | 3 +- src/views/projects/Tree/Folder.svelte | 19 +- src/views/seeds/View.svelte | 64 +-- tests/e2e/hashRouter.spec.ts | 4 +- tests/e2e/historyRouter.spec.ts | 4 +- tests/e2e/project.spec.ts | 39 +- tests/e2e/project/commit.spec.ts | 6 +- tests/e2e/project/commits.spec.ts | 51 +-- 45 files changed, 1009 insertions(+), 984 deletions(-) create mode 100644 src/components/SquareButton.svelte delete mode 100644 src/components/TabBar.svelte delete mode 100644 src/views/projects/HeaderToggleLabel.svelte diff --git a/public/typography.css b/public/typography.css index 06390ae71..1ce5b810e 100644 --- a/public/typography.css +++ b/public/typography.css @@ -144,14 +144,6 @@ p { .txt-faded { color: var(--color-foreground-5); } -.txt-title { - font-size: var(--font-size-large); - font-weight: var(--font-weight-normal); - color: var(--color-secondary); - text-align: left; - text-overflow: ellipsis; - overflow-x: hidden; -} .txt-link { color: var(--color-foreground-6); text-decoration: none; diff --git a/src/App/Header/SearchResultsModal.svelte b/src/App/Header/SearchResultsModal.svelte index c9da6d06a..62fd40b07 100644 --- a/src/App/Header/SearchResultsModal.svelte +++ b/src/App/Header/SearchResultsModal.svelte @@ -35,7 +35,7 @@ {#each results as result}
  • (showFonts = !showFonts)}>
    Code font
    - + {#if showFonts}
    {font.displayName} {#if isSelectedFont} - + {/if}
    {/each} diff --git a/src/components/Authorship.svelte b/src/components/Authorship.svelte index e4c6f28aa..8fd717b95 100644 --- a/src/components/Authorship.svelte +++ b/src/components/Authorship.svelte @@ -17,6 +17,7 @@ align-items: center; color: var(--color-foreground-6); padding: 0.125rem 0; + gap: 0.25rem; } .id { overflow: hidden; @@ -24,7 +25,6 @@ white-space: nowrap; } .body { - margin: 0 0.4rem; white-space: nowrap; } diff --git a/src/components/Avatar.svelte b/src/components/Avatar.svelte index 4a1bba7ef..e143be0a5 100644 --- a/src/components/Avatar.svelte +++ b/src/components/Avatar.svelte @@ -32,7 +32,6 @@ display: inline-block !important; width: 1rem; height: 1rem; - margin-right: 0.5rem; } diff --git a/src/components/Chip.svelte b/src/components/Chip.svelte index a50e55e63..e13450370 100644 --- a/src/components/Chip.svelte +++ b/src/components/Chip.svelte @@ -17,7 +17,7 @@ .section { display: flex; align-items: center; - max-width: 13rem; + max-width: 13.5rem; padding: 0.2rem 0.5rem; } .text { diff --git a/src/components/Clipboard.svelte b/src/components/Clipboard.svelte index c4199a279..39131bd47 100644 --- a/src/components/Clipboard.svelte +++ b/src/components/Clipboard.svelte @@ -1,19 +1,30 @@ - -
    +
    {name} diff --git a/src/components/ProjectLink.svelte b/src/components/ProjectLink.svelte index 7f45c7f9a..58f34b659 100644 --- a/src/components/ProjectLink.svelte +++ b/src/components/ProjectLink.svelte @@ -1,16 +1,29 @@ - - { - updateProjectRoute(projectParams); - }} - href={projectLinkHref(projectParams)}> + diff --git a/src/components/SquareButton.svelte b/src/components/SquareButton.svelte new file mode 100644 index 000000000..24172ba8f --- /dev/null +++ b/src/components/SquareButton.svelte @@ -0,0 +1,74 @@ + + + + + +
    + + + +
    diff --git a/src/components/TabBar.svelte b/src/components/TabBar.svelte deleted file mode 100644 index 6d9dd3bc7..000000000 --- a/src/components/TabBar.svelte +++ /dev/null @@ -1,68 +0,0 @@ - - - - - - -
    - {#each options as option} - - {/each} -
    diff --git a/src/lib/router.ts b/src/lib/router.ts index 3f712ccad..3ec8059e4 100644 --- a/src/lib/router.ts +++ b/src/lib/router.ts @@ -16,6 +16,16 @@ export const activeRouteStore: Readable = derived( }, ); +export function useDefaultNavigation(event: MouseEvent) { + return ( + event.button !== 0 || + event.altKey || + event.ctrlKey || + event.metaKey || + event.shiftKey + ); +} + export const base = import.meta.env.VITE_HASH_ROUTING ? "./" : "/"; // Gets triggered when clicking on an anchor hash tag e.g. diff --git a/src/views/home/Index.svelte b/src/views/home/Index.svelte index b02c89eaa..05225cdf1 100644 --- a/src/views/home/Index.svelte +++ b/src/views/home/Index.svelte @@ -1,28 +1,13 @@
    -
    +
    Assignees {#if action === "edit"} {#if !edit} @@ -94,17 +101,19 @@ {/if} {/if}
    -
    +
    {#each updatedAssignees as assignee, key (assignee)} - - {formatNodeId(assignee)} +
    + + {formatNodeId(assignee)} +
    {:else} -
    No assignees
    +
    No assignees
    {/each}
    {#if edit || action === "create"} diff --git a/src/views/projects/Cob/TagInput.svelte b/src/views/projects/Cob/TagInput.svelte index 1eb235b82..0e2131c89 100644 --- a/src/views/projects/Cob/TagInput.svelte +++ b/src/views/projects/Cob/TagInput.svelte @@ -66,6 +66,7 @@ .tag { overflow: hidden; text-overflow: ellipsis; + white-space: nowrap; } diff --git a/src/views/projects/Commit.svelte b/src/views/projects/Commit.svelte index a06a1bfd6..b6d4b89c6 100644 --- a/src/views/projects/Commit.svelte +++ b/src/views/projects/Commit.svelte @@ -6,8 +6,8 @@ import * as router from "@app/lib/router"; import Changeset from "@app/views/projects/SourceBrowser/Changeset.svelte"; - import CommitAuthorship from "@app/views/projects/Commit/CommitAuthorship.svelte"; import Clipboard from "@app/components/Clipboard.svelte"; + import CommitAuthorship from "@app/views/projects/Commit/CommitAuthorship.svelte"; export let commit: Commit; @@ -24,7 +24,7 @@ .commit { padding: 0 2rem 0 8rem; } - header { + .header { padding: 1rem; background: var(--color-background-1); border-radius: var(--border-radius); @@ -54,7 +54,7 @@
    -
    +
    {header.summary}
    @@ -68,6 +68,6 @@ 
    {header.description}
    -
    - +
    +
    diff --git a/src/views/projects/Commit/CommitAuthorship.svelte b/src/views/projects/Commit/CommitAuthorship.svelte index 16cc4fe5c..c61d7bc1d 100644 --- a/src/views/projects/Commit/CommitAuthorship.svelte +++ b/src/views/projects/Commit/CommitAuthorship.svelte @@ -14,7 +14,6 @@ align-items: center; gap: 0.25rem; color: var(--color-foreground-6); - padding: 0.125rem 0; } .authorship .author, .authorship .committer { diff --git a/src/views/projects/Commit/CommitTeaser.svelte b/src/views/projects/Commit/CommitTeaser.svelte index f1a5df31e..8de22341e 100644 --- a/src/views/projects/Commit/CommitTeaser.svelte +++ b/src/views/projects/Commit/CommitTeaser.svelte @@ -1,67 +1,48 @@ - - -
    -
    -
    +
    +
    +
    {commit.summary}
    -
    +
    -
    +
    {formatCommit(commit.id)} -
    browseCommit(commit.id)}> - + title="Browse the repository at this point in the history"> + + +
    diff --git a/src/views/projects/Header.svelte b/src/views/projects/Header.svelte index 834b29d57..8a5d5e8c3 100644 --- a/src/views/projects/Header.svelte +++ b/src/views/projects/Header.svelte @@ -2,16 +2,16 @@ import type { BaseUrl, Project, Remote, Tree } from "@httpd-client"; import type { ProjectRoute } from "@app/lib/router/definitions"; - import * as router from "@app/lib/router"; - import { closeFocused } from "@app/components/Floating.svelte"; import { config } from "@app/lib/config"; import { pluralize } from "@app/lib/pluralize"; import BranchSelector from "@app/views/projects/BranchSelector.svelte"; import CloneButton from "@app/views/projects/CloneButton.svelte"; - import HeaderToggleLabel from "@app/views/projects/HeaderToggleLabel.svelte"; + import Link from "@app/components/Link.svelte"; import PeerSelector from "@app/views/projects/PeerSelector.svelte"; + import ProjectLink from "@app/components/ProjectLink.svelte"; + import SquareButton from "@app/components/SquareButton.svelte"; export let project: Project; export let activeRoute: ProjectRoute; @@ -22,55 +22,10 @@ export let baseUrl: BaseUrl; $: revision = activeRoute.params.revision ?? commit; - - // Switches between project views. - const toggleContent = ( - input: "issues" | "patches" | "history", - keepSourceInPath: boolean, - ) => { - router.updateProjectRoute({ - view: { - resource: activeRoute.params.view.resource === input ? "tree" : input, - }, - id: project.id, - revision: revision, - search: undefined, - ...(keepSourceInPath ? null : { revision: undefined, path: undefined }), - }); - }; - - const updatePeer = (peer: string) => { - router.updateProjectRoute({ - peer, - revision: undefined, - }); - closeFocused(); - }; - - const updateRevision = (revision: string) => { - router.updateProjectRoute({ - revision, - }); - closeFocused(); - }; - - function goToSeed() { - if (baseUrl.port !== config.seeds.defaultHttpdPort) { - router.push({ - resource: "seeds", - params: { hostnamePort: `${baseUrl.hostname}:${baseUrl.port}` }, - }); - } else { - router.push({ - resource: "seeds", - params: { hostnamePort: baseUrl.hostname }, - }); - } - } -
    +
    {#if peers.length > 0} updatePeer(event.detail)} /> + on:click={() => closeFocused()} /> {/if} updateRevision(event.detail)} /> + on:click={() => closeFocused()} /> - - - {baseUrl.hostname} - - - toggleContent("history", true)}> - {tree.stats.commits} - {pluralize("commit", tree.stats.commits)} - - toggleContent("issues", false)}> - {project.issues.open} - {pluralize("issue", project.issues.open)} - - toggleContent("patches", false)}> - {project.patches.open} - {pluralize("patch", project.patches.open)} - - + + + {baseUrl.hostname} + + + + + + {tree.stats.commits} + {pluralize("commit", tree.stats.commits)} + + + + + + {project.issues.open} + {pluralize("issue", project.issues.open)} + + + + + + {project.patches.open} + {pluralize("patch", project.patches.open)} + + + + {tree.stats.contributors} {pluralize("contributor", tree.stats.contributors)} - -
    + +
    diff --git a/src/views/projects/HeaderToggleLabel.svelte b/src/views/projects/HeaderToggleLabel.svelte deleted file mode 100644 index b1850181d..000000000 --- a/src/views/projects/HeaderToggleLabel.svelte +++ /dev/null @@ -1,49 +0,0 @@ - - - - - diff --git a/src/views/projects/History.svelte b/src/views/projects/History.svelte index 9307f1be7..1a4aa94d1 100644 --- a/src/views/projects/History.svelte +++ b/src/views/projects/History.svelte @@ -1,7 +1,6 @@ @@ -93,39 +95,53 @@ {/if} {#if meta} - + - did:key: - {truncateId(meta.id)} + + + did:key:{truncateId(meta.id)} {#if meta.delegate} delegate {/if} {:else if peer} - + - did:key: - {truncateId(peer)} + + did:key:{truncateId(peer)} {/if}
    - switchPeer(e.detail.value)}> -
    - - - - did:key:{item.value} - {#if item.badge} - {item.badge} - {/if} -
    + + + +
    + + +
    + + did:key:{item.value} +
    +
    + + did:key:{truncateId(item.value)} +
    +     + {#if item.badge} + {item.badge} + {/if} +
    +     +     diff --git a/src/views/projects/ProjectMeta.svelte b/src/views/projects/ProjectMeta.svelte index dd8d3561a..f88ab8aa2 100644 --- a/src/views/projects/ProjectMeta.svelte +++ b/src/views/projects/ProjectMeta.svelte @@ -16,22 +16,28 @@
    -
    +
    { const s = []; @@ -53,12 +54,12 @@
    {#each diff.added as file} - + {/each} {#each diff.deleted as file} - + {/each} {#each diff.modified as file} - + {/each}
    diff --git a/src/views/projects/SourceBrowser/FileDiff.svelte b/src/views/projects/SourceBrowser/FileDiff.svelte index 83dfbfaaf..4f64e1a85 100644 --- a/src/views/projects/SourceBrowser/FileDiff.svelte +++ b/src/views/projects/SourceBrowser/FileDiff.svelte @@ -1,23 +1,17 @@ - -
    - -
    +
    +
    + +
    (collapsed = !collapsed)}> + {#if collapsed} + + {:else} + + {/if} +

    {file.path}

    {#if mode === "added"} @@ -176,12 +176,16 @@ deleted {/if}
    -
    dispatch("browse", file.path)}> - +
    + - +
    {#if !collapsed} @@ -216,4 +220,4 @@ {/if} {/if} -
    +
    diff --git a/src/views/projects/Tree.svelte b/src/views/projects/Tree.svelte index 59e854a83..c69e5da0f 100644 --- a/src/views/projects/Tree.svelte +++ b/src/views/projects/Tree.svelte @@ -5,6 +5,7 @@ import File from "./Tree/File.svelte"; import Folder from "./Tree/Folder.svelte"; + import ProjectLink from "@app/components/ProjectLink.svelte"; export let fetchTree: (path: string) => Promise; export let path: string; @@ -27,10 +28,16 @@ currentPath={path} on:select={onSelect} /> {:else} - onSelect({ detail: entry.path })} /> + onSelect({ detail: entry.path })}> + + {/if} {/each} diff --git a/src/views/projects/Tree/File.svelte b/src/views/projects/Tree/File.svelte index f2b7e453a..c5f2092a7 100644 --- a/src/views/projects/Tree/File.svelte +++ b/src/views/projects/Tree/File.svelte @@ -46,8 +46,7 @@ } - -
    +
    {name}