mbk-lab
/
nextcloud
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
core/css/jquery.ocdialog.css
View File

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

22
core/css/styles.css
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; } .ui-datepicker-prev,.ui-datepicker-next{ border:1px solid #ddd; background:#fff; }
/* ---- DIALOGS ---- */ /* ---- DIALOGS ---- */
#oc-dialog-filepicker-content .dirtree {width:92%; overflow:hidden; } #oc-dialog-filepicker-content .dirtree {
#oc-dialog-filepicker-content .dirtree .home { 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-image:url('../img/places/home.svg?v=1');
background-repeat:no-repeat; background-repeat:no-repeat;
background-position: left center; 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:not(:last-child) { cursor: pointer; }
#oc-dialog-filepicker-content .dirtree span:last-child { font-weight: bold; } #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 .dirtree span:not(:last-child)::after { content: '>'; padding: 3px;}
#oc-dialog-filepicker-content .filelist { #oc-dialog-filepicker-content .filelist {
overflow-y:auto; overflow-y:auto;
height: 300px; height: 290px;
background-color:white; background-color:white;
width:100%; width:100%;
} }
#oc-dialog-filepicker-content .filelist li:first-child {
border-top: 1px solid #eee;
}
#oc-dialog-filepicker-content .filelist li { #oc-dialog-filepicker-content .filelist li {
position: relative; position: relative;
height: 40px;
padding: 5px;
border-bottom: 1px solid #eee;
} }
#oc-dialog-filepicker-content .filelist .filename { #oc-dialog-filepicker-content .filelist .filename {
position: absolute; position: absolute;
top: 8px; padding-top: 9px;
max-width: 60%; max-width: 60%;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;

11
core/js/oc-dialogs.js
View File

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

2
core/templates/filepicker.html
View File

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