Skip to content

Commit e187312

Browse files
committed
Action Menu (mobile)
Summary: First pass here, still needs some UI work (maybe? tablets?). Getting it out to see if implementation is corrrect. Test Plan: Shrink Maniphest task on Chrome, see new UI. Toggle menu. Test on iOS. Reviewers: epriestley, btrahan Reviewed By: epriestley CC: aran, Korvin Differential Revision: https://secure.phabricator.com/D5631
1 parent 0ad05e9 commit e187312

File tree

16 files changed

+345
-249
lines changed

16 files changed

+345
-249
lines changed
1 KB
Loading
1.06 KB
Loading
1.01 KB
Loading
1.03 KB
Loading
1.01 KB
Loading
1.01 KB
Loading

resources/sprite/manifest/icon.json

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,21 @@
11
{
22
"version" : 1,
33
"sprites" : {
4+
"action-action-menu" : {
5+
"name" : "action-action-menu",
6+
"rule" : ".action-action-menu",
7+
"hash" : "533fe3e36cfbf890ad7348330a2328a9"
8+
},
9+
"action-action-menu-grey" : {
10+
"name" : "action-action-menu-grey",
11+
"rule" : ".action-action-menu-grey",
12+
"hash" : "9bc229a81b33bb62bcb4e025283ffbe5"
13+
},
14+
"action-action-menu-white" : {
15+
"name" : "action-action-menu-white",
16+
"rule" : ".action-action-menu-white, .device-desktop .phabricator-action-view:hover .action-action-menu",
17+
"hash" : "db0ff28b9ee23cdbf6125a7864b693b0"
18+
},
419
"action-arrow_left" : {
520
"name" : "action-arrow_left",
621
"rule" : ".action-arrow_left",

src/__celerity_resource_map__.php

Lines changed: 45 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -597,15 +597,15 @@
597597
),
598598
'/rsrc/image/sprite-icon-X2.png' =>
599599
array(
600-
'hash' => 'c9fae25bc6221922ce26517e654a18e4',
601-
'uri' => '/res/c9fae25b/rsrc/image/sprite-icon-X2.png',
600+
'hash' => '1610d410ca8730ec26232cd5698a962a',
601+
'uri' => '/res/1610d410/rsrc/image/sprite-icon-X2.png',
602602
'disk' => '/rsrc/image/sprite-icon-X2.png',
603603
'type' => 'png',
604604
),
605605
'/rsrc/image/sprite-icon.png' =>
606606
array(
607-
'hash' => 'b690ea69bf5f2abe84d0a6e9ef64b03d',
608-
'uri' => '/res/b690ea69/rsrc/image/sprite-icon.png',
607+
'hash' => '891dea483c37bdc43c00372944c98165',
608+
'uri' => '/res/891dea48/rsrc/image/sprite-icon.png',
609609
'disk' => '/rsrc/image/sprite-icon.png',
610610
'type' => 'png',
611611
),
@@ -2849,7 +2849,7 @@
28492849
),
28502850
'phabricator-action-list-view-css' =>
28512851
array(
2852-
'uri' => '/res/7a67c3b9/rsrc/css/layout/phabricator-action-list-view.css',
2852+
'uri' => '/res/3d02ca59/rsrc/css/layout/phabricator-action-list-view.css',
28532853
'type' => 'css',
28542854
'requires' =>
28552855
array(
@@ -2923,7 +2923,7 @@
29232923
),
29242924
'phabricator-crumbs-view-css' =>
29252925
array(
2926-
'uri' => '/res/2857d229/rsrc/css/layout/phabricator-crumbs-view.css',
2926+
'uri' => '/res/31ef131e/rsrc/css/layout/phabricator-crumbs-view.css',
29272927
'type' => 'css',
29282928
'requires' =>
29292929
array(
@@ -3830,7 +3830,7 @@
38303830
),
38313831
'sprite-icon-css' =>
38323832
array(
3833-
'uri' => '/res/e7d63fcf/rsrc/css/sprite-icon.css',
3833+
'uri' => '/res/fa36bb72/rsrc/css/sprite-icon.css',
38343834
'type' => 'css',
38353835
'requires' =>
38363836
array(
@@ -3903,7 +3903,7 @@
39033903
), array(
39043904
'packages' =>
39053905
array(
3906-
'90eede2c' =>
3906+
'60914b69' =>
39073907
array(
39083908
'name' => 'core.pkg.css',
39093909
'symbols' =>
@@ -3945,7 +3945,7 @@
39453945
34 => 'phabricator-object-item-list-view-css',
39463946
35 => 'global-drag-and-drop-css',
39473947
),
3948-
'uri' => '/res/pkg/90eede2c/core.pkg.css',
3948+
'uri' => '/res/pkg/60914b69/core.pkg.css',
39493949
'type' => 'css',
39503950
),
39513951
'bf16b308' =>
@@ -4135,16 +4135,16 @@
41354135
'reverse' =>
41364136
array(
41374137
'aphront-attached-file-view-css' => '6b1fccc6',
4138-
'aphront-dialog-view-css' => '90eede2c',
4139-
'aphront-error-view-css' => '90eede2c',
4140-
'aphront-form-view-css' => '90eede2c',
4141-
'aphront-list-filter-view-css' => '90eede2c',
4142-
'aphront-pager-view-css' => '90eede2c',
4143-
'aphront-panel-view-css' => '90eede2c',
4144-
'aphront-table-view-css' => '90eede2c',
4145-
'aphront-tokenizer-control-css' => '90eede2c',
4146-
'aphront-tooltip-css' => '90eede2c',
4147-
'aphront-typeahead-control-css' => '90eede2c',
4138+
'aphront-dialog-view-css' => '60914b69',
4139+
'aphront-error-view-css' => '60914b69',
4140+
'aphront-form-view-css' => '60914b69',
4141+
'aphront-list-filter-view-css' => '60914b69',
4142+
'aphront-pager-view-css' => '60914b69',
4143+
'aphront-panel-view-css' => '60914b69',
4144+
'aphront-table-view-css' => '60914b69',
4145+
'aphront-tokenizer-control-css' => '60914b69',
4146+
'aphront-tooltip-css' => '60914b69',
4147+
'aphront-typeahead-control-css' => '60914b69',
41484148
'differential-changeset-view-css' => '8aaacd1b',
41494149
'differential-core-view-css' => '8aaacd1b',
41504150
'differential-inline-comment-editor' => 'e96b08f8',
@@ -4158,7 +4158,7 @@
41584158
'differential-table-of-contents-css' => '8aaacd1b',
41594159
'diffusion-commit-view-css' => 'c8ce2d88',
41604160
'diffusion-icons-css' => 'c8ce2d88',
4161-
'global-drag-and-drop-css' => '90eede2c',
4161+
'global-drag-and-drop-css' => '60914b69',
41624162
'inline-comment-summary-css' => '8aaacd1b',
41634163
'javelin-aphlict' => 'bf16b308',
41644164
'javelin-behavior' => 'a2f94024',
@@ -4230,47 +4230,47 @@
42304230
'javelin-util' => 'a2f94024',
42314231
'javelin-vector' => 'a2f94024',
42324232
'javelin-workflow' => 'a2f94024',
4233-
'lightbox-attachment-css' => '90eede2c',
4233+
'lightbox-attachment-css' => '60914b69',
42344234
'maniphest-task-summary-css' => '6b1fccc6',
42354235
'maniphest-transaction-detail-css' => '6b1fccc6',
42364236
'phabricator-busy' => 'bf16b308',
42374237
'phabricator-content-source-view-css' => '8aaacd1b',
4238-
'phabricator-core-buttons-css' => '90eede2c',
4239-
'phabricator-core-css' => '90eede2c',
4240-
'phabricator-crumbs-view-css' => '90eede2c',
4241-
'phabricator-directory-css' => '90eede2c',
4238+
'phabricator-core-buttons-css' => '60914b69',
4239+
'phabricator-core-css' => '60914b69',
4240+
'phabricator-crumbs-view-css' => '60914b69',
4241+
'phabricator-directory-css' => '60914b69',
42424242
'phabricator-drag-and-drop-file-upload' => 'e96b08f8',
42434243
'phabricator-dropdown-menu' => 'bf16b308',
42444244
'phabricator-file-upload' => 'bf16b308',
4245-
'phabricator-filetree-view-css' => '90eede2c',
4246-
'phabricator-flag-css' => '90eede2c',
4247-
'phabricator-form-view-css' => '90eede2c',
4248-
'phabricator-header-view-css' => '90eede2c',
4249-
'phabricator-jump-nav' => '90eede2c',
4245+
'phabricator-filetree-view-css' => '60914b69',
4246+
'phabricator-flag-css' => '60914b69',
4247+
'phabricator-form-view-css' => '60914b69',
4248+
'phabricator-header-view-css' => '60914b69',
4249+
'phabricator-jump-nav' => '60914b69',
42504250
'phabricator-keyboard-shortcut' => 'bf16b308',
42514251
'phabricator-keyboard-shortcut-manager' => 'bf16b308',
4252-
'phabricator-main-menu-view' => '90eede2c',
4252+
'phabricator-main-menu-view' => '60914b69',
42534253
'phabricator-menu-item' => 'bf16b308',
4254-
'phabricator-nav-view-css' => '90eede2c',
4254+
'phabricator-nav-view-css' => '60914b69',
42554255
'phabricator-notification' => 'bf16b308',
4256-
'phabricator-notification-css' => '90eede2c',
4257-
'phabricator-notification-menu-css' => '90eede2c',
4258-
'phabricator-object-item-list-view-css' => '90eede2c',
4256+
'phabricator-notification-css' => '60914b69',
4257+
'phabricator-notification-menu-css' => '60914b69',
4258+
'phabricator-object-item-list-view-css' => '60914b69',
42594259
'phabricator-object-selector-css' => '8aaacd1b',
42604260
'phabricator-prefab' => 'bf16b308',
42614261
'phabricator-project-tag-css' => '6b1fccc6',
4262-
'phabricator-remarkup-css' => '90eede2c',
4262+
'phabricator-remarkup-css' => '60914b69',
42634263
'phabricator-shaped-request' => 'e96b08f8',
4264-
'phabricator-side-menu-view-css' => '90eede2c',
4265-
'phabricator-standard-page-view' => '90eede2c',
4264+
'phabricator-side-menu-view-css' => '60914b69',
4265+
'phabricator-standard-page-view' => '60914b69',
42664266
'phabricator-textareautils' => 'bf16b308',
42674267
'phabricator-tooltip' => 'bf16b308',
4268-
'phabricator-transaction-view-css' => '90eede2c',
4269-
'phabricator-zindex-css' => '90eede2c',
4270-
'sprite-apps-large-css' => '90eede2c',
4271-
'sprite-gradient-css' => '90eede2c',
4272-
'sprite-icon-css' => '90eede2c',
4273-
'sprite-menu-css' => '90eede2c',
4274-
'syntax-highlighting-css' => '90eede2c',
4268+
'phabricator-transaction-view-css' => '60914b69',
4269+
'phabricator-zindex-css' => '60914b69',
4270+
'sprite-apps-large-css' => '60914b69',
4271+
'sprite-gradient-css' => '60914b69',
4272+
'sprite-icon-css' => '60914b69',
4273+
'sprite-menu-css' => '60914b69',
4274+
'syntax-highlighting-css' => '60914b69',
42754275
),
42764276
));

src/applications/maniphest/controller/ManiphestTaskDetailController.php

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -335,20 +335,21 @@ public function processRequest() {
335335
$user, $task->getPHID());
336336

337337
$object_name = 'T'.$task->getID();
338+
$actions = $this->buildActionView($task);
338339

339340
$crumbs = $this->buildApplicationCrumbs();
340341
$crumbs->addCrumb(
341342
id(new PhabricatorCrumbView())
342343
->setName($object_name)
343344
->setHref('/'.$object_name))
345+
->setActionList($actions)
344346
->addAction(
345347
id(new PhabricatorMenuItemView())
346348
->setHref($this->getApplicationURI('/task/create/'))
347349
->setName(pht('Create Task'))
348350
->setIcon('create'));
349351

350352
$header = $this->buildHeaderView($task);
351-
$actions = $this->buildActionView($task);
352353
$properties = $this->buildPropertyView($task, $aux_fields, $edges, $engine);
353354

354355
return $this->buildApplicationPage(

src/view/layout/PhabricatorActionListView.php

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ final class PhabricatorActionListView extends AphrontView {
44

55
private $actions = array();
66
private $object;
7+
private $id = null;
78

89
public function setObject(PhabricatorLiskDAO $object) {
910
$this->object = $object;
@@ -15,6 +16,11 @@ public function addAction(PhabricatorActionView $view) {
1516
return $this;
1617
}
1718

19+
public function setID($id) {
20+
$this->id = $id;
21+
return $this;
22+
}
23+
1824
public function render() {
1925
if (!$this->user) {
2026
throw new Exception(pht("Call setUser() before render()!"));
@@ -41,6 +47,7 @@ public function render() {
4147
'ul',
4248
array(
4349
'class' => 'phabricator-action-list-view',
50+
'id' => $this->id
4451
),
4552
$actions);
4653
}

src/view/layout/PhabricatorCrumbsView.php

Lines changed: 43 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ final class PhabricatorCrumbsView extends AphrontView {
44

55
private $crumbs = array();
66
private $actions = array();
7+
private $actionListID = null;
78

89
protected function canAppendChild() {
910
return false;
@@ -14,10 +15,14 @@ public function addCrumb(PhabricatorCrumbView $crumb) {
1415
return $this;
1516
}
1617

17-
1818
public function addAction(PhabricatorMenuItemView $action) {
1919
$this->actions[] = $action;
20+
return $this;
21+
}
2022

23+
public function setActionList(PhabricatorActionListView $list) {
24+
$this->actionListID = celerity_generate_unique_node_id();
25+
$list->setId($this->actionListID);
2126
return $this;
2227
}
2328

@@ -44,6 +49,7 @@ public function render() {
4449
),
4550
$action->getName()
4651
);
52+
4753
$actions[] = javelin_tag(
4854
'a',
4955
array(
@@ -57,6 +63,42 @@ public function render() {
5763
));
5864
}
5965

66+
if ($this->actionListID) {
67+
$icon_id = celerity_generate_unique_node_id();
68+
$icon = phutil_tag(
69+
'span',
70+
array(
71+
'class' => 'sprite-icon action-action-menu'
72+
),
73+
'');
74+
$name = phutil_tag(
75+
'span',
76+
array(
77+
'class' => 'phabricator-crumbs-action-name'
78+
),
79+
pht('Actions'));
80+
81+
$actions[] = javelin_tag(
82+
'a',
83+
array(
84+
'href' => '#',
85+
'class' =>
86+
'phabricator-crumbs-action phabricator-crumbs-action-menu',
87+
'sigil' => 'jx-toggle-class',
88+
'id' => $icon_id,
89+
'meta' => array(
90+
'map' => array(
91+
$this->actionListID => 'phabricator-action-list-toggle',
92+
$icon_id => 'phabricator-crumbs-action-menu-open'
93+
),
94+
),
95+
),
96+
array(
97+
$icon,
98+
$name,
99+
));
100+
}
101+
60102
$action_view = phutil_tag(
61103
'div',
62104
array(

webroot/rsrc/css/layout/phabricator-action-list-view.css

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,11 +29,18 @@
2929
}
3030

3131
.device .phabricator-action-list-view {
32-
background: #f3f3f3;
3332
border-top: 1px solid #dcdcdc;
3433
padding: .5em 0;
3534
}
3635

36+
.device .phabricator-action-list-view {
37+
display: none;
38+
}
39+
40+
.device .phabricator-action-list-view.phabricator-action-list-toggle {
41+
display: block;
42+
}
43+
3744
.phabricator-action-view {
3845
padding: 1px 0;
3946
position: relative;

webroot/rsrc/css/layout/phabricator-crumbs-view.css

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,18 @@
2525
text-shadow: 0 1px 2px rgba(255, 255, 255, 0.9);
2626
}
2727

28+
.phabricator-crumbs-action.phabricator-crumbs-action-menu {
29+
display: none;
30+
}
31+
32+
.device .phabricator-crumbs-action.phabricator-crumbs-action-menu {
33+
display: inline-block;
34+
}
35+
36+
.device .phabricator-crumbs-action-menu-open {
37+
background: rgba(0,0,0,.1);
38+
}
39+
2840
.phabricator-crumbs-view + .phabricator-header-shell {
2941
border-top: none;
3042
}

0 commit comments

Comments
 (0)