mediamanager icons

dokuwiki · Jul 14, 2011 · 23786fd · 23786fd
1 parent dd9ba38
commit 23786fd
Show file tree

Hide file tree

Showing 3 changed files with 77 additions and 22 deletions.
diff --git a/inc/media.php b/inc/media.php
@@ -718,7 +718,10 @@ function media_tab_view($image, $ns, $auth=null, $rev=false) {
     if(is_null($auth)) $auth = auth_quickaclcheck("$ns:*");
 
     echo '<div class="background-container">';
-    echo $image;
+    list($ext,$mime,$dl) = mimetype($image,false);
+    $class = preg_replace('/[^_\-a-z0-9]+/i','_',$ext);
+    $class = 'select mediafile mf_'.$class;
+    echo '<a class="'.$class.'" >'.$image.'</a>';
     echo '</div>';
 
     echo '<div class="scroll-container">';
@@ -789,9 +792,8 @@ function media_preview($image, $auth, $rev=false, $meta=false) {
         echo '<div class="nothing">'.$lang['media_perm_read'].'</div>'.NL;
         return '';
     }
-    $info = getimagesize(mediaFN($image, $rev));
-    $w = (int) $info[0];
-    $h = (int) $info[1];
+
+    echo '<div class="mediamanager-preview">';
 
     $more = '';
     if ($rev) {
@@ -802,17 +804,22 @@ function media_preview($image, $auth, $rev=false, $meta=false) {
     }
     $link = ml($image,$more,true,'&');
 
-    $size = 500;
-    if($meta && ($w > $size || $h > $size)){
-        $ratio = $meta->getResizeRatio($size, $size);
-        $w = floor($w * $ratio);
-        $h = floor($h * $ratio);
-        $more .= "&h=$h&w=$w";
-    }
+    if (preg_match("/\.(jpe?g|gif|png)$/", $image)) {
+        $info = getimagesize(mediaFN($image, $rev));
+        $w = (int) $info[0];
+        $h = (int) $info[1];
+
+        $size = 500;
+        if($meta && ($w > $size || $h > $size)){
+            $ratio = $meta->getResizeRatio($size, $size);
+            $w = floor($w * $ratio);
+            $h = floor($h * $ratio);
+            $more .= "&h=$h&w=$w";
+        }
 
-    $src = ml($image, $more);
-    echo '<div class="mediamanager-preview">';
-    echo '<img src="'.$src.'" alt="" width="99%" style="max-width: '.$w.'px;" /><br /><br />';
+        $src = ml($image, $more);
+        echo '<img src="'.$src.'" alt="" width="99%" style="max-width: '.$w.'px;" /><br /><br />';
+    }
 
     $form = new Doku_Form(array('action'=>$link, 'target'=>'_blank'));
     $form->addElement(form_makeButton('submit','',$lang['mediaview']));
@@ -1118,6 +1125,19 @@ function media_printfile($item,$auth,$jump,$display_namespace=false){
     echo '</div>'.NL;
 }
 
+function media_printicon($filename){
+    list($ext,$mime,$dl) = mimetype(mediaFN($filename),false);
+
+    if (@file_exists(DOKU_INC.'lib/images/fileicons/'.$ext.'.png')) {
+        $icon = DOKU_BASE.'lib/images/fileicons/'.$ext.'.png';
+    } else {
+        $icon = DOKU_BASE.'lib/images/fileicons/file.png';
+    }
+
+    echo '<img src="'.$icon.'" alt="'.$filename.'" class="icon" />';
+
+}
+
 /**
  * Formats and prints one file in the list in the thumbnails view
  *
@@ -1132,13 +1152,15 @@ function media_printfile_thumbs($item,$auth,$jump=false){
 
     // output
     echo '<li><div>';
+
     if($item['isimg']) {
         media_printimgdetail($item, true);
+
     } else {
         echo '<a name="d_:'.$item['id'].'" class="image" title="'.$item['id'].'" href="'.
-            media_managerURL(array('image' => hsc($item['id']))).'">';
-        echo '<img src="'.DOKU_BASE.'lib/images/icon-file.png" width="90px" />';
-        echo '</a>';
+            media_managerURL(array('image' => hsc($item['id']))).'"><div>';
+        media_printicon($item['id']);
+        echo '</div></a>';
     }
     //echo '<input type=checkbox />';
     echo '<a href="'.media_managerURL(array('image' => hsc($item['id']))).'" name=
@@ -1190,7 +1212,7 @@ function media_printimgdetail($item, $fullscreen=false){
     if ($fullscreen) {
         echo '<a name="d_:'.$item['id'].'" class="image" title="'.$item['id'].'" href="'.
             media_managerURL(array('image' => hsc($item['id']))).'">';
-        echo '<img src="'.$src.'" '.$att.' />';
+        echo '<div><img src="'.$src.'" '.$att.' /></div>';
         echo '</a>';
         return 1;
     }

diff --git a/lib/scripts/media.js b/lib/scripts/media.js
@@ -329,7 +329,11 @@ var dw_mediamanager = {
         if ($link[0].id == 'mediamanager__btn_restore' && !confirm(LANG['restore_confirm'])) return false;
 
         $content = jQuery('#mediamanager__layout_detail');
-        jQuery('.scroll-container', $content).html('<img src="' + DOKU_BASE + 'lib/images/loading.gif" alt="..." class="load" />');
+        if (jQuery('.scroll-container', $content).length) {
+            jQuery('.scroll-container', $content).html('<img src="' + DOKU_BASE + 'lib/images/loading.gif" alt="..." class="load" />');
+        } else {
+            jQuery($content).html('<img src="' + DOKU_BASE + 'lib/images/loading.gif" alt="..." class="load" />');
+        }
 
         params = '';
 

diff --git a/lib/tpl/default/mediamanager.css b/lib/tpl/default/mediamanager.css
@@ -134,7 +134,7 @@ form.meta textarea.edit {
 }
 *+html .mediamanager-thumbs li {
     display: inline;
-    _height: 130px;
+    height: 130px;
 }
 
 .mediamanager-thumbs li .image {
@@ -144,12 +144,20 @@ form.meta textarea.edit {
     overflow: hidden;
 }
 
+.mediamanager-thumbs li .image div {
+    vertical-align: middle;
+    display: table-cell;
+    width: 100px;
+    height: 90px;
+}
+
 .mediamanager-thumbs li .name,
 .mediamanager-thumbs li .size,
 .mediamanager-thumbs li .filesize,
 .mediamanager-thumbs li .date {
     display: block;
     overflow: hidden;
+    white-space: nowrap;
 }
 
 .mediamanager-thumbs li input[type=checkbox] {
@@ -186,6 +194,7 @@ form.meta textarea.edit {
 
 .mediamanager-list li .image img {
     width: 100%;
+    vertical-align: middle;
 }
 
 .mediamanager-list li .name,
@@ -196,11 +205,26 @@ form.meta textarea.edit {
     float: left;
     width: 19%;
     margin-left: 1%;
+    white-space: nowrap;
 }
 
 .mediamanager-list li .date,
 .mediamanager-thumbs li .date {
     font-style: italic;
+    white-space: normal;
+}
+
+.mediamanager-list .icon {
+    max-width: 16px;
+    max-height: 16px;
+}
+
+.mediamanager-list li .image div {
+    vertical-align: middle;
+    text-align: center;
+    display: table-cell;
+    width: 100px;
+    height: 40px;
 }
 
 .mediamanager-list li input[type=checkbox] {
@@ -231,8 +255,9 @@ form.meta textarea.edit {
     padding: 2px;
     vertical-align: top;
     zoom: 1;
-    color: black !important;
+    color: black;
 }
+
 * html .mediamanager-table-50 li {
     display: inline;
 }
@@ -252,4 +277,8 @@ form.meta textarea.edit {
 
 .mediamanager div.upload {
     padding-bottom: 0.5em;
-}
+}
+
+.background-container .icon {
+    margin-right: 5px;
+}