recaptime.dev / phorge
@recaptime-dev's working patches + fork for Phorge, a community fork of Phabricator. (Upstream dev and stable branches are at upstream/main and upstream/stable respectively.) hq.recaptime.dev/wiki/Phorge
phorge phabricator
1
fork

Configure Feed

Select the types of activity you want to include in your feed.

Show file comments on file lightboxes

Summary: Basic work in progress, but should show timeline comments for files when in lightbox mode. Looks reasonable.

Test Plan: click on images, see comments from timeline.

Reviewers: epriestley

Reviewed By: epriestley

Subscribers: Korvin

Maniphest Tasks: T3612

Differential Revision: https://secure.phabricator.com/D16896

Chad Little 8aeb7aa5 39509648

+464 -179
+24 -18
resources/celerity/map.php
··· 9 9 'names' => array( 10 10 'conpherence.pkg.css' => '0b64e988', 11 11 'conpherence.pkg.js' => '6249a1cf', 12 - 'core.pkg.css' => '2f1ecc57', 13 - 'core.pkg.js' => 'f0648ee7', 12 + 'core.pkg.css' => '347113ea', 13 + 'core.pkg.js' => '40e98735', 14 14 'darkconsole.pkg.js' => 'e7393ebb', 15 15 'differential.pkg.css' => 'a4ba74b5', 16 16 'differential.pkg.js' => '634399e9', ··· 21 21 'maniphest.pkg.js' => '949a7498', 22 22 'rsrc/css/aphront/aphront-bars.css' => '231ac33c', 23 23 'rsrc/css/aphront/dark-console.css' => 'f54bf286', 24 - 'rsrc/css/aphront/dialog-view.css' => 'c076ef55', 25 - 'rsrc/css/aphront/lightbox-attachment.css' => '90a84e83', 24 + 'rsrc/css/aphront/dialog-view.css' => '49b2a8a3', 26 25 'rsrc/css/aphront/list-filter-view.css' => '5d6f0526', 27 26 'rsrc/css/aphront/multi-column.css' => '84cc6640', 28 27 'rsrc/css/aphront/notification.css' => '3f6c89c9', ··· 133 132 'rsrc/css/phui/phui-chart.css' => '6bf6f78e', 134 133 'rsrc/css/phui/phui-cms.css' => 'be43c8a8', 135 134 'rsrc/css/phui/phui-comment-form.css' => '4ecc56ef', 135 + 'rsrc/css/phui/phui-comment-panel.css' => '85113e6a', 136 136 'rsrc/css/phui/phui-crumbs-view.css' => '195ac419', 137 137 'rsrc/css/phui/phui-curtain-view.css' => '947bf1a4', 138 138 'rsrc/css/phui/phui-document-pro.css' => 'c354e312', ··· 151 151 'rsrc/css/phui/phui-info-panel.css' => '27ea50a1', 152 152 'rsrc/css/phui/phui-info-view.css' => 'ec92802a', 153 153 'rsrc/css/phui/phui-invisible-character-view.css' => '6993d9f0', 154 + 'rsrc/css/phui/phui-lightbox.css' => 'e17ce2bd', 154 155 'rsrc/css/phui/phui-list.css' => '9da2aa00', 155 156 'rsrc/css/phui/phui-object-box.css' => '6b487c57', 156 157 'rsrc/css/phui/phui-object-item-list-view.css' => '87278fa0', ··· 504 505 'rsrc/js/core/behavior-hovercard.js' => 'bcaccd64', 505 506 'rsrc/js/core/behavior-keyboard-pager.js' => 'a8da01f0', 506 507 'rsrc/js/core/behavior-keyboard-shortcuts.js' => '01fca1f0', 507 - 'rsrc/js/core/behavior-lightbox-attachments.js' => 'e50dcfc0', 508 + 'rsrc/js/core/behavior-lightbox-attachments.js' => 'ec949017', 508 509 'rsrc/js/core/behavior-line-linker.js' => '1499a8cb', 509 510 'rsrc/js/core/behavior-more.js' => 'a80d0378', 510 511 'rsrc/js/core/behavior-object-selector.js' => 'e0ec7f2f', ··· 544 545 'almanac-css' => 'dbb9b3af', 545 546 'aphront-bars' => '231ac33c', 546 547 'aphront-dark-console-css' => 'f54bf286', 547 - 'aphront-dialog-view-css' => 'c076ef55', 548 + 'aphront-dialog-view-css' => '49b2a8a3', 548 549 'aphront-list-filter-view-css' => '5d6f0526', 549 550 'aphront-multi-column-view-css' => '84cc6640', 550 551 'aphront-panel-view-css' => '8427b78d', ··· 650 651 'javelin-behavior-history-install' => '7ee2b591', 651 652 'javelin-behavior-icon-composer' => '8499b6ab', 652 653 'javelin-behavior-launch-icon-composer' => '48086888', 653 - 'javelin-behavior-lightbox-attachments' => 'e50dcfc0', 654 + 'javelin-behavior-lightbox-attachments' => 'ec949017', 654 655 'javelin-behavior-line-chart' => 'e4232876', 655 656 'javelin-behavior-load-blame' => '42126667', 656 657 'javelin-behavior-maniphest-batch-editor' => '782ab6e7', ··· 766 767 'javelin-workboard-column' => '21df4ff5', 767 768 'javelin-workboard-controller' => '55baf5ed', 768 769 'javelin-workflow' => '1e911d0f', 769 - 'lightbox-attachment-css' => '90a84e83', 770 770 'maniphest-batch-editor' => 'b0f0b6d5', 771 771 'maniphest-report-css' => '9b9580b7', 772 772 'maniphest-task-edit-css' => 'fda62a9b', ··· 847 847 'phui-chart-css' => '6bf6f78e', 848 848 'phui-cms-css' => 'be43c8a8', 849 849 'phui-comment-form-css' => '4ecc56ef', 850 + 'phui-comment-panel-css' => '85113e6a', 850 851 'phui-crumbs-view-css' => '195ac419', 851 852 'phui-curtain-view-css' => '947bf1a4', 852 853 'phui-document-summary-view-css' => '9ca48bdf', ··· 868 869 'phui-info-view-css' => 'ec92802a', 869 870 'phui-inline-comment-view-css' => '5953c28e', 870 871 'phui-invisible-character-view-css' => '6993d9f0', 872 + 'phui-lightbox-css' => 'e17ce2bd', 871 873 'phui-list-view-css' => '9da2aa00', 872 874 'phui-object-box-css' => '6b487c57', 873 875 'phui-object-item-list-view-css' => '87278fa0', ··· 1578 1580 'javelin-behavior', 1579 1581 'javelin-dom', 1580 1582 'javelin-stratcom', 1583 + ), 1584 + '85113e6a' => array( 1585 + 'phui-timeline-view-css', 1581 1586 ), 1582 1587 '85ee8ce6' => array( 1583 1588 'aphront-dialog-view-css', ··· 2102 2107 'javelin-behavior', 2103 2108 'javelin-dom', 2104 2109 ), 2105 - 'e50dcfc0' => array( 2106 - 'javelin-behavior', 2107 - 'javelin-stratcom', 2108 - 'javelin-dom', 2109 - 'javelin-mask', 2110 - 'javelin-util', 2111 - 'phuix-icon-view', 2112 - 'phabricator-busy', 2113 - ), 2114 2110 'e5339c43' => array( 2115 2111 'javelin-behavior', 2116 2112 'javelin-dom', ··· 2130 2126 'javelin-workflow', 2131 2127 'javelin-dom', 2132 2128 'phabricator-draggable-list', 2129 + ), 2130 + 'ec949017' => array( 2131 + 'javelin-behavior', 2132 + 'javelin-stratcom', 2133 + 'javelin-dom', 2134 + 'javelin-mask', 2135 + 'javelin-util', 2136 + 'phuix-icon-view', 2137 + 'phabricator-busy', 2133 2138 ), 2134 2139 'edd1ba66' => array( 2135 2140 'javelin-behavior', ··· 2283 2288 'phabricator-main-menu-view', 2284 2289 'phabricator-notification-css', 2285 2290 'phabricator-notification-menu-css', 2286 - 'lightbox-attachment-css', 2291 + 'phui-lightbox-css', 2292 + 'phui-comment-panel-css', 2287 2293 'phui-header-view-css', 2288 2294 'phabricator-nav-view-css', 2289 2295 'phui-basic-nav-view-css',
+2 -1
resources/celerity/packages.php
··· 111 111 'phabricator-main-menu-view', 112 112 'phabricator-notification-css', 113 113 'phabricator-notification-menu-css', 114 - 'lightbox-attachment-css', 114 + 'phui-lightbox-css', 115 + 'phui-comment-panel-css', 115 116 'phui-header-view-css', 116 117 'phabricator-nav-view-css', 117 118 'phui-basic-nav-view-css',
+2
src/__phutil_library_map__.php
··· 2653 2653 'PhabricatorFileImageProxyController' => 'applications/files/controller/PhabricatorFileImageProxyController.php', 2654 2654 'PhabricatorFileImageTransform' => 'applications/files/transform/PhabricatorFileImageTransform.php', 2655 2655 'PhabricatorFileInfoController' => 'applications/files/controller/PhabricatorFileInfoController.php', 2656 + 'PhabricatorFileLightboxController' => 'applications/files/controller/PhabricatorFileLightboxController.php', 2656 2657 'PhabricatorFileLinkView' => 'view/layout/PhabricatorFileLinkView.php', 2657 2658 'PhabricatorFileListController' => 'applications/files/controller/PhabricatorFileListController.php', 2658 2659 'PhabricatorFileQuery' => 'applications/files/query/PhabricatorFileQuery.php', ··· 7623 7624 'PhabricatorFileImageProxyController' => 'PhabricatorFileController', 7624 7625 'PhabricatorFileImageTransform' => 'PhabricatorFileTransform', 7625 7626 'PhabricatorFileInfoController' => 'PhabricatorFileController', 7627 + 'PhabricatorFileLightboxController' => 'PhabricatorFileController', 7626 7628 'PhabricatorFileLinkView' => 'AphrontView', 7627 7629 'PhabricatorFileListController' => 'PhabricatorFileController', 7628 7630 'PhabricatorFileQuery' => 'PhabricatorCursorPagedPolicyAwareQuery',
+1
src/applications/files/application/PhabricatorFilesApplication.php
··· 76 76 'dropupload/' => 'PhabricatorFileDropUploadController', 77 77 'compose/' => 'PhabricatorFileComposeController', 78 78 'comment/(?P<id>[1-9]\d*)/' => 'PhabricatorFileCommentController', 79 + 'thread/(?P<phid>[^/]+)/' => 'PhabricatorFileLightboxController', 79 80 'delete/(?P<id>[1-9]\d*)/' => 'PhabricatorFileDeleteController', 80 81 'edit/(?P<id>[1-9]\d*)/' => 'PhabricatorFileEditController', 81 82 'info/(?P<phid>[^/]+)/' => 'PhabricatorFileInfoController',
+43
src/applications/files/controller/PhabricatorFileLightboxController.php
··· 1 + <?php 2 + 3 + final class PhabricatorFileLightboxController 4 + extends PhabricatorFileController { 5 + 6 + public function handleRequest(AphrontRequest $request) { 7 + $viewer = $request->getViewer(); 8 + $phid = $request->getURIData('phid'); 9 + 10 + $file = id(new PhabricatorFileQuery()) 11 + ->setViewer($viewer) 12 + ->withPHIDs(array($phid)) 13 + ->executeOne(); 14 + if (!$file) { 15 + return new Aphront404Response(); 16 + } 17 + 18 + $transactions = id(new PhabricatorFileTransactionQuery()) 19 + ->withTransactionTypes(array(PhabricatorTransactions::TYPE_COMMENT)); 20 + $timeline = $this->buildTransactionTimeline($file, $transactions); 21 + 22 + if ($timeline->isTimelineEmpty()) { 23 + $timeline = phutil_tag( 24 + 'div', 25 + array( 26 + 'class' => 'phui-comment-panel-empty', 27 + ), 28 + pht('No comments.')); 29 + } 30 + 31 + require_celerity_resource('phui-comment-panel-css'); 32 + $content = phutil_tag( 33 + 'div', 34 + array( 35 + 'class' => 'phui-comment-panel', 36 + ), 37 + $timeline); 38 + 39 + return id(new AphrontAjaxResponse()) 40 + ->setContent($content); 41 + } 42 + 43 + }
+4 -2
src/applications/files/markup/PhabricatorEmbedFileRemarkupRule.php
··· 98 98 PhabricatorObjectHandle $handle, 99 99 array $options) { 100 100 101 - require_celerity_resource('lightbox-attachment-css'); 101 + require_celerity_resource('phui-lightbox-css'); 102 102 103 103 $attrs = array(); 104 104 $image_class = 'phabricator-remarkup-embed-image'; ··· 176 176 'uri' => $file->getBestURI(), 177 177 'dUri' => $file->getDownloadURI(), 178 178 'viewable' => true, 179 + 'monogram' => $file->getMonogram(), 179 180 ), 180 181 ), 181 182 $img); ··· 279 280 ->setFileName($this->assertFlatText($options['name'])) 280 281 ->setFileDownloadURI($file->getDownloadURI()) 281 282 ->setFileViewURI($file->getBestURI()) 282 - ->setFileViewable((bool)$options['viewable']); 283 + ->setFileViewable((bool)$options['viewable']) 284 + ->setFileMonogram($file->getMonogram()); 283 285 } 284 286 285 287 private function parseDimension($string) {
+4
src/applications/transactions/view/PhabricatorApplicationTransactionView.php
··· 233 233 return $view; 234 234 } 235 235 236 + public function isTimelineEmpty() { 237 + return !count($this->buildEvents(true)); 238 + } 239 + 236 240 protected function getOrBuildEngine() { 237 241 if (!$this->engine) { 238 242 $field = PhabricatorApplicationTransactionComment::MARKUP_FIELD_COMMENT;
+1 -1
src/view/form/control/PhabricatorRemarkupControl.php
··· 29 29 30 30 // We need to have this if previews render images, since Ajax can not 31 31 // currently ship JS or CSS. 32 - require_celerity_resource('lightbox-attachment-css'); 32 + require_celerity_resource('phui-lightbox-css'); 33 33 34 34 if (!$this->getDisabled()) { 35 35 Javelin::initBehavior(
+18 -1
src/view/layout/PhabricatorFileLinkView.php
··· 7 7 private $fileViewURI; 8 8 private $fileViewable; 9 9 private $filePHID; 10 + private $fileMonogram; 10 11 private $customClass; 11 12 12 13 public function setCustomClass($custom_class) { 13 14 $this->customClass = $custom_class; 14 15 return $this; 15 16 } 17 + 16 18 public function getCustomClass() { 17 19 return $this->customClass; 18 20 } ··· 21 23 $this->filePHID = $file_phid; 22 24 return $this; 23 25 } 26 + 24 27 private function getFilePHID() { 25 28 return $this->filePHID; 26 29 } 27 30 31 + public function setFileMonogram($monogram) { 32 + $this->fileMonogram = $monogram; 33 + return $this; 34 + } 35 + 36 + private function getFileMonogram() { 37 + return $this->fileMonogram; 38 + } 39 + 28 40 public function setFileViewable($file_viewable) { 29 41 $this->fileViewable = $file_viewable; 30 42 return $this; 31 43 } 44 + 32 45 private function getFileViewable() { 33 46 return $this->fileViewable; 34 47 } ··· 37 50 $this->fileViewURI = $file_view_uri; 38 51 return $this; 39 52 } 53 + 40 54 private function getFileViewURI() { 41 55 return $this->fileViewURI; 42 56 } ··· 45 59 $this->fileDownloadURI = $file_download_uri; 46 60 return $this; 47 61 } 62 + 48 63 private function getFileDownloadURI() { 49 64 return $this->fileDownloadURI; 50 65 } ··· 53 68 $this->fileName = $file_name; 54 69 return $this; 55 70 } 71 + 56 72 private function getFileName() { 57 73 return $this->fileName; 58 74 } ··· 64 80 'uri' => $this->getFileViewURI(), 65 81 'dUri' => $this->getFileDownloadURI(), 66 82 'name' => $this->getFileName(), 83 + 'monogram' => $this->getFileMonogram(), 67 84 ); 68 85 } 69 86 70 87 public function render() { 71 88 require_celerity_resource('phabricator-remarkup-css'); 72 - require_celerity_resource('lightbox-attachment-css'); 89 + require_celerity_resource('phui-lightbox-css'); 73 90 74 91 $sigil = null; 75 92 $meta = null;
+11 -2
src/view/page/PhabricatorStandardPageView.php
··· 271 271 $default_img_uri = 272 272 celerity_get_resource_uri( 273 273 'rsrc/image/icon/fatcow/document_black.png'); 274 + $icon = id(new PHUIIconView()) 275 + ->setIcon('fa-download'); 276 + $lightbox_id = celerity_generate_unique_node_id(); 274 277 $download_form = phabricator_form( 275 278 $user, 276 279 array( ··· 281 284 ), 282 285 phutil_tag( 283 286 'button', 284 - array('class' => 'button grey'), 285 - pht('Download'))); 287 + array( 288 + 'class' => 'button grey has-icon', 289 + ), 290 + array( 291 + $icon, 292 + pht('Download'), 293 + ))); 286 294 287 295 Javelin::initBehavior( 288 296 'lightbox-attachments', 289 297 array( 298 + 'lightbox_id' => $lightbox_id, 290 299 'defaultImageUri' => $default_img_uri, 291 300 'downloadForm' => $download_form, 292 301 ));
+5
webroot/rsrc/css/aphront/dialog-view.css
··· 108 108 opacity: 0.95; 109 109 } 110 110 111 + .jx-white-mask { 112 + background: #fff; 113 + opacity: 1; 114 + } 115 + 111 116 .jx-date-mask { 112 117 background: #292f33; 113 118 opacity: 0.5;
-103
webroot/rsrc/css/aphront/lightbox-attachment.css
··· 1 - /** 2 - * @provides lightbox-attachment-css 3 - */ 4 - 5 - 6 - .lightbox-attached { 7 - overflow: hidden; 8 - } 9 - 10 - .lightbox-attachment { 11 - position: fixed; 12 - top: 0; 13 - left: 0; 14 - bottom: 0; 15 - right: 0; 16 - overflow-y: auto; 17 - } 18 - 19 - .lightbox-attachment img { 20 - max-width: calc(100% - 44px); 21 - max-height: calc(100% - 44px); 22 - position: absolute; 23 - top: 44px; 24 - right: 0; 25 - bottom: 0; 26 - left: 0; 27 - margin: auto; 28 - } 29 - 30 - .jx-mask + .lightbox-attachment { 31 - background: {$lightgreybackground}; 32 - } 33 - 34 - .lightbox-attachment .loading { 35 - position: absolute; 36 - top: -9999px; 37 - } 38 - 39 - .lightbox-attachment .attachment-name { 40 - width: 100%; 41 - line-height: 30px; 42 - text-align: center; 43 - } 44 - 45 - .lightbox-attachment .lightbox-status { 46 - background: #fff; 47 - position: fixed; 48 - top: 0; 49 - left: 0; 50 - right: 0; 51 - height: 44px; 52 - padding: 0 20px; 53 - line-height: 44px; 54 - border-bottom: 1px solid {$thinblueborder}; 55 - } 56 - 57 - .lightbox-attachment .lightbox-status .lightbox-download { 58 - float: right; 59 - } 60 - 61 - .lightbox-attachment .lightbox-status .lightbox-download 62 - .lightbox-download-form { 63 - display: inline; 64 - } 65 - 66 - .lightbox-attachment .lightbox-close { 67 - float: right; 68 - margin: 9px 0 0px 8px; 69 - } 70 - 71 - .lightbox-attachment .lightbox-left { 72 - top: 46%; 73 - left: 12px; 74 - position: fixed; 75 - display: block; 76 - height: 40px; 77 - width: 40px; 78 - } 79 - 80 - .lightbox-attachment .lightbox-left .phui-icon-view { 81 - font-size: 40px; 82 - } 83 - 84 - .lightbox-attachment .lightbox-left:hover .phui-icon-view { 85 - color: {$sky}; 86 - } 87 - 88 - .lightbox-attachment .lightbox-right .phui-icon-view { 89 - top: 46%; 90 - right: 12px; 91 - position: fixed; 92 - display: block; 93 - height: 38px; 94 - width: 21px; 95 - } 96 - 97 - .lightbox-attachment .lightbox-right .phui-icon-view { 98 - font-size: 40px; 99 - } 100 - 101 - .lightbox-attachment .lightbox-right:hover .phui-icon-view { 102 - color: {$sky}; 103 - }
+60
webroot/rsrc/css/phui/phui-comment-panel.css
··· 1 + /** 2 + * @provides phui-comment-panel-css 3 + * @requires phui-timeline-view-css 4 + */ 5 + 6 + .phui-comment-panel .phui-timeline-view { 7 + background: none; 8 + } 9 + 10 + .phui-comment-panel .phui-comment-panel-empty { 11 + margin: 16px; 12 + padding: 12px; 13 + border: 1px solid {$thinblueborder}; 14 + background: {$lightbluebackground}; 15 + text-align: center; 16 + color: {$lightbluetext}; 17 + } 18 + 19 + .phui-comment-panel .phui-timeline-view .phui-timeline-event-view { 20 + margin: 0; 21 + } 22 + 23 + .phui-comment-panel .phui-timeline-view .phui-timeline-image { 24 + display: none; 25 + } 26 + 27 + .phui-comment-panel .phui-timeline-view .phui-timeline-wedge { 28 + display: none; 29 + } 30 + 31 + .phui-comment-panel .phui-timeline-major-event .phui-timeline-group { 32 + border: none; 33 + } 34 + 35 + .phui-comment-panel .phui-timeline-major-event .phui-timeline-title { 36 + background: none; 37 + border: none; 38 + padding: 0; 39 + visibility: hidden; 40 + } 41 + 42 + .phui-comment-panel .phui-timeline-major-event .phui-timeline-title a { 43 + visibility: visible; 44 + } 45 + 46 + .phui-comment-panel .phui-timeline-icon-fill, 47 + .phui-comment-panel .phui-timeline-menu { 48 + display: none; 49 + } 50 + 51 + .phui-comment-panel .phui-timeline-major-event .phui-timeline-content { 52 + border: none; 53 + } 54 + 55 + .phui-comment-panel .phui-timeline-major-event .phui-timeline-content 56 + .phui-timeline-core-content { 57 + border: none; 58 + padding: 4px 0; 59 + background: transparent; 60 + }
+155
webroot/rsrc/css/phui/phui-lightbox.css
··· 1 + /** 2 + * @provides phui-lightbox-css 3 + */ 4 + 5 + 6 + .lightbox-attached { 7 + overflow: hidden; 8 + } 9 + 10 + .lightbox-attachment { 11 + position: fixed; 12 + top: 0; 13 + left: 0; 14 + bottom: 0; 15 + right: 0; 16 + overflow-y: auto; 17 + } 18 + 19 + .lightbox-attachment .lightbox-image-frame { 20 + position: absolute; 21 + top: 44px; 22 + right: 0; 23 + bottom: 0; 24 + left: 0; 25 + } 26 + 27 + .lightbox-attachment.comment-panel-open .lightbox-image-frame { 28 + right: 320px; 29 + } 30 + 31 + .lightbox-attachment .lightbox-image-frame img { 32 + max-width: calc(100% - 40px); 33 + max-height: calc(100% - 24px); 34 + position: absolute; 35 + top: 0; 36 + bottom: 0; 37 + left: 0; 38 + right: 0; 39 + margin: auto; 40 + } 41 + 42 + .lightbox-comment-frame { 43 + position: absolute; 44 + top: -19999px; 45 + bottom: -19999px; 46 + opacity: 0; 47 + transition: all 0.2s; 48 + } 49 + 50 + .comment-panel-open .lightbox-comment-frame { 51 + position: fixed; 52 + top: 44px; 53 + bottom: 0; 54 + right: 0; 55 + width: 320px; 56 + overflow-y: auto; 57 + background: #fff; 58 + opacity: 1; 59 + } 60 + 61 + .jx-mask + .lightbox-attachment { 62 + background: {$lightgreybackground}; 63 + } 64 + 65 + .lightbox-attachment .attachment-name { 66 + width: 100%; 67 + line-height: 30px; 68 + text-align: center; 69 + } 70 + 71 + .lightbox-attachment .lightbox-status { 72 + background: #fff; 73 + position: fixed; 74 + top: 0; 75 + left: 0; 76 + right: 0; 77 + height: 44px; 78 + padding: 0 20px; 79 + line-height: 44px; 80 + border-bottom: 1px solid {$thinblueborder}; 81 + color: {$greytext}; 82 + } 83 + 84 + .lightbox-attachment .lightbox-status .lightbox-download { 85 + float: right; 86 + } 87 + 88 + .lightbox-attachment .lightbox-status a { 89 + color: #000; 90 + margin-right: 4px; 91 + font-size: {$biggerfontsize}; 92 + } 93 + 94 + .lightbox-download button.has-icon { 95 + padding-left: 28px; 96 + } 97 + 98 + .lightbox-attachment .lightbox-status .lightbox-download 99 + .lightbox-download-form { 100 + display: inline; 101 + } 102 + 103 + .lightbox-attachment .lightbox-comment { 104 + float: right; 105 + margin: 9px 0 0 8px; 106 + padding-left: 28px; 107 + } 108 + 109 + .lightbox-attachment.comment-panel-open .lightbox-comment, 110 + .lightbox-attachment.comment-panel-open .lightbox-comment .phui-icon-view { 111 + color: {$sky}; 112 + } 113 + 114 + .lightbox-attachment .lightbox-close { 115 + float: right; 116 + margin: 9px 0 0 8px; 117 + } 118 + 119 + .lightbox-attachment .lightbox-left { 120 + top: 46%; 121 + left: 12px; 122 + position: fixed; 123 + display: block; 124 + height: 40px; 125 + width: 40px; 126 + } 127 + 128 + .lightbox-attachment .lightbox-left .phui-icon-view { 129 + font-size: 40px; 130 + } 131 + 132 + .lightbox-attachment .lightbox-left:hover .phui-icon-view { 133 + color: {$sky}; 134 + } 135 + 136 + .lightbox-attachment .lightbox-right .phui-icon-view { 137 + top: 46%; 138 + right: 12px; 139 + position: fixed; 140 + display: block; 141 + height: 38px; 142 + width: 21px; 143 + } 144 + 145 + .lightbox-attachment.comment-panel-open .lightbox-right .phui-icon-view { 146 + right: 322px; 147 + } 148 + 149 + .lightbox-attachment .lightbox-right .phui-icon-view { 150 + font-size: 40px; 151 + } 152 + 153 + .lightbox-attachment .lightbox-right:hover .phui-icon-view { 154 + color: {$sky}; 155 + }
+134 -51
webroot/rsrc/js/core/behavior-lightbox-attachments.js
··· 14 14 var lightbox = null; 15 15 var prev = null; 16 16 var next = null; 17 + var shown = false; 17 18 var downloadForm = JX.$H(config.downloadForm).getFragment().firstChild; 19 + var lightbox_id = config.lightbox_id; 20 + 21 + function _toggleComment(e) { 22 + e.kill(); 23 + shown = !shown; 24 + JX.DOM.alterClass(JX.$(lightbox_id), 'comment-panel-open', shown); 25 + } 26 + 27 + function markCommentsLoading(loading) { 28 + var frame = JX.$('lightbox-comment-frame'); 29 + JX.DOM.alterClass(frame, 'loading', loading); 30 + } 31 + 32 + function onLoadCommentsResponse(r) { 33 + var frame = JX.$('lightbox-comment-frame'); 34 + JX.DOM.setContent(frame, JX.$H(r)); 35 + markCommentsLoading(false); 36 + } 37 + 38 + function loadComments(phid) { 39 + markCommentsLoading(true); 40 + var uri = '/file/thread/' + phid + '/'; 41 + new JX.Workflow(uri) 42 + .setHandler(onLoadCommentsResponse) 43 + .start(); 44 + } 18 45 19 46 function loadLightBox(e) { 20 47 if (!e.isNormalClick()) { ··· 61 88 } else { 62 89 img_uri = config.defaultImageUri; 63 90 extra_status = ' Image may not be representative of actual attachment.'; 64 - name_element = JX.$N('div', 65 - { className : 'attachment-name' }, 66 - target_data.name 67 - ); 91 + name_element = 92 + JX.$N('div', 93 + { 94 + className : 'attachment-name' 95 + }, 96 + target_data.name 97 + ); 68 98 } 69 99 70 100 var alt_name = ''; ··· 72 102 alt_name = target_data.name; 73 103 } 74 104 75 - var img = JX.$N('img', 76 - { 77 - className : 'loading', 78 - alt : alt_name 79 - } 80 - ); 105 + var img = 106 + JX.$N('img', 107 + { 108 + className : 'loading', 109 + alt : alt_name 110 + } 111 + ); 112 + 113 + var imgFrame = 114 + JX.$N('div', 115 + { 116 + className : 'lightbox-image-frame', 117 + }, 118 + img 119 + ); 120 + 121 + var commentFrame = 122 + JX.$N('div', 123 + { 124 + className : 'lightbox-comment-frame', 125 + id : 'lightbox-comment-frame' 126 + } 127 + ); 81 128 82 - lightbox = JX.$N('div', 83 - { 84 - className : 'lightbox-attachment', 85 - sigil: 'lightbox-attachment' 86 - }, 87 - img 88 - ); 129 + var commentClass = (shown) ? 'comment-panel-open' : ''; 130 + lightbox = 131 + JX.$N('div', 132 + { 133 + className : 'lightbox-attachment ' + commentClass, 134 + sigil : 'lightbox-attachment', 135 + id : lightbox_id 136 + }, 137 + [imgFrame, commentFrame] 138 + ); 139 + 140 + var monogram = JX.$N('strong', {}, target_data.monogram); 141 + var m_url = JX.$N('a', { href : '/' + target_data.monogram }, monogram); 142 + var statusSpan = 143 + JX.$N('span', 144 + { 145 + className: 'lightbox-status-txt' 146 + }, 147 + [ 148 + m_url, 149 + ' Image ' + current + ' of ' + total + '.' + extra_status 150 + ] 151 + ); 89 152 90 - var statusSpan = JX.$N('span', 91 - { 92 - className: 'lightbox-status-txt' 93 - }, 94 - 'Image '+current+' of '+total+'.'+extra_status 95 - ); 153 + var downloadSpan = 154 + JX.$N('span', 155 + { 156 + className : 'lightbox-download' 157 + } 158 + ); 96 159 97 - var downloadSpan = JX.$N('span', 98 - { 99 - className : 'lightbox-download' 100 - }); 101 - var closeButton = JX.$N('a', 102 - { 103 - className : 'lightbox-close button grey', 104 - href : '#' 105 - }, 106 - 'Close'); 107 - var statusHTML = JX.$N('div', 108 - { 109 - className : 'lightbox-status' 110 - }, 111 - [statusSpan, closeButton, downloadSpan] 112 - ); 160 + var commentIcon = new JX.PHUIXIconView() 161 + .setIcon('fa-comment-o') 162 + .getNode(); 163 + var commentButton = 164 + JX.$N('a', 165 + { 166 + className : 'lightbox-comment button grey has-icon', 167 + href : '#', 168 + sigil : 'lightbox-comment' 169 + }, 170 + [commentIcon, 'Comment'] 171 + ); 172 + var closeButton = 173 + JX.$N('a', 174 + { 175 + className : 'lightbox-close button grey', 176 + href : '#' 177 + }, 178 + 'Close'); 179 + var statusHTML = 180 + JX.$N('div', 181 + { 182 + className : 'lightbox-status' 183 + }, 184 + [statusSpan, closeButton, commentButton, downloadSpan] 185 + ); 113 186 JX.DOM.appendContent(lightbox, statusHTML); 114 187 JX.DOM.appendContent(lightbox, name_element); 115 188 JX.DOM.listen(closeButton, 'click', null, closeLightBox); ··· 120 193 .setIcon('fa-angle-right') 121 194 .setColor('lightgreytext') 122 195 .getNode(); 123 - leftIcon = JX.$N('a', 124 - { 125 - className : 'lightbox-right', 126 - href : '#' 127 - }, 128 - r_icon); 196 + leftIcon = 197 + JX.$N('a', 198 + { 199 + className : 'lightbox-right', 200 + href : '#' 201 + }, 202 + r_icon 203 + ); 129 204 JX.DOM.listen(leftIcon, 130 205 'click', 131 206 null, ··· 139 214 .setIcon('fa-angle-left') 140 215 .setColor('lightgreytext') 141 216 .getNode(); 142 - rightIcon = JX.$N('a', 143 - { 144 - className : 'lightbox-left', 145 - href : '#' 146 - }, 147 - l_icon); 217 + rightIcon = 218 + JX.$N('a', 219 + { 220 + className : 'lightbox-left', 221 + href : '#' 222 + }, 223 + l_icon 224 + ); 148 225 JX.DOM.listen(rightIcon, 149 226 'click', 150 227 null, ··· 168 245 }; 169 246 170 247 img.src = img_uri; 248 + loadComments(target_data.phid); 171 249 } 172 250 173 251 // TODO - make this work with KeyboardShortcut, which means ··· 251 329 closeLightBox(e); 252 330 e.kill(); 253 331 }); 332 + 333 + JX.Stratcom.listen( 334 + 'click', 335 + 'lightbox-comment', 336 + _toggleComment); 254 337 255 338 });