Skip to content

Commit 0241056

Browse files
dabbottdabbott
committed
Publishing editor (#123)
* use react-toggle-button (#104) (#111) 👍 * React update (#112) * use react-toggle-button (#104) 👍 * Update to react 15.1.0 * Update Electron and add React Dev Tools (#113) * fix devTools variable name typo * Create publishing sidebar with login and landing pages (#114) * Rename publishing containers (#117) * Add metadata editor
1 parent 9fd47c6 commit 0241056

File tree

11 files changed

+654
-182
lines changed

11 files changed

+654
-182
lines changed

‎web/src/scripts/components/forms/FormHeader.jsx‎

Lines changed: 50 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -17,50 +17,61 @@
1717

1818
import React, { Component, } from 'react'
1919

20-
const style = {
21-
height: 30,
22-
display: 'flex',
23-
flexDirection: 'row',
24-
alignItems: 'center',
25-
paddingRight: 10,
26-
paddingLeft: 10,
27-
minWidth: 0,
20+
const styles = {
21+
container: {
22+
height: 30,
23+
display: 'flex',
24+
flexDirection: 'row',
25+
alignItems: 'center',
26+
paddingRight: 10,
27+
paddingLeft: 10,
28+
minWidth: 0,
29+
},
30+
button: {
31+
fontSize: 18,
32+
fontWeight: 300,
33+
}
2834
}
2935

30-
const FormHeader = ({label, inset, labelWidth, disabled}) => {
36+
export default class extends Component {
3137

32-
// TODO consolidate styles - similar to formlabel
33-
let labelStyle = {
34-
lineHeight: '30px',
35-
color: 'rgb(73,73,73)',
36-
fontSize: 11,
37-
paddingLeft: inset,
38-
flex: labelWidth ? `0 0 ${labelWidth}px` : `1 1 auto`,
39-
textOverflow: 'ellipsis',
40-
whiteSpace: 'nowrap',
41-
overflow: 'hidden',
42-
paddingRight: 5,
43-
fontWeight: 'bold',
38+
static defaultProps = {
39+
inset: 0,
4440
}
4541

46-
if (disabled) {
47-
labelStyle = Object.assign({}, labelStyle, {
48-
color: 'rgb(170,170,170)',
49-
})
50-
}
42+
render() {
43+
const {children, label, inset, labelWidth, disabled} = this.props
5144

52-
return (
53-
<div style={style}>
54-
<div style={labelStyle}
55-
title={label}>
56-
{label}
57-
</div>
58-
</div>
59-
)
60-
}
45+
// TODO consolidate styles - similar to formlabel
46+
let labelStyle = {
47+
lineHeight: '30px',
48+
color: 'rgb(73,73,73)',
49+
fontSize: 11,
50+
paddingLeft: inset,
51+
flex: labelWidth ? `0 0 ${labelWidth}px` : `1 1 auto`,
52+
textOverflow: 'ellipsis',
53+
whiteSpace: 'nowrap',
54+
overflow: 'hidden',
55+
fontWeight: 'bold',
56+
display: 'flex',
57+
justifyContent: 'space-between',
58+
alignItems: 'center',
59+
}
6160

62-
FormHeader.defaultProps = {
63-
inset: 0,
64-
}
61+
if (disabled) {
62+
labelStyle = Object.assign({}, labelStyle, {
63+
color: 'rgb(170,170,170)',
64+
})
65+
}
6566

66-
export default FormHeader
67+
return (
68+
<div style={styles.container}>
69+
<div style={labelStyle}
70+
title={label}>
71+
{label}
72+
{children}
73+
</div>
74+
</div>
75+
)
76+
}
77+
}

‎web/src/scripts/components/forms/FormHeaderPlusButton.jsx‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
/**
2+
* Copyright (C) 2015 Deco Software Inc.
3+
*
4+
* This program is free software: you can redistribute it and/or modify
5+
* it under the terms of the GNU Affero General Public License, version 3,
6+
* as published by the Free Software Foundation.
7+
*
8+
* This program is distributed in the hope that it will be useful,
9+
* but WITHOUT ANY WARRANTY; without even the implied warranty of
10+
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
11+
* GNU Affero General Public License for more details.
12+
*
13+
* You should have received a copy of the GNU Affero General Public License
14+
* along with this program. If not, see <http://www.gnu.org/licenses/>.
15+
*
16+
*/
17+
18+
import React, { Component, } from 'react'
19+
20+
import SimpleButton from '../buttons/SimpleButton'
21+
22+
const styles = {
23+
button: {
24+
position: 'relative',
25+
top: -2,
26+
fontSize: 16,
27+
fontWeight: 300,
28+
cursor: 'default',
29+
},
30+
default: {
31+
opacity: 1,
32+
},
33+
hover: {
34+
opacity: 0.7,
35+
},
36+
active: {
37+
opacity: 0.85,
38+
}
39+
}
40+
41+
export default class extends Component {
42+
render() {
43+
return (
44+
<SimpleButton
45+
defaultStyle={styles.default}
46+
activeStyle={styles.active}
47+
hoverStyle={styles.hover}
48+
innerStyle={styles.button}
49+
{...this.props}
50+
>
51+
+
52+
</SimpleButton>
53+
)
54+
}
55+
}

‎web/src/scripts/components/index.js‎

Lines changed: 33 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -15,17 +15,40 @@
1515
*
1616
*/
1717

18-
export FilterableList from './menu/FilterableList'
19-
export ComponentMenuItem from './menu/ComponentMenuItem'
20-
export DraggableComponentMenuItem from './menu/DraggableComponentMenuItem'
18+
// Buttons
19+
export SimpleButton from './buttons/SimpleButton'
20+
export LoginButton from './buttons/LoginButton'
21+
export InspectorButton from './buttons/InspectorButton'
22+
23+
// Display
24+
export NoContent from './display/NoContent'
25+
export Callout from './display/Callout'
2126

2227
// Editor
2328
export AutocompleteHint from './editor/AutocompleteHint'
2429

25-
export SimpleButton from './buttons/SimpleButton'
26-
export LoginButton from './buttons/LoginButton'
27-
export InspectorButton from './buttons/InspectorButton'
28-
export PaneHeader from '../components/headers/PaneHeader'
29-
export NoContent from '../components/display/NoContent'
30-
export Callout from '../components/display/Callout'
31-
export UserDetailsBanner from '../components/user/UserDetailsBanner'
30+
// Forms
31+
export FormHeader from './forms/FormHeader'
32+
export FormHeaderPlusButton from './forms/FormHeaderPlusButton'
33+
export FormRow from './forms/FormRow'
34+
35+
// Headers
36+
export PaneHeader from './headers/PaneHeader'
37+
38+
// Input
39+
export FileSelectorInput from './input/FileSelectorInput'
40+
export StringInput from './input/StringInput'
41+
42+
// Inspector
43+
export InspectorField from './inspector/InspectorField'
44+
export LiveValue from './inspector/LiveValue'
45+
export MetadataEditor from './inspector/MetadataEditor'
46+
export NameEditor from './inspector/NameEditor'
47+
48+
// Menu
49+
export FilterableList from './menu/FilterableList'
50+
export ComponentMenuItem from './menu/ComponentMenuItem'
51+
export DraggableComponentMenuItem from './menu/DraggableComponentMenuItem'
52+
53+
// User
54+
export UserDetailsBanner from './user/UserDetailsBanner'

‎web/src/scripts/components/inspector/InspectorField.jsx‎

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
/**
2+
* Copyright (C) 2015 Deco Software Inc.
3+
*
4+
* This program is free software: you can redistribute it and/or modify
5+
* it under the terms of the GNU Affero General Public License, version 3,
6+
* as published by the Free Software Foundation.
7+
*
8+
* This program is distributed in the hope that it will be useful,
9+
* but WITHOUT ANY WARRANTY; without even the implied warranty of
10+
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
11+
* GNU Affero General Public License for more details.
12+
*
13+
* You should have received a copy of the GNU Affero General Public License
14+
* along with this program. If not, see <http://www.gnu.org/licenses/>.
15+
*
16+
*/
17+
18+
import _ from 'lodash'
19+
import React, { Component } from 'react'
20+
21+
import FormRow from '../forms/FormRow'
22+
import Menu from '../menu/Menu'
23+
24+
const INPUT_WIDTH = 115
25+
26+
export default class extends Component {
27+
28+
static propTypes = {
29+
inset: React.PropTypes.number,
30+
width: React.PropTypes.number,
31+
inputElement: React.PropTypes.any,
32+
menuElement: React.PropTypes.element.isRequired,
33+
}
34+
35+
static defaultProps = {
36+
inset: 0,
37+
}
38+
39+
constructor(props) {
40+
super(props)
41+
42+
this.state = {
43+
showMenu: false,
44+
menuPosition: { x: 0, y: 0 },
45+
}
46+
47+
this.setMenuVisibility = this.setMenuVisibility.bind(this)
48+
this.setMenuVisibility = _.throttle(this.setMenuVisibility, 100, {
49+
leading: true,
50+
trailing: false,
51+
})
52+
}
53+
54+
setMenuVisibility(visible) {
55+
this.setState({
56+
showMenu: visible
57+
})
58+
}
59+
60+
render() {
61+
const {name, inset, width, inputElement, menuElement} = this.props
62+
const {showMenu, caretOffset, menuPosition} = this.state
63+
64+
return (
65+
<FormRow
66+
label={name}
67+
statefulLabel={true}
68+
labelEnabled={showMenu}
69+
labelWidth={width - INPUT_WIDTH}
70+
inset={inset}
71+
inputWidth={INPUT_WIDTH}
72+
onLabelChange={() => this.setMenuVisibility(! showMenu)}
73+
onLabelPositionChange={({x, y, width}) => {
74+
this.setState({
75+
menuPosition: { x: x - width / 2, y },
76+
caretOffset: { x: Math.max(width / 2, 5), y: 0 },
77+
})
78+
}}
79+
>
80+
{inputElement}
81+
<Menu show={showMenu}
82+
caret={true}
83+
caretOffset={caretOffset}
84+
requestClose={this.setMenuVisibility.bind(null, false)}
85+
anchorPosition={menuPosition}>
86+
{showMenu && React.cloneElement(menuElement, {
87+
requestClose: this.setMenuVisibility.bind(null, false),
88+
})}
89+
</Menu>
90+
</FormRow>
91+
)
92+
}
93+
}

0 commit comments

Comments
 (0)