mirror of
https://github.com/flynx/ImageGrid.git
synced 2025-11-03 21:00:14 +00:00
more tweaking of dialogs, still a bit messy but appear to be full working + added image info in dialog...
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
parent
5c0741b99a
commit
5fb722d036
@ -222,7 +222,8 @@ $(function(){
|
||||
*/
|
||||
|
||||
// we have an image file...
|
||||
if((DATA_ATTR + '_BASE_URL') in localStorage){
|
||||
if((DATA_ATTR + '_BASE_URL') in localStorage
|
||||
&& !/.[\/\\]*/.test(localStorage[DATA_ATTR + '_BASE_URL'])){
|
||||
BASE_URL = localStorage[DATA_ATTR + '_BASE_URL']
|
||||
|
||||
var loading = statusNotify(loadDir(BASE_URL))
|
||||
|
||||
@ -80,6 +80,7 @@ var KEYBOARD_CONFIG = {
|
||||
}),
|
||||
Esc: doc('Close dialog',
|
||||
function(){
|
||||
//getOverlay($('.viewer')).trigger('close')
|
||||
hideOverlay($('.viewer'))
|
||||
return false
|
||||
}),
|
||||
@ -573,7 +574,10 @@ var KEYBOARD_CONFIG = {
|
||||
default: doc('Toggle image info display',
|
||||
function(){ toggleImageInfo() }),
|
||||
shift: doc('Show current image info',
|
||||
function(){ toggleImageInfoDrawer() }),
|
||||
function(){
|
||||
showImageInfo()
|
||||
//toggleImageInfoDrawer()
|
||||
}),
|
||||
alt: doc('Toggle inline image info display',
|
||||
function(){
|
||||
toggleInlineImageInfo()
|
||||
|
||||
@ -20,6 +20,14 @@ body {
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
}
|
||||
input,
|
||||
button {
|
||||
border: solid silver 1px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
button:hover {
|
||||
box-shadow: 0px 0px 7px 0px black;
|
||||
}
|
||||
/************************************************************** UI ***/
|
||||
.title-bar {
|
||||
display: block;
|
||||
@ -840,14 +848,31 @@ body {
|
||||
.light.viewer .overlay-block .background {
|
||||
background: white;
|
||||
}
|
||||
.light.viewer .overlay-block:hover .background:after {
|
||||
color: black;
|
||||
}
|
||||
.gray.viewer,
|
||||
.gray.viewer .overlay-block .background {
|
||||
background: #333;
|
||||
}
|
||||
.gray.viewer .overlay-block .dialog {
|
||||
background: #555;
|
||||
}
|
||||
.light.viewer .overlay-block:hover .background:after {
|
||||
color: silver;
|
||||
opacity: 0.4;
|
||||
}
|
||||
.dark.viewer,
|
||||
.dark.viewer .overlay-block .background {
|
||||
background: #0a0a0a;
|
||||
}
|
||||
.dark.viewer .overlay-block .dialog {
|
||||
background: #333;
|
||||
}
|
||||
.light.viewer .overlay-block:hover .background:after {
|
||||
color: gray;
|
||||
opacity: 0.4;
|
||||
}
|
||||
.large.viewer:not(.single-image-mode) .current.image {
|
||||
border-width: 3px;
|
||||
}
|
||||
@ -897,6 +922,17 @@ body {
|
||||
.overlay-block .background {
|
||||
opacity: 0.7;
|
||||
}
|
||||
.overlay-block:hover .background:after {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
content: 'Click background to close.';
|
||||
height: auto;
|
||||
width: auto;
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
color: white;
|
||||
opacity: 0.7;
|
||||
}
|
||||
.overlay-block .dialog {
|
||||
display: inline-block;
|
||||
min-height: 50px;
|
||||
@ -909,6 +945,23 @@ body {
|
||||
vertical-align: center;
|
||||
box-shadow: 0px 5px 50px 0px black;
|
||||
}
|
||||
/* tables in dialogs... */
|
||||
.overlay-block .dialog table {
|
||||
color: white;
|
||||
font-size: small;
|
||||
-moz-user-select: auto;
|
||||
-webkit-user-select: auto;
|
||||
-o-user-select: auto;
|
||||
-ms-user-select: auto;
|
||||
user-select: auto;
|
||||
}
|
||||
.overlay-block .dialog table tr td:first-child {
|
||||
text-align: right;
|
||||
font-weight: bold;
|
||||
}
|
||||
.overlay-block .dialog table tr td:last-child {
|
||||
color: silver;
|
||||
}
|
||||
/************************************************************ Help ***/
|
||||
/* XXX make this more generic, and not just for the keyboard... */
|
||||
/* this is for sliding stuff */
|
||||
|
||||
@ -74,6 +74,15 @@ body {
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
input,
|
||||
button {
|
||||
border: solid silver 1px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
button:hover {
|
||||
box-shadow: 0px 0px 7px 0px black;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/************************************************************** UI ***/
|
||||
@ -834,16 +843,35 @@ body {
|
||||
.light.viewer .overlay-block .background {
|
||||
background: white;
|
||||
}
|
||||
.light.viewer .overlay-block .dialog {
|
||||
}
|
||||
.light.viewer .overlay-block:hover .background:after {
|
||||
color: black;
|
||||
}
|
||||
|
||||
.gray.viewer,
|
||||
.gray.viewer .overlay-block .background {
|
||||
background: #333;
|
||||
}
|
||||
.gray.viewer .overlay-block .dialog {
|
||||
background: #555;
|
||||
}
|
||||
.light.viewer .overlay-block:hover .background:after {
|
||||
color: silver;
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.dark.viewer,
|
||||
.dark.viewer .overlay-block .background {
|
||||
background: #0a0a0a;
|
||||
}
|
||||
.dark.viewer .overlay-block .dialog {
|
||||
background: #333;
|
||||
}
|
||||
.light.viewer .overlay-block:hover .background:after {
|
||||
color: gray;
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
|
||||
.large.viewer:not(.single-image-mode) .current.image {
|
||||
@ -893,6 +921,20 @@ body {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.overlay-block:hover .background:after {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
content: 'Click background to close.';
|
||||
height: auto;
|
||||
width: auto;
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
|
||||
color: white;
|
||||
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
|
||||
.overlay-block .dialog {
|
||||
display: inline-block;
|
||||
@ -912,6 +954,22 @@ body {
|
||||
box-shadow: 0px 5px 50px 0px black;
|
||||
}
|
||||
|
||||
/* tables in dialogs... */
|
||||
|
||||
.overlay-block .dialog table {
|
||||
color: white;
|
||||
font-size: small;
|
||||
|
||||
.user-select(auto);
|
||||
}
|
||||
.overlay-block .dialog table tr td:first-child {
|
||||
text-align: right;
|
||||
font-weight: bold;
|
||||
}
|
||||
.overlay-block .dialog table tr td:last-child {
|
||||
color: silver;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/************************************************************ Help ***/
|
||||
|
||||
57
ui/ui.js
57
ui/ui.js
@ -350,7 +350,7 @@ function showInOverlay(root, data){
|
||||
|
||||
dialog
|
||||
.append(data)
|
||||
.one('click', function(){
|
||||
.on('click', function(){
|
||||
event.stopPropagation()
|
||||
})
|
||||
overlay.find('.content')
|
||||
@ -358,6 +358,9 @@ function showInOverlay(root, data){
|
||||
overlay.trigger('close')
|
||||
hideOverlay(root)
|
||||
})
|
||||
.on('close accept', function(){
|
||||
//hideOverlay(root)
|
||||
})
|
||||
.append(container)
|
||||
}
|
||||
|
||||
@ -378,10 +381,11 @@ function hideOverlay(root){
|
||||
|
||||
/************************************************ Standard dialogs ***/
|
||||
|
||||
var _alert = alert
|
||||
function alert(){
|
||||
var res = $.Deferred()
|
||||
showInOverlay($('.viewer'), $('<span/>')
|
||||
.text(Array.apply(null, arguments).join(' ')))
|
||||
.html(Array.apply(null, arguments).join(' ')))
|
||||
.addClass('alert dialog')
|
||||
.on('close accept', function(){
|
||||
res.resolve()
|
||||
@ -390,17 +394,18 @@ function alert(){
|
||||
}
|
||||
|
||||
|
||||
function prompt(message, dfl){
|
||||
var _prompt = prompt
|
||||
function prompt(message, dfl, btn){
|
||||
btn = btn == null ? 'OK' : btn
|
||||
var root = $('.viewer')
|
||||
var res = $.Deferred()
|
||||
|
||||
var form = $('<div>'+
|
||||
'<div class="text"/>'+
|
||||
'<div class="text">'+message+'</div>'+
|
||||
'<input type="text" tabindex=1/>'+
|
||||
'<button tabindex=2>Done</button>'+
|
||||
'<button tabindex=2>'+btn+'</button>'+
|
||||
'</div>')
|
||||
form.find('.text')
|
||||
.text(message)
|
||||
|
||||
var overlay = showInOverlay(root, form)
|
||||
.addClass('prompt dialog')
|
||||
.on('close', function(){
|
||||
@ -408,7 +413,6 @@ function prompt(message, dfl){
|
||||
})
|
||||
.on('accept', function(){
|
||||
res.resolve(form.find('input').attr('value'))
|
||||
hideOverlay(root)
|
||||
})
|
||||
|
||||
form.find('button')
|
||||
@ -421,7 +425,9 @@ function prompt(message, dfl){
|
||||
input
|
||||
.focus()
|
||||
setTimeout(function(){
|
||||
input.attr('value', dfl == null ? '' : dfl)
|
||||
input
|
||||
.attr('value', dfl == null ? '' : dfl)
|
||||
.select()
|
||||
}, 100)
|
||||
|
||||
return res
|
||||
@ -434,6 +440,35 @@ function confirm(){
|
||||
*/
|
||||
|
||||
|
||||
/************************************************ Specific dialogs ***/
|
||||
|
||||
/*********************************************************************/
|
||||
// vim:set ts=4 sw=4 nowrap :
|
||||
function showImageInfo(){
|
||||
var gid = getImageGID(getImage())
|
||||
var r = getRibbonIndex(getRibbon())
|
||||
var data = IMAGES[gid]
|
||||
var orientation = data.orientation
|
||||
orientation = orientation == null ? 0 : orientation
|
||||
var flipped = data.flipped
|
||||
flipped = flipped == null ? '' : ', flipped '+flipped+'ly'
|
||||
var order = DATA.order.indexOf(gid)
|
||||
var name = data.path.split('/').pop()
|
||||
|
||||
alert('<div>'+
|
||||
'<h2>"'+ name +'"</h2>'+
|
||||
|
||||
'<table>'+
|
||||
'<tr><td>GID: </td><td>'+ gid +'</td></tr>'+
|
||||
'<tr><td>Path: </td><td>"'+ data.path +'"</td></tr>'+
|
||||
'<tr><td>Orientation: </td><td>'+ orientation +'°'+flipped+'</td></tr>'+
|
||||
'<tr><td>Order: </td><td>'+ order +'</td></tr>'+
|
||||
'<tr><td>Position (ribbon): </td><td>'+ (DATA.ribbons[r].indexOf(gid)+1) +
|
||||
'/'+ DATA.ribbons[r].length +'</td></tr>'+
|
||||
'<tr><td>Position (global): </td><td>'+ (order+1) +'/'+ DATA.order.length +'</td></tr>'+
|
||||
'</table>'+
|
||||
'</div>')
|
||||
}
|
||||
|
||||
|
||||
|
||||
/**********************************************************************
|
||||
* vim:set ts=4 sw=4 nowrap : */
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user