From 5d30b1b4fb13bc54c6c41dbed18ecba13079bde1 Mon Sep 17 00:00:00 2001
From: Lauri-Henrik Jalonen <ljalonen@cs.helsinki.fi>
Date: Wed, 27 Feb 2013 10:45:51 -0800
Subject: [PATCH] Various highlights

Summary:
Highlight thumb for image user is currently viewing.
Highlight selection when user mouseovers it's inline(on side).

Test Plan: {F33990}

Reviewers: epriestley

Reviewed By: epriestley

CC: aran, Korvin

Maniphest Tasks: T2446

Differential Revision: https://secure.phabricator.com/D5134
---
 .../pholio/view/PholioInlineCommentView.php   |  6 +++-
 .../pholio/view/PholioMockImagesView.php      |  1 +
 .../rsrc/css/application/pholio/pholio.css    |  4 +--
 .../pholio/behavior-pholio-mock-view.js       | 28 +++++++++++++++++++
 4 files changed, 36 insertions(+), 3 deletions(-)

diff --git a/src/applications/pholio/view/PholioInlineCommentView.php b/src/applications/pholio/view/PholioInlineCommentView.php
index 65f3626065..eb2707083f 100644
--- a/src/applications/pholio/view/PholioInlineCommentView.php
+++ b/src/applications/pholio/view/PholioInlineCommentView.php
@@ -85,7 +85,11 @@ final class PholioInlineCommentView extends AphrontView {
       'div',
       array(
         'id' => $this->inlineComment->getPHID()."_comment",
-        'class' => 'pholio-inline-comment'
+        'class' => 'pholio-inline-comment',
+        'sigil' => 'inline_comment',
+        'meta' => array(
+          'phid' => $this->inlineComment->getPHID()
+        )
       ),
       array($comment_header, $comment_body));
 
diff --git a/src/applications/pholio/view/PholioMockImagesView.php b/src/applications/pholio/view/PholioMockImagesView.php
index 7fe3a2eb09..1764244dd5 100644
--- a/src/applications/pholio/view/PholioMockImagesView.php
+++ b/src/applications/pholio/view/PholioMockImagesView.php
@@ -108,6 +108,7 @@ final class PholioMockImagesView extends AphrontView {
       $mockview[] = phutil_tag(
         'div',
         array(
+          'id' => 'pholio-mock-carousel',
           'class' => 'pholio-mock-carousel',
         ),
         $thumbnails);
diff --git a/webroot/rsrc/css/application/pholio/pholio.css b/webroot/rsrc/css/application/pholio/pholio.css
index bbda5bdc1a..a742015bd9 100644
--- a/webroot/rsrc/css/application/pholio/pholio.css
+++ b/webroot/rsrc/css/application/pholio/pholio.css
@@ -27,7 +27,8 @@
   position: relative;
 }
 
-.device-desktop .pholio-mock-carousel-thumb-item:hover {
+.device-desktop .pholio-mock-carousel-thumb-item:hover,
+  .pholio-mock-carousel-thumb-current {
   background: #383838;
   border-color: #686868;
 }
@@ -101,4 +102,3 @@
   font-weight: normal;
   margin-left: 5px;
 }
-
diff --git a/webroot/rsrc/js/application/pholio/behavior-pholio-mock-view.js b/webroot/rsrc/js/application/pholio/behavior-pholio-mock-view.js
index cc8c48ce42..6ee7ab7833 100644
--- a/webroot/rsrc/js/application/pholio/behavior-pholio-mock-view.js
+++ b/webroot/rsrc/js/application/pholio/behavior-pholio-mock-view.js
@@ -87,6 +87,20 @@ JX.behavior('pholio-mock-view', function(config) {
     img.onload = JX.bind(img, onload_image, active_image.id);
     img.src = active_image.fullURI;
 
+    var thumbs = JX.DOM.scry(
+      JX.$('pholio-mock-carousel'),
+      'div',
+      'mock-thumbnail');
+
+    for(var k in thumbs) {
+      var thumb_meta = JX.Stratcom.getData(thumbs[k]);
+
+      JX.DOM.alterClass(
+        thumbs[k],
+        'pholio-mock-carousel-thumb-current',
+        (active_image.id == thumb_meta.imageID));
+    }
+
     load_inline_comments();
   }
 
@@ -142,6 +156,20 @@ JX.behavior('pholio-mock-view', function(config) {
         highlight);
   });
 
+  JX.Stratcom.listen(
+    ['mouseover', 'mouseout'],
+    'inline_comment',
+    function(e) {
+      var data = e.getNodeData('inline_comment');
+      var selection = JX.$(data.phid + "_selection");
+      var highlight = (e.getType() == 'mouseover');
+
+      JX.DOM.alterClass(
+        selection,
+        'pholio-mock-inline-comment-highlight',
+        highlight);
+  });
+
   JX.Stratcom.listen(
     'mouseup',
     null,