mirror of
https://github.com/loot/libloot.git
synced 2026-07-27 14:16:01 -07:00
Replaced <message-dialog> with <loot-message-dialog>.
The latter extends <loot-dialog>. Also moved common <paper-dialog> attributes into <loot-dialog>'s default set.
This commit is contained in:
@@ -11,10 +11,7 @@ Still missing compared to <dialog> are:
|
||||
<link rel="import" href="../bower_components/polymer/polymer.html">
|
||||
<link rel="import" href="../bower_components/paper-dialog/paper-dialog.html">
|
||||
|
||||
<polymer-element name="loot-dialog" extends="paper-dialog" attributes="open">
|
||||
<template>
|
||||
<shadow></shadow>
|
||||
</template>
|
||||
<polymer-element name="loot-dialog" extends="paper-dialog" attributes="open" transition="paper-dialog-transition-center" autoCloseDisabled backdrop>
|
||||
<script>
|
||||
Polymer({
|
||||
open: false,
|
||||
|
||||
@@ -0,0 +1,79 @@
|
||||
<!--
|
||||
<loot-message-dialog> is an extension of <loot-dialog> that provides a
|
||||
simpler interface for supplying a dialog consisting of a:
|
||||
|
||||
* title
|
||||
* message
|
||||
* accept button
|
||||
* cancel button (optional)
|
||||
|
||||
It also allows for a callback function to be executed on dialog close.
|
||||
The function takes one boolean parameter that is true if the accept button
|
||||
was pressed.
|
||||
-->
|
||||
|
||||
<link rel="import" href="../bower_components/polymer/polymer.html">
|
||||
<link rel="import" href="loot-dialog.html">
|
||||
|
||||
<polymer-element name="loot-message-dialog" extends="loot-dialog">
|
||||
<script>
|
||||
Polymer({
|
||||
closeCallback: undefined,
|
||||
|
||||
setButtonText: function(accept, cancel) {
|
||||
this.getElementsByClassName('accept')[0].textContent = accept;
|
||||
this.getElementsByClassName('cancel')[0].textContent = cancel;
|
||||
|
||||
if (!cancel) {
|
||||
this.getElementsByClassName('cancel')[0].classList.toggle('hidden', true);
|
||||
} else {
|
||||
this.getElementsByClassName('cancel')[0].classList.toggle('hidden', false);
|
||||
}
|
||||
},
|
||||
|
||||
onButtonClick: function(evt) {
|
||||
if (evt.target.parentElement.closeCallback) {
|
||||
evt.target.parentElement.closeCallback(evt.target.classList.contains('accept'));
|
||||
}
|
||||
},
|
||||
|
||||
showModal: function(title, text, closeCallback) {
|
||||
this.heading = title;
|
||||
this.querySelector('#message').textContent = text;
|
||||
|
||||
this.closeCallback = closeCallback;
|
||||
this.super();
|
||||
},
|
||||
|
||||
ready: function() {
|
||||
var p = document.createElement('p');
|
||||
p.id = 'message';
|
||||
this.appendChild(p);
|
||||
|
||||
var accept = document.createElement('paper-button');
|
||||
accept.className = 'accept';
|
||||
accept.setAttribute('affirmative', true);
|
||||
accept.setAttribute('autofocus', true);
|
||||
accept.textContent = 'Apply';
|
||||
this.appendChild(accept);
|
||||
|
||||
var cancel = document.createElement('paper-button');
|
||||
cancel.className = 'cancel';
|
||||
cancel.setAttribute('affirmative', true);
|
||||
cancel.textContent = 'Cancel';
|
||||
this.appendChild(cancel);
|
||||
},
|
||||
|
||||
attached: function() {
|
||||
this.getElementsByClassName('accept')[0].addEventListener('click', this.onButtonClick, false);
|
||||
this.getElementsByClassName('cancel')[0].addEventListener('click', this.onButtonClick, false);
|
||||
},
|
||||
|
||||
detached: function() {
|
||||
this.getElementsByClassName('accept')[0].removeEventListener('click', this.onButtonClick, false);
|
||||
this.getElementsByClassName('cancel')[0].removeEventListener('click', this.onButtonClick, false);
|
||||
},
|
||||
|
||||
});
|
||||
</script>
|
||||
</polymer-element>
|
||||
@@ -1,137 +0,0 @@
|
||||
<template id="messageDialog">
|
||||
<style>
|
||||
@import 'css/font-awesome.min.css';
|
||||
h1 {
|
||||
margin: 0;
|
||||
margin-bottom: 1em;
|
||||
display: inline-block;
|
||||
text-align: left;
|
||||
font-weight: normal;
|
||||
text-align: center;
|
||||
}
|
||||
.icon {
|
||||
font-size: 4em;
|
||||
position: relative;
|
||||
margin-right: 0.5em;
|
||||
top: 0.2em;
|
||||
}
|
||||
:host[data-type=warn] .icon {
|
||||
color: gold;
|
||||
}
|
||||
.buttons {
|
||||
text-align: center;
|
||||
}
|
||||
.accept, .cancel {
|
||||
margin: 0.5em;
|
||||
font-size: 1.5em;
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
}
|
||||
.accept > span:last-child, .cancel > span:last-child {
|
||||
margin-left: 0.5em;
|
||||
display: inline-block;
|
||||
}
|
||||
.accept:hover {
|
||||
color: green;
|
||||
}
|
||||
.cancel:hover {
|
||||
color: red;
|
||||
}
|
||||
</style>
|
||||
<span class="icon fa fa-exclamation-circle"></span>
|
||||
<h1><content select="h1"></content></h1>
|
||||
<p><content select="p"></content></p>
|
||||
<div class="buttons">
|
||||
<div class="accept"><span class="fa fa-check"></span><span></span></div>
|
||||
<div class="cancel"><span class="fa fa-close"></span><span></span></div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
'use strict';
|
||||
// Record this document.
|
||||
var messageDialogImportDoc = document.currentScript.ownerDocument;
|
||||
|
||||
/* Create a <dialog is="message-dialog"> element type. */
|
||||
var messageDialogProto = Object.create(HTMLDialogElement.prototype, {
|
||||
|
||||
setButtonText: {
|
||||
value: function(accept, cancel) {
|
||||
this.shadowRoot.getElementsByClassName('accept')[0].lastChild.textContent = accept;
|
||||
this.shadowRoot.getElementsByClassName('cancel')[0].lastChild.textContent = cancel;
|
||||
}
|
||||
},
|
||||
|
||||
onClose: {
|
||||
value: function(evt) {
|
||||
var ret = evt.target.returnValue == 'true';
|
||||
|
||||
evt.target.parentElement.removeChild(evt.target);
|
||||
|
||||
if (evt.target.closeCallback != undefined) {
|
||||
evt.target.closeCallback(ret);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
onButtonClick: {
|
||||
value: function(evt) {
|
||||
/* Call the dialog's close function. */
|
||||
evt.currentTarget.parentElement.parentNode.host.close( evt.target.className == 'accept' );
|
||||
}
|
||||
},
|
||||
|
||||
showModal: {
|
||||
/* A type of 'error' or 'info' produces an 'OK'-only dialog box. */
|
||||
value: function(type, title, text, closeCallback) {
|
||||
|
||||
this.closeCallback = closeCallback;
|
||||
|
||||
this.getElementsByTagName('h1')[0].textContent = title;
|
||||
this.getElementsByTagName('p')[0].textContent = text;
|
||||
|
||||
|
||||
if (type == 'error' || type == 'info') {
|
||||
this.shadowRoot.getElementsByClassName('cancel')[0].classList.toggle('hidden', true);
|
||||
}
|
||||
|
||||
HTMLDialogElement.prototype.showModal.call(this);
|
||||
}
|
||||
},
|
||||
|
||||
createdCallback: {
|
||||
value: function() {
|
||||
|
||||
var template = messageDialogImportDoc.querySelector('#messageDialog');
|
||||
var clone = document.importNode(template.content, true);
|
||||
var root = this.createShadowRoot();
|
||||
root.appendChild(clone);
|
||||
|
||||
this.appendChild(document.createElement('h1'));
|
||||
this.appendChild(document.createElement('p'));
|
||||
}
|
||||
},
|
||||
|
||||
attachedCallback: {
|
||||
value: function() {
|
||||
this.addEventListener('close', this.onClose, false);
|
||||
|
||||
this.shadowRoot.getElementsByClassName('accept')[0].addEventListener('click', this.onButtonClick, false);
|
||||
this.shadowRoot.getElementsByClassName('cancel')[0].addEventListener('click', this.onButtonClick, false);
|
||||
}
|
||||
},
|
||||
|
||||
detachedCallback: {
|
||||
value: function() {
|
||||
this.removeEventListener('close', this.onClose, false);
|
||||
|
||||
this.shadowRoot.getElementsByClassName('accept')[0].removeEventListener('click', this.onButtonClick, false);
|
||||
this.shadowRoot.getElementsByClassName('cancel')[0].removeEventListener('click', this.onButtonClick, false);
|
||||
}
|
||||
}
|
||||
|
||||
});
|
||||
var MessageDialog = document.registerElement('message-dialog', {
|
||||
prototype: messageDialogProto,
|
||||
extends: 'dialog'
|
||||
});
|
||||
</script>
|
||||
@@ -364,7 +364,7 @@ function processCefError(err) {
|
||||
info than just the error message. */
|
||||
console.log(err.stack);
|
||||
closeProgressDialog();
|
||||
showMessageBox('error', 'Error', err.message);
|
||||
showMessageBox('Error', err.message);
|
||||
}
|
||||
|
||||
function saveFilterState(evt) {
|
||||
@@ -535,20 +535,16 @@ function applyFilters(evt) {
|
||||
});
|
||||
}
|
||||
function showMessageDialog(title, text, closeCallback) {
|
||||
var dialog = new MessageDialog();
|
||||
var dialog = document.createElement('loot-message-dialog');
|
||||
dialog.setButtonText(l10n.jed.translate('Yes').fetch(), l10n.jed.translate('Cancel').fetch());
|
||||
dialog.showModal(title, text, closeCallback);
|
||||
document.body.appendChild(dialog);
|
||||
dialog.showModal('warn', title, text, closeCallback);
|
||||
}
|
||||
function showMessageBox(type, title, text) {
|
||||
var dialog = new MessageDialog();
|
||||
if (type == 'error' || type == 'info') {
|
||||
dialog.setButtonText(l10n.jed.translate('OK').fetch(), l10n.jed.translate('Cancel').fetch());
|
||||
} else {
|
||||
dialog.setButtonText(l10n.jed.translate('Yes').fetch(), l10n.jed.translate('Cancel').fetch());
|
||||
}
|
||||
function showMessageBox(title, text) {
|
||||
var dialog = document.createElement('loot-message-dialog');
|
||||
dialog.setButtonText(l10n.jed.translate('OK').fetch());
|
||||
dialog.showModal(title, text);
|
||||
document.body.appendChild(dialog);
|
||||
dialog.showModal(type, title, text);
|
||||
}
|
||||
function openLogLocation(evt) {
|
||||
loot.query('openLogLocation').catch(processCefError);
|
||||
@@ -904,12 +900,10 @@ function redatePlugins(evt) {
|
||||
showMessageDialog('Redate Plugins', 'This feature is provided so that modders using the Creation Kit may set the load order it uses. A side-effect is that any subscribed Steam Workshop mods will be re-downloaded by Steam. Do you wish to continue?', function(result){
|
||||
if (result) {
|
||||
loot.query('redatePlugins').then(function(response){
|
||||
showMessageBox('info', 'Redate Plugins', 'Plugins were successfully redated.');
|
||||
showMessageBox('Redate Plugins', 'Plugins were successfully redated.');
|
||||
}).catch(processCefError);
|
||||
}
|
||||
});
|
||||
|
||||
//showMessageBox('info', 'Redate Plugins', 'Plugins were successfully redated.');
|
||||
}
|
||||
function clearAllMetadata(evt) {
|
||||
showMessageDialog('Clear All Metadata', 'Are you sure you want to clear all existing user-added metadata from all plugins?', function(result){
|
||||
|
||||
@@ -8,12 +8,12 @@
|
||||
<script src="bower_components/platform/platform.js"></script>
|
||||
<link rel="import" href="bower_components/polymer/polymer.html">
|
||||
|
||||
<link rel="import" href="html/message-dialog.html">
|
||||
<link rel="import" href="html/plugin-li.html">
|
||||
<link rel="import" href="html/plugin-card.html">
|
||||
<link rel="import" href="html/editable-table.html">
|
||||
<link rel="import" href="html/loot-dialog.html">
|
||||
<link rel="import" href="html/loot-dropdown-menu.html">
|
||||
<link rel="import" href="html/loot-message-dialog.html">
|
||||
|
||||
<link rel="import" href="bower_components/core-toolbar/core-toolbar.html">
|
||||
<link rel="import" href="bower_components/core-icon/core-icon.html">
|
||||
@@ -184,7 +184,7 @@
|
||||
</div>
|
||||
</core-drawer-panel>
|
||||
|
||||
<loot-dialog id="about" heading="About LOOT" transition="paper-dialog-transition-center" backdrop>
|
||||
<loot-dialog id="about" heading="About LOOT">
|
||||
<p>Version <span id="LOOTVersion"></span> (build <span id="LOOTBuild"></span>)</p>
|
||||
<p>Load order optimisation for Oblivion, Skyrim, Fallout 3 and Fallout: New Vegas.</p>
|
||||
<p><a href="http://loot.github.io">http://loot.github.io</a></p>
|
||||
@@ -206,7 +206,7 @@ along with LOOT. If not, see <http://www.gnu.org/licenses/>.
|
||||
<paper-button affirmative autofocus>OK</paper-button>
|
||||
</loot-dialog>
|
||||
|
||||
<loot-dialog id="settings" heading="Settings" transition="paper-dialog-transition-center" backdrop autoCloseDisabled>
|
||||
<loot-dialog id="settings" heading="Settings" >
|
||||
<div center horizontal layout>
|
||||
<div>Default Game</div>
|
||||
<loot-dropdown-menu id="defaultGameSelect">
|
||||
@@ -260,7 +260,7 @@ along with LOOT. If not, see <http://www.gnu.org/licenses/>.
|
||||
</loot-dialog>
|
||||
|
||||
<div id="hoverText" class="hidden"></div>
|
||||
<loot-dialog id="progressDialog" transition="paper-dialog-transition-center" backdrop autoCloseDisabled>
|
||||
<loot-dialog id="progressDialog">
|
||||
<!-- CEF doesn't seem to want to play any animation set through CSS
|
||||
for <progress>'s internal value pseudo-element, so use this
|
||||
instead. -->
|
||||
@@ -270,7 +270,7 @@ along with LOOT. If not, see <http://www.gnu.org/licenses/>.
|
||||
<h1>Calculating the last digit of π...</h1>
|
||||
</loot-dialog>
|
||||
|
||||
<loot-dialog id="firstRun" heading="First-Time Tips" transition="paper-dialog-transition-center" backdrop>
|
||||
<loot-dialog id="firstRun" heading="First-Time Tips">
|
||||
<p>This appears to be the first time you have run LOOT v<span id="firstTimeLootVersion"></span>. Here are some tips to help you get started with the interface.</p>
|
||||
<ul>
|
||||
<li>As well as messages, LOOT displays plugin <span class="version">version numbers</span>, <span class="crc">CRCs</span> and Bash Tag suggestions for <span class="tag add">addition</span> and <span class="tag remove">removal</span>.</li>
|
||||
|
||||
Reference in New Issue
Block a user