diff options
| -rw-r--r-- | frontend/common/form.component.js | 5 | ||||
| -rw-r--r-- | frontend/common/form.css | 11 | ||||
| -rw-r--r-- | frontend/views/graph/graph.css | 13 | ||||
| -rw-r--r-- | frontend/views/page/components/page.editor.js | 15 | ||||
| -rw-r--r-- | frontend/views/page/components/tile.form.js | 56 | ||||
| -rw-r--r-- | frontend/views/page/page.css | 6 |
6 files changed, 93 insertions, 13 deletions
diff --git a/frontend/common/form.component.js b/frontend/common/form.component.js index 4f52a5e..fb5b26d 100644 --- a/frontend/common/form.component.js +++ b/frontend/common/form.component.js @@ -188,6 +188,9 @@ export class FileInput extends Component { export const SubmitButton = (props) => ( <label> <span></span> - <button className="submit" onClick={props.onClick}>{props.title}</button> + <button + className={props.className ? "submit " + props.className : "submit"} + onClick={props.onClick} + >{props.title}</button> </label> ) diff --git a/frontend/common/form.css b/frontend/common/form.css index 54ac2d9..dbfa01f 100644 --- a/frontend/common/form.css +++ b/frontend/common/form.css @@ -275,6 +275,17 @@ button.submit:hover { color: #fff; background: #222; } +button.submit.destroy { + background-color: rgba(16,16,16,0.5); + border-color: #b11; + color: #d11; +} +button.submit.destroy:focus, +button.submit.destroy:hover { + background: #000; + border-color: #f33; + color: #f33; +} /* file upload, should always be inside a container */ diff --git a/frontend/views/graph/graph.css b/frontend/views/graph/graph.css index 60a4c81..04eefe6 100644 --- a/frontend/views/graph/graph.css +++ b/frontend/views/graph/graph.css @@ -42,6 +42,19 @@ align-items: flex-start; margin-bottom: 0.25rem; } +.box form .buttons { + justify-content: space-between; +} +.box form .buttons label { + width: auto; + min-width: auto; +} +.box form .buttons label span { + display: none; +} +.box form .buttons button:last-child { + margin-right: 0; +} .box form label.checkbox { flex-direction: row; justify-content: flex-start; diff --git a/frontend/views/page/components/page.editor.js b/frontend/views/page/components/page.editor.js index c13e4ed..0171f56 100644 --- a/frontend/views/page/components/page.editor.js +++ b/frontend/views/page/components/page.editor.js @@ -214,6 +214,21 @@ const TileHandle = ({ tile, bounds, box, onMouseDown, onDoubleClick }) => { if (tile.settings.is_tiled) { style.backgroundImage = 'url(' + tile.settings.url + ')' style.backgroundPosition = tile.settings.align.replace('_', ' ') + switch (tile.settings.tile_style) { + default: + case 'tile': + break + case 'cover': + style.backgroundSize = 'cover' + break + case 'contain': + style.backgroundSize = 'contain' + break + case 'contain no-repeat': + style.backgroundSize = 'contain' + style.backgroundRepeat = 'no-repeat' + break + } className += ' is_tiled' } else { className += ' ' + tile.settings.align diff --git a/frontend/views/page/components/tile.form.js b/frontend/views/page/components/tile.form.js index c5f5c0b..1d15296 100644 --- a/frontend/views/page/components/tile.form.js +++ b/frontend/views/page/components/tile.form.js @@ -30,6 +30,10 @@ const REQUIRED_KEYS = { text: ['content'], } +const IMAGE_TILE_STYLES = [ + 'tile', 'cover', 'contain', 'contain no-repeat' +].map(style => ({ name: style, label: style })) + // target_page_id = Column(Integer, ForeignKey('page.id'), nullable=True) // https://s3.amazonaws.com/i.asdf.us/im/1c/gradient_gold1-SpringGreen1_1321159749.jpg @@ -37,6 +41,7 @@ const newImage = (data) => ({ settings: { ...newPosition(), is_tiled: false, + tile_style: 'tile', url: "", }, type: 'image', @@ -222,6 +227,14 @@ class TileForm extends Component { } } + handleDelete() { + const { temporaryTile, isNew } = this.props + const tile_id = temporaryTile.id + if (confirm('Really delete this tile?')) { + actions.tile.delete(temporaryTile.id) + } + } + render() { const { temporaryTile, isNew } = this.props const { title, submitTitle, errorFields } = this.state @@ -255,10 +268,19 @@ class TileForm extends Component { ? this.renderTextForm() : ""} - <SubmitButton - title={submitTitle} - onClick={this.handleSubmit.bind(this)} - /> + <div className='row buttons'> + <SubmitButton + title={submitTitle} + onClick={this.handleSubmit.bind(this)} + /> + {!isNew && + <SubmitButton + title={'Delete'} + className='destroy' + onClick={this.handleDelete.bind(this)} + /> + } + </div> {!!errorFields.size && <label> <span></span> @@ -288,6 +310,7 @@ class TileForm extends Component { // const { isNew } = this.props const { temporaryTile } = this.props const { errorFields } = this.state + console.log(temporaryTile.settings) return ( <div> <TextInput @@ -300,13 +323,24 @@ class TileForm extends Component { onChange={this.handleImageChange.bind(this)} autoComplete="off" /> - <Checkbox - label="Tiled" - name="is_tiled" - data={temporaryTile.settings} - onChange={this.handleSettingsSelect.bind(this)} - autoComplete="off" - /> + <div className='row pair'> + <Checkbox + label="Tiled" + name="is_tiled" + checked={temporaryTile.settings.is_tiled} + onChange={this.handleSettingsSelect.bind(this)} + autoComplete="off" + /> + {temporaryTile.settings.is_tiled && + <Select + name='tile_style' + selected={temporaryTile.settings.tile_style || 'tile'} + options={IMAGE_TILE_STYLES} + title='' + onChange={this.handleSettingsSelect.bind(this)} + /> + } + </div> </div> ) diff --git a/frontend/views/page/page.css b/frontend/views/page/page.css index 690cb3e..887ec0f 100644 --- a/frontend/views/page/page.css +++ b/frontend/views/page/page.css @@ -66,4 +66,8 @@ } .tileList .row.sortable-drag { opacity: 0.6; -}
\ No newline at end of file +} + +.row.buttons { + justify-content: space-between; +} |