diff --git a/resources/celerity/map.php b/resources/celerity/map.php index 46b30dd694..fdba6dc8b8 100644 --- a/resources/celerity/map.php +++ b/resources/celerity/map.php @@ -81,7 +81,7 @@ return array( 'rsrc/css/application/phame/phame.css' => '19ecc703', 'rsrc/css/application/pholio/pholio-edit.css' => 'b9e59b6d', 'rsrc/css/application/pholio/pholio-inline-comments.css' => '52be33f0', - 'rsrc/css/application/pholio/pholio.css' => 'e059f955', + 'rsrc/css/application/pholio/pholio.css' => '005be8e1', 'rsrc/css/application/phortune/phortune-credit-card-form.css' => 'b25b4beb', 'rsrc/css/application/phrequent/phrequent.css' => 'ffc185ad', 'rsrc/css/application/phriction/phriction-document-css.css' => '7d7f0071', @@ -135,7 +135,7 @@ return array( 'rsrc/css/phui/phui-list.css' => '43ed2d93', 'rsrc/css/phui/phui-object-box.css' => 'ce92d8ec', 'rsrc/css/phui/phui-object-item-list-view.css' => '46e12abc', - 'rsrc/css/phui/phui-pinboard-view.css' => '32e8e1a9', + 'rsrc/css/phui/phui-pinboard-view.css' => '2c8abb19', 'rsrc/css/phui/phui-property-list-view.css' => '2f7199e8', 'rsrc/css/phui/phui-remarkup-preview.css' => '19ad512b', 'rsrc/css/phui/phui-spacing.css' => '042804d6', @@ -739,7 +739,7 @@ return array( 'phabricator-uiexample-reactor-sendproperties' => '551add57', 'phabricator-zindex-css' => 'efb673ac', 'phame-css' => '19ecc703', - 'pholio-css' => 'e059f955', + 'pholio-css' => '005be8e1', 'pholio-edit-css' => 'b9e59b6d', 'pholio-inline-comments-css' => '52be33f0', 'phortune-credit-card-form' => '2290aeef', @@ -764,7 +764,7 @@ return array( 'phui-list-view-css' => '43ed2d93', 'phui-object-box-css' => 'ce92d8ec', 'phui-object-item-list-view-css' => '46e12abc', - 'phui-pinboard-view-css' => '32e8e1a9', + 'phui-pinboard-view-css' => '2c8abb19', 'phui-property-list-view-css' => '2f7199e8', 'phui-remarkup-preview-css' => '19ad512b', 'phui-spacing-css' => '042804d6', diff --git a/src/applications/pholio/remarkup/PholioRemarkupRule.php b/src/applications/pholio/remarkup/PholioRemarkupRule.php index fb569837ca..4545a23a87 100644 --- a/src/applications/pholio/remarkup/PholioRemarkupRule.php +++ b/src/applications/pholio/remarkup/PholioRemarkupRule.php @@ -14,6 +14,7 @@ final class PholioRemarkupRule $viewer = $this->getEngine()->getConfig('viewer'); return id(new PholioMockQuery()) ->setViewer($viewer) + ->needCoverFiles(true) ->needImages(true) ->needTokenCounts(true) ->withIDs($ids) diff --git a/src/applications/pholio/view/PholioMockEmbedView.php b/src/applications/pholio/view/PholioMockEmbedView.php index d932dd6482..10241ad5f6 100644 --- a/src/applications/pholio/view/PholioMockEmbedView.php +++ b/src/applications/pholio/view/PholioMockEmbedView.php @@ -22,98 +22,35 @@ final class PholioMockEmbedView extends AphrontView { if (!$this->mock) { throw new Exception('Call setMock() before render()!'); } - - require_celerity_resource('pholio-css'); - - $mock_link = phutil_tag( - 'a', - array( - 'href' => '/M'.$this->mock->getID(), - ), - 'M'.$this->mock->getID().' '.$this->mock->getName()); - - $mock_header = phutil_tag( - 'div', - array( - 'class' => 'pholio-mock-embed-head', - ), - $mock_link); + $mock = $this->mock; $images_to_show = array(); + $thumbnail = null; if (!empty($this->images)) { $images_to_show = array_intersect_key( $this->mock->getImages(), array_flip($this->images)); + foreach ($images_to_show as $image) { + $thumbfile = $image->getFile(); + $thumbnail = $thumbfile->getThumb280x210URI(); + } + $header = 'M'.$mock->getID().' '.$mock->getName(). + ' (#'.$image->getID().')'; + $uri = '/M'.$this->mock->getID().'/'.$image->getID().'/'; + } else { + $thumbnail = $mock->getCoverFile()->getThumb280x210URI(); + $header = 'M'.$mock->getID().' '.$mock->getName(); + $uri = '/M'.$this->mock->getID(); } - if (empty($images_to_show)) { - $images_to_show = array_slice($this->mock->getImages(), 0, 4); - } + $item = id(new PHUIPinboardItemView()) + ->setHeader($header) + ->setURI($uri) + ->setImageURI($thumbnail) + ->setImageSize(280, 210) + ->setDisabled($mock->isClosed()) + ->addIconCount('fa-picture-o', count($mock->getImages())) + ->addIconCount('fa-trophy', $mock->getTokenCount()); - $thumbnails = array(); - foreach ($images_to_show as $image) { - $thumbfile = $image->getFile(); - - $dimensions = PhabricatorImageTransformer::getPreviewDimensions( - $thumbfile, - 140); - - $tag = phutil_tag( - 'img', - array( - 'width' => $dimensions['sdx'], - 'height' => $dimensions['sdy'], - 'class' => 'pholio-mock-carousel-thumbnail', - 'src' => $thumbfile->getPreview140URI(), - 'style' => 'top: '.floor((140 - $dimensions['sdy'] ) / 2).'px', - )); - - $thumbnails[] = javelin_tag( - 'a', - array( - 'class' => 'pholio-mock-carousel-thumb-item', - 'href' => '/M'.$this->mock->getID().'/'.$image->getID().'/', - ), - $tag); - } - - $mock_body = phutil_tag( - 'div', - array(), - $thumbnails); - - $icons_data = array( - 'fa-picture-o' => count($this->mock->getImages()), - 'fa-trophy' => $this->mock->getTokenCount()); - - $icon_list = array(); - foreach ($icons_data as $icon_name => $icon_value) { - $icon = id(new PHUIIconView()) - ->setIconFont($icon_name.' white') - ->addClass('pholio-mock-embed-icon'); - - $count = phutil_tag('span', array(), $icon_value); - - $icon_list[] = phutil_tag( - 'span', - array( - 'class' => 'pholio-mock-embed-icons' - ), - array($icon, $count)); - } - - $mock_footer = phutil_tag( - 'div', - array( - 'class' => 'pholio-mock-embed-footer', - ), - $icon_list); - - - return phutil_tag( - 'div', - array( - 'class' => 'pholio-mock-embed' - ), - array($mock_header, $mock_body, $mock_footer)); + return $item; } } diff --git a/src/view/phui/PHUIPinboardItemView.php b/src/view/phui/PHUIPinboardItemView.php index 2b9cf96066..db03b81def 100644 --- a/src/view/phui/PHUIPinboardItemView.php +++ b/src/view/phui/PHUIPinboardItemView.php @@ -43,6 +43,7 @@ final class PHUIPinboardItemView extends AphrontView { } public function render() { + require_celerity_resource('phui-pinboard-view-css'); $header = null; if ($this->header) { if ($this->disabled) { @@ -59,19 +60,22 @@ final class PHUIPinboardItemView extends AphrontView { phutil_tag('a', array('href' => $this->uri), $this->header)); } - $image = phutil_tag( - 'a', - array( - 'href' => $this->uri, - 'class' => 'phui-pinboard-item-image-link', - ), - phutil_tag( - 'img', + $image = null; + if ($this->imageWidth) { + $image = phutil_tag( + 'a', array( - 'src' => $this->imageURI, - 'width' => $this->imageWidth, - 'height' => $this->imageHeight, - ))); + 'href' => $this->uri, + 'class' => 'phui-pinboard-item-image-link', + ), + phutil_tag( + 'img', + array( + 'src' => $this->imageURI, + 'width' => $this->imageWidth, + 'height' => $this->imageHeight, + ))); + } $icons = array(); if ($this->iconBlock) { @@ -121,8 +125,8 @@ final class PHUIPinboardItemView extends AphrontView { array( $header, $image, - $icons, $content, + $icons, )); } diff --git a/webroot/rsrc/css/application/pholio/pholio.css b/webroot/rsrc/css/application/pholio/pholio.css index 5781d8f9f2..f72088920b 100644 --- a/webroot/rsrc/css/application/pholio/pholio.css +++ b/webroot/rsrc/css/application/pholio/pholio.css @@ -146,40 +146,6 @@ background: url(/rsrc/image/darkload.gif) no-repeat center; } -.pholio-mock-embed { - display: inline-block; - background-color: #282828; - padding: 5px; - color: #fff; - margin: 2px; -} - -.pholio-mock-embed-head { - border-bottom: 1px solid #3d3d3d; - padding: 2px; - margin:2px; -} - -.pholio-mock-embed-footer { - margin: 2px 0; -} - -.pholio-mock-embed-icons { - float: left; - margin-left: 10px; -} - -.pholio-mock-embed-icon { - height: 14px; - width: 14px; - padding: 2px 4px 0 0; -} - -.pholio-mock-embed-head a { - color: #fff; - font-weight: bold; -} - .pholio-transaction-inline-comment { display: table-row; } diff --git a/webroot/rsrc/css/phui/phui-pinboard-view.css b/webroot/rsrc/css/phui/phui-pinboard-view.css index 4d74aa2bea..80aca4562d 100644 --- a/webroot/rsrc/css/phui/phui-pinboard-view.css +++ b/webroot/rsrc/css/phui/phui-pinboard-view.css @@ -18,9 +18,12 @@ border-radius: 3px; border: 1px solid {$lightblueborder}; border-bottom: 1px solid {$blueborder}; - float: left; - width: 288px; text-align: left; + width: 288px; +} + +.phui-pinboard-view .phui-pinboard-item-view { + float: left; } .device-desktop .phui-pinboard-item-view:hover { @@ -34,7 +37,7 @@ } .phui-pinboard-item-header { - padding: 4px 8px; + padding: 6px 8px; display: block; font-weight: bold; border-top-left-radius: 3px; @@ -54,10 +57,15 @@ } .phui-pinboard-item-content { - padding: 0 8px 4px; + padding: 8px; overflow: hidden; - color: {$greytext}; - font-size: 11px; + color: {$bluetext}; + font-size: 12px; +} + +.phui-pinboard-item-content + .phui-pinboard-icons, +.phui-pinboard-item-image-link + .phui-pinboard-icons { + border-top: 1px solid {$thinblueborder}; } .phui-pinboard-item-count { @@ -66,10 +74,8 @@ } .phui-pinboard-icons { - padding: 0 8px 8px 0; + padding: 4px 8px 4px 0; color: {$darkbluetext}; - border-bottom: 1px solid {$lightblueborder}; - margin-bottom: 5px; overflow: hidden; }