Merge pull request #706 from bjarnef/dev-v7-U4-6058

U4-6058 - Move search field out of table header in listview

src/Umbraco.Web.UI.Client/src/less/listview.less

@@ -35,24 +35,42 @@
   padding: 0 0 20px 0
 }
 
-.umb-listview table form {
-  position: relative;
-  margin: 0
+/* listview search */
+.form-search {
+    .inner-addon {
+        position: relative;
+
+        [class^="icon-"], [class*=" icon-"] {
+            position: absolute;
+            padding: 5px 8px;
+            pointer-events: none;
+            top: 0;
+        }
+
+        input[type="text"] {
+            width: 190px;
+        }
+    }
+
+    /* align icon */
+    .left-addon [class^="icon-"], .left-addon [class*=" icon-"] { left: 0; right: inherit; }
+    .right-addon [class^="icon-"], .right-addon [class*=" icon-"] { right: 0; left: inherit; }
+
+    /* add padding */
+    .left-addon input[type="text"]  { padding-left: 30px !important; padding-right: 6px; }
+    .right-addon input[type="text"] { padding-right: 30px; padding-left: 6px !important; }
 }
 
-.umb-listview table form .icon-search {
-  position: absolute;
-  top: 8px;
-  left:5px;
-  color: @gray;
-  cursor:pointer;
+.umb-listview table form {
+  position: relative;
+  margin: 0;
 }
 
 .umb-listview table input[type="text"] {
   background: none;
-  border: none;
   -webkit-transition: all .5s;
   -moz-transition: all .5s;
+  -o-transition: all .5s;
   transition: all .5s;
   width: 60px;
   padding: 4px 0 4px 20px;

src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/listview.html

@@ -39,6 +39,13 @@
                 </a>
             </div>
             <span ng-bind="bulkStatus" ng-show="isAnythingSelected()"></span>
+
+            <form class="form-search pull-right" novalidate>
+                <div class="inner-addon left-addon">
+                    <i class="icon icon-search" ng-click="enterSearch($event)"></i>
+                    <input type="text" class="form-control" localize="placeholder" placeholder="@general_typeToSearch" ng-model="options.filter" on-keyup="search()" prevent-enter-submit no-dirty-check>
+                </div>
+            </form>
         </div>
 
         <table class="table table-striped">
@@ -60,19 +67,12 @@
                             <i class="icon" ng-class="{'icon-navigation-up': isSortDirection(column.alias, 'asc'), 'icon-navigation-down': isSortDirection(column.alias, 'desc')}"></i>
                         </a>
                     </td>
-
-                    <td>
-                        <form class="pull-right" novalidate>
-                            <i class="icon-search" ng-click="enterSearch($event)"></i>
-                            <input type="text" ng-model="options.filter" on-keyup="search()" prevent-enter-submit no-dirty-check>
-                        </form>
-                    </td>
                 </tr>
             </thead>
 
             <tbody ng-show="listViewResultSet.totalItems === 0">
                 <tr>
-                    <td colspan="{{options.includeProperties.length + 3}}">
+                    <td colspan="{{options.includeProperties.length + 2}}">
                         <p><localize key="content_listViewNoItems">There are no items show in the list.</localize></p>
                     </td>
                 </tr>
@@ -95,14 +95,12 @@
                     <td ng-repeat="column in options.includeProperties">
                         <span>{{result[column.alias]}}</span>
                     </td>
-                    
-                    <td></td>
                 </tr>
             </tbody>
 
             <tfoot ng-show="pagination.length > 1">
                 <tr>
-                    <th colspan="{{options.includeProperties.length + 3}}">
+                    <th colspan="{{options.includeProperties.length + 2}}">
                         <div class="pull-left">
                         </div>
                         <div class="pagination pagination-right">
@@ -129,7 +127,6 @@
                                 </li>
                             </ul>
                         </div>
-
                     </th>
                 </tr>
             </tfoot>