flynx/ImageGrid
1
1
Fork 0
mirror of https://github.com/flynx/ImageGrid.git synced 2025-10-31 11:20:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

now user flipping is relative to user and not the image (more intuitive)...

Browse Source 
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
Alex A. Naanou 2013-06-04 21:45:36 +04:00
parent b5fb626bfe
commit 9d574a459c
2 changed files with 23 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
ui/keybindings.js
View File

@ -374,8 +374,26 @@ var KEYBOARD_CONFIG = {
reverseImageOrder()
}),
},
H: doc('Flip image horizontally', function(){ flipHorizontal() }),
V: doc('Flip image vertically', function(){ flipVertical() }),
H: doc('Flip image horizontally',
function(){
var o = getImage().attr('orientation')
// need to rotate relative to user, not relative to image...
if(o == 90 || o == 270){
flipVertical()
} else {
flipHorizontal()
}
}),
V: doc('Flip image vertically',
function(){
var o = getImage().attr('orientation')
// need to rotate relative to user, not relative to image...
if(o == 90 || o == 270){
flipHorizontal()
} else {
flipVertical()
}
}),
// zooming...

19
ui/layout.less
View File

@ -381,26 +381,25 @@ body {
.image[orientation="90"] .inline-image-info {
top: auto;
left: 100%;
.origin(bottom, left);
.rotate(-90deg);
}
.image[orientation="180"] .inline-image-info {
top: 0px;
bottom: auto;
.rotate(180deg);
}
.image[orientation="270"] .inline-image-info {
top: auto;
left: auto;
right: 100%;
.origin(bottom, right);
.rotate(90deg);
}
/* compensate for flipping... */
/* XXX START: I hate this code, will think if a better way to do this... */
.image:not([orientation="90"])[flipped*="horizontal"] .inline-image-info {
.flipped-horizontally;
}
@ -409,7 +408,6 @@ body {
bottom: 100%;
left: -100%;
right: auto;
.origin(bottom, right);
.transform(90deg, -1, 1);
}
@ -418,7 +416,6 @@ body {
bottom: 100%;
left: 0px;
right: auto;
.origin(bottom, right);
.transform(180deg, -1, 1);
@ -428,12 +425,10 @@ body {
bottom: 0px;
left: 0px;
right: auto;
.origin(bottom, right);
.transform(270deg, -1, 1);
}
.image[flipped*="vertical"] .inline-image-info {
top: 0px;
bottom: auto;
@ -444,7 +439,6 @@ body {
bottom: 100%;
left: 100%;
right: auto;
.origin(bottom, left);
.transform(-270deg, 1, -1);
}
@ -453,7 +447,6 @@ body {
bottom: 0px;
left: -100%;
right: auto;
.origin(bottom, right);
.transform(180deg, 1, -1);
}
@ -462,12 +455,10 @@ body {
bottom: 100%;
left: -100%;
right: auto;
.origin(bottom, right);
.transform(270deg, 1, -1);
}
.image[flipped*="vertical"][flipped*="horizontal"] .inline-image-info {
top: 0px;
bottom: auto;
@ -478,7 +469,6 @@ body {
bottom: 0px;
left: -100%;
right: auto;
.origin(bottom, right);
.transform(-90deg, -1, -1);
}
@ -487,7 +477,6 @@ body {
bottom: 0px;
left: auto;
right: auto;
.origin(bottom, right);
.transform(180deg, -1, -1);
}
@ -496,12 +485,10 @@ body {
bottom: 100%;
left: auto;
right: auto;
.origin(bottom, right);
.transform(90deg, -1, -1);
}
/* XXX END */
.overlay-info {