diff --git a/.lint-todo b/.lint-todo index 30423e16d..2dc10c29c 100644 --- a/.lint-todo +++ b/.lint-todo @@ -1106,3 +1106,50 @@ add|ember-template-lint|require-valid-alt-text|8|20|8|20|9d0c591086dc9139ff38a7b add|ember-template-lint|require-input-label|10|12|10|12|8c3c0ea315ff4da828363989a45fa11256a78796|1649203200000|1651795200000|1654387200000|lib/koenig-editor/addon/components/koenig-card-image/selector-tenor.hbs remove|ember-template-lint|no-with|2|0|2|0|0f2ccc59fb9c8536430187580b4cfcc9e946d780|1649203200000|1651795200000|1654387200000|app/components/gh-basic-dropdown.hbs remove|ember-template-lint|no-quoteless-attributes|46|59|46|59|c7ec82d1c4dca380890a40909733cc5029b9c095|1649203200000|1651795200000|1654387200000|app/templates/editor.hbs +remove|ember-template-lint|no-action|11|142|11|142|d7344cff0074353f10626fbe36707360e8ffd52c|1649203200000|1651795200000|1654387200000|app/components/modal-portal-settings.hbs +remove|ember-template-lint|no-action|14|142|14|142|d07a2c2968b7c337172eb3d189fcd004f05034d7|1649203200000|1651795200000|1654387200000|app/components/modal-portal-settings.hbs +remove|ember-template-lint|no-action|33|57|33|57|b5e82dc8693610f3eb52006adac6456b86fb5ff1|1649203200000|1651795200000|1654387200000|app/components/modal-portal-settings.hbs +remove|ember-template-lint|no-action|61|61|61|61|fc5db5638fa960219dcaac666df85bd49ae5ba39|1649203200000|1651795200000|1654387200000|app/components/modal-portal-settings.hbs +remove|ember-template-lint|no-action|83|65|83|65|9e5e50275cb198c163f5da82335957b69255ac1a|1649203200000|1651795200000|1654387200000|app/components/modal-portal-settings.hbs +remove|ember-template-lint|no-action|112|61|112|61|fc5db5638fa960219dcaac666df85bd49ae5ba39|1649203200000|1651795200000|1654387200000|app/components/modal-portal-settings.hbs +remove|ember-template-lint|no-action|135|61|135|61|4a9c1575e2a51a19d342f234cc41b045ea419ae3|1649203200000|1651795200000|1654387200000|app/components/modal-portal-settings.hbs +remove|ember-template-lint|no-action|156|61|156|61|40f0dc3732c554bb3f69d3d126263eb0a24f7738|1649203200000|1651795200000|1654387200000|app/components/modal-portal-settings.hbs +remove|ember-template-lint|no-action|166|67|166|67|d7344cff0074353f10626fbe36707360e8ffd52c|1649203200000|1651795200000|1654387200000|app/components/modal-portal-settings.hbs +remove|ember-template-lint|no-action|181|52|181|52|6cb8968d67fbe25c46f1f963ad4f5564f51746f0|1649203200000|1651795200000|1654387200000|app/components/modal-portal-settings.hbs +remove|ember-template-lint|no-action|204|52|204|52|4432d73cb43005a6c5ab22362c8773f0f21d0ac4|1649203200000|1651795200000|1654387200000|app/components/modal-portal-settings.hbs +remove|ember-template-lint|no-action|215|56|215|56|3ae31e5d2f432b152768be816a2fc40803434382|1649203200000|1651795200000|1654387200000|app/components/modal-portal-settings.hbs +remove|ember-template-lint|no-action|222|171|222|171|b84f11a781130328997f76bd3ef2f3faa57a31d0|1649203200000|1651795200000|1654387200000|app/components/modal-portal-settings.hbs +remove|ember-template-lint|no-action|236|68|236|68|7fab1dccd9502d972b0b6f3fbbea8340483ada89|1649203200000|1651795200000|1654387200000|app/components/modal-portal-settings.hbs +remove|ember-template-lint|no-action|241|138|241|138|22c6e583ac81ee6f218414ee5f5271469891c114|1649203200000|1651795200000|1654387200000|app/components/modal-portal-settings.hbs +remove|ember-template-lint|no-action|246|129|246|129|69e5f19c951bf70e9e7eaa72ea2b784ab97c3dff|1649203200000|1651795200000|1654387200000|app/components/modal-portal-settings.hbs +remove|ember-template-lint|no-action|273|47|273|47|bb06a1edb1abab80686af224b1e77ff4cba9d604|1649203200000|1651795200000|1654387200000|app/components/modal-portal-settings.hbs +remove|ember-template-lint|no-action|281|67|281|67|d0601ba765735657d724123264ad81ccb959cd6b|1649203200000|1651795200000|1654387200000|app/components/modal-portal-settings.hbs +remove|ember-template-lint|no-action|288|43|288|43|b7fa34dcfcdeab84175766fab6106fe6659f53e7|1649203200000|1651795200000|1654387200000|app/components/modal-portal-settings.hbs +remove|ember-template-lint|no-action|310|102|310|102|d7344cff0074353f10626fbe36707360e8ffd52c|1649203200000|1651795200000|1654387200000|app/components/modal-portal-settings.hbs +remove|ember-template-lint|no-action|311|107|311|107|d0601ba765735657d724123264ad81ccb959cd6b|1649203200000|1651795200000|1654387200000|app/components/modal-portal-settings.hbs +remove|ember-template-lint|no-action|312|97|312|97|4f3b22e95cffd8f24cf49a30092a5d9e0b708e47|1649203200000|1651795200000|1654387200000|app/components/modal-portal-settings.hbs +remove|ember-template-lint|no-action|317|57|317|57|141d456b03124abca146e58e4ae15825fdd040bb|1649203200000|1651795200000|1654387200000|app/components/modal-portal-settings.hbs +add|ember-template-lint|no-action|13|112|13|112|decaf649532f1148f5071c2070b99d4e28986150|1651104000000|1653696000000|1656288000000|app/components/modal-portal-settings.hbs +add|ember-template-lint|no-action|18|160|18|160|d7344cff0074353f10626fbe36707360e8ffd52c|1651104000000|1653696000000|1656288000000|app/components/modal-portal-settings.hbs +add|ember-template-lint|no-action|20|150|20|150|d07a2c2968b7c337172eb3d189fcd004f05034d7|1651104000000|1653696000000|1656288000000|app/components/modal-portal-settings.hbs +add|ember-template-lint|no-action|38|69|38|69|b5e82dc8693610f3eb52006adac6456b86fb5ff1|1651104000000|1653696000000|1656288000000|app/components/modal-portal-settings.hbs +add|ember-template-lint|no-action|66|73|66|73|fc5db5638fa960219dcaac666df85bd49ae5ba39|1651104000000|1653696000000|1656288000000|app/components/modal-portal-settings.hbs +add|ember-template-lint|no-action|88|77|88|77|9e5e50275cb198c163f5da82335957b69255ac1a|1651104000000|1653696000000|1656288000000|app/components/modal-portal-settings.hbs +add|ember-template-lint|no-action|117|73|117|73|fc5db5638fa960219dcaac666df85bd49ae5ba39|1651104000000|1653696000000|1656288000000|app/components/modal-portal-settings.hbs +add|ember-template-lint|no-action|140|73|140|73|4a9c1575e2a51a19d342f234cc41b045ea419ae3|1651104000000|1653696000000|1656288000000|app/components/modal-portal-settings.hbs +add|ember-template-lint|no-action|161|73|161|73|40f0dc3732c554bb3f69d3d126263eb0a24f7738|1651104000000|1653696000000|1656288000000|app/components/modal-portal-settings.hbs +add|ember-template-lint|no-action|175|112|175|112|d4947b819970cbee74170cd33c3067f75dde86d2|1651104000000|1653696000000|1656288000000|app/components/modal-portal-settings.hbs +add|ember-template-lint|no-action|180|85|180|85|d7344cff0074353f10626fbe36707360e8ffd52c|1651104000000|1653696000000|1656288000000|app/components/modal-portal-settings.hbs +add|ember-template-lint|no-action|194|64|194|64|6cb8968d67fbe25c46f1f963ad4f5564f51746f0|1651104000000|1653696000000|1656288000000|app/components/modal-portal-settings.hbs +add|ember-template-lint|no-action|217|64|217|64|4432d73cb43005a6c5ab22362c8773f0f21d0ac4|1651104000000|1653696000000|1656288000000|app/components/modal-portal-settings.hbs +add|ember-template-lint|no-action|228|68|228|68|3ae31e5d2f432b152768be816a2fc40803434382|1651104000000|1653696000000|1656288000000|app/components/modal-portal-settings.hbs +add|ember-template-lint|no-action|235|183|235|183|b84f11a781130328997f76bd3ef2f3faa57a31d0|1651104000000|1653696000000|1656288000000|app/components/modal-portal-settings.hbs +add|ember-template-lint|no-action|249|80|249|80|7fab1dccd9502d972b0b6f3fbbea8340483ada89|1651104000000|1653696000000|1656288000000|app/components/modal-portal-settings.hbs +add|ember-template-lint|no-action|254|150|254|150|22c6e583ac81ee6f218414ee5f5271469891c114|1651104000000|1653696000000|1656288000000|app/components/modal-portal-settings.hbs +add|ember-template-lint|no-action|259|141|259|141|69e5f19c951bf70e9e7eaa72ea2b784ab97c3dff|1651104000000|1653696000000|1656288000000|app/components/modal-portal-settings.hbs +add|ember-template-lint|no-action|286|59|286|59|bb06a1edb1abab80686af224b1e77ff4cba9d604|1651104000000|1653696000000|1656288000000|app/components/modal-portal-settings.hbs +add|ember-template-lint|no-action|297|112|297|112|044d2c50ef7e4765d1130fb40d620b90bae19174|1651104000000|1653696000000|1656288000000|app/components/modal-portal-settings.hbs +add|ember-template-lint|no-action|302|85|302|85|d0601ba765735657d724123264ad81ccb959cd6b|1651104000000|1653696000000|1656288000000|app/components/modal-portal-settings.hbs +add|ember-template-lint|no-action|308|55|308|55|b7fa34dcfcdeab84175766fab6106fe6659f53e7|1651104000000|1653696000000|1656288000000|app/components/modal-portal-settings.hbs +add|ember-template-lint|no-action|338|32|338|32|b7ca157f62b1295d8f5839c8f5d33a6020bc98a8|1651104000000|1653696000000|1656288000000|app/components/modal-portal-settings.hbs +add|ember-template-lint|no-action|345|57|345|57|141d456b03124abca146e58e4ae15825fdd040bb|1651104000000|1653696000000|1656288000000|app/components/modal-portal-settings.hbs diff --git a/app/components/modal-portal-settings.hbs b/app/components/modal-portal-settings.hbs index eead98058..bde27ea38 100644 --- a/app/components/modal-portal-settings.hbs +++ b/app/components/modal-portal-settings.hbs @@ -1,304 +1,327 @@ {{!-- template-lint-disable no-invalid-interactive --}} -
-
+
+
{{#if this.isPreloading}} {{else}} -
-

Portal settings

-
-
-
-

Signup options - {{#unless this.membersUtils.isStripeEnabled}} - - {{/unless}} -

- -
-
-

Display name in signup form

-
-
- -
-
- - {{#if this.membersUtils.isStripeEnabled}} -
- {{#if this.showPortalTiers}} -
-

Tiers available at signup

-
-
- -
- {{#each this.products as |product|}} -
- -
- {{/each}} - {{/if}} - {{#if this.showPortalPrices}} -
-

Prices available at signup

-
- {{/if}} - {{#unless this.showPortalTiers}} -
- -
- {{/unless}} - {{#if this.showPortalPrices}} -
- -
-
- -
- {{/if}} -
- {{/if}} -
-
-

Look & feel

- -
-

Show Portal button

-
- -
-
- - {{#if this.settings.portalButton}} -
- -

Portal button style

- - - {{svg-jar "arrow-down-small"}} - - - {{#if this.showIconSetting}} - -

Icon

- -
-
- {{#each this.membersUtils.defaultButtonIcons as |imgIcon| }} - - {{svg-jar imgIcon.icon}} - - {{/each}} -
-
- {{#if uploader.isUploading}} -
- -
- {{else if this.customIcon}} - icon - {{#if (eq this.membersUtils.buttonIcon this.customIcon)}} - - {{/if}} - {{else}} - -
- -
- {{/if}} -
+
+

Portal settings

+
+
+
+ {{#let (eq this.openSection "signup-options") as |isOpen|}} + + {{#liquid-if isOpen}} +
+ {{#unless this.membersUtils.isStripeEnabled}} + + {{/unless}} + +
+
+

Display name in signup form

- - +
+ +
+
- {{/if}} -
- {{#if this.showButtonTextSetting}} - -

Signup button text

- -
- + {{#if this.membersUtils.isStripeEnabled}} +
+ {{#if this.showPortalTiers}} +
+

Tiers available at signup

+
+
+ +
+ {{#each this.products as |product|}} +
+ +
+ {{/each}} + {{/if}} + {{#if this.showPortalPrices}} +
+

Prices available at signup

+
+ {{/if}} + {{#unless this.showPortalTiers}} +
+ +
+ {{/unless}} + {{#if this.showPortalPrices}} +
+ +
+
+ +
+ {{/if}} +
+ {{/if}}
- - {{/if}} - {{/if}} -
+ {{/liquid-if}} + {{/let}} -
-

Account page settings

- -

Support email address

-
- - -
-

How members can reach you for help with their account (public)

- + {{#let (eq this.openSection "look-and-feel") as |isOpen|}} + + {{#liquid-if isOpen}} +
+ +
+

Show Portal button

+
+ +
+
+ + {{#if this.settings.portalButton}} +
+ +

Portal button style

+ + + {{svg-jar "arrow-down-small"}} + + + {{#if this.showIconSetting}} + +

Icon

+ +
+
+ {{#each this.membersUtils.defaultButtonIcons as |imgIcon| }} + + {{svg-jar imgIcon.icon}} + + {{/each}} +
+
+ {{#if uploader.isUploading}} +
+ +
+ {{else if this.customIcon}} + icon + {{#if (eq this.membersUtils.buttonIcon this.customIcon)}} + + {{/if}} + {{else}} + +
+ +
+ {{/if}} +
+
+ + + + {{/if}} +
+ {{#if this.showButtonTextSetting}} + +

Signup button text

+ +
+ +
+ + {{/if}} + {{/if}} +
+ {{/liquid-if}} + {{/let}} + + {{#let (eq this.openSection "account-page") as |isOpen|}} + + {{#liquid-if isOpen}} +
+ +

Support email address

+
+ + +
+

How members can reach you for help with their account (public)

+ +
+ {{/liquid-if}} + {{/let}}
@@ -306,10 +329,15 @@
-
- Signup - Account - Links +
+ + {{svg-jar "arrow-down-small"}}
diff --git a/app/components/modal-portal-settings.js b/app/components/modal-portal-settings.js index 9cf32fb5f..daf49c3f1 100644 --- a/app/components/modal-portal-settings.js +++ b/app/components/modal-portal-settings.js @@ -25,6 +25,7 @@ export default ModalComponent.extend({ showLeaveSettingsModal: false, isPreloading: true, changedProducts: null, + openSection: null, portalPreviewGuid: 'modal-portal-settings', confirm() {}, @@ -135,6 +136,16 @@ export default ModalComponent.extend({ {name: 'icon-only', label: 'Icon only'}, {name: 'text-only', label: 'Text only'} ]; + this.availablePages = [{ + name: 'signup', + label: 'Signup' + }, { + name: 'accountHome', + label: 'Account' + }, { + name: 'links', + label: 'Links' + }]; this.iconExtensions = ICON_EXTENSIONS; this.changedProducts = []; this.set('supportAddress', this.parseEmailAddress(this.settings.get('membersSupportAddress'))); @@ -162,6 +173,13 @@ export default ModalComponent.extend({ togglePortalName(showSignupName) { this.settings.set('portalName', showSignupName); }, + toggleSection(section) { + if (this.get('openSection') === section) { + this.set('openSection', null); + } else { + this.set('openSection', section); + } + }, confirm() { return this.saveTask.perform(); @@ -173,12 +191,12 @@ export default ModalComponent.extend({ }, switchPreviewPage(page) { - if (page === 'links') { + if (page.name === 'links') { this.set('showLinksPage', true); this.set('page', ''); } else { this.set('showLinksPage', false); - this.set('page', page); + this.set('page', page.name); } }, diff --git a/app/components/modals/newsletters/edit.hbs b/app/components/modals/newsletters/edit.hbs index 700df4e8e..a9ae9a066 100644 --- a/app/components/modals/newsletters/edit.hbs +++ b/app/components/modals/newsletters/edit.hbs @@ -1,28 +1,48 @@
-
-
-

- {{if @data.newsletter.isNew "Create" "Edit"}} newsletter -

-
- - +
+

+ {{if @data.newsletter.isNew "Create" "Edit"}} newsletter +

+
+
+ + +
+
+
+ +
+ {{svg-jar "heart"}} +
+

Promote independent publishing

+

Show you’re a part of the indie publishing movement with a small badge in the footer

+
+
+
+ +
+ +
- - {{#if (eq this.tab "settings")}} - - {{else}} - - {{/if}}
-
+
diff --git a/app/components/modals/newsletters/edit.js b/app/components/modals/newsletters/edit.js index 1fdda2bf1..5fc84d723 100644 --- a/app/components/modals/newsletters/edit.js +++ b/app/components/modals/newsletters/edit.js @@ -12,18 +12,13 @@ export default class EditNewsletterModal extends Component { className: 'fullscreen-modal-full-overlay fullscreen-modal-portal-settings' }; - @tracked tab = 'settings'; + @tracked openSection = null; willDestroy() { super.willDestroy(...arguments); this.args.data.newsletter.rollbackAttributes(); } - @action - changeTab(tab) { - this.tab = tab; - } - @action saveViaKeyboard(event, responder) { responder.stopPropagation(); @@ -32,6 +27,20 @@ export default class EditNewsletterModal extends Component { this.saveTask.perform(); } + @action + toggleSection(section) { + if (this.openSection === section) { + this.openSection = null; + } else { + this.openSection = section; + } + } + + @action + toggleSetting(property, event) { + this.args.data.newsletter[property] = event.target.checked; + } + @task *saveTask() { try { diff --git a/app/components/modals/newsletters/edit/design.hbs b/app/components/modals/newsletters/edit/design.hbs index 137c17393..198deafef 100644 --- a/app/components/modals/newsletters/edit/design.hbs +++ b/app/components/modals/newsletters/edit/design.hbs @@ -1,185 +1,191 @@ -
-
-
-

Header

- - -
-
-

Header image

-

Optional, recommended size 1200x600

-
- {{#if uploader.isUploading}} -
- -
- {{else if @newsletter.headerImage}} -
- - -
- {{else}} - -
- -
+
+

Design

+ +
+ + {{#let (eq @openSection "design-header") as |isOpen|}} + + {{#liquid-if isOpen}} +
+
+ + +
+
+ +

Optional, recommended size 1200x600

+
+ {{#if uploader.isUploading}} +
+ +
+ {{else if @newsletter.headerImage}} +
+ + +
+ {{else}} + +
+ +
+ {{/if}} +
+ + + + {{#if this.settings.icon}} + + +
+ +
+ {{/if}} -
- - - {{#if this.settings.icon}} - -

Publication icon

-
- -
- - {{/if}} - -

Publication title

-
- -
- - -

Newsletter name

-
- -
- -
-
-

Body

- -

Title style

-
-
- -
-
- - + + +
+ +
+ + + +
+ +
+
- - -

Body style

-
-
- -
-
- - -

Feature image

-
- -
- -
+ {{/liquid-if}} + {{/let}} -
-

Footer

- - - -

Any extra information or legal text

- -
-
-
-
- -
- {{svg-jar "heart"}} -
-

Promote independent publishing

-

Show you’re a part of the indie publishing movement with a small badge in the footer

-
-
-
- -
- -
\ No newline at end of file + {{#let (eq @openSection "design-body") as |isOpen|}} + + {{#liquid-if isOpen}} +
+
+ + +
+
+ +
+
+ + +
+
+ + + +
+
+ +
+
+ + + +
+ +
+ +
+
+ {{/liquid-if}} + {{/let}} + + {{#let (eq @openSection "design-footer") as |isOpen|}} + + {{#liquid-if isOpen}} +
+
+ + + +

Any extra information or legal text

+ +
+
+ {{/liquid-if}} + {{/let}} +
+
\ No newline at end of file diff --git a/app/components/modals/newsletters/edit/preview.hbs b/app/components/modals/newsletters/edit/preview.hbs index 398a4f23a..9d6534ce6 100644 --- a/app/components/modals/newsletters/edit/preview.hbs +++ b/app/components/modals/newsletters/edit/preview.hbs @@ -1,4 +1,4 @@ -
+

diff --git a/app/components/modals/newsletters/edit/settings.hbs b/app/components/modals/newsletters/edit/settings.hbs index 059eb52de..edd095091 100644 --- a/app/components/modals/newsletters/edit/settings.hbs +++ b/app/components/modals/newsletters/edit/settings.hbs @@ -1,93 +1,122 @@ -

-
-
-

General

- - - - - +
+
+

General settings

- - - - - -
+ {{#let (eq @openSection "name") as |isOpen|}} + + {{#liquid-if isOpen}} +
+
+ + + + + -
-

Email addresses

- - - - - - - - - - {{svg-jar "info" class="fill-darkgrey w4 h4"}} - - - - - - - - - Newsletter address ({{full-email-address (or @newsletter.senderEmail "noreply")}}) - Support address ({{full-email-address this.settings.membersSupportAddress}}) - - - -
- -
-

Member settings

- - -
-
- - + + + + +
- -
-
-
\ No newline at end of file + {{/liquid-if}} + {{/let}} + + {{#let (eq @openSection "email") as |isOpen|}} + + {{#liquid-if isOpen}} +
+
+ + + + + + + + + + {{svg-jar "info" class="fill-darkgrey w4 h4"}} + + + + + + + + + Newsletter address ({{full-email-address (or @newsletter.senderEmail "noreply")}}) + Support address ({{full-email-address this.settings.membersSupportAddress}}) + + + +
+
+ {{/liquid-if}} + {{/let}} + + {{#let (eq @openSection "members") as |isOpen|}} + + {{#liquid-if isOpen}} +
+
+ + +
+
+ + +
+
+ +
+
+ {{/liquid-if}} + {{/let}} +
+
\ No newline at end of file diff --git a/app/styles/components/modals.css b/app/styles/components/modals.css index fcc897967..b651e2c19 100644 --- a/app/styles/components/modals.css +++ b/app/styles/components/modals.css @@ -591,3 +591,180 @@ margin-right: 10px; } } + +/* Fullscreen Modal Labs +/* ---------------------------------------------------------- */ + +.modal-fullsettings-sidebar-labs { + display: flex; + flex-direction: column; + width: 400px; + overflow-y: auto; +} + +.modal-fullsettings-heading-labs { + display: flex; + align-items: center; + margin: 0; + padding: 32px; + font-size: 2rem; + font-weight: 600; +} + +.modal-fullsettings-body-labs { + display: flex; + flex-direction: column; + flex-grow: 1; + justify-content: space-between; + overflow: hidden; + overflow-y: auto; + overflow-x: hidden; +} + +.modal-fullsettings-section-labs { + display: flex; + flex-direction: column; + justify-content: space-between; + flex-grow: 1; + overflow-y: auto; + padding: 0; + margin-bottom: 24px; +} + +.modal-fullsettings-section-title { + margin: 0 16px 4px; + padding: 8px 16px; + color: var(--black); + font-size: 1.5rem; + font-weight: 600; + line-height: 1.3em; +} + +.modal-fullsettings-tab { + display: flex; + flex-grow: 1; + position: relative; + align-items: center; + box-sizing: border-box; + padding: 7px var(--main-layout-area-padding); + color: var(--darkgrey-l1); + font-weight: 400; + font-size: 1.45rem; + transition: none; +} + +.modal-fullsettings-tab:hover { + color: var(--black); +} + +.modal-fullsettings-tab.active { + color: var(--black); + font-weight: 400; + border-radius: var(--border-radius) var(--border-radius) 0 0; +} + +.modal-fullsettings-tab:not(.active):hover { + background: var(--mainmenu-color-hover-bg); +} + +.modal-fullsettings-form-labs .modal-fullsettings-tab svg { + margin-right: 17px; + width: 16px; + height: 16px; + line-height: 1; + transition: none; + z-index: 999; +} + +.modal-fullsettings-tab-expanded { + margin: 8px 0 24px; + padding: 24px var(--main-layout-area-padding) 16px; + background: var(--mainmenu-color-hover-bg); +} + +.modal-fullsettings-tab-expanded .gh-setting { + padding: 12px 0; +} + +.modal-fullsettings-form-labs .for-checkbox .input-toggle-component { + background: var(--white); +} + +.modal-fullsettings-form-labs .gh-nav-button-expand { + position: relative; + top: inherit; + left: inherit; + margin: 0 8px 0 auto; + padding-top: 3px; +} + +.modal-fullsettings-form-labs .gh-nav-button-expand svg { + margin-right: 0; +} + +.modal-fullsettings-main-topbar-labs { + display: flex; + align-items: center; + justify-content: flex-end; + position: relative; + width: 100%; + height: 90px; + padding: 2.4rem; +} + +.modal-fullsettings-preview-container-labs { + overflow: hidden; + background: var(--white); + height: 100vh; + overflow-y: scroll; +} + +.modal-fullsettings-bottom { + position: sticky; + -webkit-position: sticky; + bottom: -24px; + z-index: 9997; + height: 164px; + -webkit-backface-visibility: hidden; +} + +.modal-fullsettings-bottom::before, +.modal-fullsettings-bottom::after { + content: ""; + position: sticky; + -webkit-position: sticky; + display: block; + height: 24px; +} + +.modal-fullsettings-bottom::before { + z-index: 9998; + bottom: 0; + background: var(--white); +} + +.modal-fullsettings-bottom::after { + bottom: 116px; + box-shadow: 0 0 0 1px rgba(0,0,0,.04), 0 -8px 16px -3px rgba(0,0,0,.15); +} + +.modal-fullsettings-footer { + position: sticky; + -webkit-position: sticky; + bottom: 0; + z-index: 9999; + display: flex; + align-items: center; + height: 140px; + margin-bottom: -24px; + padding: var(--main-layout-area-padding); + background: var(--white); +} + +.modal-fullsettings-footer .form-group { + display: flex; + justify-content: space-between; + align-items: flex-start; + padding: 0; + margin-bottom: 0; +} \ No newline at end of file diff --git a/app/styles/layouts/members.css b/app/styles/layouts/members.css index 4b49e936f..c4c35e7ea 100644 --- a/app/styles/layouts/members.css +++ b/app/styles/layouts/members.css @@ -1708,9 +1708,10 @@ p.gh-members-import-errordetail:first-of-type { padding: 0; } .gh-members-emailsettings-footer-input { - border: 1px solid var(--whitegrey-d1); - padding: 0 12px 6px 12px; height: 120px; + padding: 0 12px 6px 12px; + border: 1px solid var(--whitegrey-d1); + background: var(--white); border-radius: 4px; } diff --git a/app/styles/layouts/portal-settings.css b/app/styles/layouts/portal-settings.css index d1bea7ea2..f630cb404 100644 --- a/app/styles/layouts/portal-settings.css +++ b/app/styles/layouts/portal-settings.css @@ -61,12 +61,12 @@ .gh-portal-settings-sidebar { padding: 0; - width: 380px; + width: 400px; } .gh-portal-form-wrapper { overflow: hidden; - width: 380px; + width: 400px; } .gh-portal-settings-form { @@ -390,22 +390,15 @@ } .gh-portal-settings-title { - display: flex; - align-items: center; - padding: 0 24px; - margin: 0; - height: 66px; - font-size: 1.9rem; - font-weight: 600; - letter-spacing: -0.1px; + padding-bottom: 28px; } .gh-portal-settings-previewheader { display: flex; align-items: center; - justify-content: flex-start; + justify-content: flex-end; position: relative; - height: 66px; + height: 84px; padding: 0 24px; margin: 0; width: 100%; @@ -416,26 +409,24 @@ } .gh-portal-settings-actions { - position: absolute; - top: 16px; - right: 24px; display: flex; align-items: center; + margin-left: 24px; } .gh-portal-preview-wrapper { overflow: hidden; - max-height: calc(100vh - 60px - 66px); + max-height: calc(100vh - 60px - 84px); height: 100%; - background: #EDF0F2; + background: linear-gradient(45deg, rgba(255,255,255,1) 0%, rgba(249,249,250,1) 100%); } .gh-portal-preview-container { position: relative; flex-grow: 1; overflow: hidden; - background: #EDF0F2; - max-height: calc(100vh - 60px - 66px); + background: linear-gradient(45deg, rgba(255,255,255,1) 0%, rgba(249,249,250,1) 100%); + max-height: calc(100vh - 60px - 84px); } .gh-portal-preview-wrapper .gh-portal-preview-container { @@ -472,7 +463,8 @@ } .gh-portal-links-main h2 { - font-weight: 500; + font-weight: 600; + font-size: 1.9rem; } .gh-portal-links-main p { @@ -634,4 +626,17 @@ background: var(--whitegrey-d2) !important; color: var(--darkgrey) !important; cursor: auto; +} + +.gh-portal-settings-sidebar .modal-fullsettings-tab-expanded { + padding-top: 16px; +} + +.gh-portal-settings-previewheader .gh-preview-page-selector, +.gh-portal-settings-previewheader .gh-preview-page-selector select { + width: 160px; +} + +.gh-portal-settings-previewheader .gh-preview-page-selector svg { + top: 16px; } \ No newline at end of file diff --git a/app/styles/layouts/settings.css b/app/styles/layouts/settings.css index 427b0a471..cac077b3b 100644 --- a/app/styles/layouts/settings.css +++ b/app/styles/layouts/settings.css @@ -1043,10 +1043,6 @@ stroke-width: 3; } -.gh-newsletters-labs .modal-fullsettings-sidebar { - width: 380px; -} - .gh-newsletters-setting-sectionheading { font-size: 1.1rem; font-weight: 600; @@ -1058,32 +1054,46 @@ border-bottom: 1px solid var(--whitegrey); } -.gh-newsletters-labs .modal-fullsettings-section { - margin: 40px 0; - padding: 0; -} - -.gh-newsletters-labs .modal-fullsettings-section.first { - margin-top: 8px; -} - .gh-newsletters-labs .form-group.vertical p { margin: 4px 0 0; } +.gh-newsletters-labs .modal-fullsettings-uploader { + flex-grow: 1; + margin: 0; +} + +.gh-newsletters-labs .gh-header-img-uploadicon { + background: var(--whitegrey-l2); +} + +.gh-newsletters-labs .gh-email-design-typography-wrapper.header .gh-btn-group { + background: var(--whitegrey-d1); +} + .gh-newsletters-labs .gh-members-emailsettings-footer { margin-top: auto; margin-bottom: 0; } -.modal-fullsettings-main-topbar { - display: flex; - align-items: center; - justify-content: flex-end; - position: relative; - width: 100%; - height: 66px; - padding: 2.4rem; +.gh-newsletters-labs .gh-members-emailpreview-container { + margin: 16px auto 32px; +} + +.gh-newsletters-labs .gh-members-emailpreview-faux { + height: 88px; + background: var(--whitegrey-l2); +} + +.gh-newsletters-labs .gh-members-emailpreview-faux .dark, +.gh-newsletters-labs .gh-members-emailpreview-faux .strong { + color: var(--darkgrey); + font-size: 1.4rem; + font-weight: 600; +} + +.gh-newsletters-labs .gh-members-emailpreview-faux p { + color: var(--midgrey-l2); } /* Code injection @@ -1718,7 +1728,6 @@ p.theme-validation-details { color: var(--darkgrey-l1); font-weight: 400; font-size: 1.45rem; - border-radius: var(--border-radius); transition: none; } @@ -1803,7 +1812,7 @@ p.theme-validation-details { .gh-nav-design .gh-nav-bottom::after { bottom: 72px; box-shadow: 0 0 0 1px rgba(0,0,0,.04), 0 -8px 16px -3px rgba(0,0,0,.15); - } +} .gh-change-theme { position: sticky; @@ -1841,7 +1850,6 @@ p.theme-validation-details { margin: 8px 0 24px; padding: 24px var(--main-layout-area-padding) 16px; background: var(--mainmenu-color-hover-bg); - border-radius: 0 0 var(--border-radius) var(--border-radius); } .gh-nav-design .gh-setting { @@ -1943,13 +1951,13 @@ p.theme-validation-details { height: 100%; } -.gh-design-page-preview-mode, -.gh-design-page-preview-mode select { +.gh-preview-page-selector, +.gh-preview-page-selector select { height: 34px; - min-width: 128px; + min-width: 160px; } -.gh-design-page-preview-mode svg { +.gh-preview-page-selector svg { margin-top: -.1em; } diff --git a/app/templates/settings/design/index.hbs b/app/templates/settings/design/index.hbs index 6dd56d848..e872a1c70 100644 --- a/app/templates/settings/design/index.hbs +++ b/app/templates/settings/design/index.hbs @@ -2,7 +2,7 @@

Site design

-
+
\ No newline at end of file diff --git a/public/assets/icons/email-body.svg b/public/assets/icons/email-body.svg new file mode 100644 index 000000000..cba78bb01 --- /dev/null +++ b/public/assets/icons/email-body.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/assets/icons/email-footer.svg b/public/assets/icons/email-footer.svg new file mode 100644 index 000000000..0f3980f79 --- /dev/null +++ b/public/assets/icons/email-footer.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/assets/icons/email-header.svg b/public/assets/icons/email-header.svg new file mode 100644 index 000000000..6206aaba0 --- /dev/null +++ b/public/assets/icons/email-header.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/assets/icons/email-member.svg b/public/assets/icons/email-member.svg new file mode 100644 index 000000000..5cfda6850 --- /dev/null +++ b/public/assets/icons/email-member.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/assets/icons/email-name.svg b/public/assets/icons/email-name.svg new file mode 100644 index 000000000..c770b5505 --- /dev/null +++ b/public/assets/icons/email-name.svg @@ -0,0 +1 @@ + \ No newline at end of file