Add Sone context menu when hovering over avatar.

diff --git a/src/main/resources/i18n/sone.en.properties b/src/main/resources/i18n/sone.en.properties
index 3610afc..53faca0 100644 (file)
--- a/src/main/resources/i18n/sone.en.properties
+++ b/src/main/resources/i18n/sone.en.properties
@@ -235,6 +235,7 @@ View.Sone.Status.Downloading=This Sone is currently being downloaded.
 View.Sone.Status.Inserting=This Sone is currently being inserted.
 
 View.Post.UnknownAuthor=(unknown)
+View.Post.WebOfTrustLink=web of trust profile
 View.Post.Permalink=link post
 View.Post.PermalinkAuthor=link author
 View.Post.Bookmarks.PostIsBookmarked=Post is bookmarked, click to remove from bookmarks

diff --git a/src/main/resources/static/css/sone.css b/src/main/resources/static/css/sone.css
index 1cc26eb..bf09065 100644 (file)
--- a/src/main/resources/static/css/sone.css
+++ b/src/main/resources/static/css/sone.css
@@ -251,6 +251,29 @@ textarea {
        border-bottom: none;
 }
 
+#sone .post .sone-post-menu {
+       position: absolute;
+       top: 0;
+       left: -1ex;
+       padding: 1ex 1ex;
+       margin: -1px -1px;
+       display: none;
+       background-color: rgb(255, 255, 224);
+       border: solid 1px rgb(0, 0, 0);
+       z-index: 1;
+}
+
+#sone .post .sone-post-menu .avatar {
+       position: absolute;
+       margin-right: 1ex;
+}
+
+#sone .post .sone-post-menu .inner-menu {
+       margin-left: 64px;
+       padding-left: 1ex;
+       min-height: 64px;
+}
+
 #sone .post > .avatar {
        position: absolute;
 }
@@ -266,6 +289,10 @@ textarea {
        font-weight: bold;
 }
 
+#sone .post .author-wot-link {
+       font-size: 90%;
+}
+
 #sone .post .text, #sone .post .raw-text {
        display: inline;
        white-space: pre-wrap;

diff --git a/src/main/resources/static/javascript/sone.js b/src/main/resources/static/javascript/sone.js
index d6c83ae..0e3df51 100644 (file)
--- a/src/main/resources/static/javascript/sone.js
+++ b/src/main/resources/static/javascript/sone.js
@@ -802,6 +802,14 @@ function ajaxifyPost(postElement) {
 
        /* hide reply input field. */
        $(postElement).find(".create-reply").addClass("hidden");
+
+       /* show Sone menu when hovering over the avatar. */
+       $(postElement).find(".avatar").mouseover(function() {
+               $(".sone-post-menu", postElement).mouseleave(function() {
+                       $(this).fadeOut();
+               }).fadeIn();
+               return false;
+       });
 }
 
 /**

diff --git a/src/main/resources/templates/include/viewPost.html b/src/main/resources/templates/include/viewPost.html
index b451f2b..d0005c9 100644 (file)
--- a/src/main/resources/templates/include/viewPost.html
+++ b/src/main/resources/templates/include/viewPost.html
@@ -3,6 +3,16 @@
        <div class="post-time hidden"><% post.time|html></div>
        <div class="post-author hidden"><% post.sone.id|html></div>
        <div class="post-author-local hidden"><% post.sone.local></div>
+       <div class="sone-post-menu">
+               <div class="sone-id hidden"><%post.sone.id|html></div>
+               <img class="avatar" src="/WebOfTrust/GetIdenticon?identity=<% post.sone.id|html>&amp;width=64&height=64" width="64" height="64" alt="Avatar Image" />
+               <div class="inner-menu">
+                       <div>
+                               <a class="author" href="viewSone.html?sone=<% post.sone.id|html>"><% post.sone.niceName|html></a>
+                               <span class="author-wot-link">(<a href="/WebOfTrust/ShowIdentity?id=<% post.sone.id|html>"><% =View.Post.WebOfTrustLink|l10n|html></a>)</span>
+                       </div>
+               </div>
+       </div>
        <div class="avatar">
                <%if post.loaded>
                        <img src="/WebOfTrust/GetIdenticon?identity=<% post.sone.id|html>&amp;width=48&height=48" width="48" height="48" alt="Avatar Image" />