From 0dde63705936bb644e23fe8eafcb0331fabba615 Mon Sep 17 00:00:00 2001
From: Chad Little <chad@chadsdomain.com>
Date: Sun, 3 Mar 2013 09:19:07 -0800
Subject: [PATCH] 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
---
 src/__celerity_resource_map__.php             |  4 +--
 .../pholio/view/PholioMockImagesView.php      | 19 ++++++------
 .../pholio/pholio-inline-comments.css         | 31 ++++++++++---------
 .../rsrc/css/application/pholio/pholio.css    | 18 +++++++----
 4 files changed, 41 insertions(+), 31 deletions(-)

diff --git a/src/__celerity_resource_map__.php b/src/__celerity_resource_map__.php
index 3102847fed..9f553f6ac1 100644
--- a/src/__celerity_resource_map__.php
+++ b/src/__celerity_resource_map__.php
@@ -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(
diff --git a/src/applications/pholio/view/PholioMockImagesView.php b/src/applications/pholio/view/PholioMockImagesView.php
index 8ff70e96f3..60593cd980 100644
--- a/src/applications/pholio/view/PholioMockImagesView.php
+++ b/src/applications/pholio/view/PholioMockImagesView.php
@@ -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);
   }
 }
diff --git a/webroot/rsrc/css/application/pholio/pholio-inline-comments.css b/webroot/rsrc/css/application/pholio/pholio-inline-comments.css
index fc17b9a4a0..63eecbc51a 100644
--- a/webroot/rsrc/css/application/pholio/pholio-inline-comments.css
+++ b/webroot/rsrc/css/application/pholio/pholio-inline-comments.css
@@ -2,15 +2,11 @@
  * @provides pholio-inline-comments-css
  */
 .pholio-inline-comment-dialog-title {
-  font-weight:    bold;
-  color:          #333333;
-  border-bottom:  1px solid #ccccaa;
+  font-weight: bold;
+  color: #fff;
   padding-bottom: 2px;
-  margin-bottom:  6px;
-}
-
-.pholio-inline-comment-dialog-buttons {
-  padding: 2px 0px;
+  margin-bottom: 6px;
+  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;
 }
diff --git a/webroot/rsrc/css/application/pholio/pholio.css b/webroot/rsrc/css/application/pholio/pholio.css
index f7be932a5a..e7d0158992 100644
--- a/webroot/rsrc/css/application/pholio/pholio.css
+++ b/webroot/rsrc/css/application/pholio/pholio.css
@@ -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 {