mirror of
https://we.phorge.it/source/phorge.git
synced 2024-11-10 00:42:41 +01:00
Make workboards truly 'fixed' in display
Summary: **WIP** This sets a shadow fixed to the full screen of the browser for which panels to live in. I have some minor things to fix, but play with it. Specifically I haven't been able to dig up when stuff that overflowwed, doesn't always render even after scroll. Test Plan: Test on a board with many tasks, many panels, small screens. Test on mobile too! Reviewers: epriestley, btrahan Reviewed By: btrahan Subscribers: qgil, epriestley, Korvin Differential Revision: https://secure.phabricator.com/D9005
This commit is contained in:
parent
61dd5ab6c1
commit
38739755c6
8 changed files with 68 additions and 54 deletions
|
@ -7,7 +7,7 @@
|
|||
return array(
|
||||
'names' =>
|
||||
array(
|
||||
'core.pkg.css' => '989eee69',
|
||||
'core.pkg.css' => '719389b0',
|
||||
'core.pkg.js' => 'b2ed04a2',
|
||||
'darkconsole.pkg.js' => 'ca8671ce',
|
||||
'differential.pkg.css' => '4b8686e3',
|
||||
|
@ -24,7 +24,7 @@ return array(
|
|||
'rsrc/css/aphront/error-view.css' => '9f1d5518',
|
||||
'rsrc/css/aphront/lightbox-attachment.css' => '7acac05d',
|
||||
'rsrc/css/aphront/list-filter-view.css' => '2ae43867',
|
||||
'rsrc/css/aphront/multi-column.css' => '667ca7b8',
|
||||
'rsrc/css/aphront/multi-column.css' => '1b95ab2e',
|
||||
'rsrc/css/aphront/notification.css' => 'ef2c9b34',
|
||||
'rsrc/css/aphront/pager-view.css' => '2e3539af',
|
||||
'rsrc/css/aphront/panel-view.css' => '5846dfa2',
|
||||
|
@ -132,12 +132,12 @@ return array(
|
|||
'rsrc/css/phui/phui-fontkit.css' => 'de84aa4a',
|
||||
'rsrc/css/phui/phui-form-view.css' => '867463b4',
|
||||
'rsrc/css/phui/phui-form.css' => 'b78ec020',
|
||||
'rsrc/css/phui/phui-header-view.css' => '5b79f0ef',
|
||||
'rsrc/css/phui/phui-header-view.css' => '5d245c9c',
|
||||
'rsrc/css/phui/phui-icon.css' => '215fa314',
|
||||
'rsrc/css/phui/phui-info-panel.css' => '27ea50a1',
|
||||
'rsrc/css/phui/phui-list.css' => 'ef8035b6',
|
||||
'rsrc/css/phui/phui-object-box.css' => 'ce92d8ec',
|
||||
'rsrc/css/phui/phui-object-item-list-view.css' => '24444832',
|
||||
'rsrc/css/phui/phui-object-item-list-view.css' => '3bf8e1c9',
|
||||
'rsrc/css/phui/phui-pinboard-view.css' => 'e7d3b05e',
|
||||
'rsrc/css/phui/phui-property-list-view.css' => 'af4b381f',
|
||||
'rsrc/css/phui/phui-remarkup-preview.css' => '19ad512b',
|
||||
|
@ -146,8 +146,8 @@ return array(
|
|||
'rsrc/css/phui/phui-tag-view.css' => '295d81c4',
|
||||
'rsrc/css/phui/phui-text.css' => '23e9b4b7',
|
||||
'rsrc/css/phui/phui-timeline-view.css' => '15ff2a9f',
|
||||
'rsrc/css/phui/phui-workboard-view.css' => '84f2c272',
|
||||
'rsrc/css/phui/phui-workpanel-view.css' => 'b6ccc22d',
|
||||
'rsrc/css/phui/phui-workboard-view.css' => '2bf82d00',
|
||||
'rsrc/css/phui/phui-workpanel-view.css' => '97b69459',
|
||||
'rsrc/css/sprite-actions.css' => '969ad0e5',
|
||||
'rsrc/css/sprite-apps-large.css' => '3e3ec4c3',
|
||||
'rsrc/css/sprite-apps-xlarge.css' => 'db66c878',
|
||||
|
@ -495,7 +495,7 @@ return array(
|
|||
'aphront-dialog-view-css' => 'c01d24b4',
|
||||
'aphront-error-view-css' => '9f1d5518',
|
||||
'aphront-list-filter-view-css' => '2ae43867',
|
||||
'aphront-multi-column-view-css' => '667ca7b8',
|
||||
'aphront-multi-column-view-css' => '1b95ab2e',
|
||||
'aphront-pager-view-css' => '2e3539af',
|
||||
'aphront-panel-view-css' => '5846dfa2',
|
||||
'aphront-request-failure-view-css' => 'da14df31',
|
||||
|
@ -761,12 +761,12 @@ return array(
|
|||
'phui-fontkit-css' => 'de84aa4a',
|
||||
'phui-form-css' => 'b78ec020',
|
||||
'phui-form-view-css' => '867463b4',
|
||||
'phui-header-view-css' => '5b79f0ef',
|
||||
'phui-header-view-css' => '5d245c9c',
|
||||
'phui-icon-view-css' => '215fa314',
|
||||
'phui-info-panel-css' => '27ea50a1',
|
||||
'phui-list-view-css' => 'ef8035b6',
|
||||
'phui-object-box-css' => 'ce92d8ec',
|
||||
'phui-object-item-list-view-css' => '24444832',
|
||||
'phui-object-item-list-view-css' => '3bf8e1c9',
|
||||
'phui-pinboard-view-css' => 'e7d3b05e',
|
||||
'phui-property-list-view-css' => 'af4b381f',
|
||||
'phui-remarkup-preview-css' => '19ad512b',
|
||||
|
@ -775,8 +775,8 @@ return array(
|
|||
'phui-tag-view-css' => '295d81c4',
|
||||
'phui-text-css' => '23e9b4b7',
|
||||
'phui-timeline-view-css' => '15ff2a9f',
|
||||
'phui-workboard-view-css' => '84f2c272',
|
||||
'phui-workpanel-view-css' => 'b6ccc22d',
|
||||
'phui-workboard-view-css' => '2bf82d00',
|
||||
'phui-workpanel-view-css' => '97b69459',
|
||||
'phuix-action-list-view' => 'b5c256b8',
|
||||
'phuix-action-view' => '19a0b148',
|
||||
'phuix-dropdown-menu' => 'bd4c8dca',
|
||||
|
|
|
@ -150,55 +150,45 @@ final class PhabricatorProjectBoardViewController
|
|||
$board->addPanel($panel);
|
||||
}
|
||||
|
||||
$crumbs = $this->buildApplicationCrumbs();
|
||||
$crumbs->addTextCrumb(pht('Board'));
|
||||
|
||||
$can_edit = PhabricatorPolicyFilter::hasCapability(
|
||||
$viewer,
|
||||
$project,
|
||||
PhabricatorPolicyCapability::CAN_EDIT);
|
||||
|
||||
$actions = id(new PhabricatorActionListView())
|
||||
->setUser($viewer)
|
||||
->addAction(
|
||||
id(new PhabricatorActionView())
|
||||
->setName(pht('Add Column'))
|
||||
->setHref($this->getApplicationURI('board/'.$this->id.'/edit/'))
|
||||
->setIcon('create')
|
||||
->setDisabled(!$can_edit)
|
||||
->setWorkflow(!$can_edit));
|
||||
$add_icon = id(new PHUIIconView())
|
||||
->setIconFont('fa-plus bluegrey');
|
||||
|
||||
$plist = id(new PHUIPropertyListView());
|
||||
$add_button = id(new PHUIButtonView())
|
||||
->setText(pht('Add Column'))
|
||||
->setIcon($add_icon)
|
||||
->setTag('a')
|
||||
->setHref($this->getApplicationURI('board/'.$this->id.'/edit/'))
|
||||
->setDisabled(!$can_edit)
|
||||
->setWorkflow(!$can_edit);
|
||||
|
||||
// TODO: Need this to get actions to render.
|
||||
$plist->addProperty(
|
||||
pht('Project Boards'),
|
||||
phutil_tag(
|
||||
'em',
|
||||
array(),
|
||||
pht(
|
||||
'This feature is beta, but should mostly work.')));
|
||||
$plist->setActionList($actions);
|
||||
$header_link = phutil_tag(
|
||||
'a',
|
||||
array(
|
||||
'href' => $this->getApplicationURI('view/'.$project->getID().'/')
|
||||
),
|
||||
$project->getName());
|
||||
|
||||
$header = id(new PHUIHeaderView())
|
||||
->setHeader($project->getName())
|
||||
->setHeader($header_link)
|
||||
->setUser($viewer)
|
||||
->setNoBackground(true)
|
||||
->setImage($project->getProfileImageURI())
|
||||
->setImageURL($this->getApplicationURI('view/'.$project->getID().'/'))
|
||||
->addActionLink($add_button)
|
||||
->setPolicyObject($project);
|
||||
|
||||
$box = id(new PHUIObjectBoxView())
|
||||
->setHeader($header)
|
||||
->addPropertyList($plist);
|
||||
|
||||
$board_box = id(new PHUIBoxView())
|
||||
->appendChild($board)
|
||||
->addClass('project-board-wrapper')
|
||||
->addMargin(PHUI::MARGIN_LARGE);
|
||||
->addClass('project-board-wrapper');
|
||||
|
||||
return $this->buildApplicationPage(
|
||||
array(
|
||||
$crumbs,
|
||||
$box,
|
||||
$header,
|
||||
$board_box,
|
||||
),
|
||||
array(
|
||||
|
|
|
@ -8,6 +8,7 @@ final class PHUIHeaderView extends AphrontView {
|
|||
private $header;
|
||||
private $tags = array();
|
||||
private $image;
|
||||
private $imageURL = null;
|
||||
private $subheader;
|
||||
private $gradient;
|
||||
private $noBackground;
|
||||
|
@ -42,6 +43,11 @@ final class PHUIHeaderView extends AphrontView {
|
|||
return $this;
|
||||
}
|
||||
|
||||
public function setImageURL($url) {
|
||||
$this->imageURL = $url;
|
||||
return $this;
|
||||
}
|
||||
|
||||
public function setSubheader($subheader) {
|
||||
$this->subheader = $subheader;
|
||||
return $this;
|
||||
|
@ -128,12 +134,13 @@ final class PHUIHeaderView extends AphrontView {
|
|||
$image = null;
|
||||
if ($this->image) {
|
||||
$image = phutil_tag(
|
||||
'span',
|
||||
($this->imageURL ? 'a' : 'span'),
|
||||
array(
|
||||
'href' => $this->imageURL,
|
||||
'class' => 'phui-header-image',
|
||||
'style' => 'background-image: url('.$this->image.')',
|
||||
),
|
||||
'');
|
||||
' ');
|
||||
$classes[] = 'phui-header-has-image';
|
||||
}
|
||||
|
||||
|
|
|
@ -17,6 +17,11 @@
|
|||
margin: 0;
|
||||
}
|
||||
|
||||
.device-desktop .phui-workboard-view-shadow .aphront-multi-column-inner
|
||||
.aphront-multi-column-column-last {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.device .aphront-multi-column-outer
|
||||
div.aphront-multi-column-column-outer {
|
||||
width: auto;
|
||||
|
@ -28,7 +33,7 @@
|
|||
}
|
||||
|
||||
.aphront-multi-column-fixed .aphront-multi-column-column-outer {
|
||||
width: 280px;
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
/* flexible, but with a minimum */
|
||||
|
@ -103,6 +108,10 @@
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
.device-desktop .aphront-multi-column-fixed .aphront-multi-column-inner {
|
||||
margin: 0 0 12px 12px;
|
||||
}
|
||||
|
||||
/* magic sauce */
|
||||
.aphront-multi-column-fluid .aphront-multi-column-inner {
|
||||
table-layout: fixed;
|
||||
|
|
|
@ -50,6 +50,11 @@ body .phui-header-shell.phui-bleed-header
|
|||
|
||||
.phui-header-view .phui-header-action-links {
|
||||
position: absolute;
|
||||
top: 24px;
|
||||
right: 12px;
|
||||
}
|
||||
|
||||
.phui-object-box .phui-header-view .phui-header-action-links {
|
||||
top: 5px;
|
||||
right: 0;
|
||||
}
|
||||
|
|
|
@ -39,7 +39,6 @@
|
|||
border-color: {$lightgreyborder};
|
||||
border-width: 0 0 0 4px;
|
||||
margin: 5px 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.phui-object-item .phui-icon-view {
|
||||
|
@ -51,7 +50,6 @@
|
|||
border-color: {$lightgreyborder};
|
||||
border-bottom-color: {$greyborder};
|
||||
border-width: 1px 1px 1px 0;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
min-height: 29px;
|
||||
}
|
||||
|
|
|
@ -6,18 +6,23 @@
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
.phui-workboard-view-shadow {
|
||||
.device-desktop .phui-workboard-view-shadow {
|
||||
overflow-x: auto;
|
||||
padding-bottom: 8px;
|
||||
position: absolute;
|
||||
top: 120px;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.phui-workboard-view-shadow::-webkit-scrollbar {
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
background: rgba(200,200,200,.6);
|
||||
}
|
||||
|
||||
.phui-workboard-view-shadow::-webkit-scrollbar-thumb {
|
||||
background: {$lightbluetext};
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.phui-workboard-action-list {
|
||||
|
@ -68,7 +73,7 @@
|
|||
margin: 0 3px;
|
||||
}
|
||||
|
||||
.device-phone .project-board-wrapper {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
.device-tablet .project-board-wrapper {
|
||||
margin-left: 8px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
|
|
@ -53,7 +53,7 @@
|
|||
}
|
||||
|
||||
.aphront-multi-column-fixed .phui-workpanel-body {
|
||||
width: 280px;
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
.phui-workpanel-body .phui-object-item-list-view {
|
||||
|
|
Loading…
Reference in a new issue