@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 Calendar day view a little more consistent
Summary: Ref T11326. This just cleans things up a little and removes some of the obvious layout/CSS issues.
Test Plan:
- Viewed day view before/after. Also viewed profile panel.
Before:
{F1725547}
After:
{F1725548}
Reviewers: chad
Reviewed By: chad
Maniphest Tasks: T11326
Differential Revision: https://secure.phabricator.com/D16308
+90
-84
+9
-6
resources/celerity/map.php
+9
-6
resources/celerity/map.php
···
115
115
'rsrc/css/layout/phabricator-filetree-view.css' => 'fccf9f82',
116
116
'rsrc/css/layout/phabricator-side-menu-view.css' => 'dd849797',
117
117
'rsrc/css/layout/phabricator-source-code-view.css' => 'cbeef983',
118
-
'rsrc/css/phui/calendar/phui-calendar-day.css' => 'd1cf6f93',
119
-
'rsrc/css/phui/calendar/phui-calendar-list.css' => '56e6381a',
118
+
'rsrc/css/phui/calendar/phui-calendar-day.css' => 'f15bb6d6',
119
+
'rsrc/css/phui/calendar/phui-calendar-list.css' => '5d89cd71',
120
120
'rsrc/css/phui/calendar/phui-calendar-month.css' => 'f3bb2030',
121
121
'rsrc/css/phui/calendar/phui-calendar.css' => '3354bbd6',
122
122
'rsrc/css/phui/phui-action-list.css' => 'c5eba19d',
···
362
362
'rsrc/js/application/aphlict/behavior-aphlict-status.js' => 'ea681761',
363
363
'rsrc/js/application/aphlict/behavior-desktop-notifications-control.js' => 'edd1ba66',
364
364
'rsrc/js/application/auth/behavior-persona-login.js' => '9414ff18',
365
-
'rsrc/js/application/calendar/behavior-day-view.js' => '1a5bb063',
365
+
'rsrc/js/application/calendar/behavior-day-view.js' => '4b3c4443',
366
366
'rsrc/js/application/calendar/behavior-event-all-day.js' => '38dcf3c8',
367
367
'rsrc/js/application/calendar/behavior-recurring-edit.js' => '5f1c4d5f',
368
368
'rsrc/js/application/config/behavior-reorder-fields.js' => 'b6993408',
···
603
603
'javelin-behavior-dashboard-move-panels' => '019f36c4',
604
604
'javelin-behavior-dashboard-query-panel-select' => '453c5375',
605
605
'javelin-behavior-dashboard-tab-panel' => 'd4eecc63',
606
-
'javelin-behavior-day-view' => '1a5bb063',
606
+
'javelin-behavior-day-view' => '4b3c4443',
607
607
'javelin-behavior-desktop-notifications-control' => 'edd1ba66',
608
608
'javelin-behavior-detect-timezone' => '4c193c96',
609
609
'javelin-behavior-device' => 'bb1dd507',
···
826
826
'phui-box-css' => '5c8387cf',
827
827
'phui-button-css' => '4a5fbe3d',
828
828
'phui-calendar-css' => '3354bbd6',
829
-
'phui-calendar-day-css' => 'd1cf6f93',
830
-
'phui-calendar-list-css' => '56e6381a',
829
+
'phui-calendar-day-css' => 'f15bb6d6',
830
+
'phui-calendar-list-css' => '5d89cd71',
831
831
'phui-calendar-month-css' => 'f3bb2030',
832
832
'phui-chart-css' => '6bf6f78e',
833
833
'phui-crumbs-view-css' => '6b813619',
···
1232
1232
'javelin-stratcom',
1233
1233
'javelin-dom',
1234
1234
'javelin-vector',
1235
+
),
1236
+
'4b3c4443' => array(
1237
+
'phuix-icon-view',
1235
1238
),
1236
1239
'4b700e9e' => array(
1237
1240
'javelin-behavior',
+23
-25
src/applications/calendar/query/PhabricatorCalendarEventSearchEngine.php
+23
-25
src/applications/calendar/query/PhabricatorCalendarEventSearchEngine.php
···
257
257
if ($this->isMonthView($query)) {
258
258
return $this->buildCalendarView($events, $query);
259
259
} else if ($this->isDayView($query)) {
260
-
return $this->buildCalendarDayView($events, $query, $handles);
260
+
return $this->buildCalendarDayView($events, $query);
261
261
}
262
262
263
263
assert_instances_of($events, 'PhabricatorCalendarEvent');
···
370
370
}
371
371
372
372
private function buildCalendarDayView(
373
-
array $statuses,
374
-
PhabricatorSavedQuery $query,
375
-
array $handles) {
373
+
array $events,
374
+
PhabricatorSavedQuery $query) {
376
375
377
376
$viewer = $this->requireViewer();
378
377
···
392
391
393
392
$day_view->setUser($viewer);
394
393
395
-
$phids = mpull($statuses, 'getHostPHID');
394
+
$phids = mpull($events, 'getHostPHID');
396
395
397
-
foreach ($statuses as $status) {
398
-
if ($status->getIsCancelled()) {
399
-
continue;
400
-
}
401
-
402
-
$viewer_is_invited = $status->getIsUserInvited($viewer->getPHID());
403
-
396
+
foreach ($events as $event) {
404
397
$can_edit = PhabricatorPolicyFilter::hasCapability(
405
398
$viewer,
406
-
$status,
399
+
$event,
407
400
PhabricatorPolicyCapability::CAN_EDIT);
408
401
409
-
$event = new AphrontCalendarEventView();
410
-
$event->setCanEdit($can_edit);
411
-
$event->setEventID($status->getID());
412
-
$event->setEpochRange(
413
-
$status->getViewerDateFrom(),
414
-
$status->getViewerDateTo());
415
-
$event->setIsAllDay($status->getIsAllDay());
416
-
$event->setIcon($status->getIcon());
417
-
$event->setViewerIsInvited($viewer_is_invited);
402
+
$epoch_min = $event->getViewerDateFrom();
403
+
$epoch_max = $event->getViewerDateTo();
404
+
405
+
$status_icon = $event->getDisplayIcon($viewer);
406
+
$status_color = $event->getDisplayIconColor($viewer);
407
+
408
+
$event_view = id(new AphrontCalendarEventView())
409
+
->setCanEdit($can_edit)
410
+
->setEventID($event->getID())
411
+
->setEpochRange($epoch_min, $epoch_max)
412
+
->setIsAllDay($event->getIsAllDay())
413
+
->setIcon($status_icon)
414
+
->setIconColor($status_color)
415
+
->setName($event->getName())
416
+
->setURI($event->getURI())
417
+
->setIsCancelled($event->isCancelledEvent());
418
418
419
-
$event->setName($status->getName());
420
-
$event->setURI($status->getURI());
421
-
$day_view->addEvent($event);
419
+
$day_view->addEvent($event_view);
422
420
}
423
421
424
422
$day_view->setBrowseURI(
+4
-2
src/applications/people/controller/PhabricatorPeopleProfileViewController.php
+4
-2
src/applications/people/controller/PhabricatorPeopleProfileViewController.php
···
234
234
->setHeader(pht('Calendar'))
235
235
->setHref(
236
236
urisprintf(
237
-
'/calendar/?invitedPHIDs=%s#R',
238
-
$user->getPHID()));
237
+
'/calendar/?invited=%s#R',
238
+
$user->getUsername()));
239
+
239
240
$box = id(new PHUIObjectBoxView())
240
241
->setHeader($header)
241
242
->appendChild($day_view)
243
+
->addClass('calendar-profile-box')
242
244
->setBackground(PHUIObjectBoxView::GREY);
243
245
244
246
return $box;
+7
-9
src/view/phui/calendar/PHUICalendarDayView.php
+7
-9
src/view/phui/calendar/PHUICalendarDayView.php
···
85
85
'id' => $all_day_event->getEventID(),
86
86
'viewerIsInvited' => $all_day_event->getViewerIsInvited(),
87
87
'uri' => $all_day_event->getURI(),
88
+
'displayIcon' => $all_day_event->getIcon(),
89
+
'displayIconColor' => $all_day_event->getIconColor(),
88
90
);
89
91
}
90
92
}
···
140
142
'top' => $top.'px',
141
143
'height' => $height.'px',
142
144
'canEdit' => $event->getCanEdit(),
145
+
'displayIcon' => $event->getIcon(),
146
+
'displayIconColor' => $event->getIconColor(),
143
147
);
144
148
}
145
149
}
···
183
187
->setFlush(true);
184
188
185
189
$layout = id(new AphrontMultiColumnView())
186
-
->addColumn($sidebar, 'third')
190
+
->addColumn($sidebar, 'third phui-day-view-upcoming')
187
191
->addColumn($table_box, 'thirds phui-day-view-column')
188
-
->setFluidLayout(true)
189
-
->setGutter(AphrontMultiColumnView::GUTTER_MEDIUM);
192
+
->setFluidLayout(true);
190
193
191
-
return phutil_tag(
192
-
'div',
193
-
array(
194
-
'class' => 'ml',
195
-
),
196
-
$layout);
194
+
return $layout;
197
195
}
198
196
199
197
private function getAllDayEvents() {
+20
-17
webroot/rsrc/css/phui/calendar/phui-calendar-day.css
+20
-17
webroot/rsrc/css/phui/calendar/phui-calendar-day.css
···
10
10
width: 100%;
11
11
}
12
12
13
+
.aphront-multi-column-column-outer.phui-day-view-upcoming,
14
+
.aphront-multi-column-column-outer.phui-day-view-column{
15
+
padding: 0;
16
+
}
17
+
18
+
.aphront-multi-column-column-outer.phui-day-view-upcoming .phui-header-shell {
19
+
margin: 0;
20
+
}
21
+
13
22
.phui-calendar-day-view {
14
23
overflow: scroll;
15
24
width: 100%;
···
61
70
}
62
71
63
72
.phui-calendar-day-event-link {
64
-
padding: 8px;
65
-
border: 1px solid {$greyborder};
66
-
background-color: {$darkgreybackground};
67
-
margin: 0 1px;
73
+
margin: 0 0 -1px -1px;
74
+
box-sizing: border-box;
68
75
position: absolute;
69
76
left: 0;
70
77
right: 0;
71
78
top: 0;
72
79
bottom: 0;
73
-
text-decoration: none;
74
-
color: {$greytext};
75
80
}
76
81
77
82
.phui-calendar-day-event-link.viewer-invited-day-event {
···
80
85
color: {$green};
81
86
}
82
87
83
-
.day-view-all-day {
84
-
border: 1px solid {$greyborder};
85
-
height: 12px;
86
-
margin: 0;
87
-
display: block;
88
+
.day-view-all-day,
89
+
.phui-calendar-day-event-link {
88
90
padding: 8px;
89
-
background-color: {$darkgreybackground};
91
+
border: 1px solid {$lightblueborder};
92
+
background-color: {$bluebackground};
93
+
color: {$greytext};
94
+
text-decoration: none;
90
95
text-decoration: none;
91
-
color: {$greytext};
92
96
}
93
97
94
-
.day-view-all-day.viewer-invited-day-event {
95
-
border-color: {$green};
96
-
background-color: {$lightgreen};
97
-
color: {$green};
98
+
.day-view-all-day {
99
+
margin: 3px 0 3px 4px;
100
+
display: block;
98
101
}
99
102
100
103
.phui-calendar-day-event + .phui-calendar-day-event .day-view-all-day {
+1
-1
webroot/rsrc/css/phui/calendar/phui-calendar-list.css
+1
-1
webroot/rsrc/css/phui/calendar/phui-calendar-list.css
+26
-24
webroot/rsrc/js/application/calendar/behavior-day-view.js
+26
-24
webroot/rsrc/js/application/calendar/behavior-day-view.js
···
1
1
/**
2
2
* @provides javelin-behavior-day-view
3
+
* @requires phuix-icon-view
3
4
*/
4
-
5
-
6
5
JX.behavior('day-view', function(config) {
7
6
8
7
function findTodayClusters() {
···
92
91
link_class = link_class + ' viewer-invited-day-event';
93
92
}
94
93
94
+
var icon = new JX.PHUIXIconView()
95
+
.setIcon(e.displayIcon)
96
+
.setColor(e.displayIconColor)
97
+
.getNode();
98
+
99
+
var content = [icon, ' ', name];
100
+
95
101
var name_link = JX.$N(
96
102
'a',
97
103
{
98
104
className : link_class,
99
105
href: uri
100
106
},
101
-
name);
107
+
content);
102
108
103
109
var class_name = 'phui-calendar-day-event';
104
110
if (e.canEdit) {
···
123
129
return div;
124
130
}
125
131
126
-
function drawAllDayEvent(
127
-
viewerIsInvited,
128
-
uri,
129
-
name) {
132
+
function drawAllDayEvent(e) {
130
133
var class_name = 'day-view-all-day';
131
-
if (viewerIsInvited) {
132
-
class_name = class_name + ' viewer-invited-day-event';
133
-
}
134
134
135
-
name = JX.$N(
135
+
var icon = new JX.PHUIXIconView()
136
+
.setIcon(e.displayIcon)
137
+
.setColor(e.displayIconColor)
138
+
.getNode();
139
+
var content = [icon, ' ', e.name];
140
+
141
+
var name = JX.$N(
136
142
'a',
137
143
{
138
144
className: class_name,
139
-
href: uri
145
+
href: e.uri
140
146
},
141
-
name);
147
+
content);
142
148
143
149
var all_day_label = JX.$N(
144
150
'span',
···
220
226
var all_day_events = [];
221
227
for(i=0; i < today_all_day_events.length; i++) {
222
228
var all_day_event = today_all_day_events[i];
223
-
all_day_events.push(drawAllDayEvent(
224
-
all_day_event['viewerIsInvited'],
225
-
all_day_event['uri'],
226
-
all_day_event['name']));
229
+
all_day_events.push(drawAllDayEvent(all_day_event));
227
230
}
228
231
229
232
var table = JX.$N(
···
329
332
}
330
333
var data = e.getNodeData('phui-calendar-day-event-cell');
331
334
var time = data.time;
335
+
332
336
new JX.Workflow(
333
-
'/calendar/event/create/',
337
+
'/calendar/event/edit/',
334
338
{
335
-
year: year,
336
-
month: month,
337
-
day: day,
338
-
time: time,
339
-
next: 'day',
340
-
query: query
339
+
start_d: year + '-' + month + '-' + day,
340
+
start_t: time,
341
+
end_d: year + '-' + month + '-' + day,
342
+
end_t: time + ' +1 hour'
341
343
})
342
344
.start();
343
345
});