More UI polishing

Rayman · Jul 25, 2014 · da8c4f4 · da8c4f4
1 parent 56fc6a4
commit da8c4f4
Show file tree

Hide file tree

Showing 7 changed files with 91 additions and 57 deletions.
diff --git a/client/lib/globalhelpers.html b/client/lib/globalhelpers.html
@@ -1,3 +1,10 @@
 <template name="userLink">
   <a href="{{pathFor 'userProfile'}}">{{username this}}</a>
 </template>
+
+<!-- create circular user avatar from user object  -->
+<template name="circleAvatar">
+  <a href="{{pathFor 'userProfile'}}">
+    <div data-toggle="tooltip" title="{{this.username}}" class="avatar" style="background-image:url('{{avatarUrl this}}')"></div>
+  </a>
+</template>
diff --git a/client/lib/globalhelpers.js b/client/lib/globalhelpers.js
@@ -39,13 +39,13 @@ Handlebars.registerHelper('privacyIcon', function(playlist) {
   return '<span class="glyphicon glyphicon-'+ icon +'"></span>';
 });
 
-Template.userProfile.avatarUrl = function() {
-  if(this.profile.avatar) {
-    return this.profile.avatar;
+Handlebars.registerHelper('avatarUrl', function(user) {
+  if(user.profile.avatar) {
+    return user.profile.avatar;
   } else {
     return "/img/avatar.jpg";
   }
-};
+});
 
 Handlebars.registerHelper('currentRoute', function() {
 	var currentRoute = Router.current();
@@ -57,3 +57,8 @@ Handlebars.registerHelper('currentRoute', function() {
 Handlebars.registerHelper('sessionIs', function(p1, p2) {
     return Session.get(p1) === p2;
 });
+
+
+Template.circleAvatar.rendered = function() {
+    $('div.avatar').tooltip();
+}
diff --git a/client/stylesheets/fusic.import.less b/client/stylesheets/fusic.import.less
@@ -1,3 +1,13 @@
+#playlistName:hover a#editToggle {
+  opacity:1;
+}
+a#editToggle {
+  font-size:0.5em;
+  opacity:0;
+  cursor:pointer;
+  transition: all 0.33s ease;
+}
+
 img.avatar {
   background-color:@gray-lighter;
   width:300px;

diff --git a/client/views/playlist.css b/client/views/playlist.css
@@ -10,6 +10,7 @@
 div.inline {
 	display:inline-block;
 }
+
 .overlay-container {
 	position:relative;
 }
@@ -22,6 +23,8 @@ div.inline {
 	padding: 4px;
 }
 
+
+
 .playlist-container:hover {
 	background-color: #eee;
 }
@@ -59,6 +62,9 @@ li.youtube-result:hover {
 	background-color:#eee;
 }
 
+
+
+
 span[data-action*="play"] {
 	cursor:pointer;
 }

diff --git a/client/views/playlists.html b/client/views/playlists.html
@@ -69,10 +69,13 @@ <h3 class="panel-title">All playlists</h3>
       <div class="col-md-4 hidden-xs">
 
         <div class="edittoggle collapse-group">
-          <a href="" data-toggle="collapse">edit <span class="glyphicon glyphicon-edit"></span></a>
-          <div class="collapse in">
+          <div id="playlistInfo" class="collapse in">
+            <h1 id="playlistName">
+              <small>{{{privacyIcon this}}}</small>
+              &nbsp;{{title}}&nbsp;
+              <a id="editToggle" data-toggle="collapse"><span class="glyphicon glyphicon-edit"></span></a>
+            </h1>
 
-            <h1><small>{{{privacyIcon this}}}</small>&nbsp;{{title}}</h1>
             {{#if description}}
               <p class="lead">{{description}}</p>
             {{/if}}
@@ -84,52 +87,44 @@ <h1><small>{{{privacyIcon this}}}</small>&nbsp;{{title}}</h1>
 
           </div>
 
-          <div class="collapse">
+          <div id="updatePlaylistForm" class="collapse">
+            <a href="" data-toggle="collapse"><span class="glyphicon glyphicon-remove"></span></a>
             {{> updatePlaylistForm}}
           </div>
 
-          <br />
-
-          <div>
-            {{#if playing}}
-              <button class="btn btn-success" data-action="playlist-pause">
-                <span class="glyphicon glyphicon-pause"></span> Pause
-              </button>
-            {{else}}
-              <button class="btn btn-success" data-action="playlist-play">
-                <span class="glyphicon glyphicon-play"></span> Play
-              </button>
-            {{/if}}
-            {{#if following}}
-            <button class="btn" data-action="unfollow">
-              <span class="glyphicon glyphicon-minus"></span> Unfollow
+          <br />        
+        </div>
+
+        <div>
+          {{#if playing}}
+            <button class="btn btn-success" data-action="playlist-pause">
+              <span class="glyphicon glyphicon-pause"></span> Pause
             </button>
-            {{else}}
-            <button class="btn" data-action="follow">
-              <span class="glyphicon glyphicon-plus"></span> Follow
+          {{else}}
+            <button class="btn btn-success" data-action="playlist-play">
+              <span class="glyphicon glyphicon-play"></span> Play
             </button>
-            {{/if}}
+          {{/if}}
+          {{#if following}}
+          <button class="btn" data-action="unfollow">
+            <span class="glyphicon glyphicon-minus"></span> Unfollow
+          </button>
+          {{else}}
+          <button class="btn" data-action="follow">
+            <span class="glyphicon glyphicon-plus"></span> Follow
+          </button>
+          {{/if}}
+        </div>
+
+        <div class="row">
+          <div class="col-md-9">
+            <h3>Followers</h3>
+              {{#each followers}}
+                {{>circleAvatar this}}
+              {{else}}
+                <p>None yet</p>
+              {{/each}}
           </div>
-
-          <h3>Followers:</h3>
-          <ul>
-            {{#each followers}}
-              <li>
-                {{> userLink}}
-              </li>
-            {{else}}
-              <li>Nobody</li>
-            {{/each}}
-          </ul>
-
-          <h3>Currently playing:</h3>
-          <ul>
-            {{#each players}}
-              <li>
-                {{> userLink}}
-              </li>
-            {{/each}}
-          </ul>
         </div>
 
         <div class="panel panel-default">
@@ -160,7 +155,7 @@ <h3 class="panel-title">Stats</h3>
 </template>
 
 <template name="updatePlaylistForm">
-  {{> quickForm collection="Playlists" doc=editingDoc id="updatePlaylistForm" type="update" fields="title,cover,tags,description"}}
+  {{> quickForm collection="Playlists" doc=editingDoc id="updatePlaylistForm" type="update" fields="title,cover,tags,description" buttonContent="Update"}}
 </template>
 
 <template name="ownerPanel">

diff --git a/client/views/playlists.js b/client/views/playlists.js
@@ -19,15 +19,28 @@ Template.insertPlaylistForm.events = {
   }
 }
 
+Template.playlistsEntry.events = {
+  'click .playlist-container' : function(e,template) {
+    Router.go('/playlist/'+this._id);
+  }
+}
+
 
 Template.playlist.rendered = function() {
   AutoForm.hooks({ 
     removeButton: { //on successful remove, go back to playlist page
-          onSuccess: function(operation, result, template) {
-            Router.go('playlists');
-          } 
-        }
-    });
+      onSuccess: function(operation, result, template) {
+        Router.go('playlists');
+      } 
+    },
+    updatePlaylistForm: { //on successful edit, collapse back out
+      onSuccess: function(operation, result, template) {
+        $('#playlistInfo').collapse('show');
+        $('#updatePlaylistForm').collapse('hide');
+
+      }
+    }
+  });
 }
 
 Template.playlist.selected = function () {

diff --git a/client/views/userProfile.html b/client/views/userProfile.html
@@ -2,7 +2,7 @@
 <div class="row">
   <div class="col-md-4">
     <div class="col-md-6">
-      <img class="img-circle img-responsive avatar" src="{{avatarUrl profile.avatar}}">
+      <img class="img-circle img-responsive avatar" src="{{avatarUrl this}}">
     </div>
     {{#if isOwner}}
       <div class="col-md-12">
@@ -16,9 +16,7 @@
     <div class="col-md-9">
       <h2>Friends <span class="badge">{{this.profile.friends.length}}</span></h2>
       {{#each userFriends}}
-        <a href="{{pathFor 'userProfile'}}">
-          <div class="avatar" style="background-image:url('{{avatarUrl}}')"></div>
-        </a>
+        {{>circleAvatar}}
       {{/each}}
     </div>