From 85b033f09259d22b8ead73d5f1f33f7777a62a29 Mon Sep 17 00:00:00 2001 From: Dinuka2013513 Date: Thu, 24 Dec 2015 15:10:24 +0530 Subject: [PATCH 1/3] [210]: Changed styles to improve the directory listing. --- content/src/editor.less | 123 ++++++++++++++++++++-------------------- 1 file changed, 62 insertions(+), 61 deletions(-) diff --git a/content/src/editor.less b/content/src/editor.less index ff6a1f1b..c357dd28 100644 --- a/content/src/editor.less +++ b/content/src/editor.less @@ -827,77 +827,78 @@ body#pencildoc #diigolet-csm { padding: 0 } -.directory { - height: 100%; - padding: 10px; - overflow: auto; - /*transition: padding 0.3s;*/ -} - .directory-searchable{ padding-top: 20px; } -.directory .column { - display: inline-block; - float: left; - margin-top: 12px -} - -.directory .item { - display: inline-block; - float: left; - clear: left; - text-decoration: none; - color: #222; - cursor: pointer; - width: 154px; - div { - margin: 0px; - max-height: 154px; - padding: 2px 0; - span { - display: block; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } - .caption { - text-align: center; - } - .thumbnail { - background-color: #eeeeee; - width: 100px; - height: 100px; - margin-top: 16px; - margin-left: 27px; - border: 1px #ccc solid; - border-radius: 4px; - padding: 2px; - } +.directory { + height: 100%; + overflow: auto; + .column { + display: inline-block; + float: left; + margin-top: 25px; + min-width: 104px; + width: 130px; + text-align: center; } - &:hover { - text-decoration: underline; - color: blue; - div .thumbnail { - padding: 0px; - border-width: 2px; - border-color: #1679FF; + + .item { + display: inline-block; + clear: left; + text-decoration: none; + color: #222; + cursor: pointer; + width: 100px; + margin: 0 auto; + div { + margin: 0px; + max-height: 154px; + span { + display: block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + .caption { + text-align: center; + font-size: 23px; + } + .caption-normal { + text-align: left; + font-size: 23px; + } + .thumbnail { + background-color: #eeeeee; + width: 100px; + height: 100px; + border: 1px #ccc solid; + border-radius: 4px; + } } - span:not(.caption) { - display: table; + &:hover, &.right-click-active { text-decoration: underline; - position: relative; - background-color: #f5f5f5; - padding-right: 6px; + color: blue; + div .thumbnail { + padding: 0px; + border-width: 2px; + border-color: #1679FF; + } + span:not(.caption) { + display: table; + text-decoration: underline; + position: relative; + background-color: #f5f5f5; + padding-right: 6px; + } } } -} -.directory .create { - color: #1e90ff; - div .thumbnail { - border-style: dashed; + .create { + color: #1e90ff; + div .thumbnail { + border-style: dashed; + } } } From d87a644bc7dae219262fccd9e37bcd58bec947a0 Mon Sep 17 00:00:00 2001 From: Dinuka2013513 Date: Thu, 24 Dec 2015 15:11:40 +0530 Subject: [PATCH 2/3] [210]: Changed the way how it had arranged the directory listing to minimize the extra space --- content/src/view.js | 54 ++++++++++++++------------------------------- 1 file changed, 16 insertions(+), 38 deletions(-) diff --git a/content/src/view.js b/content/src/view.js index 1b9c6cca..6ef83263 100644 --- a/content/src/view.js +++ b/content/src/view.js @@ -1394,13 +1394,25 @@ function updatePaneLinks(pane) { directory = $('
').appendTo('#' + pane); // width is full directory width minus padding minus scrollbar width. - width = Math.floor(directory.width() - getScrollbarWidth()); + width = Math.floor(directory.width() - getScrollbarWidth() - 1); col = $('
').appendTo(directory); + var colMinWidth = fwidth(col); + + var colCount = Math.round(width / colMinWidth); + var rawCount = Math.floor(list.length / colCount) + ((list.length % colCount) > 0 ? 1 : 0); + for (var x = 1; x < colCount; x++) { + $('
').appendTo(directory); + } + + var cols = $(directory).find('.column').css('width', (Math.floor(width * 100 / colCount) / 100) + "px"); + for (j = 0; j < list.length; j++) { + //Initialize the item and add it to the appropriate column item = $('', { class: 'item' + (list[j].href ? '' : ' create'), href: list[j].href - }).appendTo(col); + }).appendTo(cols.eq(j % colCount)); + figure = $('
').appendTo(item); thumbnail = list[j].thumbnail; // Only show thumbs if it is a supported type, and showThumb is enabled. @@ -1412,47 +1424,13 @@ function updatePaneLinks(pane) { }).appendTo(figure); $('', { text: list[j].name, class: 'caption' }).appendTo(figure); } else { - $('', { text: list[j].name }).appendTo(figure); + $('', { text: list[j].name, class: 'caption-normal' }).appendTo(figure); } if (list[j].link) { item.data('link', list[j].link); } } - items = directory.find('.item'); - maxwidth = 0; - for (j = 0; j < items.length; j++) { - maxwidth = Math.max(maxwidth, Math.ceil(fwidth(items.get(j)))); - } - colcount = Math.min(items.length, Math.floor(width / Math.max(1, maxwidth))); - colsize = items.length; - while (colcount < items.length) { - // Attempt shorter columns from colcount + 1 (or colsize - 1 if shorter). - colsize = Math.min(colsize - 1, Math.ceil(items.length / (colcount + 1))); - tightwidth = 0; - colsdone = 0; - j = 0; - for (colnum = 0; j < items.length; colnum++) { - maxwidth = 0; - for (j = colnum * colsize; - j < items.length && j < (colnum + 1) * colsize; j++) { - maxwidth = Math.max(maxwidth, Math.ceil(fwidth(items.get(j)))); - } - tightwidth += maxwidth; - colsdone += 1; - if (tightwidth > width) { break; } - } - if (tightwidth > width) { break; } - colcount = colsdone; - if (colsize <= 1) { break; } - } - colsize = Math.ceil(items.length / colcount); - for (colnum = 1; colnum * colsize < items.length; colnum++) { - col = $('
').appendTo(directory); - for (j = colnum * colsize; - j < items.length && j < (colnum + 1) * colsize; j++) { - items.eq(j).appendTo(col); - } - } + directory.on('click', '.item', function(e) { if (!e.shiftKey && !e.ctrlKey & !e.metaKey && !e.altKey) { var link = $(this).data('link'); From b9bcc8db769c552dc01ecfb4548f7ea5f552dcea Mon Sep 17 00:00:00 2001 From: Dinuka2013513 Date: Thu, 24 Dec 2015 18:38:04 +0530 Subject: [PATCH 3/3] [210]: Fixed the directory structure to sort by columns --- content/src/view.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/src/view.js b/content/src/view.js index 6ef83263..20c64e3d 100644 --- a/content/src/view.js +++ b/content/src/view.js @@ -1411,7 +1411,7 @@ function updatePaneLinks(pane) { item = $('', { class: 'item' + (list[j].href ? '' : ' create'), href: list[j].href - }).appendTo(cols.eq(j % colCount)); + }).appendTo(cols.eq(Math.floor(j / rawCount))); figure = $('
').appendTo(item); thumbnail = list[j].thumbnail;