1
0
Fork 0
mirror of https://we.phorge.it/source/phorge.git synced 2024-12-23 05:50:55 +01:00

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

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

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

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

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

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