mirror of
https://github.com/loot/libloot.git
synced 2026-07-27 14:16:01 -07:00
Merge branch 'polymer-1.2' into dev
This commit is contained in:
Oliver Hamlet
@@ -26,3 +26,6 @@ rules:
|
||||
- props: false
|
||||
arrow-body-style: 1
|
||||
max-len: 1
|
||||
|
||||
plugins:
|
||||
- eslint-plugin-html
|
||||
|
||||
+28
-38
@@ -7,46 +7,36 @@
|
||||
"bower_components"
|
||||
],
|
||||
"dependencies": {
|
||||
"polymer": "Polymer/polymer#~0.5.0",
|
||||
"paper-icon-button": "Polymer/paper-icon-button#~0.5.0",
|
||||
"paper-dropdown-menu": "Polymer/paper-dropdown-menu#~0.5.0",
|
||||
"core-toolbar": "Polymer/core-toolbar#~0.5.0",
|
||||
"core-icons": "Polymer/core-icons#~0.5.0",
|
||||
"core-label": "Polymer/core-label#~0.5.0",
|
||||
"core-tooltip": "Polymer/core-tooltip#~0.5.0",
|
||||
"core-drawer-panel": "Polymer/core-drawer-panel#~0.5.0",
|
||||
"paper-input": "Polymer/paper-input#~0.5.0",
|
||||
"paper-tabs": "Polymer/paper-tabs#~0.5.0",
|
||||
"core-menu": "Polymer/core-menu#~0.5.0",
|
||||
"paper-checkbox": "Polymer/paper-checkbox#~0.5.0",
|
||||
"paper-dialog": "Polymer/paper-dialog#~0.5.0",
|
||||
"paper-menu-button": "Polymer/paper-menu-button#~0.5.0",
|
||||
"polymer": "Polymer/polymer#^1.1.0",
|
||||
"iron-dropdown": "loot/iron-dropdown#fix-position-inside-transformed-element",
|
||||
"iron-icons": "PolymerElements/iron-icons#^1.0.0",
|
||||
"iron-list": "loot/iron-list#patched-for-loot",
|
||||
"iron-pages": "PolymerElements/iron-pages#^1.0.0",
|
||||
"neon-animation": "PolymerElements/neon-animation#^1.0.0",
|
||||
"paper-button": "PolymerElements/paper-button#^1.0.0",
|
||||
"paper-checkbox": "PolymerElements/paper-checkbox#^1.0.0",
|
||||
"paper-dialog": "PolymerElements/paper-dialog#^1.0.0",
|
||||
"paper-dialog-scrollable": "PolymerElements/paper-dialog-scrollable#^1.0.0",
|
||||
"paper-drawer-panel": "PolymerElements/paper-drawer-panel#^1.0.0",
|
||||
"paper-dropdown-menu": "PolymerElements/paper-dropdown-menu#^1.0.0",
|
||||
"paper-icon-button": "PolymerElements/paper-icon-button#^1.0.0",
|
||||
"paper-input": "PolymerElements/paper-input#^1.0.0",
|
||||
"paper-item": "PolymerElements/paper-item#^1.0.0",
|
||||
"paper-listbox": "PolymerElements/paper-listbox#^1.1.1",
|
||||
"paper-menu": "PolymerElements/paper-menu#^1.0.0",
|
||||
"paper-menu-button": "PolymerElements/paper-menu-button#^1.0.0",
|
||||
"paper-progress": "PolymerElements/paper-progress#^1.0.0",
|
||||
"paper-tabs": "PolymerElements/paper-tabs#^1.0.0",
|
||||
"paper-toast": "PolymerElements/paper-toast#^1.0.0",
|
||||
"paper-toggle-button": "PolymerElements/paper-toggle-button#^1.0.0",
|
||||
"paper-toolbar": "PolymerElements/paper-toolbar#^1.0.0",
|
||||
"paper-tooltip": "PolymerElements/paper-tooltip#^1.0.0",
|
||||
"Jed": "SlexAxton/Jed#a9d03e1bbca9211a8b29a93a298a7ee9ddb353f0",
|
||||
"marked": "~0.3.2",
|
||||
"paper-progress": "Polymer/paper-progress#~0.5.0",
|
||||
"core-pages": "Polymer/core-pages#~0.5.1",
|
||||
"paper-toast": "Polymer/paper-toast#~0.5.1",
|
||||
"core-list": "WrinklyNinja/core-list#patched-for-loot",
|
||||
"core-dropdown": "WrinklyNinja/core-dropdown#null-dimensions-positions-fix",
|
||||
"jed-gettext-parser": "~1.0.0",
|
||||
"paper-toggle-button": "Polymer/paper-toggle-button#~0.5.4",
|
||||
"core-overlay": "WrinklyNinja/core-overlay#fix-focus-self-as-next"
|
||||
"jed-gettext-parser": "^1.0.0",
|
||||
"marked": "^0.3.2",
|
||||
"lodash": "^4.3.0"
|
||||
},
|
||||
"resolutions": {
|
||||
"polymer": "^0.5",
|
||||
"core-icons": "^0.5",
|
||||
"core-icon": "^0.5",
|
||||
"core-collapse": "^0.5",
|
||||
"core-focusable": "^0.5",
|
||||
"core-icon-button": "^0.5",
|
||||
"core-resizable": "^0.5",
|
||||
"core-iconset-svg": "^0.5",
|
||||
"core-dropdown": "null-dimensions-positions-fix",
|
||||
"core-transition": "^0.5",
|
||||
"core-overlay": "fix-focus-self-as-next",
|
||||
"webcomponentsjs": "^0.7.18",
|
||||
"core-iconset": "^0.5",
|
||||
"core-selection": "^0.5",
|
||||
"core-meta": "^0.5"
|
||||
"iron-dropdown": "fix-position-inside-transformed-element"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -203,7 +203,6 @@ var {
|
||||
<li><a href="#usage-editing">Editing Plugin Metadata</a>
|
||||
<li><a href="#usage-settings">Editing Settings</a>
|
||||
</ol>
|
||||
<li><a href="#themes">Themes</a>
|
||||
<li><a href="#contrib">Contributing & Support</a>
|
||||
<li><a href="#credits">Credits</a>
|
||||
<li><a href="#license">License</a>
|
||||
@@ -471,9 +470,6 @@ var {
|
||||
<tr><td>Install Path Registry Key<td>The registry key, in <code>HKEY_LOCAL_MACHINE</code>, that contains the install path of the game. This is used to obtain the install path if LOOT has no previous record of the game's install path, or LOOT's stored install path is invalid. Either this or an install path must be supplied.
|
||||
</table>
|
||||
|
||||
<h2 id="themes">Themes</h2>
|
||||
<p>LOOT's user interface has experimental support for the use of alternative and custom CSS themes. To use a theme, place its CSS file into the <code>resources/ui/css</code> folder inside LOOT's installation folder, and rename the file to <code>theme.css</code>. LOOT will then load this file when it launches. A dark user interface theme is provided with LOOT: to use it, rename <code>dark-theme.css</code> in the <code>resources/ui/css</code> folder to <code>theme.css</code>. Theme support is experimental because future updates to LOOT's user interface may break existing CSS selectors.</p>
|
||||
|
||||
|
||||
<h2 id="contrib">Contributing & Support</h2>
|
||||
<p>LOOT is very much a community project, and contributions from its users are very welcome, whether they be metadata, translations, code or anything else. The best way to contribute is to <a href="https://github.com/loot/loot.github.io/wiki/How-To-Contribute">make changes yourself</a> at GitHub! It's the fastest way to get changes you want applied, and you'll get your name automatically immortalised in our <a href="http://loot.github.io/credits/">credits</a>.
|
||||
|
||||
+3
-1
@@ -16,15 +16,17 @@
|
||||
"bower": "^1.7.1",
|
||||
"eslint": "^1.10.3",
|
||||
"eslint-config-airbnb": "^4.0.0",
|
||||
"eslint-plugin-html": "^1.3.0",
|
||||
"fs-extra": "^0.26.2",
|
||||
"grunt": "^0.4.5",
|
||||
"grunt-cli": "^0.1.13",
|
||||
"grunt-contrib-connect": "^0.11.2",
|
||||
"grunt-contrib-watch": "^0.6.1",
|
||||
"grunt-saucelabs": "^8.6.2",
|
||||
"mkdirp": "^0.5.1",
|
||||
"mocha": "^2.3.4",
|
||||
"should": "^8.0.1",
|
||||
"vulcanize": "^0.7.11"
|
||||
"vulcanize": "^1.14.5"
|
||||
},
|
||||
"scripts": {
|
||||
"test": "grunt test"
|
||||
|
||||
@@ -1,111 +0,0 @@
|
||||
/* Dark theme CSS overrides. */
|
||||
html,
|
||||
html /deep/ paper-item, html /deep/ core-menu > paper-item,
|
||||
html /deep/ paper-dropdown-menu::shadow #label {
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
html, body {
|
||||
background: black;
|
||||
}
|
||||
|
||||
html /deep/ paper-item[disabled],
|
||||
html /deep/ paper-item[disabled] > core-icon,
|
||||
html /deep/ paper-input-decorator::shadow .label-text,
|
||||
html /deep/ input::-webkit-input-placeholder,
|
||||
html /deep/ table[is=editable-table] paper-icon-button[disabled],
|
||||
html /deep/ loot-dropdown-menu::shadow paper-dropdown-menu[disabled]::shadow #label,
|
||||
html /deep/ loot-dropdown-menu::shadow paper-dropdown-menu::shadow #arrow {
|
||||
color: rgba(255, 255, 255, 0.3) !important;
|
||||
}
|
||||
|
||||
html /deep/ paper-item core-icon,
|
||||
html /deep/ paper-tabs::shadow .scroll-button > paper-icon-button,
|
||||
html /deep/ table[is=editable-table] paper-icon-button,
|
||||
html /deep/ loot-plugin-card::shadow core-tooltip:not(#activeTick) > core-icon,
|
||||
html /deep/ loot-plugin-card::shadow #conflictsLabel > core-icon,
|
||||
html /deep/ loot-plugin-item::shadow #secondary,
|
||||
html /deep/ loot-plugin-editor::shadow core-tooltip:not(#activeTick) > core-icon {
|
||||
color: rgba(255, 255, 255, 0.7) !important;
|
||||
}
|
||||
|
||||
html /deep/ paper-input-decorator::shadow .underline .unfocused-underline,
|
||||
.divider {
|
||||
background-color: rgba(255, 255, 255, 0.12) !important;
|
||||
}
|
||||
|
||||
html /deep/ paper-input-decorator[disabled]::shadow .underline,
|
||||
html /deep/ table th,
|
||||
html /deep/ paper-dropdown-menu {
|
||||
border-bottom-color: rgba(255, 255, 255, 0.12) !important;
|
||||
}
|
||||
|
||||
html /deep/ paper-checkbox::shadow #checkbox.checked {
|
||||
border-color: #1A237E !important;
|
||||
}
|
||||
|
||||
html /deep/ paper-toggle-button::shadow [checked] .toggle-bar {
|
||||
background-color: rgba(26, 35, 126, 0.5) !important;
|
||||
}
|
||||
|
||||
html /deep/ paper-toggle-button::shadow [checked] .toggle-button,
|
||||
html /deep/ paper-checkbox::shadow #checkbox.checked {
|
||||
background-color: #1A237E !important;
|
||||
}
|
||||
|
||||
html /deep/ paper-toggle-button::shadow [checked] .toggle-ink {
|
||||
color: #1A237E !important;
|
||||
}
|
||||
|
||||
/* Dark dropdown menus. */
|
||||
html /deep/ paper-dropdown::shadow #background,
|
||||
loot-dialog,
|
||||
loot-message-dialog,
|
||||
div[drawer],
|
||||
#summary,
|
||||
html /deep/ loot-plugin-card::shadow #wrapper,
|
||||
html /deep/ loot-plugin-editor::shadow core-selector > * {
|
||||
background: #424242 !important;
|
||||
}
|
||||
|
||||
/* Dark dialogs. */
|
||||
loot-dialog,
|
||||
loot-message-dialog {
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
/* Dark progress bar background. */
|
||||
paper-progress::shadow #progressContainer {
|
||||
background-color: #303030 !important;
|
||||
}
|
||||
|
||||
core-toolbar,
|
||||
div[drawer] > div:first-child,
|
||||
html /deep/ loot-search::shadow core-toolbar,
|
||||
html /deep/ loot-plugin-editor {
|
||||
background: #212121 !important;
|
||||
}
|
||||
|
||||
#main {
|
||||
background: #303030 !important;
|
||||
}
|
||||
|
||||
li.error > p,
|
||||
li.warn > p {
|
||||
color: black !important;
|
||||
}
|
||||
|
||||
.version {
|
||||
color: #78909C !important;
|
||||
}
|
||||
.crc {
|
||||
color: #8D6E63 !important;
|
||||
}
|
||||
|
||||
html /deep/ loot-plugin-card.search-result::shadow #editor {
|
||||
box-shadow: inset 4px 0 #1A237E !important;
|
||||
}
|
||||
|
||||
html /deep/ loot-plugin-editor::shadow core-selector > * {
|
||||
border-bottom: 4px solid #212121 !important;
|
||||
}
|
||||
@@ -115,10 +115,6 @@ function createAppArchive(rootPath, releasePath, tempPath, destPath) {
|
||||
path.join(releasePath, 'resources', 'ui', 'index.html'),
|
||||
path.join(tempPath, 'resources', 'ui', 'index.html')
|
||||
);
|
||||
fs.copySync(
|
||||
path.join(rootPath, 'resources', 'ui', 'css', 'dark-theme.css'),
|
||||
path.join(tempPath, 'resources', 'ui', 'css', 'dark-theme.css')
|
||||
);
|
||||
fs.copySync(
|
||||
path.join(rootPath, 'resources', 'ui', 'fonts'),
|
||||
path.join(tempPath, 'resources', 'ui', 'fonts')
|
||||
|
||||
@@ -108,8 +108,6 @@ DestDir: "{app}\docs\images"; Flags: ignoreversion
|
||||
|
||||
Source: "{#buildir}\Release\resources\ui\index.html"; \
|
||||
DestDir: "{app}\resources\ui"; Flags: ignoreversion
|
||||
Source: "resources\ui\css\dark-theme.css"; \
|
||||
DestDir: "{app}\resources\ui\css"; Flags: ignoreversion
|
||||
Source: "resources\ui\fonts\*"; \
|
||||
DestDir: "{app}\resources\ui\fonts"; Flags: ignoreversion
|
||||
|
||||
|
||||
+58
-21
@@ -5,16 +5,27 @@
|
||||
const path = require('path');
|
||||
const fs = require('fs');
|
||||
const helpers = require('./helpers');
|
||||
const vulcanize = require('vulcanize');
|
||||
const Vulcanize = require('vulcanize');
|
||||
const mkdirp = require('mkdirp');
|
||||
|
||||
// Initialise from command line parameters.
|
||||
let rootPath = '.';
|
||||
if (process.argv.length > 2) {
|
||||
let buildType = 'ui';
|
||||
if (process.argv.length > 3) {
|
||||
rootPath = process.argv[2];
|
||||
buildType = process.argv[3];
|
||||
} else if (process.argv.length > 2) {
|
||||
rootPath = process.argv[2];
|
||||
}
|
||||
|
||||
const vulcanize = new Vulcanize({
|
||||
inlineScripts: true,
|
||||
inlineCss: true,
|
||||
});
|
||||
|
||||
function mkdir(dir) {
|
||||
try {
|
||||
fs.mkdirSync(dir);
|
||||
mkdirp.sync(dir);
|
||||
} catch (e) {
|
||||
if (e.code !== 'EEXIST') {
|
||||
console.log(e);
|
||||
@@ -22,29 +33,55 @@ function mkdir(dir) {
|
||||
}
|
||||
}
|
||||
|
||||
function runVulcanize(err) {
|
||||
if (err) {
|
||||
console.error(err);
|
||||
process.exit(1);
|
||||
}
|
||||
vulcanize.processDocument();
|
||||
function vulcanizeFile(inputPath, outputPath) {
|
||||
// Make sure output directory exists first.
|
||||
mkdir(path.dirname(outputPath));
|
||||
|
||||
vulcanize.process(inputPath, (err, inlinedHtml) => {
|
||||
if (err) {
|
||||
console.error(err);
|
||||
process.exit(1);
|
||||
}
|
||||
|
||||
fs.writeFileSync(outputPath, inlinedHtml);
|
||||
});
|
||||
}
|
||||
|
||||
function vulcanizeRelease(releasePath) {
|
||||
const inputPath = path.join(rootPath, 'src', 'gui', 'html', 'index.html');
|
||||
const outputPath = path.join(releasePath.path, 'resources', 'ui', 'index.html');
|
||||
|
||||
// Make sure output directory exists first.
|
||||
mkdir(path.dirname(outputPath));
|
||||
|
||||
vulcanize.setOptions({
|
||||
inline: true,
|
||||
excludes: {
|
||||
styles: ['css/theme.css'],
|
||||
},
|
||||
output: outputPath,
|
||||
input: inputPath,
|
||||
}, runVulcanize);
|
||||
vulcanizeFile(inputPath, outputPath);
|
||||
}
|
||||
|
||||
helpers.getAppReleasePaths(rootPath).forEach(vulcanizeRelease);
|
||||
function vulcanizeTests(releasePath) {
|
||||
const inputPath = path.join(rootPath, 'src', 'tests', 'gui', 'html', 'elements');
|
||||
const outputPath = path.join(releasePath.path, 'html_tests', 'elements');
|
||||
|
||||
const tests = [
|
||||
'test_editable-table.html',
|
||||
'test_loot-custom-icons.html',
|
||||
'test_loot-dropdown-menu.html',
|
||||
'test_loot-menu.html',
|
||||
'test_loot-message-dialog.html',
|
||||
'test_loot-plugin-card.html',
|
||||
'test_loot-plugin-editor.html',
|
||||
'test_loot-plugin-item.html',
|
||||
'test_loot-search-toolbar.html',
|
||||
];
|
||||
|
||||
tests.forEach((test) => {
|
||||
vulcanizeFile(path.join(inputPath, test), path.join(outputPath, test));
|
||||
});
|
||||
}
|
||||
|
||||
// Run the appropriate build(s).
|
||||
const releasePaths = helpers.getAppReleasePaths(rootPath);
|
||||
|
||||
if (buildType === 'ui' || buildType === 'all') {
|
||||
releasePaths.forEach(vulcanizeRelease);
|
||||
}
|
||||
|
||||
if (buildType === 'tests' || buildType === 'all') {
|
||||
releasePaths.forEach(vulcanizeTests);
|
||||
}
|
||||
|
||||
@@ -1,110 +0,0 @@
|
||||
/* This file contains the CSS overrides for Polymer elements necessary for them
|
||||
to better match the Material Design spec. */
|
||||
|
||||
/* core-tooltip */
|
||||
html /deep/ core-tooltip::shadow .core-tooltip {
|
||||
font-size: 0.714rem;
|
||||
font-family: Roboto, sans-serif;
|
||||
font-weight: 500;
|
||||
background-color: rgba(0, 0, 0, 0.9);
|
||||
}
|
||||
|
||||
/* paper-button */
|
||||
html /deep/ paper-button {
|
||||
min-width: 88px;
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
margin: 6px 4px;
|
||||
}
|
||||
html /deep/ paper-button::shadow .button-content {
|
||||
padding: 0 8px;
|
||||
}
|
||||
html /deep/ paper-button::shadow .button-content ::content a {
|
||||
margin: 0 -8px;
|
||||
padding: 0 8px;
|
||||
-ms-flex: 1 1 auto;
|
||||
}
|
||||
|
||||
/* paper-icon-button */
|
||||
html /deep/ paper-icon-button[disabled] {
|
||||
color: rgba(255, 255, 255, 0.30);
|
||||
}
|
||||
|
||||
/* paper-item */
|
||||
html /deep/ paper-item, html /deep/ core-menu > paper-item {
|
||||
color: rgba(0, 0, 0, 0.87);
|
||||
height: 48px;
|
||||
line-height: 48px;
|
||||
}
|
||||
html /deep/ paper-item[disabled] {
|
||||
color: rgba(0, 0, 0, 0.26);
|
||||
}
|
||||
html /deep/ paper-item core-icon {
|
||||
margin-right: 32px;
|
||||
color: rgba(0, 0, 0, 0.54);
|
||||
}
|
||||
html /deep/ paper-item[disabled] > core-icon {
|
||||
color: rgba(0, 0, 0, 0.26);
|
||||
}
|
||||
html /deep/ paper-item::shadow .button-content {
|
||||
padding: 0 16px;
|
||||
}
|
||||
html /deep/ paper-item::shadow .button-content ::content *:not(core-tooltip) {
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
html /deep/ paper-item::shadow .button-content ::content a {
|
||||
margin: 0 -16px;
|
||||
padding: 0 16px;
|
||||
-ms-flex: 1 1 auto;
|
||||
}
|
||||
|
||||
/* paper-input-decorator & input */
|
||||
html /deep/ paper-input-decorator {
|
||||
margin: 0 4px;
|
||||
}
|
||||
html /deep/ paper-input-decorator::shadow .underline .unfocused-underline {
|
||||
background-color: rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
html /deep/ paper-input-decorator[disabled]::shadow .underline {
|
||||
border-bottom-color: rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
html /deep/ paper-input-decorator::shadow .label-text,
|
||||
html /deep/ input::-webkit-input-placeholder {
|
||||
color: rgba(0, 0, 0, 0.26);
|
||||
}
|
||||
html /deep/ ::-moz-placeholder {
|
||||
opacity: 1 !important;
|
||||
color: rgba(0, 0, 0, 0.26) !important;
|
||||
}
|
||||
html /deep/ :-ms-input-placeholder {
|
||||
color: rgba(0, 0, 0, 0.26) !important;
|
||||
}
|
||||
html /deep/ input {
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
/* paper-dropdown */
|
||||
html /deep/ paper-dropdown > core-menu {
|
||||
margin: 8px 0;
|
||||
}
|
||||
html /deep/ paper-dropdown .core-selected {
|
||||
background-color: inherit;
|
||||
}
|
||||
|
||||
/* paper-tabs */
|
||||
html /deep/ paper-tabs::shadow .scroll-button > paper-icon-button {
|
||||
vertical-align: middle;
|
||||
color: rgba(0, 0, 0, 0.54);
|
||||
}
|
||||
|
||||
/* paper-tab */
|
||||
html /deep/ paper-tab::shadow .tab-content {
|
||||
line-height: 48px;
|
||||
}
|
||||
|
||||
/* core-drawer-panel */
|
||||
core-drawer-panel::shadow .narrow-layout #drawer {
|
||||
width: calc(100vw - 56px) !important;
|
||||
}
|
||||
@@ -1,92 +0,0 @@
|
||||
/* These styles override Polymer's own internal styling for certain elements to
|
||||
suit LOOT's needs. */
|
||||
|
||||
/* Transition icon button colour over same time period that plugin cards flip. */
|
||||
paper-icon-button[disabled] {
|
||||
transition: color 0.6s;
|
||||
}
|
||||
/* This override change the positioning of the progress dialog to adapt to content changes. */
|
||||
#progressDialog {
|
||||
position: inherit !important;
|
||||
margin: 0 auto;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
/* This makes checkboxes have the same padding as icons in lists. */
|
||||
html /deep/ core-menu paper-checkbox::shadow #checkboxLabel {
|
||||
padding-left: 32px;
|
||||
}
|
||||
/* Set the sidebar checkboxes to have balanced padding on either side. 32px
|
||||
makes the label just seem too far away. */
|
||||
#filters paper-checkbox::shadow #checkboxLabel {
|
||||
padding-left: 16px;
|
||||
}
|
||||
/* Set the underline colour of focussed paper inputs. */
|
||||
html /deep/ paper-input-decorator::shadow .underline .focused-underline {
|
||||
/* line color when the input is focused */
|
||||
background-color: #64B5F6;
|
||||
}
|
||||
/* Set the tab colours. */
|
||||
html /deep/ paper-tabs::shadow #selectionBar {
|
||||
background-color: #64B5F6;
|
||||
}
|
||||
html /deep/ paper-tab::shadow #ink {
|
||||
color: #64B5F6;
|
||||
}
|
||||
/* Set the paper tab scroll buttons so they don't cause the cursor to display as
|
||||
as a pointer when they are disabled. */
|
||||
html /deep/ paper-tabs::shadow .scroll-button .hidden {
|
||||
pointer-events: none;
|
||||
}
|
||||
/* Set the drawer z-index so that it doesn't appear below plugin cards. */
|
||||
core-drawer-panel::shadow #drawer {
|
||||
/* max-width disabled because the panel doesn't shift over when the max
|
||||
is reached, due to the percentage drawer width, and setting it to a
|
||||
constant 400px is too wide in many window sizes. */
|
||||
/*max-width: 400px;*/
|
||||
z-index: 1;
|
||||
}
|
||||
/* Align dropdown label text with the descriptive text beside it. */
|
||||
#settingsDialog loot-dropdown-menu::shadow paper-dropdown-menu {
|
||||
padding-top: 4px;
|
||||
}
|
||||
/* Add a transition to the core-tooltip tooltips. */
|
||||
html /deep/ core-tooltip::shadow .core-tooltip {
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s, visibility 0s 0.3s;
|
||||
}
|
||||
html /deep/ core-tooltip:hover:not([disabled])::shadow .core-tooltip {
|
||||
opacity: 1;
|
||||
transition-delay: 0s;
|
||||
}
|
||||
|
||||
/* The max-height doesn't allow for expansion into newly-created scroll space. */
|
||||
#main /deep/ paper-dropdown::shadow #scroller {
|
||||
max-height: none !important;
|
||||
}
|
||||
|
||||
/* Don't center the "Jump to General Information" or active plugin tooltips, as
|
||||
they can get cut off by the sidebar. */
|
||||
#drawerToggle + core-tooltip::shadow #tooltip,
|
||||
loot-plugin-card /deep/ #activeTick::shadow #tooltip {
|
||||
left: inherit !important;
|
||||
}
|
||||
|
||||
/* Style the paper-checkbox background. */
|
||||
html /deep/ paper-checkbox::shadow #checkbox.checked {
|
||||
border-color: #3F51B5;
|
||||
background-color: #3F51B5;
|
||||
}
|
||||
|
||||
/* Style the paper-toggle-button colours. */
|
||||
html /deep/ paper-toggle-button::shadow [checked] .toggle-bar {
|
||||
background-color: rgba(63, 81, 181, 0.5);
|
||||
}
|
||||
html /deep/ paper-toggle-button::shadow [checked] .toggle-button {
|
||||
background-color: #3F51B5;
|
||||
}
|
||||
html /deep/ paper-toggle-button::shadow [checked] .toggle-ink {
|
||||
color: #3F51B5;
|
||||
}
|
||||
+29
-60
@@ -23,9 +23,6 @@
|
||||
*/
|
||||
|
||||
/* Misc */
|
||||
html /deep/ paper-button[autofocus] {
|
||||
color: #64B5F6;
|
||||
}
|
||||
a {
|
||||
color: #2196F3;
|
||||
text-decoration: none;
|
||||
@@ -38,11 +35,6 @@ tt, code, kbd, samp {
|
||||
}
|
||||
|
||||
/* App bar */
|
||||
core-toolbar, div[drawer] > div:first-child {
|
||||
background: #3F51B5;
|
||||
color: white;
|
||||
height: 56px;
|
||||
}
|
||||
#mainToolbar,
|
||||
#searchBar {
|
||||
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
|
||||
@@ -52,13 +44,6 @@ core-toolbar, div[drawer] > div:first-child {
|
||||
#mainToolbar.search {
|
||||
display: none;
|
||||
}
|
||||
#gameMenu {
|
||||
margin-top: -0.5em;
|
||||
}
|
||||
#drawerToggle, #applySortButton, #cancelSortButton {
|
||||
position: relative;
|
||||
top: -3px;
|
||||
}
|
||||
#applySortButton {
|
||||
color: #2196F3;
|
||||
background-color: white;
|
||||
@@ -71,55 +56,44 @@ div[drawer] {
|
||||
div[drawer] > * {
|
||||
border-right: 1px rgba(0, 0, 0, 0.12) solid;
|
||||
}
|
||||
paper-item > a {
|
||||
-webkit-user-drag: none;
|
||||
color: inherit;
|
||||
div[drawer] > iron-pages {
|
||||
overflow: auto;
|
||||
}
|
||||
paper-item > a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
#cardsNav[data-editModeToggle] > loot-plugin-item {
|
||||
transition: transform 0.6s;
|
||||
}
|
||||
#cardsNav > loot-plugin-item {
|
||||
margin: 8px 0;
|
||||
}
|
||||
#contentFilter {
|
||||
display: block;
|
||||
line-height: initial;
|
||||
#cardsNav {
|
||||
padding-top: 8px;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
#filters {
|
||||
padding: 8px 0;
|
||||
overflow: hidden;
|
||||
overflow: auto;
|
||||
}
|
||||
#filters > paper-checkbox,
|
||||
#filters > core-tooltip,
|
||||
#filters > div:not(.divider) {
|
||||
#hiddenPlugins,
|
||||
#hiddenMessages {
|
||||
padding: 0 16px;
|
||||
height: 48px;
|
||||
line-height: 48px;
|
||||
}
|
||||
#filters > paper-checkbox,
|
||||
#filters > core-tooltip {
|
||||
display: block;
|
||||
#contentFilter {
|
||||
padding: 0 16px;
|
||||
height: 48px;
|
||||
}
|
||||
|
||||
/* Panel */
|
||||
#main {
|
||||
background: #EEE;
|
||||
background-color: #fafafa;
|
||||
overflow: auto;
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
}
|
||||
#main > core-list {
|
||||
#main > iron-list {
|
||||
transform-style: preserve-3d;
|
||||
margin-bottom: 170px;
|
||||
}
|
||||
#summary {
|
||||
background: white;
|
||||
background-color: white;
|
||||
margin: 8px;
|
||||
padding: 16px;
|
||||
border-radius: 2px;
|
||||
box-shadow: rgba(0, 0, 0, 0.0980392) 0px 2px 4px, rgba(0, 0, 0, 0.0980392) 0px 0px 3px;
|
||||
}
|
||||
#summary > h1 {
|
||||
margin: -16px 0 0;
|
||||
@@ -132,6 +106,7 @@ paper-item > a:hover {
|
||||
margin-right: 32px;
|
||||
width: auto;
|
||||
background-color: inherit;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
#summary > table:last-child {
|
||||
margin-right: 0;
|
||||
@@ -167,28 +142,25 @@ li.warn {
|
||||
|
||||
/* Dialogs */
|
||||
#about {
|
||||
max-width: 580px;
|
||||
max-width: 550px;
|
||||
}
|
||||
#about blockquote {
|
||||
white-space: pre-line;
|
||||
}
|
||||
#settingsDialog > div > * {
|
||||
#settingsDialog > paper-dialog-scrollable > div > * {
|
||||
margin: 16px;
|
||||
}
|
||||
#settingsDialog > div > div > :first-child {
|
||||
#settingsDialog > paper-dialog-scrollable > div > div > :first-child {
|
||||
margin-right: 16px;
|
||||
margin-left: 0;
|
||||
}
|
||||
#settingsDialog > div > :last-child {
|
||||
#settingsDialog > paper-dialog-scrollable > div > :last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
#settingsDialog core-label [for]:last-child {
|
||||
margin-left: 16px;
|
||||
}
|
||||
#gameTable {
|
||||
margin: 32px 0 0;
|
||||
}
|
||||
paper-progress {
|
||||
#progressDialog paper-progress {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@@ -199,16 +171,13 @@ paper-progress {
|
||||
margin-top: -1px;
|
||||
}
|
||||
|
||||
/* Tables */
|
||||
html /deep/ table {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
/* Hack for the squashing of icons when text is not wrapped, due to the use of
|
||||
flex display. See <https://github.com/PolymerElements/paper-item/issues/71> */
|
||||
paper-icon-item iron-icon {
|
||||
margin-right: 32px;
|
||||
}
|
||||
html /deep/ table td, html /deep/ table th {
|
||||
vertical-align: top;
|
||||
text-align: left;
|
||||
padding: 8px 16px;
|
||||
}
|
||||
html /deep/ table th {
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
|
||||
|
||||
/* Set icons to use Material Design colouring. */
|
||||
iron-icon {
|
||||
color: rgba(0, 0, 0, 0.54);
|
||||
}
|
||||
|
||||
@@ -125,80 +125,9 @@ html {
|
||||
font-weight: 400;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
.display4 {
|
||||
font-weight: 300;
|
||||
font-size: 8rem;
|
||||
color: rgba(0, 0, 0, 0.54);
|
||||
/*letter-spacing: -0.01em;*/
|
||||
}
|
||||
.display3 {
|
||||
h1 {
|
||||
font-weight: 400;
|
||||
font-size: 4rem;
|
||||
color: rgba(0, 0, 0, 0.54);
|
||||
/*letter-spacing: -0.005em;*/
|
||||
}
|
||||
.display2, h1 {
|
||||
font-weight: 400;
|
||||
font-size: 3.214rem;
|
||||
color: rgba(0, 0, 0, 0.54);
|
||||
line-height: 1.067;
|
||||
}
|
||||
.display1 {
|
||||
font-weight: 400;
|
||||
font-size: 2.429rem;
|
||||
color: rgba(0, 0, 0, 0.54);
|
||||
line-height: 1.176;
|
||||
}
|
||||
.headline, h2 {
|
||||
font-weight: 400;
|
||||
font-size: 1.714rem;
|
||||
line-height: 1.333;
|
||||
}
|
||||
.title, h3 {
|
||||
font-weight: 500;
|
||||
font-size: 1.429rem;
|
||||
/*letter-spacing: 0.005em;*/
|
||||
}
|
||||
.subhead, h4,
|
||||
#summary > h1,
|
||||
html /deep/ paper-item {
|
||||
font-weight: 400;
|
||||
#summary > h1 {
|
||||
font-size: 1.143rem;
|
||||
line-height: 1.75;
|
||||
/* Alternate line height: */
|
||||
/* line-height: 1.5; */
|
||||
/*letter-spacing: 0.01em;*/
|
||||
}
|
||||
.body2,
|
||||
html /deep/ paper-menu-button paper-item,
|
||||
html /deep/ paper-menu-button paper-checkbox {
|
||||
font-weight: 500;
|
||||
font-size: 1rem;
|
||||
line-height: 1.714;
|
||||
/*letter-spacing: 0.01em;*/
|
||||
}
|
||||
.body1,
|
||||
html /deep/ paper-checkbox,
|
||||
paper-toast {
|
||||
font-weight: 400;
|
||||
font-size: 1rem;
|
||||
line-height: 1.429;
|
||||
/*letter-spacing: 0.01em;*/
|
||||
}
|
||||
.caption {
|
||||
font-weight: 400;
|
||||
font-size: 0.857rem;
|
||||
color: rgba(0, 0, 0, 0.54);
|
||||
/*letter-spacing: 0.02em;*/
|
||||
}
|
||||
.button,
|
||||
html /deep/ paper-tab,
|
||||
html /deep/ paper-button {
|
||||
font-weight: 500;
|
||||
font-size: 1rem;
|
||||
text-transform: uppercase;
|
||||
/*letter-spacing: 0.01em;*/
|
||||
}
|
||||
.display4.dark, .display3.dark, .display2.dark, .display1.dark, .caption.dark {
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,15 +1,16 @@
|
||||
<link rel="import" href="../../../../bower_components/core-iconset-svg/core-iconset-svg.html">
|
||||
<link rel="import" href="../../../../bower_components/polymer/polymer.html">
|
||||
<link rel="import" href="../../../../bower_components/iron-iconset-svg/iron-iconset-svg.html">
|
||||
|
||||
<core-iconset-svg id="loot-custom-icons">
|
||||
<svg viewBox="0 0 24 24" height="100%" width="100%" preserveAspectRatio="xMidYMid meet" fit style="pointer-events: none; display: block;">
|
||||
<defs>
|
||||
<g id="m-circle">
|
||||
<circle cx="12" cy="12" r="10"/>
|
||||
<path d="m 8,17 0,-9 0.4,0 3.2,5 0.8,0 3.2,-5 0.4,0 0,9" style="stroke: white; stroke-width: 2; fill: none;" />
|
||||
</g>
|
||||
<g id="crown">
|
||||
<path d="m 5,16 -1,-9 5,3 3,-7 3,7 5,-3 -1,9 z m 0,1 0,2 14,0 0,-2 z" />
|
||||
</g>
|
||||
</defs>
|
||||
</svg>
|
||||
</core-iconset-svg>
|
||||
<iron-iconset-svg name="loot-custom-icons">
|
||||
<svg viewBox="0 0 24 24" height="100%" width="100%" preserveAspectRatio="xMidYMid meet" fit style="pointer-events: none; display: block;">
|
||||
<defs>
|
||||
<g id="m-circle">
|
||||
<circle cx="12" cy="12" r="10"/>
|
||||
<path d="m 8,17 0,-9 0.4,0 3.2,5 0.8,0 3.2,-5 0.4,0 0,9" style="stroke: white; stroke-width: 2; fill: none;" />
|
||||
</g>
|
||||
<g id="crown">
|
||||
<path d="m 5,16 -1,-9 5,3 3,-7 3,7 5,-3 -1,9 z m 0,1 0,2 14,0 0,-2 z" />
|
||||
</g>
|
||||
</defs>
|
||||
</svg>
|
||||
</iron-iconset-svg>
|
||||
|
||||
@@ -1,56 +0,0 @@
|
||||
<!--
|
||||
<loot-dialog> is an extension of <paper-dialog> that gives it a <dialog>-like API.
|
||||
|
||||
Still missing compared to <dialog> are:
|
||||
|
||||
1. No `close` or `cancel` events.
|
||||
2. No ::backdrop pseudo-element.
|
||||
3. No `form[method="dialog"]`.
|
||||
-->
|
||||
|
||||
<link rel="import" href="../../../../bower_components/polymer/polymer.html">
|
||||
<link rel="import" href="../../../../bower_components/paper-dialog/paper-action-dialog.html">
|
||||
|
||||
<polymer-element name="loot-dialog" extends="paper-action-dialog" transition="core-transition-center" layered="false">
|
||||
<template>
|
||||
<style>
|
||||
:host {
|
||||
margin: 24px 40px;
|
||||
}
|
||||
:host::shadow #actions {
|
||||
padding: 16px 16px 8px;
|
||||
/* This is and the div CSS would be better done by moving the div before
|
||||
both content elements, this is a hack to do the same without editing
|
||||
the HTML. */
|
||||
justify-content: flex-end;
|
||||
}
|
||||
:host::shadow #actions > div {
|
||||
flex: none;
|
||||
}
|
||||
:host::shadow h1 {
|
||||
font-weight: 500;
|
||||
font-size: 1.429rem;
|
||||
}
|
||||
</style>
|
||||
<shadow></shadow>
|
||||
</template>
|
||||
<script>
|
||||
Polymer({
|
||||
show: function() {
|
||||
this.backdrop = false;
|
||||
this.autoCloseDisabled = false;
|
||||
this.setAttribute(opened, true);
|
||||
},
|
||||
showModal: function() {
|
||||
this.backdrop = true;
|
||||
this.autoCloseDisabled = true;
|
||||
this.open();
|
||||
this.setAttribute('opened', true);
|
||||
},
|
||||
close: function(retVal) {
|
||||
this.setAttribute('returnValue', retVal);
|
||||
this.super();
|
||||
},
|
||||
});
|
||||
</script>
|
||||
</polymer-element>
|
||||
@@ -8,58 +8,58 @@ it a <select>-like API. This means:
|
||||
-->
|
||||
|
||||
<link rel="import" href="../../../../bower_components/polymer/polymer.html">
|
||||
<link rel="import" href="../../../../bower_components/paper-dropdown/paper-dropdown.html">
|
||||
|
||||
<link rel="import" href="../../../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
|
||||
<link rel="import" href="../../../../bower_components/core-menu/core-menu.html">
|
||||
<link rel="import" href="../../../../bower_components/paper-listbox/paper-listbox.html">
|
||||
|
||||
<polymer-element name="loot-dropdown-menu" attributes="disabled halign value">
|
||||
<template>
|
||||
<style>
|
||||
/* Material Design overrides */
|
||||
paper-dropdown-menu {
|
||||
margin-left: 4px;
|
||||
margin-right: 4px;
|
||||
border-bottom-color: rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
paper-dropdown-menu::shadow #label {
|
||||
color: rgba(0, 0, 0, 0.87);
|
||||
}
|
||||
paper-dropdown-menu[disabled]::shadow #label,
|
||||
paper-dropdown-menu::shadow #arrow {
|
||||
color: rgba(0, 0, 0, 0.26);
|
||||
}
|
||||
<dom-module id="loot-dropdown-menu">
|
||||
<template>
|
||||
<style>
|
||||
paper-dropdown-menu {
|
||||
margin-left: 4px;
|
||||
margin-right: 4px;
|
||||
|
||||
/* LOOT-specific overrides */
|
||||
::content .core-selected {
|
||||
color: #2196F3;
|
||||
background-color: inherit;
|
||||
}
|
||||
:host(.dark) paper-dropdown-menu {
|
||||
border-bottom-color: rgba(255, 255, 255, 0.12);
|
||||
}
|
||||
paper-dropdown-menu[disabled]::shadow #label {
|
||||
transition: color 0.6s;
|
||||
}
|
||||
:host(.dark) paper-dropdown-menu::shadow #label {
|
||||
color: white;
|
||||
}
|
||||
:host(.dark) paper-dropdown-menu[disabled]::shadow #label,
|
||||
:host(.dark) paper-dropdown-menu::shadow #arrow {
|
||||
color: rgba(255, 255, 255, 0.30);
|
||||
}
|
||||
</style>
|
||||
<paper-dropdown-menu disabled?="{{disabled}}">
|
||||
<paper-dropdown class="dropdown" halign="{{halign}}">
|
||||
<core-menu id="menu" class="menu" valueattr="value" selected="{{value}}">
|
||||
<content></content>
|
||||
</core-menu>
|
||||
</paper-dropdown>
|
||||
</paper-dropdown-menu>
|
||||
</template>
|
||||
<script>
|
||||
--paper-input-container: {
|
||||
transition: opacity 0.6s;
|
||||
};
|
||||
--paper-dropdown-menu-icon: {
|
||||
color: var(--loot-secondary-text-color);
|
||||
};
|
||||
}
|
||||
:host(.dark) paper-dropdown-menu {
|
||||
--paper-input-container-underline: {
|
||||
background-color: var(--loot-dark-theme-divider-color);
|
||||
};
|
||||
--paper-input-container-input-color: white;
|
||||
--paper-dropdown-menu-input: {
|
||||
color: var(--loot-dark-theme-primary-text-color);
|
||||
};
|
||||
--paper-dropdown-menu-icon: {
|
||||
color: var(--loot-dark-theme-secondary-text-color);
|
||||
};
|
||||
}
|
||||
</style>
|
||||
<paper-dropdown-menu disabled$="[[disabled]]" no-label-float>
|
||||
<paper-listbox class="dropdown-content" attr-for-selected="value" selected="{{value}}">
|
||||
<content></content>
|
||||
</paper-listbox>
|
||||
</paper-dropdown-menu>
|
||||
</template>
|
||||
<script>
|
||||
Polymer({
|
||||
value: undefined,
|
||||
disabled: false
|
||||
is: 'loot-dropdown-menu',
|
||||
properties: {
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
reflectToAttribute: true,
|
||||
},
|
||||
value: {
|
||||
type: String,
|
||||
notify: true,
|
||||
reflectToAttribute: true,
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
</polymer-element>
|
||||
</script>
|
||||
</dom-module>
|
||||
|
||||
@@ -0,0 +1,30 @@
|
||||
<link rel="import" href="../../../../bower_components/polymer/polymer.html">
|
||||
|
||||
<link rel="import" href="../../../../bower_components/paper-listbox/paper-listbox.html">
|
||||
|
||||
<dom-module id="loot-menu">
|
||||
<template>
|
||||
<style>
|
||||
::content > * {
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
<paper-listbox id="menu" multi>
|
||||
<content></content>
|
||||
</paper-listbox>
|
||||
</template>
|
||||
<script>
|
||||
'use strict';
|
||||
Polymer({
|
||||
is: 'loot-menu',
|
||||
|
||||
listeners: {
|
||||
'menu.iron-select': 'onSelect',
|
||||
},
|
||||
|
||||
onSelect(evt) {
|
||||
evt.currentTarget.select(evt.currentTarget.indexOf(evt.detail.item));
|
||||
},
|
||||
});
|
||||
</script>
|
||||
</dom-module>
|
||||
@@ -1,6 +1,6 @@
|
||||
<!--
|
||||
<loot-message-dialog> is an extension of <loot-dialog> that provides a
|
||||
simpler interface for supplying a dialog consisting of a:
|
||||
<loot-message-dialog> provides a simple interface for supplying a dialog
|
||||
consisting of a:
|
||||
|
||||
* title
|
||||
* message
|
||||
@@ -13,67 +13,82 @@ was pressed.
|
||||
-->
|
||||
|
||||
<link rel="import" href="../../../../bower_components/polymer/polymer.html">
|
||||
|
||||
<link rel="import" href="../../../../bower_components/paper-button/paper-button.html">
|
||||
<link rel="import" href="loot-dialog.html">
|
||||
<link rel="import" href="../../../../bower_components/paper-dialog/paper-dialog.html">
|
||||
|
||||
<polymer-element name="loot-message-dialog">
|
||||
<template>
|
||||
<link rel="import" href="../../../../bower_components/neon-animation/animations/fade-in-animation.html">
|
||||
<link rel="import" href="../../../../bower_components/neon-animation/animations/fade-out-animation.html">
|
||||
|
||||
<dom-module id="loot-message-dialog">
|
||||
<template>
|
||||
<style>
|
||||
#dialog {
|
||||
paper-dialog {
|
||||
margin: 24px 40px;
|
||||
max-width: 50%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<loot-dialog id="dialog">
|
||||
<paper-dialog id="dialog"
|
||||
entry-animation="fade-in-animation"
|
||||
exit-animation="fade-out-animation"
|
||||
modal>
|
||||
<content></content>
|
||||
<paper-button id="confirm" affirmative autofocus>OK</paper-button>
|
||||
<paper-button id="dismiss" dismissive>Cancel</paper-button>
|
||||
</loot-dialog>
|
||||
</template>
|
||||
<script>
|
||||
Polymer({
|
||||
closeCallback: undefined,
|
||||
<div class="buttons">
|
||||
<paper-button id="dismiss" dialog-dismiss>Cancel</paper-button>
|
||||
<paper-button id="confirm" dialog-confirm autofocus>OK</paper-button>
|
||||
</div>
|
||||
</paper-dialog>
|
||||
</template>
|
||||
<script>
|
||||
'use strict';
|
||||
Polymer({ // eslint-disable-line new-cap, no-undef
|
||||
is: 'loot-message-dialog',
|
||||
closeCallback: undefined,
|
||||
|
||||
setConfirmText: function(confirmText) {
|
||||
this.shadowRoot.getElementById('confirm').textContent = confirmText;
|
||||
},
|
||||
setConfirmText(confirmText) {
|
||||
this.shadowRoot.getElementById('confirm').textContent = confirmText;
|
||||
},
|
||||
|
||||
setDismissable: function(isDialogDismissable) {
|
||||
this.shadowRoot.getElementById('dismiss').hidden = !isDialogDismissable;
|
||||
},
|
||||
setDismissable(isDialogDismissable) {
|
||||
this.shadowRoot.getElementById('dismiss').hidden = !isDialogDismissable;
|
||||
},
|
||||
|
||||
onButtonClick: function(evt) {
|
||||
if (evt.target.parentElement.parentNode.host.closeCallback) {
|
||||
evt.target.parentElement.parentNode.host.closeCallback(evt.target.id === 'confirm');
|
||||
}
|
||||
evt.target.parentElement.parentNode.host.addEventListener('core-overlay-close-completed', function(evt){
|
||||
evt.target.parentElement.removeChild(evt.target);
|
||||
}, false);
|
||||
},
|
||||
onClose(evt) {
|
||||
if (evt.target.parentNode.host.closeCallback) {
|
||||
evt.target.parentNode.host.closeCallback(evt.target.closingReason.confirmed);
|
||||
}
|
||||
evt.target.parentNode.host.parentElement.removeChild(evt.target.parentNode.host);
|
||||
},
|
||||
|
||||
showModal: function(title, text, closeCallback) {
|
||||
this.heading = title;
|
||||
this.getElementsByClassName('message')[0].textContent = text;
|
||||
showModal(title, text, closeCallback) {
|
||||
this.getElementsByClassName('heading')[0].textContent = title;
|
||||
this.getElementsByClassName('message')[0].textContent = text;
|
||||
|
||||
this.closeCallback = closeCallback;
|
||||
this.shadowRoot.getElementById('dialog').showModal();
|
||||
},
|
||||
this.closeCallback = closeCallback;
|
||||
this.$.dialog.open();
|
||||
},
|
||||
|
||||
created: function() {
|
||||
var p = document.createElement('p');
|
||||
p.className = 'message';
|
||||
this.appendChild(p);
|
||||
},
|
||||
close() {
|
||||
this.$.dialog.close();
|
||||
},
|
||||
|
||||
attached: function() {
|
||||
this.shadowRoot.getElementById('confirm').addEventListener('click', this.onButtonClick, false);
|
||||
this.shadowRoot.getElementById('dismiss').addEventListener('click', this.onButtonClick, false);
|
||||
},
|
||||
created() {
|
||||
const h2 = document.createElement('h2');
|
||||
h2.className = 'heading';
|
||||
this.appendChild(h2);
|
||||
|
||||
detached: function() {
|
||||
this.shadowRoot.getElementById('confirm').removeEventListener('click', this.onButtonClick, false);
|
||||
this.shadowRoot.getElementById('dismiss').removeEventListener('click', this.onButtonClick, false);
|
||||
},
|
||||
const p = document.createElement('p');
|
||||
p.className = 'message';
|
||||
this.appendChild(p);
|
||||
},
|
||||
|
||||
attached() {
|
||||
this.$.dialog.addEventListener('iron-overlay-closed', this.onClose);
|
||||
},
|
||||
|
||||
detached() {
|
||||
this.$.dialog.removeEventListener('iron-overlay-closed', this.onClose);
|
||||
},
|
||||
});
|
||||
</script>
|
||||
</polymer-element>
|
||||
</script>
|
||||
</dom-module>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user