TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-11-28 22:43:30 +03:00
Code Issues Projects Releases Wiki Activity

Disabled feedback dropdown closing on outside click

Browse Source 
no issue
This commit is contained in:
Elena Baidakova 2023-05-17 14:55:03 +04:00
parent 945628c830
commit 29c440743c
5 changed files with 92 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
ghost/admin/app/components/feedback-lexical/editor-dropdown.hbs Normal file
View File

@ -0,0 +1,49 @@
<GhBasicDropdown
@verticalPosition="above"
@onClose={{this.onClose}}
@horizontalPosition="left" as |dd|
>
<dd.Trigger
class="gh-editor-feedback-trigger gh-btn gh-btn-editor green"
data-test-button="lexical-editor-feedback"
>
<span class="gh-editor-feedback" data-trigger="true"> {{!-- data-trigger attr used for dropdown closing --}}
Feedback?
</span>
</dd.Trigger>
<dd.Content class="gh-editor-feedback-dropdown-container">
<div {{css-transition "anim-fade-in-scale"}}>
<div class="gh-editor-feedback-dropdown" data-test-modal="lexical-feedback">
<header class="gh-editor-feedback-dropdown-header">
<h3>Editor beta feedback</h3>
</header>
{{!-- <button class="close" type="button" title="Close" {{on "click" (fn this.onCancel dd)}}>{{svg-jar "close"}}<span
class="hidden">Close</span></button> --}}
<div class="">
<p>Have any issues? Feedback? Let us know!</p>
<FeedbackLexical::Textarea
@feedbackMessage={{this.feedbackMessage}}
@updateFeedbackMessage={{this.updateFeedbackMessage}}
/>
</div>
<div class="gh-editor-feedback-dropdown-footer">
<FeedbackLexical::SendButton
@onSuccess={{fn this.onSent dd}}
@feedbackMessage={{this.feedbackMessage}}
@post={{@post}}
/>
<button
class="gh-btn"
type="button"
{{on "click" (fn this.onCancel dd)}}
>
<span>Cancel</span>
</button>
</div>
</div>
</div>
</dd.Content>
</GhBasicDropdown>

42
ghost/admin/app/components/feedback-lexical/editor-dropdown.js Normal file
View File

@ -0,0 +1,42 @@
import Component from '@glimmer/component';
import {action} from '@ember/object';
import {tracked} from '@glimmer/tracking';
export default class FeedbackLexicalEditorFormComponent extends Component {
@tracked feedbackMessage = '';
eventType = 'close';
@action
updateFeedbackMessage(event) {
this.feedbackMessage = event.target.value;
}
@action
onSent(dropdown) {
dropdown.actions.close(this.eventType);
this.feedbackMessage = '';
}
@action
onCancel(dropdown) {
dropdown.actions.close(this.eventType);
}
@action
onClose(dropdown, event) {
// Need this logic to disable dropdown closing on clicking outside https://ember-basic-dropdown.com/docs/dropdown-events
// Close if the message was sent or Cancel button clicked
if (event === this.eventType) {
return true;
}
// Close if trigger button was clicked
if (event?.target?.dataset?.trigger) {
return true;
}
// Leave dropdown open for all other events
return false;
}
}

24
ghost/admin/app/components/feedback-lexical/editor-form.hbs
View File

@ -1,24 +0,0 @@
<div class="gh-editor-feedback-dropdown" data-test-modal="lexical-feedback">
<header class="gh-editor-feedback-dropdown-header">
<h3>Editor beta feedback</h3>
</header>
{{!-- <button class="close" type="button" title="Close" {{on "click" this.closeModal}}>{{svg-jar "close"}}<span
class="hidden">Close</span></button> --}}
<div class="">
<p>Have any issues? Feedback? Let us know!</p>
<FeedbackLexical::Textarea
@feedbackMessage={{this.feedbackMessage}}
@updateFeedbackMessage={{this.updateFeedbackMessage}}
/>
</div>
<div class="gh-editor-feedback-dropdown-footer">
<FeedbackLexical::SendButton
@onSuccess={{this.closeModal}}
@feedbackMessage={{this.feedbackMessage}}
@post={{@post}}
/>
<button class="gh-btn" type="button" {{on "click" this.closeModal}}><span>Cancel</span></button>
</div>
</div>

17
ghost/admin/app/components/feedback-lexical/editor-form.js
View File

@ -1,17 +0,0 @@
import Component from '@glimmer/component';
import {action} from '@ember/object';
import {tracked} from '@glimmer/tracking';
export default class FeedbackLexicalEditorFormComponent extends Component {
@tracked feedbackMessage = '';
@action
closeModal() {
this.args.close();
}
@action
updateFeedbackMessage(event) {
this.feedbackMessage = event.target.value;
}
}

23
ghost/admin/app/templates/lexical-editor.hbs
View File

@ -94,28 +94,7 @@
/>
{{#if (feature 'lexicalEditor')}}
<GhBasicDropdown
@verticalPosition="above"
@horizontalPosition="left" as |dd|
>
<dd.Trigger
class="gh-editor-feedback-trigger gh-btn gh-btn-editor green"
data-test-button="lexical-editor-feedback"
>
<span class="gh-editor-feedback">
Feedback?
</span>
</dd.Trigger>
<dd.Content class="gh-editor-feedback-dropdown-container">
<div {{css-transition "anim-fade-in-scale"}}>
<FeedbackLexical::EditorForm
@post={{this.post}}
@close={{dd.actions.close}}
/>
</div>
</dd.Content>
</GhBasicDropdown>
<FeedbackLexical::EditorDropdown @post={{this.post}} />
{{/if}}
<div class="gh-editor-wordcount-container">