member color is now editable

Signed-off-by: Julien Veyssier <eneiluj@posteo.net>

css/cospend.css

@@ -68,6 +68,7 @@ b.memberName, b.memberWeight {
     height: auto;
     border-radius: 50%;
     margin: 10px 6px 10px 6px;
+    cursor: pointer;
 }
 .memberAvatar .disabledMask {
     display: none;
@@ -441,4 +442,13 @@ a.billitem .app-content-list-item-icon {
     display: block;
     margin-left: auto;
     margin-right: auto;
+}
+#membercolorinput {
+    opacity: 0;
+    width: 0px;
+    height: 0px;
+    min-height: 0px;
+    padding: 0px;
+    margin: 0px;
+    border: 0px;
 }

js/cospend.js

@@ -399,7 +399,28 @@
         });
     }
 
-    function editMember(projectid, memberid, newName, newWeight, newActivated) {
+    function askChangeMemberColor(projectid, memberid) {
+        cospend.changingColorProjectId = projectid;
+        cospend.changingColorMemberId = memberid;
+        var currentColor = '#'+cospend.members[projectid][memberid].color;
+        $('#membercolorinput').val(currentColor);
+        $('#membercolorinput').click();
+    }
+
+    function okColor() {
+        var color = $('#membercolorinput').val();
+        var projectid = cospend.changingColorProjectId;
+        var memberid = cospend.changingColorMemberId;
+        editMember(
+            projectid, memberid,
+            cospend.members[projectid][memberid].name,
+            cospend.members[projectid][memberid].weight,
+            cospend.members[projectid][memberid].activated,
+            color.replace('#', '')
+        );
+    }
+
+    function editMember(projectid, memberid, newName, newWeight, newActivated, color=null) {
         $('.projectitem[projectid="'+projectid+'"] ul.memberlist > li[memberid='+memberid+']')
             .addClass('icon-loading-small')
             .removeClass('editing');
@@ -408,6 +429,9 @@
             weight: newWeight,
             activated: newActivated
         };
+        if (color) {
+            req.color = color;
+        }
         var url, type;
         var project = cospend.projects[projectid];
         if (!cospend.pageIsPublic) {
@@ -4113,6 +4137,16 @@
             displayMemberPolarChart();
         });
 
+        $('body').on('click', '.memberAvatar', function(e) {
+            var projectid = $(this).parent().parent().parent().attr('projectid');
+            var memberid = $(this).parent().attr('memberid');
+            askChangeMemberColor(projectid, memberid);
+        });
+
+        $('body').on('change', '#membercolorinput', function(e) {
+            okColor();
+        });
+
         if (OCA.Theming) {
             var c = OCA.Theming.color;
             // invalid color

templates/mainnavigation.php

@@ -83,3 +83,4 @@
 <p id="projectid"><?php p($_['projectid']); ?></p>
 <p id="password"><?php p($_['password']); ?></p>
 <img id="dummylogo"/>
+<input id="membercolorinput" type="color"></input>