add icon option items in config dialog

frontend/document/koptinterface.lua

@@ -64,14 +64,26 @@ KoptOptions = {
 			{
 				name = "max_columns",
 				name_text = "Columns",
-				item_text = {"1","2","3","4"},
+				--item_text = {"1","2","3","4"},
+				item_icons = {
+					"resources/icons/appbar.column.one.png",
+					"resources/icons/appbar.column.two.png",
+					"resources/icons/appbar.column.three.png",
+				},
 				values = {1,2,3,4},
 				default_value = 2,
 			},
 			{
 				name = "justification",
-				name_text = "Justification",
-				item_text = {"auto","left","center","right","full"},
+				name_text = "Text Align",
+				--item_text = {"auto","left","center","right","full"},
+				item_icons = {
+					"resources/icons/appbar.align.auto.png",
+					"resources/icons/appbar.align.left.png",
+					"resources/icons/appbar.align.center.png",
+					"resources/icons/appbar.align.right.png",
+					"resources/icons/appbar.align.justify.png",
+				},
 				values = {-1,0,1,2,3},
 				default_value = -1,
 			},

frontend/ui/config.lua

@@ -99,6 +99,48 @@ function OptionTextItem:onTapSelect()
 	return true
 end
 
+OptionIconItem = InputContainer:new{}
+function OptionIconItem:init()
+	self.dimen = self.icon:getSize()
+	self[1] = UnderlineContainer:new{
+		self.icon,
+		padding = self.padding,
+		color = self.color,
+	}
+	-- we need this table per-instance, so we declare it here
+	if Device:isTouchDevice() then
+		self.ges_events = {
+			TapSelect = {
+				GestureRange:new{
+					ges = "tap",
+					range = self.dimen,
+				},
+				doc = "Select Option Item",
+			},
+		}
+	end
+end
+
+function OptionIconItem:onTapSelect()
+	for _, item in pairs(self.items) do
+		--item[1][1].invert = false
+		item[1].color = 0
+	end
+	--self[1][1].invert = true
+	self[1].color = 15
+	local option_value = nil
+	local option_arg = nil
+	if type(self.values) == "table" then
+		option_value = self.values[self.current_item]
+		self.config:onConfigChoice(self.name, option_value, self.event)
+	elseif type(self.args) == "table" then
+		option_arg = self.args[self.current_item]
+		self.config:onConfigChoice(self.name, option_arg, self.event)
+	end
+	UIManager.repaint_all = true
+	return true
+end
+
 --[[
 Dummy Widget that reserves vertical and horizontal space
 ]]
@@ -265,7 +307,7 @@ function ConfigOption:init()
 	local default_item_font_size = math.floor(16*mag_ratio)
 	local default_items_spacing = math.floor(30*mag_ratio)
 	local default_option_height = math.floor(50*mag_ratio)
-	local default_option_padding = math.floor(30*mag_ratio)
+	local default_option_padding = math.floor(15*mag_ratio)
 	local vertical_group = VerticalGroup:new{}
 	table.insert(vertical_group, VerticalSpan:new{ width = default_option_padding })
 	for c = 1, #self.options do
@@ -381,6 +423,30 @@ function ConfigOption:init()
 				end
 			end
 			
+			if self.options[c].item_icons then
+				for d = 1, #self.options[c].item_icons do
+					local option_item = OptionIconItem:new{
+						icon = ImageWidget:new{
+							file = self.options[c].item_icons[d]
+						},
+						padding = -2,
+						color = d == current_item and 15 or 0,
+					}
+					option_items[d] = option_item
+					option_item.items = option_items
+					option_item.name = self.options[c].name
+					option_item.values = self.options[c].values
+					option_item.args = self.options[c].args
+					option_item.event = self.options[c].event
+					option_item.current_item = d
+					option_item.config = self.config
+					table.insert(option_items_group, option_item)
+					if d ~= #self.options[c].item_icons then
+						table.insert(option_items_group, items_spacing)
+					end
+				end
+			end
+			
 			if self.options[c].toggle then
 				local switch = ToggleSwitch:new{
 					name = self.options[c].name,

resources/icons/src/appbar.align.center.xaml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Name="appbar_align_center" Width="48.0067" Height="48.0067" Clip="F1 M 0,0L 48.0067,0L 48.0067,48.0067L 0,48.0067L 0,0">
+	<Path Width="14.0023" Height="2.00031" Canvas.Left="17.0024" Canvas.Top="13.0018" Stretch="Fill" Fill="#FF000000" Data="F1 M 17.0024,13.0018L 31.0047,13.0018L 31.0047,15.0021L 17.0024,15.0021L 17.0024,13.0018 Z "/>
+	<Path Width="22.0031" Height="2.00028" Canvas.Left="13.0018" Canvas.Top="17.0024" Stretch="Fill" Fill="#FF000000" Data="F1 M 13.0018,17.0024L 35.0049,17.0024L 35.0049,19.0026L 13.0018,19.0027L 13.0018,17.0024 Z "/>
+	<Path Width="16.0022" Height="2.00028" Canvas.Left="16.0022" Canvas.Top="21.0029" Stretch="Fill" Fill="#FF000000" Data="F1 M 16.0022,21.0029L 32.0045,21.0029L 32.0045,23.0032L 16.0022,23.0032L 16.0022,21.0029 Z "/>
+	<Path Width="24.0031" Height="2.0003" Canvas.Left="12.0017" Canvas.Top="25.0035" Stretch="Fill" Fill="#FF000000" Data="F1 M 12.0017,25.0035L 36.0047,25.0035L 36.0047,27.0038L 12.0017,27.0038L 12.0017,25.0035 Z "/>
+	<Path Width="14.002" Height="2.00028" Canvas.Left="17.0024" Canvas.Top="29.004" Stretch="Fill" Fill="#FF000000" Data="F1 M 17.0024,29.004L 31.0043,29.004L 31.0043,31.0043L 17.0024,31.0043L 17.0024,29.004 Z "/>
+	<Rectangle Width="18.0025" Height="2.00028" Canvas.Left="15.0021" Canvas.Top="33.0046" Stretch="Fill" Fill="#FF000000"/>
+</Canvas>

resources/icons/src/appbar.align.justify.xaml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Name="appbar_align_justify" Width="48.0067" Height="48.0067" Clip="F1 M 0,0L 48.0067,0L 48.0067,48.0067L 0,48.0067L 0,0">
+	<Path Width="24.0033" Height="2.00028" Canvas.Left="12.0017" Canvas.Top="13.0018" Stretch="Fill" Fill="#FF000000" Data="F1 M 12.0017,13.0018L 36.005,13.0018L 36.005,15.0021L 12.0017,15.0021L 12.0017,13.0018 Z "/>
+	<Path Width="24.0033" Height="2.00029" Canvas.Left="12.0017" Canvas.Top="17.0024" Stretch="Fill" Fill="#FF000000" Data="F1 M 12.0017,17.0024L 36.005,17.0024L 36.005,19.0027L 12.0017,19.0026L 12.0017,17.0024 Z "/>
+	<Path Width="24.0033" Height="2.00028" Canvas.Left="12.0017" Canvas.Top="21.0029" Stretch="Fill" Fill="#FF000000" Data="F1 M 12.0017,21.0029L 36.005,21.0029L 36.005,23.0032L 12.0017,23.0032L 12.0017,21.0029 Z "/>
+	<Path Width="24.0033" Height="2.00029" Canvas.Left="12.0017" Canvas.Top="25.0035" Stretch="Fill" Fill="#FF000000" Data="F1 M 12.0017,25.0035L 36.005,25.0035L 36.005,27.0038L 12.0017,27.0038L 12.0017,25.0035 Z "/>
+	<Path Width="24.0033" Height="2.00028" Canvas.Left="12.0017" Canvas.Top="29.004" Stretch="Fill" Fill="#FF000000" Data="F1 M 12.0017,29.004L 36.005,29.004L 36.005,31.0043L 12.0017,31.0043L 12.0017,29.004 Z "/>
+	<Path Width="24.0033" Height="2.00029" Canvas.Left="12.0017" Canvas.Top="33.0046" Stretch="Fill" Fill="#FF000000" Data="F1 M 12.0017,33.0046L 36.005,33.0046L 36.005,35.0049L 12.0017,35.0049L 12.0017,33.0046 Z "/>
+</Canvas>

resources/icons/src/appbar.align.left.xaml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Name="appbar_align_left" Width="48.0067" Height="48.0067" Clip="F1 M 0,0L 48.0067,0L 48.0067,48.0067L 0,48.0067L 0,0">
+	<Path Width="16.0023" Height="2.00033" Canvas.Left="12.0017" Canvas.Top="13.0018" Stretch="Fill" Fill="#FF000000" Data="F1 M 12.0017,13.0018L 28.004,13.0019L 28.004,15.0021L 12.0017,15.0021L 12.0017,13.0018 Z "/>
+	<Path Width="19.0024" Height="2.0003" Canvas.Left="12.0017" Canvas.Top="17.0024" Stretch="Fill" Fill="#FF000000" Data="F1 M 12.0017,17.0024L 31.004,17.0024L 31.004,19.0027L 12.0017,19.0026L 12.0017,17.0024 Z "/>
+	<Path Width="15.0023" Height="2.00034" Canvas.Left="12.0017" Canvas.Top="21.0029" Stretch="Fill" Fill="#FF000000" Data="F1 M 12.0017,21.0029L 27.004,21.003L 27.004,23.0033L 12.0017,23.0032L 12.0017,21.0029 Z "/>
+	<Path Width="21.0023" Height="2.00032" Canvas.Left="12.0017" Canvas.Top="25.0035" Stretch="Fill" Fill="#FF000000" Data="F1 M 12.0017,25.0035L 33.004,25.0035L 33.004,27.0038L 12.0017,27.0038L 12.0017,25.0035 Z "/>
+	<Path Width="17.0023" Height="2.00034" Canvas.Left="12.0017" Canvas.Top="29.004" Stretch="Fill" Fill="#FF000000" Data="F1 M 12.0017,29.004L 29.004,29.0041L 29.004,31.0044L 12.0017,31.0043L 12.0017,29.004 Z "/>
+	<Rectangle Width="20.0023" Height="2.00028" Canvas.Left="12.0017" Canvas.Top="33.0046" Stretch="Fill" Fill="#FF000000"/>
+</Canvas>

resources/icons/src/appbar.align.right.xaml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Name="appbar_align_right" Width="48.0067" Height="48.0067" Clip="F1 M 0,0L 48.0067,0L 48.0067,48.0067L 0,48.0067L 0,0">
+	<Path Width="16.0023" Height="2.00033" Canvas.Left="20.0027" Canvas.Top="13.0018" Stretch="Fill" Fill="#FF000000" Data="F1 M 36.005,13.0018L 20.0027,13.0019L 20.0027,15.0021L 36.005,15.0021L 36.005,13.0018 Z "/>
+	<Path Width="19.0023" Height="2.0003" Canvas.Left="17.0027" Canvas.Top="17.0024" Stretch="Fill" Fill="#FF000000" Data="F1 M 36.005,17.0024L 17.0027,17.0024L 17.0027,19.0027L 36.005,19.0026L 36.005,17.0024 Z "/>
+	<Path Width="15.0023" Height="2.00034" Canvas.Left="21.0027" Canvas.Top="21.0029" Stretch="Fill" Fill="#FF000000" Data="F1 M 36.005,21.0029L 21.0027,21.003L 21.0027,23.0033L 36.005,23.0032L 36.005,21.0029 Z "/>
+	<Path Width="21.0023" Height="2.00032" Canvas.Left="15.0027" Canvas.Top="25.0035" Stretch="Fill" Fill="#FF000000" Data="F1 M 36.005,25.0035L 15.0027,25.0035L 15.0027,27.0038L 36.005,27.0038L 36.005,25.0035 Z "/>
+	<Path Width="17.0023" Height="2.00032" Canvas.Left="19.0027" Canvas.Top="29.004" Stretch="Fill" Fill="#FF000000" Data="F1 M 36.005,29.004L 19.0027,29.0041L 19.0027,31.0044L 36.005,31.0043L 36.005,29.004 Z "/>
+	<Rectangle Width="20.0023" Height="2.00028" Canvas.Left="16.0027" Canvas.Top="33.0046" Stretch="Fill" Fill="#FF000000"/>
+</Canvas>