mirror of
https://github.com/Poniverse/Pony.fm.git
synced 2024-11-22 21:18:00 +01:00
Ripping out things and swapping in Angular
This commit is contained in:
Josef Citrine
parent
eb0dd46648
commit
b5fab06188
17 changed files with 166 additions and 174 deletions
|
|
@ -81,7 +81,6 @@ gulp.task("webpack-dev-server", function () {
|
|||
|
||||
gulp.task("styles-app", function () {
|
||||
var includedStyles = [
|
||||
"resources/assets/styles/base/jquery-ui.css",
|
||||
"resources/assets/styles/base/colorbox.css",
|
||||
"resources/assets/styles/app.less"
|
||||
];
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<md-tabs class="account-tabs manage-account-tabs" md-selected="currentNavItem" md-border-bottom>
|
||||
<md-tabs class="account-tabs manage-account-tabs" md-selected="4" md-border-bottom>
|
||||
<md-tab ui-sref=".uploader" name="uploader">Upload music</md-tab>
|
||||
<md-tab ui-sref=".tracks" name="tracks">Tracks</md-tab>
|
||||
<md-tab ui-sref=".albums" name="albums">Albums</md-tab>
|
||||
|
|
|
|||
|
|
@ -33,9 +33,7 @@
|
|||
|
||||
<div class="stretch-to-bottom details-columns">
|
||||
<div class="right">
|
||||
<a colorbox ng-href="{{::album.covers.original}}" pfm-eat-click>
|
||||
<img class="cover" pfm-src-loader="::album.covers.normal" pfm-src-size="normal" />
|
||||
</a>
|
||||
<img class="cover" pfm-src-loader="::album.covers.normal" pfm-src-size="normal" />
|
||||
|
||||
<div class="share-buttons" pfm-share-buttons>
|
||||
<a class="tumblr" ng-href="{{::album.share.tumblrUrl}}" title="Share on Tumblr" style="display:inline-block; overflow:hidden; width:20px; height:20px; background:url('/images/tumblr-share.png') top left no-repeat transparent;"></a>
|
||||
|
|
|
|||
|
|
@ -24,9 +24,7 @@
|
|||
</ul>
|
||||
<div class="image">
|
||||
<div class="loader" ng-class="{showing: player.currentTrack.loadingProgress == 0}"><i class="material-icons">autorenew</i></div>
|
||||
<a colorbox ng-href="{{player.currentTrack.covers.original}}" pfm-eat-click>
|
||||
<img pfm-src-loader="player.currentTrack.covers.small" pfm-src-size="small" />
|
||||
</a>
|
||||
<img pfm-src-loader="player.currentTrack.covers.small" pfm-src-size="small" />
|
||||
</div>
|
||||
<div class="inner">
|
||||
<div class="title">
|
||||
|
|
|
|||
|
|
@ -1,19 +1,24 @@
|
|||
<ul class="users-listing">
|
||||
<li class="artist" ng-class="{'x-archived': user.is_archived}" ng-repeat="user in users track by user.id">
|
||||
<a ng-href="{{::user.url}}">
|
||||
<img class="image" pfm-src-loader="user.avatars.normal" pfm-src-size="normal" />
|
||||
<span class="info">
|
||||
<span class="title">{{::user.name}}</span>
|
||||
<div layout="row" layout-xs="column" layout-wrap>
|
||||
<p ng-show="!users.length" class="empty">
|
||||
No users found…
|
||||
</p>
|
||||
|
||||
<a ng-repeat="user in users track by user.id" ng-href="{{::user.url}}" class="clickable" flex-gt-xs="50" flex-gt-sm="25" flex-gt-md="20">
|
||||
<md-card class="user">
|
||||
<img class="md-card-image" pfm-src-loader="::user.avatars.normal" pfm-src-size="normal">
|
||||
|
||||
<md-card-content>
|
||||
<span><strong>{{::user.name}}</strong></span>
|
||||
</md-card-content>
|
||||
|
||||
<md-card-actions layout="row" layout-align="start center" class="user-info">
|
||||
<span ng-hide="user.is_archived" class="published">
|
||||
joined {{::user.created_at.date | momentFromNow}}
|
||||
</span>
|
||||
<span ng-show="::user.is_archived" class="published">
|
||||
archived artist
|
||||
</span>
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
<li ng-show="!users.length" class="empty">
|
||||
No users found…
|
||||
</li>
|
||||
</ul>
|
||||
</md-card-actions>
|
||||
</md-card>
|
||||
</a>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,64 +1,64 @@
|
|||
<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">×</button>
|
||||
Pony.fm source & credits
|
||||
</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>Pony.fm was created to organize the <em>My Little Pony</em> community's fan music.
|
||||
The project is maintained by <a href="https://poniverse.net/" target="_blank">Poniverse</a>, an
|
||||
organization devoted to building and operating fan sites for the pony community.</p>
|
||||
|
||||
<h2>Are you a developer?</h2>
|
||||
<p>Pony.fm is open-sourced under the GNU Affero General Public License (AGPL).
|
||||
Join the project's development at <a href="https://github.com/Poniverse/Pony.fm" target="_blank">GitHub</a>!</p>
|
||||
|
||||
<h2>Open-source credits</h2>
|
||||
<p>Pony.fm would not be possible without the efforts of the open-source community.
|
||||
We thank the following projects, in no particular order, for providing the building
|
||||
blocks for our own.</p>
|
||||
<ul>
|
||||
<li><a href="http://laravel.com/" target="_blank">Laravel</a> - our backend framework of choice</li>
|
||||
<li><a href="https://angularjs.org/" target="_blank">Angular.js</a> - our front-end framework of choice</li>
|
||||
<li><a href="https://secure.php.net/" target="_blank">PHP</a> - for providing a batteries-loaded language to build great web apps in</li>
|
||||
<li><a href="https://getcomposer.org/" target="_blank">Composer</a> - for making the management of PHP dependencies sane</li>
|
||||
<li><a href="https://ffmpeg.org/" target="_blank">FFmpeg</a> - for analyzing and dealing with every audio file we can throw at it</li>
|
||||
<li><a href="http://guzzlephp.org/" target="_blank">Guzzle</a> - for adding sanity to the art of making HTTP requests</li>
|
||||
<li><a href="https://github.com/CodeScaleInc/ffmpeg-php" target="_blank">FFmpegPHP</a> - for providing a sweet PHP interface to ffmpeg</li>
|
||||
<li><a href="https://github.com/barryvdh/laravel-ide-helper" target="_blank">Laravel IDE Helper Generator</a> - for making our IDE useful</li>
|
||||
<li><a href="https://github.com/In-Touch/laravel-newrelic" target="_blank">Laravel NewRelic Service Provider</a> - for making it easy to monitor Pony.fm''s performance</li>
|
||||
<li><a href="https://github.com/filp/whoops">Whoops</a> - for providing an easy to understand error handler</li>
|
||||
<li><a href="https://github.com/GrahamCampbell/Laravel-Exceptions">Laravel Exceptions</a> - for bringing Whoops to Laravel 5</li>
|
||||
<li><a href="https://www.vagrantup.com/" target="_blank">Vagrant</a> - for making cross-platform dev environments possible</li>
|
||||
<li><a href="http://atomicparsley.sourceforge.net/" target="_blank">AtomicParsley</a> - for making it easy to work with tags in M4A files</li>
|
||||
<li><a href="https://xiph.org/flac/" target="_blank">FLAC</a> - FLAC is best audio codec /)</li>
|
||||
<li><a href="http://www.vorbis.com/" target="_blank">OGG Vorbis</a> - A great open-source audio codec</li>
|
||||
<li><a href="http://www.audiocoding.com/faac.html" target="_blank">FAAC</a> - for encoding our AAC files</li>
|
||||
<li><a href="http://lame.sourceforge.net/" target="_blank">LAME</a> - for encoding our MP3 files</li>
|
||||
<li><a href="http://gulpjs.com/" target="_blank">gulp</a> - for being our asset pipeline</li>
|
||||
<li><a href="https://nodejs.org/" target="_blank">Node.js</a> - for making JavaScript useful outside the browser</li>
|
||||
<li><a href="http://www.schillmania.com/projects/soundmanager2/" target="_blank">SoundManager</a> - for smoothing out cross-browser audio playback</li>
|
||||
<li><a href="http://momentjs.com/" target="_blank">Moment.js</a> - for making JavaScript dates sane</li>
|
||||
<li><a href="http://getbootstrap.com/" target="_blank">Bootstrap</a> - for its front-end components and making layouts easy</li>
|
||||
<li><a href="http://lesscss.org/" target="_blank">LESS</a> - for (almost) making CSS awesome</li>
|
||||
<li><a href="https://jquery.com/" target="_blank">jQuery</a> - for being useful all over the place</li>
|
||||
<li><a href="https://github.com/mgonto/angularytics" target="_blank">Angularytics</a> - for making Google Analytics useful in a single-page app</li>
|
||||
<li><a href="https://github.com/angular-ui/ui-router" target="_blank">UI-Router</a> - for making non-trivial Angular.js routes possible</li>
|
||||
<li><a href="http://mgcrea.github.io/angular-strap/ target="_blank">AngularStrap</a> - for making Bootstrap and Angular.js get along</li>
|
||||
<li><a href="https://github.com/VentureCraft/revisionable" target="_blank">Revisionable</a> - for making audit logs easy</li>
|
||||
<li><a href="https://github.com/jackmoore/colorbox" target="_blank">Colorbox</a> - for allowing us to have pretty lightboxes</li>
|
||||
<li><a href="https://github.com/chjj/marked" target="_blank">Marked</a> - for the Markdown parser</li>
|
||||
<li><a href="https://github.com/Hypercubed/angular-marked" target="_blank">angular-marked</a> - for giving us an Angular way to use Marked</li>
|
||||
<li><a href="http://www.chartjs.org/" target="_blank">chart.js</a> - for giving us beautiful, programmable charts</li>
|
||||
<li><a href="http://jtblin.github.io/angular-chart.js/" target="_blank">angular-chart.js</a> - for making using chart.js with Angular easy</li>
|
||||
</ul>
|
||||
</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>
|
||||
<button type="button" class="close" ng-click="$hide()" ng-hide="isLoading">×</button>
|
||||
Pony.fm source & credits
|
||||
</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>Pony.fm was created to organize the <em>My Little Pony</em> community's fan music.
|
||||
The project is maintained by <a href="https://poniverse.net/" target="_blank">Poniverse</a>, an
|
||||
organization devoted to building and operating fan sites for the pony community.</p>
|
||||
|
||||
<h2>Are you a developer?</h2>
|
||||
<p>Pony.fm is open-sourced under the GNU Affero General Public License (AGPL).
|
||||
Join the project's development at <a href="https://github.com/Poniverse/Pony.fm" target="_blank">GitHub</a>!</p>
|
||||
|
||||
<h2>Open-source credits</h2>
|
||||
<p>Pony.fm would not be possible without the efforts of the open-source community.
|
||||
We thank the following projects, in no particular order, for providing the building
|
||||
blocks for our own.</p>
|
||||
<ul>
|
||||
<li><a href="http://laravel.com/" target="_blank">Laravel</a> - our backend framework of choice</li>
|
||||
<li><a href="https://angularjs.org/" target="_blank">Angular.js</a> - our front-end framework of choice</li>
|
||||
<li><a href="https://secure.php.net/" target="_blank">PHP</a> - for providing a batteries-loaded language to build great web apps in</li>
|
||||
<li><a href="https://getcomposer.org/" target="_blank">Composer</a> - for making the management of PHP dependencies sane</li>
|
||||
<li><a href="https://ffmpeg.org/" target="_blank">FFmpeg</a> - for analyzing and dealing with every audio file we can throw at it</li>
|
||||
<li><a href="http://guzzlephp.org/" target="_blank">Guzzle</a> - for adding sanity to the art of making HTTP requests</li>
|
||||
<li><a href="https://github.com/CodeScaleInc/ffmpeg-php" target="_blank">FFmpegPHP</a> - for providing a sweet PHP interface to ffmpeg</li>
|
||||
<li><a href="https://github.com/barryvdh/laravel-ide-helper" target="_blank">Laravel IDE Helper Generator</a> - for making our IDE useful</li>
|
||||
<li><a href="https://github.com/In-Touch/laravel-newrelic" target="_blank">Laravel NewRelic Service Provider</a> - for making it easy to monitor Pony.fm''s performance</li>
|
||||
<li><a href="https://github.com/filp/whoops">Whoops</a> - for providing an easy to understand error handler</li>
|
||||
<li><a href="https://github.com/GrahamCampbell/Laravel-Exceptions">Laravel Exceptions</a> - for bringing Whoops to Laravel 5</li>
|
||||
<li><a href="https://www.vagrantup.com/" target="_blank">Vagrant</a> - for making cross-platform dev environments possible</li>
|
||||
<li><a href="http://atomicparsley.sourceforge.net/" target="_blank">AtomicParsley</a> - for making it easy to work with tags in M4A files</li>
|
||||
<li><a href="https://xiph.org/flac/" target="_blank">FLAC</a> - FLAC is best audio codec /)</li>
|
||||
<li><a href="http://www.vorbis.com/" target="_blank">OGG Vorbis</a> - A great open-source audio codec</li>
|
||||
<li><a href="http://www.audiocoding.com/faac.html" target="_blank">FAAC</a> - for encoding our AAC files</li>
|
||||
<li><a href="http://lame.sourceforge.net/" target="_blank">LAME</a> - for encoding our MP3 files</li>
|
||||
<li><a href="http://gulpjs.com/" target="_blank">gulp</a> - for being our asset pipeline</li>
|
||||
<li><a href="https://nodejs.org/" target="_blank">Node.js</a> - for making JavaScript useful outside the browser</li>
|
||||
<li><a href="https://material.angularjs.org/" target="_blank">Angular Material</a> - for bringing material design to Angular.js apps</li>
|
||||
<li><a href="http://www.schillmania.com/projects/soundmanager2/" target="_blank">SoundManager</a> - for smoothing out cross-browser audio playback</li>
|
||||
<li><a href="http://momentjs.com/" target="_blank">Moment.js</a> - for making JavaScript dates sane</li>
|
||||
<li><a href="http://getbootstrap.com/" target="_blank">Bootstrap</a> - for its front-end components and making layouts easy</li>
|
||||
<li><a href="http://lesscss.org/" target="_blank">LESS</a> - for (almost) making CSS awesome</li>
|
||||
<li><a href="https://jquery.com/" target="_blank">jQuery</a> - for being useful all over the place</li>
|
||||
<li><a href="https://github.com/mgonto/angularytics" target="_blank">Angularytics</a> - for making Google Analytics useful in a single-page app</li>
|
||||
<li><a href="https://github.com/angular-ui/ui-router" target="_blank">UI-Router</a> - for making non-trivial Angular.js routes possible</li>
|
||||
<li><a href="http://mgcrea.github.io/angular-strap/" target="_blank">AngularStrap</a> - for making Bootstrap and Angular.js get along</li>
|
||||
<li><a href="https://github.com/VentureCraft/revisionable" target="_blank">Revisionable</a> - for making audit logs easy</li>
|
||||
<li><a href="https://github.com/chjj/marked" target="_blank">Marked</a> - for the Markdown parser</li>
|
||||
<li><a href="https://github.com/Hypercubed/angular-marked" target="_blank">angular-marked</a> - for giving us an Angular way to use Marked</li>
|
||||
<li><a href="http://www.chartjs.org/" target="_blank">chart.js</a> - for giving us beautiful, programmable charts</li>
|
||||
<li><a href="http://jtblin.github.io/angular-chart.js/" target="_blank">angular-chart.js</a> - for making using chart.js with Angular easy</li>
|
||||
<li><a href="https://github.com/lokesh/color-thief" target="_blank">Color Thief</a> - for making color palettes easy</li>
|
||||
<li><a href="https://github.com/ksubileau/color-thief-php" target="_blank">Color Thief PHP</a> - for bringing color-thief server side</li>
|
||||
</ul>
|
||||
</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-dialog-actions>
|
||||
</md-dialog>
|
||||
|
|
|
|||
|
|
@ -32,9 +32,7 @@
|
|||
|
||||
<div class="stretch-to-bottom details-columns">
|
||||
<div class="right">
|
||||
<a colorbox ng-href="{{::playlist.covers.original}}" pfm-eat-click>
|
||||
<img class="cover" pfm-src-loader="::playlist.covers.normal" pfm-src-size="normal" />
|
||||
</a>
|
||||
<img class="cover" pfm-src-loader="::playlist.covers.normal" pfm-src-size="normal" />
|
||||
|
||||
<div class="share-buttons" pfm-share-buttons>
|
||||
<a class="tumblr" ng-href="{{::playlist.share.tumblrUrl}}" title="Share on Tumblr" style="display:inline-block; overflow:hidden; width:20px; height:20px; background:url('/images/tumblr-share.png') top left no-repeat transparent;"></a>
|
||||
|
|
|
|||
|
|
@ -39,6 +39,26 @@
|
|||
<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-tooltip md-direction="bottom" md-delay="200">Share or embed</md-tooltip>
|
||||
<md-icon>share</md-icon>
|
||||
</md-button>
|
||||
</ul>
|
||||
|
||||
<header>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,6 @@
|
|||
<div class="stretch-to-bottom details-columns">
|
||||
<div class="right">
|
||||
<a colorbox ng-href="{{track.covers.original}}" pfm-eat-click>
|
||||
<img class="cover" pfm-src-loader="track.covers.normal" pfm-src-size="normal"/>
|
||||
</a>
|
||||
<img class="cover" pfm-src-loader="track.covers.normal" pfm-src-size="normal"/>
|
||||
|
||||
<ul class="stats">
|
||||
<li>Published: <strong>{{::track.published_at}}</strong></li>
|
||||
|
|
|
|||
|
|
@ -33,7 +33,6 @@ require 'angular-ui-router'
|
|||
require 'angular-material'
|
||||
require '../base/angular-ui-sortable'
|
||||
require '../base/angularytics'
|
||||
require '../base/jquery.colorbox'
|
||||
require '../base/jquery.cookie'
|
||||
require '../base/jquery.timeago'
|
||||
require 'script!../base/marked'
|
||||
|
|
|
|||
|
|
@ -15,8 +15,8 @@
|
|||
# along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
|
||||
module.exports = angular.module('ponyfm').controller "application", [
|
||||
'$scope', 'auth', '$location', 'upload', '$state', '$stateParams', '$injector', '$rootScope', 'playlists', 'notifications'
|
||||
($scope, auth, $location, upload, $state, $stateParams, $injector, $rootScope, playlists, notifications) ->
|
||||
'$scope', 'auth', '$location', 'upload', '$state', '$stateParams', '$injector', '$rootScope', 'playlists', 'notifications', '$timeout'
|
||||
($scope, auth, $location, upload, $state, $stateParams, $injector, $rootScope, playlists, notifications, $timeout) ->
|
||||
$scope.auth = auth.data
|
||||
$scope.$state = $state
|
||||
$scope.$stateParams = $stateParams
|
||||
|
|
@ -25,6 +25,8 @@ module.exports = angular.module('ponyfm').controller "application", [
|
|||
$scope.nCount = 0
|
||||
$scope.nCountFormatted = '0'
|
||||
$scope.isPlaying = false
|
||||
$scope.hideLoading = false
|
||||
$scope.loading = true
|
||||
$loadingElement = null
|
||||
loadingStateName = null
|
||||
|
||||
|
|
@ -84,6 +86,7 @@ module.exports = angular.module('ponyfm').controller "application", [
|
|||
window.setTimeout (-> window.handleResize()), 0
|
||||
|
||||
$scope.loading = false
|
||||
$scope.hideLoading = true
|
||||
|
||||
$scope.stateIncludes = (state) ->
|
||||
if $loadingElement
|
||||
|
|
@ -128,7 +131,15 @@ module.exports = angular.module('ponyfm').controller "application", [
|
|||
oldParts = oldState.name.split '.'
|
||||
zipped = _.zip(newParts, oldParts)
|
||||
|
||||
$scope.loading = true;
|
||||
$scope.loading = true
|
||||
|
||||
# Don't show the loading bar until 400ms has passed
|
||||
# Avoids flickering on fast connections while still
|
||||
# providing feedback to users on slow connections
|
||||
$timeout(() ->
|
||||
if $scope.loading
|
||||
$scope.hideLoading = false
|
||||
, 400)
|
||||
|
||||
stateToInject = angular.copy newState
|
||||
stateToInject.params = newParams
|
||||
|
|
|
|||
|
|
@ -15,8 +15,8 @@
|
|||
# along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
|
||||
module.exports = angular.module('ponyfm').controller "sidebar", [
|
||||
'$scope', '$modal', 'playlists', '$rootScope', '$timeout'
|
||||
($scope, $modal, playlists, $rootScope, $timeout) ->
|
||||
'$scope', '$modal', 'playlists', '$rootScope', '$timeout', '$mdDialog', '$mdMedia'
|
||||
($scope, $modal, playlists, $rootScope, $timeout, $mdDialog, $mdMedia) ->
|
||||
$scope.playlists = playlists.pinnedPlaylists
|
||||
$scope.menuVisible = false
|
||||
$scope.menuActive = false
|
||||
|
|
@ -36,10 +36,7 @@ module.exports = angular.module('ponyfm').controller "sidebar", [
|
|||
|
||||
$rootScope.$on('sidebarHide', () ->
|
||||
$timeout(() ->
|
||||
$scope.navStyle.transform = ''
|
||||
$scope.menuAnimated = true
|
||||
$scope.menuVisible = false
|
||||
$scope.menuActive = false
|
||||
hideNav()
|
||||
)
|
||||
)
|
||||
|
||||
|
|
@ -77,69 +74,18 @@ module.exports = angular.module('ponyfm').controller "sidebar", [
|
|||
playlists.deletePlaylist playlist
|
||||
|
||||
$scope.showCredits = () ->
|
||||
$modal
|
||||
useFullScreen = ($mdMedia('sm') || $mdMedia('xs')) && $scope.customFullscreen
|
||||
$mdDialog.show
|
||||
templateUrl: '/templates/partials/credits-dialog.html'
|
||||
controller: 'credits',
|
||||
show: true
|
||||
clickOutsideToClose: true,
|
||||
fullscreen: useFullScreen
|
||||
|
||||
# Swipable side nav code
|
||||
startX = 0
|
||||
currentX = 0
|
||||
touchingNav = false
|
||||
|
||||
onStart = (e) ->
|
||||
|
||||
if !$scope.menuVisible
|
||||
return
|
||||
|
||||
startX = e.touches[0].pageX
|
||||
currentX = startX
|
||||
touchingNav = true
|
||||
$scope.menuAnimated = false
|
||||
requestAnimationFrame(update)
|
||||
|
||||
onMove = (e) ->
|
||||
if !touchingNav
|
||||
return
|
||||
|
||||
currentX = e.touches[0].pageX
|
||||
translateX = Math.min(0, currentX - startX)
|
||||
|
||||
if translateX < 0
|
||||
e.preventDefault()
|
||||
|
||||
onEnd = (e) ->
|
||||
if !touchingNav
|
||||
return
|
||||
|
||||
touchingNav = false
|
||||
translateX = Math.min(0, currentX - startX)
|
||||
$scope.menuAnimated = true
|
||||
|
||||
if translateX < 0
|
||||
hideNav()
|
||||
hideNav()
|
||||
|
||||
hideNav = () ->
|
||||
$scope.navStyle.transform = ''
|
||||
$scope.menuAnimated = true
|
||||
$scope.menuVisible = false
|
||||
$scope.menuActive = false
|
||||
$scope.$apply()
|
||||
|
||||
update = () ->
|
||||
if !touchingNav
|
||||
return
|
||||
|
||||
requestAnimationFrame(update)
|
||||
|
||||
translateX = 170 + Math.min(0, currentX - startX)
|
||||
$scope.navStyle.transform = 'translateX(' + translateX + 'px)'
|
||||
$scope.$apply()
|
||||
|
||||
addEventListeners = () ->
|
||||
document.addEventListener('touchstart', onStart)
|
||||
document.addEventListener('touchmove', onMove)
|
||||
document.addEventListener('touchend', onEnd)
|
||||
|
||||
addEventListeners()
|
||||
]
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
|
||||
module.exports = angular.module('ponyfm').directive 'pfmShareButtons', () ->
|
||||
(scope, element) ->
|
||||
window.setTimeout((->
|
||||
Tumblr.activate_share_on_tumblr_buttons()
|
||||
FB.XFBML.parse(null, -> element.addClass('loaded'))
|
||||
), 0)
|
||||
#window.setTimeout((->
|
||||
# Tumblr.activate_share_on_tumblr_buttons()
|
||||
# FB.XFBML.parse(null, -> element.addClass('loaded'))
|
||||
#), 0)
|
||||
|
|
|
|||
|
|
@ -31,19 +31,30 @@ module.exports = angular.module('ponyfm').factory('color', [
|
|||
b = h.indexOf(hex[5]) * 16 + h.indexOf(hex[6])
|
||||
return [r,g,b]
|
||||
|
||||
dimColor: (colour) ->
|
||||
dimColor: (colour, alt) ->
|
||||
hsl = self.rgbToHsl(self.hexToRgb(colour))
|
||||
altHsl = self.rgbToHsl(self.hexToRgb(alt))
|
||||
|
||||
if hsl[2] >= 50
|
||||
hsl[2] = 50
|
||||
if hsl[1] <= 20
|
||||
hsl[1] = 30
|
||||
return self.hslToRgb(hsl)
|
||||
else
|
||||
return self.hexToRgb(colour)
|
||||
|
||||
if hsl[2] <= 20
|
||||
if altHsl[2] <= 50
|
||||
hsl = altHsl
|
||||
hsl[2] = 20
|
||||
else
|
||||
if hsl[1] <= 25
|
||||
hsl[0] = altHsl[0]
|
||||
hsl[1] = altHsl[1]
|
||||
hsl[2] = 20
|
||||
|
||||
return self.hslToRgb(hsl)
|
||||
|
||||
createGradient: (vib, dark) ->
|
||||
'linear-gradient(180deg, ' + vib + ' 0%, ' + self.rgbArrayToCss(self.dimColor(dark)) + ' 95%)'
|
||||
'linear-gradient(180deg, ' + vib + ' 0%, ' + self.rgbArrayToCss(self.dimColor(dark, vib)) + ' 95%)'
|
||||
|
||||
findHighestSaturation: (hsl1, hsl2) ->
|
||||
if hsl1[1] > hsl2[1]
|
||||
|
|
|
|||
22
resources/assets/styles/content.less
vendored
22
resources/assets/styles/content.less
vendored
|
|
@ -566,6 +566,10 @@ html {
|
|||
}
|
||||
}
|
||||
|
||||
.loading .notification-menu md-icon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.notification-menu {
|
||||
float: right;
|
||||
margin-top: 9px;
|
||||
|
|
@ -575,12 +579,9 @@ html {
|
|||
top: 0;
|
||||
right: 60px;
|
||||
|
||||
a {
|
||||
.md-button .material-icons {
|
||||
color: #fff;
|
||||
|
||||
i {
|
||||
font-size: 30px;
|
||||
}
|
||||
font-size: 30px;
|
||||
|
||||
&:hover {
|
||||
color: #eee;
|
||||
|
|
@ -698,7 +699,7 @@ form.thin md-input-container {
|
|||
margin: 15px 0 0 0;
|
||||
}
|
||||
|
||||
md-card.album {
|
||||
md-card.album, md-card.user {
|
||||
md-card-content {
|
||||
padding: 4px 12px;
|
||||
span {
|
||||
|
|
@ -718,6 +719,15 @@ md-card.album {
|
|||
min-height: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.user-info {
|
||||
margin: 0 12px 8px;
|
||||
|
||||
span {
|
||||
margin: 0;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.button-bar {
|
||||
|
|
|
|||
2
resources/assets/styles/mobile.less
vendored
2
resources/assets/styles/mobile.less
vendored
|
|
@ -344,7 +344,7 @@
|
|||
right: 60px !important;
|
||||
font-size: 22px;
|
||||
margin-right: 0 !important;
|
||||
margin-top: 12px !important;
|
||||
margin-top: 8px !important;
|
||||
|
||||
a {
|
||||
padding: 13px 7px 22px;
|
||||
|
|
|
|||
|
|
@ -63,12 +63,11 @@
|
|||
</md-menu>
|
||||
</div>
|
||||
<div class="notification-menu">
|
||||
<a href="#" ng-click="notifPulloutToggle()"><i class="material-icons">notifications</i></a>
|
||||
<md-button ng-click="notifPulloutToggle()" class="md-icon-button"><md-icon>notifications</md-icon></md-button>
|
||||
<div class="counter" ng-class="{'show': nCount > 0}">@{{ nCountFormatted }}</div>
|
||||
</div>
|
||||
@endif
|
||||
<a href="#" ng-click="toggleSearchBar()" class="search-button"><i class="material-icons">search</i></a>
|
||||
<md-progress-linear md-mode="indeterminate" class="loader" ng-disabled="!loading"></md-progress-linear>
|
||||
<md-progress-linear md-mode="indeterminate" class="loader" ng-disabled="hideLoading"></md-progress-linear>
|
||||
</div>
|
||||
<div class="now-playing" ng-class="{'playing': isPlaying}">
|
||||
<pfm-player></pfm-player>
|
||||
|
|
|
|||
Loading…
Reference in a new issue