mirror of
https://we.phorge.it/source/phorge.git
synced 2024-11-18 12:52:42 +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:
parent
95fab5ee4f
commit
893243b789
6 changed files with 257 additions and 3 deletions
|
@ -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',
|
||||
|
|
|
@ -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',
|
||||
|
|
|
@ -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,
|
||||
));
|
||||
}
|
||||
|
||||
|
|
106
src/view/phui/PHUIDurableColumn.php
Normal file
106
src/view/phui/PHUIDurableColumn.php
Normal 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,
|
||||
)),
|
||||
);
|
||||
}
|
||||
|
||||
}
|
|
@ -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};
|
||||
}
|
||||
|
|
|
@ -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'));
|
||||
|
||||
|
||||
});
|
Loading…
Reference in a new issue