Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-03-04 02:01:58 -05:00
Code Issues Activity

Updated feedback widget design inside Editor

Browse source 
no refs
This commit is contained in:
Djordje Vlaisavljevic 2023-05-16 11:45:46 +01:00
parent 43f55521c0
commit 75aa3d1186
3 changed files with 39 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
ghost/admin/app/components/modal-feedback-lexical.hbs
View file

@ -1,15 +1,15 @@
<div class="modal-content {{@class}}" data-test-modal="lexical-feedback"> <div class="{{@class}}" data-test-modal="lexical-feedback">
<header class="modal-header"> <header class="gh-editor-feedback-dropdown-header">
<h1>Editor beta feedback</h1> <h3>Editor beta feedback</h3>
</header> </header>
<button class="close" type="button" title="Close" {{on "click" this.closeModal}}>{{svg-jar "close"}}<span {{!-- <button class="close" type="button" title="Close" {{on "click" this.closeModal}}>{{svg-jar "close"}}<span
class="hidden">Close</span></button> class="hidden">Close</span></button> --}}
<div class="modal-body gh-modal-feedback-lexical"> <div class="">
{{!-- <p>Have any issues? Feedback? Let us know!</p> --}} <p>Have any issues? Feedback? Let us know!</p>
<form> <form>
<GhFormGroup> <GhFormGroup>
<label for="feedback-lexical">Have any issues? Feedback? Let us know below!</label> {{!-- <label for="feedback-lexical">Have any issues? Feedback? Let us know below!</label> --}}
<GhTextarea <GhTextarea
@id="feedback-lexical" @id="feedback-lexical"
@name="feedback-lexical" @name="feedback-lexical"
@ -26,13 +26,13 @@
</form> </form>
</div> </div>
<div class="modal-footer"> <div class="gh-editor-feedback-dropdown-footer">
<button class="gh-btn" type="button" {{on "click" this.closeModal}}><span>Cancel</span></button>
<GhTaskButton <GhTaskButton
@buttonText="Send feedback" @buttonText="Send feedback"
@task={{this.submitFeedback}} @task={{this.submitFeedback}}
@class="gh-btn gh-btn-black gh-btn-icon" @class="gh-btn gh-btn-black gh-btn-icon"
data-test-button="submit-lexical-feedback" data-test-button="submit-lexical-feedback"
/> />
<button class="gh-btn" type="button" {{on "click" this.closeModal}}><span>Cancel</span></button>
</div> </div>
</div> </div>

31
ghost/admin/app/styles/layouts/editor.css
View file

@ -387,10 +387,10 @@
font-weight: 400; font-weight: 400;
} }
.gh-editor-feedback-container { .gh-editor-feedback-trigger {
position: absolute; position: absolute;
left: 30px; left: 30px;
bottom: 30px; bottom: 22px;
display: flex; display: flex;
align-items: center; align-items: center;
border-radius: 3px; border-radius: 3px;
@ -398,13 +398,36 @@
cursor: pointer; cursor: pointer;
} }
.gh-editor-feedback-dropdown-container {
background: transparent;
}
.gh-editor-feedback-dropdown { .gh-editor-feedback-dropdown {
min-width: 400px;
border-radius: 3px; border-radius: 3px;
box-shadow: 0 0 0 1px rgba(0,0,0,.04), 0 8px 20px -3px rgba(0,0,0,.2); box-shadow: 0 0 0 1px rgba(0,0,0,.04), 0 8px 20px -3px rgba(0,0,0,.2);
padding: 32px; padding: 20px;
background-color: #fff; background-color: #fff;
background-clip: padding-box; background-clip: padding-box;
margin-bottom: 20px; margin-bottom: 10px;
}
.gh-editor-feedback-dropdown textarea {
resize: none;
}
.gh-editor-feedback-dropdown-header h3 {
font-size: 1.9rem;
font-weight: 600;
}
.gh-editor-feedback-dropdown p {
margin-bottom: 16px;
color: var(--midgrey);
}
.gh-editor-feedback-dropdown-footer .gh-btn:not(:last-child) {
margin-right: 8px;
} }
.gh-editor-feedback { .gh-editor-feedback {

4
ghost/admin/app/templates/lexical-editor.hbs
View file

@ -99,7 +99,7 @@
@horizontalPosition="left" as |dd| @horizontalPosition="left" as |dd|
> >
<dd.Trigger <dd.Trigger
class="gh-editor-feedback-container" class="gh-editor-feedback-trigger gh-btn gh-btn-editor green"
data-test-button="lexical-editor-feedback" data-test-button="lexical-editor-feedback"
> >
<span class="gh-editor-feedback"> <span class="gh-editor-feedback">
@ -107,7 +107,7 @@
</span> </span>
</dd.Trigger> </dd.Trigger>
<dd.Content> <dd.Content class="gh-editor-feedback-dropdown-container">
<div {{css-transition "anim-fade-in-scale"}}> <div {{css-transition "anim-fade-in-scale"}}>
<ModalFeedbackLexical @class="gh-editor-feedback-dropdown" @close={{dd.actions.close}} /> <ModalFeedbackLexical @class="gh-editor-feedback-dropdown" @close={{dd.actions.close}} />
</div> </div>