Add about dialog

bradparks · Feb 9, 2015 · 5aee1ab · 5aee1ab
1 parent 5878f53
commit 5aee1ab
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 2 deletions.
diff --git a/assets/pixie.css b/assets/pixie.css
@@ -1131,6 +1131,40 @@ button::-moz-focus-inner {
   border-top: 0;
   font-size: 14px;
 }
+.dialog-content article {
+  text-align: left;
+  max-width: 300px;
+}
+.dialog-content h1 {
+  margin: 0 0 14px;
+  font-size: 24px;
+}
+.dialog-content p {
+  margin: 0 0 14px;
+}
+.dialog-content a {
+  text-decoration: none;
+  color: #05c;
+  margin: -1px -3px;
+  padding: 1px 3px;
+  border-radius: 3px;
+}
+.dialog-content a:hover {
+  text-decoration: underline;
+}
+.dialog-content a:active {
+  text-decoration: none;
+  color: #fff;
+  background: #47d;
+}
+.dialog-content .links {
+  list-style: none;
+  margin: 0 0 14px;
+  padding: 0 0 0 14px;
+}
+.dialog-content .links li::before {
+  content: '– ';
+}
 .dialog-label {
   display: block;
   margin-bottom: 14px;

diff --git a/lib/pixie/pixie.js b/lib/pixie/pixie.js
@@ -5472,7 +5472,19 @@
     this.editor.tipsPanel.home();
   };
 
-  TopBar.prototype.showAbout = function() {};
+  TopBar.prototype.showAbout = function() {
+    var content = el('dialog-label');
+    content.innerHTML = '<article>'+T(
+      '<h1>Pixie</h1>'+
+      '<p>An unofficial rewrite of Scratch in JavaScript, created by <a target=_blank href=https://github.com/nathan>Nathan Dinsmore</a>.</p>'+
+      '<p>Pixie aims to provide an application nearly identical to the current, Flash-based Scratch editor and player using only web technologies. The source code is <a target=_blank href=https://github.com/nathan/pixie>available on GitHub</a>.</p>'+
+      '<ul class=links><li><a target=_blank href=https://github.com/nathan/pixie/issues>Bugs</a><li><a target=_blank href=https://github.com/nathan/pixie/graphs/contributors>Contributors</a></li>'
+    )+'</article>';
+
+    var d = new Dialog(T('About Pixie'), Dialog.content(
+      content,
+      Dialog.buttons(['OK', function() {d.commit()}]))).show(this.editor);
+  };
 
   TopBar.prototype.showMenu = function(button, menu) {
     if (!this.parent) return;
@@ -6325,7 +6337,7 @@
   };
 
   Dialog.prototype.mouseDown = function(e) {
-    if (e.target.tagName === 'INPUT' || e.target.tagName === 'BUTTON' || e.target.tagName === 'SELECT' || e.target.tagName === 'LABEL') return;
+    if (e.target.tagName === 'INPUT' || e.target.tagName === 'BUTTON' || e.target.tagName === 'SELECT' || e.target.tagName === 'LABEL' || e.target.tagName === 'A') return;
     this.dragX = this.x - e.clientX;
     this.dragY = this.y - e.clientY;
     document.addEventListener('mousemove', this.mouseMove);