Allow users to choo choo choose a room color

Summary: This adds some basic per user / per room theming for Conpherence, which should hopefully let users identify rooms from just the sidebar color.

Test Plan: Lots of threads with different colors.

Reviewers: epriestley

Reviewed By: epriestley

Subscribers: Korvin

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

resources/celerity/map.php

@@ -7,8 +7,8 @@
  */
 return array(
   'names' => array(
-    'conpherence.pkg.css' => '3776e82d',
+    'conpherence.pkg.css' => 'ff161f2d',
-    'conpherence.pkg.js' => '7b6aa581',
+    'conpherence.pkg.js' => 'b5b51108',
     'core.pkg.css' => '959330a2',
     'core.pkg.js' => '47a69358',
     'darkconsole.pkg.js' => '1f9a31bc',
@@ -50,9 +50,10 @@ return array(
     'rsrc/css/application/config/config-template.css' => '8f18fa41',
     'rsrc/css/application/config/setup-issue.css' => 'f794cfc3',
     'rsrc/css/application/config/unhandled-exception.css' => '4c96257a',
+    'rsrc/css/application/conpherence/color.css' => 'abb4c358',
     'rsrc/css/application/conpherence/durable-column.css' => '89ea6bef',
-    'rsrc/css/application/conpherence/header-pane.css' => 'a1104b93',
+    'rsrc/css/application/conpherence/header-pane.css' => 'cb6f4e19',
-    'rsrc/css/application/conpherence/menu.css' => '88100764',
+    'rsrc/css/application/conpherence/menu.css' => '6953e7ec',
     'rsrc/css/application/conpherence/message-pane.css' => 'b0f55ecc',
     'rsrc/css/application/conpherence/notification.css' => 'cef0a3fc',
     'rsrc/css/application/conpherence/participant-pane.css' => '26a3ce56',
@@ -378,7 +379,7 @@ return array(
     'rsrc/js/application/conpherence/ConpherenceThreadManager.js' => '4d863052',
     'rsrc/js/application/conpherence/behavior-conpherence-search.js' => '9bbf3762',
     'rsrc/js/application/conpherence/behavior-durable-column.js' => 'aa3bd034',
-    'rsrc/js/application/conpherence/behavior-menu.js' => '31ab6d0f',
+    'rsrc/js/application/conpherence/behavior-menu.js' => 'c9b99b77',
     'rsrc/js/application/conpherence/behavior-participant-pane.js' => '8604caa8',
     'rsrc/js/application/conpherence/behavior-pontificate.js' => '55616e04',
     'rsrc/js/application/conpherence/behavior-quicksand-blacklist.js' => '7927a7d3',
@@ -559,9 +560,10 @@ return array(
     'conduit-api-css' => '7bc725c4',
     'config-options-css' => '0ede4c9b',
     'config-page-css' => 'c1d5121b',
+    'conpherence-color-css' => 'abb4c358',
     'conpherence-durable-column-view' => '89ea6bef',
-    'conpherence-header-pane-css' => 'a1104b93',
+    'conpherence-header-pane-css' => 'cb6f4e19',
-    'conpherence-menu-css' => '88100764',
+    'conpherence-menu-css' => '6953e7ec',
     'conpherence-message-pane-css' => 'b0f55ecc',
     'conpherence-notification-css' => 'cef0a3fc',
     'conpherence-participant-pane-css' => '26a3ce56',
@@ -605,7 +607,7 @@ return array(
     'javelin-behavior-choose-control' => '327a00d1',
     'javelin-behavior-comment-actions' => '9a6dd75c',
     'javelin-behavior-config-reorder-fields' => 'b6993408',
-    'javelin-behavior-conpherence-menu' => '31ab6d0f',
+    'javelin-behavior-conpherence-menu' => 'c9b99b77',
     'javelin-behavior-conpherence-participant-pane' => '8604caa8',
     'javelin-behavior-conpherence-pontificate' => '55616e04',
     'javelin-behavior-conpherence-search' => '9bbf3762',
@@ -1126,20 +1128,6 @@ return array(
     '31420f77' => array(
       'javelin-behavior',
     ),
-    '31ab6d0f' => array(
-      'javelin-behavior',
-      'javelin-dom',
-      'javelin-util',
-      'javelin-stratcom',
-      'javelin-workflow',
-      'javelin-behavior-device',
-      'javelin-history',
-      'javelin-vector',
-      'javelin-scrollbar',
-      'phabricator-title',
-      'phabricator-shaped-request',
-      'conpherence-thread-manager',
-    ),
     '320810c8' => array(
       'javelin-install',
       'javelin-dom',
@@ -2003,6 +1991,20 @@ return array(
       'javelin-util',
       'javelin-stratcom',
     ),
+    'c9b99b77' => array(
+      'javelin-behavior',
+      'javelin-dom',
+      'javelin-util',
+      'javelin-stratcom',
+      'javelin-workflow',
+      'javelin-behavior-device',
+      'javelin-history',
+      'javelin-vector',
+      'javelin-scrollbar',
+      'phabricator-title',
+      'phabricator-shaped-request',
+      'conpherence-thread-manager',
+    ),
     'ca3f91eb' => array(
       'javelin-behavior',
       'javelin-dom',
@@ -2261,6 +2263,7 @@ return array(
     'conpherence.pkg.css' => array(
       'conpherence-durable-column-view',
       'conpherence-menu-css',
+      'conpherence-color-css',
       'conpherence-message-pane-css',
       'conpherence-notification-css',
       'conpherence-transaction-css',

resources/celerity/packages.php

@@ -161,6 +161,7 @@ return array(
   'conpherence.pkg.css' => array(
     'conpherence-durable-column-view',
     'conpherence-menu-css',
+    'conpherence-color-css',
     'conpherence-message-pane-css',
     'conpherence-notification-css',
     'conpherence-transaction-css',

src/applications/conpherence/constants/ConpherenceRoomSettings.php

@@ -9,6 +9,13 @@ final class ConpherenceRoomSettings extends ConpherenceConstants {
   const DEFAULT_MENTION_SOUND = 'alert';
   const DEFAULT_NO_SOUND = 'none';
 
+  const COLOR_LIGHT = 'light';
+  const COLOR_BLUE = 'blue';
+  const COLOR_INDIGO = 'indigo';
+  const COLOR_PEACH = 'peach';
+  const COLOR_GREEN = 'green';
+  const COLOR_PINK = 'pink';
+
   public static function getSoundMap() {
     return array(
       'none' => array(
@@ -43,5 +50,20 @@ final class ConpherenceRoomSettings extends ConpherenceConstants {
     return ipull($map, 'name');
   }
 
+  public static function getThemeMap() {
+    return array(
+      self::COLOR_LIGHT => pht('Light'),
+      self::COLOR_BLUE => pht('Blue'),
+      self::COLOR_INDIGO => pht('Indigo'),
+      self::COLOR_PEACH => pht('Peach'),
+      self::COLOR_GREEN => pht('Green'),
+      self::COLOR_PINK => pht('Pink'),
+    );
+  }
+
+  public static function getThemeClass($theme) {
+    return 'conpherence-theme-'.$theme;
+  }
+
 
 }

src/applications/conpherence/controller/ConpherenceRoomPreferencesController.php

@@ -41,10 +41,12 @@ final class ConpherenceRoomPreferencesController
     if ($request->isFormPost()) {
       $notifications = $request->getStr('notifications');
       $sounds = $request->getArr('sounds');
+      $theme = $request->getStr('theme');
 
       $participant->setSettings(array(
         'notifications' => $notifications,
         'sounds' => $sounds,
+        'theme' => $theme,
       ));
       $participant->save();
 
@@ -60,6 +62,7 @@ final class ConpherenceRoomPreferencesController
 
     $settings = $participant->getSettings();
     $notifications = idx($settings, 'notifications', $notification_default);
+    $theme = idx($settings, 'theme', ConpherenceRoomSettings::COLOR_LIGHT);
 
     $sounds = idx($settings, 'sounds', array());
     $map = PhabricatorConpherenceSoundSetting::getDefaultSound($sound_default);
@@ -92,7 +95,13 @@ final class ConpherenceRoomPreferencesController
             ->setLabel(pht('New Message'))
             ->setName('sounds['.ConpherenceRoomSettings::SOUND_RECEIVE.']')
             ->setOptions(ConpherenceRoomSettings::getDropdownSoundMap())
-            ->setValue($receive));
+            ->setValue($receive))
+        ->appendChild(
+          id(new AphrontFormSelectControl())
+            ->setLabel(pht('Theme'))
+            ->setName('theme')
+            ->setOptions(ConpherenceRoomSettings::getThemeMap())
+            ->setValue($theme));
 
     return $this->newDialog()
       ->setTitle(pht('Room Preferences'))

src/applications/conpherence/controller/ConpherenceViewController.php

@@ -56,7 +56,11 @@ final class ConpherenceViewController extends
     $this->setConpherence($conpherence);
 
     $participant = $conpherence->getParticipantIfExists($user->getPHID());
+    $theme = ConpherenceRoomSettings::COLOR_LIGHT;
+
     if ($participant) {
+      $settings = $participant->getSettings();
+      $theme = idx($settings, 'theme', ConpherenceRoomSettings::COLOR_LIGHT);
       if (!$participant->isUpToDate($conpherence)) {
         $write_guard = AphrontWriteGuard::beginScopedUnguardedWrites();
         $participant->markUpToDate($conpherence);
@@ -118,6 +122,7 @@ final class ConpherenceViewController extends
       ->setSearch($search)
       ->setMessages($messages)
       ->setReplyForm($form)
+      ->setTheme($theme)
       ->setLatestTransactionID($data['latest_transaction_id'])
       ->setRole('thread');
 

src/applications/conpherence/storage/ConpherenceThread.php

@@ -204,8 +204,13 @@ final class ConpherenceThread extends ConpherenceDAO
     }
 
     $user_participation = $this->getParticipantIfExists($viewer->getPHID());
+    $theme = ConpherenceRoomSettings::COLOR_LIGHT;
     if ($user_participation) {
       $user_seen_count = $user_participation->getSeenMessageCount();
+      $participant = $this->getParticipant($viewer->getPHID());
+      $settings = $participant->getSettings();
+      $theme = idx($settings, 'theme', $theme);
+      $theme_class = ConpherenceRoomSettings::getThemeClass($theme);
     } else {
       $user_seen_count = 0;
     }
@@ -221,6 +226,7 @@ final class ConpherenceThread extends ConpherenceDAO
       'unread_count' => $unread_count,
       'epoch' => $this->getDateModified(),
       'image' => $img_src,
+      'theme' => $theme_class,
     );
   }
 

src/applications/conpherence/view/ConpherenceLayoutView.php

@@ -10,6 +10,7 @@ final class ConpherenceLayoutView extends AphrontTagView {
   private $search;
   private $messages;
   private $replyForm;
+  private $theme = ConpherenceRoomSettings::COLOR_LIGHT;
   private $latestTransactionID;
 
   public function setMessages($messages) {
@@ -56,6 +57,11 @@ final class ConpherenceLayoutView extends AphrontTagView {
     return $this;
   }
 
+  public function setTheme($theme) {
+    $this->theme = $theme;
+    return $this;
+  }
+
   public function setLatestTransactionID($id) {
     $this->latestTransactionID = $id;
     return $this;
@@ -66,6 +72,7 @@ final class ConpherenceLayoutView extends AphrontTagView {
     $classes[] = 'conpherence-layout';
     $classes[] = 'hide-widgets';
     $classes[] = 'conpherence-role-'.$this->role;
+    $classes[] = ConpherenceRoomSettings::getThemeClass($this->theme);
 
     return array(
       'id'    => 'conpherence-main-layout',
@@ -105,6 +112,7 @@ final class ConpherenceLayoutView extends AphrontTagView {
         'canEditSelectedThread' => $can_edit_selected,
         'latestTransactionID' => $this->latestTransactionID,
         'role' => $this->role,
+        'theme' => ConpherenceRoomSettings::getThemeClass($this->theme),
         'hasThreadList' => (bool)$this->threadView,
         'hasThread' => (bool)$this->messages,
         'hasWidgets' => false,

src/applications/conpherence/view/ConpherenceThreadListView.php

@@ -75,6 +75,7 @@ final class ConpherenceThreadListView extends AphrontView {
           'title' => $data['title'],
           'id' => $dom_id,
           'threadID' => $thread->getID(),
+          'theme' => $data['theme'],
           ));
   }
 

webroot/rsrc/css/application/conpherence/color.css

@@ -0,0 +1,48 @@
+/**
+ * @provides conpherence-color-css
+ */
+
+.conpherence-theme-blue .conpherence-menu-pane {
+  background-color: {$lightblue};
+}
+
+.conpherence-theme-blue .phui-basic-nav .phabricator-side-menu
+  .phui-list-item-selected {
+    border-left-color: {$blue};
+}
+
+.conpherence-theme-indigo .conpherence-menu-pane {
+  background-color: {$lightindigo};
+}
+
+.conpherence-theme-indigo .phui-basic-nav .phabricator-side-menu
+  .phui-list-item-selected {
+    border-left-color: {$indigo};
+}
+
+.conpherence-theme-peach .conpherence-menu-pane {
+  background-color: {$lightred};
+}
+
+.conpherence-theme-peach .phui-basic-nav .phabricator-side-menu
+  .phui-list-item-selected {
+    border-left-color: rgba(0,0,0,.25);
+}
+
+.conpherence-theme-green .conpherence-menu-pane {
+  background-color: {$lightgreen};
+}
+
+.conpherence-theme-green .phui-basic-nav .phabricator-side-menu
+  .phui-list-item-selected {
+    border-left-color: {$green};
+}
+
+.conpherence-theme-pink .conpherence-menu-pane {
+  background-color: {$lightpink};
+}
+
+.conpherence-theme-pink .phui-basic-nav .phabricator-side-menu
+  .phui-list-item-selected {
+    border-left-color: {$pink};
+}

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

@@ -2,10 +2,6 @@
  * @provides conpherence-header-pane-css
  */
 
-.conpherence-header-pane {
-  background-color: {$lightbluebackground};
-}
-
 .conpherence-header-pane .phui-header-shell {
   padding: 8px 16px 10px;
   min-height: 38px;

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

@@ -21,6 +21,10 @@
   background-color: {$page.sidenav};
 }
 
+.conpherence-menu-pane .phui-basic-nav .phabricator-side-menu {
+  background-color: transparent;
+}
+
 .conpherence-menu-pane.phabricator-side-menu .room-list-href {
   padding: 10px 0 9px 8px;
   display: inline-block;

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

@@ -25,6 +25,7 @@ JX.behavior('conpherence-menu', function(config) {
   };
 
   var scrollbar = null;
+  var cur_theme = config.theme;
 
   // TODO - move more logic into the ThreadManager
   var threadManager = new JX.ConpherenceThreadManager();
@@ -144,6 +145,14 @@ JX.behavior('conpherence-menu', function(config) {
 
   function updatePageData(data) {
     var uri = '/Z' + _thread.selected;
+    var new_theme = data.theme;
+
+    if (new_theme != cur_theme) {
+      var root = JX.$('conpherence-main-layout');
+      JX.DOM.alterClass(root, cur_theme, false);
+      JX.DOM.alterClass(root, new_theme, true);
+      cur_theme = new_theme;
+    }
     JX.History.replace(uri);
     if (data.title) {
       JX.Title.setTitle(data.title);