From 42c1e39ae620436f09e6001f1a7de3a8c8905c4d Mon Sep 17 00:00:00 2001 From: Bob Trahan Date: Mon, 15 Apr 2013 16:27:41 -0700 Subject: [PATCH] Conpherence - mobilized Summary: makes conpherence switch to a liquid layout once we go from desktop -> less than that. When we make the switch conpherence updates to show a few more "Widgets" -- the list of conpherences and the current conversation -- and the switcher starts working. As you transition from device to device you are automagically forced to have the "conversation" widget toggled on initial change to smaller than desktop and then file widget once you get back to desktop. Generally looks good when I make my browser small. Does not look as good on iOS simulator - in particular there seems to be a weird visual artifact on the "add people" widget that is present in all tokenizers, and the pontificate UI on mobile could use some work. ref T2399. Test Plan: played in Safari, FF, Chrome and iOS Simulator. The first 3 were all pretty spiffy, and otherwise iOS add people widget was a bit ugly. Reviewers: epriestley, chad Reviewed By: epriestley CC: aran, Korvin, AnhNhan Maniphest Tasks: T2399 Differential Revision: https://secure.phabricator.com/D5674 --- src/__celerity_resource_map__.php | 13 +- .../controller/ConpherenceController.php | 17 +-- .../controller/ConpherenceNewController.php | 4 +- .../ConpherenceWidgetController.php | 46 ++------ .../ConpherencePeopleMenuEventListener.php | 2 +- .../view/ConpherenceLayoutView.php | 84 +++++++++++-- .../view/ConpherenceThreadListView.php | 3 +- .../application/conpherence/header-pane.css | 4 + .../rsrc/css/application/conpherence/menu.css | 47 ++++---- .../application/conpherence/message-pane.css | 58 ++++++++- .../application/conpherence/widget-pane.css | 80 ++++++++++--- .../application/conpherence/behavior-menu.js | 111 ++++++++++++++---- .../conpherence/behavior-pontificate.js | 14 +-- .../conpherence/behavior-widget-pane.js | 109 +++++++++++++---- 14 files changed, 437 insertions(+), 155 deletions(-) diff --git a/src/__celerity_resource_map__.php b/src/__celerity_resource_map__.php index db00431480..7688d87ae0 100644 --- a/src/__celerity_resource_map__.php +++ b/src/__celerity_resource_map__.php @@ -897,7 +897,7 @@ celerity_register_resource_map(array( ), 'conpherence-header-pane-css' => array( - 'uri' => '/res/7f7cc347/rsrc/css/application/conpherence/header-pane.css', + 'uri' => '/res/0c8d4664/rsrc/css/application/conpherence/header-pane.css', 'type' => 'css', 'requires' => array( @@ -906,7 +906,7 @@ celerity_register_resource_map(array( ), 'conpherence-menu-css' => array( - 'uri' => '/res/2ba4444e/rsrc/css/application/conpherence/menu.css', + 'uri' => '/res/ea53bb96/rsrc/css/application/conpherence/menu.css', 'type' => 'css', 'requires' => array( @@ -915,7 +915,7 @@ celerity_register_resource_map(array( ), 'conpherence-message-pane-css' => array( - 'uri' => '/res/6a4811a7/rsrc/css/application/conpherence/message-pane.css', + 'uri' => '/res/cee244ea/rsrc/css/application/conpherence/message-pane.css', 'type' => 'css', 'requires' => array( @@ -933,7 +933,7 @@ celerity_register_resource_map(array( ), 'conpherence-widget-pane-css' => array( - 'uri' => '/res/207ef6fc/rsrc/css/application/conpherence/widget-pane.css', + 'uri' => '/res/da148aa8/rsrc/css/application/conpherence/widget-pane.css', 'type' => 'css', 'requires' => array( @@ -1282,7 +1282,7 @@ celerity_register_resource_map(array( ), 'javelin-behavior-conpherence-menu' => array( - 'uri' => '/res/7021ec83/rsrc/js/application/conpherence/behavior-menu.js', + 'uri' => '/res/22d7f114/rsrc/js/application/conpherence/behavior-menu.js', 'type' => 'js', 'requires' => array( @@ -1313,7 +1313,7 @@ celerity_register_resource_map(array( ), 'javelin-behavior-conpherence-widget-pane' => array( - 'uri' => '/res/32f4bf14/rsrc/js/application/conpherence/behavior-widget-pane.js', + 'uri' => '/res/458394ef/rsrc/js/application/conpherence/behavior-widget-pane.js', 'type' => 'js', 'requires' => array( @@ -1323,6 +1323,7 @@ celerity_register_resource_map(array( 3 => 'javelin-workflow', 4 => 'javelin-util', 5 => 'phabricator-notification', + 6 => 'javelin-behavior-device', ), '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 8dc426f719..ad7f45d58d 100644 --- a/src/applications/conpherence/controller/ConpherenceController.php +++ b/src/applications/conpherence/controller/ConpherenceController.php @@ -43,11 +43,14 @@ abstract class ConpherenceController extends PhabricatorController { $all_participation = $unread + $read; $all_conpherence_phids = array_keys($all_participation); - $all_conpherences = id(new ConpherenceThreadQuery()) - ->setViewer($user) - ->withPHIDs($all_conpherence_phids) - ->needParticipantCache(true) - ->execute(); + $all_conpherences = array(); + if ($all_conpherence_phids) { + $all_conpherences = id(new ConpherenceThreadQuery()) + ->setViewer($user) + ->withPHIDs($all_conpherence_phids) + ->needParticipantCache(true) + ->execute(); + } $unread_conpherences = array_select_keys( $all_conpherences, array_keys($unread)); @@ -63,7 +66,7 @@ abstract class ConpherenceController extends PhabricatorController { $nav = new PhabricatorMenuView(); $nav->newLink( - pht('New Conversation'), + pht('New Message'), $this->getApplicationURI('new/')); return $nav; @@ -75,7 +78,7 @@ abstract class ConpherenceController extends PhabricatorController { $crumbs ->addAction( id(new PhabricatorMenuItemView()) - ->setName(pht('New Conversation')) + ->setName(pht('New Message')) ->setHref($this->getApplicationURI('new/')) ->setIcon('create')) ->addCrumb( diff --git a/src/applications/conpherence/controller/ConpherenceNewController.php b/src/applications/conpherence/controller/ConpherenceNewController.php index 6a54b90956..d48f2bb65a 100644 --- a/src/applications/conpherence/controller/ConpherenceNewController.php +++ b/src/applications/conpherence/controller/ConpherenceNewController.php @@ -13,7 +13,7 @@ final class ConpherenceNewController extends ConpherenceController { ->attachParticipants(array()) ->attachFilePHIDs(array()) ->setMessageCount(0); - $title = pht('New Conversation'); + $title = pht('New Message'); $participants = array(); $message = ''; $files = array(); @@ -137,7 +137,7 @@ final class ConpherenceNewController extends ConpherenceController { ->setUser($user) ->setTitle($title) ->addCancelButton($cancel_uri) - ->addSubmitButton(pht('Create Conversation')); + ->addSubmitButton(pht('Send Message')); $form = id(new AphrontFormLayoutView()) ->setUser($user) diff --git a/src/applications/conpherence/controller/ConpherenceWidgetController.php b/src/applications/conpherence/controller/ConpherenceWidgetController.php index 9f9e7a4479..db06edd8f3 100644 --- a/src/applications/conpherence/controller/ConpherenceWidgetController.php +++ b/src/applications/conpherence/controller/ConpherenceWidgetController.php @@ -63,21 +63,6 @@ final class ConpherenceWidgetController extends private function renderWidgetPaneContent() { require_celerity_resource('conpherence-widget-pane-css'); require_celerity_resource('sprite-conpherence-css'); - $can_toggle = 1; - $cant_toggle = 0; - Javelin::initBehavior( - 'conpherence-widget-pane', - array( - 'widgetRegistery' => array( - 'widgets-conpherence-list' => $cant_toggle, - 'widgets-conversation' => $cant_toggle, - 'widgets-people' => $can_toggle, - 'widgets-files' => $can_toggle, - 'widgets-calendar' => $can_toggle, - 'widgets-settings' => $can_toggle, - ) - )); - $conpherence = $this->getConpherence(); $widgets = array(); @@ -97,10 +82,9 @@ final class ConpherenceWidgetController extends array( 'sigil' => 'conpherence-change-widget', 'meta' => array( - 'widget' => 'widgets-conpherence-list', - 'toggleClass' => 'conpherence_list_on' + 'widget' => 'conpherence-menu-pane', ), - 'id' => 'widgets-conpherence-list-toggle', + 'id' => 'conpherence-menu-pane-toggle', 'class' => 'sprite-conpherence conpherence_list_off', ), ''), @@ -109,10 +93,9 @@ final class ConpherenceWidgetController extends array( 'sigil' => 'conpherence-change-widget', 'meta' => array( - 'widget' => 'widgets-conversation', - 'toggleClass' => 'conpherence_conversation_on' + 'widget' => 'conpherence-message-pane', ), - 'id' => 'widgets-conpherence-conversation-toggle', + 'id' => 'conpherence-message-pane-toggle', 'class' => 'sprite-conpherence conpherence_conversation_off', ), ''), @@ -122,7 +105,6 @@ final class ConpherenceWidgetController extends 'sigil' => 'conpherence-change-widget', 'meta' => array( 'widget' => 'widgets-people', - 'toggleClass' => 'conpherence_people_on' ), 'id' => 'widgets-people-toggle', 'class' => 'sprite-conpherence conpherence_people_off' @@ -134,7 +116,6 @@ final class ConpherenceWidgetController extends 'sigil' => 'conpherence-change-widget', 'meta' => array( 'widget' => 'widgets-files', - 'toggleClass' => 'conpherence_files_on' ), 'id' => 'widgets-files-toggle', 'class' => @@ -147,7 +128,6 @@ final class ConpherenceWidgetController extends 'sigil' => 'conpherence-change-widget', 'meta' => array( 'widget' => 'widgets-calendar', - 'toggleClass' => 'conpherence_calendar_on' ), 'id' => 'widgets-calendar-toggle', 'class' => 'sprite-conpherence conpherence_calendar_off', @@ -159,7 +139,6 @@ final class ConpherenceWidgetController extends 'sigil' => 'conpherence-change-widget', 'meta' => array( 'widget' => 'widgets-settings', - 'toggleClass' => 'conpherence_settings_on' ), 'id' => 'widgets-settings-toggle', 'class' => 'sprite-conpherence conpherence_settings_off', @@ -326,16 +305,17 @@ final class ConpherenceWidgetController extends // This list is sorted, so we can stop looking. break; } - if (!$first_status_of_the_day) { - $content[] = phutil_tag( - 'div', - array( - 'class' => 'divider' - ), - ''); - } + if ($status->getDateFrom() < $epoch_end && $status->getDateTo() > $epoch_start) { + if (!$first_status_of_the_day) { + $content[] = phutil_tag( + 'div', + array( + 'class' => 'divider' + ), + ''); + } $statuses_of_the_day[$status->getUserPHID()] = $status; $timespan = $status->getDateTo() - $status->getDateFrom(); if ($timespan > $one_day) { diff --git a/src/applications/conpherence/events/ConpherencePeopleMenuEventListener.php b/src/applications/conpherence/events/ConpherencePeopleMenuEventListener.php index a9a226756f..baf6002e38 100644 --- a/src/applications/conpherence/events/ConpherencePeopleMenuEventListener.php +++ b/src/applications/conpherence/events/ConpherencePeopleMenuEventListener.php @@ -21,7 +21,7 @@ final class ConpherencePeopleMenuEventListener extends PhutilEventListener { $conpherence_uri = new PhutilURI('/conpherence/new/?participant='.$person->getPHID()); - $name = pht('Conpherence'); + $name = pht('Message'); $menu->addMenuItemBefore('activity', id(new PhabricatorMenuItemView()) diff --git a/src/applications/conpherence/view/ConpherenceLayoutView.php b/src/applications/conpherence/view/ConpherenceLayoutView.php index 0a8d2c631b..ba0de8b644 100644 --- a/src/applications/conpherence/view/ConpherenceLayoutView.php +++ b/src/applications/conpherence/view/ConpherenceLayoutView.php @@ -57,12 +57,6 @@ final class ConpherenceLayoutView extends AphrontView { Javelin::initBehavior('conpherence-menu', array( 'base_uri' => $this->baseURI, - 'header' => 'conpherence-header-pane', - 'messages' => 'conpherence-messages', - 'messages_pane' => 'conpherence-message-pane', - 'widgets_pane' => 'conpherence-widget-pane', - 'form_pane' => 'conpherence-form', - 'menu_pane' => 'conpherence-menu', 'layoutID' => $layout_id, 'selectedID' => ($this->thread ? $this->thread->getID() : null), 'role' => $this->role, @@ -79,6 +73,47 @@ final class ConpherenceLayoutView extends AphrontView { 'activated_class' => 'conpherence-header-upload-photo', )); + $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'), + array( + 'tagname' => 'a', + 'sigil' => 'conpherence-new-conversation', + 'showstyle' => 'none', + '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', + ) + )); + return javelin_tag( 'div', array( @@ -91,11 +126,13 @@ final class ConpherenceLayoutView extends AphrontView { 'div', array( 'class' => 'phabricator-nav-column-background', + 'sigil' => 'phabricator-nav-column-background', ), ''), javelin_tag( 'div', array( + 'id' => 'conpherence-menu-pane', 'class' => 'conpherence-menu-pane phabricator-side-menu', 'sigil' => 'conpherence-menu-pane', ), @@ -106,19 +143,43 @@ final class ConpherenceLayoutView extends AphrontView { 'class' => 'conpherence-content-pane', ), array( + javelin_tag( + 'div', + array( + 'class' => 'conpherence-no-threads', + 'sigil' => 'conpherence-no-threads', + 'style' => 'display: none;', + ), + array( + phutil_tag( + 'div', + array( + 'class' => 'text' + ), + pht('You do not have any conpherences yet.')), + javelin_tag( + 'a', + array( + 'href' => '/conpherence/new/', + 'class' => 'button', + 'sigil' => 'workflow', + ), + pht('Start a Conpherence')) + )), javelin_tag( 'div', array( 'class' => 'conpherence-header-pane', 'id' => 'conpherence-header-pane', - 'sigil' => 'conpherence-header', + 'sigil' => 'conpherence-header-pane', ), nonempty($this->header, '')), - phutil_tag( + javelin_tag( 'div', array( 'class' => 'conpherence-widget-pane', - 'id' => 'conpherence-widget-pane' + 'id' => 'conpherence-widget-pane', + 'sigil' => 'conpherence-widget-pane', ), ''), javelin_tag( @@ -136,10 +197,11 @@ final class ConpherenceLayoutView extends AphrontView { 'sigil' => 'conpherence-messages', ), nonempty($this->messages, '')), - phutil_tag( + javelin_tag( 'div', array( - 'id' => 'conpherence-form' + 'id' => 'conpherence-form', + 'sigil' => 'conpherence-form' ), nonempty($this->replyForm, '')) )), diff --git a/src/applications/conpherence/view/ConpherenceThreadListView.php b/src/applications/conpherence/view/ConpherenceThreadListView.php index 4f246fdd3f..4e3fe6bbba 100644 --- a/src/applications/conpherence/view/ConpherenceThreadListView.php +++ b/src/applications/conpherence/view/ConpherenceThreadListView.php @@ -32,7 +32,8 @@ final class ConpherenceThreadListView extends AphrontView { $menu->addMenuItem( id(new PhabricatorMenuItemView()) - ->setName(pht('New Conversation')) + ->addSigil('conpherence-new-conversation') + ->setName(pht('New Message')) ->setWorkflow(true) ->setKey('new') ->setHref($this->baseURI.'new/') diff --git a/webroot/rsrc/css/application/conpherence/header-pane.css b/webroot/rsrc/css/application/conpherence/header-pane.css index 80e4c6cfcb..065b5a999e 100644 --- a/webroot/rsrc/css/application/conpherence/header-pane.css +++ b/webroot/rsrc/css/application/conpherence/header-pane.css @@ -8,6 +8,10 @@ width: 100%; } +.device .conpherence-header-pane { + display: none; +} + .conpherence-header-pane .edit { float: right; margin: 16px 16px 0px 0px; diff --git a/webroot/rsrc/css/application/conpherence/menu.css b/webroot/rsrc/css/application/conpherence/menu.css index cb7ec313e3..2d209c90cf 100644 --- a/webroot/rsrc/css/application/conpherence/menu.css +++ b/webroot/rsrc/css/application/conpherence/menu.css @@ -10,6 +10,17 @@ top: 44px; } +.conpherence-layout .conpherence-no-threads { + height 80%; + width: 80%; + padding: 10%; + text-align: center; +} + +.conpherence-layout .conpherence-no-threads .text { + margin: 0px 0px 16px 0px; +} + .conpherence-menu-pane { width: 300px; position: absolute; @@ -28,39 +39,29 @@ position: relative; } -div.conpherence-layout .phabricator-nav-column-background { +.conpherence-layout .phabricator-nav-column-background { display: block; width: 300px; } -.device .conpherence-role-list .conpherence-menu-pane, -.device .conpherence-role-list .phabricator-nav-column-background { +.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-role-list .conpherence-content-pane { - display: none; -} - -.device .conpherence-role-thread .conpherence-menu-pane, -.device .conpherence-role-thread .phabricator-nav-column-background, -.device .conpherence-role-thread .conpherence-widget-pane { - display: none; -} - -.device .conpherence-role-thread .conpherence-content-pane { +.device .conpherence-content-pane { margin-left: 0; } -.device .conpherence-role-thread .conpherence-message-pane, -.device .conpherence-role-thread .conpherence-messages, -.device .conpherence-role-thread .phabricator-form-view { - left: 0; - right: 0; - width: 100%; -} - - .conpherence-menu .conpherence-menu-item-view { display: block; height: 55px; diff --git a/webroot/rsrc/css/application/conpherence/message-pane.css b/webroot/rsrc/css/application/conpherence/message-pane.css index 83a0acb946..9e1870ff2e 100644 --- a/webroot/rsrc/css/application/conpherence/message-pane.css +++ b/webroot/rsrc/css/application/conpherence/message-pane.css @@ -1,6 +1,7 @@ /** * @provides conpherence-message-pane-css */ + .conpherence-message-pane { position: fixed; left: 300px; @@ -11,6 +12,14 @@ height: 100%; } +.device .conpherence-message-pane { + left: 0; + right: 0; + top: 85px; + width: 100%; +} + + .conpherence-show-older-messages { display: block; background: #e0e3ec; @@ -31,6 +40,15 @@ -webkit-overflow-scrolling: touch; } +.device .conpherence-message-pane .conpherence-messages { + left: 0; + right: 0; + top: 85px; + bottom: 3em; + width: 100%; + box-shadow: none; +} + .conpherence-message-pane .phabricator-form-view { border-width: 0; background: none; @@ -42,6 +60,18 @@ right: 281px; } +.device .conpherence-message-pane .remarkup-assist-bar { + height: 0px; +} + +.device .conpherence-message-pane .phabricator-form-view { + left: 0; + right: 0; + background-color: #d8dce2; + height: 3em; + width: 100%; +} + .conpherence-layout .conpherence-message-pane .phabricator-form-view div.aphront-form-input { margin: 0; @@ -91,16 +121,38 @@ } .conpherence-message-pane .remarkup-assist-textarea { + height: 6em; + padding: 6px; border-width: 0 0 1px 0; border-color: #e7e7e7; + box-sizing: border-box; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; +} + +.device .conpherence-message-pane .remarkup-assist-textarea { + margin: 0.5em 0em 0em 2%; + padding: 6px 1%; + width: 98%; + height: 2em; + resize: none; } .conpherence-message-pane .remarkup-assist-textarea:focus { outline: none; } -.conpherence-message-pane .aphront-form-input textarea { - padding: 6px; - height: 6em; +.device .conpherence-message-pane .aphront-form-control-textarea { + float: left; + height: 2em; +} +.device-tablet .conpherence-message-pane .aphront-form-control-textarea { + width: 76%; +} +.device-phone .conpherence-message-pane .aphront-form-control-textarea { + width: 63%; } +.device .conpherence-message-pane .aphront-form-control-submit button { + margin: 0.6em 0 0 2%; +} diff --git a/webroot/rsrc/css/application/conpherence/widget-pane.css b/webroot/rsrc/css/application/conpherence/widget-pane.css index 510ed8bd5d..40532c92f7 100644 --- a/webroot/rsrc/css/application/conpherence/widget-pane.css +++ b/webroot/rsrc/css/application/conpherence/widget-pane.css @@ -11,12 +11,12 @@ border-width: 0 0 0 1px; border-color: #CCC; border-style: solid; - background: url('/rsrc/image/texture/dust_background.jpg'); + background: url('/rsrc/image/texture/dust_background.jpeg'); overflow-y: auto; -webkit-overflow-scrolling: touch; } -.device-phone .conpherence-widget-pane { +.device .conpherence-widget-pane { top: 44px; width: 100%; } @@ -28,7 +28,7 @@ .conpherence-widget-pane .aphront-form-inset { border: 0; - background: url('/rsrc/image/texture/dust_background.jpg'); + background: url('/rsrc/image/texture/dust_background.jpeg'); } .conpherence-widget-pane .widgets-header { @@ -39,13 +39,12 @@ .conpherence-widget-pane .widgets-header .widgets-header-icon-holder { height: 40px; width: 280px; - margin: 0 auto; + margin: 0px auto; } .device-desktop .conpherence-widget-pane .widgets-header .widgets-header-icon-holder { width: 175px; - margin: 0px auto 0px auto; } .conpherence-widget-pane .widgets-header .sprite-conpherence { @@ -67,9 +66,9 @@ } .device-desktop .conpherence-widget-pane .widgets-header -#widgets-conpherence-list-toggle, +#conpherence-menu-pane-toggle, .device-desktop .conpherence-widget-pane .widgets-header -#widgets-conpherence-conversation-toggle { +#conpherence-message-pane-toggle { display: none; } @@ -81,7 +80,7 @@ width: 100%; } -.device-phone .conpherence-widget-pane .widgets-body { +.device .conpherence-widget-pane .widgets-body { top: 85px; } @@ -134,18 +133,35 @@ border: 1px dashed #bfbfbf; } +.device .conpherence-widget-pane #widgets-files .file-title, +.device .conpherence-widget-pane #widgets-files .file-uploaded-by { + width: 82%; +} +.device .conpherence-widget-pane #widgets-files .divider { + width: 80%; + margin: 8px 0px 0px 10%; +} + /* calendar widget */ .conpherence-widget-pane #widgets-calendar .aphront-multi-column-view { margin: 2px 0px 0px 0px; width: 280px; } +.device .conpherence-widget-pane #widgets-calendar .aphront-multi-column-view { + width: 100%; +} .conpherence-widget-pane #widgets-calendar .aphront-multi-column-view .aphront-multi-column-column { background: white; border-right: 1px solid #bfbfbf; text-align: center; } +.device-phone .conpherence-widget-pane #widgets-calendar +.aphront-multi-column-fluid .aphront-multi-column-5-up +.aphront-multi-column-column-outer { + width: 20%; +} .conpherence-widget-pane #widgets-calendar .aphront-multi-column-view .aphront-multi-column-column-last { border-right: 0; @@ -204,6 +220,10 @@ padding: 5px 10px 5px 10px; width: 260px; } +.device .conpherence-widget-pane #widgets-calendar .day-header { + width: 98%; + padding: 5px 1% 5px 1%; +} .conpherence-widget-pane #widgets-calendar .day-header .day-name { float: left; clear: none; @@ -220,6 +240,10 @@ margin: 0px 0px 0px 10px; border: 1px dashed #bfbfbf; } +.conpherence-widget-pane #widgets-calendar .divider { + width: 96%; + margin: 0px 0px 0px 2%; +} .conpherence-widget-pane #widgets-calendar .spacer { float: left; clear: both; @@ -233,6 +257,9 @@ height: 60px; width: 280px; } +.device .conpherence-widget-pane #widgets-calendar .user-status { + width: 100%; +} .conpherence-widget-pane #widgets-calendar .user-status .icon { border-radius: 10px; @@ -277,6 +304,11 @@ width: 260px; } +.device .conpherence-widget-pane #widgets-calendar .user-status .description, +.device .conpherence-widget-pane #widgets-calendar .user-status .participant { + /* we keep these short so no need to change the width */ +} + .conpherence-widget-pane .widget-icon { display: block; height: 14px; @@ -292,7 +324,6 @@ float: left; width: 280px; } - .conpherence-widget-pane .people-widget-header .divider { float: left; clear: both; @@ -300,31 +331,43 @@ margin: 0px 0px 0px 10px; border: 1px dashed #bfbfbf; } +.device .conpherence-widget-pane .people-widget-header .divider { + width: 96%; + margin: 0px 0px 0px 2%; +} .conpherence-widget-pane .people-widget-header .add-people-widget { float: left; padding: 10px 0px 10px 0px; width: 280px; } +.device .conpherence-widget-pane .people-widget-header, +.device .conpherence-widget-pane .people-widget-header .add-people-widget { + width: 100%; +} + .conpherence-widget-pane .people-widget-header .add-people-widget .aphront-form-control-tokenizer { float: left; width: 180px; padding: 0px 0px 0px 10px } - -.conpherence-widget-pane .people-widget-header .add-people-widget -.jx-tokenizer-input { - padding: 1px 3px 1px 3px; +.device .conpherence-widget-pane .people-widget-header .add-people-widget +.aphront-form-control-tokenizer { + width: 70%; } - .conpherence-widget-pane .people-widget-header .add-people-widget .people-add-button { float: right; - margin: 0px 10px 0px 0px; + margin: 2px 10px 0px 0px; padding: 3px 16px 4px 16px; } - +@-moz-document url-prefix() { + .conpherence-widget-pane .people-widget-header .add-people-widget + .people-add-button { + margin: -1px 10px 0px 0px; + } +} .conpherence-widget-pane .person-entry { float: left; width: 270px; @@ -332,6 +375,11 @@ padding: 10px 0px 0px 8px; } +.device .conpherence-widget-pane .person-entry { + width: 98%; + padding: 10px 0px 0px 2%; +} + .conpherence-widget-pane .person-entry a { float: left; clear: none; diff --git a/webroot/rsrc/js/application/conpherence/behavior-menu.js b/webroot/rsrc/js/application/conpherence/behavior-menu.js index cdbdcf6470..2a62235d2a 100644 --- a/webroot/rsrc/js/application/conpherence/behavior-menu.js +++ b/webroot/rsrc/js/application/conpherence/behavior-menu.js @@ -18,18 +18,18 @@ JX.behavior('conpherence-menu', function(config) { visible: null }; - function selectthreadid(id) { + function selectthreadid(id, updatePageData) { var threads = JX.DOM.scry(document.body, 'a', 'conpherence-menu-click'); for (var ii = 0; ii < threads.length; ii++) { var data = JX.Stratcom.getData(threads[ii]); if (data.id == id) { - selectthread(threads[ii]); + selectthread(threads[ii], updatePageData); return; } } } - function selectthread(node) { + function selectthread(node, updatePageData) { if (thread.node) { JX.DOM.alterClass(thread.node, 'conpherence-selected', false); @@ -46,12 +46,32 @@ JX.behavior('conpherence-menu', function(config) { var data = JX.Stratcom.getData(node); thread.selected = data.id; - JX.History.replace(config.base_uri + data.id + '/'); - document.title = data.title; + if (updatePageData) { + updatepagedata(data); + } redrawthread(); } + function updatepagedata(data) { + var uri_suffix = thread.selected + '/'; + if (data.use_base_uri) { + uri_suffix = ''; + } + JX.History.replace(config.base_uri + uri_suffix); + if (data.title) { + document.title = data.title; + } + } + + JX.Stratcom.listen( + 'conpherence-update-page-data', + null, + function (e) { + updatepagedata(e.getData()); + } + ); + JX.Stratcom.listen( 'conpherence-selectthread', null, @@ -86,26 +106,59 @@ JX.behavior('conpherence-menu', function(config) { new JX.Workflow(widget_uri, {}) .setHandler(onwidgetresponse) .start(); + } else { + updatetoggledwidget(); } thread.visible = thread.selected; } function onwidgetresponse(response) { - var widgets = JX.$H(response.widgets); - var widgetsRoot = JX.$(config.widgets_pane); - JX.DOM.setContent(widgetsRoot, widgets); + var root = JX.DOM.find(document, 'div', 'conpherence-layout'); + var widgetsRoot = JX.DOM.find(root, 'div', 'conpherence-widget-pane'); + JX.DOM.setContent(widgetsRoot, JX.$H(response.widgets)); + updatetoggledwidget(); + } + + function updatetoggledwidget() { + 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-files' + } + ); + } } function onresponse(response) { var header = JX.$H(response.header); var messages = JX.$H(response.messages); var form = JX.$H(response.form); - var headerRoot = JX.$(config.header); - var messagesRoot = JX.$(config.messages); - var formRoot = JX.$(config.form_pane); - var widgetsRoot = JX.$(config.widgets_pane); - var menuRoot = JX.$(config.menu_pane); + var root = JX.DOM.find(document, 'div', 'conpherence-layout'); + var headerRoot = JX.DOM.find(root, 'div', 'conpherence-header-pane'); + var messagesRoot = JX.DOM.find(root, 'div', 'conpherence-messages'); + var formRoot = JX.DOM.find(root, 'div', 'conpherence-form'); JX.DOM.setContent(headerRoot, header); JX.DOM.setContent(messagesRoot, messages); JX.DOM.setContent(formRoot, form); @@ -114,10 +167,19 @@ JX.behavior('conpherence-menu', function(config) { } function didredrawthread() { - var messagesRoot = JX.$(config.messages); + var root = JX.DOM.find(document, 'div', 'conpherence-layout'); + var messagesRoot = JX.DOM.find(root, 'div', 'conpherence-messages'); messagesRoot.scrollTop = messagesRoot.scrollHeight; } + JX.Stratcom.listen( + null, + 'conpherence-redraw-thread', + function (e) { + didredrawthread(); + } + ); + JX.Stratcom.listen( 'click', 'conpherence-menu-click', @@ -132,7 +194,7 @@ JX.behavior('conpherence-menu', function(config) { } e.kill(); - selectthread(e.getNode('conpherence-menu-click')); + selectthread(e.getNode('conpherence-menu-click'), true); }); JX.Stratcom.listen('click', 'conpherence-edit-metadata', function (e) { @@ -140,7 +202,7 @@ JX.behavior('conpherence-menu', function(config) { var root = e.getNode('conpherence-layout'); var form = JX.DOM.find(root, 'form', 'conpherence-pontificate'); var data = e.getNodeData('conpherence-edit-metadata'); - var header = JX.DOM.find(root, 'div', 'conpherence-header'); + var header = JX.DOM.find(root, 'div', 'conpherence-header-pane'); var messages = JX.DOM.find(root, 'div', 'conpherence-messages'); new JX.Workflow.newFromForm(form, data) @@ -176,7 +238,8 @@ JX.behavior('conpherence-menu', function(config) { var last_offset = e.getNodeData('show-older-messages').offset; var conf_id = e.getNodeData('show-older-messages').ID; JX.DOM.remove(e.getNode('show-older-messages')); - var messages_root = JX.$(config.messages); + var root = JX.DOM.find(document, 'div', 'conpherence-layout'); + var messages_root = JX.DOM.find(root, 'div', 'conpherence-messages'); new JX.Request(config.base_uri + conf_id + '/', function(r) { var messages = JX.$H(r.messages); JX.DOM.prependContent(messages_root, @@ -195,10 +258,12 @@ JX.behavior('conpherence-menu', function(config) { if (new_device === old_device) { return; } + var update_toggled_widget = + new_device == 'desktop' || old_device == 'desktop'; old_device = new_device; - if (new_device != 'desktop') { - return; + if (thread.visible !== null && update_toggled_widget) { + updatetoggledwidget(); } if (!config.hasThreadList) { @@ -231,11 +296,15 @@ JX.behavior('conpherence-menu', function(config) { // first thread. if (!thread.selected) { if (config.selectedID) { - selectthreadid(config.selectedID); + selectthreadid(config.selectedID, true); } else { - var threads = JX.DOM.scry(document.body, 'a', 'conpherence-menu-click'); + var layout = JX.$(config.layoutID); + var threads = JX.DOM.scry(layout, 'a', 'conpherence-menu-click'); if (threads.length) { selectthread(threads[0]); + } else { + var nothreads = JX.DOM.find(layout, 'div', 'conpherence-no-threads'); + nothreads.style.display = 'block'; } } } diff --git a/webroot/rsrc/js/application/conpherence/behavior-pontificate.js b/webroot/rsrc/js/application/conpherence/behavior-pontificate.js index 654e503e70..e39251f403 100644 --- a/webroot/rsrc/js/application/conpherence/behavior-pontificate.js +++ b/webroot/rsrc/js/application/conpherence/behavior-pontificate.js @@ -45,15 +45,11 @@ JX.behavior('conpherence-pontificate', function(config) { var textarea = JX.DOM.find(form, 'textarea'); textarea.value = ''; - try { - JX.Stratcom.invoke( - 'conpherence-selectthread', - null, - { id : r.conpherence_phid + '-nav-item' } - ); - } catch (ex) { - // Ignore; this view may not have a menu. - } + JX.Stratcom.invoke( + 'conpherence-selectthread', + null, + { id : r.conpherence_phid + '-nav-item' } + ); })) .start(); }; diff --git a/webroot/rsrc/js/application/conpherence/behavior-widget-pane.js b/webroot/rsrc/js/application/conpherence/behavior-widget-pane.js index 07854c1e46..7b859311f3 100644 --- a/webroot/rsrc/js/application/conpherence/behavior-widget-pane.js +++ b/webroot/rsrc/js/application/conpherence/behavior-widget-pane.js @@ -5,40 +5,105 @@ * javelin-workflow * javelin-util * phabricator-notification + * javelin-behavior-device * @provides javelin-behavior-conpherence-widget-pane */ JX.behavior('conpherence-widget-pane', function(config) { + var toggle_widget = function (data) { + var device = JX.Device.getDevice(); + var is_desktop = device == 'desktop'; + if (config.widgetRegistery[data.widget] == config.devicesOnly && + is_desktop) { + return; + } + + var root = JX.DOM.find(document, 'div', 'conpherence-layout'); + var widgetPane = JX.DOM.find(root, 'div', 'conpherence-widget-pane'); + for (var widget in config.widgetRegistery) { + // device-only widgets are *always shown* on the desktop + if (config.widgetRegistery[widget] == config.devicesOnly) { + if (is_desktop) { + JX.$(widget).style.display = 'block'; + if (config.widgetExtraNodes[widget]) { + for (var i in config.widgetExtraNodes[widget]) { + var tag_data = config.widgetExtraNodes[widget][i]; + var node = JX.DOM.find(root, tag_data.tagname, tag_data.sigil); + node.style.display = tag_data.desktopstyle; + } + } + 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 (var i in config.widgetExtraNodes[widget]) { + var tag_data = config.widgetExtraNodes[widget][i]; + var node = JX.DOM.find(root, tag_data.tagname, tag_data.sigil); + node.style.display = tag_data.showstyle; + } + } + // some one off code for conpherence messages + 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 } + ); + } + } else { + JX.DOM.alterClass( + cur_toggle, + toggle_class, + false + ); + JX.$(widget).style.display = 'none'; + if (config.widgetExtraNodes[widget]) { + for (var i in config.widgetExtraNodes[widget]) { + var tag_data = config.widgetExtraNodes[widget][i]; + var node = JX.DOM.find(root, tag_data.tagname, tag_data.sigil); + node.style.display = tag_data.hidestyle; + } + } + } + } + }; + JX.Stratcom.listen( - 'click', + ['touchstart', 'mousedown'], 'conpherence-change-widget', function(e) { e.kill(); var data = e.getNodeData('conpherence-change-widget'); - // abort if this widget isn't exactly involved in this toggle business - if (!config.widgetRegistery[data.widget]) { - return; - } - for (var widget in config.widgetRegistery) { - if (!config.widgetRegistery[widget]) { - continue; - } else if (widget == data.widget) { - JX.$(widget).style.display = 'block'; - JX.DOM.alterClass(e.getTarget(), data.toggleClass, true); - } else { - JX.$(widget).style.display = 'none'; - var cur_toggle = JX.$(widget + '-toggle'); - JX.DOM.alterClass( - cur_toggle, - JX.Stratcom.getData(cur_toggle).toggleClass, - false - ); - } - } + toggle_widget(data); } ); + JX.Stratcom.listen( + 'conpherence-toggle-widget', + null, + function (e) { + toggle_widget(e.getData()); + } + ); + + /* people widget */ JX.Stratcom.listen( ['submit', 'didSyntheticSubmit'], @@ -79,7 +144,7 @@ JX.behavior('conpherence-widget-pane', function(config) { ); JX.Stratcom.listen( - ['click'], + ['touchstart', 'mousedown'], 'remove-person', function (e) { var peopleRoot = e.getNode('widgets-people');