snippet list scaffolded

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,3 +1,4 @@
+
 angular.module('codexen.directives')
   .directive('sideNav', function(){
     return {

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;
+  }
+}

src/states/home/home.tpl.html

@@ -0,0 +1,51 @@
+<div class="home-state">
+
+  <div class="left-pane">
+    <ul class="snippet-list">
+
+      <li ng-if="!vm.isLoaded" class="message-item">
+        <h4>
+          Loading
+        </h4>
+      </li>
+
+      <li ng-if="vm.isLoaded && vm.snippets==0 && !vm.isGuest" class="message-item">
+        <h4>
+          Empty List
+        </h4>
+        <button class="btn btn-xs btn-default"><i class="fa fa-plus-square-o"></i> New Snippet</button>
+      </li>
+
+      <li ng-if="vm.isLoaded && vm.isGuest" class="message-item">
+        <h4>
+          Sign In to access
+        </h4>
+        <a ui-sref="auth.signin" class="btn btn-xs btn-default"><i class="fa fa-signin"></i> Sign In</a>
+      </li>
+
+      <li ng-repeat="snippet in vm.snippets">
+        <div class="media">
+          <div class="media-left">
+            <img width="25" height="25" src="http://www.gravatar.com/avatar/ea0b6ad1c11700120d1af08810caa19d" alt="" />
+          </div>
+          <div class="media-body">
+            <h4 ng-bind="snippet.title"></h4>
+            <p class="created-at">created at <span ng-bind="snippet.createdAt"></span></p>
+          </div>
+        </div>
+        <p ng-bind="snippet.description"></p>
+        <p>
+          <a ng-repeat="tag in snippet.tags" ng-bind="tag.name" href="#" class="label label-default"></a>
+        </p>
+      </li>
+    </ul>
+  </div>
+
+  <div class="right-pane">
+    <div class="">
+
+    </div>
+  </div>
+
+
+</div>

src/states/states.js

@@ -29,7 +29,12 @@ angular.module('codexen.states')
       /* Home */
       .state('home', {
         url: '/',
-        template: 'this is a home'
+        views:{
+          'main-view': {
+            templateUrl: 'states/home/home.tpl.html',
+            controller: 'HomeController as vm'
+          }
+        }
       })
 
   })