UX : Include UX fix on piskel app for swap colors

- Also updated robots.txt to disallow template folder - minimap zoom border is now rgba(255,255,255,0.5)
piskelapp · Mar 3, 2014 · c3612bc · c3612bc
1 parent 24fdae9
commit c3612bc
Show file tree

Hide file tree

Showing 17 changed files with 125 additions and 36 deletions.
diff --git a/app.yaml b/app.yaml
@@ -12,6 +12,14 @@ handlers:
   static_files: favicon.ico
   upload: favicon\.ico
 
+- url: /robots\.txt
+  static_files: robots.txt
+  upload: robots\.txt
+
+- url: /google392c8e9117089539\.html
+  static_files: static/google392c8e9117089539.html
+  upload: static/google392c8e9117089539\.html
+
 - url: /static/resources/(.*\.svg)
   static_files: static/resources/\1
   upload: static/resources/(.*\.svg)

diff --git a/handlers/home.py b/handlers/home.py
@@ -10,7 +10,8 @@ def get(self):
       'user': self.current_user if self.is_logged_in else False,
       'session': self.session_user if self.is_logged_in else False,
       'is_logged_in': self.is_logged_in,
-      'hide_create': True
+      'hide_create': True,
+      'has_footer' : True
     }
 
     self.render("home.html", values)
diff --git a/robots.txt b/robots.txt
@@ -0,0 +1,4 @@
+# robots.txt
+
+User-agent: *
+Disallow: /p/templates/
diff --git a/static/css/piskel-app-home.css b/static/css/piskel-app-home.css
@@ -1,12 +1,4 @@
-@font-face {
-    font-family: 'MiniSet2';
-    src: url('/static/resources/font/miniset2-webfont.eot');
-    src: url('/static/resources/font/miniset2-webfont.eot?#iefix') format('embedded-opentype'),
-         url('/static/resources/font/miniset2-webfont.woff') format('woff'),
-         url('/static/resources/font/miniset2-webfont.ttf') format('truetype');
-    font-weight: normal;
-    font-style: normal;
-}
+
 
 /***********************************/
 /*** NAVIGATION HEADER OVERRIDES ***/
@@ -20,10 +12,6 @@
 	height: 32px;
 }
 
-.font-pixel {
-  font-family: "MiniSet2", cursive;
-}
-
 .home-tagline {
 	font-size: 2em;
 	color: gold;
@@ -45,6 +33,10 @@
 	padding-right: 15px;
 }
 
+.main {
+	overflow-x : hidden;
+}
+
 .home-main-button {
 	line-height: 50px;
 	color: #333;
@@ -80,9 +72,9 @@
 
 .piskel-screenshot-animated-preview {
 	position: absolute;
-	right: 35px;
-	width: 93px;
-	top: 21px;
+	right: 37px;
+	width: 95px;
+	top: 23px;
 }
 
 .preview-separator {

diff --git a/static/css/piskel-app.css b/static/css/piskel-app.css
@@ -77,6 +77,25 @@ ul {
    background-color: rgba(50, 50, 50, 0.4);;
 }
 
+
+/*************************/
+/*   			FONTS          */
+/*************************/
+
+@font-face {
+    font-family: 'MiniSet2';
+    src: url('/static/resources/font/miniset2-webfont.eot');
+    src: url('/static/resources/font/miniset2-webfont.eot?#iefix') format('embedded-opentype'),
+         url('/static/resources/font/miniset2-webfont.woff') format('woff'),
+         url('/static/resources/font/miniset2-webfont.ttf') format('truetype');
+    font-weight: normal;
+    font-style: normal;
+}
+
+.font-pixel {
+  font-family: "MiniSet2", cursive;
+}
+
 /*************************/
 /*   			LINKS          */
 /*************************/
@@ -136,18 +155,17 @@ ul {
 /*************************/
 .footer {
 	position: relative;
-	margin-top: -30px; /* negative value of footer height */
-	height: 30px;
+	margin : 30px 0; /* negative value of footer height */
 
-	font-size : 0.8rem;
+	font-size : 1rem;
 
 	width:100%;
 	line-height: 30px;
 
 	text-align: center;
 	vertical-align: middle;
 
-	color : grey;
+	color : #aaa;
 }
 
 .footer > .link {

diff --git a/static/editor/build/piskel-packaged-min.js b/static/editor/build/piskel-packaged-min.js
diff --git a/static/editor/build/piskel-packaged.js b/static/editor/build/piskel-packaged.js
@@ -17029,6 +17029,8 @@ if (typeof Function.prototype.bind !== "function") {
     secondaryColorPicker.change({isPrimary : false}, $.proxy(this.onPickerChange_, this));
     this.setTitleOnPicker_(Constants.TRANSPARENT_COLOR, secondaryColorPicker);
 
+    var swapColorsIcon = $('.swap-colors-icon');
+    swapColorsIcon.click(this.swapColors.bind(this));
   };
 
   /**
@@ -18073,6 +18075,7 @@ if (typeof Function.prototype.bind !== "function") {
   ns.SavedStatusService.prototype.updateDirtyStatus = function (status) {
     var piskel = this.piskelController_.piskel;
     if (piskel.isDirty_ !== status) {
+      // Redraw piskel name only if dirty status actually changed
       piskel.isDirty_ = status;
       this.updatePiskelName();
     }

diff --git a/static/editor/build/piskel-style-packaged.css b/static/editor/build/piskel-style-packaged.css
@@ -852,6 +852,22 @@ body {
   cursor: url(../img/icons/dropper.png) 0 15, pointer;
 }
 
+.swap-colors-icon {
+  background-image: url(../img/tools/swap-arrow-square-small-grey.png);
+  position: relative;
+  top: 50px;
+  left: 6px;
+  height: 18px;
+  width: 18px;
+  background-size: 18px;
+  opacity : 0.3;
+  cursor : pointer;
+}
+
+.swap-colors-icon:hover {
+  opacity : 1;
+}
+
 .tool-color-picker {
   position:relative;
 }
@@ -1502,13 +1518,18 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
 
 /* Remove the padding on the input container */
 .sp-replacer {
-  padding: 3px;
+  padding: 4px;
   height: 100%;
   border-width: 0;
   box-sizing: border-box;
   -moz-box-sizing:border-box;
   background-color: #444;
 }
+
+.sp-replacer:hover {
+  background-color: #888;
+}
+
 /* Hide the triangle */
 .sp-dd {
   display: none;
@@ -1707,7 +1728,7 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
   position: absolute;
   left: 0;
   right: 12px;
-  
+
   -webkit-transition: all 500ms ease-out;
   -moz-transition: all 500ms ease-out;
   -ms-transition: all 500ms ease-out;
@@ -1877,7 +1898,7 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
 
 .minimap-crop-frame {
   position:absolute;
-  border:1px solid red;
+  border:1px solid rgba(255,255,255,0.5);
   z-index:9999;
   box-sizing : border-box;
   -moz-box-sizing : border-box;

diff --git a/static/editor/img/tools/swap-arrow-square-small-grey.png b/static/editor/img/tools/swap-arrow-square-small-grey.png
diff --git a/static/editor/templates/drawing-tools.html b/static/editor/templates/drawing-tools.html
@@ -3,12 +3,28 @@
     <div class="vertical-centerer">
       <ul id="tools-container" class="tools-wrapper"></ul>
       <div class="palette-wrapper">
-        <div class="tool-icon tool-color-picker">
+        <div
+          class="tool-icon tool-color-picker"
+          title="Primary - left mouse button"
+          rel="tooltip"
+          data-placement="right"
+        >
           <input id="color-picker" class="color" type="text"/>
         </div>
-        <div class="tool-icon tool-color-picker">
+        <div
+          class="tool-icon tool-color-picker"
+          title="Secondary - right mouse button"
+          rel="tooltip"
+          data-placement="right"
+        >
           <input id="secondary-color-picker" class="secondary-color-picker color" type="text" />
         </div>
+        <div
+          class="swap-colors-icon"
+          title="Swap colors (X)"
+          rel="tooltip"
+          data-placement="right"
+        ></div>
       </div>
     </div>
   </div>

diff --git a/static/google392c8e9117089539.html b/static/google392c8e9117089539.html
@@ -0,0 +1 @@
+google-site-verification: google392c8e9117089539.html
diff --git a/static/resources/home/2d-guy-walk.gif b/static/resources/home/2d-guy-walk.gif
diff --git a/templates/about.html b/templates/about.html
@@ -0,0 +1,11 @@
+{% extends "base.html" %}
+{% from "partial/macros.html" import render_animated_preview %}
+
+{% block title %}Piskel - Home{% endblock %}
+
+{% block css %}
+  <link rel="stylesheet" type="text/css" href="/static/css/piskel-app-home.css"/>
+{% endblock %}
+
+{% block main %}
+{% endblock %}
diff --git a/templates/analytics.html b/templates/analytics.html
@@ -0,0 +1,9 @@
+<script>
+  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+
+  ga('create', 'UA-48518312-1', 'piskelapp.com');
+  ga('send', 'pageview');
+</script>
diff --git a/templates/base.html b/templates/base.html
@@ -2,9 +2,13 @@
 <html lang="en">
 <head>
 	<meta charset="UTF-8">
+	<meta name="description" content="Piskel is a web based sprite editor. Create vibrant pixel art, game sprites and animated GIFs.">
+	<meta name="author" content="Julian Descottes, Grosbouddha">
+	<meta name="keywords" content="pixel, videogames, editor">
 	<title>{% block title %} title {% endblock %}</title>
 	<link rel="shortcut icon" type="image/png" href="/static/resources/favicon.png"/>
 	<link rel="stylesheet" type="text/css" href="/static/css/piskel-app.css"/>
+	{% include "analytics.html" %}
 	{% block css %}{% endblock %}
 </head>
 <body>
@@ -18,6 +22,6 @@
 			{% block main %} main {% endblock %}
 		</div>
 	</div>
-	{% include "footer.html" %}
+	{% if has_footer %}{% include "footer.html" %}{% endif %}
 </body>
 </html>
diff --git a/templates/footer.html b/templates/footer.html
@@ -1,5 +1,4 @@
-<div class="footer">
-	<a class="link" href="about.html">about</a> .
-	<a class="link" target="_blank" href="https://github.com/juliandescottes/piskel">github</a> .
-	<a class="link" target="_blank" href="https://twitter.com/juliandescottes">twitter</a>
+<div class="footer font-pixel">
+  <div>Crafted with love by <a target="_blank" href="https://twitter.com/juliandescottes">@juliandescottes</a>, using HTML5, Canvas, <a target="_blank" href="http://jnordberg.github.io/gif.js/">gif.js</a>, <a target="_blank" href="http://bgrins.github.io/spectrum/">spectrum</a>.</div>
+  <div>Checkout the project on <a target="_blank" href="http://github.com/juliandescottes/piskel">github</a>, give me a shout on <a target="_blank" href="https://twitter.com/juliandescottes">twitter</a>. It's free, enjoy !</div>
 </div>
diff --git a/templates/home.html b/templates/home.html
@@ -13,8 +13,10 @@
 	<div class="main-container">
 		<img class="home-logo-big" src="/static/resources/logo_transparent_big.png"/>
 		<div class="medium-width-container" style="position:relative;">
-			<img class="piskel-screenshot" src="/static/resources/home/piskel_screenshot.jpg"/>
-			<img class="piskel-screenshot-animated-preview" src="/static/resources/home/megaman_animated_2.gif"/>
+			<a href="/p/agxzfnBpc2tlbC1hcHByEwsSBlBpc2tlbBiAgICAyJ2kCQw/edit" target="_blank">
+				<img class="piskel-screenshot" src="/static/resources/home/piskel_screenshot.jpg"/>
+				<img class="piskel-screenshot-animated-preview" src="/static/resources/home/megaman_animated_2.gif"/>
+			</a>
 		</div>
 		<h1 class="font-pixel home-tagline">
 			Pixel Art and Animated Sprites
@@ -31,7 +33,7 @@ <h1 class="font-pixel home-tagline">
 		<div class="assets-container">
 			<div class="asset-item">
 				<div class="media-container">
-					<img class="media-image" src="http://screenletstore.appspot.com/img/fd62209e-5ab3-11e3-9c9d-f74d3c0b7c41.gif"/>
+					<img class="media-image" src="/static/resources/home/2d-guy-walk.gif"/>
 					<div class="media-body">
 						<h4 class="asset-title">Live preview</h4>
 						<p class="asset-description">Piskel gives you a live preview of your work.<br/>