@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
Redesign durable column to be more a 'mini conpherence'
Summary:
Since I plan to add collapsing, this widens the chat window and moves the switcher to the side, for more visual space for conversation.
TODO: make a magical minimizer so I can always have it open.
Test Plan:
Tested on my large display and little Macbook.
{F1854092}
Reviewers: epriestley
Reviewed By: epriestley
Subscribers: Korvin
Differential Revision: https://secure.phabricator.com/D16635
authored by
Chad Little
and committed by
chad
46f11a24
d5925ffc
+50
-44
+3
-3
resources/celerity/map.php
+3
-3
resources/celerity/map.php
···
7
7
*/
8
8
return array(
9
9
'names' => array(
10
-
'conpherence.pkg.css' => '9402e1af',
10
+
'conpherence.pkg.css' => '4901ed78',
11
11
'conpherence.pkg.js' => '11f3e07e',
12
12
'core.pkg.css' => '55d32e63',
13
13
'core.pkg.js' => '32939240',
···
46
46
'rsrc/css/application/config/config-template.css' => '8f18fa41',
47
47
'rsrc/css/application/config/setup-issue.css' => 'f794cfc3',
48
48
'rsrc/css/application/config/unhandled-exception.css' => '4c96257a',
49
-
'rsrc/css/application/conpherence/durable-column.css' => '63114a54',
49
+
'rsrc/css/application/conpherence/durable-column.css' => '61f73db6',
50
50
'rsrc/css/application/conpherence/header-pane.css' => '517de9fe',
51
51
'rsrc/css/application/conpherence/menu.css' => '78c7b811',
52
52
'rsrc/css/application/conpherence/message-pane.css' => '0d7dff02',
···
618
618
'conduit-api-css' => '7bc725c4',
619
619
'config-options-css' => '0ede4c9b',
620
620
'config-page-css' => '8798e14f',
621
-
'conpherence-durable-column-view' => '63114a54',
621
+
'conpherence-durable-column-view' => '61f73db6',
622
622
'conpherence-header-pane-css' => '517de9fe',
623
623
'conpherence-menu-css' => '78c7b811',
624
624
'conpherence-message-pane-css' => '0d7dff02',
+1
-1
src/applications/conpherence/view/ConpherenceDurableColumnView.php
+1
-1
src/applications/conpherence/view/ConpherenceDurableColumnView.php
+13
-15
src/applications/conpherence/view/ConpherenceTransactionView.php
+13
-15
src/applications/conpherence/view/ConpherenceTransactionView.php
···
201
201
202
202
private function renderTransactionImage() {
203
203
$image = null;
204
-
if ($this->getFullDisplay()) {
205
-
$transaction = $this->getConpherenceTransaction();
206
-
switch ($transaction->getTransactionType()) {
207
-
case PhabricatorTransactions::TYPE_COMMENT:
208
-
$handles = $this->getHandles();
209
-
$author = $handles[$transaction->getAuthorPHID()];
210
-
$image_uri = $author->getImageURI();
211
-
$image = phutil_tag(
212
-
'span',
213
-
array(
214
-
'class' => 'conpherence-transaction-image',
215
-
'style' => 'background-image: url('.$image_uri.');',
216
-
));
217
-
break;
218
-
}
204
+
$transaction = $this->getConpherenceTransaction();
205
+
switch ($transaction->getTransactionType()) {
206
+
case PhabricatorTransactions::TYPE_COMMENT:
207
+
$handles = $this->getHandles();
208
+
$author = $handles[$transaction->getAuthorPHID()];
209
+
$image_uri = $author->getImageURI();
210
+
$image = phutil_tag(
211
+
'span',
212
+
array(
213
+
'class' => 'conpherence-transaction-image',
214
+
'style' => 'background-image: url('.$image_uri.');',
215
+
));
216
+
break;
219
217
}
220
218
return $image;
221
219
}
+33
-25
webroot/rsrc/css/application/conpherence/durable-column.css
+33
-25
webroot/rsrc/css/application/conpherence/durable-column.css
···
9
9
.conpherence-durable-column {
10
10
position: fixed;
11
11
bottom: 0;
12
-
right: 12px;
13
-
width: 300px;
14
-
height: 380px;
12
+
right: 16px;
13
+
width: 400px;
14
+
height: 360px;
15
15
background: #fff;
16
16
box-shadow: 0px 1px 8px rgba(55,55,55, .3);
17
17
}
18
18
19
19
.device .conpherence-durable-column {
20
20
display: none;
21
+
}
22
+
23
+
.conpherence-durable-column .conpherence-transaction-image {
24
+
float: left;
25
+
border-radius: 3px;
26
+
height: 24px;
27
+
width: 24px;
28
+
background-size: 24px;
29
+
position: absolute;
30
+
top: 5px;
21
31
}
22
32
23
33
.device-desktop .conpherence-durable-column.loading .loading-mask {
···
81
91
float: left;
82
92
padding: 8px 0 8px 10px;
83
93
color: #fff;
84
-
width: 230px;
94
+
width: 260px;
85
95
text-overflow: ellipsis;
86
96
overflow: hidden;
87
97
white-space: nowrap;
···
100
110
}
101
111
102
112
.conpherence-durable-column-icon-bar {
103
-
height: 32px;
104
-
padding: 4px;
113
+
width: 36px;
105
114
background-color: {$lightgreybackground};
115
+
border-right: 1px solid {$thinblueborder};
116
+
position: absolute;
117
+
top: 0;
118
+
left: 0;
119
+
bottom: 0;
106
120
}
107
121
108
122
.conpherence-durable-column-icon-bar .conpherence-durable-column-thread-icon {
109
-
float: left;
110
-
display: block;
111
123
height: 28px;
112
124
width: 28px;
113
-
border: 2px solid transparent;
114
-
border-radius: 3px;
115
-
margin: 0 2px 0 0;
125
+
padding: 4px;
126
+
display: block;
116
127
}
117
128
118
129
.conpherence-durable-column-icon-bar
119
130
.conpherence-durable-column-thread-icon.selected {
120
-
border-color: {$sky};
131
+
background-color: rgba({$alphablue},.1);
121
132
}
122
133
123
134
.conpherence-durable-column-icon-bar
124
135
.conpherence-durable-column-thread-icon span {
125
-
position: relative;
126
136
display: block;
127
-
width: 24px;
128
-
height: 24px;
129
-
top: 2px;
130
-
left: 2px;
131
-
background-size: 24px 24px;
137
+
width: 28px;
138
+
height: 28px;
139
+
border-radius: 3px;
140
+
background-size: 28px 28px;
132
141
}
133
142
134
143
.conpherence-durable-column-body {
···
141
150
142
151
.conpherence-durable-column-main {
143
152
position: absolute;
144
-
top: 40px;
153
+
top: 0;
145
154
bottom: 36px;
146
-
left: 0;
155
+
left: 34px;
147
156
right: 0;
148
157
overflow-x: hidden;
149
-
border-top: 1px solid {$thinblueborder};
150
158
}
151
159
152
160
.conpherence-durable-column-transactions {
···
156
164
.conpherence-durable-column-transactions
157
165
.conpherence-transaction-view.conpherence-edited {
158
166
color: {$lightgreytext};
159
-
font-size: {$smallerfontsize};
160
167
margin: 0;
161
168
padding: 0;
169
+
font-style: italic;
162
170
}
163
171
164
172
.conpherence-durable-column-transactions .conpherence-edited
···
180
188
181
189
.conpherence-durable-column-transactions .conpherence-transaction-detail {
182
190
border: 0;
183
-
margin: 0;
191
+
margin: 0 0 0 32px;
184
192
}
185
193
186
194
.conpherence-durable-column-transactions .conpherence-transaction-detail
···
191
199
192
200
.conpherence-durable-column-transactions
193
201
.conpherence-transaction-view.date-marker {
194
-
margin: 20px 0px 8px;
202
+
margin: 12px 0 0;
195
203
}
196
204
197
205
.conpherence-durable-column-transactions
198
206
.conpherence-transaction-view.date-marker .date {
199
207
left: 0;
200
-
font-size: {$smallerfontsize};
208
+
font-size: {$normalfontsize};
201
209
top: -14px;
202
210
padding: 0 6px 0 0;
203
211
}