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

@@ -9,8 +9,8 @@ return array(
   'names' => array(
     'conpherence.pkg.css' => '82aca405',
     'conpherence.pkg.js' => '6249a1cf',
-    'core.pkg.css' => 'dc689e29',
+    'core.pkg.css' => 'acd257dc',
-    'core.pkg.js' => '1fa7c0c5',
+    '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',

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;
     }
 

webroot/rsrc/css/core/remarkup.css

@@ -558,9 +558,13 @@ var.remarkup-assist-textarea {
 
 .remarkup-assist-button {
   display: block;
-  margin-top: 2px;
+  margin-top: 4px;
-  padding: 4px 5px;
+  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;
+}

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);
 }
 

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':