From e349c981888bae437eafe664ab034a7e804b7b6f Mon Sep 17 00:00:00 2001 From: epriestley Date: Fri, 31 May 2013 15:03:59 -0700 Subject: [PATCH] Separate Phriction style into PHUIDocumentView Summary: Ref T988. Fixes T3150. I want to use this element in Diviner, so separate it from Phriction. This makes no changes to the actual display except for fixing {T3150} by adding `overflow: hidden;`. Test Plan: Viewed Phriction documents in mobile and desktop views. Reviewers: chad, btrahan Reviewed By: btrahan CC: aran Maniphest Tasks: T988, T3150 Differential Revision: https://secure.phabricator.com/D6101 --- src/__celerity_resource_map__.php | 11 ++- src/__phutil_library_map__.php | 2 + .../PhrictionDocumentController.php | 49 ++++++----- src/view/phui/PHUIDocumentView.php | 40 +++++++++ .../phriction/phriction-document-css.css | 83 +------------------ webroot/rsrc/css/phui/phui-document.css | 78 +++++++++++++++++ 6 files changed, 160 insertions(+), 103 deletions(-) create mode 100644 src/view/phui/PHUIDocumentView.php create mode 100644 webroot/rsrc/css/phui/phui-document.css diff --git a/src/__celerity_resource_map__.php b/src/__celerity_resource_map__.php index 3ce9c3b276..0da8efcbf7 100644 --- a/src/__celerity_resource_map__.php +++ b/src/__celerity_resource_map__.php @@ -3636,7 +3636,7 @@ celerity_register_resource_map(array( ), 'phriction-document-css' => array( - 'uri' => '/res/14e08350/rsrc/css/application/phriction/phriction-document-css.css', + 'uri' => '/res/97a9ef40/rsrc/css/application/phriction/phriction-document-css.css', 'type' => 'css', 'requires' => array( @@ -3652,6 +3652,15 @@ celerity_register_resource_map(array( ), 'disk' => '/rsrc/css/phui/phui-box.css', ), + 'phui-document-view-css' => + array( + 'uri' => '/res/ca376da1/rsrc/css/phui/phui-document.css', + 'type' => 'css', + 'requires' => + array( + ), + 'disk' => '/rsrc/css/phui/phui-document.css', + ), 'phui-feed-story-css' => array( 'uri' => '/res/253ac568/rsrc/css/phui/phui-feed-story.css', diff --git a/src/__phutil_library_map__.php b/src/__phutil_library_map__.php index 2ffc0c8a0c..02edc3b6dc 100644 --- a/src/__phutil_library_map__.php +++ b/src/__phutil_library_map__.php @@ -682,6 +682,7 @@ phutil_register_library_map(array( 'PHUI' => 'view/phui/PHUI.php', 'PHUIBoxExample' => 'applications/uiexample/examples/PHUIBoxExample.php', 'PHUIBoxView' => 'view/phui/PHUIBoxView.php', + 'PHUIDocumentView' => 'view/phui/PHUIDocumentView.php', 'PHUIFeedStoryExample' => 'applications/uiexample/examples/PHUIFeedStoryExample.php', 'PHUIFeedStoryView' => 'view/phui/PHUIFeedStoryView.php', 'PHUIFormDividerControl' => 'view/form/control/PHUIFormDividerControl.php', @@ -2494,6 +2495,7 @@ phutil_register_library_map(array( 'OwnersPackageReplyHandler' => 'PhabricatorMailReplyHandler', 'PHUIBoxExample' => 'PhabricatorUIExample', 'PHUIBoxView' => 'AphrontTagView', + 'PHUIDocumentView' => 'AphrontTagView', 'PHUIFeedStoryExample' => 'PhabricatorUIExample', 'PHUIFeedStoryView' => 'AphrontView', 'PHUIFormDividerControl' => 'AphrontFormControl', diff --git a/src/applications/phriction/controller/PhrictionDocumentController.php b/src/applications/phriction/controller/PhrictionDocumentController.php index ab26571eb7..09eee5aa0d 100644 --- a/src/applications/phriction/controller/PhrictionDocumentController.php +++ b/src/applications/phriction/controller/PhrictionDocumentController.php @@ -163,18 +163,16 @@ final class PhrictionDocumentController $header = id(new PhabricatorHeaderView()) ->setHeader($page_title); - $page_content = hsprintf( - '
-
- %s%s%s%s%s -
-
-
', - $header, - $actions, - $properties, - $move_notice, - $core_content); + $page_content = id(new PHUIDocumentView()) + ->setOffset(true) + ->appendChild( + array( + $header, + $actions, + $properties, + $move_notice, + $core_content, + )); $core_page = phutil_tag( 'div', @@ -420,15 +418,24 @@ final class PhrictionDocumentController $list[] = phutil_tag('li', array(), pht('More...')); } - return hsprintf( - '
-
-
%s
- %s -
-
', - pht('Document Hierarchy'), - phutil_tag('ul', array(), $list)); + $content = array( + phutil_tag( + 'div', + array( + 'class' => 'phriction-children-header', + ), + pht('Document Hierarchy')), + phutil_tag( + 'div', + array( + 'class' => 'phriction-children', + ), + phutil_tag('ul', array(), $list)), + ); + + return id(new PHUIDocumentView()) + ->setOffset(true) + ->appendChild($content); } private function renderChildDocumentLink(array $info) { diff --git a/src/view/phui/PHUIDocumentView.php b/src/view/phui/PHUIDocumentView.php new file mode 100644 index 0000000000..820b0e7275 --- /dev/null +++ b/src/view/phui/PHUIDocumentView.php @@ -0,0 +1,40 @@ +offset = $offset; + return $this; + } + + public function getTagAttributes() { + $classes = array(); + + if ($this->offset) { + $classes[] = 'phui-document-offset'; + }; + + return array( + 'class' => $classes, + ); + } + + public function getTagContent() { + require_celerity_resource('phui-document-view-css'); + + return phutil_tag( + 'div', + array( + 'class' => 'phui-document-view', + ), + phutil_tag( + 'div', + array( + 'class' => 'phui-document-content', + ), + $this->renderChildren())); + } + +} diff --git a/webroot/rsrc/css/application/phriction/phriction-document-css.css b/webroot/rsrc/css/application/phriction/phriction-document-css.css index f9fb0fba6a..8d12cad149 100644 --- a/webroot/rsrc/css/application/phriction/phriction-document-css.css +++ b/webroot/rsrc/css/application/phriction/phriction-document-css.css @@ -17,59 +17,6 @@ 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 { - 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; -} - -.device-phone .phriction-content .phabricator-remarkup { - padding: 10px; -} - -.phriction-content .phriction-link { - font-weight: bold; -} - .phriction-breadcrumbs { font-size: 12px; color: #666666; @@ -79,12 +26,6 @@ font-weight: bold; } -.phriction-children { - max-width: 800px; - background: #fff; - box-shadow: 0 1px 2px rgba(0,0,0,0.2); -} - .phriction-children ul { margin-left: 30px; padding-bottom: 10px; @@ -99,21 +40,6 @@ 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 { color: #666666; margin-bottom: 1em; @@ -147,11 +73,6 @@ text-align: right; } -.device-phone .phriction-content .phabricator-remarkup-toc { - width: 120px; -} - -.phriction-content .phabricator-remarkup .remarkup-code-block { - clear: both; - margin: 20px 0; +.phui-document-content .phriction-link { + font-weight: bold; } diff --git a/webroot/rsrc/css/phui/phui-document.css b/webroot/rsrc/css/phui/phui-document.css new file mode 100644 index 0000000000..3ec762b54d --- /dev/null +++ b/webroot/rsrc/css/phui/phui-document.css @@ -0,0 +1,78 @@ +/** + * @provides phui-document-view-css + */ + +.phui-document-view { + margin-bottom: 20px; +} + +.device-desktop .phui-document-view { + position: relative; + border-left: 1px solid #e7e7e7; + border-right: 1px solid #e7e7e7; + border-bottom: 1px solid #c0c5d1; + max-width: 800px; + margin: 20px auto; +} + +.phui-document-content { + box-shadow: 0 1px 2px rgba(0,0,0,0.2); + min-height: 240px; + background: #fff; + + /* NOTE: This fixes margins, not floats, and can not be replaced with + the ".group" class. See T3150. + */ + overflow: hidden; +} + +.device-desktop .phui-document-content .phabricator-action-list-view { + margin: 10px 10px 0 0; + background: #f7f7f7; +} + +.device-phone .phui-document-content .phabricator-action-list-view { + margin: 0; + border-bottom: 1px solid #c0c5d1; + background: #f7f7f7; +} + +.phui-document-content .phabricator-header-shell { + border-top: none; +} + +.phui-document-content .phabricator-remarkup { + padding: 20px; +} + +.device-phone .phui-document-content .phabricator-remarkup { + padding: 10px; +} + +.device-desktop .phui-document-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; +} + +.device-phone .phui-document-content .phabricator-remarkup-toc { + width: 120px; +} + +.phui-document-content .phabricator-remarkup .remarkup-code-block { + clear: both; + margin: 20px 0; +} + +.device-desktop .phui-document-offset { + padding-right: 160px; +}