VRFS-1028 hover bubble work

2014-02-10 08:03:29 -05:00 · 2014-02-10 08:03:29 -05:00 · c1dd3eea75
parent a5d29cc8aa
commit c1dd3eea75
9 changed files with 157 additions and 16 deletions
--- a/web/app/assets/javascripts/hoverBand.js
+++ b/web/app/assets/javascripts/hoverBand.js
@ -0,0 +1,14 @@
+(function(context,$) {
+
+    "use strict";
+    context.JK = context.JK || {};
+    context.JK.BandHoverBubble = function(app) {
+
+      function initialize() {
+
+      }
+      
+      this.initialize = initialize;
+      this.showBubble = showBubble;
+    }
+})(window,jQuery);
--- a/web/app/assets/javascripts/hoverFan.js
+++ b/web/app/assets/javascripts/hoverFan.js
@ -0,0 +1,14 @@
+(function(context,$) {
+
+    "use strict";
+    context.JK = context.JK || {};
+    context.JK.FanHoverBubble = function(app) {
+
+      function initialize() {
+
+      }
+      
+      this.initialize = initialize;
+      this.showBubble = showBubble;
+    }
+})(window,jQuery);
--- a/web/app/assets/javascripts/hoverMusician.js
+++ b/web/app/assets/javascripts/hoverMusician.js
@ -0,0 +1,16 @@
+(function(context,$) {
+
+    "use strict";
+    context.JK = context.JK || {};
+    context.JK.MusicianHoverBubble = function(app, user, position) {
+      var logger = context.JK.logger;
+      var rest = context.JK.Rest();
+
+      function showBubble() {
+        $("#musician-hover").css({left: position.left; top: position.top});
+      }
+
+      this.initialize = initialize;
+      this.showBubble = showBubble;
+    }
+})(window,jQuery);
--- a/web/app/assets/javascripts/hoverRecording.js
+++ b/web/app/assets/javascripts/hoverRecording.js
@ -0,0 +1,14 @@
+(function(context,$) {
+
+    "use strict";
+    context.JK = context.JK || {};
+    context.JK.RecordingHoverBubble = function(app) {
+
+      function initialize() {
+
+      }
+      
+      this.initialize = initialize;
+      this.showBubble = showBubble;
+    }
+})(window,jQuery);
--- a/web/app/assets/javascripts/hoverSession.js
+++ b/web/app/assets/javascripts/hoverSession.js
@ -0,0 +1,14 @@
+(function(context,$) {
+
+    "use strict";
+    context.JK = context.JK || {};
+    context.JK.SessionHoverBubble = function(app) {
+
+      function initialize() {
+
+      }
+      
+      this.initialize = initialize;
+      this.showBubble = showBubble;
+    }
+})(window,jQuery);
--- a/web/app/assets/javascripts/shareDialog.js
+++ b/web/app/assets/javascripts/shareDialog.js
@ -338,14 +338,6 @@
                return false;

            })
-            /*
-            $("#btn-share-copy").zclip({
-                path: 'zeroclipboard.swf',
-                copy: function() {
-                    // console.log("copied " + $(".link-contents").text());
-                    return "TEXT";
-                }
-            });*/
        }

        function showDialog() {
@ -416,10 +408,6 @@
            }
        }

-        function clearTextFields() {
-
-        }
-
        function beforeShow() {
            disableTwitter();
            // no disableFacebook on purpose
@ -477,7 +465,7 @@
            registerEvents(false);
        }

-        function initialize(_facebookHelper){
+        function initialize(_facebookHelper) {
            facebookHelper = _facebookHelper;

            var dialogBindings = {
@ -491,11 +479,11 @@
            initDialog();

            facebookHelper.deferredLoginStatus().done(function(response) { handleFbStateChange(response); });
-        };
+        }

        this.initialize = initialize;
        this.showDialog = showDialog;
    }

  return this;
-})(window,jQuery)
+})(window,jQuery);
--- a/web/app/assets/javascripts/utils.js
+++ b/web/app/assets/javascripts/utils.js
@ -141,6 +141,7 @@

        $element.bt(text, options);
    }
+
    // Uber-simple templating
    // var template = "Hey {name}";
    // var vals = { name: "Jon" };
@ -650,7 +651,7 @@
        if(context.JK.CurrentSessionModel.recordingModel.isRecording()) {
            app.notify({
                title: "Currently Recording",
-                text: "Tracks can not be modified while recording.",
+                text: "Tracks cannot be modified while recording.",
                icon_url: "/assets/content/icon_alert_big.png"});
            return false;
        }
--- a/web/app/assets/stylesheets/client/hoverBubble.css.scss
+++ b/web/app/assets/stylesheets/client/hoverBubble.css.scss
@ -0,0 +1,32 @@
+.bubble {
+  width:350px;
+  min-height:200px;
+  background-color:#242323;
+  border:solid 1px #ed3618;
+  position:absolute;
+  z-index:999;
+}
+
+.bubble h2 {
+  padding:6px 0px;
+  text-align:center;
+  font-size:15px;
+  font-weight:200;
+  width:100%;
+  background-color:#ed3618;
+}
+
+.bubble h3 {
+  font-weight:400;
+  font-size:16px;
+  color:#fff;
+}
+
+.bubble-inner {
+  padding:10px;
+  color:#ccc;
+}
+
+.bubble-inner div.mb {
+  margin-bottom:5px;
+}
--- a/web/app/views/clients/_hoverMusician.html.erb
+++ b/web/app/views/clients/_hoverMusician.html.erb
@ -0,0 +1,48 @@
+<div id="musician-hover" class="hidden bubble">
+  <h2>Musician Detail</h2>
+  <div class="bubble-inner">
+    <a href="#" class="avatar_large left mr20"><img src="images/shared/avatar_david.jpg" /></a>
+    <div class="left ib">
+      <h3>John Doe</h3>
+      <small>Austin, TX</small><br /><br />
+      <div class="left mr10 mb"><img src="images/content/icon_instrument_guitar24.png" width="24" height="24" /></div>
+      <div class="left mr10"><img src="images/content/icon_instrument_vocal24.png" width="24" height="24" /></div>
+      <div class="left mr10"><img src="images/content/icon_instrument_keyboard24.png" width="24" height="24" /></div>
+      <br clear="all" />
+
+      122 <img src="images/content/icon_friend.png" align="absmiddle" />&nbsp;&nbsp;&nbsp;
+      4 <img src="images/content/icon_followers.png" width="22" height="12" align="absmiddle" />&nbsp;&nbsp;&nbsp;
+      17 <img src="images/content/icon_recordings.png" width="12" height="13" align="absmiddle" />&nbsp;&nbsp;&nbsp;
+      64 <img src="images/content/icon_session_tiny.png" width="12" height="12" align="absmiddle" />
+    </div>
+    <br clear="all" /><br />
+    <div class="f12"><strong>IN SESSION &mdash; <a href="#">Click to Join</a></strong></div>
+    <br />
+    <div class="f11">
+      Nulla facilisi. In vel sem. Morbi id urna in diam dignissim feugiat. Proin molestie tortor eu velit. Aliquam erat volutpat. Nullam ultrices, diam tempus vulputate egestas, eros pede varius leo, sed imperdiet lectus est ornare odio.
+    </div><br />
+    <small><strong>FOLLOWING:</strong></small>
+    <table class="musicians" cellpadding="0" cellspacing="5">
+      <tr>
+      <td width="24"><a href="#" class="avatar-tiny"><img src="images/content/avatar_band3.jpg" /></a></td>
+      <td><a href="#"><strong>Fox Force Five</strong></a></td>
+      <td width="24"><a href="#" class="avatar-tiny"><img src="images/content/avatar_band1.jpg" /></a></td>
+      <td><a href="#"><strong>Tammany Hall</strong></a></td>
+      </tr>
+      <tr>
+      <td width="24"><a href="#" class="avatar-tiny"><img src="images/content/avatar_band2.jpg" /></a></td>
+      <td><a href="#"><strong>Bethany Grey</strong></a></td>
+      <td></td>
+      <td></td>
+      </tr>               
+    </table>
+    <br />
+    <div align="center">
+      <div class="left"><a href="#" class="button-orange">PROFILE</a></div>
+      <div class="left"><a href="#" class="button-orange">LIKE</a></div>
+      <div class="left"><a href="#" class="button-orange">FRIEND</a></div>
+      <div class="left"><a href="#" class="button-orange">FOLLOW</a></div>
+    </div>
+    <br /><br />
+  </div>
+</div>