fix(ui): update source browsing (#765)

* remove scrollbars * update readme * fix markdown + scrollbars
radicle-dev · Aug 11, 2020 · f801198 · f801198
1 parent 48b1aa0
commit f801198
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 9 deletions.
diff --git a/README.md b/README.md
@@ -1,7 +1,6 @@
+# Upstream
 [![Build status][ba]][st]
 
-# What is Upstream?
-
 Upstream is a cross-platform desktop client for the radicle code collaboration
 and registry protocols.
 

diff --git a/ui/DesignSystem/Component/SourceBrowser/FileSource.svelte b/ui/DesignSystem/Component/SourceBrowser/FileSource.svelte
@@ -1,8 +1,9 @@
 <script>
   import { format } from "timeago.js";
   import { link } from "svelte-spa-router";
+  import { isMarkdown } from "../../../src/source.ts";
 
-  import { Icon } from "../../Primitive";
+  import { Icon, Markdown } from "../../Primitive";
   import CommitTeaser from "./CommitTeaser.svelte";
   import EmptyState from "../EmptyState.svelte";
 
@@ -61,6 +62,23 @@
   .container {
     display: flex;
   }
+
+  .markdown-wrapper {
+    width: 100%;
+    padding: 1rem 2rem;
+  }
+
+  .file-source > header + .container .markdown-wrapper {
+    padding-top: 0;
+  }
+
+  .no-scrollbar {
+    scrollbar-width: none;
+  }
+
+  .no-scrollbar::-webkit-scrollbar {
+    display: none;
+  }
 </style>
 
 <div class="file-source" data-cy="file-source">
@@ -88,6 +106,10 @@
         icon="eyes"
         text="Binary content"
         style="height: 100%; padding: 2rem 0 1rem;" />
+    {:else if isMarkdown(path)}
+      <div class="markdown-wrapper">
+        <Markdown content={blob.content} />
+      </div>
     {:else}
       <pre class="line-numbers typo-text-mono">
         {@html blob.content
@@ -98,7 +120,7 @@
           })
           .join('\n')}
       </pre>
-      <pre class="code typo-text-mono">
+      <pre class="code typo-text-mono no-scrollbar">
         {#if blob.html}
           {@html blob.content}
         {:else}{blob.content}{/if}

diff --git a/ui/DesignSystem/Component/SourceBrowser/Readme.svelte b/ui/DesignSystem/Component/SourceBrowser/Readme.svelte
@@ -32,7 +32,7 @@
   }
 
   .container {
-    padding: 24px 24px 16px 24px;
+    padding: 1rem 2rem;
   }
 </style>
 

diff --git a/ui/DesignSystem/Primitive/Markdown.svelte b/ui/DesignSystem/Primitive/Markdown.svelte
@@ -9,11 +9,11 @@
     font-family: var(--typeface-medium);
     font-size: 2rem;
     padding: 1rem 0;
-    margin: 2rem 0 1.75rem;
+    margin: 0 0 1.75rem;
     border-bottom: 1px solid var(--color-foreground-level-3);
   }
-  .markdown :global(h1):first-child {
-    margin-top: 0;
+  .markdown :global(h1):not(:first-child) {
+    margin-top: 2rem;
   }
 
   .markdown :global(h1 > code) {
@@ -127,6 +127,12 @@
     padding: 1rem;
     border-radius: 0.25rem;
     margin: 1rem 0;
+    overflow: scroll;
+    scrollbar-width: none;
+  }
+
+  .markdown :global(pre::-webkit-scrollbar) {
+    display: none;
   }
 
   .markdown :global(hr) {

diff --git a/ui/src/source.ts b/ui/src/source.ts
@@ -235,7 +235,7 @@ const update = (msg: Msg): void => {
                 peerId: msg.peerId,
                 revision: msg.revision,
                 path: msg.path,
-                highlight: true,
+                highlight: !isMarkdown(msg.path),
               },
             })
             .then(objectStore.success)