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:
parent
752055a45c
commit
0dde637059
4 changed files with 41 additions and 31 deletions
|
@ -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(
|
||||||
|
|
|
@ -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);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
Loading…
Add table
Reference in a new issue