Merge pull request #189 from VanishMax/develop

Add image resizing and fix some phrases

Author: illright

get_css_bundles.py

@@ -84,6 +84,7 @@
         'create-project/activity',
         'create-project/actions',
         'page-components/create-activity',
+        'page-components/modal-dialog',
     ],
     'projects_past': [
         'page-components/tagline',

package.json

@@ -68,6 +68,7 @@
     "stylelint-config-standard": "^20.0.0",
     "stylelint-scss": "^3.16.1",
     "svelte": "^3.18.0",
+    "svelte-easy-crop": "^1.0.3",
     "swiper": "^5.3.7"
   },
   "repository": {

src/components/common/image-resizer.svelte

@@ -0,0 +1,69 @@
+<script>
+  import { createEventDispatcher } from 'svelte';
+  import Button from 'ui/button.svelte';
+  import Dialog from 'ui/dialog.svelte';
+  import Modal from 'ui/modal.svelte';
+  import Cropper from 'svelte-easy-crop';
+
+  export let image;
+  let crop = { x: 0, y: 0 };
+  let pixels = null;
+  export let aspectRatio = 1;
+  export let isOpen = false;
+  export let error = null;
+
+  function saveBounds(event) {
+    pixels = event.detail.pixels;
+  }
+
+  const dispatch = createEventDispatcher();
+</script>
+
+<style>
+  .image-resizer {
+    position: relative;
+    width: 15em;
+    border-radius: .5em;
+    overflow: hidden;
+    height: 9em;
+  }
+
+  @media only screen and (min-width: 360px) {
+    .image-resizer {
+      width: 18em;
+      height: 10em;
+    }
+  }
+
+  @media only screen and (min-width: 640px) {
+    .image-resizer {
+      width: 32em;
+      height: 18em;
+    }
+  }
+</style>
+
+<Modal bind:isOpen>
+  {#if image != null}
+    <Dialog
+      title="Resize the image"
+      closeCallback={() => isOpen = false}
+    >
+      <div class="image-resizer" slot="content">
+        <Cropper {image} {crop} aspect={aspectRatio} on:cropcomplete={saveBounds} />
+      </div>
+      <div class="actions" slot="content">
+        {#if error != null}
+          {error}
+        {/if}
+        <Button isDanger on:click={() => isOpen = false}>cancel</Button>
+        <Button
+          isFilled
+          on:click={() => dispatch('image-cropped', pixels)}
+        >
+          upload
+        </Button>
+      </div>
+    </Dialog>
+  {/if}
+</Modal>

src/components/projects/new/edit-activity.svelte

@@ -216,7 +216,7 @@
         classname="work-hours"
         id="work-hours{index}"
         title="Work hours"
-        subtitle="Reward rate: {HOURLY_RATE} ipts/hour"
+        subtitle="Estimated time of work, rewarded {HOURLY_RATE} ipts/hour"
         error={
           (errors.workingHoursNotSpecified && "Working hours must be specified.")
           || (errors.workingHoursInvalid && "Must be positive.")

src/components/projects/new/project-image-picker.svelte

@@ -1,51 +1,28 @@
 <script>
+  import { createEventDispatcher } from 'svelte';
   import Button from 'ui/button.svelte';
   import FileInput from 'ui/file-input.svelte';
-  import * as api from '@/utils/api.js';
   import { API_HOST_BROWSER } from '@/constants/env.js';
   import maxSizeMB from '@/constants/backend/file-upload-limit.js';
 
   export let value = null;
-  let promise = null;
-  let blobURL = null;
   let error = null;
 
-  async function handleImageUpload(event) {
-    let file = event.target.files[0];
+  function validateUpload(event) {
+    const file = event.target.files[0];
     if (file.size > maxSizeMB * 1024 * 1024) {
       error = `Selected file is too large (${maxSizeMB} MB max).`;
       return;
     }
-
-    blobURL = URL.createObjectURL(file, { type: file.type });
-    const formData = new FormData();
-    formData.append('file', file);
-
-    promise = api.post('/file', {
-      data: formData,
-    });
-
-    try {
-      const resp = await promise;
-      if (resp.ok) {
-        value = (await resp.json()).id;
-        error = null;
-      } else {
-        console.error(await resp.text());
-        error = 'Upload failed. Try again.';
-      }
-    } catch (e) {
-      console.error(e);
-      error = 'Upload failed. Try again.';
-    }
+    dispatch('resize-image', file);
   }
 
   function clearValue() {
     value = null;
-    promise = null;
-    blobURL = null;
     error = null;
   }
+
+  const dispatch = createEventDispatcher();
 </script>
 
 {#if value != null}
@@ -54,29 +31,9 @@
     <svg src="images/icons/trash-2.svg" class="icon" />
     <span class="text">delete</span>
   </Button>
-{:else if promise != null}
-  {#await promise.then(resp => resp.json()).catch(() => promise = null)}
-    <div class="loading-wrapper shadow-1">
-      <img
-        src={blobURL || '/images/create-project/placeholder.svg'}
-        alt="Project image"
-      />
-      <div class="status-overlay">
-        <div class="lds-ellipsis">
-          <div></div><div></div><div></div><div></div>
-        </div>
-      </div>
-    </div>
-  {:then image}
-    <img src="{API_HOST_BROWSER}/file/{image.id}" alt="Project image" class="shadow-1 mr" />
-    <Button isDanger on:click={clearValue} tooltip="Delete image">
-      <svg src="images/icons/trash-2.svg" class="icon" />
-      <span class="text">delete</span>
-    </Button>
-  {/await}
 {:else}
   <div class="options">
-    <FileInput on:change={handleImageUpload} accept="image/*" />
+    <FileInput on:change={validateUpload} accept="image/*" />
     {#if error}
       <p class="error">{error}</p>
     {/if}

src/containers/projects/new/step-0.svelte

@@ -1,6 +1,7 @@
 <script>
   import { createEventDispatcher } from 'svelte';
   import Button from 'ui/button.svelte';
+  import Dropdown from 'ui/dropdown.svelte';
   import DraftCard from '@/components/projects/new/draft-card.svelte';
   import {
     getBlankProject,
@@ -34,6 +35,12 @@
   <div class="subtitle">
     Unleash your creative genius — we're here to help you!
   </div>
+  <div class="advice">
+    <Dropdown label="what is a project?">
+      A project could be an event, an olympiad or any other volunteering opportunity. <br />
+      Create some activities and have volunteers apply to them.
+    </Dropdown>
+  </div>
   <img class="illustration" src="/images/create-project/create-project.svg" alt="" />
 </div>
 

src/containers/projects/new/step-1.svelte

@@ -52,7 +52,7 @@
       <span class="lb">This is shown on the project card to catch attention.</span>
       <span class="lb">Best to use 16:9 photos.</span>
     </span>
-    <ProjectImagePicker bind:value={$project.image_id} />
+    <ProjectImagePicker bind:value={$project.image_id} on:resize-image />
   </FormField>
 
   <FormField
@@ -63,7 +63,7 @@
     error={($project.organizer === '' && "The organizer field must not be empty.") || null}
   >
     <span slot="subtitle" class="desc">
-      Name of the organizing department or individual.
+      Give the volunteers a brief idea of who's behind this project (department or individual).
     </span>
     <TextField
       id="organizer"

src/routes/projects/new.svelte

@@ -23,6 +23,7 @@
   import StepOne from '@/containers/projects/new/step-1.svelte';
   import StepTwo from '@/containers/projects/new/step-2.svelte';
   import StepThree from '@/containers/projects/new/step-3.svelte';
+  import ImageResizer from '@/components/common/image-resizer.svelte';
   import * as api from '@/utils/api.js';
   import generateQueryString from '@/utils/generate-query-string.js';
   import {
@@ -54,6 +55,39 @@
     }
   });
 
+  const imageResizer = {
+    open: false,
+    image: null,
+    file: null,
+    error: null,
+    show({ detail: file }) {
+      imageResizer.open = true;
+      imageResizer.file = file;
+      imageResizer.image = URL.createObjectURL(file, { type: file.type });
+    },
+    async uploadImage({ detail: pixels }) {
+      const formData = new FormData();
+      formData.append('file', imageResizer.file);
+      formData.append('x', pixels.x);
+      formData.append('y', pixels.y);
+      formData.append('width', pixels.width);
+      formData.append('height', pixels.height);
+
+      try {
+        const resp = await api.json(api.post('/file', {
+          data: formData,
+        }));
+
+        $project.image_id = resp.id;
+        imageResizer.error = null;
+        imageResizer.open = false;
+      } catch (e) {
+        console.error(e);
+        imageResizer.error = 'Upload failed. Try again.';
+      }
+    },
+  };
+
   function goToStep(stepIdx) {
     goto(`/projects/new?step=${stepIdx}`);
   }
@@ -244,6 +278,7 @@
         {project}
         {duplicateName}
         {autosaved}
+        on:resize-image={imageResizer.show}
       />
     {:else if step === 2}
       <StepTwo
@@ -261,4 +296,11 @@
       />
     {/if}
   </div>
+  <ImageResizer
+    aspectRatio={16/9}
+    image={imageResizer.image}
+    error={imageResizer.error}
+    bind:isOpen={imageResizer.open}
+    on:image-cropped={imageResizer.uploadImage}
+  />
 </Layout>

static/css/bundles/projects-id-edit.min.css

@@ -47,6 +47,17 @@ h2 {
     font-size: .9rem;
   }
 
+  .advice {
+    margin-left: -1em;
+    margin-top: .5em;
+
+    .relative-wrapper {
+      padding: 1em;
+      max-width: 20em;
+      font-weight: 300;
+    }
+  }
+
   .tablet {
     display: none;
   }

static/css/bundles/projects-new.min.css

@@ -4519,6 +4519,11 @@ supports-hyperlinks@^2.0.0:
     has-flag "^4.0.0"
     supports-color "^7.0.0"
 
+svelte-easy-crop@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/svelte-easy-crop/-/svelte-easy-crop-1.0.3.tgz#3a5bd36320b5316b9ccf36c78b251a4f6fbb44a1"
+  integrity sha512-Jo0pZdnR43PVVldf28+MT50DD7LVY4rtnPNRF4Xuy5uiHgz+ixq9cqTK+/u5xbHs4cObzCbEbibzSRbAWObnJA==
+
 svelte@^3.18.0:
   version "3.20.1"
   resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.20.1.tgz#8417fcd883a2f534b642a0737368272e651cf3ac"