fixed filter and settings button position, initial zoom colorpicker, …

…fixed graphical swatch glitch

src/lib/colorpick.js

@@ -112,8 +112,10 @@ define(function(require, exports, module) {
 
             img.onload = function() {
                 ColorPicker.image = img;
+                var initZoom = ((canvas.width * canvas.height) / (img.width * img.height)) * 4;
+
+                ctx.scale(initZoom, initZoom);
                 ColorPicker.draw();
-                ColorPicker.zoom('x');
             };
         },
 
@@ -194,7 +196,7 @@ define(function(require, exports, module) {
             ColorPicker.draw();
 
         },
-        
+
         zoomWheel: function(event) {
 
             var delta = event.wheelDelta ? event.wheelDelta / 40 : event.detail ? -event.detail : 0;

styles/src/components/panelhead.less

@@ -1,5 +1,5 @@
 #swatcher-reset-filter {
-    margin: 0 0 0 -25px;
+    margin: -5px 0 0 -25px;
     font-size: 18px;
     background: transparent;    
     border: none;
@@ -11,19 +11,23 @@
 }
 
 #swatcher-filter {
-    margin: 0;
+    margin-top: 5px;
     height: 18px;
-    padding:2px 0 2px 5px;
+    padding: 2px 0 3px 5px;
 
 }
 
 .toolbar-right {
     position:absolute;
     right: 40px;
-    top: 5px;
+    top: 0px;
 }
 
-.settings-button {    
+.swatcher-settings-button {
+    margin-top: -4px !important;
+}
+
+.settings-button-icon {    
     padding: 4px 6px;
     background: @settings 0 0 no-repeat;
     width: 13px;

styles/src/components/swatches.less

@@ -18,29 +18,13 @@
     border-radius: 3px;
 } 
 
-.swatcher-colorwrap {    
-    border-top: 1px solid lighten(@dark-bc-secondary-btn-border,40%);
-    border-left: 1px solid lighten(@dark-bc-secondary-btn-border,40%);
-    border-right: 1px solid lighten(@dark-bc-primary-btn-border,40%);
-    border-bottom: 1px solid lighten(@dark-bc-primary-btn-border,40%);
+.swatcher-colorwrap {        
     float: left; 
     position: relative;
     transition: border-color 333ms ease-out;    
     font-size: 12px;
     overflow: hidden;
     background: url(@transBG);
-
-    .dark & {
-        border-top: 1px solid @dark-bc-secondary-btn-border;
-        border-left: 1px solid @dark-bc-secondary-btn-border;
-        border-right: 1px solid @dark-bc-primary-btn-border;
-        border-bottom: 1px solid @dark-bc-primary-btn-border;
-    }   
-
-    &:hover {
-        border: 1px solid @bc-btn-border-focused;
-    }
-
 }
 
 .swatcher-label {              

styles/swatcher.css

@@ -221,26 +221,13 @@
   border-radius: 3px;
 }
 .swatcher-colorwrap {
-  border-top: 1px solid #868686;
-  border-left: 1px solid #868686;
-  border-right: 1px solid #868686;
-  border-bottom: 1px solid #868686;
   float: left;
   position: relative;
   transition: border-color 333ms ease-out;
   font-size: 12px;
   overflow: hidden;
   background: url('images/bg-transparent.png');
 }
-.dark .swatcher-colorwrap {
-  border-top: 1px solid #202020;
-  border-left: 1px solid #202020;
-  border-right: 1px solid #202020;
-  border-bottom: 1px solid #202020;
-}
-.swatcher-colorwrap:hover {
-  border: 1px solid #2893ef;
-}
 .swatcher-label {
   display: none;
   position: absolute;
@@ -304,7 +291,7 @@
   line-height: 15px;
 }
 #swatcher-reset-filter {
-  margin: 0 0 0 -25px;
+  margin: -5px 0 0 -25px;
   font-size: 18px;
   background: transparent;
   border: none;
@@ -314,16 +301,19 @@
   color: #000;
 }
 #swatcher-filter {
-  margin: 0;
+  margin-top: 5px;
   height: 18px;
-  padding: 2px 0 2px 5px;
+  padding: 2px 0 3px 5px;
 }
 .toolbar-right {
   position: absolute;
   right: 40px;
-  top: 5px;
+  top: 0px;
+}
+.swatcher-settings-button {
+  margin-top: -4px !important;
 }
-.settings-button {
+.settings-button-icon {
   padding: 4px 6px;
   background: url('images/settings.svg') 0 0 no-repeat;
   width: 13px;