Merge pull request #26 from captainbrosset/draft-ui

series of tiny improvements to the ui

css/reset.css

@@ -0,0 +1,20 @@
+html, body {
+  height : 100%; width: 100%;
+  margin : 0;
+  overflow: hidden;
+  cursor : default;
+  font-family: arial;
+  font-size: 11px;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+ul, li {
+  margin : 0;
+  padding : 0;
+  list-style-type: none;
+}

css/style.css

@@ -1,28 +1,12 @@
-html, body {
-  height : 100%;
-  margin : 0;
-  cursor : default;
-  -webkit-touch-callout: none;
-  -webkit-user-select: none;
-  -khtml-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-}
-
-ul, li {
-  margin : 0;
-  padding : 0;
-}
-
-.debug {
-  border : 1px Solid black;
+.tools-container {
+  position: absolute;
+  top: 0; left: 0;
+  width: 100%; height: 30px;
 }
 
 .left-nav {
   position:absolute;
-  top : 0;
-  bottom : 0;
+  top : 30px; bottom : 0;
   width : 200px;
   overflow-y: scroll;
   background : #000;
@@ -31,17 +15,13 @@ ul, li {
 
 .main-panel {
   position:absolute;
-  top : 0;
-  bottom : 0;
-  left : 220px;
-  right : 0;
+  top : 30px; bottom : 0; left : 220px; right : 0;
   background : #ccc;
 }
 
 .preview-container {
   position : absolute;
-  top : 30px;
-  right : 0;
+  bottom : 0; right : 0;
   height : 256px;
   width : 256px;
   background : white;
@@ -138,120 +118,6 @@ ul, li {
   float: left;
 }
 
-.tool-paint-bucket .drawing-canvas-container:hover {
-  cursor: url(../img/tools/cursors/paint-bucket.png) 18 17, pointer;
-}
-
-.tool-pen .drawing-canvas-container:hover {
-  cursor: url(../img/tools/cursors/pen.png) 7 21, pointer;
-}
-
-.tool-eraser .drawing-canvas-container:hover {
-  cursor: url(../img/tools/cursors/eraser.png) 5 21, pointer;
-}
-
-.tool-stroke .drawing-canvas-container:hover {
-  cursor: url(../img/tools/cursors/pen.png) 5 21, pointer;
-}
-
-.tool-rectangle .drawing-canvas-container:hover {
-  cursor: url(../img/tools/cursors/rectangle.png) 4 21, pointer;
-}
-
-
-/** 
- * Tool section:
- */
-
- .color-tool {
-  
- }
-
-.palette .palette-color {
-  cursor: pointer;
-  display : inline-block;
-  height : 20px;
-  width : 20px;
-  margin : 5px;
-}
-
-.palette .palette-color.transparent-color {
-  background-color: white;
-  height : 16px;
-  width : 16px;
-  border: 2px solid #000;
-
-  background-image: -webkit-gradient(
-    linear,
-    left top,
-    right bottom,
-    color-stop(0, #fff),
-    color-stop(0.45, #fff),
-    color-stop(0.5, #ff0000),
-    color-stop(0.55, #fff),
-    color-stop(1, #fff)
-  );
-  background-image: -moz-linear-gradient(
-      left top,
-      #fff 0%,
-      #fff 45%,
-      #f00 50%,
-      #fff 55%,
-      #fff 100%
-  );
-}
-
-.tools-container {
-  float: left;
-}
-
-.tools-container .tool-icon {
-  display: block;
-  float: left;
-  margin-right: 2px;
-}
-
-.tool-icon {
-  width: 30px;
-  height: 30px;
-  border: 5px solid #fff;
-  background-color: #fff
-}
-
-.tool-icon:hover {
-  border-color: #;
-}
-
-.tool-icon:hover {
-  cursor: pointer;
-  border: 5px solid #eee;
-}
-
-.tool-icon.selected {
-  cursor: auto;
-  border: 5px solid #ddd;
-}
-
-.tool-icon.tool-pen {
-  background: #fff url(../img/tools/icons/pen.png) 3px 3px no-repeat;
-}
-
-.tool-icon.tool-paint-bucket {
-  background: #fff url(../img/tools/icons/paint-bucket.png) 3px 3px no-repeat;
-}
-
-.tool-icon.tool-eraser {
-  background: #fff url(../img/tools/icons/eraser.png) 3px 3px no-repeat;
-}
-
-.tool-icon.tool-stroke {
-  background: #fff url(../img/tools/icons/stroke.png) 3px 3px no-repeat;
-}
-
-.tool-icon.tool-rectangle {
-  background: #fff url(../img/tools/icons/rectangle.png) 3px 3px no-repeat;
-}
-
 #preview-fps {
   width : 200px;
 }
@@ -260,27 +126,26 @@ ul, li {
  * User messages 
  */
 .user-message {
-    position: fixed;
-    bottom: 0;
-    left: 40%;
+    position: absolute;
+    top: 2px;
+    right: 0;
     background-color: #F9EDBE;
-    padding: 7px 22px;
-    padding-right: 42px;
+    padding: 4px 12px;
+    padding-right: 20px;
     border-top-left-radius: 7px;
-    border-top-right-radius: 7px;
-    font-family: ‘Arial Black’, Gadget, sans-serif;
+    border-bottom-left-radius: 7px;
+    border-right: 0;
     color: #222;
     border: #F0C36D 1px solid;
-    border-bottom: 0;
     font-weight: bold;
-    font-size: 14px; 
+    font-size: 13px; 
     z-index: 10000;
 }
 
 .user-message .close {
   position: absolute;
-  top: 3px;
-  right: 6px;
+  top: 0px;
+  right: 5px;
   color: gray;
   font-weight: bold;
   cursor: pointer;

css/tools.css

@@ -0,0 +1,129 @@
+.tools-container {}
+
+.tools-group {
+    float: left;
+    height: 30px;
+    border-right: 1px solid #ccc;
+    padding: 0 3px;
+}
+
+.tool-icon {
+  float: left;
+  width: 30px;
+  height: 30px;
+  background-color: transparent;
+  background-repeat: no-repeat;
+  background-position: 7px 7px;
+}
+
+.tool-icon.tool-save {
+  background-image: url(../img/tools/icons/save.png);
+}
+
+.tool-icon.tool-add-frame {
+  background-image: url(../img/tools/icons/add-frame.png);
+}
+
+.tool-icon.tool-pen {
+  background-image: url(../img/tools/icons/pen.png);
+}
+
+.tool-icon.tool-paint-bucket {
+  background-image: url(../img/tools/icons/paint-bucket.png);
+}
+
+.tool-icon.tool-eraser {
+  background-image: url(../img/tools/icons/eraser.png);
+}
+
+.tool-icon.tool-stroke {
+  background-image: url(../img/tools/icons/stroke.png);
+}
+
+.tool-icon.tool-rectangle {
+  background-image: url(../img/tools/icons/rectangle.png);
+}
+
+/*.tool-icon.tool-palette {
+  background-image: url(../img/tools/icons/color-palette.png);
+}*/
+
+.tool-paint-bucket .drawing-canvas-container:hover {
+  cursor: url(../img/tools/cursors/paint-bucket.png) 18 17, pointer;
+}
+
+.tool-pen .drawing-canvas-container:hover {
+  cursor: url(../img/tools/cursors/pen.png) 7 21, pointer;
+}
+
+.tool-eraser .drawing-canvas-container:hover {
+  cursor: url(../img/tools/cursors/eraser.png) 5 21, pointer;
+}
+
+.tool-stroke .drawing-canvas-container:hover {
+  cursor: url(../img/tools/cursors/pen.png) 5 21, pointer;
+}
+
+.tool-rectangle .drawing-canvas-container:hover {
+  cursor: url(../img/tools/cursors/rectangle.png) 4 21, pointer;
+}
+
+.tool-icon.selected {
+  cursor: auto;
+  background-color: #eee;
+}
+
+.tool-icon:hover {
+  cursor: pointer;
+  background-color: #eee;
+}
+
+.tool-color-picker input {
+  width: 12px; height: 12px;
+  border: 1px solid black;
+  padding: 1px;
+  background: white;
+  margin: 7px 0 0 7px;
+  cursor: pointer;
+}
+
+.tool-palette {
+    width: auto;
+}
+.tool-palette .palette li {
+    float: left;
+}
+
+.palette .palette-color {
+  cursor: pointer;
+  display : inline-block;
+  height : 20px;
+  width : 20px;
+  margin : 5px;
+}
+
+.palette .palette-color.transparent-color {
+  background-color: white;
+  height : 16px;
+  width : 16px;
+  border: 2px solid #000;
+
+  background-image: -webkit-gradient(
+    linear,
+    left top,
+    right bottom,
+    color-stop(0, #fff),
+    color-stop(0.45, #fff),
+    color-stop(0.5, #ff0000),
+    color-stop(0.55, #fff),
+    color-stop(1, #fff)
+  );
+  background-image: -moz-linear-gradient(
+      left top,
+      #fff 0%,
+      #fff 45%,
+      #f00 50%,
+      #fff 55%,
+      #fff 100%
+  );
+}

index.html

@@ -9,44 +9,59 @@
   <meta name="author" content="Julian Descottes">
   
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" href="css/reset.css">
   <link rel="stylesheet" href="css/style.css">
+  <link rel="stylesheet" href="css/tools.css">
   
   
 </head>
 <body>
-  <div class='debug left-nav'>
 
-    <!-- Frame actions: -->
-    <button onclick="piskel.storeSheet()" class="action-button">Save Framesheet</button>
-    <button id='add-frame-button' class="action-button">
-      Add a Frame
-    </button>
+  <!-- Tool section: -->
+  <div id="tools-container" class="tools-container">
 
-    <!-- List of frames: -->
-    <ul id="preview-list"></ul>
-  </div>
-  <div class='main-panel'>
+    <ul class="tools-group">
+      <li class="tool-icon tool-save" data-tool-id="tool-save" title="Save" onclick="piskel.storeSheet()"></li>
+      <li class="tool-icon tool-add-frame" id="add-frame-button" data-tool-id="tool-add-frame" title="Add a frame"></li>
+    </ul>
 
-    <!-- Drawing area: -->
-    <div id="drawing-canvas-container" class="drawing-canvas-container canvas-container">
-      <div class="canvas-background"></div>
-    </div>
-
-    <!-- Tool section: -->
-    <div id="tools-container" class="tools-container">
-      <div class="tool-icon tool-pen" data-tool-id="tool-pen" title="Pen tool"></div>
-      <div class="tool-icon tool-eraser" data-tool-id="tool-eraser" title="Eraser tool"></div>
-      <div class="tool-icon tool-paint-bucket" data-tool-id="tool-paint-bucket" title="Bucket tool"></div>
-      <div class="tool-icon tool-stroke" data-tool-id="tool-stroke" title="Stroke tool"></div>
-      <div class="tool-icon tool-rectangle" data-tool-id="tool-rectangle" title="Rectangle tool"></div>
-      
-      <div class="color-tool">
-        <input id="color-picker" class="color {hash:true}" type="text" value=""/>
-        
+    <ul class="tools-group">
+      <li class="tool-icon tool-pen" data-tool-id="tool-pen" title="Pen tool"></li>
+      <li class="tool-icon tool-eraser" data-tool-id="tool-eraser" title="Eraser tool"></li>
+      <li class="tool-icon tool-paint-bucket" data-tool-id="tool-paint-bucket" title="Bucket tool"></li>
+      <li class="tool-icon tool-stroke" data-tool-id="tool-stroke" title="Stroke tool"></li>
+      <li class="tool-icon tool-rectangle" data-tool-id="tool-rectangle" title="Rectangle tool"></li>
+    </ul>
+    
+    <ul class="tools-group">
+      <li class="tool-icon tool-palette" data-tool-id="tool-palette" title="Color palette">
         <ul id="palette" class="palette">
           <span class="palette-color transparent-color" data-color="TRANSPARENT" title="Transparent"></span>
         </ul>
-      </div>
+      </li>
+      <li class="tool-icon tool-color-picker">
+        <input id="color-picker" class="color {hash:true}" type="text" value="" />
+      </li>
+    </ul>
+
+    <ul class="tools-group">
+      <li class="tool-preview-fps">
+        <input id="preview-fps" type="range" min="1" max="24" value="12" style="width:200px;"/>
+        <span id="display-fps">12 fps</span>
+      </li>
+    </ul>
+  
+  </div>
+
+  <div class='left-nav'>
+    <!-- List of frames: -->
+    <ul id="preview-list"></ul>
+  </div>
+
+  <div class='main-panel'>
+    <!-- Drawing area: -->
+    <div id="drawing-canvas-container" class="drawing-canvas-container canvas-container">
+      <div class="canvas-background"></div>
     </div>
 
     <!-- Animation preview: -->
@@ -54,10 +69,6 @@
       <div id='preview-canvas-container' class="canvas-container">
         <div class="canvas-background"></div>
       </div>
-      <div>
-        <input id="preview-fps" type="range" min="1" max="24" value="12" style="width:200px;"/>
-        <span id="display-fps">12 fps</span>
-      </div>
     </div>
   </div>
   <div id="cursorInfo"></div>
@@ -91,3 +102,4 @@
   <script src="js/piskel.js"></script>
 </body>
 </html>
+

js/piskel.js

@@ -450,8 +450,10 @@ $.namespace("pskl");
 
       xhr.send(formData);
 
-      event.stopPropagation();
-      event.preventDefault();
+      if(event) {
+        event.stopPropagation();
+        event.preventDefault();
+      }
       return false;
     }
   };