From 030dd1d963bb7a0ab824b823d777a58fc105b1e5 Mon Sep 17 00:00:00 2001
From: Kate Arzamastseva <pshns@ukr.net>
Date: Mon, 20 Jun 2011 19:16:09 +0300
Subject: thumbnails and list view

---
 inc/media.php                    |  45 ++++++++--------
 inc/template.php                 |   2 +-
 lib/images/icon-list.png         | Bin 0 -> 3342 bytes
 lib/images/icon-sort.png         | Bin 0 -> 316 bytes
 lib/images/icon-thumb.png        | Bin 0 -> 969 bytes
 lib/tpl/default/design.css       |   2 +-
 lib/tpl/default/mediamanager.css | 110 ++++++++++++++++++++++++---------------
 7 files changed, 91 insertions(+), 68 deletions(-)
 create mode 100644 lib/images/icon-list.png
 create mode 100644 lib/images/icon-sort.png
 create mode 100644 lib/images/icon-thumb.png

diff --git a/inc/media.php b/inc/media.php
index 1bcb6a7b2..b4b62d2c5 100644
--- a/inc/media.php
+++ b/inc/media.php
@@ -546,7 +546,7 @@ function media_tabs_files($selected=false){
     $tab .= ' class="'.$class.'" >'.$lang['media_searchtab'].'</a>';
     echo $tab;
 
-    echo '<div class="mediamanager-clear">&nbsp;</div>';
+    echo '<div class="clearer"></div>';
     echo '</div>';
 }
 
@@ -581,7 +581,7 @@ function media_tabs_details($selected=false){
     $tab .= ' class="'.$class.'" >'.$lang['media_historytab'].'</a>';
     echo $tab;
 
-    echo '<div class="mediamanager-clear">&nbsp;</div>';
+    echo '<div class="clearer"></div>';
     echo '</div>';
 }
 
@@ -606,7 +606,7 @@ function media_tab_files_options(){
     echo '<div class="mediamanager-block-sort">'.$lang['media_sort'];
     //select
     echo '</div>';
-    echo '<div class="mediamanager-clear">&nbsp;</div>';
+    echo '<div class="clearer"></div>';
     echo '</div>';
 }
 
@@ -628,13 +628,12 @@ function media_tab_files($ns,$auth=null,$jump='') {
         echo '<div class="nothing">'.$lang['nothingfound'].'</div>'.NL;
     }else{
         if ($view == 'list') {
-            echo '<div class="mediamanager-files-list-tab">';
-            echo '</div>';
+            echo '<ul class="mediamanager-file-list mediamanager-list" id="id-mediamanager-file-list">';
         } else {
-            echo '<div class="mediamanager-files-thumbnails-tab">';
-            media_filelist($ns,$auth,$jump,'thumbs');
-            echo '</div>';
+            echo '<ul class="mediamanager-file-list mediamanager-thumbs" id="id-mediamanager-file-list">';
         }
+        media_filelist($ns,$auth,$jump,'thumbs');
+        echo '</ul>';
     }
     echo '</div>';
     echo '</div>';
@@ -1044,24 +1043,24 @@ function media_printfile_thumbs($item,$auth,$jump){
     // Prepare filename
     $file = utf8_decodeFN($item['file']);
 
-    // Prepare info
-    $info = '';
+    // output
+    echo '<li><div>';
+    if($item['isimg']) media_printimgdetail($item, true);
+    echo '<a href="'.media_managerURL(array('image' => hsc($item['id']))).'" name=
+        "h_:'.$item['id'].'" class="info" >'.hsc($file).'</a>';
     if($item['isimg']){
+        $info = '';
         $info .= (int) $item['meta']->getField('File.Width');
         $info .= '&#215;';
         $info .= (int) $item['meta']->getField('File.Height');
-        $info .= '<br/>';
-    }
-    $info .= '<i>'.dformat($item['mtime']).'</i><br/>';
-    $info .= filesize_h($item['size']);
-
-    // output
-    echo '<div class="float-image" >';
-    if($item['isimg']) media_printimgdetail($item, true);
-    echo '<br/><a href="'.media_managerURL(array('image' => hsc($item['id']))).'" name=
-        "h_:'.$item['id'].'"  >'.hsc($file).'</a><br/>';
-    echo '<span>'.$info.'</span><br/>';
-    echo '</div>'.NL;
+        echo '<span class="info">'.$info.'</span>';
+    }
+    $info = '<i>'.dformat($item['mtime']).'</i>';
+    echo '<span class="info">'.$info.'</span>';
+    $info = filesize_h($item['size']);
+    echo '<span class="info">'.$info.'</span>';
+    echo '<div class="clearer"></div>';
+    echo '</div></li>'.NL;
 }
 
 /**
@@ -1088,7 +1087,7 @@ function media_printimgdetail($item, $fullscreen=false){
 
     // output
     if ($fullscreen) {
-        echo '<a name="d_:'.$item['id'].'" href="'.
+        echo '<a name="d_:'.$item['id'].'" class="image" href="'.
             media_managerURL(array('image' => hsc($item['id']))).'">';
         echo '<img src="'.$src.'" '.$att.' />';
         echo '</a>';
diff --git a/inc/template.php b/inc/template.php
index 31320c876..69ed61f7e 100644
--- a/inc/template.php
+++ b/inc/template.php
@@ -1441,7 +1441,7 @@ function tpl_media() {
     echo '<div id="id-mediamanager-layout-detail" class="layout" style="width: 30%;">';
     tpl_fileDetails();
     echo '</div>';
-    echo '<div class="mediamanager-clear">&nbsp;</div>';
+    echo '<div class="clearer"></div>';
     echo '</div>';
     echo '</div>';
 }
diff --git a/lib/images/icon-list.png b/lib/images/icon-list.png
new file mode 100644
index 000000000..ecfeed92d
Binary files /dev/null and b/lib/images/icon-list.png differ
diff --git a/lib/images/icon-sort.png b/lib/images/icon-sort.png
new file mode 100644
index 000000000..c6403dd3c
Binary files /dev/null and b/lib/images/icon-sort.png differ
diff --git a/lib/images/icon-thumb.png b/lib/images/icon-thumb.png
new file mode 100644
index 000000000..ccc7a101d
Binary files /dev/null and b/lib/images/icon-thumb.png differ
diff --git a/lib/tpl/default/design.css b/lib/tpl/default/design.css
index 029a5525c..1dee4dc69 100644
--- a/lib/tpl/default/design.css
+++ b/lib/tpl/default/design.css
@@ -249,7 +249,7 @@ div.dokuwiki div.pagenav-next {
 /* ----------- type of recent changes ------------- */
 
 div.dokuwiki div.changestypenav {
-    border-bottom: 1px solid #8CACBB;
+    border-bottom: 1px solid __border__;
     padding-bottom: 10px;
     margin-bottom: 10px;
 }
diff --git a/lib/tpl/default/mediamanager.css b/lib/tpl/default/mediamanager.css
index bf4513f0c..25816e273 100644
--- a/lib/tpl/default/mediamanager.css
+++ b/lib/tpl/default/mediamanager.css
@@ -1,18 +1,3 @@
-.float-image {
-    float: left;
-    margin-right: 10px;
-    margin-bottom: 10px;
-    width: 100px;
-    height: 180px;
-    background-color: #DEE7EC;
-    padding: 10px;
-    text-align: center;
-}
-
-.float-image:hover {
-    background-color: #dadada;
-}
-
 /* --- Tree formatting --- */
 
 #media-menu img {
@@ -55,35 +40,36 @@
     overflow-x: hidden;
     padding: 0;
     margin: 0;
+    text-align: left;
 }
 
 .background-container {
-    background-color: #DEE7EC;
+    background-color: __background_alt__;
     margin-bottom: 10px;
     padding: 10px;
     text-align: left;
 }
 
 .mediamanager-link-thumbnails {
-    background: url('icon-thumb.png') 0 -4px no-repeat;
+    background: url('/lib/images/icon-thumb.png') 0 -4px no-repeat;
     padding-left: 30px;
     display: block;
     float: left;
-    /*width: 0;*/
-    /*overflow: hidden;*/
+    width: 0;
+    overflow: hidden;
 }
 
 .mediamanager-link-list {
-    background: url('icon-list.png') 0 -4px no-repeat;
+    background: url('/lib/images/icon-list.png') 0 -4px no-repeat;
     padding-left: 30px;
     display: block;
     float: left;
-    /*width: 0;*/
-    /*overflow: hidden;*/
+    width: 0;
+    overflow: hidden;
 }
 
 .mediamanager-block-sort {
-    background: url('icon-sort.png') 0 -4px no-repeat;
+    background: url('/lib/images/icon-sort.png') 0 -4px no-repeat;
     padding-left: 30px;
     display: block;
     float: right;
@@ -95,22 +81,6 @@
     margin-right: 10px;
 }
 
-.mediamanager-clear {
-    clear: both;
-    line-height: 0;
-    font-size: 0;
-}
-
-.mediamanager-link-upload {
-    background: url('icon-upload.png') 0 -4px no-repeat;
-    padding-left: 30px;
-}
-
-.mediamanager-link-search {
-    background: url('icon-search.png') 0 -4px no-repeat;
-    padding-left: 30px;
-}
-
 .mediamanager-tabs a {
     font-weight: bold;
     display: block;
@@ -130,11 +100,11 @@
 }
 
 .mediamanager-tabs .selected {
-    background-color: #DEE7EC;
+    background-color: __background_alt__;
 }
 
 .mediamanager-tabs a:hover {
-    background-color: #DEE7EC;
+    background-color: __background_alt__;
     opacity: 0.5;
 }
 
@@ -143,7 +113,7 @@
 }
 
 .mediamanager-table tr:nth-child(2n+1){
-    background-color: #f5f5f5;
+    background-color: __background_neu__;
 }
 
 .mediamanager-table {
@@ -151,7 +121,7 @@
 }
 
 .mediamanager-table tr:hover {
-    background-color: #DEE7EC;
+    background-color: __background_alt__;
 }
 
 form.meta textarea.edit {
@@ -160,3 +130,57 @@ form.meta textarea.edit {
     min-width: 95%;
     max-width: 95%;
 }
+
+.mediamanager-file-list {
+    padding: 0;
+    margin: 0 !important;
+}
+
+.mediamanager-thumbs li {
+    width: 100px;
+    min-height: 130px;
+    display: inline-block;
+    margin: 0;
+    margin-right: 10px;
+    margin-bottom: 10px;
+    background-color: __background_alt__;
+    padding: 10px;
+    vertical-align: top;
+    display: -moz-inline-stack;
+    text-align: center;
+}
+
+.mediamanager-thumbs li .info {
+    display: block;
+}
+
+.mediamanager-list li {
+    display: block;
+    margin-bottom: 3px;
+}
+
+.mediamanager-list li:nth-child(2n+1) {
+    background-color: __background_neu__;
+}
+
+.mediamanager-list li .image {
+    width: 50px;
+    height: 50px;
+    overflow: hidden;
+    float: left;
+}
+
+.mediamanager-list li .image img {
+    width: 100%;
+}
+
+.mediamanager-list li .info {
+    overflow: hidden;
+    float: left;
+    margin-left: 5px;
+    width: 20%;
+}
+
+.mediamanager-file-list li:hover {
+    background-color: #dadada;
+}
-- 
cgit v1.2.3