Merge pull request #9 from webkom/image-fixes

Image fixes ++
webkom · Aug 29, 2019 · c6722cd · c6722cd
2 parents 1910235 + 02e67e6
commit c6722cd
Show file tree

Hide file tree

Showing 13 changed files with 264 additions and 151 deletions.
diff --git a/README.md b/README.md
@@ -2,7 +2,7 @@
 
 ![DroneCI](https://ci.abakus.no/api/badges/webkom/lego-editor/status.svg?branch=master)
 
-> Work-in-progress editor for [lego-webapp](https://github.com/webkom/lego-webapp) written with [Slate.js](https://docs.slatejs.org)
+> Work-in-progress editor for [lego-webapp](https://github.com/webkom/lego-webapp) written with [Slate.js](https://docs.slatejs.org) ![npm (scoped)](https://img.shields.io/npm/v/@webkom/lego-editor?style=flat-square)
 
 <img src="https://i.imgur.com/6zIQhYm.png" />
 

diff --git a/example/src/App.js b/example/src/App.js
@@ -9,7 +9,12 @@ import './App.css';
 const App = () => (
   <div>
     <h1>Lego editor</h1>
-    <Editor placeholder="Testing lego editor" />
+    <Editor
+      placeholder="Testing lego editor"
+      imageUpload={file =>
+        new Promise(resolve => resolve(URL.createObjectURL(file)))
+      }
+    />
   </div>
 );
 

diff --git a/package.json b/package.json
@@ -40,6 +40,7 @@
     "@types/classnames": "^2.2.8",
     "@types/is-hotkey": "^0.1.1",
     "@types/is-url": "^1.2.28",
+    "@types/lodash": "^4.14.137",
     "@types/react": "^16.8.14",
     "@types/react-image-crop": "^6.0.2",
     "@types/slate": "^0.47.1",

diff --git a/src/Editor.css b/src/Editor.css
@@ -51,9 +51,6 @@
   margin-block-start: 1em;
   margin-block-end: 1em;
 }
-/*
- * TODO: Use psudo-selectors for 3n, 2n, n-th... list element
- */
 
 ._legoEditor_ul_list > ul {
   list-style: circle;
@@ -84,10 +81,7 @@
 }
 
 ._legoEditor_figure {
-  background-color: #fcfcfc;
   padding: 20px 10px 0;
-  border: 0.5px solid #f4f4f4;
-  border-radius: 2px;
   margin: auto;
   display: flex;
   flex-direction: column;

diff --git a/src/components/ImageBlock.tsx b/src/components/ImageBlock.tsx
@@ -4,33 +4,18 @@ import { RenderAttributes } from 'slate-react';
 
 interface Props {
   editor: Editor;
-  file: Blob;
-  imageUrl: string;
   src: string;
   isFocused: boolean;
   attributes: RenderAttributes;
   node: Node;
 }
 
 export default class ImageBlock extends React.Component<Props> {
-  componentDidMount(): void {
-    //if (this.props.file) {
-    //this.props.uploadFile({ file: this.props.file, isPublic: true }).then(({ meta }) => {
-    //});
-    //}
-    const { editor, file, imageUrl } = this.props;
-    editor.setNodeByKey(this.props.node.key, {
-      data: { imageUrl, file /*, fileKey: meta.fileToken.split(":")[0]*/ },
-      type: 'image'
-    });
-  }
-
   render(): React.ReactNode {
-    const { imageUrl, src, attributes, isFocused } = this.props;
+    const { src, attributes, isFocused } = this.props;
     return (
       <img
-        onLoad={() => URL.revokeObjectURL(imageUrl)}
-        src={src ? src : imageUrl}
+        src={src}
         alt="Failed to load image..."
         className={isFocused ? '_legoEditor_imgSelected' : '_legoEditor_img'}
         {...attributes}

diff --git a/src/components/ImageUpload.css b/src/components/ImageUpload.css
@@ -1,8 +1,8 @@
 ._legoEditor_imageUploader_wrapper {
-  z-index: 10000;
   display: flex;
   flex-direction: column;
   justify-content: center;
+  align-items: center;
   position: fixed;
   min-width: 100%;
   min-height: 100%;
@@ -13,29 +13,133 @@
 
 ._legoEditor_imageUploader_root {
   opacity: 1;
-  background-color: #ddd;
+  background-color: #fff;
   width: 60%;
+  z-index: 15;
   top: 10%;
   left: 20%;
-  margin: auto;
-  margin-top: 30px;
-  margin-bottom: 30px;
+  margin: 0 30px;
   padding: 15px;
   border-radius: 5px;
-  flex: 1 1 auto;
+  display: flex;
+  flex-direction: column;
 }
 
 ._legoEditor_imageUploader_dropZone {
   width: 80%;
-  height: 200px;
+  height: 100%;
   border: 2px dashed rgba(0, 0, 0, 0.2);
   border-radius: 4px;
   margin: auto;
-  text-align: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   color: #909090;
+  flex: 1 1 auto;
+}
+
+._legoEditor_imageUploader_crop_wrapper {
+  flex: 1 1 auto;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  min-height: 400px;
 }
 
 ._legoEditor_imageUploader_crop_container {
-  border: 3px solid #b5b5b5;
-  background-color: #bbb;
+  margin: 5px;
+  padding: 2px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: url(
+  data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAJ0lEQVQoU2PcvXv3fwY0cPbsWXQhBsahoLCjowPDM8bGxpieGQIKAezGK+59+t2AAAAAAElFTkSuQmCC
+  )
+    repeat;
+}
+
+._legoEditor_imageUploader_buttonContainer {
+  display: flex;
+  justify-content: space-evenly;
+  margin: 30px;
+  flex: 0 1 auto;
+}
+
+._legoEditor_imageUploader_button {
+  border-radius: 4px;
+  background-color: #fff;
+  padding: 9px 18px;
+  cursor: pointer;
+  font-family: inherit;
+  background: none;
+  border: 0;
+  box-sizing: border-box;
+  box-shadow: inset 0 0 0 1px #c7c7c7;
+  position: relative;
+  vertical-align: middle;
+}
+
+._legoEditor_imageUploader_button::before,
+._legoEditor_imageUploader_button::after {
+  box-sizing: inherit;
+  content: '';
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}
+
+._legoEditor_imageUploader_button:hover {
+  transition: color 0.2s;
+}
+
+._legoEditor_imageUploader_button::before,
+._legoEditor_imageUploader_button::after {
+  border: 2px solid transparent;
+  width: 0;
+  height: 0;
+}
+
+._legoEditor_imageUploader_button::before,
+._legoEditor_imageUploader_button::after {
+  top: 0;
+  left: 0;
+}
+
+._legoEditor_imageUploader_applyButton:hover {
+  color: #0a6640;
+}
+
+._legoEditor_imageUploader_cancelButton:hover {
+  color: #c0392b;
+}
+
+._legoEditor_imageUploader_button:hover::before,
+._legoEditor_imageUploader_button:hover::after {
+  width: 100%;
+  height: 100%;
+}
+
+._legoEditor_imageUploader_applyButton:hover::before {
+  border-top-color: #0a6640;
+  border-right-color: #0a6640;
+  transition: height 0.2s ease-out 0.2s, width 0.2s ease-out;
+}
+
+._legoEditor_imageUploader_cancelButton:hover::before {
+  border-top-color: #c0392b;
+  border-right-color: #c0392b;
+  transition: width 0.2s ease-out, height 0.2s ease-out 0.2s;
+}
+
+._legoEditor_imageUploader_applyButton:hover::after {
+  border-bottom-color: #0a6640;
+  border-left-color: #0a6640;
+  transition: height 0.2s ease-out, width 0.2s ease-out 0.2s;
+}
+
+._legoEditor_imageUploader_cancelButton:hover::after {
+  border-bottom-color: #c0392b;
+  border-left-color: #c0392b;
+  transition: height 0.2s ease-out, width 0.2s ease-out 0.2s;
 }
diff --git a/src/components/ImageUpload.tsx b/src/components/ImageUpload.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
 import { useDropzone } from 'react-dropzone';
 import ReactCrop, { Crop } from 'react-image-crop';
 import cropImage from '../utils/cropImage';
+import cx from 'classnames';
 
 interface Props {
   uploadFunction?: (image: Blob) => void;
@@ -43,7 +44,6 @@ const ImageDrop: React.StatelessComponent<ImageDropProps> = (
   );
 };
 
-// TODO Allow for several images in one component
 export default class ImageUpload extends React.Component<Props, State> {
   readonly state: State = {
     hasImage: false
@@ -94,33 +94,43 @@ export default class ImageUpload extends React.Component<Props, State> {
     return (
       <div className="_legoEditor_imageUploader_wrapper">
         <div className="_legoEditor_imageUploader_root">
-          {currentImage ? (
-            <div className="_legoEditor_imageUploader_crop_container">
-              <ReactCrop
-                src={currentImage.url}
-                onChange={this.handleCrop}
-                onImageLoaded={this.onImageLoaded}
-                crop={crop}
-              />
-            </div>
-          ) : (
-            <div>
+          <div className="_legoEditor_imageUploader_crop_wrapper">
+            {currentImage ? (
+              <div className="_legoEditor_imageUploader_crop_container">
+                <ReactCrop
+                  src={currentImage.url}
+                  onChange={this.handleCrop}
+                  onImageLoaded={this.onImageLoaded}
+                  crop={crop}
+                />
+              </div>
+            ) : (
               <ImageDrop onDrop={this.onDrop} />
-            </div>
-          )}
-          <button
-            className="_legoEditor_imageUploader_applyButton"
-            onClick={this.submitImage}
-          >
-            Apply
-          </button>
-
-          <button
-            className="_legoEditor_imageUploader_cancelButton"
-            onClick={this.cancel}
-          >
-            Cancel
-          </button>
+            )}
+          </div>
+          <div className="_legoEditor_imageUploader_buttonContainer">
+            <button
+              className={cx(
+                '_legoEditor_imageUploader_applyButton',
+                '_legoEditor_imageUploader_button'
+              )}
+              onClick={this.submitImage}
+              type="button"
+            >
+              Apply
+            </button>
+
+            <button
+              className={cx(
+                '_legoEditor_imageUploader_cancelButton',
+                '_legoEditor_imageUploader_button'
+              )}
+              onClick={this.cancel}
+              type="button"
+            >
+              Cancel
+            </button>
+          </div>
         </div>
       </div>
     );