mirror of
https://we.phorge.it/source/phorge.git
synced 2024-11-25 16:22:43 +01:00
Implement improved remarkup assistance panel
Summary:
- I made a "?" icon for help/reference.
- The `<>` icon was slightly too wide so I carved it down to 14x14.
- All the icons are in `/Phabriactor/remarkup_icon_sources.psd` if you want to tweak anything.
- Tooltips don't look like the mock but I'll tackle those separately.
- Removed strikethrough.
- Removed tag/image/text size for now since they don't have reasonable JS implementations yet.
- I think everything else is accurate to the mock.
Test Plan:
Normal state:
{F20621, size=full}
Hover + Click states:
{F20622, size=full}
Clicked state:
{F20620, size=full}
Reviewers: chad
Reviewed By: chad
CC: aran
Maniphest Tasks: T1848
Differential Revision: https://secure.phabricator.com/D3650
This commit is contained in:
epriestley
parent
a7cdc312e6
commit
643d8070f1
7 changed files with 177 additions and 119 deletions
|
|
@ -227,6 +227,31 @@ foreach ($action_map as $icon => $source) {
|
|||
->setTargetCSS('.action-'.$icon));
|
||||
}
|
||||
|
||||
|
||||
$remarkup_template = id(new PhutilSprite())
|
||||
->setSourcePosition(0, 0)
|
||||
->setSourceSize(14, 14);
|
||||
|
||||
$remarkup_icons = array(
|
||||
'b',
|
||||
'code',
|
||||
'i',
|
||||
'image',
|
||||
'ol',
|
||||
'tag',
|
||||
'tt',
|
||||
'ul',
|
||||
'help',
|
||||
);
|
||||
|
||||
foreach ($remarkup_icons as $icon) {
|
||||
$sheet->addSprite(
|
||||
id(clone $remarkup_template)
|
||||
->setSourceFile($srcroot.'remarkup/text_'.$icon.'.png')
|
||||
->setTargetCSS('.remarkup-assist-'.$icon));
|
||||
}
|
||||
|
||||
|
||||
$sheet->generateImage($webroot.'/image/autosprite.png');
|
||||
$sheet->generateCSS($webroot.'/css/autosprite.css');
|
||||
|
||||
|
|
|
|||
|
|
@ -51,8 +51,8 @@ celerity_register_resource_map(array(
|
|||
),
|
||||
'/rsrc/image/autosprite.png' =>
|
||||
array(
|
||||
'hash' => 'c7f9d2dd752a24c518c0eb426a4853a5',
|
||||
'uri' => '/res/c7f9d2dd/rsrc/image/autosprite.png',
|
||||
'hash' => '005c7630a31cb2ef6b1782d4eca08cd7',
|
||||
'uri' => '/res/005c7630/rsrc/image/autosprite.png',
|
||||
'disk' => '/rsrc/image/autosprite.png',
|
||||
'type' => 'png',
|
||||
),
|
||||
|
|
@ -657,7 +657,7 @@ celerity_register_resource_map(array(
|
|||
),
|
||||
'autosprite-css' =>
|
||||
array(
|
||||
'uri' => '/res/947e1dcf/rsrc/css/autosprite.css',
|
||||
'uri' => '/res/6c0c2948/rsrc/css/autosprite.css',
|
||||
'type' => 'css',
|
||||
'requires' =>
|
||||
array(
|
||||
|
|
@ -1559,7 +1559,7 @@ celerity_register_resource_map(array(
|
|||
),
|
||||
'javelin-behavior-phabricator-remarkup-assist' =>
|
||||
array(
|
||||
'uri' => '/res/5f7ccd02/rsrc/js/application/core/behavior-phabricator-remarkup-assist.js',
|
||||
'uri' => '/res/d3b53e76/rsrc/js/application/core/behavior-phabricator-remarkup-assist.js',
|
||||
'type' => 'js',
|
||||
'requires' =>
|
||||
array(
|
||||
|
|
@ -2636,7 +2636,7 @@ celerity_register_resource_map(array(
|
|||
),
|
||||
'phabricator-remarkup-css' =>
|
||||
array(
|
||||
'uri' => '/res/47c16585/rsrc/css/core/remarkup.css',
|
||||
'uri' => '/res/66b4cd42/rsrc/css/core/remarkup.css',
|
||||
'type' => 'css',
|
||||
'requires' =>
|
||||
array(
|
||||
|
|
@ -3003,7 +3003,7 @@ celerity_register_resource_map(array(
|
|||
), array(
|
||||
'packages' =>
|
||||
array(
|
||||
'782b1e3f' =>
|
||||
'1da0b408' =>
|
||||
array(
|
||||
'name' => 'core.pkg.css',
|
||||
'symbols' =>
|
||||
|
|
@ -3032,7 +3032,7 @@ celerity_register_resource_map(array(
|
|||
21 => 'phabricator-flag-css',
|
||||
22 => 'aphront-error-view-css',
|
||||
),
|
||||
'uri' => '/res/pkg/782b1e3f/core.pkg.css',
|
||||
'uri' => '/res/pkg/1da0b408/core.pkg.css',
|
||||
'type' => 'css',
|
||||
),
|
||||
'3a455e4f' =>
|
||||
|
|
@ -3199,20 +3199,20 @@ celerity_register_resource_map(array(
|
|||
'reverse' =>
|
||||
array(
|
||||
'aphront-attached-file-view-css' => '7839ae2d',
|
||||
'aphront-crumbs-view-css' => '782b1e3f',
|
||||
'aphront-dialog-view-css' => '782b1e3f',
|
||||
'aphront-error-view-css' => '782b1e3f',
|
||||
'aphront-form-view-css' => '782b1e3f',
|
||||
'aphront-crumbs-view-css' => '1da0b408',
|
||||
'aphront-dialog-view-css' => '1da0b408',
|
||||
'aphront-error-view-css' => '1da0b408',
|
||||
'aphront-form-view-css' => '1da0b408',
|
||||
'aphront-headsup-action-list-view-css' => '2ba14b3d',
|
||||
'aphront-headsup-view-css' => '782b1e3f',
|
||||
'aphront-list-filter-view-css' => '782b1e3f',
|
||||
'aphront-pager-view-css' => '782b1e3f',
|
||||
'aphront-panel-view-css' => '782b1e3f',
|
||||
'aphront-side-nav-view-css' => '782b1e3f',
|
||||
'aphront-table-view-css' => '782b1e3f',
|
||||
'aphront-tokenizer-control-css' => '782b1e3f',
|
||||
'aphront-tooltip-css' => '782b1e3f',
|
||||
'aphront-typeahead-control-css' => '782b1e3f',
|
||||
'aphront-headsup-view-css' => '1da0b408',
|
||||
'aphront-list-filter-view-css' => '1da0b408',
|
||||
'aphront-pager-view-css' => '1da0b408',
|
||||
'aphront-panel-view-css' => '1da0b408',
|
||||
'aphront-side-nav-view-css' => '1da0b408',
|
||||
'aphront-table-view-css' => '1da0b408',
|
||||
'aphront-tokenizer-control-css' => '1da0b408',
|
||||
'aphront-tooltip-css' => '1da0b408',
|
||||
'aphront-typeahead-control-css' => '1da0b408',
|
||||
'differential-changeset-view-css' => '2ba14b3d',
|
||||
'differential-core-view-css' => '2ba14b3d',
|
||||
'differential-inline-comment-editor' => 'd05e3c0f',
|
||||
|
|
@ -3278,15 +3278,15 @@ celerity_register_resource_map(array(
|
|||
'javelin-workflow' => '3a455e4f',
|
||||
'maniphest-task-summary-css' => '7839ae2d',
|
||||
'maniphest-transaction-detail-css' => '7839ae2d',
|
||||
'phabricator-app-buttons-css' => '782b1e3f',
|
||||
'phabricator-app-buttons-css' => '1da0b408',
|
||||
'phabricator-content-source-view-css' => '2ba14b3d',
|
||||
'phabricator-core-buttons-css' => '782b1e3f',
|
||||
'phabricator-core-css' => '782b1e3f',
|
||||
'phabricator-directory-css' => '782b1e3f',
|
||||
'phabricator-core-buttons-css' => '1da0b408',
|
||||
'phabricator-core-css' => '1da0b408',
|
||||
'phabricator-directory-css' => '1da0b408',
|
||||
'phabricator-drag-and-drop-file-upload' => 'd05e3c0f',
|
||||
'phabricator-dropdown-menu' => '3a455e4f',
|
||||
'phabricator-flag-css' => '782b1e3f',
|
||||
'phabricator-jump-nav' => '782b1e3f',
|
||||
'phabricator-flag-css' => '1da0b408',
|
||||
'phabricator-jump-nav' => '1da0b408',
|
||||
'phabricator-keyboard-shortcut' => '3a455e4f',
|
||||
'phabricator-keyboard-shortcut-manager' => '3a455e4f',
|
||||
'phabricator-menu-item' => '3a455e4f',
|
||||
|
|
@ -3294,11 +3294,11 @@ celerity_register_resource_map(array(
|
|||
'phabricator-paste-file-upload' => '3a455e4f',
|
||||
'phabricator-prefab' => '3a455e4f',
|
||||
'phabricator-project-tag-css' => '7839ae2d',
|
||||
'phabricator-remarkup-css' => '782b1e3f',
|
||||
'phabricator-remarkup-css' => '1da0b408',
|
||||
'phabricator-shaped-request' => 'd05e3c0f',
|
||||
'phabricator-standard-page-view' => '782b1e3f',
|
||||
'phabricator-standard-page-view' => '1da0b408',
|
||||
'phabricator-tooltip' => '3a455e4f',
|
||||
'phabricator-transaction-view-css' => '782b1e3f',
|
||||
'syntax-highlighting-css' => '782b1e3f',
|
||||
'phabricator-transaction-view-css' => '1da0b408',
|
||||
'syntax-highlighting-css' => '1da0b408',
|
||||
),
|
||||
));
|
||||
|
|
|
|||
|
|
@ -21,50 +21,33 @@ final class PhabricatorRemarkupControl extends AphrontFormTextAreaControl {
|
|||
protected function renderInput() {
|
||||
|
||||
Javelin::initBehavior('phabricator-remarkup-assist', array());
|
||||
Javelin::initBehavior('phabricator-tooltips', array());
|
||||
|
||||
$actions = array(
|
||||
'b' => array(
|
||||
'text' => 'B',
|
||||
'tip' => pht('Bold'),
|
||||
),
|
||||
'i' => array(
|
||||
'text' => 'I',
|
||||
'tip' => pht('Italics'),
|
||||
),
|
||||
'tt' => array(
|
||||
'text' => 'T',
|
||||
),
|
||||
's' => array(
|
||||
'text' => 'S',
|
||||
'tip' => pht('Monospaced'),
|
||||
),
|
||||
array(
|
||||
'spacer' => true,
|
||||
),
|
||||
'ul' => array(
|
||||
'text' => "\xE2\x80\xA2",
|
||||
'tip' => pht('Bulleted List'),
|
||||
),
|
||||
'ol' => array(
|
||||
'text' => '1.',
|
||||
'tip' => pht('Numbered List'),
|
||||
),
|
||||
'code' => array(
|
||||
'text' => '{}',
|
||||
),
|
||||
array(
|
||||
'spacer' => true,
|
||||
),
|
||||
'mention' => array(
|
||||
'text' => '@',
|
||||
),
|
||||
array(
|
||||
'spacer' => true,
|
||||
),
|
||||
'h1' => array(
|
||||
'text' => 'H',
|
||||
),
|
||||
array(
|
||||
'spacer' => true,
|
||||
'tip' => pht('Code Block'),
|
||||
),
|
||||
'help' => array(
|
||||
'tip' => pht('Help'),
|
||||
'align' => 'right',
|
||||
'text' => '?',
|
||||
'href' => PhabricatorEnv::getDoclink(
|
||||
'article/Remarkup_Reference.html'),
|
||||
),
|
||||
|
|
@ -73,13 +56,16 @@ final class PhabricatorRemarkupControl extends AphrontFormTextAreaControl {
|
|||
$buttons = array();
|
||||
foreach ($actions as $action => $spec) {
|
||||
if (idx($spec, 'spacer')) {
|
||||
$buttons[] = '<span> </span>';
|
||||
$buttons[] = phutil_render_tag(
|
||||
'span',
|
||||
array(
|
||||
'class' => 'remarkup-assist-separator',
|
||||
),
|
||||
'');
|
||||
continue;
|
||||
}
|
||||
|
||||
$classes = array();
|
||||
$classes[] = 'button';
|
||||
$classes[] = 'grey';
|
||||
$classes[] = 'remarkup-assist-button';
|
||||
if (idx($spec, 'align') == 'right') {
|
||||
$classes[] = 'remarkup-assist-right';
|
||||
|
|
@ -91,17 +77,22 @@ final class PhabricatorRemarkupControl extends AphrontFormTextAreaControl {
|
|||
$mustcapture = true;
|
||||
$target = null;
|
||||
} else {
|
||||
$meta = null;
|
||||
$meta = array();
|
||||
$mustcapture = null;
|
||||
$target = '_blank';
|
||||
}
|
||||
|
||||
$tip = idx($spec, 'tip');
|
||||
if ($tip) {
|
||||
$meta['tip'] = $tip;
|
||||
}
|
||||
|
||||
$buttons[] = javelin_render_tag(
|
||||
'a',
|
||||
array(
|
||||
'class' => implode(' ', $classes),
|
||||
'href' => $href,
|
||||
'sigil' => 'remarkup-assist',
|
||||
'sigil' => 'remarkup-assist has-tooltip',
|
||||
'meta' => $meta,
|
||||
'mustcapture' => $mustcapture,
|
||||
'target' => $target,
|
||||
|
|
@ -110,12 +101,19 @@ final class PhabricatorRemarkupControl extends AphrontFormTextAreaControl {
|
|||
phutil_render_tag(
|
||||
'div',
|
||||
array(
|
||||
'class' => 'remarkup-assist remarkup-assist-'.$action,
|
||||
'class' => 'remarkup-assist autosprite remarkup-assist-'.$action,
|
||||
),
|
||||
idx($spec, 'text', '')));
|
||||
''));
|
||||
}
|
||||
|
||||
$buttons = implode('', $buttons);
|
||||
$buttons = phutil_render_tag(
|
||||
'div',
|
||||
array(
|
||||
'class' => 'remarkup-assist-bar',
|
||||
),
|
||||
implode('', $buttons));
|
||||
|
||||
$this->setCustomClass('remarkup-assist-textarea');
|
||||
|
||||
return javelin_render_tag(
|
||||
'div',
|
||||
|
|
|
|||
|
|
@ -747,3 +747,39 @@
|
|||
.action-subscribe-delete {
|
||||
background-position: 0px -7308px;
|
||||
}
|
||||
|
||||
.remarkup-assist-b {
|
||||
background-position: 0px -7325px;
|
||||
}
|
||||
|
||||
.remarkup-assist-code {
|
||||
background-position: 0px -7340px;
|
||||
}
|
||||
|
||||
.remarkup-assist-i {
|
||||
background-position: 0px -7355px;
|
||||
}
|
||||
|
||||
.remarkup-assist-image {
|
||||
background-position: 0px -7370px;
|
||||
}
|
||||
|
||||
.remarkup-assist-ol {
|
||||
background-position: 0px -7385px;
|
||||
}
|
||||
|
||||
.remarkup-assist-tag {
|
||||
background-position: 0px -7400px;
|
||||
}
|
||||
|
||||
.remarkup-assist-tt {
|
||||
background-position: 0px -7415px;
|
||||
}
|
||||
|
||||
.remarkup-assist-ul {
|
||||
background-position: 0px -7430px;
|
||||
}
|
||||
|
||||
.remarkup-assist-help {
|
||||
background-position: 0px -7445px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -247,63 +247,72 @@ img.phabricator-remarkup-embed-image {
|
|||
padding: 3px 6px;
|
||||
}
|
||||
|
||||
|
||||
.remarkup-assist-textarea {
|
||||
border-width: 1px;
|
||||
border-color: #e5e5e5 #999999 #999999;
|
||||
|
||||
/* Prevent Safari and Chrome users from dragging the textarea any wider,
|
||||
because the top bar won't resize along with it. */
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
.remarkup-assist-bar {
|
||||
padding: 2px 0;
|
||||
}
|
||||
height: 27px;
|
||||
padding: 0 2px;
|
||||
|
||||
a.remarkup-assist-button {
|
||||
padding-left: 4px;
|
||||
padding-right: 4px;
|
||||
padding-bottom: 4px;
|
||||
margin-bottom: 3px;
|
||||
border-width: 1px 1px 0;
|
||||
border-style: solid;
|
||||
border-color: #737373 #999999;
|
||||
|
||||
position: relative;
|
||||
background: #f5f5f5;
|
||||
overflow: hidden;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
}
|
||||
|
||||
a.remarkup-assist-button + a.remarkup-assist-button {
|
||||
border-left-width: 0px;
|
||||
.remarkup-assist-button {
|
||||
display: block;
|
||||
padding: 3px;
|
||||
margin: 2px 1px;
|
||||
float: left;
|
||||
|
||||
border: 1px solid transparent;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.remarkup-assist-button:hover {
|
||||
background: #f7f7f7;
|
||||
border-color: #c6c6c6;
|
||||
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.10);
|
||||
}
|
||||
|
||||
.remarkup-assist-button:active {
|
||||
outline: none;
|
||||
background: #f3f3f3;
|
||||
box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.10);
|
||||
}
|
||||
|
||||
.remarkup-assist-button:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.remarkup-assist-separator {
|
||||
display: block;
|
||||
float: left;
|
||||
|
||||
margin: 7px 4px;
|
||||
height: 14px;
|
||||
|
||||
width: 0px;
|
||||
border-right: 1px solid #cccccc;
|
||||
}
|
||||
|
||||
.remarkup-assist {
|
||||
float: left;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
font-weight: normal;
|
||||
display: block;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.remarkup-assist-right {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.remarkup-assist-b {
|
||||
font-family: "Georgia", serif;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.remarkup-assist-i {
|
||||
font-family: "Georgia", serif;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.remarkup-assist-code,
|
||||
.remarkup-assist-tt {
|
||||
text-align: center;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.remarkup-assist-s {
|
||||
font-family: "Georgia", serif;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
.remarkup-assist-ol {
|
||||
font-family: "Georgia", serif;
|
||||
}
|
||||
|
||||
.remarkup-assist-h1 {
|
||||
font-family: "Georgia", serif;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 139 KiB After Width: | Height: | Size: 140 KiB |
|
|
@ -39,9 +39,6 @@ JX.behavior('phabricator-remarkup-assist', function(config) {
|
|||
case 'tt':
|
||||
update(area, '`', sel || 'monospaced text', '`');
|
||||
break;
|
||||
case 's':
|
||||
update(area, '~~', sel || 'strikethrough text', '~~');
|
||||
break;
|
||||
case 'ul':
|
||||
case 'ol':
|
||||
var ch = (action == 'ol') ? ' # ' : ' - ';
|
||||
|
|
@ -59,13 +56,6 @@ JX.behavior('phabricator-remarkup-assist', function(config) {
|
|||
sel = " " + sel.join("\n ");
|
||||
update(area, ((r.start == 0) ? "" : "\n\n"), sel, "\n\n");
|
||||
break;
|
||||
case 'mention':
|
||||
update(area, '@', sel || 'username', '');
|
||||
break;
|
||||
case 'h1':
|
||||
sel = sel || 'Header';
|
||||
update(area, ((r.start == 0) ? "" : "\n\n") + "= ", sel, " =\n\n");
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue