new message view

appdotnet · Apr 11, 2013 · e999d55 · e999d55
1 parent 423117a
commit e999d55
Show file tree

Hide file tree

Showing 13 changed files with 101 additions and 96 deletions.
diff --git a/app.js b/app.js
@@ -112,6 +112,7 @@ if (connect_to_stream) {
 app.get('/', routes.index);
 app.get('/muted', routes.index);
 app.get('/channel/:channel_id', routes.index);
+app.get('/new-message', routes.index);
 app.get('/return', routes.oauth_return);
 app.get('/logout', routes.logout);
 app.get('/healthcheck', routes.healthcheck);

diff --git a/static/js/channel-state.js b/static/js/channel-state.js
@@ -161,7 +161,7 @@
         };
 
         var fetch_muted_channels = function () {
-            url = '/adn-proxy/stream/0/users/me/channels/muted';
+            var url = '/adn-proxy/stream/0/users/me/channels/muted';
 
             var params = {
                 count: 200,
@@ -183,7 +183,7 @@
 
                 return fetched_channels;
             });
-        }
+        };
 
         var update_marker = function (channel, message) {
             // don't push the marker backwards

diff --git a/static/js/channels.js b/static/js/channels.js
@@ -10,6 +10,9 @@
             controller: 'ChannelListCtrl',
             templateUrl: 'channel-list.html',
             selectedNav: 'muted'
+        }).when('/new-message', {
+            controller: 'NewMessageCtrl',
+            templateUrl: 'new-message.html'
         }).when('/channel/:channel_id', {
             template: '<channel-detail></channel-detail>'
         });
@@ -94,7 +97,7 @@
                     utils.title_bar_notification();
                 }
             }, true);
-        }
+        };
         if ($rootScope.selectedNav === 'muted') {
             channelState.fetch_muted_channels();
         } else {
@@ -130,6 +133,16 @@
                 channelState.get_channel(channel_id, false);
                 $location.path('/');
             });
-        }
+        };
+
+        $scope.getRoster = function () {
+            if ($scope.channel) {
+                return $scope.channel.get_users(true);
+            }
+        };
+    }]).controller('NewMessageCtrl', ['User', '$rootScope', '$scope', function (User, $rootScope, $scope) {
+        $scope.getRoster = function () {
+            return $scope.selectedUsers;
+        };
     }]);
 })();
diff --git a/static/js/feature_detection.js b/static/js/feature_detection.js
@@ -33,7 +33,7 @@
         return !!(window.File && window.FileList && window.FileReader);
     });
 
-    Modernizr.addTest('overflowscrolling', function(){
+    Modernizr.addTest('overflowscrolling', function () {
         return Modernizr.testAllProps("overflowScrolling");
     });
 

diff --git a/static/js/file_upload.js b/static/js/file_upload.js
@@ -1,3 +1,4 @@
+/*global Omega:true */
 (function () {
     (function addXhrProgressEvent($) {
         var originalXhr = $.ajaxSettings.xhr;

diff --git a/static/js/messages.js b/static/js/messages.js
@@ -1,4 +1,4 @@
-/*globals angular */
+/*globals angular,iScroll,Omega */
 
 (function () {
     angular.module('messages', ['users', 'utils']).directive('messageList',
@@ -163,7 +163,7 @@
                         });
                         scope.channel.messages = new_messages_list;
                     });
-                }
+                };
             }
         };
     }]).directive('fileUpload', [function () {
@@ -336,13 +336,6 @@
             replace: true,
             templateUrl: 'message-form.html'
         };
-    }).directive('autoCreateMessageForm', function () {
-        return {
-            restrict: 'E',
-            controller: 'MessageFormCtrl',
-            replace: true,
-            templateUrl: 'auto-create-message-form.html'
-        };
     }).directive('messageContainer', ['utils', '$http', function (utils, $http) {
         return {
             restrict: 'A',
@@ -355,7 +348,7 @@
                 _.each(scope.message.annotations, function (annotation) {
                     if (annotation.type === 'net.app.core.attachments') {
                         var file_list = annotation.value['net.app.core.file_list'];
-                        _.map(file_list, function(file) {
+                        _.map(file_list, function (file) {
                             var friendly_size = file.size + "B";
                             if (file.size >= 1e9) {
                                 friendly_size = (file.size / 1e9).toFixed(1) + "G";
@@ -385,7 +378,7 @@
                                         params: {
                                             'url': value.thumbnail_url
                                         }
-                                    }).then(function(response) {
+                                    }).then(function (response) {
                                         value.secure_thumbnail_url = response.data;
                                         oembed_images.push(value);
                                     });
@@ -456,11 +449,11 @@
                     text: self.text,
                     annotations: self.annotations || []
                 }
-            }).then(function doneCallback (response) {
+            }).then(function doneCallback(response) {
                 self.update(response.data.data);
 
                 return self;
-            }, function failCallback (response) {
+            }, function failCallback(response) {
                 // TODO: some kind of notification
                 console.log(response.data.meta.error_message);
             });
@@ -489,7 +482,7 @@
                 method: 'DELETE',
                 url: '/adn-proxy/stream/0/channels/' + self.channel_id + '/messages/' + self.id
             });
-        }
+        };
 
         return Message;
     }]).controller('MessageFormCtrl', ['$scope', '$element', '$routeParams', 'Message', '$location',
@@ -506,30 +499,26 @@
             // create annotations if there's a file attached
             message.annotations = $scope.attachment && $scope.attachment.annotations || [];
 
-            // preemptively empty the box
-            $scope.$emit('submit_message');
-            $scope.message = new Message();
-            $element.find('input').focus();
 
-            if ($scope.channel) {
-                message.channel_id = $scope.channel.id;
-                message.create();
-            }
-        };
+            var in_existing_channel = !!$routeParams.channel_id;
+            if (in_existing_channel) {
+                // preemptively empty the box
+                $scope.$emit('submit_message');
+                $scope.message = new Message();
+                $element.find('input').focus();
 
-        $scope.createUser = function () {
-            if ($scope.upload_in_progress) {
-                return;
-            }
-            var message = $scope.message;
-            // create annotations if there's a file attached
-            message.annotations = $scope.attachment && $scope.attachment.annotations || [];
-            message.destinations = _.pluck($scope.selectedUsers, 'id');
-            message.auto_create().then(function (channel_id) {
-                if (channel_id) {
-                    $location.path('/channel/' + channel_id);
+                if ($scope.channel) {
+                    message.channel_id = $scope.channel.id;
+                    message.create();
                 }
-            });
+            } else {
+                message.destinations = _.pluck($scope.selectedUsers, 'id');
+                message.auto_create().then(function (channel_id) {
+                    if (channel_id) {
+                        $location.path('/channel/' + channel_id);
+                    }
+                });
+            }
         };
 
         $scope.show_file_upload_button = function () {

diff --git a/static/js/utils.js b/static/js/utils.js
@@ -1,4 +1,4 @@
-/*globals angular */
+/*globals angular,moment */
 
 (function () {
     angular.module('utils', []).factory('utils', function () {
@@ -105,14 +105,14 @@
             } else {
                 return m.fromNow(true);
             }
-        }
-    }).directive('ngBackgroundImage', function(){
-        return function(scope, element, attrs){
-            attrs.$observe('ngBackgroundImage', function(value) {
+        };
+    }).directive('ngBackgroundImage', function () {
+        return function (scope, element, attrs) {
+            attrs.$observe('ngBackgroundImage', function (value) {
                 element.css({
-                    'background-image': 'url(' + value +')',
+                    'background-image': 'url(' + value + ')'
                 });
             });
         };
-    })
+    });
 })();
diff --git a/static/scss/_ohe.scss b/static/scss/_ohe.scss
@@ -65,6 +65,25 @@ html.omega {
     background-size: $avatar_size $avatar_size;
 }
 
+.username-select {
+    position: relative;
+    label {
+        position: absolute;
+        z-index: 1;
+        left: 15px;
+        font-size: 15px;
+        margin-top: 8px;
+    }
+    .select2-choices {
+        padding-top: 5px;
+        padding-bottom: 5px;
+        padding-left: 40px;
+    }
+    .select2-container-multi .select2-choices .select2-search-field input {
+        margin-top: 2px;
+    }
+}
+
 .message-container {
     @include media-block(53px, 15px, 15px);
     padding: 15px 15px 5px 15px;
@@ -259,7 +278,7 @@ html.omega {
 .channel-list {
     max-width: 950px;
     ul {
-        padding-right: 10px;
+        padding-right: 6px;
     }
 
     li {
@@ -344,18 +363,6 @@ html.omega {
     top: 0;
     left: 0;
 }
-.auto-create {
-    max-width: 600px;
-    .file-upload {
-        margin-top: 15px;
-    }
-}
-
-form[name="messageForm"] {
-    input {
-        width: 95%;
-    }
-}
 
 .form-horizontal textarea {
     height: auto;
@@ -367,7 +374,7 @@ form[name="messageForm"] {
     }
 }
 
-.message-form, .auto-create-message-form {
+.message-form {
     .send-button {
         width: 70px;
         font-size: 14px;
@@ -403,7 +410,7 @@ form[name="messageForm"] {
     }
 }
 
-.selected-folder {
+.channel-list-menu {
     font-family: $sansFontFamily;
     li {
         padding: 0 5px;
@@ -416,5 +423,9 @@ form[name="messageForm"] {
             color: $grayDark;
             font-weight: bold;
         }
+        &.btn {
+            text-transform: none;
+            color: $white;
+        }
     }
 }
diff --git a/static/templates/auto-create-message-form.html b/static/templates/auto-create-message-form.html
diff --git a/static/templates/channel-list.html b/static/templates/channel-list.html
@@ -1,8 +1,9 @@
 <div class="container">
-  <div class='selected-folder'>
+  <div class='channel-list-menu'>
     <ul class='unstyled ul-horizontal'>
         <li class='inbox'><a ng-class="{'active':selectedNav == 'inbox'}" href='/'>Inbox</a></li>
         <li class='muted'><a ng-class="{'active':selectedNav == 'muted'}" href='/muted'>Muted</a></li>
+        <li class='new-message pull-right'><a class='btn btn-mini btn-primary' href='/new-message'><i class='icon-plus'></i> New Message</a></li>
     </ul>
   </div>
   <div class="channel-list">
@@ -41,6 +42,5 @@
           </ul>
       </div>
     </div>
-    <auto-create-message-form></auto-create-message-form>
   </div>
 </div>
diff --git a/static/templates/message-form.html b/static/templates/message-form.html
@@ -2,7 +2,7 @@
   <div class="span12">
     <form name="messageForm" class="form-inline message-form">
       <div file-upload></div>
-      <input type="text" class='mg-b-10'name="text" autocomplete="off" ng-model="message.text">
+      <input type="text" class='mg-b-10 input-block-level'name="text" autocomplete="off" ng-model="message.text">
       <span class='yui3-u-1 actions'>
         <span ng-class="{'text-error': message.text.length > 256}">{{ 256 - message.text.length}}</span>
         <span class='pull-right'>

diff --git a/static/templates/new-message.html b/static/templates/new-message.html
@@ -0,0 +1,20 @@
+<div class='container'>
+  <div class='channel-detail-wrapper yui3-g'>
+    <div class='yui3-u-2-3 m-yui3-u-1'>
+      <div class="channel-detail">
+          <div class="yui3-u-1 mg-b-20">
+            <h3 class='mg-b-10'>New Message</h3>
+            <div class="username-select" ng-controller="UserSearchCtrl">
+              <label class="control-label">To:</label>
+              <input class='input-block-level' type="hidden" ui-select2="usernameSelect" ng-model="selectedUsers" ng-multiple>
+            </div>
+          </div>
+        <message-list></message-list>
+        <message-form ng-hide='channel.you_muted'></message-form>
+      </div>
+    </div>
+    <div class='yui3-u-1-3 m-yui3-u-1'>
+      <roster></roster>
+    </div>
+  </div>
+</div>
diff --git a/static/templates/roster.html b/static/templates/roster.html
@@ -1,7 +1,7 @@
 <div class='roster' resize-height>
     <h5>People</h5>
     <div>
-      <div class='roster-member' ng-repeat="user in channel.get_users(true) | orderBy:['username']">
+      <div class='roster-member' ng-repeat="user in getRoster() | orderBy:['username']">
           <img width=25 height=25 alt='roster icon for {{ user.username }}' class='hidden-phone' ng-src="{{ user.avatar_image.url }}?w=25">
           <span class='username'><a href='{{alpha_url_base}}/{{user.username}}'><strong>@{{user.username}}</strong></a> <small class='ellipsize'>({{user.name}})</small></span>
       </div>