Skip to content

Commit bee112c

Browse files
author
epriestley
committed
Fix various app nav issues
Summary: - Fix width, corresponding to wider sprites. - Sprite the "Audit" icon. - Mark the meta-application as device-ready. - Fix some collapse/expand bugs with the draggable local navs. - Add texture to local nav. - Darken the application nav to make it more cohesive with the main nav. I think this is an improvement? Test Plan: See screenshots. Reviewers: chad, btrahan Reviewed By: btrahan CC: aran, netfoxcity Maniphest Tasks: T1569 Differential Revision: https://secure.phabricator.com/D3338
1 parent 6ed202b commit bee112c

11 files changed

+86
-73
lines changed

‎scripts/celerity/generate_sprites.php

+2-1
Original file line numberDiff line numberDiff line change
@@ -108,7 +108,7 @@ function gly($y) {
108108
->setSourceSize(60, 60);
109109

110110
$app_template_mini = id(new PhutilSprite())
111-
->setSourceFile($srcroot.'/application_normal_1x.png')
111+
->setSourceFile($srcroot.'/menu_normal_1x.png')
112112
->setSourceSize(30, 30);
113113

114114
$app_source_map = array(
@@ -139,6 +139,7 @@ function gly($y) {
139139
'conduit' => array(7, 30),
140140
'feed' => array(3, 11),
141141
'paste' => array(9, 2),
142+
'audit' => array(8, 19),
142143
);
143144

144145
$xadj = -1;

‎src/__celerity_resource_map__.php

+20-6
Original file line numberDiff line numberDiff line change
@@ -65,8 +65,8 @@
6565
),
6666
'/rsrc/image/autosprite.png' =>
6767
array(
68-
'hash' => '08fb34fc4ce0cd3be882a3177423ad49',
69-
'uri' => '/res/08fb34fc/rsrc/image/autosprite.png',
68+
'hash' => '5df245706c30b098cc45a5dc05775a65',
69+
'uri' => '/res/5df24570/rsrc/image/autosprite.png',
7070
'disk' => '/rsrc/image/autosprite.png',
7171
'type' => 'png',
7272
),
@@ -126,6 +126,13 @@
126126
'disk' => '/rsrc/image/divot.png',
127127
'type' => 'png',
128128
),
129+
'/rsrc/image/glyphicons.png' =>
130+
array(
131+
'hash' => '564fc282dac06bf8bb839457adaa3718',
132+
'uri' => '/res/564fc282/rsrc/image/glyphicons.png',
133+
'disk' => '/rsrc/image/glyphicons.png',
134+
'type' => 'png',
135+
),
129136
'/rsrc/image/grippy_texture.png' =>
130137
array(
131138
'hash' => 'a8945e12ceeaddd5b491a8d81cfa19c1',
@@ -448,6 +455,13 @@
448455
'disk' => '/rsrc/image/logo_grey.png',
449456
'type' => 'png',
450457
),
458+
'/rsrc/image/menu_texture.png' =>
459+
array(
460+
'hash' => '42193f24a52bd94be596c442d59a68ce',
461+
'uri' => '/res/42193f24/rsrc/image/menu_texture.png',
462+
'disk' => '/rsrc/image/menu_texture.png',
463+
'type' => 'png',
464+
),
451465
'/rsrc/image/search.png' =>
452466
array(
453467
'hash' => 'ff7da044e6f923b8f569dec11f97e5e5',
@@ -643,7 +657,7 @@
643657
),
644658
'autosprite-css' =>
645659
array(
646-
'uri' => '/res/07043fce/rsrc/css/autosprite.css',
660+
'uri' => '/res/27f100be/rsrc/css/autosprite.css',
647661
'type' => 'css',
648662
'requires' =>
649663
array(
@@ -1468,7 +1482,7 @@
14681482
),
14691483
'javelin-behavior-phabricator-nav' =>
14701484
array(
1471-
'uri' => '/res/cb8979b2/rsrc/js/application/core/behavior-phabricator-nav.js',
1485+
'uri' => '/res/2217e1e9/rsrc/js/application/core/behavior-phabricator-nav.js',
14721486
'type' => 'js',
14731487
'requires' =>
14741488
array(
@@ -2417,7 +2431,7 @@
24172431
),
24182432
'phabricator-nav-view-css' =>
24192433
array(
2420-
'uri' => '/res/ca2744bd/rsrc/css/aphront/phabricator-nav-view.css',
2434+
'uri' => '/res/3ee38144/rsrc/css/aphront/phabricator-nav-view.css',
24212435
'type' => 'css',
24222436
'requires' =>
24232437
array(
@@ -2457,7 +2471,7 @@
24572471
),
24582472
'phabricator-object-item-list-view-css' =>
24592473
array(
2460-
'uri' => '/res/7a31c016/rsrc/css/layout/phabricator-object-item-list-view.css',
2474+
'uri' => '/res/945fabe9/rsrc/css/layout/phabricator-object-item-list-view.css',
24612475
'type' => 'css',
24622476
'requires' =>
24632477
array(

‎src/applications/audit/application/PhabricatorApplicationAudit.php

+2-2
Original file line numberDiff line numberDiff line change
@@ -26,8 +26,8 @@ public function getBaseURI() {
2626
return '/audit/';
2727
}
2828

29-
public function getIconURI() {
30-
return celerity_get_resource_uri('/rsrc/image/app/app_audit.png');
29+
public function getAutospriteName() {
30+
return 'audit';
3131
}
3232

3333
public function getRoutes() {

‎src/applications/meta/controller/PhabricatorApplicationsController.php

-35
This file was deleted.

‎src/applications/meta/controller/PhabricatorApplicationsListController.php

+1
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,7 @@ public function processRequest() {
5656
$view,
5757
array(
5858
'title' => 'Applications',
59+
'device' => true,
5960
));
6061
}
6162

‎webroot/rsrc/css/aphront/phabricator-nav-view.css

+32-25
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,6 @@
1212
left: 0;
1313
bottom: 0;
1414

15-
border-right: 1px solid #999c9e;
16-
box-shadow: inset -3px 0 4px rgba(0, 0, 0, 0.05);
1715

1816
overflow-y: auto;
1917
overflow-x: hidden;
@@ -23,12 +21,24 @@
2321

2422
.phabricator-nav-app {
2523
width: 149px;
26-
background: #d2d2d2;
24+
background: #33393d;
25+
border-right: 1px solid #222222;
26+
box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.25);
27+
z-index: 6;
28+
}
29+
30+
.device-desktop .phabricator-nav-app {
31+
top: 43px;
32+
padding-top: 4px;
2733
}
2834

2935
.phabricator-nav-local {
3036
width: 179px;
3137
background: #ececec;
38+
39+
border-right: 1px solid #999c9e;
40+
box-shadow: inset -3px 0 4px rgba(0, 0, 0, 0.05);
41+
background-image: url(/rsrc/image/menu_texture.png);
3242
}
3343

3444
.device-tablet .phabricator-nav-local,
@@ -39,7 +49,7 @@
3949
.phabricator-nav-drag {
4050
position: fixed;
4151
top: 44px;
42-
left: 177px;
52+
left: 327px;
4353
width: 7px;
4454
bottom: 0;
4555
z-index: 5;
@@ -62,6 +72,10 @@
6272
display: none;
6373
}
6474

75+
.device-desktop .phabricator-nav-app-collapsed .phabricator-nav-drag {
76+
left: 215px;
77+
}
78+
6579
.phabricator-nav-col a,
6680
.phabricator-nav-col span {
6781
display: block;
@@ -72,7 +86,7 @@
7286
}
7387

7488
.device-desktop .phabricator-nav-app-collapsed .phabricator-nav-local {
75-
left: 34px;
89+
left: 38px;
7690
}
7791

7892
.phabricator-nav-content {
@@ -84,12 +98,12 @@
8498
}
8599

86100
.device-desktop .phabricator-nav-app-collapsed .phabricator-nav-content {
87-
margin-left: 32px;
101+
margin-left: 36px;
88102
}
89103

90104
.device-desktop .has-local-nav.phabricator-nav-app-collapsed
91105
.phabricator-nav-content {
92-
margin-left: 212px;
106+
margin-left: 216px;
93107
}
94108

95109
.phabricator-nav-col span {
@@ -116,25 +130,19 @@
116130
}
117131

118132
a.phabricator-nav-app-item {
119-
color: #222222;
133+
color: #e9e9e9;
120134
font-weight: normal;
121135
padding: 4px;
122136
padding-left: 40px;
123137
vertical-align: middle;
124138
line-height: 30px;
125139
height: 30px;
126140

127-
border-width: 1px 0px;
128-
border-style: solid;
129-
border-color: transparent;
130-
131141
position: relative;
132142
}
133143

134144
a.phabricator-nav-app-item-selected {
135-
background-color: #f3f3f3;
136-
box-shadow: inset -1px 0 3px rgba(0, 0, 0, 0.15);
137-
border-color: #b0b0b0;
145+
background-color: #55595d;
138146
}
139147

140148
span.phabricator-nav-app-item-icon {
@@ -158,14 +166,14 @@ a.phabricator-nav-app-button-collapse {
158166
left: 0;
159167
bottom: 0;
160168
padding: 4px;
161-
z-index: 2;
162-
background: #d9d9d9;
169+
z-index: 7;
170+
background: #44494d;
163171
line-height: 14px;
164-
border-top: 1px solid #a9a9a9;
172+
border-top: 1px solid #222222;
165173
text-align: center;
166174
font-size: 11px;
167175
box-shadow: inset -1px -1px 3px rgba(0, 0, 0, 0.1);
168-
color: #696969;
176+
color: #c0c0c0;
169177
text-decoration: none;
170178
}
171179

@@ -174,7 +182,7 @@ a.phabricator-nav-app-button-collapse {
174182
}
175183

176184
.phabricator-nav-app-button-expand {
177-
width: 25px;
185+
width: 29px;
178186
display: none;
179187
}
180188

@@ -184,7 +192,7 @@ a.phabricator-nav-app-button-collapse {
184192
}
185193

186194
.device-desktop .phabricator-nav-app-collapsed .phabricator-nav-app {
187-
width: 33px;
195+
width: 37px;
188196
}
189197

190198
.phabricator-nav-app-collapsed .phabricator-nav-app-button-collapse {
@@ -245,13 +253,12 @@ a.phabricator-nav-app-button-collapse {
245253
display: block;
246254
position: relative;
247255
height: 43px;
248-
background: #e6e6e6;
256+
background: #fafafa;
249257
overflow: hidden;
250-
border-bottom: 1px solid #9d9d9d;
258+
border-bottom: 1px solid #5d5d5d;
251259
text-align: center;
252-
box-shadow: inset 0 0px 3px rgba(0, 0, 0, 0.30),
260+
box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.10),
253261
0px 1px 2px rgba(0, 0, 0, 0.10);
254-
z-index: 3;
255262
}
256263

257264
.nav-button {

‎webroot/rsrc/css/autosprite.css

+10-2
Original file line numberDiff line numberDiff line change
@@ -243,10 +243,18 @@
243243
background-position: 0px -2398px;
244244
}
245245

246-
.action-file {
246+
.app-audit-full {
247247
background-position: 0px -2429px;
248248
}
249249

250+
.app-audit {
251+
background-position: 0px -2490px;
252+
}
253+
254+
.action-file {
255+
background-position: 0px -2521px;
256+
}
257+
250258
.action-fork {
251-
background-position: 0px -2446px;
259+
background-position: 0px -2538px;
252260
}

‎webroot/rsrc/css/layout/phabricator-object-item-list-view.css

-1
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@
88
}
99

1010
.phabricator-object-item-list-header {
11-
font-weight: normal;
1211
color: #333333;
1312
font-size: 15px;
1413
margin-bottom: 12px;

‎webroot/rsrc/image/autosprite.png

-766 Bytes
Loading

‎webroot/rsrc/image/menu_texture.png

6.41 KB
Loading

‎webroot/rsrc/js/application/core/behavior-phabricator-nav.js

+19-1
Original file line numberDiff line numberDiff line change
@@ -87,6 +87,24 @@ JX.behavior('phabricator-nav', function(config) {
8787
// - Application Menu Collapse/Expand ------------------------------------------
8888

8989
function collapse(state, skip_save) {
90+
// As necessary, adjust the drag bar and content positioning. Do this first,
91+
// so we don't end up measuring things after the collapse takes effect.
92+
93+
// This is the difference between the widths of the uncollapsed application
94+
// nav (150px) and the collapsed one (38px).
95+
var delta = 112;
96+
delta = state ? -delta : delta;
97+
if (config.dragID) {
98+
var drag = JX.$(config.dragID);
99+
var p = JX.$V(drag);
100+
p.x += delta;
101+
p.y = null;
102+
p.setPos(drag);
103+
}
104+
105+
var c = parseInt(getComputedStyle(content).marginLeft, 10);
106+
content.style.marginLeft = (c + delta) + 'px';
107+
90108
JX.DOM.alterClass(
91109
JX.$(config.mainID),
92110
'phabricator-nav-app-collapsed',
@@ -133,7 +151,7 @@ JX.behavior('phabricator-nav', function(config) {
133151
scale: 1,
134152

135153
width: JX.Vector.getDim(local).x,
136-
minWidth: 150,
154+
minWidth: 38,
137155
minScale: 1
138156
},
139157
{

0 commit comments

Comments
 (0)