tiling styles

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;
+}