1
0
Fork 0
mirror of https://we.phorge.it/source/phorge.git synced 2024-12-18 19:40:55 +01:00

Convert Durable Column to popup chat in footer

Summary: This feels pretty reasonable with little effort, and I think I'd use it more than the full column.

Test Plan:
Chat a lot on various pages.... still some quicksand quirks around various pages.

{F1853487}

Reviewers: epriestley

Reviewed By: epriestley

Subscribers: scp, Korvin

Differential Revision: https://secure.phabricator.com/D16627
This commit is contained in:
Chad Little 2016-09-28 22:27:19 -07:00
parent 1095347832
commit 95d1749566
6 changed files with 95 additions and 271 deletions

View file

@ -7,10 +7,10 @@
*/
return array(
'names' => array(
'conpherence.pkg.css' => 'd93561e2',
'conpherence.pkg.css' => '3f5d038e',
'conpherence.pkg.js' => '11f3e07e',
'core.pkg.css' => '2fd26498',
'core.pkg.js' => '1d376fa9',
'core.pkg.css' => '55d32e63',
'core.pkg.js' => '32939240',
'darkconsole.pkg.js' => 'e7393ebb',
'differential.pkg.css' => '3fb7f532',
'differential.pkg.js' => '634399e9',
@ -23,7 +23,7 @@ return array(
'rsrc/css/aphront/dialog-view.css' => '593d3f67',
'rsrc/css/aphront/lightbox-attachment.css' => '7acac05d',
'rsrc/css/aphront/list-filter-view.css' => '5d6f0526',
'rsrc/css/aphront/multi-column.css' => 'fd18389d',
'rsrc/css/aphront/multi-column.css' => '84cc6640',
'rsrc/css/aphront/notification.css' => '3f6c89c9',
'rsrc/css/aphront/panel-view.css' => '8427b78d',
'rsrc/css/aphront/phabricator-nav-view.css' => 'b29426e9',
@ -46,7 +46,7 @@ return array(
'rsrc/css/application/config/config-template.css' => '8f18fa41',
'rsrc/css/application/config/setup-issue.css' => 'f794cfc3',
'rsrc/css/application/config/unhandled-exception.css' => '4c96257a',
'rsrc/css/application/conpherence/durable-column.css' => '194ac487',
'rsrc/css/application/conpherence/durable-column.css' => '63114a54',
'rsrc/css/application/conpherence/header-pane.css' => '517de9fe',
'rsrc/css/application/conpherence/menu.css' => '78c7b811',
'rsrc/css/application/conpherence/message-pane.css' => 'bbbb8a9b',
@ -164,7 +164,7 @@ return array(
'rsrc/css/phui/phui-timeline-view.css' => 'bc523970',
'rsrc/css/phui/phui-two-column-view.css' => 'fcfbe347',
'rsrc/css/phui/workboards/phui-workboard-color.css' => 'ac6fe6a7',
'rsrc/css/phui/workboards/phui-workboard.css' => 'bda3ef58',
'rsrc/css/phui/workboards/phui-workboard.css' => 'e09eb53a',
'rsrc/css/phui/workboards/phui-workcard.css' => '0c62d7c5',
'rsrc/css/phui/workboards/phui-workpanel.css' => '92197373',
'rsrc/css/sprite-login.css' => '6dbbbd97',
@ -438,7 +438,7 @@ return array(
'rsrc/js/application/config/behavior-reorder-fields.js' => 'b6993408',
'rsrc/js/application/conpherence/ConpherenceThreadManager.js' => '01774ab2',
'rsrc/js/application/conpherence/behavior-drag-and-drop-photo.js' => 'cf86d16a',
'rsrc/js/application/conpherence/behavior-durable-column.js' => 'd3506890',
'rsrc/js/application/conpherence/behavior-durable-column.js' => '39e0ea32',
'rsrc/js/application/conpherence/behavior-menu.js' => '9eb55204',
'rsrc/js/application/conpherence/behavior-participant-pane.js' => '8604caa8',
'rsrc/js/application/conpherence/behavior-pontificate.js' => 'f2e58483',
@ -605,7 +605,7 @@ return array(
'aphront-dark-console-css' => 'f54bf286',
'aphront-dialog-view-css' => '593d3f67',
'aphront-list-filter-view-css' => '5d6f0526',
'aphront-multi-column-view-css' => 'fd18389d',
'aphront-multi-column-view-css' => '84cc6640',
'aphront-panel-view-css' => '8427b78d',
'aphront-table-view-css' => '3225137a',
'aphront-tokenizer-control-css' => '056da01b',
@ -618,7 +618,7 @@ return array(
'conduit-api-css' => '7bc725c4',
'config-options-css' => '0ede4c9b',
'config-page-css' => '8798e14f',
'conpherence-durable-column-view' => '194ac487',
'conpherence-durable-column-view' => '63114a54',
'conpherence-header-pane-css' => '517de9fe',
'conpherence-menu-css' => '78c7b811',
'conpherence-message-pane-css' => 'bbbb8a9b',
@ -699,7 +699,7 @@ return array(
'javelin-behavior-diffusion-pull-lastmodified' => 'f01586dc',
'javelin-behavior-doorkeeper-tag' => 'e5822781',
'javelin-behavior-drydock-live-operation-status' => '901935ef',
'javelin-behavior-durable-column' => 'd3506890',
'javelin-behavior-durable-column' => '39e0ea32',
'javelin-behavior-editengine-reorder-configs' => 'd7a74243',
'javelin-behavior-editengine-reorder-fields' => 'b59e1e96',
'javelin-behavior-error-log' => '6882e80a',
@ -943,7 +943,7 @@ return array(
'phui-timeline-view-css' => 'bc523970',
'phui-two-column-view-css' => 'fcfbe347',
'phui-workboard-color-css' => 'ac6fe6a7',
'phui-workboard-view-css' => 'bda3ef58',
'phui-workboard-view-css' => 'e09eb53a',
'phui-workcard-view-css' => '0c62d7c5',
'phui-workpanel-view-css' => '92197373',
'phuix-action-list-view' => 'b5c256b8',
@ -1201,6 +1201,16 @@ return array(
'javelin-dom',
'javelin-workflow',
),
'39e0ea32' => array(
'javelin-behavior',
'javelin-dom',
'javelin-stratcom',
'javelin-behavior-device',
'javelin-scrollbar',
'javelin-quicksand',
'phabricator-keyboard-shortcut',
'conpherence-thread-manager',
),
'3ab51e2c' => array(
'javelin-behavior',
'javelin-behavior-device',
@ -2034,16 +2044,6 @@ return array(
'd254d646' => array(
'javelin-util',
),
'd3506890' => array(
'javelin-behavior',
'javelin-dom',
'javelin-stratcom',
'javelin-behavior-device',
'javelin-scrollbar',
'javelin-quicksand',
'phabricator-keyboard-shortcut',
'conpherence-thread-manager',
),
'd4505101' => array(
'javelin-stratcom',
'javelin-install',

View file

@ -125,14 +125,7 @@ final class ConpherenceDurableColumnView extends AphrontTagView {
$classes = array();
$classes[] = 'conpherence-durable-column-header';
$classes[] = 'phabricator-main-menu-background';
$loading_mask = phutil_tag(
'div',
array(
'class' => 'loading-mask',
),
'');
$classes[] = 'grouped';
$header = phutil_tag(
'div',
@ -175,23 +168,7 @@ final class ConpherenceDurableColumnView extends AphrontTagView {
$input = $this->buildTextInput();
$footer = phutil_tag(
'div',
array(
'class' => 'conpherence-durable-column-footer',
),
array(
$this->buildSendButton(),
phutil_tag(
'div',
array(
'class' => 'conpherence-durable-column-status',
),
$this->buildStatusText()),
));
return array(
$loading_mask,
$header,
javelin_tag(
'div',
@ -203,7 +180,6 @@ final class ConpherenceDurableColumnView extends AphrontTagView {
$icon_bar,
$content,
$input,
$footer,
)),
);
}
@ -263,26 +239,10 @@ final class ConpherenceDurableColumnView extends AphrontTagView {
),
''));
}
$icons[] = $this->buildSearchButton();
return $icons;
}
private function buildSearchButton() {
return phutil_tag(
'div',
array(
'class' => 'conpherence-durable-column-search-button',
),
id(new PHUIButtonBarView())
->addButton(
id(new PHUIButtonView())
->setTag('a')
->setHref('/conpherence/search/')
->setColor(PHUIButtonView::GREY)
->setIcon('fa-search')));
}
private function buildHeader() {
$conpherence = $this->getSelectedConpherence();
@ -354,7 +314,7 @@ final class ConpherenceDurableColumnView extends AphrontTagView {
phutil_tag(
'div',
array(
'class' => 'conpherence-durable-column-header',
'class' => 'conpherence-durable-column-header-inner',
),
array(
javelin_tag(
@ -401,7 +361,7 @@ final class ConpherenceDurableColumnView extends AphrontTagView {
}
$actions[] = array(
'name' => pht('Hide Column'),
'name' => pht('Hide Window'),
'disabled' => false,
'href' => '#',
'icon' => 'fa-times',

View file

@ -182,39 +182,3 @@
margin: 0 0 16px;
}
}
/* Make Dashboards with Durable reasonably display on homepage narrow widths */
@media (max-width: 1300px) {
.device-desktop.with-durable-column .dashboard-view
.aphront-multi-column-inner {
display: block;
width: auto;
}
.device-desktop.with-durable-column .dashboard-view
.aphront-multi-column-column-outer {
display: block;
border: none;
}
.device-desktop.with-durable-column .dashboard-view
.aphront-multi-column-column.mlr {
margin: 0;
}
.device-desktop.with-durable-column .dashboard-view
.aphront-multi-column-fluid .aphront-multi-column-2-up
.aphront-multi-column-column-outer.half {
width: auto;
margin: 0 0 16px;
}
.device-desktop.with-durable-column .dashboard-view
.aphront-multi-column-fluid .aphront-multi-column-2-up
.aphront-multi-column-column-outer.thirds {
width: auto;
margin: 0 0 16px;
}
.device-desktop.with-durable-column .dashboard-view
.aphront-multi-column-fluid .aphront-multi-column-2-up
.aphront-multi-column-column-outer.third {
width: auto;
margin: 0 0 16px;
}
}

View file

@ -2,63 +2,22 @@
* @provides conpherence-durable-column-view
*/
.with-durable-column .phabricator-standard-page-body {
margin-right: 300px;
}
.with-durable-margin .phabricator-standard-page-body {
margin-right: 312px;
}
.with-durable-column .phabricator-main-menu {
padding-right: 304px;
}
.with-durable-margin .phabricator-main-menu {
padding-right: 316px;
}
.with-durable-column
.phabricator-global-upload-instructions {
font-size: 28px;
width: 50%;
}
.global-upload-mask {
pointer-events: none;
}
.with-durable-column .global-upload-mask {
right: 300px;
}
.with-durable-margin .global-upload-mask {
right: 312px;
}
.conpherence-durable-column {
position: fixed;
top: 0;
bottom: 0;
right: 0;
right: 12px;
width: 300px;
height: 380px;
background: #fff;
box-shadow: 0px 1px 8px rgba(55,55,55, .3);
}
.with-durable-margin .conpherence-durable-column {
border-right: 12px solid {$lightgreybackground};
}
.conpherence-durable-column .loading-mask {
position: absolute;
top: 90px;
bottom: 0;
right: 1px;
width: 298px;
background: #fff;
.device .conpherence-durable-column {
display: none;
opacity: .6;
z-index: 2;
}
.device-desktop .conpherence-durable-column.loading .loading-mask {
@ -75,60 +34,73 @@
padding-right: 4px;
width: 36px;
}
.conpherence-durable-column-header
.phabricator-application-menu .phui-list-item-view.core-menu-item {
display: block;
.conpherence-durable-column-header .phabricator-application-menu
.phui-list-item-view.core-menu-item {
display: block;
}
.conpherence-durable-column-header
.phabricator-application-menu .phui-list-item-name {
display: none;
.conpherence-durable-column-header .phabricator-application-menu
.phui-list-item-name {
display: none;
}
.conpherence-durable-column-header
.phabricator-application-menu .phui-list-item-view {
float: left;
position: relative;
width: 36px;
height: 36px;
margin-top: 4px;
.conpherence-durable-column-header .phabricator-application-menu
.phui-list-item-view {
float: left;
position: relative;
width: 30px;
height: 30px;
margin-top: 2px;
}
.conpherence-durable-column-header
.phabricator-application-menu .phui-list-item-href {
background: transparent;
border: none;
padding: 0;
.conpherence-durable-column-header .phabricator-application-menu
.phui-list-item-href {
background: transparent;
border: none;
padding: 0;
}
.conpherence-durable-column-header
.phabricator-dark-menu .phui-list-item-type-link {
background: transparent;
}
.conpherence-durable-column-header
.phabricator-application-menu
.phui-list-item-view.core-menu-item {
display: block;
.conpherence-durable-column-header .phabricator-application-menu
.phui-list-item-view.core-menu-item {
display: block;
}
.conpherence-durable-column-header {
border-left: 1px solid rgba({$alphablack},.1);
border-right: 1px solid rgba({$alphablack},.1);
border-top-right-radius: 3px;
border-top-left-radius: 3px;
background-color: #525867;
}
.conpherence-durable-column-header
.phabricator-main-menu-dropdown.phui-list-sidenav {
top: 30px;
}
.conpherence-durable-column-header-text {
float: left;
padding: 13px 0 12px 12px;
font-size: 15px;
color: {$hoverwhite};
padding: 8px 0 8px 10px;
color: #fff;
width: 230px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
text-shadow: 1px 1px 0 rgba(0,0,0,.6);
}
.conpherence-durable-column-header .phabricator-application-menu
.phui-list-item-icon.phui-font-fa {
font-size: 14px;
margin: 8px 10px;
}
.conpherence-durable-column-header-text .phui-icon-view {
color: {$hoverwhite};
color: #fff;
text-shadow: 1px 1px 0 rgba(0,0,0,.6);
}
.conpherence-durable-column-icon-bar {
height: 38px;
height: 32px;
padding: 4px;
background-color: {$lightgreybackground};
}
@ -136,23 +108,11 @@
.conpherence-durable-column-icon-bar .conpherence-durable-column-thread-icon {
float: left;
display: block;
height: 34px;
width: 34px;
height: 28px;
width: 28px;
border: 2px solid transparent;
border-radius: 3px;
margin: 0 4px 0 0;
}
.conpherence-durable-column-icon-bar .conpherence-durable-column-search-button {
margin: 4px 0px 0px 0px;
}
.conpherence-durable-column-icon-bar .phui-button-bar {
}
.conpherence-durable-column-icon-bar .phui-button-bar a.button.has-icon {
height: 21px;
}
.conpherence-durable-column-icon-bar .phui-button-bar .button .phui-icon-view {
top: 8px;
margin: 0 2px 0 0;
}
.conpherence-durable-column-icon-bar
@ -164,30 +124,25 @@
.conpherence-durable-column-thread-icon span {
position: relative;
display: block;
width: 30px;
height: 30px;
width: 24px;
height: 24px;
top: 2px;
left: 2px;
background-size: 30px 30px;
background-size: 24px 24px;
}
.conpherence-durable-column-body {
position: absolute;
top: 44px;
top: 34px;
bottom: 0;
right: 0;
left: 0;
border-left: 1px solid {$lightblueborder};
}
.with-durable-margin .conpherence-durable-column-body {
border-right: 1px solid {$lightblueborder};
}
.conpherence-durable-column-main {
position: absolute;
top: 46px;
bottom: 134px;
top: 40px;
bottom: 36px;
left: 0;
right: 0;
overflow-x: hidden;
@ -218,10 +173,9 @@
min-height: 0;
}
.conpherence-durable-column-transactions
.conpherence-transaction-view
.conpherence-durable-column-transactions .conpherence-transaction-view
.conpherence-message {
word-wrap: break-word;
word-wrap: break-word;
}
.conpherence-durable-column-transactions .conpherence-transaction-detail {
@ -230,9 +184,9 @@
}
.conpherence-durable-column-transactions .conpherence-transaction-detail
.conpherence-transaction-header {
background: none;
padding: 0 0 2px 0;
.conpherence-transaction-header {
background: none;
padding: 0 0 2px 0;
}
.conpherence-durable-column-transactions
@ -295,42 +249,23 @@ img {
position: absolute;
left: 0;
right: 0;
bottom: 34px;
height: 100px;
bottom: 0;
height: 36px;
margin: 0;
border-width: 1px 0;
border-width: 1px 0 0 0;
border-style: solid;
border-top-color: {$thinblueborder};
border-bottom-color: {$thinblueborder};
padding: 8px 12px;
padding: 8px;
width: 100%;
resize: none;
}
.conpherence-durable-column-textarea:focus {
outline: 0;
border-top-color: {$sky};
border-bottom-color: {$sky};
border-top-color: {$lightblueborder};
box-shadow: none;
}
.conpherence-durable-column-footer {
position: absolute;
height: 26px;
padding: 4px 8px 4px 12px;
left: 0;
right: 0;
bottom: 0;
background-color: {$lightgreybackground};
}
.conpherence-durable-column-footer button {
float: right;
}
.conpherence-durable-column-status {
vertical-align: middle;
line-height: 24px;
font-size: {$smallerfontsize};
color: {$lightbluetext};
display: none;
}

View file

@ -22,14 +22,6 @@
background-color: #fff;
}
.device-desktop.with-durable-column .phui-workboard-view-shadow {
right: 300px;
}
.device-desktop.with-durable-margin .phui-workboard-view-shadow {
right: 312px;
}
.phui-workboard-view-shadow::-webkit-scrollbar {
height: 8px;
width: 8px;

View file

@ -31,10 +31,6 @@ JX.behavior('durable-column', function(config, statics) {
var margin = JX.Scrollbar.getScrollbarControlMargin();
var columnWidth = (300 + margin);
// This is the smallest window size where we'll enable the column.
var minimumViewportWidth = (920 - margin);
var quick = JX.$('phabricator-standard-page-body');
function _getColumnNode() {
@ -46,17 +42,8 @@ JX.behavior('durable-column', function(config, statics) {
return JX.DOM.find(column, 'div', 'conpherence-durable-column-main');
}
function _isViewportWideEnoughForColumn() {
var viewport = JX.Vector.getViewport();
if (viewport.x < minimumViewportWidth) {
return false;
} else {
return true;
}
}
function _updateColumnVisibility() {
var new_value = (userVisible && _isViewportWideEnoughForColumn());
var new_value = (userVisible);
if (new_value !== show) {
show = new_value;
_drawColumn(show);
@ -77,10 +64,6 @@ JX.behavior('durable-column', function(config, statics) {
document.body,
'with-durable-column',
visible);
JX.DOM.alterClass(
document.body,
'with-durable-margin',
visible && !!margin);
var column = _getColumnNode();
if (visible) {
@ -91,16 +74,6 @@ JX.behavior('durable-column', function(config, statics) {
}
JX.Quicksand.setFrame(visible ? quick : null);
// When we activate the column, adjust the tablet breakpoint so that we
// convert the left side of the screen to tablet mode on narrow displays.
var breakpoint;
if (visible) {
breakpoint = minimumViewportWidth + columnWidth;
} else {
breakpoint = minimumViewportWidth;
}
JX.Device.setTabletBreakpoint(breakpoint);
JX.Stratcom.invoke('resize');
}