From 76404c5fdb6a51f7b04ca3afd1b81239be2d88e7 Mon Sep 17 00:00:00 2001 From: Chad Little Date: Mon, 27 Mar 2017 09:19:12 -0700 Subject: [PATCH] Cleaner fullscreen / preview states for Remarkup bar Summary: General CSS and usability touchup of the Remarkup bar states for fullscreen and preview. Larger fonts, more spacing, some hint of the underlying page. Disable buttons that can't be used in preview mode. Test Plan: Formal test coming with mobile, browsers. This is a kick the tires upload. {F4283448} Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Differential Revision: https://secure.phabricator.com/D17563 --- resources/celerity/map.php | 37 +-- .../control/PhabricatorRemarkupControl.php | 9 - webroot/rsrc/css/core/remarkup.css | 217 ++++++++++++------ webroot/rsrc/css/phui/phui-comment-form.css | 2 +- .../behavior-phabricator-remarkup-assist.js | 5 + 5 files changed, 177 insertions(+), 93 deletions(-) diff --git a/resources/celerity/map.php b/resources/celerity/map.php index 4ca4c327f9..4d9406ac5f 100644 --- a/resources/celerity/map.php +++ b/resources/celerity/map.php @@ -9,8 +9,8 @@ return array( 'names' => array( 'conpherence.pkg.css' => '82aca405', 'conpherence.pkg.js' => '6249a1cf', - 'core.pkg.css' => 'dc689e29', - 'core.pkg.js' => '1fa7c0c5', + 'core.pkg.css' => 'acd257dc', + 'core.pkg.js' => '021685f1', 'darkconsole.pkg.js' => 'e7393ebb', 'differential.pkg.css' => '90b30783', 'differential.pkg.js' => 'ddfeb49b', @@ -108,7 +108,7 @@ return array( 'rsrc/css/application/tokens/tokens.css' => '3d0f239e', 'rsrc/css/application/uiexample/example.css' => '528b19de', 'rsrc/css/core/core.css' => '9f4cb463', - 'rsrc/css/core/remarkup.css' => '2d793c5b', + 'rsrc/css/core/remarkup.css' => '17c0fb37', 'rsrc/css/core/syntax.css' => '769d3498', 'rsrc/css/core/z-index.css' => '5e72c4e0', 'rsrc/css/diviner/diviner-shared.css' => '896f1d43', @@ -136,7 +136,7 @@ return array( 'rsrc/css/phui/phui-button.css' => '14bfba79', 'rsrc/css/phui/phui-chart.css' => '6bf6f78e', 'rsrc/css/phui/phui-cms.css' => '504b4b23', - 'rsrc/css/phui/phui-comment-form.css' => '48fbd65d', + 'rsrc/css/phui/phui-comment-form.css' => '7d903c2d', 'rsrc/css/phui/phui-comment-panel.css' => 'f50152ad', 'rsrc/css/phui/phui-crumbs-view.css' => '6ece3bbb', 'rsrc/css/phui/phui-curtain-view.css' => '947bf1a4', @@ -503,7 +503,7 @@ return array( 'rsrc/js/core/behavior-object-selector.js' => 'e0ec7f2f', 'rsrc/js/core/behavior-oncopy.js' => '2926fff2', 'rsrc/js/core/behavior-phabricator-nav.js' => '08675c6d', - 'rsrc/js/core/behavior-phabricator-remarkup-assist.js' => '0c61d4e3', + 'rsrc/js/core/behavior-phabricator-remarkup-assist.js' => 'a0777ea3', 'rsrc/js/core/behavior-read-only-warning.js' => 'ba158207', 'rsrc/js/core/behavior-refresh-csrf.js' => 'ab2f381b', 'rsrc/js/core/behavior-remarkup-preview.js' => '4b700e9e', @@ -664,7 +664,7 @@ return array( 'javelin-behavior-phabricator-notification-example' => '8ce821c5', 'javelin-behavior-phabricator-object-selector' => 'e0ec7f2f', 'javelin-behavior-phabricator-oncopy' => '2926fff2', - 'javelin-behavior-phabricator-remarkup-assist' => '0c61d4e3', + 'javelin-behavior-phabricator-remarkup-assist' => 'a0777ea3', 'javelin-behavior-phabricator-reveal-content' => '60821bc7', 'javelin-behavior-phabricator-search-typeahead' => '06c32383', 'javelin-behavior-phabricator-show-older-transactions' => '94c65b72', @@ -793,7 +793,7 @@ return array( 'phabricator-object-selector-css' => '85ee8ce6', 'phabricator-phtize' => 'd254d646', 'phabricator-prefab' => '8d40ae75', - 'phabricator-remarkup-css' => '2d793c5b', + 'phabricator-remarkup-css' => '17c0fb37', 'phabricator-search-results-css' => '64ad079a', 'phabricator-shaped-request' => '7cbe244b', 'phabricator-slowvote-css' => 'a94b7230', @@ -836,7 +836,7 @@ return array( 'phui-calendar-month-css' => '8e10e92c', 'phui-chart-css' => '6bf6f78e', 'phui-cms-css' => '504b4b23', - 'phui-comment-form-css' => '48fbd65d', + 'phui-comment-form-css' => '7d903c2d', 'phui-comment-panel-css' => 'f50152ad', 'phui-crumbs-view-css' => '6ece3bbb', 'phui-curtain-view-css' => '947bf1a4', @@ -988,16 +988,6 @@ return array( 'javelin-dom', 'javelin-router', ), - '0c61d4e3' => array( - 'javelin-behavior', - 'javelin-stratcom', - 'javelin-dom', - 'phabricator-phtize', - 'phabricator-textareautils', - 'javelin-workflow', - 'javelin-vector', - 'phuix-autocomplete', - ), '0f764c35' => array( 'javelin-install', 'javelin-util', @@ -1705,6 +1695,17 @@ return array( 'javelin-dom', 'javelin-vector', ), + 'a0777ea3' => array( + 'javelin-behavior', + 'javelin-stratcom', + 'javelin-dom', + 'phabricator-phtize', + 'phabricator-textareautils', + 'javelin-workflow', + 'javelin-vector', + 'phuix-autocomplete', + 'javelin-mask', + ), 'a0b57eb8' => array( 'javelin-behavior', 'javelin-dom', diff --git a/src/view/form/control/PhabricatorRemarkupControl.php b/src/view/form/control/PhabricatorRemarkupControl.php index 35a1bcc8df..52fb44617d 100644 --- a/src/view/form/control/PhabricatorRemarkupControl.php +++ b/src/view/form/control/PhabricatorRemarkupControl.php @@ -172,11 +172,6 @@ final class PhabricatorRemarkupControl extends AphrontFormTextAreaControl { 'align' => 'right', ); - $actions[] = array( - 'spacer' => true, - 'align' => 'right', - ); - $actions['fa-book'] = array( 'tip' => pht('Help'), 'align' => 'right', @@ -200,10 +195,6 @@ final class PhabricatorRemarkupControl extends AphrontFormTextAreaControl { } if ($mode_actions) { - $actions[] = array( - 'spacer' => true, - 'align' => 'right', - ); $actions += $mode_actions; } diff --git a/webroot/rsrc/css/core/remarkup.css b/webroot/rsrc/css/core/remarkup.css index 03479398b3..a986409227 100644 --- a/webroot/rsrc/css/core/remarkup.css +++ b/webroot/rsrc/css/core/remarkup.css @@ -558,9 +558,13 @@ var.remarkup-assist-textarea { .remarkup-assist-button { display: block; - margin-top: 2px; - padding: 4px 5px; + margin-top: 4px; + height: 20px; + padding: 2px 5px 3px; + line-height: 18px; + width: 16px; float: left; + border-radius: 3px; } .remarkup-assist-button:hover .phui-icon-view.phui-font-fa { @@ -617,37 +621,6 @@ var.remarkup-assist-textarea { opacity: 1.0; } -.remarkup-control-fullscreen-mode { - position: fixed; - top: -1px; - bottom: -1px; - left: -1px; - right: -1px; -} - -.remarkup-control-fullscreen-mode textarea.remarkup-assist-textarea { - position: absolute; - top: 32px; - left: 0; - right: 0; - bottom: 0; - /* NOTE: This doesn't work in Firefox, there's a JS behavior to correct it. */ - height: auto; - border-width: 1px 0 0 0; - outline: none; - resize: none; - background: #fff !important; -} - -.remarkup-control-fullscreen-mode textarea.remarkup-assist-textarea:focus { - border-color: none; - box-shadow: none; -} - -.remarkup-control-fullscreen-mode .remarkup-assist-button .fa-arrows-alt { - color: {$sky}; -} - .phabricator-image-macro-hero { margin: auto; max-width: 95%; @@ -673,42 +646,12 @@ var.remarkup-assist-textarea { padding: 0 4px; } -.remarkup-inline-preview { - display: block; - position: relative; - background: #fff; - overflow-y: auto; - box-sizing: border-box; - width: 100%; - border: 1px solid {$sky}; - resize: vertical; - padding: 4px 6px; -} - -.remarkup-control-fullscreen-mode .remarkup-inline-preview { - resize: none; -} - -.remarkup-inline-preview * { - resize: none; -} - -.remarkup-assist-button.preview-active { - background: {$sky}; -} - -.remarkup-assist-button.preview-active .phui-icon-view { - color: #ffffff; -} - -.remarkup-assist-button.preview-active:hover .phui-icon-view { - color: {$lightsky}; -} - .device .remarkup-assist-nodevice { display: none; } +/* - Autocomplete ----------------------------------------------------------- */ + .phuix-autocomplete { position: absolute; width: 300px; @@ -764,6 +707,9 @@ var.remarkup-assist-textarea { color: #000; } + +/* - Pinned ----------------------------------------------------------------- */ + .phui-box.phui-object-box.phui-comment-form-view.remarkup-assist-pinned { position: fixed; background-color: #ffffff; @@ -783,3 +729,144 @@ var.remarkup-assist-textarea { .remarkup-assist-pinned-spacer { position: relative; } + + +/* - Preview ---------------------------------------------------------------- */ + +.remarkup-inline-preview { + display: block; + position: relative; + background: #fff; + overflow-y: auto; + box-sizing: border-box; + width: 100%; + resize: vertical; + padding: 8px; + border: 1px solid {$lightblueborder}; + border-top: none; + -webkit-font-smoothing: antialiased; +} + +.remarkup-control-fullscreen-mode .remarkup-inline-preview { + resize: none; +} + +.remarkup-inline-preview * { + resize: none; +} + +.remarkup-assist-button.preview-active { + background: {$sky}; +} + +.remarkup-assist-button.preview-active .phui-icon-view { + color: #fff; +} + +.remarkup-assist-button.preview-active:hover { + text-decoration: none; +} + +.remarkup-assist-button.preview-active:hover .phui-icon-view { + color: #fff; +} + +.remarkup-preview-active .remarkup-assist, +.remarkup-preview-active .remarkup-assist-separator { + opacity: .2; + transition: all 100ms cubic-bezier(0.250, 0.250, 0.750, 0.750); + transition-timing-function: cubic-bezier(0.250, 0.250, 0.750, 0.750); +} + +.remarkup-preview-active .remarkup-assist-button { + pointer-events: none; + cursor: default; +} + +.remarkup-preview-active .remarkup-assist-button.preview-active { + pointer-events: inherit; + cursor: pointer; +} + +.remarkup-preview-active .remarkup-assist.fa-eye { + opacity: 1; + transition: all 100ms cubic-bezier(0.250, 0.250, 0.750, 0.750); + transition-timing-function: cubic-bezier(0.250, 0.250, 0.750, 0.750); +} + + +/* - Fullscreen ------------------------------------------------------------- */ + +.remarkup-fullscreen-mode { + overflow: hidden; +} + +.remarkup-control-fullscreen-mode { + position: fixed; + border: none; + top: 32px; + bottom: 32px; + left: 64px; + right: 64px; + border-radius: 3px; + box-shadow: 0px 4px 32px #555; +} + +.remarkup-control-fullscreen-mode .remarkup-assist-button { + padding: 1px 6px 4px; + font-size: 15px; +} + +.remarkup-control-fullscreen-mode .remarkup-assist-button .remarkup-assist { + height: 16px; + width: 16px; +} + +.aphront-form-input .remarkup-control-fullscreen-mode .remarkup-assist-bar { + border: none; + border-top-left-radius: 3px; + border-top-right-radius: 3px; + height: 32px; + padding: 4px 8px; + background: {$bluebackground}; +} + +.aphront-form-control .remarkup-control-fullscreen-mode + textarea.remarkup-assist-textarea { + position: absolute; + top: 39px; + left: 0; + right: 0; + height: calc(100% - 36px) !important; + padding: 16px; + font-size: {$biggerfontsize}; + line-height: 1.51em; + border-width: 1px 0 0 0; + outline: none; + resize: none; + background: #fff !important; +} + +.remarkup-control-fullscreen-mode textarea.remarkup-assist-textarea:focus { + border-color: {$thinblueborder}; + box-shadow: none; +} + +.remarkup-control-fullscreen-mode .remarkup-inline-preview { + font-size: {$biggerfontsize}; + border: none; + padding: 16px; + border-bottom-left-radius: 3px; + border-bottom-right-radius: 3px; +} + +.remarkup-control-fullscreen-mode .remarkup-assist-button .fa-arrows-alt { + color: {$sky}; +} + +.device-phone .remarkup-control-fullscreen-mode { + top: 0; + bottom: 0; + left: 0; + right: 0; +} diff --git a/webroot/rsrc/css/phui/phui-comment-form.css b/webroot/rsrc/css/phui/phui-comment-form.css index 3db0a82924..a49d033c3e 100644 --- a/webroot/rsrc/css/phui/phui-comment-form.css +++ b/webroot/rsrc/css/phui/phui-comment-form.css @@ -62,7 +62,7 @@ body.device .phui-box.phui-object-box.phui-comment-form-view { border-color: {$lightblueborder}; border-top: 1px solid {$thinblueborder}; padding: 8px; - height: 10em; + height: 12em; background-color: rgba({$alphablue},.02); } diff --git a/webroot/rsrc/js/core/behavior-phabricator-remarkup-assist.js b/webroot/rsrc/js/core/behavior-phabricator-remarkup-assist.js index 6e89a18d88..f4cbc4f4fa 100644 --- a/webroot/rsrc/js/core/behavior-phabricator-remarkup-assist.js +++ b/webroot/rsrc/js/core/behavior-phabricator-remarkup-assist.js @@ -8,6 +8,7 @@ * javelin-workflow * javelin-vector * phuix-autocomplete + * javelin-mask */ JX.behavior('phabricator-remarkup-assist', function(config) { @@ -39,6 +40,7 @@ JX.behavior('phabricator-remarkup-assist', function(config) { if (edit_mode == 'fa-arrows-alt') { JX.DOM.alterClass(edit_root, 'remarkup-control-fullscreen-mode', false); JX.DOM.alterClass(document.body, 'remarkup-fullscreen-mode', false); + JX.Mask.hide('jx-light-mask'); } area.style.height = ''; @@ -59,6 +61,7 @@ JX.behavior('phabricator-remarkup-assist', function(config) { if (mode == 'fa-arrows-alt') { JX.DOM.alterClass(edit_root, 'remarkup-control-fullscreen-mode', true); JX.DOM.alterClass(document.body, 'remarkup-fullscreen-mode', true); + JX.Mask.show('jx-light-mask'); // If we're in preview mode, expand the preview to full-size. if (preview) { @@ -275,6 +278,7 @@ JX.behavior('phabricator-remarkup-assist', function(config) { area.parentNode.insertBefore(preview, area); JX.DOM.alterClass(button, 'preview-active', true); + JX.DOM.alterClass(root, 'remarkup-preview-active', true); resize_preview(); JX.DOM.hide(area); @@ -286,6 +290,7 @@ JX.behavior('phabricator-remarkup-assist', function(config) { preview = null; JX.DOM.alterClass(button, 'preview-active', false); + JX.DOM.alterClass(root, 'remarkup-preview-active', false); } break; case 'fa-thumb-tack':