@things-factory/notification 7.0.1-alpha.64 → 7.0.1-alpha.71

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'
 
@@ -14,7 +16,7 @@ export class NotificationBadge extends connect(store)(LitElement) {
         --badge-size: 14px;
       }
 
-      mwc-icon {
+      md-icon {
         display: block;
       }
 
@@ -49,7 +51,7 @@ export class NotificationBadge extends connect(store)(LitElement) {
 
   render() {
     var badge = this.badge || 0
-    return html` <mwc-icon data-badge=${badge} class="badge">notifications_none</mwc-icon> `
+    return html` <md-icon data-badge=${badge} class="badge">notifications_none</md-icon> `
   }
 
   stateChanged(state) {

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) {
@@ -40,7 +41,9 @@ export class NotificationItem extends LitElement {
         padding: var(--padding-default);
         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;
+        transition:
+          border-left 300ms ease-in-out,
+          padding-left 300ms ease-in-out;
         color: var(--scondary-color);
 
         --type-dot-size: 9px;
@@ -98,7 +101,7 @@ export class NotificationItem extends LitElement {
         border-radius: var(--border-radius);
         font-size: 0.8em;
         color: var(--theme-white-color);
-        --mdc-icon-size: 14px;
+        --md-icon-size: 14px;
       }
       span.more * {
         vertical-align: middle;
@@ -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,6 @@
+import '@material/web/icon/icon.js'
+import './notification-item'
+
 import { LitElement, html, css } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
 import { connect } from 'pwa-helpers'
@@ -5,9 +8,6 @@ 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 = [
@@ -61,7 +61,7 @@ export class NotificationList extends connect(store)(localize(i18next)(LitElemen
         font-weight: bold;
         color: var(--secondary-color);
       }
-      div mwc-icon {
+      div md-icon {
         display: block;
         opacity: 0.3;
       }
@@ -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>
         `
   }