MultiBuffer IRC UI

HTML

<div ng-app="ircApp" ng-controller="MyCtrl" class="mainPanel panel">
    <div class="leftPanel panel">
        <div class="bufferViewContainer panel">
            <div ng-repeat="bufferView in bufferViews" class="bufferView bufferViewTile panel selectedBufferView-{{selectedBufferView == bufferView}}" ng-click="selectBufferView(bufferView)">
                <!--
                <select ng-model="bufferView.buffer" ng-options="b.name for b in buffers">
                    <option value="">-- Choose Buffer --</option>
                </select>
                -->
                <h3>{{bufferView.buffer.name}}</h3>
                <ul>
                    <li ng-repeat="message in bufferView.buffer.log">{{message}}</li>
                </ul>
            </div>
        </div><!--
    --><div class="inputPanel panel">
            <form>
                <input type="text" ng-model="message" ng-enter="sendMessage()" placeholder="Type message then press enter" />
            </form>
        </div>
    </div><!--
 --><div class="bufferList panel">
        <ul>
            <li ng-repeat="buffer in buffers" class="bufferListItem" ng-click="selectBuffer(selectedBufferView, buffer)">
                <span class="name">{{buffer.name}}</span>
                <div class="selectedBufferViewIcon">
                    <div ng-repeat="bufferView in bufferViews" class="bufferViewTile selectedBufferView-{{bufferView.buffer == buffer}}"></div>
                </div>
            </li>
        </ul>
    </div>
</div>

CSS

* {
    box-sizing: border-box;
    padding:0;
    margin:0;
}

html, body, .panel {
    display: inline-block;
    width: 100%;
    height: 100%;
    vertical-align: top;
}

.leftPanel {
    width: calc(100% - 140px);
}

.bufferViewContainer {
    height: calc(100% - 20px);
}

.inputPanel,
.inputPanel input {
    height: 20px;
}

.inputPanel input {
    width: 100%;
}

.bufferView {
    border: 1px solid #999;
    overflow-y: auto;
}

.bufferView h3 {
    display: block;
    background: #eee;
    font: sans-serif;
    color: #333;
    text-align: center;
}

.bufferView.selectedBufferView-true {
    border-color: #399;
}

.bufferView select {
    width: 100%;
    height: 100%;
}

.bufferList {
    width: 140px;
    height: 100%;
    overflow-y: auto;
    border: 1px solid #999;
    padding: 0.5em;
}

.bufferList .bufferListItem {
    line-height: 16px;
    font-size: 0.8em;
    vertical-align: top;
    cursor: pointer;
}

.bufferList .bufferListItem:hover {
    background: rgba(0, 255, 0, 0.25);
}

.bufferList .bufferListItem .name {

}

.bufferList .bufferListItem .selectedBufferViewIcon {
    display: inline-block;
    float: right;
    clear: right;
    width: 16px;
    height: 16px;
    padding: 1px;
}

.bufferList .bufferListItem .selectedBufferViewIcon div {
    display: inline-block;
    float: left;
    border: 1px solid #eee;
    border-radius: 2px;
}

.bufferList .bufferListItem .selectedBufferViewIcon div.selectedBufferView-true {
    background: #ccc;
    border-color: #999;
}

.bufferViewTile {
    width: 50%;
    height: 50%;
}


/* 3 BufferViews */
.bufferViewTile:nth-child(2n+1):last-child {
    width: 100%;
}

JavaScript

angular.module('ircApp', []).
directive('ngEnter', function() {
    return function(scope, element, attrs) {
        element.bind("keydown keypress", function(event) {
            if(event.which === 13) {
                scope.$apply(function(){
                    scope.$eval(attrs.ngEnter);
                });
                
                event.preventDefault();
            }
        });
    };
}).
controller('MyCtrl', function ($scope) {
   
    $scope.buffers = [
        {name: '#freenode'},
        {name: '#github'},
        {name: '#quassel'},
        {name: '#reddit'},
        {name: '#sublimetext'}
    ];
    
    $scope.bufferViews = [
        {buffer: $scope.buffers[0]},
        {buffer: $scope.buffers[0]},
        {buffer: $scope.buffers[0]}
        //{buffer: $scope.buffers[0]}
    ];
    
    $scope.logState = function() {
        var bufferViewId = $scope.bufferViews.indexOf($scope.selectedBufferView);
        var bufferName = $scope.selectedBufferView.buffer.name;
        console.log(bufferViewId, bufferName);
    };
    
    $scope.selectBufferView = function(bufferView) {
        $scope.selectedBufferView = bufferView;
        
        var bufferViewId = $scope.bufferViews.indexOf(bufferView);
        console.log(bufferViewId);
    };
    
    $scope.selectBuffer = function(bufferView, buffer) {
        $scope.selectedBufferView.buffer = buffer;
        
        var bufferViewId = $scope.bufferViews.indexOf(bufferView);
        var bufferName = bufferView.buffer.name;
        console.log(bufferViewId, bufferName);
    };
    
    $scope.sendToBuffer = function(buffer, data) {
        buffer.log = buffer.log || [];
        buffer.log.push(data);
    };
    
    $scope.sendMessage = function() {
        $scope.sendToBuffer($scope.selectedBufferView.buffer, $scope.message);
        delete $scope.message;
    };
        
    
    $scope.selectedBufferView = $scope.bufferViews[$scope.bufferViews.length - 1];
});