@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 PhabricatorObjectItemListView handling of wide content
Summary: Wide content is currently allowed to push too far to the right, overlapping icons. Prevent it from doing so.
Test Plan:
Before:
{F27906}
After:
{F27907}
After, Mobile:
{F27908}
Reviewers: chad, codeblock, btrahan
Reviewed By: chad
CC: aran
Differential Revision: https://secure.phabricator.com/D4212
+71
-48
+42
-42
src/__celerity_resource_map__.php
+42
-42
src/__celerity_resource_map__.php
···
2656
2656
),
2657
2657
'phabricator-object-item-list-view-css' =>
2658
2658
array(
2659
-
'uri' => '/res/22e57cff/rsrc/css/layout/phabricator-object-item-list-view.css',
2659
+
'uri' => '/res/8ae43833/rsrc/css/layout/phabricator-object-item-list-view.css',
2660
2660
'type' => 'css',
2661
2661
'requires' =>
2662
2662
array(
···
3201
3201
), array(
3202
3202
'packages' =>
3203
3203
array(
3204
-
'a5058778' =>
3204
+
'97e38b14' =>
3205
3205
array(
3206
3206
'name' => 'core.pkg.css',
3207
3207
'symbols' =>
···
3246
3246
37 => 'phabricator-object-item-list-view-css',
3247
3247
38 => 'global-drag-and-drop-css',
3248
3248
),
3249
-
'uri' => '/res/pkg/a5058778/core.pkg.css',
3249
+
'uri' => '/res/pkg/97e38b14/core.pkg.css',
3250
3250
'type' => 'css',
3251
3251
),
3252
3252
'70c8162b' =>
···
3435
3435
'reverse' =>
3436
3436
array(
3437
3437
'aphront-attached-file-view-css' => '7839ae2d',
3438
-
'aphront-crumbs-view-css' => 'a5058778',
3439
-
'aphront-dialog-view-css' => 'a5058778',
3440
-
'aphront-error-view-css' => 'a5058778',
3441
-
'aphront-form-view-css' => 'a5058778',
3438
+
'aphront-crumbs-view-css' => '97e38b14',
3439
+
'aphront-dialog-view-css' => '97e38b14',
3440
+
'aphront-error-view-css' => '97e38b14',
3441
+
'aphront-form-view-css' => '97e38b14',
3442
3442
'aphront-headsup-action-list-view-css' => '380df740',
3443
-
'aphront-headsup-view-css' => 'a5058778',
3444
-
'aphront-list-filter-view-css' => 'a5058778',
3445
-
'aphront-pager-view-css' => 'a5058778',
3446
-
'aphront-panel-view-css' => 'a5058778',
3447
-
'aphront-side-nav-view-css' => 'a5058778',
3448
-
'aphront-table-view-css' => 'a5058778',
3449
-
'aphront-tokenizer-control-css' => 'a5058778',
3450
-
'aphront-tooltip-css' => 'a5058778',
3451
-
'aphront-typeahead-control-css' => 'a5058778',
3443
+
'aphront-headsup-view-css' => '97e38b14',
3444
+
'aphront-list-filter-view-css' => '97e38b14',
3445
+
'aphront-pager-view-css' => '97e38b14',
3446
+
'aphront-panel-view-css' => '97e38b14',
3447
+
'aphront-side-nav-view-css' => '97e38b14',
3448
+
'aphront-table-view-css' => '97e38b14',
3449
+
'aphront-tokenizer-control-css' => '97e38b14',
3450
+
'aphront-tooltip-css' => '97e38b14',
3451
+
'aphront-typeahead-control-css' => '97e38b14',
3452
3452
'differential-changeset-view-css' => '380df740',
3453
3453
'differential-core-view-css' => '380df740',
3454
3454
'differential-inline-comment-editor' => 'a8e8f2b7',
···
3462
3462
'differential-table-of-contents-css' => '380df740',
3463
3463
'diffusion-commit-view-css' => 'c8ce2d88',
3464
3464
'diffusion-icons-css' => 'c8ce2d88',
3465
-
'global-drag-and-drop-css' => 'a5058778',
3465
+
'global-drag-and-drop-css' => '97e38b14',
3466
3466
'inline-comment-summary-css' => '380df740',
3467
3467
'javelin-aphlict' => '70c8162b',
3468
3468
'javelin-behavior' => 'db6d724d',
···
3531
3531
'javelin-util' => 'db6d724d',
3532
3532
'javelin-vector' => 'db6d724d',
3533
3533
'javelin-workflow' => 'db6d724d',
3534
-
'lightbox-attachment-css' => 'a5058778',
3534
+
'lightbox-attachment-css' => '97e38b14',
3535
3535
'maniphest-task-summary-css' => '7839ae2d',
3536
3536
'maniphest-transaction-detail-css' => '7839ae2d',
3537
-
'phabricator-app-buttons-css' => 'a5058778',
3537
+
'phabricator-app-buttons-css' => '97e38b14',
3538
3538
'phabricator-busy' => '70c8162b',
3539
3539
'phabricator-content-source-view-css' => '380df740',
3540
-
'phabricator-core-buttons-css' => 'a5058778',
3541
-
'phabricator-core-css' => 'a5058778',
3542
-
'phabricator-crumbs-view-css' => 'a5058778',
3543
-
'phabricator-directory-css' => 'a5058778',
3540
+
'phabricator-core-buttons-css' => '97e38b14',
3541
+
'phabricator-core-css' => '97e38b14',
3542
+
'phabricator-crumbs-view-css' => '97e38b14',
3543
+
'phabricator-directory-css' => '97e38b14',
3544
3544
'phabricator-drag-and-drop-file-upload' => 'a8e8f2b7',
3545
3545
'phabricator-dropdown-menu' => '70c8162b',
3546
3546
'phabricator-file-upload' => '70c8162b',
3547
-
'phabricator-filetree-view-css' => 'a5058778',
3548
-
'phabricator-flag-css' => 'a5058778',
3549
-
'phabricator-form-view-css' => 'a5058778',
3550
-
'phabricator-header-view-css' => 'a5058778',
3551
-
'phabricator-jump-nav' => 'a5058778',
3547
+
'phabricator-filetree-view-css' => '97e38b14',
3548
+
'phabricator-flag-css' => '97e38b14',
3549
+
'phabricator-form-view-css' => '97e38b14',
3550
+
'phabricator-header-view-css' => '97e38b14',
3551
+
'phabricator-jump-nav' => '97e38b14',
3552
3552
'phabricator-keyboard-shortcut' => '70c8162b',
3553
3553
'phabricator-keyboard-shortcut-manager' => '70c8162b',
3554
-
'phabricator-main-menu-view' => 'a5058778',
3554
+
'phabricator-main-menu-view' => '97e38b14',
3555
3555
'phabricator-menu-item' => '70c8162b',
3556
-
'phabricator-nav-view-css' => 'a5058778',
3556
+
'phabricator-nav-view-css' => '97e38b14',
3557
3557
'phabricator-notification' => '70c8162b',
3558
-
'phabricator-notification-css' => 'a5058778',
3559
-
'phabricator-notification-menu-css' => 'a5058778',
3560
-
'phabricator-object-item-list-view-css' => 'a5058778',
3558
+
'phabricator-notification-css' => '97e38b14',
3559
+
'phabricator-notification-menu-css' => '97e38b14',
3560
+
'phabricator-object-item-list-view-css' => '97e38b14',
3561
3561
'phabricator-object-selector-css' => '380df740',
3562
3562
'phabricator-paste-file-upload' => '70c8162b',
3563
3563
'phabricator-prefab' => '70c8162b',
3564
3564
'phabricator-project-tag-css' => '7839ae2d',
3565
-
'phabricator-remarkup-css' => 'a5058778',
3565
+
'phabricator-remarkup-css' => '97e38b14',
3566
3566
'phabricator-shaped-request' => 'a8e8f2b7',
3567
-
'phabricator-side-menu-view-css' => 'a5058778',
3568
-
'phabricator-standard-page-view' => 'a5058778',
3567
+
'phabricator-side-menu-view-css' => '97e38b14',
3568
+
'phabricator-standard-page-view' => '97e38b14',
3569
3569
'phabricator-textareautils' => '70c8162b',
3570
3570
'phabricator-tooltip' => '70c8162b',
3571
-
'phabricator-transaction-view-css' => 'a5058778',
3572
-
'sprite-apps-large-css' => 'a5058778',
3573
-
'sprite-gradient-css' => 'a5058778',
3574
-
'sprite-icon-css' => 'a5058778',
3575
-
'sprite-menu-css' => 'a5058778',
3576
-
'syntax-highlighting-css' => 'a5058778',
3571
+
'phabricator-transaction-view-css' => '97e38b14',
3572
+
'sprite-apps-large-css' => '97e38b14',
3573
+
'sprite-gradient-css' => '97e38b14',
3574
+
'sprite-icon-css' => '97e38b14',
3575
+
'sprite-menu-css' => '97e38b14',
3576
+
'syntax-highlighting-css' => '97e38b14',
3577
3577
),
3578
3578
));
+8
-1
src/view/layout/PhabricatorObjectItemView.php
+8
-1
src/view/layout/PhabricatorObjectItemView.php
···
158
158
throw new Exception("Invalid effect!");
159
159
}
160
160
161
+
$content = phutil_render_tag(
162
+
'div',
163
+
array(
164
+
'class' => 'phabricator-object-item-content',
165
+
),
166
+
$header.$attrs.$this->renderChildren());
167
+
161
168
return phutil_render_tag(
162
169
'div',
163
170
array(
164
171
'class' => implode(' ', $classes),
165
172
),
166
-
$icons.$header.$attrs.$this->renderChildren());
173
+
$icons.$content);
167
174
}
168
175
169
176
}
+21
-5
webroot/rsrc/css/layout/phabricator-object-item-list-view.css
+21
-5
webroot/rsrc/css/layout/phabricator-object-item-list-view.css
···
21
21
.phabricator-object-item-name {
22
22
display: block;
23
23
padding: 4px 8px 4px;
24
-
margin-right: 20px;
25
24
font-weight: bold;
26
25
}
27
26
28
-
/* - Attribute List ------------------------------
27
+
.phabricator-object-item-content {
28
+
overflow: hidden;
29
+
}
30
+
31
+
/* - Attribute List ------------------------------------------------------------
29
32
30
33
Object attributes, commonly used to render created date, etc.
31
34
32
35
*/
33
-
34
36
35
37
.phabricator-object-item-attributes {
36
38
padding: 0px 8px 4px;
···
47
49
}
48
50
49
51
50
-
/* - Attribute List ------------------------------
52
+
/* - Icons ---------------------------------------------------------------------
51
53
52
-
Object attributes, commonly used to render created date, etc.
54
+
Icons, which show object state. On mobile, they are rendered without labels
55
+
to save space.
53
56
54
57
*/
55
58
···
58
61
padding: 2px 4px 0;
59
62
}
60
63
64
+
/* NOTE: The main content is an "overflow: hidden" div which we give a right
65
+
margin so it doesn't overlap the icons. The margin is slightly larger than
66
+
the width + padding of the icon div, so the icons have some space even if
67
+
the content is wider than available space. */
68
+
61
69
.device-desktop .phabricator-object-item-icons {
62
70
width: 120px;
63
71
}
64
72
73
+
.device-desktop .phabricator-object-item-content {
74
+
margin-right: 132px;
75
+
}
76
+
65
77
.device .phabricator-object-item-icons {
66
78
width: 18px;
79
+
}
80
+
81
+
.device .phabricator-object-item-content {
82
+
margin-right: 30px;
67
83
}
68
84
69
85
.device .phabricator-object-item-icon-label {