@operato/contact 1.1.66 → 1.1.68

package/src/ox-contact-view.ts

@@ -79,7 +79,7 @@ export class OxContactView extends LitElement {
   @property({ type: Object }) contact: Contact = {}
 
   render() {
-    const { profile, items = [], note } = this.contact || {}
+    const { profile, items = [], name, company, note } = this.contact || {}
     var sorted: { [type: string]: ContactItem[] } = {}
 
     items.forEach(item => {
@@ -90,28 +90,20 @@ export class OxContactView extends LitElement {
       }
     })
 
-    const names = sorted[ContactField.Name] || []
-    const companies = sorted[ContactField.Company] || []
-
     return html`
       <div name>
-        <ox-pfp-view .profile=${profile} .name=${names[0]?.value}></ox-pfp-view>
+        <ox-pfp-view .profile=${profile} .name=${name}></ox-pfp-view>
 
         <div name-content>
-          ${names.map(
-            item =>
-              html`<div>
-                <span data-item="value">${item.value}</span>
-              </div>`
-          )}
-          ${companies.map(
-            item =>
-              html`<div>
-                <span data-item="value">${item.value}</span>
-              </div>`
-          )}
+          <div>
+            <span data-item="value">${name}</span>
+          </div>
+          <div>
+            <span data-item="value">${company}</span>
+          </div>
         </div>
       </div>
+
       ${['email', 'phone', 'address', 'company', 'etc']
         .map(type => sorted[type])
         .filter(items => items && items.length > 0)

package/src/ox-contact.ts

@@ -1,11 +1,15 @@
+import './ox-contact-edit.js'
+import './ox-contact-view.js'
+
 import { html, css, LitElement } from 'lit'
-import { customElement, property, state } from 'lit/decorators.js'
-import './ox-contact-edit'
-import './ox-contact-view'
+import { customElement, property, query, state } from 'lit/decorators.js'
+
+import { ButtonContainerStyles } from '@operato/styles'
+
+import { OxContactEdit } from './ox-contact-edit.js'
 import { Profile } from './ox-pfp-view.js'
 
 export enum ContactField {
-  Name = 'name',
   JobTitle = 'job-title',
   Phone = 'phone',
   Address = 'address',
@@ -14,7 +18,6 @@ export enum ContactField {
   Profile = 'profile',
   Picture = 'picture',
   Department = 'department',
-  Company = 'company',
   Homepage = 'homepage'
 }
 
@@ -33,39 +36,67 @@ export type ContactItem = {
 }
 
 export type Contact = {
+  id?: string
   profile?: Profile
+  name?: string
+  company?: string
   items?: ContactItem[]
   note?: string
 }
 
 @customElement('ox-contact')
 export class OxContact extends LitElement {
-  static styles = css`
-    :host {
-      display: block;
-    }
+  static styles = [
+    ButtonContainerStyles,
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+        background-color: var(--main-section-background-color);
+      }
 
-    button {
-      display: block;
-      margin-left: auto;
-    }
-  `
+      ox-contact-view,
+      ox-contact-edit {
+        padding: var(--pading-default);
+        flex: 1;
+      }
+    `
+  ]
 
   @property({ type: Object }) contact: Contact = {}
 
   @state() editMode?: boolean = false
 
+  @query('ox-contact-edit') editor!: OxContactEdit
+
   render() {
-    return html`${this.editMode
-      ? html`<ox-contact-edit
-          .contact=${this.contact}
-          @edit-cancel=${() => (this.editMode = false)}
-          @edit-done=${(e: CustomEvent) => {
-            this.contact = e.detail
-            this.editMode = false
-          }}
-        ></ox-contact-edit>`
-      : html` <ox-contact-view .contact=${this.contact}></ox-contact-view>
-          <button value="Edit" @click=${() => (this.editMode = true)}>Edit</button>`} `
+    return html` 
+    <div container>
+      ${
+        this.editMode
+          ? html`<ox-contact-edit
+              .contact=${this.contact}
+              @edit-cancel=${() => (this.editMode = false)}
+              @edit-done=${(e: CustomEvent) => {
+                this.contact = e.detail
+                this.editMode = false
+              }}
+            ></ox-contact-edit>`
+          : html` <ox-contact-view .contact=${this.contact}></ox-contact-view> `
+      }
+      </div>
+      
+      <div class="button-container">
+        ${
+          this.editMode
+            ? html`
+                <button value="Done" @click=${() => this.editor.save()}>Done</button>
+                <button value="Cancel" @click=${() => this.editor.cancel()}>Cancel</button>
+                <button value="Reset" @click=${() => this.editor.reset()}>Reset</button>
+              `
+            : html` <button value="Edit" @click=${() => (this.editMode = true)}>Edit</button> `
+        }
+      </div>
+    </div>`
   }
 }

package/src/ox-pfp-edit.ts

@@ -62,7 +62,6 @@ export class OxPfpEdit extends LitElement {
       right: 0;
       width: 100%;
       height: 100%;
-      z-index: -1;
       background-repeat: no-repeat;
       background-image: var(
         --background-image,
@@ -133,6 +132,7 @@ export class OxPfpEdit extends LitElement {
   @query('[circle]') circle!: HTMLDivElement
 
   private dragStart?: { x: number; y: number }
+
   private dragEndHandler = this.onDragEnd.bind(this) as EventListener
   private dragMoveHandler = this.onDragMove.bind(this) as EventListener
   private dragStartHandler = this.onDragStart.bind(this) as EventListener
@@ -193,7 +193,7 @@ export class OxPfpEdit extends LitElement {
             capture="environment"
             @change=${(e: Event) => this.onChangeFile(e)}
           />
-          <mwc-icon>image_search</mwc-icon>
+          <mwc-icon title="select image">image_search</mwc-icon>
         </label>
       </div>
 
@@ -202,12 +202,12 @@ export class OxPfpEdit extends LitElement {
   }
 
   updated(changes: PropertyValues<this>) {
-    const { picture, zoom = 1, left = 0, top = 0 } = this.profile
+    const { picture, zoom = 1, left = 0, top = 0 } = this.profile || {}
 
     if (picture) {
       const style = this.style
 
-      style.setProperty('--background-image', `url(${picture})`)
+      style.setProperty('--background-image', `url('${picture}')`)
       style.setProperty('--image-transform', `translate(${left}%, ${top}%) scale(${zoom}, ${zoom})`)
     }
   }
@@ -225,12 +225,13 @@ export class OxPfpEdit extends LitElement {
 
     var delta = Math.max(-1, Math.min(1, (e as WheelEvent).deltaY || -(e as WheelEvent).detail))
 
-    const { top = 0, left = 0, zoom = 1, picture } = this.profile
+    const { top = 0, left = 0, zoom = 1, picture, file } = this.profile || {}
     this.profile = {
       top,
       left,
       zoom: zoom * (1 - delta / 20),
-      picture
+      picture,
+      file
     }
 
     this.dispatchEvent(
@@ -272,14 +273,15 @@ export class OxPfpEdit extends LitElement {
 
     this.dragStart = dragStart
 
-    const { top = 0, left = 0, zoom = 1, picture } = this.profile
+    const { top = 0, left = 0, zoom = 1, picture, file } = this.profile || {}
     const { offsetHeight, offsetWidth } = this
 
     this.profile = {
       top: top + (y / offsetHeight) * 100,
       left: left + (x / offsetWidth) * 100,
       zoom,
-      picture
+      picture,
+      file
     }
 
     this.dispatchEvent(
@@ -313,7 +315,8 @@ export class OxPfpEdit extends LitElement {
       left: 0,
       top: 0,
       zoom: 1,
-      picture
+      picture,
+      file: imageFile
     }
   }
 
@@ -330,7 +333,8 @@ export class OxPfpEdit extends LitElement {
       left: 0,
       top: 0,
       zoom: 1,
-      picture
+      picture,
+      file: imageFile
     }
 
     fileInput.files = null

package/src/ox-pfp-view.ts

@@ -6,6 +6,7 @@ export type Profile = {
   top?: number
   zoom?: number
   picture?: string
+  file?: File
 }
 
 @customElement('ox-pfp-view')

package/src/ox-pfp.ts

@@ -34,6 +34,7 @@ export class OxPfp extends LitElement {
 
     mwc-icon-button {
       position: absolute;
+      font-size: smaller;
     }
 
     mwc-icon-button[icon='fit_screen'] {
@@ -72,9 +73,10 @@ export class OxPfp extends LitElement {
   render() {
     return this.editMode
       ? html`<ox-pfp-edit .profile=${this.profile} name=${this.name || ''}>
-          <mwc-icon-button icon="fit_screen" @click=${() => this.edit.fit()}></mwc-icon-button>
-          <mwc-icon-button icon="clear" @click=${() => this.edit.clear()}></mwc-icon-button>
+          <mwc-icon-button title="fit size" icon="fit_screen" @click=${() => this.edit.fit()}></mwc-icon-button>
+          <mwc-icon-button title="clear" icon="clear" @click=${() => this.edit.clear()}></mwc-icon-button>
           <mwc-icon-button
+            title="save"
             icon="save"
             @click=${() => {
               this.profile = this.edit.profile
@@ -86,11 +88,11 @@ export class OxPfp extends LitElement {
               )
             }}
           ></mwc-icon-button>
-          <mwc-icon-button icon="cancel" @click=${() => (this.editMode = false)}></mwc-icon-button>
+          <mwc-icon-button title="cancel" icon="cancel" @click=${() => (this.editMode = false)}></mwc-icon-button>
         </ox-pfp-edit> `
       : html`
           <ox-pfp-view .profile=${this.profile} name=${this.name || ''}>
-            <mwc-icon-button icon="edit" @click=${() => (this.editMode = true)}></mwc-icon-button>
+            <mwc-icon-button title="edit" icon="edit" @click=${() => (this.editMode = true)}></mwc-icon-button>
           </ox-pfp-view>
         `
   }

package/stories/ox-contact.stories.ts

@@ -38,13 +38,9 @@ export const Regular = Template.bind({})
 Regular.args = {
   contact: {
     note: 'abcdefg',
+    name: '남 상혁',
+    company: 'Hatiolab',
     items: [
-      {
-        id: '1',
-        type: ContactField.Name,
-        label: 'name',
-        value: '남 상혁'
-      },
       {
         id: '2',
         type: ContactField.Phone,