Add a toggle, sticky pref, for Conpherence Widget Pane

Summary: This adds a "column" icon into crumbs, like in workboards, for expanding or hiding the "Widget Pane". This is per user sticky and defaults to off.

Test Plan: View a Conpherence Room, see no widgets by default. Toggle it on, see widget. Reload page, see widget stick. Verify mobile, tablets ignore hiding.

Reviewers: epriestley

Reviewed By: epriestley

Subscribers: Korvin

Maniphest Tasks: T10364

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

resources/celerity/map.php

@@ -7,7 +7,7 @@
  */
 return array(
   'names' => array(
-    'conpherence.pkg.css' => '1659749c',
+    'conpherence.pkg.css' => 'afbb036b',
     'core.pkg.css' => '1ca373de',
     'core.pkg.js' => '1d376fa9',
     'darkconsole.pkg.js' => 'e7393ebb',
@@ -47,11 +47,11 @@ return array(
     'rsrc/css/application/config/unhandled-exception.css' => '4c96257a',
     'rsrc/css/application/conpherence/durable-column.css' => '194ac487',
     'rsrc/css/application/conpherence/menu.css' => '67235d90',
-    'rsrc/css/application/conpherence/message-pane.css' => '97f3f6cf',
+    'rsrc/css/application/conpherence/message-pane.css' => 'ee0e27be',
     'rsrc/css/application/conpherence/notification.css' => '6cdcc253',
     'rsrc/css/application/conpherence/transaction.css' => '2c71247c',
     'rsrc/css/application/conpherence/update.css' => 'faf6be09',
-    'rsrc/css/application/conpherence/widget-pane.css' => 'c689f6a4',
+    'rsrc/css/application/conpherence/widget-pane.css' => 'a131d5b6',
     'rsrc/css/application/contentsource/content-source-view.css' => '4b8b05d4',
     'rsrc/css/application/countdown/timer.css' => '16c52f5c',
     'rsrc/css/application/daemon/bulk-job.css' => 'df9c1d4a',
@@ -439,6 +439,7 @@ return array(
     'rsrc/js/application/conpherence/behavior-menu.js' => '1d45c74d',
     'rsrc/js/application/conpherence/behavior-pontificate.js' => '21ba5861',
     'rsrc/js/application/conpherence/behavior-quicksand-blacklist.js' => '7927a7d3',
+    'rsrc/js/application/conpherence/behavior-toggle-widget.js' => 'b151bbbc',
     'rsrc/js/application/conpherence/behavior-widget-pane.js' => '65845387',
     'rsrc/js/application/countdown/timer.js' => 'e4cc26b3',
     'rsrc/js/application/daemon/behavior-bulk-job-reload.js' => 'edf8a145',
@@ -616,12 +617,12 @@ return array(
     'config-page-css' => '8798e14f',
     'conpherence-durable-column-view' => '194ac487',
     'conpherence-menu-css' => '67235d90',
-    'conpherence-message-pane-css' => '97f3f6cf',
+    'conpherence-message-pane-css' => 'ee0e27be',
     'conpherence-notification-css' => '6cdcc253',
     'conpherence-thread-manager' => '01774ab2',
     'conpherence-transaction-css' => '2c71247c',
     'conpherence-update-css' => 'faf6be09',
-    'conpherence-widget-pane-css' => 'c689f6a4',
+    'conpherence-widget-pane-css' => 'a131d5b6',
     'd3' => 'a11a5ff2',
     'differential-changeset-view-css' => '9ef7d354',
     'differential-core-view-css' => '5b7b8ff4',
@@ -771,6 +772,7 @@ return array(
     'javelin-behavior-test-payment-form' => 'fc91ab6c',
     'javelin-behavior-time-typeahead' => '522431f7',
     'javelin-behavior-toggle-class' => '92b9ec77',
+    'javelin-behavior-toggle-widget' => 'b151bbbc',
     'javelin-behavior-typeahead-browse' => '635de1ec',
     'javelin-behavior-typeahead-search' => '93d0c9e3',
     'javelin-behavior-view-placeholder' => '47830651',
@@ -1846,6 +1848,13 @@ return array(
       'javelin-util',
       'phabricator-shaped-request',
     ),
+    'b151bbbc' => array(
+      'javelin-behavior',
+      'javelin-dom',
+      'javelin-util',
+      'javelin-workflow',
+      'javelin-stratcom',
+    ),
     'b1f0ccee' => array(
       'javelin-install',
       'javelin-dom',

src/__phutil_library_map__.php

@@ -2216,6 +2216,7 @@ phutil_register_library_map(array(
     'PhabricatorConpherenceNotificationsSetting' => 'applications/settings/setting/PhabricatorConpherenceNotificationsSetting.php',
     'PhabricatorConpherencePreferencesSettingsPanel' => 'applications/settings/panel/PhabricatorConpherencePreferencesSettingsPanel.php',
     'PhabricatorConpherenceThreadPHIDType' => 'applications/conpherence/phid/PhabricatorConpherenceThreadPHIDType.php',
+    'PhabricatorConpherenceWidgetVisibleSetting' => 'applications/settings/setting/PhabricatorConpherenceWidgetVisibleSetting.php',
     'PhabricatorConsoleApplication' => 'applications/console/application/PhabricatorConsoleApplication.php',
     'PhabricatorConsoleContentSource' => 'infrastructure/contentsource/PhabricatorConsoleContentSource.php',
     'PhabricatorContentSource' => 'infrastructure/contentsource/PhabricatorContentSource.php',
@@ -6973,6 +6974,7 @@ phutil_register_library_map(array(
     'PhabricatorConpherenceNotificationsSetting' => 'PhabricatorSelectSetting',
     'PhabricatorConpherencePreferencesSettingsPanel' => 'PhabricatorEditEngineSettingsPanel',
     'PhabricatorConpherenceThreadPHIDType' => 'PhabricatorPHIDType',
+    'PhabricatorConpherenceWidgetVisibleSetting' => 'PhabricatorInternalSetting',
     'PhabricatorConsoleApplication' => 'PhabricatorApplication',
     'PhabricatorConsoleContentSource' => 'PhabricatorContentSource',
     'PhabricatorContentSource' => 'Phobject',

src/applications/conpherence/controller/ConpherenceController.php

@@ -80,6 +80,27 @@ abstract class ConpherenceController extends PhabricatorController {
         ->setDisabled(!$can_edit)
         ->setWorkflow(true));
 
+    $widget_key = PhabricatorConpherenceWidgetVisibleSetting::SETTINGKEY;
+    $widget_view = (bool)$viewer->getUserSetting($widget_key, false);
+
+    $divider = id(new PHUIListItemView())
+      ->setType(PHUIListItemView::TYPE_DIVIDER)
+      ->addClass('conpherence-header-desktop-item');
+    $crumbs->addAction($divider);
+
+    Javelin::initBehavior(
+      'toggle-widget',
+      array(
+        'show' => (int)$widget_view,
+        'settingsURI' => '/settings/adjust/?key='.$widget_key,
+      ));
+
+    $crumbs->addAction(
+      id(new PHUIListItemView())
+      ->addSigil('conpherence-widget-toggle')
+      ->setIcon('fa-columns')
+      ->addClass('conpherence-header-desktop-item'));
+
     return hsprintf(
       '%s',
       array(

src/applications/conpherence/controller/ConpherenceViewController.php

@@ -9,12 +9,6 @@ final class ConpherenceViewController extends
     return true;
   }
 
-  protected function buildApplicationCrumbs() {
-    $crumbs = $this->buildConpherenceApplicationCrumbs();
-    $crumbs->setBorder(true);
-    return $crumbs;
-  }
-
   public function handleRequest(AphrontRequest $request) {
     $user = $request->getUser();
 

src/applications/conpherence/view/ConpherenceLayoutView.php

@@ -55,12 +55,18 @@ final class ConpherenceLayoutView extends AphrontView {
     return $this;
   }
 
+  public function getWidgetColumnVisible() {
+    $widget_key = PhabricatorConpherenceWidgetVisibleSetting::SETTINGKEY;
+    $user = $this->getUser();
+    return (bool)$user->getUserSetting($widget_key, false);
+  }
+
   public function render() {
     require_celerity_resource('conpherence-menu-css');
     require_celerity_resource('conpherence-message-pane-css');
     require_celerity_resource('conpherence-widget-pane-css');
 
-    $layout_id = celerity_generate_unique_node_id();
+    $layout_id = 'conpherence-main-layout';
 
     $selected_id = null;
     $selected_thread_id = null;
@@ -90,9 +96,13 @@ final class ConpherenceLayoutView extends AphrontView {
         'hasWidgets' => false,
       ));
 
-    $class = null;
+    $classes = array();
     if (!$this->getUser()->isLoggedIn()) {
-      $class = 'conpherence-logged-out';
+      $classes[] = 'conpherence-logged-out';
+    }
+
+    if (!$this->getWidgetColumnVisible()) {
+      $classes[] = 'hide-widgets';
     }
 
     $this->initBehavior(
@@ -105,7 +115,7 @@ final class ConpherenceLayoutView extends AphrontView {
         'id'    => $layout_id,
         'sigil' => 'conpherence-layout',
         'class' => 'conpherence-layout '.
-                    $class.
+                    implode(' ', $classes).
                     ' conpherence-role-'.$this->role,
       ),
       array(

src/applications/settings/setting/PhabricatorConpherenceWidgetVisibleSetting.php

@@ -0,0 +1,12 @@
+<?php
+
+final class PhabricatorConpherenceWidgetVisibleSetting
+  extends PhabricatorInternalSetting {
+
+  const SETTINGKEY = 'conpherence-widget';
+
+  public function getSettingName() {
+    return pht('Conpherence Widget Pane Visible');
+  }
+
+}

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

@@ -315,7 +315,8 @@
 }
 
 .conpherence-message-pane .remarkup-assist-textarea:focus {
-  border-color: {$lightblueborder};
+  border: 2px solid {$lightgreyborder};
+  border-top: 1px solid {$thinblueborder};
 }
 
 .device .conpherence-message-pane .remarkup-assist-textarea {
@@ -349,3 +350,11 @@
 .conpherence-message .phabricator-remarkup .remarkup-code-block pre {
   max-height: 200px;
 }
+
+.device .conpherence-header-desktop-item {
+  display: none;
+}
+
+.device .conpherence-header-pane .phui-crumb-action-divider {
+  display: none;
+}

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

@@ -190,3 +190,18 @@
   width: 60px;
   margin: 0 auto 0 auto;
 }
+
+/****** Hide Widgets **********************************************************/
+
+.device-desktop .hide-widgets .conpherence-widget-pane {
+  display: none;
+}
+
+.device-desktop .hide-widgets .conpherence-message-pane,
+.device-desktop .hide-widgets .loading .messages-loading-mask,
+.device-desktop .hide-widgets .loading .messages-loading-icon,
+.device-desktop .hide-widgets .conpherence-no-threads,
+.device-desktop .hide-widgets .conpherence-message-pane .conpherence-messages,
+.device-desktop .hide-widgets .conpherence-message-pane .phui-form-view {
+  right: 0;
+}

webroot/rsrc/js/application/conpherence/behavior-toggle-widget.js

@@ -0,0 +1,28 @@
+/**
+ * @provides javelin-behavior-toggle-widget
+ * @requires javelin-behavior
+ *           javelin-dom
+ *           javelin-util
+ *           javelin-workflow
+ *           javelin-stratcom
+ */
+
+JX.behavior('toggle-widget', function(config) {
+
+  function _toggleColumn(e) {
+    e.kill();
+    var node = JX.$('conpherence-main-layout');
+    config.show = !config.show;
+    JX.DOM.alterClass(node, 'hide-widgets', !config.show);
+
+    new JX.Request(config.settingsURI)
+      .setData({value: (config.show ? 1 : 0)})
+      .send();
+  }
+
+  JX.Stratcom.listen(
+    'click',
+    'conpherence-widget-toggle',
+    _toggleColumn);
+
+});