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

lots of tweaks + work on ribbon partitions...

Browse Source 
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
Alex A. Naanou 2016-12-27 06:18:04 +03:00
parent 1c25bc223a
commit 7c493a7326
3 changed files with 40 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -408,6 +408,8 @@ button:hover {
width: 80px; width: 80px;
height: 100%; height: 100%;
opacity: 0.4;
font-size: larger; font-size: larger;
background: rgba(0, 0, 0, 0.5); background: rgba(0, 0, 0, 0.5);
@ -416,6 +418,10 @@ button:hover {
z-index: 900; z-index: 900;
} }
.side-buttons-left:hover,
.side-buttons-right:hover {
opacity: 0.4;
}
.side-buttons-left { .side-buttons-left {
left: 0px; left: 0px;
} }
@ -1039,6 +1045,7 @@ stretching in width... */
/* XXX these are still experimental... */ /* XXX these are still experimental... */
// XXX these need to be updated...
.mark.brace-opening { .mark.brace-opening {
width: @image-tile-size / 15; width: @image-tile-size / 15;
height: @image-tile-size + 10; height: @image-tile-size + 10;
@ -1064,29 +1071,41 @@ stretching in width... */
margin-left: -15px; margin-left: -15px;
} }
.mark.partition { .mark.partition {
width: 0px; width: @image-border;
height: @image-tile-size + 20; height: @image-tile-size;
overflow: visible; overflow: visible;
border-right: solid 5px yellow;
margin-top: -20px;
margin-bottom: -5px;
margin-left: 0px; margin-left: 0px;
} }
.mark.partition:before {
display: block;
position: absolute;
content: "";
width: @image-border;
height: 102%;
background: yellow;
margin-top: -@image-tile-size / 50;
margin-bottom: 0px;
}
.mark.partition:after { .mark.partition:after {
display: block; display: block;
position: absolute; position: absolute;
top: -8px; left: @image-border * 2;
left: 10px;
content: attr(text); content: attr(text);
color: yellow; color: yellow;
margin-top: -@image-tile-size / 24;
} }
/****************************************************** Image info ***/ /****************************************************** Image info ***/
.inline-image-info { .inline-image-info {
display: none; display: none;

13
ui (gen4)/features/ui-widgets.js
View File

@ -1592,6 +1592,19 @@ var WidgetTestActions = actions.Actions({
function(){ this.showTaggedInDrawer('bookmark') }], function(){ this.showTaggedInDrawer('bookmark') }],
showSelectedInDrawer: ['Test/Show selected in drawer', showSelectedInDrawer: ['Test/Show selected in drawer',
function(){ this.showTaggedInDrawer('selected') }], function(){ this.showTaggedInDrawer('selected') }],
makePartitionAfter: ['Test/Make Partition after image',
function(image, text){
var attrs = {}
if(text){
attrs.text = text
}
this.ribbons.getImage(this.data.getImage(image))
.after($('<span>')
.addClass('mark partition')
.attr(attrs))
}],
}) })
var WidgetTest = var WidgetTest =

1
ui (gen4)/features/ui.js
View File

@ -412,7 +412,6 @@ module.ViewerActions = actions.Actions({
'ribbon-image-separators', 'ribbon-image-separators',
function(state){ this.config['ribbon-image-separators'] = state }) ], function(state){ this.config['ribbon-image-separators'] = state }) ],
/* /*
setEmptyMsg: ['- Interface/Set message to be displayed when nothing is loaded.', setEmptyMsg: ['- Interface/Set message to be displayed when nothing is loaded.',
function(msg, help){ this.ribbons function(msg, help){ this.ribbons