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

Update portal settings UI

Browse Source
This commit is contained in:
Peter Zimon 2021-02-10 11:08:05 +01:00
parent 8e8059cc0c
commit ae9abe22c0
5 changed files with 76 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
ghost/admin/app/components/modal-portal-settings.hbs
View File

@ -1,12 +1,12 @@
<div class="modal-body gh-ps-modal-body">
<div class="flex pa0 flex-grow-1 gh-portal-settings">
<div class="gh-portal-settings-sidebar">
<h2 class="f4 fw6 pa0 ma0 flex bb b--whitegrey pl6 pr6 items-center gh-portal-settings-topbarheight">Portal settings</h2>
<h2 class="gh-portal-settings-title">Portal settings</h2>
<div class="gh-portal-form-wrapper">
<fieldset class="gh-portal-settings-form">
<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">
<GhFormGroup @classNames="gh-members-subscribed-checkbox gh-portal-setting-first pb5 mb0">
<div class="flex justify-between items-center">
<div class="mr3">
<h4 class="gh-portal-setting-title">Display name in signup form</h4>
@ -93,14 +93,14 @@
</div>
{{else}}
<div class="gh-portal-setting-no-stripe">
You need to <button class="gh-btn gh-btn-link blue" {{action "openStripeSettings"}}>connect to Stripe</button> to take payments
You need to <button class="gh-btn gh-btn-link black" {{action "openStripeSettings"}}>connect to Stripe</button> to take payments
</div>
{{/if}}
</div>
<div class="gh-portal-setting-section divider-top" onclick={{action "switchToSignupPage"}}>
<div class="gh-portal-setting-section" onclick={{action "switchToSignupPage"}}>
<h3 class="gh-portal-setting-sectionheading">Look & feel</h3>
<GhFormGroup @classNames="gh-members-subscribed-checkbox mb0 pt3 b--whitegrey">
<div class="flex justify-between items-center nt2">
<GhFormGroup @classNames="gh-members-subscribed-checkbox gh-portal-setting-first mb0 b--whitegrey">
<div class="flex justify-between items-center">
<h4 class="gh-portal-setting-title">Show Portal button</h4>
<div class="for-switch small">
<label
@ -211,13 +211,13 @@
{{/if}}
{{/if}}
</div>
<div class="gh-portal-setting-section redirects divider-top">
<div class="gh-portal-setting-section redirects">
<h4 class="gh-portal-setting-sectionheading">Welcome page</h4>
<GhFormGroup
@errors={{settings.errors}}
@hasValidated={{settings.hasValidated}}
@property="membersFreeSignupRedirect"
@classNames="mt5"
@classNames="mt2"
>
<h4 class="gh-portal-setting-title">For free signups</h4>
<div class="flex items-center mt2">
@ -262,13 +262,15 @@
</div>
</div>
<div class="gh-portal-settings-main">
<div class="flex items-center justify-between w-100 gh-portal-settings-topbarheight">
<ul class="gh-portal-settings-maintabs">
<li class="{{if (eq this.page "signup") "active"}}"><a href="#" {{action "switchPreviewPage" "signup"}} data-test-link="switch-portal-preview-page">Signup</a></li>
<li class="{{if (eq this.page "accountHome") "active"}}"><a href="#" {{action "switchPreviewPage" "accountHome"}} data-test-link="switch-portal-preview-page">Account</a></li>
<li class="{{if this.showLinksPage "active"}}"><a href="#" {{action "switchPreviewPage" "links"}} data-test-link="switch-portal-preview-page">Links</a></li>
</ul>
<div class="flex items-center">
<div class="gh-portal-settings-previewheader">
<div class="gh-btn-group">
<a class="gh-btn {{if (eq this.page "signup") "gh-btn-group-selected"}}" href="#" {{action "switchPreviewPage" "signup"}} data-test-link="switch-portal-preview-page"><span>Signup</span></a>
<a class="gh-btn {{if (eq this.page "accountHome") "gh-btn-group-selected"}}" href="#" {{action "switchPreviewPage" "accountHome"}} data-test-link="switch-portal-preview-page"><span>Account</span></a>
<a class="gh-btn {{if this.showLinksPage "gh-btn-group-selected"}}" href="#" {{action "switchPreviewPage" "links"}} data-test-link="switch-portal-preview-page"><span>Links</span></a>
</div>
<div class="gh-portal-settings-actions">
<button
class="gh-btn mr3"
{{action "closeModal"}}
@ -283,7 +285,7 @@
@buttonText="Save and close"
@successText="Saved"
@task={{this.saveTask}}
@idleClass="gh-btn-blue"
@idleClass="gh-btn-primary"
@class="gh-btn gh-btn-icon"
data-test-button="save-members-modal-setting"
/>

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

@ -79,7 +79,7 @@
}
.gh-portal-settings .form-group.space-l {
margin-bottom: 1.9em;
margin-bottom: 1.6em;
}
.gh-portal-setting-title {
@ -94,16 +94,18 @@
}
.gh-portal-setting-sectionheading {
font-size: 1.2rem;
font-weight: 500;
color: var(--midlightgrey);
margin: 0 0 12px;
font-size: 1.1rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.2px;
color: var(--black);
margin: 0;
padding: 0 0 8px;
border-bottom: 1px solid var(--whitegrey);
}
.gh-portal-setting-section {
margin: 12px -24px;
margin: 0 -24px 3.5vw;
padding: 0 28px;
}
@ -111,11 +113,6 @@
line-height: 1.5em;
}
.gh-portal-setting-section.divider-top {
border-top: 1px solid var(--whitegrey);
padding-top: 16px;
}
.gh-portal-settings .input-color input {
position: relative;
height: 30px;
@ -181,7 +178,7 @@
display: flex;
flex-direction: column;
flex-grow: 1;
padding: 0 20px 20px;
padding: 0;
border-left: 1px solid var(--whitegrey);
}
@ -240,6 +237,10 @@
padding: 2px;
}
.gh-portal-setting-first {
margin: 12px 0 0;
}
.gh-portal-button-icon {
display: inline-block;
cursor: pointer;
@ -254,11 +255,11 @@
}
.gh-portal-button-icon:hover {
box-shadow: 0px 0px 0px 1px color-mod(var(--blue) a(40%));
box-shadow: 0px 0px 0px 1px color-mod(var(--green) a(40%));
}
.gh-portal-button-icon.selected-icon {
box-shadow: 0px 0px 0px 2px var(--blue);
box-shadow: 0px 0px 0px 2px var(--green);
}
.gh-portal-button-icon svg path {
@ -266,7 +267,7 @@
}
.gh-portal-button-icon.selected-icon svg path {
stroke: var(--blue);
stroke: var(--green);
}
.gh-portal-button-icon .gh-loading-spinner {
@ -364,23 +365,51 @@
border: none;
}
.gh-portal-settings-title {
display: flex;
align-items: center;
padding: 0 24px;
margin: 0;
height: 66px;
font-size: 1.9rem;
font-weight: 600;
letter-spacing: -0.1px;
}
.gh-portal-settings-previewheader {
display: flex;
align-items: center;
justify-content: center;
position: relative;
height: 66px;
padding: 0 24px;
margin: 0;
width: 100%;
}
.gh-portal-settings-previewheader .gh-btn-group .gh-btn {
min-width: 90px;
}
.gh-portal-settings-actions {
position: absolute;
top: 16px;
right: 24px;
}
.gh-portal-preview-wrapper {
overflow: hidden;
max-height: calc(100vh - 60px - 66px - 20px);
height: 100%;
border: 1px solid var(--whitegrey);
background: #EDF0F2;
border-radius: 5px;
}
.gh-portal-preview-container {
position: relative;
flex-grow: 1;
border: 1px solid var(--whitegrey);
border-radius: 5px;
overflow: hidden;
background: #EDF0F2;
max-height: calc(100vh - 60px - 66px - 20px);
max-height: calc(100vh - 60px - 66px);
}
.gh-portal-preview-wrapper .gh-portal-preview-container {
@ -537,7 +566,6 @@
.gh-portal-setting-no-stripe {
padding: 20px;
margin-bottom: 28px;
font-size: 1.3rem;
text-align: center;
background: var(--whitegrey-l2);

8
ghost/admin/app/styles/patterns/buttons.css
View File

@ -384,8 +384,8 @@ Usage: CTA buttons grouped together horizontally.
.gh-btn-group {
border-radius: 0;
background: var(--whitegrey-l1);
border-radius: 2px;
padding: 1px;
border-radius: 3px;
line-height: 0;
}
.gh-btn-group .gh-btn {
@ -400,8 +400,8 @@ Usage: CTA buttons grouped together horizontally.
.gh-btn-group .gh-btn span {
border-radius: 0;
height: 31px;
line-height: 31px;
height: 30px;
line-height: 30px;
border-radius: 2px;
background: transparent !important;
}

8
ghost/admin/app/templates/settings/general-loading.hbs
View File

@ -1,14 +1,14 @@
<section class="gh-canvas">
<header class="gh-canvas-header">
<GhCanvasHeader class="gh-canvas-header">
<h2 class="gh-canvas-title" data-test-screen-title>
<LinkTo @route="settings">Settings</LinkTo>
<span>{{svg-jar "arrow-right"}}</span>
General settings
General
</h2>
<section class="view-actions">
<GhTaskButton @buttonText="Save settings" @task={{this.save}} @class="gh-btn gh-btn-blue gh-btn-icon" @disabled={{true}} data-test-save-button="true" />
<GhTaskButton @buttonText="Save settings" @task={{this.save}} @class="gh-btn gh-btn-primary gh-btn-icon" data-test-button="save" />
</section>
</header>
</GhCanvasHeader>
<section class="gh-content">
<GhLoadingSpinner />

2
ghost/admin/app/templates/settings/general.hbs
View File

@ -3,7 +3,7 @@
<h2 class="gh-canvas-title" data-test-screen-title>
<LinkTo @route="settings">Settings</LinkTo>
<span>{{svg-jar "arrow-right"}}</span>
General settings
General
</h2>
<section class="view-actions">
<GhTaskButton @buttonText="Save settings" @task={{this.save}} @class="gh-btn gh-btn-primary gh-btn-icon" data-test-button="save" />