From a6be301695cea6cb937f21c7a6b47c7930995faf Mon Sep 17 00:00:00 2001 From: Frans de Jonge Date: Wed, 13 Sep 2017 16:56:20 +0200 Subject: [PATCH] Added Size module --- .ci/script.sh | 2 +- frontend/apps/reader/skimtowidget.lua | 36 ++++--- frontend/ui/size.lua | 96 +++++++++++++++++++ frontend/ui/widget/bboxwidget.lua | 4 +- frontend/ui/widget/bookstatuswidget.lua | 29 +++--- frontend/ui/widget/button.lua | 8 +- frontend/ui/widget/buttondialog.lua | 7 +- frontend/ui/widget/buttondialogtitle.lua | 16 ++-- frontend/ui/widget/buttontable.lua | 9 +- frontend/ui/widget/configdialog.lua | 23 ++--- frontend/ui/widget/confirmbox.lua | 7 +- .../ui/widget/container/alphacontainer.lua | 4 +- .../ui/widget/container/framecontainer.lua | 11 +-- .../widget/container/underlinecontainer.lua | 8 +- frontend/ui/widget/datewidget.lua | 17 ++-- frontend/ui/widget/dictquicklookup.lua | 21 ++-- frontend/ui/widget/frontlightwidget.lua | 39 ++++---- frontend/ui/widget/imageviewer.lua | 13 +-- frontend/ui/widget/infomessage.lua | 4 +- frontend/ui/widget/inputdialog.lua | 17 ++-- frontend/ui/widget/keyvaluepage.lua | 17 ++-- frontend/ui/widget/linkbox.lua | 3 +- frontend/ui/widget/listview.lua | 14 +-- frontend/ui/widget/logindialog.lua | 7 +- frontend/ui/widget/menu.lua | 18 ++-- frontend/ui/widget/multiconfirmbox.lua | 7 +- frontend/ui/widget/multiinputdialog.lua | 9 +- frontend/ui/widget/networksetting.lua | 5 +- frontend/ui/widget/notification.lua | 5 +- frontend/ui/widget/numberpickerwidget.lua | 20 ++-- frontend/ui/widget/physicalkeyboard.lua | 13 +-- frontend/ui/widget/textboxwidget.lua | 3 +- frontend/ui/widget/textviewer.lua | 28 ++++-- frontend/ui/widget/timewidget.lua | 13 ++- frontend/ui/widget/toggleswitch.lua | 13 +-- frontend/ui/widget/touchmenu.lua | 24 +++-- frontend/ui/widget/verticalscrollbar.lua | 8 +- frontend/ui/widget/virtualkeyboard.lua | 11 ++- plugins/coverbrowser.koplugin/listmenu.lua | 7 +- plugins/coverbrowser.koplugin/mosaicmenu.lua | 6 +- plugins/goodreads.koplugin/goodreadsbook.lua | 25 ++--- .../statistics.koplugin/readerprogress.lua | 27 +++--- spec/unit/size_spec.lua | 31 ++++++ 43 files changed, 422 insertions(+), 263 deletions(-) create mode 100644 frontend/ui/size.lua create mode 100644 spec/unit/size_spec.lua diff --git a/.ci/script.sh b/.ci/script.sh index c8f937c82..7ede9ad0f 100755 --- a/.ci/script.sh +++ b/.ci/script.sh @@ -17,7 +17,7 @@ unscaled_size_check=$(grep -nr --include=*.lua --exclude=koptoptions.lua --exclu unscaled_size_check_geom=$(grep -E -nr --include=*.lua --exclude=gesturerange_spec.lua --exclude-dir=base --exclude-dir=*arm* 'Geom:new{.+ [wh] = [0-9]{1,4}' | grep -Ev '[wh] = 0' | grep -v '= [0-9]/[0-9]' | grep -v scaleBySize || true) if [ "${unscaled_size_check}" ] || [ "${unscaled_size_check_geom}" ]; then - echo -e "\\n${ANSI_RED}Warning: it looks like you might be using unscaled sizes.\\nIt is almost always preferable to defer to one of the predefined sizes in ui.elements.commonui in the following files:" + echo -e "\\n${ANSI_RED}Warning: it looks like you might be using unscaled sizes.\\nIt is almost always preferable to defer to one of the predefined sizes in ui.size in the following files:" echo "${unscaled_size_check}" echo "${unscaled_size_check_geom}" exit 1 diff --git a/frontend/apps/reader/skimtowidget.lua b/frontend/apps/reader/skimtowidget.lua index 47f636f44..a2bd57019 100644 --- a/frontend/apps/reader/skimtowidget.lua +++ b/frontend/apps/reader/skimtowidget.lua @@ -13,6 +13,7 @@ local InputContainer = require("ui/widget/container/inputcontainer") local LineWidget = require("ui/widget/linewidget") local OverlapGroup = require("ui/widget/overlapgroup") local ProgressWidget = require("ui/widget/progresswidget") +local Size = require("ui/size") local TextWidget = require("ui/widget/textwidget") local UIManager = require("ui/uimanager") local VerticalGroup = require("ui/widget/verticalgroup") @@ -29,11 +30,13 @@ local SkimToWidget = InputContainer:new{ function SkimToWidget:init() self.medium_font_face = Font:getFace("ffont") - self.screen_width = Screen:getSize().w - self.screen_height = Screen:getSize().h + self.screen_width = Screen:getWidth() + self.screen_height = Screen:getHeight() self.span = math.ceil(self.screen_height * 0.01) self.width = self.screen_width * 0.95 - self.button_bordersize = Screen:scaleBySize(2) + self.button_bordersize = Size.border.button + -- the buttons need some kind of separation but maybe I should just implement + -- margin_left and margin_right… self.button_margin = self.button_bordersize self.button_width = self.screen_width * 0.16 - (2*self.button_margin) if Device:hasKeys() then @@ -65,8 +68,8 @@ function SkimToWidget:init() self.page_count = self.document:getPageCount() self.skimto_title = FrameContainer:new{ - padding = Screen:scaleBySize(5), - margin = Screen:scaleBySize(2), + padding = Size.padding.default, + margin = Size.margin.default, bordersize = 0, TextWidget:new{ text = self.dialog_title, @@ -91,8 +94,8 @@ function SkimToWidget:init() table.insert(self.skimto_container, vertical_group) self.skimto_progress = FrameContainer:new{ - padding = Screen:scaleBySize(2), - margin = Screen:scaleBySize(2), + padding = Size.padding.button, + margin = Size.margin.small, bordersize = 0, self.skimto_container } @@ -100,7 +103,7 @@ function SkimToWidget:init() self.skimto_line = LineWidget:new{ dimen = Geom:new{ w = self.width, - h = Screen:scaleBySize(2), + h = Size.line.thick, } } self.skimto_bar = OverlapGroup:new{ @@ -196,8 +199,8 @@ function SkimToWidget:init() table.insert(vertical_group_control,padding_span) self.skimto_frame = FrameContainer:new{ - radius = Screen:scaleBySize(5), - bordersize = Screen:scaleBySize(3), + radius = Size.radius.window, + bordersize = Size.border.window, padding = 0, margin = 0, background = Blitbuffer.COLOR_WHITE, @@ -224,7 +227,7 @@ function SkimToWidget:init() }, FrameContainer:new{ bordersize = 0, - padding = Screen:scaleBySize(5), + padding = Size.padding.default, self.skimto_frame, } } @@ -250,12 +253,6 @@ function SkimToWidget:update() table.insert(vertical_group, progress_bar) table.insert(self.skimto_container, vertical_group) - self.skimto_progress = FrameContainer:new{ - padding = Screen:scaleBySize(2), - margin = Screen:scaleBySize(2), - bordersize = 0, - self.skimto_container - } local current_page_text = Button:new{ text = self.curr_page, bordersize = 0, @@ -285,8 +282,8 @@ function SkimToWidget:update() table.insert(vertical_group_control,padding_span) self.skimto_frame = FrameContainer:new{ - radius = Screen:scaleBySize(5), - bordersize = Screen:scaleBySize(3), + radius = Size.radius.window, + bordersize = Size.border.window, padding = 0, margin = 0, background = Blitbuffer.COLOR_WHITE, @@ -313,7 +310,6 @@ function SkimToWidget:update() }, FrameContainer:new{ bordersize = 0, - padding = Screen:scaleBySize(5), self.skimto_frame, } } diff --git a/frontend/ui/size.lua b/frontend/ui/size.lua new file mode 100644 index 000000000..2ddd164b6 --- /dev/null +++ b/frontend/ui/size.lua @@ -0,0 +1,96 @@ +--[[-- +This module provides a standardized set of sizes for use in widgets. + +There are values for borders, margins, paddings, radii, and lines. Have a look +at the code for full details. If you are considering to deviate from one of the +defaults, please take a second to consider: + +1. Why you want to differ in the first place. We consciously strive toward + consistency in the UI, which is typically valued higher than one pixel more + or less in a specific context. +2. If there really isn't anything close to what you want, whether it should be + added to the arsenal of default sizes rather than as a local exception. + +@usage + local Size = require("ui/size") + local frame -- just an example widget + frame = FrameContainer:new{ + radius = Size.radius.window, + bordersize = Size.border.window, + padding = Size.padding.default, + margin = Size.margin.default, + VerticalGroup:new{ + -- etc + } + } +]] + +local dbg = require("dbg") +local Screen = require("device").screen + +local Size = { + border = { + default = Screen:scaleBySize(2), + thin = Screen:scaleBySize(1), + button = Screen:scaleBySize(2), + window = Screen:scaleBySize(2), + }, + margin = { + default = Screen:scaleBySize(5), + tiny = Screen:scaleBySize(1), + small = Screen:scaleBySize(2), + title = Screen:scaleBySize(2), + button = 0, + }, + padding = { + default = Screen:scaleBySize(5), + tiny = Screen:scaleBySize(1), + small = Screen:scaleBySize(2), + large = Screen:scaleBySize(10), + button = Screen:scaleBySize(2), + fullscreen = Screen:scaleBySize(15), + }, + radius = { + default = Screen:scaleBySize(2), + window = Screen:scaleBySize(7), + button = Screen:scaleBySize(15), + }, + line = { + thin = Screen:scaleBySize(0.5), + medium = Screen:scaleBySize(1), + thick = Screen:scaleBySize(1.5), + }, + item = { + height_default = Screen:scaleBySize(30), + height_large = Screen:scaleBySize(50), + }, + span = { + horizontal_default = Screen:scaleBySize(10), + horizontal_small = Screen:scaleBySize(5), + vertical_default = Screen:scaleBySize(2), + vertical_large = Screen:scaleBySize(5), + }, +} + +if dbg.is_on then + local mt = { + __index = function(t, k) + local prop_value = rawget(t, k) + local prop_exists = prop_value ~= nil + if not prop_exists then + local warning = rawget(t, "_name") and string.format("Size.%s.%s", rawget(t, "_name"), k) + or string.format("Size.%s", k) + error("Size: this property does not exist: " .. warning) + end + assert(prop_exists) + return prop_value + end + } + setmetatable(Size, mt) + for el, table in pairs(Size) do + table._name = el + setmetatable(Size[el], mt) + end +end + +return Size diff --git a/frontend/ui/widget/bboxwidget.lua b/frontend/ui/widget/bboxwidget.lua index 69f318e91..5e0f5724d 100644 --- a/frontend/ui/widget/bboxwidget.lua +++ b/frontend/ui/widget/bboxwidget.lua @@ -8,13 +8,13 @@ local Event = require("ui/event") local Geom = require("ui/geometry") local GestureRange = require("ui/gesturerange") local Math = require("optmath") +local Size = require("ui/size") local UIManager = require("ui/uimanager") -local Screen = Device.screen local BBoxWidget = InputContainer:new{ page_bbox = nil, screen_bbox = nil, - linesize = Screen:scaleBySize(2), + linesize = Size.line.thick, fine_factor = 10, dimen = Geom:new(), } diff --git a/frontend/ui/widget/bookstatuswidget.lua b/frontend/ui/widget/bookstatuswidget.lua index d98e85da4..31e74ae03 100644 --- a/frontend/ui/widget/bookstatuswidget.lua +++ b/frontend/ui/widget/bookstatuswidget.lua @@ -15,6 +15,7 @@ local LeftContainer = require("ui/widget/container/leftcontainer") local LineWidget = require("ui/widget/linewidget") local OverlapGroup = require("ui/widget/overlapgroup") local ProgressWidget = require("ui/widget/progresswidget") +local Size = require("ui/size") local TextBoxWidget = require("ui/widget/textboxwidget") local TextWidget = require("ui/widget/textwidget") local TimeVal = require("ui/timeval") @@ -38,7 +39,7 @@ local stats_book = {} ["modified"] = "24.01.2016" },]] local BookStatusWidget = InputContainer:new{ - padding = Screen:scaleBySize(15), + padding = Size.padding.fullscreen, settings = nil, thumbnail = nil, props = nil, @@ -118,7 +119,7 @@ function BookStatusWidget:getStatusContent(width) return VerticalGroup:new{ align = "left", OverlapGroup:new{ - dimen = Geom:new{ w = width, h = Screen:scaleBySize(30) }, + dimen = Geom:new{ w = width, h = Size.item.height_default }, CloseButton:new{ window = self }, }, self:genBookInfoGroup(), @@ -132,7 +133,7 @@ function BookStatusWidget:getStatusContent(width) end function BookStatusWidget:genHeader(title) - local width, height = Screen:getWidth(), Screen:scaleBySize(35) + local width, height = Screen:getWidth(), Size.item.height_default local header_title = TextWidget:new{ text = title, @@ -148,13 +149,13 @@ function BookStatusWidget:genHeader(title) background = Blitbuffer.gray(0.2), dimen = Geom:new{ w = line_width, - h = 2, + h = Size.line.thick, } } } return VerticalGroup:new{ - VerticalSpan:new{ width = Screen:scaleBySize(25) }, + VerticalSpan:new{ width = Size.item.height_default }, HorizontalGroup:new{ align = "center", padding_span, @@ -165,7 +166,7 @@ function BookStatusWidget:genHeader(title) line_container, padding_span, }, - VerticalSpan:new{ width = Screen:scaleBySize(5) }, + VerticalSpan:new{ width = Size.span.vertical_large }, } end @@ -246,7 +247,7 @@ function BookStatusWidget:genBookInfoGroup() local text_author = TextWidget:new{ text = self.props.authors, face = self.small_font_face, - padding = Screen:scaleBySize(2), + padding = Size.padding.default } table.insert(book_meta_info_group, CenterContainer:new{ @@ -386,19 +387,19 @@ end function BookStatusWidget:genSummaryGroup(width) local height if Screen:getScreenMode() == "landscape" then - height = Screen:scaleBySize(60) + height = Screen:scaleBySize(80) else - height = Screen:scaleBySize(130) + height = Screen:scaleBySize(160) end - local text_padding = Screen:scaleBySize(5) + local text_padding = Size.padding.default self.input_note = InputText:new{ text = self.summary.note, face = self.medium_font_face, width = width - self.padding * 3, height = height * 0.75, scroll = true, - bordersize = Screen:scaleBySize(2), + bordersize = Size.border.default, focused = false, padding = text_padding, parent = self, @@ -406,7 +407,7 @@ function BookStatusWidget:genSummaryGroup(width) } return VerticalGroup:new{ - VerticalSpan:new{ width = Screen:scaleBySize(5) }, + VerticalSpan:new{ width = Size.span.vertical_large }, CenterContainer:new{ dimen = Geom:new{ w = width, h = height }, self.input_note @@ -508,7 +509,7 @@ end function BookStatusWidget:onSwitchFocus(inputbox) self.note_dialog = InputDialog:new{ - title = "Note", + title = _("Review"), input = self.input_note:getText(), input_hint = "", input_type = "text", @@ -523,7 +524,7 @@ function BookStatusWidget:onSwitchFocus(inputbox) end, }, { - text = _("OK"), + text = _("Save review"), is_enter_default = true, callback = function() self.input_note:setText(self.note_dialog:getInputText()) diff --git a/frontend/ui/widget/button.lua b/frontend/ui/widget/button.lua index 26b70ed6d..817d485d8 100644 --- a/frontend/ui/widget/button.lua +++ b/frontend/ui/widget/button.lua @@ -24,10 +24,10 @@ local Geom = require("ui/geometry") local GestureRange = require("ui/gesturerange") local ImageWidget = require("ui/widget/imagewidget") local InputContainer = require("ui/widget/container/inputcontainer") +local Size = require("ui/size") local TextWidget = require("ui/widget/textwidget") local UIManager = require("ui/uimanager") local _ = require("gettext") -local Screen = Device.screen local Button = InputContainer:new{ text = nil, -- mandatory @@ -36,10 +36,10 @@ local Button = InputContainer:new{ callback = nil, enabled = true, margin = 0, - bordersize = Screen:scaleBySize(3), + bordersize = Size.border.button, background = Blitbuffer.COLOR_WHITE, - radius = Screen:scaleBySize(15), - padding = Screen:scaleBySize(2), + radius = Size.radius.button, + padding = Size.padding.button, width = nil, max_width = nil, text_font_face = "cfont", diff --git a/frontend/ui/widget/buttondialog.lua b/frontend/ui/widget/buttondialog.lua index d3f1ebc57..4f04b37a3 100644 --- a/frontend/ui/widget/buttondialog.lua +++ b/frontend/ui/widget/buttondialog.lua @@ -6,6 +6,7 @@ local FrameContainer = require("ui/widget/container/framecontainer") local Geom = require("ui/geometry") local GestureRange = require("ui/gesturerange") local InputContainer = require("ui/widget/container/inputcontainer") +local Size = require("ui/size") local UIManager = require("ui/uimanager") local _ = require("gettext") local Screen = require("device").screen @@ -42,9 +43,9 @@ function ButtonDialog:init() show_parent = self, }, background = Blitbuffer.COLOR_WHITE, - bordersize = Screen:scaleBySize(2), - radius = Screen:scaleBySize(7), - padding = Screen:scaleBySize(2), + bordersize = Size.border.window, + radius = Size.radius.window, + padding = Size.padding.button, } } end diff --git a/frontend/ui/widget/buttondialogtitle.lua b/frontend/ui/widget/buttondialogtitle.lua index 72c3795e4..e2d968b86 100644 --- a/frontend/ui/widget/buttondialogtitle.lua +++ b/frontend/ui/widget/buttondialogtitle.lua @@ -8,6 +8,7 @@ local Geom = require("ui/geometry") local GestureRange = require("ui/gesturerange") local InputContainer = require("ui/widget/container/inputcontainer") local LineWidget = require("ui/widget/linewidget") +local Size = require("ui/size") local TextBoxWidget = require("ui/widget/textboxwidget") local VerticalGroup = require("ui/widget/verticalgroup") local UIManager = require("ui/uimanager") @@ -42,12 +43,13 @@ function ButtonDialogTitle:init() } } end + local vertical_span = VerticalSpan:new{ width = Size.span.vertical_default } self[1] = CenterContainer:new{ dimen = Screen:getSize(), FrameContainer:new{ VerticalGroup:new{ align = "center", - VerticalSpan:new{ width = Screen:scaleBySize(2) }, + vertical_span, TextBoxWidget:new{ text = self.title, width = Screen:getWidth() * 0.8 , @@ -55,14 +57,14 @@ function ButtonDialogTitle:init() bold = true, alignment = self.title_align or "left", }, - VerticalSpan:new{ width = Screen:scaleBySize(2) }, + vertical_span, LineWidget:new{ dimen = Geom:new{ w = Screen:getWidth() * 0.9, - h = Screen:scaleBySize(1), + h = Size.line.medium, } }, - VerticalSpan:new{ width = Screen:scaleBySize(2) }, + vertical_span, ButtonTable:new{ width = Screen:getWidth() * 0.9, buttons = self.buttons, @@ -70,9 +72,9 @@ function ButtonDialogTitle:init() }, }, background = Blitbuffer.COLOR_WHITE, - bordersize = Screen:scaleBySize(2), - radius = Screen:scaleBySize(7), - padding = Screen:scaleBySize(2), + bordersize = Size.border.window, + radius = Size.radius.window, + padding = Size.padding.button, } } end diff --git a/frontend/ui/widget/buttontable.lua b/frontend/ui/widget/buttontable.lua index ba4a430ff..c50aac0e2 100644 --- a/frontend/ui/widget/buttontable.lua +++ b/frontend/ui/widget/buttontable.lua @@ -4,6 +4,7 @@ local Device = require("device") local FocusManager = require("ui/widget/focusmanager") local HorizontalGroup = require("ui/widget/horizontalgroup") local LineWidget = require("ui/widget/linewidget") +local Size = require("ui/size") local VerticalGroup = require("ui/widget/verticalgroup") local VerticalSpan = require("ui/widget/verticalspan") local Geom = require("ui/geometry") @@ -17,8 +18,8 @@ local ButtonTable = FocusManager:new{ {text="Cancel", enabled=false, callback=nil}, }, }, - sep_width = Screen:scaleBySize(1), - padding = Screen:scaleBySize(2), + sep_width = Size.line.medium, + padding = Size.padding.button, zero_sep = false, button_font_face = "cfont", @@ -84,7 +85,7 @@ end function ButtonTable:addHorizontalSep() table.insert(self.container, - VerticalSpan:new{ width = Screen:scaleBySize(2) }) + VerticalSpan:new{ width = Size.span.vertical_default }) table.insert(self.container, LineWidget:new{ background = Blitbuffer.COLOR_GREY, dimen = Geom:new{ @@ -93,7 +94,7 @@ function ButtonTable:addHorizontalSep() } }) table.insert(self.container, - VerticalSpan:new{ width = Screen:scaleBySize(2) }) + VerticalSpan:new{ width = Size.span.vertical_default }) end function ButtonTable:onSelectByKeyPress() diff --git a/frontend/ui/widget/configdialog.lua b/frontend/ui/widget/configdialog.lua index 255e6ef66..8dad08fe9 100644 --- a/frontend/ui/widget/configdialog.lua +++ b/frontend/ui/widget/configdialog.lua @@ -16,6 +16,7 @@ local ImageWidget = require("ui/widget/imagewidget") local InputContainer = require("ui/widget/container/inputcontainer") local LineWidget = require("ui/widget/linewidget") local RightContainer = require("ui/widget/container/rightcontainer") +local Size = require("ui/size") local TextWidget = require("ui/widget/textwidget") local ToggleSwitch = require("ui/widget/toggleswitch") local UIManager = require("ui/uimanager") @@ -145,7 +146,7 @@ function ConfigOption:init() local default_item_font_size = 16 local default_items_spacing = 30 local default_option_height = 50 - local default_option_padding = 15 + local default_option_padding = Size.padding.large local max_option_name_width = 0 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" @@ -156,13 +157,13 @@ function ConfigOption:init() }:getSize().w max_option_name_width = math.max(max_option_name_width, option_name_width) end - local default_name_align_right = math.max((max_option_name_width + Screen:scaleByDPI(10))/Screen:getWidth(), 0.33) + local default_name_align_right = math.max((max_option_name_width + Screen:scaleBySize(10))/Screen:getWidth(), 0.33) local default_item_align_center = 1 - default_name_align_right -- fill vertical group of config tab local vertical_group = VerticalGroup:new{} table.insert(vertical_group, VerticalSpan:new{ - width = Screen:scaleBySize(default_option_padding), + width = default_option_padding, }) -- @TODO restore setting when there are more advanced settings --local show_advanced = G_reader_settings:readSetting("show_advanced") or false @@ -177,7 +178,7 @@ function ConfigOption:init() local item_font_face = self.options[c].item_font_face and self.options[c].item_font_face or "cfont" local item_font_size = self.options[c].item_font_size and self.options[c].item_font_size or default_item_font_size local option_height = Screen:scaleBySize(self.options[c].height and self.options[c].height or default_option_height) - local item_spacing_with = self.options[c].spacing and self.options[c].spacing or default_items_spacing + local item_spacing_width = Screen:scaleBySize(self.options[c].spacing and self.options[c].spacing or default_items_spacing) local enabled = true if self.options[c].enabled_func then enabled = self.options[c].enabled_func(self.config.configurable) @@ -272,7 +273,7 @@ function ConfigOption:init() local max_item_spacing = (Screen:getWidth() * item_align - middle_item:getSize().w * items_count) / items_count local items_spacing = HorizontalSpan:new{ - width = math.min(max_item_spacing, Screen:scaleBySize(item_spacing_with)) + width = math.min(max_item_spacing, item_spacing_width) } for d = 1, #self.options[c].item_text do local option_item @@ -283,7 +284,7 @@ function ConfigOption:init() face = Font:getFace(item_font_face, item_font_size[d]), fgcolor = Blitbuffer.gray(enabled and 1.0 or 0.5), }, - padding = Screen:scaleBySize(3), + padding = Size.padding.button, color = d == current_item and Blitbuffer.gray(enabled and 1.0 or 0.5) or Blitbuffer.COLOR_WHITE, enabled = enabled, } @@ -294,7 +295,7 @@ function ConfigOption:init() face = Font:getFace(item_font_face, item_font_size), fgcolor = Blitbuffer.gray(enabled and 1.0 or 0.5), }, - padding = -3, + padding = -Size.padding.button, color = d == current_item and Blitbuffer.gray(enabled and 1.0 or 0.5) or Blitbuffer.COLOR_WHITE, enabled = enabled, } @@ -326,7 +327,7 @@ function ConfigOption:init() local max_item_spacing = (Screen:getWidth() * item_align - first_item:getSize().w * items_count) / items_count local items_spacing = HorizontalSpan:new{ - width = math.min(max_item_spacing, Screen:scaleBySize(item_spacing_with)) + width = math.min(max_item_spacing, item_spacing_width) } for d = 1, #self.options[c].item_icons do local option_item = OptionIconItem:new{ @@ -334,7 +335,7 @@ function ConfigOption:init() file = self.options[c].item_icons[d], dim = not enabled, }, - padding = -2, + padding = -Size.padding.button, color = d == current_item and Blitbuffer.gray(enabled and 1.0 or 0.5) or Blitbuffer.COLOR_WHITE, enabled = enabled, } @@ -412,8 +413,8 @@ local MenuBar = FrameContainer:new{ background = Blitbuffer.COLOR_WHITE, } function MenuBar:init() - local icon_sep_width = Screen:scaleBySize(2) - local line_thickness = Screen:scaleBySize(2) + local icon_sep_width = Size.padding.button + local line_thickness = Size.line.thick local config_options = self.config_dialog.config_options local menu_items = {} local icons_width = 0 diff --git a/frontend/ui/widget/confirmbox.lua b/frontend/ui/widget/confirmbox.lua index 79a601eb1..baa3f9d68 100644 --- a/frontend/ui/widget/confirmbox.lua +++ b/frontend/ui/widget/confirmbox.lua @@ -29,6 +29,7 @@ local HorizontalGroup = require("ui/widget/horizontalgroup") local HorizontalSpan = require("ui/widget/horizontalspan") local ImageWidget = require("ui/widget/imagewidget") local InputContainer = require("ui/widget/container/inputcontainer") +local Size = require("ui/size") local TextBoxWidget = require("ui/widget/textboxwidget") local UIManager = require("ui/uimanager") local VerticalGroup = require("ui/widget/verticalgroup") @@ -45,8 +46,8 @@ local ConfirmBox = InputContainer:new{ ok_callback = function() end, cancel_callback = function() end, other_buttons = nil, - margin = Screen:scaleBySize(5), - padding = Screen:scaleBySize(5), + margin = Size.margin.default, + padding = Size.padding.default, } function ConfirmBox:init() @@ -73,7 +74,7 @@ function ConfirmBox:init() file = "resources/info-i.png", scale_for_dpi = true, }, - HorizontalSpan:new{ width = Screen:scaleBySize(10) }, + HorizontalSpan:new{ width = Size.span.horizontal_default }, TextBoxWidget:new{ text = self.text, face = self.face, diff --git a/frontend/ui/widget/container/alphacontainer.lua b/frontend/ui/widget/container/alphacontainer.lua index 9a05c941d..40b930b31 100644 --- a/frontend/ui/widget/container/alphacontainer.lua +++ b/frontend/ui/widget/container/alphacontainer.lua @@ -10,9 +10,9 @@ Example: FrameContainer:new{ background = Blitbuffer.COLOR_WHITE, - bordersize = Screen:scaleBySize(1), + bordersize = Size.border.default, margin = 0, - padding = Screen:scaleBySize(1) + padding = Size.padding.default } } --]] diff --git a/frontend/ui/widget/container/framecontainer.lua b/frontend/ui/widget/container/framecontainer.lua index a2daa3fba..6bf519fa2 100644 --- a/frontend/ui/widget/container/framecontainer.lua +++ b/frontend/ui/widget/container/framecontainer.lua @@ -6,8 +6,8 @@ Example: local frame frame = FrameContainer:new{ - radius = Screen:scaleBySize(8), - bordersize = Screen:scaleBySize(3), + radius = Size.radius.window, + bordersize = Size.border.window, padding = 0, margin = 0, background = Blitbuffer.COLOR_WHITE, @@ -19,18 +19,17 @@ Example: --]] local Blitbuffer = require("ffi/blitbuffer") -local Device = require("device") local Geom = require("ui/geometry") +local Size = require("ui/size") local WidgetContainer = require("ui/widget/container/widgetcontainer") -local Screen = Device.screen local FrameContainer = WidgetContainer:new{ background = nil, color = Blitbuffer.COLOR_BLACK, margin = 0, radius = 0, - bordersize = Screen:scaleBySize(2), - padding = Screen:scaleBySize(5), + bordersize = Size.border.window, + padding = Size.padding.default, width = nil, height = nil, invert = false, diff --git a/frontend/ui/widget/container/underlinecontainer.lua b/frontend/ui/widget/container/underlinecontainer.lua index d5c163e92..e61579421 100644 --- a/frontend/ui/widget/container/underlinecontainer.lua +++ b/frontend/ui/widget/container/underlinecontainer.lua @@ -6,12 +6,12 @@ a line under its child node. local Blitbuffer = require("ffi/blitbuffer") local Geom = require("ui/geometry") +local Size = require("ui/size") local WidgetContainer = require("ui/widget/container/widgetcontainer") -local Screen = require("device").screen local UnderlineContainer = WidgetContainer:new{ - linesize = Screen:scaleBySize(2), - padding = Screen:scaleBySize(1), + linesize = Size.line.thick, + padding = Size.padding.tiny, -- TODO: shouldn't this default to black instead? color = Blitbuffer.COLOR_WHITE, vertical_align = "top", @@ -25,7 +25,7 @@ function UnderlineContainer:getContentSize() local contentSize = self[1]:getSize() return Geom:new{ w = contentSize.w, - h = contentSize.h + self.linesize + self.padding + h = contentSize.h + self.linesize + 2*self.padding } end diff --git a/frontend/ui/widget/datewidget.lua b/frontend/ui/widget/datewidget.lua index 91eff7634..acb5d4846 100644 --- a/frontend/ui/widget/datewidget.lua +++ b/frontend/ui/widget/datewidget.lua @@ -12,6 +12,7 @@ local InputContainer = require("ui/widget/container/inputcontainer") local LineWidget = require("ui/widget/linewidget") local OverlapGroup = require("ui/widget/overlapgroup") local NumberPickerWidget = require("ui/widget/numberpickerwidget") +local Size = require("ui/size") local TextBoxWidget = require("ui/widget/textboxwidget") local TextWidget = require("ui/widget/textwidget") local UIManager = require("ui/uimanager") @@ -34,8 +35,8 @@ local DateWidget = InputContainer:new{ function DateWidget:init() self.medium_font_face = Font:getFace("ffont") self.light_bar = {} - self.screen_width = Screen:getSize().w - self.screen_height = Screen:getSize().h + self.screen_width = Screen:getWidth() + self.screen_height = Screen:getHeight() self.width = self.screen_width * 0.95 if Device:hasKeys() then self.key_events = { @@ -105,8 +106,8 @@ function DateWidget:update() } local date_title = FrameContainer:new{ - padding = Screen:scaleBySize(5), - margin = Screen:scaleBySize(2), + padding = Size.padding.default, + margin = Size.margin.default, bordersize = 0, TextWidget:new{ text = self.title_text, @@ -118,7 +119,7 @@ function DateWidget:update() local date_line = LineWidget:new{ dimen = Geom:new{ w = self.width, - h = Screen:scaleBySize(2), + h = Size.line.thick, } } local date_bar = OverlapGroup:new{ @@ -159,8 +160,8 @@ function DateWidget:update() } self.date_frame = FrameContainer:new{ - radius = 5, - bordersize = 3, + radius = Size.radius.window, + bordersize = Size.border.window, padding = 0, margin = 0, background = Blitbuffer.COLOR_WHITE, @@ -188,7 +189,7 @@ function DateWidget:update() }, FrameContainer:new{ bordersize = 0, - padding = Screen:scaleBySize(5), + padding = Size.padding.default, self.date_frame, } } diff --git a/frontend/ui/widget/dictquicklookup.lua b/frontend/ui/widget/dictquicklookup.lua index fc9f59e0a..20893e53d 100644 --- a/frontend/ui/widget/dictquicklookup.lua +++ b/frontend/ui/widget/dictquicklookup.lua @@ -15,6 +15,7 @@ local LeftContainer = require("ui/widget/container/leftcontainer") local LineWidget = require("ui/widget/linewidget") local OverlapGroup = require("ui/widget/overlapgroup") local ScrollTextWidget = require("ui/widget/scrolltextwidget") +local Size = require("ui/size") local TextWidget = require("ui/widget/textwidget") local UIManager = require("ui/uimanager") local VerticalGroup = require("ui/widget/verticalgroup") @@ -44,10 +45,10 @@ local DictQuickLookup = InputContainer:new{ -- box of highlighted word, quick lookup window tries to not hide the word word_box = nil, - title_padding = Screen:scaleBySize(5), - title_margin = Screen:scaleBySize(2), - word_padding = Screen:scaleBySize(5), - word_margin = Screen:scaleBySize(2), + title_padding = Size.padding.default, + title_margin = Size.margin.title, + word_padding = Size.padding.default, + word_margin = Size.margin.default, -- alt padding/margin for wiki to compensate for reduced font size wiki_word_padding = Screen:scaleBySize(7), wiki_word_margin = Screen:scaleBySize(3), @@ -325,7 +326,7 @@ function DictQuickLookup:update() buttons = { { { - text = "<<", + text = "◁◁", enabled = self:isPrevDictAvaiable(), callback = function() self:changeToPrevDict() @@ -344,7 +345,7 @@ function DictQuickLookup:update() end, }, { - text = ">>", + text = "▷▷", enabled = self:isNextDictAvaiable(), callback = function() self:changeToNextDict() @@ -404,7 +405,7 @@ function DictQuickLookup:update() local title_bar = LineWidget:new{ dimen = Geom:new{ w = button_table:getSize().w + self.button_padding, - h = Screen:scaleBySize(2), + h = Size.line.thick, } } @@ -418,8 +419,8 @@ function DictQuickLookup:update() } self.dict_frame = FrameContainer:new{ - radius = Screen:scaleBySize(8), - bordersize = Screen:scaleBySize(3), + radius = Size.radius.window, + bordersize = Size.border.window, padding = 0, margin = 0, background = Blitbuffer.COLOR_WHITE, @@ -458,7 +459,7 @@ function DictQuickLookup:update() dimen = self.region, FrameContainer:new{ bordersize = 0, - padding = Screen:scaleBySize(5), + padding = Size.padding.default, self.dict_frame, } } diff --git a/frontend/ui/widget/frontlightwidget.lua b/frontend/ui/widget/frontlightwidget.lua index da859d12a..daa314e87 100644 --- a/frontend/ui/widget/frontlightwidget.lua +++ b/frontend/ui/widget/frontlightwidget.lua @@ -12,6 +12,7 @@ local HorizontalSpan = require("ui/widget/horizontalspan") local InputContainer = require("ui/widget/container/inputcontainer") local LineWidget = require("ui/widget/linewidget") local OverlapGroup = require("ui/widget/overlapgroup") +local Size = require("ui/size") local TextBoxWidget = require("ui/widget/textboxwidget") local TextWidget = require("ui/widget/textwidget") local UIManager = require("ui/uimanager") @@ -31,8 +32,8 @@ local FrontLightWidget = InputContainer:new{ function FrontLightWidget:init() self.medium_font_face = Font:getFace("ffont") self.light_bar = {} - self.screen_width = Screen:getSize().w - self.screen_height = Screen:getSize().h + self.screen_width = Screen:getWidth() + self.screen_height = Screen:getHeight() self.span = math.ceil(self.screen_height * 0.01) self.width = self.screen_width * 0.95 local powerd = Device:getPowerDevice() @@ -51,9 +52,8 @@ function FrontLightWidget:init() self.fl_prog_button = Button:new{ text = "", - bordersize = Screen:scaleBySize(3), radius = 0, - margin = Screen:scaleBySize(1), + margin = Size.margin.tiny, enabled = true, width = self.button_width, show_parent = self, @@ -124,7 +124,7 @@ function FrontLightWidget:setProgress(num, step) for i = step_min, step_num do table.insert(fl_group, self.fl_prog_button:new{ text= "", - margin = Screen:scaleBySize(1), + margin = Size.margin.tiny, preselect = true, width = self.button_width, callback = function() @@ -145,8 +145,7 @@ function FrontLightWidget:setProgress(num, step) end local button_minus = Button:new{ text = "-1", - bordersize = Screen:scaleBySize(2), - margin = Screen:scaleBySize(2), + margin = Size.margin.small, radius = 0, enabled = enable_button_minus, width = self.screen_width * 0.20, @@ -155,8 +154,7 @@ function FrontLightWidget:setProgress(num, step) } local button_plus = Button:new{ text = "+1", - bordersize = Screen:scaleBySize(2), - margin = Screen:scaleBySize(2), + margin = Size.margin.small, radius = 0, enabled = enable_button_plus, width = self.screen_width * 0.20, @@ -171,8 +169,7 @@ function FrontLightWidget:setProgress(num, step) } local button_min = Button:new{ text = _("Min"), - bordersize = Screen:scaleBySize(2), - margin = Screen:scaleBySize(2), + margin = Size.margin.small, radius = 0, enabled = true, width = self.screen_width * 0.20, @@ -181,8 +178,7 @@ function FrontLightWidget:setProgress(num, step) } local button_max = Button:new{ text = _("Max"), - bordersize = Screen:scaleBySize(2), - margin = Screen:scaleBySize(2), + margin = Size.margin.small, radius = 0, enabled = true, width = self.screen_width * 0.20, @@ -191,8 +187,7 @@ function FrontLightWidget:setProgress(num, step) } local button_toggle = Button:new{ text = _("Toggle"), - bordersize = Screen:scaleBySize(2), - margin = Screen:scaleBySize(2), + margin = Size.margin.small, radius = 0, enabled = true, width = self.screen_width * 0.20, @@ -234,8 +229,7 @@ end function FrontLightWidget:update() -- header self.light_title = FrameContainer:new{ - padding = Screen:scaleBySize(5), - margin = Screen:scaleBySize(2), + margin = Size.margin.title, bordersize = 0, TextWidget:new{ text = _("Frontlight"), @@ -245,8 +239,8 @@ function FrontLightWidget:update() }, } local light_level = FrameContainer:new{ - padding = Screen:scaleBySize(2), - margin = Screen:scaleBySize(2), + padding = Size.padding.button, + margin = Size.margin.small, bordersize = 0, self:generateProgressGroup(self.screen_width * 0.95, self.screen_height * 0.20, self.fl_cur, self.one_step) @@ -254,7 +248,7 @@ function FrontLightWidget:update() local light_line = LineWidget:new{ dimen = Geom:new{ w = self.width, - h = Screen:scaleBySize(2), + h = Size.line.thick, } } self.light_bar = OverlapGroup:new{ @@ -266,8 +260,8 @@ function FrontLightWidget:update() CloseButton:new{ window = self, }, } self.light_frame = FrameContainer:new{ - radius = Screen:scaleBySize(5), - bordersize = Screen:scaleBySize(3), + radius = Size.radius.window, + bordersize = Size.border.window, padding = 0, margin = 0, background = Blitbuffer.COLOR_WHITE, @@ -293,7 +287,6 @@ function FrontLightWidget:update() }, FrameContainer:new{ bordersize = 0, - padding = Screen:scaleBySize(5), self.light_frame, } } diff --git a/frontend/ui/widget/imageviewer.lua b/frontend/ui/widget/imageviewer.lua index 7a5f785f7..9e4af2125 100644 --- a/frontend/ui/widget/imageviewer.lua +++ b/frontend/ui/widget/imageviewer.lua @@ -15,6 +15,7 @@ local ImageWidget = require("ui/widget/imagewidget") local InputContainer = require("ui/widget/container/inputcontainer") local LineWidget = require("ui/widget/linewidget") local OverlapGroup = require("ui/widget/overlapgroup") +local Size = require("ui/size") local TextWidget = require("ui/widget/textwidget") local VerticalGroup = require("ui/widget/verticalgroup") local WidgetContainer = require("ui/widget/container/widgetcontainer") @@ -43,10 +44,10 @@ local ImageViewer = InputContainer:new{ rotated = false, title_face = Font:getFace("x_smalltfont"), - title_padding = Screen:scaleBySize(5), - title_margin = Screen:scaleBySize(2), - image_padding = Screen:scaleBySize(2), - button_padding = Screen:scaleBySize(14), + title_padding = Size.padding.default, + title_margin = Size.margin.title, + image_padding = Size.margin.small, + button_padding = Size.padding.large, -- sensitivity for hold (trigger full refresh) vs pan (move image) pan_threshold = Screen:scaleBySize(5), @@ -196,7 +197,7 @@ function ImageViewer:update() title_sep = LineWidget:new{ dimen = Geom:new{ w = self.width, - h = Screen:scaleBySize(2), + h = Size.line.thick, } } -- adjust height available to our image @@ -268,7 +269,7 @@ function ImageViewer:update() dimen = self.region, FrameContainer:new{ bordersize = 0, - padding = Screen:scaleBySize(5), + padding = Size.padding.default, self.main_frame, } } diff --git a/frontend/ui/widget/infomessage.lua b/frontend/ui/widget/infomessage.lua index b64afab0f..ff31a3b97 100644 --- a/frontend/ui/widget/infomessage.lua +++ b/frontend/ui/widget/infomessage.lua @@ -34,6 +34,7 @@ local HorizontalSpan = require("ui/widget/horizontalspan") local ImageWidget = require("ui/widget/imagewidget") local InputContainer = require("ui/widget/container/inputcontainer") local ScrollTextWidget = require("ui/widget/scrolltextwidget") +local Size = require("ui/size") local TextBoxWidget = require("ui/widget/textboxwidget") local UIManager = require("ui/uimanager") local WidgetContainer = require("ui/widget/container/widgetcontainer") @@ -129,12 +130,11 @@ function InfoMessage:init() self[1] = CenterContainer:new{ dimen = Screen:getSize(), FrameContainer:new{ - margin = Screen:scaleBySize(2), background = Blitbuffer.COLOR_WHITE, HorizontalGroup:new{ align = "center", image_widget, - HorizontalSpan:new{ width = (self.show_icon and Screen:scaleBySize(10) or 0) }, + HorizontalSpan:new{ width = (self.show_icon and Size.span.horizontal_default or 0) }, text_widget, } } diff --git a/frontend/ui/widget/inputdialog.lua b/frontend/ui/widget/inputdialog.lua index cf1e2e625..4a1a299b6 100644 --- a/frontend/ui/widget/inputdialog.lua +++ b/frontend/ui/widget/inputdialog.lua @@ -57,6 +57,7 @@ local InputContainer = require("ui/widget/container/inputcontainer") local InputText = require("ui/widget/inputtext") local LineWidget = require("ui/widget/linewidget") local RenderText = require("ui/rendertext") +local Size = require("ui/size") local TextBoxWidget = require("ui/widget/textboxwidget") local TextWidget = require("ui/widget/textwidget") local VerticalGroup = require("ui/widget/verticalgroup") @@ -82,11 +83,11 @@ local InputDialog = InputContainer:new{ description_face = Font:getFace("x_smallinfofont"), input_face = Font:getFace("x_smallinfofont"), - title_padding = Screen:scaleBySize(5), - title_margin = Screen:scaleBySize(2), - input_padding = Screen:scaleBySize(10), - input_margin = Screen:scaleBySize(10), - button_padding = Screen:scaleBySize(14), + title_padding = Size.padding.default, + title_margin = Size.margin.title, + input_padding = Size.padding.large, + input_margin = Size.margin.default, + button_padding = Size.padding.large, } function InputDialog:init() @@ -158,13 +159,13 @@ function InputDialog:init() self.title_bar = LineWidget:new{ dimen = Geom:new{ - w = self.button_table:getSize().w + self.button_padding, - h = Screen:scaleBySize(2), + w = self.button_table:getSize().w + 2*self.button_padding, + h = Size.line.thick, } } self.dialog_frame = FrameContainer:new{ - radius = Screen:scaleBySize(8), + radius = Size.radius.window, padding = 0, margin = 0, background = Blitbuffer.COLOR_WHITE, diff --git a/frontend/ui/widget/keyvaluepage.lua b/frontend/ui/widget/keyvaluepage.lua index e208e5b92..819b94087 100644 --- a/frontend/ui/widget/keyvaluepage.lua +++ b/frontend/ui/widget/keyvaluepage.lua @@ -35,6 +35,7 @@ local LeftContainer = require("ui/widget/container/leftcontainer") local LineWidget = require("ui/widget/linewidget") local OverlapGroup = require("ui/widget/overlapgroup") local RenderText = require("ui/rendertext") +local Size = require("ui/size") local TextViewer = require("ui/widget/textviewer") local TextWidget = require("ui/widget/textwidget") local UIManager = require("ui/uimanager") @@ -74,7 +75,7 @@ function KeyValueTitle:init() }) -- page count and separation line self.page_cnt = FrameContainer:new{ - padding = Screen:scaleBySize(4), + padding = Size.padding.default, margin = 0, bordersize = 0, background = Blitbuffer.COLOR_WHITE, @@ -87,16 +88,16 @@ function KeyValueTitle:init() }, } self.title_bottom = OverlapGroup:new{ - dimen = { w = self.width, h = Screen:scaleBySize(2) }, + dimen = { w = self.width, h = Size.line.thick }, LineWidget:new{ - dimen = Geom:new{ w = self.width, h = Screen:scaleBySize(2) }, + dimen = Geom:new{ w = self.width, h = Size.line.thick }, background = Blitbuffer.COLOR_GREY, style = "solid", }, self.page_cnt, } table.insert(self, self.title_bottom) - table.insert(self, VerticalSpan:new{ width = Screen:scaleBySize(5) }) + table.insert(self, VerticalSpan:new{ width = Size.span.vertical_large }) end function KeyValueTitle:setPageCount(curr, total) @@ -139,7 +140,7 @@ function KeyValueItem:init() } end - local frame_padding = Screen:scaleBySize(8) + local frame_padding = Size.padding.default local frame_internal_width = self.width - frame_padding * 2 local key_w = frame_internal_width / 2 local value_w = frame_internal_width / 2 @@ -321,9 +322,9 @@ function KeyValuePage:init() self.page_info, } - local padding = Screen:scaleBySize(10) + local padding = Size.padding.large self.item_width = self.dimen.w - 2 * padding - self.item_height = Screen:scaleBySize(30) + self.item_height = Size.item.height_default -- setup title bar self.title_bar = KeyValueTitle:new{ title = self.title, @@ -418,7 +419,7 @@ function KeyValuePage:_populateItems() background = Blitbuffer.COLOR_LIGHT_GREY, dimen = Geom:new{ w = self.item_width, - h = Screen:scaleBySize(2) + h = Size.line.thick }, style = "solid", }) diff --git a/frontend/ui/widget/linkbox.lua b/frontend/ui/widget/linkbox.lua index 13f66252b..4bb753f06 100644 --- a/frontend/ui/widget/linkbox.lua +++ b/frontend/ui/widget/linkbox.lua @@ -3,6 +3,7 @@ local Device = require("device") local Geom = require("ui/geometry") local GestureRange = require("ui/gesturerange") local InputContainer = require("ui/widget/container/inputcontainer") +local Size = require("ui/size") local UIManager = require("ui/uimanager") local Screen = Device.screen @@ -10,7 +11,7 @@ local LinkBox = InputContainer:new{ box = nil, color = Blitbuffer.COLOR_GREY, radius = 0, - bordersize = Screen:scaleBySize(2), + bordersize = Size.line.medium, } function LinkBox:init() diff --git a/frontend/ui/widget/listview.lua b/frontend/ui/widget/listview.lua index 4afea562b..3ea3ec961 100644 --- a/frontend/ui/widget/listview.lua +++ b/frontend/ui/widget/listview.lua @@ -33,17 +33,17 @@ Example: } Note that ListView is created mainly to be used as a building block for other -widgets like NetworkSetting, so they can share the same pagination code. +widgets like @{ui.widget.networksetting|NetworkSetting}, so they can share the same pagination code. ]] -local InputContainer = require("ui/widget/container/inputcontainer") -local FrameContainer = require("ui/widget/container/framecontainer") -local VerticalGroup = require("ui/widget/verticalgroup") -local GestureRange = require("ui/gesturerange") local Blitbuffer = require("ffi/blitbuffer") local Device = require("device") -local Screen = Device.screen +local FrameContainer = require("ui/widget/container/framecontainer") local Geom = require("ui/geometry") +local GestureRange = require("ui/gesturerange") +local InputContainer = require("ui/widget/container/inputcontainer") +local Size = require("ui/size") +local VerticalGroup = require("ui/widget/verticalgroup") local ListView = InputContainer:new{ width = nil, @@ -68,7 +68,7 @@ function ListView:init() } end - local padding = self.padding or Screen:scaleBySize(10) + local padding = self.padding or Size.padding.large self.item_height = self.item_height or self.items[1]:getSize().h self.item_width = self.dimen.w - 2 * padding self.items_per_page = math.floor(self.height / self.item_height) diff --git a/frontend/ui/widget/logindialog.lua b/frontend/ui/widget/logindialog.lua index 935e5a61f..a1b60c40b 100644 --- a/frontend/ui/widget/logindialog.lua +++ b/frontend/ui/widget/logindialog.lua @@ -1,9 +1,14 @@ +--[[-- +This widget displays a login dialog with a username and password. +]] + local Blitbuffer = require("ffi/blitbuffer") local CenterContainer = require("ui/widget/container/centercontainer") local FrameContainer = require("ui/widget/container/framecontainer") local Geom = require("ui/geometry") local InputDialog = require("ui/widget/inputdialog") local InputText = require("ui/widget/inputtext") +local Size = require("ui/size") local UIManager = require("ui/uimanager") local VerticalGroup = require("ui/widget/verticalgroup") local _ = require("gettext") @@ -41,7 +46,7 @@ function LoginDialog:init() } self.dialog_frame = FrameContainer:new{ - radius = Screen:scaleBySize(8), + radius = Size.radius.window, padding = 0, margin = 0, background = Blitbuffer.COLOR_WHITE, diff --git a/frontend/ui/widget/menu.lua b/frontend/ui/widget/menu.lua index 3869a3204..72492ecf2 100644 --- a/frontend/ui/widget/menu.lua +++ b/frontend/ui/widget/menu.lua @@ -1,3 +1,7 @@ +--[[-- +Widget that displays a shortcut icon for menu item. +--]] + local Blitbuffer = require("ffi/blitbuffer") local BottomContainer = require("ui/widget/container/bottomcontainer") local Button = require("ui/widget/button") @@ -16,6 +20,7 @@ local LeftContainer = require("ui/widget/container/leftcontainer") local OverlapGroup = require("ui/widget/overlapgroup") local RenderText = require("ui/rendertext") local RightContainer = require("ui/widget/container/rightcontainer") +local Size = require("ui/size") local TextWidget = require("ui/widget/textwidget") local UIManager = require("ui/uimanager") local UnderlineContainer = require("ui/widget/container/underlinecontainer") @@ -29,13 +34,10 @@ local Input = Device.input local Screen = Device.screen local getMenuText = require("util").getMenuText ---[[ -Widget that displays a shortcut icon for menu item ---]] local ItemShortCutIcon = WidgetContainer:new{ dimen = Geom:new{ w = Screen:scaleBySize(22), h = Screen:scaleBySize(22) }, key = nil, - bordersize = Screen:scaleBySize(2), + bordersize = Size.border.default, radius = 0, style = "square", } @@ -245,13 +247,13 @@ function MenuItem:init() padding = 0, HorizontalGroup:new{ align = "center", - HorizontalSpan:new{ width = Screen:scaleBySize(5) }, + HorizontalSpan:new{ width = Size.span.horizontal_small }, ItemShortCutIcon:new{ dimen = shortcut_icon_dimen, key = self.shortcut, style = self.shortcut_style, }, - HorizontalSpan:new{ width = Screen:scaleBySize(10) }, + HorizontalSpan:new{ width = Size.span.horizontal_default }, self._underline_container } } @@ -335,7 +337,7 @@ local Menu = FocusManager:new{ width = nil, -- height will be calculated according to item number if not given height = nil, - header_padding = Screen:scaleBySize(10), + header_padding = Size.padding.large, dimen = Geom:new{}, item_table = {}, item_shortcuts = { @@ -477,7 +479,7 @@ function Menu:init() self.page_return_arrow:hide() self.return_button = HorizontalGroup:new{ HorizontalSpan:new{ - width = Screen:scaleBySize(5), + width = Size.span.horizontal_small, }, self.page_return_arrow, } diff --git a/frontend/ui/widget/multiconfirmbox.lua b/frontend/ui/widget/multiconfirmbox.lua index aed5c3ff8..cbe2343d2 100644 --- a/frontend/ui/widget/multiconfirmbox.lua +++ b/frontend/ui/widget/multiconfirmbox.lua @@ -25,6 +25,7 @@ local HorizontalGroup = require("ui/widget/horizontalgroup") local HorizontalSpan = require("ui/widget/horizontalspan") local ImageWidget = require("ui/widget/imagewidget") local InputContainer = require("ui/widget/container/inputcontainer") +local Size = require("ui/size") local TextBoxWidget = require("ui/widget/textboxwidget") local UIManager = require("ui/uimanager") local VerticalGroup = require("ui/widget/verticalgroup") @@ -42,8 +43,8 @@ local MultiConfirmBox = InputContainer:new{ choice1_callback = function() end, choice2_callback = function() end, cancel_callback = function() end, - margin = Screen:scaleBySize(5), - padding = Screen:scaleBySize(5), + margin = Size.margin.default, + padding = Size.padding.default, } function MultiConfirmBox:init() @@ -52,7 +53,7 @@ function MultiConfirmBox:init() ImageWidget:new{ file = "resources/info-i.png" }, - HorizontalSpan:new{ width = Screen:scaleBySize(10) }, + HorizontalSpan:new{ width = Size.span.horizontal_default }, TextBoxWidget:new{ text = self.text, face = self.face, diff --git a/frontend/ui/widget/multiinputdialog.lua b/frontend/ui/widget/multiinputdialog.lua index e6e460174..d3ecdf633 100644 --- a/frontend/ui/widget/multiinputdialog.lua +++ b/frontend/ui/widget/multiinputdialog.lua @@ -6,6 +6,7 @@ local FrameContainer = require("ui/widget/container/framecontainer") local Geom = require("ui/geometry") local InputDialog = require("ui/widget/inputdialog") local InputText = require("ui/widget/inputtext") +local Size = require("ui/size") local TextBoxWidget = require("ui/widget/textboxwidget") local UIManager = require("ui/uimanager") local VerticalGroup = require("ui/widget/verticalgroup") @@ -18,8 +19,8 @@ local MultiInputDialog = InputDialog:extend{ field = {}, field_hint = {}, fields = {}, - description_padding = Screen:scaleBySize(5), - description_margin = Screen:scaleBySize(2), + description_padding = Size.padding.default, + description_margin = Size.margin.small, } function MultiInputDialog:init() @@ -84,8 +85,8 @@ function MultiInputDialog:init() }) self.dialog_frame = FrameContainer:new{ - radius = Screen:scaleBySize(8), - bordersize = Screen:scaleBySize(3), + radius = Size.radius.window, + bordersize = Size.border.window, padding = 0, margin = 0, background = Blitbuffer.COLOR_WHITE, diff --git a/frontend/ui/widget/networksetting.lua b/frontend/ui/widget/networksetting.lua index 27036d661..07948432f 100644 --- a/frontend/ui/widget/networksetting.lua +++ b/frontend/ui/widget/networksetting.lua @@ -48,6 +48,7 @@ local ListView = require("ui/widget/listview") local RightContainer = require("ui/widget/container/rightcontainer") local NetworkMgr = require("ui/network/manager") local OverlapGroup = require("ui/widget/overlapgroup") +local Size = require("ui/size") local TextWidget = require("ui/widget/textwidget") local UIManager = require("ui/uimanager") local VerticalGroup = require("ui/widget/verticalgroup") @@ -119,7 +120,7 @@ function NetworkItem:init() wifi_icon_path, self.info.signal_quality + 25 - self.info.signal_quality % 25) end - local horizontal_space = HorizontalSpan:new{width = Screen:scaleBySize(8)} + local horizontal_space = HorizontalSpan:new{width = Size.span.horizontal_default} self.content_container = OverlapGroup:new{ dimen = self.dimen:copy(), LeftContainer:new{ @@ -419,7 +420,7 @@ function NetworkSetting:init() self.popup = FrameContainer:new{ background = Blitbuffer.COLOR_WHITE, padding = 0, - bordersize = Screen:scaleBySize(3), + bordersize = Size.border.window, VerticalGroup:new{ align = "left", self.pagination, diff --git a/frontend/ui/widget/notification.lua b/frontend/ui/widget/notification.lua index 50835d5c3..0c6110fad 100644 --- a/frontend/ui/widget/notification.lua +++ b/frontend/ui/widget/notification.lua @@ -9,6 +9,7 @@ local Font = require("ui/font") local FrameContainer = require("ui/widget/container/framecontainer") local Geom = require("ui/geometry") local InputContainer = require("ui/widget/container/inputcontainer") +local Size = require("ui/size") local TextWidget = require("ui/widget/textwidget") local UIManager = require("ui/uimanager") local Input = Device.input @@ -18,8 +19,8 @@ local Notification = InputContainer:new{ face = Font:getFace("x_smallinfofont"), text = "Null Message", timeout = nil, - margin = Screen:scaleBySize(5), - padding = Screen:scaleBySize(5), + margin = Size.margin.default, + padding = Size.padding.default, } function Notification:init() diff --git a/frontend/ui/widget/numberpickerwidget.lua b/frontend/ui/widget/numberpickerwidget.lua index bdecb7bf3..9257f320e 100644 --- a/frontend/ui/widget/numberpickerwidget.lua +++ b/frontend/ui/widget/numberpickerwidget.lua @@ -7,6 +7,7 @@ local Font = require("ui/font") local InputContainer = require("ui/widget/container/inputcontainer") local TextWidget = require("ui/widget/textboxwidget") local RenderText = require("ui/rendertext") +local Size = require("ui/size") local UIManager = require("ui/uimanager") local VerticalGroup = require("ui/widget/verticalgroup") local VerticalSpan = require("ui/widget/verticalspan") @@ -14,7 +15,7 @@ local _ = require("gettext") local Screen = Device.screen local NumberPickerWidget = InputContainer:new{ - spinner_face = Font:getFace("x_smalltfont",24), + spinner_face = Font:getFace("smalltfont"), precision = "%02d", width = nil, height = nil, @@ -30,8 +31,8 @@ local NumberPickerWidget = InputContainer:new{ } function NumberPickerWidget:init() - self.screen_width = Screen:getSize().w - self.screen_height = Screen:getSize().h + self.screen_width = Screen:getWidth() + self.screen_height = Screen:getHeight() if self.width == nil then self.width = self.screen_width * 0.2 end @@ -45,11 +46,12 @@ function NumberPickerWidget:init() end function NumberPickerWidget:paintWidget() - + local bordersize = Size.border.default + local margin = Size.margin.default local button_up = Button:new{ text = "▲", - bordersize = 2, - margin = 2, + bordersize = bordersize, + margin = margin, radius = 0, text_font_size = 24, width = self.width, @@ -71,8 +73,8 @@ function NumberPickerWidget:paintWidget() } local button_down = Button:new{ text = "▼", - bordersize = 2, - margin = 2, + bordersize = bordersize, + margin = margin, radius = 0, text_font_size = 24, width = self.width, @@ -127,7 +129,7 @@ function NumberPickerWidget:update() local widget_spinner = self:paintWidget() self.frame = FrameContainer:new{ bordersize = 0, - padding = Screen:scaleBySize(5), + padding = Size.padding.default, CenterContainer:new{ align = "center", dimen = Geom:new{ diff --git a/frontend/ui/widget/physicalkeyboard.lua b/frontend/ui/widget/physicalkeyboard.lua index 0a9c22058..20e4a6d29 100644 --- a/frontend/ui/widget/physicalkeyboard.lua +++ b/frontend/ui/widget/physicalkeyboard.lua @@ -8,6 +8,7 @@ local Geom = require("ui/geometry") local HorizontalGroup = require("ui/widget/horizontalgroup") local HorizontalSpan = require("ui/widget/horizontalspan") local InputContainer = require("ui/widget/container/inputcontainer") +local Size = require("ui/size") local TextWidget = require("ui/widget/textwidget") local TopContainer = require("ui/widget/container/topcontainer") local VerticalGroup = require("ui/widget/verticalgroup") @@ -27,7 +28,7 @@ local PhysicalNumericKey = WidgetContainer:new{ width = nil, height = nil, - bordersize = Screen:scaleBySize(2), + bordersize = Size.border.button, face = Font:getFace("infont"), pkey_face = Font:getFace("infont", 14), } @@ -41,7 +42,7 @@ function PhysicalNumericKey:init() margin = 0, bordersize = self.bordersize, background = Blitbuffer.COLOR_WHITE, - radius = Screen:scaleBySize(5), + radius = Size.radius.default, padding = 0, CenterContainer:new{ dimen = Geom:new{ @@ -69,10 +70,10 @@ end local PhysicalKeyboard = InputContainer:new{ is_always_active = true, inputbox = nil, -- expect ui/widget/inputtext instance - bordersize = Screen:scaleBySize(2), - padding = Screen:scaleBySize(2), + bordersize = Size.border.button, + padding = Size.padding.button, height = math.max(Screen:getWidth(), Screen:getHeight())*0.33, - key_padding = Screen:scaleBySize(6), + key_padding = Size.padding.default, } function PhysicalKeyboard:init() @@ -124,7 +125,7 @@ end function PhysicalKeyboard:setupNumericMappingUI() local key_rows = VerticalGroup:new{} - local key_margin = Screen:scaleBySize(1) + local key_margin = Size.margin.tiny local row_len = #self.mapping[1] local base_key_width = math.floor((self.width - row_len*(self.key_padding+2*key_margin) - 2*self.padding)/10) local base_key_height = math.floor((self.height - self.key_padding - 2*self.padding)/4) diff --git a/frontend/ui/widget/textboxwidget.lua b/frontend/ui/widget/textboxwidget.lua index 8ea06bc3e..9445380ca 100644 --- a/frontend/ui/widget/textboxwidget.lua +++ b/frontend/ui/widget/textboxwidget.lua @@ -16,6 +16,7 @@ local Blitbuffer = require("ffi/blitbuffer") local Geom = require("ui/geometry") local LineWidget = require("ui/widget/linewidget") local RenderText = require("ui/rendertext") +local Size = require("ui/size") local TimeVal = require("ui/timeval") local Widget = require("ui/widget/widget") local logger = require("logger") @@ -45,7 +46,7 @@ function TextBoxWidget:init() self.line_height_px = (1 + self.line_height) * self.face.size self.cursor_line = LineWidget:new{ dimen = Geom:new{ - w = Screen:scaleBySize(1), + w = Size.line.medium, h = self.line_height_px, } } diff --git a/frontend/ui/widget/textviewer.lua b/frontend/ui/widget/textviewer.lua index 596cef028..9129e28a9 100644 --- a/frontend/ui/widget/textviewer.lua +++ b/frontend/ui/widget/textviewer.lua @@ -1,5 +1,12 @@ ---[[ -Display some text in scrollable view +--[[-- +Displays some text in a scrollable view. + +@usage + local textviewer = TextViewer:new{ + title = _("I can scroll!"), + text = _("I'll need to be longer than this example to scroll."), + } + UIManager:show(textviewer) ]] local Blitbuffer = require("ffi/blitbuffer") local ButtonTable = require("ui/widget/buttontable") @@ -14,6 +21,7 @@ local InputContainer = require("ui/widget/container/inputcontainer") local LineWidget = require("ui/widget/linewidget") local OverlapGroup = require("ui/widget/overlapgroup") local ScrollTextWidget = require("ui/widget/scrolltextwidget") +local Size = require("ui/size") local TextBoxWidget = require("ui/widget/textboxwidget") local UIManager = require("ui/uimanager") local VerticalGroup = require("ui/widget/verticalgroup") @@ -31,11 +39,11 @@ local TextViewer = InputContainer:new{ title_face = Font:getFace("x_smalltfont"), text_face = Font:getFace("x_smallinfofont"), - title_padding = Screen:scaleBySize(5), - title_margin = Screen:scaleBySize(2), - text_padding = Screen:scaleBySize(10), - text_margin = Screen:scaleBySize(2), - button_padding = Screen:scaleBySize(14), + title_padding = Size.padding.default, + title_margin = Size.margin.title, + text_padding = Size.padding.large, + text_margin = Size.margin.small, + button_padding = Size.padding.large, } function TextViewer:init() @@ -112,7 +120,7 @@ function TextViewer:init() local separator = LineWidget:new{ dimen = Geom:new{ w = self.width, - h = Screen:scaleBySize(2), + h = Size.line.thick, } } @@ -132,7 +140,7 @@ function TextViewer:init() buttons = self.buttons_table end local button_table = ButtonTable:new{ - width = self.width - self.button_padding, + width = self.width - 2*self.button_padding, button_font_face = "cfont", button_font_size = 20, buttons = buttons, @@ -158,7 +166,7 @@ function TextViewer:init() } self.frame = FrameContainer:new{ - radius = Screen:scaleBySize(8), + radius = Size.radius.window, padding = 0, margin = 0, background = Blitbuffer.COLOR_WHITE, diff --git a/frontend/ui/widget/timewidget.lua b/frontend/ui/widget/timewidget.lua index 42662b2a4..5b66de785 100644 --- a/frontend/ui/widget/timewidget.lua +++ b/frontend/ui/widget/timewidget.lua @@ -12,6 +12,7 @@ local InputContainer = require("ui/widget/container/inputcontainer") local LineWidget = require("ui/widget/linewidget") local OverlapGroup = require("ui/widget/overlapgroup") local NumberPickerWidget = require("ui/widget/numberpickerwidget") +local Size = require("ui/size") local TextBoxWidget = require("ui/widget/textboxwidget") local TextWidget = require("ui/widget/textwidget") local UIManager = require("ui/uimanager") @@ -33,8 +34,8 @@ local TimeWidget = InputContainer:new{ function TimeWidget:init() self.medium_font_face = Font:getFace("ffont") self.light_bar = {} - self.screen_width = Screen:getSize().w - self.screen_height = Screen:getSize().h + self.screen_width = Screen:getWidth() + self.screen_height = Screen:getHeight() self.width = self.screen_width * 0.95 if Device:hasKeys() then self.key_events = { @@ -91,8 +92,7 @@ function TimeWidget:update() } local time_title = FrameContainer:new{ - padding = Screen:scaleBySize(5), - margin = Screen:scaleBySize(2), + margin = Size.margin.small, bordersize = 0, TextWidget:new{ text = self.title_text, @@ -104,7 +104,7 @@ function TimeWidget:update() local time_line = LineWidget:new{ dimen = Geom:new{ w = self.width, - h = Screen:scaleBySize(2), + h = Size.line.thick, } } local time_bar = OverlapGroup:new{ @@ -144,7 +144,7 @@ function TimeWidget:update() } self.time_frame = FrameContainer:new{ - radius = Screen:scaleBySize(5), + radius = Size.radius.window, padding = 0, margin = 0, background = Blitbuffer.COLOR_WHITE, @@ -172,7 +172,6 @@ function TimeWidget:update() }, FrameContainer:new{ bordersize = 0, - padding = Screen:scaleBySize(5), self.time_frame, } } diff --git a/frontend/ui/widget/toggleswitch.lua b/frontend/ui/widget/toggleswitch.lua index d6938c5a3..8b80ed0d0 100644 --- a/frontend/ui/widget/toggleswitch.lua +++ b/frontend/ui/widget/toggleswitch.lua @@ -15,6 +15,7 @@ local HorizontalGroup = require("ui/widget/horizontalgroup") local InputContainer = require("ui/widget/container/inputcontainer") local FrameContainer = require("ui/widget/container/framecontainer") local RenderText = require("ui/rendertext") +local Size = require("ui/size") local TextWidget = require("ui/widget/textwidget") local UIManager = require("ui/uimanager") local VerticalGroup = require("ui/widget/verticalgroup") @@ -33,7 +34,7 @@ end local ToggleSwitch = InputContainer:new{ width = Screen:scaleBySize(216), - height = Screen:scaleBySize(30), + height = Size.item.height_default, bgcolor = Blitbuffer.COLOR_WHITE, -- unfocused item color fgcolor = Blitbuffer.COLOR_GREY, -- focused item color font_face = "cfont", @@ -50,9 +51,9 @@ function ToggleSwitch:init() self.toggle_frame = FrameContainer:new{ background = Blitbuffer.COLOR_WHITE, color = Blitbuffer.COLOR_GREY, - radius = Screen:scaleBySize(7), - bordersize = Screen:scaleBySize(1), - padding = Screen:scaleBySize(2), + radius = Size.radius.window, + bordersize = Size.border.thin, + padding = Size.padding.small, dim = not self.enabled, } @@ -79,8 +80,8 @@ function ToggleSwitch:init() background = Blitbuffer.COLOR_WHITE, color = Blitbuffer.COLOR_GREY, margin = 0, - radius = Screen:scaleBySize(5), - bordersize = Screen:scaleBySize(1), + radius = Size.radius.window, + bordersize = Size.border.thin, padding = 0, content, } diff --git a/frontend/ui/widget/touchmenu.lua b/frontend/ui/widget/touchmenu.lua index 5e5014b0f..ffcaede99 100644 --- a/frontend/ui/widget/touchmenu.lua +++ b/frontend/ui/widget/touchmenu.lua @@ -1,3 +1,6 @@ +--[[-- +TouchMenu widget for hierarchical menus. +]] local Blitbuffer = require("ffi/blitbuffer") local Button = require("ui/widget/button") local CenterContainer = require("ui/widget/container/centercontainer") @@ -14,6 +17,7 @@ local InputContainer = require("ui/widget/container/inputcontainer") local LeftContainer = require("ui/widget/container/leftcontainer") local LineWidget = require("ui/widget/linewidget") local RightContainer = require("ui/widget/container/rightcontainer") +local Size = require("ui/size") local TextWidget = require("ui/widget/textwidget") local UIManager = require("ui/uimanager") local VerticalGroup = require("ui/widget/verticalgroup") @@ -155,7 +159,7 @@ local TouchMenuBar = InputContainer:new{ } function TouchMenuBar:init() - local icon_sep_width = Screen:scaleBySize(2) + local icon_sep_width = Size.span.vertical_default local icons_sep_width = icon_sep_width * (#self.icons + 1) -- we assume all icons are of the same width local tmp_ib = IconButton:new{icon_file = self.icons[1]} @@ -197,7 +201,7 @@ function TouchMenuBar:init() self.bar_sep = LineWidget:new{ dimen = Geom:new{ w = self.width, - h = Screen:scaleBySize(2), + h = Size.line.thick, }, empty_segments = { { @@ -307,9 +311,9 @@ local TouchMenu = InputContainer:new{ -- for returnning in multi-level menus item_table_stack = nil, item_table = nil, - item_height = Screen:scaleBySize(50), - bordersize = Screen:scaleBySize(2), - padding = Screen:scaleBySize(5), + item_height = Size.item.height_large, + bordersize = Size.border.default, + padding = Size.padding.default, fface = Font:getFace("ffont"), width = nil, height = nil, @@ -403,7 +407,7 @@ function TouchMenu:init() end, } local footer_width = self.width - self.padding*2 - self.bordersize*2 - local footer_height = up_button:getSize().h + Screen:scaleBySize(2) + local footer_height = up_button:getSize().h + Size.line.thick self.footer = HorizontalGroup:new{ LeftContainer:new{ dimen = Geom:new{ w = footer_width*0.33, h = footer_height}, @@ -431,16 +435,16 @@ function TouchMenu:init() self.item_width = self.width - self.padding*2 - self.bordersize*2 self.split_line = HorizontalGroup:new{ -- pad with 10 pixel to align with the up arrow in footer - HorizontalSpan:new{width = Screen:scaleBySize(10)}, + HorizontalSpan:new{width = Size.span.horizontal_default}, LineWidget:new{ background = Blitbuffer.gray(0.33), dimen = Geom:new{ - w = self.item_width - 20, - h = Screen:scaleByDPI(1), + w = self.item_width - Screen:scaleBySize(20), + h = Size.line.medium, } } } - self.footer_top_margin = VerticalSpan:new{width = Screen:scaleBySize(2)} + self.footer_top_margin = VerticalSpan:new{width = Size.span.vertical_default} self.bar:switchToTab(self.last_index or 1) end diff --git a/frontend/ui/widget/verticalscrollbar.lua b/frontend/ui/widget/verticalscrollbar.lua index 08d80ac98..d2d661d90 100644 --- a/frontend/ui/widget/verticalscrollbar.lua +++ b/frontend/ui/widget/verticalscrollbar.lua @@ -1,15 +1,15 @@ local Blitbuffer = require("ffi/blitbuffer") local Geom = require("ui/geometry") +local Size = require("ui/size") local Widget = require("ui/widget/widget") -local Screen = require("device").screen local VerticalScrollBar = Widget:new{ enable = true, low = 0, high = 1, - width = Screen:scaleBySize(6), - height = Screen:scaleBySize(50), - bordersize = Screen:scaleBySize(1), + width = Size.padding.default, + height = Size.item.height_large, + bordersize = Size.border.thin, bordercolor = Blitbuffer.COLOR_BLACK, radius = 0, rectcolor = Blitbuffer.COLOR_BLACK, diff --git a/frontend/ui/widget/virtualkeyboard.lua b/frontend/ui/widget/virtualkeyboard.lua index ea9626932..6af24dde5 100644 --- a/frontend/ui/widget/virtualkeyboard.lua +++ b/frontend/ui/widget/virtualkeyboard.lua @@ -10,6 +10,7 @@ local HorizontalGroup = require("ui/widget/horizontalgroup") local HorizontalSpan = require("ui/widget/horizontalspan") local ImageWidget = require("ui/widget/imagewidget") local InputContainer = require("ui/widget/container/inputcontainer") +local Size = require("ui/size") local TextWidget = require("ui/widget/textwidget") local UIManager = require("ui/uimanager") local VerticalGroup = require("ui/widget/verticalgroup") @@ -27,7 +28,7 @@ local VirtualKey = InputContainer:new{ width = nil, height = math.max(Screen:getWidth(), Screen:getHeight())*0.33, - bordersize = Screen:scaleBySize(2), + bordersize = Size.border.default, face = Font:getFace("infont"), } @@ -62,7 +63,7 @@ function VirtualKey:init() margin = 0, bordersize = self.bordersize, background = Blitbuffer.COLOR_WHITE, - radius = Screen:scaleBySize(5), + radius = Size.radius.window, padding = 0, CenterContainer:new{ dimen = Geom:new{ @@ -159,9 +160,9 @@ local VirtualKeyboard = InputContainer:new{ width = Screen:scaleBySize(600), height = nil, - bordersize = Screen:scaleBySize(2), - padding = Screen:scaleBySize(2), - key_padding = Screen:scaleBySize(6), + bordersize = Size.border.default, + padding = Size.padding.small, + key_padding = Size.padding.default, } local lang_to_keyboard_layout = { diff --git a/plugins/coverbrowser.koplugin/listmenu.lua b/plugins/coverbrowser.koplugin/listmenu.lua index 9abb3c369..239503a2f 100644 --- a/plugins/coverbrowser.koplugin/listmenu.lua +++ b/plugins/coverbrowser.koplugin/listmenu.lua @@ -15,6 +15,7 @@ local LeftContainer = require("ui/widget/container/leftcontainer") local LineWidget = require("ui/widget/linewidget") local OverlapGroup = require("ui/widget/overlapgroup") local RightContainer = require("ui/widget/container/rightcontainer") +local Size = require("ui/size") local TextBoxWidget = require("ui/widget/textboxwidget") local TextWidget = require("ui/widget/textwidget") local UIManager = require("ui/uimanager") @@ -46,7 +47,7 @@ local corner_mark = ImageWidget:new{ local ItemShortCutIcon = WidgetContainer:new{ dimen = Geom:new{ w = Screen:scaleBySize(22), h = Screen:scaleBySize(22) }, key = nil, - bordersize = Screen:scaleBySize(2), + bordersize = Size.border.default, radius = 0, style = "square", } @@ -699,7 +700,7 @@ end function ListMenu:_updateItemsBuildUI() -- Build our list table.insert(self.item_group, LineWidget:new{ - dimen = Geom:new{ w = self.width, h = Screen:scaleBySize(1) }, + dimen = Geom:new{ w = self.width, h = Size.line.thin }, background = Blitbuffer.COLOR_GREY, style = "solid", }) @@ -740,7 +741,7 @@ function ListMenu:_updateItemsBuildUI() } table.insert(self.item_group, item_tmp) table.insert(self.item_group, LineWidget:new{ - dimen = Geom:new{ w = self.width, h = Screen:scaleBySize(1) }, + dimen = Geom:new{ w = self.width, h = Size.line.thin }, background = Blitbuffer.COLOR_GREY, style = "solid", }) diff --git a/plugins/coverbrowser.koplugin/mosaicmenu.lua b/plugins/coverbrowser.koplugin/mosaicmenu.lua index 575524cb5..f9a7bb8c5 100644 --- a/plugins/coverbrowser.koplugin/mosaicmenu.lua +++ b/plugins/coverbrowser.koplugin/mosaicmenu.lua @@ -44,7 +44,7 @@ local corner_mark = ImageWidget:new{ local ItemShortCutIcon = WidgetContainer:new{ dimen = Geom:new{ w = Screen:scaleBySize(22), h = Screen:scaleBySize(22) }, key = nil, - bordersize = Screen:scaleBySize(2), + bordersize = Size.border.default, radius = 0, style = "square", } @@ -106,8 +106,8 @@ local FakeCover = FrameContainer:new{ title_font_min = 10, filename_font_max = 10, filename_font_min = 8, - top_pad = Screen:scaleBySize(5), - bottom_pad = Screen:scaleBySize(5), + top_pad = Size.padding.default, + bottom_pad = Size.padding.default, sizedec_step = Screen:scaleBySize(2), -- speeds up a bit if we don't do all font sizes initial_sizedec = 0, } diff --git a/plugins/goodreads.koplugin/goodreadsbook.lua b/plugins/goodreads.koplugin/goodreadsbook.lua index a2b715aea..f4aeac26a 100644 --- a/plugins/goodreads.koplugin/goodreadsbook.lua +++ b/plugins/goodreads.koplugin/goodreadsbook.lua @@ -12,6 +12,7 @@ local LeftContainer = require("ui/widget/container/leftcontainer") local LineWidget = require("ui/widget/linewidget") local OverlapGroup = require("ui/widget/overlapgroup") local Pic = require("ffi/pic") +local Size = require("ui/size") local TextWidget = require("ui/widget/textwidget") local VerticalGroup = require("ui/widget/verticalgroup") local VerticalSpan = require("ui/widget/verticalspan") @@ -23,15 +24,15 @@ local T = require("ffi/util").template local _ = require("gettext") local GoodreadsBook = InputContainer:new{ - padding = Screen:scaleBySize(15), + padding = Size.padding.fullscreen, } function GoodreadsBook:init() self.small_font_face = Font:getFace("smallffont") self.medium_font_face = Font:getFace("ffont") self.large_font_face = Font:getFace("largeffont") - self.screen_width = Screen:getSize().w - self.screen_height = Screen:getSize().h + self.screen_width = Screen:getWidth() + self.screen_height = Screen:getHeight() UIManager:setDirty(self, function() return "ui", self.dimen end) @@ -49,7 +50,7 @@ function GoodreadsBook:getStatusContent(width) return VerticalGroup:new{ align = "left", OverlapGroup:new{ - dimen = Geom:new{ w = width, h = Screen:scaleBySize(30) }, + dimen = Geom:new{ w = width, h = Size.item.height_default }, CloseButton:new{ window = self }, }, self:genHeader(_("Book info")), @@ -73,13 +74,13 @@ function GoodreadsBook:genHeader(title) background = Blitbuffer.gray(0.2), dimen = Geom:new{ w = line_width, - h = 2, + h = Size.line.thick, } } } return VerticalGroup:new{ - VerticalSpan:new{ width = Screen:scaleBySize(5) }, + VerticalSpan:new{ width = Size.span.vertical_large }, HorizontalGroup:new{ align = "center", padding_span, @@ -90,7 +91,7 @@ function GoodreadsBook:genHeader(title) line_container, padding_span, }, - VerticalSpan:new{ width = Screen:scaleBySize(5) }, + VerticalSpan:new{ width = Size.span.vertical_large }, } end @@ -112,7 +113,7 @@ function GoodreadsBook:genBookInfoGroup() TextBoxWidget:new{ text = self.dates.title, face = self.medium_font_face, - padding = Screen:scaleBySize(2), + padding = Size.padding.small, alignment = "center", width = width, }, @@ -142,7 +143,7 @@ function GoodreadsBook:genBookInfoGroup() local text_series = TextWidget:new{ text = T(_("Series: %1"), self.dates.series), face = self.small_font_face, - padding = Screen:scaleBySize(2), + padding = Size.padding.small, } table.insert(book_meta_info_group, CenterContainer:new{ @@ -154,7 +155,7 @@ function GoodreadsBook:genBookInfoGroup() local text_rating = TextWidget:new{ text = T(_("Rating: %1"), self.dates.rating), face = self.small_font_face, - padding = Screen:scaleBySize(2), + padding = Size.padding.small, } table.insert(book_meta_info_group, CenterContainer:new{ @@ -166,7 +167,7 @@ function GoodreadsBook:genBookInfoGroup() local text_pages = TextWidget:new{ text = T(_("Pages: %1"), self.dates.pages), face = self.small_font_face, - padding = Screen:scaleBySize(2), + padding = Size.padding.small, } table.insert(book_meta_info_group, CenterContainer:new{ @@ -178,7 +179,7 @@ function GoodreadsBook:genBookInfoGroup() local text_release = TextWidget:new{ text = T(_("Release date: %1"), self.dates.release), face = self.small_font_face, - padding = Screen:scaleBySize(2), + padding = Size.padding.small, } table.insert(book_meta_info_group, CenterContainer:new{ diff --git a/plugins/statistics.koplugin/readerprogress.lua b/plugins/statistics.koplugin/readerprogress.lua index ba43b5d0c..8e063fe73 100644 --- a/plugins/statistics.koplugin/readerprogress.lua +++ b/plugins/statistics.koplugin/readerprogress.lua @@ -11,6 +11,7 @@ local LeftContainer = require("ui/widget/container/leftcontainer") local LineWidget = require("ui/widget/linewidget") local OverlapGroup = require("ui/widget/overlapgroup") local ProgressWidget = require("ui/widget/progresswidget") +local Size = require("ui/size") local TextWidget = require("ui/widget/textwidget") local UIManager = require("ui/uimanager") local VerticalGroup = require("ui/widget/verticalgroup") @@ -23,7 +24,7 @@ local LINE_COLOR = Blitbuffer.gray(0.4) local BG_COLOR = Blitbuffer.gray(0.2) local ReaderProgress = InputContainer:new{ - padding = Screen:scaleBySize(15), + padding = Size.padding.fullscreen, } local dayOfWeekTranslation = { @@ -40,8 +41,8 @@ function ReaderProgress:init() self.small_font_face = Font:getFace("smallffont") self.medium_font_face = Font:getFace("ffont") self.large_font_face = Font:getFace("largeffont") - self.screen_width = Screen:getSize().w - self.screen_height = Screen:getSize().h + self.screen_width = Screen:getWidth() + self.screen_height = Screen:getHeight() UIManager:setDirty(self, function() return "ui", self.dimen end) @@ -69,7 +70,7 @@ function ReaderProgress:getStatusContent(width) return VerticalGroup:new{ align = "left", OverlapGroup:new{ - dimen = Geom:new{ w = width, h = Screen:scaleBySize(30) }, + dimen = Geom:new{ w = width, h = Size.item.height_default }, CloseButton:new{ window = self }, }, self:genSingleHeader(_("Last week")), @@ -95,7 +96,7 @@ function ReaderProgress:genSingleHeader(title) background = BG_COLOR, dimen = Geom:new{ w = line_width, - h = 2, + h = Size.line.thick, } } } @@ -112,7 +113,7 @@ function ReaderProgress:genSingleHeader(title) line_container, padding_span, }, - VerticalSpan:new{ width = Screen:scaleBySize(5), height = self.screen_height / 25 }, + VerticalSpan:new{ width = Size.span.vertical_large, height = self.screen_height / 25 }, } end @@ -135,7 +136,7 @@ function ReaderProgress:genDoubleHeader(title_left, title_right) background = BG_COLOR, dimen = Geom:new{ w = line_width, - h = 2, + h = Size.line.thick, } } } @@ -158,7 +159,7 @@ function ReaderProgress:genDoubleHeader(title_left, title_right) line_container, padding_span, }, - VerticalSpan:new{ width = Screen:scaleBySize(5), height = self.screen_height / 25 }, + VerticalSpan:new{ width = Size.span.vertical_large, height = self.screen_height / 25 }, } end @@ -210,11 +211,11 @@ function ReaderProgress:genWeekStats(stats_day) date_format_show = dayOfWeekTranslation[os.date("%A", diff_time)] .. os.date(" (%d.%m)", diff_time) local total_group = HorizontalGroup:new{ align = "center", - padding = Screen:scaleBySize(2), + padding = Size.padding.small, LeftContainer:new{ dimen = Geom:new{ w = self.screen_width , h = height / 3 }, TextWidget:new{ - padding = Screen:scaleBySize(2), + padding = Size.padding.small, text = date_format_show .. " - " .. util.secondsToClock(select_day_time, true), face = Font:getFace("smallffont"), }, @@ -291,7 +292,7 @@ function ReaderProgress:genSummaryDay(width) local span_group = HorizontalGroup:new{ align = "center", LeftContainer:new{ - dimen = Geom:new{ h = Screen:scaleBySize(10) }, + dimen = Geom:new{ h = Size.span.horizontal_default }, padding_span }, } @@ -353,7 +354,7 @@ function ReaderProgress:genSummaryWeek(width) CenterContainer:new{ dimen = Geom:new{ w = tile_width, h = tile_height }, TextWidget:new{ - padding = Screen:scaleBySize(5), + padding = Size.padding.default, text = _("Total"), face = self.small_font_face, }, @@ -417,7 +418,7 @@ function ReaderProgress:genSummaryWeek(width) local span_group = HorizontalGroup:new{ align = "center", LeftContainer:new{ - dimen = Geom:new{ h = Screen:scaleBySize(10) }, + dimen = Geom:new{ h = Size.span.horizontal_default }, padding_span }, } diff --git a/spec/unit/size_spec.lua b/spec/unit/size_spec.lua new file mode 100644 index 000000000..0a5da85a3 --- /dev/null +++ b/spec/unit/size_spec.lua @@ -0,0 +1,31 @@ +describe("Size module", function() + local Size + setup(function() + require("commonrequire") + Size = require("ui/size") + end) + describe("should get size", function() + it("for window border", function() + assert.is_true(Size.border.window >= 1) + end) + end) + it("should be nil for non-existent property", function() + assert.is_nil(Size.supercalifragilisticexpialidocious) + assert.is_nil(Size.border.supercalifragilisticexpialidocious) + end) + it("should fail for non-existent property when debug is activated", function() + local dbg = require("dbg") + dbg:turnOn() + Size = package.reload("ui/size") + local supercalifragilisticexpialidocious1 = function() + return Size.supercalifragilisticexpialidocious + end + local supercalifragilisticexpialidocious2 = function() + return Size.border.supercalifragilisticexpialidocious + end + + assert.has_error(supercalifragilisticexpialidocious1, "Size: this property does not exist: Size.supercalifragilisticexpialidocious") + assert.has_error(supercalifragilisticexpialidocious2, "Size: this property does not exist: Size.border.supercalifragilisticexpialidocious") + dbg:turnOff() + end) +end)