filepicker styling

Signed-off-by: Robin Appelman <robin@icewind.nl>

diff --git a/core/css/jquery.ocdialog.css b/core/css/jquery.ocdialog.css
index b241dcfea6f2e1eca9ca4d7bf3633445a71f9246..a19fa4c52b582ce0aca43d5cf5213bd3cf90ea4b 100644 (file)
--- a/core/css/jquery.ocdialog.css
+++ b/core/css/jquery.ocdialog.css
@@ -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;

diff --git a/core/css/styles.css b/core/css/styles.css
index b5a84108dfc8366a98819336f811d51f49d4dbe0..338d7c2658c27f215afe84fdc40fb95fb10ebc6b 100644 (file)
--- a/core/css/styles.css
+++ b/core/css/styles.css
@@ -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;

diff --git a/core/js/oc-dialogs.js b/core/js/oc-dialogs.js
index 7d12aa13b484e7a1b20e1b5299812b015a2c89c7..10659e50738d60d8ac25d3f8661c13352b5c1983 100644 (file)
--- a/core/js/oc-dialogs.js
+++ b/core/js/oc-dialogs.js
@@ -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);
        },
        /**

diff --git a/core/templates/filepicker.html b/core/templates/filepicker.html
index e761fbdb567bb89623465c146a2bb786835f3eb0..46d1ca3d52dd53463da2b425cef7cef84d411d0e 100644 (file)
--- a/core/templates/filepicker.html
+++ b/core/templates/filepicker.html
@@ -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 />