1
0
Fork 0
mirror of https://we.phorge.it/source/phorge.git synced 2024-11-10 08:52:39 +01:00

Approximately rough in persistent chat column very roughly

Summary:
Ref T7014. This is very rough and not hooked up to anything, but gets a couple of the layout pieces in place so we can (a) see that it looks like it'll kinda work; (b) look for problematic interactions and (c) you can fix my mangling of your design.

NOTE: Press "\" to toggle the column.

Test Plan:
Feels pretty good to me?

{F275722}

Reviewers: btrahan, chad

Reviewed By: chad

Subscribers: epriestley

Maniphest Tasks: T7014

Differential Revision: https://secure.phabricator.com/D11497
This commit is contained in:
epriestley 2015-01-27 06:30:52 -08:00
parent 95fab5ee4f
commit 893243b789
6 changed files with 257 additions and 3 deletions

View file

@ -7,7 +7,7 @@
*/
return array(
'names' => array(
'core.pkg.css' => '30ec4610',
'core.pkg.css' => 'f020a5d6',
'core.pkg.js' => '55716d41',
'darkconsole.pkg.js' => '8ab24e01',
'differential.pkg.css' => '8af45893',
@ -39,7 +39,7 @@ return array(
'rsrc/css/application/base/main-menu-view.css' => '7bb9c588',
'rsrc/css/application/base/notification-menu.css' => '6aa0a74b',
'rsrc/css/application/base/phabricator-application-launch-view.css' => '16ca323f',
'rsrc/css/application/base/standard-page-view.css' => '661ae3e3',
'rsrc/css/application/base/standard-page-view.css' => '8db344ee',
'rsrc/css/application/chatlog/chatlog.css' => '852140ff',
'rsrc/css/application/config/config-options.css' => '7fedf08b',
'rsrc/css/application/config/config-template.css' => '25d446d6',
@ -342,6 +342,7 @@ return array(
'rsrc/js/application/aphlict/behavior-aphlict-status.js' => 'ea681761',
'rsrc/js/application/auth/behavior-persona-login.js' => '9414ff18',
'rsrc/js/application/config/behavior-reorder-fields.js' => '14a827de',
'rsrc/js/application/conpherence/behavior-durable-column.js' => 'acad7376',
'rsrc/js/application/conpherence/behavior-menu.js' => 'f0a41b9f',
'rsrc/js/application/conpherence/behavior-pontificate.js' => '2f6efe18',
'rsrc/js/application/conpherence/behavior-widget-pane.js' => '40b1ff90',
@ -574,6 +575,7 @@ return array(
'javelin-behavior-diffusion-locate-file' => '6d3e1947',
'javelin-behavior-diffusion-pull-lastmodified' => '2b228192',
'javelin-behavior-doorkeeper-tag' => 'e5822781',
'javelin-behavior-durable-column' => 'acad7376',
'javelin-behavior-error-log' => '6882e80a',
'javelin-behavior-fancy-datepicker' => 'c51ae228',
'javelin-behavior-global-drag-and-drop' => '07f199d8',
@ -731,7 +733,7 @@ return array(
'phabricator-side-menu-view-css' => '7e8c6341',
'phabricator-slowvote-css' => '266df6a1',
'phabricator-source-code-view-css' => '7d346aa4',
'phabricator-standard-page-view' => '661ae3e3',
'phabricator-standard-page-view' => '8db344ee',
'phabricator-textareautils' => '5c93c52c',
'phabricator-title' => '5c1c758c',
'phabricator-tooltip' => '1d298e3a',
@ -1601,6 +1603,13 @@ return array(
'javelin-util',
'phabricator-prefab',
),
'acad7376' => array(
'javelin-behavior',
'javelin-dom',
'javelin-stratcom',
'javelin-scrollbar',
'phabricator-keyboard-shortcut',
),
'b07b009f' => array(
'javelin-behavior',
'javelin-dom',

View file

@ -1137,6 +1137,7 @@ phutil_register_library_map(array(
'PHUICrumbsView' => 'view/phui/PHUICrumbsView.php',
'PHUIDocumentExample' => 'applications/uiexample/examples/PHUIDocumentExample.php',
'PHUIDocumentView' => 'view/phui/PHUIDocumentView.php',
'PHUIDurableColumn' => 'view/phui/PHUIDurableColumn.php',
'PHUIFeedStoryExample' => 'applications/uiexample/examples/PHUIFeedStoryExample.php',
'PHUIFeedStoryView' => 'view/phui/PHUIFeedStoryView.php',
'PHUIFormDividerControl' => 'view/form/control/PHUIFormDividerControl.php',
@ -4315,6 +4316,7 @@ phutil_register_library_map(array(
'PHUICrumbsView' => 'AphrontView',
'PHUIDocumentExample' => 'PhabricatorUIExample',
'PHUIDocumentView' => 'AphrontTagView',
'PHUIDurableColumn' => 'AphrontTagView',
'PHUIFeedStoryExample' => 'PhabricatorUIExample',
'PHUIFeedStoryView' => 'AphrontView',
'PHUIFormDividerControl' => 'AphrontFormControl',

View file

@ -16,6 +16,7 @@ final class PhabricatorStandardPageView extends PhabricatorBarePageView {
private $pageObjects = array();
private $applicationMenu;
private $showFooter = true;
private $showDurableColumn = true;
public function setShowFooter($show_footer) {
$this->showFooter = $show_footer;
@ -73,6 +74,15 @@ final class PhabricatorStandardPageView extends PhabricatorBarePageView {
}
}
public function setShowDurableColumn($show) {
$this->showDurableColumn = $show;
return $this;
}
public function getShowDurableColumn() {
return $this->showDurableColumn;
}
public function getTitle() {
$use_glyph = true;
@ -364,6 +374,11 @@ final class PhabricatorStandardPageView extends PhabricatorBarePageView {
)),
));
$durable_column = null;
if ($this->getShowDurableColumn()) {
$durable_column = new PHUIDurableColumn();
}
return phutil_tag(
'div',
array(
@ -371,6 +386,7 @@ final class PhabricatorStandardPageView extends PhabricatorBarePageView {
),
array(
$main_page,
$durable_column,
));
}

View file

@ -0,0 +1,106 @@
<?php
final class PHUIDurableColumn extends AphrontTagView {
protected function getTagAttributes() {
return array(
'id' => 'durable-column',
'class' => 'phui-durable-column',
);
}
protected function getTagContent() {
Javelin::initBehavior('durable-column');
$classes = array();
$classes[] = 'phui-durable-column-header';
$classes[] = 'sprite-main-header';
$classes[] = 'main-header-'.PhabricatorEnv::getEnvConfig('ui.header-color');
$header = phutil_tag(
'div',
array(
'class' => implode(' ', $classes),
),
phutil_tag(
'div',
array(
'class' => 'phui-durable-column-header-text',
),
pht('Column Prototype')));
$icon_bar = phutil_tag(
'div',
array(
'class' => 'phui-durable-column-icon-bar',
),
null); // <-- TODO: Icon buttons go here.
$copy = pht(
'This is a very early prototype of a persistent column. It is not '.
'expected to work yet, and leaving it open will activate other new '.
'features which will break things. Press "\\" (backslash) on your '.
'keyboard to close it now.');
$content = phutil_tag(
'div',
array(
'class' => 'phui-durable-column-main',
),
phutil_tag(
'div',
array(
'id' => 'phui-durable-column-content',
'class' => 'phui-durable-column-frame',
),
phutil_tag(
'div',
array(
'class' => 'phui-durable-column-content',
),
$copy)));
$input = phutil_tag(
'textarea',
array(
'class' => 'phui-durable-column-textarea',
'placeholder' => pht('Box for text...'),
));
$footer = phutil_tag(
'div',
array(
'class' => 'phui-durable-column-footer',
),
array(
phutil_tag(
'button',
array(
'class' => 'grey',
),
pht('Send')),
phutil_tag(
'div',
array(
'class' => 'phui-durable-column-status',
),
pht('Status Text')),
));
return array(
$header,
phutil_tag(
'div',
array(
'class' => 'phui-durable-column-body',
),
array(
$icon_bar,
$content,
$input,
$footer,
)),
);
}
}

View file

@ -199,3 +199,97 @@ a.handle-disabled {
position: absolute;
left: -50px;
}
.with-durable-column {
margin-right: 300px;
}
.phui-durable-column {
position: absolute;
top: 0;
bottom: 0;
right: 0;
width: 300px;
background: #ffffff;
display: none;
}
.phui-durable-column-header {
height: 44px;
border-left: 1px solid #000000;
}
.phui-durable-column-header-text {
padding: 12px 16px;
font-size: 15px;
color: {$lightgreytext};
}
.phui-durable-column-icon-bar {
height: 34px;
padding: 5px 16px;
border-bottom: 1px solid {$lightblueborder};
}
.phui-durable-column-body {
position: absolute;
top: 44px;
bottom: 0;
right: 0;
left: 0;
border-left: 1px solid {$lightgreyborder};
}
.phui-durable-column-main {
position: absolute;
top: 44px;
bottom: 144px;
left: 0;
right: 0;
overflow: hidden;
}
.phui-durable-column-content {
padding: 8px 16px;
}
.phui-durable-column-textarea {
position: absolute;
left: 0;
right: 0;
bottom: 44px;
height: 100px;
margin: 0;
border-width: 1px 0;
border-style: solid;
border-top-color: {$lightblueborder};
border-bottom-color: {$lightblueborder};
padding: 8px 16px;
resize: none;
}
.phui-durable-column-textarea:focus {
outline: 0;
border-top-color: {$sky};
border-bottom-color: {$sky};
box-shadow: none;
}
.phui-durable-column-footer {
position: absolute;
height: 28px;
padding: 8px 16px;
left: 0;
right: 0;
bottom: 0;
}
.phui-durable-column-footer button {
float: right;
}
.phui-durable-column-status {
vertical-align: middle;
line-height: 28px;
color: {$lightgreytext};
}

View file

@ -0,0 +1,27 @@
/**
* @provides javelin-behavior-durable-column
* @requires javelin-behavior
* javelin-dom
* javelin-stratcom
* javelin-scrollbar
* phabricator-keyboard-shortcut
*/
JX.behavior('durable-column', function() {
var frame = JX.$('phabricator-standard-page');
var show = false;
new JX.KeyboardShortcut('\\', 'Toggle Column (Prototype)')
.setHandler(function() {
show = !show;
JX.DOM.alterClass(frame, 'with-durable-column', show);
JX.$('durable-column').style.display = (show ? 'block' : 'none');
JX.Stratcom.invoke('resize');
})
.register();
new JX.Scrollbar(JX.$('phui-durable-column-content'));
});