@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
Improve commit action item layout on mobile
Summary:
Ref T13552. Build the "commit list" elements so that the menu action items collapse under the element on mobile.
Also change the mobile breakpoint to 512px because my Safari window can't go any narrower than 508px. Future changes to responsive design will be more content-aware anyway.
Test Plan: Looked at commits in various interfaces, at desktop and mobile widths.
Maniphest Tasks: T13552
Differential Revision: https://secure.phabricator.com/D21430
+303
-64
+17
-15
resources/celerity/map.php
+17
-15
resources/celerity/map.php
···
9
9
'names' => array(
10
10
'conpherence.pkg.css' => '0e3cf785',
11
11
'conpherence.pkg.js' => '020aebcf',
12
-
'core.pkg.css' => '9cb7cb3f',
13
-
'core.pkg.js' => '845355f4',
12
+
'core.pkg.css' => '2ffd6897',
13
+
'core.pkg.js' => 'adc34883',
14
14
'dark-console.pkg.js' => '187792c2',
15
15
'differential.pkg.css' => '5c459f92',
16
16
'differential.pkg.js' => '218fda21',
···
121
121
'rsrc/css/font/font-awesome.css' => '3883938a',
122
122
'rsrc/css/font/font-lato.css' => '23631304',
123
123
'rsrc/css/font/phui-font-icon-base.css' => '303c9b87',
124
-
'rsrc/css/fuel/fuel-grid.css' => 'd87031e7',
124
+
'rsrc/css/fuel/fuel-grid.css' => '66697240',
125
125
'rsrc/css/fuel/fuel-map.css' => 'd6e31510',
126
+
'rsrc/css/fuel/fuel-menu.css' => 'cb35abe3',
126
127
'rsrc/css/layout/phabricator-source-code-view.css' => '03d7ac28',
127
128
'rsrc/css/phui/button/phui-button-bar.css' => 'a4aa75c4',
128
129
'rsrc/css/phui/button/phui-button-simple.css' => '1ff278aa',
···
135
136
'rsrc/css/phui/object-item/phui-oi-color.css' => 'b517bfa0',
136
137
'rsrc/css/phui/object-item/phui-oi-drag-ui.css' => 'da15d3dc',
137
138
'rsrc/css/phui/object-item/phui-oi-flush-ui.css' => '490e2e2e',
138
-
'rsrc/css/phui/object-item/phui-oi-list-view.css' => '4b0def39',
139
+
'rsrc/css/phui/object-item/phui-oi-list-view.css' => 'ecd651d5',
139
140
'rsrc/css/phui/object-item/phui-oi-simple-ui.css' => '6a30fa46',
140
141
'rsrc/css/phui/phui-action-list.css' => '1b0085b2',
141
142
'rsrc/css/phui/phui-action-panel.css' => '6c386cbf',
···
475
476
'rsrc/js/core/behavior-choose-control.js' => '04f8a1e3',
476
477
'rsrc/js/core/behavior-copy.js' => 'cf32921f',
477
478
'rsrc/js/core/behavior-detect-timezone.js' => '78bc5d94',
478
-
'rsrc/js/core/behavior-device.js' => '0cf79f45',
479
+
'rsrc/js/core/behavior-device.js' => 'ac2b1e01',
479
480
'rsrc/js/core/behavior-drag-and-drop-textarea.js' => '7ad020a5',
480
481
'rsrc/js/core/behavior-fancy-datepicker.js' => '956f3eeb',
481
482
'rsrc/js/core/behavior-form.js' => '55d7b788',
···
576
577
'diviner-shared-css' => '4bd263b0',
577
578
'font-fontawesome' => '3883938a',
578
579
'font-lato' => '23631304',
579
-
'fuel-grid-css' => 'd87031e7',
580
+
'fuel-grid-css' => '66697240',
580
581
'fuel-map-css' => 'd6e31510',
582
+
'fuel-menu-css' => 'cb35abe3',
581
583
'global-drag-and-drop-css' => '1d2713a4',
582
584
'harbormaster-css' => '8dfe16b2',
583
585
'herald-css' => '648d39e2',
···
615
617
'javelin-behavior-day-view' => '727a5a61',
616
618
'javelin-behavior-desktop-notifications-control' => '070679fe',
617
619
'javelin-behavior-detect-timezone' => '78bc5d94',
618
-
'javelin-behavior-device' => '0cf79f45',
620
+
'javelin-behavior-device' => 'ac2b1e01',
619
621
'javelin-behavior-differential-diff-radios' => '925fe8cd',
620
622
'javelin-behavior-differential-populate' => 'b86ef6c2',
621
623
'javelin-behavior-diffusion-commit-branches' => '4b671572',
···
870
872
'phui-oi-color-css' => 'b517bfa0',
871
873
'phui-oi-drag-ui-css' => 'da15d3dc',
872
874
'phui-oi-flush-ui-css' => '490e2e2e',
873
-
'phui-oi-list-view-css' => '4b0def39',
875
+
'phui-oi-list-view-css' => 'ecd651d5',
874
876
'phui-oi-simple-ui-css' => '6a30fa46',
875
877
'phui-pager-css' => 'd022c7ad',
876
878
'phui-pinboard-view-css' => '1f08f5d8',
···
1005
1007
'javelin-workflow',
1006
1008
'javelin-dom',
1007
1009
'phabricator-draggable-list',
1008
-
),
1009
-
'0cf79f45' => array(
1010
-
'javelin-behavior',
1011
-
'javelin-stratcom',
1012
-
'javelin-dom',
1013
-
'javelin-vector',
1014
-
'javelin-install',
1015
1010
),
1016
1011
'0d2490ce' => array(
1017
1012
'javelin-install',
···
1929
1924
'javelin-install',
1930
1925
'javelin-dom',
1931
1926
'phabricator-notification',
1927
+
),
1928
+
'ac2b1e01' => array(
1929
+
'javelin-behavior',
1930
+
'javelin-stratcom',
1931
+
'javelin-dom',
1932
+
'javelin-vector',
1933
+
'javelin-install',
1932
1934
),
1933
1935
'ad258e28' => array(
1934
1936
'javelin-behavior',
+5
-1
src/__phutil_library_map__.php
+5
-1
src/__phutil_library_map__.php
···
1311
1311
'FuelGridView' => 'view/fuel/FuelGridView.php',
1312
1312
'FuelMapItemView' => 'view/fuel/FuelMapItemView.php',
1313
1313
'FuelMapView' => 'view/fuel/FuelMapView.php',
1314
+
'FuelMenuItemView' => 'view/fuel/FuelMenuItemView.php',
1315
+
'FuelMenuView' => 'view/fuel/FuelMenuView.php',
1314
1316
'FuelView' => 'view/fuel/FuelView.php',
1315
1317
'FundBacker' => 'applications/fund/storage/FundBacker.php',
1316
1318
'FundBackerCart' => 'applications/fund/phortune/FundBackerCart.php',
···
7447
7449
'FlagEditConduitAPIMethod' => 'FlagConduitAPIMethod',
7448
7450
'FlagQueryConduitAPIMethod' => 'FlagConduitAPIMethod',
7449
7451
'FuelComponentView' => 'FuelView',
7450
-
'FuelGridCellView' => 'FuelView',
7452
+
'FuelGridCellView' => 'FuelComponentView',
7451
7453
'FuelGridRowView' => 'FuelView',
7452
7454
'FuelGridView' => 'FuelComponentView',
7453
7455
'FuelMapItemView' => 'AphrontView',
7454
7456
'FuelMapView' => 'FuelComponentView',
7457
+
'FuelMenuItemView' => 'FuelView',
7458
+
'FuelMenuView' => 'FuelComponentView',
7455
7459
'FuelView' => 'AphrontView',
7456
7460
'FundBacker' => array(
7457
7461
'FundDAO',
+22
-11
src/applications/diffusion/view/DiffusionCommitGraphView.php
+22
-11
src/applications/diffusion/view/DiffusionCommitGraphView.php
···
452
452
$uri = $drequest->generateURI(
453
453
array(
454
454
'action' => 'browse',
455
-
'path' => $path,
455
+
'path' => $path,
456
+
'commit' => $hash,
456
457
));
457
458
458
-
$item->newAction()
459
-
->setIcon('fa-folder-open-o bluegrey')
459
+
$menu_item = $item->newMenuItem()
460
460
->setName(pht('Browse Repository'))
461
-
->setHref($uri);
461
+
->setURI($uri);
462
+
463
+
$menu_item->newIcon()
464
+
->setIcon('fa-folder-open-o')
465
+
->setColor('bluegrey');
462
466
}
463
467
464
468
private function addBuildAction(PHUIObjectItemView $item, $hash) {
···
483
487
$uri = null;
484
488
}
485
489
486
-
$item->newAction()
487
-
->setIcon($icon.' '.$color)
490
+
$menu_item = $item->newMenuItem()
488
491
->setName($name)
489
-
->setHref($uri)
492
+
->setURI($uri)
490
493
->setDisabled(($uri === null));
494
+
495
+
$menu_item->newIcon()
496
+
->setIcon($icon)
497
+
->setColor($color);
491
498
}
492
499
493
500
private function addAuditAction(PHUIObjectItemView $item_view, $hash) {
···
502
509
503
510
$uri = $commit->getURI();
504
511
505
-
$is_disabled = $status->isNoAudit();
512
+
$is_disabled = false;
506
513
} else {
507
514
$text = pht('No Audit');
508
515
$color = 'grey';
···
512
519
$is_disabled = true;
513
520
}
514
521
515
-
$item_view->newAction()
516
-
->setIcon($icon.' '.$color)
522
+
$menu_item = $item_view->newMenuItem()
517
523
->setName($text)
518
-
->setHref($uri)
524
+
->setURI($uri)
525
+
->setBackgroundColor($color)
519
526
->setDisabled($is_disabled);
527
+
528
+
$menu_item->newIcon()
529
+
->setIcon($icon)
530
+
->setColor($color);
520
531
}
521
532
522
533
private function getBuildable(PhabricatorRepositoryCommit $commit) {
+2
-2
src/view/fuel/FuelGridCellView.php
+2
-2
src/view/fuel/FuelGridCellView.php
···
1
1
<?php
2
2
3
3
final class FuelGridCellView
4
-
extends FuelView {
4
+
extends FuelComponentView {
5
5
6
6
private $content;
7
7
···
17
17
public function render() {
18
18
$content = $this->getContent();
19
19
20
-
return phutil_tag(
20
+
return $this->newComponentTag(
21
21
'div',
22
22
array(
23
23
'class' => 'fuel-grid-cell',
+114
src/view/fuel/FuelMenuItemView.php
+114
src/view/fuel/FuelMenuItemView.php
···
1
+
<?php
2
+
3
+
final class FuelMenuItemView
4
+
extends FuelView {
5
+
6
+
private $name;
7
+
private $uri;
8
+
private $icon;
9
+
private $disabled;
10
+
private $backgroundColor;
11
+
12
+
public function setURI($uri) {
13
+
$this->uri = $uri;
14
+
return $this;
15
+
}
16
+
17
+
public function getURI() {
18
+
return $this->uri;
19
+
}
20
+
21
+
public function setName($name) {
22
+
$this->name = $name;
23
+
return $this;
24
+
}
25
+
26
+
public function getName() {
27
+
return $this->name;
28
+
}
29
+
30
+
public function setIcon(PHUIIconView $icon) {
31
+
$this->icon = $icon;
32
+
return $this;
33
+
}
34
+
35
+
public function getIcon() {
36
+
return $this->icon;
37
+
}
38
+
39
+
public function newIcon() {
40
+
$icon = new PHUIIconView();
41
+
$this->setIcon($icon);
42
+
return $icon;
43
+
}
44
+
45
+
public function setDisabled($disabled) {
46
+
$this->disabled = $disabled;
47
+
return $this;
48
+
}
49
+
50
+
public function getDisabled() {
51
+
return $this->disabled;
52
+
}
53
+
54
+
public function setBackgroundColor($background_color) {
55
+
$this->backgroundColor = $background_color;
56
+
return $this;
57
+
}
58
+
59
+
public function getBackgroundColor() {
60
+
return $this->backgroundColor;
61
+
}
62
+
63
+
public function render() {
64
+
$icon = $this->getIcon();
65
+
66
+
$name = $this->getName();
67
+
$uri = $this->getURI();
68
+
69
+
$icon = phutil_tag(
70
+
'span',
71
+
array(
72
+
'class' => 'fuel-menu-item-icon',
73
+
),
74
+
$icon);
75
+
76
+
$item_link = phutil_tag(
77
+
'a',
78
+
array(
79
+
'href' => $uri,
80
+
'class' => 'fuel-menu-item-link',
81
+
),
82
+
array(
83
+
$icon,
84
+
$name,
85
+
));
86
+
87
+
$classes = array();
88
+
$classes[] = 'fuel-menu-item';
89
+
90
+
if ($this->getDisabled()) {
91
+
$classes[] = 'disabled';
92
+
}
93
+
94
+
$background_color = $this->getBackgroundColor();
95
+
if ($background_color !== null) {
96
+
$classes[] = 'fuel-menu-item-background-color-'.$background_color;
97
+
}
98
+
99
+
100
+
if ($uri !== null) {
101
+
$classes[] = 'has-link';
102
+
}
103
+
104
+
$classes = implode(' ', $classes);
105
+
106
+
return phutil_tag(
107
+
'div',
108
+
array(
109
+
'class' => $classes,
110
+
),
111
+
$item_link);
112
+
}
113
+
114
+
}
+38
src/view/fuel/FuelMenuView.php
+38
src/view/fuel/FuelMenuView.php
···
1
+
<?php
2
+
3
+
final class FuelMenuView
4
+
extends FuelComponentView {
5
+
6
+
private $items = array();
7
+
8
+
public function newItem() {
9
+
$item = new FuelMenuItemView();
10
+
$this->items[] = $item;
11
+
return $item;
12
+
}
13
+
14
+
public function render() {
15
+
require_celerity_resource('fuel-menu-css');
16
+
17
+
$items = $this->items;
18
+
19
+
if (!$items) {
20
+
return null;
21
+
}
22
+
23
+
$list = phutil_tag(
24
+
'div',
25
+
array(
26
+
'class' => 'fuel-menu',
27
+
),
28
+
$items);
29
+
30
+
return $this->newComponentTag(
31
+
'div',
32
+
array(
33
+
'class' => 'fuel-menu-component',
34
+
),
35
+
$list);
36
+
}
37
+
38
+
}
+5
src/view/phui/PHUIIconView.php
+5
src/view/phui/PHUIIconView.php
+23
-24
src/view/phui/PHUIObjectItemView.php
+23
-24
src/view/phui/PHUIObjectItemView.php
···
16
16
private $bylines = array();
17
17
private $grippable;
18
18
private $actions = array();
19
-
private $actionItems = array();
20
19
private $headIcons = array();
21
20
private $disabled;
22
21
private $imageURI;
···
31
30
private $description;
32
31
private $clickable;
33
32
private $mapViews = array();
33
+
private $menu;
34
34
35
35
private $selectableName;
36
36
private $selectableValue;
···
214
214
return $this;
215
215
}
216
216
217
-
public function newAction() {
218
-
$action = new PhabricatorActionView();
219
-
$this->actionItems[] = $action;
220
-
return $action;
217
+
public function newMenuItem() {
218
+
if (!$this->menu) {
219
+
$this->menu = new FuelMenuView();
220
+
}
221
+
222
+
return $this->menu->newItem();
221
223
}
222
224
223
225
public function newMapView() {
···
763
765
));
764
766
}
765
767
766
-
$column4 = null;
767
-
if ($this->actionItems) {
768
-
$action_list = id(new PhabricatorActionListView())
769
-
->setViewer($viewer);
770
-
771
-
foreach ($this->actionItems as $action_item) {
772
-
$action_list->addAction($action_item);
773
-
}
774
-
775
-
$column4 = phutil_tag(
776
-
'div',
777
-
array(
778
-
'class' => 'phui-oi-col2 phui-oi-action-list',
779
-
),
780
-
$action_list);
781
-
}
782
-
783
768
$table = phutil_tag(
784
769
'div',
785
770
array(
···
792
777
$column1,
793
778
$column2,
794
779
$column3,
795
-
$column4,
796
780
)));
797
781
798
782
$box = phutil_tag(
···
859
843
$frame_content,
860
844
));
861
845
862
-
return $frame;
846
+
$grid_view = id(new FuelGridView())
847
+
->addClass('fuel-grid-tablet');
848
+
$grid_row = $grid_view->newRow();
849
+
850
+
$grid_row->newCell()
851
+
->setContent($frame);
852
+
853
+
if ($this->menu) {
854
+
$menu = $this->menu;
855
+
856
+
$grid_row->newCell()
857
+
->addClass('phui-oi-menu')
858
+
->setContent($menu);
859
+
}
860
+
861
+
return $grid_view;
863
862
}
864
863
865
864
private function renderStatusIcon($icon, $label) {
+10
-8
webroot/rsrc/css/fuel/fuel-grid.css
+10
-8
webroot/rsrc/css/fuel/fuel-grid.css
···
2
2
* @provides fuel-grid-css
3
3
*/
4
4
5
-
.device-desktop .fuel-grid {
5
+
.device-desktop .fuel-grid,
6
+
.device-tablet .fuel-grid-tablet > .fuel-grid {
6
7
display: table;
7
8
table-layout: fixed;
8
9
}
9
10
10
-
.device-desktop .fuel-grid-body {
11
+
.device-desktop .fuel-grid-body,
12
+
.device-tablet .fuel-grid-tablet > .fuel-grid > .fuel-grid-body {
11
13
display: table-row-group;
12
14
}
13
15
14
-
.device-desktop .fuel-grid-row {
16
+
.device-desktop .fuel-grid-row,
17
+
.device-tablet .fuel-grid-tablet > .fuel-grid > .fuel-grid-body >
18
+
.fuel-grid-row {
15
19
display: table-row;
16
20
}
17
21
18
-
.device-desktop .fuel-grid-cell {
22
+
.device-desktop .fuel-grid-cell,
23
+
.device-tablet .fuel-grid-tablet > .fuel-grid > .fuel-grid-body >
24
+
.fuel-grid-row > .fuel-grid-cell {
19
25
display: table-cell;
20
26
vertical-align: top;
21
-
}
22
-
23
-
.device-desktop .fuel-grid-cell-count-2 > .fuel-grid-cell {
24
-
width: 50%;
25
27
}
26
28
27
29
.fuel-grid-property-list > .fuel-grid {
+14
-2
webroot/rsrc/css/phui/object-item/phui-oi-list-view.css
+14
-2
webroot/rsrc/css/phui/object-item/phui-oi-list-view.css
···
726
726
background: linear-gradient({$lightbluebackground}, #fff 66%, #fff);
727
727
}
728
728
729
-
.phui-oi-action-list {
729
+
.phui-oi-menu {
730
730
background: {$lightbluebackground};
731
-
border-left: 1px solid {$thinblueborder};
731
+
border-style: solid;
732
+
border-color: {$thinblueborder};
732
733
padding: 4px;
733
734
}
735
+
736
+
.device-desktop .phui-oi-menu,
737
+
.device-tablet .phui-oi-menu {
738
+
width: 200px;
739
+
border-width: 0 0 1px 1px;
740
+
}
741
+
742
+
.device-phone .phui-oi-menu {
743
+
border-width: 0 0 1px;
744
+
margin-bottom: 12px;
745
+
}