change window title to two parts, one changeable

This commit is contained in:
HF 2021-05-03 03:51:51 +02:00
parent a2ca757e0b
commit f1e8830f94
10 changed files with 78 additions and 40 deletions

View File

@ -13,7 +13,7 @@
"build-en": "npm run extract && npm run minify-css", "build-en": "npm run extract && npm run minify-css",
"webpack": "webpack --config ./webpack.config.web.babel.js && parallel-webpack --config ./webpack.config.client.babel.js", "webpack": "webpack --config ./webpack.config.web.babel.js && parallel-webpack --config ./webpack.config.client.babel.js",
"minify-css": "babel-node scripts/minifyCss.js", "minify-css": "babel-node scripts/minifyCss.js",
"extract": "webpack --env extract --config ./webpack.config.web.babel.js && webpack --env extract --env debug --config ./webpack.config.client.babel.js", "extract": "webpack --env extract --config ./webpack.config.web.babel.js && webpack --env extract --config ./webpack.config.client.babel.js",
"babel-node": "cd $INIT_CWD && babel-node", "babel-node": "cd $INIT_CWD && babel-node",
"lint": "cd $INIT_CWD && eslint --ext .jsx --ext .js", "lint": "cd $INIT_CWD && eslint --ext .jsx --ext .js",
"lint:src": "eslint --ext .jsx --ext .js src", "lint:src": "eslint --ext .jsx --ext .js src",

View File

@ -593,14 +593,14 @@ export function showModal(modalType: string, title: string): Action {
export function showSettingsModal(): Action { export function showSettingsModal(): Action {
return showModal( return showModal(
'SETTINGS', 'SETTINGS',
t`Settings`, '',
); );
} }
export function showUserAreaModal(): Action { export function showUserAreaModal(): Action {
return showModal( return showModal(
'USERAREA', 'USERAREA',
t`User Area`, '',
); );
} }
@ -613,6 +613,14 @@ export function changeWindowType(windowId, windowType, args = null) {
}; };
} }
export function setWindowTitle(windowId, title) {
return {
type: 'SET_WINDOW_TITLE',
windowId,
title,
};
}
export function showRegisterModal(): Action { export function showRegisterModal(): Action {
return showModal( return showModal(
'REGISTER', 'REGISTER',
@ -636,14 +644,14 @@ export function showHelpModal(): Action {
export function showArchiveModal(): Action { export function showArchiveModal(): Action {
return showModal( return showModal(
'ARCHIVE', 'ARCHIVE',
t`Canvas Archive`, t`Look at past Canvases`,
); );
} }
export function showCanvasSelectionModal(): Action { export function showCanvasSelectionModal(): Action {
return showModal( return showModal(
'CANVAS_SELECTION', 'CANVAS_SELECTION',
t`Canvas Selection`, '',
); );
} }
@ -831,7 +839,7 @@ export function hideAllWindowTypes(
export function openChatWindow(): Action { export function openChatWindow(): Action {
return openWindow( return openWindow(
'CHAT', 'CHAT',
t`Chat`, '',
false, false,
true, true,
{ chatChannel: 1, inputMessage: '' }, { chatChannel: 1, inputMessage: '' },

View File

@ -99,6 +99,7 @@ export type Action =
windowType: number, windowType: number,
args: Object, args: Object,
} }
| { type: 'SET_WINDOW_TITLE', windowId: number, title: string }
| { type: 'BLOCK_USER', userId: number, userName: string } | { type: 'BLOCK_USER', userId: number, userName: string }
| { type: 'UNBLOCK_USER', userId: number, userName: string } | { type: 'UNBLOCK_USER', userId: number, userName: string }
| { type: 'SET_BLOCKING_DM', blockDm: boolean } | { type: 'SET_BLOCKING_DM', blockDm: boolean }

View File

@ -44,7 +44,7 @@ const ModalRoot = () => {
return null; return null;
} }
const Content = COMPONENTS[windowType]; const [Content, name] = COMPONENTS[windowType];
return ( return (
(render || open) (render || open)
@ -60,7 +60,7 @@ const ModalRoot = () => {
<div <div
className={(open && render) ? 'Modal show' : 'Modal'} className={(open && render) ? 'Modal show' : 'Modal'}
> >
<h2>{title}</h2> <h2>{(title) ? `${name} - ${title}` : name}</h2>
<div <div
onClick={() => dispatch(closeWindow(0))} onClick={() => dispatch(closeWindow(0))}
className="ModalClose" className="ModalClose"

View File

@ -87,7 +87,7 @@ const Window = ({ id }) => {
}, 10); }, 10);
}, [open, hidden]); }, [open, hidden]);
const Content = COMPONENTS[windowType]; const [Content, name] = COMPONENTS[windowType];
if (!render && hidden) { if (!render && hidden) {
return null; return null;
@ -123,7 +123,7 @@ const Window = ({ id }) => {
ref={titleBarRef} ref={titleBarRef}
title={t`Move`} title={t`Move`}
> >
{title} {(title) ? `${name} - ${title}` : name}
</span> </span>
<span <span
className="win-topbtn" className="win-topbtn"

View File

@ -15,7 +15,7 @@ function useDrag(elRef, startHandler, diffHandler) {
const startDrag = useCallback((event) => { const startDrag = useCallback((event) => {
event.preventDefault(); event.preventDefault();
event.stopPropagation(); event.stopPropagation();
startHandler && startHandler(); if (startHandler) startHandler();
let { let {
clientX: startX, clientX: startX,

View File

@ -19,6 +19,7 @@ import {
setChatInputMessage, setChatInputMessage,
fetchChatMessages, fetchChatMessages,
showContextMenu, showContextMenu,
setWindowTitle,
} from '../../actions'; } from '../../actions';
import ProtocolClient from '../../socket/ProtocolClient'; import ProtocolClient from '../../socket/ProtocolClient';
import splitChatMessage from '../../core/chatMessageFilter'; import splitChatMessage from '../../core/chatMessageFilter';
@ -39,9 +40,9 @@ const Chat = ({
const dispatch = useDispatch(); const dispatch = useDispatch();
const setChannel = useCallback((cid) => dispatch( const setChannel = useCallback((cid) => {
setChatChannel(windowId, cid), dispatch(setChatChannel(windowId, cid));
), [dispatch]); }, [dispatch]);
const ownName = useSelector((state) => state.user.name); const ownName = useSelector((state) => state.user.name);
// eslint-disable-next-line max-len // eslint-disable-next-line max-len
@ -61,6 +62,13 @@ const Chat = ({
dispatch(fetchChatMessages(chatChannel)); dispatch(fetchChatMessages(chatChannel));
} }
useEffect(() => {
if (channels[chatChannel]) {
const channelName = channels[chatChannel][0];
dispatch(setWindowTitle(windowId, `Chan: ${channelName}`));
}
}, [chatChannel]);
useLayoutEffect(() => { useLayoutEffect(() => {
stayScrolled(); stayScrolled();
}, [channelMessages.length]); }, [channelMessages.length]);

View File

@ -0,0 +1,25 @@
/*
* @flow
*/
import { t } from 'ttag';
import Help from './Help';
import Settings from './Settings';
import UserArea from './UserArea';
import Register from './Register';
import CanvasSelect from './CanvasSelect';
import Archive from './Archive';
import Chat from './Chat';
import ForgotPassword from './ForgotPassword';
export default {
HELP: [Help, t`Help`],
SETTINGS: [Settings, t`Settings`],
USERAREA: [UserArea, t`User Area`],
REGISTER: [Register, t`Registration`],
FORGOT_PASSWORD: [ForgotPassword, t`Forgot Password`],
CHAT: [Chat, t`Chat`],
CANVAS_SELECTION: [CanvasSelect, t`Canvas Selection`],
ARCHIVE: [Archive, t`Canvas Archive`],
/* other windows */
};

View File

@ -1,24 +0,0 @@
/*
* @flow
*/
import Help from './Help';
import Settings from './Settings';
import UserArea from './UserArea';
import Register from './Register';
import CanvasSelect from './CanvasSelect';
import Archive from './Archive';
import Chat from './Chat';
import ForgotPassword from './ForgotPassword';
export default {
NONE: null,
HELP: Help,
SETTINGS: Settings,
USERAREA: UserArea,
REGISTER: Register,
FORGOT_PASSWORD: ForgotPassword,
CHAT: Chat,
CANVAS_SELECTION: CanvasSelect,
ARCHIVE: Archive,
/* other windows */
};

View File

@ -199,7 +199,7 @@ export default function windows(
} }
const windowId = generateWindowId(state); const windowId = generateWindowId(state);
const newZMax = state.zMax + 1; const newZMax = state.zMax + 1;
let newWindows = [ const newWindows = [
...state.windows, ...state.windows,
{ {
windowId, windowId,
@ -378,6 +378,7 @@ export default function windows(
modal: { modal: {
...state.modal, ...state.modal,
windowType, windowType,
title: '',
}, },
}; };
} }
@ -386,6 +387,7 @@ export default function windows(
return { return {
...win, ...win,
windowType, windowType,
title: '',
}; };
}); });
return { return {
@ -403,7 +405,7 @@ export default function windows(
windows: oldWindows, zMax, windows: oldWindows, zMax,
} = state; } = state;
let newWindows = []; const newWindows = [];
for (let i = 0; i < oldWindows.length; i += 1) { for (let i = 0; i < oldWindows.length; i += 1) {
const win = oldWindows[i]; const win = oldWindows[i];
@ -628,6 +630,24 @@ export default function windows(
}; };
} }
case 'SET_WINDOW_TITLE': {
const {
windowId,
title,
} = action;
const newWindows = state.windows.map((win) => {
if (win.windowId !== windowId) return win;
return {
...win,
title,
};
});
return {
...state,
windows: newWindows,
};
}
/* /*
* args specific actions * args specific actions
*/ */