change window title to two parts, one changeable
This commit is contained in:
parent
a2ca757e0b
commit
f1e8830f94
|
@ -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",
|
||||||
|
|
|
@ -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: '' },
|
||||||
|
|
|
@ -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 }
|
||||||
|
|
|
@ -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"
|
||||||
|
|
|
@ -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"
|
||||||
|
|
|
@ -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,
|
||||||
|
|
|
@ -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]);
|
||||||
|
|
25
src/components/windows/index.js
Normal file
25
src/components/windows/index.js
Normal 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 */
|
||||||
|
};
|
|
@ -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 */
|
|
||||||
};
|
|
|
@ -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
|
||||||
*/
|
*/
|
||||||
|
|
Loading…
Reference in New Issue
Block a user