Merge pull request #606 from hypothesis/search-tool-7

Implement search tool

h/css/common.scss

@@ -624,7 +624,7 @@ blockquote {
   @include smallshadow;
   background: $white;
   border: solid 1px $grayLighter;
-  height: 2em;
+  height: 2.25em;
   position: fixed;
   left: -1px;
   right: -1px;
@@ -772,6 +772,10 @@ blockquote {
     }
   }
 
+  .search-collapsed {
+    background-image: url("../images/plus_1.png");
+  }
+
   //These are all the changes needed to collapse thread objects.
   &.collapsed {
     display: block !important;
@@ -1129,3 +1133,90 @@ h3.stream {
   word-spacing: normal;
   margin-top: 0;
 }
+
+//Visual Search////////////////////////////////
+//Imported their css here
+
+.collapsed-container {
+  height: 1em;
+  visibility: hidden;
+}
+
+.small-inner {
+  margin:0px 0.5em 0px 1em;
+}
+
+.search-container {
+  width: auto;
+  float: none;
+  overflow: hidden;
+}
+
+.visual-search {
+  .VS-search .VS-search-box {
+    border: 0;
+    min-height: 22px;
+    margin-top: 1px;
+    margin-bottom: 1px;
+  }
+
+  .VS-search input,.VS-search .VS-input-width-tester {
+    border: none;
+    -moz-box-sizing:content-box;
+    -webkit-box-sizing:content-box;
+    box-sizing: content-box;
+  }
+
+  .VS-search .search_input input {
+    width: 4px;
+  }
+}
+
+.thread {
+  .load-more {
+    @include pie-clearfix;
+    font-family: $sansFontFamily;
+    font-weight:bold;
+    font-size: 11px;
+  }
+}
+
+.visual-container {
+  margin-left: 3em;
+}
+
+.magnify-glass {
+  width: 2.25em;
+  min-height: 22px;
+}
+
+.magnify-glass .VS-icon {
+  margin-left: 3.5em;
+}
+
+.magnify-glass .VS-icon-search:hover {
+  width:12px;
+  height:12px;
+  background-image:url(../images/embed/icons/search_glyph_dark.png);
+  cursor: pointer;
+}
+
+.fadeIn-setup,.fadeOut-setup {
+  -webkit-transition: 1s linear opacity;
+  -moz-transition: 1s linear opacity;
+  -o-transition: 1s linear opacity;
+  transition: 1s linear opacity;
+}
+
+.fadeIn-setup{
+  opacity:0;
+}
+.fadeOut-setup{
+  opacity:1;
+}
+.fadeIn-setup.fadeIn-start {
+  opacity: 1;
+}
+.fadeOut-setup.fadeOut-start{
+    opacity:0;
+}
\ No newline at end of file

h/css/sidebar.scss

@@ -322,3 +322,22 @@ svg { -webkit-tap-highlight-color: rgba(255, 255, 255, 0); }
     display: inline;
   }
 }
+
+
+//SEARCH HIGHLIGHTS////////////////////////////////
+.search-hl-active {
+  background: $highlightColor;
+  box-shadow:3px 3px 4px -1px #999999;
+  &::-moz-selection {
+    background: $highlightColor;
+    box-shadow:3px 3px 4px #999999;
+  }
+  &::-moz-selection, &::-moz-window-inactive, &::window-inactive {
+    background: $highlightColor;
+    box-shadow:3px 3px 4px #999999;
+  }
+  &::selection, &::selection:window-inactive {
+    background: $highlightColor;
+    box-shadow:3px 3px 4px #999999;
+  }
+}

h/js/app.coffee

@@ -18,6 +18,10 @@ configure = ($routeProvider) ->
     controller: 'ViewerController'
     reloadOnSearch: false
     templateUrl: 'viewer.html'
+  $routeProvider.when '/page_search',
+    controller: 'SearchController'
+    reloadOnSearch: false
+    templateUrl: 'page_search.html'
   $routeProvider.otherwise
     redirectTo: '/viewer'
 configure.$inject = ['$routeProvider']

h/js/app_directives.coffee

@@ -19,7 +19,9 @@ annotation = ['$filter', 'annotator', ($filter, annotator) ->
   priority: 100  # Must run before ngModel
   require: '?ngModel'
   restrict: 'C'
-  scope: {}
+  scope:
+    mode: '@'
+    replies: '@'
   templateUrl: 'annotation.html'
 ]
 

h/js/services.coffee

@@ -415,8 +415,7 @@ class DraftProvider
     else
       false
 
-
-angular.module('h.services', ['ngResource'])
+angular.module('h.services', ['ngResource','h.filters'])
   .provider('authentication', AuthenticationProvider)
   .provider('drafts', DraftProvider)
   .service('annotator', Hypothesis)

h/lib/visualsearch.css

+.VS-search .VS-icon {
+  background-repeat: no-repeat;
+  background-position: center center;
+  vertical-align: middle;
+  width: 16px; height: 16px;
+}
+  .VS-search .VS-icon-cancel {
+    width: 11px; height: 11px;
+    background-position: center 0;
+    background-image: url(../images/embed/icons/cancel_search.png?1311104738);
+    cursor: pointer;
+  }
+    .VS-search .VS-icon-cancel:hover {
+      background-position: center -11px;
+    }
+  .VS-search .VS-icon-search {
+    width: 12px; height: 12px;
+    background-image: url(../images/embed/icons/search_glyph.png?1311104738);
+  }
+
+/*------------------------------ RESET + DEFAULT STYLES ---------------------------------*/
+
+/* 
+Eric Meyer's final reset.css
+Source: http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/ 
+*/
+.VS-search div, .VS-search span, .VS-search a, .VS-search img, 
+.VS-search ul, .VS-search li, .VS-search form, .VS-search label,
+.VS-interface ul, .VS-interface li, .VS-interface {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  outline: 0;
+  font-weight: inherit;
+  font-style: inherit;
+  font-size: 100%;
+  font-family: inherit;
+  vertical-align: baseline;
+}
+
+.VS-search :focus {
+  outline: 0;
+}
+.VS-search {
+  line-height: 1;
+  color: black;
+}
+.VS-search ol, .VS-search ul {
+  list-style: none;
+}
+
+/* ===================== */
+/* = General and Reset = */
+/* ===================== */
+
+.VS-search {
+  font-family: Arial, sans-serif;
+  color: #373737;
+  font-size: 12px;
+}
+.VS-search input {
+  display: block;
+  border: none;
+  -moz-box-shadow: none;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+  outline: none;
+  margin: 0; padding: 4px;
+  background: transparent;
+  font-size: 16px;
+  line-height: 20px;
+  width: 100%;
+}
+.VS-interface, .VS-search .dialog, .VS-search input {
+  font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, sans-serif !important;
+  line-height: 1.1em;
+}
+
+/* ========== */
+/* = Layout = */
+/* ========== */
+
+.VS-search .VS-search-box {
+  cursor: text;
+  position: relative;
+  background: transparent;
+  border: 2px solid #ccc;
+  border-radius: 16px; -webkit-border-radius: 16px; -moz-border-radius: 16px;
+  background-color: #fafafa;
+  -webkit-box-shadow: inset 0px 0px 3px #ccc;
+  -moz-box-shadow: inset 0px 0px 3px #ccc;
+  box-shadow: inset 0px 0px 3px #ccc;
+  min-height: 28px;
+  height: auto;
+}
+  .VS-search .VS-search-box.VS-focus {
+    border-color: #acf;
+    -webkit-box-shadow: inset 0px 0px 3px #acf;
+    -moz-box-shadow: inset 0px 0px 3px #acf;
+    box-shadow: inset 0px 0px 3px #acf;
+  }
+  .VS-search .VS-placeholder {
+      position: absolute;
+      top: 7px;
+      left: 4px;
+      margin: 0 20px 0 22px;
+      color: #808080;
+      font-size: 14px;
+  }
+  .VS-search .VS-search-box.VS-focus .VS-placeholder,
+  .VS-search .VS-search-box .VS-placeholder.VS-hidden {
+      display: none;
+  }
+  .VS-search .VS-search-inner {
+    position: relative;
+    margin: 0 20px 0 22px;
+    overflow: hidden;
+  }
+  .VS-search input {
+    width: 100px;
+  }
+  .VS-search input,
+  .VS-search .VS-input-width-tester {
+    padding: 6px 0;
+    float: left;
+    color: #808080;
+    font: 13px/17px Helvetica, Arial;
+  }
+  .VS-search.VS-focus input {
+    color: #606060;
+  }
+  .VS-search .VS-icon-search {
+    position: absolute;
+    left: 9px; top: 8px;
+  }
+  .VS-search .VS-icon-cancel {
+    position: absolute;
+    right: 9px; top: 8px;
+  }
+
+/* ================ */
+/* = Search Facet = */
+/* ================ */
+
+.VS-search .search_facet {
+  float: left;
+  margin: 0;
+  padding: 0 0 0 14px;
+  position: relative;
+  border: 1px solid transparent;
+  height: 20px;
+  margin: 3px -3px 3px 0;
+}
+  .VS-search .search_facet.is_selected {
+    margin-left: -3px;
+    -webkit-border-radius: 16px;
+    -moz-border-radius: 16px;
+    border-radius: 16px;
+    background-color: #d2e6fd;
+    background-image: -moz-linear-gradient(top, #d2e6fd, #b0d1f9); /* FF3.6 */
+    background-image: -webkit-gradient(linear, left top, left bottom, from(#d2e6fd), to(#b0d1f9)); /* Saf4+, Chrome */
+    background-image: linear-gradient(top, #d2e6fd, #b0d1f9);
+    border: 1px solid #6eadf5;
+  }
+  .VS-search .search_facet .category {
+    float: left;
+    text-transform: uppercase;
+    font-weight: bold;
+    font-size: 10px;
+    color: #808080;
+    padding: 8px 0 5px;
+    line-height: 13px;
+    cursor: pointer;
+    padding: 4px 0 0;
+  }
+  .VS-search .search_facet.is_selected .category {
+    margin-left: 3px;
+  }
+  .VS-search .search_facet .search_facet_input_container {
+    float: left;
+  }
+  .VS-search .search_facet input {
+    margin: 0;
+    padding: 0;
+    color: #000;
+    font-size: 13px;
+    line-height: 16px;
+    padding: 5px 0 5px 4px;
+    height: 16px;
+    width: auto;
+    z-index: 100;
+    position: relative;
+    padding-top: 1px;
+    padding-bottom: 2px;
+    padding-right: 3px;
+
+  }
+  .VS-search .search_facet.is_editing input,
+  .VS-search .search_facet.is_selected input {
+    color: #000;
+  }
+  .VS-search .search_facet .search_facet_remove {
+    position: absolute;
+    left: 0;
+    top: 4px;
+  }
+    .VS-search .search_facet.is_selected .search_facet_remove {
+      opacity: 0.4;
+      left: 3px;
+      filter: alpha(opacity=40);
+      background-position: center -11px;
+    }
+    .VS-search .search_facet .search_facet_remove:hover {
+      opacity: 1;
+    }
+  .VS-search .search_facet.is_editing .category,
+  .VS-search .search_facet.is_selected .category {
+    color: #000;
+  }
+  .VS-search .search_facet.search_facet_maybe_delete .category,
+  .VS-search .search_facet.search_facet_maybe_delete input {
+    color: darkred;
+  }
+
+/* ================ */
+/* = Search Input = */
+/* ================ */
+
+.VS-search .search_input {
+  height: 28px;
+  float: left;
+  margin-left: -1px;
+}
+  .VS-search .search_input input {
+    padding: 6px 3px 6px 2px;
+    line-height: 10px;
+    height: 22px;
+    margin-top: -4px;
+    width: 10px;
+    z-index: 100;
+    min-width: 4px;
+    position: relative;
+  }
+  .VS-search .search_input.is_editing input {
+    color: #202020;
+  }
+
+/* ================ */
+/* = Autocomplete = */
+/* ================ */
+
+.ui-helper-hidden-accessible {
+    display: none;
+}
+
+.VS-interface.ui-autocomplete {
+  position: absolute;
+  border: 1px solid #C0C0C0;
+  border-top: 1px solid #D9D9D9;
+  background-color: #F6F6F6;
+  cursor: pointer;
+  z-index: 10000;
+  padding: 0;
+  margin: 0;
+  width: auto;
+  min-width: 80px;
+  max-width: 220px;
+  max-height: 240px;
+  overflow-y: auto;
+  overflow-x: hidden;
+  font-size: 13px;
+  top: 5px;
+  opacity: 0.97;
+  box-shadow: 3px 4px 5px -2px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 3px 4px 5px -2px rgba(0, 0, 0, 0.5); -moz-box-shadow: 3px 4px 5px -2px rgba(0, 0, 0, 0.5);
+}
+  .VS-interface.ui-autocomplete .ui-autocomplete-category {
+    text-transform: capitalize;
+    font-size: 11px;
+    padding: 4px 4px 4px;
+    border-top: 1px solid #A2A2A2;
+    border-bottom: 1px solid #A2A2A2;
+    background-color: #B7B7B7;
+    text-shadow: 0 -1px 0 #999;
+    font-weight: bold;
+    color: white;
+    cursor: default;
+  }
+  .VS-interface.ui-autocomplete .ui-menu-item {
+      float: none;
+  }
+  .VS-interface.ui-autocomplete .ui-menu-item a {
+    color: #000;
+    outline: none;
+    display: block;
+    padding: 3px 4px 5px;
+    border-radius: none;
+    line-height: 1;
+    background-color: #F8F8F8;
+    background-image: -moz-linear-gradient(top, #F8F8F8, #F3F3F3); /* FF3.6 */
+    background-image: -webkit-gradient(linear, left top, left bottom, from(#F8F8F8), to(#F3F3F3)); /* Saf4+, Chrome */
+    background-image: linear-gradient(top, #F8F8F8, #F3F3F3);
+    border-top: 1px solid #FAFAFA;
+    border-bottom: 1px solid #f0f0f0;
+  }
+  .VS-interface.ui-autocomplete .ui-menu-item a:active {
+    outline: none;
+  }
+  .VS-interface.ui-autocomplete .ui-menu-item .ui-state-hover, .VS-interface.ui-autocomplete .ui-menu-item .ui-state-focus {
+    background-color: #6483F7;
+    background-image: -moz-linear-gradient(top, #648bF5, #2465f3); /* FF3.6 */
+    background-image: -webkit-gradient(linear, left top, left bottom, from(#648bF5), to(#2465f3)); /* Saf4+, Chrome */
+    background-image: linear-gradient(top, #648bF5, #2465f3);
+    border-top: 1px solid #5b83ec;
+    border-bottom: 1px solid #1459e9;
+    border-left: none;
+    border-right: none;
+    color: white;
+    margin: 0;
+  }
+  .VS-interface.ui-autocomplete .ui-corner-all {
+    border-radius: 0;
+  }
+  .VS-interface.ui-autocomplete li {
+    list-style: none;
+    width: auto;
+  }