Differential D15194

Draw a line separating PlasmaComponents tab bar from its content area
AbandonedPublic
Actions

Authored by ngraham on Sep 1 2018, 4:30 AM.

Details

Reviewers
None
Group Reviewers
Plasma
VDG
Summary

This patch implements one of the ideas we came up with in D15011: a subtle line separating tab bars from their content areas. This gives layouts that use them a bit more structure, while trying not to overwhelm the visual design.

Test Plan

Tested with Kickoff and plasma-pa with the panel on all four screen edges with the Breeze light and Breeze dark themes.

Diff Detail

Repository
R242 Plasma Framework (Library)
Branch
tabbar-separator-line (branched from master)
Lint
No Linters Available
Unit
No Unit Test Coverage
Build Status
Buildable 3440
Build 3458: arc lint + arc unit
ngraham created this revision.Sep 1 2018, 4:30 AM
Restricted Application added a project: Frameworks. · View Herald TranscriptSep 1 2018, 4:30 AM
Restricted Application added a subscriber: kde-frameworks-devel. · View Herald Transcript
ngraham requested review of this revision.Sep 1 2018, 4:30 AM
ngraham added a comment.Sep 1 2018, 4:34 AM

I implemented this with the horizontal-line/vertical-line SVG items to follow the general pattern that I noticed, but I'm not super thrilled with the resulting legibility; it seems a bit too light, and was almost invisible at 1px tall. I also tried a 1px tall Rectangle which looked crisper, but I couldn't find a theme color that was light enough. Comments and suggestions welcome.

ngraham edited the summary of this revision. (Show Details)Sep 1 2018, 4:36 AM
ngraham edited the test plan for this revision. (Show Details)
ngraham added a comment.Sep 1 2018, 4:40 AM

Also, if it's preferable to position the item with anchors rather than specifying with x and y, I can do that too:

anchors {
    left:   tabPosition == Qt.LeftEdge   ? undefined : buttonCutter.left
    right:  tabPosition == Qt.RightEdge  ? undefined : buttonCutter.right
    top:    tabPosition == Qt.TopEdge    ? undefined : buttonCutter.top
    bottom: tabPosition == Qt.BottomEdge ? undefined : buttonCutter.bottom
}
ngraham added a reviewer: VDG.Sep 1 2018, 2:35 PM
ngraham added a comment.Sep 20 2018, 4:02 AM

So I've got a +1 from VDG. Any opinions from someone in Plasma?

romangg added a subscriber: romangg.Sep 20 2018, 5:28 AM

If there are more items than space available in the list a line is drawn already now to indicate that there are more items to come by scrolling down. Does this not conflict with the new line?

abetts added a comment.Sep 20 2018, 2:00 PM
In D15194#328651, @romangg wrote:

If there are more items than space available in the list a line is drawn already now to indicate that there are more items to come by scrolling down. Does this not conflict with the new line?

Screenshot?

ngraham planned changes to this revision.Sep 26 2018, 2:33 PM
In D15194#328915, @abetts wrote:
In D15194#328651, @romangg wrote:

If there are more items than space available in the list a line is drawn already now to indicate that there are more items to come by scrolling down. Does this not conflict with the new line?

Screenshot?

I'll move the lines a pixel or two so that they touch the ones drawn by the ScrollView.

ngraham updated this revision to Diff 42763.Oct 2 2018, 11:04 PM

Make the separator line touch the line drawn by the scrollview when it's scrollable

dhaumann added a subscriber: dhaumann.Oct 3 2018, 7:09 AM

Hm, two separator lines, even touching each other sounds like a hack. Is there no better way?

ngraham abandoned this revision.Oct 24 2018, 2:34 AM

Not needed; we can and arguably should do all of this only in Kickoff since this style isn't guaranteed to look good everywhere. We'll do everything in D15206.

Revision Contents
Changeset List

Diff 42763

View Options

src/declarativeimports/plasmacomponents/qml/TabBar.qml

Loading...