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:
Oliver Hamlet
2014-11-08 23:19:40 +00:00
parent 54f7d25784
commit 71612f6076
5 changed files with 93 additions and 160 deletions
+1 -4
View File
@@ -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>
-137
View File
@@ -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>
+8 -14
View File
@@ -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){
+5 -5
View File
@@ -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 &lt;http://www.gnu.org/licenses/&gt;.
<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 &lt;http://www.gnu.org/licenses/&gt;.
</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 &lt;http://www.gnu.org/licenses/&gt;.
<h1>Calculating the last digit of &pi;...</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>