@operato/help 2.0.0-alpha.9 → 2.0.0-alpha.92

package/src/components/ox-title-with-help.ts

@@ -1,4 +1,4 @@
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
 
 import { css, html, LitElement } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
@@ -10,18 +10,20 @@ import { openHelp } from '../controller/help.js'
 @customElement('ox-title-with-help')
 export class TitleWithHelp extends localize(i18next)(LitElement) {
   static styles = css`
-    mwc-icon {
+    md-icon {
       position: relative;
       top: 4px;
       cursor: help;
       opacity: var(--help-icon-opacity);
       color: var(--help-icon-color);
-      font-size: var(--help-icon-size);
       line-height: 0;
-    }
-    mwc-icon:hover {
-      opacity: var(--help-icon-hover-opacity);
-      color: var(--help-icon-hover-color);
+
+      --md-icon-size: var(--help-icon-size);
+
+      &:hover {
+        opacity: var(--help-icon-hover-opacity);
+        color: var(--help-icon-hover-color);
+      }
     }
   `
 
@@ -32,6 +34,6 @@ export class TitleWithHelp extends localize(i18next)(LitElement) {
     const title = i18next.t(this.msgid)
     const topic = this.topic
 
-    return html` ${title} ${topic ? html`<mwc-icon @click=${() => openHelp(topic)}>help</mwc-icon>` : html``} `
+    return html` ${title} ${topic ? html`<md-icon @click=${() => openHelp(topic)}>help</md-icon>` : html``} `
   }
 }

package/src/help-style.ts

@@ -22,7 +22,7 @@ export const HelpStyle = css`
     font-size: var(--help-panel-h3-title-font-size);
     color: var(--help-panel-h3-title-color);
   }
-  mwc-icon {
+  md-icon {
     vertical-align: middle;
   }
 
@@ -92,9 +92,10 @@ export const HelpStyle = css`
     font-size: var(--fontsize-default);
     text-decoration: underline;
   }
-  a mwc-icon {
-    font-size: var(--help-panel-a-icon-size);
+  a md-icon {
     margin: 0;
+
+    --md-icon-size: var(--help-panel-a-icon-size);
   }
   a:hover {
     background-color: var(--opacity-light-dark-color);

package/src/pages/ox-help-home.ts

@@ -1,4 +1,4 @@
-import '@material/mwc-icon-button'
+import '@material/web/icon/icon.js'
 
 import { css, html } from 'lit'
 import { customElement, property, query } from 'lit/decorators.js'
@@ -20,6 +20,8 @@ class HelpHome extends connect(store)(localize(i18next)(PageView)) {
         flex-direction: column;
         overflow: hidden;
         position: relative;
+
+        --md-icon-size: 24px;
       }
 
       #navigation {
@@ -31,8 +33,8 @@ class HelpHome extends connect(store)(localize(i18next)(PageView)) {
         background-color: white;
       }
 
-      #navigation mwc-icon-button {
-        padding: var(--help-navigation-icon-padding);
+      #navigation md-icon {
+        padding: var(--help-navigation-icon-padding, var(--padding-default));
         border-right: var(--help-navigation-icon-border);
         cursor: pointer;
         color: var(--help-icon-color);
@@ -47,7 +49,7 @@ class HelpHome extends connect(store)(localize(i18next)(PageView)) {
       }
 
       #upward {
-        --mdc-icon-size: 26px;
+        --md-icon-size: 26px;
         position: absolute;
         bottom: var(--data-list-fab-position-vertical);
         right: var(--data-list-fab-position-horizontal);
@@ -81,19 +83,14 @@ class HelpHome extends connect(store)(localize(i18next)(PageView)) {
       <ox-markdown id="content" .src=${src} toc></ox-markdown>
 
       <div id="navigation">
-        <mwc-icon-button icon="home" @click=${() => navigate('help')} ?disabled=${
-      this.topic == 'index'
-    }></mwc-icon-button>
-        <mwc-icon-button icon="keyboard_arrow_left"  @click=${() => window.history.back()}></mwc-icon-button icon="">
-        <mwc-icon-button icon="keyboard_arrow_right"  @click=${() =>
-          window.history.forward()}></mwc-icon-button icon="">
-      </div>      
-
-      ${
-        this.showGotoTop
-          ? html` <mwc-icon id="upward" @click=${(e: Event) => this.gotoTop(e)}>arrow_upward</mwc-icon> `
-          : html``
-      }
+        <md-icon @click=${() => navigate('help')} ?disabled=${this.topic == 'index'}>home</md-icon>
+        <md-icon @click=${() => window.history.back()}>keyboard_arrow_left</md-icon>
+        <md-icon @click=${() => window.history.forward()}>keyboard_arrow_right</md-icon>
+      </div>
+
+      ${this.showGotoTop
+        ? html` <md-icon id="upward" @click=${(e: Event) => this.gotoTop(e)}>arrow_upward</md-icon> `
+        : html``}
     `
   }
 

package/src/viewparts/ox-help-panel.ts

@@ -1,4 +1,4 @@
-import '@material/mwc-icon-button'
+import '@material/web/icon/icon.js'
 import '@operato/markdown/ox-markdown.js'
 
 import { css, html, LitElement, PropertyValues } from 'lit'
@@ -31,6 +31,9 @@ class HelpPanel extends connect(store)(LitElement) {
         margin: 4px;
 
         overflow: hidden;
+
+        --md-icon-size: 24px;
+        font-variation-settings: 'FILL' 1;
       }
 
       :host(:focus) {
@@ -45,7 +48,9 @@ class HelpPanel extends connect(store)(LitElement) {
         border-bottom: var(--help-navigation-bottom);
         background-color: white;
       }
-      #navigation mwc-icon-button {
+
+      #navigation md-icon {
+        padding: var(--help-navigation-icon-padding, var(--padding-default));
         border-right: var(--help-navigation-icon-border);
         cursor: pointer;
         color: var(--help-icon-color);
@@ -64,7 +69,7 @@ class HelpPanel extends connect(store)(LitElement) {
       }
 
       #upward {
-        --mdc-icon-size: 26px;
+        --md-icon-size: 26px;
         position: absolute;
         bottom: var(--data-list-fab-position-vertical);
         right: var(--data-list-fab-position-horizontal);
@@ -99,28 +104,20 @@ class HelpPanel extends connect(store)(LitElement) {
 
     return html`
       <div id="navigation">
-        <mwc-icon-button
-          icon="home"
-          @click=${() => this.goHome()}
-          ?disabled=${this.history[0] === this.history[this.historyIndex]}
-        ></mwc-icon-button>
-        <mwc-icon-button
-          icon="keyboard_arrow_left"
-          @click=${() => this.historyBack()}
-          ?disabled=${this.historyIndex < 1}
-        ></mwc-icon-button>
-        <mwc-icon-button
-          icon="keyboard_arrow_right"
-          @click=${() => this.historyForward()}
-          ?disabled=${this.historyIndex >= this.history.length - 1}
-        ></mwc-icon-button>
-        <mwc-icon-button icon="open_in_new" @click=${() => navigate(`help?topic=${this.topic}`)}></mwc-icon-button>
-        <mwc-icon-button icon="close" id="close" @click=${() => closeOverlay('help')}></mwc-icon-button>
+        <md-icon @click=${() => this.goHome()} ?disabled=${this.history[0] === this.history[this.historyIndex]}>
+          home
+        </md-icon>
+        <md-icon @click=${() => this.historyBack()} ?disabled=${this.historyIndex < 1}> keyboard_arrow_left </md-icon>
+        <md-icon @click=${() => this.historyForward()} ?disabled=${this.historyIndex >= this.history.length - 1}>
+          keyboard_arrow_right
+        </md-icon>
+        <md-icon @click=${() => navigate(`help?topic=${this.topic}`)}> open_in_new </md-icon>
+        <md-icon id="close" @click=${() => closeOverlay('help')}> close </md-icon>
       </div>
 
       ${!this.showGotoTop
         ? html``
-        : html` <mwc-icon id="upward" @click=${(e: Event) => this.gotoTop(e)}>arrow_upward</mwc-icon> `}
+        : html` <md-icon id="upward" @click=${(e: Event) => this.gotoTop(e)}>arrow_upward</md-icon> `}
       <ox-markdown id="content" .src=${src}></ox-markdown>
     `
   }