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/credits.json5 b/src/options/credits.json5
index 56220e2..ac911a6 100644
--- a/src/options/credits.json5
+++ b/src/options/credits.json5
@@ -17,6 +17,12 @@
"license": "MIT License"
},
{
+ "name": "@polymer/paper-button",
+ "url": "https://github.com/PolymerElements/paper-button",
+ "author": "The Polymer Project Authors",
+ "license": "BSD-style License"
+ },
+ {
"name": "chrome-types",
"url": "https://github.com/GoogleChrome/chrome-types",
"author": "Google LLC",
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>
`;
});
diff --git a/src/options/options.ts b/src/options/options.ts
index ab51979..6c3004a 100644
--- a/src/options/options.ts
+++ b/src/options/options.ts
@@ -49,7 +49,9 @@
display: block;
padding: 10px;
margin: 14px 17px;
- font-family: "Roboto", "Arial", sans-serif!important;
+ font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI',
+ Helvetica, Arial, sans-serif, 'Apple Color Emoji',
+ 'Segoe UI Emoji', 'Segoe UI Symbol'!important;
}
#credits_container {