OpenSourceArk/Ghost
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🎨 Updated editor toolbar and action button designs (#20405)

Browse Source 
REF https://linear.app/tryghost/issue/MOM-238

- Updated feature image action button styles
- Aligned button and tooltip styles with the rest of the editor
- Updated `koenig-lexical` version to pull in new toolbar design
This commit is contained in:
Sanne de Vries 2024-06-25 12:26:30 +02:00 committed by GitHub
parent 68dcec143e
commit 03113313ce
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
9 changed files with 21 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ghost/admin/app/components/gh-editor-feature-image.hbs
View File

@ -46,7 +46,7 @@
@imageSrc={{@image}}
@saveImage={{fn this.saveImage uploader.setFiles}}
/>
<button type="button" class="image-action image-delete" title="Delete image" {{on "click" @clearImage}}>
<button type="button" class="image-action image-delete" data-tooltip="Delete" {{on "click" @clearImage}}>
{{svg-jar "koenig/kg-trash"}}
</button>
</div>

4
ghost/admin/app/components/koenig-image-editor.hbs
View File

@ -6,10 +6,10 @@
<button
type="button"
class="{{if @className @className "image-action image-edit"}}"
title="Edit image"
data-tooltip="Edit"
{{on "click" (fn this.handleClick uploader)}}
>
{{svg-jar "koenig/kg-edit"}}
{{svg-jar "koenig/kg-wand"}}
</button>
</GhUploader>
{{/if}}

6
ghost/admin/app/styles/layouts/editor.css
View File

@ -581,7 +581,7 @@ body[data-user-is-dragging] .gh-editor-feature-image-dropzone {
padding: 0;
background: var(--white);
color: var(--darkgrey);
border-radius: 4px;
border-radius: 6px;
transition: all .1s ease-in;
opacity: 0;
}
@ -604,7 +604,7 @@ body[data-user-is-dragging] .gh-editor-feature-image-dropzone {
}
.gh-editor-feature-image .image-action svg path {
fill: var(--darkgrey);
stroke-width: 2;
}
.gh-editor-feature-image-add {
@ -1037,7 +1037,7 @@ body[data-user-is-dragging] .gh-editor-feature-image-dropzone {
.gh-editor .editor-preview h3,
.gh-editor .editor-preview h4,
.gh-editor .editor-preview h5,
.gh-editor .editor-preview h6, {
.gh-editor .editor-preview h6 {
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, "Open Sans", "Helvetica Neue", sans-serif;
}

6
ghost/admin/app/styles/spirit/_custom-styles.css
View File

@ -184,9 +184,9 @@ button, .btn-base {
bottom: calc(100% + 4px);
left: 50%;
white-space: nowrap;
padding: 3px 7px;
border-radius: 3px;
background-color: var(--darkgrey);
padding: 4px 10px;
border-radius: 6px;
background-color: var(--black);
color: var(--white);
content: attr(data-tooltip);
text-align: center;

2
ghost/admin/package.json
View File

@ -48,7 +48,7 @@
"@tryghost/helpers": "1.1.90",
"@tryghost/kg-clean-basic-html": "4.1.1",
"@tryghost/kg-converters": "1.0.5",
"@tryghost/koenig-lexical": "1.2.9",
"@tryghost/koenig-lexical": "1.3.0",
"@tryghost/limit-service": "1.2.14",
"@tryghost/members-csv": "0.0.0",
"@tryghost/nql": "0.12.3",

6
ghost/admin/public/assets/icons/koenig/kg-edit.svg
View File

@ -1,6 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<g fill="currentColor">
<path d="m13.086 5.5-9.793 9.793a1.01 1.01 0 0 0-.241.391l-2 6a1 1 0 0 0 1.264 1.265l6-2c.147-.049.281-.132.391-.242l9.793-9.793L13.086 5.5Z"/>
<path d="m22.414 4.172-2.586-2.586a2.001 2.001 0 0 0-2.828 0l-2.5 2.5L19.914 9.5l2.5-2.5c.378-.378.586-.88.586-1.414s-.208-1.037-.586-1.414Z"/>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 396 B

5
ghost/admin/public/assets/icons/koenig/kg-trash.svg
View File

@ -1 +1,4 @@
<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M1.3 4.6C.969 4.6.7 4.331.7 4c0-.331.269-.6.6-.6h13.5c.331 0 .6.269.6.6 0 .331-.269.6-.6.6H1.3z" fill="#FFF" fill-rule="nonzero"/><path d="M13.9 4v9.5c0 1.331-.769 2.1-2.1 2.1H4.3c-1.331 0-2.1-.769-2.1-2.1V4c0-.331.269-.6.6-.6h10.5c.331 0 .6.269.6.6zM5.95 6.75v5.5c0 .331.269.6.6.6.331 0 .6-.269.6-.6v-5.5c0-.331-.269-.6-.6-.6-.331 0-.6.269-.6.6zm3 0v5.5c0 .331.269.6.6.6.331 0 .6-.269.6-.6v-5.5c0-.331-.269-.6-.6-.6-.331 0-.6.269-.6.6z" fill="#FFF" fill-rule="nonzero"/><path d="M5.65 4c0 .331-.269.6-.6.6-.331 0-.6-.269-.6-.6V2.5c0-.573.21-1.08.615-1.485S5.977.4 6.55.4h3c1.331 0 2.1.769 2.1 2.1V4c0 .331-.269.6-.6.6-.331 0-.6-.269-.6-.6V2.5c0-.669-.231-.9-.9-.9h-3c-.255 0-.456.083-.636.264-.18.18-.264.38-.264.636V4z" fill="#FFF" fill-rule="nonzero"/></g></svg>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M1.917 5.583h20.166m-8.02-3.666H9.936a1.375 1.375 0 0 0-1.374 1.375v2.291h6.874V3.292a1.375 1.375 0 0 0-1.374-1.375ZM9.938 17.27v-6.874m4.125 6.874v-6.874"/>
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M18.288 20.818a1.366 1.366 0 0 1-1.366 1.265H7.077a1.366 1.366 0 0 1-1.365-1.265L4.438 5.583h15.125l-1.275 15.235Z"/>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 893 B

After

Width:  |  Height:  |  Size: 519 B

3
ghost/admin/public/assets/icons/koenig/kg-wand.svg Normal file
View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 25">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M1 21.094 3.913 24 17 10.906 14.125 8 1 21.094ZM11 11l3 3M5.25 4.25a2.5 2.5 0 0 0 2.5-2.5 2.5 2.5 0 0 0 2.5 2.5 2.5 2.5 0 0 0-2.5 2.5 2.5 2.5 0 0 0-2.5-2.5Zm12 0a2.5 2.5 0 0 0 2.5-2.5 2.5 2.5 0 0 0 2.5 2.5 2.5 2.5 0 0 0-2.5 2.5 2.5 2.5 0 0 0-2.5-2.5Zm0 11.99a2.5 2.5 0 0 0 2.5-2.5 2.5 2.5 0 0 0 2.5 2.5 2.5 2.5 0 0 0-2.5 2.5 2.5 2.5 0 0 0-2.5-2.5Z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 510 B

8
yarn.lock
View File

@ -7939,10 +7939,10 @@
dependencies:
semver "^7.3.5"
"@tryghost/koenig-lexical@1.2.9":
version "1.2.9"
resolved "https://registry.yarnpkg.com/@tryghost/koenig-lexical/-/koenig-lexical-1.2.9.tgz#ab922c51b2ddaa8bb361fd7e4c5760bb6e902055"
integrity sha512-1PrM2qCJFyMpUSxrzL8IuzY2OAYbeUKuVSEX/GKOxk/zZRib0Q5dsfjrhVv3iurvBg2Gmg5yyzXC60FDqXLR9w==
"@tryghost/koenig-lexical@1.3.0":
version "1.3.0"
resolved "https://registry.yarnpkg.com/@tryghost/koenig-lexical/-/koenig-lexical-1.3.0.tgz#03bfaa55a5c2da64b2ddfb4c1ee271a62dc4a11d"
integrity sha512-qeKenjk3fRDPjxzqDqIDDAWVZTTKfk8JPMxyPjUzyUilWFavztRfxuo+QHqsjTGAp+TnaBTWADoq2WHbgKSA+A==
"@tryghost/limit-service@1.2.14":
version "1.2.14"