mirror of
https://we.phorge.it/source/phorge.git
synced 2024-11-18 12:52:42 +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:
parent
d5925ffc57
commit
46f11a2450
4 changed files with 50 additions and 44 deletions
|
@ -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',
|
||||
|
|
|
@ -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(
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue