Page Menu
Home
Phabricator
Search
Configure Global Search
Log In
Files
F13985930
D16811.id40516.diff
No One
Temporary
Actions
View File
Edit File
Delete File
View Transforms
Subscribe
Mute Notifications
Award Token
Flag For Later
Size
14 KB
Referenced Files
None
Subscribers
None
D16811.id40516.diff
View Options
diff --git a/resources/celerity/map.php b/resources/celerity/map.php
--- a/resources/celerity/map.php
+++ b/resources/celerity/map.php
@@ -9,7 +9,7 @@
'names' => array(
'conpherence.pkg.css' => 'cea72e09',
'conpherence.pkg.js' => '6249a1cf',
- 'core.pkg.css' => '46d588e4',
+ 'core.pkg.css' => 'e3d58e9a',
'core.pkg.js' => '035325a7',
'darkconsole.pkg.js' => 'e7393ebb',
'differential.pkg.css' => 'e1d704ce',
@@ -132,6 +132,7 @@
'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' => 'd39fd09c',
'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 @@
'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 @@
'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 @@
'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 @@
'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',
@@ -854,6 +855,7 @@
'phui-calendar-month-css' => '8e10e92c',
'phui-chart-css' => '6bf6f78e',
'phui-cms-css' => 'be43c8a8',
+ 'phui-comment-form-css' => 'd39fd09c',
'phui-crumbs-view-css' => '195ac419',
'phui-curtain-view-css' => '947bf1a4',
'phui-document-summary-view-css' => '9ca48bdf',
@@ -863,7 +865,7 @@
'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 @@
'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 @@
'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',
@@ -1075,6 +1068,15 @@
'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',
@@ -1142,6 +1144,10 @@
'2ee659ce' => array(
'javelin-install',
),
+ '301b7812' => array(
+ 'javelin-install',
+ 'javelin-dom',
+ ),
'320810c8' => array(
'javelin-install',
'javelin-dom',
@@ -2063,10 +2069,6 @@
'javelin-dom',
'phabricator-prefab',
),
- 'e15869a8' => array(
- 'javelin-install',
- 'javelin-dom',
- ),
'e1d25dfb' => array(
'javelin-behavior',
'javelin-stratcom',
diff --git a/src/applications/transactions/view/PhabricatorApplicationTransactionCommentView.php b/src/applications/transactions/view/PhabricatorApplicationTransactionCommentView.php
--- a/src/applications/transactions/view/PhabricatorApplicationTransactionCommentView.php
+++ b/src/applications/transactions/view/PhabricatorApplicationTransactionCommentView.php
@@ -150,7 +150,6 @@
->setQueryParam('next', (string)$this->getRequestURI());
return id(new PHUIObjectBoxView())
->setFlush(true)
- ->setHeaderText(pht('Add Comment'))
->appendChild(
javelin_tag(
'a',
@@ -183,9 +182,25 @@
));
}
+ 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);
@@ -225,7 +240,24 @@
->addHiddenInput('__draft__', $draft_key)
->addHiddenInput($version_key, $version_value);
+ $placeholder_text = pht('Add Comment');
+ if ($this->headerText) {
+ $placeholder_text = $this->headerText;
+ }
+
+ $form->appendChild(
+ id(new PhabricatorRemarkupControl())
+ ->setID($this->getCommentID())
+ ->addClass('phui-comment-fullwidth-control')
+ ->addClass('phui-comment-textarea-control')
+ ->setPlaceHolder($placeholder_text)
+ ->setName('comment')
+ ->setUser($this->getUser())
+ ->setValue($draft_comment));
+
$comment_actions = $this->getCommentActions();
+ $action_select = null;
+ $action_icon = null;
if ($comment_actions) {
$action_map = array();
$type_map = array();
@@ -287,11 +319,15 @@
'id' => $input_id,
)));
- $form->appendChild(
- id(new AphrontFormSelectControl())
- ->setLabel(pht('Actions'))
- ->setID($action_id)
- ->setOptions($options));
+ $action_icon = id(new PHUIIconView())
+ ->setIcon('fa-plus-circle')
+ ->addClass('phui-comment-action-icon');
+
+ $action_select = id(new AphrontFormSelectControl())
+ ->addClass('phui-comment-fullwidth-control')
+ ->addClass('phui-comment-action-control')
+ ->setID($action_id)
+ ->setOptions($options);
// This is an empty placeholder node so we know where to insert the
// new actions.
@@ -300,6 +336,7 @@
'div',
array(
'id' => $place_id,
+ 'class' => 'phui-comment-control-stack',
)));
Javelin::initBehavior(
@@ -318,17 +355,23 @@
));
}
- $form
- ->appendChild(
- id(new PhabricatorRemarkupControl())
- ->setID($this->getCommentID())
- ->setName('comment')
- ->setLabel(pht('Comment'))
- ->setUser($this->getUser())
- ->setValue($draft_comment))
- ->appendChild(
- id(new AphrontFormSubmitControl())
- ->setValue($this->getSubmitButtonName()));
+ $submit_button = id(new AphrontFormSubmitControl())
+ ->addClass('phui-comment-fullwidth-control')
+ ->addClass('phui-comment-submit-control')
+ ->setValue($this->getSubmitButtonName());
+
+ $action_bar = phutil_tag(
+ 'div',
+ array(
+ 'class' => 'phui-comment-action-bar grouped',
+ ),
+ array(
+ $action_icon,
+ $action_select,
+ $submit_button,
+ ));
+
+ $form->appendChild($action_bar);
return $form;
}
diff --git a/webroot/rsrc/css/phui/phui-comment-form.css b/webroot/rsrc/css/phui/phui-comment-form.css
new file mode 100644
--- /dev/null
+++ b/webroot/rsrc/css/phui/phui-comment-form.css
@@ -0,0 +1,165 @@
+/**
+ * @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;
+}
+
+.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 0;
+}
+
+.device-phone .phui-comment-form-view .phui-comment-textarea-control {
+ padding: 0;
+ margin: -1px;
+}
+
+.phui-comment-action {
+ border: 1px dashed {$thinblueborder};
+ border-radius: 3px;
+ margin: 6px 16px;
+ padding: 6px;
+}
+
+.device-phone .phui-comment-action {
+ margin: 8px;
+}
+
+.phui-comment-form-view .phui-comment-action-bar {
+ border-top: 1px solid {$thinblueborder};
+ background-color: rgba(239, 243, 252, .75);
+ padding: 4px 12px 8px 12px;
+ margin-top: 16px;
+}
+
+.device-phone .phui-comment-form-view .phui-comment-action-bar {
+ margin: 0;
+ padding: 8px;
+}
+
+.phui-comment-form-view .phui-comment-submit-control {
+ float: right;
+}
+
+.device-phone .phui-comment-form-view .phui-comment-submit-control {
+ float: none;
+ width: 100%;
+ margin: 0;
+ padding: 0;
+}
+
+.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 0 8px 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;
+}
+
+.phui-comment-action-control select {
+ background-color: #F7F7F9;
+ background-image: linear-gradient(to bottom, #ffffff, #f1f0f1);
+ border: 1px solid rgba({$alphablue},.2);
+ color: {$darkbluetext};
+ height: 30px;
+ font-weight: bold;
+ position: relative;
+ padding: 0 8px;
+}
+
+.device-phone .aphront-form-control-submit button {
+ width: 100%;
+}
diff --git a/webroot/rsrc/css/phui/phui-form-view.css b/webroot/rsrc/css/phui/phui-form-view.css
--- a/webroot/rsrc/css/phui/phui-form-view.css
+++ b/webroot/rsrc/css/phui/phui-form-view.css
@@ -476,7 +476,6 @@
display: none;
}
-
.login-to-comment {
margin: 12px;
}
@@ -533,10 +532,11 @@
}
.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};
}
diff --git a/webroot/rsrc/js/application/transactions/behavior-comment-actions.js b/webroot/rsrc/js/application/transactions/behavior-comment-actions.js
--- a/webroot/rsrc/js/application/transactions/behavior-comment-actions.js
+++ b/webroot/rsrc/js/application/transactions/behavior-comment-actions.js
@@ -58,7 +58,8 @@
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');
diff --git a/webroot/rsrc/js/phuix/PHUIXFormControl.js b/webroot/rsrc/js/phuix/PHUIXFormControl.js
--- a/webroot/rsrc/js/phuix/PHUIXFormControl.js
+++ b/webroot/rsrc/js/phuix/PHUIXFormControl.js
@@ -11,6 +11,7 @@
_labelNode: null,
_errorNode: null,
_inputNode: null,
+ _className: null,
_valueSetCallback: null,
_valueGetCallback: null,
@@ -24,6 +25,11 @@
return this;
},
+ setClass: function(className) {
+ this._className = className;
+ return this;
+ },
+
setControl: function(type, spec) {
var node = this._getInputNode();
@@ -67,7 +73,7 @@
if (!this._node) {
var attrs = {
- className: 'aphront-form-control grouped'
+ className: 'aphront-form-control ' + this._className + ' grouped'
};
var content = [
File Metadata
Details
Attached
Mime Type
text/plain
Expires
Mon, Oct 21, 11:38 PM (2 w, 3 d ago)
Storage Engine
blob
Storage Format
Encrypted (AES-256-CBC)
Storage Handle
6740223
Default Alt Text
D16811.id40516.diff (14 KB)
Attached To
Mode
D16811: Redesign Comment Box
Attached
Detach File
Event Timeline
Log In to Comment