Skip to content
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

Partially implement the elements panel #266

Merged
merged 15 commits into from
Feb 27, 2020
Merged

Partially implement the elements panel #266

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
6cd1a4d
Partially implements the elements panel
wassgha Feb 8, 2020
9104009
Suggested changes
wassgha Feb 8, 2020
a4efba2
Refactor UploadButton
wassgha Feb 8, 2020
d070f2b
Merge branch 'master' into libraries
wassgha Feb 11, 2020
1c727c5
Implements suggested changes
wassgha Feb 11, 2020
c7e1a4e
Merge branch 'master' into libraries
wassgha Feb 12, 2020
b9ac033
Font size util
wassgha Feb 12, 2020
fcdf4b0
Replaced font utility with editor methods
wassgha Feb 14, 2020
e5fc725
Merge branch 'master' into libraries
wassgha Feb 14, 2020
27cb09e
Fixed svg
wassgha Feb 14, 2020
0281d3b
Merge branch 'master' into libraries
wassgha Feb 20, 2020
3f3bbf4
Review suggestions
wassgha Feb 20, 2020
13de051
Addresses two nits
wassgha Feb 21, 2020
72dc514
Merge branch 'master' into libraries
wassgha Feb 26, 2020
b46abb5
Reverted unintentionally linted files
wassgha Feb 26, 2020
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
21 changes: 7 additions & 14 deletions assets/src/edit-story/components/library/common/searchInput.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,38 +19,31 @@
*/
import PropTypes from 'prop-types';
import styled from 'styled-components';
import { rgba } from 'polished';

/**
* WordPress dependencies
*/
import { Dashicon } from '@wordpress/components';
wassgha marked this conversation as resolved.
Show resolved Hide resolved

/**
* Internal dependencies
*/
import { alpha } from '../../../theme';

/**
* Search Input
*/

const Icon = styled(Dashicon)`
position: absolute;
top: 8px;
left: 10px;
fill: ${({ theme }) => theme.colors.mg.v2};
left: 10px;
`;

const SearchField = styled.div`
position: relative;
display: flex;
align-items: center;
`;

const Search = styled.input.attrs({ type: 'text' })`
width: 100%;
background: ${({ theme }) => alpha(theme.colors.fg.v1, 0.1)} !important;
border-color: ${({ theme }) => theme.colors.mg.v1} !important;
background: ${({ theme }) => rgba(theme.colors.fg.v1, 0.1)} !important;
border: none !important;
color: ${({ theme }) => theme.colors.mg.v2} !important;
padding: 2px 10px 2px 33px !important;
padding: 4px 12px 4px 36px !important;

&::placeholder {
color: ${({ theme }) => theme.colors.mg.v2};
Expand Down
8 changes: 2 additions & 6 deletions assets/src/edit-story/components/library/common/section.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,17 +19,13 @@
*/
import PropTypes from 'prop-types';
import styled from 'styled-components';

/**
* Internal dependencies
*/
import { alpha } from '../../../theme';
import { rgba } from 'polished';

const SectionContainer = styled.div`
position: relative;
padding-top: 16px;
padding-bottom: 16px;
border-bottom: 1px solid ${({ theme }) => alpha(theme.colors.fg.v1, 0.2)};
border-bottom: 1px solid ${({ theme }) => rgba(theme.colors.fg.v1, 0.2)};
`;
const SectionTitle = styled.h2`
color: ${({ theme }) => theme.colors.fg.v1};
Expand Down
4 changes: 2 additions & 2 deletions assets/src/edit-story/components/library/mediaLibrary.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@
*/
import PropTypes from 'prop-types';
import styled, { css } from 'styled-components';
import { rgba } from 'polished';

/**
* WordPress dependencies
Expand All @@ -32,7 +33,6 @@ import { __ } from '@wordpress/i18n';
*/
import { useConfig } from '../../app/config';
import UploadButton from '../uploadButton';
import { alpha } from '../../theme';
import useLibrary from './useLibrary';
import { Title, SearchInput, Header } from './common';

Expand Down Expand Up @@ -64,7 +64,7 @@ const Message = styled.div`
`;

const FilterButtons = styled.div`
border-bottom: 1px solid ${({ theme }) => alpha(theme.colors.fg.v1, 0.1)};
border-bottom: 1px solid ${({ theme }) => rgba(theme.colors.fg.v1, 0.1)};
padding: 18px 0;
margin: 10px 0 15px;
`;
Expand Down
30 changes: 24 additions & 6 deletions assets/src/edit-story/components/library/text/fontPreview.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,15 +19,22 @@
*/
import PropTypes from 'prop-types';
import styled from 'styled-components';
import { rgba } from 'polished';

/**
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
import { useEffect } from '@wordpress/element';

/**
* Internal dependencies
*/
import { alpha } from '../../../theme';
import { useFont } from '../../../app';

const Preview = styled.div`
position: relative;
background: ${({ theme }) => alpha(theme.colors.fg.v1, 0.1)};
background: ${({ theme }) => rgba(theme.colors.fg.v1, 0.1)};
padding: 12px;
margin-bottom: 12px;
border-radius: 4px;
Expand All @@ -45,7 +52,7 @@ const Text = styled.span`
`;

const RemoveButton = styled.span`
background: ${({ theme }) => alpha(theme.colors.fg.v1, 0.3)};
background: ${({ theme }) => rgba(theme.colors.fg.v1, 0.3)};
color: ${({ theme }) => theme.colors.bg.v4};
position: absolute;
top: 0;
Expand All @@ -59,17 +66,28 @@ const RemoveButton = styled.span`
font-family: monospace;
`;

function FontPreview({ title, ...props }) {
function FontPreview({ title, fontFamily, ...fontProps }) {
const {
actions: { maybeEnqueueFontStyle },
} = useFont();

useEffect(() => {
maybeEnqueueFontStyle(fontFamily);
}, [fontFamily, maybeEnqueueFontStyle]);

return (
<Preview>
<RemoveButton>{'-'}</RemoveButton>
<Text {...props}>{title}</Text>
<RemoveButton aria-label={__('Remove preset', 'web-stories')}>
{'-'}
</RemoveButton>
<Text {...fontProps}>{title}</Text>
</Preview>
);
}

FontPreview.propTypes = {
title: PropTypes.string,
fontFamily: PropTypes.string,
};

export default FontPreview;
22 changes: 11 additions & 11 deletions assets/src/edit-story/components/library/textLibrary.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,28 +33,28 @@ import { FontPreview } from './text';
const PRESETS = [
wassgha marked this conversation as resolved.
Show resolved Hide resolved
{
id: 'heading',
title: 'Heading',
fontSize: 28,
title: __('Heading', 'web-stories'),
fontSize: 48,
fontWeight: 800,
fontFamily: 'Ubuntu',
wassgha marked this conversation as resolved.
Show resolved Hide resolved
},
{
id: 'subheading',
title: 'Subheading',
fontSize: 18,
title: __('Subheading', 'web-stories'),
fontSize: 32,
fontWeight: 500,
fontFamily: 'Ubuntu',
},
{
id: 'body-text',
title: 'Body Text',
fontSize: 12,
title: __('Body text', 'web-stories'),
fontSize: 16,
fontWeight: 'normal',
fontFamily: 'Ubuntu',
},
];

function MediaLibrary({ onInsert }) {
function TextLibrary({ onInsert }) {
return (
<>
<Header>
Expand Down Expand Up @@ -87,7 +87,7 @@ function MediaLibrary({ onInsert }) {
{...preset}
onClick={() =>
onInsert('text', {
content: 'Text',
content: __('Text', 'web-stories'),
color: 'black',
width: 50,
height: 20,
Expand All @@ -100,13 +100,13 @@ function MediaLibrary({ onInsert }) {
/>
))}
</Section>
<Section title={__('Text sets', 'web-stories')} />
<Section title={__('Text Sets', 'web-stories')} />
</>
);
}

MediaLibrary.propTypes = {
TextLibrary.propTypes = {
onInsert: PropTypes.func.isRequired,
};

export default MediaLibrary;
export default TextLibrary;
4 changes: 2 additions & 2 deletions assets/src/edit-story/elements/text/output.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,8 +46,8 @@ function TextOutput({
fontFamily: generateFontFamily(fontFamily, fontFallback),
fontWeight: fontWeight ? fontWeight : null,
background: backgroundColor,
color,
lineHeight,
color:color,
lineHeight:lineHeight,
wassgha marked this conversation as resolved.
Show resolved Hide resolved
letterSpacing: letterSpacing ? letterSpacing + 'em' : null,
padding: padding ? padding + '%' : null,
textAlign: textAlign ? textAlign : null,
Expand Down
7 changes: 0 additions & 7 deletions assets/src/edit-story/theme.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,6 @@
* External dependencies
*/
import { createGlobalStyle } from 'styled-components';
import Color from 'color';

export const GlobalStyle = createGlobalStyle`
*,
Expand All @@ -28,12 +27,6 @@ export const GlobalStyle = createGlobalStyle`
}
`;

export const alpha = (color, a = 1) =>
Color(color)
.alpha(a)
.rgb()
.string();

const theme = {
colors: {
bg: {
Expand Down
21 changes: 12 additions & 9 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,11 +21,11 @@
},
"dependencies": {
"@moxy/react-keyboard-only-outlines": "^1.0.1",
"color": "^3.1.2",
"draft-js": "^0.11.4",
"draft-js-export-html": "^1.4.1",
"draft-js-import-html": "^1.4.1",
"draftjs-filters": "^2.3.0",
"polished": "^3.4.4",
"prop-types": "^15.7.2",
"react-modal": "^3.11.1",
"uuid": "^3.4.0"
Expand Down