Replace language editor buttons with paper-button
The font family for the options page has also been changed so the glyphs
used in the buttons appear better in Mac (and hopefully in other OSs
too).
Also, the node_modules is now excluded from the source-map-loader rule
in order to reduce the extension tarball size.
Bug: translateselectedtext:12
Change-Id: I399987a87c8d2de147d46ce1cf89f36b9e2e4a9d
diff --git a/src/options/elements/options-editor/languages-editor.ts b/src/options/elements/options-editor/languages-editor.ts
index 64c3f84..c48a3b6 100644
--- a/src/options/elements/options-editor/languages-editor.ts
+++ b/src/options/elements/options-editor/languages-editor.ts
@@ -1,3 +1,4 @@
+import '@polymer/paper-button/paper-button.js';
import './add-language-dialog';
import {css, html, LitElement} from 'lit';
@@ -48,25 +49,28 @@
#languages li .delete {
font-size: 18px;
color: red;
- padding-left: 2px;
- margin-left: 2px;
}
#languages li .movebtn {
- font-size: 16px;
- color: blue;
- padding: 0 2px;
- margin: 0 2px;
+ font-size: 15px;
+ }
+
+ #languages li .movebtn:not([disabled]) {
+ color: #1f649d;
}
#languages li :is(.delete, .movebtn) {
- cursor: pointer;
- text-align: center;
+ font-family: inherit!important;
+ min-width: 28px;
+ width: 28px;
+ min-height: 28px;
+ height: 28px;
+ padding: 4px;
+ margin: 0;
}
- #languages li .movebtn--disabled {
- color: gray;
- cursor: not-allowed;
+ #languages li paper-button:is(:hover, :focus) {
+ background: rgba(0, 0, 0, 0.06);
}
#languages_footer {
@@ -91,32 +95,32 @@
const moveBtns = [];
if (i != 0) {
moveBtns.push(html`
- <button
- class="notbtn movebtn"
+ <paper-button
+ class="movebtn"
@click=${() => this.swapLanguages(i, i - 1)}>
↑
- </button>
+ </paper-button>
`);
} else {
moveBtns.push(html`
- <button class="notbtn movebtn movebtn--disabled">
+ <paper-button class="movebtn" disabled>
↑
- </button>
+ </paper-button>
`);
}
if (i != languageCodes.length - 1) {
moveBtns.push(html`
- <button
- class="notbtn movebtn"
+ <paper-button
+ class="movebtn"
@click=${() => this.swapLanguages(i, i + 1)}>
↓
- </button>
+ </paper-button>
`);
} else {
moveBtns.push(html`
- <button class="notbtn movebtn movebtn--disabled">
+ <paper-button class="movebtn" disabled>
↓
- </button>
+ </paper-button>
`);
}
@@ -126,11 +130,11 @@
${isoLangs?.[lang]?.['name']} (${isoLangs?.[lang]?.nativeName})
</span>
${moveBtns}
- <button
- class="notbtn delete"
+ <paper-button
+ class="delete"
@click=${() => this.deleteLanguage(lang)}>
×
- </button>
+ </paper-button>
</li>
`;
});