forked from DMXStage/dmxconnect
This commit is contained in:
106
frontend/src/App.svelte
Normal file → Executable file
106
frontend/src/App.svelte
Normal file → Executable file
@@ -1,54 +1,54 @@
|
||||
<script>
|
||||
import logo from './assets/images/logo-universal.png'
|
||||
import {Greet} from '../wailsjs/go/main/App.js'
|
||||
import { _ } from 'svelte-i18n'
|
||||
import NavigationBar from './components/NavigationBar.svelte';
|
||||
import Clock from './components/Clock.svelte'
|
||||
import Preparation from './components/Preparation.svelte';
|
||||
import Animation from './components/Animation.svelte';
|
||||
import Settings from './components/Settings.svelte';
|
||||
import Devices from './components/Devices.svelte';
|
||||
import Show from './components/Show.svelte';
|
||||
import GeneralConsole from './components/GeneralConsole.svelte';
|
||||
|
||||
let selectedMenu = "settings"
|
||||
// When the navigation menu changed, update the selected menu
|
||||
function onNavigationChanged(event){
|
||||
selectedMenu = event.detail.menu;
|
||||
}
|
||||
</script>
|
||||
|
||||
<header>
|
||||
<NavigationBar on:navigationChanged="{onNavigationChanged}"/>
|
||||
<Clock/>
|
||||
</header>
|
||||
<main>
|
||||
{#if selectedMenu === "settings"}
|
||||
<Settings />
|
||||
{:else if selectedMenu === "devices"}
|
||||
<Devices />
|
||||
{:else if selectedMenu === "preparation"}
|
||||
<Preparation />
|
||||
{:else if selectedMenu === "animation"}
|
||||
<Animation />
|
||||
{:else if selectedMenu === "show"}
|
||||
<Show />
|
||||
{:else if selectedMenu === "console"}
|
||||
<GeneralConsole />
|
||||
{/if}
|
||||
</main>
|
||||
|
||||
<style>
|
||||
main {
|
||||
text-align: left;
|
||||
padding: 1em;
|
||||
max-width: 240px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
main {
|
||||
max-width: none;
|
||||
}
|
||||
}
|
||||
<script>
|
||||
import logo from './assets/images/logo-universal.png'
|
||||
import {Greet} from '../wailsjs/go/main/App.js'
|
||||
import { _ } from 'svelte-i18n'
|
||||
import NavigationBar from './components/NavigationBar.svelte';
|
||||
import Clock from './components/Clock.svelte'
|
||||
import Preparation from './components/Preparation.svelte';
|
||||
import Animation from './components/Animation.svelte';
|
||||
import Settings from './components/Settings.svelte';
|
||||
import Devices from './components/Devices.svelte';
|
||||
import Show from './components/Show.svelte';
|
||||
import GeneralConsole from './components/GeneralConsole.svelte';
|
||||
|
||||
let selectedMenu = "settings"
|
||||
// When the navigation menu changed, update the selected menu
|
||||
function onNavigationChanged(event){
|
||||
selectedMenu = event.detail.menu;
|
||||
}
|
||||
</script>
|
||||
|
||||
<header>
|
||||
<NavigationBar on:navigationChanged="{onNavigationChanged}"/>
|
||||
<Clock/>
|
||||
</header>
|
||||
<main>
|
||||
{#if selectedMenu === "settings"}
|
||||
<Settings />
|
||||
{:else if selectedMenu === "devices"}
|
||||
<Devices />
|
||||
{:else if selectedMenu === "preparation"}
|
||||
<Preparation />
|
||||
{:else if selectedMenu === "animation"}
|
||||
<Animation />
|
||||
{:else if selectedMenu === "show"}
|
||||
<Show />
|
||||
{:else if selectedMenu === "console"}
|
||||
<GeneralConsole />
|
||||
{/if}
|
||||
</main>
|
||||
|
||||
<style>
|
||||
main {
|
||||
text-align: left;
|
||||
padding: 1em;
|
||||
max-width: 240px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
main {
|
||||
max-width: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
2
frontend/src/components/Animation.svelte
Normal file → Executable file
2
frontend/src/components/Animation.svelte
Normal file → Executable file
@@ -1 +1 @@
|
||||
<h1>Animation creator</h1>
|
||||
<h1>Animation creator</h1>
|
||||
|
||||
0
frontend/src/components/Devices.svelte
Normal file → Executable file
0
frontend/src/components/Devices.svelte
Normal file → Executable file
0
frontend/src/components/GeneralConsole.svelte
Normal file → Executable file
0
frontend/src/components/GeneralConsole.svelte
Normal file → Executable file
0
frontend/src/components/NavigationBar.svelte
Normal file → Executable file
0
frontend/src/components/NavigationBar.svelte
Normal file → Executable file
0
frontend/src/components/Preparation.svelte
Normal file → Executable file
0
frontend/src/components/Preparation.svelte
Normal file → Executable file
0
frontend/src/components/RoundIconButton.svelte
Normal file → Executable file
0
frontend/src/components/RoundIconButton.svelte
Normal file → Executable file
0
frontend/src/components/Settings.svelte
Normal file → Executable file
0
frontend/src/components/Settings.svelte
Normal file → Executable file
0
frontend/src/components/Show.svelte
Normal file → Executable file
0
frontend/src/components/Show.svelte
Normal file → Executable file
240
frontend/src/components/Toggle.svelte
Normal file → Executable file
240
frontend/src/components/Toggle.svelte
Normal file → Executable file
@@ -1,121 +1,121 @@
|
||||
<!-- Create a toggle button -->
|
||||
|
||||
<script lang=ts>
|
||||
import { createEventDispatcher, onDestroy } from 'svelte';
|
||||
import * as SoftwareVariables from '../stores.js';
|
||||
import Tooltip from './Tooltip.svelte';
|
||||
import { _ } from 'svelte-i18n'
|
||||
|
||||
export let icon = "" // The icon wanted
|
||||
export let width = "10em" // The button width
|
||||
export let height = "5em" // The button height
|
||||
export let tooltip = "Default tooltip" // The description shown in the tooltip
|
||||
export let checked
|
||||
|
||||
let tooltipMessage = tooltip
|
||||
|
||||
// Import the main colors from the store
|
||||
let firstColor, secondColor, thirdColor, fourthColor, okColor, nokColor
|
||||
const unsubscribeFirstColor = SoftwareVariables.firstColor.subscribe((value) => (firstColor = value));
|
||||
const unsubscribeSecondColor = SoftwareVariables.secondColor.subscribe((value) => (secondColor = value));
|
||||
const unsubscribeThirdColor = SoftwareVariables.thirdColor.subscribe((value) => (thirdColor = value));
|
||||
const unsubscribeFourthColor = SoftwareVariables.fourthColor.subscribe((value) => (fourthColor = value));
|
||||
const unsubscribeOkColor = SoftwareVariables.okColor.subscribe((value) => (okColor = value));
|
||||
const unsubscribeNokColor = SoftwareVariables.nokColor.subscribe((value) => (nokColor = value));
|
||||
|
||||
$: cssVarStyles = `--thumb-background:${secondColor};--thumb-background-selected:${thirdColor};--thumb-color:${fourthColor}`;
|
||||
|
||||
// Emit a click event when the button is clicked
|
||||
const dispatch = createEventDispatcher();
|
||||
function emitClick(event) {
|
||||
event.preventDefault();
|
||||
event.target.blur();
|
||||
dispatch('click', event);
|
||||
}
|
||||
|
||||
// Show a tooltip on mouse hover
|
||||
let tooltipShowing = false
|
||||
function toggleTooltip(){
|
||||
tooltipShowing = !tooltipShowing
|
||||
}
|
||||
|
||||
// Unsubscribe for all variables used from the store
|
||||
onDestroy(() => {
|
||||
unsubscribeFirstColor();
|
||||
unsubscribeSecondColor();
|
||||
unsubscribeThirdColor();
|
||||
unsubscribeFourthColor();
|
||||
unsubscribeOkColor();
|
||||
unsubscribeNokColor();
|
||||
})
|
||||
</script>
|
||||
|
||||
<div style="{cssVarStyles}">
|
||||
<Tooltip message={tooltipMessage} show={tooltipShowing}></Tooltip>
|
||||
<label class="customToggle"
|
||||
on:mousedown={emitClick}
|
||||
on:mouseenter={toggleTooltip}
|
||||
on:mouseleave={toggleTooltip}
|
||||
style="width:{width}; height:{height}; border-radius:{width}; background-color:{fourthColor};">
|
||||
<input type="checkbox" {checked}>
|
||||
<span class="checkmark" style="width: {height}; height: 100%; border-radius:{height};">
|
||||
<i class='bx {icon}' style="font-size:{height};"/>
|
||||
</span>
|
||||
</label>
|
||||
|
||||
</div>
|
||||
|
||||
<style>
|
||||
div{
|
||||
display:inline-block;
|
||||
}
|
||||
|
||||
.customToggle {
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
padding: 0.1em;
|
||||
}
|
||||
|
||||
.customToggle:hover{
|
||||
box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.25) inset;
|
||||
}
|
||||
|
||||
.customToggle input[type="checkbox"] {
|
||||
opacity: 0;
|
||||
position: absolute; /* Position absolue pour garder l'élément dans le flux */
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.customToggle input[type="checkbox"]:checked + .checkmark {
|
||||
background-color: var(--thumb-background-selected); /* Couleur lorsque la case est cochée */
|
||||
float: right;
|
||||
animation: checkmark-slide-in 0.2s cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards;
|
||||
}
|
||||
|
||||
@keyframes checkmark-slide-in {
|
||||
0% {
|
||||
transform: translateX(-50px) scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
transform: translateX(0) scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
70% {
|
||||
transform: translateX(-5px) scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform: translateX(0) scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.checkmark {
|
||||
text-align:center;
|
||||
float: left;
|
||||
background-color: var(--thumb-background);
|
||||
color: var(--thumb-color);
|
||||
transition: opacity 0.3s, transform 0.3s;
|
||||
}
|
||||
<!-- Create a toggle button -->
|
||||
|
||||
<script lang=ts>
|
||||
import { createEventDispatcher, onDestroy } from 'svelte';
|
||||
import * as SoftwareVariables from '../stores.js';
|
||||
import Tooltip from './Tooltip.svelte';
|
||||
import { _ } from 'svelte-i18n'
|
||||
|
||||
export let icon = "" // The icon wanted
|
||||
export let width = "10em" // The button width
|
||||
export let height = "5em" // The button height
|
||||
export let tooltip = "Default tooltip" // The description shown in the tooltip
|
||||
export let checked
|
||||
|
||||
let tooltipMessage = tooltip
|
||||
|
||||
// Import the main colors from the store
|
||||
let firstColor, secondColor, thirdColor, fourthColor, okColor, nokColor
|
||||
const unsubscribeFirstColor = SoftwareVariables.firstColor.subscribe((value) => (firstColor = value));
|
||||
const unsubscribeSecondColor = SoftwareVariables.secondColor.subscribe((value) => (secondColor = value));
|
||||
const unsubscribeThirdColor = SoftwareVariables.thirdColor.subscribe((value) => (thirdColor = value));
|
||||
const unsubscribeFourthColor = SoftwareVariables.fourthColor.subscribe((value) => (fourthColor = value));
|
||||
const unsubscribeOkColor = SoftwareVariables.okColor.subscribe((value) => (okColor = value));
|
||||
const unsubscribeNokColor = SoftwareVariables.nokColor.subscribe((value) => (nokColor = value));
|
||||
|
||||
$: cssVarStyles = `--thumb-background:${secondColor};--thumb-background-selected:${thirdColor};--thumb-color:${fourthColor}`;
|
||||
|
||||
// Emit a click event when the button is clicked
|
||||
const dispatch = createEventDispatcher();
|
||||
function emitClick(event) {
|
||||
event.preventDefault();
|
||||
event.target.blur();
|
||||
dispatch('click', event);
|
||||
}
|
||||
|
||||
// Show a tooltip on mouse hover
|
||||
let tooltipShowing = false
|
||||
function toggleTooltip(){
|
||||
tooltipShowing = !tooltipShowing
|
||||
}
|
||||
|
||||
// Unsubscribe for all variables used from the store
|
||||
onDestroy(() => {
|
||||
unsubscribeFirstColor();
|
||||
unsubscribeSecondColor();
|
||||
unsubscribeThirdColor();
|
||||
unsubscribeFourthColor();
|
||||
unsubscribeOkColor();
|
||||
unsubscribeNokColor();
|
||||
})
|
||||
</script>
|
||||
|
||||
<div style="{cssVarStyles}">
|
||||
<Tooltip message={tooltipMessage} show={tooltipShowing}></Tooltip>
|
||||
<label class="customToggle"
|
||||
on:mousedown={emitClick}
|
||||
on:mouseenter={toggleTooltip}
|
||||
on:mouseleave={toggleTooltip}
|
||||
style="width:{width}; height:{height}; border-radius:{width}; background-color:{fourthColor};">
|
||||
<input type="checkbox" {checked}>
|
||||
<span class="checkmark" style="width: {height}; height: 100%; border-radius:{height};">
|
||||
<i class='bx {icon}' style="font-size:{height};"/>
|
||||
</span>
|
||||
</label>
|
||||
|
||||
</div>
|
||||
|
||||
<style>
|
||||
div{
|
||||
display:inline-block;
|
||||
}
|
||||
|
||||
.customToggle {
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
padding: 0.1em;
|
||||
}
|
||||
|
||||
.customToggle:hover{
|
||||
box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.25) inset;
|
||||
}
|
||||
|
||||
.customToggle input[type="checkbox"] {
|
||||
opacity: 0;
|
||||
position: absolute; /* Position absolue pour garder l'élément dans le flux */
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.customToggle input[type="checkbox"]:checked + .checkmark {
|
||||
background-color: var(--thumb-background-selected); /* Couleur lorsque la case est cochée */
|
||||
float: right;
|
||||
animation: checkmark-slide-in 0.2s cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards;
|
||||
}
|
||||
|
||||
@keyframes checkmark-slide-in {
|
||||
0% {
|
||||
transform: translateX(-50px) scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
transform: translateX(0) scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
70% {
|
||||
transform: translateX(-5px) scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform: translateX(0) scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.checkmark {
|
||||
text-align:center;
|
||||
float: left;
|
||||
background-color: var(--thumb-background);
|
||||
color: var(--thumb-color);
|
||||
transition: opacity 0.3s, transform 0.3s;
|
||||
}
|
||||
</style>
|
||||
0
frontend/src/lang/en.json
Normal file → Executable file
0
frontend/src/lang/en.json
Normal file → Executable file
0
frontend/src/stores.js
Normal file → Executable file
0
frontend/src/stores.js
Normal file → Executable file
138
frontend/src/style.css
Normal file → Executable file
138
frontend/src/style.css
Normal file → Executable file
@@ -1,69 +1,69 @@
|
||||
:root{
|
||||
-webkit-user-select: none; /* Safari */
|
||||
-ms-user-select: none; /* IE 10 and IE 11 */
|
||||
user-select: none; /* Standard syntax */
|
||||
}
|
||||
|
||||
html, body {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
color: #333;
|
||||
margin: 0;
|
||||
padding: 8px;
|
||||
box-sizing: border-box;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
|
||||
}
|
||||
|
||||
a {
|
||||
color: rgb(0,100,200);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: rgb(0,80,160);
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
}
|
||||
|
||||
input, button, select, textarea {
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
-webkit-padding: 0.4em 0;
|
||||
padding: 0.4em;
|
||||
margin: 0 0 0.5em 0;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
input:disabled {
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
button {
|
||||
color: #333;
|
||||
background-color: #f4f4f4;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
button:disabled {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
button:not(:disabled):active {
|
||||
background-color: #ddd;
|
||||
}
|
||||
|
||||
button:focus {
|
||||
border-color: #666;
|
||||
}
|
||||
:root{
|
||||
-webkit-user-select: none; /* Safari */
|
||||
-ms-user-select: none; /* IE 10 and IE 11 */
|
||||
user-select: none; /* Standard syntax */
|
||||
}
|
||||
|
||||
html, body {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
color: #333;
|
||||
margin: 0;
|
||||
padding: 8px;
|
||||
box-sizing: border-box;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
|
||||
}
|
||||
|
||||
a {
|
||||
color: rgb(0,100,200);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: rgb(0,80,160);
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
}
|
||||
|
||||
input, button, select, textarea {
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
-webkit-padding: 0.4em 0;
|
||||
padding: 0.4em;
|
||||
margin: 0 0 0.5em 0;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
input:disabled {
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
button {
|
||||
color: #333;
|
||||
background-color: #f4f4f4;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
button:disabled {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
button:not(:disabled):active {
|
||||
background-color: #ddd;
|
||||
}
|
||||
|
||||
button:focus {
|
||||
border-color: #666;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user