Skip to content

Commit 5d47701

Browse files
jeremydwjeremydw
committed
Add tabs to sitepage
1 parent c193b70 commit 5d47701

File tree

4 files changed

+80
-54
lines changed

4 files changed

+80
-54
lines changed

‎src/webui/pages/sitepage.tsx‎

Lines changed: 43 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -10,13 +10,15 @@ import {rpc} from '../utils/rpc';
1010
interface SitePageProps {
1111
path: string;
1212
siteId?: string;
13+
tab?: string;
1314
}
1415

1516
interface SitePageState {
1617
currentPath: string;
1718
siteId: string;
1819
manifests: Array<any>;
1920
loading: boolean;
21+
tab?: string;
2022
}
2123

2224
export class SitePage extends Page<SitePageProps, SitePageState> {
@@ -27,6 +29,7 @@ export class SitePage extends Page<SitePageProps, SitePageState> {
2729
siteId: props.siteId,
2830
loading: false,
2931
manifests: [],
32+
tab: props.tab,
3033
};
3134
}
3235

@@ -47,6 +50,10 @@ export class SitePage extends Page<SitePageProps, SitePageState> {
4750
}
4851
}
4952

53+
async componentWillReceiveProps(props: SitePageProps) {
54+
this.setState({tab: props.tab});
55+
}
56+
5057
filterManifests(manifests: Array<any>) {
5158
return manifests.sort(
5259
(a, b) => new Date(b.modified).getTime() - new Date(a.modified).getTime()
@@ -57,10 +64,44 @@ export class SitePage extends Page<SitePageProps, SitePageState> {
5764
return <Loading />;
5865
}
5966

67+
renderTabSet() {
68+
return (
69+
<div class="BuildPage__tabset">
70+
<div class="BuildPage__tabset__bar">
71+
<Link
72+
className={`BuildPage__tabset__bar__tab ${
73+
this.state.tab === undefined
74+
? 'BuildPage__tabset__bar__tab--active'
75+
: ''
76+
}`}
77+
href={this.state.currentPath}
78+
>
79+
<span class="material-icons-outlined">link</span>
80+
Staging links
81+
</Link>
82+
<Link
83+
className={`BuildPage__tabset__bar__tab ${
84+
this.state.tab === 'history'
85+
? 'BuildPage__tabset__bar__tab--active'
86+
: ''
87+
}`}
88+
href={`${this.state.currentPath}?tab=history`}
89+
>
90+
<span class="material-icons-outlined">history</span>
91+
Builds
92+
</Link>
93+
</div>
94+
<div>
95+
{this.state.tab === undefined ? this.renderManifestTable() : ''}
96+
{this.state.tab === 'history' ? this.renderManifestTable() : ''}
97+
</div>
98+
</div>
99+
);
100+
}
101+
60102
renderManifestTable() {
61103
return this.state.manifests && this.state.manifests.length ? (
62104
<div class="SitePage__content__table">
63-
<div class="SitePage__content__table__title">Staging links</div>
64105
<table>
65106
<thead>
66107
<tr>
@@ -138,38 +179,7 @@ export class SitePage extends Page<SitePageProps, SitePageState> {
138179
</Link>
139180
</div>
140181
<div class="SitePage__content">
141-
{/*
142-
<div class="SitePage__content__table">
143-
<div class="SitePage__content__table__title">
144-
Scheduled launches
145-
</div>
146-
<table>
147-
<thead>
148-
<tr>
149-
<td>TTL</td>
150-
<td>Commit</td>
151-
<td>Modified</td>
152-
<td>Staging Link</td>
153-
</tr>
154-
</thead>
155-
<tbody>
156-
<tr>
157-
<td>Master</td>
158-
<td>
159-
<Link href="/fileset/sites/default/abc">abc</Link>
160-
</td>
161-
<td>2020/10/19 05:12</td>
162-
<td>
163-
<a href="#">Link</a>
164-
</td>
165-
</tr>
166-
</tbody>
167-
</table>
168-
</div>
169-
*/}
170-
{this.state.loading
171-
? this.renderLoading()
172-
: this.renderManifestTable()}
182+
{this.state.loading ? this.renderLoading() : this.renderTabSet()}
173183
</div>
174184
</div>
175185
);

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

Lines changed: 3 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
@import ../utils/spacing
2+
@import ../utils/tabset
23
@import ../utils/type
34

45
.BuildPage__title
@@ -49,25 +50,7 @@
4950
margin-right: 5px
5051

5152
.BuildPage__tabset__bar
52-
display: flex
53-
border-bottom: 1px solid #EAECEF
54-
margin-bottom: $spacing-40
53+
+tabset-bar
5554

5655
.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
56+
+tabset-bar-tab

‎src/webui/sass/pages/_sitepage.sass‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
@import ../utils/spacing
2+
@import ../utils/tabset
23
@import ../utils/type
34

45
.SitePage__title
@@ -35,4 +36,10 @@
3536
margin-bottom: $spacing-20
3637

3738
.SitePage__content__empty__body + .SitePage__content__empty__buttons
38-
margin-top: $spacing-20
39+
margin-top: $spacing-20
40+
41+
.SitePage__tabset__bar
42+
+tabset-bar
43+
44+
.SitePage__tabset__bar__tab
45+
+tabset-bar-tab

‎src/webui/sass/utils/_tabset.sass‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
@import ../utils/color
2+
@import ../utils/spacing
3+
4+
=tabset-bar
5+
display: flex
6+
border-bottom: 1px solid #EAECEF
7+
margin-bottom: $spacing-40
8+
9+
=tabset-bar-tab
10+
color: inherit
11+
padding: $spacing-15 $spacing-20
12+
border-bottom: 3px solid transparent
13+
font-weight: 700
14+
15+
.material-icons-outlined
16+
margin-right: 7px
17+
color: #969DA4
18+
19+
&--active
20+
border-bottom-color: $color-primary
21+
22+
.material-icons-outlined
23+
color: #25292E
24+
25+
&:hover
26+
border-bottom-color: $color-primary-hover

0 commit comments

Comments
 (0)