koreader-plugin/bookorbit.koplugin/bookorbit_menu_ui.lua
Rama main · réplica de lectura del repositorio original.
--[[--
Parts for BookOrbit's own menus and settings pages, built on the dashboard's
drawing primitives so they share its type, grays and density step.
Every part is sized in dp through BoardMetrics.px. Tappable parts are wrapped
with BoardUI.hit and carry an action table; the page that builds them routes
taps and D-pad presses to its own action handler.
]]
local DataStorage = require("datastorage")
local IconWidget = require("ui/widget/iconwidget")
local lfs = require("libs/libkoreader-lfs")
local util = require("util")
local BoardMetrics = require("bookorbit_board_metrics")
local BoardUI = require("bookorbit_board_ui")
local INK = BoardMetrics.INK
local px, lh1 = BoardMetrics.px, BoardMetrics.lh1
local text, vstack, hstack, flex, space, icon = BoardUI.text, BoardUI.vstack, BoardUI.hstack, BoardUI.flex, BoardUI.space, BoardUI.icon
local MenuUI = {}
-- Page margins step with width, like the board's.
function MenuUI.mx()
local W = BoardMetrics.layoutW()
return px(W >= 900 and 28 or W >= 700 and 24 or W >= 560 and 20 or 16)
end
function MenuUI.wide()
return BoardMetrics.layoutW() >= 760
end
function MenuUI.landscape()
local m = BoardMetrics.get()
return m.w > m.h
end
function MenuUI.hair()
return math.max(1, math.floor(BoardMetrics.get().dp * 0.75 + 0.5))
end
function MenuUI.line()
return math.max(1, px(1))
end
MenuUI.CARD_PAD = 16
-- The inner width of a card's rows.
function MenuUI.rowsIn(w)
return w - 2 * px(MenuUI.CARD_PAD)
end
-- An outline card around children laid out top to bottom. o: fill (gray
-- surface, no border), strong (black border), pad (horizontal, dp), vpad.
function MenuUI.card(w, children, o)
o = o or {}
local border = o.fill and 0 or MenuUI.line()
local pad = px(o.pad or MenuUI.CARD_PAD)
local vpad = px(o.vpad or 0)
local inner = vstack({ w = w - 2 * border, pad = { vpad, pad - border, vpad, pad - border } }, children)
local h = inner:getSize().h + 2 * border
return BoardUI.box({
w = w, h = h, border = border, radius = px(12),
border_col = o.strong and INK.black or INK.g8,
bg = o.fill and INK.ge or INK.white,
}, inner)
end
-- A hairline between rows, starting past the icon column unless inset is 0.
function MenuUI.divider(w, inset)
inset = inset or px(38)
return hstack({ w = w, h = MenuUI.hair() }, { space(inset, 1), BoardUI.rect(w - inset, MenuUI.hair(), INK.gb) })
end
-- A card of rows with hairlines between them.
function MenuUI.group(w, rows, o)
o = o or {}
local iw = MenuUI.rowsIn(w)
local children = {}
for _i, r in ipairs(rows) do
if r then
if #children > 0 then table.insert(children, MenuUI.divider(iw, (o.inset == nil and r._no_icon) and 0 or o.inset)) end
table.insert(children, r)
end
end
return MenuUI.card(w, children, o)
end
function MenuUI.label(w, str, right)
local l = text(str, { s = 13, b = true })
if right then return BoardUI.spread(w, l, right) end
return hstack({ w = w }, { l, flex(0) })
end
-- A section: its label, then the body.
function MenuUI.section(w, title, body)
if not title then return body end
return vstack({ w = w }, { MenuUI.label(w, title), space(nil, px(8)), body })
end
-- ------------------------------------------------------------- controls
function MenuUI.toggle(on)
local w, h, k, pad = px(48), px(28), px(20), px(4)
local b = math.max(1, px(1.5))
local track = on and BoardUI.rect(w, h, INK.black, math.floor(h / 2))
or BoardUI.box({ w = w, h = h, radius = math.floor(h / 2), border = b, border_col = INK.g5, bg = INK.white })
local knob = BoardUI.rect(k, k, on and INK.white or INK.g5, math.floor(k / 2))
return BoardUI.overlay(w, h, {
{ widget = track },
{ widget = knob, x = on and (w - pad - k) or pad, y = pad },
})
end
function MenuUI.radio(on)
local s = px(22)
return BoardUI.circle(s, { border = math.max(1, px(1.75)), bg = INK.white },
on and BoardUI.rect(px(10), px(10), INK.black, px(5)) or space(1, 1))
end
function MenuUI.check()
return BoardUI.circle(px(24), { bg = INK.black }, icon("check", px(15), { col = "white", sw = 3 }))
end
-- A segmented control: one outlined box, the chosen segment inked.
function MenuUI.segmented(w, options, selected, action_for)
local h = px(40)
local b = math.max(1, px(1.5))
local n = #options
local inner = w - 2 * b
local seg_w = math.floor(inner / n)
local segs = {}
for index, label in ipairs(options) do
local sw = index == n and (inner - seg_w * (n - 1)) or seg_w
local on = index == selected
local t = text(label, { s = 14, b = on, col = on and INK.white or INK.black, w = sw - px(8), align = "center" })
local body = hstack({ w = sw, h = h - 2 * b }, { flex(0), t, flex(0) })
local seg
if on then
seg = BoardUI.box({ w = sw, h = h - 2 * b, radius = px(8), bg = INK.black }, body)
else
local left_line = index > 1 and selected ~= index - 1
seg = BoardUI.overlay(sw, h - 2 * b, {
{ widget = body },
left_line and { widget = BoardUI.rect(MenuUI.hair(), h - 2 * b, INK.g8) } or {},
})
end
table.insert(segs, action_for and BoardUI.hit(seg, action_for(index)) or seg)
end
return BoardUI.box({ w = w, h = h, radius = px(10), border = b, border_col = INK.black, bg = INK.white },
hstack({ w = inner, h = h - 2 * b }, segs))
end
function MenuUI.stepper(value, unit, action_minus, action_plus)
local s = px(36)
local function btn(name, action)
local c = BoardUI.circle(s, { border = math.max(1, px(1.5)), bg = INK.white }, icon(name, px(16), { sw = 2.75 }))
return action and BoardUI.hit(c, action) or c
end
local mid = vstack({ w = px(52), align = "center" }, {
text(tostring(value), { s = 18, b = true }),
unit and text(unit, { s = 12, col = INK.g4 }) or false,
})
return hstack({ gap = px(10) }, { btn("minus", action_minus), mid, btn("plus", action_plus) })
end
-- A pill button. o: kind ("dark", "outline", "ghost"), icon, s, h, pad_x,
-- w (fixed width), action.
function MenuUI.pill(label, o)
o = o or {}
local h = px(o.h or 44)
local dark = o.kind ~= "outline" and o.kind ~= "ghost"
local fg = dark and INK.white or INK.black
local t = text(label, { s = o.s or 15, b = true, col = fg, w = o.w and (o.w - 2 * px(o.pad_x or 18) - (o.icon and px(o.icon_size or 18) + px(8) or 0)) or nil, align = o.w and "center" or nil })
local items = {}
if o.icon then
table.insert(items, icon(o.icon, px(o.icon_size or 18), { col = dark and "white" or "black", sw = 2.5 }))
end
table.insert(items, t)
local content = hstack({ gap = px(8) }, items)
local w = o.w or (content:getSize().w + 2 * px(o.pad_x or 18))
local border = o.kind == "outline" and math.max(1, px(1.5)) or 0
local body = hstack({ w = w - 2 * border, h = h - 2 * border }, { flex(0), content, flex(0) })
local pill = BoardUI.box({ w = w, h = h, radius = math.floor(h / 2), border = border, border_col = INK.black, bg = dark and INK.black or INK.white }, body)
return o.action and BoardUI.hit(pill, o.action) or pill
end
-- A small status chip. Words and an icon, never shade alone.
function MenuUI.chip(label, o)
o = o or {}
local h = px(o.h or 26)
local items = {}
if o.icon then table.insert(items, icon(o.icon, px(14), { sw = 2.5, col = o.ink and "white" or "black" })) end
table.insert(items, text(label, { s = 12, b = true, col = o.ink and INK.white or INK.black }))
local content = hstack({ gap = px(5) }, items)
local w = content:getSize().w + px(o.icon and 7 or 10) + px(10)
return BoardUI.box({ w = w, h = h, radius = math.floor(h / 2), bg = o.ink and INK.black or INK.ge },
hstack({ w = w, h = h }, { space(px(o.icon and 7 or 10), 1), content, flex(0) }))
end
function MenuUI.iconButton(name, action, o)
o = o or {}
local box = px(44)
local b = hstack({ w = box, h = box }, { flex(0), icon(name, px(o.size or 23), { sw = o.sw or 2 }), flex(0) })
return action and BoardUI.hit(b, action) or b
end
-- The 44dp tap box draws its icon inset; pulling the box out by this much
-- lines the glyph up with the page margin.
function MenuUI.tapInset(size)
return math.floor((px(44) - px(size or 24)) / 2)
end
-- ------------------------------------------------------------------ rows
-- A list row. o: icon (name or widget), label, sub, sublines, value,
-- value_bold, toggle, radio, check, chevron, trail, bold, h, action, data.
function MenuUI.row(w, o)
local trailing = {}
if o.value then table.insert(trailing, text(o.value, { s = 14, col = o.value_bold and INK.black or INK.g4, b = o.value_bold })) end
if o.trail then table.insert(trailing, o.trail) end
if o.toggle ~= nil then table.insert(trailing, MenuUI.toggle(o.toggle)) end
if o.radio ~= nil then table.insert(trailing, MenuUI.radio(o.radio)) end
if o.check then table.insert(trailing, MenuUI.check()) end
if o.chevron then table.insert(trailing, icon("chevron-right", px(18), { sw = 2.25 })) end
local right = #trailing > 0 and hstack({ gap = px(10) }, trailing) or nil
local icon_w = o.icon and (px(24) + px(14)) or 0
local right_w = right and (right:getSize().w + px(12)) or 0
local text_w = math.max(px(10), w - icon_w - right_w)
local lines = o.sublines or 1
local s = o.s or 16
local label_s = BoardUI.fitSize(o.label, { s = s, b = o.bold }, text_w, s - 2)
-- Like a subtitle, an interface label too long even two sizes down
-- takes a second line rather than an ellipsis.
local label_lines = (not o.data and BoardUI.fitSize(o.label, { s = s - 2, b = o.bold }, text_w, s - 3) < s - 2) and 2 or nil
if label_lines then label_s = s - 2 end
local col_items = { text(o.label, { s = label_s, b = o.bold, w = text_w, lines = label_lines, data = o.data }) }
if o.sub then
local sub_s = 13
if lines == 1 then
sub_s = BoardUI.fitSize(o.sub, { s = 13 }, text_w, 12)
-- Interface copy too long for one line even at 12 takes a second
-- line rather than an ellipsis.
if not o.sub_data and BoardUI.fitSize(o.sub, { s = 12 }, text_w, 11) < 12 then lines, sub_s = 2, 13 end
end
table.insert(col_items, text(o.sub, { s = sub_s, col = INK.g4, w = text_w, lines = lines, data = o.sub_data }))
end
local column = vstack({ w = text_w }, col_items)
local min_h = px(o.h or (o.sub and (lines > 1 and 72 or 60) or 52))
local h = math.max(min_h, column:getSize().h + px(16))
local items = {}
if o.icon then
local glyph = type(o.icon) == "string" and icon(o.icon, px(22), { sw = 2 }) or o.icon
table.insert(items, hstack({ w = px(24), h = h }, { flex(0), glyph, flex(0) }))
table.insert(items, space(px(14), 1))
end
table.insert(items, column)
if right then
table.insert(items, flex(px(12)))
table.insert(items, right)
end
local r = hstack({ w = w, h = h }, items)
local out = o.action and BoardUI.hit(r, o.action) or r
out._no_icon = o.icon == nil
return out
end
-- Full-screen page header: back, title, optional sub line and a right widget,
-- in the same 64dp band as the board's header. o: back (false hides it),
-- back_icon, back_action, sub (string or runs), right, right_inset (px the
-- right widget may hang past the margin, for an icon button's tap box).
function MenuUI.pageHeader(w, title, o)
o = o or {}
local has_back = o.back ~= false
local inset = has_back and MenuUI.tapInset(24) or 0
local right = o.right
local band_w = w + inset + (o.right_inset or 0)
local back_w = has_back and (px(44) + px(4)) or 0
local right_w = right and right:getSize().w or 0
local title_w = band_w - back_w - right_w
local column = vstack({ w = title_w }, {
text(title, { s = 22, b = true, w = title_w }),
o.sub and (type(o.sub) == "table" and BoardUI.runs(o.sub, { s = 13, col = INK.g4, w = title_w, data = true })
or text(o.sub, { s = 13, col = INK.g4, w = title_w, data = o.sub_data })) or false,
})
local items = {}
if has_back then
table.insert(items, MenuUI.iconButton(o.back_icon or "chevron-left", o.back_action or { kind = "back" }, { size = 26, sw = 2.25 }))
table.insert(items, space(px(4), 1))
end
table.insert(items, column)
if right then table.insert(items, right) end
local band = hstack({ w = band_w, h = px(64) }, items)
-- The back glyph and a right icon button sit on the margins, their tap
-- boxes reaching past them.
return BoardUI.overlay(w, px(64), { { widget = band, x = -inset, y = 0 } })
end
-- ---------------------------------------------------------- illustrations
-- Gesture diagrams for the shortcut picker: a reader outline with the touch
-- drawn on it. Written once to the icon cache like the board's icons.
local GESTURE_SVG = {
frame = '<rect x="8" y="4" width="84" height="122" rx="9" fill="#ffffff" stroke="#000000" stroke-width="3"/>'
.. '<rect x="16" y="14" width="68" height="96" rx="2" fill="none" stroke="#888888" stroke-width="1.5"/>'
.. '<path d="M24 28h52M24 40h52M24 52h52M24 64h52M24 76h52M24 88h30" stroke="#cccccc" stroke-width="3" stroke-linecap="round"/>',
["hold-tl"] = '<circle cx="24" cy="22" r="12" fill="none" stroke="#000000" stroke-width="2.5"/><circle cx="24" cy="22" r="7" fill="#000000"/>',
["tap-br"] = '<circle cx="76" cy="102" r="7" fill="#000000"/>',
["tap-tr"] = '<circle cx="76" cy="22" r="7" fill="#000000"/>',
["two-tr"] = '<circle cx="68" cy="22" r="6.5" fill="#000000"/><circle cx="80" cy="26" r="6.5" fill="#000000"/>',
none = '<path d="M30 50 L70 90 M70 50 L30 90" stroke="#888888" stroke-width="3" stroke-linecap="round"/>',
}
local gesture_dir
local function gestureFile(kind)
if not gesture_dir then
gesture_dir = DataStorage:getDataDir() .. "/cache/bookorbit/icons"
util.makePath(gesture_dir)
end
local path = gesture_dir .. "/gesture-" .. kind .. "-v1.svg"
if lfs.attributes(path, "mode") ~= "file" then
local f = io.open(path, "w")
if not f then return nil end
f:write('<svg xmlns="http://www.w3.org/2000/svg" width="100" height="130" viewBox="0 0 100 130">'
.. GESTURE_SVG.frame .. (GESTURE_SVG[kind] or "") .. "</svg>")
f:close()
end
return path
end
function MenuUI.gesture(kind, w)
local h = math.floor(w * 1.3 + 0.5)
local file = gestureFile(kind)
if not file then return space(w, h) end
return IconWidget:new{ file = file, width = w, height = h, alpha = true }
end
-- The BookOrbit icon KOReader's menu bar shows, drawn from the shipped SVG.
function MenuUI.tabIcon(size, path)
if not path or lfs.attributes(path, "mode") ~= "file" then return space(size, size) end
return IconWidget:new{ file = path, width = size, height = size, alpha = true }
end
-- ------------------------------------------------------------------ text
-- "2 min ago", "3 h ago", "yesterday", "Oct 9". A timestamp of 0 is never.
local _ = require("gettext")
local T = require("ffi/util").template
function MenuUI.ago(ts, now)
ts = tonumber(ts)
if not ts or ts <= 0 then return nil end
now = now or os.time()
local delta = math.max(0, now - ts)
if delta < 60 then return _("just now") end
if delta < 3600 then return T(_("%1 min ago"), math.floor(delta / 60)) end
if delta < 86400 and os.date("%Y%m%d", ts) == os.date("%Y%m%d", now) then
return T(_("%1 h ago"), math.floor(delta / 3600))
end
if os.date("%Y%m%d", ts) == os.date("%Y%m%d", now - 86400) then return _("yesterday") end
return os.date("%b %d", ts):gsub(" 0", " ")
end
-- The server's address without its scheme or API path, as people type it.
function MenuUI.serverHost(url)
if type(url) ~= "string" or url == "" then return nil end
local host = url:gsub("^%a[%w+.-]*://", ""):gsub("/api/v1/?$", ""):gsub("/+$", "")
return host
end
MenuUI.lh1 = lh1
return MenuUI