Make workboard columns fixed-height and internally scrollable

+13 -13

resources/celerity/map.php

··· 8 8 return array( 9 9 'names' => array( 10 10 'core.pkg.css' => 'b4a7e275', 11 - 'core.pkg.js' => '808ae845', 11 + 'core.pkg.js' => '771b0e84', 12 12 'darkconsole.pkg.js' => 'e7393ebb', 13 13 'differential.pkg.css' => '2de124c9', 14 14 'differential.pkg.js' => 'd0cd0df6', ··· 154 154 'rsrc/css/phui/phui-tag-view.css' => '9d5d4400', 155 155 'rsrc/css/phui/phui-timeline-view.css' => '2efceff8', 156 156 'rsrc/css/phui/phui-two-column-view.css' => 'c75bfc5b', 157 - 'rsrc/css/phui/workboards/phui-workboard.css' => '2a04b1a8', 157 + 'rsrc/css/phui/workboards/phui-workboard.css' => 'f526057c', 158 158 'rsrc/css/phui/workboards/phui-workcard.css' => 'a869098a', 159 159 'rsrc/css/phui/workboards/phui-workpanel.css' => 'e1bd8d04', 160 160 'rsrc/css/sprite-login.css' => '60e8560e', ··· 447 447 'rsrc/js/application/uiexample/notification-example.js' => '8ce821c5', 448 448 'rsrc/js/core/Busy.js' => '59a7976a', 449 449 'rsrc/js/core/DragAndDropFileUpload.js' => '81f182b5', 450 - 'rsrc/js/core/DraggableList.js' => '8905523d', 450 + 'rsrc/js/core/DraggableList.js' => '8199fb41', 451 451 'rsrc/js/core/FileUpload.js' => '680ea2c8', 452 452 'rsrc/js/core/Hovercard.js' => '1bd28176', 453 453 'rsrc/js/core/KeyboardShortcut.js' => '1ae869f2', ··· 742 742 'phabricator-countdown-css' => 'e7544472', 743 743 'phabricator-dashboard-css' => 'eb458607', 744 744 'phabricator-drag-and-drop-file-upload' => '81f182b5', 745 - 'phabricator-draggable-list' => '8905523d', 745 + 'phabricator-draggable-list' => '8199fb41', 746 746 'phabricator-fatal-config-template-css' => '8e6c6fcd', 747 747 'phabricator-feed-css' => 'ecd4ec57', 748 748 'phabricator-file-upload' => '680ea2c8', ··· 831 831 'phui-theme-css' => 'ab7b848c', 832 832 'phui-timeline-view-css' => '2efceff8', 833 833 'phui-two-column-view-css' => 'c75bfc5b', 834 - 'phui-workboard-view-css' => '2a04b1a8', 834 + 'phui-workboard-view-css' => 'f526057c', 835 835 'phui-workcard-view-css' => 'a869098a', 836 836 'phui-workpanel-view-css' => 'e1bd8d04', 837 837 'phuix-action-list-view' => 'b5c256b8', ··· 1451 1451 'javelin-vector', 1452 1452 'javelin-stratcom', 1453 1453 ), 1454 + '8199fb41' => array( 1455 + 'javelin-install', 1456 + 'javelin-dom', 1457 + 'javelin-stratcom', 1458 + 'javelin-util', 1459 + 'javelin-vector', 1460 + 'javelin-magical-init', 1461 + ), 1454 1462 '81f182b5' => array( 1455 1463 'javelin-install', 1456 1464 'javelin-util', ··· 1495 1503 'javelin-request', 1496 1504 'javelin-stratcom', 1497 1505 'javelin-dom', 1498 - ), 1499 - '8905523d' => array( 1500 - 'javelin-install', 1501 - 'javelin-dom', 1502 - 'javelin-stratcom', 1503 - 'javelin-util', 1504 - 'javelin-vector', 1505 - 'javelin-magical-init', 1506 1506 ), 1507 1507 '8a41885b' => array( 1508 1508 'javelin-install',

+6 -5

src/view/phui/PHUIWorkboardView.php

··· 25 25 $view->addColumn($panel); 26 26 } 27 27 28 - $board = phutil_tag( 28 + $board = javelin_tag( 29 29 'div', 30 - array( 31 - 'class' => 'phui-workboard-view-shadow', 32 - ), 33 - $view); 30 + array( 31 + 'class' => 'phui-workboard-view-shadow', 32 + 'sigil' => 'lock-scroll-while-dragging', 33 + ), 34 + $view); 34 35 35 36 return $board; 36 37 }

+7

webroot/rsrc/css/phui/workboards/phui-workboard.css

··· 12 12 13 13 .device-desktop .phui-workboard-view-shadow { 14 14 overflow-x: auto; 15 + overflow-y: hidden; 15 16 position: absolute; 16 17 top: 79px; 17 18 bottom: 0; ··· 70 71 .device .project-board-wrapper { 71 72 margin: 16px; 72 73 } 74 + 75 + .device-desktop .phui-workpanel-body { 76 + max-height: calc(100vh - 170px); 77 + overflow-y: scroll; 78 + overflow-x: hidden; 79 + }

+54 -17

webroot/rsrc/js/core/DraggableList.js

··· 310 310 return target_list; 311 311 }, 312 312 313 + _getTarget: function() { 314 + return this._target; 315 + }, 316 + 313 317 _setTarget : function(cur_target) { 314 318 var ghost = this.getGhostNode(); 315 319 var target = this._target; ··· 433 437 this._cursorOrigin.y - (this._cursorScroll.y - s.y)); 434 438 } 435 439 436 - this._updateAutoscroll(this._cursorPosition); 437 - 438 440 var p = JX.$V(this._cursorPosition.x, this._cursorPosition.y); 439 441 440 442 var group = this._group; ··· 459 461 } 460 462 } 461 463 464 + this._updateAutoscroll(this._cursorPosition); 465 + 462 466 var f = JX.$V(this._frame); 463 467 p.x -= f.x; 464 468 p.y -= f.y; ··· 475 479 }, 476 480 477 481 _updateAutoscroll: function(p) { 478 - var container = this._dragging.parentNode; 482 + var container = this._getScrollAnchor().parentNode; 479 483 var autoscroll = {}; 480 484 481 485 var outer = this.getOuterContainer(); ··· 595 599 this.invoke('didEndDrag', dragging); 596 600 }, 597 601 602 + _getScrollAnchor: function() { 603 + // If you drag an item from column "A" into column "B", then move the 604 + // mouse to the top or bottom of the screen, we need to scroll the target 605 + // column (column "B"), not the original column. 606 + 607 + var group = this._group; 608 + for (var ii = 0; ii < group.length; ii++) { 609 + var target = group[ii]._getTarget(); 610 + if (target) { 611 + return group[ii]._ghostNode; 612 + } 613 + } 614 + 615 + return this._dragging; 616 + }, 617 + 598 618 _onautoscroll: function() { 599 619 var u = this._autoscroll.up; 600 620 var d = this._autoscroll.down; ··· 613 633 614 634 var amount = 12 * (delta / 10); 615 635 636 + var anchor = this._getScrollAnchor(); 637 + 616 638 if (u && (u != d)) { 617 - this._tryScroll(this._dragging, u, 'scrollTop', amount); 639 + this._tryScroll(anchor, u, 'scrollTop', amount); 618 640 } 619 641 620 642 if (d && (d != u)) { 621 - this._tryScroll(this._dragging, d, 'scrollTop', -amount); 643 + this._tryScroll(anchor, d, 'scrollTop', -amount); 622 644 } 623 645 624 646 if (l && (l != r)) { 625 - this._tryScroll(this._dragging, l, 'scrollLeft', amount); 647 + this._tryScroll(anchor, l, 'scrollLeft', amount); 626 648 } 627 649 628 650 if (r && (r != l)) { 629 - this._tryScroll(this._dragging, r, 'scrollLeft', -amount); 651 + this._tryScroll(anchor, r, 'scrollLeft', -amount); 630 652 } 631 653 }, 632 654 ··· 639 661 640 662 var container = from.parentNode; 641 663 while (container) { 642 - // Read the current scroll value. 643 - value = container[property]; 664 + 665 + // In Safari, we'll eventually reach `window.document`, which is not 666 + // sufficently node-like to support sigil tests. 667 + var lock; 668 + if (container === window.document) { 669 + lock = false; 670 + } else { 671 + // Some elements may respond to, e.g., `scrollTop` adjustment, even 672 + // though they are not scrollable. This sigil disables adjustment 673 + // for them. 674 + lock = JX.Stratcom.hasSigil(container, 'lock-scroll-while-dragging'); 675 + } 676 + 677 + if (!lock) { 678 + // Read the current scroll value. 679 + value = container[property]; 644 680 645 - // Try to scroll. 646 - container[property] -= amount; 681 + // Try to scroll. 682 + container[property] -= amount; 647 683 648 - // If we scrolled it, we're all done. 649 - if (container[property] != value) { 650 - break; 651 - } 684 + // If we scrolled it, we're all done. 685 + if (container[property] != value) { 686 + break; 687 + } 652 688 653 - if (container == to) { 654 - break; 689 + if (container == to) { 690 + break; 691 + } 655 692 } 656 693 657 694 container = container.parentNode;

Configure Feed

Configure Feed