From fa8e5c7713944541c907aea2b81c6a44382a15f0 Mon Sep 17 00:00:00 2001 From: Kate Arzamastseva Date: Sun, 17 Jul 2011 18:42:43 +0300 Subject: mediamanager html, css reworking --- inc/media.php | 208 +++++++++++++++++---------------------- inc/template.php | 28 +++--- lib/scripts/media.js | 6 +- lib/tpl/default/mediamanager.css | 184 +++++++++++++++++++--------------- 4 files changed, 214 insertions(+), 212 deletions(-) diff --git a/inc/media.php b/inc/media.php index 5e12ac8a6..141ba8c2c 100644 --- a/inc/media.php +++ b/inc/media.php @@ -547,6 +547,21 @@ function media_filelist($ns,$auth=null,$jump='',$fullscreenview=false){ if (!$fullscreenview) media_searchform($ns); } +/** + * Prints mediamanager tab + * + * @author Kate Arzamastseva + * @param string $link + * @param string $class + * @param string $name + * @param string $selected + */ +function media_tab($link, $class, $name, $selected=false) { + if (!empty($selected) && $selected == $class) $class .= ' selected'; + $tab = ''.$name.''; + echo $tab; +} + /** * Prints tabs for files list actions * @@ -566,21 +581,6 @@ function media_tabs_files($selected=false){ echo ''; } -/** - * Prints mediamanager tab - * - * @author Kate Arzamastseva - * @param string $link - * @param string $class - * @param string $name - * @param string $selected - */ -function media_tab($link, $class, $name, $selected=false) { - if (!empty($selected) && $selected == $class) $class .= ' selected'; - $tab = ''.$name.''; - echo $tab; -} - /** * Prints tabs for files details actions * @@ -614,18 +614,23 @@ function media_tab_files_options($ns){ echo '
'; echo $ns; - echo '
'; - echo ''. - $lang['media_thumbsview'].''; - echo ''.$lang['media_listview'].''; + + echo '
'; + + echo ''; + echo $lang['media_thumbsview']; + echo ''; + + echo ''; + echo $lang['media_listview']; + echo ''; echo '
'; - echo '
'.$lang['media_sort']; - //select + + echo '
'; + echo $lang['media_sort']; echo '
'; + echo '
'; echo '
'; } @@ -647,9 +652,9 @@ function media_tab_files($ns,$auth=null,$jump='') { echo '
'.$lang['media_perm_read'].'
'.NL; }else{ if ($view == 'list') { - echo '
    '; + echo '
      '; } else { - echo '
        '; + echo '
          '; } media_filelist($ns,$auth,$jump,true); echo '
        '; @@ -698,9 +703,9 @@ function media_tab_search($ns,$auth=null) { if($do == 'searchlist'){ $view = $_REQUEST['view']; if ($view == 'list') { - echo '
          '; + echo '
            '; } else { - echo '
              '; + echo '
                '; } media_searchlist($query,$ns,$auth,true); echo '
              '; @@ -794,7 +799,7 @@ function media_tab_history($image, $ns, $auth=null) { function media_preview($image, $auth, $rev=false, $meta=false) { global $lang; - echo '
              '; + echo '
              '; $size = media_image_preview_size($image, $rev, $meta); @@ -810,7 +815,7 @@ function media_preview($image, $auth, $rev=false, $meta=false) { $more .= '&w='.$size[0].'&h='.$size[1]; $src = ml($image, $more); - echo ''; + echo ''.$image.''; } echo '
              '; @@ -824,7 +829,7 @@ function media_preview($image, $auth, $rev=false, $meta=false) { function media_preview_buttons($image, $auth, $rev=false) { global $lang; - echo '
              '; + echo '
              '; $more = ''; if ($rev) { @@ -869,6 +874,47 @@ function media_preview_buttons($image, $auth, $rev=false) { echo '
              '; } +/** + * Returns image width and height for mediamanager preview panel + * + * @author Kate Arzamastseva + * @param string $image + * @param int $rev + * @param JpegMeta $meta + * @return array + */ +function media_image_preview_size($image, $rev, $meta) { + if (!preg_match("/\.(jpe?g|gif|png)$/", $image)) return false; + + $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); + } + return array($w, $h); +} + +/** + * Returns the requested EXIF/IPTC tag from the image meta + * + * @author Kate Arzamastseva + * @param array $tags + * @param JpegMeta $meta + * @param string $alt + * @return string + */ +function media_getTag($tags,$meta,$alt=''){ + if($meta === false) return $alt; + $info = $meta->getField($tags); + if($info == false) return $alt; + return $info; +} + /** * Returns mediafile tags * @@ -925,22 +971,6 @@ function media_details($image, $auth, $rev=false, $meta=false) { echo ''; } -/** - * Returns the requested EXIF/IPTC tag from the image meta - * - * @author Kate Arzamastseva - * @param array $tags - * @param JpegMeta $meta - * @param string $alt - * @return string - */ -function media_getTag($tags,$meta,$alt=''){ - if($meta === false) return $alt; - $info = $meta->getField($tags); - if($info == false) return $alt; - return $info; -} - /** * Shows difference between two revisions of file * @@ -989,13 +1019,13 @@ function media_diff($image, $ns, $auth) { $data[4] = $auth; // trigger event - return trigger_event('MEDIA_DIFF', $data, '_media_image_diff', true); + return trigger_event('MEDIA_DIFF', $data, '_media_file_diff', true); } -function _media_image_diff($data) { +function _media_file_diff($data) { if(is_array($data) && count($data)===5) { - return media_image_diff($data[0], $data[1], $data[2], $data[3], $data[4]); + return media_file_diff($data[0], $data[1], $data[2], $data[3], $data[4]); } else { return false; } @@ -1006,10 +1036,10 @@ function _media_image_diff($data) { * * @author Kate Arzamastseva */ -function media_image_diff($image, $l_rev, $r_rev, $ns, $auth){ +function media_file_diff($image, $l_rev, $r_rev, $ns, $auth){ global $lang, $config_cascade; - echo '
                '; + echo '
                  '; echo '
                • '; media_preview($image, $auth, $l_rev, $l_meta); @@ -1062,73 +1092,13 @@ function media_image_diff($image, $l_rev, $r_rev, $ns, $auth){ echo '
                '; - media_image_diff_opacity($image, $l_rev, $r_rev, $l_meta); - media_image_diff_portions($image, $l_rev, $r_rev, $l_meta); -} - -/** - * Returns image width and height for mediamanager preview panel - * - * @author Kate Arzamastseva - * @param string $image - * @param int $rev - * @param JpegMeta $meta - * @return array - */ -function media_image_preview_size($image, $rev, $meta) { - if (!preg_match("/\.(jpe?g|gif|png)$/", $image)) return false; - - $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); - } - return array($w, $h); -} - -/** - * Prints two images side by side - * and slider to change the opacity - * of one of the images - * - * @author Kate Arzamastseva - * @param string $image - * @param int $l_rev - * @param int $r_rev - * @param JpegMeta $meta - */ -function media_image_diff_opacity($image, $l_rev, $r_rev, $meta) { - $l_size = media_image_preview_size($image, $l_rev, $meta); - $r_size = media_image_preview_size($image, $r_rev, $meta); - - if (!$l_size || !$r_size || $l_size != $r_size || $l_size[0] < 30) return ''; - - echo '
                '; - - $l_more = 'rev='.$l_rev.'&h='.$l_size[1].'&w='.$l_size[0]; - $r_more = 'rev='.$r_rev.'&h='.$l_size[1].'&w='.$l_size[0]; - - $l_src = ml($image, $l_more); - $r_src = ml($image, $r_more); - - echo '
                '; - echo '
                '; - echo '
                '; - echo '
                '; - - echo '
                '; - echo '
                '; + media_image_diff($image, $l_rev, $r_rev, $l_meta, 'opacity'); + media_image_diff($image, $l_rev, $r_rev, $l_meta, 'portions'); } /** * Prints two images side by side - * and slider to change the width - * of one of the images + * and slider * * @author Kate Arzamastseva * @param string $image @@ -1136,7 +1106,7 @@ function media_image_diff_opacity($image, $l_rev, $r_rev, $meta) { * @param int $r_rev * @param JpegMeta $meta */ -function media_image_diff_portions($image, $l_rev, $r_rev, $meta) { +function media_image_diff($image, $l_rev, $r_rev, $meta, $type) { $l_size = media_image_preview_size($image, $l_rev, $meta); $r_size = media_image_preview_size($image, $r_rev, $meta); @@ -1150,12 +1120,12 @@ function media_image_diff_portions($image, $l_rev, $r_rev, $meta) { $l_src = ml($image, $l_more); $r_src = ml($image, $r_more); - echo '
                '; - echo '
                '; + echo '
                '; + echo '
                '; echo '
                '; echo '
                '; - echo '
                '; + echo '
                '; echo '
                '; } diff --git a/inc/template.php b/inc/template.php index 81b3795ac..13cec438c 100644 --- a/inc/template.php +++ b/inc/template.php @@ -1146,17 +1146,17 @@ function tpl_fileList(){ media_tabs_files($opened_tab); if ($opened_tab == 'files') { - echo '
                '; + echo '
                '; media_tab_files($NS,$AUTH,$JUMPTO); echo '
                '; } elseif ($opened_tab == 'upload') { - echo '
                '; + echo '
                '; media_tab_upload($NS,$AUTH,$JUMPTO); echo '
                '; } elseif ($opened_tab == 'search') { - echo '
                '; + echo '
                '; media_tab_search($NS,$AUTH); echo '
                '; } @@ -1188,17 +1188,17 @@ function tpl_fileDetails($image, $rev){ media_tabs_details($image, $opened_tab); if ($opened_tab == 'view') { - echo '
                '; + echo '
                '; media_tab_view($image, $NS, $AUTH, $rev); echo '
                '; } elseif ($opened_tab == 'edit') { - echo '
                '; + echo '
                '; media_tab_edit($image, $NS, $AUTH); echo '
                '; } elseif ($opened_tab == 'history') { - echo '
                '; + echo '
                '; media_tab_history($image,$NS,$AUTH); echo '
                '; } @@ -1211,7 +1211,7 @@ function tpl_fileDetails($image, $rev){ * * @author Andreas Gohr */ -function tpl_mediaTree($fullscreen = false){ +function tpl_mediaTree(){ global $NS; ptln('
                '); media_nstree($NS); @@ -1456,8 +1456,9 @@ function tpl_media() { if (isset($REV) && !$JUMPTO) $rev = $REV; echo '
                '; - echo '
                '; - echo '
                '; + echo '
                '; + + echo '
                '; html_msgarea(); echo '
                '; echo ''.hsc($lang['namespaces']).''; @@ -1467,15 +1468,18 @@ function tpl_media() { echo hsc($lang['namespaces']); echo '
                '; echo '
                '; - tpl_mediaTree(true); + tpl_mediaTree(); echo '
                '; echo '
                '; - echo '
                '; + + echo '
                '; tpl_fileList(); echo '
                '; - echo '
                '; + + echo '
                '; tpl_fileDetails($image, $rev); echo '
                '; + echo '
                '; echo '
                '; echo '
                '; diff --git a/lib/scripts/media.js b/lib/scripts/media.js index 8500166dc..c5e6afc9b 100644 --- a/lib/scripts/media.js +++ b/lib/scripts/media.js @@ -302,10 +302,12 @@ var dw_mediamanager = { event.preventDefault(); $content = jQuery('#mediamanager__file_list'); - if ($link.hasClass('mediamanager-link-thumbnails')) { + + if ($link[0].id == 'mediamanager__link_thumbs') { $content.removeClass('mediamanager-list'); $content.addClass('mediamanager-thumbs'); - } else if ($link.hasClass('mediamanager-link-list')) { + + } else if ($link[0].id == 'mediamanager__link_list') { $content.removeClass('mediamanager-thumbs'); $content.addClass('mediamanager-list'); } diff --git a/lib/tpl/default/mediamanager.css b/lib/tpl/default/mediamanager.css index 6c4b64d3e..02c732ce7 100644 --- a/lib/tpl/default/mediamanager.css +++ b/lib/tpl/default/mediamanager.css @@ -1,19 +1,17 @@ +/* Layout */ + .mediamanager { width: 100%; overflow-x: auto; } -.mediamanager .mediamanager-slider { - -} - -.mediamanager .mediamanager-slider .layout { +#mediamanager__layout .layout { margin-left: 5px; margin-right: 5px; float: left; } -.mediamanager .scroll-container { +#mediamanager__layout .scroll-container { overflow-y: auto; overflow-x: hidden; padding: 0; @@ -21,44 +19,45 @@ text-align: left; } -.background-container { +#mediamanager__layout .background-container { background-color: __background_alt__; margin-bottom: 10px; padding: 10px; text-align: left; } -.mediamanager-link-thumbnails { - background: url('../../images/icon-thumb.png') 0 -4px no-repeat; - padding-left: 30px; - display: inline-block; - width: 0; - overflow: hidden; +#mediamanager__layout .background-container .icon { + margin-right: 5px; +} - margin-left: 10px; +#mediamanager__layout_namespaces { + width: 25%; + min-width: 125px; } -.mediamanager-link-list { - background: url('../../images/icon-list.png') 0 -4px no-repeat; - padding-left: 30px; - display: inline-block; - width: 0; - overflow: hidden; +#mediamanager__layout_list { + width: 40%; + min-width: 375px; } -.mediamanager-block-sort { - background: url('../../images/icon-sort.png') 0 -4px no-repeat; - padding-left: 30px; - display: block; - float: right; +#mediamanager__layout_detail { + width: 30%; + min-width: 200px; } -.mediamanager-link-thumbnails:hover, -.mediamanager-link-list:hover { - width: auto; - margin-right: 10px; +.ui-resizable-e:hover { + background-color: #dadada; } +/* Namespaces tree */ + +.idx .selected { + background-color: __highlight__; + font-weight: bold; +} + +/* Tabs */ + .mediamanager-tabs a { font-weight: bold; display: block; @@ -66,13 +65,7 @@ padding: 10px; padding-bottom: 5px; padding-top: 5px; - margin-right: 2px; - - -moz-border-radius-topright: 10px; - -webkit-border-top-right-radius: 10px; - -moz-border-radius-topleft: 10px; - -webkit-border-top-left-radius: 10px; border-top-right-radius: 10px; border-top-left-radius: 10px; } @@ -86,34 +79,55 @@ opacity: 0.5; } -.mediamanager-table td { - padding: 5px; +/* Title links */ + +#mediamanager__tabs_list { + display: inline; } -.mediamanager-table tr:nth-child(2n+1){ - background-color: __background_neu__; +#mediamanager__link_thumbs { + background: url('../../images/icon-thumb.png') 0 -4px no-repeat; + padding-left: 30px; + display: inline-block; + width: 0; + overflow: hidden; + margin-left: 10px; } -.mediamanager-table { - background: expression(this.rowIndex % 2 == 0 ? "#ffffff" : "#f5f5f5"); +#mediamanager__link_list { + background: url('../../images/icon-list.png') 0 -4px no-repeat; + padding-left: 30px; + display: inline-block; + width: 0; + overflow: hidden; } -.mediamanager-table tr:hover { - background-color: __background_alt__; +#mediamanager__link_thumbs:hover, +#mediamanager__link_list:hover { + width: auto; + margin-right: 10px; } -form.meta textarea.edit { - height: 8em; - width: 95%; - min-width: 95%; - max-width: 95%; +#mediamanager__sort { + background: url('../../images/icon-sort.png') 0 -4px no-repeat; + padding-left: 30px; + display: block; + float: right; } -.mediamanager-file-list { +/* File list */ + +#mediamanager__file_list { padding: 0; margin: 0 !important; } +#mediamanager__file_list li:hover { + background-color: #dadada; +} + +/* Files thumbs view */ + .mediamanager-thumbs li { width: 100px; min-height: 130px; @@ -129,9 +143,11 @@ form.meta textarea.edit { zoom: 1; position: relative; } + * html .mediamanager-thumbs li { display: inline; } + *+html .mediamanager-thumbs li { display: inline; height: 130px; @@ -160,6 +176,11 @@ form.meta textarea.edit { white-space: nowrap; } +.mediamanager-thumbs li .date { + font-style: italic; + white-space: normal; +} + .mediamanager-thumbs li input[type=checkbox] { display: none; float: left; @@ -171,6 +192,8 @@ form.meta textarea.edit { display: block; } +/* Files list view */ + .mediamanager-list li { list-style: none; display: block; @@ -194,7 +217,6 @@ form.meta textarea.edit { .mediamanager-list li .image img { width: 100%; - vertical-align: middle; } .mediamanager-list li .name, @@ -208,8 +230,7 @@ form.meta textarea.edit { white-space: nowrap; } -.mediamanager-list li .date, -.mediamanager-thumbs li .date { +.mediamanager-list li .date { font-style: italic; white-space: normal; } @@ -238,16 +259,41 @@ form.meta textarea.edit { display: block; } -.mediamanager-file-list li:hover { - background-color: #dadada; +/* Upload panel */ + +#mediamanager__layout div.upload { + padding-bottom: 0.5em; } -.mediamanager-table-50 { +/* File preview */ + +#mediamanager__preview, +#mediamanager__preview_buttons { + text-align: center; + margin-bottom: 5px; +} + +#mediamanager__preview img { + width: 99%; +} + +/* Meta data edit form */ + +form.meta textarea.edit { + height: 8em; + width: 95%; + min-width: 95%; + max-width: 95%; +} + +/* File diff */ + +#mediamanager__diff_table { padding: 0; margin: 0 !important; } -.mediamanager-table-50 li { +#mediamanager__diff_table li { width: 48%; display: inline-block; margin: 0; @@ -258,33 +304,13 @@ form.meta textarea.edit { color: black; } -* html .mediamanager-table-50 li { +* html #mediamanager__diff_table li { display: inline; } -.mediamanager-preview { - text-align: center; - margin-bottom: 5px; -} - -.ui-resizable-e:hover { - background-color: #dadada; -} - -.idx .selected { - background-color: __highlight__; - font-weight: bold; -} - -.mediamanager div.upload { - padding-bottom: 0.5em; -} - -.background-container .icon { - margin-right: 5px; -} +/* Image diff */ -.mediamanager dl.img_tags dd.highlighted{ +#mediamanager__layout dl.img_tags dd.highlighted{ background-color: __highlight__; } -- cgit v1.2.3