Skip to content

Commit 98b7ed5

Browse files
jeremydwjeremydw
committed
Add tabs and ui refinements to build page
1 parent 2fd60a2 commit 98b7ed5

File tree

8 files changed

+123
-11
lines changed

8 files changed

+123
-11
lines changed

‎src/static/webui.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
<link rel="shortcut icon" href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDIuMDEgMTI0LjY5Ij48cGF0aCBkPSJNMTE0LjkxLDQ2LjM4YTUuNjYsNS42NiwwLDAsMC01LjE0LTMuMjhINzguNTRsMjAuOS0zMi44NWE1LjY2LDUuNjYsMCwwLDAtNC43OC04LjcxaC0zNGE1LjY3LDUuNjcsMCwwLDAtNC45MSwyLjgzTDE0LjE5LDc2LjE2YTUuNjYsNS42NiwwLDAsMCw0LjksOC41SDUzLjI0bC05LjM5LDM0LjQxYTUuNjcsNS42NywwLDAsMCwyLjg0LDYuNTEsNS41OSw1LjU5LDAsMCwwLDIuNjMuNjUsNS42OSw1LjY5LDAsMCwwLDQuMzQtMmwxMC43Ny0xMi44LDQ5LjY4LTU5QTUuNjYsNS42NiwwLDAsMCwxMTQuOTEsNDYuMzhaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTMuNDMgLTEuNTQpIiBzdHlsZT0iZmlsbDojZjJkMjNkIi8+PHBhdGggZD0iTTQ2LjY5LDEyNS41OGE1LjU5LDUuNTksMCwwLDAsMi42My42NSw1LjY5LDUuNjksMCwwLDAsNC4zNC0ybDEwLjc3LTEyLjhWMS41NEg2MC42NmE1LjY3LDUuNjcsMCwwLDAtNC45MSwyLjgzTDE0LjE5LDc2LjE2YTUuNjYsNS42NiwwLDAsMCw0LjksOC41SDUzLjI0bC05LjM5LDM0LjQxQTUuNjcsNS42NywwLDAsMCw0Ni42OSwxMjUuNThaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTMuNDMgLTEuNTQpIiBzdHlsZT0iZmlsbDojZWViZjAwIi8+PC9zdmc+">
77
<link rel="preconnect" href="https://fonts.gstatic.com">
88
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400;600;700&display=swap" rel="stylesheet">
9+
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined" rel="stylesheet">
910
<link rel="stylesheet" href="/fileset/static/webui.min.css">
1011
</head>
1112
<body>

‎src/webui/components/topbar.tsx‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,21 @@ export class TopBar extends Component<any, TopBarState> {
3232
<div class="TopBar__inner">
3333
<div class="TopBar__inner__logo">
3434
<Link class="TopBar__inner__logo__link" href="/fileset/">
35+
<svg
36+
xmlns="http://www.w3.org/2000/svg"
37+
viewBox="0 0 102.01 124.69"
38+
>
39+
<path
40+
d="M114.91,46.38a5.66,5.66,0,0,0-5.14-3.28H78.54l20.9-32.85a5.66,5.66,0,0,0-4.78-8.71h-34a5.67,5.67,0,0,0-4.91,2.83L14.19,76.16a5.66,5.66,0,0,0,4.9,8.5H53.24l-9.39,34.41a5.67,5.67,0,0,0,2.84,6.51,5.59,5.59,0,0,0,2.63.65,5.69,5.69,0,0,0,4.34-2l10.77-12.8,49.68-59A5.66,5.66,0,0,0,114.91,46.38Z"
41+
transform="translate(-13.43 -1.54)"
42+
style="fill:#f2d23d"
43+
/>
44+
<path
45+
d="M46.69,125.58a5.59,5.59,0,0,0,2.63.65,5.69,5.69,0,0,0,4.34-2l10.77-12.8V1.54H60.66a5.67,5.67,0,0,0-4.91,2.83L14.19,76.16a5.66,5.66,0,0,0,4.9,8.5H53.24l-9.39,34.41A5.67,5.67,0,0,0,46.69,125.58Z"
46+
transform="translate(-13.43 -1.54)"
47+
style="fill:#eebf00"
48+
/>
49+
</svg>
3550
Fileset
3651
</Link>
3752
</div>

‎src/webui/pages/buildpage.tsx‎

Lines changed: 50 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ interface BuildPageProps {
1212
path: string;
1313
siteId?: string;
1414
ref?: string;
15+
tab?: string;
1516
}
1617

1718
interface BuildPageState {
@@ -20,6 +21,7 @@ interface BuildPageState {
2021
loading: boolean;
2122
ref: string;
2223
manifest: any;
24+
tab?: string;
2325
}
2426

2527
export class BuildPage extends Page<BuildPageProps, BuildPageState> {
@@ -31,7 +33,9 @@ export class BuildPage extends Page<BuildPageProps, BuildPageState> {
3133
loading: false,
3234
ref: props.matches.ref,
3335
manifest: null,
36+
tab: props.matches.tab,
3437
};
38+
console.log(this);
3539
}
3640

3741
async componentDidMount() {
@@ -51,6 +55,10 @@ export class BuildPage extends Page<BuildPageProps, BuildPageState> {
5155
}
5256
}
5357

58+
async componentWillReceiveProps(props: BuildPageProps) {
59+
this.setState({tab: props.tab});
60+
}
61+
5462
filterPaths(paths: Record<string, string>) {
5563
return Object.keys(paths)
5664
.sort()
@@ -80,7 +88,6 @@ export class BuildPage extends Page<BuildPageProps, BuildPageState> {
8088
renderPathsTable() {
8189
return (
8290
<div class="BuildPage__content__table">
83-
<div class="BuildPage__content__table__title">Files</div>
8491
<table>
8592
<thead>
8693
<tr>
@@ -112,7 +119,6 @@ export class BuildPage extends Page<BuildPageProps, BuildPageState> {
112119
renderRedirectsTable() {
113120
return (
114121
<div class="BuildPage__content__table">
115-
<div class="BuildPage__content__table__title">Redirects</div>
116122
{this.state.manifest &&
117123
this.state.manifest.redirects &&
118124
this.state.manifest.redirects.length ? (
@@ -165,7 +171,7 @@ export class BuildPage extends Page<BuildPageProps, BuildPageState> {
165171
</div>
166172
<div class="BuildPage__content__gitData__secondary">
167173
<span class="BuildPage__content__gitData__secondary__shortSha">
168-
{this.state.manifest.ref.slice(0, 7)}
174+
<code>{this.state.manifest.ref.slice(0, 7)}</code>
169175
</span>
170176
&nbsp;on&nbsp;
171177
<span class="BuildPage__content__gitData__secondary__modified">
@@ -180,6 +186,46 @@ export class BuildPage extends Page<BuildPageProps, BuildPageState> {
180186
);
181187
}
182188

189+
renderTabSet() {
190+
return (
191+
<div class="BuildPage__tabset">
192+
<div class="BuildPage__tabset__bar">
193+
<Link
194+
className={`BuildPage__tabset__bar__tab ${
195+
this.state.tab === undefined
196+
? 'BuildPage__tabset__bar__tab--active'
197+
: ''
198+
}`}
199+
href={this.state.currentPath}
200+
>
201+
<span class="material-icons-outlined">insert_drive_file</span>
202+
Files (
203+
{this.state.manifest
204+
? Object.keys(this.state.manifest.paths).length
205+
: '0'}
206+
)
207+
</Link>
208+
<Link
209+
className={`BuildPage__tabset__bar__tab ${
210+
this.state.tab === 'redirects'
211+
? 'BuildPage__tabset__bar__tab--active'
212+
: ''
213+
}`}
214+
href={`${this.state.currentPath}?tab=redirects`}
215+
>
216+
<span class="material-icons-outlined">double_arrow</span>
217+
Redirects (
218+
{this.state.manifest ? this.state.manifest.redirects.length : '0'})
219+
</Link>
220+
</div>
221+
<div>
222+
{this.state.tab === undefined ? this.renderPathsTable() : ''}
223+
{this.state.tab === 'redirects' ? this.renderRedirectsTable() : ''}
224+
</div>
225+
</div>
226+
);
227+
}
228+
183229
render() {
184230
return (
185231
<div class="BuildPage">
@@ -199,8 +245,7 @@ export class BuildPage extends Page<BuildPageProps, BuildPageState> {
199245
</div>
200246
<div class="BuildPage__content">
201247
{this.state.loading ? '' : this.renderGitData()}
202-
{this.state.loading ? this.renderLoading() : this.renderPathsTable()}
203-
{this.state.loading ? '' : this.renderRedirectsTable()}
248+
{this.state.loading ? this.renderLoading() : this.renderTabSet()}
204249
</div>
205250
</div>
206251
);

‎src/webui/pages/sitepage.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -82,18 +82,22 @@ export class SitePage extends Page<SitePageProps, SitePageState> {
8282
{manifest.branch}
8383
</Link>
8484
</td>
85-
<td>{manifest.ref.slice(0, 7)}</td>
85+
<td>
86+
<code>{manifest.ref.slice(0, 7)}</code>
87+
</td>
8688
<td>{prettyDate(manifest.modified)}</td>
8789
<td>{Object.keys(manifest.paths).length}</td>
8890
<td>
8991
<a
92+
class="button button--tonal button--small"
9093
href={createStagingLink(
9194
window.location.href,
9295
manifest.site,
9396
manifest.branch,
9497
manifest.ref
9598
)}
9699
>
100+
<span class="material-icons-outlined">open_in_new</span>
97101
Link
98102
</a>
99103
</td>

‎src/webui/sass/_global.sass‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,10 +14,15 @@ html a
1414
font-weight: 600
1515

1616
html code
17-
font-size: 15px
18-
font-family: monospace
17+
font-size: 12px
18+
font-family: Monaco, monospace
1919
font-weight: 500
2020
padding: 1px 2px
2121
background: #F7FAFC
2222
border: 1px solid #E3E8EE
23-
border-radius: 4px
23+
border-radius: 4px
24+
25+
html .material-icons-outlined
26+
font-size: 17px
27+
margin-top: -4px
28+
vertical-align: middle

‎src/webui/sass/components/_button.sass‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -112,5 +112,18 @@ $button-primary-hover-color: $color-primary-hover
112112
&:focus
113113
background-color: transparent
114114

115+
&--small
116+
font-size: 12px
117+
font-weight: 700
118+
line-height: 14px
119+
padding: 3px 7px
120+
121+
.material-icons-outlined
122+
font-size: 13px
123+
115124
& + &
116125
margin-left: 10px
126+
127+
.material-icons-outlined
128+
margin-right: 4px
129+
margin-top: -1px

‎src/webui/sass/components/_topbar.sass‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,16 @@
1717
display: flex
1818

1919
.TopBar__inner__logo a
20+
align-items: center
2021
color: inherit
22+
display: inline-flex
23+
justify-content: center
2124
text-decoration: none
25+
26+
svg
27+
filter: grayscale(1)
28+
height: 30px
29+
margin-right: 8px
2230

2331
.TopBar__inner__user
2432
display: flex

‎src/webui/sass/pages/_buildpage.sass‎

Lines changed: 23 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -48,5 +48,26 @@
4848
font-weight: 700
4949
margin-right: 5px
5050

51-
.BuildPage__content__gitData__secondary__shortSha
52-
font-family: Monaco, monospace
51+
.BuildPage__tabset__bar
52+
display: flex
53+
border-bottom: 1px solid #EAECEF
54+
margin-bottom: $spacing-40
55+
56+
.BuildPage__tabset__bar__tab
57+
color: inherit
58+
padding: $spacing-15 $spacing-20
59+
border-bottom: 3px solid transparent
60+
font-weight: 700
61+
62+
.material-icons-outlined
63+
margin-right: 7px
64+
color: #969DA4
65+
66+
&--active
67+
border-bottom-color: $color-primary
68+
69+
.material-icons-outlined
70+
color: #25292E
71+
72+
&:hover
73+
border-bottom-color: $color-primary-hover

0 commit comments

Comments
 (0)