CLEANUP #1: Upload progress and link modal

assets/javascripts/wizard/components/wizard-composer-editor.js.es6

@@ -54,6 +54,7 @@ export default ComposerEditor.extend({
   showUploadModal() {
     $(".wizard-composer-upload").trigger("click");
   },
+  
   _setUploadPlaceholderSend() {
     if (!this.composer.get("reply")) {
       this.composer.set("reply", "");
@@ -64,7 +65,9 @@ export default ComposerEditor.extend({
   _bindUploadTarget() {
     this._super(...arguments);
     const $element = $(this.element);
+    
     $element.off("fileuploadsubmit");
+    
     $element.on("fileuploadsubmit", (e, data) => {
       const max = this.siteSettings.simultaneous_uploads;
 
@@ -116,7 +119,33 @@ export default ComposerEditor.extend({
 
       return isUploading;
     });
+    
+    $element.on("fileuploadprogressall", (e, data) => {
+      this.set(
+        "uploadProgress",
+        parseInt((data.loaded / data.total) * 100, 10)
+      );
+    });
+    
+    $element.on("fileuploadfail", (e, data) => {
+      this._setUploadPlaceholderDone(data);
+      this._resetUpload(true);
+
+      const userCancelled = this._xhr && this._xhr._userCancelled;
+      this._xhr = null;
+
+      if (!userCancelled) {
+        displayErrorForUpload(data, this.siteSettings);
+      }
+    });
   },
+  
+  click(e) {
+    if ($(e.target).hasClass('wizard-composer-hyperlink')) {
+      this.set('showHyperlinkBox', false);
+    }
+  },
+  
   actions: {
     extraButtons(toolbar) {
       if (this.allowUpload && this.uploadIcon && !this.site.mobileView) {
@@ -135,18 +164,22 @@ export default ComposerEditor.extend({
         group: "insertions",
         shortcut: "K",
         trimLeading: true,
+        unshift: true,
         sendAction: (event) => component.set("showHyperlinkBox", true),
       });
     },
+    
     previewUpdated($preview) {
       highlightSyntax($preview[0], this.siteSettings, this.session);
       this._super(...arguments);
     },
+    
     addLink(linkName, linkUrl) {
       let link = `[${linkName}](${linkUrl})`;
       this.appEvents.trigger("composer:insert-text", link);
       this.set("showHyperlinkBox", false);
     },
+    
     hideBox() {
       this.set("showHyperlinkBox", false);
     },

assets/javascripts/wizard/components/wizard-composer-hyperlink.js.es6

@@ -1,12 +1,15 @@
 import Component from "@ember/component";
 
 export default Component.extend({
+  classNames: ['wizard-composer-hyperlink'],
+  
   actions: {
     addLink() {
       this.addLink(this.linkName, this.linkUrl);
     },
+    
     hideBox() {
       this.hideBox();
-    },
+    }
   },
 });

assets/javascripts/wizard/templates/components/wizard-composer-editor.hbs

@@ -15,10 +15,21 @@
   disabled=disableTextarea
   outletArgs=(hash composer=composer editorType="composer")}}
 
-  {{input class="wizard-composer-upload hidden-upload-field" disabled=uploading type="file" multiple=true }}
+{{input
+  class="wizard-composer-upload hidden-upload-field"
+  disabled=uploading
+  type="file"
+  multiple=true}}
 
-  {{#if showHyperlinkBox}}
-    {{wizard-composer-hyperlink
-      addLink=(action 'addLink')
-      hideBox=(action 'hideBox')}}
-  {{/if}}
+{{#if showHyperlinkBox}}
+  {{wizard-composer-hyperlink
+    addLink=(action 'addLink')
+    hideBox=(action 'hideBox')}}
+{{/if}}
+
+  <div id="file-uploading">
+    {{loading-spinner size="small"}}<span>{{i18n "upload_selector.uploading"}} {{uploadProgress}}%</span>
+    {{#if isCancellable}}
+      <a href id="cancel-file-upload" {{action "cancelUpload"}}>{{d-icon "times"}}</a>
+    {{/if}}
+  </div>

assets/javascripts/wizard/templates/components/wizard-composer-hyperlink.hbs

@@ -1,9 +1,21 @@
-<h3>{{i18n "wizard_composer.insert_hyperlink.heading"}}</h3>
-{{input class="composer-link-name" placeholder=(i18n 'wizard_composer.insert_hyperlink.placeholder.link_name') type="text" value=linkName}}
-{{input class="composer-link-url" placeholder=(i18n 'wizard_composer.insert_hyperlink.placeholder.link_url') type="text" value=linkUrl}}
-{{d-button label="wizard_composer.insert_hyperlink.ok"
-           class="add-link"
-           click=(action 'addLink')}}
-{{d-button label="wizard_composer.insert_hyperlink.cancel"
-           class="hide-hyperlink-box"
-           click=(action 'hideBox')}}
+<div class="wizard-composer-hyperlink-contents">
+  <h3>{{i18n "wizard_composer.insert_hyperlink.heading"}}</h3>
+  {{input
+    class="composer-link-name"
+    placeholder=(i18n 'wizard_composer.insert_hyperlink.placeholder.link_name')
+    type="text"
+    value=linkName}}
+  {{input
+    class="composer-link-url"
+    placeholder=(i18n 'wizard_composer.insert_hyperlink.placeholder.link_url')
+    type="text"
+    value=linkUrl}}
+  {{d-button
+    label="wizard_composer.insert_hyperlink.ok"
+    class="add-link btn-primary"
+    click=(action 'addLink')}}
+  {{d-button
+    label="wizard_composer.insert_hyperlink.cancel"
+    class="hide-hyperlink-box btn-danger"
+    click=(action 'hideBox')}}
+</div>

assets/javascripts/wizard/templates/components/wizard-field-composer.hbs

@@ -1,10 +1,11 @@
-{{wizard-composer-editor replyPlaceholder=field.placeholder
-                         composer=composer
-                         groupsMentioned=(action "groupsMentioned")
-                         cannotSeeMention=(action "cannotSeeMention")
-                         importQuote=(action "importQuote")
-                         togglePreview=(action "togglePreview")
-                         afterRefresh=(action "afterRefresh")}}
+{{wizard-composer-editor
+  replyPlaceholder=field.placeholder
+  composer=composer
+  groupsMentioned=(action "groupsMentioned")
+  cannotSeeMention=(action "cannotSeeMention")
+  importQuote=(action "importQuote")
+  togglePreview=(action "togglePreview")
+  afterRefresh=(action "afterRefresh")}}
 
 <button class='wizard-btn toggle-preview' {{action 'togglePreview'}}>
   <span class="d-button-label">{{i18n togglePreviewLabel}}</span>

assets/stylesheets/wizard/custom/composer.scss

@@ -42,6 +42,10 @@
   }
 }
 
+.wizard-field-composer .wmd-controls {
+  position: relative;
+}
+
 .wizard-field-composer.show-preview .d-editor-textarea-wrapper {
   display: none;
 }
@@ -55,6 +59,7 @@
   background-color: var(--secondary);
   border: 1px solid var(--primary-medium);
   flex: 1;
+  max-width: unset;
 }
 
 .d-editor-textarea-wrapper {
@@ -182,16 +187,46 @@
 
 .d-editor-button-bar .btn {
   border: none;
+  font-size: 0.9em;
 }
 
 .wizard-composer-upload {
   display: none;
 }
 
-.composer-link-url, .composer-link-name {
-  display: block;
+.wizard-composer-hyperlink {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba($primary, 0.8);
+}
+
+.wizard-composer-hyperlink-contents {
+  background-color: $secondary;
+  padding: 20px;
+  
+  h3 {
+    margin-top: 0;
+  }
+  
+  .composer-link-url,
+  .composer-link-name {
+    display: block;
+    min-width: 450px;
+  }
 }
 
 .hide-hyperlink-box, .add-link {
   display: inline;
 }
+
+#file-uploading {
+  position: absolute;
+  bottom: -40px;
+  right: 0;
+}

assets/stylesheets/wizard/wizard_custom.scss

@@ -2,7 +2,10 @@
 @import "common/foundation/variables";
 @import "common/base/code_highlighting";
 @import "common/base/modal";
+@import "common/components/buttons";
+@import "common/d-editor";
 @import "desktop/modal";
+
 @import "custom/base";
 @import "custom/wizard";
 @import "custom/step";