Polymerised about dialog.

resources/report/bower.json

@@ -24,6 +24,7 @@
     "paper-input": "Polymer/paper-input#~0.4.2",
     "paper-tabs": "Polymer/paper-tabs#~0.4.2",
     "core-menu": "Polymer/core-menu#~0.4.2",
-    "paper-checkbox": "Polymer/paper-checkbox#~0.4.2"
+    "paper-checkbox": "Polymer/paper-checkbox#~0.4.2",
+    "paper-dialog": "Polymer/paper-dialog#~0.4.2"
   }
 }

resources/report/css/style.css

@@ -143,16 +143,13 @@ dialog button {
 
 
 
-#about h1, #about p {
-    text-align: center;
-}
+
 
 #about blockquote {
     white-space: pre;
 }
-#about button {
-    margin: 0 auto;
-    display: block;
+paper-button[autofocus] {
+  color: #4285f4;
 }
 
 section h1 {

resources/report/js/script.js

@@ -1036,11 +1036,8 @@ function switchSidebarTab(evt) {
     evt.target.nextElementSibling.nextElementSibling.classList.toggle('hidden', isFirstSelected);
 }
 
-function closeAboutDialog(evt) {
-    evt.target.parentElement.close();
-}
 function showAboutDialog(evt) {
-    document.getElementById('about').showModal();
+    document.getElementById('about').opened = true;
 }
 function closeSettingsDialog(evt) {
     if (!areSettingsValid()) {
@@ -1233,9 +1230,6 @@ function setupEventHandlers() {
     settings.getElementsByClassName('accept')[0].addEventListener('click', closeSettingsDialog, false);
     settings.getElementsByClassName('cancel')[0].addEventListener('click', closeSettingsDialog, false);
 
-    /* Set up about dialog handler. */
-    document.getElementById('about').getElementsByTagName('button')[0].addEventListener('click', closeAboutDialog, false);
-
     /* Set up event handler for closing the first-run dialog. */
     document.getElementById('firstRun').getElementsByTagName('button')[0].addEventListener('click', closeFirstRunDialog, false);
 

resources/report/report.html

@@ -27,6 +27,8 @@
     <link rel="import" href="bower_components/paper-input/paper-input.html">
     <link rel="import" href="bower_components/paper-tabs/paper-tabs.html">
     <link rel="import" href="bower_components/paper-checkbox/paper-checkbox.html">
+    <link rel="import" href="bower_components/paper-dialog/paper-dialog.html">
+    <link rel="import" href="bower_components/paper-dialog/paper-dialog-transition.html">
 
     <script src="js/require.js"></script>
 </head>
@@ -178,12 +180,11 @@
         </div>
     </core-drawer-panel>
 
-    <dialog id="about">
-        <h1>LOOT <span id="LOOTVersion"></span></h1>
-        <p><small>Build <span id="LOOTBuild"></span></small></p>
-        <p>Copyright &copy; 2012&ndash;2014 WrinklyNinja</p>
+    <paper-dialog id="about" heading="About LOOT" transition="paper-dialog-transition-center" backdrop>
+        <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>
+        <p>Copyright &copy; 2012&ndash;2014 WrinklyNinja</p>
         <blockquote>
 LOOT is free software: you can redistribute it and/or modify it
 under the terms of the GNU General Public License as published
@@ -198,8 +199,8 @@ See the GNU General Public License for more details.
 You should have received a copy of the GNU General Public License
 along with LOOT. If not, see &lt;http://www.gnu.org/licenses/&gt;.
         </blockquote>
-        <button>OK</button>
-    </dialog>
+        <paper-button affirmative autofocus>OK</paper-button>
+    </paper-dialog>
 
     <dialog id="settings">
         <h1>Settings</h1>