TGchat: Case Sensitive fix, Mute button (ParadiseSS13#24024)

* Mute tab button * Some tooltips * Highlights Case Sensitive fix and Cyrillic support * Button fix and Mute icons * Little button cleanup * Focus transition - longer --------- Co-authored-by: S34N <[email protected]>
HMBGERDO · Feb 6, 2024 · 3793434 · 3793434
1 parent 7591476
commit 3793434
Show file tree

Hide file tree

Showing 10 changed files with 159 additions and 142 deletions.
diff --git a/tgui/packages/tgui-panel/chat/ChatPageSettings.js b/tgui/packages/tgui-panel/chat/ChatPageSettings.js
@@ -25,7 +25,7 @@ export const ChatPageSettings = (props, context) => {
       <Stack align="center">
         <Stack.Item grow>
           <Input
-            fluid
+            width="100%"
             value={page.name}
             onChange={(e, value) =>
               dispatch(
@@ -37,8 +37,25 @@ export const ChatPageSettings = (props, context) => {
             }
           />
         </Stack.Item>
+        <Stack.Item>
+          <Button.Checkbox
+            content="Mute"
+            checked={page.hideUnreadCount}
+            icon={page.hideUnreadCount ? 'bell-slash' : 'bell'}
+            tooltip="Disables unread counter"
+            onClick={() =>
+              dispatch(
+                updateChatPage({
+                  pageId: page.id,
+                  hideUnreadCount: !page.hideUnreadCount,
+                })
+              )
+            }
+          />
+        </Stack.Item>
         <Stack.Item>
           <Button
+            content="Remove"
             icon="times"
             color="red"
             onClick={() =>
@@ -48,9 +65,7 @@ export const ChatPageSettings = (props, context) => {
                 })
               )
             }
-          >
-            Remove
-          </Button>
+          />
         </Stack.Item>
       </Stack>
       <Divider />

diff --git a/tgui/packages/tgui-panel/chat/ChatTabs.js b/tgui/packages/tgui-panel/chat/ChatTabs.js
@@ -38,6 +38,7 @@ export const ChatTabs = (props, context) => {
               key={page.id}
               selected={page === currentPage}
               rightSlot={
+                !page.hideUnreadCount &&
                 page.unreadCount > 0 && (
                   <UnreadCountWidget value={page.unreadCount} />
                 )

diff --git a/tgui/packages/tgui-panel/chat/model.js b/tgui/packages/tgui-panel/chat/model.js
@@ -22,6 +22,7 @@ export const createPage = (obj) => {
     name: 'New Tab',
     acceptedTypes: acceptedTypes,
     unreadCount: 0,
+    hideUnreadCount: false,
     createdAt: Date.now(),
     ...obj,
   };

diff --git a/tgui/packages/tgui-panel/chat/renderer.js b/tgui/packages/tgui-panel/chat/renderer.js
@@ -190,7 +190,7 @@ class ChatRenderer {
       const highlightWholeMessage = setting.highlightWholeMessage;
       const matchWord = setting.matchWord;
       const matchCase = setting.matchCase;
-      const allowedRegex = /^[a-z0-9_\-$/^[\s\]\\]+$/gi;
+      const allowedRegex = /^[a-zа-яё0-9_\-$/^[\s\]\\]+$/gi;
       const regexEscapeCharacters = /[!#$%^&*)(+=.<>{}[\]:;'"|~`_\-\\/]/g;
       const lines = String(text)
         .split(/[,|]/)

diff --git a/tgui/packages/tgui-panel/chat/replaceInTextNode.js b/tgui/packages/tgui-panel/chat/replaceInTextNode.js
@@ -93,7 +93,7 @@ export const replaceInTextNode = (regex, words, createNode) => (node) => {
     for (let word of words) {
       // Capture if the word is at the beginning, end, middle,
       // or by itself in a message
-      wordRegexStr += `^${word}\\W|\\W${word}\\W|\\W${word}$|^${word}$`;
+      wordRegexStr += `^${word}\\s\\W|\\s\\W${word}\\s\\W|\\s\\W${word}$|^${word}\\s\\W$`;
       // Make sure the last character for the expression is NOT '|'
       if (++i !== words.length) {
         wordRegexStr += '|';

diff --git a/tgui/packages/tgui-panel/settings/SettingsPanel.js b/tgui/packages/tgui-panel/settings/SettingsPanel.js
@@ -176,18 +176,25 @@ export const SettingsGeneral = (props, context) => {
         </LabeledList.Item>
       </LabeledList>
       <Divider />
-      <Button
-        mt={0.25}
-        content="Save chat log"
-        icon="save"
-        onClick={() => dispatch(saveChatToDisk())}
-      />
-      <Button.Confirm
-        icon="trash"
-        confirmContent="Are you sure?"
-        content="Clear chat"
-        onClick={() => dispatch(clearChat())}
-      />
+      <Stack fill>
+        <Stack.Item grow mt={0.15}>
+          <Button
+            content="Save chat log"
+            icon="save"
+            tooltip="Export current tab history into HTML file"
+            onClick={() => dispatch(saveChatToDisk())}
+          />
+        </Stack.Item>
+        <Stack.Item mt={0.15}>
+          <Button.Confirm
+            icon="trash"
+            confirmContent="Are you sure?"
+            content="Clear chat"
+            tooltip="Erase current tab history"
+            onClick={() => dispatch(clearChat())}
+          />
+        </Stack.Item>
+      </Stack>
     </Section>
   );
 };

diff --git a/tgui/packages/tgui/styles/components/Button.scss b/tgui/packages/tgui/styles/components/Button.scss
@@ -22,26 +22,19 @@ $bg-map: colors.$bg-map !default;
   $text-color: if($luminance > 0.4, rgba(0, 0, 0, 1), rgba(255, 255, 255, 1));
 
   transition:
-    color 50ms,
-    background-color 50ms;
+    color 100ms,
+    background-color 100ms;
   background-color: $color;
   color: $text-color;
 
-  &:hover {
-    transition:
-      color 0ms,
-      background-color 0ms;
-  }
-
   &:focus {
     transition:
-      color 100ms,
-      background-color 100ms;
+      color 250ms,
+      background-color 250ms;
   }
 
-  &:hover,
-  &:focus {
-    background-color: lighten($color, 15%);
+  &:hover {
+    background-color: lighten($color, 25%);
     color: $text-color;
   }
 }

diff --git a/tgui/public/tgui-panel.bundle.css b/tgui/public/tgui-panel.bundle.css
diff --git a/tgui/public/tgui-panel.bundle.js b/tgui/public/tgui-panel.bundle.js
diff --git a/tgui/public/tgui.bundle.css b/tgui/public/tgui.bundle.css