migrate object and list widgets
This commit is contained in:
@ -1,9 +1,18 @@
|
||||
import React from 'react';
|
||||
import styled from 'react-emotion';
|
||||
import Icon from './Icon';
|
||||
import { colors, lengths } from './styles';
|
||||
import { colors, lengths, buttons } from './styles';
|
||||
|
||||
const TopBar = styled.div`
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
height: 26px;
|
||||
border-radius: ${lengths.borderRadius} ${lengths.borderRadius} 0 0;
|
||||
position: relative;
|
||||
`
|
||||
|
||||
const TopBarButton = styled.button`
|
||||
${buttons.button};
|
||||
color: ${colors.controlLabel};
|
||||
background: transparent;
|
||||
font-size: 16px;
|
||||
@ -24,8 +33,8 @@ const DragIcon = styled(TopBarButtonSpan)`
|
||||
cursor: move;
|
||||
`
|
||||
|
||||
const ListItemTopBar = ({ collapsed, onCollapseToggle, onRemove, dragHandleHOC }) => (
|
||||
<div>
|
||||
const ListItemTopBar = ({ className, collapsed, onCollapseToggle, onRemove, dragHandleHOC }) => (
|
||||
<TopBar className={className}>
|
||||
{
|
||||
onCollapseToggle
|
||||
? <TopBarButton onClick={onCollapseToggle}>
|
||||
@ -47,7 +56,7 @@ const ListItemTopBar = ({ collapsed, onCollapseToggle, onRemove, dragHandleHOC }
|
||||
</TopBarButton>
|
||||
: null
|
||||
}
|
||||
</div>
|
||||
</TopBar>
|
||||
);
|
||||
|
||||
const StyledListItemTopBar = styled(ListItemTopBar)`
|
||||
|
67
packages/netlify-cms-ui-default/src/ObjectWidgetTopBar.js
Normal file
67
packages/netlify-cms-ui-default/src/ObjectWidgetTopBar.js
Normal file
@ -0,0 +1,67 @@
|
||||
import React from 'react';
|
||||
import styled, { css }from 'react-emotion';
|
||||
import Icon from './Icon';
|
||||
import { colors, buttons } from './styles';
|
||||
|
||||
const TopBarContainer = styled.div`
|
||||
align-items: center;
|
||||
background-color: ${colors.textFieldBorder};
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: 0 -14px;
|
||||
padding: 13px;
|
||||
`
|
||||
|
||||
const ExpandButtonContainer = styled.div`
|
||||
${props => props.hasHeading && css`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
line-height: 1;
|
||||
`}
|
||||
`
|
||||
|
||||
const ExpandButton = styled.button`
|
||||
${buttons.button};
|
||||
padding: 4px;
|
||||
background-color: transparent;
|
||||
color: inherit;
|
||||
|
||||
&:last-of-type {
|
||||
margin-right: 4px;
|
||||
}
|
||||
`
|
||||
|
||||
const AddButton = styled.button`
|
||||
${buttons.button};
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 2px 12px;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
border-radius: 3px;
|
||||
|
||||
${Icon} {
|
||||
margin-left: 6px;
|
||||
}
|
||||
`
|
||||
|
||||
const ObjectWidgetTopBar = ({ allowAdd, onAdd, onCollapseToggle, collapsed, heading = null, label }) => (
|
||||
<TopBarContainer>
|
||||
<ExpandButtonContainer hasHeading={!!heading}>
|
||||
<ExpandButton onClick={onCollapseToggle}>
|
||||
<Icon type="chevron" direction={collapsed ? 'right' : 'down'} size="small" />
|
||||
</ExpandButton>
|
||||
{heading}
|
||||
</ExpandButtonContainer>
|
||||
{!allowAdd ? null :
|
||||
<AddButton onClick={onAdd}>
|
||||
Add {label} <Icon type="add" size="xsmall" />
|
||||
</AddButton>
|
||||
}
|
||||
</TopBarContainer>
|
||||
);
|
||||
|
||||
export default ObjectWidgetTopBar;
|
@ -5,6 +5,7 @@ export Loader from './Loader';
|
||||
export Toggle, { ToggleContainer, ToggleBackground, ToggleHandle } from './Toggle';
|
||||
export AuthenticationPage from './AuthenticationPage';
|
||||
export WidgetPreviewContainer from './WidgetPreviewContainer';
|
||||
export ObjectWidgetTopBar from './ObjectWidgetTopBar';
|
||||
export {
|
||||
fonts,
|
||||
colorsRaw,
|
||||
|
@ -253,6 +253,9 @@ const components = {
|
||||
font-size: 14px;
|
||||
margin-top: 8px;
|
||||
`,
|
||||
objectWidgetTopBarContainer: css`
|
||||
padding: 0 14px 14px;
|
||||
`,
|
||||
}
|
||||
|
||||
injectGlobal`
|
||||
|
Reference in New Issue
Block a user