Skip to content

Commit 23bec9d

Browse files
1aurend1aurend
committed
[F] Add header preview component
1 parent cda2b8f commit 23bec9d

File tree

3 files changed

+222
-89
lines changed

3 files changed

+222
-89
lines changed

‎client/src/backend/components/theme/HeaderPreview/index.js‎

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
import { useFromStore } from "hooks";
2+
import { useTranslation } from "react-i18next";
3+
import SetCSSProperty from "global/components/utility/SetCSSProperty";
4+
import PressLogo from "global/components/PressLogo";
5+
import HeaderLogo from "global/components/atomic/HeaderLogo";
6+
import IconComposer from "global/components/utility/IconComposer";
7+
8+
export default function HeaderPreview({
9+
accentColor,
10+
foregroundColor,
11+
backgroundColor,
12+
activeColor
13+
}) {
14+
const { t } = useTranslation();
15+
const settings = useFromStore({ requestKey: "settings", action: "select" });
16+
const offset = settings.attributes.theme.headerOffset;
17+
const navStyle = offset
18+
? { position: "relative", top: parseInt(offset, 10) }
19+
: {};
20+
21+
return (
22+
<div
23+
className="library-header library-header--light"
24+
style={{
25+
"--color-accent-primary": accentColor,
26+
"--hover-color": accentColor,
27+
"--color-header-background": backgroundColor,
28+
"--color-header-foreground": foregroundColor,
29+
"--color-header-foreground-active": activeColor
30+
}}
31+
>
32+
<SetCSSProperty
33+
measurement="height"
34+
propertyName="--library-header-height"
35+
>
36+
<div className="library-header__inner-preview">
37+
<HeaderLogo as="span">
38+
<>
39+
<span className="screen-reader-text">
40+
{t("navigation.return_home")}
41+
</span>
42+
<PressLogo
43+
url={settings.attributes.pressLogoStyles.medium}
44+
styles={settings.attributes.theme.logoStyles}
45+
aria-hidden="true"
46+
/>
47+
</>
48+
</HeaderLogo>
49+
<nav
50+
className="site-nav show-82"
51+
aria-label={t("navigation.primary")}
52+
style={navStyle}
53+
>
54+
<ul className="site-nav__list">
55+
<li className="site-nav__item">
56+
<a href="#" className="site-nav__link site-nav__link--active">
57+
Home
58+
</a>
59+
</li>
60+
<li className="site-nav__item">
61+
<a href="#" className="site-nav__link">
62+
Projects
63+
</a>
64+
</li>
65+
<li className="site-nav__item">
66+
<a href="#" className="site-nav__link">
67+
Journals
68+
</a>
69+
</li>
70+
<li className="site-nav__item">
71+
<a href="#" className="site-nav__link">
72+
Reading Groups
73+
</a>
74+
</li>
75+
</ul>
76+
</nav>
77+
<nav className="breadcrumb-list hide-82">
78+
<span>
79+
<a className="breadcrumb-list__link" href="#">
80+
Home
81+
</a>
82+
</span>
83+
</nav>
84+
<a href="#" className="mobile-nav-toggle hide-82">
85+
<IconComposer
86+
icon="menu32"
87+
size="default"
88+
className="mobile-nav-trigger__icon"
89+
/>
90+
</a>
91+
</div>
92+
</SetCSSProperty>
93+
</div>
94+
);
95+
}

‎client/src/backend/containers/settings/Theme.js‎

Lines changed: 114 additions & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import FormContainer from "global/containers/form";
88
import { settingsAPI, requests } from "api";
99
import { select } from "utils/entityUtils";
1010
import PageHeader from "backend/components/layout/PageHeader";
11+
import HeaderPreview from "backend/components/theme/HeaderPreview";
1112

1213
export class SettingsThemeContainer extends PureComponent {
1314
static mapStateToProps = state => {
@@ -25,6 +26,7 @@ export class SettingsThemeContainer extends PureComponent {
2526
render() {
2627
if (!this.props.settings) return null;
2728
const t = this.props.t;
29+
2830
return (
2931
<div>
3032
<PageHeader title={t("settings.theme.header")} type="settings" />
@@ -36,95 +38,118 @@ export class SettingsThemeContainer extends PureComponent {
3638
create={settingsAPI.update}
3739
className="form-secondary"
3840
>
39-
<Form.FieldGroup label={t("settings.theme.branding_header")}>
40-
<Form.TextInput
41-
label={t("settings.theme.url_label")}
42-
name="attributes[general][pressSite]"
43-
placeholder={t("settings.theme.url_placeholder")}
44-
wide
45-
instructions={t("settings.theme.url_instructions")}
46-
/>
47-
<Form.Upload
48-
accepts="images"
49-
label={t("settings.theme.header_logo_label")}
50-
readFrom="attributes[pressLogoStyles][small]"
51-
name="attributes[pressLogo]"
52-
remove="attributes[removePressLogo]"
53-
instructions={t("settings.theme.header_logo_instructions")}
54-
/>
55-
<Form.Upload
56-
accepts="images"
57-
label={t("settings.theme.mobile_logo_label")}
58-
readFrom="attributes[pressLogoMobileStyles][small]"
59-
name="attributes[pressLogoMobile]"
60-
remove="attributes[removePressLogoMobile]"
61-
instructions={t("settings.theme.mobile_logo_instructions")}
62-
/>
63-
<Form.Upload
64-
accepts="images"
65-
label={t("settings.theme.footer_logo_label")}
66-
readFrom="attributes[pressLogoFooterStyles][small]"
67-
name="attributes[pressLogoFooter]"
68-
remove="attributes[removePressLogoFooter]"
69-
instructions={t("settings.theme.footer_logo_instructions")}
70-
/>
71-
<Form.Upload
72-
accepts="images"
73-
label={t("settings.theme.favicon_label")}
74-
readFrom="attributes[faviconStyles][original]"
75-
name="attributes[favicon]"
76-
remove="attributes[removeFavicon]"
77-
instructions={t("settings.theme.favicon_instructions")}
78-
/>
79-
<Form.TextInput
80-
label={t("settings.theme.logo_styles_label")}
81-
name="attributes[theme][logoStyles]"
82-
placeholder={t("settings.theme.logo_styles_placeholder")}
83-
instructions={t("settings.theme.logo_styles_instructions")}
84-
/>
85-
<Form.TextInput
86-
label={t("settings.theme.offset_label")}
87-
name="attributes[theme][headerOffset]"
88-
placeholder="0"
89-
instructions={t("settings.theme.offset_instructions")}
90-
/>
91-
</Form.FieldGroup>
92-
<Form.FieldGroup label={t("settings.theme.colors_header")}>
93-
<Form.ColorInput
94-
label={t("settings.theme.accent_color_label")}
95-
name="attributes[theme][accentColor]"
96-
defaultValue="#52e3ac"
97-
instructions={t("settings.theme.accent_color_instructions")}
98-
/>
99-
<Form.ColorInput
100-
label={t("settings.theme.foreground_color_label")}
101-
name="attributes[theme][headerForegroundColor]"
102-
defaultValue="#ffffff"
103-
instructions={t("settings.theme.foreground_color_instructions")}
104-
/>
105-
<Form.ColorInput
106-
label={t("settings.theme.active_foreground_color_label")}
107-
name="attributes[theme][headerForegroundActiveColor]"
108-
defaultValue="#363636"
109-
instructions={t(
110-
"settings.theme.active_foreground_color_instructions"
111-
)}
112-
/>
113-
<Form.ColorInput
114-
label={t("settings.theme.background_color_label")}
115-
name="attributes[theme][headerBackgroundColor]"
116-
defaultValue="#696969"
117-
instructions={t("settings.theme.background_color_instructions")}
118-
/>
119-
</Form.FieldGroup>
120-
<Form.FieldGroup label={t("settings.theme.typography_header")}>
121-
<Form.TextInput
122-
label={t("settings.theme.typekit_label")}
123-
name="attributes[theme][typekitId]"
124-
placeholder={t("settings.theme.typekit_placeholder")}
125-
/>
126-
</Form.FieldGroup>
127-
<Form.Save text={t("settings.save")} />
41+
{getValue => (
42+
<>
43+
<Form.FieldGroup label={t("settings.theme.branding_header")}>
44+
<Form.TextInput
45+
label={t("settings.theme.url_label")}
46+
name="attributes[general][pressSite]"
47+
placeholder={t("settings.theme.url_placeholder")}
48+
wide
49+
instructions={t("settings.theme.url_instructions")}
50+
/>
51+
<Form.Upload
52+
accepts="images"
53+
label={t("settings.theme.header_logo_label")}
54+
readFrom="attributes[pressLogoStyles][small]"
55+
name="attributes[pressLogo]"
56+
remove="attributes[removePressLogo]"
57+
instructions={t("settings.theme.header_logo_instructions")}
58+
/>
59+
<Form.Upload
60+
accepts="images"
61+
label={t("settings.theme.mobile_logo_label")}
62+
readFrom="attributes[pressLogoMobileStyles][small]"
63+
name="attributes[pressLogoMobile]"
64+
remove="attributes[removePressLogoMobile]"
65+
instructions={t("settings.theme.mobile_logo_instructions")}
66+
/>
67+
<Form.Upload
68+
accepts="images"
69+
label={t("settings.theme.footer_logo_label")}
70+
readFrom="attributes[pressLogoFooterStyles][small]"
71+
name="attributes[pressLogoFooter]"
72+
remove="attributes[removePressLogoFooter]"
73+
instructions={t("settings.theme.footer_logo_instructions")}
74+
/>
75+
<Form.Upload
76+
accepts="images"
77+
label={t("settings.theme.favicon_label")}
78+
readFrom="attributes[faviconStyles][original]"
79+
name="attributes[favicon]"
80+
remove="attributes[removeFavicon]"
81+
instructions={t("settings.theme.favicon_instructions")}
82+
/>
83+
<Form.TextInput
84+
label={t("settings.theme.logo_styles_label")}
85+
name="attributes[theme][logoStyles]"
86+
placeholder={t("settings.theme.logo_styles_placeholder")}
87+
instructions={t("settings.theme.logo_styles_instructions")}
88+
/>
89+
<Form.TextInput
90+
label={t("settings.theme.offset_label")}
91+
name="attributes[theme][headerOffset]"
92+
placeholder="0"
93+
instructions={t("settings.theme.offset_instructions")}
94+
/>
95+
</Form.FieldGroup>
96+
<Form.FieldGroup label={t("settings.theme.colors_header")}>
97+
<Form.ColorInput
98+
label={t("settings.theme.accent_color_label")}
99+
name="attributes[theme][accentColor]"
100+
defaultValue="#52e3ac"
101+
instructions={t("settings.theme.accent_color_instructions")}
102+
/>
103+
<Form.ColorInput
104+
label={t("settings.theme.foreground_color_label")}
105+
name="attributes[theme][headerForegroundColor]"
106+
defaultValue="#ffffff"
107+
instructions={t(
108+
"settings.theme.foreground_color_instructions"
109+
)}
110+
/>
111+
<Form.ColorInput
112+
label={t("settings.theme.active_foreground_color_label")}
113+
name="attributes[theme][headerForegroundActiveColor]"
114+
defaultValue="#363636"
115+
instructions={t(
116+
"settings.theme.active_foreground_color_instructions"
117+
)}
118+
/>
119+
<Form.ColorInput
120+
label={t("settings.theme.background_color_label")}
121+
name="attributes[theme][headerBackgroundColor]"
122+
defaultValue="#696969"
123+
instructions={t(
124+
"settings.theme.background_color_instructions"
125+
)}
126+
/>
127+
<Form.FieldWrapper>
128+
<Form.Label label="Header Preview" />
129+
<HeaderPreview
130+
accentColor={getValue("attributes[theme][accentColor]")}
131+
foregroundColor={getValue(
132+
"attributes[theme][headerForegroundColor]"
133+
)}
134+
backgroundColor={getValue(
135+
"attributes[theme][headerBackgroundColor]"
136+
)}
137+
activeColor={getValue(
138+
"attributes[theme][headerForegroundActiveColor]"
139+
)}
140+
/>
141+
</Form.FieldWrapper>
142+
</Form.FieldGroup>
143+
<Form.FieldGroup label={t("settings.theme.typography_header")}>
144+
<Form.TextInput
145+
label={t("settings.theme.typekit_label")}
146+
name="attributes[theme][typekitId]"
147+
placeholder={t("settings.theme.typekit_placeholder")}
148+
/>
149+
</Form.FieldGroup>
150+
<Form.Save text={t("settings.save")} />
151+
</>
152+
)}
128153
</FormContainer.Form>
129154
</Layout.BackendPanel>
130155
</div>

‎client/src/theme/styles/components/frontend/layout/header/libraryHeader.js‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,19 @@ export default `
3232
}
3333
}
3434
35+
&__inner-preview {
36+
${headerContainerPrimary}
37+
display: grid;
38+
grid-template: "logo breadcrumbs hamburger" / 1fr auto 1fr;
39+
width: 100%;
40+
height: 100%;
41+
42+
${respond(
43+
`grid-template: 'logo site-nav . user-nav' / max-content max-content 1fr max-content;`,
44+
82
45+
)}
46+
}
47+
3548
.header-logo,
3649
.breadcrumb-list,
3750
.mobile-nav-toggle {

0 commit comments

Comments
 (0)