@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
Make the paste creation form work on phones
Summary:
This is the first time I've ever had CSS actually work like it promises it does (i.e., markup the "right" way and then you don't have to change the markup later).
Since I laboriously laid this whole thing out with <divs> originally, I was able to just override some of the styles and make the layout reasonable for devices.
The only differences for existing forms are:
- No colon after labels (looks cleaner anyway).
- Non-error required text is no longer a red star but a the grey word "Required" (this is clearer).
Test Plan:
Viewed paste form on a phone.
Viewed ~20 other forms on the site to verify that I didn't break anything.
Reviewers: btrahan, chad, vrana
Reviewed By: btrahan
CC: aran
Maniphest Tasks: T1569
Differential Revision: https://secure.phabricator.com/D3298
+133
-45
+35
-26
src/__celerity_resource_map__.php
+35
-26
src/__celerity_resource_map__.php
···
534
534
),
535
535
'aphront-form-view-css' =>
536
536
array(
537
-
'uri' => '/res/b60e1526/rsrc/css/aphront/form-view.css',
537
+
'uri' => '/res/2f8cf4e3/rsrc/css/aphront/form-view.css',
538
538
'type' => 'css',
539
539
'requires' =>
540
540
array(
···
2343
2343
),
2344
2344
'disk' => '/rsrc/css/application/flag/flag.css',
2345
2345
),
2346
+
'phabricator-form-view-css' =>
2347
+
array(
2348
+
'uri' => '/res/7609ca21/rsrc/css/layout/phabricator-form-view.css',
2349
+
'type' => 'css',
2350
+
'requires' =>
2351
+
array(
2352
+
),
2353
+
'disk' => '/rsrc/css/layout/phabricator-form-view.css',
2354
+
),
2346
2355
'phabricator-header-view-css' =>
2347
2356
array(
2348
2357
'uri' => '/res/c89cc14d/rsrc/css/layout/phabricator-header-view.css',
···
2876
2885
), array(
2877
2886
'packages' =>
2878
2887
array(
2879
-
'dd49ed34' =>
2888
+
'e3da34c9' =>
2880
2889
array(
2881
2890
'name' => 'core.pkg.css',
2882
2891
'symbols' =>
···
2905
2914
21 => 'phabricator-flag-css',
2906
2915
22 => 'aphront-error-view-css',
2907
2916
),
2908
-
'uri' => '/res/pkg/dd49ed34/core.pkg.css',
2917
+
'uri' => '/res/pkg/e3da34c9/core.pkg.css',
2909
2918
'type' => 'css',
2910
2919
),
2911
2920
'971b021e' =>
···
3072
3081
'reverse' =>
3073
3082
array(
3074
3083
'aphront-attached-file-view-css' => '7839ae2d',
3075
-
'aphront-crumbs-view-css' => 'dd49ed34',
3076
-
'aphront-dialog-view-css' => 'dd49ed34',
3077
-
'aphront-error-view-css' => 'dd49ed34',
3078
-
'aphront-form-view-css' => 'dd49ed34',
3084
+
'aphront-crumbs-view-css' => 'e3da34c9',
3085
+
'aphront-dialog-view-css' => 'e3da34c9',
3086
+
'aphront-error-view-css' => 'e3da34c9',
3087
+
'aphront-form-view-css' => 'e3da34c9',
3079
3088
'aphront-headsup-action-list-view-css' => '19ebcc79',
3080
-
'aphront-headsup-view-css' => 'dd49ed34',
3081
-
'aphront-list-filter-view-css' => 'dd49ed34',
3082
-
'aphront-pager-view-css' => 'dd49ed34',
3083
-
'aphront-panel-view-css' => 'dd49ed34',
3084
-
'aphront-side-nav-view-css' => 'dd49ed34',
3085
-
'aphront-table-view-css' => 'dd49ed34',
3086
-
'aphront-tokenizer-control-css' => 'dd49ed34',
3087
-
'aphront-tooltip-css' => 'dd49ed34',
3088
-
'aphront-typeahead-control-css' => 'dd49ed34',
3089
+
'aphront-headsup-view-css' => 'e3da34c9',
3090
+
'aphront-list-filter-view-css' => 'e3da34c9',
3091
+
'aphront-pager-view-css' => 'e3da34c9',
3092
+
'aphront-panel-view-css' => 'e3da34c9',
3093
+
'aphront-side-nav-view-css' => 'e3da34c9',
3094
+
'aphront-table-view-css' => 'e3da34c9',
3095
+
'aphront-tokenizer-control-css' => 'e3da34c9',
3096
+
'aphront-tooltip-css' => 'e3da34c9',
3097
+
'aphront-typeahead-control-css' => 'e3da34c9',
3089
3098
'differential-changeset-view-css' => '19ebcc79',
3090
3099
'differential-core-view-css' => '19ebcc79',
3091
3100
'differential-inline-comment-editor' => '26972e06',
···
3151
3160
'javelin-workflow' => '971b021e',
3152
3161
'maniphest-task-summary-css' => '7839ae2d',
3153
3162
'maniphest-transaction-detail-css' => '7839ae2d',
3154
-
'phabricator-app-buttons-css' => 'dd49ed34',
3163
+
'phabricator-app-buttons-css' => 'e3da34c9',
3155
3164
'phabricator-content-source-view-css' => '19ebcc79',
3156
-
'phabricator-core-buttons-css' => 'dd49ed34',
3157
-
'phabricator-core-css' => 'dd49ed34',
3158
-
'phabricator-directory-css' => 'dd49ed34',
3165
+
'phabricator-core-buttons-css' => 'e3da34c9',
3166
+
'phabricator-core-css' => 'e3da34c9',
3167
+
'phabricator-directory-css' => 'e3da34c9',
3159
3168
'phabricator-drag-and-drop-file-upload' => '26972e06',
3160
3169
'phabricator-dropdown-menu' => '971b021e',
3161
-
'phabricator-flag-css' => 'dd49ed34',
3162
-
'phabricator-jump-nav' => 'dd49ed34',
3170
+
'phabricator-flag-css' => 'e3da34c9',
3171
+
'phabricator-jump-nav' => 'e3da34c9',
3163
3172
'phabricator-keyboard-shortcut' => '971b021e',
3164
3173
'phabricator-keyboard-shortcut-manager' => '971b021e',
3165
3174
'phabricator-menu-item' => '971b021e',
···
3167
3176
'phabricator-paste-file-upload' => '971b021e',
3168
3177
'phabricator-prefab' => '971b021e',
3169
3178
'phabricator-project-tag-css' => '7839ae2d',
3170
-
'phabricator-remarkup-css' => 'dd49ed34',
3179
+
'phabricator-remarkup-css' => 'e3da34c9',
3171
3180
'phabricator-shaped-request' => '26972e06',
3172
-
'phabricator-standard-page-view' => 'dd49ed34',
3181
+
'phabricator-standard-page-view' => 'e3da34c9',
3173
3182
'phabricator-tooltip' => '971b021e',
3174
-
'phabricator-transaction-view-css' => 'dd49ed34',
3175
-
'syntax-highlighting-css' => 'dd49ed34',
3183
+
'phabricator-transaction-view-css' => 'e3da34c9',
3184
+
'syntax-highlighting-css' => 'e3da34c9',
3176
3185
),
3177
3186
));
+5
-6
src/applications/paste/controller/PhabricatorPasteListController.php
+5
-6
src/applications/paste/controller/PhabricatorPasteListController.php
···
238
238
$new_paste = $this->getPaste();
239
239
240
240
$form = new AphrontFormView();
241
+
$form->setFlexible(true);
241
242
242
243
$available_languages = PhabricatorEnv::getEnvConfig(
243
244
'pygments.dropdown-choices');
···
281
282
->addCancelButton('/paste/')
282
283
->setValue('Create Paste'));
283
284
284
-
$create_panel = new AphrontPanelView();
285
-
$create_panel->setWidth(AphrontPanelView::WIDTH_FULL);
286
-
$create_panel->setHeader('Create a Paste');
287
-
$create_panel->appendChild($form);
288
-
289
-
return $create_panel;
285
+
return array(
286
+
id(new PhabricatorHeaderView())->setHeader('Create Paste'),
287
+
$form,
288
+
);
290
289
}
291
290
292
291
private function buildPasteList(array $pastes) {
+19
-3
src/view/form/AphrontFormView.php
+19
-3
src/view/form/AphrontFormView.php
···
26
26
private $user;
27
27
private $workflow;
28
28
private $id;
29
+
private $flexible;
30
+
31
+
public function setFlexible($flexible) {
32
+
$this->flexible = $flexible;
33
+
return $this;
34
+
}
29
35
30
36
public function setID($id) {
31
37
$this->id = $id;
···
63
69
}
64
70
65
71
public function render() {
72
+
if ($this->flexible) {
73
+
require_celerity_resource('phabricator-form-view-css');
74
+
}
66
75
require_celerity_resource('aphront-form-view-css');
67
76
68
77
Javelin::initBehavior('aphront-form-disable-on-submit');
69
78
70
-
$layout = id(new AphrontFormLayoutView())
71
-
->setBackgroundShading(true)
72
-
->setPadded(true)
79
+
$layout = new AphrontFormLayoutView();
80
+
81
+
if (!$this->flexible) {
82
+
$layout
83
+
->setBackgroundShading(true)
84
+
->setPadded(true);
85
+
}
86
+
87
+
$layout
73
88
->appendChild($this->renderDataInputs())
74
89
->appendChild($this->renderChildren());
75
90
···
80
95
return phabricator_render_form(
81
96
$this->user,
82
97
array(
98
+
'class' => $this->flexible ? 'phabricator-form-view' : null,
83
99
'action' => $this->action,
84
100
'method' => $this->method,
85
101
'enctype' => $this->encType,
+12
-9
src/view/form/control/AphrontFormControl.php
+12
-9
src/view/form/control/AphrontFormControl.php
···
1
1
<?php
2
2
3
3
/*
4
-
* Copyright 2011 Facebook, Inc.
4
+
* Copyright 2012 Facebook, Inc.
5
5
*
6
6
* Licensed under the Apache License, Version 2.0 (the "License");
7
7
* you may not use this file except in compliance with the License.
···
127
127
$label =
128
128
'<label class="aphront-form-label">'.
129
129
phutil_escape_html($this->getLabel()).
130
-
':'.
131
130
'</label>';
132
131
} else {
133
132
$label = null;
···
142
141
if (strlen($this->getError())) {
143
142
$error = $this->getError();
144
143
if ($error === true) {
145
-
$error = '*';
144
+
$error =
145
+
'<div class="aphront-form-error aphront-form-required">'.
146
+
'Required'.
147
+
'</div>';
146
148
} else {
147
-
$error = "\xC2\xAB ".$error;
149
+
$error =
150
+
'<div class="aphront-form-error">'.
151
+
phutil_escape_html($error).
152
+
'</div>';
148
153
}
149
-
$error =
150
-
'<div class="aphront-form-error">'.
151
-
phutil_escape_html($error).
152
-
'</div>';
153
154
} else {
154
155
$error = null;
155
156
}
···
170
171
'id' => $this->controlID,
171
172
'style' => $this->controlStyle,
172
173
),
173
-
$error.
174
174
$label.
175
+
$error.
175
176
$input.
176
177
$caption.
178
+
179
+
// TODO: Remove this once the redesign finishes up.
177
180
'<div style="clear: both;"></div>');
178
181
}
179
182
}
+6
-1
webroot/rsrc/css/aphront/form-view.css
+6
-1
webroot/rsrc/css/aphront/form-view.css
···
40
40
padding-top: 4px;
41
41
}
42
42
43
+
.aphront-form-required {
44
+
font-weight: normal;
45
+
color: #888888;
46
+
font-size: 11px;
47
+
}
48
+
43
49
.aphront-form-input input,
44
50
.aphront-form-input textarea {
45
51
font-size: 12px;
···
78
84
font-size: 11px;
79
85
color: #444444;
80
86
text-align: right;
81
-
clear: both;
82
87
margin-right: 25%;
83
88
margin-left: 20%;
84
89
}
+56
webroot/rsrc/css/layout/phabricator-form-view.css
+56
webroot/rsrc/css/layout/phabricator-form-view.css
···
1
+
/**
2
+
* @provides phabricator-form-view-css
3
+
*/
4
+
5
+
.phabricator-form-view {
6
+
padding: .75em;
7
+
overflow: hidden;
8
+
9
+
background: #f9f9f9;
10
+
11
+
border-width: 1px 0;
12
+
border-style: solid;
13
+
border-color: #dbdbdb;
14
+
}
15
+
16
+
17
+
.device-tablet .phabricator-form-view .aphront-form-control .aphront-form-label,
18
+
.device-phone .phabricator-form-view .aphront-form-control .aphront-form-label {
19
+
display: block;
20
+
float: none;
21
+
text-align: left;
22
+
margin: 0;
23
+
padding: 0;
24
+
}
25
+
26
+
.device-tablet .phabricator-form-view .aphront-form-control
27
+
.aphront-form-caption,
28
+
.device-phone .phabricator-form-view .aphront-form-control
29
+
.aphront-form-caption {
30
+
display: block;
31
+
float: none;
32
+
text-align: left;
33
+
margin: 0;
34
+
padding: 0;
35
+
}
36
+
37
+
.device-tablet .phabricator-form-view .aphront-form-control
38
+
.aphront-form-input,
39
+
.device-phone .phabricator-form-view .aphront-form-control
40
+
.aphront-form-input {
41
+
float: none;
42
+
display: block;
43
+
text-align: left;
44
+
margin: .25em 0 0 0;
45
+
width: 99%;
46
+
padding: 0;
47
+
}
48
+
49
+
.device-tablet .phabricator-form-view .aphront-form-control .aphront-form-error,
50
+
.device-phone .phabricator-form-view .aphront-form-control .aphront-form-error {
51
+
float: none;
52
+
text-align: left;
53
+
display: block;
54
+
margin: 0;
55
+
padding: 0;
56
+
}