From bba5f8f7d6c2820b11e36d2d0340dc8ffa5342a4 Mon Sep 17 00:00:00 2001
From: Josef Citrine <josefcitrine@googlemail.com>
Date: Fri, 5 Aug 2016 04:31:58 +0100
Subject: [PATCH] Updated track buttons and modals

---
 gulpfile.js                                   | 50 +++++-----
 .../directives/favourite-button.html          | 20 ++--
 public/templates/partials/credits-dialog.html |  3 +-
 .../partials/playlist-share-dialog.html       | 33 +++----
 .../partials/track-share-dialog.html          | 38 ++++----
 public/templates/tracks/frame.html            | 96 ++++++++-----------
 .../scripts/app/controllers/track.coffee      | 32 +++++--
 resources/assets/scripts/shared/layout.coffee |  2 +-
 resources/assets/styles/app.less              |  2 -
 resources/assets/styles/forms.less            | 10 ++
 resources/assets/styles/layout.less           | 12 +++
 resources/assets/styles/mobile.less           |  7 ++
 resources/views/shared/_layout.blade.php      |  1 +
 13 files changed, 163 insertions(+), 143 deletions(-)

diff --git a/gulpfile.js b/gulpfile.js
index 6241af60..f71621a9 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -81,8 +81,8 @@ gulp.task("webpack-dev-server", function () {
 
 gulp.task("styles-app", function () {
     var includedStyles = [
-        "resources/assets/styles/base/colorbox.css",
-        "resources/assets/styles/app.less"
+        "node_modules/angular-material/angular-material.css",
+        "resources/assets/styles/app.less",
     ];
 
     if (!argv.production) {
@@ -108,30 +108,32 @@ gulp.task("styles-app", function () {
     // note that we're not doing autoprefixer on dev builds for now to shave off roughly 600-700 milliseconds per
     // build. It's already taking forever to recompile the less
 
-    return argv.production
+    if (argv.production) {
         // Production pipeline
-        ? gulp.src(includedStyles, {base: "resources/assets/styles"})
-        .pipe(plug.plumber(plumberOptions))
-        .pipe(plug.if(/\.less/, plug.less()))
-        .pipe(plug.autoprefixer({
-            browsers: ["last 2 versions"],
-            cascade: false
-        }))
-        .pipe(plug.concat("app.css"))
-        .pipe(plug.cleanCss())
-        .pipe(header(licenseHeader))
-        .pipe(gulp.dest("public/build/styles"))
-
+        return gulp.src(includedStyles)
+            .pipe(plug.plumber(plumberOptions))
+            .pipe(plug.if(/\.less/, plug.less()))
+            .pipe(plug.autoprefixer({
+                browsers: ["last 2 versions"],
+                cascade: false
+            }))
+            .pipe(plug.concat("app.css"))
+            .pipe(plug.cleanCss())
+            .pipe(header(licenseHeader))
+            .pipe(gulp.dest("public/build/styles"));
+    } else {
         // Development pipeline
-        : gulp.src(includedStyles, {base: "resources/assets/styles"})
-        .pipe(plug.plumber(plumberOptions))
-        .pipe(plug.cached("styles"))
-        .pipe(plug.sourcemaps.init())
-        .pipe(plug.if(/\.less/, plug.less()))
-        .pipe(header(licenseHeader))
-        .pipe(plug.sourcemaps.write())
-        .pipe(gulp.dest("public/build/styles"))
-        .pipe(plug.livereload());
+        return gulp.src(includedStyles)
+            .pipe(plug.plumber(plumberOptions))
+            .pipe(plug.cached("styles"))
+            .pipe(plug.sourcemaps.init())
+            .pipe(plug.if(/\.less/, plug.less()))
+            .pipe(plug.concat("app.css"))
+            .pipe(header(licenseHeader))
+            .pipe(plug.sourcemaps.write())
+            .pipe(gulp.dest("public/build/styles"))
+            .pipe(plug.livereload());
+    }
 });
 
 gulp.task("styles-embed", function () {
diff --git a/public/templates/directives/favourite-button.html b/public/templates/directives/favourite-button.html
index f9778b26..649bab6e 100644
--- a/public/templates/directives/favourite-button.html
+++ b/public/templates/directives/favourite-button.html
@@ -1,10 +1,10 @@
-<a href="#" class="btn btn-default favourite-button" ng-class="{'is-favourited': resource.is_favourited, disabled: isWorking}" pfm-eat-click ng-click="toggleFavourite()" ng-show="auth.isLogged">
-    <span ng-hide="resource.user_data.is_favourited">
-        Favourite This!
-        <i class="material-icons">favorite_border</i>
-    </span>
-    <span ng-show="resource.user_data.is_favourited">
-        In Your Favourites
-        <i class="material-icons">favorite</i>
-    </span>
-</a>
+<div ng-show="auth.isLogged">
+    <md-button class="md-icon-button" aria-label="Favourite" ng-hide="resource.user_data.is_favourited" ng-click="toggleFavourite()">
+        <md-tooltip md-direction="bottom" md-delay="200">Favourite</md-tooltip>
+        <md-icon>favorite_border</md-icon>
+    </md-button>
+    <md-button class="md-icon-button" aria-label="Favourite" ng-show="resource.user_data.is_favourited" ng-click="toggleFavourite()">
+        <md-tooltip md-direction="bottom" md-delay="200">In your favourites</md-tooltip>
+        <md-icon>favorite</md-icon>
+    </md-button>
+</div>
diff --git a/public/templates/partials/credits-dialog.html b/public/templates/partials/credits-dialog.html
index a8a860b1..039f3390 100644
--- a/public/templates/partials/credits-dialog.html
+++ b/public/templates/partials/credits-dialog.html
@@ -2,7 +2,6 @@
     <md-dialog-content>
         <div class="modal-header">
             <h4>
-                <button type="button" class="close" ng-click="$hide()" ng-hide="isLoading">&times;</button>
                 Pony.fm source &amp; credits
             </h4>
         </div>
@@ -59,6 +58,6 @@
         </div>
     </md-dialog-content>
     <md-dialog-actions layout="row">
-        <a class="btn btn-flat btn-primary" ng-click="$hide()" ng-disabled="isLoading">Close</a>
+        <md-button ng-click="closeDialog()" class="md-primary">Close</md-button>
     </md-dialog-actions>
 </md-dialog>
diff --git a/public/templates/partials/playlist-share-dialog.html b/public/templates/partials/playlist-share-dialog.html
index 4f9e630e..12ed5fac 100644
--- a/public/templates/partials/playlist-share-dialog.html
+++ b/public/templates/partials/playlist-share-dialog.html
@@ -1,19 +1,16 @@
-<div class="modal" tabindex="-1" role="dialog">
-    <div class="modal-dialog">
-        <div class="modal-content">
-            <div class="modal-header">
-                <h4>
-                    <button type="button" class="close" ng-click="$hide()" ng-hide="isLoading">&times;</button>
-                    {{playlist.title}}
-                </h4>
-            </div>
-            <div class="modal-body">
-                <h2>Shortlink</h2>
-                <input type="text" ng-model="playlist.share.url" />
-            </div>
-            <div class="modal-footer">
-                <a class="btn btn-flat btn-primary" ng-click="$hide()" ng-disabled="isLoading">Close</a>
-            </div>
+<md-dialog ng-cloak>
+    <md-dialog-content>
+        <div class="modal-header">
+            <h4>
+                {{playlist.title}}
+            </h4>
         </div>
-    </div>
-</div>
+        <div class="modal-body">
+            <h2>Shortlink</h2>
+            <input type="text" ng-model="playlist.share.url" />
+        </div>
+    </md-dialog-content>
+    <md-dialog-actions layout="row">
+        <md-button ng-click="closeDialog()" class="md-primary">Close</md-button>
+    </md-dialog-actions>
+</md-dialog>
diff --git a/public/templates/partials/track-share-dialog.html b/public/templates/partials/track-share-dialog.html
index 376359f0..726dbb6d 100644
--- a/public/templates/partials/track-share-dialog.html
+++ b/public/templates/partials/track-share-dialog.html
@@ -1,25 +1,19 @@
-<div class="modal" tabindex="-1" role="dialog">
-    <div class="modal-dialog">
-        <div class="modal-content">
-            <div class="modal-header">
-                <h4>
-                    <button type="button" class="close" ng-click="$hide()" ng-hide="isLoading">&times;</button>
-                    {{track.title}}
-                </h4>
-            </div>
-            <div class="modal-body">
-                <h2>Shortlink</h2>
-                <input type="text" ng-model="track.share.url" />
+<md-dialog ng-cloak class="modal-dialog">
+    <md-dialog-content>
+        <div class="modal-body">
+            <h2>Share '{{track.title}}'</h2>
 
-                <h2>HTML Embed <small>(websites, blogs)</small></h2>
-                <textarea type="text" ng-model="track.share.html"></textarea>
+            <h5>Shortlink</h5>
+            <input type="text" ng-model="track.share.url" />
 
-                <h2>BBCode Embed <small>(forums)</small></h2>
-                <textarea type="text" ng-model="track.share.bbcode"></textarea>
-            </div>
-            <div class="modal-footer">
-                <a class="btn btn-flat btn-primary" ng-click="$hide()" ng-disabled="isLoading">Close</a>
-            </div>
+            <h5>HTML Embed <small>(websites, blogs)</small></h5>
+            <textarea type="text" ng-model="track.share.html"></textarea>
+
+            <h5>BBCode Embed <small>(forums)</small></h5>
+            <textarea type="text" ng-model="track.share.bbcode"></textarea>
         </div>
-    </div>
-</div>
+    </md-dialog-content>
+    <md-dialog-actions layout="row">
+        <md-button ng-click="closeDialog()" class="md-primary">Close</md-button>
+    </md-dialog-actions>
+</md-dialog>
diff --git a/public/templates/tracks/frame.html b/public/templates/tracks/frame.html
index 440368a9..56c4912b 100644
--- a/public/templates/tracks/frame.html
+++ b/public/templates/tracks/frame.html
@@ -1,65 +1,53 @@
 <div class="resource-details track-details">
-    <ul class="dropdowns">
-        <li class="dropdown">
-            <a href="#" class="btn btn-primary dropdown-toggle" bs-dropdown ng-disabled="track.is_downloadable == 0" auto-close="outsideClick">
-                Downloads
-            </a>
-            <ul class="dropdown-menu" ng-show="track.is_downloadable == 1">
-                <li ng-repeat="format in ::track.formats" ng-hide="isInProgress">
-                    <a target="_blank" ng-if="::!format.isCacheable" ng-href="{{::format.url}}">
-                        <span>{{::format.name}}</span>
-                        <small>({{::format.size}})</small>
-                    </a>
-                    <a ng-if="format.isCacheable" ng-click="getCachedTrack(track.id, format.name);" href="">
-                        <span>{{::format.name}}</span>
-                        <small>({{::format.size}})</small>
-                    </a>
-                </li>
-                <li ng-show="isInProgress" class="cache-loading"><img src="/images/loading.gif" /></li>
-                <li ng-show="isInProgress" class="cache-loading"><small>We&#39;re getting your download ready! This&#39;ll take a few seconds.</small></li>
-            </ul>
-        </li>
-        <li class="dropdown">
-            <a href="#" class="btn btn-default dropdown-toggle" bs-dropdown ng-show="::auth.isLogged">Add to Playlist</a>
-            <ul class="dropdown-menu">
-                <li ng-repeat="playlist in playlists track by playlist.id">
-                    <a ng-class="{disabled: playlist.message, 'btn-success': playlist.message}"
+    <div class="buttons" layout="row">
+        <md-menu>
+            <md-button class="md-icon-button" aria-label="Download" ng-click="$mdOpenMenu($event)">
+                <md-tooltip md-direction="bottom" md-delay="200">Download</md-tooltip>
+                <md-icon>file_download</md-icon>
+            </md-button>
+
+            <md-menu-content>
+                <md-menu-item ng-repeat="format in ::track.formats" ng-hide="isInProgress">
+                    <md-button target="_blank" ng-if="::!format.isCacheable" ng-href="{{::format.url}}">
+                        {{::format.name}} ({{::format.size}})
+                    </md-button>
+                    <md-button ng-if="format.isCacheable" ng-click="getCachedTrack(track.id, format.name);" href="">
+                        {{::format.name}} ({{::format.size}})
+                    </md-button>
+                </md-menu-item>
+            </md-menu-content>
+        </md-menu>
+
+        <pfm-favourite-button resource="::track" type="track"></pfm-favourite-button>
+
+        <md-menu>
+            <md-button class="md-icon-button" aria-label="Add to playlist" ng-show="::auth.isLogged" ng-click="$mdOpenMenu($event)">
+                <md-tooltip md-direction="bottom" md-delay="200">Add to playlist</md-tooltip>
+                <md-icon>playlist_add</md-icon>
+            </md-button>
+
+            <md-menu-content>
+                <md-menu-item ng-repeat="playlist in playlists track by playlist.id">
+                    <md-button ng-class="{disabled: playlist.message, 'btn-success': playlist.message}"
                        ng-href="{{::playlist.url}}"
-                       pfm-eat-click
-                       ng-click="addToPlaylist(playlist); $event.stopPropagation()"
-                    >
+                       ng-click="addToPlaylist(playlist); $event.stopPropagation()">
                         <span ng-hide="playlist.message">{{::playlist.title}}</span>
                         <span ng-show="playlist.message">{{playlist.message}}</span>
-                    </a>
-                </li>
-                <li><a href="#" class="add-btn btn-default" pfm-eat-click ng-click="addToNewPlaylist()">Add to New Playlist</a></li>
-            </ul>
-        </li>
+                    </md-button>
+                </md-menu-item>
+            </md-menu-content>
+        </md-menu>
 
-        <li><a href="#" class="btn btn-default" pfm-eat-click ng-click="share()">Share or Embed</a></li>
-        <li><pfm-favourite-button resource="::track" type="track"></pfm-favourite-button></li>
-        <li ng-show="::track.permissions.edit"><a class="btn btn-default" ng-href="/tracks/{{::track.id}}-{{::track.slug}}/edit">Edit</a></li>
-
-        <md-button class="md-icon-button" aria-label="Download">
-            <md-tooltip md-direction="bottom" md-delay="200">Download</md-tooltip>
-            <md-icon>file_download</md-icon>
-        </md-button>
-
-        <md-button class="md-icon-button" aria-label="Favourite">
-            <md-tooltip md-direction="bottom" md-delay="200">Favourite</md-tooltip>
-            <md-icon>favorite_border</md-icon>
-        </md-button>
-
-        <md-button class="md-icon-button" aria-label="Add to playlist">
-            <md-tooltip md-direction="bottom" md-delay="200">Add to playlist</md-tooltip>
-            <md-icon>playlist_add</md-icon>
-        </md-button>
-
-        <md-button class="md-icon-button" aria-label="Share or embed">
+        <md-button class="md-icon-button" aria-label="Share or embed" ng-click="share()">
             <md-tooltip md-direction="bottom" md-delay="200">Share or embed</md-tooltip>
             <md-icon>share</md-icon>
         </md-button>
-    </ul>
+
+        <md-button class="md-icon-button" aria-label="Edit" ng-show="::track.permissions.edit" ng-href="/tracks/{{::track.id}}-{{::track.slug}}/edit">
+            <md-tooltip md-direction="bottom" md-delay="200">Edit</md-tooltip>
+            <md-icon>edit</md-icon>
+        </md-button>
+    </div>
 
     <header>
         <pfm-track-player class="hidden-xs" track="::track"></pfm-track-player>
diff --git a/resources/assets/scripts/app/controllers/track.coffee b/resources/assets/scripts/app/controllers/track.coffee
index 0fffda05..56a1b53c 100644
--- a/resources/assets/scripts/app/controllers/track.coffee
+++ b/resources/assets/scripts/app/controllers/track.coffee
@@ -15,8 +15,8 @@
 # along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 module.exports = angular.module('ponyfm').controller "track", [
-    '$scope', 'meta', 'tracks', '$state', 'playlists', 'auth', 'favourites', '$modal', 'download-cached', '$window', '$timeout'
-    ($scope, meta, tracks, $state, playlists, auth, favourites, $modal, cachedTrack, $window, $timeout) ->
+    '$scope', 'meta', 'tracks', '$state', 'playlists', 'auth', 'favourites', '$modal', 'download-cached', '$window', '$timeout', '$mdDialog'
+    ($scope, meta, tracks, $state, playlists, auth, favourites, $modal, cachedTrack, $window, $timeout, $mdDialog) ->
         $scope.track
         $scope.trackId = parseInt($state.params.id)
 
@@ -52,15 +52,19 @@ module.exports = angular.module('ponyfm').controller "track", [
                 track.is_favourited = res.is_favourited
                 $scope.favouriteWorking = false
 
-        $scope.share = () ->
-            dialog = $modal
+        $scope.share = (ev) ->
+            $mdDialog.show(
                 templateUrl: '/templates/partials/track-share-dialog.html',
-                controller: ['$scope', ($localScope) ->
-                        $localScope.track = $scope.track
-                        $localScope.close = () ->
-                            dialog.$hide()
-                ],
-                show: true
+                scope: $scope,
+                clickOutsideToClose: true,
+                controller: ($scope, $mdDialog) ->
+                    $scope.closeDialog = ->
+                        $mdDialog.cancel()
+            ).then (() ->
+                return
+            ), ->
+                console.log $state.current
+                $scope.$apply()
 
         $scope.addToNewPlaylist = () ->
             dialog = $modal
@@ -91,6 +95,14 @@ module.exports = angular.module('ponyfm').controller "track", [
         $scope.getCachedTrack = (id, format) ->
             $scope.isInProgress = true
 
+            $mdDialog.show(
+                $mdDialog.alert()
+                    .clickOutsideToClose(true)
+                    .title('Preparing download...')
+                    .textContent('We\'re getting your download ready! This\'ll take a few seconds.')
+                    .ok('Sure thing')
+            )
+
             cachedTrack.download('tracks', id, format).then (response) ->
                 $scope.trackUrl = response
                 if $scope.trackUrl == 'error'
diff --git a/resources/assets/scripts/shared/layout.coffee b/resources/assets/scripts/shared/layout.coffee
index 997c19cb..4b706617 100644
--- a/resources/assets/scripts/shared/layout.coffee
+++ b/resources/assets/scripts/shared/layout.coffee
@@ -33,7 +33,7 @@ window.handleResize = () ->
 		$this.css
 			'max-height': newMaxHeight
 
-	$('.stretch-to-bottom').each () ->
+	$('ui-view').each () ->
 		$this = $ this
 		newHeight = windowHeight - $this.offset().top
 		if isMobile
diff --git a/resources/assets/styles/app.less b/resources/assets/styles/app.less
index f5b2414c..8e45949e 100644
--- a/resources/assets/styles/app.less
+++ b/resources/assets/styles/app.less
@@ -16,9 +16,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-@import 'https://fonts.googleapis.com/css?family=Roboto:400,400i,700|Material+Icons';
 @import 'base/bootstrap/bootstrap';
-@import (less) '../../../node_modules/angular-material/angular-material.min.css';
 @import 'variables';
 @import 'mixins';
 @import 'layout';
diff --git a/resources/assets/styles/forms.less b/resources/assets/styles/forms.less
index 82dbfd3b..45c587ef 100644
--- a/resources/assets/styles/forms.less
+++ b/resources/assets/styles/forms.less
@@ -43,3 +43,13 @@ input[type="text"], input[type="password"], input[type="date"], input[type="numb
     background: @btn-danger-bg;
   }
 }
+
+.modal-dialog {
+  h2 {
+    margin-top: 0;
+    margin-bottom: 20px;
+  }
+  input, textarea {
+    width: 100%;
+  }
+}
diff --git a/resources/assets/styles/layout.less b/resources/assets/styles/layout.less
index 9a8cb3f3..f9984e47 100644
--- a/resources/assets/styles/layout.less
+++ b/resources/assets/styles/layout.less
@@ -370,3 +370,15 @@ md-input-container#title {
 ._md-select-menu-container {
   z-index: 100;
 }
+
+md-backdrop {
+  position: fixed;
+}
+
+.buttons {
+  margin-bottom: 10px;
+  
+  .md-menu {
+    padding: 0;
+  }
+}
diff --git a/resources/assets/styles/mobile.less b/resources/assets/styles/mobile.less
index 4d8fa3be..f89758b9 100644
--- a/resources/assets/styles/mobile.less
+++ b/resources/assets/styles/mobile.less
@@ -433,6 +433,10 @@
   .account-tabs {
     margin: -49px 0px 5px;
   }
+
+  .modal-dialog {
+    width: 95%;
+  }
 }
 
 // Super small phones like the iPhone 5
@@ -491,6 +495,9 @@
       }
     }
   }
+  .modal-dialog {
+    width: 100%;
+  }
 }
 
 @media only screen and (max-height: 500px) {
diff --git a/resources/views/shared/_layout.blade.php b/resources/views/shared/_layout.blade.php
index 1c6bbc67..7a190e43 100644
--- a/resources/views/shared/_layout.blade.php
+++ b/resources/views/shared/_layout.blade.php
@@ -26,6 +26,7 @@
         <link rel="manifest" href="/manifest.json">
         <base href="/" />
 
+        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,400i,700|Material+Icons" />
         @yield('styles')
     </head>
     <body ng-controller="application" class="{{Auth::check() ? 'is-logged' : ''}} loading">