@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
Rework Workboard Cards, split up CSS
Summary: Moves CSS into 3 files, Boards, Panels, Cards. Cleans up Workcards to present more info, hide edit until card hover.
Test Plan:
Lots of photoshop. Verify links to edit still work.
{F1081276}
Reviewers: epriestley
Reviewed By: epriestley
Subscribers: Korvin
Differential Revision: https://secure.phabricator.com/D15137
+245
-212
+9
-4
resources/celerity/map.php
+9
-4
resources/celerity/map.php
···
153
153
'rsrc/css/phui/phui-text.css' => 'cf019f54',
154
154
'rsrc/css/phui/phui-timeline-view.css' => '2efceff8',
155
155
'rsrc/css/phui/phui-two-column-view.css' => 'c75bfc5b',
156
-
'rsrc/css/phui/phui-workboard-view.css' => '04b34072',
157
-
'rsrc/css/phui/phui-workpanel-view.css' => '31a835ba',
156
+
'rsrc/css/phui/workboards/phui-workboard.css' => 'b07a5524',
157
+
'rsrc/css/phui/workboards/phui-workcard.css' => '8ac68d18',
158
+
'rsrc/css/phui/workboards/phui-workpanel.css' => 'e9339dc3',
158
159
'rsrc/css/sprite-login.css' => '60e8560e',
159
160
'rsrc/css/sprite-menu.css' => '9dd65b92',
160
161
'rsrc/css/sprite-tokens.css' => '4f399012',
···
830
831
'phui-theme-css' => 'ab7b848c',
831
832
'phui-timeline-view-css' => '2efceff8',
832
833
'phui-two-column-view-css' => 'c75bfc5b',
833
-
'phui-workboard-view-css' => '04b34072',
834
-
'phui-workpanel-view-css' => '31a835ba',
834
+
'phui-workboard-view-css' => 'b07a5524',
835
+
'phui-workcard-view-css' => '8ac68d18',
836
+
'phui-workpanel-view-css' => 'e9339dc3',
835
837
'phuix-action-list-view' => 'b5c256b8',
836
838
'phuix-action-view' => '8cf6d262',
837
839
'phuix-autocomplete' => '9196fb06',
···
1981
1983
),
1982
1984
'e6e25838' => array(
1983
1985
'javelin-install',
1986
+
),
1987
+
'e9339dc3' => array(
1988
+
'phui-workcard-view-css',
1984
1989
),
1985
1990
'e9581f08' => array(
1986
1991
'javelin-behavior',
+5
-1
webroot/rsrc/css/phui/phui-workboard-view.css
webroot/rsrc/css/phui/workboards/phui-workboard.css
+5
-1
webroot/rsrc/css/phui/phui-workboard-view.css
webroot/rsrc/css/phui/workboards/phui-workboard.css
···
6
6
width: 100%;
7
7
}
8
8
9
+
.device-phone .phui-workboard-view {
10
+
width: auto;
11
+
}
12
+
9
13
.device-desktop .phui-workboard-view-shadow {
10
14
overflow-x: auto;
11
15
position: absolute;
···
18
22
}
19
23
20
24
.device-desktop .page-has-warning .phui-workboard-view-shadow {
21
-
top: 132px;
25
+
top: 113px;
22
26
}
23
27
24
28
.device-desktop.with-durable-column .phui-workboard-view-shadow {
-207
webroot/rsrc/css/phui/phui-workpanel-view.css
-207
webroot/rsrc/css/phui/phui-workpanel-view.css
···
1
-
/**
2
-
* @provides phui-workpanel-view-css
3
-
*/
4
-
5
-
.phui-workpanel-view .phui-header-shell {
6
-
padding: 8px;
7
-
width: 284px;
8
-
}
9
-
10
-
.phui-workpanel-view .phui-header-shell .phui-header-header {
11
-
font-size: {$biggerfontsize};
12
-
line-height: 18px;
13
-
color: {$darkbluetext};
14
-
}
15
-
16
-
.phui-workpanel-view .phui-header-shell .phui-header-subheader {
17
-
padding: 0 4px;
18
-
margin: 0;
19
-
display: inline-block;
20
-
color: {$lightgreytext};
21
-
}
22
-
23
-
.device-phone .phui-workboard-view {
24
-
width: auto;
25
-
}
26
-
27
-
.device .phui-workpanel-view .phui-header-shell {
28
-
width: auto;
29
-
}
30
-
31
-
.phui-workboard-view {
32
-
-webkit-touch-callout: none;
33
-
-webkit-user-select: none;
34
-
-khtml-user-select: none;
35
-
-moz-user-select: none;
36
-
-ms-user-select: none;
37
-
user-select: none;
38
-
}
39
-
40
-
.phui-workboard-view .phui-object-item {
41
-
background-color: #fff;
42
-
border-top-left-radius: 3px;
43
-
border-bottom-left-radius: 3px;
44
-
margin-bottom: 6px;
45
-
}
46
-
47
-
.phui-workboard-view .phui-object-item-frame {
48
-
border-top-right-radius: 3px;
49
-
border-bottom-right-radius: 3px;
50
-
}
51
-
52
-
.phui-workboard-view .phui-object-item .phui-object-item-objname {
53
-
-webkit-touch-callout: text;
54
-
-webkit-user-select: text;
55
-
-khtml-user-select: text;
56
-
-moz-user-select: text;
57
-
-ms-user-select: text;
58
-
user-select: text;
59
-
}
60
-
61
-
.phui-workboard-view .phui-object-item-link {
62
-
white-space: normal;
63
-
display: inline;
64
-
-webkit-font-smoothing: antialiased;
65
-
}
66
-
67
-
.phui-workboard-view .phui-object-item-objname {
68
-
vertical-align: top;
69
-
}
70
-
71
-
.phui-workpanel-view .phui-workpanel-header-action {
72
-
float: right;
73
-
width: 24px;
74
-
border-left: 1px solid #b3b5b6;
75
-
}
76
-
77
-
.phui-workpanel-view .phui-workpanel-body {
78
-
padding: 8px 8px 4px 8px;
79
-
}
80
-
81
-
.phui-workpanel-view .phui-workpanel-footer-action a {
82
-
color: {$darkbluetext};
83
-
font-weight: bold;
84
-
}
85
-
86
-
.device-desktop .phui-workpanel-view .phui-workpanel-footer-action:hover {
87
-
background-color: rgba(100,100,100,.1);
88
-
border-radius: 3px;
89
-
}
90
-
91
-
.phui-workpanel-view .phui-list-item-icon {
92
-
height: 14px;
93
-
width: 14px;
94
-
display: inline-block;
95
-
}
96
-
97
-
.phui-workpanel-view .phui-list-item-name {
98
-
padding-left: 5px;
99
-
display: inline-block;
100
-
}
101
-
102
-
.device-desktop .aphront-multi-column-fixed .phui-workpanel-view {
103
-
width: 300px;
104
-
}
105
-
106
-
.device-phone .aphront-multi-column-fixed .phui-workpanel-view,
107
-
.device-phone .phui-workpanel-view .phui-header-shell {
108
-
width: auto;
109
-
}
110
-
111
-
.phui-workpanel-body .phui-object-item-list-view {
112
-
min-height: 54px;
113
-
}
114
-
115
-
.device .aphront-multi-column-outer
116
-
div.aphront-multi-column-column-outer .phui-workpanel-body {
117
-
width: auto;
118
-
}
119
-
120
-
.project-panel-hidden {
121
-
opacity: 0.75;
122
-
}
123
-
124
-
.project-panel-empty .phui-object-item-list-view {
125
-
background: {$sh-indigobackground};
126
-
border-radius: 3px;
127
-
margin-bottom: 4px;
128
-
border: 1px dashed {$sh-indigoborder};
129
-
}
130
-
131
-
.project-panel-empty .phui-object-item-list-view .drag-ghost {
132
-
display: none;
133
-
}
134
-
135
-
.project-panel-empty .phui-object-item-list-view.drag-target-list {
136
-
background: rgba(255,255,255,.7);
137
-
}
138
-
139
-
.phui-workpanel-view.project-panel-over-limit .phui-header-header {
140
-
color: {$red};
141
-
}
142
-
143
-
.phui-workpanel-view.project-panel-over-limit .phui-header-shell {
144
-
border-color: {$red};
145
-
}
146
-
147
-
/* - Workpanel Cards -----------------------------------------------------------
148
-
149
-
Slight display changes for how cards work in tight spaces
150
-
151
-
*/
152
-
153
-
.phui-workpanel-view .phui-object-item-grippable .phui-object-item-frame {
154
-
padding-left: 0;
155
-
}
156
-
157
-
.phui-workpanel-view .phui-object-item-grip {
158
-
display: none;
159
-
}
160
-
161
-
.phui-workpanel-view .phui-object-item-attribute a {
162
-
color: {$bluetext};
163
-
}
164
-
165
-
166
-
/* - Draggable Colors --------------------------------------------------------*/
167
-
168
-
.phui-workboard-view .phui-object-item.drag-dragging {
169
-
box-shadow: {$dropshadow};
170
-
background-color: {$sh-greybackground};
171
-
}
172
-
173
-
.phui-workboard-view .drag-dragging.phui-object-item-bar-color-red {
174
-
background-color: {$sh-redbackground};
175
-
}
176
-
177
-
.phui-workboard-view .drag-dragging.phui-object-item-bar-color-orange {
178
-
background-color: {$sh-orangebackground};
179
-
}
180
-
181
-
.phui-workboard-view .drag-dragging.phui-object-item-bar-color-yellow {
182
-
background-color: {$sh-yellowbackground};
183
-
}
184
-
185
-
.phui-workboard-view .drag-dragging.phui-object-item-bar-color-green {
186
-
background-color: {$sh-greenbackground};
187
-
}
188
-
189
-
.phui-workboard-view .drag-dragging.phui-object-item-bar-color-blue {
190
-
background-color: {$sh-bluebackground};
191
-
}
192
-
193
-
.phui-workboard-view .drag-dragging.phui-object-item-bar-color-indigo {
194
-
background-color: {$sh-indigobackground};
195
-
}
196
-
197
-
.phui-workboard-view .drag-dragging.phui-object-item-bar-color-violet {
198
-
background-color: {$sh-violetbackground};
199
-
}
200
-
201
-
.phui-workboard-view .drag-dragging.phui-object-item-bar-color-pink {
202
-
background-color: {$sh-pinkbackground};
203
-
}
204
-
205
-
.phui-workboard-view .drag-dragging.phui-object-item-bar-color-sky {
206
-
background-color: {$sh-bluebackground};
207
-
}
+127
webroot/rsrc/css/phui/workboards/phui-workcard.css
+127
webroot/rsrc/css/phui/workboards/phui-workcard.css
···
1
+
/**
2
+
* @provides phui-workcard-view-css
3
+
*/
4
+
5
+
.phui-workboard-view .phui-object-item {
6
+
background-color: #fff;
7
+
border-top-left-radius: 3px;
8
+
border-bottom-left-radius: 3px;
9
+
margin-bottom: 6px;
10
+
}
11
+
12
+
.phui-workboard-view .phui-object-item-name {
13
+
padding-bottom: 4px;
14
+
}
15
+
16
+
.phui-workboard-view .phui-object-item-content {
17
+
margin-top: 0;
18
+
}
19
+
20
+
.phui-workboard-view .phui-object-item-frame {
21
+
border-top-right-radius: 3px;
22
+
border-bottom-right-radius: 3px;
23
+
}
24
+
25
+
.phui-workboard-view .phui-object-item .phui-object-item-objname {
26
+
-webkit-touch-callout: text;
27
+
-webkit-user-select: text;
28
+
-khtml-user-select: text;
29
+
-moz-user-select: text;
30
+
-ms-user-select: text;
31
+
user-select: text;
32
+
}
33
+
34
+
.phui-workboard-view .phui-object-item-link {
35
+
white-space: normal;
36
+
font-weight: normal;
37
+
color: #000;
38
+
margin-left: 2px;
39
+
}
40
+
41
+
.device-desktop .phui-workboard-view .phui-object-item-with-1-actions
42
+
.phui-object-item-content-box {
43
+
margin-right: 0;
44
+
overflow: hidden;
45
+
}
46
+
47
+
.phui-workboard-view .phui-object-item-objname {
48
+
vertical-align: top;
49
+
}
50
+
51
+
.phui-workpanel-view .phui-object-item-grippable .phui-object-item-frame {
52
+
padding-left: 0;
53
+
}
54
+
55
+
.phui-workpanel-view .phui-object-item-grip {
56
+
display: none;
57
+
}
58
+
59
+
.device-desktop .phui-workpanel-view .phui-list-item-icon {
60
+
display: none;
61
+
}
62
+
63
+
.phui-workpanel-view .phui-object-item .phui-list-item-href {
64
+
height: 26px;
65
+
}
66
+
67
+
.device-desktop .phui-workpanel-view .phui-object-item:hover
68
+
.phui-list-item-href {
69
+
background: #fff;
70
+
opacity: .7;
71
+
}
72
+
73
+
.device-desktop .phui-workpanel-view .phui-object-item
74
+
.phui-list-item-href:hover {
75
+
background: {$sh-bluebackground};
76
+
opacity: 1;
77
+
}
78
+
79
+
.phui-workpanel-view .phui-object-item:hover .phui-list-item-icon {
80
+
display: block;
81
+
}
82
+
83
+
84
+
85
+
86
+
/* - Draggable Colors --------------------------------------------------------*/
87
+
88
+
.phui-workboard-view .phui-object-item.drag-dragging {
89
+
box-shadow: {$dropshadow};
90
+
background-color: {$sh-greybackground};
91
+
}
92
+
93
+
.phui-workboard-view .drag-dragging.phui-object-item-bar-color-red {
94
+
background-color: {$sh-redbackground};
95
+
}
96
+
97
+
.phui-workboard-view .drag-dragging.phui-object-item-bar-color-orange {
98
+
background-color: {$sh-orangebackground};
99
+
}
100
+
101
+
.phui-workboard-view .drag-dragging.phui-object-item-bar-color-yellow {
102
+
background-color: {$sh-yellowbackground};
103
+
}
104
+
105
+
.phui-workboard-view .drag-dragging.phui-object-item-bar-color-green {
106
+
background-color: {$sh-greenbackground};
107
+
}
108
+
109
+
.phui-workboard-view .drag-dragging.phui-object-item-bar-color-blue {
110
+
background-color: {$sh-bluebackground};
111
+
}
112
+
113
+
.phui-workboard-view .drag-dragging.phui-object-item-bar-color-indigo {
114
+
background-color: {$sh-indigobackground};
115
+
}
116
+
117
+
.phui-workboard-view .drag-dragging.phui-object-item-bar-color-violet {
118
+
background-color: {$sh-violetbackground};
119
+
}
120
+
121
+
.phui-workboard-view .drag-dragging.phui-object-item-bar-color-pink {
122
+
background-color: {$sh-pinkbackground};
123
+
}
124
+
125
+
.phui-workboard-view .drag-dragging.phui-object-item-bar-color-sky {
126
+
background-color: {$sh-bluebackground};
127
+
}
+104
webroot/rsrc/css/phui/workboards/phui-workpanel.css
+104
webroot/rsrc/css/phui/workboards/phui-workpanel.css
···
1
+
/**
2
+
* @provides phui-workpanel-view-css
3
+
* @requires phui-workcard-view-css
4
+
*/
5
+
6
+
.phui-workpanel-view .phui-header-shell {
7
+
padding: 8px;
8
+
width: 284px;
9
+
}
10
+
11
+
.phui-workpanel-view .phui-header-shell .phui-header-header {
12
+
font-size: {$biggerfontsize};
13
+
line-height: 18px;
14
+
color: {$darkbluetext};
15
+
}
16
+
17
+
.phui-workpanel-view .phui-header-shell .phui-header-subheader {
18
+
padding: 0 4px;
19
+
margin: 0;
20
+
display: inline-block;
21
+
color: {$lightgreytext};
22
+
}
23
+
24
+
.device .phui-workpanel-view .phui-header-shell {
25
+
width: auto;
26
+
}
27
+
28
+
.phui-workboard-view {
29
+
-webkit-touch-callout: none;
30
+
-webkit-user-select: none;
31
+
-khtml-user-select: none;
32
+
-moz-user-select: none;
33
+
-ms-user-select: none;
34
+
user-select: none;
35
+
}
36
+
37
+
.phui-workpanel-view .phui-workpanel-header-action {
38
+
float: right;
39
+
width: 24px;
40
+
border-left: 1px solid #b3b5b6;
41
+
}
42
+
43
+
.phui-workpanel-view .phui-workpanel-body {
44
+
padding: 8px 8px 4px 8px;
45
+
}
46
+
47
+
.device-phone .phui-workpanel-view .phui-workpanel-body {
48
+
padding: 8px 0;
49
+
}
50
+
51
+
.phui-workpanel-view .phui-workpanel-footer-action a {
52
+
color: {$darkbluetext};
53
+
font-weight: bold;
54
+
}
55
+
56
+
.device-desktop .phui-workpanel-view .phui-workpanel-footer-action:hover {
57
+
background-color: rgba(100,100,100,.1);
58
+
border-radius: 3px;
59
+
}
60
+
61
+
.device-desktop .aphront-multi-column-fixed .phui-workpanel-view {
62
+
width: 300px;
63
+
}
64
+
65
+
.device-phone .aphront-multi-column-fixed .phui-workpanel-view,
66
+
.device-phone .phui-workpanel-view .phui-header-shell {
67
+
width: auto;
68
+
}
69
+
70
+
.phui-workpanel-body .phui-object-item-list-view {
71
+
min-height: 54px;
72
+
}
73
+
74
+
.device .aphront-multi-column-outer
75
+
div.aphront-multi-column-column-outer .phui-workpanel-body {
76
+
width: auto;
77
+
}
78
+
79
+
.project-panel-hidden {
80
+
opacity: 0.75;
81
+
}
82
+
83
+
.project-panel-empty .phui-object-item-list-view {
84
+
background: {$sh-indigobackground};
85
+
border-radius: 3px;
86
+
margin-bottom: 4px;
87
+
border: 1px dashed {$sh-indigoborder};
88
+
}
89
+
90
+
.project-panel-empty .phui-object-item-list-view .drag-ghost {
91
+
display: none;
92
+
}
93
+
94
+
.project-panel-empty .phui-object-item-list-view.drag-target-list {
95
+
background: rgba(255,255,255,.7);
96
+
}
97
+
98
+
.phui-workpanel-view.project-panel-over-limit .phui-header-header {
99
+
color: {$red};
100
+
}
101
+
102
+
.phui-workpanel-view.project-panel-over-limit .phui-header-shell {
103
+
border-color: {$red};
104
+
}