snippet list scaffolded

Author: Rokt33r

src/_bootstrap.scss

@@ -1,11 +1,10 @@
 // Core variables and mixins
-@import "../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/variables";
-@import "../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins";
+@import "variables";
+@import "mixins";
 
 // Reset and dependencies
 @import "../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/normalize";
 @import "../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/print";
-// @import "../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/glyphicons";
 
 // Core CSS
 @import "../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/scaffolding";

src/_mixins.scss

@@ -0,0 +1 @@
+@import "../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins";

src/_variables.scss

@@ -0,0 +1,9 @@
+@import "../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/variables";
+
+$side-view-bg: $navbar-inverse-bg;
+$side-view-color: $navbar-inverse-color;
+$side-view-link-color: $navbar-inverse-link-color;
+$side-view-link-active-color: $navbar-inverse-link-active-color;
+$side-view-link-hover-color: $navbar-inverse-link-hover-color;
+$side-view-link-active-bg: $navbar-inverse-link-active-bg;
+$side-view-link-hover-bg: $navbar-inverse-link-hover-bg;

src/directives/side-nav.js

@@ -1,8 +1,9 @@
+
 angular.module('codexen.directives')
   .directive('sideNav', function(){
     return {
-      templateUrl:'directives/side-nav.tpl.html',
-      controller:'SideNavController as vm'
+      templateUrl: 'directives/side-nav.tpl.html',
+      controller: 'SideNavController as vm'
     }
   })
   .controller('SideNavController', function($auth, User, $rootScope, $scope){

src/directives/side-nav.scss

@@ -0,0 +1,19 @@
+@import "../variables";
+
+$side-view-link-hover-color: $gray-dark;
+$side-view-link-active-color: $link-color;
+$side-view-link-active-bg: $body-bg;
+
+#side-view ul.nav.nav-pills{
+  li a{
+    color: white;
+    &:hover{
+      color: $side-view-link-hover-color;
+    }
+  }
+
+  li.active a{
+    color:$side-view-link-active-color;
+    background-color: $side-view-link-active-bg;
+  }
+}

src/directives/side-nav.tpl.html

@@ -1,4 +1,3 @@
-
 <div class="current-user">
   <div ng-if="vm.currentUser">
     <img width="30" ng-src="http://www.gravatar.com/avatar/{{ vm.currentUser.email | gravatar }}">
@@ -20,6 +19,9 @@
 
 <p>Side Nav</p>
 <ul class="nav nav-pills nav-stacked">
+  <li ui-sref-active="active">
+    <a ui-sref="home"><i class="fa fa-home"></i> Home</a>
+  </li>
   <li>
     <a href="">My Page</a>
   </li>

src/main.scss

@@ -4,11 +4,6 @@ $fa-font-path: "./resources/fonts";
 @import "bootstrap";
 @import "ui-select";
 
-@import "../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/variables";
-
-$side-view-bg: $navbar-inverse-bg;
-$side-view-color: $navbar-inverse-color;
-
 html {
   overflow: hidden;
   height: 100%;
@@ -17,6 +12,10 @@ html {
 body {
   height: 100%;
   overflow: auto;
+  font-family: "Lato", sans-serif;
+}
+label{
+  font-family: "Lato", sans-serif;
 }
 
 #side-view{
@@ -45,5 +44,5 @@ body {
   left: 200px;
   right: 0;
   overflow-x: hidden;
-  overflow-y: scroll;
+  overflow-y: auto;
 }

src/services/snippet.js

@@ -0,0 +1,16 @@
+angular.module('codexen.services')
+  .factory('Snippet', function ($http, $auth, apiUrl) {
+    var findByUserId = function (userId) {
+      var url = apiUrl + 'snippets'
+
+      return $http.get(url, {
+        params: {
+          userId: userId
+        }
+      })
+    }
+
+    return {
+      findByUserId: findByUserId
+    }
+  })

src/states/home/home.js

@@ -0,0 +1,36 @@
+/* global angular */
+angular.module('codexen.states')
+  .controller('HomeController', function ($auth, Snippet, $scope) {
+    var vm = this
+
+    vm.isLoaded = false
+
+    var laodSnippets = function () {
+      if ($auth.isAuthenticated) {
+        console.log($auth.getPayload())
+        var userId = $auth.getPayload().sub
+        Snippet.findByUserId(userId)
+          .success(function (data) {
+            console.log('snippets fetched', data.snippets)
+            vm.isLoaded = true
+            vm.snippets = data.snippets
+            vm.isGuest = false
+          })
+      }else {
+        vm.isLoaded = true
+        vm.isGuest = true
+        vm.snippets = void 0
+      }
+    }
+
+    laodSnippets()
+
+    $scope.$on('userSignIn', function () {
+      laodSnippets()
+    })
+
+    $scope.$on('userSignOut', function () {
+      laodSnippets()
+    })
+
+  })

src/states/home/home.scss

@@ -0,0 +1,51 @@
+@import "../../variables";
+@import "../../mixins";
+
+$left-pane-width: 275px;
+
+
+$pane-border-color: #ddd;
+$snippet-list-border-color: #ddd;
+$snippet-list-item-hover-bg: #EEE;
+
+.home-state{
+  position: absolute;
+  top:0;
+  left:0;
+  right:0;
+  bottom:0;
+  .left-pane{
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    width: $left-pane-width;
+    overflow-x: hidden;
+    overflow-y: auto;
+    border-right: solid 1px $pane-border-color;
+    .snippet-list{
+      list-style: none;
+      padding: 0;
+      li{
+        padding: 5px;
+        border-bottom: solid 1px $snippet-list-border-color;
+        h4{
+          margin: 0;
+        }
+        &:hover{
+          background-color: $snippet-list-item-hover-bg;
+        }
+        p{
+          margin:0;
+        }
+      }
+    }
+  }
+  .right-pane{
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: $left-pane-width;
+    right: 0;
+  }
+}