tqt
/
Ghost-Admin
mirror of https://github.com/TryGhost/Ghost-Admin.git
1
0
Fork 0
Code Issues Releases Wiki Activity

Updated account menu

This commit is contained in:
Peter Zimon 2021-02-10 21:05:54 +01:00
parent 8d0c7f8b6d
commit 7c5a2e3a3b
5 changed files with 91 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/components/gh-member-activity-feed.hbs
View File

@ -1,5 +1,5 @@
<div class="gh-member-feed" ...attributes>
<div class="flex-auto flex flex-column justify-between items-stretch">
<div class="flex-auto flex flex-column items-stretch {{if this.activities "justify-between" "h-100 justify-center"}}">
<div>
{{#if this.activities}}
{{#each this.firstActivities as |activity|}}
@ -23,7 +23,7 @@
</button>
{{/if}}
{{else}}
<p class="ma0 pa12 tc midgrey fw3">No member activity yet</p>
<p class="ma0 pa12 tc midgrey">No member activity yet</p>
{{/if}}
</div>
</div>

6
app/components/gh-member-settings-form.hbs
View File

@ -123,16 +123,16 @@
<section class="gh-main-section columns-2">
<div class="gh-main-section-block">
<div class="gh-main-section-block stretch-height">
<h4 class="gh-main-section-header small bn">Member activity</h4>
<div class="gh-main-section-content grey">
<div class="gh-main-section-content grey stretch-height">
<GhMemberActivityFeed @emailRecipients={{this.member.emailRecipients}} />
</div>
</div>
{{#if this.canShowStripeInfo}}
<div class="gh-main-section-block">
<h4 class="gh-main-section-header small bn">Stripe info</h4>
<div class="gh-main-section-content padding-top-s grey">
<div class="gh-main-section-content stretch-height grey">
<div class="gh-member-stripe">
{{#if this.isLoading}}
<div class="flex justify-center flex-auto">

27
app/components/gh-nav-menu/footer.hbs
View File

@ -13,14 +13,23 @@
<dropdown.Content class="gh-nav-menu-dropdown">
<ul class="dropdown-menu dropdown-triangle-top" role="menu" {{action dropdown.actions.close on="click" preventDefault=false}}>
<li role="presentation">
<div class="gh-account-menu-header">
<span class="user-menu-signout" data-tooltip="Logout"><LinkTo @route="signout" @classNames="dropdown-item" @role="menuitem" @tabindex="-1">{{svg-jar "signout"}}</LinkTo></span>
<div class="gh-user-avatar relative" style={{background-image-style this.session.user.profileImageUrl}}></div>
<h4 class="gh-user-name">{{this.session.user.name}}</h4>
<span class="gh-user-email">{{this.session.user.email}}</span>
</div>
</li>
<li class="divider" role="separator"></li>
<li role="presentation">
<LinkTo @route="about" @classNames="dropdown-item" @role="menuitem" @tabindex="-1" data-test-nav="about">
{{svg-jar "store"}} About Ghost
About Ghost
</LinkTo>
</li>
<li role="presentation">
<button class="dropdown-item" role="menuitem" tabindex="-1" {{on "click" this.whatsNew.showModal}}>
{{svg-jar "gift"}} What's new?
What's new?
{{#if this.whatsNew.hasNew}}
<div class="flex-grow-1 flex justify-end"><span class="dib w2 h2 top-0 right-0 bg-blue br-100"></span></div>
{{/if}}
@ -29,12 +38,12 @@
<li class="divider" role="separator"></li>
<li role="presentation">
<LinkTo @route="staff.user" @model={{this.session.user.slug}} @classNames="dropdown-item" @role="menuitem" @tabindex="-1" data-test-nav="user-profile">
{{svg-jar "user-circle"}} Your Profile
Your Profile
</LinkTo>
</li>
<li role="presentation">
<a class="dropdown-item" role="menuitem" tabindex="-1" href="https://ghost.org/docs/" target="_blank">
{{svg-jar "ambulance"}} Support Center
Support Center
</a>
</li>
<li role="presentation">
@ -42,15 +51,15 @@
href="https://twitter.com/intent/tweet?text=%40Ghost+Hi%21+Can+you+help+me+with+&related=Ghost"
onclick="window.open(this.href, 'twitter-share', 'width=550,height=235');return false;"
>
{{svg-jar "twitter"}} Tweet @Ghost!
Tweet @Ghost!
</a>
</li>
<li role="presentation">
<a class="dropdown-item" role="menuitem" tabindex="-1" href="https://ghost.org/help/topic/setting-up/" target="_blank">
{{svg-jar "book-open"}} How to Use Ghost
How to Use Ghost
</a>
</li>
<li class="divider" role="separator"></li>
{{!-- <li class="divider" role="separator"></li> --}}
{{#if this.showDropdownExtension}}
{{#each this.config.clientExtensions.dropdown.items as |menuItem| }}
@ -66,11 +75,11 @@
{{/each}}
{{/if}}
<li role="presentation">
{{!-- <li role="presentation">
<LinkTo @route="signout" @classNames="dropdown-item user-menu-signout" @role="menuitem" @tabindex="-1">
{{svg-jar "signout"}} Sign Out
</LinkTo>
</li>
</li> --}}
</ul>
</dropdown.Content>
</GhBasicDropdown>

97
app/styles/layouts/main.css
View File

@ -81,32 +81,6 @@
border: 1px solid color-mod(var(--main-bg-color) l(-8%));
}
.gh-user-name {
margin: -2px 8px 2px 0;
padding: 0 0 3px 0;
word-break: break-all;
font-weight: 600;
line-height: 1.1em;
max-width: 160px;
text-overflow: ellipsis;
overflow-x: hidden;
white-space: nowrap;
}
.gh-user-email {
margin: -1px 8px -3px 0;
padding: 0 0 3px 0;
word-break: break-all;
font-size: 1.25rem;
font-weight: 400;
line-height: 1.1em;
color: var(--middarkgrey);
max-width: 160px;
text-overflow: ellipsis;
overflow-x: hidden;
white-space: nowrap;
}
/* Global Nav
/* ---------------------------------------------------------- */
@ -131,12 +105,12 @@
}
.gh-nav-menu-dropdown .dropdown-menu {
top: -344px;
top: -440px;
left: 20px;
margin: 10px 0 0;
box-shadow: var(--box-shadow-m);
min-width: 280px;
padding: 6px 0;
min-width: 290px;
padding: 6px 0 12px;
}
.gh-nav-menu-dropdown .dropdown-menu>li>a,
@ -144,7 +118,7 @@
font-size: 1.4rem;
margin: 0;
width: unset;
padding: 10px 24px 11px;
padding: 8px 24px 9px;
}
.gh-nav-menu-dropdown .dropdown-menu>li>button {
@ -216,6 +190,54 @@
padding: 0;
}
.gh-account-menu-header {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
padding: 32px 24px 24px;
}
.gh-account-menu-header .gh-user-avatar {
width: 56px;
height: 56px;
margin: 0;
padding: 0;
}
.gh-account-menu-header .user-menu-signout {
position: absolute;
top: 16px;
right: 12px;
}
.gh-user-name {
margin: 8px 0 0;
padding: 0;
word-break: break-all;
font-size: 1.5rem;
font-weight: 600;
line-height: 1.2em;
max-width: 160px;
text-overflow: ellipsis;
overflow-x: hidden;
white-space: nowrap;
}
.gh-user-email {
margin: 4px 0 0;
padding: 0;
word-break: break-all;
font-size: 1.3rem;
font-weight: 400;
line-height: 1.2em;
color: var(--middarkgrey);
max-width: 160px;
text-overflow: ellipsis;
overflow-x: hidden;
white-space: nowrap;
}
/* Global search
/* ---------------------------------------------------------- */
@ -1042,10 +1064,15 @@
padding: 0;
}
.gh-main-section-block.with-margin,
.gh-main-section-block:not(:last-of-type) {
margin-bottom: 32px;
}
.gh-main-section-block.no-margin {
margin-bottom: 0;
}
.gh-main-section-block.bt { border-top: 1px solid var(--whitegrey); }
.gh-main-section-block.br { border-right: 1px solid var(--whitegrey); }
.gh-main-section-block.bb { border-bottom: 1px solid var(--whitegrey); }
@ -1082,6 +1109,16 @@
padding-top: 16px;
}
.gh-main-section-block.stretch-height {
height: 100%;
display: flex;
flex-direction: column;
}
.gh-main-section-block.stretch-height .gh-main-section-content {
flex-grow: 1;
}
/* Expandable options */
.gh-expandable {
background: var(--main-color-content-greybg);

1
app/styles/layouts/members.css
View File

@ -534,6 +534,7 @@ textarea.gh-member-details-textarea {
align-items: center;
justify-content: flex-start;
min-height: 24px;
margin-top: -8px;
}
.gh-member-stripe-info {