From c83e542ea02ca650f6702b19503876eb4f3193b8 Mon Sep 17 00:00:00 2001 From: Rokt33r Date: Wed, 27 May 2015 20:01:53 +0900 Subject: [PATCH] snippet list scaffolded --- src/_bootstrap.scss | 5 ++-- src/_mixins.scss | 1 + src/_variables.scss | 9 ++++++ src/directives/side-nav.js | 5 ++-- src/directives/side-nav.scss | 19 ++++++++++++ src/directives/side-nav.tpl.html | 4 ++- src/main.scss | 11 ++++--- src/services/snippet.js | 16 ++++++++++ src/states/home/home.js | 36 ++++++++++++++++++++++ src/states/home/home.scss | 51 ++++++++++++++++++++++++++++++++ src/states/home/home.tpl.html | 51 ++++++++++++++++++++++++++++++++ src/states/states.js | 7 ++++- 12 files changed, 202 insertions(+), 13 deletions(-) create mode 100644 src/_mixins.scss create mode 100644 src/_variables.scss create mode 100644 src/directives/side-nav.scss create mode 100644 src/services/snippet.js create mode 100644 src/states/home/home.js create mode 100644 src/states/home/home.scss create mode 100644 src/states/home/home.tpl.html diff --git a/src/_bootstrap.scss b/src/_bootstrap.scss index 72734e06..fce410e8 100644 --- a/src/_bootstrap.scss +++ b/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"; diff --git a/src/_mixins.scss b/src/_mixins.scss new file mode 100644 index 00000000..ee9abccf --- /dev/null +++ b/src/_mixins.scss @@ -0,0 +1 @@ +@import "../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins"; diff --git a/src/_variables.scss b/src/_variables.scss new file mode 100644 index 00000000..32e5848f --- /dev/null +++ b/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; diff --git a/src/directives/side-nav.js b/src/directives/side-nav.js index 0370f7b2..827c3671 100644 --- a/src/directives/side-nav.js +++ b/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){ diff --git a/src/directives/side-nav.scss b/src/directives/side-nav.scss new file mode 100644 index 00000000..baaec941 --- /dev/null +++ b/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; + } +} diff --git a/src/directives/side-nav.tpl.html b/src/directives/side-nav.tpl.html index 152ef9e3..bff19685 100644 --- a/src/directives/side-nav.tpl.html +++ b/src/directives/side-nav.tpl.html @@ -1,4 +1,3 @@ -
@@ -20,6 +19,9 @@

Side Nav

    +
  • + Home +
  • My Page
    • diff --git a/src/main.scss b/src/main.scss index a6916ffd..3b320d3b 100644 --- a/src/main.scss +++ b/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; } diff --git a/src/services/snippet.js b/src/services/snippet.js new file mode 100644 index 00000000..e9d594d7 --- /dev/null +++ b/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 + } + }) diff --git a/src/states/home/home.js b/src/states/home/home.js new file mode 100644 index 00000000..bbfe1976 --- /dev/null +++ b/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() + }) + + }) diff --git a/src/states/home/home.scss b/src/states/home/home.scss new file mode 100644 index 00000000..c5cf7a09 --- /dev/null +++ b/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; + } +} diff --git a/src/states/home/home.tpl.html b/src/states/home/home.tpl.html new file mode 100644 index 00000000..f951962f --- /dev/null +++ b/src/states/home/home.tpl.html @@ -0,0 +1,51 @@ +
    + +
    +
      + +
    • +

      + Loading +

      +
      • + +
    • +

      + Empty List +

      + +
      • + +
    • +

      + Sign In to access +

      + Sign In +
      • + +
    • +
      +
      + +
      +
      +

      +

      created at

      +
      +
      +

      +

      + +

      +
      • +
    +
    + +
    +
    + +
    +
    + + +
    diff --git a/src/states/states.js b/src/states/states.js index 99c8dd4e..704e50ee 100644 --- a/src/states/states.js +++ b/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' + } + } }) })