diff --git a/src/__celerity_resource_map__.php b/src/__celerity_resource_map__.php index 1ab00ca5f1..6891ce730e 100644 --- a/src/__celerity_resource_map__.php +++ b/src/__celerity_resource_map__.php @@ -918,7 +918,7 @@ celerity_register_resource_map(array( ), 'conpherence-header-pane-css' => array( - 'uri' => '/res/762c199d/rsrc/css/application/conpherence/header-pane.css', + 'uri' => '/res/6d7bfc7e/rsrc/css/application/conpherence/header-pane.css', 'type' => 'css', 'requires' => array( @@ -927,7 +927,7 @@ celerity_register_resource_map(array( ), 'conpherence-menu-css' => array( - 'uri' => '/res/9991071e/rsrc/css/application/conpherence/menu.css', + 'uri' => '/res/c955650e/rsrc/css/application/conpherence/menu.css', 'type' => 'css', 'requires' => array( @@ -936,7 +936,7 @@ celerity_register_resource_map(array( ), 'conpherence-message-pane-css' => array( - 'uri' => '/res/9b319b64/rsrc/css/application/conpherence/message-pane.css', + 'uri' => '/res/383af93e/rsrc/css/application/conpherence/message-pane.css', 'type' => 'css', 'requires' => array( @@ -954,7 +954,7 @@ celerity_register_resource_map(array( ), 'conpherence-widget-pane-css' => array( - 'uri' => '/res/c0131a8b/rsrc/css/application/conpherence/widget-pane.css', + 'uri' => '/res/7aaa78c5/rsrc/css/application/conpherence/widget-pane.css', 'type' => 'css', 'requires' => array( @@ -1303,7 +1303,7 @@ celerity_register_resource_map(array( ), 'javelin-behavior-conpherence-menu' => array( - 'uri' => '/res/2bffa665/rsrc/js/application/conpherence/behavior-menu.js', + 'uri' => '/res/a7f3be10/rsrc/js/application/conpherence/behavior-menu.js', 'type' => 'js', 'requires' => array( @@ -1335,7 +1335,7 @@ celerity_register_resource_map(array( ), 'javelin-behavior-conpherence-widget-pane' => array( - 'uri' => '/res/d2063fd4/rsrc/js/application/conpherence/behavior-widget-pane.js', + 'uri' => '/res/bc139f8e/rsrc/js/application/conpherence/behavior-widget-pane.js', 'type' => 'js', 'requires' => array( @@ -1346,6 +1346,8 @@ celerity_register_resource_map(array( 4 => 'javelin-util', 5 => 'phabricator-notification', 6 => 'javelin-behavior-device', + 7 => 'phabricator-dropdown-menu', + 8 => 'phabricator-menu-item', ), 'disk' => '/rsrc/js/application/conpherence/behavior-widget-pane.js', ), diff --git a/src/applications/conpherence/controller/ConpherenceController.php b/src/applications/conpherence/controller/ConpherenceController.php index 4870b0c36e..95bf05f613 100644 --- a/src/applications/conpherence/controller/ConpherenceController.php +++ b/src/applications/conpherence/controller/ConpherenceController.php @@ -25,7 +25,15 @@ abstract class ConpherenceController extends PhabricatorController { ->setName(pht('New Message')) ->setHref($this->getApplicationURI('new/')) ->setIcon('create') - ->setWorkflow(true)); + ->setWorkflow(true)) + ->addAction( + id(new PhabricatorMenuItemView()) + ->setName(pht('Thread')) + ->setHref('#') + ->setIcon('action-menu') + ->setStyle('display: none;') + ->addClass('device-widgets-selector') + ->addSigil('device-widgets-selector')); return $crumbs; } @@ -38,7 +46,9 @@ abstract class ConpherenceController extends PhabricatorController { } $crumbs->addCrumb( id(new PhabricatorCrumbView()) - ->setName($title)); + ->setName($title) + ->setHref($this->getApplicationURI('update/'.$conpherence->getID().'/')) + ->setWorkflow(true)); return $crumbs; } diff --git a/src/applications/conpherence/controller/ConpherenceUpdateController.php b/src/applications/conpherence/controller/ConpherenceUpdateController.php index 06116f2527..a5adad8bc3 100644 --- a/src/applications/conpherence/controller/ConpherenceUpdateController.php +++ b/src/applications/conpherence/controller/ConpherenceUpdateController.php @@ -92,7 +92,7 @@ final class ConpherenceUpdateController case ConpherenceUpdateActions::METADATA: $xactions = array(); $updated = false; - // all other metadata updates are continue requests + // all metadata updates are continue requests if (!$request->isContinueRequest()) { break; } @@ -103,6 +103,7 @@ final class ConpherenceUpdateController ->setTransactionType(ConpherenceTransactionType::TYPE_TITLE) ->setNewValue($title); $updated = true; + $response_mode = 'redirect'; } if (!$updated) { $errors[] = pht( diff --git a/src/applications/conpherence/controller/ConpherenceViewController.php b/src/applications/conpherence/controller/ConpherenceViewController.php index 26651f261a..665228565c 100644 --- a/src/applications/conpherence/controller/ConpherenceViewController.php +++ b/src/applications/conpherence/controller/ConpherenceViewController.php @@ -91,10 +91,14 @@ final class ConpherenceViewController extends ->setReplyForm($form) ->setRole('thread'); + $title = $conpherence->getTitle(); + if (!$title) { + $title = pht('Conpherence'); + } return $this->buildApplicationPage( $layout, array( - 'title' => $conpherence->getTitle(), + 'title' => $title, 'device' => true, )); } diff --git a/src/applications/conpherence/controller/ConpherenceWidgetController.php b/src/applications/conpherence/controller/ConpherenceWidgetController.php index 91f89fd8ef..76a735b63e 100644 --- a/src/applications/conpherence/controller/ConpherenceWidgetController.php +++ b/src/applications/conpherence/controller/ConpherenceWidgetController.php @@ -69,83 +69,14 @@ final class ConpherenceWidgetController extends $widgets[] = phutil_tag( 'div', array( - 'class' => 'widgets-header' + 'class' => 'widgets-header', ), - phutil_tag( - 'div', - array( - 'class' => 'widgets-header-icon-holder' - ), - array( - javelin_tag( - 'a', - array( - 'sigil' => 'conpherence-change-widget', - 'meta' => array( - 'widget' => 'conpherence-menu-pane', - ), - 'id' => 'conpherence-menu-pane-toggle', - 'class' => 'sprite-conpherence conpherence_list_off', - ), - ''), - javelin_tag( - 'a', - array( - 'sigil' => 'conpherence-change-widget', - 'meta' => array( - 'widget' => 'conpherence-message-pane', - ), - 'id' => 'conpherence-message-pane-toggle', - 'class' => 'sprite-conpherence conpherence_conversation_off', - ), - ''), - javelin_tag( - 'a', - array( - 'sigil' => 'conpherence-change-widget', - 'meta' => array( - 'widget' => 'widgets-people', - ), - 'id' => 'widgets-people-toggle', - 'class' => - 'sprite-conpherence conpherence_people_on conpherence_people_off' - ), - ''), - javelin_tag( - 'a', - array( - 'sigil' => 'conpherence-change-widget', - 'meta' => array( - 'widget' => 'widgets-files', - ), - 'id' => 'widgets-files-toggle', - 'class' => - 'sprite-conpherence conpherence_files_off' - ), - ''), - javelin_tag( - 'a', - array( - 'sigil' => 'conpherence-change-widget', - 'meta' => array( - 'widget' => 'widgets-calendar', - ), - 'id' => 'widgets-calendar-toggle', - 'class' => 'sprite-conpherence conpherence_calendar_off', - ), - ''), - javelin_tag( - 'a', - array( - 'sigil' => 'conpherence-change-widget', - 'meta' => array( - 'widget' => 'widgets-settings', - ), - 'id' => 'widgets-settings-toggle', - 'class' => 'sprite-conpherence conpherence_settings_off', - ), - '') - ))); + id(new PhabricatorActionHeaderView()) + ->setHeaderColor(PhabricatorActionHeaderView::HEADER_GREY) + ->setHeaderTitle('') + ->setHeaderHref('#') + ->setDropdown(true) + ->addHeaderSigil('widgets-selector')); $user = $this->getRequest()->getUser(); // now the widget bodies $widgets[] = javelin_tag( diff --git a/src/applications/conpherence/storage/ConpherenceThread.php b/src/applications/conpherence/storage/ConpherenceThread.php index ee166d3ceb..acae732b71 100644 --- a/src/applications/conpherence/storage/ConpherenceThread.php +++ b/src/applications/conpherence/storage/ConpherenceThread.php @@ -157,9 +157,10 @@ final class ConpherenceThread extends ConpherenceDAO $lucky_handle = reset($handles); } - $title = $this->getTitle(); + $title = $js_title = $this->getTitle(); if (!$title) { $title = $lucky_handle->getName(); + $js_title = pht('Conpherence'); } $img_src = $lucky_handle->getImageURI(); @@ -191,6 +192,7 @@ final class ConpherenceThread extends ConpherenceDAO return array( 'title' => $title, + 'js_title' => $js_title, 'subtitle' => $subtitle, 'unread_count' => $unread_count, 'epoch' => $this->getDateModified(), diff --git a/src/applications/conpherence/view/ConpherenceFileWidgetView.php b/src/applications/conpherence/view/ConpherenceFileWidgetView.php index f7d53509e6..1ee6cbeca2 100644 --- a/src/applications/conpherence/view/ConpherenceFileWidgetView.php +++ b/src/applications/conpherence/view/ConpherenceFileWidgetView.php @@ -85,6 +85,15 @@ final class ConpherenceFileWidgetView extends ConpherenceWidgetView { )); } + if (empty($files)) { + $files_html[] = javelin_tag( + 'div', + array( + 'class' => 'no-files', + 'sigil' => 'no-files'), + pht('No files.')); + } + return phutil_tag( 'div', array('class' => 'file-list'), diff --git a/src/applications/conpherence/view/ConpherenceLayoutView.php b/src/applications/conpherence/view/ConpherenceLayoutView.php index 7b0ad68dcc..d6d31bf820 100644 --- a/src/applications/conpherence/view/ConpherenceLayoutView.php +++ b/src/applications/conpherence/view/ConpherenceLayoutView.php @@ -65,40 +65,32 @@ final class ConpherenceLayoutView extends AphrontView { 'hasWidgets' => false, )); - $all_views = 1; - $devices_only = 0; Javelin::initBehavior( 'conpherence-widget-pane', array( - 'allViews' => $all_views, - 'devicesOnly' => $devices_only, - 'widgetRegistery' => array( - 'conpherence-menu-pane' => $devices_only, - 'conpherence-message-pane' => $devices_only, - 'widgets-people' => $all_views, - 'widgets-files' => $all_views, - 'widgets-calendar' => $all_views, - 'widgets-settings' => $all_views, - ), - 'widgetExtraNodes' => array( - 'conpherence-menu-pane' => array( - array( - 'tagname' => 'div', - 'sigil' => 'phabricator-nav-column-background', - 'showstyle' => 'block', - 'hidestyle' => 'none', - 'desktopstyle' => 'block'), - ) - ), - 'widgetToggleMap' => array( - 'conpherence-menu-pane' => 'conpherence_list_on', - 'conpherence-message-pane' => 'conpherence_conversation_on', - 'widgets-people' => 'conpherence_people_on', - 'widgets-files' => 'conpherence_files_on', - 'widgets-calendar' => 'conpherence_calendar_on', - 'widgets-settings' => 'conpherence_settings_on', - ) - )); + 'selectChar' => "\xE2\x96\xBC", + 'widgetRegistry' => array( + 'conpherence-message-pane' => array( + 'name' => pht('Thread'), + 'deviceOnly' => true, + ), + 'widgets-people' => array( + 'name' => pht('Participants'), + 'deviceOnly' => false, + ), + 'widgets-files' => array( + 'name' => pht('Files'), + 'deviceOnly' => false, + ), + 'widgets-calendar' => array( + 'name' => pht('Calendar'), + 'deviceOnly' => false, + ), + 'widgets-settings' => array( + 'name' => pht('Settings'), + 'deviceOnly' => false, + ), + ))); return javelin_tag( 'div', diff --git a/src/applications/conpherence/view/ConpherenceThreadListView.php b/src/applications/conpherence/view/ConpherenceThreadListView.php index 7a24fbea1d..abe66876d4 100644 --- a/src/applications/conpherence/view/ConpherenceThreadListView.php +++ b/src/applications/conpherence/view/ConpherenceThreadListView.php @@ -97,7 +97,7 @@ final class ConpherenceThreadListView extends AphrontView { ->addSigil('conpherence-menu-click') ->setMetadata( array( - 'title' => $title, + 'title' => $data['js_title'], 'id' => $thread->getID(), )); } diff --git a/src/view/AphrontTagView.php b/src/view/AphrontTagView.php index 4db894f471..1afcd3ff91 100644 --- a/src/view/AphrontTagView.php +++ b/src/view/AphrontTagView.php @@ -65,8 +65,8 @@ abstract class AphrontTagView extends AphrontView { return $this; } - public function getClass() { - return $this->class; + public function getClasses() { + return $this->classes; } public function setID($id) { diff --git a/src/view/layout/PhabricatorActionHeaderView.php b/src/view/layout/PhabricatorActionHeaderView.php index 1b1bbba53f..84db5b1c7d 100644 --- a/src/view/layout/PhabricatorActionHeaderView.php +++ b/src/view/layout/PhabricatorActionHeaderView.php @@ -15,9 +15,16 @@ final class PhabricatorActionHeaderView extends AphrontView { private $headerTitle; private $headerHref; private $headerIcon; + private $headerSigils = array(); private $actions = array(); private $iconColor = PhabricatorActionHeaderView::ICON_GREY; private $headerColor; + private $dropdown; + + public function setDropdown($dropdown) { + $this->dropdown = $dropdown; + return $this; + } public function addAction(PHUIIconView $action) { $this->actions[] = $action; @@ -39,6 +46,11 @@ final class PhabricatorActionHeaderView extends AphrontView { return $this; } + public function addHeaderSigil($sigil) { + $this->headerSigils[] = $sigil; + return $this; + } + public function setHeaderIcon($minicon) { $this->headerIcon = $minicon; return $this; @@ -66,6 +78,10 @@ final class PhabricatorActionHeaderView extends AphrontView { $classes[] = 'gradient-'.$this->headerColor.'-header'; } + if ($this->dropdown) { + $classes[] = 'dropdown'; + } + $action_list = array(); foreach ($this->actions as $action) { $action_list[] = phutil_tag( @@ -89,11 +105,12 @@ final class PhabricatorActionHeaderView extends AphrontView { $header_title = $this->headerTitle; if ($this->headerHref) { - $header_title = phutil_tag( + $header_title = javelin_tag( 'a', array( 'class' => 'phabricator-action-header-link', - 'href' => $this->headerHref + 'href' => $this->headerHref, + 'sigil' => implode(' ', $this->headerSigils) ), $this->headerTitle); } diff --git a/src/view/layout/PhabricatorCrumbView.php b/src/view/layout/PhabricatorCrumbView.php index fe2e422833..9caa3a5ea0 100644 --- a/src/view/layout/PhabricatorCrumbView.php +++ b/src/view/layout/PhabricatorCrumbView.php @@ -6,6 +6,12 @@ final class PhabricatorCrumbView extends AphrontView { private $href; private $icon; private $isLastCrumb; + private $workflow; + + public function setWorkflow($workflow) { + $this->workflow = $workflow; + return $this; + } public function setName($name) { $this->name = $name; @@ -71,14 +77,13 @@ final class PhabricatorCrumbView extends AphrontView { $classes[] = 'phabricator-last-crumb'; } - return phutil_tag( + return javelin_tag( $this->href ? 'a' : 'span', - array( - 'href' => $this->href, - 'class' => implode(' ', $classes), - ), - array($icon, $name, $divider)); + array( + 'sigil' => $this->workflow ? 'workflow' : null, + 'href' => $this->href, + 'class' => implode(' ', $classes), + ), + array($icon, $name, $divider)); } - - } diff --git a/src/view/layout/PhabricatorCrumbsView.php b/src/view/layout/PhabricatorCrumbsView.php index 4584e775f0..9fc18f98c9 100644 --- a/src/view/layout/PhabricatorCrumbsView.php +++ b/src/view/layout/PhabricatorCrumbsView.php @@ -50,12 +50,19 @@ final class PhabricatorCrumbsView extends AphrontView { $action->getName() ); + $action_sigils = $action->getSigils(); + if ($action->getWorkflow()) { + $action_sigils[] = 'workflow'; + } + $action_classes = $action->getClasses(); + $action_classes[] = 'phabricator-crumbs-action'; $actions[] = javelin_tag( 'a', array( 'href' => $action->getHref(), - 'class' => 'phabricator-crumbs-action', - 'sigil' => $action->getWorkflow() ? 'workflow' : null, + 'class' => implode(' ', $action_classes), + 'sigil' => implode(' ', $action_sigils), + 'style' => $action->getStyle() ), array( $icon, diff --git a/webroot/rsrc/css/application/conpherence/header-pane.cs b/webroot/rsrc/css/application/conpherence/header-pane.cs new file mode 100644 index 0000000000..e69de29bb2 diff --git a/webroot/rsrc/css/application/conpherence/header-pane.css b/webroot/rsrc/css/application/conpherence/header-pane.css index 110621e101..57886ca26f 100644 --- a/webroot/rsrc/css/application/conpherence/header-pane.css +++ b/webroot/rsrc/css/application/conpherence/header-pane.css @@ -3,5 +3,4 @@ */ .device .conpherence-header-pane { - display: none; } diff --git a/webroot/rsrc/css/application/conpherence/menu.css b/webroot/rsrc/css/application/conpherence/menu.css index 9273fed3a9..4501e56727 100644 --- a/webroot/rsrc/css/application/conpherence/menu.css +++ b/webroot/rsrc/css/application/conpherence/menu.css @@ -22,44 +22,49 @@ } .conpherence-menu-pane { - width: 300px; + width: 100%; position: absolute; overflow-x: hidden; overflow-y: auto; top: 0; bottom: 0; } +.device-desktop .conpherence-layout .conpherence-menu-pane, +.device-desktop .conpherence-layout .phabricator-nav-column-background { + width: 280px; +} +.device .conpherence-menu-pane { + top: 41px; +} +.device .conpherence-role-list .conpherence-menu-pane { + top: 0px; +} .device-phone .conpherence-menu-pane { -webkit-overflow-scrolling: touch; } -.conpherence-content-pane { - margin-left: 300px; - position: relative; -} - .conpherence-layout .phabricator-nav-column-background { display: block; - width: 300px; -} - -.device .conpherence-menu-pane { - top: 41px; -} - -.device .phabricator-nav-column-background { - top: 86px; -} - -.device .conpherence-menu-pane, -.device .phabricator-nav-column-background { - display: none; width: 100%; } -.device .conpherence-content-pane { - margin-left: 0; +.device .phabricator-nav-column-background { + top: 44px; +} + +.device .conpherence-role-thread .conpherence-menu-pane, +.device .conpherence-role-thread .phabricator-nav-column-background { + display: none; +} + +.device-desktop .conpherence-content-pane { + margin-left: 280px; +} + +.conpherence-content-pane { + margin-left: 0px; + position: relative; } .conpherence-menu .conpherence-menu-item-view { @@ -106,7 +111,7 @@ color: #ffffff; text-shadow: 0px 1px 1px #000000; overflow: hidden; - width: 160px; + width: 140px; text-overflow: ellipsis; } @@ -151,6 +156,6 @@ border-top: solid 1px #3B3D3E; padding: 20px 0; margin: 0px auto; - width: 300px; + width: 280px; text-align: center; } diff --git a/webroot/rsrc/css/application/conpherence/message-pane.css b/webroot/rsrc/css/application/conpherence/message-pane.css index 95e66d8364..821151c51e 100644 --- a/webroot/rsrc/css/application/conpherence/message-pane.css +++ b/webroot/rsrc/css/application/conpherence/message-pane.css @@ -4,8 +4,8 @@ .conpherence-message-pane { position: fixed; - left: 300px; - right: 281px; + left: 280px; + right: 241px; top: 76px; min-width: 300px; width: auto; @@ -15,7 +15,6 @@ .device .conpherence-message-pane { left: 0; right: 0; - top: 85px; width: 100%; } @@ -31,8 +30,8 @@ .conpherence-message-pane .conpherence-messages { position: fixed; - left: 300px; - right: 281px; + left: 280px; + right: 241px; top: 76px; bottom: 190px; overflow-y: auto; @@ -43,7 +42,6 @@ .device .conpherence-message-pane .conpherence-messages { left: 0; right: 0; - top: 85px; bottom: 3em; width: 100%; box-shadow: none; @@ -56,8 +54,8 @@ padding: 0; position: fixed; bottom: 0; - left: 300px; - right: 281px; + left: 280px; + right: 241px; } .device .conpherence-message-pane .remarkup-assist-bar { diff --git a/webroot/rsrc/css/application/conpherence/widget-pane.css b/webroot/rsrc/css/application/conpherence/widget-pane.css index bd0e909ae2..9b6ad715e1 100644 --- a/webroot/rsrc/css/application/conpherence/widget-pane.css +++ b/webroot/rsrc/css/application/conpherence/widget-pane.css @@ -5,13 +5,12 @@ .conpherence-widget-pane { position: fixed; right: 0px; - top: 76px; - width: 280px; + top: 74px; + width: 240px; height: 100%; border-width: 0 0 0 1px; border-color: #CCC; border-style: solid; - background: url('/rsrc/image/texture/dust_background.jpeg'); overflow-y: auto; -webkit-overflow-scrolling: touch; } @@ -23,69 +22,61 @@ .conpherence-widget-pane .aphront-form-input { margin: 0; - width: 100%; + width: 85%; } .conpherence-widget-pane .aphront-form-inset { border: 0; - background: url('/rsrc/image/texture/dust_background.jpeg'); } .conpherence-widget-pane .widgets-header { - background-color: #d8dce2; - box-shadow: 0px 2px 2px rgba(0,0,0,0.15); + background: #F5F5F5; + border-bottom: 1px solid #ccc; } -.conpherence-widget-pane .widgets-header .widgets-header-icon-holder { - height: 40px; - width: 280px; - margin: 0px auto; -} - -.device-desktop .conpherence-widget-pane .widgets-header -.widgets-header-icon-holder { - width: 175px; -} - -.conpherence-widget-pane .widgets-header .sprite-conpherence { - display: block; - width: 29px; - height: 34px; - margin: 4px 0px 0px 14px; - float: left; - clear: none; -} - -.conpherence-widget-pane .widgets-header .conpherence_list_on, -.conpherence-widget-pane .widgets-header .conpherence_conversation_on, -.conpherence-widget-pane .widgets-header .conpherence_people_on, -.conpherence-widget-pane .widgets-header .conpherence_files_on, -.conpherence-widget-pane .widgets-header .conpherence_calendar_on, -.conpherence-widget-pane .widgets-header .conpherence_settings_on { - border-bottom: 3px solid #525252; -} - -.device-desktop .conpherence-widget-pane .widgets-header -#conpherence-menu-pane-toggle, -.device-desktop .conpherence-widget-pane .widgets-header -#conpherence-message-pane-toggle { +.device .conpherence-widget-pane .widgets-header { display: none; } +.conpherence-widget-pane .widgets-header .caret { + float: none; + height: 0px; + width: 0px; + margin-right: 0px; + border-top-color: #000; +} +.conpherence-widget-pane .widgets-header a:hover { + text-decoration: none; +} +.device-desktop .conpherence-layout .device-widgets-selector { + display: none; +} + +.dropdown-menu-frame { + width: 229px !important; +} + .conpherence-widget-pane .widgets-body { position: fixed; overflow-y: auto; - top: 116px; bottom: 0px; width: 100%; + top: 74px; } -.device .conpherence-widget-pane .widgets-body { - top: 85px; +.device-desktop .conpherence-widget-pane .widgets-body { + top: 104px; + width: 280px; } /* files widget */ +.conpherence-widget-pane #widgets-files .no-files { + width: 200px; + padding: 20px; + text-align: center; + color: #555; +} .conpherence-widget-pane #widgets-files .file-entry { padding: 12px 0px 14px 0px; } @@ -103,7 +94,7 @@ top: -4px; left: 20px; overflow-x: hidden; - width: 210px; + width: 170px; font-weight: bold; } .conpherence-widget-pane #widgets-files .file-uploaded-by { @@ -111,14 +102,14 @@ position: relative; top: 0px; left: 20px; - width: 210px; + width: 170px; font-size: 11px; } .conpherence-widget-pane #widgets-files .file-extra { display: block; height: 120px; - width: 160px; + width: 120px; margin: 8px 0px 8px 52px; border: 1px solid #7289b7; box-shadow: 0 0px 5px rgba(0,0,0,.25); @@ -128,7 +119,7 @@ .conpherence-widget-pane #widgets-files .divider { float: left; clear: both; - width: 210px; + width: 170px; margin: 8px 0px 0px 50px; border: 1px dashed #bfbfbf; } @@ -146,7 +137,7 @@ .conpherence-widget-pane #widgets-calendar .aphront-multi-column-view { margin: 2px 0px 0px 0px; - width: 280px; + width: 240px; } .device .conpherence-widget-pane #widgets-calendar .aphront-multi-column-view { width: 100%; @@ -162,6 +153,8 @@ .aphront-multi-column-column-outer { width: 20%; margin-bottom: 0px; + float: left; + clear: none; } .conpherence-widget-pane #widgets-calendar .aphront-multi-column-view .aphront-multi-column-column-last { @@ -219,7 +212,7 @@ border-top: 1px solid #bfbfbf; border-bottom: 1px solid #bfbfbf; padding: 5px 10px 5px 10px; - width: 260px; + width: 220px; } .device .conpherence-widget-pane #widgets-calendar .day-header { width: 98%; @@ -237,7 +230,7 @@ .conpherence-widget-pane #widgets-calendar .divider { float: left; clear: both; - width: 260px; + width: 220px; margin: 0px 0px 0px 10px; border: 1px dashed #bfbfbf; } @@ -256,7 +249,7 @@ float: left; clear: both; height: 60px; - width: 280px; + width: 240px; } .device .conpherence-widget-pane #widgets-calendar .user-status { width: 100%; @@ -293,7 +286,7 @@ position: relative; left: 40px; top: 0px; - width: 260px; + width: 220px; } .conpherence-widget-pane #widgets-calendar .user-status .participant { @@ -302,7 +295,7 @@ top: 0px; font-style: italic; font-size: 11px; - width: 260px; + width: 220px; } .device .conpherence-widget-pane #widgets-calendar .user-status .description, @@ -323,12 +316,12 @@ /* people widget */ .conpherence-widget-pane .people-widget-header { float: left; - width: 280px; + width: 240px; } .conpherence-widget-pane .people-widget-header .divider { float: left; clear: both; - width: 260px; + width: 220px; margin: 0px 0px 0px 10px; border: 1px dashed #bfbfbf; } @@ -339,18 +332,19 @@ .conpherence-widget-pane .people-widget-header .add-people-widget { float: left; padding: 10px 0px 10px 0px; - width: 280px; + width: 240px; } - .device .conpherence-widget-pane .people-widget-header, .device .conpherence-widget-pane .people-widget-header .add-people-widget { width: 100%; } - +.conpherence-widget-pane .add-people-widget .aphront-form-input { + width: 100%; +} .conpherence-widget-pane .people-widget-header .add-people-widget .aphront-form-control-tokenizer { float: left; - width: 180px; + width: 142px; padding: 0px 0px 0px 10px } .device .conpherence-widget-pane .people-widget-header .add-people-widget @@ -360,7 +354,7 @@ .conpherence-widget-pane .people-widget-header .add-people-widget .people-add-button { float: right; - margin: 2px 10px 0px 0px; + margin: 2px 8px 0px 0px; padding: 3px 16px 4px 16px; } @-moz-document url-prefix() { @@ -371,7 +365,7 @@ } .conpherence-widget-pane .person-entry { float: left; - width: 270px; + width: 230px; clear: both; padding: 10px 0px 0px 8px; } @@ -386,7 +380,7 @@ clear: none; font-size: 14px; font-weight: bold; - width: 164px; + width: 124px; } .conpherence-widget-pane .person-entry .pic { @@ -422,6 +416,7 @@ } /* settings widget */ +.conpherence-widget-pane .title-update, .conpherence-widget-pane .notifications-update { margin: 2px 0px 0px 8px; } diff --git a/webroot/rsrc/js/application/conpherence/behavior-menu.js b/webroot/rsrc/js/application/conpherence/behavior-menu.js index b4eb0b7532..3bbdc2b2bf 100644 --- a/webroot/rsrc/js/application/conpherence/behavior-menu.js +++ b/webroot/rsrc/js/application/conpherence/behavior-menu.js @@ -97,7 +97,7 @@ JX.behavior('conpherence-menu', function(config) { var data = JX.Stratcom.getData(thread.node); if (thread.visible !== null || !config.hasThread) { - var uri = config.base_uri + data.id + '/'; + var uri = config.base_uri + data.id + '/'; new JX.Workflow(uri, {}) .setHandler(onloadthreadresponse) .start(); @@ -124,35 +124,23 @@ JX.behavior('conpherence-menu', function(config) { updatetoggledwidget(); } - function updatetoggledwidget() { + function updatetoggledwidget(no_toggle) { + JX.Stratcom.invoke( + 'conpherence-toggle-widget', + null, + { + widget : getdefaultwidget(), + no_toggle : no_toggle + }); + } + + function getdefaultwidget() { var device = JX.Device.getDevice(); - if (device != 'desktop') { - if (config.role == 'list') { - JX.Stratcom.invoke( - 'conpherence-toggle-widget', - null, - { - widget : 'conpherence-menu-pane' - } - ); - } else { - JX.Stratcom.invoke( - 'conpherence-toggle-widget', - null, - { - widget : 'conpherence-message-pane' - } - ); - } - } else { - JX.Stratcom.invoke( - 'conpherence-toggle-widget', - null, - { - widget : 'widgets-people' - } - ); + var widget = 'conpherence-message-pane'; + if (device == 'desktop') { + widget = 'widgets-people'; } + return widget; } function onloadthreadresponse(response) { @@ -174,6 +162,22 @@ JX.behavior('conpherence-menu', function(config) { var root = JX.DOM.find(document, 'div', 'conpherence-layout'); var messagesRoot = JX.DOM.find(root, 'div', 'conpherence-messages'); messagesRoot.scrollTop = messagesRoot.scrollHeight; + + try { + var device = JX.Device.getDevice(); + var deviceWidgetSelector = JX.DOM.find( + root, + 'a', + 'device-widgets-selector'); + if (device != 'desktop') { + JX.DOM.show(deviceWidgetSelector); + updatetoggledwidget(true); + } else { + JX.DOM.hide(deviceWidgetSelector); + } + } catch (ex) { + // not here yet + } } JX.Stratcom.listen( @@ -262,6 +266,18 @@ JX.behavior('conpherence-menu', function(config) { if (new_device === old_device) { return; } + + if (old_device === null) { + old_device = new_device; + if (config.role == 'list') { + if (new_device != 'desktop') { + return; + } + } else { + loadthreads(); + return; + } + } var update_toggled_widget = new_device == 'desktop' || old_device == 'desktop'; old_device = new_device; @@ -270,10 +286,12 @@ JX.behavior('conpherence-menu', function(config) { updatetoggledwidget(); } - if (!config.hasThreadList) { - loadthreads(); - } else { + if (config.role == 'list') { didloadthreads(); + config.role = 'thread'; + var root = JX.DOM.find(document, 'div', 'conpherence-layout'); + JX.DOM.alterClass(root, 'conpherence-role-list', false); + JX.DOM.alterClass(root, 'conpherence-role-thread', true); } } diff --git a/webroot/rsrc/js/application/conpherence/behavior-widget-pane.js b/webroot/rsrc/js/application/conpherence/behavior-widget-pane.js index bf4d89b969..a273dc2fa4 100644 --- a/webroot/rsrc/js/application/conpherence/behavior-widget-pane.js +++ b/webroot/rsrc/js/application/conpherence/behavior-widget-pane.js @@ -6,104 +6,113 @@ * javelin-util * phabricator-notification * javelin-behavior-device + * phabricator-dropdown-menu + * phabricator-menu-item * @provides javelin-behavior-conpherence-widget-pane */ JX.behavior('conpherence-widget-pane', function(config) { + var build_widget_selector = function (data) { + var widgets = config.widgetRegistry; + var root = JX.DOM.find(document, 'div', 'conpherence-layout'); + var widgetPane = JX.DOM.find(root, 'div', 'conpherence-widget-pane'); + var widgetHeader = JX.DOM.find(widgetPane, 'a', 'widgets-selector'); + var mobileWidgetHeader = null; + try { + mobileWidgetHeader = JX.DOM.find( + root, + 'a', + 'device-widgets-selector'); + } catch (ex) { + // is okay - no mobileWidgetHeader yet... + } + var widgetData = widgets[data.widget]; + JX.DOM.setContent( + widgetHeader, + widgetData.name); + JX.DOM.appendContent( + widgetHeader, + JX.$N('span', { className : 'caret' })); + if (mobileWidgetHeader) { + // this is fragile but adding a sigil to this element is awkward + var mobileWidgetHeaderSpans = JX.DOM.scry(mobileWidgetHeader, 'span'); + var mobileWidgetHeaderSpan = mobileWidgetHeaderSpans[1]; + JX.DOM.setContent( + mobileWidgetHeaderSpan, + widgetData.name); + } + + var menu = new JX.PhabricatorDropdownMenu(widgetHeader); + menu.toggleAlignDropdownRight(false); + var deviceMenu = null; + if (mobileWidgetHeader) { + deviceMenu = new JX.PhabricatorDropdownMenu(mobileWidgetHeader); + } + + for (var widget in widgets) { + widgetData = widgets[widget]; + if (mobileWidgetHeader) { + deviceMenu.addItem(new JX.PhabricatorMenuItem( + widgetData.name, + JX.bind(null, build_widget_selector, { widget : widget }), + '#' + ).setDisabled(widget == data.widget)); + } + if (widgetData.deviceOnly) { + continue; + } + menu.addItem(new JX.PhabricatorMenuItem( + widgetData.name, + JX.bind(null, build_widget_selector, { widget : widget }), + '#' + ).setDisabled(widget == data.widget)); + } + if (data.no_toggle) { + return; + } + toggle_widget(data); + }; + var toggle_widget = function (data) { + var widgets = config.widgetRegistry; + var widgetData = widgets[data.widget]; var device = JX.Device.getDevice(); var is_desktop = device == 'desktop'; - if (config.widgetRegistery[data.widget] == config.devicesOnly && - is_desktop) { + + if (widgetData.deviceOnly && is_desktop) { return; } - var root = JX.DOM.find(document, 'div', 'conpherence-layout'); - var widgetPane = JX.DOM.find(root, 'div', 'conpherence-widget-pane'); - var i; - var tag_data; - var node; - - for (var widget in config.widgetRegistery) { - // device-only widgets are *always shown* on the desktop - if (config.widgetRegistery[widget] == config.devicesOnly) { - if (is_desktop) { + for (var widget in config.widgetRegistry) { + widgetData = widgets[widget]; + if (widgetData.deviceOnly && is_desktop) { + // some one off code for conpherence messages which are device-only + // as a widget, but shown always on the desktop + if (widget == 'conpherence-message-pane') { JX.$(widget).style.display = 'block'; - if (config.widgetExtraNodes[widget]) { - for (i in config.widgetExtraNodes[widget]) { - tag_data = config.widgetExtraNodes[widget][i]; - node = JX.DOM.find(root, tag_data.tagname, tag_data.sigil); - node.style.display = tag_data.desktopstyle; - } - } - continue; + JX.Stratcom.invoke('conpherence-redraw-thread', null, {}); } + continue; } - - var cur_toggle = JX.$(widget + '-toggle'); - var toggle_class = config.widgetToggleMap[widget]; if (widget == data.widget) { - JX.DOM.alterClass(cur_toggle, toggle_class, true); JX.$(widget).style.display = 'block'; - if (config.widgetRegistery[widget] == config.devicesOnly) { - widgetPane.style.height = '42px'; - } else { - widgetPane.style.height = '100%'; - } - if (config.widgetExtraNodes[widget]) { - for (i in config.widgetExtraNodes[widget]) { - tag_data = config.widgetExtraNodes[widget][i]; - node = JX.DOM.find(root, tag_data.tagname, tag_data.sigil); - node.style.display = tag_data.showstyle; - } - } - // some one off code for conpherence messages + // some one off code for conpherence messages - fancier refresh tech if (widget == 'conpherence-message-pane') { JX.Stratcom.invoke('conpherence-redraw-thread', null, {}); JX.Stratcom.invoke('conpherence-update-page-data', null, {}); } - // some one off code for conpherence list - if (widget == 'conpherence-menu-pane') { - JX.Stratcom.invoke( - 'conpherence-update-page-data', - null, - { use_base_uri : true, title: 'Conpherence' } - ); - } } else { - JX.DOM.alterClass( - cur_toggle, - toggle_class, - false - ); JX.$(widget).style.display = 'none'; - if (config.widgetExtraNodes[widget]) { - for (i in config.widgetExtraNodes[widget]) { - tag_data = config.widgetExtraNodes[widget][i]; - node = JX.DOM.find(root, tag_data.tagname, tag_data.sigil); - node.style.display = tag_data.hidestyle; - } - } } } }; - JX.Stratcom.listen( - ['touchstart', 'mousedown'], - 'conpherence-change-widget', - function(e) { - e.kill(); - var data = e.getNodeData('conpherence-change-widget'); - toggle_widget(data); - } - ); - JX.Stratcom.listen( 'conpherence-toggle-widget', null, function (e) { - toggle_widget(e.getData()); + build_widget_selector(e.getData()); } );