PonyMirrors/Pony.fm
1
0
Fork 0
mirror of https://github.com/Poniverse/Pony.fm.git synced 2024-11-26 23:07:59 +01:00
Code Issues Projects Releases Packages Wiki Activity

Updated track buttons and modals

Browse source
This commit is contained in:
Josef Citrine 2016-08-05 04:31:58 +01:00
parent b5fab06188
commit bba5f8f7d6
13 changed files with 163 additions and 143 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

50
gulpfile.js
View file

@ -81,8 +81,8 @@ gulp.task("webpack-dev-server", function () {
gulp.task("styles-app", function () { gulp.task("styles-app", function () {
var includedStyles = [ var includedStyles = [
"resources/assets/styles/base/colorbox.css", "node_modules/angular-material/angular-material.css",
"resources/assets/styles/app.less" "resources/assets/styles/app.less",
]; ];
if (!argv.production) { 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 // 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 // build. It's already taking forever to recompile the less
return argv.production if (argv.production) {
// Production pipeline // Production pipeline
? gulp.src(includedStyles, {base: "resources/assets/styles"}) return gulp.src(includedStyles)
.pipe(plug.plumber(plumberOptions)) .pipe(plug.plumber(plumberOptions))
.pipe(plug.if(/\.less/, plug.less())) .pipe(plug.if(/\.less/, plug.less()))
.pipe(plug.autoprefixer({ .pipe(plug.autoprefixer({
browsers: ["last 2 versions"], browsers: ["last 2 versions"],
cascade: false cascade: false
})) }))
.pipe(plug.concat("app.css")) .pipe(plug.concat("app.css"))
.pipe(plug.cleanCss()) .pipe(plug.cleanCss())
.pipe(header(licenseHeader)) .pipe(header(licenseHeader))
.pipe(gulp.dest("public/build/styles")) .pipe(gulp.dest("public/build/styles"));
} else {
// Development pipeline // Development pipeline
: gulp.src(includedStyles, {base: "resources/assets/styles"}) return gulp.src(includedStyles)
.pipe(plug.plumber(plumberOptions)) .pipe(plug.plumber(plumberOptions))
.pipe(plug.cached("styles")) .pipe(plug.cached("styles"))
.pipe(plug.sourcemaps.init()) .pipe(plug.sourcemaps.init())
.pipe(plug.if(/\.less/, plug.less())) .pipe(plug.if(/\.less/, plug.less()))
.pipe(header(licenseHeader)) .pipe(plug.concat("app.css"))
.pipe(plug.sourcemaps.write()) .pipe(header(licenseHeader))
.pipe(gulp.dest("public/build/styles")) .pipe(plug.sourcemaps.write())
.pipe(plug.livereload()); .pipe(gulp.dest("public/build/styles"))
.pipe(plug.livereload());
}
}); });
gulp.task("styles-embed", function () { gulp.task("styles-embed", function () {

20
public/templates/directives/favourite-button.html
View file

@ -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"> <div ng-show="auth.isLogged">
<span ng-hide="resource.user_data.is_favourited"> <md-button class="md-icon-button" aria-label="Favourite" ng-hide="resource.user_data.is_favourited" ng-click="toggleFavourite()">
Favourite This! <md-tooltip md-direction="bottom" md-delay="200">Favourite</md-tooltip>
<i class="material-icons">favorite_border</i> <md-icon>favorite_border</md-icon>
</span> </md-button>
<span ng-show="resource.user_data.is_favourited"> <md-button class="md-icon-button" aria-label="Favourite" ng-show="resource.user_data.is_favourited" ng-click="toggleFavourite()">
In Your Favourites <md-tooltip md-direction="bottom" md-delay="200">In your favourites</md-tooltip>
<i class="material-icons">favorite</i> <md-icon>favorite</md-icon>
</span> </md-button>
</a> </div>

3
public/templates/partials/credits-dialog.html
View file

@ -2,7 +2,6 @@
<md-dialog-content> <md-dialog-content>
<div class="modal-header"> <div class="modal-header">
<h4> <h4>
<button type="button" class="close" ng-click="$hide()" ng-hide="isLoading">&times;</button>
Pony.fm source &amp; credits Pony.fm source &amp; credits
</h4> </h4>
</div> </div>
@ -59,6 +58,6 @@
</div> </div>
</md-dialog-content> </md-dialog-content>
<md-dialog-actions layout="row"> <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-actions>
</md-dialog> </md-dialog>

33
public/templates/partials/playlist-share-dialog.html
View file

@ -1,19 +1,16 @@
<div class="modal" tabindex="-1" role="dialog"> <md-dialog ng-cloak>
<div class="modal-dialog"> <md-dialog-content>
<div class="modal-content"> <div class="modal-header">
<div class="modal-header"> <h4>
<h4> {{playlist.title}}
<button type="button" class="close" ng-click="$hide()" ng-hide="isLoading">&times;</button> </h4>
{{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>
</div> </div>
</div> <div class="modal-body">
</div> <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>

38
public/templates/partials/track-share-dialog.html
View file

@ -1,25 +1,19 @@
<div class="modal" tabindex="-1" role="dialog"> <md-dialog ng-cloak class="modal-dialog">
<div class="modal-dialog"> <md-dialog-content>
<div class="modal-content"> <div class="modal-body">
<div class="modal-header"> <h2>Share '{{track.title}}'</h2>
<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" />
<h2>HTML Embed <small>(websites, blogs)</small></h2> <h5>Shortlink</h5>
<textarea type="text" ng-model="track.share.html"></textarea> <input type="text" ng-model="track.share.url" />
<h2>BBCode Embed <small>(forums)</small></h2> <h5>HTML Embed <small>(websites, blogs)</small></h5>
<textarea type="text" ng-model="track.share.bbcode"></textarea> <textarea type="text" ng-model="track.share.html"></textarea>
</div>
<div class="modal-footer"> <h5>BBCode Embed <small>(forums)</small></h5>
<a class="btn btn-flat btn-primary" ng-click="$hide()" ng-disabled="isLoading">Close</a> <textarea type="text" ng-model="track.share.bbcode"></textarea>
</div>
</div> </div>
</div> </md-dialog-content>
</div> <md-dialog-actions layout="row">
<md-button ng-click="closeDialog()" class="md-primary">Close</md-button>
</md-dialog-actions>
</md-dialog>

96
public/templates/tracks/frame.html
View file

@ -1,65 +1,53 @@
<div class="resource-details track-details"> <div class="resource-details track-details">
<ul class="dropdowns"> <div class="buttons" layout="row">
<li class="dropdown"> <md-menu>
<a href="#" class="btn btn-primary dropdown-toggle" bs-dropdown ng-disabled="track.is_downloadable == 0" auto-close="outsideClick"> <md-button class="md-icon-button" aria-label="Download" ng-click="$mdOpenMenu($event)">
Downloads <md-tooltip md-direction="bottom" md-delay="200">Download</md-tooltip>
</a> <md-icon>file_download</md-icon>
<ul class="dropdown-menu" ng-show="track.is_downloadable == 1"> </md-button>
<li ng-repeat="format in ::track.formats" ng-hide="isInProgress">
<a target="_blank" ng-if="::!format.isCacheable" ng-href="{{::format.url}}"> <md-menu-content>
<span>{{::format.name}}</span> <md-menu-item ng-repeat="format in ::track.formats" ng-hide="isInProgress">
<small>({{::format.size}})</small> <md-button target="_blank" ng-if="::!format.isCacheable" ng-href="{{::format.url}}">
</a> {{::format.name}} ({{::format.size}})
<a ng-if="format.isCacheable" ng-click="getCachedTrack(track.id, format.name);" href=""> </md-button>
<span>{{::format.name}}</span> <md-button ng-if="format.isCacheable" ng-click="getCachedTrack(track.id, format.name);" href="">
<small>({{::format.size}})</small> {{::format.name}} ({{::format.size}})
</a> </md-button>
</li> </md-menu-item>
<li ng-show="isInProgress" class="cache-loading"><img src="/images/loading.gif" /></li> </md-menu-content>
<li ng-show="isInProgress" class="cache-loading"><small>We&#39;re getting your download ready! This&#39;ll take a few seconds.</small></li> </md-menu>
</ul>
</li> <pfm-favourite-button resource="::track" type="track"></pfm-favourite-button>
<li class="dropdown">
<a href="#" class="btn btn-default dropdown-toggle" bs-dropdown ng-show="::auth.isLogged">Add to Playlist</a> <md-menu>
<ul class="dropdown-menu"> <md-button class="md-icon-button" aria-label="Add to playlist" ng-show="::auth.isLogged" ng-click="$mdOpenMenu($event)">
<li ng-repeat="playlist in playlists track by playlist.id"> <md-tooltip md-direction="bottom" md-delay="200">Add to playlist</md-tooltip>
<a ng-class="{disabled: playlist.message, 'btn-success': playlist.message}" <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}}" 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-hide="playlist.message">{{::playlist.title}}</span>
<span ng-show="playlist.message">{{playlist.message}}</span> <span ng-show="playlist.message">{{playlist.message}}</span>
</a> </md-button>
</li> </md-menu-item>
<li><a href="#" class="add-btn btn-default" pfm-eat-click ng-click="addToNewPlaylist()">Add to New Playlist</a></li> </md-menu-content>
</ul> </md-menu>
</li>
<li><a href="#" class="btn btn-default" pfm-eat-click ng-click="share()">Share or Embed</a></li> <md-button class="md-icon-button" aria-label="Share or embed" ng-click="share()">
<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-tooltip md-direction="bottom" md-delay="200">Share or embed</md-tooltip> <md-tooltip md-direction="bottom" md-delay="200">Share or embed</md-tooltip>
<md-icon>share</md-icon> <md-icon>share</md-icon>
</md-button> </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> <header>
<pfm-track-player class="hidden-xs" track="::track"></pfm-track-player> <pfm-track-player class="hidden-xs" track="::track"></pfm-track-player>

32
resources/assets/scripts/app/controllers/track.coffee
View file

@ -15,8 +15,8 @@
# along with this program. If not, see <http://www.gnu.org/licenses/>. # along with this program. If not, see <http://www.gnu.org/licenses/>.
module.exports = angular.module('ponyfm').controller "track", [ 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', 'download-cached', '$window', '$timeout', '$mdDialog'
($scope, meta, tracks, $state, playlists, auth, favourites, $modal, cachedTrack, $window, $timeout) -> ($scope, meta, tracks, $state, playlists, auth, favourites, $modal, cachedTrack, $window, $timeout, $mdDialog) ->
$scope.track $scope.track
$scope.trackId = parseInt($state.params.id) $scope.trackId = parseInt($state.params.id)
@ -52,15 +52,19 @@ module.exports = angular.module('ponyfm').controller "track", [
track.is_favourited = res.is_favourited track.is_favourited = res.is_favourited
$scope.favouriteWorking = false $scope.favouriteWorking = false
$scope.share = () -> $scope.share = (ev) ->
dialog = $modal $mdDialog.show(
templateUrl: '/templates/partials/track-share-dialog.html', templateUrl: '/templates/partials/track-share-dialog.html',
controller: ['$scope', ($localScope) -> scope: $scope,
$localScope.track = $scope.track clickOutsideToClose: true,
$localScope.close = () -> controller: ($scope, $mdDialog) ->
dialog.$hide() $scope.closeDialog = ->
], $mdDialog.cancel()
show: true ).then (() ->
return
), ->
console.log $state.current
$scope.$apply()
$scope.addToNewPlaylist = () -> $scope.addToNewPlaylist = () ->
dialog = $modal dialog = $modal
@ -91,6 +95,14 @@ module.exports = angular.module('ponyfm').controller "track", [
$scope.getCachedTrack = (id, format) -> $scope.getCachedTrack = (id, format) ->
$scope.isInProgress = true $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) -> cachedTrack.download('tracks', id, format).then (response) ->
$scope.trackUrl = response $scope.trackUrl = response
if $scope.trackUrl == 'error' if $scope.trackUrl == 'error'

2
resources/assets/scripts/shared/layout.coffee
View file

@ -33,7 +33,7 @@ window.handleResize = () ->
$this.css $this.css
'max-height': newMaxHeight 'max-height': newMaxHeight
$('.stretch-to-bottom').each () -> $('ui-view').each () ->
$this = $ this $this = $ this
newHeight = windowHeight - $this.offset().top newHeight = windowHeight - $this.offset().top
if isMobile if isMobile

2
resources/assets/styles/app.less vendored
View file

@ -16,9 +16,7 @@
* along with this program. If not, see <http://www.gnu.org/licenses/>. * 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 'base/bootstrap/bootstrap';
@import (less) '../../../node_modules/angular-material/angular-material.min.css';
@import 'variables'; @import 'variables';
@import 'mixins'; @import 'mixins';
@import 'layout'; @import 'layout';

10
resources/assets/styles/forms.less vendored
View file

@ -43,3 +43,13 @@ input[type="text"], input[type="password"], input[type="date"], input[type="numb
background: @btn-danger-bg; background: @btn-danger-bg;
} }
} }
.modal-dialog {
h2 {
margin-top: 0;
margin-bottom: 20px;
}
input, textarea {
width: 100%;
}
}

12
resources/assets/styles/layout.less vendored
View file

@ -370,3 +370,15 @@ md-input-container#title {
._md-select-menu-container { ._md-select-menu-container {
z-index: 100; z-index: 100;
} }
md-backdrop {
position: fixed;
}
.buttons {
margin-bottom: 10px;
.md-menu {
padding: 0;
}
}

7
resources/assets/styles/mobile.less vendored
View file

@ -433,6 +433,10 @@
.account-tabs { .account-tabs {
margin: -49px 0px 5px; margin: -49px 0px 5px;
} }
.modal-dialog {
width: 95%;
}
} }
// Super small phones like the iPhone 5 // Super small phones like the iPhone 5
@ -491,6 +495,9 @@
} }
} }
} }
.modal-dialog {
width: 100%;
}
} }
@media only screen and (max-height: 500px) { @media only screen and (max-height: 500px) {

1
resources/views/shared/_layout.blade.php
View file

@ -26,6 +26,7 @@
<link rel="manifest" href="/manifest.json"> <link rel="manifest" href="/manifest.json">
<base href="/" /> <base href="/" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,400i,700|Material+Icons" />
@yield('styles') @yield('styles')
</head> </head>
<body ng-controller="application" class="{{Auth::check() ? 'is-logged' : ''}} loading"> <body ng-controller="application" class="{{Auth::check() ? 'is-logged' : ''}} loading">