From 25d5fcfc60c5f9b4004213089f6cc1b28a19d6a4 Mon Sep 17 00:00:00 2001
From: "Alex A. Naanou" <alex.nanou@gmail.com>
Date: Fri, 13 May 2016 02:45:54 +0300
Subject: [PATCH] cleanup and some CSS tweaking...

Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
---
 ui (gen4)/css/layout.less  | 52 ++++++++++++++++++++------------------
 ui (gen4)/features/ui.js   |  4 +++
 ui (gen4)/lib/transform.js | 31 +++++++++++++++--------
 3 files changed, 53 insertions(+), 34 deletions(-)

diff --git a/ui (gen4)/css/layout.less b/ui (gen4)/css/layout.less
index 91510764..0a1cffb1 100755
--- a/ui (gen4)/css/layout.less	
+++ b/ui (gen4)/css/layout.less	
@@ -4,23 +4,22 @@
 
 /******************************************************** Settings ***/
 
-@image-tile-size: 300px;
-// XXX current used version of node-webkit (0.8) is buggy with this...
-//	-- ribbons are not sized horizpntally correctly...
-// XXX these need the marks to be sized in a relative manner...
-//@image-tile-size: 100vmin;
+//@image-tile-size: 300px;
+//@image-tile-size: 600px;
+// Experimental...
+@image-tile-size: 50vmin;
 //@image-tile-size: 100vmax;
 
+@image-mark-size: @image-tile-size/60;
+
 // these are relative to image tile size...
 //@image-border: @image-tile-size/200;
 @image-border: @image-tile-size/80;
 @ribbon-margin: @image-tile-size/30;
 @ribbon-mark-offset: @image-tile-size/200;
 
-
-// these are relative to dpi/scale...
-@ribbon-mark-size: 10px;
-@single-image-indicator-size: 10px;
+@ribbon-mark-size: @image-tile-size/30;
+@single-image-indicator-size: @image-tile-size/30;
 
 
 
@@ -298,7 +297,7 @@ button:hover {
 	position: absolute;
 	top: 0px;
 	right: 0px;
-	z-index: 9000;
+	z-index: 4000;
 
 	opacity: 0.4;
 
@@ -851,22 +850,27 @@ stretching in width... */
 	font-size: 0pt;
 	border: none;
 
-	width: 5px;
-	height: 5px;
+	width: @image-mark-size;
+	height: @image-mark-size;
 
 	top: auto;
-	bottom: 10px;
+	bottom: @image-tile-size/30;
 	left: auto;
-	right: 10px;
+	right: @image-tile-size/30;
 
-	box-shadow: 1px 1px 7px -1.3px rgba(0,0,0,0.8);
+	box-shadow: 
+		@image-tile-size/300
+		@image-tile-size/300
+		@image-tile-size/43
+		-@image-tile-size/231
+		rgba(0,0,0,0.8);
 
 	box-sizing: border-box;
 	border-radius: 50%;
 
 
 	background: blue;
-	left: -25px;
+	left: -@image-tile-size/12;
 }
 .marks-visible.single-image-mode.viewer .mark:before,
 .marks-visible.single-image-mode.viewer .mark:after {
@@ -875,28 +879,28 @@ stretching in width... */
 
 .mark.bookmark:after {
 	background: yellow;
-	left: -15px;
+	left: -@image-tile-size/20;
 }
 
 
 /* the selected tick... */
 .mark.selected:before,
 .mark.selected:after {
-	top: 10px;
-	left: -20px;
+	top: @image-tile-size/30;
+	left: -@image-tile-size/15;
 	bottom: auto;
 
-	border-radius: 3px;
+	border-radius: @image-tile-size/100;
 
 	.rotate(-45deg);
 }
 .mark.selected:before {
-	width: 3px;
-	height: 6px;
+	width: @image-tile-size/100;
+	height: @image-tile-size/50;
 }
 .mark.selected:after {
-	width: 12px;
-	height: 3px;
+	width: @image-tile-size/25;
+	height: @image-tile-size/100;
 }
 
 
diff --git a/ui (gen4)/features/ui.js b/ui (gen4)/features/ui.js
index e5768993..6764e7f7 100755
--- a/ui (gen4)/features/ui.js	
+++ b/ui (gen4)/features/ui.js	
@@ -1803,6 +1803,7 @@ var ControlActions = actions.Actions({
 	},
 
 
+	// XXX this is really slow on IE...
 	toggleRibbonPanHandling: ['Interface/Toggle ribbon pan handling',
 		toggler.Toggler(null,
 			function(){ 
@@ -1871,6 +1872,9 @@ var ControlActions = actions.Actions({
 
 
 							// update ribbon when "pulling" with two fingers...
+							//
+							// NOTE: this only happens when number of fingers
+							// 		changes, thus no lag should be noticeable...
 							if(g.pointers.length != data.pointers){
 								data.pointers = g.pointers.length
 
diff --git a/ui (gen4)/lib/transform.js b/ui (gen4)/lib/transform.js
index 7f6c827c..2af86d0d 100755
--- a/ui (gen4)/lib/transform.js	
+++ b/ui (gen4)/lib/transform.js	
@@ -174,10 +174,18 @@ var transformEditor = function(){
 				: elem instanceof Array ? elem
 				: [elem]
 
+			var e
+			for(var i = 0; i < elem.length; i++){
+				e = elem[i]
+				e.style.transformOrigin = origin.join ? origin.join(' ') : origin
+				e.style.transform = transform
+			}
+			/*
 			elem.forEach(function(e){
 				e.style.transformOrigin = origin.join ? origin.join(' ') : origin
 				e.style.transform = transform
 			})
+			*/
 
 			return this
 		},
@@ -468,8 +476,8 @@ window.transformEditor = TransformEditor
 
 // jQuery API for the TransformEditor...
 jQuery.fn.transform = function(){
-	var that = this
-	var elem = $(this)[0]
+	var e = $(this)
+	var elem = e[0]
 
 	var args = args2array(arguments)
 	// normalize...
@@ -496,19 +504,22 @@ jQuery.fn.transform = function(){
 
 	// set state...
 	} else {
-		// load user inputs...
-		Object.keys(args).forEach(function(k){
-			if(!(k in transform)){
-				return
-			}
+		var v
 
-			transform[k].apply(transform, args[k] instanceof Array ? args[k] : [args[k]])
-		})
+		// load user inputs...
+		for(var k in args){
+			if(!(k in transform)){
+				continue
+			}
+			v = args[k]
+
+			transform[k].apply(transform, v instanceof Array ? v : [v])
+		}
 
 		transform.toElem(this)
 	}
 
-	return $(this)
+	return e
 }