Some UI fixes.

- Add next/prev buttons to make it easier to go to prev/next pages on
  the pager.
- Improve the search UI a bit.  Now it explicitly tells the user to
  press enter/hit search to execute a search.
- Fixed a few issues with other irrelevant media showing when one
  searches.

vixen/html/vixen_ui.html

@@ -155,16 +155,21 @@ <h3 style="margin: 5px;"> View Project: {{viewer.name}}</h3>
     <button v-on:click="viewer.clear_search()">Clear</button>
 
     <div v-if="viewer.is_searching">
+        <div v-if="viewer.search_completed">
         <view-search-results :viewer="viewer" :pager="viewer.search_pager">
         </view-search-results>
+        </div>
+        <div v-else>
+            Press the "Search" button or hit "Enter/Return".
+        </div>
     </div>
     <div v-else>
         <view-directory :viewer="viewer" :pager="viewer.pager"
                         :current_dir="viewer.current_dir"></view-directory>
     </div>
 
 
-    <div v-if="viewer.current_file || (viewer.is_searching && viewer.media)"
+    <div v-if="viewer.current_file || (viewer.search_completed && viewer.media)"
          style="padding:5px;">
         <edit-media :viewer="viewer" :media="viewer.media"></edit-media>
     </div>
@@ -183,7 +188,7 @@ <h3 style="margin: 5px;"> View Project: {{viewer.name}}</h3>
     <section class="sans-third"
              style="background:#f0f0f0;box-shadow:inset 0 0 10px rgba(0,0,0,0.2)">
 
-        <div v-if="viewer.current_file || (viewer.is_searching && viewer.media)"
+        <div v-if="viewer.current_file || (viewer.search_completed && viewer.media)"
              style="padding:5px;">
           <view-media class="viewer" :media="viewer.media"></view-media>
     </div>
@@ -217,21 +222,23 @@ <h3 style="margin: 5px;"> View Project: {{viewer.name}}</h3>
       Page {{pager.page}}
       <input v-show="pager.total_pages > 1" v-model="pager.page"
              type="range" min="1" v-bind:max="pager.total_pages">
-      of {{pager.total_pages}}
+       of {{pager.total_pages}}
+      <button v-on:click="pager.prev_page()"
+              v-bind:disabled="pager.page == 1">Prev</button>
+      <button v-on:click="pager.next_page()"
+              v-bind:disabled="pager.page == pager.total_pages">Next</button>
     </div>
   </script>
 
   <!-- view-search-results template -->
   <script type="text/x-template" id="view-search-template">
    <div>
-   <div style="height:100px; width: 300px;"
-   class="resizable directory-browser">
+   <div style="height:100px; width: 300px;" class="resizable directory-browser">
    <div v-for="media in pager.data | limitBy pager.limit pager.start">
    <label v-on:click="pager.select($index)"
    v-bind:class="{'current-index': pager.rel_index == $index,
-                               'selected': pager.selected == media}"
-       title="{{media[1]}}"
-       >
+                  'selected': pager.selected[1] == media[1]}"
+       title="{{media[1]}}">
    {{media[0]}}
    </label>
    </div>
@@ -241,6 +248,10 @@ <h3 style="margin: 5px;"> View Project: {{viewer.name}}</h3>
    <input v-show="pager.total_pages > 1" v-model="pager.page"
    type="range" min="1" v-bind:max="pager.total_pages">
    of {{pager.total_pages}}
+   <button v-on:click="pager.prev_page()"
+   v-bind:disabled="pager.page == 1">Prev</button>
+   <button v-on:click="pager.next_page()"
+   v-bind:disabled="pager.page == pager.total_pages">Next</button>
    </div>
   </script>
 

vixen/tests/test_vixen.py

@@ -191,6 +191,34 @@ def test_add_remove_project_works(self):
         # Then
         self.assertEqual(len(vixen.projects), 0)
 
+    def test_search_string_updates_search_completed(self):
+        # Given
+        ui = VixenUI()
+        vixen = ui.vixen
+        ui.add_project()
+        p = vixen.projects[0]
+        p.path = self.root
+        p.scan()
+
+        # When
+        ui.view(p)
+        ui.viewer.search = 'root.txt'
+
+        # Then
+        self.assertEqual(ui.viewer.search_completed, False)
+
+        # When
+        ui.viewer.do_search()
+
+        # Then
+        self.assertEqual(ui.viewer.search_completed, True)
+
+        # When
+        ui.viewer.search = 'xxx'
+
+        # Then
+        self.assertEqual(ui.viewer.search_completed, False)
+
     def test_process_uses_search_results(self):
         # Given
         ui = VixenUI()

vixen/vixen.py

@@ -329,6 +329,8 @@ class ProjectViewer(HasTraits):
 
     is_searching = Property(Bool, depends_on="search")
 
+    search_completed = Bool(False)
+
     type = Enum("unknown", "image", "video", "audio")
 
     def go_to_parent(self):
@@ -379,6 +381,7 @@ def do_search(self):
                 self.media = None
                 result = list(self.project.search(self.search))
                 self.search_pager.data = result
+                self.search_completed = True
 
     def rescan(self):
         with self.ui.busy():
@@ -430,6 +433,10 @@ def _search_pager_default(self):
     def _get_is_searching(self):
         return len(self.search) > 0
 
+    def _search_changed(self, s):
+        self.search_completed = False
+        self.current_file = None
+
     def _get_active_pager(self):
         if self.is_searching:
             return self.search_pager