From 7b9b872b2969148ec2681b86ed4d512f766fccc5 Mon Sep 17 00:00:00 2001 From: Chad Little Date: Thu, 11 Apr 2013 15:05:50 -0700 Subject: [PATCH] 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 --- src/__celerity_resource_map__.php | 82 ++++++++--------- .../controller/PhrictionController.php | 6 +- .../PhrictionDocumentController.php | 48 +++++++--- .../controller/PhrictionEditController.php | 11 ++- .../controller/PhrictionListController.php | 4 - src/view/layout/AphrontTwoColumnView.php | 10 ++ webroot/rsrc/css/aphront/two-column.css | 19 +++- .../phriction/phriction-document-css.css | 91 +++++++++++++++++-- webroot/rsrc/css/core/remarkup.css | 15 +-- 9 files changed, 201 insertions(+), 85 deletions(-) diff --git a/src/__celerity_resource_map__.php b/src/__celerity_resource_map__.php index cf881b9c5e..cfaea7fab7 100644 --- a/src/__celerity_resource_map__.php +++ b/src/__celerity_resource_map__.php @@ -870,7 +870,7 @@ celerity_register_resource_map(array( ), '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 @@ celerity_register_resource_map(array( ), '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 @@ celerity_register_resource_map(array( ), '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 @@ celerity_register_resource_map(array( ), array( 'packages' => array( - 'b3deb720' => + '9cece986' => array( 'name' => 'core.pkg.css', 'symbols' => @@ -3945,7 +3945,7 @@ celerity_register_resource_map(array( 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 @@ celerity_register_resource_map(array( '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 @@ celerity_register_resource_map(array( '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 @@ celerity_register_resource_map(array( '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', ), )); diff --git a/src/applications/phriction/controller/PhrictionController.php b/src/applications/phriction/controller/PhrictionController.php index de8d9f923d..b63eab4482 100644 --- a/src/applications/phriction/controller/PhrictionController.php +++ b/src/applications/phriction/controller/PhrictionController.php @@ -29,7 +29,7 @@ abstract class PhrictionController extends PhabricatorController { 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 @@ abstract class PhrictionController extends PhabricatorController { 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')); diff --git a/src/applications/phriction/controller/PhrictionDocumentController.php b/src/applications/phriction/controller/PhrictionDocumentController.php index 633c87638b..3cb431dbee 100644 --- a/src/applications/phriction/controller/PhrictionDocumentController.php +++ b/src/applications/phriction/controller/PhrictionDocumentController.php @@ -30,6 +30,9 @@ final class PhrictionDocumentController $slug); $version_note = null; + $core_content = ''; + $byline = ''; + $move_notice = ''; if (!$document) { @@ -211,11 +214,6 @@ final class PhrictionDocumentController ->render(); } - $page_content = hsprintf( - '
%s%s%s
', - $byline, - $move_notice, - $core_content); } if ($version_note) { @@ -236,18 +234,38 @@ final class PhrictionDocumentController $header = id(new PhabricatorHeaderView()) ->setHeader($page_title); + $page_content = hsprintf( + '
+
+ %s%s%s%s%s +
+
+
', + $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 @@ final class PhrictionDocumentController } return hsprintf( - '
'. - '
%s
'. - '%s'. - '
', + '
+
+
%s
+ %s +
+
', pht('Document Hierarchy'), phutil_tag('ul', array(), $list)); } diff --git a/src/applications/phriction/controller/PhrictionEditController.php b/src/applications/phriction/controller/PhrictionEditController.php index 2b9b5bee23..fdd6c721d7 100644 --- a/src/applications/phriction/controller/PhrictionEditController.php +++ b/src/applications/phriction/controller/PhrictionEditController.php @@ -232,11 +232,13 @@ final class PhrictionEditController ->appendChild($form); $preview_panel = hsprintf( - '
-
%s
+ '
+
+
%s
%s
+
', pht('Document Preview'), pht('Loading preview...')); @@ -257,8 +259,9 @@ final class PhrictionEditController $preview_panel, ), array( - 'title' => pht('Edit Document'), - 'device' => true, + 'title' => pht('Edit Document'), + 'device' => true, + 'dust' => true, )); } diff --git a/src/applications/phriction/controller/PhrictionListController.php b/src/applications/phriction/controller/PhrictionListController.php index 5768b07e6f..9cb728d739 100644 --- a/src/applications/phriction/controller/PhrictionListController.php +++ b/src/applications/phriction/controller/PhrictionListController.php @@ -32,9 +32,6 @@ final class PhrictionListController $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 @@ final class PhrictionListController $nav->appendChild( array( $crumbs, - $header, )); $pager = id(new AphrontCursorPagerView()) diff --git a/src/view/layout/AphrontTwoColumnView.php b/src/view/layout/AphrontTwoColumnView.php index 93f98b5fe0..a206d6c836 100644 --- a/src/view/layout/AphrontTwoColumnView.php +++ b/src/view/layout/AphrontTwoColumnView.php @@ -4,6 +4,7 @@ final class AphrontTwoColumnView extends AphrontView { private $mainColumn; private $sideColumn; + private $centered = false; private $padding = true; public function setMainColumn($main) { @@ -16,6 +17,11 @@ final class AphrontTwoColumnView extends AphrontView { return $this; } + public function setCentered($centered) { + $this->centered = $centered; + return $this; + } + public function setNoPadding($padding) { $this->padding = $padding; return $this; @@ -39,6 +45,10 @@ final class AphrontTwoColumnView extends AphrontView { $this->sideColumn); $classes = array('aphront-two-column'); + if ($this->centered) { + $classes = array('aphront-two-column-centered'); + } + if ($this->padding) { $classes[] = 'aphront-two-column-padded'; } diff --git a/webroot/rsrc/css/aphront/two-column.css b/webroot/rsrc/css/aphront/two-column.css index 3e6aa72a47..e9a0217e8c 100644 --- a/webroot/rsrc/css/aphront/two-column.css +++ b/webroot/rsrc/css/aphront/two-column.css @@ -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; } diff --git a/webroot/rsrc/css/application/phriction/phriction-document-css.css b/webroot/rsrc/css/application/phriction/phriction-document-css.css index 97206b45eb..f2ea174839 100644 --- a/webroot/rsrc/css/application/phriction/phriction-document-css.css +++ b/webroot/rsrc/css/application/phriction/phriction-document-css.css @@ -17,14 +17,64 @@ margin: .25em 0; } +.device-desktop .phriction-offset { + padding-right: 160px; +} + +.phriction-wrap { + margin-bottom: 20px; +} + +.device-desktop .phriction-wrap { + position: relative; + border-left: 1px solid #e7e7e7; + border-right: 1px solid #e7e7e7; + border-bottom: 1px solid #c0c5d1; + max-width: 800px; + margin: 20px auto; +} + .phriction-content { - max-width: 960px; - margin: 1em; + box-shadow: 0 1px 2px rgba(0,0,0,0.2); + min-height: 240px; + background: #fff; +} + +.device-desktop .phriction-wrap { +} + +.device-desktop .phriction-content .phabricator-action-list-view { + margin: 10px 10px 0 0; + background: #f7f7f7; +} + +.device-phone .phriction-content .phabricator-action-list-view { + margin: 0; + border-bottom: 1px solid #c0c5d1; + background: #f7f7f7; +} + +.phriction-content .phabricator-header-shell { + border-top: none; +} + +.phriction-content .phabricator-remarkup { + padding: 20px; } .phriction-byline { - padding: .25em 0 1em; - color: #444444; + padding: 10px 20px; + color: #777; + font-size: 11px; + background: #f7f7f7; +} + +.device-phone .phriction-byline { + padding: 10px; +} + +.device-phone .phriction-content .phabricator-remarkup { + padding: 10px; } .phriction-content .phriction-link { @@ -41,21 +91,38 @@ } .phriction-children { - padding: 1em 2em; - background: #eeeeee; - border-top: 1px solid #dddddd; + max-width: 800px; + background: #fff; + box-shadow: 0 1px 2px rgba(0,0,0,0.2); } .phriction-children ul { - margin-left: 2.5em; + margin-left: 30px; + padding-bottom: 10px; list-style: circle; color: #999999; } .phriction-children-header { - padding: 0 0 .5em 0; - margin: 0; + background: #f7f7f7; + padding: 10px 0 10px 20px; font-weight: bold; + margin-bottom: 15px; +} + +.device-desktop .phriction-content .phabricator-action-list-view { + position: absolute; + top: 50px; + right: -172px; + float: none; + background: #fff; + border-radius: 0; + box-shadow: none; + border: none; + border-top: 1px solid #e7e7e7; + border-bottom: 1px solid #e7e7e7; + border-right: 1px solid #e7e7e7; + width: 160px; } .phriction-document-preview-header { @@ -90,3 +157,7 @@ .phriction-history-nav-table td.nav-next { text-align: right; } + +.device-phone .phriction-content .phabricator-remarkup-toc { + width: 120px; +} diff --git a/webroot/rsrc/css/core/remarkup.css b/webroot/rsrc/css/core/remarkup.css index 723d7e8c92..e9a934813d 100644 --- a/webroot/rsrc/css/core/remarkup.css +++ b/webroot/rsrc/css/core/remarkup.css @@ -168,16 +168,17 @@ .phabricator-remarkup-toc { float: right; - border: 1px solid #999999; - background: #f9f9f9; + border: 1px solid #d7d7d7; + background: #f7f7f7; padding: 4px 12px; - width: 220px; + width: 180px; + margin: 0 0 5px 10px; } .phabricator-remarkup-toc-header { font-size: 11px; - color: #444444; - border-bottom: 1px solid #bbbbbb; + color: #777; + border-bottom: 1px solid #d7d7d7; margin-bottom: 4px; } @@ -186,16 +187,16 @@ margin: 0; list-style: none; overflow: hidden; - padding-left: 0.25em; } .phabricator-remarkup-toc ul ul { - margin-left: 1.25em; + margin-left: 0; } .phabricator-remarkup-toc ul li { padding: 0; margin: 0; + font-size: 11px; } .phabricator-remarkup-embed-layout-right {