Skip to content

Commit a8202c2

Browse files
MoOxMoOx
committed
Website: highlight current page in sidebar & update some colors
1 parent d8103a4 commit a8202c2

5 files changed

Lines changed: 55 additions & 36 deletions

File tree

‎website/src/components/PageContent.re‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -31,20 +31,20 @@ let styles =
3131
~marginLeft=auto,
3232
~borderWidth=1.,
3333
~borderStyle=`solid,
34-
~borderColor=Consts.Colors.accent,
34+
~borderColor=Predefined.Colors.tealBlue,
3535
~borderRadius=4.,
3636
(),
3737
),
3838
"editLinkText":
39-
style(~color=Consts.Colors.accent, ~alignItems=`center, ()),
39+
style(~color=Predefined.Colors.tealBlue, ~alignItems=`center, ()),
4040
"officialDocLink":
4141
style(
4242
~display=`flex,
4343
~flexDirection=`row,
4444
~fontSize=14.,
4545
~fontWeight=`_300,
4646
~alignItems=`center,
47-
~color=Consts.Colors.accent,
47+
~color=Predefined.Colors.blue,
4848
(),
4949
),
5050
"wip":
@@ -57,7 +57,7 @@ let styles =
5757
(),
5858
),
5959
"wipText": style(~fontSize=16., ~lineHeight=16. *. 1.5, ()),
60-
"wipEditLink": style(~color=Consts.Colors.accent, ()),
60+
"wipEditLink": style(~color=Predefined.Colors.blue, ()),
6161
},
6262
);
6363

@@ -100,7 +100,7 @@ let make = (~pageData) => {
100100
<SVGExternalLink
101101
width={14.->ReactFromSvg.Size.pt}
102102
height={14.->ReactFromSvg.Size.pt}
103-
fill=Consts.Colors.accent
103+
fill=Predefined.Colors.blue
104104
/>
105105
{| Official documentation |}->React.string
106106
</TextLink>

‎website/src/components/ScreenBlogIndex.re‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ let make = (~docsIndex, ~blogIndex, ~currentLocation) => {
4343
)}
4444
->React.array}
4545
</ContentContainer>
46-
<SidebarDocs docsIndex />
46+
<SidebarDocs docsIndex currentLocation />
4747
</Container>
4848
</>;
4949
};

‎website/src/components/ScreenHomepage.re‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -92,7 +92,7 @@ let make = (~currentLocation) =>
9292
<ViewLink
9393
href={Consts.baseUrl ++ "/en/docs/"}
9494
style=Style.(
95-
style(~borderRadius=6., ~backgroundColor=Consts.Colors.accent, ())
95+
style(~borderRadius=6., ~backgroundColor=Predefined.Colors.blue, ())
9696
)>
9797
<SpacedView horizontal=SpacedView.L>
9898
<Text

‎website/src/components/ScreenPage.re‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ let make =
4242
)}
4343
{switch (mode) {
4444
| `blog => <SidebarBlog blogIndex />
45-
| _ => <SidebarDocs docsIndex />
45+
| _ => <SidebarDocs docsIndex currentLocation />
4646
}}
4747
</Container>
4848
</>;

‎website/src/components/SidebarDocs.re‎

Lines changed: 47 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -5,24 +5,21 @@ open ReactMultiversal;
55
let styles =
66
StyleSheet.create(
77
Style.{
8-
"container": style(~height=100.->pct, ~overflow=`scroll, ()),
9-
"title": style(~fontSize=16., ~fontWeight=`_600, ~color="#333", ()),
10-
"link":
11-
style(
12-
~fontSize=14.,
13-
~fontWeight=`_400,
14-
~color="#555",
15-
~paddingVertical=(Spacer.space /. 4.)->dp,
16-
(),
17-
),
18-
"notlink":
19-
style(
20-
~fontSize=14.,
21-
~fontWeight=`_400,
22-
~color="#ddd",
23-
~paddingVertical=(Spacer.space /. 4.)->dp,
8+
"container": viewStyle(~height=100.->pct, ~overflow=`scroll, ()),
9+
"title": textStyle(~fontSize=16., ~fontWeight=`_600, ~color="#333", ()),
10+
"link": viewStyle(),
11+
"linkActive":
12+
viewStyle(
13+
~shadowColor=Predefined.Colors.blue,
14+
~shadowOffset=offset(~width=-3., ~height=0.),
15+
~shadowOpacity=1.,
16+
~shadowRadius=0.,
2417
(),
2518
),
19+
"linkText":
20+
textStyle(~fontSize=14., ~fontWeight=`_400, ~color="#555", ()),
21+
"linkTextActive": textStyle(~color=Predefined.Colors.blue, ()),
22+
"notlinkText": textStyle(~color="#ddd", ()),
2623
},
2724
);
2825

@@ -47,7 +44,7 @@ let makeSections =
4744
let sections = makeSections(Consts.sections);
4845

4946
[@react.component]
50-
let make = (~docsIndex) => {
47+
let make = (~docsIndex, ~currentLocation) => {
5148
<div
5249
className="stick"
5350
style={ReactDOMRe.Style.make(
@@ -108,14 +105,18 @@ let make = (~docsIndex) => {
108105
++ ")",
109106
(),
110107
)}>
111-
<SpacedView vertical=SpacedView.M horizontal=SpacedView.None>
108+
<SpacedView vertical=M horizontal=None>
112109
<Text style=styles##title>
113110
{section.title->String.uppercase->React.string}
114111
</Text>
115112
</SpacedView>
116113
</div>
117114
{{section.data
118-
->List.map(((title, link)) =>
115+
->List.map(((title, link)) => {
116+
let fulllink = "en/" ++ link;
117+
let isActive =
118+
currentLocation##pathname
119+
|> Js.String.startsWith(fulllink ++ "index.html");
119120
!(link |> Js.String.startsWith("docs/apis/"))
120121
&& !(link |> Js.String.startsWith("docs/components/"))
121122
|| (
@@ -127,16 +128,34 @@ let make = (~docsIndex) => {
127128
&& docsIndex->Array.some(path =>
128129
link == "docs/" ++ path ++ "/"
129130
)
130-
? <TextLink
131+
? <ViewLink
131132
key=title
132-
href={Consts.baseUrl ++ "/en/" ++ link}
133-
style=styles##link>
134-
title->React.string
135-
</TextLink>
136-
: <Text key=title style=styles##notlink>
137-
title->React.string
138-
</Text>
139-
)}
133+
href={Consts.baseUrl ++ "/" ++ fulllink}
134+
style={Style.arrayOption([|
135+
Some(styles##link),
136+
isActive ? Some(styles##linkActive) : None,
137+
|])}>
138+
<SpacedView horizontal=XS vertical=XXS>
139+
<Text
140+
style={Style.arrayOption([|
141+
Some(styles##linkText),
142+
isActive ? Some(styles##linkTextActive) : None,
143+
|])}>
144+
title->React.string
145+
</Text>
146+
</SpacedView>
147+
</ViewLink>
148+
: <SpacedView horizontal=XS vertical=XXS>
149+
<Text
150+
key=title
151+
style={Style.array([|
152+
styles##link,
153+
styles##notlinkText,
154+
|])}>
155+
title->React.string
156+
</Text>
157+
</SpacedView>;
158+
})}
140159
->List.toArray
141160
->React.array}
142161
<Spacer size=Spacer.S />

0 commit comments

Comments
 (0)