merge tox and bitmessage support from calm

css/profile.css

@@ -11,6 +11,7 @@
 .profile-card-main
 {
     width: 540px;
+    padding: 10px;
     text-align: center;
     position: relative;
     transition: all .2s linear;
@@ -91,6 +92,8 @@
 .forEdition .profile-card-photo
 {
     border: solid 2px #fff;
+    border-radius: 0%;
+    float:none;
     position: relative;
     cursor: pointer;
     transition: all .2s linear;
@@ -145,6 +148,12 @@
 {
     display: inline-block;
 }
+.forEdition .profile-card-main .input-tox,
+.forEdition .profile-card-main .input-bitmessage
+{
+    width: 90%;
+    margin-top: 10px;
+}
 .profile-edition-buttons
 {
     padding: 10px;
@@ -170,11 +179,72 @@
     height: 90%;
 }
 .profile-modal .profile-bio,
-.profile-modal .profile-contact
 {
    min-height: 27px;
    overflow-y: visible;
 }
+#msngrswr {
+    display: none;
+    margin-top: 20px;
+    height: 30px;
+}
+#toxbtnwr, #bmbtnwr {
+    float: left;
+    display: none;
+}
+.bitmessage-ctc, .tox-ctc {
+    height: 30px;
+    width: 30px;
+    display: inline-block;
+    margin-right: 5px;
+    border: 1px solid #d6d8dc;
+    background: #e3e5ea url(img/clipboard.png) center no-repeat;
+    opacity: .8;
+    -webkit-border-radius: 0 5px 5px 0;
+    -moz-border-radius: 0 5px 5px 0;
+    border-radius: 0 5px 5px 0;
+    -webkit-transition: all 20ms;
+    -moz-transition: all 20ms;
+    -ms-transition: all 20ms;
+    -o-transition: all 20ms;
+    transition: all 20ms;
+}
+.bitmessage-ctc:hover, .tox-ctc:hover {
+    background-color: #f0f2f8;
+    opacity: 1;
+    cursor: pointer;
+}
+.bitmessage-ctc:active, .tox-ctc:active {
+    background-color: #edfced;
+}
+.profile-modal .profile-tox, .profile-modal .profile-bitmessage {
+    display: inline-block;
+    width: 70px;
+    height: 30px;
+    border: 1px solid #c0c2c6;
+    opacity: .8;
+    -webkit-border-radius: 5px 0 0 5px;
+    -moz-border-radius: 5px 0 0 5px;
+    border-radius: 5px 0 0 5px;
+    -webkit-transition: all 200ms;
+    -moz-transition: all 200ms;
+    -ms-transition: all 200ms;
+    -o-transition: all 200ms;
+    transition: all 200ms;
+}
+.profile-modal .profile-tox:hover, .profile-modal .profile-bitmessage:hover {
+    opacity: 1;
+    background-color: #f0f2f8;
+}
+.profile-modal .profile-tox:active, .profile-modal .profile-bitmessage:active {
+    background-color: #edfced;
+}
+.profile-modal .profile-tox {
+    background: #e3e5ea url(../img/tox.png) center no-repeat;
+}
+.profile-modal .profile-bitmessage {
+    background: #e3e5ea url(../img/bm.png) center no-repeat;
+}
 .profile-modal .profile-data
 {
     display: inline-block;

home.html

@@ -374,11 +374,16 @@
               <img class="profile-card-photo" src="img/grayed_avatar_placeholder_24.png"/>
               <h1 class="profile-name"></h1>
               <h2 class="profile-screen-name">@<b></b></h2>
-              <div class="profile-contact">
+              <span class="profile-location"></span>
-                <span class="profile-location"></span>
+              <a class="profile-url" rel="nofollow" target="_blank"></a>
-                <a class="profile-url" rel="nofollow" target="_blank"></a>
+              <div class="profile-bio"></div>
-              </div>
+              <div id="msngrswr">
-              <div class="profile-bio">
+                <div id="toxbtnwr">
+                  <a class="profile-tox"></a><a class="tox-ctc"></a>
+                </div>
+                <div id="bmbtnwr">
+                  <a class="profile-bitmessage"></a><a class="bitmessage-ctc"></a>
+                </div>
               </div>
             </div>
             <ul class="module profile-data">

js/twister_actions.js

@@ -170,6 +170,8 @@ function updateProfileData(profileModalContent, username) {
     getLocation( username, profileModalContent.find(".profile-location") );
     getWebpage( username, profileModalContent.find(".profile-url") );
     getBio( username, profileModalContent.find(".profile-bio") );
+    getTox( username, profileModalContent.find(".profile-tox") );
+    getBitmessage( username, profileModalContent.find(".profile-bitmessage") );
     getAvatar( username, profileModalContent.find(".profile-card-photo") );
     getPostsCount( username,  profileModalContent.find(".posts-count") );
     getFollowers( username, profileModalContent.find(".followers-count") );

js/twister_io.js

@@ -219,6 +219,30 @@ function getBio( username, item ){
     getProfileResource( username, "bio", item);
 }
 
+// get tox address and store it in item.text
+function getTox( username, item ){
+    getProfileResource( username, "tox", false, function(item, text){
+        item.empty();
+        if(text) {
+            item.attr('href', 'tox:'+text);
+            item.next().attr('data', text);
+            item.parent().show().parent().show();
+        }
+    }, item);
+}
+
+// get bitmessage address and store it in item.text
+function getBitmessage( username, item ){
+    getProfileResource( username, "bitmessage", false, function(item, text){
+        item.empty();
+        if(text) {
+            item.attr('href', 'bitmsg:'+text+'?action=add&label='+username);
+            item.next().attr('data', text);
+            item.parent().show().parent().show();
+        }
+    }, item);
+}
+
 // get location and store it in item.text
 function getLocation( username, item ){
     getProfileResource( username, "location", item);

js/twister_user.js

@@ -247,6 +247,10 @@ function loadProfileForEdit() {
                        $(".input-city").val(profile.location);
                    if( "url" in profile)
                        $(".input-website").val(profile.url);
+                   if( "tox" in profile)
+                       $(".input-tox").val(profile.tox);
+                   if( "bitmessage" in profile)
+                       $(".input-bitmessage").val(profile.bitmessage);
                }
            }, {} );
 }
@@ -258,6 +262,12 @@ function saveProfile(e)
     profile["bio"]      = $(".input-description").val();
     profile["location"] = $(".input-city").val();
     profile["url"]      = $(".input-website").val();
+    var tox = $(".input-tox").val();
+    if( tox.length )
+        profile["tox"]  = tox;
+    var bitmessage = $(".input-bitmessage").val();
+    if( bitmessage.length )
+        profile["bitmessage"] = bitmessage;
     dhtput( defaultScreenName, "profile", "s",
             profile, defaultScreenName, ++profileSeqNum );
     var avatarData = $(".profile-card-photo.forEdition").attr("src");

profile-edit.html

@@ -88,6 +88,8 @@
         <input type="text" class="input-description" placeholder="Describe yourself"/>
         <input type="text" class="input-city" placeholder="Location"/>
         <input type="text" class="input-website" placeholder="website"/>
+        <input type="text" class="input-tox" placeholder="Tox address"/>
+        <input type="text" class="input-bitmessage" placeholder="Bitmessage address"/>
       </div>
       <div class="profile-edition-buttons">
           <button class="toggle-priv-key" style="float: left" href="#">Secret Key</button>