mirror of
https://github.com/Poniverse/Pony.fm.git
synced 2024-11-22 04:58:01 +01:00
Killing animations...
This commit is contained in:
nelsonlaquet
parent
9c9aeabf30
commit
d9d44f9e6e
12 changed files with 401 additions and 253 deletions
|
|
@ -88,7 +88,7 @@
|
|||
</ul>
|
||||
</nav>
|
||||
</section>
|
||||
<section ui-view class="site-content" ng-animate="'site-content-animate'">
|
||||
<section ui-view class="site-content">
|
||||
@yield('app_content')
|
||||
</section>
|
||||
</div>
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 137 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 186 KiB |
|
|
@ -8,56 +8,88 @@ angular.module 'ponyfm', ['ui.bootstrap', 'ui.state', 'ui.date', 'ui.sortable'],
|
|||
url: '/account'
|
||||
templateUrl: '/templates/account/settings.html'
|
||||
controller: 'account-settings'
|
||||
navigation:
|
||||
index: 9
|
||||
|
||||
state.state 'account-content',
|
||||
url: '/account'
|
||||
abstract: true
|
||||
templateUrl: '/templates/account/content/_layout.html'
|
||||
navigation:
|
||||
index: 8
|
||||
|
||||
state.state 'account-content.tracks',
|
||||
url: '/tracks'
|
||||
templateUrl: '/templates/account/content/tracks.html'
|
||||
controller: 'account-tracks'
|
||||
navigation:
|
||||
index: 8
|
||||
subIndex: 1
|
||||
|
||||
state.state 'account-content.tracks.edit',
|
||||
url: '/edit/:track_id'
|
||||
navigation:
|
||||
index: 8
|
||||
subIndex: 1
|
||||
|
||||
state.state 'account-content.albums',
|
||||
url: '/albums'
|
||||
templateUrl: '/templates/account/content/albums.html'
|
||||
controller: 'account-albums'
|
||||
navigation:
|
||||
index: 8
|
||||
subIndex: 2
|
||||
|
||||
state.state 'account-content.albums.create',
|
||||
url: '/create'
|
||||
templateUrl: '/templates/account/content/album.html'
|
||||
controller: 'account-albums-edit'
|
||||
navigation:
|
||||
index: 8
|
||||
subIndex: 2
|
||||
|
||||
state.state 'account-content.albums.edit',
|
||||
url: '/edit/:album_id'
|
||||
templateUrl: '/templates/account/content/album.html'
|
||||
controller: 'account-albums-edit'
|
||||
navigation:
|
||||
index: 8
|
||||
subIndex: 2
|
||||
|
||||
state.state 'account-content-playlists',
|
||||
url: '/account/playlists'
|
||||
templateUrl: '/templates/account/content/playlists.html'
|
||||
controller: 'account-playlists'
|
||||
navigation:
|
||||
index: 6
|
||||
|
||||
state.state 'account-favourites',
|
||||
url: '/account/favourites'
|
||||
abstract: true
|
||||
templateUrl: '/templates/account/favourites/_layout.html'
|
||||
navigation:
|
||||
index: 7
|
||||
|
||||
state.state 'account-favourites.tracks',
|
||||
url: ''
|
||||
templateUrl: '/templates/account/favourites/tracks.html'
|
||||
navigation:
|
||||
index: 7
|
||||
subIndex: 1
|
||||
|
||||
state.state 'account-favourites.playlists',
|
||||
url: '/playlists'
|
||||
templateUrl: '/templates/account/favourites/playlists.html'
|
||||
navigation:
|
||||
index: 7
|
||||
subIndex: 3
|
||||
|
||||
state.state 'account-favourites.albums',
|
||||
url: '/albums'
|
||||
templateUrl: '/templates/account/favourites/albums.html'
|
||||
navigation:
|
||||
index: 7
|
||||
subIndex: 2
|
||||
|
||||
# Tracks
|
||||
|
||||
|
|
@ -65,39 +97,53 @@ angular.module 'ponyfm', ['ui.bootstrap', 'ui.state', 'ui.date', 'ui.sortable'],
|
|||
url: '/tracks'
|
||||
templateUrl: '/templates/tracks/index.html'
|
||||
controller: 'tracks'
|
||||
navigation:
|
||||
index: 2
|
||||
|
||||
# Albums
|
||||
|
||||
state.state 'albums',
|
||||
url: '/albums'
|
||||
templateUrl: '/templates/albums/index.html'
|
||||
navigation:
|
||||
index: 3
|
||||
|
||||
# Playlists
|
||||
|
||||
state.state 'playlists',
|
||||
url: '/playlists'
|
||||
templateUrl: '/templates/playlists/index.html'
|
||||
navigation:
|
||||
index: 4
|
||||
|
||||
state.state 'playlist',
|
||||
url: '/playlist/:id/:slug'
|
||||
templateUrl: '/templates/playlists/show.html'
|
||||
controller: 'playlist'
|
||||
navigation:
|
||||
index: 4
|
||||
|
||||
# Artists
|
||||
|
||||
state.state 'artists',
|
||||
url: '/artists'
|
||||
templateUrl: '/templates/artists/index.html'
|
||||
navigation:
|
||||
index: 5
|
||||
|
||||
# Pages
|
||||
|
||||
state.state 'faq',
|
||||
url: '/faq'
|
||||
templateUrl: '/templates/pages/faq.html'
|
||||
navigation:
|
||||
index: 11
|
||||
|
||||
state.state 'about',
|
||||
url: '/about'
|
||||
templateUrl: '/templates/pages/about.html'
|
||||
navigation:
|
||||
index: 10
|
||||
|
||||
# Auth
|
||||
|
||||
|
|
@ -105,10 +151,14 @@ angular.module 'ponyfm', ['ui.bootstrap', 'ui.state', 'ui.date', 'ui.sortable'],
|
|||
url: '/login'
|
||||
templateUrl: '/templates/auth/login.html'
|
||||
controller: 'login'
|
||||
navigation:
|
||||
index: 12
|
||||
|
||||
state.state 'register',
|
||||
url: '/register'
|
||||
templateUrl: '/templates/auth/register.html'
|
||||
navigation:
|
||||
index: 13
|
||||
|
||||
# Hompage
|
||||
|
||||
|
|
@ -117,10 +167,14 @@ angular.module 'ponyfm', ['ui.bootstrap', 'ui.state', 'ui.date', 'ui.sortable'],
|
|||
url: '/'
|
||||
templateUrl: '/templates/dashboard.html'
|
||||
controller: 'dashboard'
|
||||
navigation:
|
||||
index: 0
|
||||
else
|
||||
state.state 'home',
|
||||
url: '/'
|
||||
templateUrl: '/templates/home/index.html'
|
||||
navigation:
|
||||
index: 0
|
||||
|
||||
route.otherwise '/'
|
||||
|
||||
|
|
|
|||
|
|
@ -9,8 +9,44 @@ angular.module('ponyfm').controller "application", [
|
|||
auth.logout().done -> location.reload()
|
||||
|
||||
$scope.isActive = (loc) -> $location.path() == loc
|
||||
$scope.$on '$viewContentLoaded', () -> window.handleResize()
|
||||
$scope.$on '$viewContentLoaded', () ->
|
||||
window.setTimeout window.handleResize, 500
|
||||
|
||||
# Show loading screen here?
|
||||
taxonomies.refresh()
|
||||
|
||||
$scope.mainViewAnimation = 'slide-down';
|
||||
|
||||
$scope.$on '$stateChangeStart', (e, newState, newParams, oldState) ->
|
||||
oldIndex =
|
||||
if (oldState && oldState.navigation && oldState.navigation.index)
|
||||
oldState.navigation.index
|
||||
else
|
||||
0
|
||||
|
||||
newIndex =
|
||||
if (newState && newState.navigation && newState.navigation.index)
|
||||
newState.navigation.index
|
||||
else
|
||||
0
|
||||
|
||||
oldSubIndex =
|
||||
if (oldState && oldState.navigation && oldState.navigation.subIndex)
|
||||
oldState.navigation.subIndex
|
||||
else
|
||||
0
|
||||
|
||||
newSubIndex =
|
||||
if (newState && newState.navigation && newState.navigation.subIndex)
|
||||
newState.navigation.subIndex
|
||||
else
|
||||
0
|
||||
|
||||
$scope.mainViewAnimation = 'slide-down' if oldIndex > newIndex
|
||||
$scope.mainViewAnimation = 'slide-up' if oldIndex < newIndex
|
||||
$scope.mainViewAnimation = 'slide-right' if oldIndex == newIndex
|
||||
|
||||
$scope.subViewAnimation = 'slide-right' if oldSubIndex > newSubIndex
|
||||
$scope.subViewAnimation = 'slide-left' if oldSubIndex < newSubIndex
|
||||
$scope.subViewAnimation = 'slide-up' if oldSubIndex == newSubIndex
|
||||
]
|
||||
|
|
@ -2,16 +2,17 @@ window.handleResize = () ->
|
|||
windowHeight = $(window).height()
|
||||
$siteBody = $ '.site-body'
|
||||
$siteBody.height windowHeight - $('header').height() - 1
|
||||
redo = false
|
||||
|
||||
$('.stretch-to-bottom').each () ->
|
||||
$this = $ this
|
||||
$this.height windowHeight - $this.offset().top
|
||||
newHeight = windowHeight - $this.offset().top + 1
|
||||
if newHeight <= 0
|
||||
redo = true
|
||||
else
|
||||
$this.height newHeight
|
||||
|
||||
backgroundOne = $ '.background-one'
|
||||
backgroundTwo = $ '.background-two'
|
||||
|
||||
backgroundOne.css 'left', $('.site-content ').offset().left - backgroundOne.width()
|
||||
backgroundTwo.css 'left', $('.site-content').offset().left + $('.site-content').width()
|
||||
window.setTimeout(window.handleResize, 0) if redo
|
||||
|
||||
window.alignVertically = (element) ->
|
||||
$element = $(element)
|
||||
|
|
|
|||
94
public/styles/animations.less
Normal file
94
public/styles/animations.less
Normal file
|
|
@ -0,0 +1,94 @@
|
|||
@import 'base/bootstrap/bootstrap';
|
||||
@import 'mixins';
|
||||
|
||||
.slide-down-enter, .slide-down-leave,
|
||||
.slide-up-enter, .slide-up-leave,
|
||||
.slide-right-enter, .slide-right-leave {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
// ---------------------------------------
|
||||
// Down
|
||||
// ---------------------------------------
|
||||
.slide-down-enter {
|
||||
.transition(all 400ms ease-out);
|
||||
.transform(translate(0, -100%));
|
||||
}
|
||||
|
||||
.slide-down-enter.slide-down-enter-active {
|
||||
.transform(translate(0, 0));
|
||||
}
|
||||
|
||||
.slide-down-leave {
|
||||
.transition(all 400ms ease-out);
|
||||
.transform(translate(0, 0));
|
||||
}
|
||||
|
||||
.slide-down-leave.slide-down-leave-active {
|
||||
.transform(translate(0, 100%));
|
||||
}
|
||||
|
||||
// ---------------------------------------
|
||||
// Up
|
||||
// ---------------------------------------
|
||||
.slide-up-enter {
|
||||
.transition(all 400ms ease-out);
|
||||
.transform(translate(0, 100%));
|
||||
}
|
||||
|
||||
.slide-up-enter.slide-up-enter-active {
|
||||
.transform(translate(0, 0));
|
||||
}
|
||||
|
||||
.slide-up-leave {
|
||||
.transition(all 400ms ease-out);
|
||||
.transform(translate(0, 0));
|
||||
}
|
||||
|
||||
.slide-up-leave.slide-up-leave-active {
|
||||
.transform(translate(0, -100%));
|
||||
}
|
||||
|
||||
// ---------------------------------------
|
||||
// Right
|
||||
// ---------------------------------------
|
||||
|
||||
.slide-right-enter {
|
||||
.transition(all 400ms ease-out);
|
||||
.transform(translate(-100%, 0));
|
||||
}
|
||||
|
||||
.slide-right-enter.slide-right-enter-active {
|
||||
.transform(translate(0, 0));
|
||||
}
|
||||
|
||||
.slide-right-leave {
|
||||
.transition(all 400ms ease-out);
|
||||
.transform(translate(0, 0));
|
||||
}
|
||||
|
||||
.slide-right-leave.slide-right-leave-active {
|
||||
.transform(translate(100%, 0));
|
||||
}
|
||||
|
||||
// ---------------------------------------
|
||||
// Left
|
||||
// ---------------------------------------
|
||||
|
||||
.slide-left-enter {
|
||||
.transition(all 400ms ease-out);
|
||||
.transform(translate(100%, 0));
|
||||
}
|
||||
|
||||
.slide-left-enter.slide-left-enter-active {
|
||||
.transform(translate(0, 0));
|
||||
}
|
||||
|
||||
.slide-left-leave {
|
||||
.transition(all 400ms ease-out);
|
||||
.transform(translate(0, 0));
|
||||
}
|
||||
|
||||
.slide-left-leave.slide-left-leave-active {
|
||||
.transform(translate(-100%, 0));
|
||||
}
|
||||
|
|
@ -6,4 +6,5 @@
|
|||
@import 'account-content';
|
||||
@import 'components';
|
||||
@import 'forms';
|
||||
@import 'tracks';
|
||||
@import 'tracks';
|
||||
@import 'animations';
|
||||
|
|
@ -21,60 +21,6 @@ html body {
|
|||
z-index: -5;
|
||||
}
|
||||
|
||||
.background-one, .background-two {
|
||||
z-index: -4;
|
||||
background-repeat: no-repeat;
|
||||
background-position: bottom right;
|
||||
height: 100%;
|
||||
width: 350px;
|
||||
position: fixed;
|
||||
background-size: 35%;
|
||||
}
|
||||
|
||||
html .background-one {
|
||||
background-image: url('/images/octavia.png');
|
||||
background-position: bottom right;
|
||||
opacity: .1;
|
||||
}
|
||||
|
||||
html .background-two {
|
||||
background-image: url('/images/vinyl.png');
|
||||
background-position: bottom left;
|
||||
opacity: .1;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.site-content {
|
||||
.perspective();
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.site-content-animate-enter, .site-content-animate-leave {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.site-content-animate-enter {
|
||||
.transition(all 400ms ease-out);
|
||||
.transform(translate(0, -100%));
|
||||
}
|
||||
|
||||
.site-content-animate-enter.site-content-animate-enter-active {
|
||||
.transform(translate(0, 0));
|
||||
}
|
||||
|
||||
.site-content-animate-leave {
|
||||
.transition(all 400ms ease-out);
|
||||
.transform(translate(0, 0));
|
||||
}
|
||||
|
||||
.site-content-animate-leave.site-content-animate-leave-active {
|
||||
.transform(translate(0, 100%));
|
||||
}
|
||||
|
||||
header {
|
||||
.clearfix();
|
||||
background: #222;
|
||||
|
|
@ -392,17 +338,18 @@ header {
|
|||
}
|
||||
|
||||
.site-content {
|
||||
.perspective();
|
||||
overflow: hidden;
|
||||
border: 5px solid #222;
|
||||
border-top: none;
|
||||
border-bottom: none;
|
||||
position: relative;
|
||||
|
||||
height: 100%;
|
||||
margin-left: 148px;
|
||||
|
||||
> div {
|
||||
.box-sizing(border-box);
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #fff;
|
||||
|
|
@ -412,6 +359,17 @@ header {
|
|||
}
|
||||
}
|
||||
|
||||
.inner-view {
|
||||
position: relative;
|
||||
|
||||
> div {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #fff;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
.site-content {
|
||||
h1 {
|
||||
border: none;
|
||||
|
|
|
|||
|
|
@ -4,5 +4,5 @@
|
|||
<li ng-class="{active: $state.includes('account-content.albums')}"><a href="/account/albums">Albums</a></li>
|
||||
</ul>
|
||||
|
||||
<div ui-view></div>
|
||||
<div ui-view class="inner-view"></div>
|
||||
</div>
|
||||
|
|
@ -1,27 +1,29 @@
|
|||
<ul class="dropdowns">
|
||||
<li class="dropdown">
|
||||
<a class="btn" href="/account/albums/create" ng-class="{'btn-primary': data.isEditorOpen && data.selectedAlbum == null}">
|
||||
<i class="icon-plus"></i> Create Album
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div>
|
||||
<ul class="dropdowns">
|
||||
<li class="dropdown">
|
||||
<a class="btn" href="/account/albums/create" ng-class="{'btn-primary': data.isEditorOpen && data.selectedAlbum == null}">
|
||||
<i class="icon-plus"></i> Create Album
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="two-pane-view" ng-class="{open: data.isEditorOpen, closed: !data.isEditorOpen}">
|
||||
<div class="list">
|
||||
<ul class="account-albums-listing stretch-to-bottom">
|
||||
<li ng-repeat="album in albums" ng-class="{selected: album.id == data.selectedAlbum.id}">
|
||||
<a href="/account/albums/edit/{{album.id}}">
|
||||
<img class="image" ng-src="{{album.covers.normal}}" />
|
||||
<span class="title">{{album.title}}</span>
|
||||
<span class="published">{{album.created_at | pfmdate:'MM/dd/yyyy'}}</span>
|
||||
</a>
|
||||
</li>
|
||||
<li ng-show="!albums.length" class="empty">
|
||||
No albums found...
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="two-pane-view" ng-class="{open: data.isEditorOpen, closed: !data.isEditorOpen}">
|
||||
<div class="list">
|
||||
<ul class="account-albums-listing stretch-to-bottom">
|
||||
<li ng-repeat="album in albums" ng-class="{selected: album.id == data.selectedAlbum.id}">
|
||||
<a href="/account/albums/edit/{{album.id}}">
|
||||
<img class="image" ng-src="{{album.covers.normal}}" />
|
||||
<span class="title">{{album.title}}</span>
|
||||
<span class="published">{{album.created_at | pfmdate:'MM/dd/yyyy'}}</span>
|
||||
</a>
|
||||
</li>
|
||||
<li ng-show="!albums.length" class="empty">
|
||||
No albums found...
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="editor" ui-view>
|
||||
<div class="editor" ui-view>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,176 +1,178 @@
|
|||
<ul class="dropdowns">
|
||||
<li class="dropdown">
|
||||
<a class="dropdown-toggle btn">
|
||||
Published: <strong>{{filter.published.title}}</strong>
|
||||
</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li ng-repeat="filter in filters.published">
|
||||
<a pfm-eat-click href="#" ng-click="updateFilter('published', filter)">{{filter.title}}</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="dropdown">
|
||||
<a class="dropdown-toggle btn">
|
||||
Sort: <strong>{{filter.sort.title}}</strong>
|
||||
</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li ng-repeat="filter in filters.sort">
|
||||
<a pfm-eat-click href="#" ng-click="updateFilter('sort', filter)">{{filter.title}}</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="dropdown">
|
||||
<a class="dropdown-toggle btn">
|
||||
Type: <strong>{{titles.trackTypes}}</strong>
|
||||
</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li ng-repeat="type in taxonomies.trackTypes" ng-class="{selected: filter.trackTypes[type.id]}">
|
||||
<a pfm-eat-click href="#" ng-click="toggleFilter('trackTypes', type.id); $event.stopPropagation();">{{type.title}}</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="dropdown">
|
||||
<a class="dropdown-toggle btn">
|
||||
Genera: <strong>{{titles.genres}}</strong>
|
||||
</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li ng-repeat="genre in taxonomies.genres" ng-class="{selected: filter.genres[genre.id]}">
|
||||
<a pfm-eat-click href="#" ng-click="toggleFilter('genres', genre.id); $event.stopPropagation();">{{genre.name}}</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="two-pane-view" ng-class="{open: selectedTrack != null, closed: selectedTrack == null}">
|
||||
<div class="list">
|
||||
<ul class="account-tracks-listing stretch-to-bottom">
|
||||
<li ng-repeat="track in tracks" ng-class="{selected: track.id == selectedTrack.id, 'is-not-published': !track.is_published}">
|
||||
<a href="/account/tracks/edit/{{track.id}}">
|
||||
<img class="image" ng-src="{{track.cover_url}}" />
|
||||
<span class="title">{{track.title}}</span>
|
||||
<span class="published">{{track.created_at | pfmdate:'MM/dd/yyyy'}}</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="editor">
|
||||
<form novalidate ng-submit="updateTrack(edit)">
|
||||
<ul class="toolbar">
|
||||
<li>
|
||||
<button type="submit" class="btn" ng-class="{disabled: (selectedTrack.is_published && !isDirty) || isSaving, 'btn-primary': !selectedTrack.is_published || isDirty}">
|
||||
<span ng-show="selectedTrack.is_published">
|
||||
Save Changes
|
||||
</span>
|
||||
<span ng-hide="selectedTrack.is_published">
|
||||
Publish Track
|
||||
</span>
|
||||
|
||||
<i ng-show="isSaving" class="icon-cog icon-spin icon-large"></i>
|
||||
</button>
|
||||
<div>
|
||||
<ul class="dropdowns">
|
||||
<li class="dropdown">
|
||||
<a class="dropdown-toggle btn">
|
||||
Published: <strong>{{filter.published.title}}</strong>
|
||||
</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li ng-repeat="filter in filters.published">
|
||||
<a pfm-eat-click href="#" ng-click="updateFilter('published', filter)">{{filter.title}}</a>
|
||||
</li>
|
||||
<li class="delete"><a ng-class="{disabled: isSaving}" class="btn btn-danger" href="#" ng-click="deleteTrack(selectedTrack)" pfm-eat-click>Delete Track</a></li>
|
||||
</ul>
|
||||
<div class="stretch-to-bottom">
|
||||
<div class="form-row" ng-class="{'has-error': errors.title != null}">
|
||||
<label for="title" class="strong">Title:</label>
|
||||
<input ng-disabled="isSaving" ng-change="touchModel()" placeholder="Track Title" type="text" id="title" ng-model="edit.title" />
|
||||
<div class="error">{{errors.title}}</div>
|
||||
</div>
|
||||
<div class="row-fluid">
|
||||
<div class="span6 form-row" ng-class="{'has-error': errors.description != null}">
|
||||
<label for="description" class="strong">Description:</label>
|
||||
<textarea ng-disabled="isSaving" ng-change="touchModel()" placeholder="Description (optional)" id="description" ng-model="edit.description"></textarea>
|
||||
<div class="error">{{errors.description}}</div>
|
||||
</li>
|
||||
<li class="dropdown">
|
||||
<a class="dropdown-toggle btn">
|
||||
Sort: <strong>{{filter.sort.title}}</strong>
|
||||
</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li ng-repeat="filter in filters.sort">
|
||||
<a pfm-eat-click href="#" ng-click="updateFilter('sort', filter)">{{filter.title}}</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="dropdown">
|
||||
<a class="dropdown-toggle btn">
|
||||
Type: <strong>{{titles.trackTypes}}</strong>
|
||||
</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li ng-repeat="type in taxonomies.trackTypes" ng-class="{selected: filter.trackTypes[type.id]}">
|
||||
<a pfm-eat-click href="#" ng-click="toggleFilter('trackTypes', type.id); $event.stopPropagation();">{{type.title}}</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="dropdown">
|
||||
<a class="dropdown-toggle btn">
|
||||
Genera: <strong>{{titles.genres}}</strong>
|
||||
</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li ng-repeat="genre in taxonomies.genres" ng-class="{selected: filter.genres[genre.id]}">
|
||||
<a pfm-eat-click href="#" ng-click="toggleFilter('genres', genre.id); $event.stopPropagation();">{{genre.name}}</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="two-pane-view" ng-class="{open: selectedTrack != null, closed: selectedTrack == null}">
|
||||
<div class="list">
|
||||
<ul class="account-tracks-listing stretch-to-bottom">
|
||||
<li ng-repeat="track in tracks" ng-class="{selected: track.id == selectedTrack.id, 'is-not-published': !track.is_published}">
|
||||
<a href="/account/tracks/edit/{{track.id}}">
|
||||
<img class="image" ng-src="{{track.cover_url}}" />
|
||||
<span class="title">{{track.title}}</span>
|
||||
<span class="published">{{track.created_at | pfmdate:'MM/dd/yyyy'}}</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="editor">
|
||||
<form novalidate ng-submit="updateTrack(edit)">
|
||||
<ul class="toolbar">
|
||||
<li>
|
||||
<button type="submit" class="btn" ng-class="{disabled: (selectedTrack.is_published && !isDirty) || isSaving, 'btn-primary': !selectedTrack.is_published || isDirty}">
|
||||
<span ng-show="selectedTrack.is_published">
|
||||
Save Changes
|
||||
</span>
|
||||
<span ng-hide="selectedTrack.is_published">
|
||||
Publish Track
|
||||
</span>
|
||||
|
||||
<i ng-show="isSaving" class="icon-cog icon-spin icon-large"></i>
|
||||
</button>
|
||||
</li>
|
||||
<li class="delete"><a ng-class="{disabled: isSaving}" class="btn btn-danger" href="#" ng-click="deleteTrack(selectedTrack)" pfm-eat-click>Delete Track</a></li>
|
||||
</ul>
|
||||
<div class="stretch-to-bottom">
|
||||
<div class="form-row" ng-class="{'has-error': errors.title != null}">
|
||||
<label for="title" class="strong">Title:</label>
|
||||
<input ng-disabled="isSaving" ng-change="touchModel()" placeholder="Track Title" type="text" id="title" ng-model="edit.title" />
|
||||
<div class="error">{{errors.title}}</div>
|
||||
</div>
|
||||
<div class="span6 form-row" ng-class="{'has-error': errors.lyrics != null}">
|
||||
<label for="is_vocal" class="strong"><input ng-disabled="isSaving" ng-change="touchModel(); updateIsVocal()" id="is_vocal" type="checkbox" ng-model="edit.is_vocal" /> Is Vocal</label>
|
||||
<textarea ng-disabled="isSaving" ng-change="touchModel()" ng-show="edit.is_vocal" ng-animate="'fade'" placeholder="Lyrics (required)" id="lyrics" ng-model="edit.lyrics"></textarea>
|
||||
<div class="error">{{errors.lyrics}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row-fluid">
|
||||
<div class="form-row span6" ng-class="{'has-error': errors.genre_id != null}">
|
||||
<label for="genre" class="strong">Genre:</label>
|
||||
<select ng-disabled="isSaving" id="genre" ng-change="touchModel()" ng-model="edit.genre_id" ng-options="genre.id as genre.name for genre in taxonomies.genres">
|
||||
<option value="">Please select a genre...</option>
|
||||
</select>
|
||||
<div class="error">{{errors.genre_id}}</div>
|
||||
</div>
|
||||
<div class="form-row span6" ng-class="{'has-error': errors.track_type_id != null}">
|
||||
<label for="track_type" class="strong">This track is...</label>
|
||||
<select ng-disabled="isSaving" id="track_type" ng-change="touchModel()" ng-model="edit.track_type_id" ng-options="type.id as type.editor_title for type in taxonomies.trackTypes">
|
||||
<option value="">Please select a type...</option>
|
||||
</select>
|
||||
<div class="error">{{errors.track_type_id}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row-fluid">
|
||||
<div class="form-row album span6" ng-class="{'has-error': errors.show_song_ids != null}">
|
||||
<a pfm-popup="album-selector" href="#" class="btn btn-small">
|
||||
Album:
|
||||
<strong ng-show="selectedAlbum">{{selectedAlbum.title}}</strong>
|
||||
<strong ng-hide="selectedAlbum">None</strong>
|
||||
</a>
|
||||
<div id="album-selector" class="pfm-popup">
|
||||
<ul>
|
||||
<li ng-class="{selected: selectedAlbum == null}">
|
||||
<a pfm-eat-click href="#" ng-click="selectAlbum(null);">None</a>
|
||||
</li>
|
||||
<li ng-repeat="album in albums" ng-class="{selected: selectedAlbum.id == album.id}">
|
||||
<a pfm-eat-click href="#" ng-click="selectAlbum(album);">{{album.title}}</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="row-fluid">
|
||||
<div class="span6 form-row" ng-class="{'has-error': errors.description != null}">
|
||||
<label for="description" class="strong">Description:</label>
|
||||
<textarea ng-disabled="isSaving" ng-change="touchModel()" placeholder="Description (optional)" id="description" ng-model="edit.description"></textarea>
|
||||
<div class="error">{{errors.description}}</div>
|
||||
</div>
|
||||
<div class="error">{{errors.album_id}}</div>
|
||||
</div>
|
||||
<div class="form-row show-songs span6" ng-show="edit.track_type_id == 2" ng-class="{'has-error': errors.show_song_ids != null}">
|
||||
<a pfm-popup="song-selector" href="#" class="btn btn-small">Show Songs: <strong>{{selectedSongsTitle}}</strong></a>
|
||||
<div id="song-selector" class="pfm-popup">
|
||||
<ul>
|
||||
<li ng-repeat="song in taxonomies.showSongs" ng-class="{selected: selectedSongs[song.id]}">
|
||||
<a pfm-eat-click href="#" ng-click="toggleSong(song); $event.stopPropagation();">{{song.title}}</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="span6 form-row" ng-class="{'has-error': errors.lyrics != null}">
|
||||
<label for="is_vocal" class="strong"><input ng-disabled="isSaving" ng-change="touchModel(); updateIsVocal()" id="is_vocal" type="checkbox" ng-model="edit.is_vocal" /> Is Vocal</label>
|
||||
<textarea ng-disabled="isSaving" ng-change="touchModel()" ng-show="edit.is_vocal" ng-animate="'fade'" placeholder="Lyrics (required)" id="lyrics" ng-model="edit.lyrics"></textarea>
|
||||
<div class="error">{{errors.lyrics}}</div>
|
||||
</div>
|
||||
<div class="error">{{errors.show_song_ids}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row-fluid">
|
||||
<div class="form-row span6" ng-class="{'has-error': errors.cover != null}">
|
||||
<label class="strong">Track Cover: </label>
|
||||
<pfm-image-upload set-image="setCover" image="edit.cover" />
|
||||
<div class="row-fluid">
|
||||
<div class="form-row span6" ng-class="{'has-error': errors.genre_id != null}">
|
||||
<label for="genre" class="strong">Genre:</label>
|
||||
<select ng-disabled="isSaving" id="genre" ng-change="touchModel()" ng-model="edit.genre_id" ng-options="genre.id as genre.name for genre in taxonomies.genres">
|
||||
<option value="">Please select a genre...</option>
|
||||
</select>
|
||||
<div class="error">{{errors.genre_id}}</div>
|
||||
</div>
|
||||
<div class="form-row span6" ng-class="{'has-error': errors.track_type_id != null}">
|
||||
<label for="track_type" class="strong">This track is...</label>
|
||||
<select ng-disabled="isSaving" id="track_type" ng-change="touchModel()" ng-model="edit.track_type_id" ng-options="type.id as type.editor_title for type in taxonomies.trackTypes">
|
||||
<option value="">Please select a type...</option>
|
||||
</select>
|
||||
<div class="error">{{errors.track_type_id}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row span6">
|
||||
<label for="released_at" class="strong">Release Date:</label>
|
||||
<input ng-disabled="isSaving" type="text" id="released_at" ui-date ng-model="edit.released_at" ng-change="touchModel()" ui-date-format="yy-mm-dd" />
|
||||
<div class="error">{{errors.released_at}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row-fluid">
|
||||
<div class="span6 form-row">
|
||||
<label for="is_explicit"><input ng-disabled="isSaving" ng-change="touchModel()" id="is_explicit" type="checkbox" ng-model="edit.is_explicit" /> Contains Explicit Content</label>
|
||||
</div>
|
||||
<div class="span6 form-row">
|
||||
<label for="is_downloadable"><input ng-disabled="isSaving" ng-change="touchModel()" id="is_downloadable" type="checkbox" ng-model="edit.is_downloadable" /> Is Downloadable</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<label class="strong">Choose a License:</label>
|
||||
<ul class="license-grid">
|
||||
<li ng-repeat="license in taxonomies.licenses" ng-class="{selected: edit.license_id == license.id}">
|
||||
<div ng-click="edit.license_id = license.id; touchModel()">
|
||||
<strong>{{license.title}}</strong>
|
||||
<p>{{license.description}}</p>
|
||||
<a href="#" pfm-eat-click class="btn" ng-class="{'btn-primary': edit.license_id == license.id, 'disabled': isSaving}">
|
||||
<span ng-hide="edit.license_id == license.id">Select</span>
|
||||
<span ng-show="edit.license_id == license.id">Selected</span>
|
||||
</a>
|
||||
<div class="row-fluid">
|
||||
<div class="form-row album span6" ng-class="{'has-error': errors.show_song_ids != null}">
|
||||
<a pfm-popup="album-selector" href="#" class="btn btn-small">
|
||||
Album:
|
||||
<strong ng-show="selectedAlbum">{{selectedAlbum.title}}</strong>
|
||||
<strong ng-hide="selectedAlbum">None</strong>
|
||||
</a>
|
||||
<div id="album-selector" class="pfm-popup">
|
||||
<ul>
|
||||
<li ng-class="{selected: selectedAlbum == null}">
|
||||
<a pfm-eat-click href="#" ng-click="selectAlbum(null);">None</a>
|
||||
</li>
|
||||
<li ng-repeat="album in albums" ng-class="{selected: selectedAlbum.id == album.id}">
|
||||
<a pfm-eat-click href="#" ng-click="selectAlbum(album);">{{album.title}}</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="error">{{errors.album_id}}</div>
|
||||
</div>
|
||||
<div class="form-row show-songs span6" ng-show="edit.track_type_id == 2" ng-class="{'has-error': errors.show_song_ids != null}">
|
||||
<a pfm-popup="song-selector" href="#" class="btn btn-small">Show Songs: <strong>{{selectedSongsTitle}}</strong></a>
|
||||
<div id="song-selector" class="pfm-popup">
|
||||
<ul>
|
||||
<li ng-repeat="song in taxonomies.showSongs" ng-class="{selected: selectedSongs[song.id]}">
|
||||
<a pfm-eat-click href="#" ng-click="toggleSong(song); $event.stopPropagation();">{{song.title}}</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="error">{{errors.show_song_ids}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row-fluid">
|
||||
<div class="form-row span6" ng-class="{'has-error': errors.cover != null}">
|
||||
<label class="strong">Track Cover: </label>
|
||||
<pfm-image-upload set-image="setCover" image="edit.cover" />
|
||||
</div>
|
||||
<div class="form-row span6">
|
||||
<label for="released_at" class="strong">Release Date:</label>
|
||||
<input ng-disabled="isSaving" type="text" id="released_at" ui-date ng-model="edit.released_at" ng-change="touchModel()" ui-date-format="yy-mm-dd" />
|
||||
<div class="error">{{errors.released_at}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row-fluid">
|
||||
<div class="span6 form-row">
|
||||
<label for="is_explicit"><input ng-disabled="isSaving" ng-change="touchModel()" id="is_explicit" type="checkbox" ng-model="edit.is_explicit" /> Contains Explicit Content</label>
|
||||
</div>
|
||||
<div class="span6 form-row">
|
||||
<label for="is_downloadable"><input ng-disabled="isSaving" ng-change="touchModel()" id="is_downloadable" type="checkbox" ng-model="edit.is_downloadable" /> Is Downloadable</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<label class="strong">Choose a License:</label>
|
||||
<ul class="license-grid">
|
||||
<li ng-repeat="license in taxonomies.licenses" ng-class="{selected: edit.license_id == license.id}">
|
||||
<div ng-click="edit.license_id = license.id; touchModel()">
|
||||
<strong>{{license.title}}</strong>
|
||||
<p>{{license.description}}</p>
|
||||
<a href="#" pfm-eat-click class="btn" ng-class="{'btn-primary': edit.license_id == license.id, 'disabled': isSaving}">
|
||||
<span ng-hide="edit.license_id == license.id">Select</span>
|
||||
<span ng-show="edit.license_id == license.id">Selected</span>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Loading…
Reference in a new issue