From 52554897793cf13439ccdac9c6c1ab84beefd9ff Mon Sep 17 00:00:00 2001 From: Peter Zimon Date: Fri, 23 Jul 2021 16:05:22 +0200 Subject: [PATCH] Added static members filtering - added filter builder dropdown (alpha) - refactored related CSS --- .../components/gh-member-settings-form-cp.hbs | 4 +- .../app/components/gh-members-filter.hbs | 251 +++++++++++++----- .../admin/app/components/gh-members-filter.js | 40 +++ ghost/admin/app/styles/app-dark.css | 7 +- ghost/admin/app/styles/app.css | 7 +- .../app/styles/components/filter-builder.css | 111 ++++++++ ghost/admin/app/styles/layouts/main.css | 18 +- ghost/admin/app/styles/layouts/members.css | 4 + ghost/admin/app/styles/patterns/buttons.css | 18 ++ ghost/admin/app/templates/dashboard.hbs | 2 +- ghost/admin/app/templates/editor.hbs | 2 +- ghost/admin/app/templates/members.hbs | 19 +- ghost/admin/app/templates/staff/index.hbs | 2 +- ghost/admin/app/templates/staff/user.hbs | 2 +- ghost/admin/public/assets/icons/filter.svg | 5 + 15 files changed, 397 insertions(+), 95 deletions(-) create mode 100644 ghost/admin/app/styles/components/filter-builder.css create mode 100644 ghost/admin/public/assets/icons/filter.svg diff --git a/ghost/admin/app/components/gh-member-settings-form-cp.hbs b/ghost/admin/app/components/gh-member-settings-form-cp.hbs index db88d9cecd..1ad515bb34 100644 --- a/ghost/admin/app/components/gh-member-settings-form-cp.hbs +++ b/ghost/admin/app/components/gh-member-settings-form-cp.hbs @@ -174,7 +174,7 @@ - + {{svg-jar "dotdotdot"}} @@ -227,7 +227,7 @@
yearly
- + {{svg-jar "dotdotdot"}} diff --git a/ghost/admin/app/components/gh-members-filter.hbs b/ghost/admin/app/components/gh-members-filter.hbs index 9a70562c9e..061855692f 100644 --- a/ghost/admin/app/components/gh-members-filter.hbs +++ b/ghost/admin/app/components/gh-members-filter.hbs @@ -1,76 +1,195 @@ - - +{{#if (feature "membersFiltering")}} + - - {{@selectedLabel.name}} - {{svg-jar "arrow-down-small"}} - + + {{svg-jar "filter"}} + Filter + - - - +

Filter list

+
+
+ +
+ + + {{svg-jar "arrow-down-small"}} + + + + {{svg-jar "arrow-down-small"}} + + + +
+ + +
+ {{!--
And
--}} +
+ +
+ + + {{svg-jar "arrow-down-small"}} + + + + {{svg-jar "arrow-down-small"}} + + + +
+ + +
+ {{!--
And
--}} +
+ +
+ + + {{svg-jar "arrow-down-small"}} + + + + {{svg-jar "arrow-down-small"}} + + + +
+ + +
+ +
+
+ +
+{{else}} + + + + + {{@selectedLabel.name}} + {{svg-jar "arrow-down-small"}} + + + + + + + + -
- - {{#if paidParam.name}}{{paidParam.name}}{{else}}Unknown paid status{{/if}} - -
+
+ + {{#if paidParam.name}}{{paidParam.name}}{{else}}Unknown paid status{{/if}} + +
-
- - {{#if order.name}}{{order.name}}{{else}}Unknown{{/if}} - -
\ No newline at end of file +
+ + {{#if order.name}}{{order.name}}{{else}}Unknown{{/if}} + +
+{{/if}} \ No newline at end of file diff --git a/ghost/admin/app/components/gh-members-filter.js b/ghost/admin/app/components/gh-members-filter.js index f256f619e1..2b17a3cce5 100644 --- a/ghost/admin/app/components/gh-members-filter.js +++ b/ghost/admin/app/components/gh-members-filter.js @@ -1,6 +1,46 @@ import Component from '@glimmer/component'; import {inject as service} from '@ember/service'; +const FILTER_PROPERTIES = [ + // Basic + {label: 'Name', name: 'x', group: 'Basic'}, + {label: 'Email', name: 'x', group: 'Basic'}, + {label: 'Location', name: 'x', group: 'Basic'}, + {label: 'Newsletter subscription status', name: 'x', group: 'Basic'}, + {label: 'Label', name: 'x', group: 'Basic'}, + + // Member subscription + {label: 'Member status', name: 'x', group: 'Subscription'}, + {label: 'Tier', name: 'x', group: 'Subscription'}, + {label: 'Billing period', name: 'x', group: 'Subscription'}, + + // Emails + {label: 'Emails sent (all time)', name: 'x', group: 'Email'}, + {label: 'Emails opened (all time)', name: 'x', group: 'Email'}, + {label: 'Open rate (all time)', name: 'x', group: 'Email'}, + {label: 'Emails sent (30 days)', name: 'x', group: 'Email'}, + {label: 'Emails opened (30 days)', name: 'x', group: 'Email'}, + {label: 'Open rate (30 days)', name: 'x', group: 'Email'}, + {label: 'Emails sent (60 days)', name: 'x', group: 'Email'}, + {label: 'Emails opened (60 days)', name: 'x', group: 'Email'}, + {label: 'Open rate (60 days)', name: 'x', group: 'Email'}, + {label: 'Stripe subscription status', name: 'x', group: 'Email'} +]; + +const FILTER_RELATIONS = [ + {label: 'is', name: 'x'}, + {label: 'is not', name: 'x'}, + {label: 'contains', name: 'x'}, + {label: 'exists', name: 'x'}, + {label: 'does not exist', name: 'x'} +]; + export default class GhMembersFilterComponent extends Component { @service session + + constructor(...args) { + super(...args); + this.availableFilterProperties = FILTER_PROPERTIES; + this.availableFilterRelations = FILTER_RELATIONS; + } } diff --git a/ghost/admin/app/styles/app-dark.css b/ghost/admin/app/styles/app-dark.css index a66296b5c2..c1e7b312e1 100644 --- a/ghost/admin/app/styles/app-dark.css +++ b/ghost/admin/app/styles/app-dark.css @@ -6,7 +6,7 @@ */ @import "spirit/spirit-dark.css"; -/* Patterns: Groups of Styles +/* Patterns /* ---------------------------------------------------------- */ @import "patterns/global.css"; @import "patterns/icons.css"; @@ -18,7 +18,7 @@ @import "patterns/boxes.css"; -/* Components: Groups of Patterns +/* Components /* ---------------------------------------------------------- */ @import "components/loading-indicator.css"; @import "components/modals.css"; @@ -40,9 +40,10 @@ @import "components/browser-preview.css"; @import "components/stacks.css"; @import "components/browser-preview.css"; +@import "components/filter-builder.css"; -/* Layouts: Groups of Components +/* Layouts /* ---------------------------------------------------------- */ @import "layouts/main.css"; @import "layouts/flow.css"; diff --git a/ghost/admin/app/styles/app.css b/ghost/admin/app/styles/app.css index 09f89892b5..c293161aab 100644 --- a/ghost/admin/app/styles/app.css +++ b/ghost/admin/app/styles/app.css @@ -6,7 +6,7 @@ */ @import "spirit/spirit.css"; -/* Patterns: Groups of Styles +/* Patterns /* ---------------------------------------------------------- */ @import "patterns/global.css"; @import "patterns/icons.css"; @@ -18,7 +18,7 @@ @import "patterns/boxes.css"; -/* Components: Groups of Patterns +/* Components /* ---------------------------------------------------------- */ @import "components/loading-indicator.css"; @import "components/modals.css"; @@ -40,9 +40,10 @@ @import "components/browser-preview.css"; @import "components/stacks.css"; @import "components/browser-preview.css"; +@import "components/filter-builder.css"; -/* Layouts: Groups of Components +/* Layouts /* ---------------------------------------------------------- */ @import "layouts/main.css"; @import "layouts/flow.css"; diff --git a/ghost/admin/app/styles/components/filter-builder.css b/ghost/admin/app/styles/components/filter-builder.css new file mode 100644 index 0000000000..ee93ba493a --- /dev/null +++ b/ghost/admin/app/styles/components/filter-builder.css @@ -0,0 +1,111 @@ +.gh-filter-builder { + padding: 20px; + max-width: 780px; + min-width: 400px; +} + +.gh-filter-builder h3 { + font-size: 1.9rem; + font-weight: 600; + letter-spacing: 0.2px; +} + +.gh-filter-builder .gh-filters { + display: grid; + grid-template-columns: 1fr; + grid-gap: 12px; + background: var(--whitegrey-l1); + border-radius: 3px; + padding: 16px; + margin-top: 20px; +} + +.gh-filter-builder .gh-filter-block { + display: flex; + align-items: center; +} + +.gh-filter-builder .gh-filter-block .form-group { + margin: 0; +} + +.gh-filter-builder .gh-filter-inputgroup { + display: grid; + grid-template-columns: 1fr 130px 1fr 18px; + grid-column-gap: 8px; +} + +.gh-filter-builder .gh-input, +.gh-filter-builder .gh-select, +.gh-filter-builder select { + height: 33px; + font-size: 1.35rem; +} + +.gh-filter-builder .gh-select svg { + width: 9px; + height: 9px; + margin-right: 0; +} + +.gh-filter-builder .gh-delete-filter { + margin-left: 4px; +} + +.gh-filter-builder .gh-delete-filter svg { + width: 10px; + height: 10px; +} + +.gh-filter-builder .gh-delete-filter svg path { + stroke: var(--middarkgrey); +} + +.gh-filter-builder .gh-delete-filter:hover svg path { + stroke: var(--red); +} + +.gh-add-filter svg { + margin-right: 7px; +} + +.gh-add-filter svg path { + stroke: none !important; + fill: var(--green-d1); +} + +.gh-filter-builder .gh-filter-block-divider { + display: flex; + align-items: center; + font-size: 1.1rem; + font-weight: 500; + letter-spacing: .1px; + color: var(--midgrey); + text-transform: uppercase; + margin: 12px 0; +} + +.gh-filter-builder .gh-filter-block-divider::before { + content: ""; + display: block; + width: 16px; + height: 1px; + background: var(--whitegrey-d2); + margin: 0 4px 0 -16px; +} + +.gh-filter-builder .gh-filter-block-divider::after { + content: ""; + flex-grow: 1; + display: block; + height: 1px; + background: var(--whitegrey-d2); + margin: 0 -16px 0 4px; +} + +.gh-filter-builder-footer { + display: flex; + align-items: center; + justify-content: flex-end; + margin-top: 20px; +} \ No newline at end of file diff --git a/ghost/admin/app/styles/layouts/main.css b/ghost/admin/app/styles/layouts/main.css index a78079674a..1f9db39267 100644 --- a/ghost/admin/app/styles/layouts/main.css +++ b/ghost/admin/app/styles/layouts/main.css @@ -1417,13 +1417,13 @@ font-size: 1.35rem; } -.view-actions .gh-btn:not(.gh-btn-primary):not(.gh-btn-blue):not(.gh-btn-green) { +.view-actions .gh-btn:not(.gh-btn-primary):not(.gh-btn-blue):not(.gh-btn-green):not(.gh-btn-link) { border: none; box-shadow: none; background: color-mod(var(--whitegrey-l1) l(-3%)); } -.view-actions .gh-btn:not(.gh-btn-primary):not(.gh-btn-blue):not(.gh-btn-green):hover { +.view-actions .gh-btn:not(.gh-btn-primary):not(.gh-btn-blue):not(.gh-btn-green):not(.gh-btn-link):hover { background: var(--whitegrey); } @@ -1447,20 +1447,6 @@ fill: color-mod(var(--midlightgrey) l(+5%)); } -.gh-actions-cog { - margin-right: 10px -} - -.gh-actions-cog svg { - height: 16px; - width: 16px; - margin-right: 0; -} - -.gh-actions-cog svg path { - stroke: currentColor; -} - .gh-actions-menu { top: calc(100% + 6px); right: 10px; diff --git a/ghost/admin/app/styles/layouts/members.css b/ghost/admin/app/styles/layouts/members.css index 1d77df5205..05e340b8bf 100644 --- a/ghost/admin/app/styles/layouts/members.css +++ b/ghost/admin/app/styles/layouts/members.css @@ -1802,3 +1802,7 @@ p.gh-members-import-errordetail:first-of-type { .gh-member-addcomp-warning { margin-top: -16px; } + +.gh-members-filter-builder { + width: 720px; +} \ No newline at end of file diff --git a/ghost/admin/app/styles/patterns/buttons.css b/ghost/admin/app/styles/patterns/buttons.css index d7cc5c94b7..3dfea6cb70 100644 --- a/ghost/admin/app/styles/patterns/buttons.css +++ b/ghost/admin/app/styles/patterns/buttons.css @@ -361,6 +361,24 @@ svg.gh-btn-icon-right { color: var(--red); } +.gh-btn-action-icon { + margin-right: 10px +} + +.gh-btn-action-icon svg { + height: 16px; + width: 16px; + margin: 0; +} + +.gh-btn-action-icon:not(.icon-only) svg { + margin-right: 10px; +} + +.gh-btn-action-icon svg path { + stroke: currentColor; +} + /* /* Button Variations diff --git a/ghost/admin/app/templates/dashboard.hbs b/ghost/admin/app/templates/dashboard.hbs index 83981e0e6d..f260528d02 100644 --- a/ghost/admin/app/templates/dashboard.hbs +++ b/ghost/admin/app/templates/dashboard.hbs @@ -15,7 +15,7 @@ Start setup guide
+ @classNames="gh-btn gh-btn-icon icon-only gh-dashboard-dismissbutton dark"> {{svg-jar "dotdotdot"}} diff --git a/ghost/admin/app/templates/editor.hbs b/ghost/admin/app/templates/editor.hbs index bf528a6ecf..d4ea0ed834 100644 --- a/ghost/admin/app/templates/editor.hbs +++ b/ghost/admin/app/templates/editor.hbs @@ -110,7 +110,7 @@ {{/if}}
-