flynx/ImageGrid
1
1
Fork 0
mirror of https://github.com/flynx/ImageGrid.git synced 2025-10-31 19:30:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

added single ribbon mode (not final, not sure if we need to go between ribbons in this mode), and several tweaks...

Browse Source 
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
Alex A. Naanou 2013-06-16 02:42:29 +04:00
parent 999914633f
commit 4c720d6de2
9 changed files with 245 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
ui/TODO.otl
View File

@ -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
View File

@ -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...

47
ui/keybindings.js
View File

@ -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...

73
ui/layout.css
View File

@ -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;

81
ui/layout.less
View File

@ -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 ***/

2
ui/lib/jli.js
View File

@ -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
View File

@ -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
View File

@ -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(

9
ui/setup.js
View File

@ -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 {