gui: add icons on settings tabs
use icons instead of text on settings tabs
portrait themes only, landscape has no problems if a translated label needs more space
Change-Id: I611ee9e34d5641c00d8894e219502a6198648339
Signed-off-by: z31s1g <z31s1g@googlemail.com>
diff --git a/gui/theme/portrait_mdpi/ui.xml b/gui/theme/portrait_mdpi/ui.xml
index dd09577..4d002ff 100644
--- a/gui/theme/portrait_mdpi/ui.xml
+++ b/gui/theme/portrait_mdpi/ui.xml
@@ -53,6 +53,11 @@
<image name="slider_touch" filename="slider_touch"/>
<image name="handle" filename="handle"/>
<image name="cursor" filename="cursor" retainaspect="1"/>
+ <image name="tab_general" filename="tab_general" retainaspect="1"/>
+ <image name="tab_timezone" filename="tab_timezone" retainaspect="1"/>
+ <image name="tab_display" filename="tab_display" retainaspect="1"/>
+ <image name="tab_vibration" filename="tab_vibration" retainaspect="1"/>
+ <image name="tab_language" filename="tab_language" retainaspect="1"/>
<image name="backspace" filename="backspace" retainaspect="1"/>
<image name="enter" filename="enter" retainaspect="1"/>
@@ -87,6 +92,7 @@
<variable name="indent_right" value="465"/>
<variable name="tab_height" value="40"/>
<variable name="tab_indicator_height" value="3"/>
+ <variable name="tab_y" value="130"/>
<variable name="tab3_width" value="160"/>
<variable name="tab4_width" value="120"/>
<variable name="tab5_width" value="96"/>
@@ -98,6 +104,10 @@
<variable name="tab5_col3_x" value="192"/>
<variable name="tab5_col4_x" value="288"/>
<variable name="tab5_col5_x" value="384"/>
+ <variable name="tab5_centered_col1_x" value="48"/>
+ <variable name="tab5_centered_col2_x" value="144"/>
+ <variable name="tab5_centered_col4_x" value="336"/>
+ <variable name="tab5_centered_col5_x" value="432"/>
<variable name="btn3_col2_x" value="170"/>
<variable name="btn3_col3_x" value="325"/>
<variable name="btn4_col2_x" value="131"/>
@@ -166,6 +176,7 @@
<variable name="keyboard_terminal_y" value="422"/>
<variable name="background_color" value="#1A1A1A"/>
<variable name="accent_color" value="#0090CA"/>
+ <variable name="accent_color_semitransparent" value="#0090CA30"/>
<variable name="text_color" value="#EEEEEE"/>
<variable name="text_button_color" value="#EEEEEE"/>
<variable name="text_success_color" value="#76FF03"/>
@@ -466,6 +477,10 @@
</template>
<template name="tabs_backup">
+ <fill color="%accent_color%">
+ <placement x="0" y="row1_y" w="%screen_width%" h="tab_height"/>
+ </fill>
+
<button style="tab">
<placement x="0" y="%row1_y%" w="%tab3_width%" h="%tab_height%"/>
<text>{@tab_backup=BACKUP}</text>
@@ -480,33 +495,37 @@
</template>
<template name="tabs_settings">
+ <fill color="%accent_color%">
+ <placement x="0" y="row1_y" w="%screen_width%" h="tab_height"/>
+ </fill>
+
<button style="tab">
- <placement x="0" y="%row1_y%" w="%tab5_width%" h="%tab_height%"/>
- <text>{@tab_general=GENERAL}</text>
+ <placement x="%tab5_centered_col1_x%" y="%tab_y%" placement="4"/>
+ <image resource="tab_general"/>
<action function="page">settings</action>
</button>
<button style="tab">
- <placement x="%tab5_col2_x%" y="%row1_y%" w="%tab5_width%" h="%tab_height%"/>
- <text>{@tab_time_zone=TIME ZONE}</text>
+ <placement x="%tab5_centered_col2_x%" y="%tab_y%" placement="4"/>
+ <image resource="tab_timezone"/>
<action function="page">settings_timezone</action>
</button>
<button style="tab">
- <placement x="%tab5_col3_x%" y="%row1_y%" w="%tab5_width%" h="%tab_height%"/>
- <text>{@tab_screen=SCREEN}</text>
+ <placement x="%center_x%" y="%tab_y%" placement="4"/>
+ <image resource="tab_display"/>
<action function="page">settings_screen</action>
</button>
<button style="tab">
- <placement x="%tab5_col4_x%" y="%row1_y%" w="%tab5_width%" h="%tab_height%"/>
- <text>{@tab_vibration=VIBRATION}</text>
+ <placement x="%tab5_centered_col4_x%" y="%tab_y%" placement="4"/>
+ <image resource="tab_vibration"/>
<action function="page">settings_vibration</action>
</button>
<button style="tab">
- <placement x="%tab5_col5_x%" y="%row1_y%" w="%tab5_width%" h="%tab_height%"/>
- <text>{@tab_language=LANGUAGE}</text>
+ <placement x="%tab5_centered_col5_x%" y="%tab_y%" placement="4"/>
+ <image resource="tab_language"/>
<action function="page">settings_language</action>
</button>
</template>