coop-cloud-chaos-patchs/outline
Archived
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Subtle

Browse Source
This commit is contained in:
Tom Moor
2017-10-16 22:05:55 -07:00
parent 1adc983a12
commit aa5b3baf27
2 changed files with 27 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/components/Editor/Editor.js
View File

@ -10,7 +10,7 @@ import Flex from 'components/Flex';
import ClickablePadding from './components/ClickablePadding'; import ClickablePadding from './components/ClickablePadding';
import Toolbar from './components/Toolbar'; import Toolbar from './components/Toolbar';
import Placeholder from './components/Placeholder'; import Placeholder from './components/Placeholder';
import Minimap from './components/Minimap'; import Contents from './components/Contents';
import Markdown from './serializer'; import Markdown from './serializer';
import createSchema from './schema'; import createSchema from './schema';
import createPlugins from './plugins'; import createPlugins from './plugins';
@ -184,7 +184,7 @@ type KeyData = {
<MaxWidth column auto> <MaxWidth column auto>
<Header onClick={this.focusAtStart} readOnly={this.props.readOnly} /> <Header onClick={this.focusAtStart} readOnly={this.props.readOnly} />
<Toolbar state={this.editorState} onChange={this.onChange} /> <Toolbar state={this.editorState} onChange={this.onChange} />
<Minimap state={this.editorState} /> <Contents state={this.editorState} />
<StyledEditor <StyledEditor
innerRef={ref => (this.editor = ref)} innerRef={ref => (this.editor = ref)}
placeholder="Start with a title…" placeholder="Start with a title…"

36
frontend/components/Editor/components/Minimap.js → frontend/components/Editor/components/Contents.js
View File

@ -12,7 +12,7 @@ type Props = {
state: State, state: State,
}; };
@observer class Minimap extends Component { @observer class Contents extends Component {
props: Props; props: Props;
@observable activeHeading: ?string; @observable activeHeading: ?string;
@ -68,10 +68,11 @@ type Props = {
<Sections> <Sections>
{this.headings.map(heading => { {this.headings.map(heading => {
const slug = headingToSlug(heading.type, heading.text); const slug = headingToSlug(heading.type, heading.text);
const active = this.activeHeading === slug;
return ( return (
<ListItem type={heading.type}> <ListItem type={heading.type} active={active}>
<Anchor href={`#${slug}`} active={this.activeHeading === slug}> <Anchor href={`#${slug}`} active={active}>
{heading.text} {heading.text}
</Anchor> </Anchor>
</ListItem> </ListItem>
@ -84,8 +85,16 @@ type Props = {
} }
const Anchor = styled.a` const Anchor = styled.a`
color: ${props => (props.active ? color.primary : color.slate)}; color: ${props => (props.active ? color.slateDark : color.slate)};
font-weight: ${props => (props.active ? 500 : 400)}; font-weight: ${props => (props.active ? 500 : 400)};
opacity: 0;
transition: all 100ms ease-in-out;
margin-right: -5px;
padding: 2px 0;
&:hover {
color: ${color.primary};
}
`; `;
const ListItem = styled.li` const ListItem = styled.li`
@ -93,8 +102,14 @@ const ListItem = styled.li`
margin-left: ${props => (props.type === 'heading2' ? '8px' : '16px')}; margin-left: ${props => (props.type === 'heading2' ? '8px' : '16px')};
text-align: right; text-align: right;
color: ${color.slate}; color: ${color.slate};
padding-right: 10px; padding-right: 16px;
opacity: 0;
&:after {
color: ${props => (props.active ? color.slateDark : color.slate)};
content: "${props => (props.type === 'heading2' ? '—' : '–')}";
position: absolute;
right: 0;
}
`; `;
const Sections = styled.ol` const Sections = styled.ol`
@ -102,11 +117,12 @@ const Sections = styled.ol`
padding: 0; padding: 0;
list-style: none; list-style: none;
font-size: 13px; font-size: 13px;
border-right: 1px solid ${color.slate};
&:hover { &:hover {
${ListItem} { ${Anchor} {
opacity: 1; opacity: 1;
margin-right: 0;
background: ${color.white};
} }
} }
`; `;
@ -115,9 +131,7 @@ const Wrapper = styled.div`
position: fixed; position: fixed;
right: 0; right: 0;
top: 160px; top: 160px;
padding-right: 20px;
background: ${color.white};
z-index: 100; z-index: 100;
`; `;
export default Minimap; export default Contents;