@operato/help 2.0.0-alpha.13 → 2.0.0-alpha.131

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>
     `
   }