Mirrors/webamp
1
0
Fork 0
mirror of https://github.com/captbaritone/webamp.git synced 2026-07-25 02:57:30 +00:00
Code Issues Projects Releases Wiki Activity

Move generic window size into state

Browse source
This commit is contained in:
Jordan Eldredge 2018-04-25 20:16:33 -07:00
parent db956cce6b
commit 842f12014e
3 changed files with 84 additions and 69 deletions
Download patch file Download diff file Expand all files Collapse all files

1
js/actionTypes.js
View file

@ -70,3 +70,4 @@ export const NETWORK_CONNECTED = "NETWORK_CONNECTED";
export const NETWORK_DISCONNECTED = "NETWORK_DISCONNECTED";
export const UPDATE_WINDOW_POSITIONS = "UPDATE_WINDOW_POSITIONS";
export const CHANNEL_COUNT_CHANGED = "CHANNEL_COUNT_CHANGED";
export const GEN_WINDOW_SIZE_CHANGED = "GEN_WINDOW_SIZE_CHANGED";

136
js/components/GenWindow/index.js
View file

@ -4,7 +4,11 @@ import PropTypes from "prop-types";
import classnames from "classnames";
import "../../../css/gen-window.css";
import { SET_FOCUSED_WINDOW, CLOSE_GEN_WINDOW } from "../../actionTypes";
import {
SET_FOCUSED_WINDOW,
CLOSE_GEN_WINDOW,
GEN_WINDOW_SIZE_CHANGED
} from "../../actionTypes";
import { scrollVolume } from "../../actionCreators";
import { getWindowPixelSize } from "../../selectors";
import ResizeTarget from "../ResizeTarget";
@ -25,73 +29,65 @@ const CHROME_WIDTH = 19;
const CHROME_HEIGHT = 34;
// Named export for testing
export class GenWindow extends React.Component {
constructor(props) {
super(props);
this.state = { windowSize: [0, 0] };
}
render() {
const {
selected,
children,
close,
title,
setFocus,
windowId,
scrollVolume: handleWheel
} = this.props;
const { width, height } = getWindowPixelSize(this.state.windowSize);
return (
<div
className={classnames("gen-window", "window", { selected })}
onMouseDown={() => setFocus(windowId)}
onWheel={handleWheel}
style={{ width, height }}
>
<div className="gen-top draggable">
<div className="gen-top-left draggable" />
<div className="gen-top-left-fill draggable" />
<div className="gen-top-left-end draggable" />
<div className="gen-top-title draggable">
<Text>{title}</Text>
</div>
<div className="gen-top-right-end draggable" />
<div className="gen-top-right-fill draggable" />
<div className="gen-top-right draggable">
<div
className="gen-close selected"
onClick={() => close(windowId)}
/>
</div>
export const GenWindow = ({
selected,
children,
close,
title,
setFocus,
windowId,
windowSize,
genWindowSizeChanged,
scrollVolume: handleWheel
}) => {
const { width, height } = getWindowPixelSize(windowSize);
return (
<div
className={classnames("gen-window", "window", { selected })}
onMouseDown={() => setFocus(windowId)}
onWheel={handleWheel}
style={{ width, height }}
>
<div className="gen-top draggable">
<div className="gen-top-left draggable" />
<div className="gen-top-left-fill draggable" />
<div className="gen-top-left-end draggable" />
<div className="gen-top-title draggable">
<Text>{title}</Text>
</div>
<div className="gen-middle">
<div className="gen-middle-left draggable">
<div className="gen-middle-left-bottom draggable" />
</div>
<div className="gen-middle-center">
{children({
width: width - CHROME_WIDTH,
height: height - CHROME_HEIGHT
})}
</div>
<div className="gen-middle-right draggable">
<div className="gen-middle-right-bottom draggable" />
</div>
</div>
<div className="gen-bottom draggable">
<div className="gen-bottom-left draggable" />
<div className="gen-bottom-right draggable">
<ResizeTarget
currentSize={this.state.windowSize}
setWindowSize={size => this.setState({ windowSize: size })}
id={"gen-resize-target"}
/>
</div>
<div className="gen-top-right-end draggable" />
<div className="gen-top-right-fill draggable" />
<div className="gen-top-right draggable">
<div className="gen-close selected" onClick={() => close(windowId)} />
</div>
</div>
);
}
}
<div className="gen-middle">
<div className="gen-middle-left draggable">
<div className="gen-middle-left-bottom draggable" />
</div>
<div className="gen-middle-center">
{children({
width: width - CHROME_WIDTH,
height: height - CHROME_HEIGHT
})}
</div>
<div className="gen-middle-right draggable">
<div className="gen-middle-right-bottom draggable" />
</div>
</div>
<div className="gen-bottom draggable">
<div className="gen-bottom-left draggable" />
<div className="gen-bottom-right draggable">
<ResizeTarget
currentSize={windowSize}
setWindowSize={size => genWindowSizeChanged(windowId, size)}
id={"gen-resize-target"}
/>
</div>
</div>
</div>
);
};
GenWindow.propTypes = {
title: PropTypes.string.isRequired,
@ -102,13 +98,19 @@ GenWindow.propTypes = {
};
const mapStateToProps = (state, ownProps) => ({
selected: state.windows.focused === ownProps.windowId
selected: state.windows.focused === ownProps.windowId,
windowSize: state.windows.genWindows[ownProps.windowId].size
});
const mapDispatchToProps = {
setFocus: windowId => ({ type: SET_FOCUSED_WINDOW, window: windowId }),
close: windowId => ({ type: CLOSE_GEN_WINDOW, windowId }),
scrollVolume
scrollVolume,
genWindowSizeChanged: (windowId, size) => ({
type: GEN_WINDOW_SIZE_CHANGED,
windowId,
size
})
};
export default connect(mapStateToProps, mapDispatchToProps)(GenWindow);

16
js/reducers/windows.js
View file

@ -9,7 +9,8 @@ import {
CLOSE_GEN_WINDOW,
OPEN_GEN_WINDOW,
ADD_GEN_WINDOW,
UPDATE_WINDOW_POSITIONS
UPDATE_WINDOW_POSITIONS,
GEN_WINDOW_SIZE_CHANGED
} from "../actionTypes";
const defaultWindowsState = {
@ -60,7 +61,7 @@ const windows = (state = defaultWindowsState, action) => {
...state,
genWindows: {
...state.genWindows,
[action.windowId]: { title: action.title, open: true }
[action.windowId]: { title: action.title, open: true, size: [0, 0] }
}
};
case OPEN_GEN_WINDOW:
@ -74,6 +75,17 @@ const windows = (state = defaultWindowsState, action) => {
}
}
};
case GEN_WINDOW_SIZE_CHANGED:
return {
...state,
genWindows: {
...state.genWindows,
[action.windowId]: {
...state.genWindows[action.windowId],
size: action.size
}
}
};
case UPDATE_WINDOW_POSITIONS:
return {
...state,