1 - ui: fix guest css (l3mpire#215)

* Disable CTA user-panel related to guest permissions * Fix css when user need to create account to change his character
Refty · Dec 20, 2022 · 29c025b · 29c025b
1 parent eae9a93
commit 29c025b
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 7 deletions.
diff --git a/core/client/lemverse.scss b/core/client/lemverse.scss
@@ -197,6 +197,7 @@ button.js-notifications {
   margin: 20px;
   border: 1px solid transparent;
   border-radius: 4px;
+  width: max-content;
 
   &.warning {
     color: #8a6d3b;

diff --git a/core/client/ui/user-panel.hbs.html b/core/client/ui/user-panel.hbs.html
@@ -7,11 +7,11 @@
     <div class="js-stream-me {{#if active}}active{{/if}} {{#if videoActive}}active-video{{/if}}" style="background-image: url('{{avatarURL}}')">
       <video type="video/mp4" width="240" height="180" autoplay muted></video>
       <div class="buttons">
-        <button class="button audio {{#if currentUser.profile.shareAudio}}active{{/if}}" type="button"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M12,2A3,3 0 0,1 15,5V11A3,3 0 0,1 12,14A3,3 0 0,1 9,11V5A3,3 0 0,1 12,2M19,11C19,14.53 16.39,17.44 13,17.93V21H11V17.93C7.61,17.44 5,14.53 5,11H7A5,5 0 0,0 12,16A5,5 0 0,0 17,11H19Z" /></svg></button>
-        <button class="button video {{#if currentUser.profile.shareVideo}}active{{/if}}" type="button"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M17,10.5V7A1,1 0 0,0 16,6H4A1,1 0 0,0 3,7V17A1,1 0 0,0 4,18H16A1,1 0 0,0 17,17V13.5L21,17.5V6.5L17,10.5Z" /></svg></button>
-        <button class="button screen {{#if currentUser.profile.shareScreen}}active{{/if}}" type="button"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M9,6H5V10H7V8H9M19,10H17V12H15V14H19M21,16H3V4H21M21,2H3C1.89,2 1,2.89 1,4V16A2,2 0 0,0 3,18H10V20H8V22H16V20H14V18H21A2,2 0 0,0 23,16V4C23,2.89 22.1,2 21,2" /></svg></button>
+        <button class="button audio {{#if currentUser.profile.shareAudio}}active{{/if}}" disabled="{{ !canTalkToUser }}" type="button"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M12,2A3,3 0 0,1 15,5V11A3,3 0 0,1 12,14A3,3 0 0,1 9,11V5A3,3 0 0,1 12,2M19,11C19,14.53 16.39,17.44 13,17.93V21H11V17.93C7.61,17.44 5,14.53 5,11H7A5,5 0 0,0 12,16A5,5 0 0,0 17,11H19Z" /></svg></button>
+        <button class="button video {{#if currentUser.profile.shareVideo}}active{{/if}}" disabled="{{ !canTalkToUser }}" type="button"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M17,10.5V7A1,1 0 0,0 16,6H4A1,1 0 0,0 3,7V17A1,1 0 0,0 4,18H16A1,1 0 0,0 17,17V13.5L21,17.5V6.5L17,10.5Z" /></svg></button>
+        <button class="button screen {{#if currentUser.profile.shareScreen}}active{{/if}}" disabled="{{ !canTalkToUser }}" type="button"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M9,6H5V10H7V8H9M19,10H17V12H15V14H19M21,16H3V4H21M21,2H3C1.89,2 1,2.89 1,4V16A2,2 0 0,0 3,18H10V20H8V22H16V20H14V18H21A2,2 0 0,0 23,16V4C23,2.89 22.1,2 21,2" /></svg></button>
         <span class="separator">|</span>
-        <button class="button js-show-messaging-interface" type="button">
+        <button  class="button js-show-messaging-interface" disabled="{{ !canUseMessaging }}" type="button">
           <svg style="width:24px;height:24px" viewBox="0 0 24 24">
             <path fill="currentColor" d="M17,11H15V9H17M13,11H11V9H13M9,11H7V9H9M20,2H4A2,2 0 0,0 2,4V22L6,18H20A2,2 0 0,0 22,16V4C22,2.89 21.1,2 20,2Z" /></svg>
         </button>

diff --git a/core/client/ui/user-panel.js b/core/client/ui/user-panel.js
@@ -1,3 +1,5 @@
+import { guestAllowed, permissionTypes } from '../../lib/misc';
+
 const talking = () => !!peer.remoteStreamsByUsers.get().length;
 
 const onMediaStreamStateChanged = event => {
@@ -49,6 +51,8 @@ Template.userPanel.helpers({
   screenSharing() { return Meteor.user({ fields: { 'profile.shareScreen': 1 } })?.profile.shareScreen; },
   videoActive() { return talking() && Meteor.user({ fields: { 'profile.shareVideo': 1 } })?.profile.shareVideo; },
   displayUserPanel() { return Meteor.settings.public.features?.userPanel?.enabled !== false; },
+  canTalkToUser() { return Meteor.user({ fields: { 'profile.guest': 1 } })?.profile.guest && guestAllowed(permissionTypes.talkToUsers); },
+  canUseMessaging() { return Meteor.user({ fields: { 'profile.guest': 1 } })?.profile.guest && guestAllowed(permissionTypes.useMessaging); },
 });
 
 Template.userPanel.events({

diff --git a/core/client/ui/user-panel.scss b/core/client/ui/user-panel.scss
@@ -67,7 +67,7 @@
 
   @include media-max("phone-down") {
     transform: translate(300px);
-    transition: transform .5s;
+    transition: transform 0.5s;
 
     &.visible {
       transform: translate(0px);
@@ -160,13 +160,17 @@
           background-color: $new-green;
         }
 
+        &:disabled {
+          background-color: hsl(0deg, 0%, 63%);
+        }
+
         @media (hover: hover) {
           &:hover {
             background-color: lighten($new-green, 20%);
           }
         }
 
-        &:not(.active):nth-child(-n+3)::before {
+        &:not(.active):nth-child(-n + 3)::before {
           content: "\\";
           position: absolute;
           color: $main-color;

diff --git a/core/client/user-manager.js b/core/client/user-manager.js
@@ -104,10 +104,11 @@ userManager = {
     if (!character) return;
 
     const { x, y, direction, reaction, shareAudio, userMediaError, name, baseline, nameColor } = user.profile;
+    const showMutedIndicator = user.profile.guest ? guestAllowed(permissionTypes.talkToUsers) : !shareAudio;
 
     // update character instance
     networkManager.onCharacterStateReceived({ userId: user._id, x, y, direction });
-    character.showMutedStateIndicator(!shareAudio);
+    character.showMutedStateIndicator(showMutedIndicator);
 
     // is account transformed from guest to user?
     if (!user.profile.guest && oldUser?.profile.guest) {