Merge pull request #1381 from hypothesis/search-ui-tweaks

Search ui tweaks

h/static/scripts/directives.coffee

@@ -400,37 +400,6 @@ fuzzytime = ['$filter', '$window', ($filter, $window) ->
   template: '<a target="_blank" href="{{shared_link}}" title="{{hint}}">{{ftime | date:mediumDate}}</a>'
 ]
 
-
-simpleSearch = ['$parse', ($parse) ->
-  link: (scope, elem, attr, ctrl) ->
-    _search = $parse(attr.onsearch)
-    _clear = $parse(attr.onclear)
-
-    scope.dosearch = ->
-      _search(scope, {"this": scope.searchtext})
-
-    scope.reset = (event) ->
-      event.preventDefault()
-      scope.searchtext = ''
-      _clear(scope) if attr.onclear
-
-    scope.$watch attr.query, (query) ->
-      if query?
-        scope.searchtext = query
-        _search(scope, {"this": scope.searchtext})
-
-  restrict: 'C'
-  template: '''
-            <form class="simple-search-form" ng-class="!searchtext && 'simple-search-inactive'" name="searchBox" ng-submit="dosearch()">
-              <input class="simple-search-input" type="text" ng-model="searchtext" name="searchText" placeholder="Search…" />
-              <i class="simple-search-icon icon-search"></i>
-              <button class="simple-search-clear" type="reset" ng-hide="!searchtext" ng-click="reset($event)">
-                <i class="icon-x"></i>
-              </button>
-            </form>
-            '''
-]
-
 whenscrolled = ->
   link: (scope, elem, attr) ->
     elem.bind 'scroll', ->
@@ -450,5 +419,4 @@ angular.module('h.directives', ['ngSanitize'])
 .directive('thread', thread)
 .directive('username', username)
 .directive('repeatAnim', repeatAnim)
-.directive('simpleSearch', simpleSearch)
 .directive('whenscrolled', whenscrolled)

h/static/scripts/directives/simple-search.coffee

+simpleSearch = ['$parse', ($parse) ->
+  uuid = 0
+  link: (scope, elem, attr, ctrl) ->
+    _search = $parse(attr.onsearch)
+    _clear = $parse(attr.onclear)
+
+    scope.viewId = uuid++
+    scope.dosearch = ->
+      _search(scope, {"this": scope.searchtext})
+
+    scope.reset = (event) ->
+      event.preventDefault()
+      scope.searchtext = ''
+      _clear(scope) if attr.onclear
+
+    scope.$watch attr.query, (query) ->
+      if query?
+        scope.searchtext = query
+        _search(scope, {"this": scope.searchtext})
+
+  restrict: 'C'
+  template: '''
+            <form class="simple-search-form" ng-class="!searchtext && 'simple-search-inactive'" name="searchBox" ng-submit="dosearch()">
+              <input id="simple-search-{{viewId}}" class="simple-search-input" type="text" ng-model="searchtext" name="searchText" placeholder="Search…" />
+              <label for="simple-search-{{viewId}}" class="simple-search-icon icon-search"></label>
+              <button class="simple-search-clear" type="reset" ng-hide="!searchtext" ng-click="reset($event)">
+                <i class="icon-x"></i>
+              </button>
+            </form>
+            '''
+]
+
+
+angular.module('h.directives').directive('simpleSearch', simpleSearch)

h/static/styles/simple-search.scss

@@ -5,17 +5,24 @@
 }
 
 .simple-search-form {
+  @include clearfix;
   position: relative;
+  padding: 0 (20 / 13 * 1em);
   color: $gray;
 }
 
+.simple-search-form * {
+  box-sizing: border-box;
+}
+
 .simple-search-icon {
-  position: absolute;
+  float: left;
+  display: inline;
   font-size: 1.1em;
-  top: 50%;
-  left: .6em;
-  margin-top: -.5em;
-  pointer-events: none;
+  line-height: 2;
+  margin-left: -100%;
+  position: relative;
+  right: 20 / 14 * 1em;
 
   :not(:focus) ~ & {
     color: $gray-lighter;
@@ -23,13 +30,12 @@
 }
 
 .simple-search-input {
+  float: left;
   outline: none;
   color: $text-color;
-  line-height: 24px;
   width: 100%;
-  border-radius: 2em;
-  border: 1px solid $gray-lighter !important; // Override base input styles.
-  padding: 0 2em;
+  border: none !important; // Override base input styles.
+  padding: (5 / 13 * 1em) 0;
 
   .simple-search-inactive &:not(:focus) {
     border-color: #f3f3f3 !important;
@@ -43,29 +49,23 @@
     left: 50%;
     margin-top: -.5em;
     margin-left: -.5em;
-    font-size: .7em;
+    font-size: 0.85em;
   }
 
-  position: absolute;
+  float: left;
+  position: relative;
+  top: 6 / 13 * 1em;
+  margin-right: -1.33em;
+  padding: 0;
   outline: none;
-  right: .35em;
-  top: 50%;
   border: none;
-  border-radius: 50%;
-  background: $gray-light;
-  color: #fff;
+  background: none;
+  color: $gray;
   width: 1.33em;
   height: 1.33em;
-  padding: 0;
-  margin-top: -.65em;
   @include box-shadow(none);
 
   &:focus, &:hover, &:active:not([disabled]) {
-    @include transition(background-color 200ms ease-in);
-    background-color: $gray-light;
-    color: #fff;
-    border: none;
-    background-image: none;
-    box-shadow: none;
+    color: $text-color;
   }
 }

tests/js/directives-test.coffee

@@ -153,52 +153,3 @@ describe 'h.directives', ->
       it 'opens with only the username', ->
         $element.find('.user').click()
         sinon.assert.calledWith(fakeWindow.open, '/u/jim')
-
-  describe '.simpleSearch', ->
-    $element = null
-    beforeEach ->
-      $scope.update = sinon.spy()
-      $scope.clear = sinon.spy()
-
-      template= '''
-      <div class="simpleSearch"
-            query="query"
-            onsearch="update(this)"
-            onclear="clear()">
-      </div>
-      '''
-
-      $element = $compile(angular.element(template))($scope)
-      $scope.$digest()
-
-    it 'updates the search-bar', ->
-      $scope.query = "Test query"
-      $scope.$digest()
-      assert.equal($scope.searchtext, $scope.query)
-
-    it 'calls the given search function', ->
-      $scope.query = "Test query"
-      $scope.$digest()
-      $element.triggerHandler('submit')
-      sinon.assert.calledWith($scope.update, "Test query")
-
-    it 'calls the given clear function', ->
-      $element.find('.simple-search-clear').click()
-      assert($scope.clear.called)
-
-    it 'clears the search-bar', ->
-      $scope.query = "Test query"
-      $scope.$digest()
-      $element.find('.simple-search-clear').click()
-      assert.equal($scope.searchtext, '')
-
-    it 'adds a class to the form when there is no input value', ->
-      $form = $element.find('.simple-search-form')
-      assert.include($form.prop('className'), 'simple-search-inactive')
-
-    it 'removes the class from the form when there is an input value', ->
-      $scope.query = "Test query"
-      $scope.$digest()
-
-      $form = $element.find('.simple-search-form')
-      assert.notInclude($form.prop('className'), 'simple-search-inactive')

tests/js/directives/simple-search-test.coffee

+assert = chai.assert
+
+describe 'h.directives', ->
+  $scope = null
+  $compile = null
+  fakeWindow = null
+
+  beforeEach module('h.directives')
+
+  beforeEach inject (_$compile_, _$rootScope_) ->
+    $compile = _$compile_
+    $scope = _$rootScope_.$new()
+
+  describe '.simpleSearch', ->
+    $element = null
+    beforeEach ->
+      $scope.update = sinon.spy()
+      $scope.clear = sinon.spy()
+
+      template= '''
+      <div class="simpleSearch"
+            query="query"
+            onsearch="update(this)"
+            onclear="clear()">
+      </div>
+      '''
+
+      $element = $compile(angular.element(template))($scope)
+      $scope.$digest()
+
+    it 'updates the search-bar', ->
+      $scope.query = "Test query"
+      $scope.$digest()
+      assert.equal($scope.searchtext, $scope.query)
+
+    it 'calls the given search function', ->
+      $scope.query = "Test query"
+      $scope.$digest()
+      $element.triggerHandler('submit')
+      sinon.assert.calledWith($scope.update, "Test query")
+
+    it 'calls the given clear function', ->
+      $element.find('.simple-search-clear').click()
+      assert($scope.clear.called)
+
+    it 'clears the search-bar', ->
+      $scope.query = "Test query"
+      $scope.$digest()
+      $element.find('.simple-search-clear').click()
+      assert.equal($scope.searchtext, '')
+
+    it 'adds a class to the form when there is no input value', ->
+      $form = $element.find('.simple-search-form')
+      assert.include($form.prop('className'), 'simple-search-inactive')
+
+    it 'removes the class from the form when there is an input value', ->
+      $scope.query = "Test query"
+      $scope.$digest()
+
+      $form = $element.find('.simple-search-form')
+      assert.notInclude($form.prop('className'), 'simple-search-inactive')