Ghost/ghost/admin/app/templates/member.hbs
Peter Zimon 74b5327dbe Member geolocation design refinements
no refs.
- refined copy and styles for member list
- added geolocation data for member detail screen
2020-02-27 15:14:26 +01:00

110 lines
4.1 KiB
Handlebars
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<section class="gh-canvas">
<GhCanvasHeader class="gh-canvas-header">
<h2 class="gh-canvas-title" data-test-screen-title>
<LinkTo @route="members" data-test-link="members-back">Members</LinkTo>
<span>{{svg-jar "arrow-right"}}</span>
{{#if this.member.isNew}}
New member
{{else}}
{{or this.member.name this.member.email}}
{{/if}}
</h2>
<section class="view-actions">
{{#if this.session.user.isOwner}}
{{#unless this.member.isNew}}
<button
class="gh-btn gh-btn-white gh-btn-icon mr2"
{{on "click" (action "toggleImpersonateMemberModal")}}>
<span>Impersonate</span>
</button>
{{/unless}}
{{/if}}
<GhTaskButton @class="gh-btn gh-btn-blue gh-btn-icon" @type="button" @task={{this.save}} @data-test-button="save" />
</section>
</GhCanvasHeader>
<form class="mb10 member-basic-info-form">
<div class="flex items-center mb10 bt b--lightgrey-d1 pt8">
{{#if (or this.member.name this.member.email)}}
<GhMemberAvatar
@member={{this.member}}
@sizeClass={{if this.member.name 'f-subheadline fw4 lh-zero tracked-1' 'f-headline fw4 lh-zero tracked-1'}}
@containerClass="w20 h20 mr4 gh-member-detail-avatar"
/>
{{else}}
<div class="flex items-center justify-center br-100 w18 h18 mr4 gh-new-member-avatar">
<span class="gh-member-avatar-label f-subheadline fw4 lh-zero tracked-1">N</span>
</div>
{{/if}}
<div>
<h3 class="f2 fw6 ma0 pa0">
{{or this.member.name this.member.email}}
</h3>
<p class="f7 pa0 ma0 midlightgrey-d1">
{{#if (and this.member.name this.member.email)}}
<span class="darkgrey fw5">{{this.member.email}}</span>
{{/if}}
</p>
{{#unless this.member.isNew}}
<p class="f7 pa0 ma0 midgrey-d1 {{if this.member.name "nudge-bottom--2"}}">
{{#if this.member.geolocation}}
{{#if (eq this.member.geolocation.country_code "US")}}
{{this.member.geolocation.region}}, US
{{else}}
{{this.member.geolocation.country}}
{{/if}}
{{else}}
Unknown location
{{/if}}
Created on {{this.subscribedAt}}
</p>
{{/unless}}
</div>
</div>
<GhMemberSettingsForm
@member={{this.member}}
@scratchMember={{this.scratchMember}}
@setProperty={{action "setProperty"}}
@isLoading={{this.isLoading}} />
</form>
{{#unless this.member.isNew}}
<button
type="button"
class="gh-btn gh-btn-red gh-btn-icon mt3"
{{on "click" (action "toggleDeleteMemberModal")}}
data-test-button="delete-member"
>
<span>Delete member</span>
</button>
{{/unless}}
</section>
{{#if this.showUnsavedChangesModal}}
<GhFullscreenModal
@modal="leave-settings"
@confirm={{action "leaveScreen"}}
@close={{action "toggleUnsavedChangesModal"}}
@modifier="action wide" />
{{/if}}
{{#if this.showDeleteMemberModal}}
<GhFullscreenModal
@modal="delete-member"
@model={{this.member}}
@confirm={{action "deleteMember"}}
@close={{action "toggleDeleteMemberModal"}}
@modifier="action wide" />
{{/if}}
{{#if this.showImpersonateMemberModal}}
<GhFullscreenModal
@modal="impersonate-member"
@model={{this.member}}
@close={{action "toggleImpersonateMemberModal"}}
@modifier="action wide" />
{{/if}}