mirror of
https://github.com/flynx/ImageGrid.git
synced 2025-10-30 10:50:08 +00:00
added tooltip support to formDialog(..)...
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
parent
83572f5def
commit
24d90345f3
@ -103,28 +103,6 @@ if(window.CEF_dumpJSON != null){
|
||||
})
|
||||
}
|
||||
|
||||
window.toggleFullscreenMode = createCSSClassToggler(
|
||||
document.body,
|
||||
'.full-screen-mode',
|
||||
function(action){
|
||||
gui.Window.get().toggleFullscreen()
|
||||
})
|
||||
|
||||
window.closeWindow = function(){
|
||||
gui.Window.get().close()
|
||||
}
|
||||
window.showDevTools = function(){
|
||||
gui.Window.get().showDevTools()
|
||||
}
|
||||
window.reload = function(){
|
||||
gui.Window.get().reload()
|
||||
}
|
||||
window.setWindowTitle = function(text){
|
||||
var title = text +' - '+ APP_NAME
|
||||
gui.Window.get().title = title
|
||||
$('.title-bar .title').text(title)
|
||||
}
|
||||
|
||||
// preview generation...
|
||||
//
|
||||
// NOTE: this will add already existing previews to IMAGES[gid]...
|
||||
@ -253,6 +231,7 @@ if(window.CEF_dumpJSON != null){
|
||||
// ...need a way to jumpstart it again...
|
||||
// XXX check if we are leaking the tail...
|
||||
// XXX test progress...
|
||||
// ...gets collected but the structure is a tad too complex...
|
||||
// NOTE: this will remove the old deferred if it us resolved, thus
|
||||
// clearing the "log" of previous operations, unless keep_log
|
||||
// is set to true...
|
||||
@ -293,6 +272,29 @@ if(window.CEF_dumpJSON != null){
|
||||
return _PREVIW_CREATE_QUEUE
|
||||
}
|
||||
|
||||
// UI-specific...
|
||||
window.toggleFullscreenMode = createCSSClassToggler(
|
||||
document.body,
|
||||
'.full-screen-mode',
|
||||
function(action){
|
||||
gui.Window.get().toggleFullscreen()
|
||||
})
|
||||
|
||||
window.closeWindow = function(){
|
||||
gui.Window.get().close()
|
||||
}
|
||||
window.showDevTools = function(){
|
||||
gui.Window.get().showDevTools()
|
||||
}
|
||||
window.reload = function(){
|
||||
gui.Window.get().reload()
|
||||
}
|
||||
window.setWindowTitle = function(text){
|
||||
var title = text +' - '+ APP_NAME
|
||||
gui.Window.get().title = title
|
||||
$('.title-bar .title').text(title)
|
||||
}
|
||||
|
||||
// load UI stuff...
|
||||
$(function(){
|
||||
$('<div class="title-bar"/>')
|
||||
|
||||
@ -14,12 +14,16 @@
|
||||
.expanding-text:hover .hidden {
|
||||
display: inline;
|
||||
}
|
||||
[tooltip-top] {
|
||||
/* XXX cleanup and style...
|
||||
- make the arrow exact (like in .tooltip-right)
|
||||
- need to align correctly for really narrow elements...
|
||||
*/
|
||||
[tooltip] {
|
||||
position: relative;
|
||||
text-decoration: none;
|
||||
}
|
||||
[tooltip-top]:after {
|
||||
content: attr(tooltip-top);
|
||||
[tooltip]:after {
|
||||
content: attr(tooltip);
|
||||
position: absolute;
|
||||
bottom: 130%;
|
||||
left: 20%;
|
||||
@ -27,13 +31,15 @@
|
||||
padding: 5px 15px;
|
||||
color: black;
|
||||
border-radius: 10px;
|
||||
white-space: nowrap;
|
||||
white-space: pre;
|
||||
text-align: left;
|
||||
font-size: 10px;
|
||||
opacity: 0;
|
||||
-webkit-transition: all 0.4s ease;
|
||||
-moz-transition: all 0.4s ease;
|
||||
transition: all 0.4s ease;
|
||||
}
|
||||
[tooltip-top]:before {
|
||||
[tooltip]:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 0;
|
||||
@ -48,16 +54,41 @@
|
||||
left: 30%;
|
||||
bottom: 90%;
|
||||
}
|
||||
[tooltip-top]:hover:after {
|
||||
[tooltip]:hover:after {
|
||||
bottom: 100%;
|
||||
}
|
||||
[tooltip-top]:hover:before {
|
||||
[tooltip]:hover:before {
|
||||
bottom: 70%;
|
||||
}
|
||||
[tooltip-top]:hover:after,
|
||||
[tooltip-top]:hover:before {
|
||||
[tooltip]:hover:after,
|
||||
[tooltip]:hover:before {
|
||||
opacity: 1;
|
||||
}
|
||||
.tooltip-right[tooltip]:after {
|
||||
bottom: auto;
|
||||
top: -50%;
|
||||
left: 15px;
|
||||
}
|
||||
.tooltip-right[tooltip]:before {
|
||||
border-left: none;
|
||||
border-right: 5px solid #ffcb66;
|
||||
border-bottom: 5px solid transparent;
|
||||
border-top: 5px solid transparent;
|
||||
bottom: auto;
|
||||
left: 10px;
|
||||
top: 25%;
|
||||
}
|
||||
.tooltip-right[tooltip]:hover:after {
|
||||
bottom: auto;
|
||||
}
|
||||
.tooltip-right[tooltip]:hover:before {
|
||||
bottom: auto;
|
||||
}
|
||||
/* XXX might be good to move this to forms... */
|
||||
.tooltip-icon {
|
||||
font-size: small;
|
||||
opacity: 0.9;
|
||||
}
|
||||
/*********************************************************************/
|
||||
body {
|
||||
font-family: sans-serif;
|
||||
|
||||
@ -72,12 +72,16 @@
|
||||
}
|
||||
|
||||
|
||||
[tooltip-top] {
|
||||
/* XXX cleanup and style...
|
||||
- make the arrow exact (like in .tooltip-right)
|
||||
- need to align correctly for really narrow elements...
|
||||
*/
|
||||
[tooltip] {
|
||||
position: relative;
|
||||
text-decoration: none;
|
||||
}
|
||||
[tooltip-top]:after {
|
||||
content: attr(tooltip-top);
|
||||
[tooltip]:after {
|
||||
content: attr(tooltip);
|
||||
position: absolute;
|
||||
bottom: 130%;
|
||||
left: 20%;
|
||||
@ -85,13 +89,15 @@
|
||||
padding: 5px 15px;
|
||||
color: black;
|
||||
border-radius: 10px;
|
||||
white-space: nowrap;
|
||||
white-space: pre;
|
||||
text-align: left;
|
||||
font-size: 10px;
|
||||
opacity: 0;
|
||||
-webkit-transition: all 0.4s ease;
|
||||
-moz-transition: all 0.4s ease;
|
||||
transition: all 0.4s ease;
|
||||
}
|
||||
[tooltip-top]:before {
|
||||
[tooltip]:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 0;
|
||||
@ -106,17 +112,46 @@
|
||||
left: 30%;
|
||||
bottom: 90%;
|
||||
}
|
||||
[tooltip-top]:hover:after {
|
||||
[tooltip]:hover:after {
|
||||
bottom: 100%;
|
||||
}
|
||||
[tooltip-top]:hover:before {
|
||||
[tooltip]:hover:before {
|
||||
bottom: 70%;
|
||||
}
|
||||
[tooltip-top]:hover:after,
|
||||
[tooltip-top]:hover:before {
|
||||
[tooltip]:hover:after,
|
||||
[tooltip]:hover:before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.tooltip-right[tooltip] {
|
||||
}
|
||||
.tooltip-right[tooltip]:after {
|
||||
bottom: auto;
|
||||
top: -50%;
|
||||
left: 15px;
|
||||
}
|
||||
.tooltip-right[tooltip]:before {
|
||||
border-left: none;
|
||||
border-right: 5px solid #ffcb66;
|
||||
border-bottom: 5px solid transparent;
|
||||
border-top: 5px solid transparent;
|
||||
bottom: auto;
|
||||
left: 10px;
|
||||
top: 25%;
|
||||
}
|
||||
.tooltip-right[tooltip]:hover:after {
|
||||
bottom: auto;
|
||||
}
|
||||
.tooltip-right[tooltip]:hover:before {
|
||||
bottom: auto;
|
||||
}
|
||||
|
||||
/* XXX might be good to move this to forms... */
|
||||
.tooltip-icon {
|
||||
font-size: small;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*********************************************************************/
|
||||
|
||||
24
ui/ui.js
24
ui/ui.js
@ -543,6 +543,11 @@ var FIELD_TYPES = {
|
||||
// ...
|
||||
// }
|
||||
//
|
||||
// <field-description> and split in two with a "|" the section before will
|
||||
// show as the field text and the text after as the tooltip.
|
||||
// Example:
|
||||
// "field text | field tooltip..."
|
||||
//
|
||||
// field's default value determines it's type:
|
||||
// bool - checkbox
|
||||
// string - textarea
|
||||
@ -551,6 +556,8 @@ var FIELD_TYPES = {
|
||||
//
|
||||
// NOTE: if btn is set to false explicitly then no button will be
|
||||
// rendered in the form dialog.
|
||||
// NOTE: to include a literal "|" in <field-description> just escape it
|
||||
// like this: "\|"
|
||||
//
|
||||
// XXX add form testing...
|
||||
// XXX add undefined field handling/reporting...
|
||||
@ -575,7 +582,20 @@ function formDialog(root, message, config, btn, cls){
|
||||
var field = FIELD_TYPES[f]
|
||||
var html = $(field.html)
|
||||
|
||||
html.find('.text').text(t)
|
||||
// get the tooltip...
|
||||
if(/[^\\]\|/.test(t)){
|
||||
var tip = t.split(/\s*\|\s*/)
|
||||
text = tip[0]
|
||||
tip = tip[1]
|
||||
$('<span class="tooltip-icon tooltip-right">?</span>')
|
||||
.attr('tooltip', tip)
|
||||
.appendTo(html)
|
||||
// cleanup...
|
||||
} else {
|
||||
text = t.replace(/\\\|/g, '|')
|
||||
}
|
||||
// setup text and data...
|
||||
html.find('.text').text(text)
|
||||
field.set(html, config[t])
|
||||
|
||||
// NOTE: this is here to isolate t and field.get values...
|
||||
@ -699,7 +719,7 @@ function exportPreviewsDialog(state, dfl){
|
||||
updateStatus('Export...').show()
|
||||
|
||||
formDialog(null, '<b>Export source:</b> '+ state +'.', {
|
||||
'Image name pattern': '%f',
|
||||
'Image name pattern | %f - full filename \n%n - filename \n%e - extension \n%gid - log gid \n%g - short gid \n%i - order': '%f',
|
||||
'Fav directory name': 'fav',
|
||||
'Destination': {ndir: dfl},
|
||||
}, 'OK', 'exportPreviewsDialog')
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user