Fix/ji 6152 review adjustments (#235)

* JI-6152 fix bug with replicating button and fix minor styling issues

* JI-6152 more styling adjustments

* JI-6152 fix styling issues and focus

* JI-6152 adjustments to badge

* JI-6152 remove inline styling

---------

Co-authored-by: Gwenillia <[email protected]>

Author: wwalmnes

scripts/h5peditor-file-uploader.js

@@ -84,13 +84,16 @@ H5PEditor.FileUploader = (function ($, EventDispatcher) {
     /**
      * Open the file selector and trigger upload upon selecting file.
      */
-    self.openFileSelector = function () {
+    self.openFileSelector = function ({ onChangeCallback } = {}) {
       // Create a file selector
       const input = document.createElement('input');
       input.type = 'file';
       input.setAttribute('accept', determineAllowedMimeTypes());
       input.style='display:none';
       input.addEventListener('change', function () {
+        if (typeof onChangeCallback === 'function') {
+          onChangeCallback();
+        }
         // When files are selected, upload them
         self.uploadFiles(this.files);
         document.body.removeChild(input);

scripts/h5peditor-image.js

@@ -217,7 +217,11 @@ ns.widgets.image.prototype.appendTo = function ($wrapper) {
     if (this.boxEl.classList.contains('h5p-dnd__box--has-image')) {
       if ((e.code === 'Space' || e.code === 'Enter')) {
         this.isOriginalImage = true;
-        this.openFileSelector();
+        this.openFileSelector({
+          onChangeCallback: () => {
+            this.removeImage();
+          }
+        });
       }
     }
   });
@@ -231,7 +235,11 @@ ns.widgets.image.prototype.appendTo = function ($wrapper) {
     if (this.boxEl.classList.contains('h5p-dnd__box--has-image')
       && e.target.closest('.h5p-dnd__img__container') === imageContainerEl) {
       this.isOriginalImage = true;
-      this.openFileSelector();
+      this.openFileSelector({
+        onChangeCallback: () => {
+          this.removeImage();
+        }
+      });
     }
   });
 
@@ -352,14 +360,14 @@ ns.widgets.image.prototype.handleDragAndDrop = function (e) {
 ns.widgets.image.prototype.getBaseMarkup = function () {
   return `
     <div class="h5p-dnd__box__block"></div>
-    <div class="h5p-dnd__column h5p-dnd__column--is-highlighted h5p-dnd__column--is-fixed h5p-dnd__column--hide-when-focus">
+    <div class="h5p-dnd__column h5p-dnd__column--is-highlighted h5p-dnd__column--is-fixed h5p-dnd__column--hide-when-focus h5p-dnd__column--is-padded">
       <div class="h5p-dnd__upload-image-svg"></div>
       <button class="h5p-dnd__btn h5p-dnd__btn__upload" type="button">${ns.t('core', 'uploadImage')}</button>
     </div>
 
-    <div class="h5p-dnd__column h5p-dnd__column--hide-when-focus">
+    <div class="h5p-dnd__column h5p-dnd__column--hide-when-focus h5p-dnd__column--is-padded">
       <div>
-        ${ns.t('core', 'dragAndDropAndPasteImage')} <span class="h5p-dnd__badge">ctrl&nbsp;(⌘)</span> + <span class="h5p-dnd__badge">v</span>
+        ${ns.t('core', 'dragAndDropAndPasteImage')} <span class="h5p-dnd__badge">ctrl<span class="h5p-dnd__badge__separator"></span>⌘</span> + <span class="h5p-dnd__badge">v</span>
       </div>
       <div class="h5p-errors"></div>
     </div>
@@ -402,7 +410,7 @@ ns.widgets.image.prototype.getUploadedMarkup = function () {
           <img class="h5p-dnd__img" src="${source}" alt="${altText}" />
         </div>
       </div>
-      <div class="h5p-dnd__column h5p-dnd__column--show-when-focus">
+      <div class="h5p-dnd__column h5p-dnd__column--show-when-focus h5p-dnd__column__drag-text">
         <div class="h5p-dnd__text">
           ${ns.t('core', 'dragAndDropAndPasteReplaceImage')}
         </div>
@@ -472,6 +480,12 @@ ns.widgets.image.prototype.addFile = function () {
   actionsContainerEl.classList.add('h5p-image-action-container');
   actionsContainerEl.innerHTML = this.getImageActionMarkup();
 
+  const editBtnEl = actionsContainerEl.querySelector('.h5p-editing-image-button');
+  // Need some time to change focus
+  setTimeout(() => {
+    editBtnEl.focus({focusVisible: true});
+  }, 100);
+
   this.boxContainerEl.insertBefore(actionsContainerEl, this.boxEl.nextElementSibling);
 
   this.boxContainerEl.querySelector('.delete').addEventListener('click', (e) => {

styles/css/application.css

@@ -20,11 +20,6 @@
     display: inline;
   }
 
-  .h5p-editor-image-buttons {
-    float: left;
-    clear: both;
-  }
-
   .library {
     border: 0;
   }

styles/scss/_form-field.scss

@@ -20,7 +20,7 @@
   flex-flow: row;
   align-items: stretch;
   justify-content: center;
-  border: solid 2px #D0CFD4;
+  border: solid 2px $dnd-gray-light;
   border-radius: 6px;
   flex: 1;
   min-height: 150px;
@@ -29,7 +29,7 @@
 }
 
 .h5p-dnd__box--is-dashed {
-  border: dashed 2px #D0CFD4;
+  border: dashed 2px $dnd-gray-light;
 }
 
 .h5p-dnd__box--is-inline {
@@ -39,14 +39,15 @@
 .h5p-dnd__box--has-image {
   flex-flow: column;
   width: min-content;
+  min-height: auto;
 }
 
 .h5p-dnd__box:focus-visible {
   outline: none;
 }
 
 .h5p-dnd__box:not(.h5p-dnd__box--is-uploading):hover {
-  border: dashed 2px #ACACAC;
+  border: dashed 2px $dnd-gray-dark;
 }
 
 .h5p-dnd__box--has-image:not(.h5p-dnd__box--is-uploading):hover,
@@ -104,6 +105,10 @@
   display: none;
 }
 
+.h5p-dnd__column--is-padded {
+  padding: 0 20px;
+}
+
 .h5p-dnd__box--is-dragging .h5p-dnd__column--hide-when-focus {
   display: none;
 }
@@ -113,6 +118,10 @@
   display: flex;
 }
 
+.h5p-dnd__column__drag-text {
+  margin-top: -5px;
+}
+
 .h5p-dnd__btn {
   display: flex;
   align-items: center;
@@ -139,6 +148,7 @@
     vertical-align: middle;
     font-size: 1.5em;
     line-height: 0.9;
+    font-weight: 400;
   }
 }
 
@@ -156,14 +166,32 @@
   background: #E7E9EE;
   color: #434446;
   text-transform: uppercase;
-  font-weight: 700;
+  font-weight: 400;
   font-size: 12px;
+  font-family: 'Arial Black';
   border-radius: 6px;
   padding: 3px 8px;
+  display: inline-flex;
+
+  .h5p-dnd__badge__separator {
+    border-left: solid 2px rgba(67, 68, 70, 0.25);
+    margin: 3px 6px;
+    overflow: hidden;
+    display: inline-block;
+    overflow: hidden;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    position: relative;
+  }
 }
 
 .h5p-dnd__img {
   max-width: 175px;
+  max-height: 120px;
+  min-width: 40px;
+  min-height: 40px;
   border-radius: 6px;
   display: block;
 }

styles/scss/_h5peditor-drag-and-drop.scss

@@ -59,4 +59,6 @@ $form-label-importance-high: #356593;
 // Drag and drop
 $dnd-blue: #1670DF;
 $dnd-blue-faded: #f6faff;
-$dnd-text-color: #454347;
+$dnd-text-color: #454347;
+$dnd-gray-light: #D0CFD4;
+$dnd-gray-dark: #ACACAC;