Skip to content

[UX] some small visual observations #3265

@poire-z

Description

@poire-z

(KOReader version: 1251-ga2b0fb2 on Glo HD)

Following #3203, I may have been paying too much attention to smal visual details and alignments, and I noticed the following things. They are probably not a direct effect of these scaleBySize, most were probably there and I didn't noticed, or they are now more noticable because of the increased margins and paddings.

Posting these here as they are on my tofix list, but I'm quite busy these days, and I'd like to know if you feel the same about them or even notice them, or if I'm just too nitpicking:

  • TOC, Bookmark, History (menu.lua): the close button (the x) at top right corner feels misaligned: it's not 45° diagonaly aligned with the top right screen corner (it's below this 45° line), and it is not horizontaly aligned with the title either
  • TOC, Bookmark, History (menu.lua): horizontal alignements of items feels a bit uneven (the code abuses some horizontal spans default/small, where it should just use padding.fullscreen, and not add a space to mandatory for right margin- I had started working on this, but don't have yet time to finish it)
  • Text in buttons looks not really verticaly centered and shifted towards up; I don't think it's some padding/margin, just that the rendering position of text in its box is a bit off (or may be it feels so because all our buttons have some uppercase letter that make it feels nearer the top border). It can be tweaked by changing the 0.7 (0.75 gives me a better feeling of centering) in:
    RenderText:renderUtf8Text(bb, x, y+self._height*0.7, self.face, self.text, true, self.bold,
  • Text in buttons, and height of buttons, seems different on the last row of a buttontable, and between widgets:
    • dictquicklookup/inputdialog: last row seems smaller (and the vertical separator touch the bottom border - it does not touch the other grey horizontal separator)
    • unlike confirmbox, where the buttons seem fine and large, (and the vertical separator does not touch the bottom border)
  • Not enough room between input text and bottom buttons in InputDialog (look at any of the 2 Wikipedia settings): just adding some VerticalSpan before buttons seems to help: VerticalSpan:new{ width = self.title_margin + self.title_padding },. That may be needed in some other widgets.
  • ButtonDialogTitle (and others) may need some vertical padding (or a verticalspan in their title, below the title) for the title to not look like a button.
  • TouchMenu (top menu) has some borders on the left & right sides, unlike ConfigDialog (bottom menu) which does not have them
  • TouchMenu (top menu): the horizontal lines (separator, but also the thicker line under menuicons) does not have the same margin on both sides (larger gap on the right)
  • Finally, my last attempt at evoking this :) are we still letting the border.window being scaleBySize(2) (4px on GloHD) - where we feel 1.5 (3px on GloHD) have our preferences (it was 2px before) ? (I can still fix that in my personal mods - but I'm still bothered by the toyish look it gives to the whole thing).

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions