Avi Menu Angular

by Avi Algaly

HTML

<script src="https://raw.github.com/timrwood/moment/1.7.2/min/moment.min.js"></script>
<script src="http://underscorejs.org/underscore.js"></script>
<link href='http://fonts.googleapis.com/css?family=Signika' rel='stylesheet' type='text/css'>
<link href='https://raw.github.com/FortAwesome/Font-Awesome/master/css/font-awesome.css'  rel='stylesheet' type='text/css'/>
<div class="page" ng-app="myapp">
    <div class="content" ng-controller="MainMenuController">
        <header class="clearfix">
            <nav class="main">
                <ul class="menu horizontal main">
                    <li class="reliance"><a href="#">reliance</a></li>
                    <li class="messages"><a href="#">
                        messages
                        <span class="icon-play"></span>
                        <span class="counter">{{ newMessagesCount() }}</span>
                    </a></li>
                    <li class="notifications selected">
                        <a href="#">notifications<span class="counter">6</span></a>
                    </li>
                    <li class="payments"><a href="#">payments</a></li>
                </ul>
            </nav>
        </header>
        <ul class="message-list">
            <li ng-repeat="message in messages">
                <input type="checkbox" ng-model="message.isOld" /><span>{{ message.text }}</span>
                <span class="label">by</span><span>{{ message.createdBy }}</span>            
                <span class="label">on</span><span>{{ formatDate(message.createdOn) }}</span>            
            </li>        
        </ul>        
        <hr/>
        <div>
            <h3>Angular debug<h3>
            <button ng-click="loadMessages()">Get More Messages</button>
            <pre>{{ messages | json}}</pre>
        </div>
    </div>
</div>

SCSS

body {
  font-family: 'Signika', sans-serif;
  font-size: 1em;
}

$text-color-brown: #8d8676;

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}
 
.clearfix {
    display: inline-block;
}
 
html[xmlns] .clearfix {
    display: block;
}
 
* html .clearfix {
    height: 1%;
}

nav.main {
    padding: 5px;
    border: 1px solid #bbb;
    border-radius: 5px;
    margin: 0 auto;
    position: relative;
    float: left;
}

.menu.horizontal {
    margin: 0;
    padding: 0;    
    > li {
        display: inline-block;
        position: relative;
        margin: 0;        
        padding: 0;
        > a {
            text-decoration: none;            
            text-transform: capitalize;
            display: block;           
        }        
    }
}

.menu.main {
    background: #ece6da;
    font-size: 14px;
    background: linear-gradient(to bottom, #ece6da 0%,#ddd2bc 100%); /* W3C */;
    background: -webkit-linear-gradient(top, #ece6da 0%,#ddd2bc 100%); /* Chrome10+,Safari5.1+ */
    float: left;
    text-shadow: 1px 1px 0px white; 
    > li {
        border-right: 1px solid #fffae8;
        border-left: 1px solid #b5ad98;
        padding: 0 50px;
        height: 75px;
        margin-left: -5px;
        > a {
            color: $text-color-brown;
            position: relative;
            top: 50px;
            
        }

        .counter {
            position: absolute;
            background-color: #db3840;
            color: white;
            padding: 4px 8px;
            border-radius: 15px;
            top: -36px;    
            left: 55%;
            text-shadow: 1px 1px 0 #777;
            box-shadow: inset -1px 0px 0px #888;
        }

        &.selected {
            background: #c1baaa; /* Old browsers */
            background: -moz-linear-gradient(top, #c1baaa 0%, #ab9f8f 100%); /* FF3.6+ */
            background: -webkit-gradient(linear, left top, left bottom,...

JavaScript

var myapp = angular.module("myapp", []);
var MessageFactory = (function() {
    var creator = {
        create: function() {
            return {
                createdBy: "anonimous",
                createdOn: new Date(),
                text: "Lorem ipsum",
                isOld: false
            };
        }
    };
    
    return creator;
})();

function getStubMessages(count) {
    var messages = [];
    count = count || Math.floor((Math.random()*10)+1);
    for (var i = 0; i < count; i++) {
        messages.push(MessageFactory.create());
    }
    return messages;
}

var MainMenuController = function($scope) {
    $scope.messages = getStubMessages(5);
    $scope.formatDate = function(date) {
        return moment(date).format("DD/MM/YYYY");
    };
    $scope.newMessagesCount = function() {
        return _.countBy($scope.messages, function(message) { 
          return message.isOld ? 'old' : 'new'; 
        }).new;
    };
    $scope.loadMessages = function() {
        debugger;
        var newMessages = getStubMessages();
        $scope.messages = $scope.messages.concat(newMessages);
    };
};