diff --git a/app/assets/javascripts/discourse/app/components/composer-editor.js b/app/assets/javascripts/discourse/app/components/composer-editor.js index 552e2a9beba..7ce199ce3ad 100644 --- a/app/assets/javascripts/discourse/app/components/composer-editor.js +++ b/app/assets/javascripts/discourse/app/components/composer-editor.js @@ -831,10 +831,12 @@ export default Component.extend({ }); if (this.site.mobileView) { - $("#reply-control .mobile-file-upload").on("click.uploader", function () { - // redirect the click on the hidden file input - $("#mobile-uploader").click(); - }); + const uploadButton = document.getElementById("mobile-file-upload"); + uploadButton.addEventListener( + "click", + () => document.getElementById("file-uploader").click(), + false + ); } }, diff --git a/app/assets/javascripts/discourse/app/controllers/upload-selector.js b/app/assets/javascripts/discourse/app/controllers/upload-selector.js deleted file mode 100644 index 6ccf7f4fbbb..00000000000 --- a/app/assets/javascripts/discourse/app/controllers/upload-selector.js +++ /dev/null @@ -1,69 +0,0 @@ -import { - allowsAttachments, - authorizedExtensions, - uploadIcon, -} from "discourse/lib/uploads"; -import Controller from "@ember/controller"; -import I18n from "I18n"; -import ModalFunctionality from "discourse/mixins/modal-functionality"; -import discourseComputed from "discourse-common/utils/decorators"; -import { equal } from "@ember/object/computed"; - -export default Controller.extend(ModalFunctionality, { - imageUrl: null, - local: equal("selection", "local"), - remote: equal("selection", "remote"), - selection: "local", - - @discourseComputed() - allowAdditionalFormats() { - return allowsAttachments(this.currentUser.staff, this.siteSettings); - }, - - @discourseComputed() - uploadIcon() { - return uploadIcon(this.currentUser.staff, this.siteSettings); - }, - - @discourseComputed("allowAdditionalFormats") - title(allowAdditionalFormats) { - const suffix = allowAdditionalFormats ? "_with_attachments" : ""; - return `upload_selector.title${suffix}`; - }, - - @discourseComputed("selection", "allowAdditionalFormats") - tip(selection, allowAdditionalFormats) { - const suffix = allowAdditionalFormats ? "_with_attachments" : ""; - return I18n.t(`upload_selector.${selection}_tip${suffix}`); - }, - - @discourseComputed() - supportedFormats() { - const extensions = authorizedExtensions( - this.currentUser.staff, - this.siteSettings - ); - - return `(${extensions})`; - }, - - actions: { - upload() { - if (this.local) { - $(".wmd-controls").fileupload("add", { - fileInput: $("#filename-input"), - }); - } else { - const imageUrl = this.imageUrl || ""; - const toolbarEvent = this.toolbarEvent; - - if (imageUrl.match(/\.(jpg|jpeg|png|gif|heic|heif|webp)$/)) { - toolbarEvent.addText(`![](${imageUrl})`); - } else { - toolbarEvent.addText(imageUrl); - } - } - this.send("closeModal"); - }, - }, -}); diff --git a/app/assets/javascripts/discourse/app/routes/application.js b/app/assets/javascripts/discourse/app/routes/application.js index 9099ffffb38..0f697564f75 100644 --- a/app/assets/javascripts/discourse/app/routes/application.js +++ b/app/assets/javascripts/discourse/app/routes/application.js @@ -137,11 +137,8 @@ const ApplicationRoute = DiscourseRoute.extend(OpenComposer, { showModal("not-activated", { title: "log_in" }).setProperties(props); }, - showUploadSelector(toolbarEvent) { - showModal("uploadSelector").setProperties({ - toolbarEvent, - imageUrl: null, - }); + showUploadSelector() { + document.getElementById("file-uploader").click(); }, showKeyboardShortcutsHelp() { diff --git a/app/assets/javascripts/discourse/app/templates/components/composer-editor.hbs b/app/assets/javascripts/discourse/app/templates/components/composer-editor.hbs index ea68f8598ee..73757105793 100644 --- a/app/assets/javascripts/discourse/app/templates/components/composer-editor.hbs +++ b/app/assets/javascripts/discourse/app/templates/components/composer-editor.hbs @@ -19,6 +19,4 @@ disabled=disableTextarea outletArgs=(hash composer=composer editorType="composer")}} -{{#if site.mobileView}} - -{{/if}} + diff --git a/app/assets/javascripts/discourse/app/templates/composer.hbs b/app/assets/javascripts/discourse/app/templates/composer.hbs index fa362d7ccee..6cca5bcf1e1 100644 --- a/app/assets/javascripts/discourse/app/templates/composer.hbs +++ b/app/assets/javascripts/discourse/app/templates/composer.hbs @@ -200,7 +200,7 @@ {{plugin-outlet name="composer-mobile-buttons-bottom" connectorTagName="" args=(hash model=model)}} {{#if allowUpload}} - + {{d-icon uploadIcon}} {{/if}} diff --git a/app/assets/javascripts/discourse/app/templates/modal/upload-selector.hbs b/app/assets/javascripts/discourse/app/templates/modal/upload-selector.hbs deleted file mode 100644 index 4e90b908837..00000000000 --- a/app/assets/javascripts/discourse/app/templates/modal/upload-selector.hbs +++ /dev/null @@ -1,45 +0,0 @@ -{{#d-modal-body title=title class="upload-selector"}} -
- {{radio-button name="upload" id="local" value="local" selection=selection}} - - {{#if local}} -
-
- {{tip}} - {{#if allowAdditionalFormats}} - {{hidden-details label="upload_selector.supported_formats" details=supportedFormats}} - {{/if}} -
- {{/if}} -
-
- {{radio-button name="upload" id="remote" value="remote" selection=selection}} - - {{#if remote}} -
- {{input value=imageUrl placeholder="http://example.com/image.png"}} - {{tip}} - {{#if allowAdditionalFormats}} - {{hidden-details label="upload_selector.supported_formats" details=supportedFormats}} - {{/if}} -
- {{/if}} -
-
-
-

- {{#if capabilities.canPasteImages}} - {{i18n "upload_selector.hint"}} - {{else}} - {{i18n "upload_selector.hint_for_supported_browsers"}} - {{/if}} -

-
-
-{{/d-modal-body}} - -
- {{d-button action=(action "upload") class="btn-primary" icon=uploadIcon label="upload"}} - {{plugin-outlet name="upload-actions"}} - {{d-modal-cancel close=(route-action "closeModal")}} -
diff --git a/app/assets/stylesheets/common/base/compose.scss b/app/assets/stylesheets/common/base/compose.scss index 67e7165b61b..31ddf209d8c 100644 --- a/app/assets/stylesheets/common/base/compose.scss +++ b/app/assets/stylesheets/common/base/compose.scss @@ -362,6 +362,10 @@ #file-uploading { color: var(--primary-high); } + + #file-uploader { + display: none; + } } .autocomplete { diff --git a/app/assets/stylesheets/desktop/upload.scss b/app/assets/stylesheets/desktop/upload.scss index 5efef681a15..082f4f9804f 100644 --- a/app/assets/stylesheets/desktop/upload.scss +++ b/app/assets/stylesheets/desktop/upload.scss @@ -1,49 +1,3 @@ -.upload-selector { - label { - display: inline-block; - padding-left: 10px; - } - &.modal-body { - width: 460px; - } - .radios { - min-height: 60px; - display: flex; - align-items: flex-start; - label { - flex: 1 0 auto; - margin-right: 1em; - margin-top: 1px; - } - .inputs { - width: 100%; - input { - width: 90%; - margin: 0 0 5px 0; - } - input[type="file"] { - font-size: $font-0; - line-height: $line-height-medium; - } - .description, - .hint { - color: var(--primary-med-or-secondary-med); - display: block; - } - .hint { - font-style: italic; - margin: 5px 0 0 0; - } - .label { - margin: 0 0 5px 0; - } - } - } - .radios:last-child { - min-height: 20px; - } -} - .uploaded-image-preview { height: 270px; width: 400px; diff --git a/app/assets/stylesheets/mobile/compose.scss b/app/assets/stylesheets/mobile/compose.scss index e6d6dd4dc31..6211b8ea1d3 100644 --- a/app/assets/stylesheets/mobile/compose.scss +++ b/app/assets/stylesheets/mobile/compose.scss @@ -171,10 +171,6 @@ } } - #mobile-uploader { - display: none; - } - .title-and-category, .user-selector { margin: 0; diff --git a/app/assets/stylesheets/mobile/upload.scss b/app/assets/stylesheets/mobile/upload.scss index 6900f8d1a26..ea28661b908 100644 --- a/app/assets/stylesheets/mobile/upload.scss +++ b/app/assets/stylesheets/mobile/upload.scss @@ -1,37 +1,3 @@ -.upload-selector { - input[type="text"] { - width: calc(100% - 20px); - } - input[type="file"] { - font-size: $font-0; - line-height: $line-height-medium; - } - .description { - color: var(--primary-medium); - } - .radios { - display: flex; - flex-wrap: wrap; - align-items: center; - &:first-of-type { - margin-bottom: 1em; - } - input, - label { - min-height: 20px; - line-height: $line-height-medium; - margin: 0; - } - .radio { - padding-left: 5px; - } - .inputs { - margin-top: 10px; - width: 100%; - } - } -} - .uploaded-image-preview { height: 150px; } diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml index 58e07eaa28e..87a5cc185ee 100644 --- a/config/locales/client.en.yml +++ b/config/locales/client.en.yml @@ -2236,21 +2236,10 @@ en: votes_released: "Vote was released" upload_selector: - title: "Add an image" - title_with_attachments: "Add an image or a file" - from_my_computer: "From my device" - from_the_web: "From the web" - remote_tip: "link to image" - remote_tip_with_attachments: "link to image or file" - local_tip: "select images from your device" - local_tip_with_attachments: "select images or files from your device" - hint: "(you can also drag & drop into the editor to upload)" - hint_for_supported_browsers: "you can also drag and drop or paste images into the editor" uploading: "Uploading" processing: "Processing Upload" select_file: "Select File" default_image_alt_text: image - supported_formats: "supported formats" search: sort_by: "Sort by" diff --git a/test/smoke_test.js b/test/smoke_test.js index 979d05d883f..7efb5bfb3fa 100644 --- a/test/smoke_test.js +++ b/test/smoke_test.js @@ -222,24 +222,6 @@ const path = require("path"); return page.waitForSelector(".d-editor-preview p", { visible: true }); }); - await exec("open upload modal", () => { - return page.click(".d-editor-button-bar .upload"); - }); - - await exec("upload modal is open", () => { - return page.waitForSelector("#filename-input", { visible: true }); - }); - - await exec("upload modal closes", () => { - let promise = page.click(".d-modal-cancel"); - - promise = promise.then(() => { - return page.waitForSelector("#filename-input", { hidden: true }); - }); - - return promise; - }); - await exec("submit the topic", () => { return page.click(".submit-panel .create"); });