filecoin-project/slate
1
1
Fork 0
mirror of https://github.com/filecoin-project/slate.git synced 2024-12-24 17:44:50 +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

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

@ -53,34 +53,43 @@ const CONTROLS_DARKMODE_WRAPPER = (theme) => css`
}
`;
const CONTROLS_SETTINGS_BUTTON = (isActive) => (theme) => css`
padding: 8px 12px;
margin: 0;
border-radius: 4px;
background: none;
border: 1px solid
${theme.fontPreviewDarkMode ? theme.semantic.textGrayDark : theme.system.grayLight5};
cursor: pointer;
${isActive &&
const CONTROLS_SETTINGS_BUTTON = (isActive) => (theme) =>
css`
background-color: ${theme.fontPreviewDarkMode
? theme.system.grayDark4
: theme.system.grayLight5};
`};
path {
${isActive
? css`
stroke: ${theme.fontPreviewDarkMode ? theme.system.white : theme.system.black};
`
: css`
stroke: ${theme.fontPreviewDarkMode ? theme.system.grayLight2 : theme.semantic.textGray};
`}
}
`;
padding: 8px 12px;
margin: 0;
border-radius: 4px;
background: none;
border: 1px solid
${theme.fontPreviewDarkMode ? theme.semantic.textGrayDark : theme.system.grayLight5};
cursor: pointer;
${isActive &&
css`
background-color: ${theme.fontPreviewDarkMode
? theme.system.grayDark4
: theme.system.grayLight5};
`};
path {
${isActive
? css`
stroke: ${theme.fontPreviewDarkMode ? theme.system.white : theme.system.black};
`
: css`
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 (
<div css={CONTROLS_STYLES_WRAPPER}>
<div css={CONTROLS_STYLES_WRAPPER} {...props}>
<div>
<button css={CONTROLS_SETTINGS_BUTTON(isSettingsVisible)} onClick={onToggleSettings}>
<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 (
<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" }}>
{isFontLoading && <FontLoader />}
<FontView
@ -100,6 +91,16 @@ export default function FontFrame({ cid, fallback, ...props }) {
updateCustomView={updateCustomView}
/>
</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}>
{currentState.context.showSettings && (
<Controls