TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-12-26 12:21:36 +03:00
Code Issues Projects Releases Wiki Activity

Updated Portal links page

Browse Source 
no refs.
- refined copy and design for Portal links page
This commit is contained in:
Peter Zimon 2020-08-26 17:10:19 +02:00
parent 20bcfd4839
commit 8674e8f32b
3 changed files with 137 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

129
ghost/admin/app/components/gh-portal-links.hbs
View File

@ -1,92 +1,105 @@
<div class="gh-portal-links-container"> <div class="gh-portal-links-container">
<div class="gh-portal-links-main"> <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"> <table class="gh-portal-links-table">
<tr class="header"> <tr class="header">
<td><h4>Section</h4></td> <td><h4>Page</h4></td>
<td colspan="2"> <td>
<div class='toggle-header'> <div class='toggle-header'>
<h4>{{sectionHeaderLabel}}</h4> <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> </div>
</td> </td>
</tr> </tr>
<tr> <tr>
<td class="pagename">Default</td> <td class="pagename">Default</td>
<td class='page-url'><input value={{if isLink (concat this.siteUrl '/#/portal') 'data-portal'}} disabled="disabled" /></td> <td class='page-url'>
<td class='copy'> <div class="page-url-container">
<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"> <input class="gh-input" value={{if isLink (concat this.siteUrl '/#/portal') 'data-portal'}} disabled="disabled" />
{{#if this.copyDefault.isRunning}} <button type="button" {{action (perform this.copyDefault (if isLink (concat this.siteUrl '/#/portal') 'data-portal'))}} class="gh-portal-setting-copy">
{{svg-jar "check-circle" class="w3 v-mid mr2 stroke-white"}} Copied {{#if this.copyDefault.isRunning}}
{{else}} {{svg-jar "check-circle" class="w3 v-mid mr2 stroke-darkgrey"}} Copied
Copy {{else}}
{{/if}} <span data-tooltip="Copy">{{svg-jar "copy" class="w4 v-mid fill-darkgrey"}}</span>
</button> {{/if}}
</button>
</div>
</td> </td>
</tr> </tr>
<tr> <tr>
<td class='pagename'>Sign up</td> <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='page-url'>
<td class='copy'> <div class="page-url-container">
<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"> <input class="gh-input" value={{if isLink (concat this.siteUrl '/#/portal/signup') 'data-portal="signup"'}} disabled="disabled" />
{{#if this.copySignup.isRunning}} <button type="button" {{action (perform this.copySignup (if isLink (concat this.siteUrl '/#/portal/signup') 'data-portal="signup"'))}} class="gh-portal-setting-copy">
{{svg-jar "check-circle" class="w3 v-mid mr2 stroke-white"}} Copied {{#if this.copySignup.isRunning}}
{{else}} {{svg-jar "check-circle" class="w3 v-mid mr2 stroke-darkgrey"}} Copied
Copy {{else}}
{{/if}} <span data-tooltip="Copy">{{svg-jar "copy" class="w4 v-mid fill-darkgrey"}}</span>
</button> {{/if}}
</button>
</div>
</td> </td>
</tr> </tr>
<tr> <tr>
<td class='pagename'>Sign in</td> <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='page-url'>
<td class='copy'> <div class="page-url-container">
<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"> <input class="gh-input" value={{if isLink (concat this.siteUrl '/#/portal/signin') 'data-portal="signin"'}} disabled="disabled" />
{{#if this.copySignin.isRunning}} <button type="button" {{action (perform this.copySignin (if isLink (concat this.siteUrl '/#/portal/signin') 'data-portal="signin"'))}} class="gh-portal-setting-copy">
{{svg-jar "check-circle" class="w3 v-mid mr2 stroke-white"}} Copied {{#if this.copySignin.isRunning}}
{{else}} {{svg-jar "check-circle" class="w3 v-mid mr2 stroke-darkgrey"}} Copied
Copy {{else}}
{{/if}} <span data-tooltip="Copy">{{svg-jar "copy" class="w4 v-mid fill-darkgrey"}}</span>
</button> {{/if}}
</button>
</div>
</td> </td>
</tr> </tr>
<tr> <tr>
<td class='pagename'>Account home</td> <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='page-url'>
<td class='copy'> <div class="page-url-container">
<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"> <input class="gh-input" value={{if isLink (concat this.siteUrl '/#/portal/account') 'data-portal="account"'}} disabled="disabled" />
{{#if this.copyAccountHome.isRunning}} <button type="button" {{action (perform this.copyAccountHome (if isLink (concat this.siteUrl '/#/portal/account') 'data-portal="account"'))}} class="gh-portal-setting-copy">
{{svg-jar "check-circle" class="w3 v-mid mr2 stroke-white"}} Copied {{#if this.copyAccountHome.isRunning}}
{{else}} {{svg-jar "check-circle" class="w3 v-mid mr2 stroke-darkgrey"}} Copied
Copy {{else}}
{{/if}} <span data-tooltip="Copy">{{svg-jar "copy" class="w4 v-mid fill-darkgrey"}}</span>
</button> {{/if}}
</button>
</div>
</td> </td>
</tr> </tr>
<tr> <tr>
<td class='pagename'>Account/Plans</td> <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='page-url'>
<td class='copy'> <div class="page-url-container">
<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"> <input class="gh-input" value={{if isLink (concat this.siteUrl '/#/portal/account/plans') 'data-portal="account/plans"'}} disabled="disabled" />
{{#if this.copyAccountPlans.isRunning}} <button type="button" {{action (perform this.copyAccountPlans (if isLink (concat this.siteUrl '/#/portal/account/plans') 'data-portal="account/plans"'))}} class="gh-portal-setting-copy">
{{svg-jar "check-circle" class="w3 v-mid mr2 stroke-white"}} Copied {{#if this.copyAccountPlans.isRunning}}
{{else}} {{svg-jar "check-circle" class="w3 v-mid mr2 stroke-darkgrey"}} Copied
Copy {{else}}
{{/if}} <span data-tooltip="Copy">{{svg-jar "copy" class="w4 v-mid fill-darkgrey"}}</span>
</button> {{/if}}
</button>
</div>
</td> </td>
</tr> </tr>
<tr> <tr>
<td class='pagename'>Account/Profile</td> <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='page-url'>
<td class='copy'> <div class="page-url-container">
<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"> <input class="gh-input" value={{if isLink (concat this.siteUrl '/#/portal/account/profile') 'data-portal="account/profile"'}} disabled="disabled" />
{{#if this.copyAccountProfile.isRunning}} <button type="button" {{action (perform this.copyAccountProfile (if isLink (concat this.siteUrl '/#/portal/account/profile') 'data-portal="account/profile"'))}} class="gh-portal-setting-copy">
{{svg-jar "check-circle" class="w3 v-mid mr2 stroke-white"}} Copied {{#if this.copyAccountProfile.isRunning}}
{{else}} {{svg-jar "check-circle" class="w3 v-mid mr2 stroke-darkgrey"}} Copied
Copy {{else}}
{{/if}} <span data-tooltip="Copy">{{svg-jar "copy" class="w4 v-mid fill-darkgrey"}}</span>
</button> {{/if}}
</button>
</div>
</td> </td>
</tr> </tr>
</table> </table>

4
ghost/admin/app/components/gh-portal-links.js
View File

@ -10,11 +10,11 @@ export default Component.extend({
isLink: true, isLink: true,
toggleValue: computed('isLink', function () { toggleValue: computed('isLink', function () {
return this.isLink ? 'Show Data Attributes' : 'Show Links'; return this.isLink ? 'Data attributes' : 'Links';
}), }),
sectionHeaderLabel: computed('isLink', function () { sectionHeaderLabel: computed('isLink', function () {
return this.isLink ? 'Link' : 'Data Attribute'; return this.isLink ? 'Link' : 'Data attribute';
}), }),
init() { init() {

93
ghost/admin/app/styles/layouts/portal-settings.css
View File

@ -345,35 +345,6 @@
display: none 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 { .gh-portal-links-container {
position: relative; position: relative;
display: flex; 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); 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 { .gh-portal-custom-icon:hover .gh-portal-button-custom {
display: none; display: none;
} }