PonyMirrors/Pony.fm
1
0
Fork 0
mirror of https://github.com/Poniverse/Pony.fm.git synced 2024-11-26 14:58:00 +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 () {
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 () {

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">
<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>

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

@ -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>

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

@ -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>

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

@ -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>

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

@ -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>

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/>.
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'

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

@ -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

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/>.
*/
@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';

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;
}
}
.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 {
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 {
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) {

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

@ -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">