Permalink
Browse files

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
  • Loading branch information...
1 parent 8ba593b commit 7b9b872b2969148ec2681b86ed4d512f766fccc5 @chadlittle chadlittle committed Apr 11, 2013
@@ -870,7 +870,7 @@
),
'aphront-two-column-view-css' =>
array(
- 'uri' => '/res/7afa129f/rsrc/css/aphront/two-column.css',
+ 'uri' => '/res/4263aa98/rsrc/css/aphront/two-column.css',
'type' => 'css',
'requires' =>
array(
@@ -3248,7 +3248,7 @@
),
'phabricator-remarkup-css' =>
array(
- 'uri' => '/res/a53fa430/rsrc/css/core/remarkup.css',
+ 'uri' => '/res/fb60dc21/rsrc/css/core/remarkup.css',
'type' => 'css',
'requires' =>
array(
@@ -3587,7 +3587,7 @@
),
'phriction-document-css' =>
array(
- 'uri' => '/res/e71e4a67/rsrc/css/application/phriction/phriction-document-css.css',
+ 'uri' => '/res/521172c8/rsrc/css/application/phriction/phriction-document-css.css',
'type' => 'css',
'requires' =>
array(
@@ -3903,7 +3903,7 @@
), array(
'packages' =>
array(
- 'b3deb720' =>
+ '9cece986' =>
array(
'name' => 'core.pkg.css',
'symbols' =>
@@ -3945,7 +3945,7 @@
34 => 'phabricator-object-item-list-view-css',
35 => 'global-drag-and-drop-css',
),
- 'uri' => '/res/pkg/b3deb720/core.pkg.css',
+ 'uri' => '/res/pkg/9cece986/core.pkg.css',
'type' => 'css',
),
'bf16b308' =>
@@ -4135,16 +4135,16 @@
'reverse' =>
array(
'aphront-attached-file-view-css' => '6b1fccc6',
- 'aphront-dialog-view-css' => 'b3deb720',
- 'aphront-error-view-css' => 'b3deb720',
- 'aphront-form-view-css' => 'b3deb720',
- 'aphront-list-filter-view-css' => 'b3deb720',
- 'aphront-pager-view-css' => 'b3deb720',
- 'aphront-panel-view-css' => 'b3deb720',
- 'aphront-table-view-css' => 'b3deb720',
- 'aphront-tokenizer-control-css' => 'b3deb720',
- 'aphront-tooltip-css' => 'b3deb720',
- 'aphront-typeahead-control-css' => 'b3deb720',
+ 'aphront-dialog-view-css' => '9cece986',
+ 'aphront-error-view-css' => '9cece986',
+ 'aphront-form-view-css' => '9cece986',
+ 'aphront-list-filter-view-css' => '9cece986',
+ 'aphront-pager-view-css' => '9cece986',
+ 'aphront-panel-view-css' => '9cece986',
+ 'aphront-table-view-css' => '9cece986',
+ 'aphront-tokenizer-control-css' => '9cece986',
+ 'aphront-tooltip-css' => '9cece986',
+ 'aphront-typeahead-control-css' => '9cece986',
'differential-changeset-view-css' => '8aaacd1b',
'differential-core-view-css' => '8aaacd1b',
'differential-inline-comment-editor' => 'e96b08f8',
@@ -4158,7 +4158,7 @@
'differential-table-of-contents-css' => '8aaacd1b',
'diffusion-commit-view-css' => 'c8ce2d88',
'diffusion-icons-css' => 'c8ce2d88',
- 'global-drag-and-drop-css' => 'b3deb720',
+ 'global-drag-and-drop-css' => '9cece986',
'inline-comment-summary-css' => '8aaacd1b',
'javelin-aphlict' => 'bf16b308',
'javelin-behavior' => 'bea3de16',
@@ -4230,47 +4230,47 @@
'javelin-util' => 'bea3de16',
'javelin-vector' => 'bea3de16',
'javelin-workflow' => 'bea3de16',
- 'lightbox-attachment-css' => 'b3deb720',
+ 'lightbox-attachment-css' => '9cece986',
'maniphest-task-summary-css' => '6b1fccc6',
'maniphest-transaction-detail-css' => '6b1fccc6',
'phabricator-busy' => 'bf16b308',
'phabricator-content-source-view-css' => '8aaacd1b',
- 'phabricator-core-buttons-css' => 'b3deb720',
- 'phabricator-core-css' => 'b3deb720',
- 'phabricator-crumbs-view-css' => 'b3deb720',
- 'phabricator-directory-css' => 'b3deb720',
+ 'phabricator-core-buttons-css' => '9cece986',
+ 'phabricator-core-css' => '9cece986',
+ 'phabricator-crumbs-view-css' => '9cece986',
+ 'phabricator-directory-css' => '9cece986',
'phabricator-drag-and-drop-file-upload' => 'e96b08f8',
'phabricator-dropdown-menu' => 'bf16b308',
'phabricator-file-upload' => 'bf16b308',
- 'phabricator-filetree-view-css' => 'b3deb720',
- 'phabricator-flag-css' => 'b3deb720',
- 'phabricator-form-view-css' => 'b3deb720',
- 'phabricator-header-view-css' => 'b3deb720',
- 'phabricator-jump-nav' => 'b3deb720',
+ 'phabricator-filetree-view-css' => '9cece986',
+ 'phabricator-flag-css' => '9cece986',
+ 'phabricator-form-view-css' => '9cece986',
+ 'phabricator-header-view-css' => '9cece986',
+ 'phabricator-jump-nav' => '9cece986',
'phabricator-keyboard-shortcut' => 'bf16b308',
'phabricator-keyboard-shortcut-manager' => 'bf16b308',
- 'phabricator-main-menu-view' => 'b3deb720',
+ 'phabricator-main-menu-view' => '9cece986',
'phabricator-menu-item' => 'bf16b308',
- 'phabricator-nav-view-css' => 'b3deb720',
+ 'phabricator-nav-view-css' => '9cece986',
'phabricator-notification' => 'bf16b308',
- 'phabricator-notification-css' => 'b3deb720',
- 'phabricator-notification-menu-css' => 'b3deb720',
- 'phabricator-object-item-list-view-css' => 'b3deb720',
+ 'phabricator-notification-css' => '9cece986',
+ 'phabricator-notification-menu-css' => '9cece986',
+ 'phabricator-object-item-list-view-css' => '9cece986',
'phabricator-object-selector-css' => '8aaacd1b',
'phabricator-prefab' => 'bf16b308',
'phabricator-project-tag-css' => '6b1fccc6',
- 'phabricator-remarkup-css' => 'b3deb720',
+ 'phabricator-remarkup-css' => '9cece986',
'phabricator-shaped-request' => 'e96b08f8',
- 'phabricator-side-menu-view-css' => 'b3deb720',
- 'phabricator-standard-page-view' => 'b3deb720',
+ 'phabricator-side-menu-view-css' => '9cece986',
+ 'phabricator-standard-page-view' => '9cece986',
'phabricator-textareautils' => 'bf16b308',
'phabricator-tooltip' => 'bf16b308',
- 'phabricator-transaction-view-css' => 'b3deb720',
- 'phabricator-zindex-css' => 'b3deb720',
- 'sprite-apps-large-css' => 'b3deb720',
- 'sprite-gradient-css' => 'b3deb720',
- 'sprite-icon-css' => 'b3deb720',
- 'sprite-menu-css' => 'b3deb720',
- 'syntax-highlighting-css' => 'b3deb720',
+ 'phabricator-transaction-view-css' => '9cece986',
+ 'phabricator-zindex-css' => '9cece986',
+ 'sprite-apps-large-css' => '9cece986',
+ 'sprite-gradient-css' => '9cece986',
+ 'sprite-icon-css' => '9cece986',
+ 'sprite-menu-css' => '9cece986',
+ 'syntax-highlighting-css' => '9cece986',
),
));
@@ -29,7 +29,7 @@ public function buildSideNavView($filter = null, $for_app = false) {
if ($for_app) {
$nav->addFilter('', pht('Root Document'), '/w/');
- $nav->addFilter('', pht('Create Document'), '/phriction/new');
+ $nav->addFilter('', pht('New Document'), '/phriction/new');
}
$nav->addLabel(pht('Filters'));
@@ -52,14 +52,14 @@ public function buildApplicationCrumbs() {
if (get_class($this) != 'PhrictionListController') {
$crumbs->addAction(
id(new PhabricatorMenuItemView())
- ->setName(pht('Document Index'))
+ ->setName(pht('Index'))
->setHref('/phriction/')
->setIcon('transcript'));
}
$crumbs->addAction(
id(new PhabricatorMenuItemView())
- ->setName(pht('Create Document'))
+ ->setName(pht('New Document'))
->setHref('/phriction/new/?slug='.$this->getDocumentSlug())
->setWorkflow(true)
->setIcon('create'));
@@ -30,6 +30,9 @@ public function processRequest() {
$slug);
$version_note = null;
+ $core_content = '';
+ $byline = '';
+ $move_notice = '';
if (!$document) {
@@ -211,11 +214,6 @@ public function processRequest() {
->render();
}
- $page_content = hsprintf(
- '<div class="phriction-content">%s%s%s</div>',
- $byline,
- $move_notice,
- $core_content);
}
if ($version_note) {
@@ -236,18 +234,38 @@ public function processRequest() {
$header = id(new PhabricatorHeaderView())
->setHeader($page_title);
+ $page_content = hsprintf(
+ '<div class="phriction-wrap">
+ <div class="phriction-content">
+ %s%s%s%s%s
+ </div>
+ <div class="phriction-fake-space"></div>
+ </div>',
+ $header,
+ $actions,
+ $byline,
+ $move_notice,
+ $core_content);
+
+ $core_page = phutil_tag(
+ 'div',
+ array(
+ 'class' => 'phriction-offset'
+ ),
+ array(
+ $page_content,
+ $children,
+ ));
+
return $this->buildApplicationPage(
array(
$crumbs->render(),
- $header->render(),
- $actions->render(),
- $version_note,
- $page_content,
- $children,
+ $core_page,
),
array(
'title' => $page_title,
'device' => true,
+ 'dust' => true,
));
}
@@ -411,10 +429,12 @@ private function renderDocumentChildren($slug) {
}
return hsprintf(
- '<div class="phriction-children">'.
- '<div class="phriction-children-header">%s</div>'.
- '%s'.
- '</div>',
+ '<div class="phriction-wrap">
+ <div class="phriction-children">
+ <div class="phriction-children-header">%s</div>
+ %s
+ </div>
+ </div>',
pht('Document Hierarchy'),
phutil_tag('ul', array(), $list));
}
@@ -232,11 +232,13 @@ public function processRequest() {
->appendChild($form);
$preview_panel = hsprintf(
- '<div class="aphront-panel-preview aphront-panel-preview-wide">
- <div class="phriction-document-preview-header">%s</div>
+ '<div class="phriction-wrap">
+ <div class="phriction-content">
+ <div class="phriction-document-preview-header plt pll">%s</div>
<div id="document-preview">
<div class="aphront-panel-preview-loading-text">%s</div>
</div>
+ </div>
</div>',
pht('Document Preview'),
pht('Loading preview...'));
@@ -257,8 +259,9 @@ public function processRequest() {
$preview_panel,
),
array(
- 'title' => pht('Edit Document'),
- 'device' => true,
+ 'title' => pht('Edit Document'),
+ 'device' => true,
+ 'dust' => true,
));
}
@@ -32,9 +32,6 @@ public function processRequest() {
$nav = $this->buildSideNavView($this->view);
- $header = id(new PhabricatorHeaderView())
- ->setHeader($views[$this->view]);
-
$crumbs = $this->buildApplicationCrumbs();
$crumbs->addCrumb(id(new PhabricatorCrumbView())
->setName($views[$this->view])
@@ -43,7 +40,6 @@ public function processRequest() {
$nav->appendChild(
array(
$crumbs,
- $header,
));
$pager = id(new AphrontCursorPagerView())
@@ -4,6 +4,7 @@
private $mainColumn;
private $sideColumn;
+ private $centered = false;
private $padding = true;
public function setMainColumn($main) {
@@ -16,6 +17,11 @@ public function setSideColumn($side) {
return $this;
}
+ public function setCentered($centered) {
+ $this->centered = $centered;
+ return $this;
+ }
+
public function setNoPadding($padding) {
$this->padding = $padding;
return $this;
@@ -39,6 +45,10 @@ public function render() {
$this->sideColumn);
$classes = array('aphront-two-column');
+ if ($this->centered) {
+ $classes = array('aphront-two-column-centered');
+ }
+
if ($this->padding) {
$classes[] = 'aphront-two-column-padded';
}
@@ -10,17 +10,32 @@
margin: 20px;
}
-.device-desktop .aphront-main-column {
+.device-desktop .aphront-two-column .aphront-main-column {
margin-right: 300px;
}
-.device-desktop .aphront-side-column {
+.device-desktop .aphront-two-column .aphront-side-column {
width: 300px;
position: absolute;
top: 0;
right: 0;
}
+.device-desktop .aphront-two-column-centered {
+ width: 980px;
+ margin: 0 auto;
+}
+
+.device-desktop .aphront-two-column-centered .aphront-main-column {
+ float: left;
+ width: 820px;
+}
+
+.device-desktop .aphront-two-column-centered .aphront-side-column {
+ width: 160px;
+ float: right;
+}
+
.device-phone .aphront-two-column.aphront-two-column-padded {
margin: 10px;
}
Oops, something went wrong.

0 comments on commit 7b9b872

Please sign in to comment.