* improve UI of datatable custom model.

module/datatable/view/ajaxcustom.html.php

@@ -12,10 +12,12 @@
 ?>
 <style>
 .cols-list {margin-bottom: 10px;}
-.cols-list .col {border: 1px solid #ddd; height: 30px; line-height: 29px; padding: 0 10px; border-bottom: none; background: #fff; float:none}
+.cols-list .col {border: 1px solid #ddd; height: 30px; line-height: 29px; padding: 0 10px; border-bottom: none; background: #fff; float:none; padding-left: 6px;}
+.cols-list .checkbox-primary {display: inline-block; position: relative; top: -1px;}
+.cols-list .checkbox-primary > label {padding: 0; width: 23px;}
 .cols-list .col.drag-shadow {border: 1px solid #ddd;}
 .cols-list {border-bottom: 1px solid #ddd}
-.cols-list .col:hover {background: #edf3fe}
+.cols-list .col:hover {background: #E9F2FB}
 .cols-list .col.require:hover {background: none}
 .cols-list .col .actions {line-height: 30px; vertical-align: top;}
 .cols-list .col .form-control {display: inline-block; width: 50px; padding: 0px 5px; height: 20px; line-height: 20px; border-color: transparent; position: relative; top: -2px}
@@ -26,7 +28,7 @@
 .cols-list .col .btn.show-hide {font-size: 13px}
 .cols-list .col .title {cursor: pointer; display: inline-block; width: 500px;}
 .cols-list .col .title-bar {white-space:nowrap; cursor: pointer; display: inline-block; width: 300px; background: #f1f1f1; border-left: 1px solid #ddd; border-right: 1px solid #ddd; padding-left: 6px; position: relative; max-width: 500px; min-width: 30px}
-.cols-list .col .title .icon-move {position: absolute; left: -26px; background: #fff; top: 5px; width: 20px; height: 20px; line-height: 20px; text-align: center; border-radius: 5px;}
+.cols-list .col .title .icon-move {width: 20px; height: 20px; line-height: 20px; text-align: center; position: relative; left: 3px;}
 .cols-list .col:hover .title-bar {background: #eee; transition: width 0.3s;}
 .cols-list .col.require .title {cursor: default;}
 .cols-list .col.disabled .title {opacity: 0.5;}
@@ -39,20 +41,25 @@
 .cols-list .col.drop-to, .cols-list .col.drag-from {opacity: 0.5; visibility: visible;  background: #e5e5e5}
 .cols-list .col .btn.disabled, .cols-list .col.disabled .btn.disabled, .cols-list .col .btn.disabled .label-hide {border: none; color: #aaa; cursor: not-allowed; background: none}
 .cols-list .col .icon-move {opacity: 0; transition:all 0.2s; cursor: move;}
-.cols-list .col:hover .icon-move {opacity: 1}
+.cols-list .col:hover .icon-move {opacity: 0.7;}
 .cols-list.sort-disabled .icon-move {display: none;}
+#customDatatable .form-actions {margin-top: 10px;}
+#customDatatable .form-actions .checkbox-primary {margin-bottom: 10px; margin-left: 7px;}
 </style>
 <div class='modal-dialog' id='customDatatable' style='width: 800px'>
   <div class='modal-content'>
     <div class='modal-header'>
-      <button class="close" data-dismiss="modal">&times;</button>
-      <h4 class='modal-title'><?php echo $lang->datatable->custom?></h4>
+      <button class="close" data-dismiss="modal"><i class="icon icon-close"></i></button>
+      <h4 class='modal-title'>
+        <?php echo $lang->datatable->custom?>
+        &nbsp; <small><?php echo $lang->datatable->customTip ?></small>
+      </h4>
     </div>
     <div class='modal-body'>
       <div id='colsFixedLeft' class='cols-list'></div>
       <div id='colsFixedFlex' class='cols-list'></div>
       <div id='colsFixedRight' class='cols-list'></div>
-      <div class='cols-list cols-list-origin'>
+      <div class='cols-list template' id="originCols">
         <?php foreach ($cols as $key => $col):?>
         <?php
         $required = $col['required'] == 'yes';
@@ -63,17 +70,17 @@
           <div class='actions pull-right'>
             <?php if(isset($col['name'])) echo html::hidden('name', $col['name'])?>
             <span><span class='text-muted'><?php echo $lang->datatable->width?></span> <input type='text' id='width' class='form-control' value='<?php echo $col['width']?>'><?php echo $autoWidth ? '&nbsp;' : 'px' ?></span>
-            <button type='button' class='btn btn-link show-hide<?php echo $required ? ' disabled' : '' ?>'><span class='label-show'><?php echo $lang->datatable->show?></span><span class='text-muted'>/</span><span class='label-hide'><?php echo $lang->datatable->hide?></span></button>
           </div>
-          <i class='icon-ok'></i> &nbsp;<span class='title'><span class='title-bar'><strong><?php echo $col['title']?></strong><i class='icon-move'></i></span></span> <?php if($required) echo "<span class='text-muted'>({$lang->datatable->required})</span>"?>
+          <div class="checkbox-primary"><label></label></div>
+          <span class='title'><span class='title-bar'><strong><?php echo $col['title']?></strong><i class='icon-move'></i></span></span> <?php if($required) echo "<span class='text-muted'>({$lang->datatable->required})</span>"?>
         </div>
         <?php endforeach;?>
       </div>
-      <div class='actions text-left'>
+      <div class='form-actions text-left'>
         <?php if(common::hasPriv('datatable', 'setGlobal')) echo html::checkbox('global', array(1 => $lang->datatable->setGlobal));?>
         <button type='button' class='btn btn-primary btn-save' id='btnSaveCustom'><?php echo $lang->save ?></button>
-        <button type='button' class='btn btn-default' data-dismiss='modal'><?php echo $lang->close ?></button>
-        <button type='button' class='btn btn-default' id='resetBtn'><?php echo $lang->datatable->reset ?></button>
+        <button type='button' class='btn' data-dismiss='modal'><?php echo $lang->close ?></button>
+        <button type='button' class='btn' id='resetBtn'><?php echo $lang->datatable->reset ?></button>
       </div>
     </div>
   </div>
@@ -87,11 +94,11 @@ $(function()
 {
     var setting = JSON.parse('<?php echo $setting;?>');
 
-    var $cols = $('.col').addClass('disabled');
+    var $cols = $('#originCols .col').addClass('disabled');
     $cols.filter('.fixed-left').appendTo('#colsFixedLeft');
     $cols.filter('.fixed-flex, .fixed-no').appendTo('#colsFixedFlex');
     $cols.filter('.fixed-right').appendTo('#colsFixedRight');
-    $('.cols-list-origin').remove();
+    $('#originCols').remove();
 
     if(typeof setting[0] === 'string')
     {
@@ -124,14 +131,15 @@ $(function()
             col = {id: col, disabled: false};
         }
         var $col = $cols.filter('[data-key=' + col.id + ']');
-        $col.toggleClass('disabled', !col.show);
-        $col.attr('data-order', col.order);
+        $col.toggleClass('disabled', !col.show).attr('data-order', col.order);
+        $col.find('.checkbox-primary').toggleClass('checked', !!col.show);
         if(col.width) $col.find('input#width').val(col.width.replace('px', ''));
     }
 
-    $('.cols-list').on('click', '.col:not(.require) .show-hide, .col:not(.require) .title', function()
+    $('.cols-list').on('click', '.col:not(.require) .title, .col:not(.require) .checkbox-primary', function()
     {
-        $(this).closest('.col').toggleClass('disabled');
+        var $col = $(this).closest('.col').toggleClass('disabled');
+        $col.find('.checkbox-primary').toggleClass('checked', !$col.hasClass('disabled'));
     }).each(function()
     {
         var $list = $(this),