Update portal settings (#1731)

* Added auto focusing preview on the signup page while being on links and clicking on any setting in the sidebar

* Refine upload custom portal icon button

* Updated copy for sidebar and links screen

* Added grouping to links list

ghost/admin/app/components/gh-portal-links.hbs

@@ -12,6 +12,9 @@
                     </div>
                 </td>
             </tr>
+            <tr>
+                <td colspan="2"><hr class="gh-portal-links-group-divider first" /></td>
+            </tr>
             <tr>
                 <td class="pagename">Default</td>
                 <td class='page-url'>
@@ -33,6 +36,9 @@
                     </div>
                 </td>
             </tr>
+            <tr>
+                <td colspan="2"><hr class="gh-portal-links-group-divider" /></td>
+            </tr>
             <tr>
                 <td class='pagename'>Sign up</td>
                 <td class='page-url'>
@@ -76,7 +82,10 @@
                 </td>
             </tr>
             <tr>
-                <td class='pagename'>Account home</td>
+                <td colspan="2"><hr class="gh-portal-links-group-divider" /></td>
+            </tr>
+            <tr>
+                <td class='pagename'>Account</td>
                 <td class='page-url'>
                     <div class="gh-portal-page-url-container">
                         <div class="page-url-label">

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

@@ -3,7 +3,7 @@
         <div class="gh-portal-settings-sidebar">
             <h2 class="f4 fw6 pa0 ma0 flex bb b--whitegrey nl6 nr6 pl6 pr6 mb1 items-center gh-portal-settings-topbarheight">Portal settings</h2>
             <fieldset class="gh-portal-settings-form">
-                <div class="gh-portal-setting-section">
+                <div class="gh-portal-setting-section" onclick={{action "switchToSignupPage"}}>
                     <h3 class="gh-portal-setting-sectionheading">Signup options</h3>
                     <GhFormGroup @classNames="gh-members-subscribed-checkbox pb5 mb0">
                         <div class="flex justify-between items-center">
@@ -92,7 +92,7 @@
                     </div>
                     {{/if}}
                 </div>
-                <div class="gh-portal-setting-section divider-top">
+                <div class="gh-portal-setting-section divider-top" onclick={{action "switchToSignupPage"}}>
                     <h3 class="gh-portal-setting-sectionheading"> Look &amp; Feel </h3>
                     <GhFormGroup @classNames="flex">
                         <div class="flex w-100 items-center justify-between">
@@ -212,8 +212,8 @@
                                                     </button>
                                                     {{/if}}
                                                 {{else}}
-                                                    <button type="button" class="gh-btn gh-portal-button-uploadicon" onclick={{action "triggerFileDialog"}} data-test-image-upload-btn="icon">
-                                                        <span>{{svg-jar "add" class="w5 h5"}}</span>
+                                                    <button type="button" class="gh-btn gh-portal-button-uploadicon" onclick={{action "triggerFileDialog"}} data-test-image-upload-btn="icon" data-tooltip="Upload icon">
+                                                        <span>{{svg-jar "upload-fill" class="w5 h5"}}</span>
                                                     </button>
                                                     <div style="display:none">
                                                         <GhFileInput
@@ -250,7 +250,7 @@
                     <h4 class="gh-portal-setting-sectionheading">Links</h4>
                     <GhFormGroup>
                         <div class="flex w-100 justify-between items-center">
-                            <h4 class="gh-portal-setting-title">Show modal</h4>
+                            <h4 class="gh-portal-setting-title">Show Portal</h4>
                             <div {{action (toggle "isShowModalLink" this)}} class="blue pointer f8"> {{if this.isShowModalLink "Data Attribute" "Link"}} </div>
                         </div>
                         <div class="flex items-center justify-center mt1 gh-show-modal-link-form relative">

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

@@ -195,6 +195,13 @@ export default ModalComponent.extend({
             }
         },
 
+        switchToSignupPage() {
+            if (this.showLinksPage) {
+                this.set('showLinksPage', false);
+                this.set('page', 'signup');
+            }
+        },
+
         updateAccentColor(color) {
             this._validateAccentColor(color);
         },

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

@@ -320,11 +320,16 @@
     height: 32px;
     padding: 0 8px 0 9px;
     border-radius: 2px;
-    background: var(--white);
-    border: 1px solid var(--whitegrey);
+    background: var(--whitegrey-l2);
+    border-color: transparent;
+    box-shadow: none;
     font-size: 1.3rem;
 }
 
+.gh-portal-setting-copy span {
+    margin-top: -2px;
+}
+
 .gh-portal-siteiframe {
     pointer-events: none;
     transform: scale(0.95) !important;
@@ -396,10 +401,6 @@
     padding: 10px 12px 0 0;
 }
 
-.gh-portal-links-table tr.header td {
-    border-bottom: 1px solid var(--lightgrey);
-}
-
 .gh-portal-links-table tr.header h4 {
     font-size: 1.2rem;
     text-transform: uppercase;
@@ -468,6 +469,15 @@
     font-weight: 400;
 }
 
+.gh-portal-links-group-divider {
+    margin: 8px -32px;
+    border-top-color: var(--lightgrey);
+}
+
+.gh-portal-links-group-divider.first {
+    margin-top: -4px;
+}
+
 .gh-portal-custom-icon {
     display: flex;
     justify-content: center;

ghost/admin/public/assets/icons/upload-fill.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+     viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
+<g>
+    <path d="M12.001,16.5c-0.414,0-0.75-0.336-0.75-0.75V5.561l-3.22,3.22C7.89,8.922,7.701,9,7.501,9s-0.389-0.078-0.53-0.22
+        c-0.142-0.141-0.22-0.33-0.22-0.53s0.078-0.389,0.22-0.53L11.47,3.22c0.07-0.07,0.152-0.125,0.245-0.163
+        c0.008-0.003,0.016-0.006,0.025-0.009C11.826,3.016,11.913,3,12.001,3c0.089,0,0.177,0.016,0.261,0.048
+        c0.007,0.002,0.014,0.005,0.02,0.007c0.097,0.04,0.179,0.095,0.25,0.166l4.499,4.499c0.142,0.141,0.22,0.33,0.22,0.53
+        s-0.078,0.389-0.22,0.53S16.701,9,16.501,9s-0.389-0.078-0.53-0.22l-3.22-3.22V15.75C12.751,16.164,12.415,16.5,12.001,16.5z"/>
+    <path d="M3.751,21c-2.068,0-3.75-1.682-3.75-3.75v-1.5c0-0.414,0.336-0.75,0.75-0.75s0.75,0.336,0.75,0.75v1.5
+        c0,1.241,1.009,2.25,2.25,2.25h16.5c1.241,0,2.25-1.009,2.25-2.25v-1.5c0-0.414,0.336-0.75,0.75-0.75s0.75,0.336,0.75,0.75v1.5
+        c0,2.068-1.682,3.75-3.75,3.75H3.751z"/>
+</g>
+</svg>