From 6af7ab674a79d48b671f11a6628ad1ee47e5ce37 Mon Sep 17 00:00:00 2001
From: Peter Zimon <zimo@ghost.org>
Date: Wed, 29 Jul 2020 12:11:07 +0200
Subject: [PATCH] Restructured links page layout

no refs.
- used table for link page structur
---
 ghost/portal/src/App.js                       |   4 +-
 ghost/portal/src/components/Frame.styles.js   |   6 +
 ghost/portal/src/components/TriggerButton.js  |   6 +-
 ghost/portal/src/components/pages/LinkPage.js | 132 +++++++++---------
 4 files changed, 80 insertions(+), 68 deletions(-)

diff --git a/ghost/portal/src/App.js b/ghost/portal/src/App.js
index df23bd7c1c..5b533c5541 100644
--- a/ghost/portal/src/App.js
+++ b/ghost/portal/src/App.js
@@ -142,8 +142,8 @@ export default class App extends React.Component {
             return {
                 showPopup: true,
                 site: Fixtures.site,
-                member: Fixtures.member.free,
-                page: 'accountHome'
+                member: Fixtures.member.paid,
+                page: 'links'
             };
         }
         return {};
diff --git a/ghost/portal/src/components/Frame.styles.js b/ghost/portal/src/components/Frame.styles.js
index cbeffc2be4..2c2fcc9961 100644
--- a/ghost/portal/src/components/Frame.styles.js
+++ b/ghost/portal/src/components/Frame.styles.js
@@ -11,6 +11,7 @@ import {SignupPageStyles} from './pages/SignupPage';
 import {PlanSectionStyles} from './common/PlansSection';
 import {AvatarStyles} from './common/MemberGravatar';
 import {MagicLinkStyles} from './pages/MagicLinkPage';
+import {LinkPageStyles} from './pages/LinkPage';
 
 // Global styles
 const GlobalStyles = `
@@ -339,6 +340,10 @@ const GlobalStyles = `
     .gh-portal-icon {
         color: var(--brandcolor);
     }
+
+    /* Links
+    /* ----------------------------------------------------- */
+
 `;
 
 // Append all styles as string which we want to pass to iframe
@@ -351,6 +356,7 @@ const FrameStyle =
     ActionButtonStyles +
     AvatarStyles +
     MagicLinkStyles +
+    LinkPageStyles +
     SignupPageStyles;
 
 export default FrameStyle;
\ No newline at end of file
diff --git a/ghost/portal/src/components/TriggerButton.js b/ghost/portal/src/components/TriggerButton.js
index 5649dd57de..a5738a9586 100644
--- a/ghost/portal/src/components/TriggerButton.js
+++ b/ghost/portal/src/components/TriggerButton.js
@@ -131,9 +131,13 @@ class TriggerButtonContent extends React.Component {
                 );
             } else if (buttonIcon) {
                 return (
-                    <img style={{width: '26px', height: '26px'}} src={buttonIcon} alt="Icon" />
+                    <img style={{width: '26px', height: '26px'}} src={buttonIcon} alt="" />
                 );
             } else {
+                if (this.hasText()) {
+                    Style.userIcon.width = '26px';
+                    Style.userIcon.height = '26px';
+                }
                 return (
                     <UserIcon style={Style.userIcon} />
                 );
diff --git a/ghost/portal/src/components/pages/LinkPage.js b/ghost/portal/src/components/pages/LinkPage.js
index 394231913f..6c8cd16f3a 100644
--- a/ghost/portal/src/components/pages/LinkPage.js
+++ b/ghost/portal/src/components/pages/LinkPage.js
@@ -2,6 +2,38 @@ import AppContext from '../../AppContext';
 import CopyToClipboard from '../../utils/copy-to-clipboard';
 const React = require('react');
 
+export const LinkPageStyles = `
+    .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(--grey12);
+    }
+
+    .gh-portal-links-table tr.header h4.toggle {
+        font-weight: 400;
+        color: var(--brandcolor);
+        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;
+    }
+`;
+
 function getLinkOrAttribute({page, isLink, siteUrl}) {
     if (page === 'default') {
         return (isLink ? `${siteUrl}#/portal` : 'data-portal');
@@ -18,52 +50,25 @@ function getLinkOrAttribute({page, isLink, siteUrl}) {
     }
 }
 
-const LinkAttributeValue = ({page, isLink, siteUrl}) => {
-    const rightItemStyle = {
-        paddingBottom: '24px',
-        display: 'flex'
-    };
-    const value = getLinkOrAttribute({page, isLink, siteUrl});
-    return (
-        <div style={rightItemStyle}>
-            <span style={{
-                flexGrow: 1,
-                whiteSpace: 'nowrap',
-                overflow: 'hidden',
-                textOverflow: 'ellipsis',
-                paddingRight: '12px'
-            }}> {value} </span>
-            <button type="button" onClick={(e) => {
-                CopyToClipboard(value);
-            }}> Copy </button>
-        </div>
-    );
-};
-
-const LinkAttributeSection = ({siteUrl, showLinks: isLink, toggleShowLinks}) => {
-    return (
-        <div style={{flexGrow: 1, minWidth: '350px'}}>
-            <div style={{display: 'flex', borderBottom: '1px solid black', marginBottom: '12px'}}>
-                <span style={{flexGrow: 1, fontWeight: 'bold'}}> {isLink ? 'Link' : 'Data Attribute'} </span>
-                <LinkAttributeToggle showLinks={isLink} toggleShowLinks={toggleShowLinks}/>
-            </div>
-            <LinkAttributeValue page="default" isLink={isLink} siteUrl={siteUrl} />
-            <LinkAttributeValue page="signup" isLink={isLink} siteUrl={siteUrl} />
-            <LinkAttributeValue page="signin" isLink={isLink} siteUrl={siteUrl} />
-            <LinkAttributeValue page="accountHome" isLink={isLink} siteUrl={siteUrl} />
-            <LinkAttributeValue page="accountPlan" isLink={isLink} siteUrl={siteUrl} />
-            <LinkAttributeValue page="accountProfile" isLink={isLink} siteUrl={siteUrl} />
-        </div>
-    );
-};
-
 const LinkAttributeToggle = ({showLinks, toggleShowLinks}) => {
     const text = showLinks ? 'Show Data Attributes' : 'Show Links';
     return (
-        <span
-            style={{cursor: 'pointer', color: '#3eb0ef'}}
-            onClick={() => toggleShowLinks({showLinks: !showLinks})}> {text}
-        </span>
+        <h4 className='gh-portal-links-cell toggle' onClick={() => toggleShowLinks({showLinks: !showLinks})}>{text}</h4>
+    );
+};
+
+const LinkAttributeRow = ({pageName, page, isLink, siteUrl}) => {
+    const value = getLinkOrAttribute({page, isLink, siteUrl});
+    return (
+        <tr>
+            <td className='pagename'>{pageName}</td>
+            <td className='page-url'><input value={value} disabled="disabled" /></td>
+            <td className='copy'>
+                <button type="button" onClick={(e) => {
+                    CopyToClipboard(value);
+                }}>Copy</button>
+            </td>
+        </tr>
     );
 };
 
@@ -78,30 +83,27 @@ export default class LinkPage extends React.Component {
     }
 
     render() {
-        const itemStyle = {
-            paddingRight: '32px',
-            paddingBottom: '24px'
-        };
         const {url: siteUrl = ''} = this.context.site;
         return (
-            <div style={{display: 'flex', flexDirection: 'column', color: '#313131', padding: '12px 24px'}}>
-                <div> Use these links or data attributes to show the various sections of members modal.</div>
-                <div style={{display: 'flex', marginTop: '12px'}}>
-                    <div style={{flexShrink: 0}}>
-                        <div style={{borderBottom: '1px solid black', marginBottom: '12px', fontWeight: 'bold'}}> Section </div>
-                        <div style={itemStyle}> Default </div>
-                        <div style={itemStyle}> Signup </div>
-                        <div style={itemStyle}> Signin </div>
-                        <div style={itemStyle}> Account home </div>
-                        <div style={itemStyle}> Account -&gt; Plans </div>
-                        <div style={itemStyle}> Account -&gt; Profile </div>
-                    </div>
-                    <LinkAttributeSection
-                        showLinks={this.state.showLinks}
-                        toggleShowLinks={({showLinks}) => this.setState({showLinks})}
-                        siteUrl={siteUrl}
-                    />
-                </div>
+            <div className='gh-portal-links-main'>
+                <p>Use these links or data attributes to show the various sections of members modal.</p>
+                <table className='gh-portal-links-table'>
+                    <tr className='header'>
+                        <td><h4>Section</h4></td>
+                        <td colspan='2'>
+                            <div className='toggle-header'>
+                                <h4>{this.state.showLinks ? 'Link' : 'Data Attribute'}</h4>
+                                <LinkAttributeToggle showLinks={this.state.showLinks} toggleShowLinks={({showLinks}) => this.setState({showLinks})}/>
+                            </div>
+                        </td>
+                    </tr>
+                    <LinkAttributeRow pageName="Default" page="default" isLink={this.state.showLinks} siteUrl={siteUrl} />
+                    <LinkAttributeRow pageName="Sign up" page="signup" isLink={this.state.showLinks} siteUrl={siteUrl} />
+                    <LinkAttributeRow pageName="Sign in" page="signin" isLink={this.state.showLinks} siteUrl={siteUrl} />
+                    <LinkAttributeRow pageName="Account home" page="accountHome" isLink={this.state.showLinks} siteUrl={siteUrl} />
+                    <LinkAttributeRow pageName="Account/Plans" page="accountPlan" isLink={this.state.showLinks} siteUrl={siteUrl} />
+                    <LinkAttributeRow pageName="Account/Profile" page="accountProfile" isLink={this.state.showLinks} siteUrl={siteUrl} />
+                </table>
             </div>
         );
     }