feat(vnc): echtes Vollbild beim Verbinden (randlos ueber das ganze Display)

Der ⤢-Knopf war nur der Fit/1:1-Umschalter (Zoom) INNERHALB des eingerahmten
Streifens (Header+Dock drumrum) — sah deshalb wie Zoom aus, fuellte nie das
Display. Jetzt oeffnet "Verbinden" die VM in einem Fullscreen-Modal: randlos
ueber alles (Header + Dock weg), scaleViewport passt den VM-Screen sauber ein,
Landscape erlaubt. Buttons schweben drueber (‹ VMs links, ⌨/Strg+Alt+Entf/⤢
rechts, unter der Statusleiste). Android-Back verlaesst Vollbild.

tsc clean. App-only, Deploy: APK.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
2026-07-21 00:51:59 +02:00
co-authored by Claude Opus 4.8
parent 769025c41b
commit 4685632294
2 changed files with 16 additions and 16 deletions
+15 -15
View File
@@ -71,21 +71,6 @@ const DesktopTile: React.FC<Props> = ({ projectId, focused }) => {
); );
} }
// Verbunden → noVNC-Ansicht der VM + Zurück-Leiste.
if (connected) {
return (
<View style={styles.container}>
<View style={styles.bar}>
<TouchableOpacity onPress={() => setConnected(null)} style={styles.barBtn}>
<Text style={styles.barBtnText}> VMs</Text>
</TouchableOpacity>
<Text style={styles.barTitle} numberOfLines={1}>{connected.name} · :{connected.vnc_display}</Text>
</View>
<VncTile projectId={projectId} focused port={connected.vnc_port || (5900 + (connected.vnc_display || 1))} />
</View>
);
}
return ( return (
<View style={styles.container}> <View style={styles.container}>
<View style={styles.bar}> <View style={styles.bar}>
@@ -157,6 +142,18 @@ const DesktopTile: React.FC<Props> = ({ projectId, focused }) => {
<Text style={styles.shotHint}>Tippen zum Schließen</Text> <Text style={styles.shotHint}>Tippen zum Schließen</Text>
</TouchableOpacity> </TouchableOpacity>
</Modal> </Modal>
{/* Vollbild-VNC — randlos ueber das ganze Display (Header + Dock weg). */}
{connected && (
<Modal visible animationType="slide" onRequestClose={() => setConnected(null)} supportedOrientations={['portrait', 'landscape']}>
<View style={styles.fs}>
<VncTile projectId={projectId} focused port={connected.vnc_port || (5900 + (connected.vnc_display || 1))} />
<TouchableOpacity style={styles.fsBack} onPress={() => setConnected(null)} activeOpacity={0.8}>
<Text style={styles.fsBackText}> VMs</Text>
</TouchableOpacity>
</View>
</Modal>
)}
</View> </View>
); );
}; };
@@ -180,6 +177,9 @@ const styles = StyleSheet.create({
vmBtns: { flexDirection: 'row', gap: 6, alignItems: 'center' }, vmBtns: { flexDirection: 'row', gap: 6, alignItems: 'center' },
vmBtn: { borderWidth: 1, borderRadius: 8, paddingHorizontal: 10, paddingVertical: 6, minWidth: 34, alignItems: 'center' }, vmBtn: { borderWidth: 1, borderRadius: 8, paddingHorizontal: 10, paddingVertical: 6, minWidth: 34, alignItems: 'center' },
vmBtnText: { fontSize: 12, fontWeight: '700' }, vmBtnText: { fontSize: 12, fontWeight: '700' },
fs: { flex: 1, backgroundColor: '#000000' },
fsBack: { position: 'absolute', top: 34, left: 10, backgroundColor: 'rgba(18,18,42,0.9)', borderColor: '#2A2A3E', borderWidth: 1, borderRadius: 10, paddingHorizontal: 12, paddingVertical: 7 },
fsBackText: { color: '#0096FF', fontSize: 14, fontWeight: '700' },
shotOverlay: { flex: 1, backgroundColor: 'rgba(0,0,0,0.92)', alignItems: 'center', justifyContent: 'center', padding: 12 }, shotOverlay: { flex: 1, backgroundColor: 'rgba(0,0,0,0.92)', alignItems: 'center', justifyContent: 'center', padding: 12 },
shotTitle: { color: '#E0E0F0', fontSize: 14, fontWeight: '700', marginBottom: 10 }, shotTitle: { color: '#E0E0F0', fontSize: 14, fontWeight: '700', marginBottom: 10 },
shotImg: { width: '100%', height: '78%', backgroundColor: '#000' }, shotImg: { width: '100%', height: '78%', backgroundColor: '#000' },
+1 -1
View File
@@ -119,7 +119,7 @@ const styles = StyleSheet.create({
sub: { color: '#9090B0', fontSize: 14, marginTop: 8 }, sub: { color: '#9090B0', fontSize: 14, marginTop: 8 },
ctlBar: { ctlBar: {
position: 'absolute', position: 'absolute',
top: 8, top: 34,
right: 8, right: 8,
flexDirection: 'row', flexDirection: 'row',
gap: 6, gap: 6,