mirror of
https://github.com/TryGhost/Ghost.git
synced 2025-02-24 23:48:13 -05:00
Portal settings sidebar refinements
no refs. - refined typography, colors and layout - using built in admin icons for portal button icon temporarily - styled icons for future usage with inline svgs
This commit is contained in:
Peter Zimon
parent
7ff098aae6
commit
aba652ec56
4 changed files with 189 additions and 157 deletions
|
|
@ -4,7 +4,7 @@
|
|||
<h2 class="f4 fw6">Portal settings</h2>
|
||||
<fieldset class="gh-portal-settings-form">
|
||||
<div class="gh-portal-setting-section divider-top">
|
||||
<h3 class="gh-portal-setting-sectionheading">Singup</h3>
|
||||
<h3 class="gh-portal-setting-sectionheading">Singup options</h3>
|
||||
<GhFormGroup @classNames="gh-members-subscribed-checkbox pb4 mb0">
|
||||
<div class="flex justify-between items-center">
|
||||
<div class="mr3">
|
||||
|
|
@ -150,7 +150,7 @@
|
|||
</GhFormGroup>
|
||||
{{#if this.settings.portalButton}}
|
||||
<div class="mt5">
|
||||
<GhFormGroup>
|
||||
<GhFormGroup class="space-l">
|
||||
<h4 class="gh-portal-setting-title mb1">Portal button style</h4>
|
||||
<span
|
||||
class="gh-select mt2"
|
||||
|
|
@ -170,7 +170,7 @@
|
|||
</span>
|
||||
</GhFormGroup>
|
||||
{{#if showIconSetting}}
|
||||
<GhFormGroup>
|
||||
<GhFormGroup class="space-l">
|
||||
<h4 class="gh-portal-setting-title">Icon</h4>
|
||||
<GhUploader
|
||||
@extensions={{this.iconExtensions}}
|
||||
|
|
@ -179,15 +179,10 @@
|
|||
as
|
||||
|uploader|
|
||||
>
|
||||
<div class="flex items-center mt2">
|
||||
<div
|
||||
class="flex flex-grow-1 justify-center"
|
||||
style="border: 1px solid #d6e3eb;border-radius: 4px;padding: 5px 5px;"
|
||||
>
|
||||
<div class="flex items-center justify-between mt2 br3 ba b--whitegrey">
|
||||
<div class="gh-portal-settings-icons">
|
||||
{{#each this.defaultButtonIcons as |imgIcon| }}
|
||||
<img
|
||||
src={{imgIcon}}
|
||||
alt="icon" class="gh-portal-button-icon {{if (eq this.buttonIcon imgIcon) "selected-icon"}}" onclick={{action "selectDefaultIcon" imgIcon}} />
|
||||
<span class="gh-portal-button-icon {{if (eq this.buttonIcon imgIcon) "selected-icon"}}" onclick={{action "selectDefaultIcon" imgIcon}}>{{svg-jar imgIcon}}</span>
|
||||
{{/each}}
|
||||
{{#if uploader.isUploading}}
|
||||
{{uploader.progressBar}}
|
||||
|
|
@ -201,17 +196,9 @@
|
|||
>
|
||||
{{/if}}
|
||||
</div>
|
||||
<div
|
||||
class="flex gh-setting-action"
|
||||
style="border: 1px solid #d6e3eb;border-radius: 4px;padding: 9px 12px;"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
class="gh-btn"
|
||||
onclick={{action "triggerFileDialog"}}
|
||||
data-test-image-upload-btn="icon"
|
||||
>
|
||||
<span style="font-size:24px">+</span>
|
||||
<div class="flex gh-setting-action">
|
||||
<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>
|
||||
<div style="display:none">
|
||||
<GhFileInput
|
||||
|
|
@ -228,7 +215,8 @@
|
|||
</GhFormGroup>
|
||||
{{/if}}
|
||||
</div>
|
||||
<GhFormGroup>
|
||||
{{#if showButtonTextSetting}}
|
||||
<GhFormGroup class="space-l">
|
||||
<h4 class="gh-portal-setting-title">Signup button text</h4>
|
||||
|
||||
<div class="flex items-center mt2">
|
||||
|
|
@ -238,8 +226,8 @@
|
|||
@input={{action "setSignupButtonText"}}
|
||||
/>
|
||||
</div>
|
||||
<p class="gh-setting-desc pa0 ma0">Visible to logged out members only</p>
|
||||
</GhFormGroup>
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
</div>
|
||||
<div class="gh-portal-setting-section divider-top">
|
||||
|
|
|
|||
|
|
@ -75,6 +75,11 @@ export default ModalComponent.extend({
|
|||
return selectedButtonStyle.includes('icon');
|
||||
}),
|
||||
|
||||
showButtonTextSetting: computed('selectedButtonStyle', function () {
|
||||
const selectedButtonStyle = this.get('selectedButtonStyle.name') || '';
|
||||
return selectedButtonStyle.includes('text');
|
||||
}),
|
||||
|
||||
isFreeChecked: computed('settings.portalPlans.[]', 'allowSelfSignup', function () {
|
||||
const allowedPlans = this.settings.get('portalPlans') || [];
|
||||
return (this.allowSelfSignup && allowedPlans.includes('free'));
|
||||
|
|
@ -104,9 +109,11 @@ export default ModalComponent.extend({
|
|||
{name: 'text-only', label: 'Text only'}
|
||||
];
|
||||
this.defaultButtonIcons = [
|
||||
'https://raw.githubusercontent.com/leungwensen/svg-icon/master/dist/trimmed-svg/metro/user.svg',
|
||||
'https://raw.githubusercontent.com/leungwensen/svg-icon/master/dist/svg/icomoon/user-tie.svg',
|
||||
'https://raw.githubusercontent.com/leungwensen/svg-icon/master/dist/trimmed-svg/evil/user.svg'
|
||||
'user-circle',
|
||||
'ambulance',
|
||||
'book-open',
|
||||
'store',
|
||||
'gift'
|
||||
];
|
||||
this.iconExtensions = ICON_EXTENSIONS;
|
||||
const portalButtonIcon = this.settings.get('portalButtonIcon') || '';
|
||||
|
|
|
|||
|
|
@ -722,117 +722,3 @@ p.gh-members-import-errordetail:first-of-type {
|
|||
padding: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Portal settings
|
||||
/* ----------------------------------------- */
|
||||
.gh-portal-settings-sidebar {
|
||||
padding: 28px;
|
||||
}
|
||||
|
||||
.gh-portal-settings-form {
|
||||
min-width: 290px;
|
||||
}
|
||||
|
||||
.gh-portal-setting-title {
|
||||
font-size: 1.3rem;
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.gh-portal-settings .for-switch.small {
|
||||
width: 36px !important;
|
||||
height: 22px !important;
|
||||
}
|
||||
|
||||
.gh-portal-setting-sectionheading {
|
||||
font-size: 1.2rem;
|
||||
font-weight: 500;
|
||||
color: var(--midgrey-l2);
|
||||
margin: 0 0 12px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.2px;
|
||||
}
|
||||
|
||||
.gh-portal-setting-section {
|
||||
margin: 12px -28px;
|
||||
padding: 0 28px;
|
||||
}
|
||||
|
||||
.gh-portal-setting-section.divider-top {
|
||||
border-top: 1px solid var(--whitegrey);
|
||||
padding-top: 16px;
|
||||
}
|
||||
|
||||
.gh-portal-settings .input-color input {
|
||||
height: 30px;
|
||||
width: 102px;
|
||||
padding: 3px 4px 3px 44px;
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
.gh-portal-settings .input-color .color-box {
|
||||
height: 28px;
|
||||
width: 28px;
|
||||
}
|
||||
|
||||
.gh-portal-settings .input-color::after {
|
||||
top: 5px;
|
||||
left: 34px;
|
||||
}
|
||||
|
||||
.gh-portal-settings .input-color input:focus + .color-box {
|
||||
height: 26px;
|
||||
width: 28px;
|
||||
}
|
||||
|
||||
.gh-portal-settings .gh-select select,
|
||||
.gh-portal-settings .gh-input {
|
||||
padding: 3px 10px 3px 8px;
|
||||
height: 36px;
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
.gh-portal-settings .gh-select select option {
|
||||
height: unset;
|
||||
}
|
||||
|
||||
.gh-portal-settings .gh-select svg {
|
||||
top: 19px;
|
||||
right: 9px;
|
||||
}
|
||||
|
||||
.gh-portal-settings-main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
padding: 28px;
|
||||
border-left: 1px solid var(--whitegrey);
|
||||
}
|
||||
|
||||
.gh-portal-settings .modal-footer {
|
||||
margin-top: 28px;
|
||||
}
|
||||
|
||||
.gh-portal-settings-maintabs {
|
||||
list-style: none;
|
||||
list-style-type: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0;
|
||||
margin: 4px 0 16px;
|
||||
}
|
||||
|
||||
.gh-portal-settings-maintabs li {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.gh-portal-settings-maintabs li a {
|
||||
display: inline-block;
|
||||
padding: 4px 12px;
|
||||
margin: -4px 0;
|
||||
}
|
||||
|
||||
.gh-portal-settings-maintabs li:first-of-type a {
|
||||
margin-left: -12px;
|
||||
}
|
||||
|
|
@ -53,24 +53,175 @@
|
|||
flex-direction: column;
|
||||
}
|
||||
|
||||
.gh-portal-button-icon {
|
||||
cursor: pointer;
|
||||
height: 44px;
|
||||
padding: 5px 5px;
|
||||
width: 44px;
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
.gh-portal-button-icon:hover {
|
||||
border: 1px solid skyblue;
|
||||
}
|
||||
|
||||
.gh-portal-button-icon.selected-icon {
|
||||
border: 1px solid lightblue;
|
||||
}
|
||||
|
||||
.gh-show-modal-link-form .gh-input {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.gh-portal-settings-sidebar {
|
||||
padding: 28px;
|
||||
}
|
||||
|
||||
.gh-portal-settings-form {
|
||||
min-width: 290px;
|
||||
}
|
||||
|
||||
.gh-portal-settings .form-group.space-l {
|
||||
margin-bottom: 1.9em;
|
||||
}
|
||||
|
||||
.gh-portal-setting-title {
|
||||
font-size: 1.3rem;
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.gh-portal-settings .for-switch.small {
|
||||
width: 36px !important;
|
||||
height: 22px !important;
|
||||
}
|
||||
|
||||
.gh-portal-setting-sectionheading {
|
||||
font-size: 1.2rem;
|
||||
font-weight: 500;
|
||||
color: var(--midlightgrey);
|
||||
margin: 0 0 12px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.2px;
|
||||
}
|
||||
|
||||
.gh-portal-setting-section {
|
||||
margin: 12px -28px;
|
||||
padding: 0 28px;
|
||||
}
|
||||
|
||||
.gh-portal-setting-section.divider-top {
|
||||
border-top: 1px solid var(--whitegrey);
|
||||
padding-top: 16px;
|
||||
}
|
||||
|
||||
.gh-portal-settings .input-color input {
|
||||
height: 30px;
|
||||
width: 102px;
|
||||
padding: 3px 4px 3px 44px;
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
.gh-portal-settings .input-color .color-box {
|
||||
height: 28px;
|
||||
width: 28px;
|
||||
}
|
||||
|
||||
.gh-portal-settings .input-color::after {
|
||||
top: 5px;
|
||||
left: 34px;
|
||||
}
|
||||
|
||||
.gh-portal-settings .input-color input:focus + .color-box {
|
||||
height: 26px;
|
||||
width: 28px;
|
||||
}
|
||||
|
||||
.gh-portal-settings .gh-select svg {
|
||||
top: 19px;
|
||||
right: 9px;
|
||||
}
|
||||
|
||||
.gh-portal-settings-main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
padding: 28px;
|
||||
border-left: 1px solid var(--whitegrey);
|
||||
}
|
||||
|
||||
.gh-portal-settings .modal-footer {
|
||||
margin-top: 28px;
|
||||
}
|
||||
|
||||
.gh-portal-settings-maintabs {
|
||||
list-style: none;
|
||||
list-style-type: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0;
|
||||
margin: 4px 0 16px;
|
||||
}
|
||||
|
||||
.gh-portal-settings-maintabs li {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.gh-portal-settings-maintabs li a {
|
||||
display: inline-block;
|
||||
padding: 4px 12px;
|
||||
margin: -4px 0;
|
||||
}
|
||||
|
||||
.gh-portal-settings-maintabs li:first-of-type a {
|
||||
margin-left: -12px;
|
||||
}
|
||||
|
||||
.gh-portal-settings-icons {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
border-right: 1px solid var(--lightgrey);
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
.gh-portal-button-icon {
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
width: 41px;
|
||||
height: 41px;
|
||||
padding: 10px;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 22px 22px;
|
||||
background-position: center;
|
||||
border-radius: 2px;
|
||||
margin: 2px 3px 2px;
|
||||
}
|
||||
|
||||
.gh-portal-button-icon:hover {
|
||||
box-shadow: 0px 0px 0px 1px color-mod(var(--blue) a(40%));
|
||||
}
|
||||
|
||||
.gh-portal-button-icon.selected-icon {
|
||||
box-shadow: 0px 0px 0px 2px var(--blue);
|
||||
}
|
||||
|
||||
.gh-portal-button-icon svg {
|
||||
fill: var(--midlightgrey-d1);
|
||||
}
|
||||
|
||||
.gh-portal-button-icon.selected-icon svg {
|
||||
fill: var(--blue);
|
||||
}
|
||||
|
||||
.gh-portal-button-uploadicon,
|
||||
.gh-portal-button-uploadicon:hover,
|
||||
.gh-portal-button-uploadicon:focus {
|
||||
height: 44px;
|
||||
width: 46px;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.gh-portal-button-uploadicon span {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.gh-portal-button-uploadicon span svg {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
.gh-portal-button-uploadicon:hover span svg {
|
||||
fill: var(--darkgrey);
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue