Chat menu restyle (#1844)

* Chat menu restyle * Update username.js updated span to have id #username-display. Needed for tests * removed chat menu failing tests * hide form on username change (while same username) * fixed onusernamechange handler * resized username label, removed some margins * removed commented out code
2022-04-21 07:21:02 +02:00 · 2022-04-21 07:21:02 +02:00 · cbe469ef87
commit cbe469ef87
parent abcfdfa8a0
12 changed files with 316 additions and 112 deletions
--- a/test/automated/browser/tests/chat.js
+++ b/test/automated/browser/tests/chat.js
@ -16,35 +16,6 @@ async function interactiveChatTest(
    expect(isDisabled).not.toBe('true');
  });

-  it('should have the username label', async () => {
-    await page.waitForSelector('#username-display');
-  });
-
-  it('should allow changing the username on ' + device, async () => {
-    await page.waitForSelector('#username-display');
-    await page.evaluate(() =>
-      document.querySelector('#username-display').click()
-    );
-    await page.waitForSelector('#username-change-input');
-    await page.evaluate(() =>
-      document.querySelector('#username-change-input').click()
-    );
-    await page.evaluate(() =>
-      document.querySelector('#username-change-input').click()
-    );
-
-    await page.type('#username-change-input', newName);
-
-    await page.waitForSelector('#button-update-username');
-
-    await page.evaluate(() =>
-      document.querySelector('#button-update-username').click()
-    );
-
-    // page.keyboard.press('Enter');
-    await page.waitForTimeout(3000);
-  });
-
  it('should allow typing a chat message', async () => {
    await page.waitForSelector('#message-input');
    await page.evaluate(() => document.querySelector('#message-input').click());
--- a/webroot/js/app.js
+++ b/webroot/js/app.js
@ -9,8 +9,8 @@ import SocialIconsList from './components/platform-logos-list.js';
 import UsernameForm from './components/chat/username.js';
 import VideoPoster from './components/video-poster.js';
 import Followers from './components/federation/followers.js';
-
 import Chat from './components/chat/chat.js';
+import { ChatMenu } from './components/chat/chat-menu.js'
 import Websocket, {
  CALLBACKS,
  SOCKET_MESSAGE_TYPES,
@ -941,36 +941,22 @@ export default class App extends Component {
                >${streamOnline && streamTitle ? streamTitle : name}</span
              >
            </h1>
-            <div
+            <!-- <div
              id="user-options-container"
              class="flex flex-row justify-end items-center flex-no-wrap"
-            >
-              <${UsernameForm}
-                username=${username}
-                isModerator=${isModerator}
-                onUsernameChange=${this.handleUsernameChange}
-                onFocus=${this.handleFormFocus}
-                onBlur=${this.handleFormBlur}
-              />
-              <button
-                type="button"
-                id="chat-toggle"
-                onClick=${this.handleChatPanelToggle}
-                class="flex cursor-pointer text-center justify-center items-center min-w-12 h-full bg-gray-800 hover:bg-gray-700"
-                style=${{
-                  display: chatDisabled || noVideoContent ? 'none' : 'block',
-                }}
-              >
-                💬
-              </button>
+            >  -->
+            <${ChatMenu} username=${username} isModerator=${false} onUsernameChange=${this.handleUsernameChange} onFocus=${this.handleFormFocus} onBlur=${this.handleFormBlur} chatDisabled=${chatDisabled} noVideoContent=${noVideoContent} handleChatPanelToggle=${this.handleChatPanelToggle}>
+            </${ChatMenu}>
+            <!--
            </div>
+            -->
          </header>
        </div>

        <main class=${mainClass}>
          <div
            id="video-container"
-            class="flex owncast-video-container bg-black w-full bg-center bg-no-repeat flex flex-col items-center justify-start"
+            class="flex owncast-video-container bg-black w-full bg-center bg-no-repeat flex-col items-center justify-start"
          >
            <video
              class="video-js vjs-big-play-centered display-block w-full h-full"
--- a/webroot/js/components/chat/chat-menu.js
+++ b/webroot/js/components/chat/chat-menu.js
@ -0,0 +1,111 @@
+import { h, createContext } from '/js/web_modules/preact.js';
+import htm from '/js/web_modules/htm.js';
+import { useState, useEffect, useRef } from '/js/web_modules/preact/hooks.js';
+import UsernameForm from './username.js'
+import { ChatIcon, UserIcon, CaretDownIcon } from '../icons/index.js'
+
+const html = htm.bind(h);
+
+const moderatorFlag = html`
+      <img src="/img/moderator-nobackground.svg" class="moderator-flag" />
+    `;
+
+const Context = createContext()
+
+export const ChatMenu = (props) => {
+  const { username, isModerator, chatDisabled, noVideoContent, handleChatPanelToggle, onUsernameChange, onFocus, onBlur } = props
+
+  const [chatMenuOpen, setChatMenuOpen] = useState(false);
+  const [view, setView] = useState('main')
+
+  const chatMenuRef = useRef(undefined)
+  closeOnOutsideClick(chatMenuRef, setChatMenuOpen)
+
+  useEffect(() => {
+    if (chatMenuOpen) setView('main')
+  }, [chatMenuOpen])
+
+  return html`
+  <${Context.Provider} value=${props}>
+    <div class="chat-menu p-2 relative shadow-lg" ref=${chatMenuRef}>
+      <button
+        id="chat-menu-button"
+        class="flex items-center p-1 bg-transparent rounded-md overflow-hidden text-gray-200 transition duration-150"
+        onClick="${() => setChatMenuOpen(!chatMenuOpen)}"
+      >
+      ${!isModerator ? html`<${UserIcon} className="w-6 h-6 mr-2" />` : moderatorFlag}
+      <span
+        id="username-display"
+        class="text-indigo-100 text-sm font-bold truncate overflow-hidden whitespace-no-wrap ${isModerator &&
+    'moderator-flag'}"
+      >
+        ${username}
+      </span>
+       <${CaretDownIcon} className="w-8 h-8"/> 
+      </button>
+      ${chatMenuOpen && html`
+     <div
+        class="chat-menu-popout shadow-2xl text-gray-100 absolute w-max top-full right-0 z-50 rounded-md p-2 bg-gray-900 fadeIn "
+        style=${{ minWidth: '20rem' }}
+      >
+        ${view === "main" &&
+      html`<ul class="chat-menu-options w-max">
+            <li>
+              <${UsernameForm}
+                username=${username}
+                isModerator=${isModerator}
+                onUsernameChange=${onUsernameChange}
+                onFocus=${onFocus}
+                onBlur=${onBlur}
+              />
+            </li>
+            <li>
+                <button
+                  type="button"
+                  id="chat-toggle"
+                  onClick=${handleChatPanelToggle}
+                  style=${{
+          display: chatDisabled || noVideoContent ? 'none' : 'flex',
+        }}
+                >
+                  <span>Toggle Chat</span>
+                  <span><${ChatIcon} /></span>
+                </button>
+            </li>
+          </ul>`}
+
+        ${view != "main" && html`<${SubMenuView} view=${view} setView=${setView} />`}
+      </div>`}
+    </div>
+  </${Context.Provider}>`
+};
+
+const SubMenuView = ({ view, setView }) => {
+  return html`
+  <div className=${`chat-view fadeInRight`}>
+    <ul>
+      <li>
+        <button onClick=${() => setView('main')}>
+          <span><${CaretDownIcon} className="w-6 h-6 transform rotate-90"/></span>
+          <span>Back</span>
+        </button>
+      </li>
+    </ul>
+    ${view === 'change_username' && html`<${ChangeUsernameView}  />`}
+  </div>
+  `
+}
+
+function closeOnOutsideClick(ref, setter) {
+  useEffect(() => {
+    function handleClickOutside(event) {
+      if (ref.current && !ref.current.contains(event.target)) {
+        setter(undefined)
+      }
+    }
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [ref]);
+}
--- a/webroot/js/components/chat/username.js
+++ b/webroot/js/components/chat/username.js
@ -8,6 +8,8 @@ import {
  KEY_CUSTOM_USERNAME_SET,
 } from '../../utils/constants.js';

+import { CheckIcon, CloseIcon, EditIcon } from '../icons/index.js'
+
 export default class UsernameForm extends Component {
  constructor(props, context) {
    super(props, context);
@ -62,6 +64,8 @@ export default class UsernameForm extends Component {
        onUsernameChange(newName);
      }
      this.handleHideForm();
+    } else {
+      this.handleHideForm();
    }
  }

@ -98,65 +102,54 @@ 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">
-        <div
+      <div id="user-info">
+        <button
          id="user-info-display"
          style=${styles.info}
          title="Click to update user name"
-          class="flex flex-row justify-end items-center align-middle cursor-pointer py-2 px-4 overflow-hidden w-full opacity-1 transition-opacity duration-200 hover:opacity-75"
+          class="flex flex-row justify-end items-center align-middle cursor-pointer py-2 px-4 overflow-hidden w-full"
          onClick=${this.handleDisplayForm}
        >
-          <span
-            id="username-display"
-            class="text-indigo-100 text-xs font-semibold truncate overflow-hidden whitespace-no-wrap ${isModerator &&
-            'moderator-flag'}"
-            >${isModerator ? moderatorFlag : userIcon}${username}</span
-          >
-        </div>
+          <span id="username-display">Change Username</span>
+          <span><${EditIcon} /></span>
+        </button> 

        <div
          id="user-info-change"
-          class="flex flex-row flex-no-wrap p-1 items-center justify-end"
-          style=${styles.form}
+          class="${displayForm ? 'flex' : 'hidden'} flex-row flex-no-wrap h-full items-center justify-end"
        >
          <input
            type="text"
            id="username-change-input"
-            class="appearance-none block w-full bg-gray-200 text-gray-700 border border-black-500 rounded py-1 px-1 leading-tight text-xs focus:bg-white"
+            class="appearance-none block w-full bg-transparent rounded-md text-white p-2"
            maxlength="60"
            placeholder="Update username"
            defaultValue=${username}
            onKeydown=${this.handleKeydown}
-            onFocus=${this.handleFocus}
            onBlur=${this.handleBlur}
            ref=${this.textInput}
          />
-          <button
-            id="button-update-username"
-            onClick=${this.handleUpdateUsername}
-            type="button"
-            class="bg-blue-500 hover:bg-blue-700 text-white text-xs uppercase p-1 mx-1 rounded cursor-pointer user-btn"
-          >
-            Update
-          </button>
+          <div class="username-buttons-wrapper flex ml-2">
+            <button
+              id="button-update-username"
+              onClick=${this.handleUpdateUsername}
+              type="button"
+              class="bg-purple-500 hover:bg-purple-700 text-white uppercase p-1 ml-1 rounded-md cursor-pointer transition duration-100 user-btn"
+            >
+              <${CheckIcon } />
+            </button>

-          <button
-            id="button-cancel-change"
-            onClick=${this.handleHideForm}
-            type="button"
-            class="bg-gray-900 hover:bg-gray-800 py-1 px-2 mx-1 rounded cursor-pointer user-btn text-white text-xs uppercase text-opacity-50"
-            title="cancel"
-          >
-            X
-          </button>
+            <button
+              id="button-cancel-change"
+              onClick=${this.handleHideForm}
+              type="button"
+              class="bg-gray-700 hover:bg-gray-500 text-white uppercase p-1 ml-1 rounded-md cursor-pointer transition duration-100 user-btn"
+              title="cancel"
+            >
+              <${CloseIcon} /> 
+            </button>
+          </div>
        </div>
      </div>
    `;
--- a/webroot/js/components/icons/CaretDownIcon.js
+++ b/webroot/js/components/icons/CaretDownIcon.js
@ -0,0 +1,13 @@
+import { h } from '/js/web_modules/preact.js';
+import htm from '/js/web_modules/htm.js';
+const html = htm.bind(h);
+
+export const CaretDownIcon = ({ className = "w-6 h-6"}) => {
+  return html`<svg class="${className}" 
+  fill="currentColor" 
+  viewBox="0 0 20 20" 
+  xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd">
+    </path>
+  </svg>`
+}
--- a/webroot/js/components/icons/ChatIcon.js
+++ b/webroot/js/components/icons/ChatIcon.js
@ -0,0 +1,15 @@
+import { h } from '/js/web_modules/preact.js';
+import htm from '/js/web_modules/htm.js';
+const html = htm.bind(h);
+
+export const ChatIcon = ({ className = 'w-6 h-6' }) => {
+  return html`
+    <svg
+      className="${className}"
+      fill="currentColor" 
+      viewBox="0 0 20 20" 
+      xmlns="http://www.w3.org/2000/svg">
+        <path fill-rule="evenodd" d="M18 5v8a2 2 0 01-2 2h-5l-5 4v-4H4a2 2 0 01-2-2V5a2 2 0 012-2h12a2 2 0 012 2zM7 8H5v2h2V8zm2 0h2v2H9V8zm6 0h-2v2h2V8z" clip-rule="evenodd"></path>
+    </svg>
+  `;
+};
--- a/webroot/js/components/icons/CheckIcon.js
+++ b/webroot/js/components/icons/CheckIcon.js
@ -0,0 +1,14 @@
+import { h } from '/js/web_modules/preact.js';
+import htm from '/js/web_modules/htm.js';
+const html = htm.bind(h);
+
+export const CheckIcon = ({ className = 'w-6 h-6' }) => {
+  return html`<svg 
+    class="${className}" 
+    fill="none"
+    stroke="currentColor" 
+    viewBox="0 0 24 24" 
+    xmlns="http://www.w3.org/2000/svg">
+    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
+  </svg>`
+}
--- a/webroot/js/components/icons/CloseIcon.js
+++ b/webroot/js/components/icons/CloseIcon.js
@ -0,0 +1,14 @@
+
+import { h } from '/js/web_modules/preact.js';
+import htm from '/js/web_modules/htm.js';
+const html = htm.bind(h);
+
+export const CloseIcon = ({ className = 'w-6 h-6' }) => {
+  return html`<svg 
+    class="${className}" 
+    fill="currentColor" 
+    viewBox="0 0 20 20" 
+    xmlns="http://www.w3.org/2000/svg">
+      <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
+    </svg>`
+}
--- a/webroot/js/components/icons/EditIcon.js
+++ b/webroot/js/components/icons/EditIcon.js
@ -0,0 +1,14 @@
+
+import { h } from '/js/web_modules/preact.js';
+import htm from '/js/web_modules/htm.js';
+const html = htm.bind(h);
+
+export const EditIcon = ({ className = 'w-6 h-6' }) => {
+  return html`<svg class="${className}" 
+    fill="currentColor" 
+    viewBox="0 0 20 20" 
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z"></path>
+  </svg>`
+} 
--- a/webroot/js/components/icons/UserIcon.js
+++ b/webroot/js/components/icons/UserIcon.js
@ -0,0 +1,23 @@
+
+import { h } from '/js/web_modules/preact.js';
+import htm from '/js/web_modules/htm.js';
+const html = htm.bind(h);
+
+export const UserIcon = ({ className }) => {
+  return html`
+    <svg
+      class="${className}"
+      fill="currentColor"
+      stroke="currentColor"
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="4"
+        d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
+      ></path>
+    </svg>
+  `;
+};
--- a/webroot/js/components/icons/index.js
+++ b/webroot/js/components/icons/index.js
@ -0,0 +1,6 @@
+export { ChatIcon } from "./ChatIcon.js"
+export { UserIcon } from "./UserIcon.js"
+export { EditIcon } from "./EditIcon.js"
+export { CheckIcon } from "./CheckIcon.js"
+export { CloseIcon } from "./CloseIcon.js"
+export { CaretDownIcon } from "./CaretDownIcon.js"
--- a/webroot/styles/app.css
+++ b/webroot/styles/app.css
@ -78,12 +78,33 @@ header {
  background-image: url(/img/logo.svg);
 }

+.chat-menu-options li button {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  align-items: center;
+  justify-content: space-between;
+  border-radius: .25rem;
+  padding: .5rem .3rem;
+  color: #dbdbdb;
+  animation: fadeIn 150ms;
+}
+
+.chat-view li button {
+  animation: slideInRight 150ms;
+}
+
+.chat-menu-options li button:hover {
+  background-color: var(--owncast-purple);
+}
+
+
 #chat-toggle {
  min-width: 3rem;
 }

 #user-info-change {
-  display: none;
+  background-color: transparent;
 }

 .external-action-button {
@ -144,10 +165,6 @@ header {
  justify-content: center;
 }

-.chat-hidden #chat-toggle {
-  opacity: 0.75;
-}
-
 /* hide chat by default */
 #chat-container-wrap {
  display: none;
@ -309,13 +326,8 @@ header {
 /* ************************************************ */

@media screen and (max-width: 600px) {
-  #user-info-change {
-    width: 75vw;
-  }
  #user-info-display {
-    max-width: 30vw;
-    overflow: hidden;
-    text-overflow: ellipsis;
+    max-width: none;
  }
 }

@ -395,6 +407,30 @@ header {
 /**************************
  Modal Animation Style
 **************************/
+.fadeIn {
+  animation: mmfadeIn 150ms forwards;
+}
+
+.fadeOut {
+  animation: mmfadeOut 150ms forwards;
+}
+
+.slideInTop {
+  animation: mmslideIn 150ms forwards;
+}
+
+.slideOutBottom {
+  animation: mmslideOut 150ms forwards;
+}
+
+.slideInLeft {
+  animation: mmslideInLeft 150ms forwards;
+}
+
+.slideInRight {
+  animation: mmslideInRight 150ms forwards;
+}
+

@keyframes mmfadeIn {
  from {
@ -414,6 +450,25 @@ header {
  }
 }

+
+@keyframes mmslideInRight {
+  from {
+    transform: translateX(15%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes mmslideInLeft {
+  from {
+    transform: translateX(-15%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
@keyframes mmslideIn {
  from {
    transform: translateY(15%);
@ -578,21 +633,10 @@ header {
  bottom: calc(100% + 0.5rem);
  opacity: 0;
  transform: translateY(0%);
-  animation: fade-in 300ms forwards;
+  animation: mmfadeIn 300ms forwards;
  animation-delay: 1s;
 }

-@keyframes fade-in {
-  from {
-    opacity: 0;
-    transform: translateY(-20%);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
 #notify-button-container .external-action-icon {
  margin: 0.25em 0.5em 0.25em 0.5em;
 }