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

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

@ -387,10 +387,10 @@
font-weight: 400;
}
.gh-editor-feedback-container {
.gh-editor-feedback-trigger {
position: absolute;
left: 30px;
bottom: 30px;
bottom: 22px;
display: flex;
align-items: center;
border-radius: 3px;
@ -398,13 +398,36 @@
cursor: pointer;
}
.gh-editor-feedback-dropdown-container {
background: transparent;
}
.gh-editor-feedback-dropdown {
min-width: 400px;
border-radius: 3px;
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-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 {

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

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