revi-archive/phorge-phorge
1
0
Fork 0
mirror of https://we.phorge.it/source/phorge.git synced 2024-11-22 23:02:42 +01:00
Code Issues Releases Wiki Activity

Cleaner fullscreen / preview states for Remarkup bar

Browse source 
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
This commit is contained in:
Chad Little 2017-03-27 09:19:12 -07:00
parent e41c25de50
commit 76404c5fdb
5 changed files with 177 additions and 93 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

37
resources/celerity/map.php
View file

@ -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',

9
src/view/form/control/PhabricatorRemarkupControl.php
View file

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

217
webroot/rsrc/css/core/remarkup.css
View file

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

2
webroot/rsrc/css/phui/phui-comment-form.css
View file

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

5
webroot/rsrc/js/core/behavior-phabricator-remarkup-assist.js
View file

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