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

made the index indicator a bit more functional...

Browse Source 
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
Alex A. Naanou 2016-02-13 07:59:54 +03:00
parent b8efca35ae
commit d51e524f42
3 changed files with 81 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
ui (gen4)/css/layout.css
View File

@ -1163,7 +1163,7 @@ stretching in width... */
padding-right: 10px;
box-sizing: border-box;
background: black;
color: white;
color: silver;
opacity: 0.6;
}
.overlay-info:hover {
@ -1198,6 +1198,10 @@ stretching in width... */
.overlay-info.minimal .full-only {
display: none;
}
/* space elements... */
.overlay-info > :not(:first-child) {
margin-left: 10px;
}
/* XXX REUSE: this is the same as selected/bookmarked image markers... */
.overlay-info .marked,
.overlay-info .marked:after,
@ -1208,8 +1212,8 @@ stretching in width... */
content: "";
font-size: 0pt;
border: none;
margin: 4px;
margin-right: 10px;
margin-top: 4px;
margin-bottom: 4px;
width: 10px;
height: 10px;
box-shadow: 2px 2px 20px -2px rgba(0, 0, 0, 0.7);
@ -1259,6 +1263,15 @@ stretching in width... */
.overlay-info .bookmarked:not(.on):after {
background: gray;
}
/* image index status element */
.overlay-info .index.global:after {
content: "G";
opacity: 0.7;
font-size: small;
}
.overlay-info .index.global:hover:after {
content: "Global";
}
/*************************************************** Global status ***/
.global-status {
display: block;

25
ui (gen4)/css/layout.less
View File

@ -1027,7 +1027,7 @@ stretching in width... */
box-sizing: border-box;
background: black;
color: white;
color: silver;
opacity: 0.6;
}
@ -1062,6 +1062,13 @@ stretching in width... */
display: none;
}
/* space elements... */
.overlay-info>:not(:first-child) {
margin-left: 10px;
}
/* XXX REUSE: this is the same as selected/bookmarked image markers... */
.overlay-info .marked,
.overlay-info .marked:after,
@ -1073,8 +1080,9 @@ stretching in width... */
font-size: 0pt;
border: none;
margin: 4px;
margin-right: 10px;
margin-top: 4px;
margin-bottom: 4px;
//margin-right: 10px;
width: 10px;
height: 10px;
@ -1126,6 +1134,17 @@ stretching in width... */
background: gray;
}
/* image index status element */
.overlay-info .index.global:after {
content: "G";
opacity: 0.7;
font-size: small;
}
.overlay-info .index.global:hover:after {
content: "Global";
}
/*************************************************** Global status ***/

50
ui (gen4)/features/ui-status.js
View File

@ -90,20 +90,56 @@ var ImageStateIndicatorActions = actions.Actions({
// XXX make this visible to the user???
// XXX is this too complex???
__state_indicator_elements__: {
// XXX make position editable...
// - edit position on click
// - goto position on enter/blur (blur with value)
// - cancel on esc/blur (blur with no value)
// - treat index depending on mode (global/ribbon)
index: function(action, container, elem, gid){
var that = this
// construct...
if(action == 'make'){
return $('<span>').addClass(elem)
// XXX might be a good idea to make this an input...
.append($('<span>')
.addClass('position')
.click(function(){
// XXX enter edit mode -> select contents...
// XXX might be a good idea to live select
// the indexed image... (???)
//$(this)
// .prop('contenteditable', true)
// XXX
}))
.append($('<span>')
.addClass('length')
// toggle index state...
.click(function(){
$(this).parent()
.toggleClass('global')
that.updateStateIndicators()
}))
// update...
} else if(action == 'update'){
// XXX how do we pass a custom gid to here???
var gid = this.current
container.find('.'+elem)
.text(
(this.data.getImageOrder('ribbon', gid)+1)
+'/'+
this.data.getImages(gid).len)
gid = gid || this.current
var c = container.find('.'+elem)
// global index...
if(c.hasClass('global')){
c.find('.position')
.text(this.data.getImageOrder(gid)+1)
c.find('.length')
.text('/'+ this.data.length)
// ribbon index...
} else {
c.find('.position')
.text(this.data.getImageOrder('ribbon', gid)+1)
c.find('.length')
.text('/'+ this.data.getImages(gid).len)
}
// remove...
} else if(action == 'remove'){