JSFiddle - React, Tailwind, and code Playground

by Alan Doe

HTML

<script src="http://angular-file-upload.appspot.com/js/ng-file-upload.js"></script>
<div id="folderContainer" ng-app="uploader" ng-controller="uploadController">
    <div class="folderEntry" ng-repeat="folder in tree">
        <div class="folderTitleContainer">
            <p class="folderText">{{folder.name}}</p>
        </div>
        <div class="filesListContainer">
            <ul class="folderNamesList">
            </ul>   
        </div>
        <div class="addFileButtonContainer">
            <button class="addFileButton" ng-click="presentUploadMenu($index)">+</button>
        </div>
        
    </div>
    
    
</div>

CSS

#folderContainer
{
    width:500px;
    height:400px;
    border-radius:10px;
    border:1px solid rgb(230,230,230);
}

.folderEntry
{
    display:inline-block;
    width:30%;
    height:180px;
    box-shadow:-5px 5px 8px rgb(220,220,220);
    border:1px solid rgb(230,230,230);
    border-radius:5px;
}
.folderTitleContainer
{
    width:100%;
    height:20%;
    vertical-align:top;
    text-align:center;
    margin:0;
}
.folderText
{
    margin-right:auto;
    margin-left:auto;
    font-size:1.2em;
    color:rgb(120,120,120);
    display:inline;
}
.filesListContainer
{
    width:100%;
    height:65%;
     margin:0;
    box-sizing:border-box;
    padding:0;
    vertical-align:top;
}
.folderNamesList
{
    width:100%;
    height:100%;
    display:inline-block; 
}
.addFileButtonContainer
{
    width:100%;
    height:10%;
    align-content:right;
    text-align:right;
    
}
.addFileButton
{
    background-color:rgb(102,153,0);
    border:1px solid rgb(230,230,230);
    outline:none;
    color:white;
    border-radius:3px;
    margin-right:10px;
}

JavaScript

var mod= angular.module('uploader', ["ngFileUpload"]);


mod.controller('uploadController', function($scope)
               {
                   $scope.presentUploadMenu = function(index){
                      
                        alert(document.getElementById('folderContainer').innerHTML);  
                       

                      // $compile( document.getElementById('sup') )(scope);
                   }
                   
                   $scope.tree = [{name : 'root', files : [], directories:[]}];
                   
               });

mod.controller('supbro',function($scope)
               {
                   alert('sup bro');
               });