From 49cd566d2ec217b74463d54d95851fbf6ff177d1 Mon Sep 17 00:00:00 2001
From: "Alex A. Naanou" <alex.nanou@gmail.com>
Date: Sun, 9 Jun 2013 17:34:24 +0400
Subject: [PATCH] added size classes to update paramiters depending on
 magnification -- if we'll use this more often will need a more flexible
 system...

Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
---
 ui/layout.css  | 17 +++++++++++++++++
 ui/layout.less | 15 +++++++++++++++
 ui/setup.js    | 16 ++++++++++++++++
 3 files changed, 48 insertions(+)

diff --git a/ui/layout.css b/ui/layout.css
index fe064d99..7da252eb 100644
--- a/ui/layout.css
+++ b/ui/layout.css
@@ -848,6 +848,23 @@ body {
 .dark.viewer .overlay-block .background {
   background: #0a0a0a;
 }
+.large.marks-visible.viewer:not(.single-image-mode) .current.image {
+  border-width: 3px;
+}
+.large.marks-visible.viewer:not(.single-image-mode) .marked.image:after {
+  -webkit-transform: rotate(0deg) scaleY(0.7) scaleX(0.7);
+  -moz-transform: rotate(0deg) scaleY(0.7) scaleX(0.7);
+  -o-transform: rotate(0deg) scaleY(0.7) scaleX(0.7);
+  -ms-transform: rotate(0deg) scaleY(0.7) scaleX(0.7);
+  transform: rotate(0deg) scaleY(0.7) scaleX(0.7);
+}
+.small.marks-visible.viewer:not(.single-image-mode) .marked.image:after {
+  -webkit-transform: rotate(0deg) scaleY(1.8) scaleX(1.8);
+  -moz-transform: rotate(0deg) scaleY(1.8) scaleX(1.8);
+  -o-transform: rotate(0deg) scaleY(1.8) scaleX(1.8);
+  -ms-transform: rotate(0deg) scaleY(1.8) scaleX(1.8);
+  transform: rotate(0deg) scaleY(1.8) scaleX(1.8);
+}
 /********************************************************* Overlay ***/
 .overlay-block {
   display: none;
diff --git a/ui/layout.less b/ui/layout.less
index 3eaa5566..ff581d71 100755
--- a/ui/layout.less
+++ b/ui/layout.less
@@ -37,6 +37,9 @@
 	-ms-transform: rotate(@deg) scaleY(@scaleY) scaleX(@scaleX);
 	transform: rotate(@deg) scaleY(@scaleY) scaleX(@scaleX);
 }
+.scale (@scale) {
+	.transform(0deg, @scale, @scale)
+}
 .rotate (@deg) {
 	.transform(@deg)
 }
@@ -843,6 +846,18 @@ body {
 }
 
 
+.large.marks-visible.viewer:not(.single-image-mode) .current.image {
+	border-width: 3px;
+}
+.large.marks-visible.viewer:not(.single-image-mode) .marked.image:after {
+	.scale(0.7);
+}
+
+.small.marks-visible.viewer:not(.single-image-mode) .marked.image:after {
+	.scale(1.8);
+}
+
+
 
 /********************************************************* Overlay ***/
 
diff --git a/ui/setup.js b/ui/setup.js
index 15306a7c..84aeb96e 100755
--- a/ui/setup.js
+++ b/ui/setup.js
@@ -187,6 +187,22 @@ function setupDataBindings(viewer){
 				}
 			}
 
+			// update size classes...
+			// XXX make thresholds global...
+			if(n <= 2.5){
+				$('.viewer')
+					.removeClass('small')
+					.addClass('large')
+			} else if (n >= 6) {
+				$('.viewer')
+					.addClass('small')
+					.removeClass('large')
+			} else {
+				$('.viewer')
+					.removeClass('small')
+					.removeClass('large')
+			}
+
 			// update previews...
 			updateImages()
 		})