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

tweaking scrolbars + found bug...

Browse Source 
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
Alex A. Naanou 2019-06-11 17:28:38 +03:00
parent 9f463dbe40
commit d4233aaf07
2 changed files with 58 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
ui (gen4)/lib/widget/browse2.html
View File

@ -13,6 +13,9 @@ body {
}
.browse-widget {
user-select: none;
}
.browse-widget:not(.flat) .list :focus {
outline: none;
}
@ -36,6 +39,10 @@ body {
background: rgba(0, 0, 0, 0.08);
}
/* XXX not sure about this... */
.browse-widget .list .list {
overflow: visible;
}
/* XXX stub...
.browse-widget:not(.flat) .list .text:first-child:before {
@ -55,6 +62,36 @@ body {
*/
/* scrollbar setup... */
.browse-widget ::-webkit-scrollbar {
width: 10px;
height: 10px;
}
.browse-widget ::-webkit-scrollbar-button {
display: none;
}
.browse-widget ::-webkit-scrollbar-track {
}
.browse-widget ::-webkit-scrollbar-track-piece {
background: transparent;
}
.browse-widget ::-webkit-scrollbar-track-piece {
background: rgba(0, 0, 0, 0.05);
}
.browse-widget ::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, 0.15);
}
.browse-widget ::-webkit-scrollbar-thumb:hover {
background: rgba(0, 0, 0, 0.3);
}
.browse-widget ::-webkit-scrollbar-corner {
}
.browse-widget ::-webkit-resizer {
}
</style>
<script src="../../ext-lib/jquery.js"></script>
@ -195,10 +232,12 @@ requirejs([
make.Separator()
;(new Array(100))
.fill(1)
.forEach(function(_, i){
make(i) })
make.nest(
'scroll testing',
(new Array(100))
.fill(1)
.map(function(_, i){
return make(i) }))
}, {
itemButtons: [

16
ui (gen4)/lib/widget/browse2.js
View File

@ -3025,6 +3025,14 @@ var BrowserPrototype = {
//
// XXX instrument interactions...
// XXX register event handlers...
// XXX BUG: scrollbar in list can get focus and intercept key events...
// - document.querySelector(':focus') returns null
// - does not reproduce in the ImageGrid.Viewer
// - scrollbar styling does not seem to affect this...
// to reproduce:
// - load a scrolled dialog...
// - click on the scrollbar
// - now the browser does not get key events
renderList: function(items, context){
var that = this
var options = context.options || this.options
@ -3335,7 +3343,13 @@ var BrowserPrototype = {
&& that.dom.querySelectorAll('.focused')
.forEach(function(e){
e.classList.remove('focused') })
this.classList.add('focused') })
this.classList.add('focused')
this.scrollIntoView({
behavior: 'auto',
block: 'nearest',
})
})
// set focus...
.focus() },
__blur__: function(evt, elem){