Skip to content

Google Fonts picker - remove need for google api #3050

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Nov 21, 2019
Merged

Google Fonts picker - remove need for google api #3050

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f7616a8
remove need for google
SaraVieira Nov 20, 2019
8bc40e5
only show 200 fonts for speed
SaraVieira Nov 20, 2019
0f0f685
Merge branch 'master' of github.com:codesandbox/codesandbox-client in…
SaraVieira Nov 21, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion packages/app/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,6 @@
"@codesandbox/executors": "^0.1.0",
"@codesandbox/template-icons": "^1.0.1",
"@emmetio/codemirror-plugin": "^0.3.5",
"@samuelmeuli/font-manager": "^1.2.0",
"@sentry/webpack-plugin": "^1.8.0",
"@styled-system/css": "^5.0.23",
"@svgr/core": "^2.4.1",
Expand Down
36 changes: 13 additions & 23 deletions packages/app/src/app/pages/Sandbox/Editor/Workspace/Dependencies/AddFont/FontPicker/List.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,56 +1,46 @@
import React, { FunctionComponent, useState, useMemo } from 'react';
import { Font } from '@samuelmeuli/font-manager';
import { List, SearchFonts, FontLI, FontFamily, Arrow } from './elements';
import { fonts } from './fonts';

type Props = {
fonts: Font[];
onSelection: (e: any) => void;
activeFontFamily: string;
expanded: boolean;
};

export const FontList: FunctionComponent<Props> = ({
fonts,
onSelection,
activeFontFamily,
expanded,
}) => {
const [searchTerm, setSearchTerm] = useState('');
const usedFonts = fonts.slice(0, 200);

const updateSearch = (e: any) => setSearchTerm(e.target.value);

const getFontId = (fontFamily: string): string =>
fontFamily.replace(/\s+/g, '-').toLowerCase();

const getFonts: Font[] = useMemo(
const getFonts: string[] = useMemo(
() =>
fonts.filter(f =>
f.family.toLowerCase().includes(searchTerm.trim().toLowerCase())
usedFonts.filter(f =>
f.toLowerCase().includes(searchTerm.trim().toLowerCase())
),
[fonts, searchTerm]
[searchTerm, usedFonts]
);
return (
<>
<Arrow />
<List expanded={expanded}>
<List>
<SearchFonts
type="text"
value={searchTerm}
onChange={updateSearch}
placeholder="Search Typefaces"
/>
{getFonts.map((font: Font) => (
{getFonts.map((font: string) => (
<FontLI
key={font.family}
onClick={onSelection}
onKeyPress={onSelection}
key={font}
onClick={() => onSelection(font)}
onKeyPress={() => onSelection(font)}
>
<FontFamily
type="button"
id={`font-button-${getFontId(font.family)}`}
active={font.family === activeFontFamily}
>
{font.family}
<FontFamily type="button" active={font === activeFontFamily}>
{font}
</FontFamily>
</FontLI>
))}
Expand Down
43 changes: 19 additions & 24 deletions ...es/app/src/app/pages/Sandbox/Editor/Workspace/Dependencies/AddFont/FontPicker/elements.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,11 @@
import styled, { css } from 'styled-components';
import styled from 'styled-components';
import Color from 'color';

const svg = props =>
Copy link
Contributor

@siddharthkp siddharthkp Nov 21, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For later: oh noes, would be cool to drop this in a file so it's discoverable?

Copy link
Contributor Author

@SaraVieira SaraVieira Nov 21, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Honestly I don't think we will ever used this again, I could have done in css now that I think of it

`data:image/svg+xml,%3Csvg width='7' height='4' viewBox='0 0 7 4' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.50007 4L1.27146e-07 1.35122e-07L7 -4.76837e-07L3.50007 4Z' fill='${
props.theme.light ? 'black' : 'white'
}'/%3E%3C/svg%3E%0A`;

const makeDarker = ({ theme }) =>
Color(theme['input.background'])
.darken(theme.light ? 0.1 : 0.3)
Expand Down Expand Up @@ -80,13 +85,8 @@ export const List = styled.ul<{ expanded?: boolean }>`
background-color: ${props => makeLighter(props)};
width: 240px;
z-index: 10;

${props =>
props.expanded &&
css`
max-height: 130px;
display: block;
`}
max-height: 130px;
display: block;
`;

export const SelectedFont = styled.button<{ done?: boolean }>`
Expand All @@ -105,23 +105,18 @@ export const SelectedFont = styled.button<{ done?: boolean }>`
position: relative;
box-sizing: border-box;
outline: none;
cursor: pointer;

${props =>
props.done &&
css`
:after {
content: '';
background-image: url("${`data:image/svg+xml,%3Csvg width='7' height='4' viewBox='0 0 7 4' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.50007 4L1.27146e-07 1.35122e-07L7 -4.76837e-07L3.50007 4Z' fill='${
props.theme.light ? 'black' : 'white'
}'/%3E%3C/svg%3E%0A`}");
width: 7px;
height: 4px;
position: absolute;
right: 0.5rem;
top: 50%;
transform: translateY(-50%);
}
`}
:after {
content: '';
background-image: url("${props => svg(props)}");
width: 7px;
height: 4px;
position: absolute;
right: 0.5rem;
top: 50%;
transform: translateY(-50%);
}
`;

export const Arrow = styled.div`
Expand Down
Loading