flynx/ImageGrid
1
1
Fork 0
mirror of https://github.com/flynx/ImageGrid.git synced 2025-10-29 10:20:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactoring the ui...

Browse Source 
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
Alex A. Naanou 2012-08-05 18:31:54 +04:00
parent acc1499cc8
commit bdd581cd89
4 changed files with 35 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
ui/TODO.otl
View File

@ -76,7 +76,7 @@ Priority work
[_] 0% layout [_] 0% layout
[_] 0% tablet [_] 0% tablet
[_] stretch to full screen [_] stretch to full screen
| NOTE: viewer % sizes may break things... | NOTE: viewer 0% sizes may break things...
[_] restrict to horizontal / do a different vertical layout [_] restrict to horizontal / do a different vertical layout
[_] make buttons semi-transparent and same color as bg in all modes [_] make buttons semi-transparent and same color as bg in all modes
| just like single image mode... | just like single image mode...
@ -102,6 +102,7 @@ Priority work
[_] 0% native client [_] 0% native client
[_] android [_] android
[_] 8% Preview II (optional features) [_] 8% Preview II (optional features)
[_] option to disable processor intensive features
[_] 80% drag/move action... [_] 80% drag/move action...
[X] basic infrastructure [X] basic infrastructure
[X] action: center current image [X] action: center current image

35
ui/gallery.css
View File

@ -61,6 +61,7 @@
.viewer { .viewer {
position: relative;
width: 900px; width: 900px;
height: 500px; height: 500px;
border: solid blue 5px; border: solid blue 5px;
@ -69,25 +70,39 @@
.controller { .controller {
position: absolute;
height: 500px; height: 500px;
width: 50px; width: 50px;
float: left;
background: silver; /* keep these on top of the normal elements but below the high
* visibility 9000+ crowd...
*/
z-index: 5000;
-webkit-transition: all 0.2s ease; -webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease; -moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease; -o-transition: all 0.2s ease;
-ms-transition: all 0.2s ease; -ms-transition: all 0.2s ease;
transition: all 0.2s ease; transition: all 0.2s ease;
opacity: 0.5;
}
.controller.left {
left: 0px;
}
.controller.right {
right: 0px;
} }
.screen-button { .screen-button {
text-align: center; text-align: center;
width: 100%; width: 100%;
height: 125px; height: 25%;
color: white; color: black;
-moz-user-select: none; -moz-user-select: none;
-webkit-user-select: none; -webkit-user-select: none;
@ -102,17 +117,17 @@
.toggle-single, .zoom-in { .toggle-single, .zoom-in {
border-top: solid white 1px; border-top: solid gray 1px;
height: 50px; height: 10%;
} }
.toggle-single, .fit-three, .zoom-in, .zoom-out { .toggle-single, .fit-three, .zoom-in, .zoom-out {
height: 50px; height: 10%;
} }
.settings, .toggle-wide { .settings, .toggle-wide {
height: 25px; height: 5%;
} }
.promote { .promote {
@ -154,8 +169,12 @@
overflow: hidden; overflow: hidden;
float: left; float: left;
width: 100%;
height: 100%;
/*
width: 800px; width: 800px;
height: 500px; height: 500px;
*/
-webkit-transition: all 0.2s ease; -webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease; -moz-transition: all 0.2s ease;

5
ui/gallery.html
View File

@ -62,7 +62,7 @@ $(document).ready(setup);
</style> </style>
<div class="viewer no-single-image-transitions"> <div class="viewer no-single-image-transitions">
<div class="controller"> <div class="controller left">
<div class="screen-button demote">^</div> <div class="screen-button demote">^</div>
<div class="screen-button prev-image">&lt;</div> <div class="screen-button prev-image">&lt;</div>
<div class="screen-button promote">v</div> <div class="screen-button promote">v</div>
@ -81,7 +81,8 @@ $(document).ready(setup);
<div class="h-marker"></div> <div class="h-marker"></div>
<div class="v-marker"></div> <div class="v-marker"></div>
</div> </div>
<div class="controller"> <!-- need to keep these after -->
<div class="controller right">
<div class="screen-button demote">^</div> <div class="screen-button demote">^</div>
<div class="screen-button next-image">&gt;</div> <div class="screen-button next-image">&gt;</div>
<div class="screen-button promote">v</div> <div class="screen-button promote">v</div>

7
ui/single-image-mode.css
View File

@ -6,12 +6,11 @@
.single-image-mode .controller { .single-image-mode .controller {
opacity: 0.5;
background: black;
} }
.single-image-mode .screen-button { .single-image-mode .screen-button {
color: white;
} }
@ -49,7 +48,7 @@
.single-image-mode.single-image-white-bg .screen-button { .single-image-mode.single-image-white-bg .screen-button {
color: gray; color: black;
} }
@ -59,7 +58,7 @@
.single-image-mode.single-image-white-bg .toggle-single, .single-image-mode.single-image-white-bg .zoom-in { .single-image-mode.single-image-white-bg .toggle-single, .single-image-mode.single-image-white-bg .zoom-in {
border-top: solid gray 1px; border-top: solid black 1px;
} }