remember window position and size on maximize
fix screen width check on receive_me fix font color in windows set default chat window size and position
This commit is contained in:
parent
e9640bfe89
commit
c11976cdca
|
@ -163,11 +163,9 @@ export function setMobile(mobile: boolean): Action {
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
export function windowResize(width: number, height: number): Action {
|
export function windowResize(): Action {
|
||||||
return {
|
return {
|
||||||
type: 'WINDOW_RESIZE',
|
type: 'WINDOW_RESIZE',
|
||||||
width,
|
|
||||||
height,
|
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -572,6 +570,10 @@ export function openWindow(
|
||||||
fullscreen: boolean,
|
fullscreen: boolean,
|
||||||
cloneable: boolean,
|
cloneable: boolean,
|
||||||
args: Object,
|
args: Object,
|
||||||
|
xPos: number = null,
|
||||||
|
yPos: number = null,
|
||||||
|
width: number = null,
|
||||||
|
height: number = null,
|
||||||
): Action {
|
): Action {
|
||||||
return {
|
return {
|
||||||
type: 'OPEN_WINDOW',
|
type: 'OPEN_WINDOW',
|
||||||
|
@ -580,6 +582,10 @@ export function openWindow(
|
||||||
fullscreen,
|
fullscreen,
|
||||||
cloneable,
|
cloneable,
|
||||||
args,
|
args,
|
||||||
|
xPos,
|
||||||
|
yPos,
|
||||||
|
width,
|
||||||
|
height,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -823,8 +829,17 @@ export function hideAllWindowTypes(
|
||||||
}
|
}
|
||||||
|
|
||||||
export function openChatWindow(): Action {
|
export function openChatWindow(): Action {
|
||||||
return openWindow('CHAT', t`Chat`, false, true,
|
return openWindow(
|
||||||
{ chatChannel: 1, inputMessage: '' });
|
'CHAT',
|
||||||
|
t`Chat`,
|
||||||
|
false,
|
||||||
|
true,
|
||||||
|
{ chatChannel: 1, inputMessage: '' },
|
||||||
|
window.innerWidth - 350 - 62,
|
||||||
|
window.innerHeight - 220 - 64,
|
||||||
|
350,
|
||||||
|
220,
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
|
|
|
@ -35,7 +35,7 @@ export type Action =
|
||||||
| { type: 'SET_WAIT', wait: ?number }
|
| { type: 'SET_WAIT', wait: ?number }
|
||||||
| { type: 'RECEIVE_COOLDOWN', wait: number }
|
| { type: 'RECEIVE_COOLDOWN', wait: number }
|
||||||
| { type: 'SET_MOBILE', mobile: boolean }
|
| { type: 'SET_MOBILE', mobile: boolean }
|
||||||
| { type: 'WINDOW_RESIZE', width: number, height: number }
|
| { type: 'WINDOW_RESIZE'}
|
||||||
| { type: 'COOLDOWN_END' }
|
| { type: 'COOLDOWN_END' }
|
||||||
| { type: 'COOLDOWN_SET', coolDown: number }
|
| { type: 'COOLDOWN_SET', coolDown: number }
|
||||||
| { type: 'COOLDOWN_DELTA', delta: number }
|
| { type: 'COOLDOWN_DELTA', delta: number }
|
||||||
|
|
|
@ -108,7 +108,7 @@ function init() {
|
||||||
// listen for resize
|
// listen for resize
|
||||||
//
|
//
|
||||||
function onWindowResize() {
|
function onWindowResize() {
|
||||||
store.dispatch(windowResize(window.innerWidth, window.innerHeight));
|
store.dispatch(windowResize());
|
||||||
}
|
}
|
||||||
window.addEventListener('resize', onWindowResize);
|
window.addEventListener('resize', onWindowResize);
|
||||||
onWindowResize();
|
onWindowResize();
|
||||||
|
|
|
@ -24,6 +24,48 @@ function generateWindowId(state) {
|
||||||
return windowId;
|
return windowId;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function clampSize(prefWidth, prefHeight, margin = false) {
|
||||||
|
const width = prefWidth || 550;
|
||||||
|
const height = prefHeight || 330;
|
||||||
|
let maxWidth = window.innerWidth;
|
||||||
|
let maxHeight = window.innerHeight;
|
||||||
|
if (margin) {
|
||||||
|
maxWidth = Math.floor(maxWidth * 0.75);
|
||||||
|
maxHeight = Math.floor(maxHeight * 0.75);
|
||||||
|
}
|
||||||
|
return [
|
||||||
|
clamp(
|
||||||
|
width,
|
||||||
|
MIN_WIDTH,
|
||||||
|
maxWidth,
|
||||||
|
),
|
||||||
|
clamp(
|
||||||
|
height,
|
||||||
|
MIN_HEIGHT,
|
||||||
|
maxHeight,
|
||||||
|
),
|
||||||
|
];
|
||||||
|
}
|
||||||
|
|
||||||
|
function clampPos(prefXPos, prefYPos, width, height) {
|
||||||
|
const xPos = (prefXPos || prefXPos === 0) ? prefXPos
|
||||||
|
: Math.floor((window.innerWidth - width) / 2);
|
||||||
|
const yPos = (prefYPos || prefYPos === 0) ? prefYPos
|
||||||
|
: Math.floor((window.innerHeight - height) / 2);
|
||||||
|
return [
|
||||||
|
clamp(
|
||||||
|
xPos,
|
||||||
|
SCREEN_MARGIN_EW - width,
|
||||||
|
window.innerWidth - SCREEN_MARGIN_EW,
|
||||||
|
),
|
||||||
|
clamp(
|
||||||
|
yPos,
|
||||||
|
0,
|
||||||
|
window.innerHeight - SCREEN_MARGIN_S,
|
||||||
|
),
|
||||||
|
];
|
||||||
|
}
|
||||||
|
|
||||||
export type WindowsState = {
|
export type WindowsState = {
|
||||||
// modal is considerd as "fullscreen window"
|
// modal is considerd as "fullscreen window"
|
||||||
// its windowId is considered 0 and args are under args[0]
|
// its windowId is considered 0 and args are under args[0]
|
||||||
|
@ -32,6 +74,16 @@ export type WindowsState = {
|
||||||
windowType: ?string,
|
windowType: ?string,
|
||||||
title: ?string,
|
title: ?string,
|
||||||
open: boolean,
|
open: boolean,
|
||||||
|
// used to remember and restore the size
|
||||||
|
// of a maximized window when restoring
|
||||||
|
// {
|
||||||
|
// xPos: number,
|
||||||
|
// yPos: number,
|
||||||
|
// width: number,
|
||||||
|
// height: number,
|
||||||
|
// cloneable: boolean,
|
||||||
|
// }
|
||||||
|
prevWinSize: Object,
|
||||||
},
|
},
|
||||||
// [
|
// [
|
||||||
// {
|
// {
|
||||||
|
@ -62,6 +114,7 @@ const initialState: WindowsState = {
|
||||||
windowType: null,
|
windowType: null,
|
||||||
title: null,
|
title: null,
|
||||||
open: false,
|
open: false,
|
||||||
|
prevWinSize: {},
|
||||||
},
|
},
|
||||||
windows: [],
|
windows: [],
|
||||||
args: {},
|
args: {},
|
||||||
|
@ -73,12 +126,24 @@ export default function windows(
|
||||||
): WindowsState {
|
): WindowsState {
|
||||||
switch (action.type) {
|
switch (action.type) {
|
||||||
case 'OPEN_WINDOW': {
|
case 'OPEN_WINDOW': {
|
||||||
|
/*
|
||||||
|
* prefered xPos, yPos, height adn width
|
||||||
|
* can be given in action (but doesn't have to)
|
||||||
|
*/
|
||||||
const {
|
const {
|
||||||
windowType,
|
windowType,
|
||||||
title,
|
title,
|
||||||
cloneable,
|
cloneable,
|
||||||
args,
|
args,
|
||||||
|
xPos: prefXPos,
|
||||||
|
yPos: prefYPos,
|
||||||
|
width: prefWidth,
|
||||||
|
height: prefHeight,
|
||||||
} = action;
|
} = action;
|
||||||
|
|
||||||
|
const [width, height] = clampSize(prefWidth, prefHeight, true);
|
||||||
|
const [xPos, yPos] = clampPos(prefXPos, prefYPos, width, height);
|
||||||
|
|
||||||
const fullscreen = !state.showWindows || action.fullscreen;
|
const fullscreen = !state.showWindows || action.fullscreen;
|
||||||
if (fullscreen) {
|
if (fullscreen) {
|
||||||
return {
|
return {
|
||||||
|
@ -87,6 +152,13 @@ export default function windows(
|
||||||
windowType,
|
windowType,
|
||||||
title,
|
title,
|
||||||
open: true,
|
open: true,
|
||||||
|
prevWinSize: {
|
||||||
|
width,
|
||||||
|
height,
|
||||||
|
xPos,
|
||||||
|
yPos,
|
||||||
|
cloneable,
|
||||||
|
},
|
||||||
},
|
},
|
||||||
args: {
|
args: {
|
||||||
...state.args,
|
...state.args,
|
||||||
|
@ -97,12 +169,6 @@ export default function windows(
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
const windowId = generateWindowId(state);
|
const windowId = generateWindowId(state);
|
||||||
const {
|
|
||||||
innerWidth: screenWidth,
|
|
||||||
innerHeight: screenHeight,
|
|
||||||
} = window;
|
|
||||||
const width = Math.min(550, Math.floor(screenWidth * 0.75));
|
|
||||||
const height = Math.min(300, Math.floor(screenHeight * 0.75));
|
|
||||||
return {
|
return {
|
||||||
...state,
|
...state,
|
||||||
windows: [
|
windows: [
|
||||||
|
@ -115,8 +181,8 @@ export default function windows(
|
||||||
title,
|
title,
|
||||||
width,
|
width,
|
||||||
height,
|
height,
|
||||||
xPos: Math.floor((screenWidth - width) / 2),
|
xPos,
|
||||||
yPos: Math.floor((screenHeight - height) / 2),
|
yPos,
|
||||||
cloneable,
|
cloneable,
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
|
@ -141,6 +207,7 @@ export default function windows(
|
||||||
windowType: null,
|
windowType: null,
|
||||||
title: null,
|
title: null,
|
||||||
open: false,
|
open: false,
|
||||||
|
prevWinSize: {},
|
||||||
},
|
},
|
||||||
args,
|
args,
|
||||||
};
|
};
|
||||||
|
@ -291,7 +358,15 @@ export default function windows(
|
||||||
...state.args,
|
...state.args,
|
||||||
0: state.args[windowId],
|
0: state.args[windowId],
|
||||||
};
|
};
|
||||||
const { windowType, title } = state.windows
|
const {
|
||||||
|
windowType,
|
||||||
|
title,
|
||||||
|
xPos,
|
||||||
|
yPos,
|
||||||
|
width,
|
||||||
|
height,
|
||||||
|
cloneable,
|
||||||
|
} = state.windows
|
||||||
.find((w) => w.windowId === windowId);
|
.find((w) => w.windowId === windowId);
|
||||||
delete args[windowId];
|
delete args[windowId];
|
||||||
return {
|
return {
|
||||||
|
@ -300,6 +375,13 @@ export default function windows(
|
||||||
windowType,
|
windowType,
|
||||||
title,
|
title,
|
||||||
open: true,
|
open: true,
|
||||||
|
prevWinSize: {
|
||||||
|
xPos,
|
||||||
|
yPos,
|
||||||
|
width,
|
||||||
|
height,
|
||||||
|
cloneable,
|
||||||
|
},
|
||||||
},
|
},
|
||||||
windows: state.windows.filter((w) => w.windowId !== windowId),
|
windows: state.windows.filter((w) => w.windowId !== windowId),
|
||||||
args,
|
args,
|
||||||
|
@ -308,14 +390,18 @@ export default function windows(
|
||||||
|
|
||||||
case 'RESTORE_WINDOW': {
|
case 'RESTORE_WINDOW': {
|
||||||
const windowId = generateWindowId(state);
|
const windowId = generateWindowId(state);
|
||||||
const { windowType, title } = state.modal;
|
const { windowType, title, prevWinSize } = state.modal;
|
||||||
const cloneable = true;
|
const [width, height] = clampSize(
|
||||||
const {
|
prevWinSize.width,
|
||||||
innerWidth: screenWidth,
|
prevWinSize.height,
|
||||||
innerHeight: screenHeight,
|
);
|
||||||
} = window;
|
const [xPos, yPos] = clampPos(
|
||||||
const width = Math.min(550, Math.floor(screenWidth * 0.75));
|
prevWinSize.xPos,
|
||||||
const height = Math.min(300, Math.floor(screenHeight * 0.75));
|
prevWinSize.yPos,
|
||||||
|
width,
|
||||||
|
height,
|
||||||
|
);
|
||||||
|
const cloneable = prevWinSize.cloneable || true;
|
||||||
return {
|
return {
|
||||||
...state,
|
...state,
|
||||||
modal: {
|
modal: {
|
||||||
|
@ -332,8 +418,8 @@ export default function windows(
|
||||||
title,
|
title,
|
||||||
width,
|
width,
|
||||||
height,
|
height,
|
||||||
xPos: Math.floor((screenWidth - width) / 2),
|
xPos,
|
||||||
yPos: Math.floor((screenHeight - height) / 2),
|
yPos,
|
||||||
cloneable,
|
cloneable,
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
|
@ -352,20 +438,18 @@ export default function windows(
|
||||||
xDiff,
|
xDiff,
|
||||||
yDiff,
|
yDiff,
|
||||||
} = action;
|
} = action;
|
||||||
const {
|
|
||||||
innerWidth: width,
|
|
||||||
innerHeight: height,
|
|
||||||
} = window;
|
|
||||||
const newWindows = state.windows.map((win) => {
|
const newWindows = state.windows.map((win) => {
|
||||||
if (win.windowId !== windowId) return win;
|
if (win.windowId !== windowId) return win;
|
||||||
|
const [xPos, yPos] = clampPos(
|
||||||
|
win.xPos + xDiff,
|
||||||
|
win.yPos + yDiff,
|
||||||
|
win.width,
|
||||||
|
win.height,
|
||||||
|
);
|
||||||
return {
|
return {
|
||||||
...win,
|
...win,
|
||||||
xPos: clamp(
|
xPos,
|
||||||
win.xPos + xDiff,
|
yPos,
|
||||||
-win.width + SCREEN_MARGIN_EW,
|
|
||||||
width - SCREEN_MARGIN_EW,
|
|
||||||
),
|
|
||||||
yPos: clamp(win.yPos + yDiff, 0, height - SCREEN_MARGIN_S),
|
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
return {
|
return {
|
||||||
|
@ -382,18 +466,15 @@ export default function windows(
|
||||||
} = action;
|
} = action;
|
||||||
const newWindows = state.windows.map((win) => {
|
const newWindows = state.windows.map((win) => {
|
||||||
if (win.windowId !== windowId) return win;
|
if (win.windowId !== windowId) return win;
|
||||||
|
const [width, height] = clampSize(
|
||||||
|
win.width + xDiff,
|
||||||
|
win.height + yDiff,
|
||||||
|
false,
|
||||||
|
);
|
||||||
return {
|
return {
|
||||||
...win,
|
...win,
|
||||||
width: clamp(
|
width: Math.max(width, SCREEN_MARGIN_EW - win.xPos),
|
||||||
win.width + xDiff,
|
height,
|
||||||
Math.max(MIN_WIDTH, SCREEN_MARGIN_EW - win.xPos),
|
|
||||||
window.innerWidth,
|
|
||||||
),
|
|
||||||
height: clamp(
|
|
||||||
win.height + yDiff,
|
|
||||||
MIN_HEIGHT,
|
|
||||||
window.innerHeight,
|
|
||||||
),
|
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
return {
|
return {
|
||||||
|
@ -405,9 +486,9 @@ export default function windows(
|
||||||
case 'RECEIVE_ME':
|
case 'RECEIVE_ME':
|
||||||
case 'WINDOW_RESIZE': {
|
case 'WINDOW_RESIZE': {
|
||||||
const {
|
const {
|
||||||
width,
|
innerWidth: width,
|
||||||
height,
|
innerHeight: height,
|
||||||
} = action;
|
} = window;
|
||||||
|
|
||||||
if (width <= SCREEN_WIDTH_THRESHOLD) {
|
if (width <= SCREEN_WIDTH_THRESHOLD) {
|
||||||
return {
|
return {
|
||||||
|
|
|
@ -33,12 +33,17 @@ tr:nth-child(even) {
|
||||||
.window {
|
.window {
|
||||||
background-color: rgba(59, 59, 59, 0.98);
|
background-color: rgba(59, 59, 59, 0.98);
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
|
color: #f4f4f4;
|
||||||
}
|
}
|
||||||
|
|
||||||
.win-title {
|
.win-title {
|
||||||
background-color: #c1c1c1;
|
background-color: #c1c1c1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.win-topbar {
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
|
||||||
.win-title:hover {
|
.win-title:hover {
|
||||||
background-color: #dedede;
|
background-color: #dedede;
|
||||||
}
|
}
|
||||||
|
|
|
@ -33,6 +33,11 @@ tr:nth-child(even) {
|
||||||
.window {
|
.window {
|
||||||
background-color: rgba(59, 59, 59, 0.98);
|
background-color: rgba(59, 59, 59, 0.98);
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
|
color: #ff8c22;
|
||||||
|
}
|
||||||
|
|
||||||
|
.win-topbar {
|
||||||
|
color: black;
|
||||||
}
|
}
|
||||||
|
|
||||||
.win-title {
|
.win-title {
|
||||||
|
|
|
@ -32,12 +32,17 @@ tr:nth-child(even) {
|
||||||
|
|
||||||
.window {
|
.window {
|
||||||
background-color: rgba(59, 59, 59, 0.98);
|
background-color: rgba(59, 59, 59, 0.98);
|
||||||
|
color: #f4f4f4;
|
||||||
}
|
}
|
||||||
|
|
||||||
.win-title {
|
.win-title {
|
||||||
background-color: #c1c1c1;
|
background-color: #c1c1c1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.win-topbar {
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
|
||||||
.win-title:hover {
|
.win-title:hover {
|
||||||
background-color: #dedede;
|
background-color: #dedede;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue
Block a user