nasty big monolithic commit of a whole bunch of UI/UX improvements:

- add a simple CSS template across the app for navigation & cosmetics
 - split login into login & register, and totally reskin it
 - restructure room CSS to play nicely with it
 - implement basis 1:1 chat from user pages
 - disable autofocus on iOS to improve UX
This commit is contained in:
Matthew Hodgson 2014-08-31 00:40:42 +01:00
parent b040bd6157
commit 1bc036a12d
15 changed files with 363 additions and 317 deletions

View file

@ -58,14 +58,14 @@ angular.module('HomeController', ['matrixService', 'eventHandlerService', 'Recen
);
};
$scope.createNewRoom = function(room_id, isPrivate) {
$scope.createNewRoom = function(room_alias, isPrivate) {
var visibility = "public";
if (isPrivate) {
visibility = "private";
}
matrixService.create(room_id, visibility).then(
matrixService.create(room_alias, visibility).then(
function(response) {
// This room has been created. Refresh the rooms list
console.log("Created room " + response.data.room_alias + " with id: "+

View file

@ -1,29 +1,24 @@
<div ng-controller="HomeController" data-ng-init="onInit()">
<div id="page">
<div id="wrapper">
<div>
<form>
<table>
<tr>
<td>
<div class="profile-avatar">
<img ng-src="{{ (null !== profile.avatarUrl) ? profile.avatarUrl : 'img/default-profile.jpg' }}"/>
</div>
</td>
<td>
<div id="user-ids">
<div id="user-displayname">{{ profile.displayName }}</div>
<div>{{ config.user_id }}</div>
</div>
</td>
</tr>
</table>
</form>
<div id="genericHeading">
<img src="img/logo-small.png" width="100" height="43" alt="[matrix]"/>
</div>
<h3>Recents</h3>
<h1>Welcome to homeserver {{ config.homeserver }}</h1>
<div>
<div class="profile-avatar">
<img ng-src="{{ (null !== profile.avatarUrl) ? profile.avatarUrl : 'img/default-profile.png' }}"/>
</div>
<div id="user-ids">
<div id="user-displayname">{{ profile.displayName }}</div>
<div>{{ config.user_id }}</div>
</div>
</div>
<h3>Recent conversations</h3>
<div ng-include="'recents/recents.html'"></div>
<br/>
@ -38,9 +33,9 @@
<div>
<form>
<input size="40" ng-model="newRoom.room_id" ng-enter="createNewRoom(newRoom.room_id, newRoom.private)" placeholder="(e.g. foo_channel)"/>
<input size="40" ng-model="newRoom.room_alias" ng-enter="createNewRoom(newRoom.room_alias, newRoom.private)" placeholder="(e.g. foo_channel)"/>
<input type="checkbox" ng-model="newRoom.private">private
<button ng-disabled="!newRoom.room_id" ng-click="createNewRoom(newRoom.room_id, newRoom.private)">Create room</button>
<button ng-disabled="!newRoom.room_alias" ng-click="createNewRoom(newRoom.room_alias, newRoom.private)">Create room</button>
</form>
</div>
<div>
@ -54,5 +49,4 @@
{{ feedback }}
</div>
</div>
</div>