feat(mobile contacts): hide / show contact details

 - details page is by defaul flex none and width 0
 - selecting an option adds a class to show the details
 - X button added to details header which removes the class and hides the details

client-app/src/examples/contactMobile/ContactsPage.ts → client-app/src/examples/mobileContacts/ContactsPage.ts

@@ -17,8 +17,6 @@ export const contactsPage = hoistCmp.factory({
 
     render({model}) {
         return panel({
-            title: 'XH Contact Mobile',
-            icon: Icon.addressCard(),
             item: hframe(
                 panel({
                     tbar: tbar(),

client-app/src/examples/contactMobile/cmp/FavoriteButton.ts → client-app/src/examples/mobileContacts/cmp/FavoriteButton.ts

@@ -9,6 +9,9 @@ import './FavoriteButton.scss';
 export const favoriteButton = hoistCmp.factory<ContactsPageModel>(({model, record}) => {
     const {isFavorite} = record.data;
     return button({
+        className: 'tb-contact-fave-btn',
+        height: null,
+        style: {backgroundColor: 'transparent'},
         icon: Icon.favorite({
             color: isFavorite ? 'gold' : null,
             prefix: isFavorite ? 'fas' : 'far'

client-app/src/examples/contactMobile/cmp/TileView.ts → client-app/src/examples/mobileContacts/cmp/TileView.ts

@@ -39,9 +39,7 @@ const tile = hoistCmp.factory<ContactsPageModel>(({model, record}) => {
                 ]
             })
         ],
-        onClick: () => {
-            gridModel.selectAsync(record);
-        }
+        onClick: () => gridModel.selectAsync(record)
     });
 });
 

client-app/src/examples/mobileContacts/details/ContactDetails.scss

@@ -0,0 +1,41 @@
+.tb-mobile-contact-details-panel {
+  flex: none;
+  width: 0;
+
+  &.details-visible {
+    flex: 1;
+    width: 100%;
+  }
+
+  .xh-panel-header {
+    height: 41px;
+  }
+
+  &__inner {
+    flex: 1;
+    overflow-y: auto;
+
+    img {
+      display: table-cell;
+      height: 250px;
+      margin: var(--xh-pad-px) auto;
+    }
+
+    .xh-form-field {
+      margin: 0;
+      padding: var(--xh-pad-half-px) var(--xh-pad-px);
+
+      &:first-of-type {
+        border-top: var(--xh-border-solid);
+      }
+
+      &:not(:last-child) {
+        border-bottom: var(--xh-border-solid);
+      }
+    }
+
+    .xh-form-field-label {
+      font-weight: bold;
+    }
+  }
+}

client-app/src/examples/contactMobile/details/ContactDetails.ts → client-app/src/examples/mobileContacts/details/ContactDetails.ts

@@ -2,18 +2,26 @@ import {hoistCmp, uses} from '@xh/hoist/core';
 import {box, div, img, p} from '@xh/hoist/cmp/layout';
 import {formField} from '@xh/hoist/mobile/cmp/form';
 import {form} from '@xh/hoist/cmp/form';
+import {panel} from '@xh/hoist/mobile/cmp/panel';
 import {select, textArea, textInput} from '@xh/hoist/mobile/cmp/input';
+import {button} from '@xh/hoist/mobile/cmp/button';
+import {Icon} from '@xh/hoist/icon';
 import {isEmpty} from 'lodash';
 
 import ContactDetailsModel from './ContactDetailsModel';
+import './ContactDetails.scss';
 
 export const contactDetails = hoistCmp.factory({
     model: uses(ContactDetailsModel),
     render({model}) {
-        const {currentRecord} = model;
+        const {currentRecord, visible} = model;
 
-        return div({
-            className: 'tb-contact-details-panel__inner',
+        return panel({
+            className: `tb-mobile-contact-details-panel ${visible ? 'details-visible' : ''}`,
+            flex: 'none',
+            width: 'none',
+            title: currentRecord?.data.name,
+            headerItems: [button({icon: Icon.close(), onClick: () => (model.visible = false)})],
             item: currentRecord ? contactProfile() : null
         });
     }

client-app/src/examples/mobileContacts/details/ContactDetailsModel.ts

@@ -0,0 +1,46 @@
+import {HoistModel} from '@xh/hoist/core/model/HoistModel';
+import {FormModel} from '@xh/hoist/cmp/form';
+import {managed} from '@xh/hoist/core';
+import {bindable, makeObservable, observable, action} from '@xh/hoist/mobx';
+import {StoreRecord} from '@xh/hoist/data';
+import {required} from '@xh/hoist/data/validation/constraints';
+
+import ContactsPageModel from '../ContactsPageModel';
+
+export default class ContactDetailsModel extends HoistModel {
+    @observable.ref
+    currentRecord: StoreRecord;
+
+    @bindable visible: boolean = false;
+
+    contactPageModel: ContactsPageModel;
+
+    @managed
+    formModel: FormModel;
+
+    constructor(contactPageModel: ContactsPageModel) {
+        super();
+        makeObservable(this);
+        this.contactPageModel = contactPageModel;
+
+        this.formModel = new FormModel({
+            readonly: true,
+            fields: [
+                {name: 'name', rules: [required]},
+                {name: 'email', rules: [required]},
+                {name: 'location', rules: [required]},
+                {name: 'workPhone'},
+                {name: 'cellPhone'},
+                {name: 'bio'},
+                {name: 'tags'}
+            ]
+        });
+    }
+
+    @action
+    setCurrentRecord(record) {
+        this.currentRecord = record;
+        this.formModel.init(record?.data);
+        this.visible = true;
+    }
+}