mirror of
https://github.com/flynx/ImageGrid.git
synced 2025-10-31 11:20:09 +00:00
added single ribbon mode (not final, not sure if we need to go between ribbons in this mode), and several tweaks...
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
parent
999914633f
commit
4c720d6de2
13
ui/TODO.otl
13
ui/TODO.otl
@ -93,18 +93,19 @@ Roadmap
|
||||
|
||||
[_] 29% Gen 3 current todo
|
||||
[_] 58% High priority
|
||||
% Priority tasks
|
||||
full archive index
|
||||
ribbon separation
|
||||
[_] % Priority tasks
|
||||
[_] full archive index
|
||||
[_] segmented loading of images and data
|
||||
[_] ribbon separation
|
||||
| split ribbon into manageable chunks
|
||||
|
|
||||
| this can be done naturally by:
|
||||
| - date
|
||||
| - event
|
||||
| - tag
|
||||
index and group ALL files in an archive
|
||||
import metadata
|
||||
real GIDs
|
||||
[_] index and group ALL files in an archive
|
||||
[_] import metadata
|
||||
[_] real GIDs
|
||||
[_] BUG: align problems are back...
|
||||
| default data set (browser/images.js) same images #4 (going
|
||||
| from right) & #5 (going from left) of 18 in the first ribbon
|
||||
|
||||
21
ui/data.js
21
ui/data.js
@ -1042,6 +1042,27 @@ function loadSettings(){
|
||||
}
|
||||
|
||||
|
||||
// XXX make keep_ribbons option work...
|
||||
function cropDataToGIDs(gids, keep_ribbons){
|
||||
var cur = DATA.current
|
||||
var old_data = DATA
|
||||
DATA = {
|
||||
varsion: '2.0',
|
||||
current: null,
|
||||
ribbons: [
|
||||
gids
|
||||
],
|
||||
order: DATA.order.slice(),
|
||||
}
|
||||
DATA.current = getGIDBefore(cur, 0)
|
||||
|
||||
reloadViewer()
|
||||
updateImages()
|
||||
|
||||
return old_data
|
||||
}
|
||||
|
||||
|
||||
|
||||
/**********************************************************************
|
||||
* Image caching...
|
||||
|
||||
@ -149,14 +149,6 @@ var KEYBOARD_CONFIG = {
|
||||
title: 'Single image mode',
|
||||
doc: 'To toggle between this and ribbon modes press <b>Enter</b>.',
|
||||
|
||||
/*
|
||||
F: doc('Toggle view proportions',
|
||||
function(){
|
||||
var mode = toggleImageProportions()
|
||||
showStatus('Fitting image to:', mode + '...')
|
||||
centerRibbons()
|
||||
}),
|
||||
*/
|
||||
Esc: doc('Exit single image mode',
|
||||
function(){
|
||||
toggleSingleImageMode('off')
|
||||
@ -168,13 +160,15 @@ var KEYBOARD_CONFIG = {
|
||||
|
||||
// marked only ribbon mode...
|
||||
//
|
||||
'.marked-only-view:not(.single-image-mode)': {
|
||||
title: 'Marked only view',
|
||||
doc: 'To toggle this mode press <b>shift-F2</b>.',
|
||||
'.single-ribbon-mode:not(.single-image-mode), .marked-only-view:not(.single-image-mode)': {
|
||||
title: 'Marked only and single ribbon views',
|
||||
doc: 'To show marked-only images press <b>shift-F2</b> and for single ribbon mode press <b>F3</b>.',
|
||||
|
||||
Esc: doc('Exit marked only view',
|
||||
Esc: doc('Exit mode',
|
||||
function(){
|
||||
// add something like uncrop here...
|
||||
toggleMarkedOnlyView('off')
|
||||
toggleSingleRibbonMode('off')
|
||||
return false
|
||||
}),
|
||||
Q: 'Esc',
|
||||
@ -540,13 +534,22 @@ var KEYBOARD_CONFIG = {
|
||||
// function(){ toggleImageMarkBlock() }),
|
||||
|
||||
ctrl: doc('Mark current ribbon',
|
||||
function(){ markAll('ribbon') }),
|
||||
function(){
|
||||
toggleMarkesView('on')
|
||||
markAll('ribbon')
|
||||
}),
|
||||
'ctrl+shift': doc('Mark all images',
|
||||
function(){ markAll('all') }),
|
||||
function(){
|
||||
toggleMarkesView('on')
|
||||
markAll('all')
|
||||
}),
|
||||
},
|
||||
D: {
|
||||
ctrl: doc('Unmark current ribbon',
|
||||
function(){ removeImageMarks('ribbon') }),
|
||||
function(){
|
||||
event.preventDefault()
|
||||
removeImageMarks('ribbon')
|
||||
}),
|
||||
'ctrl+shift': doc('Unmark all images',
|
||||
function(){ removeImageMarks('all') }),
|
||||
},
|
||||
@ -563,13 +566,17 @@ var KEYBOARD_CONFIG = {
|
||||
F2: {
|
||||
default: doc('Toggle mark visibility',
|
||||
function(){ toggleMarkesView() }),
|
||||
//shift: 'F3',
|
||||
shift: doc('Toggle marked only images view',
|
||||
function(){
|
||||
toggleMarkedOnlyView()
|
||||
}),
|
||||
},
|
||||
F3: doc('Toggle marked only images view',
|
||||
function(){
|
||||
toggleMarkedOnlyView()
|
||||
}),
|
||||
|
||||
F3: doc('Toggle single ribbon view (EXPERIMENTAL)',
|
||||
function(){
|
||||
event.preventDefault()
|
||||
toggleSingleRibbonMode()
|
||||
}),
|
||||
|
||||
E: doc('Open image in external software', openImage),
|
||||
// XXX make F4 a default editor and E a default viewer...
|
||||
|
||||
@ -14,6 +14,50 @@
|
||||
.expanding-text:hover .hidden {
|
||||
display: inline;
|
||||
}
|
||||
[tooltip-top] {
|
||||
position: relative;
|
||||
text-decoration: none;
|
||||
}
|
||||
[tooltip-top]:after {
|
||||
content: attr(tooltip-top);
|
||||
position: absolute;
|
||||
bottom: 130%;
|
||||
left: 20%;
|
||||
background: #ffcb66;
|
||||
padding: 5px 15px;
|
||||
color: black;
|
||||
border-radius: 10px;
|
||||
white-space: nowrap;
|
||||
opacity: 0;
|
||||
-webkit-transition: all 0.4s ease;
|
||||
-moz-transition: all 0.4s ease;
|
||||
transition: all 0.4s ease;
|
||||
}
|
||||
[tooltip-top]:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-top: 20px solid #ffcb66;
|
||||
border-left: 20px solid transparent;
|
||||
border-right: 20px solid transparent;
|
||||
-webkit-transition: all 0.4s ease;
|
||||
-moz-transition: all 0.4s ease;
|
||||
transition: all 0.4s ease;
|
||||
opacity: 0;
|
||||
left: 30%;
|
||||
bottom: 90%;
|
||||
}
|
||||
[tooltip-top]:hover:after {
|
||||
bottom: 100%;
|
||||
}
|
||||
[tooltip-top]:hover:before {
|
||||
bottom: 70%;
|
||||
}
|
||||
[tooltip-top]:hover:after,
|
||||
[tooltip-top]:hover:before {
|
||||
opacity: 1;
|
||||
}
|
||||
/*********************************************************************/
|
||||
body {
|
||||
font-family: sans-serif;
|
||||
@ -321,6 +365,17 @@ button:hover {
|
||||
background-image: url(images/loading-270deg.gif);
|
||||
}
|
||||
*/
|
||||
/* separator test */
|
||||
.image.red + .image:not(.red):before {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
content: "";
|
||||
top: 0px;
|
||||
left: -50px;
|
||||
width: 100px;
|
||||
height: 100%;
|
||||
background-color: yellow;
|
||||
}
|
||||
/***************************************************** Image marks ***/
|
||||
.marks-visible.viewer .marked.image:after {
|
||||
display: block;
|
||||
@ -795,15 +850,18 @@ button:hover {
|
||||
.single-image-mode.viewer .global-mode-indicators:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
.global-mode-indicators .indicator,
|
||||
.context-mode-indicators .indicator {
|
||||
display: none;
|
||||
height: 20px;
|
||||
vertical-align: center;
|
||||
}
|
||||
/* actual indicators */
|
||||
/* marks... */
|
||||
.global-mode-indicators .marked-only-visible,
|
||||
.global-mode-indicators .marks-visible,
|
||||
.context-mode-indicators .current-image-marked {
|
||||
display: none;
|
||||
color: blue;
|
||||
height: 20px;
|
||||
vertical-align: center;
|
||||
}
|
||||
.global-mode-indicators .marked-only-visible .shown,
|
||||
.global-mode-indicators .marks-visible .shown,
|
||||
@ -824,6 +882,11 @@ button:hover {
|
||||
margin-top: 3px;
|
||||
top: 50%;
|
||||
}
|
||||
.global-mode-indicators .marked-only-visible:after,
|
||||
.global-mode-indicators .marks-visible:after,
|
||||
.context-mode-indicators .current-image-marked:after {
|
||||
color: blue;
|
||||
}
|
||||
.marks-visible.viewer .global-mode-indicators .marks-visible {
|
||||
display: inline-block;
|
||||
}
|
||||
@ -844,6 +907,10 @@ button:hover {
|
||||
.single-image-mode.marks-visible.viewer .context-mode-indicators .current-image-marked.shown {
|
||||
display: inline-block;
|
||||
}
|
||||
.single-ribbon-mode.viewer .global-mode-indicators .single-ribbon-mode {
|
||||
color: gray;
|
||||
display: inline-block;
|
||||
}
|
||||
/********************************************** Mode: single image ***/
|
||||
.single-image-mode.viewer .image {
|
||||
background-color: transparent;
|
||||
|
||||
@ -65,6 +65,52 @@
|
||||
}
|
||||
|
||||
|
||||
[tooltip-top] {
|
||||
position: relative;
|
||||
text-decoration: none;
|
||||
}
|
||||
[tooltip-top]:after {
|
||||
content: attr(tooltip-top);
|
||||
position: absolute;
|
||||
bottom: 130%;
|
||||
left: 20%;
|
||||
background: #ffcb66;
|
||||
padding: 5px 15px;
|
||||
color: black;
|
||||
border-radius: 10px;
|
||||
white-space: nowrap;
|
||||
opacity: 0;
|
||||
-webkit-transition: all 0.4s ease;
|
||||
-moz-transition: all 0.4s ease;
|
||||
transition: all 0.4s ease;
|
||||
}
|
||||
[tooltip-top]:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-top: 20px solid #ffcb66;
|
||||
border-left: 20px solid transparent;
|
||||
border-right: 20px solid transparent;
|
||||
-webkit-transition: all 0.4s ease;
|
||||
-moz-transition : all 0.4s ease;
|
||||
transition : all 0.4s ease;
|
||||
opacity: 0;
|
||||
left: 30%;
|
||||
bottom: 90%;
|
||||
}
|
||||
[tooltip-top]:hover:after {
|
||||
bottom: 100%;
|
||||
}
|
||||
[tooltip-top]:hover:before {
|
||||
bottom: 70%;
|
||||
}
|
||||
[tooltip-top]:hover:after,
|
||||
[tooltip-top]:hover:before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*********************************************************************/
|
||||
|
||||
@ -363,6 +409,20 @@ button:hover {
|
||||
*/
|
||||
|
||||
|
||||
/* separator test */
|
||||
.image.red+.image:not(.red):before {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
content: "";
|
||||
top:0px;
|
||||
left: -50px;
|
||||
width: 100px;
|
||||
height: 100%;
|
||||
|
||||
background-color: yellow;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/***************************************************** Image marks ***/
|
||||
|
||||
@ -791,16 +851,20 @@ button:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.global-mode-indicators .indicator,
|
||||
.context-mode-indicators .indicator {
|
||||
display: none;
|
||||
height: 20px;
|
||||
vertical-align: center;
|
||||
}
|
||||
|
||||
|
||||
/* actual indicators */
|
||||
/* marks... */
|
||||
.global-mode-indicators .marked-only-visible,
|
||||
.global-mode-indicators .marks-visible,
|
||||
.context-mode-indicators .current-image-marked {
|
||||
display: none;
|
||||
color: blue;
|
||||
height: 20px;
|
||||
vertical-align: center;
|
||||
}
|
||||
.global-mode-indicators .marked-only-visible .shown,
|
||||
.global-mode-indicators .marks-visible .shown,
|
||||
@ -822,6 +886,11 @@ button:hover {
|
||||
margin-top: 3px;
|
||||
top: 50%;
|
||||
}
|
||||
.global-mode-indicators .marked-only-visible:after,
|
||||
.global-mode-indicators .marks-visible:after,
|
||||
.context-mode-indicators .current-image-marked:after {
|
||||
color: blue;
|
||||
}
|
||||
.marks-visible.viewer .global-mode-indicators .marks-visible {
|
||||
display: inline-block;
|
||||
}
|
||||
@ -844,6 +913,12 @@ button:hover {
|
||||
}
|
||||
|
||||
|
||||
.single-ribbon-mode.viewer .global-mode-indicators .single-ribbon-mode {
|
||||
color: gray;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/********************************************** Mode: single image ***/
|
||||
|
||||
|
||||
@ -171,7 +171,7 @@ function createCSSClassToggler(elem, class_list, callback_a, callback_b){
|
||||
if(callback_pre.call(this, action) === false){
|
||||
// XXX should we return action here???
|
||||
//return
|
||||
return action
|
||||
return func('?')
|
||||
}
|
||||
}
|
||||
// update the element...
|
||||
|
||||
28
ui/marks.js
28
ui/marks.js
@ -33,22 +33,9 @@ function loadMarkedOnlyData(cmp, no_cleanout_marks){
|
||||
marked.splice(i, 1)
|
||||
}
|
||||
}
|
||||
ALL_DATA = DATA
|
||||
DATA = {
|
||||
varsion: '2.0',
|
||||
current: null,
|
||||
ribbons: [
|
||||
marked
|
||||
],
|
||||
//order: marked.slice(),
|
||||
order: DATA.order,
|
||||
}
|
||||
DATA.current = getGIDBefore(cur, 0)
|
||||
reloadViewer()
|
||||
toggleMarkesView('off')
|
||||
// XXX FIX: for some reason not all previews get updated to the
|
||||
// right size...
|
||||
updateImages()
|
||||
|
||||
ALL_DATA = cropDataToGIDs(marked)
|
||||
|
||||
return DATA
|
||||
}
|
||||
|
||||
@ -75,7 +62,14 @@ function loadAllImages(){
|
||||
|
||||
var toggleMarkedOnlyView = createCSSClassToggler(
|
||||
'.viewer',
|
||||
'marked-only-view',
|
||||
'marked-only-view cropped-mode',
|
||||
function(action){
|
||||
// prevent reentering...
|
||||
if(action == 'on' && $('.viewer').hasClass('cropped-mode')
|
||||
|| action == toggleMarkedOnlyView('?')){
|
||||
return false
|
||||
}
|
||||
},
|
||||
function(action){
|
||||
if(action == 'on'){
|
||||
loadMarkedOnlyData()
|
||||
|
||||
23
ui/modes.js
23
ui/modes.js
@ -170,6 +170,29 @@ var toggleSingleImageMode = createCSSClassToggler(
|
||||
})
|
||||
|
||||
|
||||
// XXX make this not conflict with marked-only-mode, better yet, make them
|
||||
// one single mode...
|
||||
var toggleSingleRibbonMode = createCSSClassToggler(
|
||||
'.viewer',
|
||||
'single-ribbon-mode cropped-mode',
|
||||
function(action){
|
||||
// prevent reentering...
|
||||
if(action == 'on' && $('.viewer').hasClass('cropped-mode')
|
||||
|| action == toggleSingleRibbonMode('?')){
|
||||
return false
|
||||
}
|
||||
},
|
||||
function(action){
|
||||
if(action == 'on'){
|
||||
ALL_DATA = cropDataToGIDs(DATA.ribbons[getRibbonIndex()].slice())
|
||||
} else {
|
||||
DATA = ALL_DATA
|
||||
reloadViewer()
|
||||
updateImages()
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
// TODO transitions...
|
||||
// TODO a real setup UI (instead of prompt)
|
||||
var toggleSlideShowMode = createCSSClassToggler(
|
||||
|
||||
@ -16,6 +16,11 @@ var PROPORTIONS_RATIO_THRESHOLD = 1.5
|
||||
*/
|
||||
|
||||
function setupIndicators(){
|
||||
showGlobalIndicator(
|
||||
'single-ribbon-mode',
|
||||
'Single ribbon mode (F3)')
|
||||
.css('cursor', 'hand')
|
||||
.click(function(){ toggleSingleRibbonMode() })
|
||||
showGlobalIndicator(
|
||||
'marks-visible',
|
||||
'Marks visible (F2)')
|
||||
@ -23,7 +28,7 @@ function setupIndicators(){
|
||||
.click(function(){ toggleMarkesView() })
|
||||
showGlobalIndicator(
|
||||
'marked-only-visible',
|
||||
'Marked only images visible (F3)')
|
||||
'Marked only images visible (shift-F2)')
|
||||
.css('cursor', 'hand')
|
||||
.click(function(){ toggleMarkedOnlyView() })
|
||||
|
||||
@ -283,7 +288,7 @@ function setupDataBindings(viewer){
|
||||
|
||||
// add marked image to list...
|
||||
if(action == 'on'){
|
||||
MARKED.push(gid)
|
||||
MARKED.indexOf(gid) == -1 && MARKED.push(gid)
|
||||
|
||||
// remove marked image from list...
|
||||
} else {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user