Merge pull request #34 from gaykov/ui-improvements

UX issues

Author: micrum

src/app/controllers/MainController.js

@@ -16,13 +16,18 @@
     vm.showActions = showActions;
     vm.title = $state.current.data.title;
     vm.showSimpleToast = showSimpleToast;
+    vm.toggleRightSidebar = toggleRightSidebar;
 
     navService
       .loadAllItems()
       .then(function(menuItems) {
         vm.menuItems = [].concat(menuItems);
       });
 
+    function toggleRightSidebar() {
+        $mdSidenav('right').toggle();
+    }
+
     function toggleItemsList() {
       var pending = $mdBottomSheet.hide() || $q.when(true);
 
@@ -68,7 +73,7 @@
         $mdToast.simple()
           .content(title)
           .hideDelay(2000)
-          .position('top right')
+          .position('bottom right')
       );
     }
   }

src/app/controllers/TodoController.js

@@ -22,6 +22,7 @@
             });
 
         function addTodo() {
+            if (!vm.todoText) return;
             vm.todos.push({text: vm.todoText, done: false});
             vm.todoText = '';
         }

src/app/views/main.html

@@ -17,8 +17,8 @@ <h1>AMD</h1>
           </div>
       </md-button>
       <md-divider ng-repeat-end></md-divider>
-      <md-button hide-gt-md flex ng-click="vm.showActions($event)">
-          <div layout="row" class="md-tile-content">
+      <md-button ng-click="vm.showActions($event)" layout-align="center center">
+          <div class="md-tile-content">
             Actions
           </div>
       </md-button>
@@ -33,8 +33,8 @@ <h1>AMD</h1>
             <i class="material-icons">notifications</i>
             <span class="notifications-label">7</span>
         </md-button>
-        <md-button hide-sm class="toolbar-button" aria-label="Settings">
-            <i class="material-icons">settings</i>
+        <md-button hide-sm class="toolbar-button" aria-label="Settings" ng-click="vm.toggleRightSidebar()">
+            <i class="material-icons">menu</i>
         </md-button>
         <md-button hide-gt-sm ng-click="vm.toggleItemsList()" aria-label="Menu">
             <i class="material-icons">menu</i>
@@ -46,27 +46,22 @@ <h1>AMD</h1>
     </md-content>
 </div>
 
-<md-sidenav md-is-locked-open="$mdMedia('gt-sm')" md-component-id="right"
+<md-sidenav md-component-id="right"
             class="md-whiteframe-z2 md-sidenav-right">
-    <md-toolbar layout="row">
-        <md-toolbar flex="80" class="md-warn" layout="row" layout-align="center center">
+    <md-toolbar>
+        <md-toolbar class="md-warn" layout="row" layout-align="center center">
             <img class="img-circle" ng-src="assets/images/feynman.jpg">
-            <md-menu>
+            <md-menu md-offset="0 20">
                 <md-button class="capitalize" ng-click="$mdOpenMenu()" aria-label="Open menu">
                     <span>Richard Feynman</span>
                     <i class="material-icons">keyboard_arrow_down</i>
                 </md-button>
-                <md-menu-content>
+                <md-menu-content width="3">
                     <md-menu-item><md-button ng-click="$mdCloseMenu()" ui-sref="home.profile">Profile</md-button></md-menu-item>
                     <md-menu-item><md-button ng-click="$mdCloseMenu()" ui-sref="home.dashboard">Log out</md-button></md-menu-item>
                 </md-menu-content>
             </md-menu>
         </md-toolbar>
-        <md-toolbar flex="20" layout="row" layout-align="center center">
-            <md-button ng-click="vm.showActions($event)" class="toolbar-button">
-                <i class="material-icons">more_vert</i>
-            </md-button>
-        </md-toolbar>
     </md-toolbar>
 
     <section>

src/app/views/partials/checkboxes.html

@@ -9,16 +9,18 @@ <h4 flex="82">{{vm.remaining()}} of {{vm.todos.length}} remaining</h4>
         {{todo.text}}
     </md-checkbox>
 
-    <form ng-submit="vm.addTodo($event)">
-        <md-input-container>
-            <label>Write some todo task here...</label>
-            <input ng-model="vm.todoText">
-        </md-input-container>
-        <md-button class="md-fab md-warn" aria-label="Eat cake">
-            <i class="material-icons">add</i>
-        </md-button>
+    <form ng-submit="vm.addTodo($event)" novalidate name="tasksForm">
+        <div layout="row" flex>
+            <md-input-container flex ng-class="{'md-input-invalid':tasksForm.taskText.$error.required && tasksForm.$submitted}">
+                <label>Write some todo task here...</label>
+                <input ng-model="vm.todoText" name="taskText" required>
+            </md-input-container>
+            <md-button class="md-fab md-wayrn md-mini">
+                <i class="material-icons">add</i>
+            </md-button>
+        </div>
         <md-button class="md-primary" ng-click="vm.archive($event)">
             Remove completed
         </md-button>
     </form>
-</md-content>
+</md-content>