[MIRROR] allows to reorder chat tabs & hides delete from main tab (#1042

) * allows to reorder chat tabs & hides delete from main tab (#81455) ## About The Pull Request This pull request aims to hide the delete button from the main chat tab as well as to allow reordering of the other chat tabs. ((Not to cause any issues with existing tabs, the variable has to be true, so the hiding of the delete button only takes effect for new players or when someone deleted all tabs once)) ![grafik](https://github.com/tgstation/tgstation/assets/144968721/c1682cef-3e4f-4c4f-8394-bbf1345d4630) ![grafik](https://github.com/tgstation/tgstation/assets/144968721/ffe973a5-24eb-44ed-b8db-e3c1867935d1) ## Why It's Good For The Game - I'm not quite sure, why the main tab has the delete button in the first place, after all, it's not like the tab should be removed? So, we can just hide the delete button on that tab and keep it always there. - Accidentally deleting a chat tab when one has multiple tabs set up requires to change all tabs to the right to regain the previous order, so why not simply allow to reorder all tabs except for the main tab. (The main tab can neither be moved, nor can anything swapped with it) ## Changelog :cl: qol: hides the delete button on the main tab allows to reorder all other chat tabs /:cl: * allows to reorder chat tabs & hides delete from main tab --------- Co-authored-by: Kashargul <[email protected]>
Fluffy-Frontier · Feb 18, 2024 · 43b9a31 · 43b9a31
1 parent 30dfd4c
commit 43b9a31
Show file tree

Hide file tree

Showing 5 changed files with 118 additions and 16 deletions.
diff --git a/tgui/packages/tgui-panel/chat/ChatPageSettings.jsx b/tgui/packages/tgui-panel/chat/ChatPageSettings.jsx
@@ -14,7 +14,13 @@ import {
   Stack,
 } from 'tgui/components';
 
-import { removeChatPage, toggleAcceptedType, updateChatPage } from './actions';
+import {
+  moveChatPageLeft,
+  moveChatPageRight,
+  removeChatPage,
+  toggleAcceptedType,
+  updateChatPage,
+} from './actions';
 import { MESSAGE_TYPES } from './constants';
 import { selectCurrentChatPage } from './selectors';
 
@@ -54,20 +60,59 @@ export const ChatPageSettings = (props) => {
             }
           />
         </Stack.Item>
-        <Stack.Item>
-          <Button
-            content="Remove"
-            icon="times"
-            color="red"
-            onClick={() =>
-              dispatch(
-                removeChatPage({
-                  pageId: page.id,
-                }),
-              )
-            }
-          />
-        </Stack.Item>
+        {!page.isMain ? (
+          <Stack.Item>
+            <Button
+              icon="times"
+              color="red"
+              onClick={() =>
+                dispatch(
+                  removeChatPage({
+                    pageId: page.id,
+                  }),
+                )
+              }
+            >
+              Remove
+            </Button>
+          </Stack.Item>
+        ) : (
+          ''
+        )}
+      </Stack>
+      <Divider />
+      <Stack align="center">
+        {!page.isMain ? (
+          <Stack.Item>
+            Reorder Chat:&emsp;
+            <Button
+              color="blue"
+              onClick={() =>
+                dispatch(
+                  moveChatPageLeft({
+                    pageId: page.id,
+                  }),
+                )
+              }
+            >
+              &laquo;
+            </Button>
+            <Button
+              color="blue"
+              onClick={() =>
+                dispatch(
+                  moveChatPageRight({
+                    pageId: page.id,
+                  }),
+                )
+              }
+            >
+              &raquo;
+            </Button>
+          </Stack.Item>
+        ) : (
+          ''
+        )}
       </Stack>
       <Divider />
       <Section title="Messages to display" level={2}>

diff --git a/tgui/packages/tgui-panel/chat/actions.js b/tgui/packages/tgui-panel/chat/actions.js
@@ -21,3 +21,5 @@ export const toggleAcceptedType = createAction('chat/toggleAcceptedType');
 export const removeChatPage = createAction('chat/removePage');
 export const changeScrollTracking = createAction('chat/changeScrollTracking');
 export const saveChatToDisk = createAction('chat/saveToDisk');
+export const moveChatPageLeft = createAction('chat/movePageLeft');
+export const moveChatPageRight = createAction('chat/movePageRight');
diff --git a/tgui/packages/tgui-panel/chat/middleware.js b/tgui/packages/tgui-panel/chat/middleware.js
@@ -21,6 +21,8 @@ import {
   changeScrollTracking,
   clearChat,
   loadChat,
+  moveChatPageLeft,
+  moveChatPageRight,
   rebuildChat,
   removeChatPage,
   saveChatToDisk,
@@ -154,7 +156,9 @@ export const chatMiddleware = (store) => {
       type === changeChatPage.type ||
       type === addChatPage.type ||
       type === removeChatPage.type ||
-      type === toggleAcceptedType.type
+      type === toggleAcceptedType.type ||
+      type === moveChatPageLeft.type ||
+      type === moveChatPageRight.type
     ) {
       next(action);
       const page = selectCurrentChatPage(store.getState());

diff --git a/tgui/packages/tgui-panel/chat/model.js b/tgui/packages/tgui-panel/chat/model.js
@@ -19,6 +19,7 @@ export const createPage = (obj) => {
   }
 
   return {
+    isMain: false,
     id: createUuid(),
     name: 'New Tab',
     acceptedTypes: acceptedTypes,
@@ -35,6 +36,7 @@ export const createMainPage = () => {
     acceptedTypes[typeDef.type] = true;
   }
   return createPage({
+    isMain: true,
     name: 'Main',
     acceptedTypes,
   });

diff --git a/tgui/packages/tgui-panel/chat/reducer.js b/tgui/packages/tgui-panel/chat/reducer.js
@@ -9,6 +9,8 @@ import {
   changeChatPage,
   changeScrollTracking,
   loadChat,
+  moveChatPageLeft,
+  moveChatPageRight,
   removeChatPage,
   toggleAcceptedType,
   updateChatPage,
@@ -188,5 +190,52 @@ export const chatReducer = (state = initialState, action) => {
     }
     return nextState;
   }
+  if (type === moveChatPageLeft.type) {
+    const { pageId } = payload;
+    const nextState = {
+      ...state,
+      pages: [...state.pages],
+      pageById: {
+        ...state.pageById,
+      },
+    };
+    const tmpPage = nextState.pageById[pageId];
+    const fromIndex = nextState.pages.indexOf(tmpPage.id);
+    const toIndex = fromIndex - 1;
+    // don't ever move leftmost page
+    if (fromIndex > 0) {
+      // don't ever move anything to the leftmost page
+      if (toIndex > 0) {
+        const tmp = nextState.pages[fromIndex];
+        nextState.pages[fromIndex] = nextState.pages[toIndex];
+        nextState.pages[toIndex] = tmp;
+      }
+    }
+    return nextState;
+  }
+
+  if (type === moveChatPageRight.type) {
+    const { pageId } = payload;
+    const nextState = {
+      ...state,
+      pages: [...state.pages],
+      pageById: {
+        ...state.pageById,
+      },
+    };
+    const tmpPage = nextState.pageById[pageId];
+    const fromIndex = nextState.pages.indexOf(tmpPage.id);
+    const toIndex = fromIndex + 1;
+    // don't ever move leftmost page
+    if (fromIndex > 0) {
+      // don't ever move anything out of the array
+      if (toIndex < nextState.pages.length) {
+        const tmp = nextState.pages[fromIndex];
+        nextState.pages[fromIndex] = nextState.pages[toIndex];
+        nextState.pages[toIndex] = tmp;
+      }
+    }
+    return nextState;
+  }
   return state;
 };