Make issue/patch body stand out more via background color

2026-11-02 02:00:31 +08:00 · 2024-01-19 18:51:01 +00:00
parent c32cf7c559
commit 6e1f3dea8b
6 changed files with 171 additions and 156 deletions
@@ -292,30 +292,29 @@
  }

  .tab {
-    background-color: var(--color-background-default);
+    background-color: transparent;
    color: var(--color-foreground-contrast);
-    border: 1px solid transparent;
-    border-bottom: 1px solid var(--color-fill-separator);
+    border: 1px solid var(--color-border-hint);
+    border-radius: 4px 4px 0 0;
  }

  .tab[disabled] {
    background-color: var(--color-background-default);
    color: var(--color-foreground-disabled);
+    border: none;
+    border-bottom: 1px solid var(--color-border-hint);
  }

  .tab:not([disabled]):hover {
    background-color: var(--color-fill-float-hover);
-    border-top-right-radius: var(--border-radius-tiny) !important;
-    border-top-left-radius: var(--border-radius-tiny) !important;
  }

  .tab-active {
    background-color: var(--color-background-default);
    border: 1px solid var(--color-fill-separator);
    border-bottom: 1px solid var(--color-background-default);
+    border-radius: 4px 4px 0 0;
    color: var(--color-foreground-contrast);
-    border-top-right-radius: var(--border-radius-tiny) !important;
-    border-top-left-radius: var(--border-radius-tiny) !important;
  }

  .tab-active[disabled] {
@@ -6,7 +6,7 @@
 <style>
  .radio {
    display: flex;
-    gap: 0.25rem;
+    gap: 0.375rem;
    border-radius: var(--border-radius-tiny);
    justify-content: center;
    align-items: center;
@@ -1,6 +1,7 @@
 <style>
  .header {
    display: flex;
+    padding: 1rem;
    flex-direction: column;
    border-radius: var(--border-radius-small);
  }
@@ -18,11 +19,11 @@
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
-    margin-bottom: 1rem;
+    margin-bottom: 0.5rem;
  }
  .description {
    font-size: var(--font-size-small);
-    margin-top: 1rem;
+    margin-top: 2rem;
    word-break: break-word;
  }
 </style>
@@ -404,6 +404,21 @@
    flex: 1;
    min-height: 100%;
  }
+  .main {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    gap: 1.5rem;
+    background-color: var(--color-background-float);
+  }
+  .bottom {
+    padding: 1rem;
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+    background-color: var(--color-background-default);
+  }
+
  .metadata {
    display: flex;
    flex-direction: column;
@@ -463,7 +478,7 @@

 <Layout {baseUrl} {project} activeTab="issues">
  <div class="issue">
-    <div class="content">
+    <div class="main">
      <CobHeader>
        <svelte:fragment slot="title">
          {#if issueState !== "read"}
@@ -572,40 +587,44 @@
          {/if}
        </div>
      </CobHeader>
-      {#if threads.length > 0}
-        <div class="threads">
-          {#each threads as thread (thread.root.id)}
-            <ThreadComponent
-              enableAttachments
-              {thread}
-              rawPath={rawPath(project.head)}
-              canEditComment={partial(
-                role.isDelegateOrAuthor,
-                session?.publicKey,
-                project.delegates,
-              )}
-              editComment={session && partial(editComment, session.id)}
-              createReply={session && partial(createReply, session.id)}
-              handleReaction={session && partial(handleReaction, session)} />
-          {/each}
-        </div>
-      {/if}
-      {#if session}
-        <CommentToggleInput
-          rawPath={rawPath(project.head)}
-          placeholder="Leave your comment"
-          enableAttachments
-          submit={partial(createComment, session.id)} />
-        <div style:display="flex">
-          {#if role.isDelegateOrAuthor(session.publicKey, project.delegates, issue.author.id)}
-            <CobStateButton
-              items={items.filter(([, state]) => !isEqual(state, issue.state))}
-              {selectedItem}
-              state={issue.state}
-              save={partial(saveStatus, session.id)} />
-          {/if}
-        </div>
-      {/if}
+      <div class="bottom">
+        {#if threads.length > 0}
+          <div class="threads">
+            {#each threads as thread (thread.root.id)}
+              <ThreadComponent
+                enableAttachments
+                {thread}
+                rawPath={rawPath(project.head)}
+                canEditComment={partial(
+                  role.isDelegateOrAuthor,
+                  session?.publicKey,
+                  project.delegates,
+                )}
+                editComment={session && partial(editComment, session.id)}
+                createReply={session && partial(createReply, session.id)}
+                handleReaction={session && partial(handleReaction, session)} />
+            {/each}
+          </div>
+        {/if}
+        {#if session}
+          <CommentToggleInput
+            rawPath={rawPath(project.head)}
+            placeholder="Leave your comment"
+            enableAttachments
+            submit={partial(createComment, session.id)} />
+          <div style:display="flex">
+            {#if role.isDelegateOrAuthor(session.publicKey, project.delegates, issue.author.id)}
+              <CobStateButton
+                items={items.filter(
+                  ([, state]) => !isEqual(state, issue.state),
+                )}
+                {selectedItem}
+                state={issue.state}
+                save={partial(saveStatus, session.id)} />
+            {/if}
+          </div>
+        {/if}
+      </div>
    </div>
    <div class="metadata global-hide-on-mobile">
      <AssigneeInput
@@ -561,7 +561,12 @@
    display: flex;
    flex: 1;
    min-height: 100%;
-    min-height: 100%;
+  }
+  .main {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    background-color: var(--color-background-float);
  }
  .metadata {
    display: flex;
@@ -583,11 +588,10 @@
    font-size: var(--font-size-large);
    height: 2.5rem;
  }
-  .content {
-    display: flex;
-    flex: 1;
-    flex-direction: column;
-    min-width: 25rem;
+  .bottom {
+    background-color: var(--color-background-default);
+    padding: 1rem;
+    height: 100%;
  }
  .tabs {
    font-size: var(--font-size-tiny);
@@ -596,18 +600,12 @@
    justify-content: left;
    flex-wrap: wrap;
    position: relative;
-    margin-top: 1.5rem;
-    margin-bottom: 1.5rem;
+    margin-top: 1rem;
+    box-shadow: inset 0 -1px 0 var(--color-border-hint);
  }
-  .tabs::after {
-    content: "";
-    position: absolute;
-    left: -1rem;
-    bottom: 0;
-    border-bottom: 1px solid var(--color-fill-separator);
-    width: calc(100% + 2rem);
-    width: calc(100% + 2rem);
-    z-index: -1;
+  .tabs-spacer {
+    width: 1rem;
+    height: 100%;
  }
  .author {
    display: flex;
@@ -659,7 +657,7 @@

 <Layout {baseUrl} {project} activeTab="patches">
  <div class="patch">
-    <div class="content">
+    <div class="main">
      <CobHeader>
        <svelte:fragment slot="title">
          {#if patchState !== "read"}
@@ -740,11 +738,11 @@
      </CobHeader>

      <div class="tabs">
+        <div class="tabs-spacer" />
        <Radio>
          {#each Object.entries(tabs) as [name, { route, icon }]}
            <Link {route}>
              <Button
-                styleBorderRadius="0"
                size="large"
                variant={name === view.name ? "tab-active" : "tab"}>
                <IconSmall name={icon} />
@@ -765,7 +763,7 @@
                  toCommit: view.toCommit,
                },
              }}>
-              <Button styleBorderRadius="0" size="large" variant="tab-active">
+              <Button size="large" variant="tab-active">
                Compare <span class="diff-button-range">
                  {view.fromCommit.substring(0, 6)}..{view.toCommit.substring(
                    0,
@@ -842,93 +840,96 @@
            </div>
          {/if}
        </div>
+        <div class="tabs-spacer" />
      </div>
-      {#if view.name === "diff"}
-        <div style:margin-top="1rem">
-          <Changeset
-            {baseUrl}
-            projectId={project.id}
-            revision={view.toCommit}
-            files={view.files}
-            diff={view.diff} />
-        </div>
-      {:else if view.name === "activity"}
-        {#each timelineTuple as [revision, timelines], index}
-          {@const previousRevision =
-            index > 0 ? patch.revisions[index - 1] : undefined}
-          <RevisionComponent
-            {baseUrl}
-            {rawPath}
-            projectId={project.id}
-            {timelines}
-            projectDefaultBranch={project.defaultBranch}
-            projectHead={project.head}
-            {...revision}
-            first={index === 0}
-            canEdit={partial(
-              role.isDelegateOrAuthor,
-              session?.publicKey,
-              project.delegates,
-            )}
-            editRevision={session &&
-              partial(editRevision, session.id, revision.revisionId)}
-            editComment={session &&
-              partial(editComment, session.id, revision.revisionId)}
-            handleReaction={session &&
-              partial(handleReaction, session, revision.revisionId)}
-            createReply={session &&
-              partial(createReply, session.id, revision.revisionId)}
-            patchId={patch.id}
-            patchState={patch.state}
-            expanded={index === patch.revisions.length - 1}
-            previousRevId={previousRevision?.id}
-            previousRevOid={previousRevision?.oid}>
-            {#if index === patch.revisions.length - 1}
-              {#if session && view.name === "activity"}
-                <div class="connector" />
-                <CommentToggleInput
-                  rawPath={rawPath(patch.revisions[0].id)}
-                  enableAttachments
-                  placeholder="Leave your comment"
-                  submit={partial(
-                    createComment,
-                    session.id,
-                    revision.revisionId,
-                  )} />
-                {#if role.isDelegateOrAuthor(session.publicKey, project.delegates, patch.author.id)}
+      <div class="bottom">
+        {#if view.name === "diff"}
+          <div style:margin-top="1rem">
+            <Changeset
+              {baseUrl}
+              projectId={project.id}
+              revision={view.toCommit}
+              files={view.files}
+              diff={view.diff} />
+          </div>
+        {:else if view.name === "activity"}
+          {#each timelineTuple as [revision, timelines], index}
+            {@const previousRevision =
+              index > 0 ? patch.revisions[index - 1] : undefined}
+            <RevisionComponent
+              {baseUrl}
+              {rawPath}
+              projectId={project.id}
+              {timelines}
+              projectDefaultBranch={project.defaultBranch}
+              projectHead={project.head}
+              {...revision}
+              first={index === 0}
+              canEdit={partial(
+                role.isDelegateOrAuthor,
+                session?.publicKey,
+                project.delegates,
+              )}
+              editRevision={session &&
+                partial(editRevision, session.id, revision.revisionId)}
+              editComment={session &&
+                partial(editComment, session.id, revision.revisionId)}
+              handleReaction={session &&
+                partial(handleReaction, session, revision.revisionId)}
+              createReply={session &&
+                partial(createReply, session.id, revision.revisionId)}
+              patchId={patch.id}
+              patchState={patch.state}
+              expanded={index === patch.revisions.length - 1}
+              previousRevId={previousRevision?.id}
+              previousRevOid={previousRevision?.oid}>
+              {#if index === patch.revisions.length - 1}
+                {#if session && view.name === "activity"}
                  <div class="connector" />
-                  <div style="display: flex;">
-                    <CobStateButton
-                      items={items.filter(
-                        ([, state]) => !isEqual(state, patch.state),
-                      )}
-                      {selectedItem}
-                      state={patch.state}
-                      save={partial(saveStatus, session.id)} />
-                  </div>
+                  <CommentToggleInput
+                    rawPath={rawPath(patch.revisions[0].id)}
+                    enableAttachments
+                    placeholder="Leave your comment"
+                    submit={partial(
+                      createComment,
+                      session.id,
+                      revision.revisionId,
+                    )} />
+                  {#if role.isDelegateOrAuthor(session.publicKey, project.delegates, patch.author.id)}
+                    <div class="connector" />
+                    <div style="display: flex;">
+                      <CobStateButton
+                        items={items.filter(
+                          ([, state]) => !isEqual(state, patch.state),
+                        )}
+                        {selectedItem}
+                        state={patch.state}
+                        save={partial(saveStatus, session.id)} />
+                    </div>
+                  {/if}
                {/if}
              {/if}
-            {/if}
-          </RevisionComponent>
-        {:else}
-          <div style:margin="4rem 0">
-            <Placeholder
-              iconName="no-patches"
-              caption="No activity on this patch yet" />
+            </RevisionComponent>
+          {:else}
+            <div style:margin="4rem 0">
+              <Placeholder
+                iconName="no-patches"
+                caption="No activity on this patch yet" />
+            </div>
+          {/each}
+        {:else if view.name === "changes"}
+          <div style:margin-top="1rem">
+            <Changeset
+              {baseUrl}
+              projectId={project.id}
+              revision={view.oid}
+              files={view.files}
+              diff={view.diff} />
          </div>
-        {/each}
-      {:else if view.name === "changes"}
-        <div style:margin-top="1rem">
-          <Changeset
-            {baseUrl}
-            projectId={project.id}
-            revision={view.oid}
-            files={view.files}
-            diff={view.diff} />
-        </div>
-      {:else}
-        {utils.unreachable(view)}
-      {/if}
+        {:else}
+          {utils.unreachable(view)}
+        {/if}
+      </div>
    </div>

    <div class="metadata global-hide-on-mobile">
@@ -46,6 +46,7 @@
  .header {
    font-size: var(--font-size-tiny);
    display: flex;
+    gap: 0.375rem;
    align-items: center;
    justify-content: left;
    flex-wrap: wrap;
@@ -93,7 +94,7 @@
 </div>

 <div class="header">
-  <div style="display: flex; gap: 0.25rem;">
+  <div style="display: flex; gap: 0.375rem;">
    <Link
      route={{
        resource: "project.source",
@@ -102,10 +103,7 @@
        peer,
        revision,
      }}>
-      <Button
-        styleBorderRadius="0"
-        size="large"
-        variant={filesLinkActive ? "tab-active" : "tab"}>
+      <Button size="large" variant={filesLinkActive ? "tab-active" : "tab"}>
        <IconSmall name="file" />Files
      </Button>
    </Link>
@@ -118,10 +116,7 @@
        peer,
        revision,
      }}>
-      <Button
-        styleBorderRadius="0"
-        size="large"
-        variant={historyLinkActive ? "tab-active" : "tab"}>
+      <Button size="large" variant={historyLinkActive ? "tab-active" : "tab"}>
        <IconSmall name="commit" />
        <div class="title-counter">
          Commits