Add layout roles and CSS rules for devices for Conpherence

Summary: Currently, `/conpherence/` shows the widget panel on devices. Make it show the thread list instead.

Test Plan: {F38099}

Reviewers: btrahan

Reviewed By: btrahan

CC: aran, chad

Maniphest Tasks: T2421

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

src/applications/conpherence/controller/ConpherenceListController.php

@@ -54,16 +54,17 @@ final class ConpherenceListController
       ->setUnreadThreads($unread)
       ->setReadThreads($read);
 
-    $main_pane = id(new ConpherenceLayoutView())
+    $layout = id(new ConpherenceLayoutView())
       ->setBaseURI($this->getApplicationURI())
-      ->setThreadView($thread_view);
+      ->setThreadView($thread_view)
+      ->setRole('list');
 
     if ($conpherence) {
-      $main_pane->setThread($conpherence);
+      $layout->setThread($conpherence);
     }
 
     return $this->buildApplicationPage(
-      $main_pane,
+      $layout,
       array(
         'title' => $title,
         'device' => true,

src/applications/conpherence/view/ConpherenceLayoutView.php

@@ -5,6 +5,12 @@ final class ConpherenceLayoutView extends AphrontView {
   private $thread;
   private $baseURI;
   private $threadView;
+  private $role;
+
+  public function setRole($role) {
+    $this->role = $role;
+    return $this;
+  }
 
   public function getThreadView() {
     return $this->threadView;
@@ -37,6 +43,7 @@ final class ConpherenceLayoutView extends AphrontView {
         'form_pane' => 'conpherence-form',
         'menu_pane' => 'conpherence-menu',
         'selectedID' => ($this->thread ? $this->thread->getID() : null),
+        'role' => $this->role,
       ));
 
     Javelin::initBehavior('conpherence-drag-and-drop-photo',
@@ -51,7 +58,7 @@ final class ConpherenceLayoutView extends AphrontView {
       'div',
       array(
         'sigil' => 'conpherence-layout',
-        'class' => 'conpherence-layout',
+        'class' => 'conpherence-layout conpherence-role-'.$this->role,
       ),
       array(
         javelin_tag(

webroot/rsrc/css/application/conpherence/menu.css

@@ -29,6 +29,16 @@ div.conpherence-layout .phabricator-nav-column-background {
   width: 300px;
 }
 
+.device .conpherence-role-list .conpherence-menu-pane,
+.device .conpherence-role-list .phabricator-nav-column-background {
+  width: 100%;
+}
+
+.device .conpherence-role-list .conpherence-content-pane {
+  display: none;
+}
+
+
 .conpherence-menu .conpherence-menu-item-view {
   display: block;
   height: 70px;
@@ -47,7 +57,7 @@ div.conpherence-layout .phabricator-nav-column-background {
   border-left: 2px solid #66CCFF;
 }
 
-.conpherence-menu .conpherence-menu-item-view:hover {
+.device-desktop .conpherence-menu .conpherence-menu-item-view:hover {
   background-image: url('/rsrc/image/texture/dark-menu-hover.png');
 }
 

webroot/rsrc/css/application/conpherence/message-pane.css

@@ -11,11 +11,6 @@
   height: 100%;
 }
 
-/* js should control this */
-.device-phone .conpherence-message-pane {
-  display: none;
-}
-
 .conpherence-show-older-messages {
   display: block;
   background: #e0e3ec;
@@ -47,14 +42,6 @@
   right: 281px;
 }
 
-.device-tablet
-.conpherence-message-pane .phabricator-form-view,
-.device-tablet
-.conpherence-message-pane .conpherence-messages,
-.device-tablet
-.conpherence-message-pane {
-  left: 0px;
-}
 
 .conpherence-message-pane .aphront-form-input {
   margin: 0;
@@ -117,7 +104,3 @@
   height: 6em;
 }
 
-.device .conpherence-message-pane .phabricator-form-view .aphront-form-control .aphront-form-input {
-  margin: 0;
-  width: 100%;
-}

webroot/rsrc/js/application/conpherence/behavior-menu.js

@@ -104,6 +104,11 @@ JX.behavior('conpherence-menu', function(config) {
         return;
       }
 
+      // On devices, just follow the link normally.
+      if (JX.Device.getDevice() != 'desktop') {
+        return;
+      }
+
       e.kill();
       selectthread(e.getNode('conpherence-menu-click'));
     });