Improved sidebar behaviour, updated styles

angel1st · Feb 16, 2016 · 0ad8cc8 · 0ad8cc8
1 parent e3823a6
commit 0ad8cc8
Show file tree

Hide file tree

Showing 6 changed files with 17 additions and 15 deletions.
diff --git a/src/app/components/chat/chat.html b/src/app/components/chat/chat.html
@@ -1,7 +1,7 @@
 <div layout="row" flex>
 	<md-content style="background-color: #DCDCDC;" id="chat-content">
 	  <md-list>
-	    <md-list-item ng-repeat="message in chat.messages" layout-margin>
+	    <md-list-item ng-repeat="message in chat.messages" style="margin-top: 8px; margin-bottom: 8px;">
 		    <div flex-order="{{message.user ? 2 : 0}}" layout="column" layout-align="center center" class="md-caption">
 		      <img layout="row" style="margin: 0;" ng-src="{{message.avatar}}" class="md-avatar"></img>
 		      <div style="text-align: center; color: #5F5F5F;">
@@ -17,7 +17,7 @@
 	  </md-list>
 	</md-content>
 </div>
-<form layout="row" style="padding: 20px;" ng-submit="chat.sendMessage()">
+<form layout="row" style="padding: 20px;" ng-submit="chat.sendMessage()" autocomplete="off">
 	<md-input-container flex layout-align="center" layout-fill>
 	  <label>What do you want to say?</label>
 	  <input type="text" ng-model="chat.myMessage"></input>

diff --git a/src/app/components/main/main.directive.js b/src/app/components/main/main.directive.js
@@ -15,13 +15,13 @@
 
     return directive;
 
-  function MainController($scope, $mdMedia) {
+  function MainController($scope, $mdMedia, $mdSidenav) {
     var main = this;
-    main.showSidebar = $mdMedia("gt-md");
+    $scope.$mdMedia = $mdMedia;
     main.toggleSidebar = toggleSidebar;
 
     function toggleSidebar(){
-      main.showSidebar = !main.showSidebar;
+      $mdSidenav('sidebar').toggle();
     }
 
     main.user = {

diff --git a/src/app/components/main/main.html b/src/app/components/main/main.html
@@ -1,7 +1,7 @@
     <!-- Container #1 (see wireframe) -->
   <md-toolbar layout="row">
 
-    <div layout="row" layout-align="left center">
+    <div layout="row" layout-align="left center" ng-show="!$mdMedia('gt-xs')">
       <md-button class="md-icon-button" ng-click="main.toggleSidebar();">
 
         <md-icon md-font-icon="material-icons">
@@ -23,6 +23,6 @@
   <!-- Container #2 -->
   <div flex layout="row">
 	  <!-- Sidebar -->
-	  <by-chat layout="column" flex></by-chat>
-	  <by-sidebar layout="column" show="main.showSidebar"><by-sidebar/>
+    <by-chat layout="column" flex></by-chat>
+	  <by-sidebar layout="column"><by-sidebar/>
   </div>
diff --git a/src/app/components/sidebar/sidebar.css b/src/app/components/sidebar/sidebar.css
@@ -0,0 +1,7 @@
+md-sidenav, 
+md-sidenav.md-locked-open, 
+md-sidenav.md-closed.md-locked-open-add-active {
+    min-width: 0px !important;
+    width: auto !important;
+    max-width: none !important;
+}
diff --git a/src/app/components/sidebar/sidebar.directive.js b/src/app/components/sidebar/sidebar.directive.js
@@ -20,7 +20,7 @@
     return directive;
 
     /** @ngInject */
-    function SidebarController($rootScope, $scope) {
+    function SidebarController($rootScope, $scope, $mdSidenav) {
       var vm = this;
 
       vm.users = [];
@@ -41,11 +41,6 @@
       function openChat(user){
         $rootScope.$emit("OPEN_CHAT", user);
       }
-
-      $scope.$watch("show",function(newValue,oldValue) {
-        vm.show = newValue;
-        console.log(newValue);
-      });
     }
   }
 

diff --git a/src/app/components/sidebar/sidebar.html b/src/app/components/sidebar/sidebar.html
@@ -1,4 +1,4 @@
-<md-sidenav md-is-locked-open="vm.show" class="md-whiteframe-z2" layout-fill>
+<md-sidenav md-component-id="sidebar" md-is-locked-open="$mdMedia('gt-xs')" class="md-sidenav-right md-whiteframe-z2" layout-fill>
   <md-content>
       <md-list>
             <!-- List item #1 -->