Merge pull request #181 from yesBad/bad

Added roles to memberMenu 👍

Author: SebOuellette

css/memberMenu.css

@@ -30,6 +30,12 @@ limitations under the License. */
     padding: 20px 0;
 }
 
+.memberMenuRolesDiv {
+    width: 100%;
+    background-color: #2f3136;
+    padding: 20px 0;
+}
+
 .memberIcon {
     height: 80px;
     width: 80px;
@@ -78,6 +84,28 @@ limitations under the License. */
     max-width: 100%;
 }
 
+.menuRolesDiv {
+    width: 80%;
+    margin-left: auto;
+    margin-right: auto;
+    display: block;
+}
+
+.memberRoles {
+    color: #b9bbbe;
+    font-size: 15px;
+    display: inline-block;
+    word-wrap: break-word;
+    white-space: pre-wrap;
+    max-width: 100%;
+}
+
+.memberRoles span {
+    background-color: #202225;
+    margin: 4px;
+    padding: 1px;
+}
+
 .memberCustomEmoji {
     display: inline-block;
     transform: translateY(4px);

js/buildMemberMenu.js

@@ -26,6 +26,11 @@ function buildMemberMenu(parent) {
     user.classList.add('memberMenuUserDiv');
     div.appendChild(user);
 
+    // The top section of the member menu
+    let roles = document.createElement('div');
+    roles.classList.add('memberMenuRolesDiv');
+    div.appendChild(roles);
+
     // The user icon
     let userIcon = document.createElement('img');
     userIcon.classList.add('memberIcon');
@@ -88,6 +93,24 @@ function buildMemberMenu(parent) {
         presenceDiv.appendChild(custPres);
     }
 
+    // roles :D
+    let rolesDiv = document.createElement('div');
+    rolesDiv.classList.add('menuRolesDiv');
+    roles.appendChild(rolesDiv);
+
+    let rolestext = document.createElement('div');
+    rolestext.classList.add('memberRoles');
+
+    member._roles.forEach((roleid) => {
+        console.log(roleid);
+        let rolename = selectedGuild.roles.cache.get(roleid);
+        let spans = document.createElement('span');
+        spans.innerText = rolename.name;
+        rolestext.appendChild(spans);
+    })
+
+    rolesDiv.appendChild(rolestext);
+
     // Set the final position of the menu
     let borderOffset = 40;
     let y = window.pageYOffset + parent.getBoundingClientRect().top - 20;