Jewelry Theme: New scrollbar graphic implemented +100% usability on mobile.

Graphic for horizonal scrollbar background added (WIP).

5 files changed, 30 insertions, 17 deletions

diff --git a/data/themes/jewelry/scroll.xml b/data/themes/jewelry/scroll.xml
index 6d2181160..e201a3e2b 100644
--- a/data/themes/jewelry/scroll.xml
+++ b/data/themes/jewelry/scroll.xml
@@ -1,19 +1,19 @@
 <?xml version="1.0" encoding="utf-8"?>
 <skinset name="Default" image="window.png">
-    <widget type="Window" xpos="41" ypos="164">
+    <widget type="Window" xpos="41" ypos="163">
         <!-- Top Row -->
-        <part type="top-left-corner" xpos="0" ypos="0" width="5" height="4" />
-        <part type="top-edge" xpos="5" ypos="0" width="1" height="4" />
-        <part type="top-right-corner" xpos="6" ypos="0" width="5" height="4" />
+        <part type="top-left-corner" xpos="0" ypos="0" width="22" height="22" />
+        <part type="top-edge" xpos="0" ypos="0" width="0" height="0" />
+        <part type="top-right-corner" xpos="0" ypos="0" width="0" height="0" />
 
         <!-- Middle Row -->
-        <part type="left-edge" xpos="0" ypos="4" width="5" height="11" />
-        <part type="bg-quad" xpos="5" ypos="4" width="1" height="11" />
-        <part type="right-edge" xpos="6" ypos="4" width="5" height="11" />
+        <part type="left-edge" xpos="0" ypos="0" width="0" height="0" />
+        <part type="bg-quad" xpos="0" ypos="0" width="0" height="0" />
+        <part type="right-edge" xpos="0" ypos="0" width="0" height="0" />
 
         <!-- Bottom Row -->
-        <part type="bottom-left-corner" xpos="0" ypos="15" width="5" height="4" />
-        <part type="bottom-edge" xpos="5" ypos="15" width="1" height="4" />
-        <part type="bottom-right-corner" xpos="6" ypos="15" width="5" height="4" />
+        <part type="bottom-left-corner" xpos="0" ypos="0" width="0" height="0" />
+        <part type="bottom-edge" xpos="0" ypos="0" width="0" height="0" />
+        <part type="bottom-right-corner" xpos="0" ypos="0" width="0" height="0" />
     </widget>
 </skinset>
diff --git a/data/themes/jewelry/scroll_hbackground.xml b/data/themes/jewelry/scroll_hbackground.xml
new file mode 100644
index 000000000..51df54542
--- /dev/null
+++ b/data/themes/jewelry/scroll_hbackground.xml
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<skinset name="Default" image="window.png">
+    <widget type="Window" xpos="128" ypos="186">
+        <!-- Top Row -->
+        <part type="top-edge" xpos="0" ypos="0" width="12" height="22" />
+
+        <!-- Middle Row -->
+        <part type="bg-quad" xpos="0" ypos="23" width="10" height="22" />
+
+        <!-- Bottom Row -->
+        <part type="bottom-edge" xpos="0" ypos="46" width="12" height="22" />
+    </widget>
+</skinset>
diff --git a/data/themes/jewelry/scroll_vbackground.xml b/data/themes/jewelry/scroll_vbackground.xml
index bc7f46ea7..70132984f 100644
--- a/data/themes/jewelry/scroll_vbackground.xml
+++ b/data/themes/jewelry/scroll_vbackground.xml
@@ -2,12 +2,12 @@
 <skinset name="Default" image="window.png">
     <widget type="Window" xpos="105" ypos="186">
         <!-- Top Row -->
-        <part type="top-edge" xpos="0" ypos="0" width="10" height="11" />
+        <part type="top-edge" xpos="0" ypos="0" width="22" height="12" />
 
         <!-- Middle Row -->
-        <part type="bg-quad" xpos="16" ypos="0" width="10" height="11" />
+        <part type="bg-quad" xpos="0" ypos="13" width="22" height="10" />
 
         <!-- Bottom Row -->
-        <part type="bottom-edge" xpos="32" ypos="0" width="10" height="11" />
+        <part type="bottom-edge" xpos="0" ypos="24" width="22" height="12" />
     </widget>
 </skinset>
diff --git a/data/themes/jewelry/scrollbuttons.xml b/data/themes/jewelry/scrollbuttons.xml
index afb023e44..f564f74a6 100644
--- a/data/themes/jewelry/scrollbuttons.xml
+++ b/data/themes/jewelry/scrollbuttons.xml
@@ -2,11 +2,11 @@
 <skinset name="Default" image="window.png">
     <widget type="Window" xpos="41" ypos="100">
         <option name="showbuttons" value="0" />
-        <option name="markersize" value="0" />
-        <option name="scrollbarsize" value="12" />
+        <option name="scrollbarsize" value="22" />
+        <option name="markersize" value="22" />
         <part type="left" xpos="0" ypos="0" width="12" height="12" />
         <part type="right" xpos="0" ypos="16" width="12" height="12" />
-        <part type="down" xpos="0" ypos="32" width="12" height="12" />
-        <part type="up" xpos="0" ypos="48" width="12" height="12" />
+        <part type="down" xpos="0" ypos="32" width="22" height="12" />
+        <part type="up" xpos="0" ypos="48" width="22" height="12" />
     </widget>
 </skinset>
diff --git a/data/themes/jewelry/window.png b/data/themes/jewelry/window.png
index cf9311e49..94fc81d9f 100644
--- a/data/themes/jewelry/window.png
+++ b/data/themes/jewelry/window.png