1
0
Fork 0
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:
epriestley 2013-05-31 15:03:59 -07:00
parent 11961cdebb
commit e349c98188
6 changed files with 160 additions and 103 deletions

View file

@ -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',

View file

@ -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',

View file

@ -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) {

View 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()));
}
}

View file

@ -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;
}

View 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;
}