flynx/ImageGrid
1
1
Fork 0
mirror of https://github.com/flynx/ImageGrid.git synced 2025-11-01 11:50:07 +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() reverseImageOrder()
}), }),
}, },
H: doc('Flip image horizontally', function(){ flipHorizontal() }), H: doc('Flip image horizontally',
V: doc('Flip image vertically', function(){ flipVertical() }), 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... // zooming...

19
ui/layout.less
View File

@ -381,26 +381,25 @@ body {
.image[orientation="90"] .inline-image-info { .image[orientation="90"] .inline-image-info {
top: auto; top: auto;
left: 100%; left: 100%;
.origin(bottom, left); .origin(bottom, left);
.rotate(-90deg); .rotate(-90deg);
} }
.image[orientation="180"] .inline-image-info { .image[orientation="180"] .inline-image-info {
top: 0px; top: 0px;
bottom: auto; bottom: auto;
.rotate(180deg); .rotate(180deg);
} }
.image[orientation="270"] .inline-image-info { .image[orientation="270"] .inline-image-info {
top: auto; top: auto;
left: auto; left: auto;
right: 100%; right: 100%;
.origin(bottom, right); .origin(bottom, right);
.rotate(90deg); .rotate(90deg);
} }
/* compensate for flipping... */ /* 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 { .image:not([orientation="90"])[flipped*="horizontal"] .inline-image-info {
.flipped-horizontally; .flipped-horizontally;
} }
@ -409,7 +408,6 @@ body {
bottom: 100%; bottom: 100%;
left: -100%; left: -100%;
right: auto; right: auto;
.origin(bottom, right); .origin(bottom, right);
.transform(90deg, -1, 1); .transform(90deg, -1, 1);
} }
@ -418,7 +416,6 @@ body {
bottom: 100%; bottom: 100%;
left: 0px; left: 0px;
right: auto; right: auto;
.origin(bottom, right); .origin(bottom, right);
.transform(180deg, -1, 1); .transform(180deg, -1, 1);
@ -428,12 +425,10 @@ body {
bottom: 0px; bottom: 0px;
left: 0px; left: 0px;
right: auto; right: auto;
.origin(bottom, right); .origin(bottom, right);
.transform(270deg, -1, 1); .transform(270deg, -1, 1);
} }
.image[flipped*="vertical"] .inline-image-info { .image[flipped*="vertical"] .inline-image-info {
top: 0px; top: 0px;
bottom: auto; bottom: auto;
@ -444,7 +439,6 @@ body {
bottom: 100%; bottom: 100%;
left: 100%; left: 100%;
right: auto; right: auto;
.origin(bottom, left); .origin(bottom, left);
.transform(-270deg, 1, -1); .transform(-270deg, 1, -1);
} }
@ -453,7 +447,6 @@ body {
bottom: 0px; bottom: 0px;
left: -100%; left: -100%;
right: auto; right: auto;
.origin(bottom, right); .origin(bottom, right);
.transform(180deg, 1, -1); .transform(180deg, 1, -1);
} }
@ -462,12 +455,10 @@ body {
bottom: 100%; bottom: 100%;
left: -100%; left: -100%;
right: auto; right: auto;
.origin(bottom, right); .origin(bottom, right);
.transform(270deg, 1, -1); .transform(270deg, 1, -1);
} }
.image[flipped*="vertical"][flipped*="horizontal"] .inline-image-info { .image[flipped*="vertical"][flipped*="horizontal"] .inline-image-info {
top: 0px; top: 0px;
bottom: auto; bottom: auto;
@ -478,7 +469,6 @@ body {
bottom: 0px; bottom: 0px;
left: -100%; left: -100%;
right: auto; right: auto;
.origin(bottom, right); .origin(bottom, right);
.transform(-90deg, -1, -1); .transform(-90deg, -1, -1);
} }
@ -487,7 +477,6 @@ body {
bottom: 0px; bottom: 0px;
left: auto; left: auto;
right: auto; right: auto;
.origin(bottom, right); .origin(bottom, right);
.transform(180deg, -1, -1); .transform(180deg, -1, -1);
} }
@ -496,12 +485,10 @@ body {
bottom: 100%; bottom: 100%;
left: auto; left: auto;
right: auto; right: auto;
.origin(bottom, right); .origin(bottom, right);
.transform(90deg, -1, -1); .transform(90deg, -1, -1);
} }
/* XXX END */
.overlay-info { .overlay-info {