Page MenuHomePhabricator

First cut of progress bars (PHUISegmentBarView)
ClosedPublic

Authored by epriestley on Feb 8 2016, 11:01 PM.
Tags
None
Referenced Files
Unknown Object (File)
Wed, Feb 28, 1:21 PM
Unknown Object (File)
Feb 12 2024, 8:32 PM
Unknown Object (File)
Feb 10 2024, 2:29 AM
Unknown Object (File)
Jan 27 2024, 12:56 PM
Unknown Object (File)
Jan 25 2024, 10:25 PM
Unknown Object (File)
Jan 19 2024, 4:51 PM
Unknown Object (File)
Jan 19 2024, 2:08 AM
Unknown Object (File)
Jan 19 2024, 2:07 AM
Subscribers
None

Details

Summary

Ref T10288.

I couldn't figure out how to reasonably get the interior right borders to round like the mock, but I think this is otherwise mostly faithful. Feel free to fix stuff.

Test Plan

Screen Shot 2016-02-08 at 2.57.55 PM.png (1×1 px, 176 KB)

Diff Detail

Repository
rP Phabricator
Lint
Lint Not Applicable
Unit
Tests Not Applicable

Event Timeline

epriestley retitled this revision from to First cut of progress bars (PHUISegmentBarView).
epriestley updated this object.
epriestley edited the test plan for this revision. (Show Details)
epriestley added a reviewer: chad.

I was going to cheat and make each bar its own div and layer them with z-index.

chad edited edge metadata.
This revision is now accepted and ready to land.Feb 8 2016, 11:16 PM

I think we could possibly do something like this without z-index:

  • position: absolute
  • left: (add up all the previous bars)%
  • margin-left: -4px;
  • border-right: 4px solid;

I believe that will make them layer correctly, although we might need to render them backward (rightmost bar first).

However, I don't really love the added complexity of adding up all the previous bars -- it's nice that we don't have to do that with this approach. But maybe this is sort of moot, it probably won't really make eventual JS layout particularly more complex.

I think the rounded stuff might also make, like "1" and "2" look only slightly different (i.e., "1" will be ~5px wide with a chunk out of it, "2" will be ~6px wide with a chunk out of it) which might be hard to read, although maybe not a big deal.

epriestley edited edge metadata.
  • Render segments in reverse order to get the right z-sequence.
  • Use negative margin + border to overlap them.
  • Add all previous bars to position them.

Screen Shot 2016-02-08 at 3.24.23 PM.png (1×1 px, 168 KB)

We can go back to the other thing if we run into trouble with this, but I think it's probably OK.

This revision was automatically updated to reflect the committed changes.