Spiegel von
https://github.com/paviliondev/discourse-custom-wizard.git
synchronisiert 2024-11-09 20:02:54 +01:00
CLEANUP #1: Upload progress and link modal
Dieser Commit ist enthalten in:
Ursprung
8a0dc999b3
Commit
aa7d5df77b
7 geänderte Dateien mit 123 neuen und 25 gelöschten Zeilen
|
@ -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);
|
||||
},
|
||||
|
|
|
@ -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();
|
||||
},
|
||||
}
|
||||
},
|
||||
});
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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";
|
||||
|
|
Laden …
In neuem Issue referenzieren