@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 workboards truly 'fixed' in display
Summary:
**WIP**
This sets a shadow fixed to the full screen of the browser for which panels to live in. I have some minor things to fix, but play with it.
Specifically I haven't been able to dig up when stuff that overflowwed, doesn't always render even after scroll.
Test Plan: Test on a board with many tasks, many panels, small screens. Test on mobile too!
Reviewers: epriestley, btrahan
Reviewed By: btrahan
Subscribers: qgil, epriestley, Korvin
Differential Revision: https://secure.phabricator.com/D9005
+68
-54
+11
-11
resources/celerity/map.php
+11
-11
resources/celerity/map.php
···
7
7
return array(
8
8
'names' =>
9
9
array(
10
-
'core.pkg.css' => '989eee69',
10
+
'core.pkg.css' => '719389b0',
11
11
'core.pkg.js' => 'b2ed04a2',
12
12
'darkconsole.pkg.js' => 'ca8671ce',
13
13
'differential.pkg.css' => '4b8686e3',
···
24
24
'rsrc/css/aphront/error-view.css' => '9f1d5518',
25
25
'rsrc/css/aphront/lightbox-attachment.css' => '7acac05d',
26
26
'rsrc/css/aphront/list-filter-view.css' => '2ae43867',
27
-
'rsrc/css/aphront/multi-column.css' => '667ca7b8',
27
+
'rsrc/css/aphront/multi-column.css' => '1b95ab2e',
28
28
'rsrc/css/aphront/notification.css' => 'ef2c9b34',
29
29
'rsrc/css/aphront/pager-view.css' => '2e3539af',
30
30
'rsrc/css/aphront/panel-view.css' => '5846dfa2',
···
132
132
'rsrc/css/phui/phui-fontkit.css' => 'de84aa4a',
133
133
'rsrc/css/phui/phui-form-view.css' => '867463b4',
134
134
'rsrc/css/phui/phui-form.css' => 'b78ec020',
135
-
'rsrc/css/phui/phui-header-view.css' => '5b79f0ef',
135
+
'rsrc/css/phui/phui-header-view.css' => '5d245c9c',
136
136
'rsrc/css/phui/phui-icon.css' => '215fa314',
137
137
'rsrc/css/phui/phui-info-panel.css' => '27ea50a1',
138
138
'rsrc/css/phui/phui-list.css' => 'ef8035b6',
139
139
'rsrc/css/phui/phui-object-box.css' => 'ce92d8ec',
140
-
'rsrc/css/phui/phui-object-item-list-view.css' => '24444832',
140
+
'rsrc/css/phui/phui-object-item-list-view.css' => '3bf8e1c9',
141
141
'rsrc/css/phui/phui-pinboard-view.css' => 'e7d3b05e',
142
142
'rsrc/css/phui/phui-property-list-view.css' => 'af4b381f',
143
143
'rsrc/css/phui/phui-remarkup-preview.css' => '19ad512b',
···
146
146
'rsrc/css/phui/phui-tag-view.css' => '295d81c4',
147
147
'rsrc/css/phui/phui-text.css' => '23e9b4b7',
148
148
'rsrc/css/phui/phui-timeline-view.css' => '15ff2a9f',
149
-
'rsrc/css/phui/phui-workboard-view.css' => '84f2c272',
150
-
'rsrc/css/phui/phui-workpanel-view.css' => 'b6ccc22d',
149
+
'rsrc/css/phui/phui-workboard-view.css' => '2bf82d00',
150
+
'rsrc/css/phui/phui-workpanel-view.css' => '97b69459',
151
151
'rsrc/css/sprite-actions.css' => '969ad0e5',
152
152
'rsrc/css/sprite-apps-large.css' => '3e3ec4c3',
153
153
'rsrc/css/sprite-apps-xlarge.css' => 'db66c878',
···
495
495
'aphront-dialog-view-css' => 'c01d24b4',
496
496
'aphront-error-view-css' => '9f1d5518',
497
497
'aphront-list-filter-view-css' => '2ae43867',
498
-
'aphront-multi-column-view-css' => '667ca7b8',
498
+
'aphront-multi-column-view-css' => '1b95ab2e',
499
499
'aphront-pager-view-css' => '2e3539af',
500
500
'aphront-panel-view-css' => '5846dfa2',
501
501
'aphront-request-failure-view-css' => 'da14df31',
···
761
761
'phui-fontkit-css' => 'de84aa4a',
762
762
'phui-form-css' => 'b78ec020',
763
763
'phui-form-view-css' => '867463b4',
764
-
'phui-header-view-css' => '5b79f0ef',
764
+
'phui-header-view-css' => '5d245c9c',
765
765
'phui-icon-view-css' => '215fa314',
766
766
'phui-info-panel-css' => '27ea50a1',
767
767
'phui-list-view-css' => 'ef8035b6',
768
768
'phui-object-box-css' => 'ce92d8ec',
769
-
'phui-object-item-list-view-css' => '24444832',
769
+
'phui-object-item-list-view-css' => '3bf8e1c9',
770
770
'phui-pinboard-view-css' => 'e7d3b05e',
771
771
'phui-property-list-view-css' => 'af4b381f',
772
772
'phui-remarkup-preview-css' => '19ad512b',
···
775
775
'phui-tag-view-css' => '295d81c4',
776
776
'phui-text-css' => '23e9b4b7',
777
777
'phui-timeline-view-css' => '15ff2a9f',
778
-
'phui-workboard-view-css' => '84f2c272',
779
-
'phui-workpanel-view-css' => 'b6ccc22d',
778
+
'phui-workboard-view-css' => '2bf82d00',
779
+
'phui-workpanel-view-css' => '97b69459',
780
780
'phuix-action-list-view' => 'b5c256b8',
781
781
'phuix-action-view' => '19a0b148',
782
782
'phuix-dropdown-menu' => 'bd4c8dca',
+21
-31
src/applications/project/controller/PhabricatorProjectBoardViewController.php
+21
-31
src/applications/project/controller/PhabricatorProjectBoardViewController.php
···
150
150
$board->addPanel($panel);
151
151
}
152
152
153
-
$crumbs = $this->buildApplicationCrumbs();
154
-
$crumbs->addTextCrumb(pht('Board'));
155
-
156
153
$can_edit = PhabricatorPolicyFilter::hasCapability(
157
154
$viewer,
158
155
$project,
159
156
PhabricatorPolicyCapability::CAN_EDIT);
160
157
161
-
$actions = id(new PhabricatorActionListView())
162
-
->setUser($viewer)
163
-
->addAction(
164
-
id(new PhabricatorActionView())
165
-
->setName(pht('Add Column'))
166
-
->setHref($this->getApplicationURI('board/'.$this->id.'/edit/'))
167
-
->setIcon('create')
168
-
->setDisabled(!$can_edit)
169
-
->setWorkflow(!$can_edit));
158
+
$add_icon = id(new PHUIIconView())
159
+
->setIconFont('fa-plus bluegrey');
170
160
171
-
$plist = id(new PHUIPropertyListView());
161
+
$add_button = id(new PHUIButtonView())
162
+
->setText(pht('Add Column'))
163
+
->setIcon($add_icon)
164
+
->setTag('a')
165
+
->setHref($this->getApplicationURI('board/'.$this->id.'/edit/'))
166
+
->setDisabled(!$can_edit)
167
+
->setWorkflow(!$can_edit);
172
168
173
-
// TODO: Need this to get actions to render.
174
-
$plist->addProperty(
175
-
pht('Project Boards'),
176
-
phutil_tag(
177
-
'em',
178
-
array(),
179
-
pht(
180
-
'This feature is beta, but should mostly work.')));
181
-
$plist->setActionList($actions);
169
+
$header_link = phutil_tag(
170
+
'a',
171
+
array(
172
+
'href' => $this->getApplicationURI('view/'.$project->getID().'/')
173
+
),
174
+
$project->getName());
182
175
183
176
$header = id(new PHUIHeaderView())
184
-
->setHeader($project->getName())
177
+
->setHeader($header_link)
185
178
->setUser($viewer)
179
+
->setNoBackground(true)
186
180
->setImage($project->getProfileImageURI())
181
+
->setImageURL($this->getApplicationURI('view/'.$project->getID().'/'))
182
+
->addActionLink($add_button)
187
183
->setPolicyObject($project);
188
-
189
-
$box = id(new PHUIObjectBoxView())
190
-
->setHeader($header)
191
-
->addPropertyList($plist);
192
184
193
185
$board_box = id(new PHUIBoxView())
194
186
->appendChild($board)
195
-
->addClass('project-board-wrapper')
196
-
->addMargin(PHUI::MARGIN_LARGE);
187
+
->addClass('project-board-wrapper');
197
188
198
189
return $this->buildApplicationPage(
199
190
array(
200
-
$crumbs,
201
-
$box,
191
+
$header,
202
192
$board_box,
203
193
),
204
194
array(
+9
-2
src/view/phui/PHUIHeaderView.php
+9
-2
src/view/phui/PHUIHeaderView.php
···
8
8
private $header;
9
9
private $tags = array();
10
10
private $image;
11
+
private $imageURL = null;
11
12
private $subheader;
12
13
private $gradient;
13
14
private $noBackground;
···
39
40
40
41
public function setImage($uri) {
41
42
$this->image = $uri;
43
+
return $this;
44
+
}
45
+
46
+
public function setImageURL($url) {
47
+
$this->imageURL = $url;
42
48
return $this;
43
49
}
44
50
···
128
134
$image = null;
129
135
if ($this->image) {
130
136
$image = phutil_tag(
131
-
'span',
137
+
($this->imageURL ? 'a' : 'span'),
132
138
array(
139
+
'href' => $this->imageURL,
133
140
'class' => 'phui-header-image',
134
141
'style' => 'background-image: url('.$this->image.')',
135
142
),
136
-
'');
143
+
' ');
137
144
$classes[] = 'phui-header-has-image';
138
145
}
139
146
+10
-1
webroot/rsrc/css/aphront/multi-column.css
+10
-1
webroot/rsrc/css/aphront/multi-column.css
···
17
17
margin: 0;
18
18
}
19
19
20
+
.device-desktop .phui-workboard-view-shadow .aphront-multi-column-inner
21
+
.aphront-multi-column-column-last {
22
+
margin-right: 8px;
23
+
}
24
+
20
25
.device .aphront-multi-column-outer
21
26
div.aphront-multi-column-column-outer {
22
27
width: auto;
···
28
33
}
29
34
30
35
.aphront-multi-column-fixed .aphront-multi-column-column-outer {
31
-
width: 280px;
36
+
width: 300px;
32
37
}
33
38
34
39
/* flexible, but with a minimum */
···
101
106
.aphront-multi-column-inner {
102
107
display: table;
103
108
width: 100%;
109
+
}
110
+
111
+
.device-desktop .aphront-multi-column-fixed .aphront-multi-column-inner {
112
+
margin: 0 0 12px 12px;
104
113
}
105
114
106
115
/* magic sauce */
+5
webroot/rsrc/css/phui/phui-header-view.css
+5
webroot/rsrc/css/phui/phui-header-view.css
-2
webroot/rsrc/css/phui/phui-object-item-list-view.css
-2
webroot/rsrc/css/phui/phui-object-item-list-view.css
···
39
39
border-color: {$lightgreyborder};
40
40
border-width: 0 0 0 4px;
41
41
margin: 5px 0;
42
-
overflow: hidden;
43
42
}
44
43
45
44
.phui-object-item .phui-icon-view {
···
51
50
border-color: {$lightgreyborder};
52
51
border-bottom-color: {$greyborder};
53
52
border-width: 1px 1px 1px 0;
54
-
overflow: hidden;
55
53
position: relative;
56
54
min-height: 29px;
57
55
}
+11
-6
webroot/rsrc/css/phui/phui-workboard-view.css
+11
-6
webroot/rsrc/css/phui/phui-workboard-view.css
···
6
6
width: 100%;
7
7
}
8
8
9
-
.phui-workboard-view-shadow {
9
+
.device-desktop .phui-workboard-view-shadow {
10
10
overflow-x: auto;
11
-
padding-bottom: 8px;
11
+
position: absolute;
12
+
top: 120px;
13
+
bottom: 0;
14
+
left: 0;
15
+
right: 0;
12
16
}
13
17
14
18
.phui-workboard-view-shadow::-webkit-scrollbar {
15
19
height: 12px;
20
+
width: 12px;
21
+
background: rgba(200,200,200,.6);
16
22
}
17
23
18
24
.phui-workboard-view-shadow::-webkit-scrollbar-thumb {
19
25
background: {$lightbluetext};
20
-
border-radius: 10px;
21
26
}
22
27
23
28
.phui-workboard-action-list {
···
68
73
margin: 0 3px;
69
74
}
70
75
71
-
.device-phone .project-board-wrapper {
72
-
margin-left: 0;
73
-
margin-right: 0;
76
+
.device-tablet .project-board-wrapper {
77
+
margin-left: 8px;
78
+
margin-right: 8px;
74
79
}