1
0
Fork 0
mirror of https://we.phorge.it/source/phorge.git synced 2024-12-25 06:50:55 +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' =>
array(
'uri' => '/res/94883ddc/rsrc/css/application/pholio/pholio.css',
'uri' => '/res/08c8c85a/rsrc/css/application/pholio/pholio.css',
'type' => 'css',
'requires' =>
array(
@ -3227,7 +3227,7 @@ celerity_register_resource_map(array(
),
'pholio-inline-comments-css' =>
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',
'requires' =>
array(

View file

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

View file

@ -3,14 +3,10 @@
*/
.pholio-inline-comment-dialog-title {
font-weight: bold;
color: #333333;
border-bottom: 1px solid #ccccaa;
color: #fff;
padding-bottom: 2px;
margin-bottom: 6px;
}
.pholio-inline-comment-dialog-buttons {
padding: 2px 0px;
text-align: left;
}
.pholio-inline-comment-dialog-buttons button {
@ -19,18 +15,25 @@
}
.pholio-inline-comment-dialog {
padding: 8px 18px 8px 12px;
padding: 10px;
}
.pholio-inline-comment-dialog-textarea {
width: 99%;
height: 12em;
width: 254px;
height: 6em;
margin-bottom: 5px;
}
.pholio-new-inline-comment {
position: absolute;
border: 1px solid #aa8;
background: #f9f9f1;
border: 1px solid #000;
background: rgb(60, 60, 60);
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;
text-align: center;
border-top: 1px solid #101010;
margin-right: 320px;
}
.pholio-mock-carousel-thumb-item {
@ -71,34 +72,39 @@
}
.pholio-mock-inline-comments {
width: 320px;
width: 300px;
border-left: 1px solid #101010;
border-top: 1px solid #333;
position: absolute;
top: 0;
bottom: 0;
right: 0;
padding: 10px;
background: #eeedf0;
overflow-x: auto;
text-align: left;
box-shadow: inset 4px 4px 10px rgba(0,0,0,0.2);
}
.pholio-inline-comment {
border: 1px solid #aa8;
background: #f9f9f1;
margin: 2px;
border: 1px solid #f7f7f7;
border-bottom: 1px solid #d6d6d6;
background: #fff;
margin: 0 0 5px 0;
padding: 8px 10px;
}
.pholio-inline-comment-header {
border-bottom: 1px solid #cca;
color: #333;
border-bottom: 1px solid #d7d7d7;
font-weight: bold;
padding-bottom: 6px;
margin-bottom: 4px;
}
.pholio-mock-inline-comment-highlight {
background-color: #F0B160;
background-color: #e0e3ec;
border-color: #cacdd5;
}
.pholio-inline-head-links a {