noby
/
workadventure
2
2
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Fixing absolute/relative layouts of Svelte layers

This commit is contained in:
David Négrier 2021-06-02 09:58:00 +02:00
parent 96cd097af8
commit 9e35f96ce5
4 changed files with 97 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
front/src/Components/App.svelte
View File

@ -22,31 +22,48 @@
</script>
<div>
{#if $gameOverlayVisibilityStore}
<MyCamera></MyCamera>
<CameraControls></CameraControls>
{/if}
<div class="absolute-overlay">
{#if $loginSceneVisibleStore}
<LoginScene game={game}></LoginScene>
<div>
<LoginScene game={game}></LoginScene>
</div>
{/if}
{#if $selectCharacterSceneVisibleStore}
<SelectCharacterScene game={ game }></SelectCharacterScene>
<div>
<SelectCharacterScene game={ game }></SelectCharacterScene>
</div>
{/if}
{#if $customCharacterSceneVisibleStore}
<CustomCharacterScene game={ game }></CustomCharacterScene>
<div>
<CustomCharacterScene game={ game }></CustomCharacterScene>
</div>
{/if}
{#if $selectCompanionSceneVisibleStore}
<SelectCompanionScene game={ game }></SelectCompanionScene>
<div>
<SelectCompanionScene game={ game }></SelectCompanionScene>
</div>
{/if}
{#if $enableCameraSceneVisibilityStore}
<EnableCameraScene game={game}></EnableCameraScene>
<div>
<EnableCameraScene game={game}></EnableCameraScene>
</div>
{/if}
<!--
{#if $menuIconVisible}
<div>
<MenuIcon />
</div>
{/if}
-->
{#if $gameOverlayVisibilityStore}
<div>
<MyCamera></MyCamera>
<CameraControls></CameraControls>
</div>
{/if}
<!-- {#if $menuIconVisible}
<MenuIcon />
{/if} -->
{#if $helpCameraSettingsVisibleStore}
<HelpCameraSettingsPopup game={ game }></HelpCameraSettingsPopup>
<div>
<HelpCameraSettingsPopup game={ game }></HelpCameraSettingsPopup>
</div>
{/if}
</div>
</div>

44
front/src/Components/CameraControls.svelte
View File

@ -34,26 +34,28 @@
</script>
<div class="btn-cam-action">
<div class="btn-monitor" on:click={screenSharingClick} class:hide={!$screenSharingAvailableStore} class:enabled={$requestedScreenSharingState}>
{#if $requestedScreenSharingState}
<img src={monitorImg} alt="Start screen sharing">
{:else}
<img src={monitorCloseImg} alt="Stop screen sharing">
{/if}
</div>
<div class="btn-video" on:click={cameraClick} class:disabled={!$requestedCameraState}>
{#if $requestedCameraState}
<img src={cinemaImg} alt="Turn on webcam">
{:else}
<img src={cinemaCloseImg} alt="Turn off webcam">
{/if}
</div>
<div class="btn-micro" on:click={microphoneClick} class:disabled={!$requestedMicrophoneState}>
{#if $requestedMicrophoneState}
<img src={microphoneImg} alt="Turn on microphone">
{:else}
<img src={microphoneCloseImg} alt="Turn off microphone">
{/if}
<div>
<div class="btn-cam-action">
<div class="btn-monitor" on:click={screenSharingClick} class:hide={!$screenSharingAvailableStore} class:enabled={$requestedScreenSharingState}>
{#if $requestedScreenSharingState}
<img src={monitorImg} alt="Start screen sharing">
{:else}
<img src={monitorCloseImg} alt="Stop screen sharing">
{/if}
</div>
<div class="btn-video" on:click={cameraClick} class:disabled={!$requestedCameraState}>
{#if $requestedCameraState}
<img src={cinemaImg} alt="Turn on webcam">
{:else}
<img src={cinemaCloseImg} alt="Turn off webcam">
{/if}
</div>
<div class="btn-micro" on:click={microphoneClick} class:disabled={!$requestedMicrophoneState}>
{#if $requestedMicrophoneState}
<img src={microphoneImg} alt="Turn on microphone">
{:else}
<img src={microphoneCloseImg} alt="Turn off microphone">
{/if}
</div>
</div>
</div>

54
front/src/Components/EnableCamera/EnableCameraScene.svelte
View File

@ -11,6 +11,8 @@
import {onDestroy} from "svelte";
import HorizontalSoundMeterWidget from "./HorizontalSoundMeterWidget.svelte";
import cinemaCloseImg from "../images/cinema-close.svg";
import cinemaImg from "../images/cinema.svg";
import microphoneImg from "../images/microphone.svg";
export let game: Game;
let selectedCamera : string|null = null;
@ -86,27 +88,33 @@
<section class="selectWebcamForm">
{#if $cameraListStore.length > 1 }
<div class="nes-select">
<select bind:value={selectedCamera} on:change={selectCamera}>
{#each $cameraListStore as camera}
<option value={camera.deviceId}>
{normalizeDeviceName(camera.label)}
</option>
{/each}
</select>
</div>
<div class="control-group">
<img src={cinemaImg} alt="Camera" />
<div class="nes-select">
<select bind:value={selectedCamera} on:change={selectCamera}>
{#each $cameraListStore as camera}
<option value={camera.deviceId}>
{normalizeDeviceName(camera.label)}
</option>
{/each}
</select>
</div>
</div>
{/if}
{#if $microphoneListStore.length > 1 }
<div class="nes-select">
<select bind:value={selectedMicrophone} on:change={selectMicrophone}>
{#each $microphoneListStore as microphone}
<option value={microphone.deviceId}>
{normalizeDeviceName(microphone.label)}
</option>
{/each}
</select>
</div>
<div class="control-group">
<img src={microphoneImg} alt="Microphone" />
<div class="nes-select">
<select bind:value={selectedMicrophone} on:change={selectMicrophone}>
{#each $microphoneListStore as microphone}
<option value={microphone.deviceId}>
{normalizeDeviceName(microphone.label)}
</option>
{/each}
</select>
</div>
</div>
{/if}
</section>
@ -190,6 +198,16 @@
font-size: 200%;
}
.control-group {
display: flex;
flex-direction: row;
img {
width: 30px;
margin-right: 10px;
}
}
.webrtcsetup{
/*position: absolute;
top: 140px;

10
front/style/style.scss
View File

@ -1212,13 +1212,15 @@ div.action.danger p.action-body{
height: 100%;
pointer-events: none;
.absolute-overlay {
position: absolute;
& > div {
position: relative;
width: 100%;
height: 100%;
& > * {
position: relative;
& > div {
position: absolute;
width: 100%;
height: 100%;
}
}
}