From 8674e8f32bdd28cedd395bca95742e45658c27e1 Mon Sep 17 00:00:00 2001
From: Peter Zimon <zimo@ghost.org>
Date: Wed, 26 Aug 2020 17:10:19 +0200
Subject: [PATCH] Updated Portal links page

no refs.
- refined copy and design for Portal links page
---
 .../admin/app/components/gh-portal-links.hbs  | 129 ++++++++++--------
 ghost/admin/app/components/gh-portal-links.js |   4 +-
 .../app/styles/layouts/portal-settings.css    |  93 +++++++++----
 3 files changed, 137 insertions(+), 89 deletions(-)

diff --git a/ghost/admin/app/components/gh-portal-links.hbs b/ghost/admin/app/components/gh-portal-links.hbs
index dbf4066b8c..85906f9ddd 100644
--- a/ghost/admin/app/components/gh-portal-links.hbs
+++ b/ghost/admin/app/components/gh-portal-links.hbs
@@ -1,92 +1,105 @@
 <div class="gh-portal-links-container">
     <div class="gh-portal-links-main">
-        <p>Use these links or data attributes to show the various sections of members modal.</p>
+        <h2>Links</h2>
+        <p>Use these {{if isLink "links" "data attributes"}} to show pages of Portal.</p>
         <table class="gh-portal-links-table">
             <tr class="header">
-                <td><h4>Section</h4></td>
-                <td colspan="2">
+                <td><h4>Page</h4></td>
+                <td>
                     <div class='toggle-header'>
                         <h4>{{sectionHeaderLabel}}</h4>
-                        <h4 className='gh-portal-links-cell toggle' onclick={{action "toggleShowLinks"}}>{{this.toggleValue}}</h4>
+                        <h4 class='gh-portal-links-cell toggle' onclick={{action "toggleShowLinks"}}>{{this.toggleValue}}</h4>
                     </div>
                 </td>
             </tr>
             <tr>
                 <td class="pagename">Default</td>
-                <td class='page-url'><input value={{if isLink (concat this.siteUrl '/#/portal') 'data-portal'}} disabled="disabled" /></td>
-                <td class='copy'>
-                    <button type="button" {{action (perform this.copyDefault (if isLink (concat this.siteUrl '/#/portal') 'data-portal'))}} class="bg-black-70 f8 pa1 pr3 pl3 br3 white fw4 flex items-center">
-                        {{#if this.copyDefault.isRunning}}
-                            {{svg-jar "check-circle" class="w3 v-mid mr2 stroke-white"}} Copied
-                        {{else}}
-                            Copy
-                        {{/if}}
-                    </button>
+                <td class='page-url'>
+                    <div class="page-url-container">
+                        <input class="gh-input" value={{if isLink (concat this.siteUrl '/#/portal') 'data-portal'}} disabled="disabled" />
+                        <button type="button" {{action (perform this.copyDefault (if isLink (concat this.siteUrl '/#/portal') 'data-portal'))}} class="gh-portal-setting-copy">
+                            {{#if this.copyDefault.isRunning}}
+                                {{svg-jar "check-circle" class="w3 v-mid mr2 stroke-darkgrey"}} Copied
+                            {{else}}
+                                <span data-tooltip="Copy">{{svg-jar "copy" class="w4 v-mid fill-darkgrey"}}</span>
+                            {{/if}}
+                        </button>
+                    </div>
                 </td>
             </tr>
             <tr>
                 <td class='pagename'>Sign up</td>
-                <td class='page-url'><input value={{if isLink (concat this.siteUrl '/#/portal/signup') 'data-portal="signup"'}} disabled="disabled" /></td>
-                <td class='copy'>
-                    <button type="button" {{action (perform this.copySignup (if isLink (concat this.siteUrl '/#/portal/signup') 'data-portal="signup"'))}} class="bg-black-70 f8 pa1 pr3 pl3 br3 white fw4 flex items-center">
-                        {{#if this.copySignup.isRunning}}
-                            {{svg-jar "check-circle" class="w3 v-mid mr2 stroke-white"}} Copied
-                        {{else}}
-                            Copy
-                        {{/if}}
-                    </button>
+                <td class='page-url'>
+                    <div class="page-url-container">
+                        <input class="gh-input" value={{if isLink (concat this.siteUrl '/#/portal/signup') 'data-portal="signup"'}} disabled="disabled" />
+                        <button type="button" {{action (perform this.copySignup (if isLink (concat this.siteUrl '/#/portal/signup') 'data-portal="signup"'))}} class="gh-portal-setting-copy">
+                            {{#if this.copySignup.isRunning}}
+                                {{svg-jar "check-circle" class="w3 v-mid mr2 stroke-darkgrey"}} Copied
+                            {{else}}
+                                <span data-tooltip="Copy">{{svg-jar "copy" class="w4 v-mid fill-darkgrey"}}</span>
+                            {{/if}}
+                        </button>
+                    </div>
                 </td>
             </tr>
             <tr>
                 <td class='pagename'>Sign in</td>
-                <td class='page-url'><input value={{if isLink (concat this.siteUrl '/#/portal/signin') 'data-portal="signin"'}} disabled="disabled" /></td>
-                <td class='copy'>
-                    <button type="button" {{action (perform this.copySignin (if isLink (concat this.siteUrl '/#/portal/signin') 'data-portal="signin"'))}} class="bg-black-70 f8 pa1 pr3 pl3 br3 white fw4 flex items-center">
-                        {{#if this.copySignin.isRunning}}
-                            {{svg-jar "check-circle" class="w3 v-mid mr2 stroke-white"}} Copied
-                        {{else}}
-                            Copy
-                        {{/if}}
-                    </button>
+                <td class='page-url'>
+                    <div class="page-url-container">
+                        <input class="gh-input" value={{if isLink (concat this.siteUrl '/#/portal/signin') 'data-portal="signin"'}} disabled="disabled" />
+                        <button type="button" {{action (perform this.copySignin (if isLink (concat this.siteUrl '/#/portal/signin') 'data-portal="signin"'))}} class="gh-portal-setting-copy">
+                            {{#if this.copySignin.isRunning}}
+                                {{svg-jar "check-circle" class="w3 v-mid mr2 stroke-darkgrey"}} Copied
+                            {{else}}
+                                <span data-tooltip="Copy">{{svg-jar "copy" class="w4 v-mid fill-darkgrey"}}</span>
+                            {{/if}}
+                        </button>
+                    </div>
                 </td>
             </tr>
             <tr>
                 <td class='pagename'>Account home</td>
-                <td class='page-url'><input value={{if isLink (concat this.siteUrl '/#/portal/account') 'data-portal="account"'}} disabled="disabled" /></td>
-                <td class='copy'>
-                    <button type="button" {{action (perform this.copyAccountHome (if isLink (concat this.siteUrl '/#/portal/account') 'data-portal="account"'))}} class="bg-black-70 f8 pa1 pr3 pl3 br3 white fw4 flex items-center">
-                        {{#if this.copyAccountHome.isRunning}}
-                            {{svg-jar "check-circle" class="w3 v-mid mr2 stroke-white"}} Copied
-                        {{else}}
-                            Copy
-                        {{/if}}
-                    </button>
+                <td class='page-url'>
+                    <div class="page-url-container">
+                        <input class="gh-input" value={{if isLink (concat this.siteUrl '/#/portal/account') 'data-portal="account"'}} disabled="disabled" />
+                        <button type="button" {{action (perform this.copyAccountHome (if isLink (concat this.siteUrl '/#/portal/account') 'data-portal="account"'))}} class="gh-portal-setting-copy">
+                            {{#if this.copyAccountHome.isRunning}}
+                                {{svg-jar "check-circle" class="w3 v-mid mr2 stroke-darkgrey"}} Copied
+                            {{else}}
+                                <span data-tooltip="Copy">{{svg-jar "copy" class="w4 v-mid fill-darkgrey"}}</span>
+                            {{/if}}
+                        </button>
+                    </div>
                 </td>
             </tr>
             <tr>
                 <td class='pagename'>Account/Plans</td>
-                <td class='page-url'><input value={{if isLink (concat this.siteUrl '/#/portal/account/plans') 'data-portal="account/plans"'}} disabled="disabled" /></td>
-                <td class='copy'>
-                    <button type="button" {{action (perform this.copyAccountPlans (if isLink (concat this.siteUrl '/#/portal/account/plans') 'data-portal="account/plans"'))}} class="bg-black-70 f8 pa1 pr3 pl3 br3 white fw4 flex items-center">
-                        {{#if this.copyAccountPlans.isRunning}}
-                            {{svg-jar "check-circle" class="w3 v-mid mr2 stroke-white"}} Copied
-                        {{else}}
-                            Copy
-                        {{/if}}
-                    </button>
+                <td class='page-url'>
+                    <div class="page-url-container">
+                        <input class="gh-input" value={{if isLink (concat this.siteUrl '/#/portal/account/plans') 'data-portal="account/plans"'}} disabled="disabled" />
+                        <button type="button" {{action (perform this.copyAccountPlans (if isLink (concat this.siteUrl '/#/portal/account/plans') 'data-portal="account/plans"'))}} class="gh-portal-setting-copy">
+                            {{#if this.copyAccountPlans.isRunning}}
+                                {{svg-jar "check-circle" class="w3 v-mid mr2 stroke-darkgrey"}} Copied
+                            {{else}}
+                                <span data-tooltip="Copy">{{svg-jar "copy" class="w4 v-mid fill-darkgrey"}}</span>
+                            {{/if}}
+                        </button>
+                    </div>
                 </td>
             </tr>
             <tr>
                 <td class='pagename'>Account/Profile</td>
-                <td class='page-url'><input value={{if isLink (concat this.siteUrl '/#/portal/account/profile') 'data-portal="account/profile"'}} disabled="disabled" /></td>
-                <td class='copy'>
-                    <button type="button" {{action (perform this.copyAccountProfile (if isLink (concat this.siteUrl '/#/portal/account/profile') 'data-portal="account/profile"'))}} class="bg-black-70 f8 pa1 pr3 pl3 br3 white fw4 flex items-center">
-                        {{#if this.copyAccountProfile.isRunning}}
-                            {{svg-jar "check-circle" class="w3 v-mid mr2 stroke-white"}} Copied
-                        {{else}}
-                            Copy
-                        {{/if}}
-                    </button>
+                <td class='page-url'>
+                    <div class="page-url-container">
+                        <input class="gh-input" value={{if isLink (concat this.siteUrl '/#/portal/account/profile') 'data-portal="account/profile"'}} disabled="disabled" />
+                        <button type="button" {{action (perform this.copyAccountProfile (if isLink (concat this.siteUrl '/#/portal/account/profile') 'data-portal="account/profile"'))}} class="gh-portal-setting-copy">
+                            {{#if this.copyAccountProfile.isRunning}}
+                                {{svg-jar "check-circle" class="w3 v-mid mr2 stroke-darkgrey"}} Copied
+                            {{else}}
+                                <span data-tooltip="Copy">{{svg-jar "copy" class="w4 v-mid fill-darkgrey"}}</span>
+                            {{/if}}
+                        </button>
+                    </div>
                 </td>
             </tr>
         </table>
diff --git a/ghost/admin/app/components/gh-portal-links.js b/ghost/admin/app/components/gh-portal-links.js
index 242d314712..70321afe64 100644
--- a/ghost/admin/app/components/gh-portal-links.js
+++ b/ghost/admin/app/components/gh-portal-links.js
@@ -10,11 +10,11 @@ export default Component.extend({
     isLink: true,
 
     toggleValue: computed('isLink', function () {
-        return this.isLink ? 'Show Data Attributes' : 'Show Links';
+        return this.isLink ? 'Data attributes' : 'Links';
     }),
 
     sectionHeaderLabel: computed('isLink', function () {
-        return this.isLink ? 'Link' : 'Data Attribute';
+        return this.isLink ? 'Link' : 'Data attribute';
     }),
 
     init() {
diff --git a/ghost/admin/app/styles/layouts/portal-settings.css b/ghost/admin/app/styles/layouts/portal-settings.css
index 39b4bfe442..4646bc19f6 100644
--- a/ghost/admin/app/styles/layouts/portal-settings.css
+++ b/ghost/admin/app/styles/layouts/portal-settings.css
@@ -345,35 +345,6 @@
     display: none
 }
 
-.gh-portal-links-table {
-    width: 100%;
-}
-
-.gh-portal-links-table tr td {
-    white-space: nowrap;
-    padding: 4px 12px 4px 0;
-}
-
-.gh-portal-links-table tr.header td {
-    border-bottom: 1px solid var(--lightgrey);
-}
-
-.gh-portal-links-table tr.header h4.toggle {
-    font-weight: 400;
-    cursor: pointer;
-}
-
-.gh-portal-links-table tr td:last-of-type {
-    text-align: right;
-    padding-right: 0;
-}
-
-.gh-portal-links-table tr.header .toggle-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-}
-
 .gh-portal-links-container {
     position: relative;
     display: flex;
@@ -394,6 +365,70 @@
     box-shadow: 0 0 0 1px rgba(0,0,0,0.02), 0 2.8px 2.2px rgba(0, 0, 0, 0.02), 0 6.7px 5.3px rgba(0, 0, 0, 0.028), 0 12.5px 10px rgba(0, 0, 0, 0.035), 0 22.3px 17.9px rgba(0, 0, 0, 0.042), 0 41.8px 33.4px rgba(0, 0, 0, 0.05), 0 100px 80px rgba(0, 0, 0, 0.07);
 }
 
+.gh-portal-links-main h2 {
+    font-weight: 500;
+}
+
+.gh-portal-links-main p {
+    margin-bottom: 10px;
+}
+
+.gh-portal-links-table {
+    width: 100%;
+    padding: 0;
+    margin: 0;
+}
+
+.gh-portal-links-table tr td {
+    white-space: nowrap;
+    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;
+    color: var(--midlightgrey-d2);
+    font-weight: 500;
+    margin-bottom: 8px;
+}
+
+.gh-portal-links-table tr.header .gh-portal-links-cell {
+    font-size: 1.3rem;
+    font-weight: 400;
+    cursor: pointer;
+    text-transform: none;
+    color: var(--blue);
+}
+
+.gh-portal-links-table tr td:last-of-type {
+    padding-right: 0;
+}
+
+.gh-portal-links-table tr.header .toggle-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.gh-portal-links-table tr td.pagename {
+    font-size: 1.4rem;
+    width: 130px;
+}
+
+.gh-portal-links-table .page-url-container {
+    position: relative;
+}
+
+.gh-portal-links-table .page-url-container .gh-portal-setting-copy {
+    position: absolute;
+    right: 2px;
+    top: 2px;
+}
+
 .gh-portal-custom-icon:hover .gh-portal-button-custom {
     display: none;
 }