Skip to content

Commit cffcb4b

Browse files
christian-schillingchristian-schilling
authored
UI enhancements (#1002)
- Remove breadcrumbs from diff view - Replace "Josh" with repo name in header - Add changes view Change: ui-enhancements
1 parent feb62a4 commit cffcb4b

File tree

7 files changed

+269
-35
lines changed

7 files changed

+269
-35
lines changed

‎josh-ui/public/index.html‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -27,10 +27,7 @@
2727
</head>
2828
<body>
2929
<noscript>You need to enable JavaScript to run this app.</noscript>
30-
<div class="logo">
31-
<img src="%PUBLIC_URL%/logo.png" alt="Josh logo"/>
32-
<span>Josh</span>
30+
<div id="root">
3331
</div>
34-
<div id="root"></div>
3532
</body>
3633
</html>

‎josh-ui/src/App.scss‎

Lines changed: 81 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,10 @@ $color-link: $color-font-normal;
1313
$color-link-hover: #ffffaa;
1414
$color-link-visited: $color-font-normal;
1515
$color-link-visited-hover: #ffffaa;
16+
$color-file-added: #123212;
17+
$color-file-deleted: #321212;
18+
$color-file-added-hover: #324232;
19+
$color-file-deleted-hover: #423232;
1620

1721
@mixin ui-link-clickable {
1822
color: $color-link;
@@ -40,7 +44,7 @@ body {
4044
}
4145

4246
.file-browser-list {
43-
margin: 0;
47+
margin: 1.5em;
4448

4549
&-entry {
4650
@include ui-link-clickable;
@@ -67,7 +71,7 @@ body {
6771

6872
nav {
6973
&.breadcrumbs {
70-
padding: .2em .5em;
74+
padding: .2em 1.8em;
7175
margin-bottom: 0.7em;
7276
}
7377

@@ -81,10 +85,17 @@ nav {
8185
}
8286
}
8387

88+
pre.commit-message {
89+
padding: 2em;
90+
font-family: $font-main;
91+
background: #111111;
92+
}
93+
8494
.logo {
8595
img {
8696
display: inline-block;
8797
height: 40px;
98+
padding: 0em 0.8em;
8899
}
89100

90101
margin: .3em 0 .7em;
@@ -97,11 +108,31 @@ nav {
97108
height: 1em;
98109
}
99110

111+
a {
100112
font-weight: bold;
101113
color: $color-highlight;
102-
text-transform: lowercase;
114+
text-decoration: none;
115+
}
116+
}
117+
118+
.current-page {
119+
margin: .3em 0 0.7em;
120+
display: flex;
121+
flex-direction: row;
122+
padding-right: 1.5em;
123+
124+
span {
125+
align-self: center;
126+
font-size: 1.44em;
127+
height: 1em;
128+
font-weight: bold;
129+
color: $color-font-shadowed;
130+
text-decoration: none;
131+
}
132+
103133
}
104134

135+
105136
.now-browsing {
106137
display: flex;
107138
justify-content: space-between;
@@ -138,6 +169,21 @@ nav {
138169
&:hover {
139170
background: $color-background-highlight;
140171
}
172+
173+
&.deleted {
174+
background: $color-file-deleted;
175+
&:hover {
176+
background: $color-file-deleted-hover;
177+
}
178+
}
179+
180+
&.added {
181+
background: $color-file-added;
182+
&:hover {
183+
background: $color-file-added-hover;
184+
}
185+
}
186+
141187
}
142188

143189
.commit-list-entry-dir {
@@ -161,6 +207,22 @@ nav {
161207
}
162208
}
163209

210+
.changes-list-entry .summary {
211+
@include ui-link-clickable;
212+
&:hover {
213+
background: $color-background-highlight;
214+
}
215+
}
216+
217+
.changes-list-entry .hame {
218+
display: block;
219+
@include ui-link-clickable;
220+
&:hover {
221+
background: $color-background-highlight;
222+
}
223+
}
224+
225+
164226
.commit-list-entry-browse {
165227
@include ui-link-clickable;
166228
&:hover {
@@ -182,16 +244,32 @@ nav {
182244
color: $color-highlight;
183245
font-weight: bolder;
184246
}
247+
span.name {
248+
margin: 0 0.7em 0 0;
249+
font-weight: bolder;
250+
color: $color-font-shadowed;
251+
}
185252
span.authorEmail {
186253
float: right;
187254
margin: 0 0.7em 0 0;
188255
color: $color-font-shadowed;
189256
font-weight: bolder;
190257
}
258+
span.change-hash {
259+
float: right;
260+
margin: 0 0.7em 0 0;
261+
font-weight: bolder;
262+
}
191263
span.summary {
192264
margin: 0 0.7em 0 0;
193265
font-weight: bolder;
194266
}
267+
span.change-summary {
268+
color: $color-highlight;
269+
display:block;
270+
margin: 0 0.7em 0 0;
271+
font-weight: bolder;
272+
}
195273
}
196274

197275
.ui-button {

‎josh-ui/src/App.tsx‎

Lines changed: 38 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ import {FileViewer} from "./FileViewer";
2222
import {DiffViewer} from "./DiffViewer";
2323
import {ChangeViewer} from "./ChangeViewer";
2424
import {HistoryList} from "./History";
25+
import {ChangesList} from "./Changes";
2526
import {Breadcrumbs} from "./Breadcrumbs";
2627
import {DEFAULT_FILTER} from "./Josh";
2728

@@ -108,24 +109,24 @@ function Select() {
108109
</div>
109110
}
110111

111-
function TopNav(props: { repo: string, filter: string }) {
112+
function TopNav(props: { repo: string, filter: string, page: string }) {
112113
const selectParams = {
113114
repo: props.repo,
114115
filter: props.filter,
115116
}
116117

117118
return <div className={'now-browsing'}>
118-
<span className={'now-browsing-name'}>
119-
<span className={'now-browsing-name-repo'}>
120-
now browsing: {props.repo}
121-
</span>
122-
{props.filter !== DEFAULT_FILTER && <span className={'now-browsing-name-filter'}>
123-
{props.filter}
124-
</span>}
125-
</span>
126-
<span className={'now-browsing-select'}>
127-
<Link to={`/select?${createSearchParams(selectParams)}`}>select repo</Link>
128-
</span>
119+
<div className="logo">
120+
<img src={process.env.PUBLIC_URL.concat("/logo.png")} alt="Josh logo"/>
121+
<span className="now-browsing-name">
122+
<Link to={`/select?${createSearchParams(selectParams)}`}>
123+
{props.repo}{props.filter !== DEFAULT_FILTER && props.filter}
124+
</Link>
125+
</span>
126+
</div>
127+
<div className="current-page">
128+
<span>{props.page}</span>
129+
</div>
129130
</div>
130131
}
131132

@@ -137,6 +138,7 @@ function Browse() {
137138
return <div>
138139
<TopNav
139140
repo={param('repo')}
141+
page={param('rev')}
140142
filter={param('filter')} />
141143

142144
<Breadcrumbs
@@ -166,6 +168,7 @@ function ChangeView() {
166168
return <div>
167169
<TopNav
168170
repo={param('repo')}
171+
page="change"
169172
filter={param('filter')} />
170173

171174
<ChangeViewer
@@ -185,6 +188,7 @@ function History() {
185188
return <div>
186189
<TopNav
187190
repo={param('repo')}
191+
page={param('rev')}
188192
filter={param('filter')} />
189193

190194
<HistoryList
@@ -196,6 +200,25 @@ function History() {
196200
</div>
197201
}
198202

203+
function Changes() {
204+
const param = useStrictGetSearchParam()
205+
206+
useTitleEffect(`Changes - ${param('repo')} - Josh`)
207+
208+
return <div>
209+
<TopNav
210+
repo={param('repo')}
211+
page="changes"
212+
filter={param('filter')} />
213+
214+
<ChangesList
215+
repo={param('repo')}
216+
filter={param('filter')}
217+
navigateCallback={useNavigateCallback()}
218+
/>
219+
</div>
220+
}
221+
199222

200223
function View() {
201224
const param = useStrictGetSearchParam()
@@ -206,6 +229,7 @@ function View() {
206229
<div>
207230
<TopNav
208231
repo={param('repo')}
232+
page="file"
209233
filter={param('filter')} />
210234

211235
<Breadcrumbs
@@ -237,15 +261,9 @@ function DiffView() {
237261
<div>
238262
<TopNav
239263
repo={param('repo')}
264+
page="diff"
240265
filter={param('filter')} />
241266

242-
<Breadcrumbs
243-
repo={param('repo')}
244-
path={param('path')}
245-
filter={param('filter')}
246-
rev={param('rev')}
247-
navigateCallback={useNavigateCallback()} />
248-
249267
<DiffViewer
250268
repo={param('repo')}
251269
path={param('path')}
@@ -266,6 +284,7 @@ function App() {
266284
<Route path='/select' element={<Select />} />
267285
<Route path='/browse' element={<Browse />} />
268286
<Route path='/history' element={<History />} />
287+
<Route path='/changes' element={<Changes />} />
269288
<Route path='/view' element={<View />} />
270289
<Route path='/diff' element={<DiffView />} />
271290
<Route path='/change' element={<ChangeView />} />

‎josh-ui/src/ChangeViewer.tsx‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -82,23 +82,22 @@ export class ChangeViewer extends React.Component<ChangeViewProps, State> {
8282
}
8383

8484
return values.map((entry) => {
85-
const className = `file-browser-list-entry file-browser-list-entry-${classNameSuffix}`
85+
let className = `file-browser-list-entry file-browser-list-entry-${classNameSuffix}`
8686
let path = "";
87-
let prefix = "M";
8887
if (!entry.from) {
89-
prefix = "A";
88+
className = className.concat(" added");
9089
path = entry.to.path;
9190
}
9291
else if (!entry.to) {
93-
prefix = "D";
92+
className = className.concat(" deleted");
9493
path = entry.from.path;
9594
}
9695
else {
9796
path = entry.from.path;
9897
}
9998

10099
return <div className={className} key={path} onClick={navigate.bind(this,path)}>
101-
<span>{prefix}</span>{path}
100+
{path}
102101
</div>
103102
})
104103
}
@@ -108,9 +107,9 @@ export class ChangeViewer extends React.Component<ChangeViewProps, State> {
108107
return <div className={'file-browser-loading'}>Loading...</div>
109108
} else {
110109
return <div>
111-
<div>
110+
<pre className="commit-message">
112111
{this.state.summary}
113-
</div>
112+
</pre>
114113
<div className={'file-browser-list'}>
115114
{this.renderList(this.state.files, NavigateTargetType.Diff)}
116115
</div>

0 commit comments

Comments
 (0)