From c32c72c3f4640ede867907b4c8de8811a508a6c3 Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Sat, 6 Jun 2020 23:09:53 +0200
Subject: tiling styles

---
 frontend/views/page/components/page.editor.js | 15 +++++++
 frontend/views/page/components/tile.form.js   | 56 +++++++++++++++++++++------
 2 files changed, 60 insertions(+), 11 deletions(-)

(limited to 'frontend/views/page/components')

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>
     )
    
-- 
cgit v1.2.3-70-g09d2