- Gruntfile watch task

- styling for search-input
pchorus · Oct 6, 2014 · 0a63aaf · 0a63aaf
1 parent af6146b
commit 0a63aaf
Show file tree

Hide file tree

Showing 8 changed files with 59 additions and 59 deletions.
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -163,17 +163,17 @@ module.exports = function (grunt) {
         autoWatch: false,
         browsers: ['PhantomJS']
       }
-    }
+    },
 
-//    watch: {
-//      scripts: {
-//        files: ['app/scripts/**', 'app/styles/**', 'app/*.html', 'app/templates/*.html'],
-//        tasks: ['debugTomcat', 'uglify:devmock'],
-//        options: {
-//          spawn: false
-//        }
-//      }
-//    }
+    watch: {
+      scripts: {
+        files: ['app/**/*.js', 'app/**/*.less', 'app/**/*.html'],
+        tasks: ['copy:all', 'htmlmin:src', 'html2js:src', 'less:src', 'uglify:src', 'string-replace:src'],
+        options: {
+          spawn: false
+        }
+      }
+    }
   });
 
   grunt.loadNpmTasks('grunt-contrib-uglify');

diff --git a/angular-widgets.min.css b/angular-widgets.min.css
diff --git a/angular-widgets.min.js b/angular-widgets.min.js
diff --git a/angular-widgets.src.css b/angular-widgets.src.css
@@ -1,33 +1,27 @@
 search-input {
+  position: relative;
   display: block;
   border-radius: 14px;
   border: 0px;
   font-size: 14px;
   background-color: white;
 }
-search-input > div {
-  display: flex;
-  display: -webkit-flex;
-  align-items: center;
-  border-radius: inherit;
-}
-search-input > div input {
-  background-image: url("../widgets/search-input/magnifier.svg");
+search-input input {
+  background-image: url("resources/magnifier.svg");
   background-position: 3px center;
   background-repeat: no-repeat;
   border-width: 0px;
   border-radius: inherit;
   padding-left: 25px;
   padding-right: 10px;
   font-size: inherit;
-  flex-grow: 1;
-  flex-shrink: 1;
-  -webkit-flex-grow: 1;
 }
-search-input > div spinner {
+search-input spinner {
   display: none;
-  flex-shrink: 0;
-  margin-right: 6px;
+  position: absolute;
+  left: 0px;
+  top: 50%;
+  margin-top: -4px;
 }
 search-input ul {
   position: absolute;
@@ -54,6 +48,12 @@ search-input ul li p {
 search-input ul li:hover {
   background-color: #d3d3d3;
 }
+search-input.loading input {
+  background-image: none;
+}
+search-input.loading spinner {
+  display: block;
+}
 spinner {
   display: block;
 }

diff --git a/angular-widgets.src.js b/angular-widgets.src.js
@@ -1,7 +1,7 @@
 angular.module("templates-src", [ "search-input.html", "spinner.html" ]);
 
 angular.module("search-input.html", []).run([ "$templateCache", function($templateCache) {
-    $templateCache.put("search-input.html", '<div><input placeholder="Suche"><spinner></spinner></div>\n' + '<ul ng-if="listItems && listItems.length > 0">\n' + '  <li ng-repeat="listItem in listItems">\n' + '    <p class="title" ng-bind="listItem.title"></p>\n' + '    <p class="subtitle" mathjax-bind="listItem.quickinfo"></p>\n' + "  </li>\n" + "</ul>");
+    $templateCache.put("search-input.html", '<input placeholder="Suche"><spinner></spinner>\n' + '<ul ng-if="listItems && listItems.length > 0">\n' + '  <li ng-repeat="listItem in listItems">\n' + '    <p class="title" ng-bind="listItem.title"></p>\n' + '    <p class="subtitle" mathjax-bind="listItem.quickinfo"></p>\n' + "  </li>\n" + "</ul>");
 } ]);
 
 angular.module("spinner.html", []).run([ "$templateCache", function($templateCache) {
@@ -21,7 +21,7 @@ angular.module("angular-widgets").directive("searchInput", [ "$resource", functi
             onBlur: "="
         },
         link: function($scope, $element) {
-            var input = $element.find("input"), spinner = $element.find("spinner"), restResource;
+            var input = $element.find("input"), restResource;
             if ($scope.quicksearchUrl) {
                 restResource = $resource($scope.quicksearchUrl, null, {
                     query: {
@@ -36,7 +36,7 @@ angular.module("angular-widgets").directive("searchInput", [ "$resource", functi
             function showQuickSearchResults() {
                 var val = input.val(), searchResult;
                 if (val.length > 0) {
-                    spinner.css("display", "flex");
+                    $element.addClass("loading");
                     searchResult = restResource.query({
                         pattern: val
                     });
@@ -45,7 +45,7 @@ angular.module("angular-widgets").directive("searchInput", [ "$resource", functi
                     }).catch(function() {
                         console.error("no quicksearch results loaded.");
                     }).finally(function() {
-                        spinner.css("display", "none");
+                        $element.removeClass("loading");
                     });
                 } else {
                     $scope.$apply(function() {

diff --git a/app/widgets/search-input/search-input.html b/app/widgets/search-input/search-input.html
@@ -1,4 +1,4 @@
-<div><input placeholder="Suche"></input><spinner></spinner></div>
+<input placeholder="Suche"></input><spinner></spinner>
 <ul ng-if="listItems && listItems.length > 0">
   <li ng-repeat="listItem in listItems">
     <p class='title' ng-bind="listItem.title"></p>

diff --git a/app/widgets/search-input/search-input.js b/app/widgets/search-input/search-input.js
@@ -14,7 +14,6 @@ angular.module('angular-widgets').directive('searchInput', ['$resource', functio
     },
     link: function ($scope, $element) {
       var input = $element.find('input'),
-        spinner = $element.find('spinner'),
         restResource;
 
       if ($scope.quicksearchUrl) {
@@ -34,14 +33,14 @@ angular.module('angular-widgets').directive('searchInput', ['$resource', functio
           searchResult;
 
         if (val.length > 0) {
-          spinner.css('display', 'flex');
+          $element.addClass('loading');
           searchResult = restResource.query({ pattern: val });
           searchResult.$promise.then(function (result) {
             $scope.listItems = result;
           }).catch(function () {
             console.error("no quicksearch results loaded.");
           }).finally(function () {
-            spinner.css('display', 'none');
+            $element.removeClass('loading');
           });
         } else {
           $scope.$apply(function () {

diff --git a/app/widgets/search-input/search-input.less b/app/widgets/search-input/search-input.less
@@ -3,39 +3,31 @@
 @border-radius: 14px;
 
 search-input {
+  position: relative;
   display: block;
   border-radius: @border-radius;
   border: 0px;
   font-size: @default-font-size;
   background-color: white;
 
-  > div {
-    display: flex;
-    display: -webkit-flex;
-    align-items: center;
-    border-radius: inherit;
-
-    input {
-      background-image: url("../widgets/search-input/magnifier.svg");
-      background-position: 3px center;
-      background-repeat: no-repeat;
-
-      border-width: 0px;
-      border-radius: inherit;
-      padding-left: @input-padding-left;
-      padding-right: @input-padding-right;
-      font-size: inherit;
+  input {
+    background-image: url("resources/magnifier.svg");
+    background-position: 3px center;
+    background-repeat: no-repeat;
 
-      flex-grow: 1;
-      flex-shrink: 1;
-      -webkit-flex-grow: 1;
-    }
+    border-width: 0px;
+    border-radius: inherit;
+    padding-left: @input-padding-left;
+    padding-right: @input-padding-right;
+    font-size: inherit;
+  }
 
-    spinner {
-      display: none;
-      flex-shrink: 0;
-      margin-right: 6px;
-    }
+  spinner {
+    display: none;
+    position: absolute;
+    left: 0px;
+    top: 50%;
+    margin-top: -4px;
   }
 
   ul {
@@ -67,4 +59,13 @@ search-input {
       }
     }
   }
+
+  &.loading {
+    input {
+      background-image: none;
+    }
+    spinner {
+      display: block;
+    }
+  }
 }