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
This commit is contained in:
Bob Trahan
2013-04-15 16:27:41 -07:00
parent bcbdb44e2f
commit 42c1e39ae6
14 changed files with 437 additions and 155 deletions

View File

@@ -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',
),

View File

@@ -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(

View File

@@ -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)

View File

@@ -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) {

View File

@@ -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())

View File

@@ -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, ''))
)),

View File

@@ -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/')