mirror of
https://we.phorge.it/source/phorge.git
synced 2024-11-10 00:42:41 +01:00
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
This commit is contained in:
parent
11961cdebb
commit
e349c98188
6 changed files with 160 additions and 103 deletions
|
@ -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',
|
||||
|
|
|
@ -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',
|
||||
|
|
|
@ -163,18 +163,16 @@ final class PhrictionDocumentController
|
|||
$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,
|
||||
$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(
|
||||
'<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));
|
||||
$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) {
|
||||
|
|
40
src/view/phui/PHUIDocumentView.php
Normal file
40
src/view/phui/PHUIDocumentView.php
Normal file
|
@ -0,0 +1,40 @@
|
|||
<?php
|
||||
|
||||
final class PHUIDocumentView extends AphrontTagView {
|
||||
|
||||
private $offset;
|
||||
|
||||
public function setOffset($offset) {
|
||||
$this->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()));
|
||||
}
|
||||
|
||||
}
|
|
@ -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;
|
||||
}
|
||||
|
|
78
webroot/rsrc/css/phui/phui-document.css
Normal file
78
webroot/rsrc/css/phui/phui-document.css
Normal file
|
@ -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;
|
||||
}
|
Loading…
Reference in a new issue