D9201: Slightly reduce vertical gutter width.

[Chris Holland]

Zren added a comment.


  So you removed 2 units from the overall cell height, but only 1 unit from the frameloader height. This means you removed 1 unit from the "leftover" padding at the bottom of the frameloader, and are overlapping the cell below by another 1 unit.
  
  Before (cellHeight=6 units, top margin=1 unit, frameloader=5 units)
  
  F5614507: 2018-01-02___17-31-05.png <https://phabricator.kde.org/F5614507>
  
  After (cellHeight=4 units, top margin=1 unit, frameloader=4 units)
  
  F5614547: 2018-01-02___17-37-27.png <https://phabricator.kde.org/F5614547>
  
  It's much more obvious when we zoom in.
  
  F5614553: 2018-01-02___17-39-04.png <https://phabricator.kde.org/F5614553>
  
  How to fix:
  ===========
  
  **Option A)** Remove just 1 unit of padding from the bottom of the frameloader.
  
  Add 1 unit to the cellHeight. (cellHeight=5 units, top margin=1 unit, frameloader=4 units)
  
  This makes it look weird, since there's 2 units of top padding, and only 1 unit of bottom padding.
  
  **Option B)** Remove 1 unit from the top padding, and 1 unit from the bottom padding of the frameloader.
  
  Remove 1 more unit from `icon.anchors.topMargin`
  
  From
  
    PlasmaCore.IconItem {
        id: icon
    
        anchors {
            topMargin: (2 * units.smallSpacing)
            leftMargin: units.smallSpacing
        }
  
  to
  
    PlasmaCore.IconItem {
        id: icon
    
        anchors {
            topMargin: units.smallSpacing
            leftMargin: units.smallSpacing
        }
  
  and change the `frameLoader.height` calculation
  
    Loader {
        id: frameLoader
    
        height: {
            if (root.useListViewMode) {
                return parent.height;
            }
    
            // Note: frameLoader.y = units.smallSpacing (acts as top margin)
            return (units.smallSpacing // icon.anchors.topMargin (acts as top padding)
                + icon.height
                + units.smallSpacing // label.anchors.topMargin (acts as spacing between icon and label)
                + (label.lineCount * theme.mSize(theme.defaultFont).height)
                + units.smallSpacing); // leftover (acts as bottom padding)
        }
  
  F5614585: 2018-01-02___18-03-18.png <https://phabricator.kde.org/F5614585>

REPOSITORY
  R119 Plasma Desktop

REVISION DETAIL
  https://phabricator.kde.org/D9201

To: hein, #plasma
Cc: abetts, Zren, plasma-devel, ZrenBot, progwolff, lesliezhai, ali-mohamed, jensreuterberg, sebas, apol, mart
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://mail.kde.org/pipermail/plasma-devel/attachments/20180102/2acb9637/attachment.html>