filecoin-project/slate
1
1
Fork 0
mirror of https://github.com/filecoin-project/slate.git synced 2024-11-30 12:26:00 +03:00
Code Issues Packages Projects Releases Wiki Activity

feat(FontFrame/FixedControls): move font crontols to the bottom of the screen

Browse Source
This commit is contained in:
Aminejv 2021-10-27 16:11:24 +01:00
parent 9a58c92d40
commit 22427c160f
2 changed files with 44 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
components/core/FontFrame/Settings/FixedControls.js
View File

@ -53,7 +53,8 @@ const CONTROLS_DARKMODE_WRAPPER = (theme) => css`
} }
`; `;
const CONTROLS_SETTINGS_BUTTON = (isActive) => (theme) => css` const CONTROLS_SETTINGS_BUTTON = (isActive) => (theme) =>
css`
padding: 8px 12px; padding: 8px 12px;
margin: 0; margin: 0;
border-radius: 4px; border-radius: 4px;
@ -73,14 +74,22 @@ const CONTROLS_SETTINGS_BUTTON = (isActive) => (theme) => css`
stroke: ${theme.fontPreviewDarkMode ? theme.system.white : theme.system.black}; stroke: ${theme.fontPreviewDarkMode ? theme.system.white : theme.system.black};
` `
: css` : css`
stroke: ${theme.fontPreviewDarkMode ? theme.system.grayLight2 : theme.semantic.textGray}; stroke: ${theme.fontPreviewDarkMode
? theme.system.grayLight2
: theme.semantic.textGray};
`} `}
} }
`; `;
export const FixedControls = ({ onDarkMode, onLightMode, onToggleSettings, isSettingsVisible }) => { export const FixedControls = ({
onDarkMode,
onLightMode,
onToggleSettings,
isSettingsVisible,
...props
}) => {
return ( return (
<div css={CONTROLS_STYLES_WRAPPER}> <div css={CONTROLS_STYLES_WRAPPER} {...props}>
<div> <div>
<button css={CONTROLS_SETTINGS_BUTTON(isSettingsVisible)} onClick={onToggleSettings}> <button css={CONTROLS_SETTINGS_BUTTON(isSettingsVisible)} onClick={onToggleSettings}>
<SVG.Sliders height={16} width={16} /> <SVG.Sliders height={16} width={16} />

19
components/core/FontFrame/index.js
View File

@ -77,15 +77,6 @@ export default function FontFrame({ cid, fallback, ...props }) {
return ( return (
<div css={GET_STYLES_CONTAINER} style={{ fontFamily: fontName }} {...props}> <div css={GET_STYLES_CONTAINER} style={{ fontFamily: fontName }} {...props}>
<div css={STYLES_MOBILE_HIDDEN}>
<FixedControls
onDarkMode={setDarkMode}
onLightMode={setLightMode}
onToggleSettings={toggleSettings}
isDarkMode={currentState.context.darkmode}
isSettingsVisible={currentState.context.showSettings}
/>
</div>
<div style={{ position: "relative", flexGrow: 1, overflowY: "auto" }}> <div style={{ position: "relative", flexGrow: 1, overflowY: "auto" }}>
{isFontLoading && <FontLoader />} {isFontLoading && <FontLoader />}
<FontView <FontView
@ -100,6 +91,16 @@ export default function FontFrame({ cid, fallback, ...props }) {
updateCustomView={updateCustomView} updateCustomView={updateCustomView}
/> />
</div> </div>
<div css={STYLES_MOBILE_HIDDEN}>
<FixedControls
style={{ marginBottom: 12 }}
onDarkMode={setDarkMode}
onLightMode={setLightMode}
onToggleSettings={toggleSettings}
isDarkMode={currentState.context.darkmode}
isSettingsVisible={currentState.context.showSettings}
/>
</div>
<div css={STYLES_MOBILE_HIDDEN}> <div css={STYLES_MOBILE_HIDDEN}>
{currentState.context.showSettings && ( {currentState.context.showSettings && (
<Controls <Controls