mirror of
https://github.com/flynx/ImageGrid.git
synced 2025-10-31 03:10:07 +00:00
cleanup and some CSS tweaking...
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
parent
5d9bbcd713
commit
25d5fcfc60
@ -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;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -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
|
||||
|
||||
|
||||
@ -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
|
||||
}
|
||||
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user