Simplifying for the fitler dropdown for Activity Feed

refs: https://github.com/TryGhost/Team/issues/1373 - using more conventional controls with checkboxes - simplifying to make ready for release
2024-12-25 03:44:29 +03:00 · 2022-02-15 15:41:21 +00:00 · 2022-02-15 15:41:21 +00:00 · 30f7892de8
commit 30f7892de8
parent c72b31f504
11 changed files with 29 additions and 58 deletions
--- a/ghost/admin/app/components/members-activity/event-type-filter.hbs
+++ b/ghost/admin/app/components/members-activity/event-type-filter.hbs
@ -10,16 +10,17 @@
        {{!-- NOTE: re-using ember-power-select-options styles --}}
        <ul class="ember-power-select-options" role="listbox">
            {{#each this.eventTypes as |type idx|}}
-                <li class="ember-power-select-option {{if type.isSelected "selected"}}">
-                    <label for="type-{{idx}}">
-                        <span>
-                            <input type="checkbox" checked={{type.isSelected}} id="type-{{idx}}" name="eventTypes" {{on "input" (fn this.toggleEventType type.event)}}>
-                            {{svg-jar type.icon class="gh-member-activity-actions-icon"}}
-                            {{type.name}}
-                        </span>
-                        {{#if type.isSelected}}
-                            {{svg-jar "selected" class="gh-member-activity-actions-tick"}}
-                        {{/if}}
+                <li class="form-group ember-power-select-option mb0 for-checkbox">
+                    <label class="checkbox" for="type-{{idx}}">
+                        <input
+                            type="checkbox"
+                            checked={{type.isSelected}}
+                            id="type-{{idx}}"
+                            name="eventTypes"
+                            class="gh-input post-settings-featured"
+                            {{on "input" (fn this.toggleEventType type.event)}}>
+                        <span class="input-toggle-component"></span>
+                        <p>{{type.name}}</p>
                    </label>
                </li>
            {{/each}}
--- a/ghost/admin/app/styles/layouts/member-activity.css
+++ b/ghost/admin/app/styles/layouts/member-activity.css
@ -88,10 +88,10 @@
 }

 .gh-member-activity-actions-menu {
-    top: calc(100% + 16px);
+    top: auto;
    left: auto;
-    right: 10px;
    padding: 2rem;
+    margin-top: 8px;
 }

 .gh-member-activity-actions-menu h3 {
@ -110,19 +110,32 @@
    padding: 4px 0;
 }

+.gh-member-activity-actions-menu .ember-power-select-option:first-child {
+    padding-top: 0;
+}
+
+.gh-member-activity-actions-menu .ember-power-select-option:last-child {
+    padding-bottom: 0;
+}
+
 .gh-member-activity-actions-menu .ember-power-select-option label {
-    padding: 0.75rem 2rem 0.75rem 0;
+    padding: 0.25rem 2rem 0.25rem 0;
    display: flex;
    align-items: center;
-    justify-content: space-between;
+    justify-content: flex-start;
    color: var(--midlightgrey);
    cursor: pointer;
 }

-.gh-member-activity-actions-menu .ember-power-select-option label span {
+.gh-member-activity-actions-menu .ember-power-select-option label p {
    display: flex;
    align-items: center;
    justify-content: flex-start;
+    color: #394047;
+    font-weight: 500;
+    font-size: 1.4rem;
+    padding: 0.125rem 6rem 0 0.25rem;
+    margin: 0;
 }

 .gh-member-activity-actions-menu .ember-power-select-option input {
--- a/ghost/admin/public/assets/icons/event-filter-email-delivered.svg
+++ b/ghost/admin/public/assets/icons/event-filter-email-delivered.svg
@ -1,5 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M12.2401 18.5546L9.84262 16.1681L7.26916 17.4988L7.36814 13.6826L4.35477 10.6693C4.21299 10.5276 4.10861 10.353 4.05102 10.161C3.99343 9.96906 3.98444 9.76579 4.02484 9.5695C4.06399 9.35366 4.16006 9.1522 4.30314 8.98592C4.44621 8.81965 4.63109 8.6946 4.83867 8.6237L16.6392 4.68653C16.8603 4.60436 17.1003 4.5874 17.3308 4.63768C17.5613 4.68796 17.7724 4.80335 17.9392 4.97014C18.106 5.13694 18.2214 5.34811 18.2717 5.57857C18.322 5.80904 18.305 6.04909 18.2229 6.27019L16.1077 12.6099" stroke="#95A1AD" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M17.871 4.92871L7.36816 13.6829" stroke="#95A1AD" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M14 16.1094L15.8232 17.9326C15.9209 18.0302 16.0791 18.0302 16.1768 17.9326L20.5 13.6094" stroke="#95A1AD" stroke-width="1.44" stroke-linecap="round"/>
-</svg>
--- a/ghost/admin/public/assets/icons/event-filter-email-failed.svg
+++ b/ghost/admin/public/assets/icons/event-filter-email-failed.svg
@ -1,6 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M16.3111 12L18.2229 6.27019C18.305 6.04909 18.322 5.80904 18.2717 5.57857C18.2214 5.34811 18.106 5.13694 17.9392 4.97014C17.7724 4.80335 17.5613 4.68796 17.3308 4.63768C17.1003 4.5874 16.8603 4.60436 16.6392 4.68653L4.83867 8.6237C4.63109 8.6946 4.44621 8.81965 4.30314 8.98592C4.16006 9.1522 4.06399 9.35366 4.02484 9.5695C3.98444 9.76579 3.99343 9.96906 4.05102 10.161C4.10861 10.353 4.21299 10.5276 4.35477 10.6693L7.36814 13.6826L7.26916 17.4988L9.84262 16.1681L11.683 18" stroke="#95A1AD" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M17.871 4.92871L7.36816 13.6829" stroke="#95A1AD" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M14.3477 14.0586L19.243 18.9539" stroke="#95A1AD" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M14.3477 18.9531L19.243 14.0578" stroke="#95A1AD" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
--- a/ghost/admin/public/assets/icons/event-filter-email-opened.svg
+++ b/ghost/admin/public/assets/icons/event-filter-email-opened.svg
@ -1,4 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M20.292 11.2659C20.5045 11.5013 20.6221 11.8071 20.6221 12.1242C20.6221 12.4413 20.5045 12.7471 20.292 12.9825C18.9469 14.4301 15.8852 17.2485 12.311 17.2485C8.73689 17.2485 5.67516 14.4301 4.33005 12.9825C4.1176 12.7471 4 12.4413 4 12.1242C4 11.8071 4.1176 11.5013 4.33005 11.2659C5.67516 9.81833 8.73689 7 12.311 7C15.8852 7 18.9469 9.81833 20.292 11.2659Z" stroke="#95A1AD" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M12.3111 14.6867C13.7262 14.6867 14.8733 13.5396 14.8733 12.1246C14.8733 10.7096 13.7262 9.5625 12.3111 9.5625C10.8961 9.5625 9.74902 10.7096 9.74902 12.1246C9.74902 13.5396 10.8961 14.6867 12.3111 14.6867Z" stroke="#95A1AD" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
--- a/ghost/admin/public/assets/icons/event-filter-login.svg
+++ b/ghost/admin/public/assets/icons/event-filter-login.svg
@ -1,5 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M5.00055 12H15.3105" stroke="#95A1AD" stroke-width="1.71429" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M12.2336 8.92383L15.3105 12.0008L12.2336 15.0777" stroke="#95A1AD" stroke-width="1.71429" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M5.99805 16.3077C6.88288 17.7657 8.1928 18.8823 9.73134 19.4902C11.2699 20.098 12.9541 20.1642 14.5314 19.6789C16.1087 19.1935 17.494 18.1828 18.4797 16.7984C19.4653 15.4139 19.998 13.7303 19.998 12C19.998 10.2697 19.4653 8.58611 18.4797 7.20164C17.494 5.81716 16.1087 4.80647 14.5314 4.32115C12.9541 3.83582 11.2699 3.90203 9.73134 4.50984C8.1928 5.11765 6.88288 6.2343 5.99805 7.69231" stroke="#95A1AD" stroke-width="1.71429" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
--- a/ghost/admin/public/assets/icons/event-filter-newsletter.svg
+++ b/ghost/admin/public/assets/icons/event-filter-newsletter.svg
@ -1,4 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M17.9231 6.5H6.07692C5.48215 6.5 5 6.99272 5 7.60053V15.7995C5 16.4073 5.48215 16.9 6.07692 16.9H17.9231C18.5178 16.9 19 16.4073 19 15.7995V7.60053C19 6.99272 18.5178 6.5 17.9231 6.5Z" stroke="#95A1AD" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M5 7.5L11.3108 12.2786C11.5043 12.4217 11.7482 12.5 12 12.5C12.2518 12.5 12.4957 12.4217 12.6892 12.2786L19 7.5" stroke="#95A1AD" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
--- a/ghost/admin/public/assets/icons/event-filter-payment.svg
+++ b/ghost/admin/public/assets/icons/event-filter-payment.svg
@ -1,5 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M12 6.99997V4" stroke="#95A1AD" stroke-width="1.71429" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M9 14.9999C9 16.4999 10.34 16.9999 12 16.9999C13.66 16.9999 14.9999 16.9999 14.9999 14.9999C14.9999 12 9 12 9 8.99998C9 7 10.34 7 12 7C13.66 7 14.9999 7.75999 14.9999 8.99998" stroke="#95A1AD" stroke-width="1.71429" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M12 17V20" stroke="#95A1AD" stroke-width="1.71429" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
--- a/ghost/admin/public/assets/icons/event-filter-signup.svg
+++ b/ghost/admin/public/assets/icons/event-filter-signup.svg
@ -1,4 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M11.7193 12.2716C14.0862 12.2716 16.005 10.3528 16.005 7.98591C16.005 5.61897 14.0862 3.7002 11.7193 3.7002C9.35237 3.7002 7.43359 5.61897 7.43359 7.98591C7.43359 10.3528 9.35237 12.2716 11.7193 12.2716Z" stroke="#95A1AD" stroke-width="1.71429" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M4.39941 18.9567C5.1644 17.701 6.23954 16.6632 7.52148 15.9431C8.80342 15.223 10.2491 14.8447 11.7194 14.8447C13.1898 14.8447 14.6354 15.223 15.9173 15.9431C17.1993 16.6632 18.2744 17.701 19.0394 18.9567" stroke="#95A1AD" stroke-width="1.71429" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
--- a/ghost/admin/public/assets/icons/event-filter-subscription.svg
+++ b/ghost/admin/public/assets/icons/event-filter-subscription.svg
@ -1,7 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M8.25 7.25V4.5" stroke="#95A1AD" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M5.5 14.5833C5.5 15.9583 6.72833 16.4167 8.25 16.4167C9.77167 16.4167 11 16.4167 11 14.5833C11 11.8333 5.5 11.8333 5.5 9.08333C5.5 7.25 6.72833 7.25 8.25 7.25C9.77167 7.25 11 7.94667 11 9.08333" stroke="#95A1AD" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M8.25 16.417V19.167" stroke="#95A1AD" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M13.5 8.25H17.7308C18.1556 8.25 18.5 8.60533 18.5 9.04365V14.9563C18.5 15.3947 18.1556 15.75 17.7308 15.75H13.5" stroke="#95A1AD" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M13.9922 12.313L18.4999 8.9707" stroke="#95A1AD" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
--- a/ghost/admin/public/assets/icons/selected.svg
+++ b/ghost/admin/public/assets/icons/selected.svg
@ -1,3 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M21.2955 5.2045C21.7348 5.64384 21.7348 6.35616 21.2955 6.7955L8.5 19.591L2.2045 13.2955C1.76517 12.8562 1.76517 12.1438 2.2045 11.7045C2.64384 11.2652 3.35616 11.2652 3.7955 11.7045L8.5 16.409L19.7045 5.2045C20.1438 4.76517 20.8562 4.76517 21.2955 5.2045Z" fill="#30CF43"/>
-</svg>