diff --git a/src/__celerity_resource_map__.php b/src/__celerity_resource_map__.php index ba68917741..81fc4852f1 100644 --- a/src/__celerity_resource_map__.php +++ b/src/__celerity_resource_map__.php @@ -1864,6 +1864,18 @@ celerity_register_resource_map(array( ), 'disk' => '/rsrc/js/application/phame/phame-post-preview.js', ), + 'javelin-behavior-pholio-edit-inline-comment' => + array( + 'uri' => '/res/61759cd8/rsrc/js/application/pholio/behavior-pholio-edit-inline-comment.js', + 'type' => 'js', + 'requires' => + array( + 0 => 'javelin-behavior', + 1 => 'javelin-stratcom', + 2 => 'javelin-dom', + ), + 'disk' => '/rsrc/js/application/pholio/behavior-pholio-edit-inline-comment.js', + ), 'javelin-behavior-pholio-mock-view' => array( 'uri' => '/res/e5f432ac/rsrc/js/application/pholio/behavior-pholio-mock-view.js', diff --git a/src/applications/pholio/controller/PholioInlineController.php b/src/applications/pholio/controller/PholioInlineController.php index 618ff863ee..8d04c12aa7 100644 --- a/src/applications/pholio/controller/PholioInlineController.php +++ b/src/applications/pholio/controller/PholioInlineController.php @@ -20,10 +20,27 @@ final class PholioInlineController extends PholioController { $this->id ); + $inline_comments = array_merge( + $inline_comments, + id(new PholioTransactionComment())->loadAllWhere( + 'imageid = %d AND authorphid = %s AND transactionphid IS NULL', + $this->id, + $user->getPHID())); + $inlines = array(); foreach ($inline_comments as $inline_comment) { + $author = id(new PhabricatorUser())->loadOneWhere( + 'phid = %s', + $inline_comment->getAuthorPHID() + ); $inlines[] = array( 'phid' => $inline_comment->getPHID(), + 'userphid' => $author->getPHID(), + 'username' => $author->getUserName(), + 'canEdit' => ($inline_comment-> + getEditPolicy(PhabricatorPolicyCapability::CAN_EDIT) == + $user->getPHID()) ? true : false, + 'transactionphid' => $inline_comment->getTransactionPHID(), 'imageID' => $inline_comment->getImageID(), 'x' => $inline_comment->getX(), 'y' => $inline_comment->getY(), diff --git a/src/applications/pholio/controller/PholioInlineSaveController.php b/src/applications/pholio/controller/PholioInlineSaveController.php index 5db75f6931..e0b13e91d0 100644 --- a/src/applications/pholio/controller/PholioInlineSaveController.php +++ b/src/applications/pholio/controller/PholioInlineSaveController.php @@ -13,8 +13,7 @@ final class PholioInlineSaveController extends PholioController { ->setViewer($user) ->requireCapabilities( array( - PhabricatorPolicyCapability::CAN_VIEW, - PhabricatorPolicyCapability::CAN_EDIT, + PhabricatorPolicyCapability::CAN_VIEW )) ->withIDs(array($request->getInt('mockID'))) ->executeOne(); diff --git a/src/applications/pholio/view/PholioMockImagesView.php b/src/applications/pholio/view/PholioMockImagesView.php index 71d8615c8c..b43020e8f1 100644 --- a/src/applications/pholio/view/PholioMockImagesView.php +++ b/src/applications/pholio/view/PholioMockImagesView.php @@ -47,12 +47,22 @@ final class PholioMockImagesView extends AphrontView { $main_image_tag ); + + $inline_comments_holder = javelin_tag( + 'div', + array( + 'id' => 'mock-inline-comments', + 'sigil' => 'mock-inline-comments', + 'class' => 'pholio-mock-inline-comments' + ), + ""); + $mockview[] = phutil_tag( 'div', array( 'class' => 'pholio-mock-image-container', ), - $main_image_tag); + array($main_image_tag, $inline_comments_holder)); if (count($this->mock->getImages()) > 1) { $thumbnails = array(); diff --git a/webroot/rsrc/css/application/pholio/pholio.css b/webroot/rsrc/css/application/pholio/pholio.css index 9a44602fb2..c9438de7b4 100644 --- a/webroot/rsrc/css/application/pholio/pholio.css +++ b/webroot/rsrc/css/application/pholio/pholio.css @@ -4,6 +4,7 @@ .pholio-mock-image-container { background-color: #282828; text-align: center; + vertical-align: middle; } .pholio-mock-carousel { @@ -43,3 +44,35 @@ margin: 10px 0px; } + +.pholio-mock-inline-comments { + display: inline-block; + margin-left: 10px; + text-align: left; + padding-bottom: 10px; +} + +.pholio-inline-comment { + border: 1px solid #aa8; + background: #f9f9f1; + margin-bottom: 2px; + padding: 8px 10px; +} + +.pholio-inline-comment-header { + border-bottom: 1px solid #cca; + color: #333; + font-weight: bold; + padding-bottom: 6px; + margin-bottom: 4px; +} + +.pholio-mock-inline-comment-highlight { + background-color: #F0B160; +} + +.pholio-inline-head-links a { + 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 22ea7ab763..5e063bbfd7 100644 --- a/webroot/rsrc/js/application/pholio/behavior-pholio-mock-view.js +++ b/webroot/rsrc/js/application/pholio/behavior-pholio-mock-view.js @@ -139,14 +139,56 @@ JX.behavior('pholio-mock-view', function(config) { endY: Math.max(startPos.y,endPos.y), comment: comment}; - inlineComment.addData(commentToAdd); inlineComment.send(); - + load_inline_comments(); }); + function forge_inline_comment(data) { + var comment_head = data.username; + if (data.transactionphid == null) comment_head += " (draft)"; + + var links = null; + if (data.canEdit && data.transactionphid == null) { + links = JX.$N( + 'span', + { + className: 'pholio-inline-head-links' + }, + [ + JX.$N('a',{href: 'http://www.google.fi'},'Edit'), + JX.$N('a',{href: 'http://www.google.fi'},'Delete') + ]); + + } + + var comment_header = JX.$N( + 'div', + { + className: 'pholio-inline-comment-header' + }, + [comment_head, links]); + + var comment_body = JX.$N( + 'div', + {}, + data.content); + + var inline_comment = JX.$N( + 'div', + { + id: data.phid + "_comment", + className: 'pholio-inline-comment' + }, + [comment_header, comment_body]); + + return inline_comment; + } + function load_inline_comments() { var data = JX.Stratcom.getData(JX.$(config.mainID)); + var comment_holder = JX.$('mock-inline-comments'); + JX.DOM.setContent(comment_holder, ''); var inline_comments_url = "/pholio/inline/" + data['imageID'] + "/"; var inline_comments = new JX.Request(inline_comments_url, function(r) { @@ -156,25 +198,68 @@ JX.behavior('pholio-mock-view', function(config) { var inlineSelection = JX.$N( 'div', { - id: r[i].phid, + id: r[i].phid + "_selection", className: 'pholio-mock-select-border', title: r[i].content }); + JX.Stratcom.addData( + inlineSelection, + {phid: r[i].phid}); + + JX.Stratcom.addSigil(inlineSelection, "image_selection"); + JX.DOM.appendContent(comment_holder, forge_inline_comment(r[i])); + JX.DOM.appendContent(wrapper, inlineSelection); JX.$V(r[i].x, r[i].y).setPos(inlineSelection); - JX.$V(r[i].width, r[i].height) - .setDim(inlineSelection); + JX.$V(r[i].width, r[i].height).setDim(inlineSelection); + + if (r[i].transactionphid == null) { + + var inlineDraft = JX.$N( + 'div',{className: 'pholio-mock-select-fill'}); + + JX.$V(r[i].x, r[i].y).setPos(inlineDraft); + JX.$V(r[i].width, r[i].height).setDim(inlineDraft); + + JX.Stratcom.addData( + inlineDraft, + {phid: r[i].phid}); + + JX.Stratcom.addSigil(inlineDraft, "image_selection"); + JX.DOM.appendContent(wrapper, inlineDraft); + } } } + + JX.Stratcom.listen( + 'mouseover', + 'image_selection', + function(e) { + var data = e.getNodeData('image_selection'); + + var inline_comment = JX.$(data.phid + "_comment"); + JX.DOM.alterClass(inline_comment, + 'pholio-mock-inline-comment-highlight', true); + }); + + JX.Stratcom.listen( + 'mouseout', + 'image_selection', + function(e) { + var data = e.getNodeData('image_selection'); + + var inline_comment = JX.$(data.phid + "_comment"); + JX.DOM.alterClass(inline_comment, + 'pholio-mock-inline-comment-highlight', false); + }); }); inline_comments.send(); } load_inline_comments(); - });