mirror of
https://github.com/koreader/koreader.git
synced 2025-08-10 00:52:38 +00:00
[UX] Improve ConfigDialog (#3443)
This commit is contained in:
Robert
@@ -1,3 +1,4 @@
|
||||
local Button = require("ui/widget/button")
|
||||
local Blitbuffer = require("ffi/blitbuffer")
|
||||
local BottomContainer = require("ui/widget/container/bottomcontainer")
|
||||
local CenterContainer = require("ui/widget/container/centercontainer")
|
||||
@@ -15,6 +16,7 @@ local IconButton = require("ui/widget/iconbutton")
|
||||
local ImageWidget = require("ui/widget/imagewidget")
|
||||
local InputContainer = require("ui/widget/container/inputcontainer")
|
||||
local LineWidget = require("ui/widget/linewidget")
|
||||
local RenderText = require("ui/rendertext")
|
||||
local RightContainer = require("ui/widget/container/rightcontainer")
|
||||
local Size = require("ui/size")
|
||||
local TextWidget = require("ui/widget/textwidget")
|
||||
@@ -144,20 +146,25 @@ function ConfigOption:init()
|
||||
-- make default styles
|
||||
local default_name_font_size = 20
|
||||
local default_item_font_size = 16
|
||||
local default_items_spacing = 30
|
||||
local default_items_spacing = 40
|
||||
local default_option_height = 50
|
||||
local default_option_padding = Size.padding.large
|
||||
local max_option_name_width = 0
|
||||
local txt_width = 0
|
||||
local padding_small = Size.padding.small
|
||||
local padding_button = Size.padding.button
|
||||
for c = 1, #self.options do
|
||||
local name_font_face = self.options[c].name_font_face and self.options[c].name_font_face or "cfont"
|
||||
local name_font_size = self.options[c].name_font_size and self.options[c].name_font_size or default_name_font_size
|
||||
local option_name_width = TextWidget:new{
|
||||
text = self.options[c].name_text,
|
||||
face = Font:getFace(name_font_face, name_font_size),
|
||||
}:getSize().w
|
||||
max_option_name_width = math.max(max_option_name_width, option_name_width)
|
||||
local text = self.options[c].name_text
|
||||
local face = Font:getFace(name_font_face, name_font_size)
|
||||
if text ~= nil then
|
||||
txt_width = RenderText:sizeUtf8Text(0, Screen:getWidth(), face, text).x
|
||||
end
|
||||
max_option_name_width = math.max(max_option_name_width, txt_width)
|
||||
end
|
||||
local default_name_align_right = math.max((max_option_name_width + Screen:scaleBySize(10))/Screen:getWidth(), 0.33)
|
||||
default_name_align_right = math.min(default_name_align_right, 0.5)
|
||||
local default_item_align_center = 1 - default_name_align_right
|
||||
|
||||
-- fill vertical group of config tab
|
||||
@@ -180,18 +187,38 @@ function ConfigOption:init()
|
||||
local option_height = Screen:scaleBySize(self.options[c].height and self.options[c].height or default_option_height)
|
||||
local item_spacing_width = Screen:scaleBySize(self.options[c].spacing and self.options[c].spacing or default_items_spacing)
|
||||
local enabled = true
|
||||
if item_align == 1.0 then
|
||||
name_align = 0
|
||||
end
|
||||
if name_align + item_align > 1 then
|
||||
name_align = 0.5
|
||||
item_align = 0.5
|
||||
end
|
||||
if self.options[c].enabled_func then
|
||||
enabled = self.options[c].enabled_func(self.config.configurable)
|
||||
end
|
||||
local horizontal_group = HorizontalGroup:new{}
|
||||
if self.options[c].name_text then
|
||||
local text = self.options[c].name_text
|
||||
local face = Font:getFace(name_font_face, name_font_size)
|
||||
local width_name_text = RenderText:sizeUtf8Text(0, Screen:getWidth(), face, text).x
|
||||
if math.floor(name_align * Screen:getWidth()) - 2*padding_small < width_name_text then
|
||||
text = RenderText:truncateTextByWidth(text, face, name_align * Screen:getWidth() - 2*padding_small)
|
||||
end
|
||||
|
||||
local option_name_container = RightContainer:new{
|
||||
dimen = Geom:new{ w = Screen:getWidth()*name_align, h = option_height},
|
||||
}
|
||||
local option_name = TextWidget:new{
|
||||
text = self.options[c].name_text,
|
||||
face = Font:getFace(name_font_face, name_font_size),
|
||||
fgcolor = Blitbuffer.gray(enabled and 1.0 or 0.5),
|
||||
local option_name = Button:new{
|
||||
text = text,
|
||||
bordersize = 0,
|
||||
face = face,
|
||||
enabled = enabled,
|
||||
padding = padding_small,
|
||||
text_font_face = name_font_face,
|
||||
text_font_size = name_font_size,
|
||||
text_font_bold = false,
|
||||
hold_callback = self.options[c].name_text_hold_callback,
|
||||
}
|
||||
table.insert(option_name_container, option_name)
|
||||
table.insert(horizontal_group, option_name_container)
|
||||
@@ -261,20 +288,28 @@ function ConfigOption:init()
|
||||
end
|
||||
if self.options[c].item_text then
|
||||
local items_count = #self.options[c].item_text
|
||||
local middle_index = math.ceil(items_count/2)
|
||||
local middle_item = OptionTextItem:new{
|
||||
TextWidget:new{
|
||||
text = self.options[c].item_text[middle_index],
|
||||
face = Font:getFace(item_font_face,
|
||||
option_items_fixed and item_font_size[middle_index]
|
||||
local items_width = 0
|
||||
for d = 1, #self.options[c].item_text do
|
||||
local item = OptionTextItem:new{
|
||||
TextWidget:new{
|
||||
text = self.options[c].item_text[d],
|
||||
face = Font:getFace(item_font_face,
|
||||
option_items_fixed and item_font_size[d]
|
||||
or item_font_size),
|
||||
}
|
||||
}
|
||||
}
|
||||
local max_item_spacing = (Screen:getWidth() * item_align -
|
||||
middle_item:getSize().w * items_count) / items_count
|
||||
items_width = items_width + item:getSize().w
|
||||
end
|
||||
local max_item_spacing = (Screen:getWidth() * item_align - items_width) / items_count
|
||||
local width = math.min(max_item_spacing, item_spacing_width)
|
||||
|
||||
if max_item_spacing < item_spacing_width / 2 then
|
||||
width = item_spacing_width / 2
|
||||
end
|
||||
local items_spacing = HorizontalSpan:new{
|
||||
width = math.min(max_item_spacing, item_spacing_width)
|
||||
width = width
|
||||
}
|
||||
local max_item_text_width = (Screen:getWidth() * item_align - items_count * width) / items_count
|
||||
for d = 1, #self.options[c].item_text do
|
||||
local option_item
|
||||
if option_items_fixed then
|
||||
@@ -284,18 +319,24 @@ function ConfigOption:init()
|
||||
face = Font:getFace(item_font_face, item_font_size[d]),
|
||||
fgcolor = Blitbuffer.gray(enabled and 1.0 or 0.5),
|
||||
},
|
||||
padding = Size.padding.button,
|
||||
padding = padding_button,
|
||||
color = d == current_item and Blitbuffer.gray(enabled and 1.0 or 0.5) or Blitbuffer.COLOR_WHITE,
|
||||
enabled = enabled,
|
||||
}
|
||||
else
|
||||
local text = self.options[c].item_text[d]
|
||||
local face = Font:getFace(item_font_face, item_font_size)
|
||||
local width_item_text = RenderText:sizeUtf8Text(0, Screen:getWidth(), face, text).x
|
||||
if max_item_text_width < width_item_text then
|
||||
text = RenderText:truncateTextByWidth(text, face, max_item_text_width)
|
||||
end
|
||||
option_item = OptionTextItem:new{
|
||||
TextWidget:new{
|
||||
text = self.options[c].item_text[d],
|
||||
face = Font:getFace(item_font_face, item_font_size),
|
||||
text = text,
|
||||
face = face,
|
||||
fgcolor = Blitbuffer.gray(enabled and 1.0 or 0.5),
|
||||
},
|
||||
padding = -Size.padding.button,
|
||||
padding = -padding_button,
|
||||
color = d == current_item and Blitbuffer.gray(enabled and 1.0 or 0.5) or Blitbuffer.COLOR_WHITE,
|
||||
enabled = enabled,
|
||||
}
|
||||
@@ -335,7 +376,7 @@ function ConfigOption:init()
|
||||
file = self.options[c].item_icons[d],
|
||||
dim = not enabled,
|
||||
},
|
||||
padding = -Size.padding.button,
|
||||
padding = -padding_button,
|
||||
color = d == current_item and Blitbuffer.gray(enabled and 1.0 or 0.5) or Blitbuffer.COLOR_WHITE,
|
||||
enabled = enabled,
|
||||
}
|
||||
@@ -356,9 +397,8 @@ function ConfigOption:init()
|
||||
end
|
||||
|
||||
if self.options[c].toggle then
|
||||
local max_toggle_width = Screen:getWidth() / 2
|
||||
local toggle_width = Screen:scaleBySize(self.options[c].width
|
||||
or 216)
|
||||
local max_toggle_width = Screen:getWidth() * 0.5
|
||||
local toggle_width = Screen:scaleBySize(self.options[c].width or max_toggle_width)
|
||||
local row_count = self.options[c].row_count or 1
|
||||
local toggle_height = Screen:scaleBySize(self.options[c].height
|
||||
or 30 * row_count)
|
||||
|
||||
@@ -66,11 +66,18 @@ function ToggleSwitch:init()
|
||||
w = self.width / self.n_pos,
|
||||
h = self.height / self.row_count,
|
||||
}
|
||||
local button_width = math.floor(self.width / self.n_pos)
|
||||
for i = 1, #self.toggle do
|
||||
local text = self.toggle[i]
|
||||
local face = Font:getFace(self.font_face, self.font_size)
|
||||
local txt_width = RenderText:sizeUtf8Text(0, Screen:getWidth(), face, text, nil, self.bold).x
|
||||
if button_width - Size.padding.default < txt_width then
|
||||
text = RenderText:truncateTextByWidth(text, face, button_width - Size.padding.default, nil, self.bold)
|
||||
end
|
||||
local label = ToggleLabel:new{
|
||||
align = "center",
|
||||
text = self.toggle[i],
|
||||
face = Font:getFace(self.font_face, self.font_size),
|
||||
text = text,
|
||||
face = face,
|
||||
}
|
||||
local content = CenterContainer:new{
|
||||
dimen = center_dimen,
|
||||
|
||||
Reference in New Issue
Block a user