Updated member detail screen design

ghost/admin/app/components/gh-member-settings-form.js

@@ -0,0 +1,39 @@
+/* global key */
+import Component from '@ember/component';
+import Ember from 'ember';
+import boundOneWay from 'ghost-admin/utils/bound-one-way';
+import {computed} from '@ember/object';
+import {htmlSafe} from '@ember/string';
+import {reads} from '@ember/object/computed';
+import {inject as service} from '@ember/service';
+
+const {Handlebars} = Ember;
+
+export default Component.extend({
+    feature: service(),
+    config: service(),
+    mediaQueries: service(),
+
+    member: null,
+
+    isViewingSubview: false,
+
+    // Allowed actions
+    setProperty: () => {},
+    showDeleteTagModal: () => {},
+
+    scratchName: boundOneWay('member.name'),
+    scratchEmail: boundOneWay('member.email'),
+    scratchDescription: '',
+
+    actions: {
+        setProperty(property, value) {
+            this.setProperty(property, value);
+        },
+
+        deleteTag() {
+            this.showDeleteTagModal();
+        }
+    }
+
+});

ghost/admin/app/controllers/member.js

@@ -31,6 +31,12 @@ export default Controller.extend({
     }),
 
     actions: {
+        setProperty(propKey, value) {
+            // this._saveTagProperty(propKey, value);
+        },
+        toggleDeleteTagModal() {
+            this.toggleProperty('showDeleteMemberModal');
+        },
         finaliseDeletion() {
             // decrememnt the total member count manually so there's no flash
             // when transitioning back to the members list
@@ -38,9 +44,17 @@ export default Controller.extend({
                 this.members.decrementProperty('meta.pagination.total');
             }
             this.router.transitionTo('members');
+        },
+        save() {
+            return this.save.perform();
         }
     },
 
+    save: task(function* () {
+        // DO NOTHING ATM
+        return;
+    }),
+
     fetchMember: task(function* (memberId) {
         yield this.store.findRecord('member', memberId, {
             reload: true

ghost/admin/app/templates/components/gh-member-settings-form.hbs

@@ -0,0 +1,42 @@
+<h4 class="midlightgrey f-small fw5 ttu">Basic settings</h4>
+<div class="pa5 pt4 br4 shadow-1 bg-grouped-table mt2 flex flex-column flex-row-ns items-start justify-between gh-tag-basic-settings-form">
+    <div class="order-1 flex flex-column items-start mr5 w-100 w-50-m w-two-thirds-l">
+        {{#gh-form-group errors=member.errors hasValidated=member.hasValidated property="name"}}
+        <label for="member-name">Name</label>
+        {{gh-text-input
+                    id="member-name"
+                    name="name"
+                    value=(readonly scratchName)
+                    tabindex="1"
+                    input=(action (mut scratchName) value="target.value")
+                    focus-out=(action 'setProperty' 'name' scratchName)}}
+        {{gh-error-message errors=tag.errors property="name"}}
+        {{/gh-form-group}}
+
+        {{#gh-form-group errors=member.errors hasValidated=member.hasValidated property="email"}}
+        <label for="member-email">Email</label>
+        {{gh-text-input
+                    value=(readonly scratchSlug)
+                    id="member-email"
+                    name="email"
+                    tabindex="2"
+                    focus-out=(action 'setProperty' 'email' scratchEmail)
+                    input=(action (mut scratchSlug) value="target.value")}}
+        {{/gh-form-group}}
+
+        {{#gh-form-group errors=member.errors hasValidated=tag.hasValidated property="note"}}
+        <label for="member-description">Note</label>
+        {{gh-textarea
+                    id="member-description"
+                    name="description"
+                    class="gh-tag-details-textarea"
+                    tabindex="3"
+                    value=(readonly scratchDescription)
+                    input=(action (mut scratchDescription) value="target.value")
+                    focus-out=(action 'setProperty' 'description' scratchDescription)
+                }}
+        {{gh-error-message errors=tag.errors property="description"}}
+        <p>Maximum: <b>500</b> characters. You’ve used {{gh-count-down-characters scratchDescription 500}}</p>
+        {{/gh-form-group}}
+    </div>
+</div>

ghost/admin/app/templates/member.hbs

@@ -1,42 +1,19 @@
 <section class="gh-canvas">
-    <GhCanvasHeader class="gh-canvas-header">
+    <form class="mb15" {{action (perform "save") on="submit"}}>
-        <h2 class="gh-canvas-title" data-test-screen-title>
+        <GhCanvasHeader class="gh-canvas-header">
-            {{link-to "Members" "members" data-test-link="members"}}
+            <h2 class="gh-canvas-title" data-test-screen-title>
-            <span>{{svg-jar "arrow-right"}}</span>
+                {{#link-to "members" data-test-link="members-back"}}Members{{/link-to}}
-            {{member.name}}
+                <span>{{svg-jar "arrow-right"}}</span>
-        </h2>
+                {{member.email}}
-    </GhCanvasHeader>
+            </h2>
-
+            <section class="view-actions">
-    <section class="view-container">
+                {{gh-task-button task=save class="gh-btn gh-btn-blue gh-btn-icon" data-test-button="save"}}
-        <div class="br3 bg-white mt2 shadow-1">
+            </section>
-            <div class="flex flex-row pa5 bb b--whitegrey">
+        </GhCanvasHeader>
-                <GhMemberAvatar class="w20 h20 mr4" @initialsClass="f-subheadline" @member={{member}} />
+        {{gh-member-settings-form member=member
-                <div class="flex flex-column justify-center">
+            setProperty=(action "setProperty")
-                    <h3 class="ma0 pa0 fw5">{{member.name}}</h3>
+            showDeleteTagModal=(action "toggleDeleteTagModal")}}
-                    <span class="db">
+    </form>
-                        <a class="midlightgrey" href="mailto:{{member.email}}">
-                            {{member.email}}
-                        </a>
-                    </span>
-                </div>
-            </div>
-            <div class="flex flex-row">
-                <div class="flex flex-column flex-grow-1 pa5 br b--whitegrey w-50">
-                    <span class="db ttu f8 midlightgrey">Member since</span>
-                    <span class="db f5">{{moment-format member.createdAt "MMMM Do"}}</span>
-                    <span class="db f8 midlightgrey">({{moment-to-now member.createdAt hideAffix=true}})</span>
-                </div>
-                <div class="flex flex-column flex-grow-1 pa5 w-50">
-                    <span class="db ttu f8 midlightgrey">Current plan</span>
-                    <span class="db f5 {{if (eq subscription.plan '...') "midlightgrey"}}">{{subscription.plan}}</span>
-                    {{#unless (eq subscription.amount '...')}}
-                        <span class="db f8 midlightgrey">{{subscription.amount}} USD/month</span>
-                    {{/unless}}
-                </div>
-            </div>
-        </div>
-
-        <h2 class="pb1 bb b--whitegrey-d1 f-small fw5 midlightgrey ttu mt10 pb2">Danger zone</h2>
         <button
             type="button"
             class="gh-btn gh-btn-red gh-btn-icon mt3"
@@ -45,7 +22,6 @@
         >
             <span>Delete member</span>
         </button>
-    </section>
 </section>
 
 {{#if showDeleteMemberModal}}
@@ -53,4 +29,4 @@
         model=(hash member=member onSuccess=(action "finaliseDeletion"))
         close=(action (toggle "showDeleteMemberModal" this))
         modifier="action wide"}}
-{{/if}}
+{{/if}}