mirror of https://github.com/koreader/koreader
Update UI layout code to use new SVG icons
- Add IconWidget, use it for icons instead of ImageWidget. Specify icons by name only, look for them (with either .svg or .png suffixes) in multiple directories (including koreader/settings/icons/ to allow customizing them). Don't crash when icon name not found, shown a black background warning icon instead. - Don't trust the icons' native sizes: replace scale_for_dpi=true with width/height=DGENERIC_ICON_SIZE, so all icons get the same (tunable) size - except in a few specific use cases. - Top and bottom menu bars: normalize, and have icons properly centered in them, extend vertical line separators up to the edges. - TOC: adjust expand/collapse icons size to items sizereviewable/pr7012/r1
poire-z
3 years ago
parent
f0b09fb4b3
commit
24424e505e
@ -0,0 +1,70 @@
|
|||||||
|
--[[
|
||||||
|
Subclass of ImageWidget to show icons
|
||||||
|
]]
|
||||||
|
|
||||||
|
local DataStorage = require("datastorage")
|
||||||
|
local ImageWidget = require("ui/widget/imagewidget")
|
||||||
|
local Screen = require("device").screen
|
||||||
|
|
||||||
|
-- Directories to look for icons by name, with any of the accepted suffixes
|
||||||
|
local ICONS_DIRS = {}
|
||||||
|
local user_icons_dir = DataStorage:getSettingsDir() .. "/icons"
|
||||||
|
if lfs.attributes(user_icons_dir, "mode") == "directory" then
|
||||||
|
table.insert(ICONS_DIRS, user_icons_dir)
|
||||||
|
end
|
||||||
|
-- Default icons (material design light)
|
||||||
|
table.insert(ICONS_DIRS, "resources/icons/mdlight")
|
||||||
|
-- Fallback directories
|
||||||
|
table.insert(ICONS_DIRS, "resources/icons")
|
||||||
|
table.insert(ICONS_DIRS, "resources")
|
||||||
|
|
||||||
|
-- Supported icon suffixes
|
||||||
|
local ICONS_EXTS = { ".svg", ".png" }
|
||||||
|
|
||||||
|
-- Show this icon instead of crashing if we can't find any icon
|
||||||
|
local ICON_NOT_FOUND = "resources/icons/icon-not-found.svg"
|
||||||
|
|
||||||
|
-- Icon filepath location cache
|
||||||
|
local ICONS_PATH = {}
|
||||||
|
|
||||||
|
local IconWidget = ImageWidget:extend{
|
||||||
|
-- The icon filename should be provided without any path
|
||||||
|
icon = ICON_NOT_FOUND, -- show this if not provided
|
||||||
|
-- See ImageWidget for other available options,
|
||||||
|
-- we only start with a few different defaults, that can
|
||||||
|
-- be overriden by callers.
|
||||||
|
width = Screen:scaleBySize(DGENERIC_ICON_SIZE), -- our icons are square
|
||||||
|
height = Screen:scaleBySize(DGENERIC_ICON_SIZE),
|
||||||
|
alpha = true, -- our icons have a transparent background
|
||||||
|
is_icon = true, -- avoid dithering in ImageWidget:paintTo()
|
||||||
|
}
|
||||||
|
|
||||||
|
function IconWidget:init()
|
||||||
|
if self.image or self.file then
|
||||||
|
-- In case we're created with one of these: just be an ImageWidget.
|
||||||
|
return
|
||||||
|
end
|
||||||
|
-- See if already seen and full path cached
|
||||||
|
self.file = ICONS_PATH[self.icon]
|
||||||
|
if not self.file then
|
||||||
|
-- Not yet seen, look for it
|
||||||
|
for _, dir in ipairs(ICONS_DIRS) do
|
||||||
|
for __, ext in ipairs(ICONS_EXTS) do
|
||||||
|
local path = dir .. "/" .. self.icon .. ext
|
||||||
|
if lfs.attributes(path, "mode") == "file" then
|
||||||
|
self.file = path
|
||||||
|
break
|
||||||
|
end
|
||||||
|
end
|
||||||
|
if self.file then
|
||||||
|
break
|
||||||
|
end
|
||||||
|
end
|
||||||
|
if not self.file then
|
||||||
|
self.file = ICON_NOT_FOUND
|
||||||
|
end
|
||||||
|
ICONS_PATH[self.icon] = self.file
|
||||||
|
end
|
||||||
|
end
|
||||||
|
|
||||||
|
return IconWidget
|
||||||
@ -0,0 +1,69 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<svg
|
||||||
|
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||||
|
xmlns:cc="http://creativecommons.org/ns#"
|
||||||
|
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||||
|
xmlns:svg="http://www.w3.org/2000/svg"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||||
|
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||||
|
version="1.1"
|
||||||
|
width="48"
|
||||||
|
height="48"
|
||||||
|
viewBox="0 0 48 48"
|
||||||
|
enable-background="new 0 0 24.00 24.00"
|
||||||
|
xml:space="preserve"
|
||||||
|
id="svg4"
|
||||||
|
sodipodi:docname="icon-not-found.svg"
|
||||||
|
inkscape:version="1.0.1 (3bc2e813f5, 2020-09-07)"
|
||||||
|
inkscape:export-xdpi="48"
|
||||||
|
inkscape:export-ydpi="48"><sodipodi:namedview
|
||||||
|
pagecolor="#ffffff"
|
||||||
|
bordercolor="#666666"
|
||||||
|
borderopacity="1"
|
||||||
|
objecttolerance="10"
|
||||||
|
gridtolerance="10"
|
||||||
|
guidetolerance="10"
|
||||||
|
inkscape:pageopacity="0"
|
||||||
|
inkscape:pageshadow="2"
|
||||||
|
inkscape:window-width="1914"
|
||||||
|
inkscape:window-height="932"
|
||||||
|
id="namedview8"
|
||||||
|
showgrid="true"
|
||||||
|
inkscape:zoom="15.3125"
|
||||||
|
inkscape:cx="24"
|
||||||
|
inkscape:cy="24"
|
||||||
|
inkscape:window-x="0"
|
||||||
|
inkscape:window-y="126"
|
||||||
|
inkscape:window-maximized="0"
|
||||||
|
inkscape:current-layer="svg4"
|
||||||
|
inkscape:document-rotation="0"><inkscape:grid
|
||||||
|
type="xygrid"
|
||||||
|
id="grid13"
|
||||||
|
originx="0"
|
||||||
|
originy="0"
|
||||||
|
empspacing="4" /></sodipodi:namedview><metadata
|
||||||
|
id="metadata10"><rdf:RDF><cc:Work
|
||||||
|
rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
|
||||||
|
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title /></cc:Work></rdf:RDF></metadata><defs
|
||||||
|
id="defs8" />
|
||||||
|
<rect
|
||||||
|
style="fill:#000000;fill-rule:evenodd;stroke:none;stroke-width:2"
|
||||||
|
id="rect830"
|
||||||
|
width="144"
|
||||||
|
height="144"
|
||||||
|
x="0"
|
||||||
|
y="0" />
|
||||||
|
<path
|
||||||
|
style="fill:none;stroke:#FFFFFF;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
|
||||||
|
d="M 24,15 V 30.333333"
|
||||||
|
id="path840"
|
||||||
|
sodipodi:nodetypes="cc" /><path
|
||||||
|
style="fill:none;stroke:#FFFFFF;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
|
||||||
|
d="M 24,33.666666 V 36"
|
||||||
|
id="path850"
|
||||||
|
sodipodi:nodetypes="cc" /><path
|
||||||
|
style="fill:none;stroke:#FFFFFF;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
|
||||||
|
d="M 43.43746,40 H 4.56254 L 24,6.3333333 Z"
|
||||||
|
id="path853" />
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 2.3 KiB |
Loading…
Reference in New Issue