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

more 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-28 02:31:15 +03:00
parent 7c493a7326
commit b95a4dcea4
2 changed files with 64 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1045,30 +1045,37 @@ stretching in width... */
/* XXX these are still experimental... */ /* XXX these are still experimental... */
// XXX these need to be updated... .mark.brace-open,
.mark.brace-opening { .mark.brace-close {
width: @image-tile-size / 15; width: @image-border * 2;
height: @image-tile-size + 10; height: @image-tile-size;
overflow: visible;
border-top: solid 5px yellow; margin-left: 0px;
border-left: solid 5px yellow;
border-bottom: solid 5px yellow;
margin-top: -10px;
margin-bottom: -10px;
margin-right: -15px;
} }
.mark.brace-closing { .mark.brace-close:after,
width: @image-tile-size / 15; .mark.brace-open:after {
height: @image-tile-size + 10; display: block;
position: absolute;
content: "";
border-top: solid 5px yellow; width: @image-tile-size / 20;
border-right: solid 5px yellow; height: 100%;
border-bottom: solid 5px yellow;
margin-top: -10px; box-sizing: content-box;
margin-bottom: -10px;
margin-left: -15px; border-top: solid @image-border*2 yellow;
border-bottom: solid @image-border*2 yellow;
margin-top: -@image-border * 2;
}
.mark.brace-open:after {
border-left: solid @image-border*2 yellow;
}
.mark.brace-close:after {
left: -@image-tile-size / 20;
border-right: solid @image-border*2 yellow;
} }

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

@ -1596,15 +1596,50 @@ var WidgetTestActions = actions.Actions({
makePartitionAfter: ['Test/Make Partition after image', makePartitionAfter: ['Test/Make Partition after image',
function(image, text){ function(image, text){
var attrs = {} var gid = this.data.getImage(image || 'current')
var attrs = {
gid: gid
}
if(text){ if(text){
attrs.text = text attrs.text = text
} }
this.ribbons.getImage(this.data.getImage(image)) this.ribbons.getImage(gid)
.after($('<span>') .after($('<span>')
.addClass('mark partition') .addClass('mark partition')
.attr(attrs)) .attr(attrs))
}], }],
openBrace: ['Test/Open brace',
function(image){
var gid = this.data.getImage(image || 'current')
var r = this.ribbons.getRibbon(this.data.getRibbon(gid))
this.ribbons.getImage(gid)
.before($('<span>')
.addClass('mark brace-open')
.attr('gid', gid))
// XXX this does not work for non-current images ...
this.ribbons.preventTransitions(r)
// XXX is this correct here???
this.focusImage()
this.ribbons.restoreTransitions(r)
}],
closeBrace: ['Test/Close brace',
function(image){
var gid = this.data.getImage(image || 'current')
var r = this.ribbons.getRibbon(this.data.getRibbon(gid))
this.ribbons.getImage(gid)
.after($('<span>')
.addClass('mark brace-close')
.attr('gid', gid))
// XXX this does not work for non-current images ...
this.ribbons.preventTransitions(r)
// XXX is this correct here???
this.focusImage()
this.ribbons.restoreTransitions(r)
}],
}) })
var WidgetTest = var WidgetTest =