0
0
Fork 1
Spiegel von https://github.com/paviliondev/discourse-custom-wizard.git synchronisiert 2024-11-13 21:42:53 +01:00

CLEANUP #1: Upload progress and link modal

Dieser Commit ist enthalten in:
Angus McLeod 2020-10-02 10:33:01 +10:00
Ursprung 8a0dc999b3
Commit aa7d5df77b
7 geänderte Dateien mit 123 neuen und 25 gelöschten Zeilen

Datei anzeigen

@ -54,6 +54,7 @@ export default ComposerEditor.extend({
showUploadModal() { showUploadModal() {
$(".wizard-composer-upload").trigger("click"); $(".wizard-composer-upload").trigger("click");
}, },
_setUploadPlaceholderSend() { _setUploadPlaceholderSend() {
if (!this.composer.get("reply")) { if (!this.composer.get("reply")) {
this.composer.set("reply", ""); this.composer.set("reply", "");
@ -64,7 +65,9 @@ export default ComposerEditor.extend({
_bindUploadTarget() { _bindUploadTarget() {
this._super(...arguments); this._super(...arguments);
const $element = $(this.element); const $element = $(this.element);
$element.off("fileuploadsubmit"); $element.off("fileuploadsubmit");
$element.on("fileuploadsubmit", (e, data) => { $element.on("fileuploadsubmit", (e, data) => {
const max = this.siteSettings.simultaneous_uploads; const max = this.siteSettings.simultaneous_uploads;
@ -116,7 +119,33 @@ export default ComposerEditor.extend({
return isUploading; 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: { actions: {
extraButtons(toolbar) { extraButtons(toolbar) {
if (this.allowUpload && this.uploadIcon && !this.site.mobileView) { if (this.allowUpload && this.uploadIcon && !this.site.mobileView) {
@ -135,18 +164,22 @@ export default ComposerEditor.extend({
group: "insertions", group: "insertions",
shortcut: "K", shortcut: "K",
trimLeading: true, trimLeading: true,
unshift: true,
sendAction: (event) => component.set("showHyperlinkBox", true), sendAction: (event) => component.set("showHyperlinkBox", true),
}); });
}, },
previewUpdated($preview) { previewUpdated($preview) {
highlightSyntax($preview[0], this.siteSettings, this.session); highlightSyntax($preview[0], this.siteSettings, this.session);
this._super(...arguments); this._super(...arguments);
}, },
addLink(linkName, linkUrl) { addLink(linkName, linkUrl) {
let link = `[${linkName}](${linkUrl})`; let link = `[${linkName}](${linkUrl})`;
this.appEvents.trigger("composer:insert-text", link); this.appEvents.trigger("composer:insert-text", link);
this.set("showHyperlinkBox", false); this.set("showHyperlinkBox", false);
}, },
hideBox() { hideBox() {
this.set("showHyperlinkBox", false); this.set("showHyperlinkBox", false);
}, },

Datei anzeigen

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

Datei anzeigen

@ -15,10 +15,21 @@
disabled=disableTextarea disabled=disableTextarea
outletArgs=(hash composer=composer editorType="composer")}} 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}} {{#if showHyperlinkBox}}
{{wizard-composer-hyperlink {{wizard-composer-hyperlink
addLink=(action 'addLink') addLink=(action 'addLink')
hideBox=(action 'hideBox')}} hideBox=(action 'hideBox')}}
{{/if}} {{/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>

Datei anzeigen

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

Datei anzeigen

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

Datei anzeigen

@ -42,6 +42,10 @@
} }
} }
.wizard-field-composer .wmd-controls {
position: relative;
}
.wizard-field-composer.show-preview .d-editor-textarea-wrapper { .wizard-field-composer.show-preview .d-editor-textarea-wrapper {
display: none; display: none;
} }
@ -55,6 +59,7 @@
background-color: var(--secondary); background-color: var(--secondary);
border: 1px solid var(--primary-medium); border: 1px solid var(--primary-medium);
flex: 1; flex: 1;
max-width: unset;
} }
.d-editor-textarea-wrapper { .d-editor-textarea-wrapper {
@ -182,16 +187,46 @@
.d-editor-button-bar .btn { .d-editor-button-bar .btn {
border: none; border: none;
font-size: 0.9em;
} }
.wizard-composer-upload { .wizard-composer-upload {
display: none; display: none;
} }
.composer-link-url, .composer-link-name { .wizard-composer-hyperlink {
display: block; 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 { .hide-hyperlink-box, .add-link {
display: inline; display: inline;
} }
#file-uploading {
position: absolute;
bottom: -40px;
right: 0;
}

Datei anzeigen

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