Skip to content
Snippets Groups Projects
Commit 030dd1d9 authored by Kate Arzamastseva's avatar Kate Arzamastseva
Browse files

thumbnails and list view

parent 2e55802c
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
inc/media.php
+ 22
− 23
View file @ 030dd1d9
...@@ -546,7 +546,7 @@ function media_tabs_files($selected=false){ ...@@ -546,7 +546,7 @@ function media_tabs_files($selected=false){
$tab .= ' class="'.$class.'" >'.$lang['media_searchtab'].'</a>'; $tab .= ' class="'.$class.'" >'.$lang['media_searchtab'].'</a>';
echo $tab; echo $tab;
echo '<div class="mediamanager-clear">&nbsp;</div>'; echo '<div class="clearer"></div>';
echo '</div>'; echo '</div>';
} }
...@@ -581,7 +581,7 @@ function media_tabs_details($selected=false){ ...@@ -581,7 +581,7 @@ function media_tabs_details($selected=false){
$tab .= ' class="'.$class.'" >'.$lang['media_historytab'].'</a>'; $tab .= ' class="'.$class.'" >'.$lang['media_historytab'].'</a>';
echo $tab; echo $tab;
echo '<div class="mediamanager-clear">&nbsp;</div>'; echo '<div class="clearer"></div>';
echo '</div>'; echo '</div>';
} }
...@@ -606,7 +606,7 @@ function media_tab_files_options(){ ...@@ -606,7 +606,7 @@ function media_tab_files_options(){
echo '<div class="mediamanager-block-sort">'.$lang['media_sort']; echo '<div class="mediamanager-block-sort">'.$lang['media_sort'];
//select //select
echo '</div>'; echo '</div>';
echo '<div class="mediamanager-clear">&nbsp;</div>'; echo '<div class="clearer"></div>';
echo '</div>'; echo '</div>';
} }
...@@ -628,13 +628,12 @@ function media_tab_files($ns,$auth=null,$jump='') { ...@@ -628,13 +628,12 @@ function media_tab_files($ns,$auth=null,$jump='') {
echo '<div class="nothing">'.$lang['nothingfound'].'</div>'.NL; echo '<div class="nothing">'.$lang['nothingfound'].'</div>'.NL;
}else{ }else{
if ($view == 'list') { if ($view == 'list') {
echo '<div class="mediamanager-files-list-tab">'; echo '<ul class="mediamanager-file-list mediamanager-list" id="id-mediamanager-file-list">';
echo '</div>';
} else { } else {
echo '<div class="mediamanager-files-thumbnails-tab">'; echo '<ul class="mediamanager-file-list mediamanager-thumbs" id="id-mediamanager-file-list">';
media_filelist($ns,$auth,$jump,'thumbs');
echo '</div>';
} }
media_filelist($ns,$auth,$jump,'thumbs');
echo '</ul>';
} }
echo '</div>'; echo '</div>';
echo '</div>'; echo '</div>';
...@@ -1044,24 +1043,24 @@ function media_printfile_thumbs($item,$auth,$jump){ ...@@ -1044,24 +1043,24 @@ function media_printfile_thumbs($item,$auth,$jump){
// Prepare filename // Prepare filename
$file = utf8_decodeFN($item['file']); $file = utf8_decodeFN($item['file']);
// Prepare info // output
$info = ''; 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']){ if($item['isimg']){
$info = '';
$info .= (int) $item['meta']->getField('File.Width'); $info .= (int) $item['meta']->getField('File.Width');
$info .= '&#215;'; $info .= '&#215;';
$info .= (int) $item['meta']->getField('File.Height'); $info .= (int) $item['meta']->getField('File.Height');
$info .= '<br/>'; echo '<span class="info">'.$info.'</span>';
} }
$info .= '<i>'.dformat($item['mtime']).'</i><br/>'; $info = '<i>'.dformat($item['mtime']).'</i>';
$info .= filesize_h($item['size']); echo '<span class="info">'.$info.'</span>';
$info = filesize_h($item['size']);
// output echo '<span class="info">'.$info.'</span>';
echo '<div class="float-image" >'; echo '<div class="clearer"></div>';
if($item['isimg']) media_printimgdetail($item, true); echo '</div></li>'.NL;
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;
} }
/** /**
...@@ -1088,7 +1087,7 @@ function media_printimgdetail($item, $fullscreen=false){ ...@@ -1088,7 +1087,7 @@ function media_printimgdetail($item, $fullscreen=false){
// output // output
if ($fullscreen) { 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']))).'">'; media_managerURL(array('image' => hsc($item['id']))).'">';
echo '<img src="'.$src.'" '.$att.' />'; echo '<img src="'.$src.'" '.$att.' />';
echo '</a>'; echo '</a>';
......
inc/template.php
+ 1
− 1
View file @ 030dd1d9
...@@ -1441,7 +1441,7 @@ function tpl_media() { ...@@ -1441,7 +1441,7 @@ function tpl_media() {
echo '<div id="id-mediamanager-layout-detail" class="layout" style="width: 30%;">'; echo '<div id="id-mediamanager-layout-detail" class="layout" style="width: 30%;">';
tpl_fileDetails(); tpl_fileDetails();
echo '</div>'; echo '</div>';
echo '<div class="mediamanager-clear">&nbsp;</div>'; echo '<div class="clearer"></div>';
echo '</div>'; echo '</div>';
echo '</div>'; echo '</div>';
} }
......
lib/images/icon-list.png 0 → 100644
NaN GiB (NaN%)
View file @ 030dd1d9
File suppressed by a .gitattributes entry or the file's encoding is unsupported.
lib/images/icon-sort.png 0 → 100644
NaN GiB (NaN%)
View file @ 030dd1d9
File suppressed by a .gitattributes entry or the file's encoding is unsupported.
lib/images/icon-thumb.png 0 → 100644
NaN GiB (NaN%)
View file @ 030dd1d9
File suppressed by a .gitattributes entry or the file's encoding is unsupported.
lib/tpl/default/design.css
+ 1
− 1
View file @ 030dd1d9
...@@ -249,7 +249,7 @@ div.dokuwiki div.pagenav-next { ...@@ -249,7 +249,7 @@ div.dokuwiki div.pagenav-next {
/* ----------- type of recent changes ------------- */ /* ----------- type of recent changes ------------- */
div.dokuwiki div.changestypenav { div.dokuwiki div.changestypenav {
border-bottom: 1px solid #8CACBB; border-bottom: 1px solid __border__;
padding-bottom: 10px; padding-bottom: 10px;
margin-bottom: 10px; margin-bottom: 10px;
} }
......
lib/tpl/default/mediamanager.css
+ 67
− 43
View file @ 030dd1d9
.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 --- */ /* --- Tree formatting --- */
#media-menu img { #media-menu img {
...@@ -55,35 +40,36 @@ ...@@ -55,35 +40,36 @@
overflow-x: hidden; overflow-x: hidden;
padding: 0; padding: 0;
margin: 0; margin: 0;
text-align: left;
} }
.background-container { .background-container {
background-color: #DEE7EC; background-color: __background_alt__;
margin-bottom: 10px; margin-bottom: 10px;
padding: 10px; padding: 10px;
text-align: left; text-align: left;
} }
.mediamanager-link-thumbnails { .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; padding-left: 30px;
display: block; display: block;
float: left; float: left;
/*width: 0;*/ width: 0;
/*overflow: hidden;*/ overflow: hidden;
} }
.mediamanager-link-list { .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; padding-left: 30px;
display: block; display: block;
float: left; float: left;
/*width: 0;*/ width: 0;
/*overflow: hidden;*/ overflow: hidden;
} }
.mediamanager-block-sort { .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; padding-left: 30px;
display: block; display: block;
float: right; float: right;
...@@ -95,22 +81,6 @@ ...@@ -95,22 +81,6 @@
margin-right: 10px; 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 { .mediamanager-tabs a {
font-weight: bold; font-weight: bold;
display: block; display: block;
...@@ -130,11 +100,11 @@ ...@@ -130,11 +100,11 @@
} }
.mediamanager-tabs .selected { .mediamanager-tabs .selected {
background-color: #DEE7EC; background-color: __background_alt__;
} }
.mediamanager-tabs a:hover { .mediamanager-tabs a:hover {
background-color: #DEE7EC; background-color: __background_alt__;
opacity: 0.5; opacity: 0.5;
} }
...@@ -143,7 +113,7 @@ ...@@ -143,7 +113,7 @@
} }
.mediamanager-table tr:nth-child(2n+1){ .mediamanager-table tr:nth-child(2n+1){
background-color: #f5f5f5; background-color: __background_neu__;
} }
.mediamanager-table { .mediamanager-table {
...@@ -151,7 +121,7 @@ ...@@ -151,7 +121,7 @@
} }
.mediamanager-table tr:hover { .mediamanager-table tr:hover {
background-color: #DEE7EC; background-color: __background_alt__;
} }
form.meta textarea.edit { form.meta textarea.edit {
...@@ -160,3 +130,57 @@ form.meta textarea.edit { ...@@ -160,3 +130,57 @@ form.meta textarea.edit {
min-width: 95%; min-width: 95%;
max-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;
}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment