files view changes: moved add file, download and search to the right, added paddings and margins

rhodecode/public/css/main.less

@@ -2100,8 +2100,8 @@ BIN_FILENODE = 7
 .new-file,
 #filter_activate,
 #filter_deactivate {
-    float: left;
-    margin: 0 0 0 15px;
+    float: right;
+    margin: 0 0 0 10px;
 }
 
 h3.files_location{
@@ -2109,11 +2109,12 @@ h3.files_location{
 }
 
 .browser-nav {
+    width: 100%;
 	display: table;
-	margin-bottom: @space;
-
+    margin-bottom: 20px;
 
 	.info_box {
+        float: left;
 		display: inline-table;
 		height: 2.5em;
 
@@ -2122,6 +2123,10 @@ h3.files_location{
 			vertical-align: middle;
 		}
 
+        .drop-menu {
+            margin: 0 10px;
+        }
+
 		.info_box_elem {
 			border-top: @border-thickness solid @grey5;
 			border-bottom: @border-thickness solid @grey5;
@@ -2223,14 +2228,15 @@ h3.files_location{
 
 .files-quick-filter {
   float: right;
-  margin: 0 25px;
+  width: 180px;
+  position: relative;
 }
 
 .files-filter-box {
   display: flex;
   padding: 0px;
   border-radius: 3px;
-  border: 1px solid @grey3;
+  margin-bottom: 0;
 
   a {
     border: none !important;
@@ -2241,19 +2247,30 @@ h3.files_location{
   }
 }
 
-
 .files-filter-box-path {
-  line-height: 28px;
-  padding: 0 5px;
-
+  line-height: 33px;
+  padding: 0;
+  width: 20px;
+  position: absolute;
+  z-index: 11;
+  left: 5px;
 }
 
 .files-filter-box-input {
-  background-color: @grey3 !important;
   margin-right: 0;
 
   input {
-    border: none
+    border: 1px solid @white;
+    padding-left: 25px;
+    width: 145px;
+
+    &:hover {
+        border-color: @grey6;
+    }
+
+    &:focus {
+        border-color: @grey5;
+    }
   }
 }
 

rhodecode/public/css/tables.less

@@ -33,7 +33,7 @@ table.dataTable {
     td {
         height: auto;
         max-width: 20%;
-        padding: .65em 1em .65em 0;
+        padding: .65em 0 .65em 1em;
         vertical-align: middle;
         border-bottom: @border-thickness solid @grey5;
         white-space: normal;

rhodecode/public/css/type.less

@@ -46,6 +46,8 @@ h6, .h6 { font-size: 1em;    font-weight: @text-bold-weight;     font-family: @t
 .breadcrumbs {
     font-size: @repo-title-fontsize;
     margin: 0;
+    width: ~"calc(100% - 180px)";
+    float: left;
 
     h4 {
         font-size: @basefontsize;

rhodecode/templates/files/files_browser.mako

@@ -3,24 +3,6 @@
     <div class="browser-header">
         <div class="browser-nav">
 
-            <div class="files-quick-filter">
-
-                <ul class="files-filter-box">
-
-                    <li class="files-filter-box-path">
-                        <span class="tag">
-                        ${h.get_last_path_part(c.file)}
-                        </span>
-                    </li>
-
-                    <li class="files-filter-box-input">
-                        <input onkeydown="NodeFilter.initFilter(event)" class="init" type="text" name="filter" size="25" id="node_filter" autocomplete="off">
-                    </li>
-
-                </ul>
-
-            </div>
-
             <div class="info_box">
 
               <div class="info_box_elem previous">
@@ -40,6 +22,7 @@
                     ${_('Add File')}</a>
               </div>
             % endif
+
             % if c.enable_downloads:
               <% at_path = '{}.zip'.format(request.GET.get('at') or c.commit.raw_id[:6]) %>
               <div title="${_('Download tree at {}').format(at_path)}" class="btn btn-default new-file">
@@ -49,6 +32,16 @@
               </div>
             % endif
 
+            <div class="files-quick-filter">
+                <ul class="files-filter-box">
+                    <li class="files-filter-box-path">
+                        <i class="icon-search"></i>
+                    </li>
+                    <li class="files-filter-box-input">
+                        <input onkeydown="NodeFilter.initFilter(event)" class="init" type="text" placeholder="Quick filter" name="filter" size="25" id="node_filter" autocomplete="off">
+                    </li>
+                </ul>
+            </div>
         </div>
 
     </div>

rhodecode/templates/files/files_pjax.mako

@@ -32,7 +32,6 @@
         % endif
 
     </div> <!--end summary-detail-->
-
     % if c.file.is_dir():
         <%include file='files_browser.mako'/>
     % else: