1
0
Fork 0
mirror of https://we.phorge.it/source/phorge.git synced 2024-12-18 19:40:55 +01:00

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
This commit is contained in:
Chad Little 2016-09-29 23:28:28 +00:00 committed by chad
parent d5925ffc57
commit 46f11a2450
4 changed files with 50 additions and 44 deletions

View file

@ -7,7 +7,7 @@
*/
return array(
'names' => array(
'conpherence.pkg.css' => '9402e1af',
'conpherence.pkg.css' => '4901ed78',
'conpherence.pkg.js' => '11f3e07e',
'core.pkg.css' => '55d32e63',
'core.pkg.js' => '32939240',
@ -46,7 +46,7 @@ return array(
'rsrc/css/application/config/config-template.css' => '8f18fa41',
'rsrc/css/application/config/setup-issue.css' => 'f794cfc3',
'rsrc/css/application/config/unhandled-exception.css' => '4c96257a',
'rsrc/css/application/conpherence/durable-column.css' => '63114a54',
'rsrc/css/application/conpherence/durable-column.css' => '61f73db6',
'rsrc/css/application/conpherence/header-pane.css' => '517de9fe',
'rsrc/css/application/conpherence/menu.css' => '78c7b811',
'rsrc/css/application/conpherence/message-pane.css' => '0d7dff02',
@ -618,7 +618,7 @@ return array(
'conduit-api-css' => '7bc725c4',
'config-options-css' => '0ede4c9b',
'config-page-css' => '8798e14f',
'conpherence-durable-column-view' => '63114a54',
'conpherence-durable-column-view' => '61f73db6',
'conpherence-header-pane-css' => '517de9fe',
'conpherence-menu-css' => '78c7b811',
'conpherence-message-pane-css' => '0d7dff02',

View file

@ -229,7 +229,7 @@ final class ConpherenceDurableColumnView extends AphrontTagView {
'threadID' => $conpherence->getID(),
'threadTitle' => hsprintf('%s', $thread_title),
'tip' => $data['title'],
'align' => 'S',
'align' => 'W',
),
),
phutil_tag(

View file

@ -201,21 +201,19 @@ final class ConpherenceTransactionView extends AphrontView {
private function renderTransactionImage() {
$image = null;
if ($this->getFullDisplay()) {
$transaction = $this->getConpherenceTransaction();
switch ($transaction->getTransactionType()) {
case PhabricatorTransactions::TYPE_COMMENT:
$handles = $this->getHandles();
$author = $handles[$transaction->getAuthorPHID()];
$image_uri = $author->getImageURI();
$image = phutil_tag(
'span',
array(
'class' => 'conpherence-transaction-image',
'style' => 'background-image: url('.$image_uri.');',
));
break;
}
$transaction = $this->getConpherenceTransaction();
switch ($transaction->getTransactionType()) {
case PhabricatorTransactions::TYPE_COMMENT:
$handles = $this->getHandles();
$author = $handles[$transaction->getAuthorPHID()];
$image_uri = $author->getImageURI();
$image = phutil_tag(
'span',
array(
'class' => 'conpherence-transaction-image',
'style' => 'background-image: url('.$image_uri.');',
));
break;
}
return $image;
}

View file

@ -9,9 +9,9 @@
.conpherence-durable-column {
position: fixed;
bottom: 0;
right: 12px;
width: 300px;
height: 380px;
right: 16px;
width: 400px;
height: 360px;
background: #fff;
box-shadow: 0px 1px 8px rgba(55,55,55, .3);
}
@ -20,6 +20,16 @@
display: none;
}
.conpherence-durable-column .conpherence-transaction-image {
float: left;
border-radius: 3px;
height: 24px;
width: 24px;
background-size: 24px;
position: absolute;
top: 5px;
}
.device-desktop .conpherence-durable-column.loading .loading-mask {
display: block;
}
@ -81,7 +91,7 @@
float: left;
padding: 8px 0 8px 10px;
color: #fff;
width: 230px;
width: 260px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
@ -100,35 +110,34 @@
}
.conpherence-durable-column-icon-bar {
height: 32px;
padding: 4px;
width: 36px;
background-color: {$lightgreybackground};
border-right: 1px solid {$thinblueborder};
position: absolute;
top: 0;
left: 0;
bottom: 0;
}
.conpherence-durable-column-icon-bar .conpherence-durable-column-thread-icon {
float: left;
display: block;
height: 28px;
width: 28px;
border: 2px solid transparent;
border-radius: 3px;
margin: 0 2px 0 0;
padding: 4px;
display: block;
}
.conpherence-durable-column-icon-bar
.conpherence-durable-column-thread-icon.selected {
border-color: {$sky};
background-color: rgba({$alphablue},.1);
}
.conpherence-durable-column-icon-bar
.conpherence-durable-column-thread-icon span {
position: relative;
display: block;
width: 24px;
height: 24px;
top: 2px;
left: 2px;
background-size: 24px 24px;
width: 28px;
height: 28px;
border-radius: 3px;
background-size: 28px 28px;
}
.conpherence-durable-column-body {
@ -141,12 +150,11 @@
.conpherence-durable-column-main {
position: absolute;
top: 40px;
top: 0;
bottom: 36px;
left: 0;
left: 34px;
right: 0;
overflow-x: hidden;
border-top: 1px solid {$thinblueborder};
}
.conpherence-durable-column-transactions {
@ -156,9 +164,9 @@
.conpherence-durable-column-transactions
.conpherence-transaction-view.conpherence-edited {
color: {$lightgreytext};
font-size: {$smallerfontsize};
margin: 0;
padding: 0;
font-style: italic;
}
.conpherence-durable-column-transactions .conpherence-edited
@ -180,7 +188,7 @@
.conpherence-durable-column-transactions .conpherence-transaction-detail {
border: 0;
margin: 0;
margin: 0 0 0 32px;
}
.conpherence-durable-column-transactions .conpherence-transaction-detail
@ -191,13 +199,13 @@
.conpherence-durable-column-transactions
.conpherence-transaction-view.date-marker {
margin: 20px 0px 8px;
margin: 12px 0 0;
}
.conpherence-durable-column-transactions
.conpherence-transaction-view.date-marker .date {
left: 0;
font-size: {$smallerfontsize};
font-size: {$normalfontsize};
top: -14px;
padding: 0 6px 0 0;
}