@recaptime-dev's working patches + fork for Phorge, a community fork of Phabricator. (Upstream dev and stable branches are at upstream/main and upstream/stable respectively.)
hq.recaptime.dev/wiki/Phorge
phorge
phabricator
First cut of progress bars (PHUISegmentBarView)
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: {F1100415}
Reviewers: chad
Reviewed By: chad
Maniphest Tasks: T10288
Differential Revision: https://secure.phabricator.com/D15219
+235
-41
+2
resources/celerity/map.php
+2
resources/celerity/map.php
···
149
149
'rsrc/css/phui/phui-profile-menu.css' => '4a243229',
150
150
'rsrc/css/phui/phui-property-list-view.css' => '27b2849e',
151
151
'rsrc/css/phui/phui-remarkup-preview.css' => '1a8f2591',
152
+
'rsrc/css/phui/phui-segment-bar-view.css' => '728e4d19',
152
153
'rsrc/css/phui/phui-spacing.css' => '042804d6',
153
154
'rsrc/css/phui/phui-status.css' => '888cedb8',
154
155
'rsrc/css/phui/phui-tag-view.css' => '9d5d4400',
···
825
826
'phui-profile-menu-css' => '4a243229',
826
827
'phui-property-list-view-css' => '27b2849e',
827
828
'phui-remarkup-preview-css' => '1a8f2591',
829
+
'phui-segment-bar-view-css' => '728e4d19',
828
830
'phui-spacing-css' => '042804d6',
829
831
'phui-status-list-view-css' => '888cedb8',
830
832
'phui-tag-view-css' => '9d5d4400',
+4
src/__phutil_library_map__.php
+4
src/__phutil_library_map__.php
···
1522
1522
'PHUIPropertyListView' => 'view/phui/PHUIPropertyListView.php',
1523
1523
'PHUIRemarkupPreviewPanel' => 'view/phui/PHUIRemarkupPreviewPanel.php',
1524
1524
'PHUIRemarkupView' => 'infrastructure/markup/view/PHUIRemarkupView.php',
1525
+
'PHUISegmentBarSegmentView' => 'view/phui/PHUISegmentBarSegmentView.php',
1526
+
'PHUISegmentBarView' => 'view/phui/PHUISegmentBarView.php',
1525
1527
'PHUISpacesNamespaceContextView' => 'applications/spaces/view/PHUISpacesNamespaceContextView.php',
1526
1528
'PHUIStatusItemView' => 'view/phui/PHUIStatusItemView.php',
1527
1529
'PHUIStatusListView' => 'view/phui/PHUIStatusListView.php',
···
5705
5707
'PHUIPropertyListView' => 'AphrontView',
5706
5708
'PHUIRemarkupPreviewPanel' => 'AphrontTagView',
5707
5709
'PHUIRemarkupView' => 'AphrontView',
5710
+
'PHUISegmentBarSegmentView' => 'AphrontTagView',
5711
+
'PHUISegmentBarView' => 'AphrontTagView',
5708
5712
'PHUISpacesNamespaceContextView' => 'AphrontView',
5709
5713
'PHUIStatusItemView' => 'AphrontTagView',
5710
5714
'PHUIStatusListView' => 'AphrontTagView',
+36
-41
src/applications/uiexample/examples/PhabricatorAphrontBarUIExample.php
+36
-41
src/applications/uiexample/examples/PhabricatorAphrontBarUIExample.php
···
12
12
13
13
public function renderExample() {
14
14
$out = array();
15
-
$out[] = $this->renderTestThings('AphrontProgressBarView', 13, 10);
16
-
$out[] = $this->renderTestThings('AphrontGlyphBarView', 13, 10);
17
-
$out[] = $this->renderWeirdOrderGlyphBars();
18
-
$out[] = $this->renderAsciiStarBar();
15
+
$out[] = $this->renderRainbow();
19
16
return $out;
20
17
}
21
18
···
26
23
->appendChild($thing);
27
24
}
28
25
29
-
private function renderTestThings($class, $max, $incr) {
26
+
private function renderRainbow() {
27
+
$colors = array(
28
+
'red',
29
+
'orange',
30
+
'yellow',
31
+
'green',
32
+
'blue',
33
+
'indigo',
34
+
'violet',
35
+
);
36
+
37
+
$labels = array(
38
+
pht('Empty'),
39
+
pht('Red'),
40
+
pht('Orange'),
41
+
pht('Yellow'),
42
+
pht('Green'),
43
+
pht('Blue'),
44
+
pht('Indigo'),
45
+
pht('Violet'),
46
+
);
47
+
30
48
$bars = array();
31
-
for ($ii = 0; $ii <= $max; $ii++) {
32
-
$bars[] = newv($class, array())
33
-
->setValue($ii * $incr)
34
-
->setMax($max * $incr)
35
-
->setCaption("{$ii} outta {$max} ain't bad!");
36
-
}
37
-
return $this->wrap("Test {$class}", $bars);
38
-
}
39
49
40
-
private function renderWeirdOrderGlyphBars() {
41
-
$views = array();
42
-
$indices = array(1, 3, 7, 4, 2, 8, 9, 5, 10, 6);
43
-
$max = count($indices);
44
-
foreach ($indices as $index) {
45
-
$views[] = id(new AphrontGlyphBarView())
46
-
->setValue($index)
47
-
->setMax($max)
48
-
->setNumGlyphs(5)
49
-
->setCaption("Lol score is {$index}/{$max}")
50
-
->setGlyph(hsprintf('%s', 'LOL!'))
51
-
->setBackgroundGlyph(hsprintf('%s', '____'));
52
-
$views[] = hsprintf('<div style="clear:both;"></div>');
50
+
for ($jj = -1; $jj < count($colors); $jj++) {
51
+
$bar = id(new PHUISegmentBarView())
52
+
->setLabel($labels[$jj + 1]);
53
+
for ($ii = 0; $ii <= $jj; $ii++) {
54
+
$bar->newSegment()
55
+
->setWidth(1 / 7)
56
+
->setColor($colors[$ii]);
57
+
}
58
+
$bars[] = $bar;
53
59
}
54
60
55
-
return $this->wrap(
56
-
pht('Glyph bars in weird order'),
57
-
$views);
58
-
}
61
+
$bars = phutil_implode_html(
62
+
phutil_tag('br'),
63
+
$bars);
59
64
60
-
private function renderAsciiStarBar() {
61
-
$bar = id(new AphrontGlyphBarView())
62
-
->setValue(50)
63
-
->setMax(100)
64
-
->setCaption(pht('Glyphs!'))
65
-
->setNumGlyphs(10)
66
-
->setGlyph(hsprintf('%s', '*'));
67
-
68
-
return $this->wrap(
69
-
pht('ASCII star glyph bar'),
70
-
$bar);
65
+
return $this->wrap(pht('Rainbow Bars'), $bars);
71
66
}
72
67
73
68
}
+57
src/view/phui/PHUISegmentBarSegmentView.php
+57
src/view/phui/PHUISegmentBarSegmentView.php
···
1
+
<?php
2
+
3
+
final class PHUISegmentBarSegmentView extends AphrontTagView {
4
+
5
+
private $width;
6
+
private $color;
7
+
private $position;
8
+
9
+
public function setWidth($width) {
10
+
$this->width = $width;
11
+
return $this;
12
+
}
13
+
14
+
public function getWidth() {
15
+
return $this->width;
16
+
}
17
+
18
+
public function setColor($color) {
19
+
$this->color = $color;
20
+
return $this;
21
+
}
22
+
23
+
public function setPosition($position) {
24
+
$this->position = $position;
25
+
return $this;
26
+
}
27
+
28
+
protected function canAppendChild() {
29
+
return false;
30
+
}
31
+
32
+
protected function getTagAttributes() {
33
+
$classes = array(
34
+
'phui-segment-bar-segment-view',
35
+
);
36
+
37
+
if ($this->color) {
38
+
$classes[] = $this->color;
39
+
}
40
+
41
+
// Convert width to a percentage, and round it up slightly so that bars
42
+
// are full if they have, e.g., three segments at 1/3 + 1/3 + 1/3.
43
+
$width = 100 * $this->width;
44
+
$width = ceil(100 * $width) / 100;
45
+
$width = sprintf('%.2f%%', $width);
46
+
47
+
$left = 100 * $this->position;
48
+
$left = floor(100 * $left) / 100;
49
+
$left = sprintf('%.2f%%', $left);
50
+
51
+
return array(
52
+
'class' => implode(' ', $classes),
53
+
'style' => "left: {$left}; width: {$width};",
54
+
);
55
+
}
56
+
57
+
}
+65
src/view/phui/PHUISegmentBarView.php
+65
src/view/phui/PHUISegmentBarView.php
···
1
+
<?php
2
+
3
+
final class PHUISegmentBarView extends AphrontTagView {
4
+
5
+
private $label;
6
+
private $segments = array();
7
+
8
+
public function setLabel($label) {
9
+
$this->label = $label;
10
+
return $this;
11
+
}
12
+
13
+
public function newSegment() {
14
+
$segment = new PHUISegmentBarSegmentView();
15
+
$this->segments[] = $segment;
16
+
return $segment;
17
+
}
18
+
19
+
protected function canAppendChild() {
20
+
return false;
21
+
}
22
+
23
+
protected function getTagAttributes() {
24
+
return array(
25
+
'class' => 'phui-segment-bar-view',
26
+
);
27
+
}
28
+
29
+
protected function getTagContent() {
30
+
require_celerity_resource('phui-segment-bar-view-css');
31
+
32
+
$label = $this->label;
33
+
if (strlen($label)) {
34
+
$label = phutil_tag(
35
+
'div',
36
+
array(
37
+
'class' => 'phui-segment-bar-label',
38
+
),
39
+
$label);
40
+
}
41
+
42
+
$segments = $this->segments;
43
+
44
+
$position = 0;
45
+
foreach ($segments as $segment) {
46
+
$segment->setPosition($position);
47
+
$position += $segment->getWidth();
48
+
}
49
+
50
+
$segments = array_reverse($segments);
51
+
52
+
$segments = phutil_tag(
53
+
'div',
54
+
array(
55
+
'class' => 'phui-segment-bar-segments',
56
+
),
57
+
$segments);
58
+
59
+
return array(
60
+
$label,
61
+
$segments,
62
+
);
63
+
}
64
+
65
+
}
+71
webroot/rsrc/css/phui/phui-segment-bar-view.css
+71
webroot/rsrc/css/phui/phui-segment-bar-view.css
···
1
+
/**
2
+
* @provides phui-segment-bar-view-css
3
+
*/
4
+
5
+
.phui-segment-bar-label {
6
+
font-size: {$smallerfontsize};
7
+
margin-bottom: 4px;
8
+
}
9
+
10
+
.phui-segment-bar-segments {
11
+
background: {$lightgreybackground};
12
+
border-radius: 4px;
13
+
position: relative;
14
+
overflow: hidden;
15
+
height: 8px;
16
+
border: 1px solid rgba(0, 0, 0, 0.15);
17
+
}
18
+
19
+
.phui-segment-bar-segment-view {
20
+
position: absolute;
21
+
top: 0;
22
+
bottom: 0;
23
+
margin-left: -4px;
24
+
border-right: 5px solid;
25
+
border-radius: 0 4px 4px 0;
26
+
}
27
+
28
+
.phui-segment-bar-segment-view.red {
29
+
background: {$red};
30
+
border-color: {$red};
31
+
}
32
+
33
+
.phui-segment-bar-segment-view.orange {
34
+
background: {$orange};
35
+
border-color: {$orange};
36
+
}
37
+
38
+
.phui-segment-bar-segment-view.yellow {
39
+
background: {$yellow};
40
+
border-color: {$yellow}
41
+
}
42
+
43
+
.phui-segment-bar-segment-view.green {
44
+
background: {$green};
45
+
border-color: {$green};
46
+
}
47
+
48
+
.phui-segment-bar-segment-view.blue {
49
+
background: {$blue};
50
+
border-color: {$blue};
51
+
}
52
+
53
+
.phui-segment-bar-segment-view.indigo {
54
+
background: {$indigo};
55
+
border-color: {$indigo};
56
+
}
57
+
58
+
.phui-segment-bar-segment-view.violet {
59
+
background: {$violet};
60
+
border-color: {$violet};
61
+
}
62
+
63
+
.phui-segment-bar-segment-view.pink {
64
+
background: {$pink};
65
+
border-color: {$pink};
66
+
}
67
+
68
+
.phui-segment-bar-segment-view.sky {
69
+
background: {$sky};
70
+
border-color: {$sky};
71
+
}