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

Conpherence - refactor CSS a bit

Summary: Follow on to D12410. This kills the general CSS file that once powered application transaction in favor of a specific CSS file for the shared transaction styles for both full view and durable column view. I was able to delete some stuff and identify some shared stuff but there is probably more to go here. Also, rename "phabricator-x" to "conpherence-x" for class names.

Test Plan: viewed full conpherence and durable column conpherence and things looked nice

Reviewers: chad, epriestley

Reviewed By: epriestley

Subscribers: Korvin, epriestley

Differential Revision: https://secure.phabricator.com/D12412
This commit is contained in:
Bob Trahan 2015-04-14 12:33:02 -07:00
parent 87d360bb1b
commit a91a3cd22f
7 changed files with 104 additions and 145 deletions

View file

@ -7,7 +7,7 @@
*/
return array(
'names' => array(
'core.pkg.css' => '717b46d1',
'core.pkg.css' => 'b13bb594',
'core.pkg.js' => '6a4f677f',
'darkconsole.pkg.js' => '8ab24e01',
'differential.pkg.css' => '3500921f',
@ -29,7 +29,6 @@ return array(
'rsrc/css/aphront/table-view.css' => '59e2c0f8',
'rsrc/css/aphront/tokenizer.css' => '82ce2142',
'rsrc/css/aphront/tooltip.css' => '7672b60f',
'rsrc/css/aphront/transaction.css' => 'bd9f9f6e',
'rsrc/css/aphront/two-column.css' => '16ab3ad2',
'rsrc/css/aphront/typeahead.css' => '0e403212',
'rsrc/css/application/almanac/almanac.css' => 'dbb9b3af',
@ -44,10 +43,11 @@ return array(
'rsrc/css/application/config/config-welcome.css' => '6abd79be',
'rsrc/css/application/config/setup-issue.css' => '22270af2',
'rsrc/css/application/config/unhandled-exception.css' => '37d4f9a2',
'rsrc/css/application/conpherence/durable-column.css' => '9d3af55b',
'rsrc/css/application/conpherence/durable-column.css' => 'f50d701e',
'rsrc/css/application/conpherence/menu.css' => 'f389e048',
'rsrc/css/application/conpherence/message-pane.css' => 'e978e4ae',
'rsrc/css/application/conpherence/message-pane.css' => '9ae1b2f7',
'rsrc/css/application/conpherence/notification.css' => '72178795',
'rsrc/css/application/conpherence/transaction.css' => '25138b7f',
'rsrc/css/application/conpherence/update.css' => '1099a660',
'rsrc/css/application/conpherence/widget-pane.css' => 'a9082fd0',
'rsrc/css/application/contentsource/content-source-view.css' => '4b8b05d4',
@ -515,11 +515,12 @@ return array(
'changeset-view-manager' => '58562350',
'config-options-css' => '7fedf08b',
'config-welcome-css' => '6abd79be',
'conpherence-durable-column-view' => '9d3af55b',
'conpherence-durable-column-view' => 'f50d701e',
'conpherence-menu-css' => 'f389e048',
'conpherence-message-pane-css' => 'e978e4ae',
'conpherence-message-pane-css' => '9ae1b2f7',
'conpherence-notification-css' => '72178795',
'conpherence-thread-manager' => '0a5192c4',
'conpherence-transaction-css' => '25138b7f',
'conpherence-update-css' => '1099a660',
'conpherence-widget-pane-css' => 'a9082fd0',
'differential-changeset-view-css' => 'e19cfd6e',
@ -750,7 +751,6 @@ return array(
'phabricator-textareautils' => '5c93c52c',
'phabricator-title' => 'df5e11d2',
'phabricator-tooltip' => '1d298e3a',
'phabricator-transaction-view-css' => 'bd9f9f6e',
'phabricator-ui-example-css' => '528b19de',
'phabricator-uiexample-javelin-view' => 'd4a14807',
'phabricator-uiexample-reactor-button' => 'd19198c8',
@ -2040,7 +2040,6 @@ return array(
'phabricator-remarkup-css',
'syntax-highlighting-css',
'aphront-pager-view-css',
'phabricator-transaction-view-css',
'aphront-tooltip-css',
'phabricator-flag-css',
'phui-info-view-css',

View file

@ -90,7 +90,6 @@ return array(
'phabricator-remarkup-css',
'syntax-highlighting-css',
'aphront-pager-view-css',
'phabricator-transaction-view-css',
'aphront-tooltip-css',
'phabricator-flag-css',
'phui-info-view-css',

View file

@ -98,8 +98,7 @@ final class ConpherenceTransactionView extends AphrontView {
throw new Exception(pht('Call setUser() before render()!'));
}
// TODO - rename / condense this...!
require_celerity_resource('phabricator-transaction-view-css');
require_celerity_resource('conpherence-transaction-css');
$transaction = $this->getConpherenceTransaction();
switch ($transaction->getTransactionType()) {
@ -107,7 +106,7 @@ final class ConpherenceTransactionView extends AphrontView {
return phutil_tag(
'div',
array(
'class' => 'date-marker',
'class' => 'conpherence-transaction-view date-marker',
),
array(
phutil_tag(
@ -132,18 +131,18 @@ final class ConpherenceTransactionView extends AphrontView {
$transaction_id = $this->anchorName ? 'anchor-'.$this->anchorName : null;
$header = phutil_tag_div(
'phabricator-transaction-header grouped',
'conpherence-transaction-header grouped',
array($actions, $info));
return phutil_tag(
'div',
array(
'class' => 'phabricator-transaction-view '.$classes,
'class' => 'conpherence-transaction-view '.$classes,
'id' => $transaction_id,
),
array(
$image,
phutil_tag_div('phabricator-transaction-detail grouped',
phutil_tag_div('conpherence-transaction-detail grouped',
array($header, $content)),
));
}
@ -203,7 +202,7 @@ final class ConpherenceTransactionView extends AphrontView {
return phutil_tag(
'span',
array(
'class' => 'phabricator-transaction-info',
'class' => 'conpherence-transaction-info',
),
$info);
}
@ -237,7 +236,7 @@ final class ConpherenceTransactionView extends AphrontView {
$image = phutil_tag(
'span',
array(
'class' => 'phabricator-transaction-image',
'class' => 'conpherence-transaction-image',
'style' => 'background-image: url('.$image_uri.');',
));
break;
@ -272,7 +271,7 @@ final class ConpherenceTransactionView extends AphrontView {
$content = $this->getMarkupEngine()->getOutput(
$comment,
PhabricatorApplicationTransactionComment::MARKUP_FIELD_COMMENT);
$content_class = 'conpherence-message phabricator-remarkup';
$content_class = 'conpherence-message';
break;
}
@ -285,7 +284,7 @@ final class ConpherenceTransactionView extends AphrontView {
$content));
return phutil_tag_div(
'phabricator-transaction-content',
'conpherence-transaction-content',
$this->renderChildren());
}

View file

@ -1,72 +0,0 @@
/**
* @provides phabricator-transaction-view-css
*/
.phabricator-transaction-view {
background: 0px 2px no-repeat;
margin: 1em 0 1.25em;
min-height: 50px;
padding: 2px 0px;
position: relative;
}
.device-phone .phabricator-transaction-view {
margin: 10px 0;
}
.device-phone .phabricator-transaction-detail {
margin: 0;
min-height: 50px;
background: #fff;
}
.phabricator-transaction-header {
background: {$lightgreybackground};
padding: 5px 8px;
}
.phabricator-transaction-header a {
font-weight: bold;
color: {$darkbluetext};
}
.phabricator-transaction-info {
color: {$greytext};
float: right;
font-size: 11px;
}
.device-phone .phabricator-transaction-info {
display: none;
}
.phabricator-transaction-content {
background: #fff;
padding: 8px;
overflow: auto;
}
.phabricator-transaction-subheader {
color: {$lightgreytext};
padding-bottom: 8px;
}
.transaction-comment + .phabricator-transaction-subheader {
border-top: 1px solid {$thinblueborder};
margin-top: 12px;
padding-top: 12px;
}
div.phabricator-remarkup + .phabricator-transaction-subheader {
margin-top: 12px;
}
.phabricator-transaction-image {
float: left;
border-radius: 3px;
height: 35px;
width: 35px;
background-size: 35px;
position: absolute;
top: 5px;
}

View file

@ -145,7 +145,7 @@
}
.conpherence-durable-column-transactions
.phabricator-transaction-view.conpherence-edited {
.conpherence-transaction-view.conpherence-edited {
color: {$lightgreytext};
font-size: 12px;
margin: 0;
@ -153,11 +153,11 @@
}
.conpherence-durable-column-transactions .conpherence-edited
.phabricator-transaction-header {
.conpherence-transaction-header {
display: none;
}
.conpherence-durable-column-transactions .phabricator-transaction-view {
.conpherence-durable-column-transactions .conpherence-transaction-view {
background: none;
margin: 0;
padding: 4px 0;
@ -165,62 +165,55 @@
}
.conpherence-durable-column-transactions
.phabricator-transaction-view
.conpherence-transaction-view
.conpherence-message {
word-wrap: break-word;
}
.conpherence-durable-column-transactions .phabricator-transaction-detail {
.conpherence-durable-column-transactions .conpherence-transaction-detail {
border: 0;
margin: 0;
}
.conpherence-durable-column-transactions .phabricator-transaction-detail
.phabricator-transaction-header {
.conpherence-durable-column-transactions .conpherence-transaction-detail
.conpherence-transaction-header {
background: none;
padding: 0 0 2px 0;
}
.conpherence-durable-column-transactions .date-marker {
border-top: 1px solid {$thinblueborder};
.conpherence-durable-column-transactions
.conpherence-transaction-view.date-marker {
margin: 20px 0px 8px;
}
.conpherence-durable-column-transactions .date-marker .date {
position: relative;
top: -11px;
.conpherence-durable-column-transactions
.conpherence-transaction-view.date-marker .date {
left: 0;
background-color: #fff;
color: {$darkbluetext};
font-weight: bold;
font-size: 12px;
padding: 0 6px 0 0;
}
.conpherence-durable-column-transactions .phabricator-transaction-detail
.phabricator-transaction-header .phabricator-transaction-info,
.phabricator-transaction-header .epoch-link {
.conpherence-durable-column-transactions .conpherence-transaction-detail
.conpherence-transaction-header .conpherence-transaction-info,
.conpherence-transaction-header .epoch-link {
color: {$lightbluetext};
float: none;
font-size: 12px;
}
.phabricator-transaction-header .epoch-link {
font-weight: normal;
}
.conpherence-durable-column-transactions .phabricator-transaction-detail
.phabricator-transaction-header .phui-link-person {
.conpherence-durable-column-transactions .conpherence-transaction-detail
.conpherence-transaction-header .phui-link-person {
margin: 0 8px 0 0;
}
.conpherence-durable-column-transactions .phabricator-transaction-detail
.phabricator-transaction-content .phui-link-person {
.conpherence-durable-column-transactions .conpherence-transaction-detail
.conpherence-transaction-content .phui-link-person {
color: {$darkbluetext};
}
.conpherence-durable-column-transactions .phabricator-transaction-detail
.phabricator-transaction-content {
.conpherence-durable-column-transactions .conpherence-transaction-detail
.conpherence-transaction-content {
background: #fff;
padding: 0 0 8px 0;
}

View file

@ -141,16 +141,27 @@
width: 100%;
}
.conpherence-message-pane .phabricator-transaction-view {
.conpherence-message-pane .conpherence-transaction-view {
padding: 2px 0px;
margin: 4px 12px;
background-size: 35px;
min-height: auto;
}
.device-phone .conpherence-message-pane .phabricator-transaction-view {
.device-phone .conpherence-message-pane .conpherence-transaction-view {
margin: 0 10px 0 0;
}
.conpherence-message-pane .conpherence-transaction-image {
float: left;
border-radius: 3px;
height: 35px;
width: 35px;
background-size: 35px;
position: absolute;
top: 5px;
}
.conpherence-message-pane .conpherence-comment.anchor-target,
.conpherence-message-pane .conpherence-edited.anchor-target {
background: #fdf5d4;
@ -166,37 +177,35 @@
padding: 0px 4px 0px 4px;
}
.conpherence-message-pane .phabricator-transaction-detail {
.conpherence-message-pane .conpherence-transaction-detail {
border-width: 0;
margin-left: 45px;
}
.conpherence-message-pane .date-marker {
border-top: 1px solid #d7d7d7;
.conpherence-message-pane .conpherence-transaction-view.date-marker {
padding: 0;
margin: 12px 12px 4px;
min-height: auto;
}
.device-phone .conpherence-message-pane .date-marker {
.device-phone .conpherence-message-pane
.conpherence-transaction-view.date-marker {
margin: 5px 0;
}
.conpherence-message-pane .date-marker .date {
position: relative;
top: -11px;
.conpherence-message-pane .conpherence-transaction-view.date-marker
.date {
left: 40px;
background-color: #FFF;
color: {$darkbluetext};
font-size: 13px;
padding: 0px 5px;
font-weight: bold;
}
.device-phone .conpherence-message-pane .phabricator-transaction-detail {
.device-phone .conpherence-message-pane .conpherence-transaction-detail {
min-height: auto;
margin: 0;
}
.conpherence-message-pane .conpherence-edited .phabricator-transaction-content {
.conpherence-message-pane .conpherence-edited .conpherence-transaction-content {
color: {$lightgreytext};
font-size: 13px;
margin: 0;
@ -215,7 +224,7 @@
margin-top: 20px;
}
.conpherence-message-pane .conpherence-edited .phabricator-transaction-header {
.conpherence-message-pane .conpherence-edited .conpherence-transaction-header {
float: right;
}
@ -225,35 +234,40 @@
}
.conpherence-message-pane .conpherence-edited
.phabricator-transaction-content a {
.conpherence-transaction-content a {
color: {$darkbluetext};
}
.device-phone .conpherence-message-pane .conpherence-edited
.phabricator-transaction-content {
.conpherence-transaction-content {
padding: 0 0 5px 35px;
}
.conpherence-message-pane .phabricator-transaction-info,
.device-phone .conpherence-message-pane .conpherence-transaction-info {
display: none;
}
.conpherence-message-pane .conpherence-transaction-info,
.conpherence-message-pane .anchor-link,
.conpherence-message-pane .phabricator-content-source-view {
.conpherence-message-pane .conpherence-content-source-view {
color: {$lightbluetext};
line-height: 16px;
font-size: 12px;
}
.conpherence-message-pane .phabricator-transaction-header,
.conpherence-message-pane .phabricator-transaction-info,
.conpherence-message-pane .conpherence-transaction-info {
float: right;
}
.conpherence-message-pane .conpherence-transaction-header,
.conpherence-message-pane .conpherence-transaction-info,
.conpherence-message-pane .anchor-link,
.conpherence-message-pane .phabricator-transaction-content {
.conpherence-message-pane .conpherence-transaction-content {
background: none;
padding: 0;
}
.conpherence-message-pane .anchor-link {
font-weight: normal;
}
.conpherence-message-pane .phabricator-transaction-content {
.conpherence-message-pane .conpherence-transaction-content {
padding: 2px 0 8px 0;
}

View file

@ -0,0 +1,27 @@
/**
* @provides conpherence-transaction-css
*/
.conpherence-transaction-view {
position: relative;
}
.conpherence-transaction-content {
overflow: auto;
}
.conpherence-transaction-header .phui-link-person {
font-weight: bold;
color: {$darkbluetext};
}
.conpherence-transaction-view.date-marker {
border-top: 1px solid {$thinblueborder};
}
.conpherence-transaction-view.date-marker .date {
position: relative;
top: -11px;
background-color: #fff;
color: {$darkbluetext};
font-weight: bold;
}