diff --git a/resources/celerity/map.php b/resources/celerity/map.php --- a/resources/celerity/map.php +++ b/resources/celerity/map.php @@ -7,7 +7,7 @@ */ return array( 'names' => array( - 'core.pkg.css' => '15e557bc', + 'core.pkg.css' => 'a56d7104', 'core.pkg.js' => '47dc9ebb', 'darkconsole.pkg.js' => 'e7393ebb', 'differential.pkg.css' => '2de124c9', @@ -103,11 +103,11 @@ 'rsrc/css/application/slowvote/slowvote.css' => '475b4bd2', 'rsrc/css/application/tokens/tokens.css' => '3d0f239e', 'rsrc/css/application/uiexample/example.css' => '528b19de', - 'rsrc/css/core/core.css' => 'a76cefc9', - 'rsrc/css/core/remarkup.css' => '8d341238', + 'rsrc/css/core/core.css' => '78e8d7ea', + 'rsrc/css/core/remarkup.css' => 'f18999d1', 'rsrc/css/core/syntax.css' => '9fd11da8', 'rsrc/css/core/z-index.css' => '57ddcaa2', - 'rsrc/css/diviner/diviner-shared.css' => '5a337049', + 'rsrc/css/diviner/diviner-shared.css' => 'aa3656aa', 'rsrc/css/font/font-awesome.css' => 'd2fc4e8d', 'rsrc/css/font/font-lato.css' => '5ab1a46a', 'rsrc/css/font/font-roboto-slab.css' => 'f24a53cb', @@ -126,9 +126,10 @@ 'rsrc/css/phui/phui-box.css' => 'a5bb366d', 'rsrc/css/phui/phui-button.css' => '16020a60', 'rsrc/css/phui/phui-crumbs-view.css' => 'd842f867', - 'rsrc/css/phui/phui-document.css' => '0267054b', + 'rsrc/css/phui/phui-document-pro.css' => '3657eb4b', + 'rsrc/css/phui/phui-document.css' => '78521ba3', 'rsrc/css/phui/phui-feed-story.css' => 'b7b26d23', - 'rsrc/css/phui/phui-fontkit.css' => 'cb8ae7ad', + 'rsrc/css/phui/phui-fontkit.css' => '7837a28c', 'rsrc/css/phui/phui-form-view.css' => '621b21c5', 'rsrc/css/phui/phui-form.css' => 'afdb2c6e', 'rsrc/css/phui/phui-header-view.css' => '55bb32dd', @@ -523,7 +524,7 @@ 'diffusion-icons-css' => '2941baf1', 'diffusion-readme-css' => '2106ea08', 'diffusion-source-css' => '075ba788', - 'diviner-shared-css' => '5a337049', + 'diviner-shared-css' => 'aa3656aa', 'font-fontawesome' => 'd2fc4e8d', 'font-lato' => '5ab1a46a', 'font-roboto-slab' => 'f24a53cb', @@ -713,7 +714,7 @@ 'phabricator-busy' => '59a7976a', 'phabricator-chatlog-css' => 'd295b020', 'phabricator-content-source-view-css' => '4b8b05d4', - 'phabricator-core-css' => 'a76cefc9', + 'phabricator-core-css' => '78e8d7ea', 'phabricator-countdown-css' => 'e7544472', 'phabricator-dashboard-css' => 'eb458607', 'phabricator-drag-and-drop-file-upload' => 'ad10aeac', @@ -735,7 +736,7 @@ 'phabricator-object-selector-css' => '85ee8ce6', 'phabricator-phtize' => 'd254d646', 'phabricator-prefab' => '6920d200', - 'phabricator-remarkup-css' => '8d341238', + 'phabricator-remarkup-css' => 'f18999d1', 'phabricator-search-results-css' => '7dea472c', 'phabricator-shaped-request' => '7cbe244b', 'phabricator-side-menu-view-css' => 'bec2458e', @@ -775,10 +776,11 @@ 'phui-calendar-list-css' => 'c1c7f338', 'phui-calendar-month-css' => '476be7e0', 'phui-crumbs-view-css' => 'd842f867', - 'phui-document-view-css' => '0267054b', + 'phui-document-view-css' => '78521ba3', + 'phui-document-view-pro-css' => '3657eb4b', 'phui-feed-story-css' => 'b7b26d23', 'phui-font-icon-base-css' => 'ecbbb4c2', - 'phui-fontkit-css' => 'cb8ae7ad', + 'phui-fontkit-css' => '7837a28c', 'phui-form-css' => 'afdb2c6e', 'phui-form-view-css' => '621b21c5', 'phui-header-view-css' => '55bb32dd', diff --git a/src/__phutil_library_map__.php b/src/__phutil_library_map__.php --- a/src/__phutil_library_map__.php +++ b/src/__phutil_library_map__.php @@ -1433,6 +1433,7 @@ 'PHUIDiffTwoUpInlineCommentRowScaffold' => 'infrastructure/diff/view/PHUIDiffTwoUpInlineCommentRowScaffold.php', 'PHUIDocumentExample' => 'applications/uiexample/examples/PHUIDocumentExample.php', 'PHUIDocumentView' => 'view/phui/PHUIDocumentView.php', + 'PHUIDocumentViewPro' => 'view/phui/PHUIDocumentViewPro.php', 'PHUIFeedStoryExample' => 'applications/uiexample/examples/PHUIFeedStoryExample.php', 'PHUIFeedStoryView' => 'view/phui/PHUIFeedStoryView.php', 'PHUIFormDividerControl' => 'view/form/control/PHUIFormDividerControl.php', @@ -5338,6 +5339,7 @@ 'PHUIDiffTwoUpInlineCommentRowScaffold' => 'PHUIDiffInlineCommentRowScaffold', 'PHUIDocumentExample' => 'PhabricatorUIExample', 'PHUIDocumentView' => 'AphrontTagView', + 'PHUIDocumentViewPro' => 'AphrontTagView', 'PHUIFeedStoryExample' => 'PhabricatorUIExample', 'PHUIFeedStoryView' => 'AphrontView', 'PHUIFormDividerControl' => 'AphrontFormControl', diff --git a/src/applications/base/controller/PhabricatorController.php b/src/applications/base/controller/PhabricatorController.php --- a/src/applications/base/controller/PhabricatorController.php +++ b/src/applications/base/controller/PhabricatorController.php @@ -334,6 +334,10 @@ } } + if (idx($options, 'class')) { + $page->addClass($options['class']); + } + if (!($view instanceof AphrontSideNavFilterView)) { $nav = new AphrontSideNavFilterView(); $nav->appendChild($view); diff --git a/src/applications/diviner/controller/DivinerAtomController.php b/src/applications/diviner/controller/DivinerAtomController.php --- a/src/applications/diviner/controller/DivinerAtomController.php +++ b/src/applications/diviner/controller/DivinerAtomController.php @@ -58,13 +58,7 @@ $crumbs->addTextCrumb($atom_short_title); $header = id(new PHUIHeaderView()) - ->setHeader($this->renderFullSignature($symbol)) - ->addTag( - id(new PHUITagView()) - ->setType(PHUITagView::TYPE_STATE) - ->setBackgroundColor(PHUITagView::COLOR_BLUE) - ->setName(DivinerAtom::getAtomTypeNameString( - $atom ? $atom->getType() : $symbol->getType()))); + ->setHeader($this->renderFullSignature($symbol)); $properties = new PHUIPropertyListView(); @@ -78,11 +72,11 @@ $prop_list = new PHUIPropertyGroupView(); $prop_list->addPropertyList($properties); - $document = id(new PHUIDocumentView()) + $document = id(new PHUIDocumentViewPro()) ->setBook($book->getTitle(), $group_name) ->setHeader($header) ->addClass('diviner-view') - ->appendChild($prop_list); + ->setPropertyList($prop_list); if ($atom) { $this->buildDefined($properties, $symbol); @@ -163,10 +157,6 @@ ->setHeader($spec['title'])); $task_methods = idx($methods_by_task, $spec['name'], array()); - $inner_box = id(new PHUIBoxView()) - ->addPadding(PHUI::PADDING_LARGE_LEFT) - ->addPadding(PHUI::PADDING_LARGE_RIGHT) - ->addPadding(PHUI::PADDING_LARGE_BOTTOM); $box_content = array(); if ($task_methods) { @@ -198,7 +188,7 @@ $box_content = phutil_tag('em', array(), $no_methods); } - $inner_box->appendChild($box_content); + $inner_box = phutil_tag_div('diviner-task-items', $box_content); $section->addContent($inner_box); } $document->appendChild($section); @@ -246,7 +236,7 @@ ->setHref('#'.$key)); } - $document->setSideNav($side, PHUIDocumentView::NAV_TOP); + $document->setToc($side); } return $this->buildApplicationPage( @@ -256,6 +246,7 @@ ), array( 'title' => $symbol->getTitle(), + 'class' => 'pro-white-background', )); } @@ -629,7 +620,7 @@ $content = phutil_tag( 'div', array( - 'class' => 'phabricator-remarkup', + 'class' => 'phabricator-remarkup diviner-remarkup-section', ), $content); } else { @@ -668,8 +659,6 @@ if (($impl !== $parent) || $out) { $where = id(new PHUIBoxView()) - ->addPadding(PHUI::PADDING_MEDIUM_LEFT) - ->addPadding(PHUI::PADDING_MEDIUM_RIGHT) ->addClass('diviner-method-implementation-header') ->appendChild($impl->getName()); $doc = array($where, $doc); diff --git a/src/applications/diviner/controller/DivinerBookController.php b/src/applications/diviner/controller/DivinerBookController.php --- a/src/applications/diviner/controller/DivinerBookController.php +++ b/src/applications/diviner/controller/DivinerBookController.php @@ -53,7 +53,7 @@ ->setName($book->getRepository()->getMonogram())); } - $document = new PHUIDocumentView(); + $document = new PHUIDocumentViewPro(); $document->setHeader($header); $document->addClass('diviner-view'); @@ -111,6 +111,7 @@ ), array( 'title' => $book->getTitle(), + 'class' => 'pro-white-background', )); } diff --git a/src/applications/diviner/controller/DivinerMainController.php b/src/applications/diviner/controller/DivinerMainController.php --- a/src/applications/diviner/controller/DivinerMainController.php +++ b/src/applications/diviner/controller/DivinerMainController.php @@ -30,7 +30,7 @@ ->setHeader(pht('Documentation Books')) ->addActionLink($query_button); - $document = new PHUIDocumentView(); + $document = new PHUIDocumentViewPro(); $document->setHeader($header); $document->addClass('diviner-view'); @@ -45,10 +45,7 @@ $list[] = $item; } $list = id(new PHUIBoxView()) - ->addPadding(PHUI::PADDING_LARGE_LEFT) - ->addPadding(PHUI::PADDING_LARGE_RIGHT) - ->addPadding(PHUI::PADDING_SMALL_TOP) - ->addPadding(PHUI::PADDING_SMALL_BOTTOM) + ->addPadding(PHUI::PADDING_MEDIUM_TOP) ->appendChild($list); $document->appendChild($list); @@ -82,7 +79,7 @@ ), array( 'title' => pht('Documentation Books'), - 'fonts' => true, + 'class' => 'pro-white-background', )); } } diff --git a/src/applications/diviner/view/DivinerSectionView.php b/src/applications/diviner/view/DivinerSectionView.php --- a/src/applications/diviner/view/DivinerSectionView.php +++ b/src/applications/diviner/view/DivinerSectionView.php @@ -30,12 +30,10 @@ $header = id(new PHUIHeaderView()) ->setBleedHeader(true) + ->addClass('diviner-section-header') ->setHeader($this->header); - $content = id(new PHUIBoxView()) - ->addPadding(PHUI::PADDING_LARGE_LEFT) - ->addPadding(PHUI::PADDING_LARGE_RIGHT) - ->appendChild($this->content); + $content = phutil_tag_div('diviner-section-content', $this->content); return array($header, $content); } diff --git a/src/view/page/PhabricatorStandardPageView.php b/src/view/page/PhabricatorStandardPageView.php --- a/src/view/page/PhabricatorStandardPageView.php +++ b/src/view/page/PhabricatorStandardPageView.php @@ -11,6 +11,7 @@ private $glyph; private $menuContent; private $showChrome = true; + private $classes = array(); private $disableConsole; private $pageObjects = array(); private $applicationMenu; @@ -67,6 +68,11 @@ return $this->showChrome; } + public function addClass($class) { + $this->classes[] = $class; + return $this; + } + public function appendPageObjects(array $objs) { foreach ($objs as $obj) { $this->pageObjects[] = $obj; @@ -511,7 +517,9 @@ } $classes[] = 'phui-theme-'.PhabricatorEnv::getEnvConfig('ui.header-color'); - + foreach ($this->classes as $class) { + $classes[] = $class; + } return implode(' ', $classes); } diff --git a/src/view/phui/PHUIDocumentViewPro.php b/src/view/phui/PHUIDocumentViewPro.php new file mode 100644 --- /dev/null +++ b/src/view/phui/PHUIDocumentViewPro.php @@ -0,0 +1,136 @@ +setTall(true); + $this->header = $header; + return $this; + } + + public function setBook($name, $description) { + $this->bookname = $name; + $this->bookdescription = $description; + return $this; + } + + public function setFluid($fluid) { + $this->fluid = $fluid; + return $this; + } + + public function setPropertyList($view) { + $this->propertyList = $view; + return $this; + } + + public function setToc(PHUIListView $toc) { + $this->toc = $toc; + return $this; + } + + protected function getTagAttributes() { + $classes = array(); + + if ($this->fluid) { + $classes[] = 'phui-document-fluid'; + } + + return array( + 'class' => $classes, + ); + } + + protected function getTagContent() { + require_celerity_resource('phui-document-view-css'); + require_celerity_resource('phui-document-view-pro-css'); + Javelin::initBehavior('phabricator-reveal-content'); + + $classes = array(); + $classes[] = 'phui-document-view'; + $classes[] = 'phui-document-view-pro'; + + $book = null; + if ($this->bookname) { + $book = pht('%s (%s)', $this->bookname, $this->bookdescription); + } + + $main_content = $this->renderChildren(); + + if ($book) { + $this->header->setSubheader($book); + } + + $table_of_contents = null; + if ($this->toc) { + $toc = array(); + $toc_id = celerity_generate_unique_node_id(); + $toc[] = id(new PHUIButtonView()) + ->setTag('a') + ->setIconFont('fa-align-left') + ->setColor(PHUIButtonView::SIMPLE) + ->addClass('phui-document-toc') + ->addSigil('jx-toggle-class') + ->setMetaData(array( + 'map' => array( + $toc_id => 'phui-document-toc-open', + ), + )); + + $toc[] = phutil_tag( + 'div', + array( + 'class' => 'phui-list-sidenav phui-document-toc-list', + ), + $this->toc); + + $table_of_contents = phutil_tag( + 'div', + array( + 'class' => 'phui-document-toc-container', + 'id' => $toc_id, + ), + $toc); + } + + $content_inner = phutil_tag( + 'div', + array( + 'class' => 'phui-document-inner', + ), + array( + $table_of_contents, + $this->header, + $main_content, + )); + + $content = phutil_tag( + 'div', + array( + 'class' => 'phui-document-content', + ), + $content_inner); + + $view = phutil_tag( + 'div', + array( + 'class' => implode(' ', $classes), + ), + $content); + + $list = null; + if ($this->propertyList) { + $list = phutil_tag_div('phui-document-properties', $this->propertyList); + } + + return array($view, $list); + } + +} diff --git a/webroot/rsrc/css/core/core.css b/webroot/rsrc/css/core/core.css --- a/webroot/rsrc/css/core/core.css +++ b/webroot/rsrc/css/core/core.css @@ -173,3 +173,7 @@ height: 2px; background: {$sky}; } + +html body.pro-white-background { + background-color: white; +} diff --git a/webroot/rsrc/css/core/remarkup.css b/webroot/rsrc/css/core/remarkup.css --- a/webroot/rsrc/css/core/remarkup.css +++ b/webroot/rsrc/css/core/remarkup.css @@ -363,35 +363,12 @@ padding-top: 0; } -body .phabricator-remarkup p:first-child, -body .phabricator-remarkup ul.remarkup-list:first-child, -body .phabricator-remarkup ol.remarkup-list:first-child, -body .phabricator-remarkup .remarkup-code-block:first-child, -body .phabricator-remarkup h1.remarkup-header:first-child, -body .phabricator-remarkup h2.remarkup-header:first-child, -body .phabricator-remarkup h3.remarkup-header:first-child, -body .phabricator-remarkup h4.remarkup-header:first-child, -body .phabricator-remarkup h5.remarkup-header:first-child, -body .phabricator-remarkup h6.remarkup-header:first-child, -body .phabricator-remarkup blockquote:first-child, -body .phabricator-remarkup table.remarkup-table:first-child, -body .phabricator-remarkup .remarkup-note:first-child { +body .phabricator-remarkup *:first-child, +body .phabricator-remarkup .remarkup-header + * { margin-top: 0; } -body .phabricator-remarkup p:last-child, -body .phabricator-remarkup ul.remarkup-list:last-child, -body .phabricator-remarkup ol.remarkup-list:last-child, -body .phabricator-remarkup .remarkup-code-block:last-child, -body .phabricator-remarkup h1.remarkup-header:last-child, -body .phabricator-remarkup h2.remarkup-header:last-child, -body .phabricator-remarkup h3.remarkup-header:last-child, -body .phabricator-remarkup h4.remarkup-header:last-child, -body .phabricator-remarkup h5.remarkup-header:last-child, -body .phabricator-remarkup h6.remarkup-header:last-child, -body .phabricator-remarkup blockquote:last-child, -body .phabricator-remarkup table.remarkup-table:last-child, -body .phabricator-remarkup .remarkup-note:last-child { +body .phabricator-remarkup *:last-child { margin-bottom: 0; } diff --git a/webroot/rsrc/css/diviner/diviner-shared.css b/webroot/rsrc/css/diviner/diviner-shared.css --- a/webroot/rsrc/css/diviner/diviner-shared.css +++ b/webroot/rsrc/css/diviner/diviner-shared.css @@ -8,7 +8,7 @@ } .diviner-table-view { - margin: 0 16px 24px; + margin: 0 0 24px; } .device-phone .diviner-table-view { @@ -65,38 +65,64 @@ padding: 0 8px 16px 0; } -body .diviner-document-section .phui-header-header { - width: 100%; +.phui-header-shell.diviner-section-header .phui-header-header { + color: #000; font-size: 20px; - font-weight: bold; - margin: 0; - padding: 0; +} + +body .diviner-view .diviner-document-section + .phui-header-shell.diviner-section-header { + padding: 0 24px 8px 0; + border-bottom: 1px solid {$thinblueborder}; + margin: 32px 0 16px; } body .diviner-document-section .phui-header-shell.phui-bleed-header { - padding: 0; + padding: 16px 0 0 0; + border-bottom: none; } -.phui-property-list-view + .diviner-document-section { - margin-top: -1px; +body .diviner-view .diviner-section-content .phui-header-shell { + margin: 24px 0 8px; + padding: 0; + border: none; } .diviner-message-not-documented { color: {$lightgreytext}; font-style: italic; - margin: 16px; + margin: 12px 0 32px; + font-size: {$biggerfontsize}; } -.diviner-atom-signature { - font-weight: normal; +.diviner-document-section .diviner-message-not-documented { + margin-left: 0; + margin-right: 0; +} + +.phui-document-content .phabricator-remarkup.diviner-remarkup-section { + padding: 16px 0 32px 0; } .diviner-atom-signature-name { font-weight: bold; + color: {$violet}; } -.diviner-list .diviner-atom-signature { +.diviner-atom-signature { + font-weight: normal; + color: #000; +} + +.phui-header-view .phui-header-header a.diviner-atom-signature-name { color: {$violet}; +} + +.phui-header-view .phui-header-header a.diviner-atom-signature-name:hover { + text-decoration: underline !important; +} + +.diviner-list .diviner-atom-signature { margin-left: -16px; } @@ -126,7 +152,7 @@ } .diviner-list { - padding-left: 12px; + padding-left: 17px; } .diviner-list li { @@ -150,8 +176,8 @@ text-decoration: none; } -.device-desktop .diviner-book-item:hover { - background-color: #F5EEFF; +.device-desktop .diviner-book-item:hover .diviner-book-item-title { + color: {$violet}; } .diviner-book-item-title { diff --git a/webroot/rsrc/css/phui/phui-document-pro.css b/webroot/rsrc/css/phui/phui-document-pro.css new file mode 100644 --- /dev/null +++ b/webroot/rsrc/css/phui/phui-document-pro.css @@ -0,0 +1,108 @@ +/** + * @provides phui-document-view-pro-css + */ + +.phui-document-view.phui-document-view-pro { + max-width: 800px; + padding: 0 16px; + position: relative; + margin: 16px auto; +} + +.phui-document-properties { + max-width: 800px; + padding: 0 16px; + background-color: {$lightgreybackground}; + margin: 0 auto; + border-radius: 3px; +} + +.device-phone .phui-document-properties { + margin: 0 8px; +} + +.device-phone .phui-document-view.phui-document-view-pro { + padding: 0 8px; + margin: 0 auto; +} + +.phui-document-view-pro .phui-document-toc { + position: absolute; + top: 18px; + left: -36px; +} + +a.button.phui-document-toc { + display: inline-block; + height: 16px; + width: 16px; + padding: 3px 8px 4px 8px; +} + +.phui-document-view-pro .phui-document-toc-list { + margin: 8px; + border: 1px solid {$blueborder}; + border-radius: 3px; + box-shadow: {$dropshadow}; + width: 200px; + position: absolute; + z-index: 30; + background-color: #fff; + top: 38px; + left: -44px; +} + +.device .phui-document-view-pro .phui-document-toc { + display: none; +} + +.phui-document-toc-list { + display: none; +} + +.phui-document-toc-open .phui-document-toc-list { + display: block; +} + +.phui-document-toc-open .phui-document-toc { + background-color: {$blue}; +} + +.phui-document-toc-open .phui-document-toc .phui-icon-view { + color: #fff; +} + +.phui-document-view-pro .phui-document-content .phabricator-remarkup { + padding: 16px 0; + line-height: 1.7em; +} + +.device-desktop .phui-document-view.phui-document-view-pro { + border: 0; +} + +.phui-document-view.phui-document-view-pro .phui-header-shell { + background: transparent; + border-bottom: 1px solid {$thinblueborder}; +} + +.phui-document-view.phui-document-view-pro .phui-header-shell { + margin: 0; + padding: 16px 0 32px; +} + +.device-phone .phui-document-view.phui-document-view-pro .phui-header-shell { + margin: 8px 0 0 0; +} + +.phui-document-view.phui-document-view-pro .phui-header-tall + .phui-header-header { + font-size: 24px; + line-height: 30px; + color: #000; +} + +.device-phone .phui-document-view-pro .phui-header-subheader { + display: block; + padding: 8px 0 0 0; +} diff --git a/webroot/rsrc/css/phui/phui-document.css b/webroot/rsrc/css/phui/phui-document.css --- a/webroot/rsrc/css/phui/phui-document.css +++ b/webroot/rsrc/css/phui/phui-document.css @@ -86,7 +86,6 @@ .phui-header-shell.phui-header-no-backgound .phui-header-view { padding: 8px 0 4px; - font-size: {$biggestfontsize}; } .phui-document-content .phui-property-list-container { @@ -181,11 +180,11 @@ .phui-document-view .PhabricatorMonospaced, .phui-document-view .phabricator-remarkup .remarkup-code-block .remarkup-code { - font: 11px/14px "Menlo", "Consolas", "Monaco", monospace; + font: 11px/16px "Menlo", "Consolas", "Monaco", monospace; } .platform-windows .phui-document-view .PhabricatorMonospaced, .platform-windows .phui-document-view .phabricator-remarkup .remarkup-code-block .remarkup-code { - font: 12px/14px "Menlo", "Consolas", "Monaco", monospace; + font: 12px/16px "Menlo", "Consolas", "Monaco", monospace; } diff --git a/webroot/rsrc/css/phui/phui-fontkit.css b/webroot/rsrc/css/phui/phui-fontkit.css --- a/webroot/rsrc/css/phui/phui-fontkit.css +++ b/webroot/rsrc/css/phui/phui-fontkit.css @@ -10,7 +10,6 @@ .diviner-document-section .phui-header-header { font-family: 'Roboto Slab', {$fontfamily}; - font-size: 20px; color: #000; } @@ -30,5 +29,5 @@ .phui-document-view .phabricator-remarkup h2.remarkup-header { padding: 0 24px 8px 0; border-bottom: 1px solid {$thinblueborder}; - margin: 24px 0 16px; + margin: 32px 0 16px; }