From 03c2e44260dce0f4d5bea61ee23a64bd7e7f1408 Mon Sep 17 00:00:00 2001 From: Lucy Date: Tue, 24 Sep 2024 10:24:54 -0400 Subject: [PATCH] allows to reorder chat tabs & hides delete from main tab (#81455) (#3529) 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) - 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) :cl: qol: hides the delete button on the main tab allows to reorder all other chat tabs /:cl: Co-authored-by: Kashargul <144968721+Kashargul@users.noreply.github.com> --- .../tgui-panel/chat/ChatPageSettings.jsx | 76 +++++++++++++++---- tgui/packages/tgui-panel/chat/actions.js | 2 + tgui/packages/tgui-panel/chat/middleware.js | 6 +- tgui/packages/tgui-panel/chat/model.js | 2 + tgui/packages/tgui-panel/chat/reducer.js | 49 ++++++++++++ 5 files changed, 119 insertions(+), 16 deletions(-) diff --git a/tgui/packages/tgui-panel/chat/ChatPageSettings.jsx b/tgui/packages/tgui-panel/chat/ChatPageSettings.jsx index e4e7ea0dfdef..aeaa3381f445 100644 --- a/tgui/packages/tgui-panel/chat/ChatPageSettings.jsx +++ b/tgui/packages/tgui-panel/chat/ChatPageSettings.jsx @@ -13,7 +13,14 @@ import { Section, 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'; @@ -53,20 +60,59 @@ export const ChatPageSettings = (props, context) => { } /> - - + + ) : ( + '' + )} + + + + {!page.isMain ? ( + + Reorder Chat:  + + + + ) : ( + '' + )}
diff --git a/tgui/packages/tgui-panel/chat/actions.js b/tgui/packages/tgui-panel/chat/actions.js index 802801e63497..0bd64fba9016 100644 --- a/tgui/packages/tgui-panel/chat/actions.js +++ b/tgui/packages/tgui-panel/chat/actions.js @@ -20,3 +20,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 index 5d2997a9a04f..4dccee80d08d 100644 --- a/tgui/packages/tgui-panel/chat/middleware.js +++ b/tgui/packages/tgui-panel/chat/middleware.js @@ -20,6 +20,8 @@ import { changeScrollTracking, clearChat, loadChat, + moveChatPageLeft, + moveChatPageRight, rebuildChat, removeChatPage, saveChatToDisk, @@ -153,7 +155,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 index 99292e74fc01..16c4d86373c5 100644 --- a/tgui/packages/tgui-panel/chat/model.js +++ b/tgui/packages/tgui-panel/chat/model.js @@ -18,6 +18,7 @@ export const createPage = (obj) => { } return { + isMain: false, id: createUuid(), name: 'New Tab', acceptedTypes: acceptedTypes, @@ -34,6 +35,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 index e75fbd06e43e..56894fe579a1 100644 --- a/tgui/packages/tgui-panel/chat/reducer.js +++ b/tgui/packages/tgui-panel/chat/reducer.js @@ -8,6 +8,8 @@ import { addChatPage, changeChatPage, 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; };