UI enhancements

- Remove breadcrumbs from diff view - Replace "Josh" with repo name in header - Add changes view Change: ui-enhancements
josh-project · Nov 14, 2022 · b143a10 · b143a10
1 parent 9ff0a6d
commit b143a10
Show file tree

Hide file tree

Showing 7 changed files with 258 additions and 34 deletions.
diff --git a/josh-ui/public/index.html b/josh-ui/public/index.html
@@ -27,10 +27,7 @@
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div class="logo">
-      <img src="%PUBLIC_URL%/logo.png" alt="Josh logo"/>
-      <span>Josh</span>
+    <div id="root">
     </div>
-    <div id="root"></div>
   </body>
 </html>
diff --git a/josh-ui/src/App.scss b/josh-ui/src/App.scss
@@ -40,7 +40,7 @@ body {
 }
 
 .file-browser-list {
-  margin: 0;
+  margin: 1.5em;
 
   &-entry {
     @include ui-link-clickable;
@@ -67,7 +67,7 @@ body {
 
 nav {
   &.breadcrumbs {
-    padding: .2em .5em;
+    padding: .2em 1.8em;
     margin-bottom: 0.7em;
   }
 
@@ -81,10 +81,25 @@ nav {
   }
 }
 
+.deleted {
+    background: #522;
+}
+
+.added {
+    background: #252;
+}
+
+pre {
+  padding: 2em;
+  font-family: $font-main;
+  background: #000000;
+}
+
 .logo {
   img {
     display: inline-block;
     height: 40px;
+    padding: 0em 0.8em;
   }
 
   margin: .3em 0 .7em;
@@ -97,11 +112,32 @@ nav {
     height: 1em;
   }
 
+ a {
   font-weight: bold;
   color: $color-highlight;
   text-transform: lowercase;
+  text-decoration: none;
+ }
+}
+
+.currentPage {
+  margin: .3em 0 0.7em;
+  display: flex;
+  flex-direction: row;
+  padding-right: 1.5em;
+
+  span {
+    align-self: center;
+    font-size: 1.44em;
+    height: 1em;
+    font-weight: bold;
+    color: $color-font-shadowed;
+    text-decoration: none;
+  }
+
 }
 
+
 .now-browsing {
   display: flex;
   justify-content: space-between;
@@ -161,6 +197,22 @@ nav {
   }
 }
 
+.changes-list-entry .summary {
+  @include ui-link-clickable;
+  &:hover {
+    background: $color-background-highlight;
+  }
+}
+
+.changes-list-entry .hame {
+  display: block;
+  @include ui-link-clickable;
+  &:hover {
+    background: $color-background-highlight;
+  }
+}
+
+
 .commit-list-entry-browse {
   @include ui-link-clickable;
   &:hover {
@@ -182,16 +234,32 @@ nav {
     color: $color-highlight;
     font-weight: bolder;
   }
+  span.name {
+    margin: 0 0.7em 0 0;
+    font-weight: bolder;
+    color: $color-font-shadowed;
+  }
   span.authorEmail {
     float: right;
     margin: 0 0.7em 0 0;
     color: $color-font-shadowed;
     font-weight: bolder;
   }
+  span.change-hash {
+    float: right;
+    margin: 0 0.7em 0 0;
+    font-weight: bolder;
+  }
   span.summary {
     margin: 0 0.7em 0 0;
     font-weight: bolder;
   }
+  span.change-summary {
+    color: $color-highlight;
+    display:block;
+    margin: 0 0.7em 0 0;
+    font-weight: bolder;
+  }
 }
 
 .ui-button {

diff --git a/josh-ui/src/App.tsx b/josh-ui/src/App.tsx
@@ -22,6 +22,7 @@ import {FileViewer} from "./FileViewer";
 import {DiffViewer} from "./DiffViewer";
 import {ChangeViewer} from "./ChangeViewer";
 import {HistoryList} from "./History";
+import {ChangesList} from "./Changes";
 import {Breadcrumbs} from "./Breadcrumbs";
 import {DEFAULT_FILTER} from "./Josh";
 
@@ -108,24 +109,24 @@ function Select() {
     </div>
 }
 
-function TopNav(props: { repo: string, filter: string }) {
+function TopNav(props: { repo: string, filter: string, page: string }) {
     const selectParams = {
         repo: props.repo,
         filter: props.filter,
     }
 
     return <div className={'now-browsing'}>
-        <span className={'now-browsing-name'}>
-            <span className={'now-browsing-name-repo'}>
-                now browsing: {props.repo}
-            </span>
-            {props.filter !== DEFAULT_FILTER && <span className={'now-browsing-name-filter'}>
-                {props.filter}
-            </span>}
-        </span>
-        <span className={'now-browsing-select'}>
-            <Link to={`/select?${createSearchParams(selectParams)}`}>select repo</Link>
-        </span>
+        <div className="logo">
+            <img src={process.env.PUBLIC_URL.concat("/logo.png")} alt="Josh logo"/>
+                <span className="now-browsing-name">
+                    <Link to={`/select?${createSearchParams(selectParams)}`}>
+                        {props.repo}{props.filter !== DEFAULT_FILTER && props.filter}
+                    </Link>
+                </span>
+        </div>
+        <div className="currentPage">
+            <span>{props.page}</span>
+        </div>
     </div>
 }
 
@@ -137,6 +138,7 @@ function Browse() {
     return <div>
         <TopNav
             repo={param('repo')} 
+            page={param('rev')}
             filter={param('filter')} />
 
         <Breadcrumbs
@@ -166,6 +168,7 @@ function ChangeView() {
     return <div>
         <TopNav
             repo={param('repo')} 
+            page="change"
             filter={param('filter')} />
 
         <ChangeViewer
@@ -185,6 +188,7 @@ function History() {
     return <div>
         <TopNav
             repo={param('repo')} 
+            page={param('rev')}
             filter={param('filter')} />
 
         <HistoryList
@@ -196,6 +200,25 @@ function History() {
     </div>
 }
 
+function Changes() {
+    const param = useStrictGetSearchParam()
+
+    useTitleEffect(`Changes - ${param('repo')} - Josh`)
+
+    return <div>
+        <TopNav
+            repo={param('repo')} 
+            page="changes"
+            filter={param('filter')} />
+
+        <ChangesList
+            repo={param('repo')}
+            filter={param('filter')}
+            navigateCallback={useNavigateCallback()}
+        />
+    </div>
+}
+
 
 function View() {
     const param = useStrictGetSearchParam()
@@ -206,6 +229,7 @@ function View() {
         <div>
             <TopNav
                 repo={param('repo')} 
+                page="file"
                 filter={param('filter')} />
 
             <Breadcrumbs
@@ -237,15 +261,9 @@ function DiffView() {
         <div>
             <TopNav
                 repo={param('repo')} 
+                page="diff"
                 filter={param('filter')} />
 
-            <Breadcrumbs
-                repo={param('repo')}
-                path={param('path')}
-                filter={param('filter')}
-                rev={param('rev')}
-                navigateCallback={useNavigateCallback()} />
-
             <DiffViewer
                 repo={param('repo')}
                 path={param('path')}
@@ -266,6 +284,7 @@ function App() {
                 <Route path='/select' element={<Select />} />
                 <Route path='/browse' element={<Browse />} />
                 <Route path='/history' element={<History />} />
+                <Route path='/changes' element={<Changes />} />
                 <Route path='/view' element={<View />} />
                 <Route path='/diff' element={<DiffView />} />
                 <Route path='/change' element={<ChangeView />} />

diff --git a/josh-ui/src/ChangeViewer.tsx b/josh-ui/src/ChangeViewer.tsx
@@ -82,23 +82,22 @@ export class ChangeViewer extends React.Component<ChangeViewProps, State> {
         }
 
         return values.map((entry) => {
-            const className = `file-browser-list-entry file-browser-list-entry-${classNameSuffix}`
+            let className = `file-browser-list-entry file-browser-list-entry-${classNameSuffix}`
             let path = "";
-            let prefix = "M";
             if (!entry.from) {
-                prefix = "A";
+                className = className.concat(" added");
                 path = entry.to.path;
             }
             else if (!entry.to) {
-                prefix = "D";
+                className = className.concat(" deleted");
                 path = entry.from.path;
             }
             else {
                 path = entry.from.path;
             }
 
             return <div className={className} key={path} onClick={navigate.bind(this,path)}>
-                <span>{prefix}</span>{path}
+                {path}
             </div>
         })
     }
@@ -108,9 +107,9 @@ export class ChangeViewer extends React.Component<ChangeViewProps, State> {
             return <div className={'file-browser-loading'}>Loading...</div>
         } else {
             return <div>
-                <div>
+                <pre>
                     {this.state.summary}
-                </div>
+                </pre>
                 <div className={'file-browser-list'}>
                     {this.renderList(this.state.files, NavigateTargetType.Diff)}
                 </div>