From cd8db1818ac414492d7c715f04baa0fb33a2720e Mon Sep 17 00:00:00 2001
From: Kovid Goyal <kovid@kovidgoyal.net>
Date: Sun, 31 Jan 2016 11:20:56 +0530
Subject: [PATCH] More work on the CS TB

---
 src/pyj/book_list/search.pyj | 24 +++++++++++++++++-------
 1 file changed, 17 insertions(+), 7 deletions(-)

diff --git a/src/pyj/book_list/search.pyj b/src/pyj/book_list/search.pyj
index 049a1f6fb2..bb3a579121 100644
--- a/src/pyj/book_list/search.pyj
+++ b/src/pyj/book_list/search.pyj
@@ -2,11 +2,12 @@
 # License: GPL v3 Copyright: 2015, Kovid Goyal <kovid at kovidgoyal.net>
 
 from ajax import ajax
-from dom import clear, set_css
+from dom import clear, set_css, build_rule
 from elementmaker import E
 from gettext import gettext as _
 from widgets import create_button, BUTTON_VPADDING, create_spinner
 from book_list.globals import get_boss, get_session_data
+from book_list.theme import get_color
 
 sp_counter = 0
 
@@ -18,7 +19,10 @@ class SearchPanel:
         self.container_id = 'search-panel-' + sp_counter
         self.interface_data = interface_data
         self.tag_path = []
-        style = ''
+        style =  build_rule('#' + self.container_id + ' div.tag-name:hover', color=get_color('list-hover-foreground'), background_color=get_color('list-hover-background'))
+        style += build_rule('#' + self.container_id + ' div.tag-menu:hover', color=get_color('list-hover-foreground'), background_color=get_color('list-hover-background'))
+        style += build_rule('#' + self.container_id + ' div.tag-name:active', transform='scale(1.5)')
+        style += build_rule('#' + self.container_id + ' div.tag-menu:active', transform='scale(2)')
         div = E.div(
             id=self.container_id, style='display:none',
             E.style(style, type='text/css'),
@@ -132,12 +136,18 @@ class SearchPanel:
         for child in children:
             node = item_map[child.id]
             div = E.div(
-                E.div(
-                    E.img(src=self.icon_for_node(node), style='vertical-align:middle; display:inline-block; max-height:4ex'),
-                    '\xa0' + node.name)
+                    style="display:flex; align-items: stretch",
+                    E.div(class_='tag-name',
+                        style='border-right:solid 1px currentColor; padding: 1ex; display:block',
+                        E.img(src=self.icon_for_node(node), style='vertical-align:middle; display:inline-block; max-height:4ex'),
+                        '\xa0' + node.name
+                    ),
+                    E.div(class_='tag-menu',
+                        style='padding: 1ex; display:flex; align-items:center',
+                        E.div(E.i(class_='fa fa-angle-down'))
+                    )
             )
-            set_css(div, max_width='45vw', border='solid 1px currentColor', border_radius='20px', margin='0.5rem', padding='1ex', cursor='pointer')
-            set_css(div.firstChild, position='relative', top='50%', transform='translateY(-50%)', margin_left='0.5rem')
+            set_css(div, max_width='45vw', border='solid 1px currentColor', border_radius='20px', margin='0.5rem', cursor='pointer', overflow='hidden', user_select='none')
             container.appendChild(div)
 
     @property