* improve UI of doc and file module views.

module/doc/css/common.css

@@ -13,7 +13,8 @@
 .row-spliting .col-spliter:before,
 .row-spliting .col-spliter:after {opacity: 1;}
 
-@media (max-width: 720px) {
+@media (max-width: 720px)
+{
   .split-row > .side-col,
   .split-row > .main-col {width: 100%!important;}
 }
@@ -28,19 +29,25 @@
 .table-files .c-actions .btn > .icon.text-yellow,
 .table-files tr:hover .c-actions .btn > .icon {opacity: 1;}
 
-#main {opacity: 0; transition: opacity .4s;}
-#main.in {opacity: 1;}
-
 .files-grid .col {width: 167px; text-align: center; padding: 0; margin-bottom: 10px;}
-.files-grid .actions {position: absolute; bottom: -30px; left: 0; right: 0; background: #E9F2FB; z-index: 10; opacity: 0; transition: opacity .2s; padding-bottom: 8px;}
+.files-grid .actions {position: absolute; bottom: -38px; left: 0; right: 0; background: #E9F2FB; z-index: 10; opacity: 0; transition: opacity .2s; padding-bottom: 8px; border-radius: 0 0 3px 3px; padding-top: 8px;}
 .files-grid .col:hover .actions {opacity: 1;}
-.files-grid .file {padding: 10px; cursor: pointer; display: block; border-radius: 2px;}
+.files-grid .file {padding: 10px; cursor: pointer; display: block; border-radius: 2px; transition: background-color .2s; border-radius: 3px 3px 0 0}
 .files-grid .col:hover .file {background-color: #E9F2FB;}
-.files-grid .file-icon {font-size: 54px; width: 64px; height: 64px; display: block; margin: 0 auto 8px; line-height: 64px;}
+.files-grid .file-icon {font-size: 54px; width: 64px; height: 64px; display: block; margin: 0 auto 8px; line-height: 64px; color: #8E939A}
 .files-grid .file-name,
 .files-grid .file-info {text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}
 .files-grid .file-info {font-size: 12px; margin-top: 3px;}
 .files-grid .icon-folder {background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSI1MnB4IiBoZWlnaHQ9IjQ2cHgiIHZpZXdCb3g9IjAgMCA1MiA0NiIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4gICAgICAgIDx0aXRsZT5pY29uLWJpZy1mb2xkZXJpY29uLWJpZy1mb2xkZXI8L3RpdGxlPiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4gICAgPGRlZnM+PC9kZWZzPiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4gICAgICAgIDxnIGlkPSJ3ZWItbWF4IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTA5NS4wMDAwMDAsIC02OTUuMDAwMDAwKSI+ICAgICAgICAgICAgPGcgaWQ9Ijgt5paH5qGjIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMDkwLjAwMDAwMCwgNTgzLjAwMDAwMCkiPiAgICAgICAgICAgICAgICA8ZyBpZD0iaWNvbi1iaWctZm9sZGVyIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg1LjAwMDAwMCwgMTEyLjAwMDAwMCkiPiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTIxLjA0NTY4OTEsNC4yNzAyMzU0MiBDMjEuOTYxODA1OSw1LjEwNzIwMzY1IDIzLjAyMjcwMDQsNS41NTc5NjY1OSAyNC4zNjg4OTQ0LDUuNTI1MDEyMTggTDI2LjE2MDIzOCw1LjUyNTAxMjE4IEwzMC44MTIxMDExLDUuNTI1MDEyMTggQzI5LjYwMDkxMDksNS41MjUwMTIxOCAyOC40Mzg1MTg2LDUuMDM1NzUxMTMgMjcuNTc3MDQ3LDQuMTg1ODk1OTMgTDI0LjY3ODE1NjYsMS4zMjY0MDI3MSBDMjMuODE2NTgwOCwwLjQ3NjU0NzUxMSAyMi42NTQyOTI3LDAgMjEuNDQzMTAyNSwwIEwxNS4xMTQ5MDQ2LDAgTDE1LDAgQzE2LjIyNjg2NzksMC4wMzk0MzcwODA1IDE3LjMwMjA1NTcsMC41NTY4NjUwODcgMTguMTYzNTI3MywxLjQwNjYxNjIyIEwyMS4wNDU2ODkxLDQuMjcwMjM1NDIgWiIgaWQ9IlNoYXBlLUNvcHktNyIgZmlsbD0iI0ZGQzg1QSI+PC9wYXRoPiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTQ5LjMxMDMyMDMsNS41MjAwMjkxOCBMMzguNTUxNzAzMSw1LjUyMDAyOTE4IEwzNi44MDY4NTk0LDUuNTIwMDI5MTggTDMyLjI3NTc1LDUuNTIwMDI5MTggTDMwLjUzMDkwNjMsNS41MjAwMjkxOCBMMjYsNS41MjAwMjkxOCBMMjQuMjU1MTU2Miw1LjUyMDAyOTE4IEMyMy4wNzU0MDYzLDUuNTIwMDI5MTggMjEuOTQzMTg3NSw1LjA0MjgxMzM1IDIxLjEwNDA3ODEsNC4xOTE3NjYzIEwxOC4yODA0Mzc1LDEuMzI4MjYyODggQzE3LjQ0MTIyNjYsMC40NzcyMTU4MjkgMTYuMzA5MTA5NCwwIDE1LjEyOTM1OTQsMCBMOC45NjU1MzEyNSwwIEwyLjY4OTY3OTY5LDAgQzEuMjA0MjI2NTYsNy40MDUxNTkyM2UtMTYgMCwxLjIzNTcxNjk5IDAsMi43NjAwMTQ1OSBMMCw4LjI4MDA0Mzc3IEwwLDkuMjAwMDgzMzcgTDAsNDMuMjM5OTg1NCBDMCw0NC43NjQyODMgMS4yMDQyMjY1Niw0NiAyLjY4OTY3OTY5LDQ2IEw0OS4zMTAzMjAzLDQ2IEM1MC43OTU3NzM0LDQ2IDUyLDQ0Ljc2NDI4MyA1Miw0My4yMzk5ODU0IEw1Miw4LjI4MDA0Mzc3IEM1Miw2Ljc1NTY0MTk1IDUwLjc5NTc3MzQsNS41MjAwMjkxOCA0OS4zMTAzMjAzLDUuNTIwMDI5MTggTDQ5LjMxMDMyMDMsNS41MjAwMjkxOCBaIiBpZD0iU2hhcGUtQ29weS04IiBmaWxsPSIjRkZFMDY2Ij48L3BhdGg+ICAgICAgICAgICAgICAgIDwvZz4gICAgICAgICAgICA8L2c+ICAgICAgICA8L2c+ICAgIDwvZz48L3N2Zz4=) no-repeat center;}
+.files-grid .icon-folder:before {display: none;}
+.files-grid .img-holder {height: 64px; line-height: 64px; margin: 0 auto 8px; width: 100%; background-size: contain; background-repeat: no-repeat; background-position: center;}
+.files-grid .img-holder > img {max-height: 64px; opacity: 0; width: 100%;}
 
 .panel{padding-bottom: 40px;}
 .panel .table-footer{position: absolute; bottom: 0; width: 100%;}
+
+@keyframes flash-icon
+{
+  0% {color: #666;}
+  100% {color: #fff;}
+}

module/doc/css/showfiles.css

@@ -1,6 +1 @@
-@keyframes flash-icon
-{
-  0% {color: #666;}
-  100% {color: #fff;}
-}
-.lib-file > .file > a > .file-path{width: 64px; height: 64px; line-height: 64px; margin: 0 auto 10px;}
+.main-col > .panel > .panel-body {padding-top: 20px;}

module/doc/view/index.html.php

@@ -11,7 +11,7 @@
  */
 ?>
 <?php include '../../common/view/header.html.php';?>
-<div class='main-row split-row' id='mainRow'>
+<div class='main-row split-row fade' id='mainRow'>
   <?php include './side.html.php';?>
   <div class="main-col" data-min-width="400">
     <div class="row">

module/doc/view/showfiles.html.php

@@ -11,7 +11,7 @@
  */
 ?>
 <?php include '../../common/view/header.html.php';?>
-<div class="main-row <?php if($this->from == 'doc') echo 'split-row';?>" id="mainRow">
+<div class="main-row fade <?php if($this->from == 'doc') echo 'split-row';?>" id="mainRow">
   <?php if($this->from == 'doc'):?>
   <?php include './side.html.php';?>
   <div class="col-spliter"></div>
@@ -41,8 +41,8 @@
             </form>
           </div>
           <div class="btn-group">
-            <?php echo html::a(inlink('showFiles', "type=$type&objectID=$objectID&viewType=list"), "<i class='icon icon-bars'></i>" , '',  "title={$lang->doc->browseTypeList['list']} class='btn btn-icon text-primary'");?>
-            <?php echo html::a(inlink('showFiles', "type=$type&objectID=$objectID&viewType=card"), "<i class='icon icon-cards-view'></i>", '', "title={$lang->doc->browseTypeList['grid']} class='btn btn-icon'");?>
+            <?php echo html::a(inlink('showFiles', "type=$type&objectID=$objectID&viewType=list"), "<i class='icon icon-bars'></i>" , '',  "title={$lang->doc->browseTypeList['list']} class='btn btn-icon" . ($viewType == 'list' ? ' text-primary' : '') . "'");?>
+            <?php echo html::a(inlink('showFiles', "type=$type&objectID=$objectID&viewType=card"), "<i class='icon icon-cards-view'></i>", '', "title={$lang->doc->browseTypeList['grid']} class='btn btn-icon" . ($viewType != 'list' ? ' text-primary' : '') . "'");?>
           </div>
         </nav>
       </div>
@@ -51,7 +51,7 @@
       <div class="panel-body has-table">
         <table class="table table-borderless table-hover table-files">
           <thead>
-            <tr class="muted">
+            <tr class="text-center">
               <th class="w-80px"><?php echo $lang->doc->id;?></th>
               <th><?php echo $lang->doc->fileTitle;?></th>
               <th><?php echo $lang->doc->filePath;?></th>
@@ -66,15 +66,15 @@
             <?php foreach($files as $file):?>
             <?php if(empty($file->pathname)) continue;?>
               <tr>
-                <td><?php echo sprintf('%03d', $file->id);?></td>
-                <td>
+                <td class="text-center"><?php echo sprintf('%03d', $file->id);?></td>
+                <td class="c-url">
                   <a href='<?php echo $this->createLink($file->objectType, 'view', "objectID=$file->objectID");?>'><?php echo $file->title . ' [' . strtoupper($file->objectType) . ' #' . $file->objectID . ']';?></a>
                 </td>
                 <td> <?php echo $file->pathname;?> </td>
-                <td><?php echo $file->extension;?></td>
+                <td class="text-center"><?php echo $file->extension;?></td>
                 <td><?php echo number_format($file->size / 1024 , 1) . 'K';?></td>
-                <td><?php echo isset($file->addedBy) ? zget($users, $file->addedBy) : '';?></td>
-                <td><?php echo isset($file->addedDate) ? substr($file->addedDate, 0, 10) : '';?></td>
+                <td class="text-center"><?php echo isset($file->addedBy) ? zget($users, $file->addedBy) : '';?></td>
+                <td class="text-center"><?php echo isset($file->addedDate) ? substr($file->addedDate, 0, 10) : '';?></td>
                 <td>
                   <?php
                   common::printLink('file', 'download', "fileID=$file->id", $lang->doc->download, "data-toggle='modal'", '', true, false, $file);
@@ -112,7 +112,7 @@
                 $downloadLink = $this->createLink('file', 'download', "fileID=$file->id&mouse=left");
                 if(in_array($file->extension, $config->file->imageExtensions))
                 {
-                    echo "<div class='file-path'><img src='$file->webPath'/></div>";
+                    echo "<div class='img-holder' style='background-image: url($file->webPath)'><img src='$file->webPath'/></div>";
                 }
                 else
                 {

module/file/view/download.html.php

@@ -1,50 +1,55 @@
 <?php include '../../common/view/header.lite.html.php';?>
 <?php js::set('fileID', $file->id);?>
 <style>
-#imageFile{text-align: center;padding:10px;}
+#imageFile{text-align: center; padding: 0; margin: 0 -10px;}
 #imageFile img{max-width:100%;}
-#txtFile{padding: 5px 10px;}
-#txtFile div{overflow-x: auto;}
+#txtFile {padding: 5px 0; margin: 0 -10px;}
+#txtFile pre {margin: 0;}
+#txtFile div {overflow-x: auto;}
 #titlebar span{float: right; padding-right: 25px;}
 .main-header .btn-toolbar{margin-left:8px;}
 </style>
-<div id='mainContent' class='main-content'>
-  <div class='main-header clearfix'>
-    <h2 class='pull-left'><?php echo $lang->file->preview;?></h2>
-    <?php if($fileType == 'txt'):?>
-    <div class='btn-toolbar pull-left w-120px'><?php echo html::select('charset', $config->file->charset, $charset, "onchange='setCharset(this.value)' class='form-control'");?></div>
-    <?php endif;?>
-  </div>
-  <?php if($fileType == 'image'):?>
-  <div id='imageFile'><?php echo html::image($this->createLink('file', 'read', "fileID=$file->id"));?></div>
-  <?php else:?>
-  <div id='txtFile'>
-    <?php
-    $fileContent = file_get_contents($file->realPath);
-    if($charset != $config->charset)
-    {
-        $fileContent = helper::convertEncoding($fileContent, $charset . "//IGNORE", $config->charset);
-    }
-    else
-    {
-        if(extension_loaded('mbstring'))
+<main id="main">
+  <div class="container">
+    <div id='mainContent' class='main-content'>
+    <div class='main-header clearfix'>
+        <h2 class='pull-left'><?php echo $lang->file->preview;?></h2>
+        <?php if($fileType == 'txt'):?>
+        <div class='btn-toolbar pull-left w-120px'><?php echo html::select('charset', $config->file->charset, $charset, "onchange='setCharset(this.value)' class='form-control'");?></div>
+        <?php endif;?>
+    </div>
+    <?php if($fileType == 'image'):?>
+    <div id='imageFile'><?php echo html::image($this->createLink('file', 'read', "fileID=$file->id"));?></div>
+    <?php else:?>
+    <div id='txtFile'>
+        <?php
+        $fileContent = file_get_contents($file->realPath);
+        if($charset != $config->charset)
         {
-            $encoding = mb_detect_encoding($fileContent, array('ASCII', 'UTF-8', 'GB2312', 'GBK', 'BIG5'));
-            if($encoding != 'UTF-8') $fileContent = helper::convertEncoding($fileContent, $encoding, $config->charset);
+            $fileContent = helper::convertEncoding($fileContent, $charset . "//IGNORE", $config->charset);
         }
         else
         {
-            $encoding = 'UTF-8';
-            if($config->default->lang == 'zh-cn') $encoding = 'GBK';
-            if($config->default->lang == 'zh-tw') $encoding = 'BIG5';
-            $fileContent = helper::convertEncoding($fileContent, $encoding, $config->charset);
+            if(extension_loaded('mbstring'))
+            {
+                $encoding = mb_detect_encoding($fileContent, array('ASCII', 'UTF-8', 'GB2312', 'GBK', 'BIG5'));
+                if($encoding != 'UTF-8') $fileContent = helper::convertEncoding($fileContent, $encoding, $config->charset);
+            }
+            else
+            {
+                $encoding = 'UTF-8';
+                if($config->default->lang == 'zh-cn') $encoding = 'GBK';
+                if($config->default->lang == 'zh-tw') $encoding = 'BIG5';
+                $fileContent = helper::convertEncoding($fileContent, $encoding, $config->charset);
+            }
         }
-    }
-    echo "<pre>" . htmlspecialchars($fileContent) . "</pre>";
-    ?>
+        echo "<pre>" . htmlspecialchars($fileContent) . "</pre>";
+        ?>
+    </div>
+    <?php endif;?>
+    </div>
   </div>
-  <?php endif;?>
-</div>
+</main>
 <script>
 function setCharset(charset)
 {

module/file/view/edit.html.php

@@ -11,10 +11,7 @@
  */
 ?>
 <?php include '../../common/view/header.lite.html.php';?>
-<style>
-body{padding-bottom:0px}
-</style>
-
+<style>.main-form {margin: 15px -15px 0}</style>
 <script>
 function setFileName()
 {
@@ -28,23 +25,26 @@ function closeWindow()
     clearInterval(time);
 }
 </script>
-<div id='mainContent' class='main-content'>
-  <div class='main-header'>
-    <h2><?php echo $lang->file->inputFileName;?></h2>
+<main id="main">
+  <div class="container">
+    <div id='mainContent' class='main-content'>
+      <div class='main-header'>
+        <h2><?php echo $lang->file->inputFileName;?></h2>
+      </div>
+      <form class='main-form' method='post' target='hiddenwin' onsubmit='setFileName();'>
+        <table class='table table-form'>
+          <tr>
+            <td>
+              <div class='input-group'>
+                <?php echo html::input('fileName', $file->title, "class='form-control' autocomplete='off'");?>
+                <strong class='input-group-addon'>.<?php echo $file->extension;?></strong>
+              </div>
+            </td>
+            <td class='w-80px'><?php echo html::submitButton('', '', 'btn btn-primary btn-block');?></td>
+          </tr>
+        </table>
+      </form>
+    </div>
   </div>
-
-  <form class='main-form' method='post' target='hiddenwin' onsubmit='setFileName();'>
-    <table class='table table-form'>
-      <tr>
-        <td>
-          <div class='input-group'>
-            <?php echo html::input('fileName', $file->title, "class='form-control' autocomplete='off'");?>
-            <strong class='input-group-addon'>.<?php echo $file->extension;?></strong>
-          </div>
-        </td>
-        <td class='w-80px'><?php echo html::submitButton();?></td>
-      </tr>
-    </table>
-  </form>
-</div>
+</main>
 <?php include '../../common/view/footer.lite.html.php';?>

module/file/view/printfiles.html.php

@@ -8,14 +8,10 @@ $sessionString .= session_name() . '=' . session_id();
   <div class="detail-title"><?php echo $lang->file->common;?> <i class="icon icon-paper-clip icon-sm"></i></div>
   <div class="detail-content">
 <?php endif;?>
-  <style>
-    .files-list>li>a {display: inline;}
-  </style>
+<style>
+.files-list>li>a {display: inline;}
+</style>
   <script>
-  $(function(){
-       $(".edit").modalTrigger({width:350, type:'iframe'});
-  })
-
   /* Delete a file. */
   function deleteFile(fileID)
   {
@@ -81,9 +77,9 @@ $sessionString .= session_name() . '=' . session_id();
               echo html::a($this->createLink('file', 'download', "fileID=$file->id") . $sessionString, $fileTitle . " ({$fileSize})", '_blank', "onclick=\"return downloadFile($file->id, '$file->extension', $imageWidth)\"");
 
 
-              echo "<span class='right-icon'>";
-              common::printLink('file', 'edit', "fileID=$file->id", "<i class='icon-pencil'></i>", '', "class='edit btn-icon' title='{$lang->file->edit}'");
-              if(common::hasPriv('file', 'delete')) echo html::a('###', "<i class='icon-trash'></i>", '', "class='btn-icon' onclick='deleteFile($file->id)' title='$lang->delete'");
+              echo "<span class='right-icon'>&nbsp; ";
+              common::printLink('file', 'edit', "fileID=$file->id", "<i class='icon-pencil'></i>", '', "data-width='400' class='edit iframe text-primary' title='{$lang->file->edit}'");
+              if(common::hasPriv('file', 'delete')) echo html::a('###', "<i class='icon-trash'></i>", '', "class='text-primary' onclick='deleteFile($file->id)' title='$lang->delete'");
               echo '</span>';
               echo '</li>';
           }