revi-archive/phorge-phorge
1
0
Fork 0
mirror of https://we.phorge.it/source/phorge.git synced 2024-12-28 16:30:59 +01:00
Code Issues Releases Wiki Activity

Improve column device behaviors

Browse source 
Summary:
Fixes T7062. When the column is open, we only want to consider the screen width which is avilable for content when computing responsive breakpoints.

Specificially, if you have a 1000px wide browser window (normally "desktop") but the column is open (300px) so you only have 700px free for content (normally "tablet"), we should drop to the tablet breakpoint. This lets you have a narrow column of "tablet" content next to the chat column, instead of a really squished column of "desktop" contnet.

This also means the chat column can't directly use JX.Device to hide itself.

Test Plan: Resized screen with column open, saw content go from Desktop + Column -> Tablet + Column -> Tablet -> Mobile.

Reviewers: btrahan, chad

Reviewed By: chad

Subscribers: epriestley

Maniphest Tasks: T7062

Differential Revision: https://secure.phabricator.com/D12189
This commit is contained in:
epriestley 2015-03-28 06:54:23 -07:00
parent 21454842bf
commit 8c1a1312e8
4 changed files with 74 additions and 66 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

48
resources/celerity/map.php
View file

@ -8,7 +8,7 @@
return array(
'names' => array(
'core.pkg.css' => '2ff29d1d',
'core.pkg.js' => '75599122',
'core.pkg.js' => '2102d953',
'darkconsole.pkg.js' => '8ab24e01',
'differential.pkg.css' => '571b1cc1',
'differential.pkg.js' => 'c0506961',
@ -44,7 +44,7 @@ return array(
'rsrc/css/application/config/config-welcome.css' => '6abd79be',
'rsrc/css/application/config/setup-issue.css' => '22270af2',
'rsrc/css/application/config/unhandled-exception.css' => '37d4f9a2',
'rsrc/css/application/conpherence/durable-column.css' => 'e11b2fbc',
'rsrc/css/application/conpherence/durable-column.css' => 'e2011d85',
'rsrc/css/application/conpherence/menu.css' => '9b37a261',
'rsrc/css/application/conpherence/message-pane.css' => '69ff6e0f',
'rsrc/css/application/conpherence/notification.css' => '04a6e10a',
@ -354,7 +354,7 @@ return array(
'rsrc/js/application/auth/behavior-persona-login.js' => '9414ff18',
'rsrc/js/application/config/behavior-reorder-fields.js' => '14a827de',
'rsrc/js/application/conpherence/ConpherenceThreadManager.js' => 'bb928342',
'rsrc/js/application/conpherence/behavior-durable-column.js' => '70787038',
'rsrc/js/application/conpherence/behavior-durable-column.js' => 'e5182926',
'rsrc/js/application/conpherence/behavior-menu.js' => 'de5579b4',
'rsrc/js/application/conpherence/behavior-pontificate.js' => '21ba5861',
'rsrc/js/application/conpherence/behavior-quicksand-blacklist.js' => '7927a7d3',
@ -457,7 +457,7 @@ return array(
'rsrc/js/core/behavior-choose-control.js' => '6153c708',
'rsrc/js/core/behavior-crop.js' => 'fa0f4fc2',
'rsrc/js/core/behavior-dark-console.js' => '08883e8b',
'rsrc/js/core/behavior-device.js' => '03d6ed07',
'rsrc/js/core/behavior-device.js' => 'a205cf28',
'rsrc/js/core/behavior-drag-and-drop-textarea.js' => '6d49590e',
'rsrc/js/core/behavior-error-log.js' => '6882e80a',
'rsrc/js/core/behavior-fancy-datepicker.js' => 'c51ae228',
@ -514,7 +514,7 @@ return array(
'changeset-view-manager' => '58562350',
'config-options-css' => '7fedf08b',
'config-welcome-css' => '6abd79be',
'conpherence-durable-column-view' => 'e11b2fbc',
'conpherence-durable-column-view' => 'e2011d85',
'conpherence-menu-css' => '9b37a261',
'conpherence-message-pane-css' => '69ff6e0f',
'conpherence-notification-css' => '04a6e10a',
@ -566,7 +566,7 @@ return array(
'javelin-behavior-dashboard-move-panels' => '82439934',
'javelin-behavior-dashboard-query-panel-select' => '453c5375',
'javelin-behavior-dashboard-tab-panel' => 'd4eecc63',
'javelin-behavior-device' => '03d6ed07',
'javelin-behavior-device' => 'a205cf28',
'javelin-behavior-differential-add-reviewers-and-ccs' => 'e10f8e18',
'javelin-behavior-differential-comment-jump' => '4fdb476d',
'javelin-behavior-differential-diff-radios' => 'e1ff79b1',
@ -584,7 +584,7 @@ return array(
'javelin-behavior-diffusion-locate-file' => '6d3e1947',
'javelin-behavior-diffusion-pull-lastmodified' => '2b228192',
'javelin-behavior-doorkeeper-tag' => 'e5822781',
'javelin-behavior-durable-column' => '70787038',
'javelin-behavior-durable-column' => 'e5182926',
'javelin-behavior-error-log' => '6882e80a',
'javelin-behavior-fancy-datepicker' => 'c51ae228',
'javelin-behavior-global-drag-and-drop' => 'bbdf75ca',
@ -847,13 +847,6 @@ return array(
'029a133d' => array(
'aphront-dialog-view-css',
),
'03d6ed07' => array(
'javelin-behavior',
'javelin-stratcom',
'javelin-dom',
'javelin-vector',
'javelin-install',
),
'05270951' => array(
'javelin-util',
'javelin-magical-init',
@ -1334,16 +1327,6 @@ return array(
'6f7a9da8' => array(
'javelin-install',
),
70787038 => array(
'javelin-behavior',
'javelin-dom',
'javelin-stratcom',
'javelin-behavior-device',
'javelin-scrollbar',
'javelin-quicksand',
'phabricator-keyboard-shortcut',
'conpherence-thread-manager',
),
'70baed2f' => array(
'javelin-install',
'javelin-dom',
@ -1618,6 +1601,13 @@ return array(
'javelin-vector',
'javelin-magical-init',
),
'a205cf28' => array(
'javelin-behavior',
'javelin-stratcom',
'javelin-dom',
'javelin-vector',
'javelin-install',
),
'a80d0378' => array(
'javelin-behavior',
'javelin-stratcom',
@ -1864,6 +1854,16 @@ return array(
'javelin-behavior',
'javelin-dom',
),
'e5182926' => array(
'javelin-behavior',
'javelin-dom',
'javelin-stratcom',
'javelin-behavior-device',
'javelin-scrollbar',
'javelin-quicksand',
'phabricator-keyboard-shortcut',
'conpherence-thread-manager',
),
'e566f52c' => array(
'javelin-behavior',
'javelin-stratcom',

4
webroot/rsrc/css/application/conpherence/durable-column.css
View file

@ -29,10 +29,6 @@
background: #fff;
}
.device .conpherence-durable-column {
display: none;
}
.conpherence-durable-column .loading-mask {
position: absolute;
top: 90px;

74
webroot/rsrc/js/application/conpherence/behavior-durable-column.js
View file

@ -28,6 +28,10 @@ JX.behavior('durable-column', function(config, statics) {
var loadThreadID = null;
var scrollbar = null;
var columnWidth = 300;
// This is the smallest window size where we'll enable the column.
var minimumViewportWidth = 768;
var quick = JX.$('phabricator-standard-page-body');
function _getColumnNode() {
@ -39,14 +43,33 @@ JX.behavior('durable-column', function(config, statics) {
return JX.DOM.find(column, 'div', 'conpherence-durable-column-main');
}
function _autocloseColumn() {
var viewport = JX.Vector.getViewport();
if (viewport.x < minimumViewportWidth) {
if (show) {
_toggleColumn(false);
resizeClose = true;
}
return true;
} else {
if (resizeClose) {
resizeClose = false;
if (!show) {
_toggleColumn(false);
}
}
}
return false;
}
function _toggleColumn(explicit) {
if (explicit) {
var device = JX.Device.getDevice();
// don't allow users to invoke the column from devices
if (device != 'desktop') {
if (_autocloseColumn()) {
return;
}
}
show = !show;
JX.DOM.alterClass(document.body, 'with-durable-column', show);
var column = _getColumnNode();
@ -59,6 +82,14 @@ JX.behavior('durable-column', function(config, statics) {
JX.Stratcom.invoke('resize');
JX.Quicksand.setFrame(show ? 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 = JX.Device.getTabletBreakpoint();
JX.Device.setTabletBreakpoint(
show ? (breakpoint + columnWidth) : (breakpoint - columnWidth));
JX.log(JX.Device.getTabletBreakpoint());
// If this was an explicit toggle action from the user, save their
// preference.
if (explicit) {
@ -188,31 +219,7 @@ JX.behavior('durable-column', function(config, statics) {
});
var resizeClose = false;
JX.Stratcom.listen(
'phabricator-device-change',
null,
function() {
var device = JX.Device.getDevice();
switch (device) {
case 'phone':
case 'tablet':
if (show === true) {
_toggleColumn(false);
resizeClose = true;
}
break;
case 'desktop':
if (resizeClose) {
resizeClose = false;
if (show === false) {
_toggleColumn(false);
}
}
break;
default:
break;
}
});
JX.Stratcom.listen('resize', null, _autocloseColumn);
function _getColumnBodyNode() {
var column = JX.$('conpherence-durable-column');
@ -339,15 +346,8 @@ JX.behavior('durable-column', function(config, statics) {
});
if (config.visible) {
var device = JX.Device.getDevice();
if (device == 'desktop') {
_toggleColumn(false);
} else {
// pretend we closed due to resize so if we do resize later things work
// correctly
resizeClose = true;
JX.DOM.hide(_getColumnNode());
}
_toggleColumn(false);
_autocloseColumn();
}
});

14
webroot/rsrc/js/core/behavior-device.js
View file

@ -10,12 +10,24 @@
JX.install('Device', {
statics : {
_device : null,
_tabletBreakpoint: 768,
setTabletBreakpoint: function(width) {
var self = JX.Device;
self._tabletBreakpoint = width;
self.recalculate();
},
getTabletBreakpoint: function() {
return JX.Device._tabletBreakpoint;
},
recalculate: function() {
var v = JX.Vector.getViewport();
var self = JX.Device;
var device = 'desktop';
if (v.x <= 768) {
if (v.x <= self._tabletBreakpoint) {
device = 'tablet';
}
if (v.x <= 480) {