1
0
Fork 0
mirror of https://we.phorge.it/source/phorge.git synced 2024-11-10 08:52:39 +01:00

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
This commit is contained in:
epriestley 2012-12-17 08:26:44 -08:00
parent 4952891cd1
commit d2cf71c5b1
3 changed files with 71 additions and 48 deletions

View file

@ -2656,7 +2656,7 @@ celerity_register_resource_map(array(
),
'phabricator-object-item-list-view-css' =>
array(
'uri' => '/res/22e57cff/rsrc/css/layout/phabricator-object-item-list-view.css',
'uri' => '/res/8ae43833/rsrc/css/layout/phabricator-object-item-list-view.css',
'type' => 'css',
'requires' =>
array(
@ -3201,7 +3201,7 @@ celerity_register_resource_map(array(
), array(
'packages' =>
array(
'a5058778' =>
'97e38b14' =>
array(
'name' => 'core.pkg.css',
'symbols' =>
@ -3246,7 +3246,7 @@ celerity_register_resource_map(array(
37 => 'phabricator-object-item-list-view-css',
38 => 'global-drag-and-drop-css',
),
'uri' => '/res/pkg/a5058778/core.pkg.css',
'uri' => '/res/pkg/97e38b14/core.pkg.css',
'type' => 'css',
),
'70c8162b' =>
@ -3435,20 +3435,20 @@ celerity_register_resource_map(array(
'reverse' =>
array(
'aphront-attached-file-view-css' => '7839ae2d',
'aphront-crumbs-view-css' => 'a5058778',
'aphront-dialog-view-css' => 'a5058778',
'aphront-error-view-css' => 'a5058778',
'aphront-form-view-css' => 'a5058778',
'aphront-crumbs-view-css' => '97e38b14',
'aphront-dialog-view-css' => '97e38b14',
'aphront-error-view-css' => '97e38b14',
'aphront-form-view-css' => '97e38b14',
'aphront-headsup-action-list-view-css' => '380df740',
'aphront-headsup-view-css' => 'a5058778',
'aphront-list-filter-view-css' => 'a5058778',
'aphront-pager-view-css' => 'a5058778',
'aphront-panel-view-css' => 'a5058778',
'aphront-side-nav-view-css' => 'a5058778',
'aphront-table-view-css' => 'a5058778',
'aphront-tokenizer-control-css' => 'a5058778',
'aphront-tooltip-css' => 'a5058778',
'aphront-typeahead-control-css' => 'a5058778',
'aphront-headsup-view-css' => '97e38b14',
'aphront-list-filter-view-css' => '97e38b14',
'aphront-pager-view-css' => '97e38b14',
'aphront-panel-view-css' => '97e38b14',
'aphront-side-nav-view-css' => '97e38b14',
'aphront-table-view-css' => '97e38b14',
'aphront-tokenizer-control-css' => '97e38b14',
'aphront-tooltip-css' => '97e38b14',
'aphront-typeahead-control-css' => '97e38b14',
'differential-changeset-view-css' => '380df740',
'differential-core-view-css' => '380df740',
'differential-inline-comment-editor' => 'a8e8f2b7',
@ -3462,7 +3462,7 @@ celerity_register_resource_map(array(
'differential-table-of-contents-css' => '380df740',
'diffusion-commit-view-css' => 'c8ce2d88',
'diffusion-icons-css' => 'c8ce2d88',
'global-drag-and-drop-css' => 'a5058778',
'global-drag-and-drop-css' => '97e38b14',
'inline-comment-summary-css' => '380df740',
'javelin-aphlict' => '70c8162b',
'javelin-behavior' => 'db6d724d',
@ -3531,48 +3531,48 @@ celerity_register_resource_map(array(
'javelin-util' => 'db6d724d',
'javelin-vector' => 'db6d724d',
'javelin-workflow' => 'db6d724d',
'lightbox-attachment-css' => 'a5058778',
'lightbox-attachment-css' => '97e38b14',
'maniphest-task-summary-css' => '7839ae2d',
'maniphest-transaction-detail-css' => '7839ae2d',
'phabricator-app-buttons-css' => 'a5058778',
'phabricator-app-buttons-css' => '97e38b14',
'phabricator-busy' => '70c8162b',
'phabricator-content-source-view-css' => '380df740',
'phabricator-core-buttons-css' => 'a5058778',
'phabricator-core-css' => 'a5058778',
'phabricator-crumbs-view-css' => 'a5058778',
'phabricator-directory-css' => 'a5058778',
'phabricator-core-buttons-css' => '97e38b14',
'phabricator-core-css' => '97e38b14',
'phabricator-crumbs-view-css' => '97e38b14',
'phabricator-directory-css' => '97e38b14',
'phabricator-drag-and-drop-file-upload' => 'a8e8f2b7',
'phabricator-dropdown-menu' => '70c8162b',
'phabricator-file-upload' => '70c8162b',
'phabricator-filetree-view-css' => 'a5058778',
'phabricator-flag-css' => 'a5058778',
'phabricator-form-view-css' => 'a5058778',
'phabricator-header-view-css' => 'a5058778',
'phabricator-jump-nav' => 'a5058778',
'phabricator-filetree-view-css' => '97e38b14',
'phabricator-flag-css' => '97e38b14',
'phabricator-form-view-css' => '97e38b14',
'phabricator-header-view-css' => '97e38b14',
'phabricator-jump-nav' => '97e38b14',
'phabricator-keyboard-shortcut' => '70c8162b',
'phabricator-keyboard-shortcut-manager' => '70c8162b',
'phabricator-main-menu-view' => 'a5058778',
'phabricator-main-menu-view' => '97e38b14',
'phabricator-menu-item' => '70c8162b',
'phabricator-nav-view-css' => 'a5058778',
'phabricator-nav-view-css' => '97e38b14',
'phabricator-notification' => '70c8162b',
'phabricator-notification-css' => 'a5058778',
'phabricator-notification-menu-css' => 'a5058778',
'phabricator-object-item-list-view-css' => 'a5058778',
'phabricator-notification-css' => '97e38b14',
'phabricator-notification-menu-css' => '97e38b14',
'phabricator-object-item-list-view-css' => '97e38b14',
'phabricator-object-selector-css' => '380df740',
'phabricator-paste-file-upload' => '70c8162b',
'phabricator-prefab' => '70c8162b',
'phabricator-project-tag-css' => '7839ae2d',
'phabricator-remarkup-css' => 'a5058778',
'phabricator-remarkup-css' => '97e38b14',
'phabricator-shaped-request' => 'a8e8f2b7',
'phabricator-side-menu-view-css' => 'a5058778',
'phabricator-standard-page-view' => 'a5058778',
'phabricator-side-menu-view-css' => '97e38b14',
'phabricator-standard-page-view' => '97e38b14',
'phabricator-textareautils' => '70c8162b',
'phabricator-tooltip' => '70c8162b',
'phabricator-transaction-view-css' => 'a5058778',
'sprite-apps-large-css' => 'a5058778',
'sprite-gradient-css' => 'a5058778',
'sprite-icon-css' => 'a5058778',
'sprite-menu-css' => 'a5058778',
'syntax-highlighting-css' => 'a5058778',
'phabricator-transaction-view-css' => '97e38b14',
'sprite-apps-large-css' => '97e38b14',
'sprite-gradient-css' => '97e38b14',
'sprite-icon-css' => '97e38b14',
'sprite-menu-css' => '97e38b14',
'syntax-highlighting-css' => '97e38b14',
),
));

View file

@ -158,12 +158,19 @@ final class PhabricatorObjectItemView extends AphrontView {
throw new Exception("Invalid effect!");
}
$content = phutil_render_tag(
'div',
array(
'class' => 'phabricator-object-item-content',
),
$header.$attrs.$this->renderChildren());
return phutil_render_tag(
'div',
array(
'class' => implode(' ', $classes),
),
$icons.$header.$attrs.$this->renderChildren());
$icons.$content);
}
}

View file

@ -21,17 +21,19 @@
.phabricator-object-item-name {
display: block;
padding: 4px 8px 4px;
margin-right: 20px;
font-weight: bold;
}
/* - Attribute List ------------------------------
.phabricator-object-item-content {
overflow: hidden;
}
/* - Attribute List ------------------------------------------------------------
Object attributes, commonly used to render created date, etc.
*/
.phabricator-object-item-attributes {
padding: 0px 8px 4px;
}
@ -47,9 +49,10 @@
}
/* - Attribute List ------------------------------
/* - Icons ---------------------------------------------------------------------
Object attributes, commonly used to render created date, etc.
Icons, which show object state. On mobile, they are rendered without labels
to save space.
*/
@ -58,14 +61,27 @@
padding: 2px 4px 0;
}
/* NOTE: The main content is an "overflow: hidden" div which we give a right
margin so it doesn't overlap the icons. The margin is slightly larger than
the width + padding of the icon div, so the icons have some space even if
the content is wider than available space. */
.device-desktop .phabricator-object-item-icons {
width: 120px;
}
.device-desktop .phabricator-object-item-content {
margin-right: 132px;
}
.device .phabricator-object-item-icons {
width: 18px;
}
.device .phabricator-object-item-content {
margin-right: 30px;
}
.device .phabricator-object-item-icon-label {
display: none;
vertical-align: middle;