@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
Redesign Crumbs
Summary: Slimmer crumbs, less complex, no sprites, less visual disruption.
Test Plan:
Test Conpherence, Objects, Application Search pages.
{F275026}
{F275027}
Reviewers: btrahan, epriestley
Reviewed By: epriestley
Subscribers: Korvin, epriestley
Differential Revision: https://secure.phabricator.com/D11486
+58
-82
+9
-9
resources/celerity/map.php
+9
-9
resources/celerity/map.php
···
7
7
*/
8
8
return array(
9
9
'names' => array(
10
-
'core.pkg.css' => 'bfa98093',
10
+
'core.pkg.css' => 'a793698c',
11
11
'core.pkg.js' => '63963771',
12
12
'darkconsole.pkg.js' => '8ab24e01',
13
13
'differential.pkg.css' => '8af45893',
···
47
47
'rsrc/css/application/config/setup-issue.css' => '8f852bc0',
48
48
'rsrc/css/application/config/unhandled-exception.css' => '37d4f9a2',
49
49
'rsrc/css/application/conpherence/menu.css' => 'e1e0fdf1',
50
-
'rsrc/css/application/conpherence/message-pane.css' => '042886d1',
50
+
'rsrc/css/application/conpherence/message-pane.css' => '684d1b80',
51
51
'rsrc/css/application/conpherence/notification.css' => '04a6e10a',
52
52
'rsrc/css/application/conpherence/update.css' => '1099a660',
53
53
'rsrc/css/application/conpherence/widget-pane.css' => '3d575438',
···
124
124
'rsrc/css/phui/phui-action-list.css' => '9ee9910a',
125
125
'rsrc/css/phui/phui-box.css' => '7b3a2eed',
126
126
'rsrc/css/phui/phui-button.css' => '008ba5e2',
127
-
'rsrc/css/phui/phui-crumbs-view.css' => 'cd08e0bf',
127
+
'rsrc/css/phui/phui-crumbs-view.css' => '8d3bc4a6',
128
128
'rsrc/css/phui/phui-document.css' => 'bbeb1890',
129
129
'rsrc/css/phui/phui-feed-story.css' => 'c9f3a0b5',
130
130
'rsrc/css/phui/phui-fontkit.css' => '9c3d2dce',
···
150
150
'rsrc/css/sprite-gradient.css' => '4bdb98a7',
151
151
'rsrc/css/sprite-login.css' => 'a355d921',
152
152
'rsrc/css/sprite-main-header.css' => '92720ee2',
153
-
'rsrc/css/sprite-menu.css' => '661b879f',
153
+
'rsrc/css/sprite-menu.css' => '9457345d',
154
154
'rsrc/css/sprite-projects.css' => 'b0d9e24f',
155
155
'rsrc/css/sprite-tokens.css' => '1706b943',
156
156
'rsrc/externals/font/fontawesome/fontawesome-webfont.eot' => '5fb6fb0e',
···
320
320
'rsrc/image/sprite-login-X2.png' => '5ae6de3a',
321
321
'rsrc/image/sprite-login.png' => '07f2c67c',
322
322
'rsrc/image/sprite-main-header.png' => '83521873',
323
-
'rsrc/image/sprite-menu-X2.png' => '89ae35f1',
324
-
'rsrc/image/sprite-menu.png' => 'b912a047',
323
+
'rsrc/image/sprite-menu-X2.png' => 'acea7012',
324
+
'rsrc/image/sprite-menu.png' => '24e76f8a',
325
325
'rsrc/image/sprite-projects-X2.png' => '8c91c839',
326
326
'rsrc/image/sprite-projects.png' => 'ef9dc9b5',
327
327
'rsrc/image/sprite-tokens-X2.png' => 'b4776580',
···
506
506
'config-options-css' => '7fedf08b',
507
507
'config-welcome-css' => 'b0d16200',
508
508
'conpherence-menu-css' => 'e1e0fdf1',
509
-
'conpherence-message-pane-css' => '042886d1',
509
+
'conpherence-message-pane-css' => '684d1b80',
510
510
'conpherence-notification-css' => '04a6e10a',
511
511
'conpherence-update-css' => '1099a660',
512
512
'conpherence-widget-pane-css' => '3d575438',
···
764
764
'phui-calendar-day-css' => 'de035c8a',
765
765
'phui-calendar-list-css' => 'c1d0ca59',
766
766
'phui-calendar-month-css' => 'a92e47d2',
767
-
'phui-crumbs-view-css' => 'cd08e0bf',
767
+
'phui-crumbs-view-css' => '8d3bc4a6',
768
768
'phui-document-view-css' => 'bbeb1890',
769
769
'phui-feed-story-css' => 'c9f3a0b5',
770
770
'phui-font-icon-base-css' => '3dad2ae3',
···
810
810
'sprite-gradient-css' => '4bdb98a7',
811
811
'sprite-login-css' => 'a355d921',
812
812
'sprite-main-header-css' => '92720ee2',
813
-
'sprite-menu-css' => '661b879f',
813
+
'sprite-menu-css' => '9457345d',
814
814
'sprite-projects-css' => 'b0d9e24f',
815
815
'sprite-tokens-css' => '1706b943',
816
816
'syntax-highlighting-css' => '56c1ba38',
+1
-1
src/applications/base/controller/PhabricatorController.php
+1
-1
src/applications/base/controller/PhabricatorController.php
-5
src/applications/celerity/CeleritySpriteGenerator.php
-5
src/applications/celerity/CeleritySpriteGenerator.php
+1
-1
src/applications/search/controller/PhabricatorApplicationSearchController.php
+1
-1
src/applications/search/controller/PhabricatorApplicationSearchController.php
+10
-14
src/view/phui/PHUICrumbView.php
+10
-14
src/view/phui/PHUICrumbView.php
···
69
69
$icon = null;
70
70
if ($this->icon) {
71
71
$classes[] = 'phui-crumb-has-icon';
72
-
$icon = phutil_tag(
73
-
'span',
74
-
array(
75
-
'class' => 'phui-crumb-icon phui-icon-view phui-font-fa '.$this->icon,
76
-
),
77
-
'');
72
+
$icon = id(new PHUIIconView())
73
+
->setIconFont($this->icon);
78
74
}
79
75
80
76
$name = phutil_tag(
···
86
82
87
83
$divider = null;
88
84
if (!$this->isLastCrumb) {
89
-
$divider = phutil_tag(
90
-
'span',
91
-
array(
92
-
'class' => 'sprite-menu phui-crumb-divider',
93
-
),
94
-
'');
85
+
$divider = id(new PHUIIconView())
86
+
->setIconFont('fa-angle-right')
87
+
->addClass('phui-crumb-divider')
88
+
->addClass('phui-crumb-view');
95
89
} else {
96
90
$classes[] = 'phabricator-last-crumb';
97
91
}
98
92
99
-
return javelin_tag(
93
+
$tag = javelin_tag(
100
94
$this->href ? 'a' : 'span',
101
95
array(
102
96
'sigil' => $this->workflow ? 'workflow' : null,
103
97
'href' => $this->href,
104
98
'class' => implode(' ', $classes),
105
99
),
106
-
array($aural, $icon, $name, $divider));
100
+
array($aural, $icon, $name));
101
+
102
+
return array($tag, $divider);
107
103
}
108
104
}
+4
-2
src/view/phui/PHUICrumbsView.php
+4
-2
src/view/phui/PHUICrumbsView.php
···
97
97
last($this->crumbs)->setIsLastCrumb(true);
98
98
}
99
99
100
+
$classes = array();
101
+
$classes[] = 'phui-crumbs-view';
102
+
100
103
return phutil_tag(
101
104
'div',
102
105
array(
103
-
'class' => 'phui-crumbs-view '.
104
-
'sprite-gradient gradient-breadcrumbs',
106
+
'class' => implode(' ', $classes),
105
107
),
106
108
array(
107
109
$action_view,
+5
webroot/rsrc/css/application/conpherence/message-pane.css
+5
webroot/rsrc/css/application/conpherence/message-pane.css
+13
-26
webroot/rsrc/css/phui/phui-crumbs-view.css
+13
-26
webroot/rsrc/css/phui/phui-crumbs-view.css
···
3
3
*/
4
4
5
5
.phui-crumbs-view {
6
-
background-color: #ebecee;
7
-
background-image: none !important;
8
-
height: 31px;
9
6
overflow: hidden;
10
7
vertical-align: top;
11
-
border-bottom: 1px solid rgba(205, 207, 211, 1);
8
+
padding: 0 8px 0 16px;
12
9
/* TODO: Position this over the slider for Differential's file tree view.
13
10
Remove this once that gets sorted out. */
14
11
position: relative;
15
12
-webkit-font-smoothing: antialiased;
13
+
border-bottom: 1px solid rgba(205, 207, 211, 1);
16
14
}
17
15
18
16
.phui-crumbs-view,
···
38
36
39
37
.phui-crumb-view {
40
38
float: left;
41
-
height: 31px;
42
-
line-height: 31px;
43
-
}
44
-
45
-
.device-phone .phui-crumb-view {
46
-
display: none;
39
+
padding: 8px 0;
47
40
}
48
41
49
42
.device-phone .phui-crumb-view.phabricator-last-crumb,
···
51
44
display: inline-block;
52
45
}
53
46
54
-
.phui-crumb-icon {
55
-
display: inline-block;
56
-
width: 28px;
57
-
height: 28px;
58
-
margin: 6px 2px 2px 10px;
59
-
vertical-align: top;
60
-
font-size: 20px;
61
-
text-align: center;
47
+
.device-phone .phui-crumb-has-icon .phui-crumb-name {
48
+
display: none;
49
+
}
50
+
51
+
.phui-crumb-has-icon .phui-icon-view {
52
+
margin: 0 4px;
62
53
}
63
54
64
55
.device-phone .phui-crumb-icon {
···
79
70
80
71
.device-phone a.phui-crumbs-action {
81
72
padding: 7px;
82
-
border-left: 1px solid {$hovergrey};
83
73
}
84
74
85
-
.device-desktop a.phui-crumbs-action:hover {
86
-
background: rgba(205, 207, 211, .5);
75
+
.device-desktop .phui-crumbs-view a:hover,
76
+
.device-desktop .phui-crumbs-view a:hover .phui-icon-view {
77
+
color: {$sky};
87
78
text-decoration: none;
88
79
}
89
80
···
101
92
}
102
93
103
94
.phui-crumb-divider {
104
-
display: inline-block;
105
-
width: 9px;
106
-
height: 31px;
107
-
vertical-align: top;
108
-
margin: 0 8px 0 4px;
95
+
margin: 2px 8px;
109
96
}