Modifies the dialog css class loading and allows for left side modals

src/Umbraco.Web.UI.Client/src/common/services/dialog.service.js

@@ -9,11 +9,11 @@ angular.module('umbraco.services')
 
 		var scope = options.scope || $rootScope.$new(),
 			animationClass = options.animation || "fade",
-			modalClass = options.modalClass || "umb-modalcolumn",
+			modalClass = options.modalClass || "umb-modal",
 			templateUrl = options.template || "views/common/notfound.html";
 
 		var callback = options.callback;
-		var $modal = $('<div class="modal umb-modal hide" data-backdrop="false" tabindex="-1"></div>');
+		var $modal = $('<div class="modal hide" data-backdrop="false" tabindex="-1"></div>');
 		var id = templateUrl.replace('.html', '').replace(/[\/|\.|:]/g, "-") + '-' + scope.$id;
 
 		$modal

src/Umbraco.Web.UI.Client/src/common/services/navigation.service.js

@@ -127,6 +127,15 @@ angular.module('umbraco.services')
 			setMode("tree");
 		},
 
+		showUserDialog: function(){
+			var d = dialogService.open(
+							{
+								template: "views/common/dialogs/user.html", 
+								modalClass: "umb-modal-left", 
+								show: true
+							});
+
+		},
 		showDialog: function (args) {
 			setMode("dialog");
 

src/Umbraco.Web.UI.Client/src/common/services/user.service.js

@@ -12,6 +12,8 @@ angular.module('umbraco.services')
             $q.when(authResource.isAuthenticated())
                 .then(function(data) {
                     currentUser = data;
+                    currentUser.avatar = 'http://www.gravatar.com/avatar/' + data.emailHash + '?s=40';
+                    
                     //note, this can return null if they are not authenticated
                     deferred.resolve({ user: data, authenticated: data == null ? false : true });
                 },

src/Umbraco.Web.UI.Client/src/less/modals.less

@@ -1,5 +1,5 @@
-// Modals
-// -------------------------
+/* Modals
+// -------------------------*/
 
 .umb-modalcolumn {
 	background: #fff;
@@ -53,8 +53,7 @@
 	border-top: #efefef 1px solid
 }
 
-.umb-modal{border: none; border-radius: none;}
-
+.modal.fade.in{border: none !important; border-radius: none !important;}
 .umb-modal.fade {
 	top: 0 !important;
 	left: -100% !important;
@@ -74,8 +73,28 @@
 	display: block;
 }
 
-/* MEDIA PICKER */
+.umb-modal-left.fade {
+	top: 0 !important;
+	left: -100% !important;
+	width: 0px !important;
+	-webkit-transition: left 0.3s linear, left 0.3s ease-out;
+	-moz-transition: opacity 0.3s linear, top 0.3s ease-out;
+	-o-transition: opacity 0.3s linear, top 0.3s ease-out;
+	transition: opacity 0.3s linear, top 0.3s ease-out;
+	height: 100% !important;
+}
+.umb-modal-left.fade.in {
+	top: 0 !important;
+	left: 0 !important;
+	margin-left: 80px;
+	width: 440px !important;
+	height: 100% !important;
+	display: block;
+}
 
+
+
+/* MEDIA PICKER */
 .umb-modal .umb-btn-toolbar {
 	margin: 10px 0 0 0
 }

src/Umbraco.Web.UI.Client/src/views/common/dialogs/user.controller.js

@@ -0,0 +1,7 @@
+angular.module("umbraco")
+    .controller("Umbraco.Dialogs.UserController", function ($scope, $location) {
+        $scope.logout = function () {
+        userService.logout();
+        $location = "/";
+    };
+});

src/Umbraco.Web.UI.Client/src/views/common/dialogs/user.html

@@ -0,0 +1,19 @@
+<div class="umb-panel" ng-controller="Umbraco.Dialogs.UserController">
+	<div class="umb-panel-header">
+		<h1>{{user.name}}</h1>
+
+		<div class="umb-el-wrap umb-panel-buttons">
+	        <div class="btn-toolbar umb-btn-toolbar">
+	         	<input type="button" ng-click="logout()" class="btn btn-warning" value="Log out" />
+	        </div>
+		</div>
+	</div>
+	
+	<div class="umb-panel-body umb-scrollable" auto-scale="1">
+		<div class="tab-content umb-control-group">
+			<ul>
+					<li>Your recent items</li>
+			</ul>	
+		</div>
+	</div>
+</div>

src/Umbraco.Web.UI.Client/src/views/common/main.controller.js

@@ -26,7 +26,6 @@ function MainController($scope, $routeParams, $rootScope, $timeout, notification
 
     $scope.closeDialogs = function (event) {
         $rootScope.$emit("closeDialogs");
-
         if (navigationService.ui.stickyNavigation && $(event.target).parents(".umb-modalcolumn").size() == 0) {
             navigationService.hideNavigation();
         }

src/Umbraco.Web.UI.Client/src/views/common/navigation.controller.js

@@ -16,6 +16,7 @@ function NavigationController($scope, navigationService, sectionResource) {
     $scope.hideTree = navigationService.hideTree;
     $scope.hideMenu = navigationService.hideMenu;
     $scope.showMenu = navigationService.showMenu;
+    $scope.showUserDialog = navigationService.showUserDialog;
     $scope.hideDialog = navigationService.hideDialog;
     $scope.hideNavigation = navigationService.hideNavigation;
     $scope.ui = navigationService.ui;

src/Umbraco.Web.UI.Client/src/views/directives/umb-leftcolumn.html

@@ -3,7 +3,9 @@
         <ul class="sections">
             
             <li class="avatar">
-                <umb-avatar name="{{user.name}}" email="{{user.email}}" hash="{{user.emailHash}}"></umb-avatar>
+                <a href="#" ng-click="showUserDialog()" title="{{user.name}}">
+                    <img ng-src="{{user.avatar}}" />
+                </a>
             </li>
 
             <li ng-repeat="section in sections" ng-class="{current: section.alias == ui.currentSection}">