filepicker styling

Signed-off-by: Robin Appelman <robin@icewind.nl>
This commit is contained in:
Robin Appelman 2016-10-14 17:31:10 +02:00 committed by Morris Jobke
parent 862c4a854a
commit 3f1b3dd9d2
No known key found for this signature in database
GPG Key ID: 9CE5ED29E7FCD38A
4 changed files with 25 additions and 13 deletions

View File

@ -14,7 +14,8 @@
background: white;
font-weight: bold;
font-size: 110%;
margin-bottom: 10px;
margin-bottom: 5px;
margin-top: -9px;
}
.oc-dialog-content {
z-index: 1000;

View File

@ -763,29 +763,39 @@ a.bookmarklet { background-color:#ddd; border:1px solid #ccc; padding:5px;paddin
.ui-datepicker-prev,.ui-datepicker-next{ border:1px solid #ddd; background:#fff; }
/* ---- DIALOGS ---- */
#oc-dialog-filepicker-content .dirtree {width:92%; overflow:hidden; }
#oc-dialog-filepicker-content .dirtree .home {
#oc-dialog-filepicker-content .dirtree {
width:92%;
float: left;
margin-left: 15px;
overflow:hidden;
}
#oc-dialog-filepicker-content .dirtree div:first-child a {
background-image:url('../img/places/home.svg?v=1');
background-repeat:no-repeat;
background-position: left center;
width: 30px;
display: inline-block;
}
#oc-dialog-filepicker-content .dirtree span:not(:last-child) { cursor: pointer; }
#oc-dialog-filepicker-content .dirtree span:last-child { font-weight: bold; }
#oc-dialog-filepicker-content .dirtree span:not(:last-child)::after { content: '>'; padding: 3px;}
#oc-dialog-filepicker-content .filelist {
overflow-y:auto;
height: 300px;
height: 290px;
background-color:white;
width:100%;
}
#oc-dialog-filepicker-content .filelist li:first-child {
border-top: 1px solid #eee;
}
#oc-dialog-filepicker-content .filelist li {
position: relative;
height: 40px;
padding: 5px;
border-bottom: 1px solid #eee;
}
#oc-dialog-filepicker-content .filelist .filename {
position: absolute;
top: 8px;
padding-top: 9px;
max-width: 60%;
overflow: hidden;
white-space: nowrap;

View File

@ -174,7 +174,7 @@ var OCdialogs = {
self.$filePicker.ready(function() {
self.$filelist = self.$filePicker.find('.filelist');
self.$dirTree = self.$filePicker.find('.dirtree');
self.$dirTree.on('click', 'span:not(:last-child)', self, self._handleTreeListSelect);
self.$dirTree.on('click', 'div:not(:last-child)', self, self._handleTreeListSelect.bind(self));
self.$filelist.on('click', 'li', function(event) {
self._handlePickerClick(event, $(this));
});
@ -792,8 +792,9 @@ var OCdialogs = {
_fillSlug: function() {
this.$dirTree.empty();
var self = this;
var dir;
var path = this.$filePicker.data('path');
var $template = $('<span data-dir="{dir}">{name}</span>');
var $template = $('<div data-dir="{dir}"><a>{name}</a></div>').addClass('crumb');
if(path) {
var paths = path.split('/');
$.each(paths, function(index, dir) {
@ -809,15 +810,15 @@ var OCdialogs = {
}
$template.octemplate({
dir: '',
name: '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;' // Ugly but works ;)
}, {escapeFunction: null}).addClass('home svg').prependTo(this.$dirTree);
name: '' // Ugly but works ;)
}, {escapeFunction: null}).prependTo(this.$dirTree);
},
/**
* handle selection made in the tree list
*/
_handleTreeListSelect:function(event) {
var self = event.data;
var dir = $(event.target).data('dir');
var dir = $(event.target).parent().data('dir');
self._fillFilePicker(dir);
},
/**

View File

@ -1,5 +1,5 @@
<div id="{dialog_name}" title="{title}">
<span class="dirtree"></span>
<span class="dirtree breadcrumb"></span>
<ul class="filelist">
<li data-entryname="{filename}" data-type="{type}">
<img />