Redesign Comment Box

Summary: Redesign the action comment box for better use in two column, mobile, nuance. Test Plan: Test in mobile / desktop / tablet, adding and removing actions. Actionless comment boxes, etc. Reviewers: epriestley Reviewed By: epriestley Subscribers: cspeckmim, Korvin Differential Revision: https://secure.phabricator.com/D16811
2024-11-18 12:52:42 +01:00 · 2016-11-09 10:33:05 -08:00 · 2016-11-09 10:33:05 -08:00 · d78802f3ab
commit d78802f3ab
parent 1747b4d318
7 changed files with 281 additions and 48 deletions
--- a/resources/celerity/map.php
+++ b/resources/celerity/map.php
@ -9,7 +9,7 @@ return array(
  'names' => array(
    'conpherence.pkg.css' => 'cea72e09',
    'conpherence.pkg.js' => '6249a1cf',
-    'core.pkg.css' => '4fc9469e',
+    'core.pkg.css' => 'c99a9eb4',
    'core.pkg.js' => '1a77dddf',
    'darkconsole.pkg.js' => 'e7393ebb',
    'differential.pkg.css' => 'a4ba74b5',
@ -109,7 +109,7 @@ return array(
    'rsrc/css/application/tokens/tokens.css' => '3d0f239e',
    'rsrc/css/application/uiexample/example.css' => '528b19de',
    'rsrc/css/core/core.css' => 'd0801452',
-    'rsrc/css/core/remarkup.css' => 'cd912f2c',
+    'rsrc/css/core/remarkup.css' => '04ab9f17',
    'rsrc/css/core/syntax.css' => '769d3498',
    'rsrc/css/core/z-index.css' => 'd1270942',
    'rsrc/css/diviner/diviner-shared.css' => 'aa3656aa',
@ -132,6 +132,7 @@ return array(
    'rsrc/css/phui/phui-button.css' => '4a5fbe3d',
    'rsrc/css/phui/phui-chart.css' => '6bf6f78e',
    'rsrc/css/phui/phui-cms.css' => 'be43c8a8',
+    'rsrc/css/phui/phui-comment-form.css' => '103cdc49',
    'rsrc/css/phui/phui-crumbs-view.css' => '195ac419',
    'rsrc/css/phui/phui-curtain-view.css' => '947bf1a4',
    'rsrc/css/phui/phui-document-pro.css' => 'ca1fed81',
@ -139,7 +140,7 @@ return array(
    'rsrc/css/phui/phui-document.css' => 'c32e8dec',
    'rsrc/css/phui/phui-feed-story.css' => '44a9c8e9',
    'rsrc/css/phui/phui-fontkit.css' => '9cda225e',
-    'rsrc/css/phui/phui-form-view.css' => '9e22b190',
+    'rsrc/css/phui/phui-form-view.css' => 'b5bfd17a',
    'rsrc/css/phui/phui-form.css' => 'aac1d51d',
    'rsrc/css/phui/phui-head-thing.css' => 'fd311e5f',
    'rsrc/css/phui/phui-header-view.css' => '06385974',
@ -456,7 +457,7 @@ return array(
    'rsrc/js/application/search/behavior-reorder-profile-menu-items.js' => 'e2e0a072',
    'rsrc/js/application/search/behavior-reorder-queries.js' => 'e9581f08',
    'rsrc/js/application/slowvote/behavior-slowvote-embed.js' => '887ad43f',
-    'rsrc/js/application/transactions/behavior-comment-actions.js' => '0300eae6',
+    'rsrc/js/application/transactions/behavior-comment-actions.js' => '1be09f3f',
    'rsrc/js/application/transactions/behavior-reorder-configs.js' => 'd7a74243',
    'rsrc/js/application/transactions/behavior-reorder-fields.js' => 'b59e1e96',
    'rsrc/js/application/transactions/behavior-show-older-transactions.js' => '94c65b72',
@ -545,7 +546,7 @@ return array(
    'rsrc/js/phuix/PHUIXActionView.js' => '8cf6d262',
    'rsrc/js/phuix/PHUIXAutocomplete.js' => '6d86ce8b',
    'rsrc/js/phuix/PHUIXDropdownMenu.js' => '82e270da',
-    'rsrc/js/phuix/PHUIXFormControl.js' => 'e15869a8',
+    'rsrc/js/phuix/PHUIXFormControl.js' => '301b7812',
    'rsrc/js/phuix/PHUIXIconView.js' => 'bff6884b',
  ),
  'symbols' => array(
@ -612,7 +613,7 @@ return array(
    'javelin-behavior-bulk-job-reload' => 'edf8a145',
    'javelin-behavior-calendar-month-view' => 'fe33e256',
    'javelin-behavior-choose-control' => '327a00d1',
-    'javelin-behavior-comment-actions' => '0300eae6',
+    'javelin-behavior-comment-actions' => '1be09f3f',
    'javelin-behavior-config-reorder-fields' => 'b6993408',
    'javelin-behavior-conpherence-menu' => '7524fcfa',
    'javelin-behavior-conpherence-participant-pane' => '8604caa8',
@ -811,7 +812,7 @@ return array(
    'phabricator-object-selector-css' => '85ee8ce6',
    'phabricator-phtize' => 'd254d646',
    'phabricator-prefab' => '8d40ae75',
-    'phabricator-remarkup-css' => 'cd912f2c',
+    'phabricator-remarkup-css' => '04ab9f17',
    'phabricator-search-results-css' => '7dea472c',
    'phabricator-shaped-request' => '7cbe244b',
    'phabricator-slowvote-css' => 'a94b7230',
@ -854,6 +855,7 @@ return array(
    'phui-calendar-month-css' => '8e10e92c',
    'phui-chart-css' => '6bf6f78e',
    'phui-cms-css' => 'be43c8a8',
+    'phui-comment-form-css' => '103cdc49',
    'phui-crumbs-view-css' => '195ac419',
    'phui-curtain-view-css' => '947bf1a4',
    'phui-document-summary-view-css' => '9ca48bdf',
@ -863,7 +865,7 @@ return array(
    'phui-font-icon-base-css' => '870a7360',
    'phui-fontkit-css' => '9cda225e',
    'phui-form-css' => 'aac1d51d',
-    'phui-form-view-css' => '9e22b190',
+    'phui-form-view-css' => 'b5bfd17a',
    'phui-head-thing-view-css' => 'fd311e5f',
    'phui-header-view-css' => '06385974',
    'phui-hovercard' => '1bd28176',
@ -898,7 +900,7 @@ return array(
    'phuix-action-view' => '8cf6d262',
    'phuix-autocomplete' => '6d86ce8b',
    'phuix-dropdown-menu' => '82e270da',
-    'phuix-form-control-view' => 'e15869a8',
+    'phuix-form-control-view' => '301b7812',
    'phuix-icon-view' => 'bff6884b',
    'policy-css' => '957ea14c',
    'policy-edit-css' => '815c66f7',
@ -941,15 +943,6 @@ return array(
      'javelin-dom',
      'phabricator-keyboard-shortcut',
    ),
-    '0300eae6' => array(
-      'javelin-behavior',
-      'javelin-stratcom',
-      'javelin-workflow',
-      'javelin-dom',
-      'phuix-form-control-view',
-      'phuix-icon-view',
-      'javelin-behavior-phabricator-gesture',
-    ),
    '05270951' => array(
      'javelin-util',
      'javelin-magical-init',
@ -1081,6 +1074,15 @@ return array(
      'javelin-request',
      'javelin-uri',
    ),
+    '1be09f3f' => array(
+      'javelin-behavior',
+      'javelin-stratcom',
+      'javelin-workflow',
+      'javelin-dom',
+      'phuix-form-control-view',
+      'phuix-icon-view',
+      'javelin-behavior-phabricator-gesture',
+    ),
    '1def2711' => array(
      'javelin-install',
      'javelin-dom',
@ -1148,6 +1150,10 @@ return array(
    '2ee659ce' => array(
      'javelin-install',
    ),
+    '301b7812' => array(
+      'javelin-install',
+      'javelin-dom',
+    ),
    '320810c8' => array(
      'javelin-install',
      'javelin-dom',
@ -2063,10 +2069,6 @@ return array(
      'javelin-dom',
      'phabricator-prefab',
    ),
-    'e15869a8' => array(
-      'javelin-install',
-      'javelin-dom',
-    ),
    'e1d25dfb' => array(
      'javelin-behavior',
      'javelin-stratcom',
--- a/src/applications/transactions/view/PhabricatorApplicationTransactionCommentView.php
+++ b/src/applications/transactions/view/PhabricatorApplicationTransactionCommentView.php
@ -150,7 +150,6 @@ class PhabricatorApplicationTransactionCommentView extends AphrontView {
        ->setQueryParam('next', (string)$this->getRequestURI());
      return id(new PHUIObjectBoxView())
        ->setFlush(true)
-        ->setHeaderText(pht('Add Comment'))
        ->appendChild(
          javelin_tag(
            'a',
@ -183,9 +182,25 @@ class PhabricatorApplicationTransactionCommentView extends AphrontView {
        ));
    }

+    require_celerity_resource('phui-comment-form-css');
+    $image_uri = $user->getProfileImageURI();
+    $image = phutil_tag(
+      'div',
+      array(
+        'style' => 'background-image: url('.$image_uri.')',
+        'class' => 'phui-comment-image',
+      ));
+    $wedge = phutil_tag(
+      'div',
+      array(
+        'class' => 'phui-timeline-wedge',
+      ),
+      '');
    $comment_box = id(new PHUIObjectBoxView())
      ->setFlush(true)
-      ->setHeaderText($this->headerText)
+      ->addClass('phui-comment-form-view')
+      ->appendChild($image)
+      ->appendChild($wedge)
      ->appendChild($comment);

    return array($comment_box, $preview);
@ -287,20 +302,31 @@ class PhabricatorApplicationTransactionCommentView extends AphrontView {
            'id' => $input_id,
          )));

-      $form->appendChild(
-        id(new AphrontFormSelectControl())
-          ->setLabel(pht('Actions'))
-          ->setID($action_id)
-          ->setOptions($options));
+      $invisi_bar = phutil_tag(
+        'div',
+        array(
+          'id' => $place_id,
+          'class' => 'phui-comment-control-stack',
+        ));

-      // This is an empty placeholder node so we know where to insert the
-      // new actions.
-      $form->appendChild(
-        phutil_tag(
-          'div',
-          array(
-            'id' => $place_id,
-          )));
+      $action_select = id(new AphrontFormSelectControl())
+        ->addClass('phui-comment-fullwidth-control')
+        ->addClass('phui-comment-action-control')
+        ->setID($action_id)
+        ->setOptions($options);
+
+      $action_bar = phutil_tag(
+        'div',
+        array(
+          'class' => 'phui-comment-action-bar grouped',
+        ),
+        array(
+          $action_select,
+        ));
+
+      $form->appendChild($action_bar);
+      $form->appendChild($invisi_bar);
+      $form->addClass('phui-comment-has-actions');

      Javelin::initBehavior(
        'comment-actions',
@ -318,16 +344,24 @@ class PhabricatorApplicationTransactionCommentView extends AphrontView {
        ));
    }

+    $submit_button = id(new AphrontFormSubmitControl())
+      ->addClass('phui-comment-fullwidth-control')
+      ->addClass('phui-comment-submit-control')
+      ->setValue($this->getSubmitButtonName());
+
    $form
      ->appendChild(
        id(new PhabricatorRemarkupControl())
          ->setID($this->getCommentID())
+          ->addClass('phui-comment-fullwidth-control')
+          ->addClass('phui-comment-textarea-control')
          ->setName('comment')
-          ->setLabel(pht('Comment'))
          ->setUser($this->getUser())
          ->setValue($draft_comment))
      ->appendChild(
        id(new AphrontFormSubmitControl())
+          ->addClass('phui-comment-fullwidth-control')
+          ->addClass('phui-comment-submit-control')
          ->setValue($this->getSubmitButtonName()));

    return $form;
--- a/webroot/rsrc/css/core/remarkup.css
+++ b/webroot/rsrc/css/core/remarkup.css
@ -487,12 +487,8 @@ var.remarkup-assist-textarea {
  float: left;
 }

-.remarkup-assist-button:hover {
-  background-color: rgba(100,100,100,.15);
-}
-
 .remarkup-assist-button:hover .phui-icon-view.phui-font-fa {
-  color: {$darkbluetext};
+  color: {$sky};
 }

 .remarkup-assist-button:active {
--- a/webroot/rsrc/css/phui/phui-comment-form.css
+++ b/webroot/rsrc/css/phui/phui-comment-form.css
@ -0,0 +1,194 @@
+/**
+ * @provides phui-comment-form-css
+ */
+
+body .phui-box.phui-object-box.phui-comment-form-view {
+  background-color: #fff;
+  margin-left: 62px;
+  position: relative;
+}
+
+body.device .phui-box.phui-object-box.phui-comment-form-view {
+  margin-left: 0;
+}
+
+.phui-comment-form-view.phui-object-box {
+  padding: 0;
+}
+
+.phui-comment-form-view .phui-form-view {
+  padding: 0;
+}
+
+.phui-comment-form-view .phui-comment-image {
+  background-repeat: no-repeat;
+  position: absolute;
+  border-radius: 3px;
+  background-size: 100%;
+  display: block;
+}
+
+.device-desktop .phui-comment-form-view .phui-comment-image {
+  width: 50px;
+  height: 50px;
+  top: 0px;
+  left: -62px;
+}
+
+.phui-comment-form-view .phui-timeline-wedge {
+  top: 26px;
+}
+
+.phui-comment-fullwidth-control .aphront-form-input {
+  margin: 0;
+  width: auto;
+}
+
+.phui-comment-form-view .remarkup-assist-bar {
+  height: 32px;
+  border-color: {$lightblueborder};
+  border-top-left-radius: 3px;
+  border-top-right-radius: 3px;
+  padding: 0 4px;
+}
+
+.device-phone .phui-comment-form-view .remarkup-assist-bar,
+.device-phone .phui-comment-form-view .aphront-form-input
+  .remarkup-assist-textarea {
+    border-radius: 0;
+}
+
+.phui-comment-form-view .remarkup-assist-button {
+  margin-top: 2px;
+  padding: 4px 5px;
+  border-radius: 3px;
+}
+
+.phui-comment-form-view .remarkup-assist-separator {
+  height: 18px;
+  margin: 7px 6px;
+}
+
+.phui-comment-form-view .aphront-form-input .remarkup-assist-textarea {
+  border-color: {$lightblueborder};
+  border-top: 1px solid {$thinblueborder};
+  padding: 8px;
+  border-bottom-left-radius: 3px;
+  border-bottom-right-radius: 3px;
+  height: 10em;
+  background-color: rgba({$alphablue},.02);
+}
+
+.phui-comment-form-view .aphront-form-input .remarkup-assist-textarea:focus {
+  background-color: #fff;
+}
+
+.device-phone .phui-comment-form-view .aphront-form-input
+  .remarkup-assist-textarea {
+    height: 8em;
+}
+
+.phui-comment-form-view .phui-comment-textarea-control {
+  padding: 16px 16px 8px 16px;
+}
+
+.phui-comment-form-view .phui-comment-has-actions
+  .phui-comment-textarea-control {
+    padding-top: 0;
+}
+
+.device-phone .phui-comment-form-view .phui-comment-textarea-control {
+  padding: 0;
+  margin: -1px;
+}
+
+.phui-comment-action {
+  background-color: rgba(239, 243, 252, .75);
+  border-radius: 3px;
+  margin: 0px 16px 8px;
+  padding: 6px;
+}
+
+.phui-comment-action + .phui-comment-action {
+  margin-top: -4px;
+}
+
+.device-phone .phui-comment-action {
+  margin: 8px;
+}
+
+.phui-comment-form-view .phui-comment-action-bar {
+  border-bottom: 1px solid {$thinblueborder};
+  background-color: rgba(239, 243, 252, .75);
+  padding: 2px 12px 4px 12px;
+  margin-bottom: 16px;
+}
+
+.device-phone .phui-comment-form-view .phui-comment-action-bar {
+  margin: 0;
+  padding: 8px;
+}
+
+.phui-comment-form-view .phui-comment-submit-control {
+  padding: 0 16px 12px;
+}
+
+.device-phone .phui-comment-form-view .phui-comment-submit-control {
+  margin: 0px;
+  padding: 6px 8px 8px;
+}
+
+.phui-comment-form-view .phui-comment-action-control {
+  float: left;
+}
+
+.device-phone .phui-comment-form-view .phui-comment-action-control {
+  float: none;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+}
+
+.phui-comment-form-view .phui-comment-action-icon {
+  float: left;
+  font-size: 20px;
+  color: {$lightbluetext};
+  height: 40px;
+  line-height: 40px;
+  margin: 0 4px;
+}
+
+.device-phone .phui-comment-form-view .phui-comment-action-icon {
+  display: none;
+}
+
+/* h8rs gonna h8 */
+.phui-comment-form-view select {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+
+  background: #fff url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAUCAMAAACzvE1FAAAADFBMVEUzMzMzMzMzMzMzMzMKAG/3AAAAA3RSTlMAf4C/aSLHAAAAPElEQVR42q3NMQ4AIAgEQTn//2cLdRKppSGzBYwzVXvznNWs8C58CiussPJj8h6NwgorrKRdTvuV9v16Afn0AYFOB7aYAAAAAElFTkSuQmCC") no-repeat right 8px center;
+  background-size: 8px 10px;
+  border-radius: 3px;
+  color: {$darkbluetext};
+  height: 28px;
+  position: relative;
+  padding: 0 8px;
+  width: 180px;
+}
+
+.device-phone .aphront-form-control-submit button {
+  width: 100%;
+}
+
+.phui-comment-form-view .phui-form-view label.aphront-form-label,
+.phui-comment-form-view .phui-form-view .aphront-form-error {
+  height: 26px;
+  line-height: 26px;
+  padding: 0;
+}
+
+.phui-comment-form-view .aphront-form-error .phui-icon-view {
+  padding: 4px;
+}
--- a/webroot/rsrc/css/phui/phui-form-view.css
+++ b/webroot/rsrc/css/phui/phui-form-view.css
@ -476,7 +476,6 @@ properly, and submit values. */
  display: none;
 }

-
 .login-to-comment {
  margin: 12px;
 }
@ -533,10 +532,11 @@ properly, and submit values. */
 }

 .aphront-form-error .phui-icon-view {
+  float: right;
  color: {$lightgreyborder};
-  font-size: 16px;
+  font-size: 20px;
 }

 .device-desktop .aphront-form-error .phui-icon-view:hover {
-  color: {$darkgreyborder};
+  color: {$red};
 }
--- a/webroot/rsrc/js/application/transactions/behavior-comment-actions.js
+++ b/webroot/rsrc/js/application/transactions/behavior-comment-actions.js
@ -58,7 +58,8 @@ JX.behavior('comment-actions', function(config) {
    var control = new JX.PHUIXFormControl()
      .setLabel(action.label)
      .setError(remove)
-      .setControl(action.type, action.spec);
+      .setControl(action.type, action.spec)
+      .setClass('phui-comment-action');
    var node = control.getNode();

    JX.Stratcom.addSigil(node, 'touchable');
--- a/webroot/rsrc/js/phuix/PHUIXFormControl.js
+++ b/webroot/rsrc/js/phuix/PHUIXFormControl.js
@ -11,6 +11,7 @@ JX.install('PHUIXFormControl', {
    _labelNode: null,
    _errorNode: null,
    _inputNode: null,
+    _className: null,
    _valueSetCallback: null,
    _valueGetCallback: null,

@ -24,6 +25,11 @@ JX.install('PHUIXFormControl', {
      return this;
    },

+    setClass: function(className) {
+      this._className = className;
+      return this;
+    },
+
    setControl: function(type, spec) {
      var node = this._getInputNode();

@ -67,7 +73,7 @@ JX.install('PHUIXFormControl', {
      if (!this._node) {

        var attrs = {
-          className: 'aphront-form-control grouped'
+          className: 'aphront-form-control ' + this._className + ' grouped'
        };

        var content = [