add ability to change DM's group description

css/profile.css

@@ -293,6 +293,26 @@ h2.profile-screen-name {
     display: block;
 }
 
+.profile-card .profile-bio .group-description {
+    color: #fff;
+    background: rgba(0, 0, 0, 0);
+    border: none;
+    text-align: center;
+    padding: 4px;
+    vertical-align: middle;
+}
+
+.profile-card .profile-bio .group-description:focus,
+.profile-card .profile-bio .group-description:hover {
+    color: #fff;
+    background: rgba(0, 0, 0, .5);
+}
+
+.profile-card .profile-bio .save, .profile-card .profile-bio .cancel {
+    display: none;
+    margin-left: 2px;
+}
+
 .group-messages-control .invite-form, .group-messages-control .secret-key {
     display: none;
     font-size: 12px;

css/style.css

@@ -147,6 +147,31 @@ button.follow:hover, button.unfollow:hover, .following-list button.private:hover
     margin-right: 10px;
 }
 
+.a-button {
+    color: dimgrey;
+    background-color: whitesmoke;
+    border: none;
+    font-size: 12px;
+    text-align: center;
+    width: auto;
+    padding: 4px 12px;
+    vertical-align: middle;
+    transition: all .1s linear;
+}
+
+.a-button:hover {
+    color: #000;
+    background: #fff;
+}
+
+.a-button:disabled {
+    opacity: .9;
+}
+
+.a-button:disabled:hover {
+    color: dimgrey;
+}
+
 .b-buttons {
     text-align: right;
     padding: 4px;

following.html

@@ -424,7 +424,11 @@
     <div id="group-profile-modal-template">
         <div class="profile-card" data-screen-name="">
             <div class="profile-card-main">
-                <div class="profile-bio"></div>
+                <div class="profile-bio">
+                    <input class="group-description"></input>
+                    <button class="save a-button" disabled="disabled">Save</button>
+                    <button class="cancel a-button">Cancel</button>
+                </div>
             </div>
             <div class="profile-card-buttons group-messages-control b-buttons">
                 <button class="direct-messages-with-user" disabled="disabled">Messages</button>

home.html

@@ -516,7 +516,11 @@
     <div id="group-profile-modal-template">
         <div class="profile-card" data-screen-name="">
             <div class="profile-card-main">
-                <div class="profile-bio"></div>
+                <div class="profile-bio">
+                    <input class="group-description"></input>
+                    <button class="save a-button" disabled="disabled">Save</button>
+                    <button class="cancel a-button">Cancel</button>
+                </div>
             </div>
             <div class="profile-card-buttons group-messages-control b-buttons">
                 <button class="direct-messages-with-user" disabled="disabled">Messages</button>

js/interface_common.js

@@ -154,7 +154,10 @@ function openGroupProfileModalWithNameHandler(groupAlias) {
     groupMsgGetGroupInfo(groupAlias,
         function(req, ret) {
             if (ret) {
-                req.modal.content.find('.profile-bio').text(ret.description);
+                req.modal.content.find('.profile-bio .group-description')
+                    .val(ret.description)
+                    .attr('val-origin', ret.description)
+                ;
 
                 if (ret.members.indexOf(defaultScreenName) !== -1)
                     req.modal.content.find('.group-messages-control').children('button').attr('disabled', false);
@@ -1567,6 +1570,39 @@ function initInterfaceCommon() {
     replaceDashboards();
     $(window).resize(replaceDashboards);
 
+    $('.profile-card .profile-bio .group-description')
+        .on('focus', function (event) {
+            $(event.target)
+                .siblings('.save').show()
+                .siblings('.cancel').show()
+            ;
+        })
+        .on('input',
+            {parentSelector: '.profile-bio', enterSelector: '.save'}, inputEnterActivator)
+        .siblings('.save').on('click', function (event) {
+            var elemEvent = $(event.target);
+            var descElem = elemEvent.siblings('.group-description');
+
+            groupMsgSetGroupDescription(elemEvent.closest('.profile-card').attr('data-screen-name'),
+                descElem.val().trim(),
+                function(req) {
+                    req.descElem.attr('val-origin', req.descElem.val().trim())
+                        .siblings('.save').hide()
+                        .siblings('.cancel').hide()
+                    ;
+                }, {descElem: descElem}
+            );
+        })
+        .siblings('.cancel').on('click', function (event) {  // FIXME it would be nice to bind some 'clickoutside' event instead and remove cancel button, but current implementation of that doesn't unbind events when element dies
+            var descElem = $(event.target).hide()
+                .siblings('.save').hide()
+                .siblings('.group-description')
+            ;
+
+            descElem.val(descElem.attr('val-origin'));
+        })
+    ;
+
     $('.tox-ctc').on('click', promptCopyAttrData);
     $('.bitmessage-ctc').on('click', promptCopyAttrData);
 

js/twister_directmsg.js

@@ -392,6 +392,17 @@ function doGroupMsgInviteToGroup() {
     );
 }
 
+function groupMsgSetGroupDescription(groupAlias, description, cbFunc, cbArgs) {
+    twisterRpc('newgroupdescription',
+        [defaultScreenName, lastPostId + 1, groupAlias, description],
+        function (req) {
+            incLastPostId();
+            req.cbFunc(req.cbArgs);
+        }, {cbFunc: cbFunc, cbArgs: cbArgs},
+        function(req, ret) {alert(polyglot.t('error', {error: 'can\'t set group description — ' + ret.message}));}, null
+    );
+}
+
 function groupMsgLeaveGroup(groupAlias, cbFunc, cbArgs) {
     twisterRpc('leavegroup', [defaultScreenName, groupAlias],
         cbFunc, cbArgs,

theme_calm/css/profile.css

@@ -382,6 +382,27 @@ h2.profile-screen-name {
     display: none;
 }
 
+.profile-card .profile-bio .group-description {
+    color: #43464d;
+    background: rgba(0, 0, 0, 0);
+    border: none;
+    text-align: center;
+    padding: 4px;
+    vertical-align: middle;
+}
+
+.profile-card .profile-bio .group-description:focus,
+.profile-card .profile-bio .group-description:hover {
+    color: #fff;
+    background: #e18881;
+    opacity: .8;
+}
+
+.profile-card .profile-bio .save, .profile-card .profile-bio .cancel {
+    display: none;
+    margin-left: 2px;
+}
+
 .group-messages-control .invite-form, .group-messages-control .secret-key {
     display: none;
     font-size: 12px;

theme_calm/css/style.css

@@ -168,6 +168,36 @@ button.unfollow:hover {
     margin-right: 10px;
 }
 
+.a-button {
+    color: whitesmoke;
+    background-color: #6d83bd;
+    border: none;
+    font-size: 12px;
+    text-align: center;
+    width: auto;
+    padding: 4px 12px;
+    vertical-align: middle;
+    transition: all .1s linear;
+}
+
+.a-button:hover {
+    color: #FFF;
+    background: #B2D67B;
+}
+
+.a-button:disabled {
+    opacity: .7;
+}
+
+.a-button:disabled:hover {
+    color: #fff;
+}
+
+.b-buttons {
+    text-align: right;
+    padding: 4px;
+}
+
 .b-buttons {
     text-align: right;
     padding: 4px;

theme_nin/css/style.css

@@ -3005,6 +3005,27 @@ ol.toptrends-list a:hover {
 }
 
 
+.profile-card .profile-bio .group-description {
+    border: none;
+    text-align: center;
+    width: 60%;
+    padding: 4px;
+    vertical-align: middle;
+}
+
+.profile-card .profile-bio .group-description:focus {
+    border: 1px solid rgba(0, 0, 0, .1);
+    border-bottom: solid 1px #B4C669;
+}
+
+.profile-card .profile-bio .group-description:hover {
+    border-bottom: solid 1px #B4C669;
+}
+
+.profile-card .profile-bio .save, .profile-card .profile-bio .cancel {
+    display: none;
+}
+
 .group-messages-control .invite-form, .group-messages-control .secret-key {
     display: none;
     font-size: 12px;