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:
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() {
|
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);
|
||||||
},
|
},
|
||||||
|
|
|
@ -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();
|
||||||
},
|
}
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
|
@ -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";
|
||||||
|
|
Laden …
In neuem Issue referenzieren