@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
Add PHUIXButtonView and a UIExample
Summary:
Ref T12733. Ref M1476. This adds `PHUIXButtonView`, for client-side button rendering.
It also adds a PHUIX example which renders the server and client versions of each component side-by-side so it's easier to see if they're messed up.
Test Plan: {F4984128}
Reviewers: chad
Reviewed By: chad
Maniphest Tasks: T12733
Differential Revision: https://secure.phabricator.com/D18051
+311
+13
resources/celerity/map.php
+13
resources/celerity/map.php
···
523
523
'rsrc/js/phuix/PHUIXActionListView.js' => 'b5c256b8',
524
524
'rsrc/js/phuix/PHUIXActionView.js' => 'b3465b9b',
525
525
'rsrc/js/phuix/PHUIXAutocomplete.js' => 'f6699267',
526
+
'rsrc/js/phuix/PHUIXButtonView.js' => 'da1c2a6b',
526
527
'rsrc/js/phuix/PHUIXDropdownMenu.js' => '8018ee50',
528
+
'rsrc/js/phuix/PHUIXExample.js' => '68af71ca',
527
529
'rsrc/js/phuix/PHUIXFormControl.js' => '83e03671',
528
530
'rsrc/js/phuix/PHUIXIconView.js' => 'bff6884b',
529
531
),
···
667
669
'javelin-behavior-phui-hovercards' => 'bcaccd64',
668
670
'javelin-behavior-phui-submenu' => 'a6f7a73b',
669
671
'javelin-behavior-phui-tab-group' => '0a0b10e9',
672
+
'javelin-behavior-phuix-example' => '68af71ca',
670
673
'javelin-behavior-policy-control' => 'd0c516d5',
671
674
'javelin-behavior-policy-rule-editor' => '5e9f347c',
672
675
'javelin-behavior-project-boards' => '4250a34e',
···
869
872
'phuix-action-list-view' => 'b5c256b8',
870
873
'phuix-action-view' => 'b3465b9b',
871
874
'phuix-autocomplete' => 'f6699267',
875
+
'phuix-button-view' => 'da1c2a6b',
872
876
'phuix-dropdown-menu' => '8018ee50',
873
877
'phuix-form-control-view' => '83e03671',
874
878
'phuix-icon-view' => 'bff6884b',
···
1371
1375
'6882e80a' => array(
1372
1376
'javelin-dom',
1373
1377
),
1378
+
'68af71ca' => array(
1379
+
'javelin-install',
1380
+
'javelin-dom',
1381
+
'phuix-button-view',
1382
+
),
1374
1383
'69adf288' => array(
1375
1384
'javelin-install',
1376
1385
),
···
1987
1996
'javelin-dom',
1988
1997
'javelin-util',
1989
1998
'phabricator-shaped-request',
1999
+
),
2000
+
'da1c2a6b' => array(
2001
+
'javelin-install',
2002
+
'javelin-dom',
1990
2003
),
1991
2004
'de2e896f' => array(
1992
2005
'javelin-behavior',
+2
src/__phutil_library_map__.php
+2
src/__phutil_library_map__.php
···
1806
1806
'PHUIUserAvailabilityView' => 'applications/calendar/view/PHUIUserAvailabilityView.php',
1807
1807
'PHUIWorkboardView' => 'view/phui/PHUIWorkboardView.php',
1808
1808
'PHUIWorkpanelView' => 'view/phui/PHUIWorkpanelView.php',
1809
+
'PHUIXComponentsExample' => 'applications/uiexample/examples/PHUIXComponentsExample.php',
1809
1810
'PassphraseAbstractKey' => 'applications/passphrase/keys/PassphraseAbstractKey.php',
1810
1811
'PassphraseConduitAPIMethod' => 'applications/passphrase/conduit/PassphraseConduitAPIMethod.php',
1811
1812
'PassphraseController' => 'applications/passphrase/controller/PassphraseController.php',
···
6938
6939
'PHUIUserAvailabilityView' => 'AphrontTagView',
6939
6940
'PHUIWorkboardView' => 'AphrontTagView',
6940
6941
'PHUIWorkpanelView' => 'AphrontTagView',
6942
+
'PHUIXComponentsExample' => 'PhabricatorUIExample',
6941
6943
'PassphraseAbstractKey' => 'Phobject',
6942
6944
'PassphraseConduitAPIMethod' => 'ConduitAPIMethod',
6943
6945
'PassphraseController' => 'PhabricatorController',
+122
src/applications/uiexample/examples/PHUIXComponentsExample.php
+122
src/applications/uiexample/examples/PHUIXComponentsExample.php
···
1
+
<?php
2
+
3
+
final class PHUIXComponentsExample extends PhabricatorUIExample {
4
+
5
+
public function getName() {
6
+
return pht('PHUIX Components');
7
+
}
8
+
9
+
public function getDescription() {
10
+
return pht('Copy/paste to make design maintenance twice as difficult.');
11
+
}
12
+
13
+
public function getCategory() {
14
+
return pht('PHUIX');
15
+
}
16
+
17
+
public function renderExample() {
18
+
$content = array();
19
+
20
+
$icons = array(
21
+
array(
22
+
'icon' => 'fa-rocket',
23
+
),
24
+
array(
25
+
'icon' => 'fa-cloud',
26
+
'color' => 'indigo',
27
+
),
28
+
);
29
+
30
+
foreach ($icons as $spec) {
31
+
$icon = new PHUIIconView();
32
+
33
+
$icon->setIcon(idx($spec, 'icon'), idx($spec, 'color'));
34
+
35
+
$client_id = celerity_generate_unique_node_id();
36
+
37
+
$server_view = $icon;
38
+
$client_view = javelin_tag(
39
+
'div',
40
+
array(
41
+
'id' => $client_id,
42
+
));
43
+
44
+
Javelin::initBehavior(
45
+
'phuix-example',
46
+
array(
47
+
'type' => 'icon',
48
+
'id' => $client_id,
49
+
'spec' => $spec,
50
+
));
51
+
52
+
$content[] = id(new AphrontMultiColumnView())
53
+
->addColumn($server_view)
54
+
->addColumn($client_view);
55
+
}
56
+
57
+
58
+
$buttons = array(
59
+
array(
60
+
'text' => pht('Submit'),
61
+
),
62
+
array(
63
+
'text' => pht('Activate'),
64
+
'icon' => 'fa-rocket',
65
+
),
66
+
array(
67
+
'type' => PHUIButtonView::BUTTONTYPE_SIMPLE,
68
+
'text' => pht('3 / 5 Comments'),
69
+
'icon' => 'fa-comment',
70
+
),
71
+
array(
72
+
'color' => PHUIButtonView::GREEN,
73
+
'text' => pht('Environmental!'),
74
+
),
75
+
);
76
+
77
+
foreach ($buttons as $spec) {
78
+
$button = new PHUIButtonView();
79
+
80
+
if (idx($spec, 'text') !== null) {
81
+
$button->setText($spec['text']);
82
+
}
83
+
84
+
if (idx($spec, 'icon') !== null) {
85
+
$button->setIcon($spec['icon']);
86
+
}
87
+
88
+
if (idx($spec, 'type') !== null) {
89
+
$button->setButtonType($spec['type']);
90
+
}
91
+
92
+
if (idx($spec, 'color') !== null) {
93
+
$button->setColor($spec['color']);
94
+
}
95
+
96
+
$client_id = celerity_generate_unique_node_id();
97
+
98
+
$server_view = $button;
99
+
$client_view = javelin_tag(
100
+
'div',
101
+
array(
102
+
'id' => $client_id,
103
+
));
104
+
105
+
Javelin::initBehavior(
106
+
'phuix-example',
107
+
array(
108
+
'type' => 'button',
109
+
'id' => $client_id,
110
+
'spec' => $spec,
111
+
));
112
+
113
+
$content[] = id(new AphrontMultiColumnView())
114
+
->addColumn($server_view)
115
+
->addColumn($client_view);
116
+
}
117
+
118
+
return id(new PHUIBoxView())
119
+
->appendChild($content)
120
+
->addMargin(PHUI::MARGIN_LARGE);
121
+
}
122
+
}
+109
webroot/rsrc/js/phuix/PHUIXButtonView.js
+109
webroot/rsrc/js/phuix/PHUIXButtonView.js
···
1
+
/**
2
+
* @provides phuix-button-view
3
+
* @requires javelin-install
4
+
* javelin-dom
5
+
*/
6
+
JX.install('PHUIXButtonView', {
7
+
8
+
statics: {
9
+
BUTTONTYPE_DEFAULT: 'buttontype.default',
10
+
BUTTONTYPE_SIMPLE: 'buttontype.simple'
11
+
},
12
+
13
+
members: {
14
+
_node: null,
15
+
_textNode: null,
16
+
17
+
_iconView: null,
18
+
_color: null,
19
+
_buttonType: null,
20
+
21
+
setIcon: function(icon) {
22
+
this.getIconView().setIcon(icon);
23
+
return this;
24
+
},
25
+
26
+
getIconView: function() {
27
+
if (!this._iconView) {
28
+
this._iconView = new JX.PHUIXIconView();
29
+
this._redraw();
30
+
}
31
+
return this._iconView;
32
+
},
33
+
34
+
setColor: function(color) {
35
+
var node = this.getNode();
36
+
37
+
if (this._color) {
38
+
JX.DOM.alterClass(node, this._color, false);
39
+
}
40
+
this._color = color;
41
+
JX.DOM.alterClass(node, this._color, true);
42
+
43
+
return this;
44
+
},
45
+
46
+
setButtonType: function(button_type) {
47
+
var self = JX.PHUIXButtonView;
48
+
49
+
this._buttonType = button_type;
50
+
var node = this.getNode();
51
+
52
+
var is_simple = (this._buttonType == self.BUTTONTYPE_SIMPLE);
53
+
JX.DOM.alterClass(node, 'simple', is_simple);
54
+
55
+
return this;
56
+
},
57
+
58
+
setText: function(text) {
59
+
JX.DOM.setContent(this._getTextNode(), text);
60
+
return this;
61
+
},
62
+
63
+
getNode: function() {
64
+
if (!this._node) {
65
+
var attrs = {
66
+
className: 'button'
67
+
};
68
+
69
+
this._node = JX.$N('button', attrs);
70
+
71
+
this._redraw();
72
+
}
73
+
74
+
return this._node;
75
+
},
76
+
77
+
_getTextNode: function() {
78
+
if (!this._textNode) {
79
+
var attrs = {
80
+
className: 'phui-button-text'
81
+
};
82
+
83
+
this._textNode = JX.$N('div', attrs);
84
+
}
85
+
86
+
return this._textNode;
87
+
},
88
+
89
+
_redraw: function() {
90
+
var node = this.getNode();
91
+
92
+
var icon = this._iconView;
93
+
var text = this._textNode;
94
+
95
+
var content = [];
96
+
if (icon) {
97
+
content.push(icon.getNode());
98
+
}
99
+
100
+
if (text) {
101
+
content.push(text);
102
+
}
103
+
104
+
JX.DOM.alterClass(node, 'has-icon', !!icon);
105
+
JX.DOM.setContent(node, content);
106
+
}
107
+
}
108
+
109
+
});
+65
webroot/rsrc/js/phuix/PHUIXExample.js
+65
webroot/rsrc/js/phuix/PHUIXExample.js
···
1
+
/**
2
+
* @provides javelin-behavior-phuix-example
3
+
* @requires javelin-install
4
+
* javelin-dom
5
+
* phuix-button-view
6
+
*/
7
+
8
+
JX.behavior('phuix-example', function(config) {
9
+
var node;
10
+
var spec;
11
+
var defaults;
12
+
13
+
switch (config.type) {
14
+
case 'button':
15
+
var button = new JX.PHUIXButtonView();
16
+
defaults = {
17
+
text: null,
18
+
icon: null,
19
+
type: null,
20
+
color: null
21
+
};
22
+
23
+
spec = JX.copy(defaults, config.spec);
24
+
25
+
if (spec.text !== null) {
26
+
button.setText(spec.text);
27
+
}
28
+
29
+
if (spec.icon !== null) {
30
+
button.setIcon(spec.icon);
31
+
}
32
+
33
+
if (spec.type !== null) {
34
+
button.setButtonType(spec.type);
35
+
}
36
+
37
+
if (spec.color !== null) {
38
+
button.setColor(spec.color);
39
+
}
40
+
41
+
node = button.getNode();
42
+
break;
43
+
case 'icon':
44
+
var icon = new JX.PHUIXIconView();
45
+
defaults = {
46
+
icon: null,
47
+
color: null
48
+
};
49
+
50
+
spec = JX.copy(defaults, config.spec);
51
+
52
+
if (spec.icon !== null) {
53
+
icon.setIcon(spec.icon);
54
+
}
55
+
56
+
if (spec.color !== null) {
57
+
icon.setColor(spec.color);
58
+
}
59
+
60
+
node = icon.getNode();
61
+
break;
62
+
}
63
+
64
+
JX.DOM.setContent(JX.$(config.id), node);
65
+
});