@things-factory/notification 7.0.0-alpha.8 → 7.0.0

package/client/actions/notification-fcm.ts

@@ -53,7 +53,7 @@ async function _getVapidKey() {
 }
 
 // to avoid race condition
-const getVapidKey = synchronize(_getVapidKey)
+const getVapidKey = synchronize(_getVapidKey) as any
 
 export async function isSupportingMessaging() {
   const { messaging } = (await getVapidKey()) || {}

package/client/bootstrap.ts

@@ -1,7 +1,8 @@
 import gql from 'graphql-tag'
 
 import { notify } from '@operato/layout'
-import { auth } from '@things-factory/auth-base/dist-client'
+import { auth } from '@things-factory/auth-base/dist-client/auth.js'
+
 import { i18next } from '@operato/i18n'
 import { notificationStore, route, store } from '@operato/shell'
 import { subscribe as graphqlSubscribe } from '@operato/graphql'

package/client/pages/notification/notification-list-page.ts

@@ -85,7 +85,7 @@ export class NotificationListPage extends connect(store)(localize(i18next)(Scope
 
           <div id="sorters">
             Sort
-            <mwc-icon
+            <md-icon
               @click=${e => {
                 const target = e.currentTarget
                 this.sortersControl.open({
@@ -93,7 +93,7 @@ export class NotificationListPage extends connect(store)(localize(i18next)(Scope
                   top: target.offsetTop + target.offsetHeight
                 })
               }}
-              >expand_more</mwc-icon
+              >expand_more</md-icon
             >
             <ox-popup id="sorter-control">
               <ox-sorters-control> </ox-sorters-control>
@@ -101,9 +101,10 @@ export class NotificationListPage extends connect(store)(localize(i18next)(Scope
           </div>
 
           <div id="modes">
-            <mwc-icon @click=${() => (this.mode = 'GRID')} ?active=${mode == 'GRID'}>grid_on</mwc-icon>
-            <mwc-icon @click=${() => (this.mode = 'LIST')} ?active=${mode == 'LIST'}>format_list_bulleted</mwc-icon>
-            <mwc-icon @click=${() => (this.mode = 'CARD')} ?active=${mode == 'CARD'}>apps</mwc-icon>
+            <md-icon @click=${() => (this.mode = 'GRID')} ?active=${mode == 'GRID'}>grid_on</md-icon>
+            <md-icon @click=${() => (this.mode = 'LIST')} ?active=${mode == 'LIST'}>format_list_bulleted</md-icon>
+            <md-icon @click=${() => (this.mode = 'CARD')} ?active=${mode == 'CARD'}>apps</md-icon>
+          </div>
           </div>
         </div>
       </ox-grist>

package/client/pages/notification-rule/notification-rule-importer.ts

@@ -1,3 +1,4 @@
+import '@material/web/icon/icon.js'
 import '@operato/data-grist'
 
 import gql from 'graphql-tag'
@@ -7,30 +8,22 @@ import { property } from 'lit/decorators.js'
 import { client } from '@operato/graphql'
 import { i18next } from '@operato/i18n'
 import { isMobileDevice } from '@operato/utils'
+import { ButtonContainerStyles } from '@operato/styles'
 
 export class NotificationRuleImporter extends LitElement {
   static styles = [
+    ButtonContainerStyles,
     css`
       :host {
         display: flex;
         flex-direction: column;
 
-        background-color: #fff;
+        background-color: var(--md-sys-color-surface);
       }
 
       ox-grist {
         flex: 1;
       }
-
-      .button-container {
-        display: flex;
-        margin-left: auto;
-        padding: var(--padding-default);
-      }
-
-      mwc-button {
-        margin-left: var(--margin-default);
-      }
     `
   ]
 
@@ -71,7 +64,7 @@ export class NotificationRuleImporter extends LitElement {
       ></ox-grist>
 
       <div class="button-container">
-        <mwc-button raised @click="${this.save.bind(this)}">${i18next.t('button.save')}</mwc-button>
+        <button @click="${this.save.bind(this)}"><md-icon>save</md-icon>${i18next.t('button.save')}</button>
       </div>
     `
   }

package/client/pages/notification-rule/notification-rule-list-page.ts

@@ -100,7 +100,7 @@ export class NotificationRuleListPage extends connect(store)(localize(i18next)(S
 
           <div id="sorters">
             Sort
-            <mwc-icon
+            <md-icon
               @click=${e => {
                 const target = e.currentTarget
                 this.sortersControl.open({
@@ -108,7 +108,7 @@ export class NotificationRuleListPage extends connect(store)(localize(i18next)(S
                   top: target.offsetTop + target.offsetHeight
                 })
               }}
-              >expand_more</mwc-icon
+              >expand_more</md-icon
             >
             <ox-popup id="sorter-control">
               <ox-sorters-control> </ox-sorters-control>
@@ -116,9 +116,10 @@ export class NotificationRuleListPage extends connect(store)(localize(i18next)(S
           </div>
 
           <div id="modes">
-            <mwc-icon @click=${() => (this.mode = 'GRID')} ?active=${mode == 'GRID'}>grid_on</mwc-icon>
-            <mwc-icon @click=${() => (this.mode = 'LIST')} ?active=${mode == 'LIST'}>format_list_bulleted</mwc-icon>
-            <mwc-icon @click=${() => (this.mode = 'CARD')} ?active=${mode == 'CARD'}>apps</mwc-icon>
+            <md-icon @click=${() => (this.mode = 'GRID')} ?active=${mode == 'GRID'}>grid_on</md-icon>
+            <md-icon @click=${() => (this.mode = 'LIST')} ?active=${mode == 'LIST'}>format_list_bulleted</md-icon>
+            <md-icon @click=${() => (this.mode = 'CARD')} ?active=${mode == 'CARD'}>apps</md-icon>
+          </div>
           </div>
         </div>
       </ox-grist>

package/client/viewparts/notification-badge.ts

@@ -1,3 +1,5 @@
+import '@material/web/icon/icon.js'
+
 import { LitElement, html, css } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
 
@@ -10,49 +12,43 @@ export class NotificationBadge extends connect(store)(LitElement) {
     css`
       :host {
         font-size: 2em;
-        margin: 0 5px 0 0;
-        --badge-size: 14px;
+        position: relative;
       }
 
-      mwc-icon {
+      md-icon {
         display: block;
       }
 
-      [data-badge] {
-        position: relative;
-      }
-
-      [data-badge]::after {
+      :host::after {
         content: attr(data-badge);
         position: absolute;
         top: 0px;
         right: -6px;
         font-family: var(--theme-font);
-        font-size: 0.4em;
-        background: var(--paper-deep-orange-a400);
-        color: var(--theme-white-color);
-        width: var(--badge-size);
-        height: var(--badge-size);
+        font-size: 0.3em;
+        background: var(--md-sys-color-error, rgb(186 26 26));
+        color: var(--md-sys-color-on-primary);
+        width: 14px;
+        height: 14px;
         text-align: center;
-        line-height: var(--badge-size);
+        line-height: 14px;
         border-radius: 50%;
         box-shadow: var(--box-shadow);
       }
 
-      [data-badge='0']::after {
+      :host([data-badge='0'])::after {
         display: none;
       }
     `
   ]
 
-  @property({ type: Number }) badge?: number
+  @property({ type: Number, attribute: 'data-badge', reflect: true }) badge?: number
 
   render() {
-    var badge = this.badge || 0
-    return html` <mwc-icon data-badge=${badge} class="badge">notifications_none</mwc-icon> `
+    return html` <md-icon>notifications_none</md-icon> `
   }
 
   stateChanged(state) {
-    this.badge = state.notification.badge
+    this.badge = state.notification.badge || 0
   }
 }

package/client/viewparts/notification-item.ts

@@ -1,7 +1,8 @@
+import '@material/web/icon/icon.js'
+
 import gql from 'graphql-tag'
 import { LitElement, html, css } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
-import '@material/mwc-icon'
 import { client } from '@operato/graphql'
 
 function isOriginSameAsLocation(url) {
@@ -36,18 +37,20 @@ export class NotificationItem extends LitElement {
     css`
       :host {
         position: relative;
-        background-color: var(--theme-white-color);
-        padding: var(--padding-default);
+        background-color: var(--md-sys-color-surface);
+        padding: var(--spacing-medium);
         border-left: 0 solid transparent;
-        border-bottom: var(--border-dark-color) !important;
-        transition: border-left 300ms ease-in-out, padding-left 300ms ease-in-out;
-        color: var(--scondary-color);
+        border-bottom: 1px solid var(--md-sys-color-outline-variant) !important;
+        transition:
+          border-left 300ms ease-in-out,
+          padding-left 300ms ease-in-out;
+        color: var(--md-sys-color-on-surface);
 
         --type-dot-size: 9px;
       }
 
       :host([newbie]) {
-        background-color: var(--paper-light-green-50);
+        background-color: var(--md-sys-color-surface-variant);
       }
 
       :host(:hover) {
@@ -61,7 +64,7 @@ export class NotificationItem extends LitElement {
         text-overflow: ellipsis;
         font-size: var(--fontsize-large);
         font-weight: bold;
-        color: var(--secondary-color);
+        color: var(--md-sys-color-secondary);
       }
 
       [titler] span {
@@ -69,7 +72,7 @@ export class NotificationItem extends LitElement {
         width: var(--type-dot-size);
         height: var(--type-dot-size);
         border-radius: 50%;
-        margin-right: var(--margin-narrow);
+        margin-right: var(--spacing-small);
       }
       [titler] * {
         vertical-align: middle;
@@ -87,18 +90,18 @@ export class NotificationItem extends LitElement {
         opacity: 1;
       }
       [detail] {
-        padding: var(--padding-narrow) var(--padding-default);
+        padding: var(--spacing-small) var(--spacing-medium);
         border-radius: var(--border-radius);
         font-size: 0.85em;
       }
       span.more {
         margin-left: 16px;
         float: right;
-        padding: 0px var(--padding-narrow) 2px var(--padding-narrow);
+        padding: 0px var(--spacing-small) 2px var(--spacing-small);
         border-radius: var(--border-radius);
         font-size: 0.8em;
-        color: var(--theme-white-color);
-        --mdc-icon-size: 14px;
+        color: var(--md-sys-color-on-primary);
+        --md-icon-size: 14px;
       }
       span.more * {
         vertical-align: middle;
@@ -142,13 +145,13 @@ export class NotificationItem extends LitElement {
 
       [message] {
         font-size: var(--fontsize-default);
-        color: var(--secondary-color);
+        color: var(--md-sys-color-secondary);
       }
 
       [timestamp] {
         white-space: nowrap;
         font-size: var(--fontsize-small);
-        color: var(--secondary-text-color);
+        color: var(--md-sys-color-on-surface-variant);
       }
     `
   ]
@@ -174,7 +177,7 @@ export class NotificationItem extends LitElement {
             : html`<a href=${url}>${title}</a>`
           : title}
       </div>
-      <mwc-icon close @click=${e => this.dispatchEvent(new CustomEvent('close'))}>close</mwc-icon>
+      <md-icon close @click=${e => this.dispatchEvent(new CustomEvent('close'))}>close</md-icon>
 
       ${image
         ? url
@@ -190,7 +193,7 @@ export class NotificationItem extends LitElement {
               this.decipherErrorCode()
             }}
           >
-            <span class="more"><mwc-icon>expand_circle_down</mwc-icon> more</span>
+            <span class="more"><md-icon>expand_circle_down</md-icon> more</span>
           </div>`
         : html``}
       ${detail ? html`<div detail>${detail.message}</div>` : html``}

package/client/viewparts/notification-list.ts

@@ -1,3 +1,7 @@
+import '@material/web/icon/icon.js'
+import '@material/web/button/elevated-button.js'
+import './notification-item'
+
 import { LitElement, html, css } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
 import { connect } from 'pwa-helpers'
@@ -5,19 +9,16 @@ import { store, notificationStore } from '@operato/shell'
 import { i18next, localize } from '@operato/i18n'
 import { UPDATE_NOTIFICATION } from '../actions/notification-fcm'
 
-import '@material/mwc-icon'
-import './notification-item'
-
 @customElement('notification-list')
 export class NotificationList extends connect(store)(localize(i18next)(LitElement)) {
   static styles = [
     css`
       :host {
         display: block;
-        background-color: var(--theme-white-color);
+        background-color: var(--md-sys-color-surface);
         box-shadow: var(--box-shadow);
-        margin-right: var(--margin-wide);
-        padding: var(--padding-default);
+        margin-right: var(--spacing-large);
+        padding: var(--spacing-medium);
         max-height: 100%;
         overflow-x: hidden;
         overflow-y: auto;
@@ -28,7 +29,7 @@ export class NotificationList extends connect(store)(localize(i18next)(LitElemen
         height: 0px;
         border-left: 7px solid transparent;
         border-right: 7px solid transparent;
-        border-bottom: 7px solid var(--theme-white-color);
+        border-bottom: 7px solid var(--md-sys-color-on-primary);
         position: absolute;
         margin-top: -7px;
         right: 50px;
@@ -41,27 +42,28 @@ export class NotificationList extends connect(store)(localize(i18next)(LitElemen
       }
       [notifications-wrap] div {
         align-items: stretch;
-        border-bottom: 1px solid var(--primary-color);
+        border-bottom: 1px solid var(--md-sys-color-primary);
       }
       [notifications-wrap] strong {
-        color: var(--primary-color);
+        color: var(--md-sys-color-primary);
         text-transform: capitalize;
         line-height: 2;
       }
-      [notifications-wrap] mwc-button {
+      [notifications-wrap] md-elevated-button {
+        --md-elevated-button-container-height: 24px;
         float: right;
-        --mdc-button-horizontal-padding: var(--padding-narrow);
-        --mdc-typography-button-font-size: 0.75em;
+        padding-inline-start: 6px;
+        padding-inline-end: 12px;
       }
       [no-notifications] {
         margin: 0;
-        padding: var(--padding-wide);
+        padding: var(--spacing-large);
         text-align: center;
         font-size: var(--fontsize-default);
         font-weight: bold;
-        color: var(--secondary-color);
+        color: var(--md-sys-color-secondary);
       }
-      div mwc-icon {
+      div md-icon {
         display: block;
         opacity: 0.3;
       }
@@ -84,13 +86,11 @@ export class NotificationList extends connect(store)(localize(i18next)(LitElemen
           <div notifications-wrap>
             <div>
               <strong>${i18next.t('label.notification list')}</strong>
-              <mwc-button
-                outlined
-                dense
-                label=${String(i18next.t('label.clear all'))}
-                icon="delete_outline"
-                @click=${e => this.onclearall()}
-              ></mwc-button>
+              <md-elevated-button outlined dense @click=${e => this.onclearall()}
+                ><md-icon slot="icon">delete_outline</md-icon>${String(
+                  i18next.t('label.clear all')
+                )}</md-elevated-button
+              >
             </div>
             ${history.map(
               notification => html`
@@ -107,7 +107,7 @@ export class NotificationList extends connect(store)(localize(i18next)(LitElemen
         `
       : html`
           <div no-notifications @click=${e => window.history.back()}>
-            <mwc-icon>notifications_off</mwc-icon>${i18next.t('text.no notification available')}
+            <md-icon>notifications_off</md-icon>${i18next.t('text.no notification available')}
           </div>
         `
   }

package/client/viewparts/notification-sender.ts

@@ -1,11 +1,12 @@
-import '@material/mwc-formfield'
-import '@material/mwc-button'
-import '@material/mwc-checkbox'
+import '@material/web/button/elevated-button.js'
+import '@material/web/checkbox/checkbox.js'
+import '@material/web/textfield/filled-text-field.js'
 import '@operato/i18n/ox-i18n.js'
 
 import { css, html, LitElement } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
-import { auth } from '@things-factory/auth-base/dist-client'
+import { customElement } from 'lit/decorators.js'
+import { auth } from '@things-factory/auth-base/dist-client/auth.js'
+
 import { i18next, localize } from '@operato/i18n'
 import { ScrollbarStyles } from '@operato/styles'
 
@@ -18,8 +19,9 @@ export class NotificationSender extends localize(i18next)(LitElement) {
     css`
       :host {
         display: flex;
-        background-color: var(--main-section-background-color);
-        padding: var(--padding-wide);
+        padding: var(--spacing-large);
+        background-color: var(--md-sys-color-background);
+        color: var(--md-sys-color-on-background);
       }
 
       form {
@@ -27,8 +29,9 @@ export class NotificationSender extends localize(i18next)(LitElement) {
         display: flex;
         flex-direction: column;
       }
+
       [content] > * {
-        margin: var(--margin-default);
+        margin: var(--spacing-medium);
       }
 
       [content] {
@@ -43,13 +46,24 @@ export class NotificationSender extends localize(i18next)(LitElement) {
         display: flex;
         flex-direction: row-reverse;
       }
-      mwc-button {
-        margin-left: var(--padding-default);
+
+      [name='body'] {
+        resize: vertical;
+      }
+
+      md-elevated-button {
+        margin-left: var(--spacing-medium);
+      }
+
+      label {
+        display: flex;
+        gap: var(--spacing-medium);
+        align-items: center;
       }
 
       @media screen and (max-width: 480px) {
         :host {
-          padding: var(--padding-default);
+          padding: var(--spacing-medium);
         }
       }
     `
@@ -59,43 +73,45 @@ export class NotificationSender extends localize(i18next)(LitElement) {
     return html`
       <form>
         <div content>
-          <mwc-textfield
+          <md-filled-text-field
             type="text"
             name="receivers"
-            .label=${i18next.t('field.receivers')}
+            label=${String(i18next.t('field.receivers'))}
             placeholder=${auth.credential?.email}
             required
-            icon="account_circle"
-          ></mwc-textfield>
-          <mwc-textfield
-            type="text"
-            name="title"
-            .label=${i18next.t('field.title')}
-            required
-            icon="notifications_none"
-          ></mwc-textfield>
+            ><md-icon slot="leading-icon">account_circle</md-icon></md-filled-text-field
+          >
+          <md-filled-text-field type="text" name="title" label=${String(i18next.t('field.title'))} required
+            ><md-icon slot="leading-icon">notifications_none</md-icon></md-filled-text-field
+          >
 
-          <mwc-textfield
-            type="text"
-            name="image"
-            .label=${i18next.t('field.image')}
-            icon="insert_photo"
-          ></mwc-textfield>
-          <mwc-textfield type="text" name="url" .label=${i18next.t('field.url')} icon="link"></mwc-textfield>
-          <mwc-textarea type="text" name="body" .label=${i18next.t('field.body')} required rows="5"></mwc-textarea>
-          <mwc-formfield label="In-App Message">
-            <mwc-checkbox name="inappmsg"></mwc-checkbox>
-          </mwc-formfield>
+          <md-filled-text-field type="text" name="image" label=${String(i18next.t('field.image'))}
+            ><md-icon slot="leading-icon">insert_photo</md-icon></md-filled-text-field
+          >
+          <md-filled-text-field type="text" name="url" label=${String(i18next.t('field.url'))}
+            ><md-icon slot="leading-icon">link</md-icon></md-filled-text-field
+          >
+          <md-filled-text-field
+            type="textarea"
+            name="body"
+            label=${String(i18next.t('field.body'))}
+            required
+            rows="5"
+          ></md-filled-text-field>
+          <label>
+            <md-checkbox name="inappmsg"></md-checkbox>
+            In-App Message
+          </label>
         </div>
 
         <div buttons>
-          <mwc-button raised icon="send" @click=${e => this.ontest()}>
+          <md-elevated-button raised icon="send" @click=${e => this.ontest()}>
             <ox-i18n msgid="button.notification-send"> </ox-i18n>
-          </mwc-button>
+          </md-elevated-button>
 
-          <mwc-button type="reset" outlined @click=${e => this.onReset()}>
+          <md-elevated-button type="reset" outlined @click=${e => this.onReset()}>
             <ox-i18n msgid="button.reset"> </ox-i18n>
-          </mwc-button>
+          </md-elevated-button>
         </div>
       </form>
     `