From 4c025dd1e9c3bb32e2554fd7e6ed8d37f5c8e314 Mon Sep 17 00:00:00 2001 From: nelsonlaquet Date: Thu, 22 Aug 2013 19:48:40 -0500 Subject: [PATCH] Further design changes --- app/library/Assets.php | 1 + public/scripts/app/app.coffee | 2 +- .../app/directives/favouriteButton.coffee | 1 + .../app/directives/track-player.coffee | 1 + public/scripts/app/filters/trust.coffee | 1 + public/scripts/base/bindonce.js | 193 ++++++++++++++++++ public/styles/body.less | 124 ++++++++++- public/styles/layout.less | 4 - public/styles/tracks.less | 64 ++++++ public/templates/directives/comments.html | 29 +-- public/templates/tracks/show.html | 104 +++++----- 11 files changed, 445 insertions(+), 79 deletions(-) create mode 100644 public/scripts/base/bindonce.js diff --git a/app/library/Assets.php b/app/library/Assets.php index 1ed80501..0e313a3a 100644 --- a/app/library/Assets.php +++ b/app/library/Assets.php @@ -52,6 +52,7 @@ new FileAsset('scripts/base/moment.js'), new FileAsset('scripts/base/soundmanager2-nodebug.js'), new FileAsset('scripts/base/angular.js'), + new FileAsset('scripts/base/bindonce.js'), new FileAsset('scripts/base/ui-bootstrap-tpls-0.4.0.js'), new FileAsset('scripts/base/angular-ui-sortable.js'), new FileAsset('scripts/base/angular-ui-date.js'), diff --git a/public/scripts/app/app.coffee b/public/scripts/app/app.coffee index ad874a48..be4b359e 100644 --- a/public/scripts/app/app.coffee +++ b/public/scripts/app/app.coffee @@ -1,6 +1,6 @@ window.pfm.preloaders = {} -module = angular.module 'ponyfm', ['ui.bootstrap', 'ui.state', 'ui.date', 'ui.sortable'] +module = angular.module 'ponyfm', ['ui.bootstrap', 'ui.state', 'ui.date', 'ui.sortable', 'pasvaz.bindonce'] module.config [ '$locationProvider', '$stateProvider', '$dialogProvider' diff --git a/public/scripts/app/directives/favouriteButton.coffee b/public/scripts/app/directives/favouriteButton.coffee index 889b8f76..05a1eed5 100644 --- a/public/scripts/app/directives/favouriteButton.coffee +++ b/public/scripts/app/directives/favouriteButton.coffee @@ -5,6 +5,7 @@ angular.module('ponyfm').directive 'pfmFavouriteButton', () -> resource: '=resource', class: '@class', type: '@type' + replace: true controller: [ '$scope', 'favourites', 'auth' diff --git a/public/scripts/app/directives/track-player.coffee b/public/scripts/app/directives/track-player.coffee index 36ab3c4e..a7791c4b 100644 --- a/public/scripts/app/directives/track-player.coffee +++ b/public/scripts/app/directives/track-player.coffee @@ -4,6 +4,7 @@ angular.module('ponyfm').directive 'pfmTrackPlayer', () -> scope: track: '=track', class: '@class' + replace: true controller: [ '$scope', 'player' diff --git a/public/scripts/app/filters/trust.coffee b/public/scripts/app/filters/trust.coffee index 76342839..500f377d 100644 --- a/public/scripts/app/filters/trust.coffee +++ b/public/scripts/app/filters/trust.coffee @@ -2,5 +2,6 @@ angular.module('ponyfm').filter 'trust', [ '$sce' ($sce) -> (input) -> + console.log input $sce.trustAsHtml input ] \ No newline at end of file diff --git a/public/scripts/base/bindonce.js b/public/scripts/base/bindonce.js new file mode 100644 index 00000000..b8456f18 --- /dev/null +++ b/public/scripts/base/bindonce.js @@ -0,0 +1,193 @@ +'use strict'; +/** + * Bindonce - Zero watches binding for AngularJs + * @version v0.1.1 - 2013-05-07 + * @link https://github.com/Pasvaz/bindonce + * @author Pasquale Vazzana + * @license MIT License, http://www.opensource.org/licenses/MIT + */ + +angular.module('pasvaz.bindonce', []) + + .directive('bindonce', function() { + var toBoolean = function(value) { + if (value && value.length !== 0) { + var v = angular.lowercase("" + value); + value = !(v == 'f' || v == '0' || v == 'false' || v == 'no' || v == 'n' || v == '[]'); + } else { + value = false; + } + return value; + } + + return { + restrict: "AM", + controller: ['$scope', '$element', '$attrs', function($scope, $element, $attrs) { + var showHideBinder = function(elm, attr, value) + { + var show = (attr == 'show') ? '' : 'none'; + var hide = (attr == 'hide') ? '' : 'none'; + elm.css('display', toBoolean(value) ? show : hide); + } + var classBinder = function(elm, value) + { + if (angular.isObject(value) && !angular.isArray(value)) { + var results = []; + angular.forEach(value, function(value, index) { + if (value) results.push(index); + }); + value = results; + } + if (value) { + elm.addClass(angular.isArray(value) ? value.join(' ') : value); + } + } + + var ctrl = + { + watcherRemover : undefined, + binders : [], + group : $attrs.boName, + element : $element, + ran : false, + + addBinder : function(binder) + { + this.binders.push(binder); + + // In case of late binding (when using the directive bo-name/bo-parent) + // it happens only when you use nested bindonce, if the bo-children + // are not dom children the linking can follow another order + if (this.ran) + { + this.runBinders(); + } + }, + + setupWatcher : function(bindonceValue) + { + var that = this; + this.watcherRemover = $scope.$watch(bindonceValue, function(newValue) + { + if (newValue == undefined) return; + that.removeWatcher(); + that.runBinders(); + }, true); + }, + + removeWatcher : function() + { + if (this.watcherRemover != undefined) + { + this.watcherRemover(); + this.watcherRemover = undefined; + } + }, + + runBinders : function() + { + for (var data in this.binders) + { + var binder = this.binders[data]; + if (this.group && this.group != binder.group ) continue; + var value = $scope.$eval(binder.value); + switch(binder.attr) + { + case 'hide': + case 'show': + showHideBinder(binder.element, binder.attr, value); + break; + case 'class': + classBinder(binder.element, value); + break; + case 'text': + binder.element.text(value); + break; + case 'html': + binder.element.html(value); + break; + case 'src': + case 'href': + case 'alt': + case 'title': + case 'id': + case 'style': + case 'value': + binder.element.attr(binder.attr, value); + break; + } + } + this.ran = true; + this.binders = []; + } + } + + return ctrl; + }], + + link: function(scope, elm, attrs, bindonceController) { + var value = (attrs.bindonce) ? scope.$eval(attrs.bindonce) : true; + if (value != undefined) + { + bindonceController.runBinders(); + } + else + { + bindonceController.setupWatcher(attrs.bindonce); + elm.bind("$destroy", bindonceController.removeWatcher); + } + } + }; + }); + +angular.forEach({ + 'boShow' : 'show', + 'boHide' : 'hide', + 'boClass' : 'class', + 'boText' : 'text', + 'boHtml' : 'html', + 'boSrc' : 'src', + 'boHref' : 'href', + 'boAlt' : 'alt', + 'boTitle' : 'title', + 'boId' : 'id', + 'boStyle' : 'style', + 'boValue' : 'value' + }, + function(tag, attribute) + { + var childPriority = 200; + return angular.module('pasvaz.bindonce').directive(attribute, function() + { + return { + priority: childPriority, + require: '^bindonce', + link: function(scope, elm, attrs, bindonceController) + { + var name = attrs.boParent; + if (name && bindonceController.group != name) + { + var element = bindonceController.element.parent(); + bindonceController = undefined; + var parentValue; + + while (element[0].nodeType != 9 && element.length) + { + if ((parentValue = element.data('$bindonceController')) + && parentValue.group == name) + { + bindonceController = parentValue + break; + } + element = element.parent(); + } + if (!bindonceController) + { + throw Error("No bindonce controller: " + name); + } + } + bindonceController.addBinder({element: elm, attr:tag, value: attrs[attribute], group: name}); + } + } + }); + }); diff --git a/public/styles/body.less b/public/styles/body.less index 5d91d034..0c8ae791 100644 --- a/public/styles/body.less +++ b/public/styles/body.less @@ -13,15 +13,131 @@ line-height: normal; overflow: hidden; font-weight: normal; + } +} + +.revealable { + font-size: 10pt; + color: #222; + position: relative; + overflow: hidden; + padding: 0px; + margin: 0px; + + h2 { + } + + .reveal { + #gradient>.vertical(rgba(255,255,255,0), rgba(255,255,255,1)); + .box-sizing(border-box); + position: absolute; + top: 0px; + left: 0px; + width: 100%; + height: 100%; + z-index: 400; + border: 2px solid #fff; + cursor: pointer; + + &:hover { + border: 2px solid @blue; + } a { - color: #555; - float: right; + .box-sizing(border-box); + display: block; + position: absolute; + bottom: 0px; + left: 0px; + width: 100%; + background: #eee; + padding: 3px; + z-index: 500; + text-decoration: none; font-size: 10pt; + } + } +} - &:hover { - text-decoration: none; +.details-columns { + .left { + margin-right: 310px; + margin-left: 5px; + } + + .right { + float: right; + width: 290px; + height: 100%; + padding-right: 10px; + + img.cover { + .img-polaroid(); + padding: 2px; + } + + .stats { + list-style: none; + padding: 0px; + margin: 0px; + font-size: 9pt; + color: #555; + + li { + padding: 5px 0px; + margin: 0px; + border-bottom: 1px solid #ddd; + + strong { + color: #111; + } } } } } + +.comments { + form { + margin: 0px; + margin-bottom: 10px; + + .form-row { + margin: 0px; + } + + input[type=text] { + margin: 0px; + padding: 5px; + } + } + + ul { + list-style: none; + margin: 0px; + padding: 0px; + + li { + line-height: normal; + padding: 5px 0px; + margin: 0px; + overflow: hidden; + + img { + .img-polaroid(); + float: left; + padding: 1px; + height: 32px; + width: 32px; + } + + .meta { + font-size: 8pt; + padding: 5px 0px; + } + + .content { + margin-left: 42px; + } + } + } +} \ No newline at end of file diff --git a/public/styles/layout.less b/public/styles/layout.less index d803acd9..8dd542f5 100644 --- a/public/styles/layout.less +++ b/public/styles/layout.less @@ -11,10 +11,6 @@ html body { font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; } -header, .site-body { - .box-shadow(0 0 7px rgba(0, 0, 0, .6)); -} - header { > a { display: block; diff --git a/public/styles/tracks.less b/public/styles/tracks.less index dbc3fdfe..57f51b26 100644 --- a/public/styles/tracks.less +++ b/public/styles/tracks.less @@ -2,6 +2,66 @@ @import-once 'mixins'; @import-once 'variables'; +.track-details { + > header { + padding: 5px; + background: #eee; + overflow: hidden; + margin-bottom: 10px; + + h1 { + margin: 0px; + margin-left: 47px; + } + + h2 { + margin: 0px; + margin-left: 47px; + padding: 0px; + font-weight: normal; + clear: none; + line-height: normal; + display: block; + float: none; + font-size: 8pt; + color: #777; + border: none; + + a { + display: inline; + float: none; + color: #111; + } + } + } + + h2 { + color: #C2889C; + font-size: 10pt; + border-bottom: 2px solid #ddd; + padding: 5px 0px; + margin: 0px; + margin-bottom: 5px; + line-height: normal; + } + + .resource-toolbar { + .clearfix(); + + background: #eee; + list-style: none; + padding: 0px; + margin: 0px; + margin-bottom: 5px; + + > li { + padding: 5px; + float: left; + margin: 0px; + } + } +} + @icon-size: 42px; .tracks-listing.four-columns { @@ -25,6 +85,10 @@ } } +html .single-player .play-button { + display: block; +} + .single-player, .tracks-listing li .image { float: left; width: @icon-size; diff --git a/public/templates/directives/comments.html b/public/templates/directives/comments.html index f6b6dd28..bc6d7d3d 100644 --- a/public/templates/directives/comments.html +++ b/public/templates/directives/comments.html @@ -1,21 +1,22 @@ -
-
+
+

All Comments ({{resource.comments.length}})

+
There are no comments yet!
-
    -
  • -
    - {{comment.user.name}} posted - {{comment.created_at.date | momentFromNow}} -
    - -
    {{comment.content}}
    -
    • -
- +
-
+
    +
  • + +
    + + +
    +
    +
    +
    • +
\ No newline at end of file diff --git a/public/templates/tracks/show.html b/public/templates/tracks/show.html index ab166625..3dbed33b 100644 --- a/public/templates/tracks/show.html +++ b/public/templates/tracks/show.html @@ -1,80 +1,72 @@ -
-
- -
+
+
-
+ +
  • - Add to Playlist + Add to Playlist -
    • -
    + +
  • Share or Embed
    • +
    • + - -

    - {{track.title}} - - - from: {{track.album.title}} +
    + +

    +

    + + from: - by: {{track.user.name}} - -

    + by: +

    + -
    -
    -
    -
    -

    -
    +
    +
    + -
    -

    Lyrics

    -
    -
    - Click to reveal full lyrics... -
    -

    +
      +
    • Published:
      • +
    • Views:
      • +
    • Plays:
      • +
    • Downloads:
      • +
    • Favourites:
      • +
    +
    +
    +
    +

    Description

    +

    +
    + +
    +

    Lyrics

    +
    +
    + Click to reveal full lyrics...
    +

    - -

    Comments

    -
    -
    - -
    - - - - Share or Embed - -

    Stats

    -
      -
    • Published: {{track.published_at | pfmdate:"short"}}
      • -
    • Views: {{track.stats.views}}
      • -
    • Plays: {{track.stats.plays}}
      • -
    • Downloads: {{track.stats.downloads}}
      • -
    • Favourites: {{track.stats.favourites}}
      • -
    -
    +
    \ No newline at end of file