New UI design

* Moved style definitions to its own file (themes/default)
* Updated the desktop.kv to the new UI design
* Removed planes
* Adjusted port config

4 files changed, 40 insertions, 65 deletions

diff --git a/tagit/widgets/browser.kv b/tagit/widgets/browser.kv
index 8b4c8c3..63495be 100644
--- a/tagit/widgets/browser.kv
+++ b/tagit/widgets/browser.kv
@@ -11,19 +11,6 @@
     is_cursor: False
     is_selected: False
 
-    canvas.after:
-        Color:
-            rgba: 1,1,1, 1 if self.is_cursor else 0
-        Line:
-            width: 2
-            rectangle: self.x, self.y, self.width, self.height
-
-        Color:
-            rgba: self.scolor + [0.5 if self.is_selected else 0]
-        Rectangle:
-            pos: self.x, self.center_y - int(self.height) / 2
-            size: self.width, self.height
-
 
 <BrowserImage>: # This be an image
     preview: image
@@ -58,6 +45,11 @@
     #    opacity: root.is_group and 1.0 or 0.0
     #    show: 'image', 
 
+<BrowserDescriptionLabel@Label>:
+    halign: 'left'
+    valign: 'center'
+    text_size: self.size
+
 <BrowserDescription>: # This be a list item
     spacer: 20
     preview: image
@@ -68,12 +60,9 @@
         # actual size is set in code
         pos: 0, 0
 
-    Label:
+    BrowserDescriptionLabel:
         text: root.text
         markup: True
-        halign: 'left'
-        valign: 'center'
-        text_size: self.size
         size_hint: None, 1
         width: root.width - image.width - root.spacer - 35
         pos: root.height + root.spacer, 0
diff --git a/tagit/widgets/browser.py b/tagit/widgets/browser.py
index 1e42c9c..bbc3748 100644
--- a/tagit/widgets/browser.py
+++ b/tagit/widgets/browser.py
@@ -281,7 +281,6 @@ class Browser(GridLayout, StorageAwareMixin, ConfigAwareMixin):
 
     def on_cursor(self, sender, cursor):
         if cursor is not None:
-            #self.root.status.dispatch('on_status', os.path.basename(next(iter(cursor.guids))))
             self.root.status.dispatch('on_status', cursor.filename(default=''))
 
     def on_items(self, sender, items):
@@ -347,10 +346,7 @@ class Browser(GridLayout, StorageAwareMixin, ConfigAwareMixin):
 
         self.clear_widgets()
         for itm in range(self.page_size):
-            wx = factory(
-                    browser=self,
-                    scolor=self.root.session.cfg('ui', 'standalone', 'browser', 'select_color'),
-                    )
+            wx = factory(browser=self)
             self.bind(selection=wx.on_selection)
             self.bind(cursor=wx.on_cursor)
             self.add_widget(wx)
@@ -484,7 +480,6 @@ class BrowserItem(RelativeLayout):
     is_cursor = kp.BooleanProperty(False)
     is_selected = kp.BooleanProperty(False)
     is_group = kp.BooleanProperty(False)
-    scolor = kp.ListProperty([1, 0, 0]) # FIXME: set from config
 
     def update(self, obj):
         self.obj = obj
diff --git a/tagit/widgets/filter.kv b/tagit/widgets/filter.kv
index b638570..df9a678 100644
--- a/tagit/widgets/filter.kv
+++ b/tagit/widgets/filter.kv
@@ -1,4 +1,5 @@
 #:import SearchmodeSwitch tagit.actions.filter
+#:import AddToken tagit.actions.filter
 #-- #:import SortKey tagit.actions.search
 
 <Filter>:
@@ -14,6 +15,10 @@
 
         # Tokens will be inserted here
 
+    AddToken:
+        show: 'image',
+        root: root.root
+
     SearchmodeSwitch:
         show: 'image', 
         root: root.root
@@ -30,55 +35,37 @@
         root: root.root
         name: 'filter'
         orientation: 'lr-tb'
-        # space for 2 buttons
-        width: 3*30 + 2*5
-        size_hint: None, 1.0
+        # space for two buttons
+        width: 2*30 + 5
         spacing: 5
+        size_hint: None, 1
         button_height: 30
         button_show: 'image', 
 
+<Avatar@Label>:
+    active: False
+
+<ShingleText@Label>:
+    active: False
+
 <Shingle>:
     orientation: 'horizontal'
     label: tlabel
 
-    canvas.before:
-        Color:
-            rgba: 0,0,1, 0.25 if root.active else 0
-        Rectangle:
-            pos: root.pos
-            size: root.size
+    Avatar:
+        id: avatar
+        text: 'T'
+        size_hint: None, None
+        width: self.parent.height
+        height: self.parent.height
+        active: root.active
 
-    canvas.after:
-        Color:
-            rgba: 1,1,1,1
-        Line:
-            rectangle: self.x+1, self.y+1, self.width-1, self.height-1
-
-    Label:
+    ShingleText:
         id: tlabel
         text: root.text
-
-        canvas.after:
-            Color:
-                rgba: 0,0,0,0.5 if not root.active else 0
-            Rectangle:
-                pos: self.pos
-                size: self.size
-
-
-    Button:
-        text: 'x'
-        bold: True
-        opacity: 0.5
-        width: 20
-        size_hint: None, 1.0
-        background_color: [0,0,0,0]
-        background_normal: ''
-        on_press: root.remove()
+        active: root.active
 
 <Addressbar>:
     multiline: False
-    background_color: (0.2,0.2,0.2,1) if self.focus else (0.15,0.15,0.15,1)
-    foreground_color: (1,1,1,1)
 
 ## EOF ##
diff --git a/tagit/widgets/status.kv b/tagit/widgets/status.kv
index 2d49b15..0a680ab 100644
--- a/tagit/widgets/status.kv
+++ b/tagit/widgets/status.kv
@@ -1,5 +1,13 @@
 #-- #:import ButtonDock tagit.widgets.dock.ButtonDock # FIXME: mb/port
 
+<NavigationLabel@Label>:
+    markup: True
+
+<StatusLabel@Label>:
+    markup: True
+    valign: 'middle'
+    halign: 'center'
+
 <Status>:
     orientation: 'horizontal'
     status: ''
@@ -18,11 +26,10 @@
         button_height: 30
         button_show: 'image', 
 
-    Label:
+    NavigationLabel:
         id: navigation_label
         size_hint: None, 1
         width: 180
-        markup: True
         text: root.navigation
 
     ButtonDock:
@@ -36,13 +43,10 @@
         button_height: 30
         button_show: 'image', 
 
-    Label:
+    StatusLabel:
         # gets remaining size
         id: status_label
         text_size: self.size
-        markup: True
-        valign: 'middle'
-        halign: 'left'
         text: root.status
 
     ButtonDock: