From aaf623fa534d2486eeadb79de0905c374e019098 Mon Sep 17 00:00:00 2001
From: Emmanuel ROHEE <erohee@amdocs.com>
Date: Fri, 22 Aug 2014 17:11:39 +0200
Subject: Move profile parts of the rooms page and the config content into a
 new page: settings

---
 webclient/index.html | 12 ++----------
 1 file changed, 2 insertions(+), 10 deletions(-)

(limited to 'webclient/index.html')

diff --git a/webclient/index.html b/webclient/index.html
index 27d9208193..95f682580e 100644
--- a/webclient/index.html
+++ b/webclient/index.html
@@ -19,6 +19,7 @@
     <script src="room/room-controller.js"></script>
     <script src="room/room-directive.js"></script>
     <script src="rooms/rooms-controller.js"></script>
+    <script src="settings/settings-controller.js"></script>
     <script src="user/user-controller.js"></script>
     <script src="components/matrix/matrix-service.js"></script>
     <script src="components/matrix/event-stream-service.js"></script>
@@ -33,22 +34,13 @@
     <header id="header">
         <!-- Do not show buttons on the login page -->
         <div id="header-buttons" ng-hide="'/login' == location ">
-            <button ng-click="showConfig()">Config</button>
+            <button ng-click='go("settings")'>Settings</button>
             <button ng-click="logout()">Log out</button>
         </div>
 
         <h1>[matrix]</h1>
     </header>
 
-    <div id="config" ng-hide="!config">
-        <div>Home server: {{ config.homeserver }} </div>
-        <div>User ID: {{ config.user_id }} </div>
-        <div>Access token: {{ config.access_token }} </div>
-        <div><button ng-click="requestNotifications()">Request notifications</button></div>
-        <div><button ng-click="closeConfig()">Close</button></div>
-    </div>
-
-
     <div ng-view></div>
 
 </body>
-- 
cgit 1.4.1


From de0706493affc7d8aa6d294fbd531fa0b75ef49c Mon Sep 17 00:00:00 2001
From: Emmanuel ROHEE <erohee@amdocs.com>
Date: Fri, 22 Aug 2014 18:08:03 +0200
Subject: Use /home everywhere

---
 webclient/app.js                    | 10 +++++-----
 webclient/home/home-controller.js   |  4 ++--
 webclient/home/home.html            |  2 +-
 webclient/index.html                |  2 +-
 webclient/login/login-controller.js |  4 ++--
 webclient/room/room-controller.js   |  2 +-
 6 files changed, 12 insertions(+), 12 deletions(-)

(limited to 'webclient/index.html')

diff --git a/webclient/app.js b/webclient/app.js
index f666a63bf8..e5d8513944 100644
--- a/webclient/app.js
+++ b/webclient/app.js
@@ -19,7 +19,7 @@ var matrixWebClient = angular.module('matrixWebClient', [
     'MatrixWebClientController',
     'LoginController',
     'RoomController',
-    'RoomsController',
+    'HomeController',
     'SettingsController',
     'UserController',
     'matrixService',
@@ -45,9 +45,9 @@ matrixWebClient.config(['$routeProvider', '$provide', '$httpProvider',
                 templateUrl: 'room/room.html',
                 controller: 'RoomController'
             }).
-            when('/rooms', {
-                templateUrl: 'rooms/rooms.html',
-                controller: 'RoomsController'
+            when('/home', {
+                templateUrl: 'home/home.html',
+                controller: 'HomeController'
             }).
             when('/settings', {
                 templateUrl: 'settings/settings.html',
@@ -58,7 +58,7 @@ matrixWebClient.config(['$routeProvider', '$provide', '$httpProvider',
                 controller: 'UserController'
             }).
             otherwise({
-                redirectTo: '/rooms'
+                redirectTo: '/home'
             });
             
         $provide.factory('AccessTokenInterceptor', ['$q', '$rootScope', 
diff --git a/webclient/home/home-controller.js b/webclient/home/home-controller.js
index d891558be5..a3d7308312 100644
--- a/webclient/home/home-controller.js
+++ b/webclient/home/home-controller.js
@@ -16,8 +16,8 @@ limitations under the License.
 
 'use strict';
 
-angular.module('RoomsController', ['matrixService', 'mFileInput', 'mFileUpload', 'eventHandlerService'])
-.controller('RoomsController', ['$scope', '$location', 'matrixService', 'mFileUpload', 'eventHandlerService', 'eventStreamService', 
+angular.module('HomeController', ['matrixService', 'mFileInput', 'mFileUpload', 'eventHandlerService'])
+.controller('HomeController', ['$scope', '$location', 'matrixService', 'mFileUpload', 'eventHandlerService', 'eventStreamService', 
                                function($scope, $location, matrixService, mFileUpload, eventHandlerService, eventStreamService) {
 
     $scope.config = matrixService.config();
diff --git a/webclient/home/home.html b/webclient/home/home.html
index 2e25c0f084..4818d414b6 100644
--- a/webclient/home/home.html
+++ b/webclient/home/home.html
@@ -1,4 +1,4 @@
-<div ng-controller="RoomsController" class="rooms">
+<div ng-controller="HomeController">
 
     <div id="page">
     <div id="wrapper">
diff --git a/webclient/index.html b/webclient/index.html
index 95f682580e..ed1d9bb031 100644
--- a/webclient/index.html
+++ b/webclient/index.html
@@ -15,10 +15,10 @@
     <script src="app-controller.js"></script>
     <script src="app-directive.js"></script>
     <script src="app-filter.js"></script>
+    <script src="home/home-controller.js"></script>
     <script src="login/login-controller.js"></script>
     <script src="room/room-controller.js"></script>
     <script src="room/room-directive.js"></script>
-    <script src="rooms/rooms-controller.js"></script>
     <script src="settings/settings-controller.js"></script>
     <script src="user/user-controller.js"></script>
     <script src="components/matrix/matrix-service.js"></script>
diff --git a/webclient/login/login-controller.js b/webclient/login/login-controller.js
index 2f1f224a94..cd13dcea82 100644
--- a/webclient/login/login-controller.js
+++ b/webclient/login/login-controller.js
@@ -53,7 +53,7 @@ angular.module('LoginController', ['matrixService'])
                 matrixService.saveConfig();
                 eventStreamService.resume();
                  // Go to the user's rooms list page
-                $location.url("rooms");
+                $location.url("home");
             },
             function(error) {
                 if (error.data) {
@@ -84,7 +84,7 @@ angular.module('LoginController', ['matrixService'])
                     });
                     matrixService.saveConfig();
                     eventStreamService.resume();
-                    $location.url("rooms");
+                    $location.url("home");
                 }
                 else {
                     $scope.feedback = "Failed to login: " + JSON.stringify(response.data);
diff --git a/webclient/room/room-controller.js b/webclient/room/room-controller.js
index 26d1836fc2..65a33dd60b 100644
--- a/webclient/room/room-controller.js
+++ b/webclient/room/room-controller.js
@@ -364,7 +364,7 @@ angular.module('RoomController', ['ngSanitize', 'mUtilities'])
         matrixService.leave($scope.room_id).then(
             function(response) {
                 console.log("Left room ");
-                $location.url("rooms");
+                $location.url("home");
             },
             function(error) {
                 $scope.feedback = "Failed to leave room: " + error.data.error;
-- 
cgit 1.4.1


From d2bb28d2df6ffe58db1a56e7aec85c34d9d1425f Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Sat, 23 Aug 2014 20:45:00 +0100
Subject: very quick and dirty responsive design for iPhones

---
 webclient/app.css          | 98 ++++++++++++++++++++++++++++++++++++++++------
 webclient/index.html       |  6 +--
 webclient/login/login.html |  4 +-
 webclient/room/room.html   | 30 +++++++-------
 webclient/rooms/rooms.html |  1 +
 webclient/user/user.html   |  1 +
 6 files changed, 110 insertions(+), 30 deletions(-)

(limited to 'webclient/index.html')

diff --git a/webclient/app.css b/webclient/app.css
index 207f35f5f3..6f320414b1 100644
--- a/webclient/app.css
+++ b/webclient/app.css
@@ -1,3 +1,71 @@
+/*** Mobile voodoo ***/
+@media all and (max-device-width: 640px) {
+            
+    #messageTableWrapper {
+        margin-right: 0px ! important;
+    }
+    
+    .leftBlock {
+        width: 8em ! important;
+    }
+    
+    #header,
+    #messageTable,
+    #wrapper,
+    #roomName,
+    #controls {
+        max-width: 640px ! important;
+    }    
+    
+    #userIdCell,
+    #usersTableWrapper,
+    #extraControls {
+        display: none;
+    }
+    
+    #buttonsCell {
+        width: 60px ! important;
+        padding-left: 20px ! important;
+    }
+    
+    #roomLogo {
+        display: none;
+    }
+    
+    #roomName {
+        text-align: left ! important;
+        top: -35px ! important;
+    }
+    
+    .bubble {
+        font-size: 12px ! important;
+        height: 20px ! important;
+    }
+    
+    #page {
+        top: 35px ! important;
+        bottom: 70px ! important;
+    }
+    
+    #header,
+    #page {
+        margin: 5px ! important;
+    }
+    
+    #header {
+        padding: 5px ! important;
+    }
+        
+    /* stop zoom on select */
+    select:focus,
+    textarea,
+    input
+    {
+        font-size: 16px ! important;
+    }
+    
+}
+
 body {
     font-family: "Myriad Pro", "Myriad", Helvetica, Arial, sans-serif;
     font-size: 12pt;
@@ -17,7 +85,6 @@ h1 {
     left: 0px;
     right: 0px;
     margin: 20px;
-    margin: 20px;
 }
 
 #wrapper {
@@ -32,8 +99,7 @@ h1 {
     text-align: right;
     top: -40px;
     position: absolute;
-    font-size: 16pt;
-    margin-bottom: 10px;
+    font-size: 16px;
 }
 
 #controlPanel {
@@ -50,6 +116,10 @@ h1 {
     margin: auto;
 }
 
+#buttonsCell {
+    width: 150px;
+}
+
 #inputBarTable {
     width: 100%;
 }
@@ -111,13 +181,13 @@ h1 {
     color: #fff;
     margin: 2px;
     bottom: 0px;
-    font-size: 8pt;
+    font-size: 12px;
     word-break: break-all;
 }
 
 .userPresence {
     text-align: center;
-    font-size: 8pt;
+    font-size: 12px;
     color: #fff;
     background-color: #aaa;
     border-bottom: 1px #ddd solid;
@@ -159,7 +229,7 @@ h1 {
     background-color: #fff;
     color: #888;
     font-weight: medium;
-    font-size: 8pt;
+    font-size: 12px;
     text-align: right;
     border-top: 1px #ddd solid;
 }
@@ -277,7 +347,7 @@ h1 {
 .profile-avatar {
     width: 160px;
     height: 160px;
-    display:table-cell;
+    display: table-cell;
     vertical-align: middle;
     text-align: center;
 }
@@ -293,13 +363,19 @@ h1 {
 }
 
 #user-displayname {
-    font-size: 16pt;
+    font-size: 24px;
 }
 /******************************/
 
-#header {
-    padding-left: 20px;
-    padding-right: 20px;
+#header
+{
+    padding: 20px;
+    max-width: 1280px;
+    margin: auto;
+}
+
+#logo,
+#roomLogo {
     max-width: 1280px;
     margin: auto;
 }
diff --git a/webclient/index.html b/webclient/index.html
index 27d9208193..5b8e27fa6d 100644
--- a/webclient/index.html
+++ b/webclient/index.html
@@ -2,10 +2,12 @@
 <html xmlns:ng="http://angularjs.org" ng-app="matrixWebClient" ng-controller="MatrixWebClientController">
 <head>
     <title>[matrix]</title>
-    
+        
     <link rel="stylesheet" href="app.css">
     <link rel="icon" href="favicon.ico">
    
+    <meta name="viewport" content="width=device-width">
+   
     <script type='text/javascript' src='js/jquery-1.8.3.min.js'></script> 
     <script src="js/angular.min.js"></script>
     <script src="js/angular-route.min.js"></script>
@@ -36,8 +38,6 @@
             <button ng-click="showConfig()">Config</button>
             <button ng-click="logout()">Log out</button>
         </div>
-
-        <h1>[matrix]</h1>
     </header>
 
     <div id="config" ng-hide="!config">
diff --git a/webclient/login/login.html b/webclient/login/login.html
index b1488b37f0..4b2ea60928 100644
--- a/webclient/login/login.html
+++ b/webclient/login/login.html
@@ -1,4 +1,6 @@
-<div ng-controller="LoginController" class="login">
+<div ng-controller="LoginController" class="login">    
+    <h1 id="logo">[matrix]</h1>
+
     <div id="page">
     <div id="wrapper">
 
diff --git a/webclient/room/room.html b/webclient/room/room.html
index 95da067714..06ca63d2ea 100644
--- a/webclient/room/room.html
+++ b/webclient/room/room.html
@@ -1,4 +1,5 @@
 <div ng-controller="RoomController" data-ng-init="onInit()" class="room">
+    <h1 id="roomLogo">[matrix]</h1>
 
     <div id="page">
     <div id="wrapper">
@@ -32,7 +33,7 @@
                 ng-class="(events.rooms[room_id].messages[$index + 1].user_id !== msg.user_id ? 'differentUser' : '') + (msg.user_id === state.user_id ? ' mine' : '')" scroll-item>
                 <td class="leftBlock">
                     <div class="sender" ng-hide="events.rooms[room_id].messages[$index - 1].user_id === msg.user_id">{{ members[msg.user_id].displayname || msg.user_id }}</div>
-                    <div class="timestamp">{{ (msg.content.hsob_ts || msg.ts) | date:'MMM d HH:mm:ss' }}</div>
+                    <div class="timestamp">{{ (msg.content.hsob_ts || msg.ts) | date:'MMM d HH:mm' }}</div>
                 </td>
                 <td class="avatar">
                     <img class="avatarImage" ng-src="{{ members[msg.user_id].avatar_url || 'img/default-profile.jpg' }}" width="32" height="32"
@@ -73,29 +74,28 @@
         <div id="controls">
             <table id="inputBarTable">
                 <tr>
-                    <td width="1">
+                    <td id="userIdCell" width="1px">
                         {{ state.user_id }} 
                     </td>
-                    <td width="*" style="min-width: 100px">
+                    <td width="*">
                         <input id="mainInput" ng-model="textInput" ng-enter="send()" ng-focus="true" autocomplete="off" tab-complete/>
                     </td>
-                    <td width="150px">
+                    <td id="buttonsCell">
                         <button ng-click="send()">Send</button>
-                        <button m-file-input="imageFileToSend">Send Image</button>
-                    </td>
-                    <td width="1">
-                        
+                        <button m-file-input="imageFileToSend">Image</button>
                     </td>
                 </tr>
             </table>
 
-            <span>
-               Invite a user: 
-                    <input ng-model="userIDToInvite" size="32" type="text" placeholder="User ID (ex:@user:homeserver)"/>     
-                    <button ng-click="inviteUser(userIDToInvite)">Invite</button>
-            </span>
-            <button ng-click="leaveRoom()">Leave</button>
-            <button ng-click="loadMoreHistory()" ng-disabled="!state.can_paginate">Load more history</button>
+            <div id="extraControls">
+                <span>
+                   Invite a user: 
+                        <input ng-model="userIDToInvite" size="32" type="text" placeholder="User ID (ex:@user:homeserver)"/>     
+                        <button ng-click="inviteUser(userIDToInvite)">Invite</button>
+                </span>
+                <button ng-click="leaveRoom()">Leave</button>
+            </div>
+        
             {{ feedback }}
             <div ng-hide="!state.stream_failure">
                 {{ state.stream_failure.data.error || "Connection failure" }}
diff --git a/webclient/rooms/rooms.html b/webclient/rooms/rooms.html
index 5e422bf83b..2a12cbc8ae 100644
--- a/webclient/rooms/rooms.html
+++ b/webclient/rooms/rooms.html
@@ -1,4 +1,5 @@
 <div ng-controller="RoomsController" class="rooms">
+    <h1 id="logo">[matrix]</h1>
 
     <div id="page">
     <div id="wrapper">
diff --git a/webclient/user/user.html b/webclient/user/user.html
index 47db09d1ee..4c91c8a48a 100644
--- a/webclient/user/user.html
+++ b/webclient/user/user.html
@@ -1,4 +1,5 @@
 <div ng-controller="UserController" class="user">
+    <h1 id="logo">[matrix]</h1>
 
     <div id="page">
     <div id="wrapper">
-- 
cgit 1.4.1


From c21fcb3373b10e85fd2533570479cac6caf5da4e Mon Sep 17 00:00:00 2001
From: Emmanuel ROHEE <erohee@amdocs.com>
Date: Tue, 26 Aug 2014 16:25:27 +0200
Subject: Determine and send user presence state

---
 webclient/app-controller.js                     |  14 +--
 webclient/components/matrix/matrix-service.js   |  17 ++++
 webclient/components/matrix/presence-service.js | 113 ++++++++++++++++++++++++
 webclient/index.html                            |   1 +
 4 files changed, 140 insertions(+), 5 deletions(-)
 create mode 100644 webclient/components/matrix/presence-service.js

(limited to 'webclient/index.html')

diff --git a/webclient/app-controller.js b/webclient/app-controller.js
index 84cb94dc74..f210119e21 100644
--- a/webclient/app-controller.js
+++ b/webclient/app-controller.js
@@ -20,9 +20,9 @@ limitations under the License.
 
 'use strict';
 
-angular.module('MatrixWebClientController', ['matrixService'])
-.controller('MatrixWebClientController', ['$scope', '$location', '$rootScope', 'matrixService', 'eventStreamService',
-                               function($scope, $location, $rootScope, matrixService, eventStreamService) {
+angular.module('MatrixWebClientController', ['matrixService', 'mPresence', 'eventStreamService'])
+.controller('MatrixWebClientController', ['$scope', '$location', '$rootScope', 'matrixService', 'mPresence', 'eventStreamService',
+                               function($scope, $location, $rootScope, matrixService, mPresence, eventStreamService) {
          
     // Check current URL to avoid to display the logout button on the login page
     $scope.location = $location.path();
@@ -34,6 +34,7 @@ angular.module('MatrixWebClientController', ['matrixService'])
 
     if (matrixService.isUserLoggedIn()) {
         // eventStreamService.resume();
+        mPresence.start();
     }
     
     $scope.go = function(url) {
@@ -42,9 +43,13 @@ angular.module('MatrixWebClientController', ['matrixService'])
     
     // Logs the user out 
     $scope.logout = function() {
+        
         // kill the event stream
         eventStreamService.stop();
-    
+
+        // Do not update presence anymore
+        mPresence.stop();
+
         // Clean permanent data
         matrixService.setConfig({});
         matrixService.saveConfig();
@@ -67,7 +72,6 @@ angular.module('MatrixWebClientController', ['matrixService'])
         }
     };
     
-    
 }]);
 
    
diff --git a/webclient/components/matrix/matrix-service.js b/webclient/components/matrix/matrix-service.js
index d376724e40..237dd6d8a0 100644
--- a/webclient/components/matrix/matrix-service.js
+++ b/webclient/components/matrix/matrix-service.js
@@ -358,6 +358,23 @@ angular.module('matrixService', [])
                 return false;
             }
         },
+        
+        // Enum of presence state
+        presence: {
+            offline: "offline",
+            unavailable: "unavailable",
+            online: "online",
+            free_for_chat: "free_for_chat"
+        },
+        
+        // Set the logged in user presence state
+        setUserPresence: function(presence) {
+            var path = "/presence/$user_id/status";
+            path = path.replace("$user_id", config.user_id);
+            return doRequest("PUT", path, undefined, {
+                state: presence
+            });
+        },
 
         /****** Permanent storage of user information ******/
         
diff --git a/webclient/components/matrix/presence-service.js b/webclient/components/matrix/presence-service.js
new file mode 100644
index 0000000000..6a1edcaf43
--- /dev/null
+++ b/webclient/components/matrix/presence-service.js
@@ -0,0 +1,113 @@
+/*
+ Copyright 2014 matrix.org
+ 
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ 
+ http://www.apache.org/licenses/LICENSE-2.0
+ 
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+ */
+
+'use strict';
+
+/*
+ * This service tracks user activity on the page to determine his presence state.
+ * Any state change will be sent to the Home Server.
+ */
+angular.module('mPresence', [])
+.service('mPresence', ['$timeout', 'matrixService', function ($timeout, matrixService) {
+
+    // Time in ms after that a user is considered as offline/away
+    var OFFLINE_TIME = 5 * 60000; // 5 mins
+    
+    // The current presence state
+    var state = undefined;
+
+    var self =this;
+    var timer;
+    
+    /**
+     * Start listening the user activity to evaluate his presence state.
+     * Any state change will be sent to the Home Server.
+     */
+    this.start = function() {
+        if (undefined === state) {
+            // The user is online if he moves the mouser or press a key
+            document.onmousemove = resetTimer;
+            document.onkeypress = resetTimer;
+            
+            resetTimer();
+        }
+    };
+    
+    /**
+     * Stop tracking user activity
+     */
+    this.stop = function() {
+        if (timer) {
+            $timeout.cancel(timer);
+            timer = undefined;
+        }
+        state = undefined;
+    };
+    
+    /**
+     * Get the current presence state.
+     * @returns {matrixService.presence} the presence state
+     */
+    this.getState = function() {
+        return state;
+    };
+    
+    /**
+     * Set the presence state.
+     * If the state has changed, the Home Server will be notified.
+     * @param {matrixService.presence} newState the new presence state
+     */
+    this.setState = function(newState) {
+        if (newState !== state) {
+            console.log("mPresence - New state: " + newState);
+
+            state = newState;
+
+            // Inform the HS on the new user state
+            matrixService.setUserPresence(state).then(
+                function() {
+
+                },
+                function(error) {
+                    console.log("mPresence - Failed to send new presence state: " + JSON.stringify(error));
+                });
+        }
+    };
+    
+    /**
+     * Callback called when the user made no action on the page for OFFLINE_TIME ms.
+     * @private
+     */
+    function onOfflineTimerFire() {
+        self.setState(matrixService.presence.offline);
+    }
+
+    /**
+     * Callback called when the user made an action on the page
+     * @private
+     */
+    function resetTimer() {
+        // User is still here
+        self.setState(matrixService.presence.online);
+        
+        // Re-arm the timer
+        $timeout.cancel(timer);
+        timer = $timeout(onOfflineTimerFire, OFFLINE_TIME);
+    }    
+
+}]);
+
+
diff --git a/webclient/index.html b/webclient/index.html
index 938d70c86d..6031036e9a 100644
--- a/webclient/index.html
+++ b/webclient/index.html
@@ -26,6 +26,7 @@
     <script src="components/matrix/matrix-service.js"></script>
     <script src="components/matrix/event-stream-service.js"></script>
     <script src="components/matrix/event-handler-service.js"></script>
+    <script src="components/matrix/presence-service.js"></script>
     <script src="components/fileInput/file-input-directive.js"></script>
     <script src="components/fileUpload/file-upload-service.js"></script>
     <script src="components/utilities/utilities-service.js"></script>
-- 
cgit 1.4.1