mirror of
https://github.com/flynx/ImageGrid.git
synced 2025-10-29 10:20:08 +00:00
fixed single image mode...
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
parent
40ffae9b4c
commit
4862cd146d
66
ui/TODO.otl
66
ui/TODO.otl
@ -1,5 +1,5 @@
|
||||
Priority work
|
||||
[_] 64% Preview II
|
||||
[_] 67% Preview II
|
||||
[X] 100% sorted images in ribbons
|
||||
[X] 100% stage I: position the promoted/demoted image correctly
|
||||
| and correct positioning on promote/demote
|
||||
@ -58,16 +58,14 @@ Priority work
|
||||
[X] one (with zooming)
|
||||
[X] single image mode with zooming
|
||||
| ribbons are hidden
|
||||
[_] 18% UI
|
||||
[_] fix single image mode
|
||||
[_] 30% UI
|
||||
[X] fix single image mode
|
||||
| need to center the image correctly...
|
||||
[_] 44% add screen buttons for all actions...
|
||||
[_] 46% add screen buttons for all actions...
|
||||
[X] navigation
|
||||
[X] actions
|
||||
[_] zooming
|
||||
[_] 20% zoom presets
|
||||
[_] in
|
||||
[_] out
|
||||
[_] 33% zoom presets
|
||||
[_] single
|
||||
[_] three
|
||||
[X] wide
|
||||
@ -152,6 +150,9 @@ Priority work
|
||||
[_] 0% Pre-Alpha
|
||||
[_] 0% finalize UI logic
|
||||
[_] unsorted images
|
||||
[_] 0% Alpha
|
||||
[_] 0% Beta
|
||||
[_] 0% 1.0
|
||||
|
||||
|
||||
Goals:
|
||||
@ -219,32 +220,42 @@ Goals:
|
||||
all levels always browsable
|
||||
make all the steps except the actual sorting implicit
|
||||
| i.e. no jumping through hoops for the human...
|
||||
use the same mechanism as used for sorting, for image selection
|
||||
| this can be used for tagging, exhibitions, ...etc.
|
||||
context
|
||||
| a context consists of two things:
|
||||
| - image selection (might be a product of another context, search or selection)
|
||||
| - a way the levels are interpreted within this context
|
||||
|
|
||||
| default contexts:
|
||||
| - full view rating context
|
||||
| this incorporates ALL the archive and the levels are interpreted as ratings.
|
||||
| - selection rating context
|
||||
| same as full view but only part of the archive is rated
|
||||
| XXX this will need to be merged correctly back into the archive...
|
||||
| - selection context
|
||||
| this simply takes one set of images as input and shows a subset as output.
|
||||
|
|
||||
| contexts are persistent, much like a catalogue.
|
||||
|
|
||||
| a context can be cloned and re-used.
|
||||
|
|
||||
| contexts can be used to mark:
|
||||
| - shoots
|
||||
| - subjects
|
||||
| - exhibitions/shows
|
||||
| - portfolios
|
||||
| - ...
|
||||
|
||||
|
||||
[[controls.otl]]
|
||||
|
||||
basic structure
|
||||
[X] ribbons
|
||||
[X] images
|
||||
[_] indicators
|
||||
| show where the images came from...
|
||||
|
||||
|
||||
[_] % basic control elements
|
||||
[_] 77% touch zones / buttons
|
||||
[X] next DONE
|
||||
[X] prev DONE
|
||||
[X] shift up DONE
|
||||
[X] shift down DONE
|
||||
[X] promote DONE
|
||||
[X] demote DONE
|
||||
[_] zoom in ~
|
||||
[_] zoom out ~
|
||||
[X] toggle single image DONE
|
||||
|
||||
[_] 38% features
|
||||
[_] 55% views
|
||||
[_] 60% ribbon-based view
|
||||
[_] show all
|
||||
[_] show all (very zoomed out view)
|
||||
| might be good to not show any images here at all, just replace them with their average color
|
||||
[X] show map
|
||||
[X] fit to ribbon
|
||||
@ -266,6 +277,8 @@ basic structure
|
||||
[_] crop
|
||||
[_] rotate
|
||||
|
||||
|
||||
|
||||
[_] 38% General ToDo
|
||||
[_] 80% image sorting
|
||||
[_] will affect:
|
||||
@ -297,9 +310,6 @@ basic structure
|
||||
[_] position in ribbon
|
||||
|
||||
|
||||
[X] 100% refactoring:
|
||||
[X] merge almost identical functions...
|
||||
|
||||
|
||||
[_] % ISSUES and BUGS:
|
||||
[_] jumping on focus up/down...
|
||||
|
||||
108
ui/gallery.css
108
ui/gallery.css
@ -1,10 +1,5 @@
|
||||
.image {
|
||||
/* new markup... */
|
||||
float: left;
|
||||
/* old markup...
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
*/
|
||||
|
||||
width: 350px;
|
||||
height: 350px;
|
||||
@ -23,10 +18,12 @@
|
||||
cursor: hand;
|
||||
}
|
||||
|
||||
|
||||
.mock-image {
|
||||
background: blue;
|
||||
}
|
||||
|
||||
|
||||
.demo-buttons {
|
||||
margin: 15px
|
||||
border: groove 2px;
|
||||
@ -39,16 +36,21 @@
|
||||
-ms-transition: all 0.2s ease;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
|
||||
.demo-buttons:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
|
||||
.viewer {
|
||||
width: 900px;
|
||||
height: 500px;
|
||||
border: solid blue 5px;
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
|
||||
.controller {
|
||||
height: 500px;
|
||||
width: 50px;
|
||||
@ -61,9 +63,8 @@
|
||||
-ms-transition: all 0.2s ease;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
.single-image-mode .controller {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
|
||||
.promote, .next-image, .prev-image, .demote, .toggle-wide, .toggle-single {
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
@ -71,31 +72,48 @@
|
||||
height: 150px;
|
||||
background: gray;
|
||||
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-o-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-o-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
|
||||
.next-image, .prev-image, .toggle-wide, .toggle-single {
|
||||
background: silver;
|
||||
}
|
||||
|
||||
|
||||
.toggle-wide, .toggle-single {
|
||||
height:50px
|
||||
}
|
||||
|
||||
|
||||
.promote {
|
||||
}
|
||||
|
||||
|
||||
.next-image {
|
||||
}
|
||||
|
||||
|
||||
.prev-image {
|
||||
}
|
||||
|
||||
|
||||
.demote {
|
||||
}
|
||||
|
||||
|
||||
.toggle-wide {
|
||||
}
|
||||
|
||||
|
||||
.toggle-single {
|
||||
}
|
||||
|
||||
|
||||
.container {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
@ -111,11 +129,10 @@
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
|
||||
.field {
|
||||
position: relative;
|
||||
overflow: visible;
|
||||
/* XXX replace this with transform:scale(...) */
|
||||
zoom: 1;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
margin-top: 0px;
|
||||
@ -127,6 +144,7 @@
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
|
||||
.ribbon {
|
||||
height: 360px;
|
||||
/* XXX make this expand dynamically */
|
||||
@ -134,8 +152,7 @@
|
||||
overflow: visible;
|
||||
padding-top: 2px;
|
||||
padding-bottom: 2px;
|
||||
/*text-align: center;*/
|
||||
opacity: 0.2;
|
||||
opacity: 0.5;
|
||||
|
||||
-webkit-transition: all 0.2s ease;
|
||||
-moz-transition: all 0.2s ease;
|
||||
@ -144,6 +161,8 @@
|
||||
transition: all 0.2s ease;
|
||||
|
||||
}
|
||||
|
||||
|
||||
.new-ribbon {
|
||||
height: 0px;
|
||||
|
||||
@ -154,16 +173,13 @@
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
|
||||
.current.image {
|
||||
opacity: 1.0;
|
||||
}
|
||||
|
||||
.current.ribbon {
|
||||
/*
|
||||
padding-top: 20px;
|
||||
padding-bottom: 20px;
|
||||
*/
|
||||
|
||||
.current.ribbon {
|
||||
opacity: 1.0;
|
||||
|
||||
-webkit-transition: all 0.2s ease;
|
||||
@ -173,54 +189,8 @@
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
|
||||
.current.ribbon .image {
|
||||
}
|
||||
|
||||
|
||||
/* single image theme (start everything with .single-image-mode)
|
||||
*
|
||||
* XXX need to make this touch friendly...
|
||||
*/
|
||||
.single-image-mode .container {
|
||||
background: gray;
|
||||
}
|
||||
|
||||
.single-image-mode .image {
|
||||
opacity: 0.0;
|
||||
/* XXX need to fix animation with this... */
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
/*
|
||||
zoom: 120%;
|
||||
*/
|
||||
}
|
||||
|
||||
.single-image-mode .image:hover {
|
||||
/*opacity: 0.5;*/
|
||||
/* XXX need to fix animation with this... */
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
.single-image-mode .current.image:hover, .single-image-mode .current.image {
|
||||
opacity: 1.0;
|
||||
/* XXX need to fix animation with this... */
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
|
||||
/* wide view mode */
|
||||
|
||||
/* XXX not yet working correctly...
|
||||
.wide-view-mode {
|
||||
transform: scale(0.2,0.2);
|
||||
-ms-transform: scale(0.2,0.2);
|
||||
-webkit-transform: scale(0.2,0.2);
|
||||
-o-transform: scale(0.2,0.2);
|
||||
-moz-transform: scale(0.2,0.2);
|
||||
}
|
||||
*/
|
||||
.wide-view-mode .field {
|
||||
}
|
||||
|
||||
|
||||
@ -3,7 +3,11 @@
|
||||
-->
|
||||
|
||||
<link rel="stylesheet" href="gallery.css">
|
||||
<link rel="stylesheet" href="single-image-mode.css">
|
||||
|
||||
<link rel="stylesheet" href="markers.css">
|
||||
|
||||
|
||||
<script src="jquery.js"></script>
|
||||
<script src="jquery-ui-1.8.22.custom.min.js"></script>
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user