Fix some ObjectItemList issues · recaptime.dev/phorge@5e53fc7

+46 -39

src/__celerity_resource_map__.php

··· 581 581 'disk' => '/rsrc/image/texture/dust_background.jpg', 582 582 'type' => 'jpg', 583 583 ), 584 + '/rsrc/image/texture/grip.png' => 585 + array( 586 + 'hash' => 'f11bc231d241f1335cfca2933ad234e0', 587 + 'uri' => '/res/f11bc231/rsrc/image/texture/grip.png', 588 + 'disk' => '/rsrc/image/texture/grip.png', 589 + 'type' => 'png', 590 + ), 584 591 '/rsrc/image/texture/pholio-background.gif' => 585 592 array( 586 593 'hash' => 'cf4561af116edf393dc583e5119fb412', ··· 2988 2995 ), 2989 2996 'phabricator-object-item-list-view-css' => 2990 2997 array( 2991 - 'uri' => '/res/f3c39d6f/rsrc/css/layout/phabricator-object-item-list-view.css', 2998 + 'uri' => '/res/aa09c531/rsrc/css/layout/phabricator-object-item-list-view.css', 2992 2999 'type' => 'css', 2993 3000 'requires' => 2994 3001 array( ··· 3686 3693 ), array( 3687 3694 'packages' => 3688 3695 array( 3689 - '3f552ecc' => 3696 + '6c294512' => 3690 3697 array( 3691 3698 'name' => 'core.pkg.css', 3692 3699 'symbols' => ··· 3728 3735 34 => 'phabricator-object-item-list-view-css', 3729 3736 35 => 'global-drag-and-drop-css', 3730 3737 ), 3731 - 'uri' => '/res/pkg/3f552ecc/core.pkg.css', 3738 + 'uri' => '/res/pkg/6c294512/core.pkg.css', 3732 3739 'type' => 'css', 3733 3740 ), 3734 3741 '95ceba95' => ··· 3919 3926 'reverse' => 3920 3927 array( 3921 3928 'aphront-attached-file-view-css' => 'c41b4907', 3922 - 'aphront-dialog-view-css' => '3f552ecc', 3923 - 'aphront-error-view-css' => '3f552ecc', 3924 - 'aphront-form-view-css' => '3f552ecc', 3925 - 'aphront-list-filter-view-css' => '3f552ecc', 3926 - 'aphront-pager-view-css' => '3f552ecc', 3927 - 'aphront-panel-view-css' => '3f552ecc', 3928 - 'aphront-table-view-css' => '3f552ecc', 3929 - 'aphront-tokenizer-control-css' => '3f552ecc', 3930 - 'aphront-tooltip-css' => '3f552ecc', 3931 - 'aphront-typeahead-control-css' => '3f552ecc', 3929 + 'aphront-dialog-view-css' => '6c294512', 3930 + 'aphront-error-view-css' => '6c294512', 3931 + 'aphront-form-view-css' => '6c294512', 3932 + 'aphront-list-filter-view-css' => '6c294512', 3933 + 'aphront-pager-view-css' => '6c294512', 3934 + 'aphront-panel-view-css' => '6c294512', 3935 + 'aphront-table-view-css' => '6c294512', 3936 + 'aphront-tokenizer-control-css' => '6c294512', 3937 + 'aphront-tooltip-css' => '6c294512', 3938 + 'aphront-typeahead-control-css' => '6c294512', 3932 3939 'differential-changeset-view-css' => '8aaacd1b', 3933 3940 'differential-core-view-css' => '8aaacd1b', 3934 3941 'differential-inline-comment-editor' => '322728f3', ··· 3942 3949 'differential-table-of-contents-css' => '8aaacd1b', 3943 3950 'diffusion-commit-view-css' => 'c8ce2d88', 3944 3951 'diffusion-icons-css' => 'c8ce2d88', 3945 - 'global-drag-and-drop-css' => '3f552ecc', 3952 + 'global-drag-and-drop-css' => '6c294512', 3946 3953 'inline-comment-summary-css' => '8aaacd1b', 3947 3954 'javelin-aphlict' => '95ceba95', 3948 3955 'javelin-behavior' => 'fe22443b', ··· 4014 4021 'javelin-util' => 'fe22443b', 4015 4022 'javelin-vector' => 'fe22443b', 4016 4023 'javelin-workflow' => 'fe22443b', 4017 - 'lightbox-attachment-css' => '3f552ecc', 4024 + 'lightbox-attachment-css' => '6c294512', 4018 4025 'maniphest-task-summary-css' => 'c41b4907', 4019 4026 'maniphest-transaction-detail-css' => 'c41b4907', 4020 4027 'phabricator-busy' => '95ceba95', 4021 4028 'phabricator-content-source-view-css' => '8aaacd1b', 4022 - 'phabricator-core-buttons-css' => '3f552ecc', 4023 - 'phabricator-core-css' => '3f552ecc', 4024 - 'phabricator-crumbs-view-css' => '3f552ecc', 4025 - 'phabricator-directory-css' => '3f552ecc', 4029 + 'phabricator-core-buttons-css' => '6c294512', 4030 + 'phabricator-core-css' => '6c294512', 4031 + 'phabricator-crumbs-view-css' => '6c294512', 4032 + 'phabricator-directory-css' => '6c294512', 4026 4033 'phabricator-drag-and-drop-file-upload' => '322728f3', 4027 4034 'phabricator-dropdown-menu' => '95ceba95', 4028 4035 'phabricator-file-upload' => '95ceba95', 4029 - 'phabricator-filetree-view-css' => '3f552ecc', 4030 - 'phabricator-flag-css' => '3f552ecc', 4031 - 'phabricator-form-view-css' => '3f552ecc', 4032 - 'phabricator-header-view-css' => '3f552ecc', 4033 - 'phabricator-jump-nav' => '3f552ecc', 4036 + 'phabricator-filetree-view-css' => '6c294512', 4037 + 'phabricator-flag-css' => '6c294512', 4038 + 'phabricator-form-view-css' => '6c294512', 4039 + 'phabricator-header-view-css' => '6c294512', 4040 + 'phabricator-jump-nav' => '6c294512', 4034 4041 'phabricator-keyboard-shortcut' => '95ceba95', 4035 4042 'phabricator-keyboard-shortcut-manager' => '95ceba95', 4036 - 'phabricator-main-menu-view' => '3f552ecc', 4043 + 'phabricator-main-menu-view' => '6c294512', 4037 4044 'phabricator-menu-item' => '95ceba95', 4038 - 'phabricator-nav-view-css' => '3f552ecc', 4045 + 'phabricator-nav-view-css' => '6c294512', 4039 4046 'phabricator-notification' => '95ceba95', 4040 - 'phabricator-notification-css' => '3f552ecc', 4041 - 'phabricator-notification-menu-css' => '3f552ecc', 4042 - 'phabricator-object-item-list-view-css' => '3f552ecc', 4047 + 'phabricator-notification-css' => '6c294512', 4048 + 'phabricator-notification-menu-css' => '6c294512', 4049 + 'phabricator-object-item-list-view-css' => '6c294512', 4043 4050 'phabricator-object-selector-css' => '8aaacd1b', 4044 4051 'phabricator-paste-file-upload' => '95ceba95', 4045 4052 'phabricator-prefab' => '95ceba95', 4046 4053 'phabricator-project-tag-css' => 'c41b4907', 4047 - 'phabricator-remarkup-css' => '3f552ecc', 4054 + 'phabricator-remarkup-css' => '6c294512', 4048 4055 'phabricator-shaped-request' => '322728f3', 4049 - 'phabricator-side-menu-view-css' => '3f552ecc', 4050 - 'phabricator-standard-page-view' => '3f552ecc', 4056 + 'phabricator-side-menu-view-css' => '6c294512', 4057 + 'phabricator-standard-page-view' => '6c294512', 4051 4058 'phabricator-textareautils' => '95ceba95', 4052 4059 'phabricator-tooltip' => '95ceba95', 4053 - 'phabricator-transaction-view-css' => '3f552ecc', 4054 - 'phabricator-zindex-css' => '3f552ecc', 4055 - 'sprite-apps-large-css' => '3f552ecc', 4056 - 'sprite-gradient-css' => '3f552ecc', 4057 - 'sprite-icon-css' => '3f552ecc', 4058 - 'sprite-menu-css' => '3f552ecc', 4059 - 'syntax-highlighting-css' => '3f552ecc', 4060 + 'phabricator-transaction-view-css' => '6c294512', 4061 + 'phabricator-zindex-css' => '6c294512', 4062 + 'sprite-apps-large-css' => '6c294512', 4063 + 'sprite-gradient-css' => '6c294512', 4064 + 'sprite-icon-css' => '6c294512', 4065 + 'sprite-menu-css' => '6c294512', 4066 + 'syntax-highlighting-css' => '6c294512', 4060 4067 ), 4061 4068 ));

+8 -1

src/aphront/response/AphrontAjaxResponse.php

··· 45 45 )); 46 46 } 47 47 48 + // Flatten the response first, so we initialize any behaviors and metadata 49 + // we need to. 50 + $content = array( 51 + 'payload' => $this->content, 52 + ); 53 + $this->encodeJSONForHTTPResponse($content); 54 + 48 55 $response = CelerityAPI::getStaticResourceResponse(); 49 56 $object = $response->buildAjaxResponse( 50 - $this->content, 57 + $content['payload'], 51 58 $this->error); 52 59 53 60 $response_json = $this->encodeJSONForHTTPResponse($object);

+6

src/aphront/response/AphrontResponse.php

··· 55 55 } 56 56 57 57 public static function processValueForJSONEncoding(&$value, $key) { 58 + if ($value instanceof PhutilSafeHTMLProducerInterface) { 59 + // This renders the producer down to PhutilSafeHTML, which will then 60 + // be simplified into a string below. 61 + $value = hsprintf('%s', $value); 62 + } 63 + 58 64 if ($value instanceof PhutilSafeHTML) { 59 65 // TODO: Javelin supports implicity conversion of '__html' objects to 60 66 // JX.HTML, but only for Ajax responses, not behaviors. Just leave things

+67 -6

src/applications/uiexample/examples/PhabricatorObjectItemListExample.php

··· 28 28 29 29 $list->addItem( 30 30 id(new PhabricatorObjectItemView()) 31 + ->setObjectName('FRUIT1') 31 32 ->setHeader(pht('Apple')) 32 33 ->setHref('#')); 33 34 34 35 $list->addItem( 35 36 id(new PhabricatorObjectItemView()) 37 + ->setObjectName('FRUIT2') 36 38 ->setHeader(pht('Banana')) 37 39 ->setHref('#')); 38 40 39 41 $list->addItem( 40 42 id(new PhabricatorObjectItemView()) 43 + ->setObjectName('FRUIT3') 41 44 ->setHeader(pht('Cherry')) 42 45 ->setHref('#')); 43 46 ··· 85 88 86 89 $list->addItem( 87 90 id(new PhabricatorObjectItemView()) 88 - ->setHeader(pht('Business Card'))); 91 + ->setHeader(pht('Business Card')) 92 + ->setBarColor('red')); 89 93 $list->addItem( 90 94 id(new PhabricatorObjectItemView()) 91 - ->setHeader(pht('Playing Card'))); 95 + ->setHeader(pht('Playing Card')) 96 + ->setBarColor('orange') 97 + ->addIcon('comment', pht('Royal Flush!'))); 92 98 $list->addItem( 93 99 id(new PhabricatorObjectItemView()) 94 - ->setHeader(pht('House of Cards'))); 100 + ->setHeader(pht('House of Cards')) 101 + ->setBarColor('yellow')); 95 102 $list->addItem( 96 103 id(new PhabricatorObjectItemView()) 97 - ->setHeader(pht('Cardigan'))); 104 + ->setHeader(pht('Cardigan')) 105 + ->setBarColor('green')); 98 106 $list->addItem( 99 107 id(new PhabricatorObjectItemView()) 100 108 ->setHeader(pht('Cardamom')) 101 - ->addFootIcon('highlight-white', 'Spice')); 109 + ->addFootIcon('highlight-white', 'Spice') 110 + ->setBarColor('blue')); 102 111 $list->addItem( 103 112 id(new PhabricatorObjectItemView()) 104 113 ->setHeader(pht( 105 114 'The human cardiovascular system includes the heart, lungs, and '. 106 115 'some other parts; most of these parts are pretty squishy')) 107 116 ->addFootIcon('search-white', pht('Respiration!')) 108 - ->addHandleIcon($handle, pht('You have a cardiovascular system!'))); 117 + ->addHandleIcon($handle, pht('You have a cardiovascular system!')) 118 + ->setBarColor('magenta')); 119 + 120 + 121 + $out[] = array($head, $list); 122 + 123 + 124 + $head = id(new PhabricatorHeaderView()) 125 + ->setHeader(pht('Grippable List')); 126 + $list = new PhabricatorObjectItemListView(); 127 + $list->setCards(true); 128 + 129 + $list->addItem( 130 + id(new PhabricatorObjectItemView()) 131 + ->setHeader(pht('Grab ahold!')) 132 + ->setHref('#') 133 + ->setGrippable(true) 134 + ->setBarColor('red')); 109 135 136 + $list->addItem( 137 + id(new PhabricatorObjectItemView()) 138 + ->setHeader(pht('Hold on tight!')) 139 + ->setHref('#') 140 + ->setGrippable(true) 141 + ->setBarColor('yellow')); 142 + 143 + $list->addItem( 144 + id(new PhabricatorObjectItemView()) 145 + ->setHeader(pht("Don't let go!")) 146 + ->setHref('#') 147 + ->setGrippable(true) 148 + ->setBarColor('green')); 110 149 111 150 $out[] = array($head, $list); 112 151 ··· 128 167 ->addFootIcon('love-white', pht('Heart')) 129 168 ->addHandleIcon($handle, pht('You hold all the cards.')) 130 169 ->addHandleIcon($handle, pht('You make all the rules.'))); 170 + 171 + $list->addItem( 172 + id(new PhabricatorObjectItemView()) 173 + ->setHeader(pht('Just A Handle')) 174 + ->setHref('#') 175 + ->addHandleIcon($handle, pht('Handle Here'))); 176 + 177 + $list->addItem( 178 + id(new PhabricatorObjectItemView()) 179 + ->setHeader(pht('Poor Use of Space')) 180 + ->setHref('#') 181 + ->addAttribute('North West') 182 + ->addHandleIcon($handle, pht('South East'))); 183 + 184 + $list->addItem( 185 + id(new PhabricatorObjectItemView()) 186 + ->setHeader(pht('Crowded Eastern Edge')) 187 + ->setHref('#') 188 + ->addIcon('computer', pht('Stuff')) 189 + ->addIcon('computer', pht('Stuff')) 190 + ->addIcon('computer', pht('Stuff')) 191 + ->addHandleIcon($handle, pht('More Stuff'))); 131 192 132 193 $out[] = array($head, $list); 133 194

+91 -35

src/view/layout/PhabricatorObjectItemView.php

··· 2 2 3 3 final class PhabricatorObjectItemView extends AphrontView { 4 4 5 + private $objectName; 5 6 private $header; 6 7 private $href; 7 8 private $attributes = array(); ··· 11 12 private $effect; 12 13 private $footIcons = array(); 13 14 private $handleIcons = array(); 15 + private $grippable; 16 + 17 + public function setObjectName($name) { 18 + $this->objectName = $name; 19 + return $this; 20 + } 21 + 22 + public function setGrippable($grippable) { 23 + $this->grippable = $grippable; 24 + return $this; 25 + } 26 + 27 + public function getGrippable() { 28 + return $this->grippable; 29 + } 14 30 15 31 public function setEffect($effect) { 16 32 $this->effect = $effect; ··· 94 110 $item_classes = array(); 95 111 $content_classes[] = 'phabricator-object-item-content'; 96 112 97 - $header = phutil_tag( 113 + $header_name = null; 114 + if ($this->objectName) { 115 + $header_name = array( 116 + phutil_tag( 117 + 'span', 118 + array( 119 + 'class' => 'phabricator-object-item-objname', 120 + ), 121 + $this->objectName), 122 + ' ', 123 + ); 124 + } 125 + 126 + $header_link = phutil_tag( 98 127 $this->href ? 'a' : 'div', 99 128 array( 100 129 'href' => $this->href, 130 + 'class' => 'phabricator-object-item-link', 131 + ), 132 + $this->header); 133 + 134 + $header = phutil_tag( 135 + 'div', 136 + array( 101 137 'class' => 'phabricator-object-item-name', 102 138 ), 103 - $this->header); 139 + array( 140 + $header_name, 141 + $header_link, 142 + )); 104 143 105 - $icons = null; 144 + $icons = array(); 106 145 if ($this->icons) { 107 146 $icon_list = array(); 108 147 foreach ($this->icons as $spec) { ··· 141 180 $icon_href); 142 181 } 143 182 144 - $icons = phutil_tag( 183 + $icons[] = phutil_tag( 145 184 'ul', 146 185 array( 147 186 'class' => 'phabricator-object-item-icons', ··· 150 189 $item_classes[] = 'phabricator-object-item-with-icons'; 151 190 } 152 191 192 + if ($this->handleIcons) { 193 + $handle_bar = array(); 194 + foreach ($this->handleIcons as $icon) { 195 + $handle_bar[] = $this->renderHandleIcon($icon['icon'], $icon['label']); 196 + } 197 + $icons[] = phutil_tag( 198 + 'div', 199 + array( 200 + 'class' => 'phabricator-object-item-handle-icons', 201 + ), 202 + $handle_bar); 203 + $item_classes[] = 'phabricator-object-item-with-handle-icons'; 204 + } 205 + 206 + if ($icons) { 207 + $icons = phutil_tag( 208 + 'div', 209 + array( 210 + 'class' => 'phabricator-object-icon-pane', 211 + ), 212 + $icons); 213 + } 214 + 153 215 $attrs = null; 154 216 if ($this->attributes) { 155 217 $attrs = array(); ··· 181 243 $item_classes[] = 'phabricator-object-item-with-attrs'; 182 244 } 183 245 184 - $foot = array(); 185 - 186 - if ($this->handleIcons) { 187 - $handle_bar = array(); 188 - foreach ($this->handleIcons as $icon) { 189 - $handle_bar[] = $this->renderHandleIcon($icon['icon'], $icon['label']); 190 - } 191 - $foot[] = phutil_tag( 192 - 'div', 193 - array( 194 - 'class' => 'phabricator-object-item-handle-icons', 195 - ), 196 - $handle_bar); 197 - $item_classes[] = 'phabricator-object-item-with-handle-icons'; 198 - } 199 - 246 + $foot = null; 200 247 if ($this->footIcons) { 201 248 $foot_bar = array(); 202 249 foreach ($this->footIcons as $icon) { 203 250 $foot_bar[] = $this->renderFootIcon($icon['icon'], $icon['label']); 204 251 } 205 - $foot[] = phutil_tag( 252 + $foot = phutil_tag( 206 253 'div', 207 254 array( 208 255 'class' => 'phabricator-object-item-foot-icons', 209 256 ), 210 257 $foot_bar); 211 - } 212 - 213 - if ($foot) { 214 - $foot = phutil_tag( 215 - 'div', 216 - array( 217 - 'class' => 'phabricator-object-item-foot', 218 - ), 219 - $foot); 258 + $item_classes[] = 'phabricator-object-item-with-foot-icons'; 220 259 } 221 260 222 261 $item_classes[] = 'phabricator-object-item'; ··· 237 276 throw new Exception(pht("Invalid effect!")); 238 277 } 239 278 279 + $grippable = null; 280 + if ($this->getGrippable()) { 281 + $item_classes[] = 'phabricator-object-item-grippable'; 282 + $grippable = phutil_tag( 283 + 'div', 284 + array( 285 + 'class' => 'phabricator-object-item-grip', 286 + ), 287 + ''); 288 + } 289 + 240 290 $content = phutil_tag( 241 291 'div', 242 292 array( ··· 246 296 $header, 247 297 $attrs, 248 298 $this->renderChildren(), 299 + $foot, 249 300 )); 250 301 251 302 return phutil_tag( ··· 253 304 array( 254 305 'class' => implode(' ', $item_classes), 255 306 ), 256 - array( 257 - $icons, 258 - $content, 259 - $foot, 260 - )); 307 + phutil_tag( 308 + 'div', 309 + array( 310 + 'class' => 'phabricator-object-item-frame', 311 + ), 312 + array( 313 + $grippable, 314 + $icons, 315 + $content, 316 + ))); 261 317 } 262 318 263 319 private function renderFootIcon($icon, $label) {

+117 -50

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

··· 6 6 padding: 8px 6px; 7 7 } 8 8 9 - 10 9 .device-desktop .phabricator-object-item-list-view { 11 10 padding: 20px; 12 11 } 13 12 13 + .device-desktop .phabricator-object-list-flush { 14 + padding: 0; 15 + } 16 + 14 17 .phabricator-object-item { 15 18 background: #ffffff; 16 19 border-style: solid; 17 20 border-color: #c0c5d1; 18 - border-width: 1px 1px 1px 3px; 21 + border-width: 0 0 0 3px; 19 22 margin: 5px 0; 20 23 21 24 overflow: hidden; 22 25 box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.10); 23 26 } 24 27 28 + .phabricator-object-item-frame { 29 + border-style: solid; 30 + border-color: #c0c5d1; 31 + border-width: 1px 1px 1px 0; 32 + overflow: hidden; 33 + position: relative; 34 + } 35 + 25 36 .device-desktop .phabricator-object-item { 26 37 margin: 0 0 5px 0; 27 38 } 28 39 29 40 .phabricator-object-item-name { 30 41 display: block; 31 - padding: 8px 10px 8px; 32 42 font-weight: bold; 33 43 font-size: 14px; 44 + padding: 0 10px; 45 + } 46 + 47 + .phabricator-object-item-link { 48 + display: inline-block; 49 + padding: 8px 0; 50 + } 51 + 52 + 53 + .phabricator-object-item-objname { 54 + color: #222222; 34 55 } 35 56 36 57 .phabricator-object-item-with-attrs .phabricator-object-item-name { ··· 41 62 overflow: hidden; 42 63 } 43 64 65 + .phabricator-object-item-grippable { 66 + cursor: move; 67 + } 68 + 69 + .phabricator-object-item-grip { 70 + position: absolute; 71 + top: 0; 72 + bottom: 0; 73 + left: 0; 74 + width: 15px; 75 + background: url(/rsrc/image/texture/grip.png) center center no-repeat; 76 + } 77 + 78 + .phabricator-object-item-grippable .phabricator-object-item-frame { 79 + padding-left: 9px; 80 + } 81 + 44 82 45 83 /* - Stackable List ------------------------------------------------------------ 46 84 ··· 54 92 } 55 93 56 94 .phabricator-object-list-stackable .phabricator-object-item { 57 - border-width: 1px; 95 + border-left-width: 1px; 58 96 } 59 97 60 98 .device-desktop .phabricator-object-list-stackable 61 99 .phabricator-object-item:hover { 62 - border-width: 1px; 63 100 background: #e9ecf5; 64 101 } 65 102 66 103 67 - /* - Card List ----------------------------------------------------------------- 68 - 69 - Rounded card list. 70 - 71 - */ 72 - 73 - /* Hard to sprite since we can't have other sprites appearing in tall cells */ 74 - .phabricator-object-list-cards .phabricator-object-item { 75 - border-radius: 3px; 76 - border-left-width: 4px; 77 - background: #e8e8e8 url('/rsrc/image/texture/card-gradient.png') repeat-x; 78 - } 79 - 80 - 81 - .phabricator-object-list-cards .phabricator-object-item-name { 82 - display: block; 83 - padding: 6px 10px 6px; 84 - font-weight: normal; 85 - font-size: 13px; 86 - color: #555555; 87 - max-height: 2em; 88 - } 89 - 90 - 91 104 /* - Attribute List ------------------------------------------------------------ 92 105 93 106 Object attributes, commonly used to render created date, etc. ··· 116 129 117 130 */ 118 131 132 + .phabricator-object-icon-pane { 133 + float: right; 134 + } 135 + 136 + .phabricator-object-item-with-handle-icons .phabricator-object-item-icons { 137 + padding-bottom: 34px; 138 + } 139 + 119 140 .phabricator-object-item-icons { 120 141 float: right; 121 - padding: 10px 10px 0; 142 + padding: 6px 10px 0; 122 143 } 123 144 124 145 /* NOTE: The main content is an "overflow: hidden" div which we give a right ··· 126 147 the width + padding of the icon div, so the icons have some space even if 127 148 the content is wider than available space. */ 128 149 129 - .device-desktop .phabricator-object-item-icons { 150 + .device-desktop .phabricator-object-icon-pane { 130 151 width: 120px; 131 152 } 132 153 133 154 .device-desktop .phabricator-object-item-with-icons 155 + .phabricator-object-item-content, 156 + .device-desktop .phabricator-object-item-with-handle-icons 134 157 .phabricator-object-item-content { 135 158 margin-right: 132px; 136 159 } ··· 139 162 width: 18px; 140 163 } 141 164 142 - .device .phabricator-object-item-with-icons .phabricator-object-item-content { 165 + .device .phabricator-object-item-with-icons .phabricator-object-item-content, 166 + .device .phabricator-object-item-with-handle-icons 167 + .phabricator-object-item-content { 143 168 margin-right: 30px; 144 169 } 145 170 146 171 .device .phabricator-object-item-icon-label { 147 172 display: none; 148 - vertical-align: middle; 149 173 } 150 174 151 175 .phabricator-object-item-icon { 176 + vertical-align: middle; 152 177 position: relative; 153 178 font-size: 11px; 154 179 color: #666666; ··· 162 187 163 188 .device-desktop .phabricator-object-item-icon { 164 189 padding-right: 22px; 190 + } 191 + 192 + .device-desktop .phabricator-object-item-icon-none { 193 + padding-right: 0; 165 194 } 166 195 167 196 .phabricator-object-item-icon-image { ··· 212 241 border-left-color: #67009b; 213 242 } 214 243 244 + .phabricator-object-item-bar-color-magenta { 245 + border-left-color: #cc00c0; 246 + } 247 + 215 248 .phabricator-object-item-bar-color-grey { 216 249 border-left-color: #999999; 217 250 } ··· 236 269 } 237 270 238 271 239 - /* - Foot ---------------------------------------------------------------------- 240 - 241 - This goes at the bottom. 242 - 243 - */ 244 - 245 - .phabricator-object-item-foot { 246 - clear: both; 247 - padding: 0; 248 - } 249 - 250 - 251 272 /* - Foot Icons ---------------------------------------------------------------- 252 273 253 274 Object counts shown in the footer. ··· 256 277 257 278 .phabricator-object-item-foot-icons { 258 279 margin-left: 10px; 280 + bottom: 0; 281 + position: absolute; 282 + } 283 + 284 + .phabricator-object-item-with-foot-icons .phabricator-object-item-content { 285 + padding-bottom: 22px; 259 286 } 260 287 261 288 .phabricator-object-item-foot-icon { ··· 268 295 height: 19px; 269 296 vertical-align: middle; 270 297 position: relative; 271 - } 272 - 273 - .phabricator-object-item-with-handle-icons .phabricator-object-item-foot-icon { 274 - margin-top: 8px; 275 298 } 276 299 277 300 .phabricator-object-item-foot-icon .sprite-icon { ··· 290 313 */ 291 314 292 315 .phabricator-object-item-handle-icons { 293 - float: right; 294 316 height: 28px; 295 317 margin-right: 10px; 318 + bottom: 0; 319 + right: 0; 320 + text-align: right; 321 + position: absolute; 296 322 } 297 323 298 324 .phabricator-object-item-handle-icon { ··· 304 330 background-size: 28px 28px; 305 331 background-repeat: no-repeat; 306 332 } 333 + 334 + 335 + /* - Card List ----------------------------------------------------------------- 336 + 337 + Rounded card list. 338 + 339 + */ 340 + 341 + /* Hard to sprite since we can't have other sprites appearing in tall cells */ 342 + .phabricator-object-list-cards .phabricator-object-item { 343 + border-radius: 3px; 344 + border-left-width: 4px; 345 + background: #e8e8e8 url('/rsrc/image/texture/card-gradient.png') repeat-x; 346 + } 347 + 348 + .phabricator-object-list-cards .phabricator-object-item-name { 349 + font-size: 13px; 350 + } 351 + 352 + .phabricator-object-list-cards .phabricator-object-item-link { 353 + white-space: nowrap; 354 + padding: 6px 0; 355 + } 356 + 357 + .phabricator-object-list-cards .phabricator-object-item-with-attrs 358 + .phabricator-object-item-name { 359 + padding: 4px 10px 4px; 360 + } 361 + 362 + .phabricator-object-list-cards .phabricator-object-item-selected { 363 + background: #bfdcff; 364 + } 365 + 366 + .phabricator-object-list-cards .phabricator-object-item-selected 367 + .phabricator-object-item-frame { 368 + border-color: #99ccff; 369 + } 370 + 371 + .phabricator-object-list-cards .phabricator-object-item-attributes { 372 + padding-bottom: 4px; 373 + }

webroot/rsrc/image/texture/grip.png

This is a binary file and will not be displayed.

Configure Feed

Configure Feed