@recaptime-dev's working patches + fork for Phorge, a community fork of Phabricator. (Upstream dev and stable branches are at upstream/main and upstream/stable respectively.)
hq.recaptime.dev/wiki/Phorge
phorge
phabricator
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
+177
-93
+19
-18
resources/celerity/map.php
+19
-18
resources/celerity/map.php
···
9
9
'names' => array(
10
10
'conpherence.pkg.css' => '82aca405',
11
11
'conpherence.pkg.js' => '6249a1cf',
12
-
'core.pkg.css' => 'dc689e29',
13
-
'core.pkg.js' => '1fa7c0c5',
12
+
'core.pkg.css' => 'acd257dc',
13
+
'core.pkg.js' => '021685f1',
14
14
'darkconsole.pkg.js' => 'e7393ebb',
15
15
'differential.pkg.css' => '90b30783',
16
16
'differential.pkg.js' => 'ddfeb49b',
···
108
108
'rsrc/css/application/tokens/tokens.css' => '3d0f239e',
109
109
'rsrc/css/application/uiexample/example.css' => '528b19de',
110
110
'rsrc/css/core/core.css' => '9f4cb463',
111
-
'rsrc/css/core/remarkup.css' => '2d793c5b',
111
+
'rsrc/css/core/remarkup.css' => '17c0fb37',
112
112
'rsrc/css/core/syntax.css' => '769d3498',
113
113
'rsrc/css/core/z-index.css' => '5e72c4e0',
114
114
'rsrc/css/diviner/diviner-shared.css' => '896f1d43',
···
136
136
'rsrc/css/phui/phui-button.css' => '14bfba79',
137
137
'rsrc/css/phui/phui-chart.css' => '6bf6f78e',
138
138
'rsrc/css/phui/phui-cms.css' => '504b4b23',
139
-
'rsrc/css/phui/phui-comment-form.css' => '48fbd65d',
139
+
'rsrc/css/phui/phui-comment-form.css' => '7d903c2d',
140
140
'rsrc/css/phui/phui-comment-panel.css' => 'f50152ad',
141
141
'rsrc/css/phui/phui-crumbs-view.css' => '6ece3bbb',
142
142
'rsrc/css/phui/phui-curtain-view.css' => '947bf1a4',
···
503
503
'rsrc/js/core/behavior-object-selector.js' => 'e0ec7f2f',
504
504
'rsrc/js/core/behavior-oncopy.js' => '2926fff2',
505
505
'rsrc/js/core/behavior-phabricator-nav.js' => '08675c6d',
506
-
'rsrc/js/core/behavior-phabricator-remarkup-assist.js' => '0c61d4e3',
506
+
'rsrc/js/core/behavior-phabricator-remarkup-assist.js' => 'a0777ea3',
507
507
'rsrc/js/core/behavior-read-only-warning.js' => 'ba158207',
508
508
'rsrc/js/core/behavior-refresh-csrf.js' => 'ab2f381b',
509
509
'rsrc/js/core/behavior-remarkup-preview.js' => '4b700e9e',
···
664
664
'javelin-behavior-phabricator-notification-example' => '8ce821c5',
665
665
'javelin-behavior-phabricator-object-selector' => 'e0ec7f2f',
666
666
'javelin-behavior-phabricator-oncopy' => '2926fff2',
667
-
'javelin-behavior-phabricator-remarkup-assist' => '0c61d4e3',
667
+
'javelin-behavior-phabricator-remarkup-assist' => 'a0777ea3',
668
668
'javelin-behavior-phabricator-reveal-content' => '60821bc7',
669
669
'javelin-behavior-phabricator-search-typeahead' => '06c32383',
670
670
'javelin-behavior-phabricator-show-older-transactions' => '94c65b72',
···
793
793
'phabricator-object-selector-css' => '85ee8ce6',
794
794
'phabricator-phtize' => 'd254d646',
795
795
'phabricator-prefab' => '8d40ae75',
796
-
'phabricator-remarkup-css' => '2d793c5b',
796
+
'phabricator-remarkup-css' => '17c0fb37',
797
797
'phabricator-search-results-css' => '64ad079a',
798
798
'phabricator-shaped-request' => '7cbe244b',
799
799
'phabricator-slowvote-css' => 'a94b7230',
···
836
836
'phui-calendar-month-css' => '8e10e92c',
837
837
'phui-chart-css' => '6bf6f78e',
838
838
'phui-cms-css' => '504b4b23',
839
-
'phui-comment-form-css' => '48fbd65d',
839
+
'phui-comment-form-css' => '7d903c2d',
840
840
'phui-comment-panel-css' => 'f50152ad',
841
841
'phui-crumbs-view-css' => '6ece3bbb',
842
842
'phui-curtain-view-css' => '947bf1a4',
···
988
988
'javelin-dom',
989
989
'javelin-router',
990
990
),
991
-
'0c61d4e3' => array(
992
-
'javelin-behavior',
993
-
'javelin-stratcom',
994
-
'javelin-dom',
995
-
'phabricator-phtize',
996
-
'phabricator-textareautils',
997
-
'javelin-workflow',
998
-
'javelin-vector',
999
-
'phuix-autocomplete',
1000
-
),
1001
991
'0f764c35' => array(
1002
992
'javelin-install',
1003
993
'javelin-util',
···
1704
1694
'javelin-stratcom',
1705
1695
'javelin-dom',
1706
1696
'javelin-vector',
1697
+
),
1698
+
'a0777ea3' => array(
1699
+
'javelin-behavior',
1700
+
'javelin-stratcom',
1701
+
'javelin-dom',
1702
+
'phabricator-phtize',
1703
+
'phabricator-textareautils',
1704
+
'javelin-workflow',
1705
+
'javelin-vector',
1706
+
'phuix-autocomplete',
1707
+
'javelin-mask',
1707
1708
),
1708
1709
'a0b57eb8' => array(
1709
1710
'javelin-behavior',
-9
src/view/form/control/PhabricatorRemarkupControl.php
-9
src/view/form/control/PhabricatorRemarkupControl.php
···
172
172
'align' => 'right',
173
173
);
174
174
175
-
$actions[] = array(
176
-
'spacer' => true,
177
-
'align' => 'right',
178
-
);
179
-
180
175
$actions['fa-book'] = array(
181
176
'tip' => pht('Help'),
182
177
'align' => 'right',
···
200
195
}
201
196
202
197
if ($mode_actions) {
203
-
$actions[] = array(
204
-
'spacer' => true,
205
-
'align' => 'right',
206
-
);
207
198
$actions += $mode_actions;
208
199
}
209
200
+152
-65
webroot/rsrc/css/core/remarkup.css
+152
-65
webroot/rsrc/css/core/remarkup.css
···
558
558
559
559
.remarkup-assist-button {
560
560
display: block;
561
-
margin-top: 2px;
562
-
padding: 4px 5px;
561
+
margin-top: 4px;
562
+
height: 20px;
563
+
padding: 2px 5px 3px;
564
+
line-height: 18px;
565
+
width: 16px;
563
566
float: left;
567
+
border-radius: 3px;
564
568
}
565
569
566
570
.remarkup-assist-button:hover .phui-icon-view.phui-font-fa {
···
617
621
opacity: 1.0;
618
622
}
619
623
620
-
.remarkup-control-fullscreen-mode {
621
-
position: fixed;
622
-
top: -1px;
623
-
bottom: -1px;
624
-
left: -1px;
625
-
right: -1px;
626
-
}
627
-
628
-
.remarkup-control-fullscreen-mode textarea.remarkup-assist-textarea {
629
-
position: absolute;
630
-
top: 32px;
631
-
left: 0;
632
-
right: 0;
633
-
bottom: 0;
634
-
/* NOTE: This doesn't work in Firefox, there's a JS behavior to correct it. */
635
-
height: auto;
636
-
border-width: 1px 0 0 0;
637
-
outline: none;
638
-
resize: none;
639
-
background: #fff !important;
640
-
}
641
-
642
-
.remarkup-control-fullscreen-mode textarea.remarkup-assist-textarea:focus {
643
-
border-color: none;
644
-
box-shadow: none;
645
-
}
646
-
647
-
.remarkup-control-fullscreen-mode .remarkup-assist-button .fa-arrows-alt {
648
-
color: {$sky};
649
-
}
650
-
651
624
.phabricator-image-macro-hero {
652
625
margin: auto;
653
626
max-width: 95%;
···
673
646
padding: 0 4px;
674
647
}
675
648
676
-
.remarkup-inline-preview {
677
-
display: block;
678
-
position: relative;
679
-
background: #fff;
680
-
overflow-y: auto;
681
-
box-sizing: border-box;
682
-
width: 100%;
683
-
border: 1px solid {$sky};
684
-
resize: vertical;
685
-
padding: 4px 6px;
686
-
}
687
-
688
-
.remarkup-control-fullscreen-mode .remarkup-inline-preview {
689
-
resize: none;
690
-
}
691
-
692
-
.remarkup-inline-preview * {
693
-
resize: none;
694
-
}
695
-
696
-
.remarkup-assist-button.preview-active {
697
-
background: {$sky};
698
-
}
699
-
700
-
.remarkup-assist-button.preview-active .phui-icon-view {
701
-
color: #ffffff;
702
-
}
703
-
704
-
.remarkup-assist-button.preview-active:hover .phui-icon-view {
705
-
color: {$lightsky};
706
-
}
707
-
708
649
.device .remarkup-assist-nodevice {
709
650
display: none;
710
651
}
652
+
653
+
/* - Autocomplete ----------------------------------------------------------- */
711
654
712
655
.phuix-autocomplete {
713
656
position: absolute;
···
764
707
color: #000;
765
708
}
766
709
710
+
711
+
/* - Pinned ----------------------------------------------------------------- */
712
+
767
713
.phui-box.phui-object-box.phui-comment-form-view.remarkup-assist-pinned {
768
714
position: fixed;
769
715
background-color: #ffffff;
···
783
729
.remarkup-assist-pinned-spacer {
784
730
position: relative;
785
731
}
732
+
733
+
734
+
/* - Preview ---------------------------------------------------------------- */
735
+
736
+
.remarkup-inline-preview {
737
+
display: block;
738
+
position: relative;
739
+
background: #fff;
740
+
overflow-y: auto;
741
+
box-sizing: border-box;
742
+
width: 100%;
743
+
resize: vertical;
744
+
padding: 8px;
745
+
border: 1px solid {$lightblueborder};
746
+
border-top: none;
747
+
-webkit-font-smoothing: antialiased;
748
+
}
749
+
750
+
.remarkup-control-fullscreen-mode .remarkup-inline-preview {
751
+
resize: none;
752
+
}
753
+
754
+
.remarkup-inline-preview * {
755
+
resize: none;
756
+
}
757
+
758
+
.remarkup-assist-button.preview-active {
759
+
background: {$sky};
760
+
}
761
+
762
+
.remarkup-assist-button.preview-active .phui-icon-view {
763
+
color: #fff;
764
+
}
765
+
766
+
.remarkup-assist-button.preview-active:hover {
767
+
text-decoration: none;
768
+
}
769
+
770
+
.remarkup-assist-button.preview-active:hover .phui-icon-view {
771
+
color: #fff;
772
+
}
773
+
774
+
.remarkup-preview-active .remarkup-assist,
775
+
.remarkup-preview-active .remarkup-assist-separator {
776
+
opacity: .2;
777
+
transition: all 100ms cubic-bezier(0.250, 0.250, 0.750, 0.750);
778
+
transition-timing-function: cubic-bezier(0.250, 0.250, 0.750, 0.750);
779
+
}
780
+
781
+
.remarkup-preview-active .remarkup-assist-button {
782
+
pointer-events: none;
783
+
cursor: default;
784
+
}
785
+
786
+
.remarkup-preview-active .remarkup-assist-button.preview-active {
787
+
pointer-events: inherit;
788
+
cursor: pointer;
789
+
}
790
+
791
+
.remarkup-preview-active .remarkup-assist.fa-eye {
792
+
opacity: 1;
793
+
transition: all 100ms cubic-bezier(0.250, 0.250, 0.750, 0.750);
794
+
transition-timing-function: cubic-bezier(0.250, 0.250, 0.750, 0.750);
795
+
}
796
+
797
+
798
+
/* - Fullscreen ------------------------------------------------------------- */
799
+
800
+
.remarkup-fullscreen-mode {
801
+
overflow: hidden;
802
+
}
803
+
804
+
.remarkup-control-fullscreen-mode {
805
+
position: fixed;
806
+
border: none;
807
+
top: 32px;
808
+
bottom: 32px;
809
+
left: 64px;
810
+
right: 64px;
811
+
border-radius: 3px;
812
+
box-shadow: 0px 4px 32px #555;
813
+
}
814
+
815
+
.remarkup-control-fullscreen-mode .remarkup-assist-button {
816
+
padding: 1px 6px 4px;
817
+
font-size: 15px;
818
+
}
819
+
820
+
.remarkup-control-fullscreen-mode .remarkup-assist-button .remarkup-assist {
821
+
height: 16px;
822
+
width: 16px;
823
+
}
824
+
825
+
.aphront-form-input .remarkup-control-fullscreen-mode .remarkup-assist-bar {
826
+
border: none;
827
+
border-top-left-radius: 3px;
828
+
border-top-right-radius: 3px;
829
+
height: 32px;
830
+
padding: 4px 8px;
831
+
background: {$bluebackground};
832
+
}
833
+
834
+
.aphront-form-control .remarkup-control-fullscreen-mode
835
+
textarea.remarkup-assist-textarea {
836
+
position: absolute;
837
+
top: 39px;
838
+
left: 0;
839
+
right: 0;
840
+
height: calc(100% - 36px) !important;
841
+
padding: 16px;
842
+
font-size: {$biggerfontsize};
843
+
line-height: 1.51em;
844
+
border-width: 1px 0 0 0;
845
+
outline: none;
846
+
resize: none;
847
+
background: #fff !important;
848
+
}
849
+
850
+
.remarkup-control-fullscreen-mode textarea.remarkup-assist-textarea:focus {
851
+
border-color: {$thinblueborder};
852
+
box-shadow: none;
853
+
}
854
+
855
+
.remarkup-control-fullscreen-mode .remarkup-inline-preview {
856
+
font-size: {$biggerfontsize};
857
+
border: none;
858
+
padding: 16px;
859
+
border-bottom-left-radius: 3px;
860
+
border-bottom-right-radius: 3px;
861
+
}
862
+
863
+
.remarkup-control-fullscreen-mode .remarkup-assist-button .fa-arrows-alt {
864
+
color: {$sky};
865
+
}
866
+
867
+
.device-phone .remarkup-control-fullscreen-mode {
868
+
top: 0;
869
+
bottom: 0;
870
+
left: 0;
871
+
right: 0;
872
+
}
+1
-1
webroot/rsrc/css/phui/phui-comment-form.css
+1
-1
webroot/rsrc/css/phui/phui-comment-form.css
+5
webroot/rsrc/js/core/behavior-phabricator-remarkup-assist.js
+5
webroot/rsrc/js/core/behavior-phabricator-remarkup-assist.js
···
8
8
* javelin-workflow
9
9
* javelin-vector
10
10
* phuix-autocomplete
11
+
* javelin-mask
11
12
*/
12
13
13
14
JX.behavior('phabricator-remarkup-assist', function(config) {
···
39
40
if (edit_mode == 'fa-arrows-alt') {
40
41
JX.DOM.alterClass(edit_root, 'remarkup-control-fullscreen-mode', false);
41
42
JX.DOM.alterClass(document.body, 'remarkup-fullscreen-mode', false);
43
+
JX.Mask.hide('jx-light-mask');
42
44
}
43
45
44
46
area.style.height = '';
···
59
61
if (mode == 'fa-arrows-alt') {
60
62
JX.DOM.alterClass(edit_root, 'remarkup-control-fullscreen-mode', true);
61
63
JX.DOM.alterClass(document.body, 'remarkup-fullscreen-mode', true);
64
+
JX.Mask.show('jx-light-mask');
62
65
63
66
// If we're in preview mode, expand the preview to full-size.
64
67
if (preview) {
···
275
278
276
279
area.parentNode.insertBefore(preview, area);
277
280
JX.DOM.alterClass(button, 'preview-active', true);
281
+
JX.DOM.alterClass(root, 'remarkup-preview-active', true);
278
282
resize_preview();
279
283
JX.DOM.hide(area);
280
284
···
286
290
preview = null;
287
291
288
292
JX.DOM.alterClass(button, 'preview-active', false);
293
+
JX.DOM.alterClass(root, 'remarkup-preview-active', false);
289
294
}
290
295
break;
291
296
case 'fa-thumb-tack':