Implement full-width application tiles

Summary: Fix mystery meat by providing full-width tiles for core applications.

Test Plan: {F29364}

Reviewers: chad, btrahan

Reviewed By: chad

CC: aran

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

src/applications/directory/controller/PhabricatorDirectoryController.php

@@ -44,10 +44,16 @@ abstract class PhabricatorDirectoryController extends PhabricatorController {
 
       $views = array();
       foreach ($application_list as $key => $application) {
-        $views[] = id(new PhabricatorApplicationLaunchView())
+        $tile = id(new PhabricatorApplicationLaunchView())
           ->setApplication($application)
           ->setApplicationStatus(idx($status, $key, array()))
           ->setUser($user);
+
+        if ($group == PhabricatorApplication::GROUP_CORE) {
+          $tile->setFullWidth(true);
+        }
+
+        $views[] = $tile;
       }
 
       while (count($views) % 4) {

src/applications/meta/view/PhabricatorApplicationLaunchView.php

@@ -4,6 +4,12 @@ final class PhabricatorApplicationLaunchView extends AphrontView {
 
   private $application;
   private $status;
+  private $fullWidth;
+
+  public function setFullWidth($full_width) {
+    $this->fullWidth = $full_width;
+    return $this;
+  }
 
   public function setApplication(PhabricatorApplication $application) {
     $this->application = $application;
@@ -31,6 +37,15 @@ final class PhabricatorApplicationLaunchView extends AphrontView {
         ),
         phutil_escape_html($application->getName()));
 
+      if ($this->fullWidth) {
+        $content[] = phutil_render_tag(
+          'span',
+          array(
+            'class' => 'phabricator-application-launch-description',
+          ),
+          phutil_escape_html($application->getShortDescription()));
+      }
+
       $count = 0;
       if ($this->status) {
         foreach ($this->status as $status) {
@@ -68,10 +83,16 @@ final class PhabricatorApplicationLaunchView extends AphrontView {
         '');
     }
 
+    $classes = array();
+    $classes[] = 'phabricator-application-launch-container';
+    if ($this->fullWidth) {
+      $classes[] = 'application-tile-full';
+    }
+
     return phutil_render_tag(
       $application ? 'a' : 'div',
       array(
-        'class' => 'phabricator-application-launch-container',
+        'class' => implode(' ', $classes),
         'href'  => $application ? $application->getBaseURI() : null,
       ),
       $icon.

webroot/rsrc/css/application/base/phabricator-application-launch-view.css

@@ -36,6 +36,11 @@ div.phabricator-application-launch-container {
 
 }
 
+a.application-tile-full {
+  width: 100%;
+  height: 52px;
+}
+
 a.phabricator-application-launch-container:hover {
   text-decoration: none;
 }
@@ -56,6 +61,12 @@ a.phabricator-application-launch-container:hover {
   height: 28px;
 }
 
+.application-tile-full .phabricator-application-launch-icon {
+  top: 12px;
+  left: 12px;
+}
+
+
 .phabricator-application-launch-name {
   display: block;
   margin-top: 50px;
@@ -66,6 +77,20 @@ a.phabricator-application-launch-container:hover {
   text-shadow: 0px 1px 1px #000000;
 }
 
+.application-tile-full .phabricator-application-launch-name {
+  margin-top: 12px;
+  text-align: left;
+  margin-left: 52px;
+
+}
+
+.application-tile-full .phabricator-application-launch-description {
+  color: #bfbfbf;
+  font-size: 11px;
+  margin-top: 24px;
+  margin-left: 52px;
+}
+
 .phabricator-application-launch-attention {
   position: absolute;
   right: 4px;
@@ -78,3 +103,8 @@ a.phabricator-application-launch-container:hover {
   border: 1px solid #aa0000;
   font-size: 12px;
 }
+
+.application-tile-full .phabricator-application-launch-attention {
+  top: 16px;
+  right: 12px;
+}