diff options
| -rw-r--r-- | frontend/common/form.component.js | 6 | ||||
| -rw-r--r-- | frontend/views/page/components/tile.form.js | 53 | ||||
| -rw-r--r-- | frontend/views/page/page.css | 2 |
3 files changed, 53 insertions, 8 deletions
diff --git a/frontend/common/form.component.js b/frontend/common/form.component.js index cc0607d..f3775a2 100644 --- a/frontend/common/form.component.js +++ b/frontend/common/form.component.js @@ -125,7 +125,11 @@ export class Select extends Component { > {!selected && defaultOption && <option value="__default__">{defaultOption}</option>} {options.map((option, i) => ( - <option key={option.name} value={option.name}>{option.label}</option> + <option + key={option.name} + value={option.name} + disabled={option.disabled} + >{option.label}</option> ))} </select> </div> diff --git a/frontend/views/page/components/tile.form.js b/frontend/views/page/components/tile.form.js index c3d509d..d4913fe 100644 --- a/frontend/views/page/components/tile.form.js +++ b/frontend/views/page/components/tile.form.js @@ -42,6 +42,14 @@ const TEXT_FONT_STYLES = [ 'normal', 'bold', 'italic', 'bold-italic', ].map(style => ({ name: style, label: style })) +const NO_LINK = 0 +const EXTERNAL_LINK = -1 +const PAGE_LIST_TOP_OPTIONS = [ + { name: NO_LINK, label: 'No link' }, + { name: EXTERNAL_LINK, label: 'External link' }, + { name: -2, label: '──────────', disabled: true }, +] + // target_page_id = Column(Integer, ForeignKey('page.id'), nullable=True) // https://s3.amazonaws.com/i.asdf.us/im/1c/gradient_gold1-SpringGreen1_1321159749.jpg @@ -93,6 +101,7 @@ class TileForm extends Component { submitTitle: "", errorFields: new Set([]), modified: false, + pageList: [], } componentDidMount() { @@ -104,6 +113,12 @@ class TileForm extends Component { submitTitle, errorFields: new Set([]), }) + const { pages } = graph.show.res + let pageList = [ + ...PAGE_LIST_TOP_OPTIONS, + ...pages.map(page => ({ name: page.id, label: page.title })) + ] + this.setState({ pageList }) if (isNew) { const newTile = newImage({ id: "new", @@ -172,6 +187,9 @@ class TileForm extends Component { if (name === 'type') { return this.handleTypeChange(value) } + if (name === 'target_page_id') { + value = parseInt(value) + } this.props.tileActions.updateTemporaryTile({ ...this.props.temporaryTile, [name]: value, @@ -305,6 +323,8 @@ class TileForm extends Component { ? this.renderTextForm() : ""} + {this.renderLinkForm()} + <div className='row buttons'> <SubmitButton title={submitTitle} @@ -343,6 +363,33 @@ class TileForm extends Component { ) } + renderLinkForm() { + const { temporaryTile } = this.props + const { pageList } = this.state + const isExternalLink = temporaryTile.target_page_id === EXTERNAL_LINK + return ( + <div className={isExternalLink ? 'row selects' : 'row'}> + <Select + title='' + name='target_page_id' + selected={temporaryTile.target_page_id || NO_LINK} + options={pageList} + onChange={this.handleSelect.bind(this)} + /> + {isExternalLink && + <TextInput + title="" + placeholder='http://' + name="external_link_url" + data={temporaryTile.settings} + onChange={this.handleSettingsChange.bind(this)} + autoComplete="off" + /> + } + </div> + ) + } + renderImageForm() { // const { isNew } = this.props const { temporaryTile } = this.props @@ -469,12 +516,6 @@ class TileForm extends Component { ) } } - // font_family: 'sans-serif', - // font_size: 16, - // font_style: 'normal', - // font_color: '#ffffff', - // background_color: '#333333', - const mapStateToProps = state => ({ graph: state.graph, diff --git a/frontend/views/page/page.css b/frontend/views/page/page.css index 4bc98f4..7747ddf 100644 --- a/frontend/views/page/page.css +++ b/frontend/views/page/page.css @@ -79,7 +79,7 @@ justify-content: center; align-items: center; height: 1.5rem; - width: 2rem; + width: 1.9475rem; margin-right: 0.5rem; } .row.imageUrl img { |