From 4c598a1e6d382191ac0d5ba769a25ea847f9ac53 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dani=C3=ABl=20van=20der=20Winden?= Date: Wed, 20 Mar 2024 16:48:45 +0100 Subject: [PATCH] Added social share modal to onboarding checklist (#19891) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Updated the share modal design and functionality ref IPC-90 • Rebuilt the bookmark card to match other components • Added linking to the different social networks • Added a close button that closes the modal • Removed repetitive subtitle --- .../dashboard/onboarding-checklist.js | 5 + ghost/admin/app/components/modal-share.hbs | 159 ++++++++---------- ghost/admin/app/styles/layouts/dashboard.css | 90 +++++----- ghost/admin/public/assets/icons/copy.svg | 4 +- 4 files changed, 129 insertions(+), 129 deletions(-) diff --git a/ghost/admin/app/components/dashboard/onboarding-checklist.js b/ghost/admin/app/components/dashboard/onboarding-checklist.js index 9e3b7c7dd9..754fafabef 100644 --- a/ghost/admin/app/components/dashboard/onboarding-checklist.js +++ b/ghost/admin/app/components/dashboard/onboarding-checklist.js @@ -31,4 +31,9 @@ export default class OnboardingChecklist extends Component { break; } } + + @action + closeModal() { + this.closeModal(); + } } diff --git a/ghost/admin/app/components/modal-share.hbs b/ghost/admin/app/components/modal-share.hbs index 4fb7a40a2a..ccb92b3dc7 100644 --- a/ghost/admin/app/components/modal-share.hbs +++ b/ghost/admin/app/components/modal-share.hbs @@ -1,116 +1,97 @@ -

Share your publication

-

Let the world discover your publication. Share it with your network and start building a community of readers.

- + + {{svg-jar "close"}} + + + +
+
+ {{#let (or @post.featureImage (get-setting "coverImage")) as |imageUrl|}} + {{#if imageUrl}} +
+ +
+ {{/if}} + +
+
+ {{get-setting "title"}} +
+ +
+ {{ get-setting "description"}} +
- {{!--
-
-
- {{#let (or @post.featureImage (get-setting "coverImage")) as |imageUrl|}} -
{{get-setting "title"}}
-
{{ get-setting "description"}}
{{#if (get-setting "icon")}} -
+
{{/if}} -
{{get-setting "title"}}
-
Daniël van der Winden
-
- {{#if imageUrl}} -
- -
- {{/if}} - {{/let}} -
-
- You can set your publication icon, cover image and description in Settings - -
    -
  • - Icon -

    Copy a link to your publication

    -
    • -
  • - Icon -

    Share on X

    -
    • -
  • - Icon -

    Share on Facebook

    -
    • -
  • - Icon -

    Share on LinkedIn

    -
    • -
-
--}} - -
-
-
- {{#let (or @post.featureImage (get-setting "coverImage")) as |imageUrl|}} -
{{get-setting "title"}}
-
{{ get-setting "description"}}
-
- {{#if (get-setting "icon")}} -
- {{/if}} -
{{get-setting "title"}} - • -
-
Daniël van der Winden
+
+ {{get-setting "title"}}
- - {{#if imageUrl}} -
- -
- {{/if}} - {{/let}}
- You can set your publication icon, cover image and description in Settings + {{/let}} +
+
-
+
+ {{svg-jar "arrow-right-tail"}} +
+ + +
  • + +
    {{svg-jar "social-x"}} Share on X -
    - {{svg-jar "arrow-right"}} -
    -
    • -
  • +
    • +
    + {{svg-jar "arrow-right-tail"}} +
    +     + +
  • + +
    {{svg-jar "social-facebook"}} Share on Facebook -
    - {{svg-jar "arrow-right"}} -
    -
    • -
  • +
    • +
    + {{svg-jar "arrow-right-tail"}} +
    +     + +
  • + +
    {{svg-jar "social-linkedin"}} Share on LinkedIn -
    - {{svg-jar "arrow-right"}} -
    -
    • - - + +
    + {{svg-jar "arrow-right-tail"}} +
    +     + + + diff --git a/ghost/admin/app/styles/layouts/dashboard.css b/ghost/admin/app/styles/layouts/dashboard.css index 8479e4b7ea..9111270ed6 100644 --- a/ghost/admin/app/styles/layouts/dashboard.css +++ b/ghost/admin/app/styles/layouts/dashboard.css @@ -2812,6 +2812,10 @@ Onboarding checklist */ margin-bottom: -12px; } +.gh-onboarding-item:hover { + cursor: pointer; +} + .gh-onboarding-item--next { margin: 0px -32px 6px; background: white; @@ -2906,7 +2910,6 @@ Onboarding checklist */ width: 14px; min-width: 14px; height: 14px; - margin-right: 1rem; } .gh-onboarding-item-action svg path { @@ -2929,7 +2932,7 @@ Onboarding checklist */ .gh-onboarding-help { color: var(--midgrey); - margin-top: 40px; + margin-top: 24px; font-size: 1.5rem; } @@ -2965,43 +2968,24 @@ Share publication modal */ transition: all .3s ease-in-out; } -.gh-site-preview { - +.gh-post-bookmark { + box-shadow: none; + border: 1px solid var(--whitegrey); } -.gh-site-preview-title { - font-size: 1.6rem; - font-weight: 700; - line-height: 1.3; - padding: 0; - color: var(--black); - letter-spacing: -.3px; - margin-bottom: 4px; - width: 100%; -} - -.gh-site-preview-description { - font-size: 1.4rem; - font-weight: 400; - line-height: 1.5; - padding: 0; - color: var(--midgrey); - margin-bottom: 24px; - width: 100%; -} - -.gh-site-preview-details { - padding: 0; - margin: 0; - width: 100%; - display: flex; - flex-direction: row; +.gh-post-bookmark:hover { + box-shadow: none; + transform: none; } .gh-site-icon { width: 16px; height: 16px; - margin-bottom: 16px; + margin-right: 8px; +} + +.gh-site-icon img { + border-radius: 2px; } .gh-site-image { @@ -3014,29 +2998,50 @@ Share publication modal */ .gh-share-links { list-style: none; padding: 0; - margin: 40px 0 0; + margin: 32px 0 0 0; } .gh-share-links li { - padding: 8px 0; - border-bottom: 1px solid var(--whitegrey); - display: flex; - flex-direction: row; font-size: 1.5rem; font-weight: 600; color: var(--darkgrey); line-height: 1.5; width: 100%; + margin: 0; +} + +.gh-share-links li:last-child a { + border-bottom: 0 none; +} + +a.gh-share-link { + color: var(--darkgrey); + padding: 16px 0; + display: flex; + justify-content: space-between; + align-items: center; + border-bottom: 1px solid #ebeef0; +} + +a.gh-share-link:hover .gh-onboarding-item-action { + transform: translateX(5px); +} + +.gh-share-link-content { + display: flex; + align-items: center; + justify-content: flex-start; } .gh-share-links li span { - display: block; + display: flex; } .gh-share-links li span svg { width: 16px; height: 16px; fill: var(--midgrey); + margin: 0 16px 0 0; } span.tip { @@ -3048,4 +3053,13 @@ span.tip { color: var(--midgrey); width: 100%; display: block; +} + +span.tip a { + text-decoration: underline; + color: var(--midgrey); +} + +span.tip a:hover { + color: var(--darkgrey); } \ No newline at end of file diff --git a/ghost/admin/public/assets/icons/copy.svg b/ghost/admin/public/assets/icons/copy.svg index b41c5dce38..b16a46d6a3 100644 --- a/ghost/admin/public/assets/icons/copy.svg +++ b/ghost/admin/public/assets/icons/copy.svg @@ -1,5 +1,5 @@ copy - - + + \ No newline at end of file