Skip to content

Commit 7b9b872

Browse files
chadlittlechadlittle
committed
Phriction Redesign
Summary: This is mostly minor, but visually it makes the wiki feel more 'page like' and better separates the actual content from other data displayed. Test Plan: Tested Chrome, iPhone, and iPad. Reviewers: epriestley, btrahan Reviewed By: epriestley CC: aran, Korvin, AnhNhan Maniphest Tasks: T2686 Differential Revision: https://secure.phabricator.com/D5366
1 parent 8ba593b commit 7b9b872

File tree

9 files changed

+201
-85
lines changed

9 files changed

+201
-85
lines changed

‎src/__celerity_resource_map__.php

Lines changed: 41 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -870,7 +870,7 @@
870870
),
871871
'aphront-two-column-view-css' =>
872872
array(
873-
'uri' => '/res/7afa129f/rsrc/css/aphront/two-column.css',
873+
'uri' => '/res/4263aa98/rsrc/css/aphront/two-column.css',
874874
'type' => 'css',
875875
'requires' =>
876876
array(
@@ -3248,7 +3248,7 @@
32483248
),
32493249
'phabricator-remarkup-css' =>
32503250
array(
3251-
'uri' => '/res/a53fa430/rsrc/css/core/remarkup.css',
3251+
'uri' => '/res/fb60dc21/rsrc/css/core/remarkup.css',
32523252
'type' => 'css',
32533253
'requires' =>
32543254
array(
@@ -3587,7 +3587,7 @@
35873587
),
35883588
'phriction-document-css' =>
35893589
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',
35913591
'type' => 'css',
35923592
'requires' =>
35933593
array(
@@ -3903,7 +3903,7 @@
39033903
), array(
39043904
'packages' =>
39053905
array(
3906-
'b3deb720' =>
3906+
'9cece986' =>
39073907
array(
39083908
'name' => 'core.pkg.css',
39093909
'symbols' =>
@@ -3945,7 +3945,7 @@
39453945
34 => 'phabricator-object-item-list-view-css',
39463946
35 => 'global-drag-and-drop-css',
39473947
),
3948-
'uri' => '/res/pkg/b3deb720/core.pkg.css',
3948+
'uri' => '/res/pkg/9cece986/core.pkg.css',
39493949
'type' => 'css',
39503950
),
39513951
'bf16b308' =>
@@ -4135,16 +4135,16 @@
41354135
'reverse' =>
41364136
array(
41374137
'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',
41484148
'differential-changeset-view-css' => '8aaacd1b',
41494149
'differential-core-view-css' => '8aaacd1b',
41504150
'differential-inline-comment-editor' => 'e96b08f8',
@@ -4158,7 +4158,7 @@
41584158
'differential-table-of-contents-css' => '8aaacd1b',
41594159
'diffusion-commit-view-css' => 'c8ce2d88',
41604160
'diffusion-icons-css' => 'c8ce2d88',
4161-
'global-drag-and-drop-css' => 'b3deb720',
4161+
'global-drag-and-drop-css' => '9cece986',
41624162
'inline-comment-summary-css' => '8aaacd1b',
41634163
'javelin-aphlict' => 'bf16b308',
41644164
'javelin-behavior' => 'bea3de16',
@@ -4230,47 +4230,47 @@
42304230
'javelin-util' => 'bea3de16',
42314231
'javelin-vector' => 'bea3de16',
42324232
'javelin-workflow' => 'bea3de16',
4233-
'lightbox-attachment-css' => 'b3deb720',
4233+
'lightbox-attachment-css' => '9cece986',
42344234
'maniphest-task-summary-css' => '6b1fccc6',
42354235
'maniphest-transaction-detail-css' => '6b1fccc6',
42364236
'phabricator-busy' => 'bf16b308',
42374237
'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',
42424242
'phabricator-drag-and-drop-file-upload' => 'e96b08f8',
42434243
'phabricator-dropdown-menu' => 'bf16b308',
42444244
'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',
42504250
'phabricator-keyboard-shortcut' => 'bf16b308',
42514251
'phabricator-keyboard-shortcut-manager' => 'bf16b308',
4252-
'phabricator-main-menu-view' => 'b3deb720',
4252+
'phabricator-main-menu-view' => '9cece986',
42534253
'phabricator-menu-item' => 'bf16b308',
4254-
'phabricator-nav-view-css' => 'b3deb720',
4254+
'phabricator-nav-view-css' => '9cece986',
42554255
'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',
42594259
'phabricator-object-selector-css' => '8aaacd1b',
42604260
'phabricator-prefab' => 'bf16b308',
42614261
'phabricator-project-tag-css' => '6b1fccc6',
4262-
'phabricator-remarkup-css' => 'b3deb720',
4262+
'phabricator-remarkup-css' => '9cece986',
42634263
'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',
42664266
'phabricator-textareautils' => 'bf16b308',
42674267
'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',
42754275
),
42764276
));

‎src/applications/phriction/controller/PhrictionController.php

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ public function buildSideNavView($filter = null, $for_app = false) {
2929

3030
if ($for_app) {
3131
$nav->addFilter('', pht('Root Document'), '/w/');
32-
$nav->addFilter('', pht('Create Document'), '/phriction/new');
32+
$nav->addFilter('', pht('New Document'), '/phriction/new');
3333
}
3434

3535
$nav->addLabel(pht('Filters'));
@@ -52,14 +52,14 @@ public function buildApplicationCrumbs() {
5252
if (get_class($this) != 'PhrictionListController') {
5353
$crumbs->addAction(
5454
id(new PhabricatorMenuItemView())
55-
->setName(pht('Document Index'))
55+
->setName(pht('Index'))
5656
->setHref('/phriction/')
5757
->setIcon('transcript'));
5858
}
5959

6060
$crumbs->addAction(
6161
id(new PhabricatorMenuItemView())
62-
->setName(pht('Create Document'))
62+
->setName(pht('New Document'))
6363
->setHref('/phriction/new/?slug='.$this->getDocumentSlug())
6464
->setWorkflow(true)
6565
->setIcon('create'));

‎src/applications/phriction/controller/PhrictionDocumentController.php

Lines changed: 34 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,9 @@ public function processRequest() {
3030
$slug);
3131

3232
$version_note = null;
33+
$core_content = '';
34+
$byline = '';
35+
$move_notice = '';
3336

3437
if (!$document) {
3538

@@ -211,11 +214,6 @@ public function processRequest() {
211214
->render();
212215
}
213216

214-
$page_content = hsprintf(
215-
'<div class="phriction-content">%s%s%s</div>',
216-
$byline,
217-
$move_notice,
218-
$core_content);
219217
}
220218

221219
if ($version_note) {
@@ -236,18 +234,38 @@ public function processRequest() {
236234
$header = id(new PhabricatorHeaderView())
237235
->setHeader($page_title);
238236

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+
239260
return $this->buildApplicationPage(
240261
array(
241262
$crumbs->render(),
242-
$header->render(),
243-
$actions->render(),
244-
$version_note,
245-
$page_content,
246-
$children,
263+
$core_page,
247264
),
248265
array(
249266
'title' => $page_title,
250267
'device' => true,
268+
'dust' => true,
251269
));
252270

253271
}
@@ -411,10 +429,12 @@ private function renderDocumentChildren($slug) {
411429
}
412430

413431
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>',
418438
pht('Document Hierarchy'),
419439
phutil_tag('ul', array(), $list));
420440
}

‎src/applications/phriction/controller/PhrictionEditController.php

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -232,11 +232,13 @@ public function processRequest() {
232232
->appendChild($form);
233233

234234
$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>
237238
<div id="document-preview">
238239
<div class="aphront-panel-preview-loading-text">%s</div>
239240
</div>
241+
</div>
240242
</div>',
241243
pht('Document Preview'),
242244
pht('Loading preview...'));
@@ -257,8 +259,9 @@ public function processRequest() {
257259
$preview_panel,
258260
),
259261
array(
260-
'title' => pht('Edit Document'),
261-
'device' => true,
262+
'title' => pht('Edit Document'),
263+
'device' => true,
264+
'dust' => true,
262265
));
263266
}
264267

‎src/applications/phriction/controller/PhrictionListController.php

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -32,9 +32,6 @@ public function processRequest() {
3232

3333
$nav = $this->buildSideNavView($this->view);
3434

35-
$header = id(new PhabricatorHeaderView())
36-
->setHeader($views[$this->view]);
37-
3835
$crumbs = $this->buildApplicationCrumbs();
3936
$crumbs->addCrumb(id(new PhabricatorCrumbView())
4037
->setName($views[$this->view])
@@ -43,7 +40,6 @@ public function processRequest() {
4340
$nav->appendChild(
4441
array(
4542
$crumbs,
46-
$header,
4743
));
4844

4945
$pager = id(new AphrontCursorPagerView())

‎src/view/layout/AphrontTwoColumnView.php

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ final class AphrontTwoColumnView extends AphrontView {
44

55
private $mainColumn;
66
private $sideColumn;
7+
private $centered = false;
78
private $padding = true;
89

910
public function setMainColumn($main) {
@@ -16,6 +17,11 @@ public function setSideColumn($side) {
1617
return $this;
1718
}
1819

20+
public function setCentered($centered) {
21+
$this->centered = $centered;
22+
return $this;
23+
}
24+
1925
public function setNoPadding($padding) {
2026
$this->padding = $padding;
2127
return $this;
@@ -39,6 +45,10 @@ public function render() {
3945
$this->sideColumn);
4046

4147
$classes = array('aphront-two-column');
48+
if ($this->centered) {
49+
$classes = array('aphront-two-column-centered');
50+
}
51+
4252
if ($this->padding) {
4353
$classes[] = 'aphront-two-column-padded';
4454
}

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

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,17 +10,32 @@
1010
margin: 20px;
1111
}
1212

13-
.device-desktop .aphront-main-column {
13+
.device-desktop .aphront-two-column .aphront-main-column {
1414
margin-right: 300px;
1515
}
1616

17-
.device-desktop .aphront-side-column {
17+
.device-desktop .aphront-two-column .aphront-side-column {
1818
width: 300px;
1919
position: absolute;
2020
top: 0;
2121
right: 0;
2222
}
2323

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;
37+
}
38+
2439
.device-phone .aphront-two-column.aphront-two-column-padded {
2540
margin: 10px;
2641
}

0 commit comments

Comments
 (0)