From 9b865f18e845c81d999b5aa2b9c25a4a02b838f1 Mon Sep 17 00:00:00 2001 From: Bob Trahan Date: Wed, 10 Dec 2014 12:12:38 -0800 Subject: [PATCH] Transactions - make "show older" area bigger and include keyboard command Summary: Fixes T6683. Test Plan: clicked the yellow box and it worked! pressed '~' and it worked! Reviewers: epriestley, chad Reviewed By: epriestley Subscribers: Korvin, epriestley Maniphest Tasks: T6683 Differential Revision: https://secure.phabricator.com/D10932 --- resources/celerity/map.php | 24 ++--- webroot/rsrc/css/phui/phui-timeline-view.css | 1 + .../behavior-show-older-transactions.js | 87 ++++++++++--------- 3 files changed, 60 insertions(+), 52 deletions(-) diff --git a/resources/celerity/map.php b/resources/celerity/map.php index c1f1e58d7f..dd2b83ea74 100644 --- a/resources/celerity/map.php +++ b/resources/celerity/map.php @@ -7,8 +7,8 @@ */ return array( 'names' => array( - 'core.pkg.css' => '78b8bd03', - 'core.pkg.js' => 'ef8f73ee', + 'core.pkg.css' => 'a157f664', + 'core.pkg.js' => '7c53868c', 'darkconsole.pkg.js' => 'df001cab', 'differential.pkg.css' => '8af45893', 'differential.pkg.js' => '42c10e78', @@ -142,7 +142,7 @@ return array( 'rsrc/css/phui/phui-status.css' => '888cedb8', 'rsrc/css/phui/phui-tag-view.css' => '6b74282b', 'rsrc/css/phui/phui-text.css' => 'cf019f54', - 'rsrc/css/phui/phui-timeline-view.css' => '26bb3fd4', + 'rsrc/css/phui/phui-timeline-view.css' => '7556c113', 'rsrc/css/phui/phui-workboard-view.css' => '2bf82d00', 'rsrc/css/phui/phui-workpanel-view.css' => '198c7e6c', 'rsrc/css/sprite-apps-large.css' => '20ec0cc0', @@ -420,7 +420,7 @@ return array( 'rsrc/js/application/repository/repository-crossreference.js' => 'f9539603', 'rsrc/js/application/search/behavior-reorder-queries.js' => 'e9581f08', 'rsrc/js/application/slowvote/behavior-slowvote-embed.js' => 'd6f54db0', - 'rsrc/js/application/transactions/behavior-show-older-transactions.js' => '83458cbb', + 'rsrc/js/application/transactions/behavior-show-older-transactions.js' => '77fcaaee', 'rsrc/js/application/transactions/behavior-transaction-comment-form.js' => '9f7309fb', 'rsrc/js/application/transactions/behavior-transaction-list.js' => '13c739ea', 'rsrc/js/application/uiexample/JavelinViewExample.js' => 'd4a14807', @@ -623,7 +623,7 @@ return array( 'javelin-behavior-phabricator-remarkup-assist' => 'e32d14ab', 'javelin-behavior-phabricator-reveal-content' => '60821bc7', 'javelin-behavior-phabricator-search-typeahead' => '724b1247', - 'javelin-behavior-phabricator-show-older-transactions' => '83458cbb', + 'javelin-behavior-phabricator-show-older-transactions' => '77fcaaee', 'javelin-behavior-phabricator-tooltips' => '3ee3408b', 'javelin-behavior-phabricator-transaction-comment-form' => '9f7309fb', 'javelin-behavior-phabricator-transaction-list' => '13c739ea', @@ -791,7 +791,7 @@ return array( 'phui-status-list-view-css' => '888cedb8', 'phui-tag-view-css' => '6b74282b', 'phui-text-css' => 'cf019f54', - 'phui-timeline-view-css' => '26bb3fd4', + 'phui-timeline-view-css' => '7556c113', 'phui-workboard-view-css' => '2bf82d00', 'phui-workpanel-view-css' => '198c7e6c', 'phuix-action-list-view' => 'b5c256b8', @@ -1308,6 +1308,12 @@ return array( 'javelin-install', 'javelin-util', ), + '77fcaaee' => array( + 'javelin-behavior', + 'javelin-stratcom', + 'javelin-dom', + 'phabricator-busy', + ), '7814b593' => array( 'javelin-request', 'javelin-behavior', @@ -1368,12 +1374,6 @@ return array( '82ce2142' => array( 'aphront-typeahead-control-css', ), - '83458cbb' => array( - 'javelin-behavior', - 'javelin-stratcom', - 'javelin-dom', - 'phabricator-busy', - ), '84845b5b' => array( 'javelin-behavior', 'javelin-dom', diff --git a/webroot/rsrc/css/phui/phui-timeline-view.css b/webroot/rsrc/css/phui/phui-timeline-view.css index 5953d22b7c..8a047a410d 100644 --- a/webroot/rsrc/css/phui/phui-timeline-view.css +++ b/webroot/rsrc/css/phui/phui-timeline-view.css @@ -318,6 +318,7 @@ text-align: center; padding: 12px; color: {$darkgreytext}; + cursor: pointer; } .device-phone .phui-timeline-older-transactions-are-hidden { diff --git a/webroot/rsrc/js/application/transactions/behavior-show-older-transactions.js b/webroot/rsrc/js/application/transactions/behavior-show-older-transactions.js index 294d84337d..10f33f5050 100644 --- a/webroot/rsrc/js/application/transactions/behavior-show-older-transactions.js +++ b/webroot/rsrc/js/application/transactions/behavior-show-older-transactions.js @@ -8,8 +8,6 @@ JX.behavior('phabricator-show-older-transactions', function(config) { - var loading = false; - function get_hash() { return window.location.hash.replace(/^#/, ''); } @@ -30,39 +28,8 @@ JX.behavior('phabricator-show-older-transactions', function(config) { function check_hash() { if (hash_is_hidden()) { - var showOlderBlock = null; - try { - showOlderBlock = JX.DOM.find( - JX.$(config.timelineID), - 'div', - 'show-older-block'); - } catch (not_found_exception) { - // probably a garbage hash and we loaded everything looking - // for it; just abort - if (loading) { - loading = false; - JX.Busy.done(); - } - return; - } - var showOlderLink = JX.DOM.find( - showOlderBlock, - 'a', - 'show-older-link'); - if (!loading) { - loading = true; - JX.Busy.start(); - } - fetch_older_workflow( - showOlderLink.href, - load_hidden_hash, - showOlderBlock) - .start(); + load_older(load_hidden_hash_callback); } else { - if (loading) { - loading = false; - JX.Busy.done(); - } try { var target = JX.$(get_hash()); JX.DOM.scrollTo(target); @@ -72,15 +39,46 @@ JX.behavior('phabricator-show-older-transactions', function(config) { } } + function load_older(callback) { + var showOlderBlock = null; + try { + showOlderBlock = JX.DOM.find( + JX.$(config.timelineID), + 'div', + 'show-older-block'); + } catch (not_found_exception) { + // we loaded everything...! + return; + } + + var showOlderLink = JX.DOM.find( + showOlderBlock, + 'a', + 'show-older-link'); + var workflow = fetch_older_workflow( + showOlderLink.href, + callback, + showOlderBlock); + var routable = workflow.getRoutable() + .setPriority(2000) + .setType('workflow'); + JX.Router.getInstance().queue(routable); + } + var show_older = function(swap, r) { JX.DOM.replace(swap, JX.$H(r.timeline).getFragment()); }; - var load_hidden_hash = function(swap, r) { + var load_hidden_hash_callback = function(swap, r) { show_older(swap, r); check_hash(); }; + var load_all_older_callback = function(swap, r) { + show_older(swap, r); + load_older(load_all_older_callback); + }; + var fetch_older_workflow = function(href, callback, swap) { return new JX.Workflow(href, config.renderData) .setHandler(JX.bind(null, callback, swap)); @@ -88,17 +86,26 @@ JX.behavior('phabricator-show-older-transactions', function(config) { JX.Stratcom.listen( 'click', - ['show-older-link'], + ['show-older-block'], function(e) { e.kill(); - fetch_older_workflow( - e.getNode('tag:a').href, + var workflow = fetch_older_workflow( + JX.DOM.find( + e.getNode('show-older-block'), + 'a', + 'show-older-link').href, show_older, - e.getNode('show-older-block')) - .start(); + e.getNode('show-older-block')); + var routable = workflow.getRoutable() + .setPriority(2000) + .setType('workflow'); + JX.Router.getInstance().queue(routable); }); JX.Stratcom.listen('hashchange', null, check_hash); check_hash(); + new JX.KeyboardShortcut(['~'], 'Show all older changes in the timeline.') + .setHandler(JX.bind(null, load_older, load_all_older_callback)) + .register(); });