From eb7547ea3c3ccd6899a71c1230a8744e45f6bd44 Mon Sep 17 00:00:00 2001 From: James Morris Date: Thu, 22 Sep 2022 18:00:48 +0100 Subject: [PATCH] Added a new click icon for the member attribution flag - Adds a new SVG icon when the members attribution flag is on only - Fixes up some dark mode issues for the URL scrollable in events refs https://github.com/TryGhost/Team/issues/1951 --- .../app/components/member/activity-feed.hbs | 2 +- .../components/members-activity/table-row.hbs | 2 +- ghost/admin/app/styles/app-dark.css | 33 +++++++++++++++++++ .../app/styles/layouts/member-activity.css | 10 +++++- ghost/admin/app/styles/layouts/members.css | 1 + .../event-click--feature-attribution.svg | 5 +++ 6 files changed, 50 insertions(+), 3 deletions(-) create mode 100644 ghost/admin/public/assets/icons/event-click--feature-attribution.svg diff --git a/ghost/admin/app/components/member/activity-feed.hbs b/ghost/admin/app/components/member/activity-feed.hbs index 5fefb3251e..920b902eef 100644 --- a/ghost/admin/app/components/member/activity-feed.hbs +++ b/ghost/admin/app/components/member/activity-feed.hbs @@ -38,7 +38,7 @@ {{/if}} {{#if event.description}} -
+
URL
{{event.description}} diff --git a/ghost/admin/app/components/members-activity/table-row.hbs b/ghost/admin/app/components/members-activity/table-row.hbs index aec59f8747..f8b1ef7859 100644 --- a/ghost/admin/app/components/members-activity/table-row.hbs +++ b/ghost/admin/app/components/members-activity/table-row.hbs @@ -33,7 +33,7 @@ {{/if}} {{#if event.description}} -
+
URL
{{event.description}} diff --git a/ghost/admin/app/styles/app-dark.css b/ghost/admin/app/styles/app-dark.css index 3767a6ad98..c3fe2a8ce6 100644 --- a/ghost/admin/app/styles/app-dark.css +++ b/ghost/admin/app/styles/app-dark.css @@ -1065,6 +1065,39 @@ input:focus, border-bottom: 1px solid var(--lightgrey-l1); } +.ghost-members-activity-event-prefix, +.feature-memberAttribution .ghost-members-activity-event-url > span { + color: #505558; +} + +.ghost-members-activity-event-url:before, +.ghost-members-activity-event-url.scroller:hover::before { + background: rgb(255,255,255); + background: linear-gradient(90deg, rgba(16,17,20,1) 0%, rgba(16,17,20,0) 100%); +} + +.ghost-members-activity-event-url:after, +.ghost-members-activity-event-url.scroller:hover::after { + background: rgb(255,255,255); + background: linear-gradient(90deg, rgba(16,17,20,0) 0%, rgba(16,17,20,1) 100%); +} + +.gh-main-section-content .ghost-members-activity-event-url:before, +.gh-main-section-content .ghost-members-activity-event-url.scroller:hover::before { + background: rgb(255,255,255); + background: linear-gradient(90deg, rgba(23,25,28,1) 0%, rgba(23,25,28,0) 100%); +} + +.gh-main-section-content .ghost-members-activity-event-url:after, +.gh-main-section-content .ghost-members-activity-event-url.scroller:hover::after { + background: rgb(255,255,255); + background: linear-gradient(90deg, rgba(23,25,28,0) 0%, rgba(23,25,28,1) 100%); +} + +.feature-memberAttribution .ghost-members-activity-event-prefix { + opacity: 0.75; +} + /* Offers */ .gh-btn-green svg { fill: #fff !important; diff --git a/ghost/admin/app/styles/layouts/member-activity.css b/ghost/admin/app/styles/layouts/member-activity.css index 591b9f332f..e7cc3240bb 100644 --- a/ghost/admin/app/styles/layouts/member-activity.css +++ b/ghost/admin/app/styles/layouts/member-activity.css @@ -164,12 +164,14 @@ .gh-members-activity-description.feature-memberAttribution a { font-weight: 400; - color: var(--midgrey) !important; + color: var(--middarkgrey) !important; + opacity: 0.9; transition: all 150ms ease; } .gh-members-activity-description.feature-memberAttribution a:hover { color: var(--middarkgrey) !important; + opacity: 1; } .gh-members-activity-description a { @@ -261,6 +263,11 @@ padding-right: 8px; /* extra padding used for dynamic positioning with js */ } +.feature-memberAttribution .ghost-members-activity-event-url > span { + font-weight: 500; + color: #b4bcc2; +} + .gh-members-activity-icon { width: 24px; min-width: 24px; @@ -288,6 +295,7 @@ color: var(--middarkgrey); font-weight: 500; white-space: nowrap; + width: 100%; } .gh-members-activity-event > a { diff --git a/ghost/admin/app/styles/layouts/members.css b/ghost/admin/app/styles/layouts/members.css index ac7af9db0e..1772c46fa4 100644 --- a/ghost/admin/app/styles/layouts/members.css +++ b/ghost/admin/app/styles/layouts/members.css @@ -1214,6 +1214,7 @@ textarea.gh-member-details-textarea { white-space: nowrap; overflow: hidden; padding-right: 1rem; + width: 100%; } .gh-member-feed-event-inner:first-letter { diff --git a/ghost/admin/public/assets/icons/event-click--feature-attribution.svg b/ghost/admin/public/assets/icons/event-click--feature-attribution.svg new file mode 100644 index 0000000000..128395316d --- /dev/null +++ b/ghost/admin/public/assets/icons/event-click--feature-attribution.svg @@ -0,0 +1,5 @@ + + + + +