1
0
Fork 0
mirror of https://we.phorge.it/source/phorge.git synced 2025-01-26 06:28:19 +01:00

Pholio CSS touchups for inline comments.

Summary: Tightened up spaces, made inline area more 'inset', tweaked colors to match timeline view.

Test Plan: Tested mocks with and without inline comments.

Reviewers: epriestley

Reviewed By: epriestley

CC: aran, Korvin

Differential Revision: https://secure.phabricator.com/D5188
This commit is contained in:
Chad Little 2013-03-03 09:19:07 -08:00
parent 752055a45c
commit 0dde637059
4 changed files with 41 additions and 31 deletions

View file

@ -3218,7 +3218,7 @@ celerity_register_resource_map(array(
), ),
'pholio-css' => 'pholio-css' =>
array( array(
'uri' => '/res/94883ddc/rsrc/css/application/pholio/pholio.css', 'uri' => '/res/08c8c85a/rsrc/css/application/pholio/pholio.css',
'type' => 'css', 'type' => 'css',
'requires' => 'requires' =>
array( array(
@ -3227,7 +3227,7 @@ celerity_register_resource_map(array(
), ),
'pholio-inline-comments-css' => 'pholio-inline-comments-css' =>
array( array(
'uri' => '/res/2b32b3b6/rsrc/css/application/pholio/pholio-inline-comments.css', 'uri' => '/res/647d658d/rsrc/css/application/pholio/pholio-inline-comments.css',
'type' => 'css', 'type' => 'css',
'requires' => 'requires' =>
array( array(

View file

@ -66,14 +66,7 @@ final class PholioMockImagesView extends AphrontView {
), ),
''); '');
$mockview[] = phutil_tag( $carousel_holder = '';
'div',
array(
'class' => 'pholio-mock-image-container',
'id' => 'pholio-mock-image-container'
),
array($mock_wrapper, $inline_comments_holder));
if (count($mock->getImages()) > 0) { if (count($mock->getImages()) > 0) {
$thumbnails = array(); $thumbnails = array();
foreach ($mock->getImages() as $image) { foreach ($mock->getImages() as $image) {
@ -105,7 +98,7 @@ final class PholioMockImagesView extends AphrontView {
$tag); $tag);
} }
$mockview[] = phutil_tag( $carousel_holder = phutil_tag(
'div', 'div',
array( array(
'id' => 'pholio-mock-carousel', 'id' => 'pholio-mock-carousel',
@ -114,6 +107,14 @@ final class PholioMockImagesView extends AphrontView {
$thumbnails); $thumbnails);
} }
$mockview[] = phutil_tag(
'div',
array(
'class' => 'pholio-mock-image-container',
'id' => 'pholio-mock-image-container'
),
array($mock_wrapper, $carousel_holder, $inline_comments_holder));
return $this->renderSingleView($mockview); return $this->renderSingleView($mockview);
} }
} }

View file

@ -2,15 +2,11 @@
* @provides pholio-inline-comments-css * @provides pholio-inline-comments-css
*/ */
.pholio-inline-comment-dialog-title { .pholio-inline-comment-dialog-title {
font-weight: bold; font-weight: bold;
color: #333333; color: #fff;
border-bottom: 1px solid #ccccaa;
padding-bottom: 2px; padding-bottom: 2px;
margin-bottom: 6px; margin-bottom: 6px;
} text-align: left;
.pholio-inline-comment-dialog-buttons {
padding: 2px 0px;
} }
.pholio-inline-comment-dialog-buttons button { .pholio-inline-comment-dialog-buttons button {
@ -19,18 +15,25 @@
} }
.pholio-inline-comment-dialog { .pholio-inline-comment-dialog {
padding: 8px 18px 8px 12px; padding: 10px;
} }
.pholio-inline-comment-dialog-textarea { .pholio-inline-comment-dialog-textarea {
width: 99%; width: 254px;
height: 12em; height: 6em;
margin-bottom: 5px;
} }
.pholio-new-inline-comment { .pholio-new-inline-comment {
position: absolute; position: absolute;
border: 1px solid #aa8; border: 1px solid #000;
background: #f9f9f1; background: rgb(60, 60, 60);
z-index: 100; z-index: 100;
padding: 8px 18px 8px 12px; padding: 8px 10px 8px 12px;
width: 260px;
box-shadow: 0 2px 10px 1px #999;
}
.pholio-inline-comment-dialog-buttons a {
display: none;
} }

View file

@ -12,6 +12,7 @@
background-color: #202020; background-color: #202020;
text-align: center; text-align: center;
border-top: 1px solid #101010; border-top: 1px solid #101010;
margin-right: 320px;
} }
.pholio-mock-carousel-thumb-item { .pholio-mock-carousel-thumb-item {
@ -71,34 +72,39 @@
} }
.pholio-mock-inline-comments { .pholio-mock-inline-comments {
width: 320px; width: 300px;
border-left: 1px solid #101010; border-left: 1px solid #101010;
border-top: 1px solid #333; border-top: 1px solid #333;
position: absolute; position: absolute;
top: 0; top: 0;
bottom: 0; bottom: 0;
right: 0; right: 0;
padding: 10px;
background: #eeedf0;
overflow-x: auto; overflow-x: auto;
text-align: left; text-align: left;
box-shadow: inset 4px 4px 10px rgba(0,0,0,0.2);
} }
.pholio-inline-comment { .pholio-inline-comment {
border: 1px solid #aa8; border: 1px solid #f7f7f7;
background: #f9f9f1; border-bottom: 1px solid #d6d6d6;
margin: 2px; background: #fff;
margin: 0 0 5px 0;
padding: 8px 10px; padding: 8px 10px;
} }
.pholio-inline-comment-header { .pholio-inline-comment-header {
border-bottom: 1px solid #cca;
color: #333; color: #333;
border-bottom: 1px solid #d7d7d7;
font-weight: bold; font-weight: bold;
padding-bottom: 6px; padding-bottom: 6px;
margin-bottom: 4px; margin-bottom: 4px;
} }
.pholio-mock-inline-comment-highlight { .pholio-mock-inline-comment-highlight {
background-color: #F0B160; background-color: #e0e3ec;
border-color: #cacdd5;
} }
.pholio-inline-head-links a { .pholio-inline-head-links a {