From 5d0fe72f8bce85cc2870c7dcea644499a5a808f1 Mon Sep 17 00:00:00 2001
From: Paul Kaplan <pkaplan@media.mit.edu>
Date: Wed, 16 May 2018 11:09:48 -0400
Subject: [PATCH] Make monitors position correctly in fullscreen
---
src/components/monitor-list/monitor-list.css | 7 ++-
src/components/monitor-list/monitor-list.jsx | 50 +++++++++++--------
.../monitor/list-monitor-scroller.jsx | 2 +-
src/components/monitor/monitor.css | 1 +
4 files changed, 36 insertions(+), 24 deletions(-)
diff --git a/src/components/monitor-list/monitor-list.css b/src/components/monitor-list/monitor-list.css
index c5fad0b64..272fb28a6 100644
--- a/src/components/monitor-list/monitor-list.css
+++ b/src/components/monitor-list/monitor-list.css
@@ -1,7 +1,10 @@
.monitor-list {
- width: 100%;
- height: 100%;
+ /* Width/height are set by the component, margin: auto centers in fullscreen */
+ margin: auto;
pointer-events: none;
+}
+
+.monitor-list-scaler {
/* Scaling for monitors should happen from the top left */
transform-origin: left top;
}
diff --git a/src/components/monitor-list/monitor-list.jsx b/src/components/monitor-list/monitor-list.jsx
index d229b3b29..e9caf7dd6 100644
--- a/src/components/monitor-list/monitor-list.jsx
+++ b/src/components/monitor-list/monitor-list.jsx
@@ -18,29 +18,37 @@ const MonitorList = props => (
// Use static `monitor-overlay` class for bounds of draggables
className={classNames(styles.monitorList, 'monitor-overlay')}
style={{
- transform: stageSizeToTransform(props.stageSize)
+ width: props.stageSize.width,
+ height: props.stageSize.height
}}
>
- {props.monitors.valueSeq().filter(m => m.visible)
- .map(monitorData => (
- <Monitor
- height={monitorData.height}
- id={monitorData.id}
- key={monitorData.id}
- max={monitorData.sliderMax}
- min={monitorData.sliderMin}
- mode={monitorData.mode}
- opcode={monitorData.opcode}
- params={monitorData.params}
- spriteName={monitorData.spriteName}
- targetId={monitorData.targetId}
- value={monitorData.value}
- width={monitorData.width}
- x={monitorData.x}
- y={monitorData.y}
- onDragEnd={props.onMonitorChange}
- />
- ))}
+ <Box
+ className={styles.monitorListScaler}
+ style={{
+ transform: stageSizeToTransform(props.stageSize)
+ }}
+ >
+ {props.monitors.valueSeq().filter(m => m.visible)
+ .map(monitorData => (
+ <Monitor
+ height={monitorData.height}
+ id={monitorData.id}
+ key={monitorData.id}
+ max={monitorData.sliderMax}
+ min={monitorData.sliderMin}
+ mode={monitorData.mode}
+ opcode={monitorData.opcode}
+ params={monitorData.params}
+ spriteName={monitorData.spriteName}
+ targetId={monitorData.targetId}
+ value={monitorData.value}
+ width={monitorData.width}
+ x={monitorData.x}
+ y={monitorData.y}
+ onDragEnd={props.onMonitorChange}
+ />
+ ))}
+ </Box>
</Box>
);
diff --git a/src/components/monitor/list-monitor-scroller.jsx b/src/components/monitor/list-monitor-scroller.jsx
index fd6da9bab..9fdf38ffd 100644
--- a/src/components/monitor/list-monitor-scroller.jsx
+++ b/src/components/monitor/list-monitor-scroller.jsx
@@ -20,7 +20,7 @@ class ListMonitorScroller extends React.Component {
}
noRowsRenderer () {
return (
- <div className={styles.listEmpty}>
+ <div className={classNames(styles.listRow, styles.listEmpty)}>
{'(empty)' /* TODO waiting for design before translation */}
</div>
);
diff --git a/src/components/monitor/monitor.css b/src/components/monitor/monitor.css
index 885679979..40db37cd1 100644
--- a/src/components/monitor/monitor.css
+++ b/src/components/monitor/monitor.css
@@ -138,6 +138,7 @@
.value-inner {
padding: 3px 5px;
min-height: 22px;
+ overflow: hidden; /* Don't let long values escape container */
}
.list-input {
--
GitLab