finish album for artists interface which resolves #10

- start drag interface for making playlists
acm-uiuc · Apr 14, 2014 · d92186d · d92186d
1 parent 8de56be
commit d92186d
Show file tree

Hide file tree

Showing 4 changed files with 151 additions and 75 deletions.
diff --git a/beats.css b/beats.css
@@ -25,6 +25,9 @@ html, body {
   animation: spin 1s infinite linear;
   -webkit-animation: spin 1s infinite linear; }
 
+.cursor-pointer {
+  cursor: pointer; }
+
 .dialog-container {
   align-items: flex-start;
   justify-content: space-around;
@@ -55,7 +58,7 @@ html, body {
     display: inline;
     float: right;
     padding: 8px;
-    text-shadow: 0 0 1px black; }
+    text-shadow: 1px 1px 1px black; }
   .dialog-area .confirm {
     background-color: #448aa6; }
   .dialog-area .cancel {
@@ -141,37 +144,36 @@ html, body {
   z-index: 2; }
 
 .albumgrid-area {
+  align-items: flex-start;
   background-color: #444;
   box-shadow: 0 0 17px 3px black;
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  flex-flow: row wrap;
-  justify-content: flex-start;
-  align-items: flex-start;
+  color: white;
+  cursor: default;
   flex: 5;
+  list-style-type: none;
   overflow-x: hidden;
   overflow-y: auto;
   position: relative;
-  z-index: 2;
-  font-family: 'Open Sans';
-  color: white; }
-  .albumgrid-area .album-artist {
-    width: 100%;
-    height: 50px;
-    font-size: 16px; }
-  .albumgrid-area .album-art {
-    width: 150px;
-    height: 235px;
-    padding: 20px;
-    justify-content: center; }
-    .albumgrid-area .album-art .art {
-      max-width: 150px;
-      max-height: 150px; }
-    .albumgrid-area .album-art .album-name {
-      width: 150px;
+  z-index: 2; }
+  .albumgrid-area li {
+    display: block;
+    float: left;
+    height: 220px;
+    margin: 10px;
+    padding: 10px;
+    width: 150px; }
+    .albumgrid-area li .art {
+      box-shadow: 0 0 10px 0 black;
+      max-height: 150px;
+      max-width: 150px; }
+    .albumgrid-area li .album-name {
+      font-size: 15px;
       height: 50px;
-      font-size: 15px; }
+      width: 150px;
+      text-shadow: 1px 1px 1px black; }
+    .albumgrid-area li:hover {
+      background: #448aa6;
+      box-shadow: 0 0 10px 0 black; }
 
 table.playlist {
   border-collapse: collapse;
@@ -195,8 +197,12 @@ table.playlist {
     text-overflow: ellipsis;
     white-space: nowrap;
     padding: 4px; }
-  table.playlist td:first-child {
-    cursor: pointer; }
+  table.playlist .dragover td {
+    box-shadow: inset 0 8px 4px -4px rgba(255, 255, 255, 0.4), inset 0 -8px 4px -4px rgba(255, 255, 255, 0.4); }
+  table.playlist .dragover td:first-child {
+    box-shadow: inset 8px 0 4px -4px rgba(255, 255, 255, 0.4), inset 0 8px 4px -4px rgba(255, 255, 255, 0.4), inset 0 -8px 4px -4px rgba(255, 255, 255, 0.4); }
+  table.playlist .dragover td:last-child {
+    box-shadow: inset -8px 0 4px -4px rgba(255, 255, 255, 0.4), inset 0 8px 4px -4px rgba(255, 255, 255, 0.4), inset 0 -8px 4px -4px rgba(255, 255, 255, 0.4); }
 
 .queue-area {
   background-color: #222;
@@ -325,6 +331,3 @@ table.playlist {
   .control.current-time-label {
     margin-left: 16px;
     margin-right: 16px; }
-
-#search {
-  width: 350px; }
diff --git a/beats.html b/beats.html
@@ -43,7 +43,7 @@
     <div class="main-container">
       <div class="top-area">
         <div class="control label large" title="Search" data-image-icon="&#xf002;"></div>
-        <form ng-submit="searchSongs(searchText)" class="control"><input id="search" type="search" placeholder="Search" ng-model="searchText" /></form>
+        <form ng-submit="searchSongs(searchText)" class="control"><input type="search" placeholder="Search" ng-model="searchText" /></form>
         <button class="control rect-button youtube" title="YouTube" ng-click="startYouTubeDialog()">
           <span data-icon="&#xf167;"></span>Play YouTube
         </button>
@@ -79,24 +79,22 @@
               <tr><th>Vote</th><th>Track</th><th>Title</th><th>Artist</th><th>Album</th><th>Length</th></tr>
             </thead>
             <tbody>
-              <tr ng-repeat="song in playlist track by $index">
-                <td style="text-align: center" ng-click="voteSong(song)"><span data-image-icon="{{ getSongIcon(song) }}"></span></td>
+              <tr ng-repeat="song in playlist track by $index" draggable="true" drag-song="true">
+                <td style="text-align: center" ng-click="voteSong(song)"><span class="cursor-pointer" data-image-icon="{{ getSongIcon(song) }}"></span></td>
                 <td>{{ song.tracknumber }}</td>
                 <td title="{{ song.title }}">{{ song.title }}</td>
-                <td title="{{ song.artist }}"><span ng-click="searchSongs('artist:' + song.artist)">{{ song.artist }}</span></td>
-                <td title="{{ song.album }}"><span ng-click="searchSongs('album:' + song.album)">{{ song.album }}</span></td>
+                <td title="{{ song.artist }}"><span class="cursor-pointer" ng-click="searchSongs('artist:' + song.artist)">{{ song.artist }}</span></td>
+                <td title="{{ song.album }}"><span class="cursor-pointer" ng-click="searchSongs('album:' + song.album)">{{ song.album }}</span></td>
                 <td>{{ song.length|momentFormat }}</td>
               </tr>
             </tbody>
           </table>
         </div>
         <ul class="albumgrid-area" ng-show="layout == 'albumgrid'">
-          <div ng-repeat="album in albumlist track by $index">
-            <div class="album-art" ng-click="searchSongs('album:' + album.name)">
-              <img class="art" ng-src="{{['http://4.bp.blogspot.com/-3n7yrHpYsfw/TZtqsQMtHwI/AAAAAAAAG6o/RY4-sDUGFuA/s1600/album-light-up-night.jpg', album.albumart][(album.albumart == undefined) ? 0 : 1]}}"/>
-              <p class="album-name" title="{{ [album.name,'No Album'][(album.name == null) ? 1 : 0] }}">{{[album.name,"No Album"][(album.name == null) ? 1 : 0] }}</p>
-            </div>
-          </div>
+          <li ng-repeat="album in albumlist track by $index" ng-click="searchAlbum(album.name)">
+            <img class="art" ng-src="{{['http://4.bp.blogspot.com/-3n7yrHpYsfw/TZtqsQMtHwI/AAAAAAAAG6o/RY4-sDUGFuA/s1600/album-light-up-night.jpg', album.albumart][(album.albumart == undefined) ? 0 : 1]}}"/>
+            <p class="album-name" title="{{ [album.name,'No Album'][(album.name == null) ? 1 : 0] }}">{{[album.name,"No Album"][(album.name == null) ? 1 : 0] }}</p>
+          </li>
         </ul>
         <div class="queue-area">
           <div class="album-art">
@@ -105,9 +103,9 @@
           <ul class="song-queue">
               <li ng-repeat="song in queue">
                 <span class="title" title="{{ song.title }}">{{ song.title }}</span>
-                <span class="album" title="{{ song.album }}" ng-click="searchSongs('album:' + song.album)">{{ song.album }}</span>
-                <span class="artist" title="{{ song.artist }}" ng-click="searchSongs('artist:' + song.artist)">{{ song.artist }}</span>
-                <span class="vote" ng-click="voteSong(song)" data-image-icon="{{ getSongIcon(song) }}"></span>
+                <span class="album cursor-pointer" title="{{ song.album }}" ng-click="searchSongs('album:' + song.album)">{{ song.album }}</span>
+                <span class="artist cursor-pointer" title="{{ song.artist }}" ng-click="searchSongs('artist:' + song.artist)">{{ song.artist }}</span>
+                <span class="vote cursor-pointer" ng-click="voteSong(song)" data-image-icon="{{ getSongIcon(song) }}"></span>
               </li>
           </ul>
         </div>

diff --git a/beats.js b/beats.js
@@ -107,6 +107,52 @@ angular.module('BeatsApp', ['Beats.filters', 'ngCookies'])
         }
     };
 })
+.directive('dragSong', function()
+{
+    // Directive for having bar slider based input controls
+    return {
+        link: function(scope, element, attrs)
+        {
+            var dragging = false;
+
+            var handleDragStart = function(event)
+            {
+                dragging = true;
+                element[0].style.opacity = 0.4;
+                event.dataTransfer.effectAllowed = 'all';
+                event.dataTransfer.setData('text/plain', null);
+                event.dataTransfer.setDragImage(element[0], 0, 0);
+            }
+
+            var handleDragOver = function(event)
+            {
+                if (!dragging)
+                {
+                    element[0].classList.add('dragover');
+                }
+            }
+
+            var handleDragLeave = function(event)
+            {
+                if (!dragging)
+                {
+                    element[0].classList.remove('dragover');
+                }
+            }
+
+            var handleDragFinish = function(event)
+            {
+                dragging = false;
+                element[0].style.opacity = 1.0;
+            }
+
+            element[0].addEventListener('dragstart', handleDragStart);
+            element[0].addEventListener('dragover', handleDragOver);
+            element[0].addEventListener('dragleave', handleDragLeave);
+            element[0].addEventListener('dragend', handleDragFinish);
+        }
+    };
+})
 .controller('BeatsController', ['$scope', '$http', '$interval', '$cookies',
 function($scope, $http, $interval, $cookies)
 {
@@ -329,6 +375,14 @@ function($scope, $http, $interval, $cookies)
         });
     };
 
+    $scope.searchAlbum = function(album)
+    {
+        if (album)
+        {
+            $scope.searchSongs('album:' + album);
+        }
+    }
+
     $scope.searchSongs = function(query)
     {
         if (!query) {
@@ -342,7 +396,7 @@ function($scope, $http, $interval, $cookies)
         .success(function(data)
         {
             // album search
-            if (query.substring(0,7) == "artist:")
+            if (query.substring(0,7) == 'artist:')
             {
                 var albums = [];
                 for (var resultIndex = 0; resultIndex < data.results.length; resultIndex++)
@@ -353,7 +407,7 @@ function($scope, $http, $interval, $cookies)
                 $scope.albumlist = albums;
                 $scope.layout = 'albumgrid';
                 $scope.searchText = query;
-            } 
+            }
             else
             {
                 var songs = [];

diff --git a/beats.scss b/beats.scss
@@ -1,4 +1,6 @@
 $area-shadow: 0 0 17px 3px black;
+$item-shadow: 0 0 10px 0 black;
+$text-highlight-shadow: 1px 1px 1px black;
 $hover-blur: 0 0 4px #D0D9E5;
 $blue: #448AA6;
 
@@ -41,6 +43,10 @@ html, body {
     -webkit-animation: spin 1s infinite linear;
 }
 
+.cursor-pointer {
+    cursor: pointer;
+}
+
 .dialog-container {
     align-items: flex-start;
     justify-content: space-around;
@@ -79,7 +85,7 @@ html, body {
         display: inline;
         float: right;
         padding: 8px;
-        text-shadow: 0 0 1px black;
+        text-shadow: $text-highlight-shadow;
     }
 
     .confirm {
@@ -182,41 +188,42 @@ html, body {
 }
 
 .albumgrid-area {
+    align-items: flex-start;
     background-color: #444;
     box-shadow: $area-shadow;
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    flex-flow: row wrap;
-    justify-content: flex-start;
-    align-items: flex-start;
+    color: white;
+    cursor: default;
     flex: 5;
+    list-style-type: none;
     overflow-x: hidden;
     overflow-y: auto;
     position: relative;
     z-index: 2;
-    font-family: 'Open Sans';
-    color: white;
 
-    .album-artist{
-        width: 100%;
-        height: 50px;
-        font-size: 16px;
-    }
-    .album-art{
+    li {
+        display: block;
+        float: left;
+        height: 220px;
+        margin: 10px;
+        padding: 10px;
         width: 150px;
-        height: 235px;
-        padding: 20px;
-        justify-content:center;
 
-        .art{
-            max-width: 150px;
+        .art {
+            box-shadow: $item-shadow;
             max-height: 150px;
+            max-width: 150px;
         }
-        .album-name{
-            width: 150px;
-            height: 50px;
+
+        .album-name {
             font-size: 15px;
+            height: 50px;
+            width: 150px;
+            text-shadow: $text-highlight-shadow;
+        }
+
+        &:hover {
+            background: $blue;
+            box-shadow: $item-shadow;
         }
     }
 }
@@ -253,8 +260,26 @@ table.playlist {
         padding: 4px;
     }
 
-    td:first-child {
-        cursor: pointer;
+    .dragover {
+        $shadow-size: 4px;
+        $shadow-offset: $shadow-size * 2;
+        $shadow-color: rgba(255, 255, 255, 0.4);
+        td {
+            box-shadow: inset 0 $shadow-offset $shadow-size -1*$shadow-size $shadow-color,
+                        inset 0 -1 * $shadow-offset $shadow-size -1*$shadow-size $shadow-color;
+        }
+
+        td:first-child {
+            box-shadow: inset $shadow-offset 0 $shadow-size -1*$shadow-size $shadow-color,
+                        inset 0 $shadow-offset $shadow-size -1*$shadow-size $shadow-color,
+                        inset 0 -1 * $shadow-offset $shadow-size -1*$shadow-size $shadow-color;
+        }
+
+        td:last-child {
+            box-shadow: inset -1 * $shadow-offset 0 $shadow-size -1*$shadow-size $shadow-color,
+                        inset 0 $shadow-offset $shadow-size -1*$shadow-size $shadow-color,
+                        inset 0 -1 * $shadow-offset $shadow-size -1*$shadow-size $shadow-color;
+        }
     }
 }
 
@@ -439,7 +464,3 @@ table.playlist {
         margin-right: 16px;
     }
 }
-
-#search {
-    width: 350px;
-}