Phriction Redesign · recaptime.dev/phorge@7b9b872

+41 -41

src/__celerity_resource_map__.php

··· 870 870 ), 871 871 'aphront-two-column-view-css' => 872 872 array( 873 - 'uri' => '/res/7afa129f/rsrc/css/aphront/two-column.css', 873 + 'uri' => '/res/4263aa98/rsrc/css/aphront/two-column.css', 874 874 'type' => 'css', 875 875 'requires' => 876 876 array( ··· 3248 3248 ), 3249 3249 'phabricator-remarkup-css' => 3250 3250 array( 3251 - 'uri' => '/res/a53fa430/rsrc/css/core/remarkup.css', 3251 + 'uri' => '/res/fb60dc21/rsrc/css/core/remarkup.css', 3252 3252 'type' => 'css', 3253 3253 'requires' => 3254 3254 array( ··· 3587 3587 ), 3588 3588 'phriction-document-css' => 3589 3589 array( 3590 - 'uri' => '/res/e71e4a67/rsrc/css/application/phriction/phriction-document-css.css', 3590 + 'uri' => '/res/521172c8/rsrc/css/application/phriction/phriction-document-css.css', 3591 3591 'type' => 'css', 3592 3592 'requires' => 3593 3593 array( ··· 3903 3903 ), array( 3904 3904 'packages' => 3905 3905 array( 3906 - 'b3deb720' => 3906 + '9cece986' => 3907 3907 array( 3908 3908 'name' => 'core.pkg.css', 3909 3909 'symbols' => ··· 3945 3945 34 => 'phabricator-object-item-list-view-css', 3946 3946 35 => 'global-drag-and-drop-css', 3947 3947 ), 3948 - 'uri' => '/res/pkg/b3deb720/core.pkg.css', 3948 + 'uri' => '/res/pkg/9cece986/core.pkg.css', 3949 3949 'type' => 'css', 3950 3950 ), 3951 3951 'bf16b308' => ··· 4135 4135 'reverse' => 4136 4136 array( 4137 4137 'aphront-attached-file-view-css' => '6b1fccc6', 4138 - 'aphront-dialog-view-css' => 'b3deb720', 4139 - 'aphront-error-view-css' => 'b3deb720', 4140 - 'aphront-form-view-css' => 'b3deb720', 4141 - 'aphront-list-filter-view-css' => 'b3deb720', 4142 - 'aphront-pager-view-css' => 'b3deb720', 4143 - 'aphront-panel-view-css' => 'b3deb720', 4144 - 'aphront-table-view-css' => 'b3deb720', 4145 - 'aphront-tokenizer-control-css' => 'b3deb720', 4146 - 'aphront-tooltip-css' => 'b3deb720', 4147 - 'aphront-typeahead-control-css' => 'b3deb720', 4138 + 'aphront-dialog-view-css' => '9cece986', 4139 + 'aphront-error-view-css' => '9cece986', 4140 + 'aphront-form-view-css' => '9cece986', 4141 + 'aphront-list-filter-view-css' => '9cece986', 4142 + 'aphront-pager-view-css' => '9cece986', 4143 + 'aphront-panel-view-css' => '9cece986', 4144 + 'aphront-table-view-css' => '9cece986', 4145 + 'aphront-tokenizer-control-css' => '9cece986', 4146 + 'aphront-tooltip-css' => '9cece986', 4147 + 'aphront-typeahead-control-css' => '9cece986', 4148 4148 'differential-changeset-view-css' => '8aaacd1b', 4149 4149 'differential-core-view-css' => '8aaacd1b', 4150 4150 'differential-inline-comment-editor' => 'e96b08f8', ··· 4158 4158 'differential-table-of-contents-css' => '8aaacd1b', 4159 4159 'diffusion-commit-view-css' => 'c8ce2d88', 4160 4160 'diffusion-icons-css' => 'c8ce2d88', 4161 - 'global-drag-and-drop-css' => 'b3deb720', 4161 + 'global-drag-and-drop-css' => '9cece986', 4162 4162 'inline-comment-summary-css' => '8aaacd1b', 4163 4163 'javelin-aphlict' => 'bf16b308', 4164 4164 'javelin-behavior' => 'bea3de16', ··· 4230 4230 'javelin-util' => 'bea3de16', 4231 4231 'javelin-vector' => 'bea3de16', 4232 4232 'javelin-workflow' => 'bea3de16', 4233 - 'lightbox-attachment-css' => 'b3deb720', 4233 + 'lightbox-attachment-css' => '9cece986', 4234 4234 'maniphest-task-summary-css' => '6b1fccc6', 4235 4235 'maniphest-transaction-detail-css' => '6b1fccc6', 4236 4236 'phabricator-busy' => 'bf16b308', 4237 4237 'phabricator-content-source-view-css' => '8aaacd1b', 4238 - 'phabricator-core-buttons-css' => 'b3deb720', 4239 - 'phabricator-core-css' => 'b3deb720', 4240 - 'phabricator-crumbs-view-css' => 'b3deb720', 4241 - 'phabricator-directory-css' => 'b3deb720', 4238 + 'phabricator-core-buttons-css' => '9cece986', 4239 + 'phabricator-core-css' => '9cece986', 4240 + 'phabricator-crumbs-view-css' => '9cece986', 4241 + 'phabricator-directory-css' => '9cece986', 4242 4242 'phabricator-drag-and-drop-file-upload' => 'e96b08f8', 4243 4243 'phabricator-dropdown-menu' => 'bf16b308', 4244 4244 'phabricator-file-upload' => 'bf16b308', 4245 - 'phabricator-filetree-view-css' => 'b3deb720', 4246 - 'phabricator-flag-css' => 'b3deb720', 4247 - 'phabricator-form-view-css' => 'b3deb720', 4248 - 'phabricator-header-view-css' => 'b3deb720', 4249 - 'phabricator-jump-nav' => 'b3deb720', 4245 + 'phabricator-filetree-view-css' => '9cece986', 4246 + 'phabricator-flag-css' => '9cece986', 4247 + 'phabricator-form-view-css' => '9cece986', 4248 + 'phabricator-header-view-css' => '9cece986', 4249 + 'phabricator-jump-nav' => '9cece986', 4250 4250 'phabricator-keyboard-shortcut' => 'bf16b308', 4251 4251 'phabricator-keyboard-shortcut-manager' => 'bf16b308', 4252 - 'phabricator-main-menu-view' => 'b3deb720', 4252 + 'phabricator-main-menu-view' => '9cece986', 4253 4253 'phabricator-menu-item' => 'bf16b308', 4254 - 'phabricator-nav-view-css' => 'b3deb720', 4254 + 'phabricator-nav-view-css' => '9cece986', 4255 4255 'phabricator-notification' => 'bf16b308', 4256 - 'phabricator-notification-css' => 'b3deb720', 4257 - 'phabricator-notification-menu-css' => 'b3deb720', 4258 - 'phabricator-object-item-list-view-css' => 'b3deb720', 4256 + 'phabricator-notification-css' => '9cece986', 4257 + 'phabricator-notification-menu-css' => '9cece986', 4258 + 'phabricator-object-item-list-view-css' => '9cece986', 4259 4259 'phabricator-object-selector-css' => '8aaacd1b', 4260 4260 'phabricator-prefab' => 'bf16b308', 4261 4261 'phabricator-project-tag-css' => '6b1fccc6', 4262 - 'phabricator-remarkup-css' => 'b3deb720', 4262 + 'phabricator-remarkup-css' => '9cece986', 4263 4263 'phabricator-shaped-request' => 'e96b08f8', 4264 - 'phabricator-side-menu-view-css' => 'b3deb720', 4265 - 'phabricator-standard-page-view' => 'b3deb720', 4264 + 'phabricator-side-menu-view-css' => '9cece986', 4265 + 'phabricator-standard-page-view' => '9cece986', 4266 4266 'phabricator-textareautils' => 'bf16b308', 4267 4267 'phabricator-tooltip' => 'bf16b308', 4268 - 'phabricator-transaction-view-css' => 'b3deb720', 4269 - 'phabricator-zindex-css' => 'b3deb720', 4270 - 'sprite-apps-large-css' => 'b3deb720', 4271 - 'sprite-gradient-css' => 'b3deb720', 4272 - 'sprite-icon-css' => 'b3deb720', 4273 - 'sprite-menu-css' => 'b3deb720', 4274 - 'syntax-highlighting-css' => 'b3deb720', 4268 + 'phabricator-transaction-view-css' => '9cece986', 4269 + 'phabricator-zindex-css' => '9cece986', 4270 + 'sprite-apps-large-css' => '9cece986', 4271 + 'sprite-gradient-css' => '9cece986', 4272 + 'sprite-icon-css' => '9cece986', 4273 + 'sprite-menu-css' => '9cece986', 4274 + 'syntax-highlighting-css' => '9cece986', 4275 4275 ), 4276 4276 ));

+3 -3

src/applications/phriction/controller/PhrictionController.php

··· 29 29 30 30 if ($for_app) { 31 31 $nav->addFilter('', pht('Root Document'), '/w/'); 32 - $nav->addFilter('', pht('Create Document'), '/phriction/new'); 32 + $nav->addFilter('', pht('New Document'), '/phriction/new'); 33 33 } 34 34 35 35 $nav->addLabel(pht('Filters')); ··· 52 52 if (get_class($this) != 'PhrictionListController') { 53 53 $crumbs->addAction( 54 54 id(new PhabricatorMenuItemView()) 55 - ->setName(pht('Document Index')) 55 + ->setName(pht('Index')) 56 56 ->setHref('/phriction/') 57 57 ->setIcon('transcript')); 58 58 } 59 59 60 60 $crumbs->addAction( 61 61 id(new PhabricatorMenuItemView()) 62 - ->setName(pht('Create Document')) 62 + ->setName(pht('New Document')) 63 63 ->setHref('/phriction/new/?slug='.$this->getDocumentSlug()) 64 64 ->setWorkflow(true) 65 65 ->setIcon('create'));

+34 -14

src/applications/phriction/controller/PhrictionDocumentController.php

··· 30 30 $slug); 31 31 32 32 $version_note = null; 33 + $core_content = ''; 34 + $byline = ''; 35 + $move_notice = ''; 33 36 34 37 if (!$document) { 35 38 ··· 211 214 ->render(); 212 215 } 213 216 214 - $page_content = hsprintf( 215 - '<div class="phriction-content">%s%s%s</div>', 216 - $byline, 217 - $move_notice, 218 - $core_content); 219 217 } 220 218 221 219 if ($version_note) { ··· 236 234 $header = id(new PhabricatorHeaderView()) 237 235 ->setHeader($page_title); 238 236 237 + $page_content = hsprintf( 238 + '<div class="phriction-wrap"> 239 + <div class="phriction-content"> 240 + %s%s%s%s%s 241 + </div> 242 + <div class="phriction-fake-space"></div> 243 + </div>', 244 + $header, 245 + $actions, 246 + $byline, 247 + $move_notice, 248 + $core_content); 249 + 250 + $core_page = phutil_tag( 251 + 'div', 252 + array( 253 + 'class' => 'phriction-offset' 254 + ), 255 + array( 256 + $page_content, 257 + $children, 258 + )); 259 + 239 260 return $this->buildApplicationPage( 240 261 array( 241 262 $crumbs->render(), 242 - $header->render(), 243 - $actions->render(), 244 - $version_note, 245 - $page_content, 246 - $children, 263 + $core_page, 247 264 ), 248 265 array( 249 266 'title' => $page_title, 250 267 'device' => true, 268 + 'dust' => true, 251 269 )); 252 270 253 271 } ··· 411 429 } 412 430 413 431 return hsprintf( 414 - '<div class="phriction-children">'. 415 - '<div class="phriction-children-header">%s</div>'. 416 - '%s'. 417 - '</div>', 432 + '<div class="phriction-wrap"> 433 + <div class="phriction-children"> 434 + <div class="phriction-children-header">%s</div> 435 + %s 436 + </div> 437 + </div>', 418 438 pht('Document Hierarchy'), 419 439 phutil_tag('ul', array(), $list)); 420 440 }

+7 -4

src/applications/phriction/controller/PhrictionEditController.php

··· 232 232 ->appendChild($form); 233 233 234 234 $preview_panel = hsprintf( 235 - '<div class="aphront-panel-preview aphront-panel-preview-wide"> 236 - <div class="phriction-document-preview-header">%s</div> 235 + '<div class="phriction-wrap"> 236 + <div class="phriction-content"> 237 + <div class="phriction-document-preview-header plt pll">%s</div> 237 238 <div id="document-preview"> 238 239 <div class="aphront-panel-preview-loading-text">%s</div> 240 + </div> 239 241 </div> 240 242 </div>', 241 243 pht('Document Preview'), ··· 257 259 $preview_panel, 258 260 ), 259 261 array( 260 - 'title' => pht('Edit Document'), 261 - 'device' => true, 262 + 'title' => pht('Edit Document'), 263 + 'device' => true, 264 + 'dust' => true, 262 265 )); 263 266 } 264 267

-4

src/applications/phriction/controller/PhrictionListController.php

··· 32 32 33 33 $nav = $this->buildSideNavView($this->view); 34 34 35 - $header = id(new PhabricatorHeaderView()) 36 - ->setHeader($views[$this->view]); 37 - 38 35 $crumbs = $this->buildApplicationCrumbs(); 39 36 $crumbs->addCrumb(id(new PhabricatorCrumbView()) 40 37 ->setName($views[$this->view]) ··· 43 40 $nav->appendChild( 44 41 array( 45 42 $crumbs, 46 - $header, 47 43 )); 48 44 49 45 $pager = id(new AphrontCursorPagerView())

+10

src/view/layout/AphrontTwoColumnView.php

··· 4 4 5 5 private $mainColumn; 6 6 private $sideColumn; 7 + private $centered = false; 7 8 private $padding = true; 8 9 9 10 public function setMainColumn($main) { ··· 13 14 14 15 public function setSideColumn($side) { 15 16 $this->sideColumn = $side; 17 + return $this; 18 + } 19 + 20 + public function setCentered($centered) { 21 + $this->centered = $centered; 16 22 return $this; 17 23 } 18 24 ··· 39 45 $this->sideColumn); 40 46 41 47 $classes = array('aphront-two-column'); 48 + if ($this->centered) { 49 + $classes = array('aphront-two-column-centered'); 50 + } 51 + 42 52 if ($this->padding) { 43 53 $classes[] = 'aphront-two-column-padded'; 44 54 }

+17 -2

webroot/rsrc/css/aphront/two-column.css

··· 10 10 margin: 20px; 11 11 } 12 12 13 - .device-desktop .aphront-main-column { 13 + .device-desktop .aphront-two-column .aphront-main-column { 14 14 margin-right: 300px; 15 15 } 16 16 17 - .device-desktop .aphront-side-column { 17 + .device-desktop .aphront-two-column .aphront-side-column { 18 18 width: 300px; 19 19 position: absolute; 20 20 top: 0; 21 21 right: 0; 22 + } 23 + 24 + .device-desktop .aphront-two-column-centered { 25 + width: 980px; 26 + margin: 0 auto; 27 + } 28 + 29 + .device-desktop .aphront-two-column-centered .aphront-main-column { 30 + float: left; 31 + width: 820px; 32 + } 33 + 34 + .device-desktop .aphront-two-column-centered .aphront-side-column { 35 + width: 160px; 36 + float: right; 22 37 } 23 38 24 39 .device-phone .aphront-two-column.aphront-two-column-padded {

+81 -10

webroot/rsrc/css/application/phriction/phriction-document-css.css

··· 17 17 margin: .25em 0; 18 18 } 19 19 20 + .device-desktop .phriction-offset { 21 + padding-right: 160px; 22 + } 23 + 24 + .phriction-wrap { 25 + margin-bottom: 20px; 26 + } 27 + 28 + .device-desktop .phriction-wrap { 29 + position: relative; 30 + border-left: 1px solid #e7e7e7; 31 + border-right: 1px solid #e7e7e7; 32 + border-bottom: 1px solid #c0c5d1; 33 + max-width: 800px; 34 + margin: 20px auto; 35 + } 36 + 20 37 .phriction-content { 21 - max-width: 960px; 22 - margin: 1em; 38 + box-shadow: 0 1px 2px rgba(0,0,0,0.2); 39 + min-height: 240px; 40 + background: #fff; 41 + } 42 + 43 + .device-desktop .phriction-wrap { 44 + } 45 + 46 + .device-desktop .phriction-content .phabricator-action-list-view { 47 + margin: 10px 10px 0 0; 48 + background: #f7f7f7; 49 + } 50 + 51 + .device-phone .phriction-content .phabricator-action-list-view { 52 + margin: 0; 53 + border-bottom: 1px solid #c0c5d1; 54 + background: #f7f7f7; 55 + } 56 + 57 + .phriction-content .phabricator-header-shell { 58 + border-top: none; 59 + } 60 + 61 + .phriction-content .phabricator-remarkup { 62 + padding: 20px; 23 63 } 24 64 25 65 .phriction-byline { 26 - padding: .25em 0 1em; 27 - color: #444444; 66 + padding: 10px 20px; 67 + color: #777; 68 + font-size: 11px; 69 + background: #f7f7f7; 70 + } 71 + 72 + .device-phone .phriction-byline { 73 + padding: 10px; 74 + } 75 + 76 + .device-phone .phriction-content .phabricator-remarkup { 77 + padding: 10px; 28 78 } 29 79 30 80 .phriction-content .phriction-link { ··· 41 91 } 42 92 43 93 .phriction-children { 44 - padding: 1em 2em; 45 - background: #eeeeee; 46 - border-top: 1px solid #dddddd; 94 + max-width: 800px; 95 + background: #fff; 96 + box-shadow: 0 1px 2px rgba(0,0,0,0.2); 47 97 } 48 98 49 99 .phriction-children ul { 50 - margin-left: 2.5em; 100 + margin-left: 30px; 101 + padding-bottom: 10px; 51 102 list-style: circle; 52 103 color: #999999; 53 104 } 54 105 55 106 .phriction-children-header { 56 - padding: 0 0 .5em 0; 57 - margin: 0; 107 + background: #f7f7f7; 108 + padding: 10px 0 10px 20px; 58 109 font-weight: bold; 110 + margin-bottom: 15px; 111 + } 112 + 113 + .device-desktop .phriction-content .phabricator-action-list-view { 114 + position: absolute; 115 + top: 50px; 116 + right: -172px; 117 + float: none; 118 + background: #fff; 119 + border-radius: 0; 120 + box-shadow: none; 121 + border: none; 122 + border-top: 1px solid #e7e7e7; 123 + border-bottom: 1px solid #e7e7e7; 124 + border-right: 1px solid #e7e7e7; 125 + width: 160px; 59 126 } 60 127 61 128 .phriction-document-preview-header { ··· 90 157 .phriction-history-nav-table td.nav-next { 91 158 text-align: right; 92 159 } 160 + 161 + .device-phone .phriction-content .phabricator-remarkup-toc { 162 + width: 120px; 163 + }

+8 -7

webroot/rsrc/css/core/remarkup.css

··· 168 168 169 169 .phabricator-remarkup-toc { 170 170 float: right; 171 - border: 1px solid #999999; 172 - background: #f9f9f9; 171 + border: 1px solid #d7d7d7; 172 + background: #f7f7f7; 173 173 padding: 4px 12px; 174 - width: 220px; 174 + width: 180px; 175 + margin: 0 0 5px 10px; 175 176 } 176 177 177 178 .phabricator-remarkup-toc-header { 178 179 font-size: 11px; 179 - color: #444444; 180 - border-bottom: 1px solid #bbbbbb; 180 + color: #777; 181 + border-bottom: 1px solid #d7d7d7; 181 182 margin-bottom: 4px; 182 183 } 183 184 ··· 186 187 margin: 0; 187 188 list-style: none; 188 189 overflow: hidden; 189 - padding-left: 0.25em; 190 190 } 191 191 192 192 .phabricator-remarkup-toc ul ul { 193 - margin-left: 1.25em; 193 + margin-left: 0; 194 194 } 195 195 196 196 .phabricator-remarkup-toc ul li { 197 197 padding: 0; 198 198 margin: 0; 199 + font-size: 11px; 199 200 } 200 201 201 202 .phabricator-remarkup-embed-layout-right {

Configure Feed

Configure Feed