From aab21de9239fcdf0ec53ed24a7034dcfd77f01d8 Mon Sep 17 00:00:00 2001
From: "Alex A. Naanou" <alex.nanou@gmail.com>
Date: Wed, 17 Jan 2018 03:58:13 +0300
Subject: [PATCH] more tweaks...

Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
---
 ui (gen4)/experiments/image-crop-edit.html | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/ui (gen4)/experiments/image-crop-edit.html b/ui (gen4)/experiments/image-crop-edit.html
index f05aaff6..d30f6da6 100755
--- a/ui (gen4)/experiments/image-crop-edit.html	
+++ b/ui (gen4)/experiments/image-crop-edit.html	
@@ -19,7 +19,14 @@ input[type=radio] {
 	display: none;
 }
 input:not(:checked) ~ * {
-	color: silver;
+	opacity: 0.3;
+}
+input:hover:not(:checked) ~ * {
+	opacity: 0.8;
+}
+input:not(:checked) ~ sub:hover,
+input:not(:checked) ~ sub {
+	opacity: 0.3;
 }
 
 .material-icons {
@@ -119,7 +126,6 @@ function setRatio(ratio){
 		.data('uiResizable')._aspectRatio = ratio
 
 	if(ratio === false){
-		$('#lock-ratio')[0].checked = false
 		return
 	}
 
@@ -153,17 +159,19 @@ function flip(){
 	}
 }
 
-function toggleLock(){
+function toggleLock(m){
 	var crop = $('.crop')
 	var r = crop.resizable("option", "aspectRatio")
 
-	if(r === false){
+	if(m === true || r === false){
 		var w = crop.width()
 		var h = crop.height()
 
+		$('#lock-ratio')[0].checked = true
 		setRatio(w/h)
 
 	} else {
+		$('#lock-ratio')[0].checked = false
 		setRatio(false)
 	}
 }
@@ -203,6 +211,7 @@ function toggleLock(){
 	<span>16:9</span>
 </label>
 <button onclick="flip()"><span class="material-icons">crop_rotate</span></button>
+<button><span class="material-icons">clear</span></button>
 
 <br>
 <pre>