diff options
| author | Gabe Kangas <gabek@real-ity.com> | 2022-01-12 10:10:49 -0800 |
|---|---|---|
| committer | Gabe Kangas <gabek@real-ity.com> | 2022-01-12 10:10:49 -0800 |
| commit | 814c65eeb7ffcccfb48ccea0ef57cf14bfff6aba (patch) | |
| tree | ec57ef748a99f37b7a5c95c9f5a9674c7bf2702e | |
| parent | 5ff5c8767444052a77b1d9b1ae763d53eed08a3d (diff) | |
Add user icon next to username. Closes #1655
| -rw-r--r-- | webroot/img/user-icon.svg | 38 | ||||
| -rw-r--r-- | webroot/js/components/chat/username.js | 5 | ||||
| -rw-r--r-- | webroot/styles/chat.css | 7 |
3 files changed, 49 insertions, 1 deletions
diff --git a/webroot/img/user-icon.svg b/webroot/img/user-icon.svg new file mode 100644 index 000000000..a3c53df9d --- /dev/null +++ b/webroot/img/user-icon.svg @@ -0,0 +1,38 @@ +<?xml version="1.0"?> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" version="1.1" width="512" height="512" x="0" y="0" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512" xml:space="preserve" class=""><g> +<g xmlns="http://www.w3.org/2000/svg"> + <g> + <path d="M437.02,330.98c-27.883-27.882-61.071-48.523-97.281-61.018C378.521,243.251,404,198.548,404,148 C404,66.393,337.607,0,256,0S108,66.393,108,148c0,50.548,25.479,95.251,64.262,121.962 c-36.21,12.495-69.398,33.136-97.281,61.018C26.629,379.333,0,443.62,0,512h40c0-119.103,96.897-216,216-216s216,96.897,216,216 h40C512,443.62,485.371,379.333,437.02,330.98z M256,256c-59.551,0-108-48.448-108-108S196.449,40,256,40 c59.551,0,108,48.448,108,108S315.551,256,256,256z" fill="#ffffff" data-original="#000000" class=""/> + </g> +</g> +<g xmlns="http://www.w3.org/2000/svg"> +</g> +<g xmlns="http://www.w3.org/2000/svg"> +</g> +<g xmlns="http://www.w3.org/2000/svg"> +</g> +<g xmlns="http://www.w3.org/2000/svg"> +</g> +<g xmlns="http://www.w3.org/2000/svg"> +</g> +<g xmlns="http://www.w3.org/2000/svg"> +</g> +<g xmlns="http://www.w3.org/2000/svg"> +</g> +<g xmlns="http://www.w3.org/2000/svg"> +</g> +<g xmlns="http://www.w3.org/2000/svg"> +</g> +<g xmlns="http://www.w3.org/2000/svg"> +</g> +<g xmlns="http://www.w3.org/2000/svg"> +</g> +<g xmlns="http://www.w3.org/2000/svg"> +</g> +<g xmlns="http://www.w3.org/2000/svg"> +</g> +<g xmlns="http://www.w3.org/2000/svg"> +</g> +<g xmlns="http://www.w3.org/2000/svg"> +</g> +</g></svg> diff --git a/webroot/js/components/chat/username.js b/webroot/js/components/chat/username.js index 3a76aa4b6..fb4be113e 100644 --- a/webroot/js/components/chat/username.js +++ b/webroot/js/components/chat/username.js @@ -95,6 +95,9 @@ export default class UsernameForm extends Component { const moderatorFlag = html` <img src="/img/moderator-nobackground.svg" class="moderator-flag" /> `; + const userIcon = html` + <img src="/img/user-icon.svg" class="user-icon-flag" /> + `; return html` <div id="user-info" class="whitespace-nowrap"> @@ -109,7 +112,7 @@ export default class UsernameForm extends Component { id="username-display" class="text-indigo-100 text-xs font-semibold truncate overflow-hidden whitespace-no-wrap ${isModerator && 'moderator-flag'}" - >${isModerator && moderatorFlag}${username}</span + >${isModerator ? moderatorFlag : userIcon}${username}</span > </div> diff --git a/webroot/styles/chat.css b/webroot/styles/chat.css index ec773c951..a32d6f671 100644 --- a/webroot/styles/chat.css +++ b/webroot/styles/chat.css @@ -201,6 +201,13 @@ height: 1.5rem; } +.user-icon-flag { + display: inline-block; + margin-right: .5rem; + vertical-align: middle; + height: 0.8rem; +} + .moderator-actions-group { position: absolute; top: 0; |
