From 1dee71d760eadf02b996f32a2ef8611eb0b354ec Mon Sep 17 00:00:00 2001
From: Guo Xiang Tan <tgx_world@hotmail.com>
Date: Thu, 21 Feb 2019 22:30:01 +0800
Subject: [PATCH] UX: Disabled lightbox expand button when loading image meta.
---
.../javascripts/discourse/components/image-uploader.js.es6 | 4 ++++
.../discourse/templates/components/image-uploader.hbs | 3 ++-
2 files changed, 6 insertions(+), 1 deletion(-)
diff --git a/app/assets/javascripts/discourse/components/image-uploader.js.es6 b/app/assets/javascripts/discourse/components/image-uploader.js.es6
index aaf417e5fd4..8ed486ade90 100644
--- a/app/assets/javascripts/discourse/components/image-uploader.js.es6
+++ b/app/assets/javascripts/discourse/components/image-uploader.js.es6
@@ -6,6 +6,7 @@ import { popupAjaxError } from "discourse/lib/ajax-error";
export default Ember.Component.extend(UploadMixin, {
classNames: ["image-uploader"],
+ loadingLightbox: false,
init() {
this._super(...arguments);
@@ -71,6 +72,8 @@ export default Ember.Component.extend(UploadMixin, {
if (this.get("imageFilename")) {
this._openLightbox();
} else {
+ this.set("loadingLightbox", true);
+
ajax(`/uploads/lookup-metadata`, {
type: "POST",
data: { url: this.get("imageUrl") }
@@ -84,6 +87,7 @@ export default Ember.Component.extend(UploadMixin, {
});
this._openLightbox();
+ this.set("loadingLightbox", false);
})
.catch(popupAjaxError);
}
diff --git a/app/assets/javascripts/discourse/templates/components/image-uploader.hbs b/app/assets/javascripts/discourse/templates/components/image-uploader.hbs
index d0769d0c62f..c795a851a5a 100644
--- a/app/assets/javascripts/discourse/templates/components/image-uploader.hbs
+++ b/app/assets/javascripts/discourse/templates/components/image-uploader.hbs
@@ -13,7 +13,8 @@
{{d-button icon="discourse-expand"
title='expand'
class="btn image-uploader-lightbox-btn no-text"
- action=(action "toggleLightbox")}}
+ action=(action "toggleLightbox")
+ disabled=loadingLightbox}}
{{/if}}
<span class="btn {{unless uploading 'hidden'}}">{{i18n 'upload_selector.uploading'}} {{uploadProgress}}%</span>