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

some more refactoring...

Browse Source 
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
Alex A. Naanou 2015-09-07 18:51:42 +03:00
parent 8d92949e88
commit f00aebe3d5
5 changed files with 68 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

106
ui (gen4)/css/widget/browse.css
View File

@ -1,6 +1,6 @@
/********************************************************** Widget ***/ /********************************************************** Widget ***/
.browse { .browse-widget {
display: inline-block; display: inline-block;
min-width: 300px; min-width: 300px;
width: initial; width: initial;
@ -12,20 +12,20 @@
color: white; color: white;
} }
/* /*
.browse:not(:focus) { .browse-widget:not(:focus) {
opacity: 0.8; opacity: 0.8;
} }
*/ */
.browse .v-block { .browse-widget .v-block {
width: 100%; width: 100%;
height: auto; height: auto;
box-sizing: border-box; box-sizing: border-box;
} }
.browse .v-block:not(:first-of-type) { .browse-widget .v-block:not(:first-of-type) {
border-top: 1px solid rgba(255, 255, 255, 0.3); border-top: 1px solid rgba(255, 255, 255, 0.3);
} }
.browse .v-block:empty { .browse-widget .v-block:empty {
display: none; display: none;
} }
@ -33,7 +33,7 @@
/************************************************************ Path ***/ /************************************************************ Path ***/
.browse .path { .browse-widget .path {
padding: 5px; padding: 5px;
padding-left: 10px; padding-left: 10px;
padding-right: 10px; padding-right: 10px;
@ -50,55 +50,55 @@
overflow: auto; overflow: auto;
} }
/* XXX not sure about this... */ /* XXX not sure about this... */
.browse .path::-webkit-scrollbar { .browse-widget .path::-webkit-scrollbar {
width: 5px; width: 5px;
height: 5px; height: 5px;
} }
.browse .path:hover { .browse-widget .path:hover {
opacity: 1; opacity: 1;
} }
.browse .path:empty { .browse-widget .path:empty {
display: block; display: block;
} }
.browse:not(.flat) .path:not([contenteditable]):before { .browse-widget:not(.flat) .path:not([contenteditable]):before {
content: "/"; content: "/";
} }
.browse .path .dir { .browse-widget .path .dir {
display: inline-block; display: inline-block;
cursor: pointer; cursor: pointer;
opacity: 0.8; opacity: 0.8;
} }
.browse .path .dir:after { .browse-widget .path .dir:after {
content: "/"; content: "/";
} }
.browse .path .dir:hover ~ .dir { .browse-widget .path .dir:hover ~ .dir {
opacity: 0.2; opacity: 0.2;
} }
.browse .path .dir.cur { .browse-widget .path .dir.cur {
opacity: 0.5; opacity: 0.5;
cursor: text; cursor: text;
} }
.browse .path .dir.cur:after { .browse-widget .path .dir.cur:after {
content: ""; content: "";
} }
.browse .path .dir.cur:hover { .browse-widget .path .dir.cur:hover {
opacity: 1; opacity: 1;
} }
.browse .path .dir.cur[contenteditable] { .browse-widget .path .dir.cur[contenteditable] {
opacity: 1; opacity: 1;
} }
.browse .path .dir.cur:empty:not([contenteditable]) { .browse-widget .path .dir.cur:empty:not([contenteditable]) {
position: relative; position: relative;
width: 50px; width: 50px;
height: 12px; height: 12px;
background: transparent; background: transparent;
opacity: 0; opacity: 0;
} }
.browse .path .dir.cur:empty:hover:not([contenteditable]) { .browse-widget .path .dir.cur:empty:hover:not([contenteditable]) {
opacity: 0.6; opacity: 0.6;
} }
.browse .path .dir.cur:empty:hover:not([contenteditable]):after { .browse-widget .path .dir.cur:empty:hover:not([contenteditable]):after {
content: "______"; content: "______";
border: dashed white 1px; border: dashed white 1px;
cursor: text; cursor: text;
@ -109,7 +109,7 @@
/************************************************************ List ***/ /************************************************************ List ***/
/* XXX need to make this resizable up but only to a certain size (~80vh) */ /* XXX need to make this resizable up but only to a certain size (~80vh) */
.browse .list { .browse-widget .list {
/* XXX need a way to make this automatic and depend on .browser /* XXX need a way to make this automatic and depend on .browser
setup to avoid multiple scrollbars and the need to manually setup to avoid multiple scrollbars and the need to manually
dive into the configuration to change the container size dive into the configuration to change the container size
@ -121,7 +121,7 @@
overflow-x: hidden; overflow-x: hidden;
} }
/* /*
.browse .list:before { .browse-widget .list:before {
content: ""; content: "";
position: absolute; position: absolute;
display: inline-block; display: inline-block;
@ -131,7 +131,7 @@
left: 0px; left: 0px;
background: linear-gradient(to top, rgba(128, 128, 128, 0), rgba(128, 128, 128, 1)); background: linear-gradient(to top, rgba(128, 128, 128, 0), rgba(128, 128, 128, 1));
} }
.browse .list:after { .browse-widget .list:after {
content: ""; content: "";
position: absolute; position: absolute;
display: inline-block; display: inline-block;
@ -143,11 +143,11 @@
} }
*/ */
/* /*
.browse .list:empty { .browse-widget .list:empty {
display: block; display: block;
} }
*/ */
.browse .list div { .browse-widget .list div {
padding: 5px; padding: 5px;
padding-left: 10px; padding-left: 10px;
padding-right: 10px; padding-right: 10px;
@ -164,21 +164,21 @@
max-width: 50vh; max-width: 50vh;
overflow: hidden; overflow: hidden;
} }
.browse:not(.flat) .list div:not(.not-traversable):after { .browse-widget:not(.flat) .list div:not(.not-traversable):after {
content: "/"; content: "/";
} }
.browse:focus .list div.selected, .browse-widget:focus .list div.selected,
.browse .path .dir:hover, .browse-widget .path .dir:hover,
.browse .list div:hover { .browse-widget .list div:hover {
background: rgba(0, 0, 0, 0.05); background: rgba(0, 0, 0, 0.05);
opacity: 0.9; opacity: 0.9;
} }
.browse .list div.selected { .browse-widget .list div.selected {
background: rgba(0, 0, 0, 0.08); background: rgba(0, 0, 0, 0.08);
} }
.browse:focus .list div.selected { .browse-widget:focus .list div.selected {
background: rgba(0, 0, 0, 0.08); background: rgba(0, 0, 0, 0.08);
box-shadow: rgba(0, 0, 0, 0.2) 0.1em 0.1em 0.2em; box-shadow: rgba(0, 0, 0, 0.2) 0.1em 0.1em 0.2em;
@ -186,52 +186,52 @@
} }
/* XXX need to make the next two different... */ /* XXX need to make the next two different... */
.browse .list div.filtered-out { .browse-widget .list div.filtered-out {
opacity: 0.5; opacity: 0.5;
} }
.browse:not(.show-filtered-out) .list div.filtered-out { .browse-widget:not(.show-filtered-out) .list div.filtered-out {
display: none; display: none;
} }
.browse .list div.disabled { .browse-widget .list div.disabled {
opacity: 0.3; opacity: 0.3;
} }
/* numbers... */ /* numbers... */
/* XXX need to show this only on devices with keyboards... */ /* XXX need to show this only on devices with keyboards... */
.browse .list div:before { .browse-widget .list div:before {
opacity: 0.3; opacity: 0.3;
float: right; float: right;
font-size: small; font-size: small;
} }
.browse.filtering .list div:before { .browse-widget.filtering .list div:before {
display: none; display: none;
} }
.browse .list div:nth-of-type(1):before { .browse-widget .list div:nth-of-type(1):before {
content: "1"; content: "1";
} }
.browse .list div:nth-of-type(2):before { .browse-widget .list div:nth-of-type(2):before {
content: "2"; content: "2";
} }
.browse .list div:nth-of-type(3):before { .browse-widget .list div:nth-of-type(3):before {
content: "3"; content: "3";
} }
.browse .list div:nth-of-type(4):before { .browse-widget .list div:nth-of-type(4):before {
content: "4"; content: "4";
} }
.browse .list div:nth-of-type(5):before { .browse-widget .list div:nth-of-type(5):before {
content: "5"; content: "5";
} }
.browse .list div:nth-of-type(6):before { .browse-widget .list div:nth-of-type(6):before {
content: "6"; content: "6";
} }
.browse .list div:nth-of-type(7):before { .browse-widget .list div:nth-of-type(7):before {
content: "7"; content: "7";
} }
.browse .list div:nth-of-type(8):before { .browse-widget .list div:nth-of-type(8):before {
content: "8"; content: "8";
} }
.browse .list div:nth-of-type(9):before { .browse-widget .list div:nth-of-type(9):before {
content: "9"; content: "9";
} }
@ -240,31 +240,31 @@
/******************************************************** Theaming ***/ /******************************************************** Theaming ***/
/* Light */ /* Light */
.light .browse { .light .browse-widget {
background: white; background: white;
color: rgba(0, 0, 0, 0.8); color: rgba(0, 0, 0, 0.8);
} }
.light .browse .v-block:not(:first-of-type) { .light .browse-widget .v-block:not(:first-of-type) {
border-top: 1px solid rgba(0, 0, 0, 0.2); border-top: 1px solid rgba(0, 0, 0, 0.2);
} }
/* Dark */ /* Dark */
.dark .browse { .dark .browse-widget {
background: #0a0a0a; background: #0a0a0a;
color: rgba(255, 255, 255, 0.8); color: rgba(255, 255, 255, 0.8);
} }
/* XXX can we make this simpler??? */ /* XXX can we make this simpler??? */
.dark .browse:focus .list div.selected, .dark .browse-widget:focus .list div.selected,
.dark .browse .path .dir:hover, .dark .browse-widget .path .dir:hover,
.dark .browse .list div:hover { .dark .browse-widget .list div:hover {
background: rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.08);
} }
.dark .browse .list div.selected { .dark .browse-widget .list div.selected {
background: rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.1);
} }
.dark .browse:focus .list div.selected { .dark .browse-widget:focus .list div.selected {
background: rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.1);
} }

10
ui (gen4)/css/widget/overlay.css
View File

@ -1,5 +1,5 @@
.overlay { .overlay-widget {
position: absolute; position: absolute;
width: 100%; width: 100%;
@ -15,12 +15,12 @@
-moz-transform-style: preserve-3d; -moz-transform-style: preserve-3d;
transform-style: preserve-3d; transform-style: preserve-3d;
} }
.overlay~.overlay { .overlay-widget~.overlay-widget {
background: rgba(0, 0, 0, 0.1); background: rgba(0, 0, 0, 0.1);
} }
.overlay .content { .overlay-widget .content {
position: relative; position: relative;
display: inline-block; display: inline-block;
@ -40,7 +40,7 @@
box-shadow: rgba(0, 0, 0, 0.1) 0.3em 0.3em 5em; box-shadow: rgba(0, 0, 0, 0.1) 0.3em 0.3em 5em;
} }
.overlay~.overlay .content { .overlay-widget~.overlay-widget .content {
box-shadow: rgba(0, 0, 0, 0.05) 0.1em 0.1em 3em; box-shadow: rgba(0, 0, 0, 0.05) 0.1em 0.1em 3em;
} }
@ -51,7 +51,7 @@
-webkit-filter: blur(2px); -webkit-filter: blur(2px);
filter: blur(2px); filter: blur(2px);
} }
.blur>.overlay { .blur>.overlay-widget {
-webkit-filter: none; -webkit-filter: none;
filter: none; filter: none;
} }

2
ui (gen4)/lib/widget/browse.html
View File

@ -374,7 +374,7 @@ Basic key bindings:
<div class="container"> <div class="container">
<div class="browse"> <div class="browse-widget">
<!-- title, optional --> <!-- title, optional -->
<div class="v-block title"> <div class="v-block title">
[title] [title]

14
ui (gen4)/lib/widget/browse.js
View File

@ -35,7 +35,7 @@ var BrowserClassPrototype = {
// construct the dom... // construct the dom...
make: function(options){ make: function(options){
var browser = $('<div>') var browser = $('<div>')
.addClass('browse') .addClass('browse-widget')
// make thie widget focusable... // make thie widget focusable...
// NOTE: tabindex 0 means automatic tab indexing and -1 means // NOTE: tabindex 0 means automatic tab indexing and -1 means
// focusable bot not tabable... // focusable bot not tabable...
@ -111,7 +111,7 @@ var BrowserPrototype = {
// NOTE: this will not disable manual updates or explicit path // NOTE: this will not disable manual updates or explicit path
// setting. // setting.
// NOTE: another way to disable traversal is to set // NOTE: another way to disable traversal is to set
// .not-traversable on the .browse element // .not-traversable on the .browse-widget element
traversable: true, traversable: true,
// Handle keys that are not bound... // Handle keys that are not bound...
@ -143,7 +143,7 @@ var BrowserPrototype = {
// in filter mode??? // in filter mode???
keyboard: { keyboard: {
FullPathEdit: { FullPathEdit: {
pattern: '.browse .path[contenteditable]', pattern: '.browse-widget .path[contenteditable]',
// keep text editing action from affecting the selection... // keep text editing action from affecting the selection...
ignore: [ ignore: [
@ -171,7 +171,7 @@ var BrowserPrototype = {
}, },
Filter: { Filter: {
pattern: '.browse .path div.cur[contenteditable]', pattern: '.browse-widget .path div.cur[contenteditable]',
// keep text editing action from affecting the selection... // keep text editing action from affecting the selection...
ignore: [ ignore: [
@ -199,7 +199,7 @@ var BrowserPrototype = {
}, },
General: { General: {
pattern: '.browse', pattern: '.browse-widget',
Up: 'prev!', Up: 'prev!',
Down: 'next!', Down: 'next!',
@ -456,7 +456,7 @@ var BrowserPrototype = {
// This will trigger the 'update' event. // This will trigger the 'update' event.
// //
// For uniformity and ease of access from DOM, this will also set the // For uniformity and ease of access from DOM, this will also set the
// 'path' html attribute on the .browse element. // 'path' html attribute on the .browse-widget element.
// //
// If the given string path does not end with a '/' then the path // If the given string path does not end with a '/' then the path
// up to the last item will be loaded and the last item loaded. // up to the last item will be loaded and the last item loaded.
@ -1011,7 +1011,7 @@ var BrowserPrototype = {
// This will trigger the 'select' or 'deselect' events. // This will trigger the 'select' or 'deselect' events.
// //
// For uniformity and ease of access from DOM, this will also set // For uniformity and ease of access from DOM, this will also set
// the value attr on the .browse element. // the value attr on the .browse-widget element.
// NOTE: this is one way and setting the html attribute "value" will // NOTE: this is one way and setting the html attribute "value" will
// not affect the selection, but changing the selection will // not affect the selection, but changing the selection will
// overwrite the attribute. // overwrite the attribute.

4
ui (gen4)/lib/widget/overlay.js
View File

@ -19,7 +19,7 @@ var OverlayClassPrototype = {
make: function(client, options){ make: function(client, options){
var that = this var that = this
var overlay = $('<div>') var overlay = $('<div>')
.addClass('overlay') .addClass('overlay-widget')
.click(function(){ .click(function(){
event.stopPropagation() event.stopPropagation()
}) })
@ -56,7 +56,7 @@ var OverlayPrototype = {
// trigger the event... // trigger the event...
if(handler == null){ if(handler == null){
this.dom.detach() this.dom.detach()
if(this.parent.children('.overlay').length == 0){ if(this.parent.children('.overlay-widget').length == 0){
this.parent.removeClass('blur') this.parent.removeClass('blur')
} }
this.trigger('close') this.trigger('close')