Index: /pro-violet-viettel/www/deploy/20150304/application/modules/filemanager/views/main.php
===================================================================
--- /pro-violet-viettel/www/deploy/20150304/application/modules/filemanager/views/main.php	(revision 841)
+++ /pro-violet-viettel/www/deploy/20150304/application/modules/filemanager/views/main.php	(revision 842)
@@ -106,6 +106,6 @@
 	    		</ul>
                 <ul class="change-file-view list-inline pull-right">
-                    <li><i class="ace-icon icon-th-large show-grid-view"></i></li>
-                    <li><i class="ace-icon icon-th-list show-list-view"></i></li>
+                    <li><i class="ace-icon icon-th-large show-grid-view" title="Hiá»n thá» thumbnail"></i></li>
+                    <li><i class="ace-icon icon-th-list show-list-view" title="Hiá»n thá» danh sÃ¡ch"></i></li>
                 </ul>
         	</div>
Index: /pro-violet-viettel/www/deploy/20150304/application/views/layout/footer.php
===================================================================
--- /pro-violet-viettel/www/deploy/20150304/application/views/layout/footer.php	(revision 841)
+++ /pro-violet-viettel/www/deploy/20150304/application/views/layout/footer.php	(revision 842)
@@ -36,5 +36,5 @@
 		grid: 'file-container',
 		maincontainer: 'main-content',
-		titlebar: 'title-bar',
+		titlebar: 'navbar',
 		toolsbar: 'tools-bar',
 		statusbar: 'status-bar',
@@ -42,4 +42,11 @@
 		invisibledButtons: ['btnShare'],
 		filehosting: '<?php echo $this->config->item('api_url');?>'
+	});
+
+	$('.show-list-view').click(function{
+		$('#file-container').addClass('list-view');
+	});
+	$('.show-grid-view').click(function{
+		$('#file-container').removeClass('list-view');
 	});
 }
Index: /pro-violet-viettel/www/deploy/20150304/assets/css/style2.css
===================================================================
--- /pro-violet-viettel/www/deploy/20150304/assets/css/style2.css	(revision 841)
+++ /pro-violet-viettel/www/deploy/20150304/assets/css/style2.css	(revision 842)
@@ -8,11 +8,7 @@
     padding:0;
 }
-
-
 /*-------------------------
     General Styles
 --------------------------*/
-
-
 html{
     background-color:#ebebec;
@@ -43,5 +39,31 @@
 }
 
-/* Fix something from style.css */
+
+/* --------------------------------Fix something from style.css ---------------------------*/
+
+/* Bootstrap modified */
+.dropdown-menu.dropdown-close {
+    top: 100%;
+}
+#tools-bar .btn-success, .btn-success:focus,
+#tools-bar .btn-danger, .btn-danger:focus,
+#tools-bar .btn-warning, .btn-warning:focus,
+#tools-bar .btn-info, .btn-info:focus {
+    background-color: transparent;
+    border-color: transparent;
+}
+#tools-bar .btn, .btn-default, .btn:focus, .btn-default:focus, .btn:hover, .btn-default:hover {
+    background-color: #F5F5F5!important;
+    border-color: #F5F5F5;
+}
+/*.btn:hover, .btn-default:hover {
+    border: 1px solid #666;
+    border-width: 1px !important;
+    border-radius: 100px !important;
+}*/
+#tools-bar .btn {
+    color: #666 !important;
+}
+/* End Bootstrap */
 
 #navigation-bar {
@@ -72,5 +94,68 @@
 }
 #file-container {
-    height: calc(100% - 46px);
+    height: calc(100% - 47px);
+}
+#status-bar {
+    color: #666;
+    background: #F5F5F5;
+    padding: 3px 0 0 20px;
+    border-top: 1px #CDCDCD solid;
+}
+#status-bar span:first-child {
+    float: right;
+    padding-right: 10px;
+}
+
+img[src=''], img:not([src]) {
+    opacity:0;
+}
+.btn:focus {
+    outline: none !important;
+}
+.preview .modal-content {
+    background: transparent;
+    border: 0;
+}
+.preview .modal-content .modal-body .bootbox-body {
+    margin-top: 5px;
+}
+.preview button.bootbox-close-button {
+  	float: none;
+    position: absolute;
+    right: 0;
+    font-size: 31px;
+    font-weight: 700;
+    line-height: 1;
+    color: #FFF;
+    text-shadow: 0 1px 0 #fff;
+    border: 2px solid #FFFFFF;
+    background: #000;
+    border-radius: 50%;
+    opacity: 1;
+    z-index: 99;
+    padding: 0 6px;
+}
+.preview button.bootbox-close-button:hover,
+.preview button.bootbox-close-button:focus {
+    color: #fff;
+    text-decoration: none;
+    cursor: pointer;
+    filter: alpha(opacity=100);
+    opacity: 1;
+    outline: 0;
+}
+.preview .modal-content .modal-footer {
+    display: none;
+}
+/*------------ File Manager: Grid View ----- */
+#file-container ul.vsgrid li.vscell div[class^="icon-"] img {
+    height: 100%;
+    width: 100%;
+    padding: 5px;
+}
+#file-container ul.vsgrid li.vscell div[class^="icon-"]:not([class="icon-directory"]) img:not([src]),
+#file-container ul.vsgrid li.vscell div[class^="icon-"]:not([class="icon-directory"]):empty {
+    background-image: url(../images/file-icon-new.png);
+    background-repeat: no-repeat;
 }
 
@@ -84,8 +169,15 @@
 	width: 100%;
 }
-.list-view#file-container > ul.vsgrid > li.vscell:hover {
+.list-view#file-container > ul.vsgrid > li.vscell:hover,
+.list-view#file-container > ul.vsgrid > li.vscell.selected {
 	background: rgba(87, 199, 214, 0.07);
 }
-
+.list-view#file-container > ul.vsgrid > li.vscell.selected {
+    background: #E3F2FF;
+}
+.list-view#file-container ul.vsgrid li.vscell.selected div[class^="icon-"],
+.list-view#file-container ul.vsgrid li.vscell.selected div.file-name {
+    background-color: transparent;
+}
 .list-view#file-container > ul.vsgrid > li.vscell > div.icon-directory {
 	background-size: cover;
@@ -103,4 +195,5 @@
   	height: 28px;
   	float: left;
+    background-size: cover;
 }
 
Index: /pro-violet-viettel/www/deploy/20150304/assets/js/manager.js
===================================================================
--- /pro-violet-viettel/www/deploy/20150304/assets/js/manager.js	(revision 841)
+++ /pro-violet-viettel/www/deploy/20150304/assets/js/manager.js	(revision 842)
@@ -1000,8 +1000,8 @@
                 	if (items.length == 1) {
                 		if ((typeof items[0].minetype !== 'undefined')) {
-                			message += '<span> - Tá»p: <strong>' + items[0].name + '</strong></span>';
+                			message += '<span>Tá»p: <strong>' + items[0].name + '</strong></span>';
                 			message += '<span> - Dung lÆ°á»£ng: <strong>' + self.formatFileSize(items[0].size) + '</strong></span>';
                 		}else {
-                			message += '<span> - ThÆ° má»¥c: <strong>' + items[0].name + '</strong></span>';
+                			message += '<span>ThÆ° má»¥c: <strong>' + items[0].name + '</strong></span>';
                 		}
                 	}
@@ -1011,6 +1011,6 @@
                 			selectedSize += (typeof items[i].minetype !== 'undefined') ? parseInt(items[i].size) : 0;
                 		}
-                		message += '<span> - <strong>' + items.length + ' tá»p (thÆ° má»¥c)</strong> ÄÆ°á»£c chá»n</span>';
-                		message += '<span> - Total size: <strong>' + self.formatFileSize(selectedSize) + '</strong></span>';
+                		message += '<span><strong>' + items.length + ' tá»p (thÆ° má»¥c)</strong> ÄÆ°á»£c chá»n</span>';
+                		message += '<span> - Dung lÆ°á»£ng: <strong>' + self.formatFileSize(selectedSize) + '</strong></span>';
                 	}
                 	
