Portal settings sidebar refinements

no refs.
- refined typography, colors and layout
- using built in admin icons for portal button icon temporarily
- styled icons for future usage with inline svgs

ghost/admin/app/components/modal-members-modal-settings.hbs

@@ -4,7 +4,7 @@
             <h2 class="f4 fw6">Portal settings</h2>
             <fieldset class="gh-portal-settings-form">
                 <div class="gh-portal-setting-section divider-top">
-                    <h3 class="gh-portal-setting-sectionheading">Singup</h3>
+                    <h3 class="gh-portal-setting-sectionheading">Singup options</h3>
                     <GhFormGroup @classNames="gh-members-subscribed-checkbox pb4 mb0">
                         <div class="flex justify-between items-center">
                             <div class="mr3">
@@ -150,7 +150,7 @@
                     </GhFormGroup>
                     {{#if this.settings.portalButton}}
                         <div class="mt5">
-                            <GhFormGroup>
+                            <GhFormGroup class="space-l">
                                 <h4 class="gh-portal-setting-title mb1">Portal button style</h4>
                                 <span
                                     class="gh-select mt2"
@@ -170,7 +170,7 @@
                                 </span>
                             </GhFormGroup>
                             {{#if showIconSetting}}
-                                <GhFormGroup>
+                                <GhFormGroup class="space-l">
                                     <h4 class="gh-portal-setting-title">Icon</h4>
                                     <GhUploader
                                         @extensions={{this.iconExtensions}}
@@ -179,15 +179,10 @@
                                         as
                                         |uploader|
                                     >
-                                        <div class="flex items-center mt2">
+                                        <div class="flex items-center justify-between mt2 br3 ba b--whitegrey">
-                                            <div
+                                            <div class="gh-portal-settings-icons">
-                                                class="flex flex-grow-1 justify-center"
-                                                style="border: 1px solid #d6e3eb;border-radius: 4px;padding: 5px 5px;"
-                                            >
                                                 {{#each this.defaultButtonIcons as |imgIcon| }}
-                                                    <img
+                                                    <span class="gh-portal-button-icon {{if (eq this.buttonIcon imgIcon) "selected-icon"}}" onclick={{action "selectDefaultIcon" imgIcon}}>{{svg-jar imgIcon}}</span>
-                                                        src={{imgIcon}}
-                                                        alt="icon" class="gh-portal-button-icon {{if (eq this.buttonIcon imgIcon) "selected-icon"}}" onclick={{action "selectDefaultIcon" imgIcon}} />
                                                 {{/each}}
                                                 {{#if uploader.isUploading}}
                                                     {{uploader.progressBar}}
@@ -201,17 +196,9 @@
                                                     >
                                                 {{/if}}
                                             </div>
-                                            <div
+                                            <div class="flex gh-setting-action">
-                                                class="flex gh-setting-action"
+                                                <button type="button" class="gh-btn gh-portal-button-uploadicon" onclick={{action "triggerFileDialog"}} data-test-image-upload-btn="icon">
-                                                style="border: 1px solid #d6e3eb;border-radius: 4px;padding: 9px 12px;"
+                                                    <span>{{svg-jar "add" class="w5 h5"}}</span>
-                                            >
-                                                <button
-                                                    type="button"
-                                                    class="gh-btn"
-                                                    onclick={{action "triggerFileDialog"}}
-                                                    data-test-image-upload-btn="icon"
-                                                >
-                                                    <span style="font-size:24px">+</span>
                                                 </button>
                                                 <div style="display:none">
                                                     <GhFileInput
@@ -228,7 +215,8 @@
                                 </GhFormGroup>
                             {{/if}}
                         </div>
-                        <GhFormGroup>
+                        {{#if showButtonTextSetting}}
+                        <GhFormGroup class="space-l">
                             <h4 class="gh-portal-setting-title">Signup button text</h4>
 
                             <div class="flex items-center mt2">
@@ -238,8 +226,8 @@
                                     @input={{action "setSignupButtonText"}}
                                 />
                             </div>
-                            <p class="gh-setting-desc pa0 ma0">Visible to logged out members only</p>
                         </GhFormGroup>
+                        {{/if}}
                     {{/if}}
                 </div>
                 <div class="gh-portal-setting-section divider-top">

ghost/admin/app/components/modal-members-modal-settings.js

@@ -75,6 +75,11 @@ export default ModalComponent.extend({
         return selectedButtonStyle.includes('icon');
     }),
 
+    showButtonTextSetting: computed('selectedButtonStyle', function () {
+        const selectedButtonStyle = this.get('selectedButtonStyle.name') || '';
+        return selectedButtonStyle.includes('text');
+    }),
+
     isFreeChecked: computed('settings.portalPlans.[]', 'allowSelfSignup', function () {
         const allowedPlans = this.settings.get('portalPlans') || [];
         return (this.allowSelfSignup && allowedPlans.includes('free'));
@@ -104,9 +109,11 @@ export default ModalComponent.extend({
             {name: 'text-only', label: 'Text only'}
         ];
         this.defaultButtonIcons = [
-            'https://raw.githubusercontent.com/leungwensen/svg-icon/master/dist/trimmed-svg/metro/user.svg',
+            'user-circle',
-            'https://raw.githubusercontent.com/leungwensen/svg-icon/master/dist/svg/icomoon/user-tie.svg',
+            'ambulance',
-            'https://raw.githubusercontent.com/leungwensen/svg-icon/master/dist/trimmed-svg/evil/user.svg'
+            'book-open',
+            'store',
+            'gift'
         ];
         this.iconExtensions = ICON_EXTENSIONS;
         const portalButtonIcon = this.settings.get('portalButtonIcon') || '';

ghost/admin/app/styles/layouts/members.css

@@ -721,118 +721,4 @@ p.gh-members-import-errordetail:first-of-type {
     .gh-import-member-select select {
         padding: 4px;
     }
-}
-
-/* Portal settings
-/* ----------------------------------------- */
-.gh-portal-settings-sidebar {
-    padding: 28px;
-}
-
-.gh-portal-settings-form {
-    min-width: 290px;
-}
-
-.gh-portal-setting-title {
-    font-size: 1.3rem;
-    font-weight: 600;
-    margin: 0;
-}
-
-.gh-portal-settings .for-switch.small {
-    width: 36px !important;
-    height: 22px !important;
-}
-
-.gh-portal-setting-sectionheading {
-    font-size: 1.2rem;
-    font-weight: 500;
-    color: var(--midgrey-l2);
-    margin: 0 0 12px;
-    text-transform: uppercase;
-    letter-spacing: 0.2px;
-}
-
-.gh-portal-setting-section {
-    margin: 12px -28px;
-    padding: 0 28px;
-}
-
-.gh-portal-setting-section.divider-top {
-    border-top: 1px solid var(--whitegrey);
-    padding-top: 16px;
-}
-
-.gh-portal-settings .input-color input {
-    height: 30px;
-    width: 102px;
-    padding: 3px 4px 3px 44px;
-    font-size: 1.3rem;
-}
-
-.gh-portal-settings .input-color .color-box {
-    height: 28px;
-    width: 28px;
-}
-
-.gh-portal-settings .input-color::after {
-    top: 5px;
-    left: 34px;
-}
-
-.gh-portal-settings .input-color input:focus + .color-box {
-    height: 26px;
-    width: 28px;
-}
-
-.gh-portal-settings .gh-select select,
-.gh-portal-settings .gh-input {
-    padding: 3px 10px 3px 8px;
-    height: 36px;
-    font-size: 1.4rem;
-}
-
-.gh-portal-settings .gh-select select option {
-    height: unset;
-}
-
-.gh-portal-settings .gh-select svg {
-    top: 19px;
-    right: 9px;
-}
-
-.gh-portal-settings-main {
-    display: flex;
-    flex-direction: column;
-    flex-grow: 1;
-    padding: 28px;
-    border-left: 1px solid var(--whitegrey);
-}
-
-.gh-portal-settings .modal-footer {
-    margin-top: 28px;
-}
-
-.gh-portal-settings-maintabs {
-    list-style: none;
-    list-style-type: none;
-    display: flex;
-    align-items: center;
-    padding: 0;
-    margin: 4px 0 16px;
-}
-
-.gh-portal-settings-maintabs li {
-    padding: 0;
-    margin: 0;
-}
-
-.gh-portal-settings-maintabs li a {
-    display: inline-block;
-    padding: 4px 12px;
-    margin: -4px 0;
-}
-
-.gh-portal-settings-maintabs li:first-of-type a {
-    margin-left: -12px;
 }

ghost/admin/app/styles/layouts/portal-settings.css

@@ -53,24 +53,175 @@
     flex-direction: column;
 }
 
-.gh-portal-button-icon {
-    cursor: pointer;
-    height: 44px;
-    padding: 5px 5px;
-    width: 44px;
-    margin-right: 3px;
-}
-
-.gh-portal-button-icon:hover {
-    border: 1px solid skyblue;
-}
-
-.gh-portal-button-icon.selected-icon {
-    border: 1px solid lightblue;
-}
-
 .gh-show-modal-link-form .gh-input {
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
+}
+
+.gh-portal-settings-sidebar {
+    padding: 28px;
+}
+
+.gh-portal-settings-form {
+    min-width: 290px;
+}
+
+.gh-portal-settings .form-group.space-l {
+    margin-bottom: 1.9em;
+}
+
+.gh-portal-setting-title {
+    font-size: 1.3rem;
+    font-weight: 600;
+    margin: 0;
+}
+
+.gh-portal-settings .for-switch.small {
+    width: 36px !important;
+    height: 22px !important;
+}
+
+.gh-portal-setting-sectionheading {
+    font-size: 1.2rem;
+    font-weight: 500;
+    color: var(--midlightgrey);
+    margin: 0 0 12px;
+    text-transform: uppercase;
+    letter-spacing: 0.2px;
+}
+
+.gh-portal-setting-section {
+    margin: 12px -28px;
+    padding: 0 28px;
+}
+
+.gh-portal-setting-section.divider-top {
+    border-top: 1px solid var(--whitegrey);
+    padding-top: 16px;
+}
+
+.gh-portal-settings .input-color input {
+    height: 30px;
+    width: 102px;
+    padding: 3px 4px 3px 44px;
+    font-size: 1.3rem;
+}
+
+.gh-portal-settings .input-color .color-box {
+    height: 28px;
+    width: 28px;
+}
+
+.gh-portal-settings .input-color::after {
+    top: 5px;
+    left: 34px;
+}
+
+.gh-portal-settings .input-color input:focus + .color-box {
+    height: 26px;
+    width: 28px;
+}
+
+.gh-portal-settings .gh-select svg {
+    top: 19px;
+    right: 9px;
+}
+
+.gh-portal-settings-main {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    padding: 28px;
+    border-left: 1px solid var(--whitegrey);
+}
+
+.gh-portal-settings .modal-footer {
+    margin-top: 28px;
+}
+
+.gh-portal-settings-maintabs {
+    list-style: none;
+    list-style-type: none;
+    display: flex;
+    align-items: center;
+    padding: 0;
+    margin: 4px 0 16px;
+}
+
+.gh-portal-settings-maintabs li {
+    padding: 0;
+    margin: 0;
+}
+
+.gh-portal-settings-maintabs li a {
+    display: inline-block;
+    padding: 4px 12px;
+    margin: -4px 0;
+}
+
+.gh-portal-settings-maintabs li:first-of-type a {
+    margin-left: -12px;
+}
+
+.gh-portal-settings-icons {
+    display: flex;
+    flex-grow: 1;
+    align-items: center;
+    justify-content: flex-start;
+    border-right: 1px solid var(--lightgrey);
+    padding: 2px;
+}
+
+.gh-portal-button-icon {
+    display: inline-block;
+    cursor: pointer;
+    width: 41px;
+    height: 41px;
+    padding: 10px;
+    background-repeat: no-repeat;
+    background-size: 22px 22px;
+    background-position: center;
+    border-radius: 2px;
+    margin: 2px 3px 2px;
+}
+
+.gh-portal-button-icon:hover {
+    box-shadow: 0px 0px 0px 1px color-mod(var(--blue) a(40%));
+}
+
+.gh-portal-button-icon.selected-icon {
+    box-shadow: 0px 0px 0px 2px var(--blue);
+}
+
+.gh-portal-button-icon svg {
+    fill: var(--midlightgrey-d1);
+}
+
+.gh-portal-button-icon.selected-icon svg {
+    fill: var(--blue);
+}
+
+.gh-portal-button-uploadicon,
+.gh-portal-button-uploadicon:hover,
+.gh-portal-button-uploadicon:focus {
+    height: 44px;
+    width: 46px;
+    border: none;
+    box-shadow: none;
+}
+
+.gh-portal-button-uploadicon span {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.gh-portal-button-uploadicon span svg {
+    width: 18px;
+    height: 18px;
+}
+
+.gh-portal-button-uploadicon:hover span svg {
+    fill: var(--darkgrey);
 }