Skip to content

Commit

Permalink
Merge branch 'develop' into feature/teamsIntegration
Browse files Browse the repository at this point in the history
Signed-off-by: Donatello G Carboni <99877617+Donatello-Carboni@users.noreply.github.com>
  • Loading branch information
Donatello-Carboni authored Sep 27, 2024
2 parents 3f6dbc1 + 6310500 commit 917a1e8
Show file tree
Hide file tree
Showing 42 changed files with 2,813 additions and 503 deletions.
1 change: 1 addition & 0 deletions Desktop/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -74,6 +74,7 @@
"@testing-library/svelte": "^5.2.0",
"@vitest/ui": "^1.6.0",
"babel-jest": "^27.0.0",
"daisyui": "^4.12.10",
"electron": "^31.3.1",
"electron-builder": "^24.13.3",
"electron-rebuild": "^3.2.9",
Expand Down
Binary file added Desktop/public/images/HighVizBlue.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 2 additions & 2 deletions Desktop/public/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,8 @@
<script src="https://apis.google.com/js/api.js" async defer></script>
<script src="https://apis.google.com/js/platform.js" async defer></script>
</head>
<body style="user-select: none; background-image: linear-gradient(180deg, #001524, #181818);">
<body style="user-select: none;">
<script src="build/bundle.js"></script>
<div id="app"></div>
</body>
</html>
</html>
32 changes: 29 additions & 3 deletions Desktop/src/App.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
import Router from "svelte-spa-router";
import routes from "./routes/routes";
import { cuda, loadState } from "./stores/processing";
import { theme } from './stores/themeStore.js';
import toast, { Toaster } from "svelte-french-toast";
import { onMount } from "svelte";
Expand Down Expand Up @@ -32,16 +33,41 @@
console.log("Cuda: ", isCuda);
cuda.set(isCuda);
});
let currentTheme;
$: {
theme.subscribe(value => {
currentTheme = value;
});
}
function toggleTheme() {
if (currentTheme === 'highVizLight') {
theme.set('highVizDark');
} else {
theme.set('highVizLight');
}
}
$: {
theme.subscribe(value => {
currentTheme = value;
// Change the body class when the theme changes
document.body.className = theme === 'theme' ? 'highVizLight' : 'highVizDark';
});
}
</script>

<div class="mainContainer">
<div>
<!-- class="mainContainer" -->
<Toaster />
<Router {routes} />
</div>

<style>
.mainContainer {
@import './global.css';
/* .mainContainer {
background-image: linear-gradient(180deg, #001524, #181818);
width: 100% !important;
}
} */
</style>
28 changes: 25 additions & 3 deletions Desktop/src/components/AccountPopup.svelte
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
<script>
import { createEventDispatcher } from "svelte";
import { Icon } from "svelte-materialify";
import {theme} from '../stores/themeStore';
export let items = [];
Expand All @@ -10,15 +11,15 @@
dispatch("close");
}
</script>

{#if $theme === 'highVizLight'}
<div
class="relative bg-dark-background_secondary text-dark-primary border border-dark-background_secondary rounded-lg p-2 w-64 flex flex-col z-50"
class="relative bg-highVizLight-accent text-blac border border-highVizLight-background rounded-lg p-2 w-64 flex flex-col z-50"
>
<nav>
<ul class="list-none p-0 m-0">
{#each items as { name, route, iconPath }}
<li
class="p-2 border-b border-opacity-10 border-theme-dark-backgroundBlue rounded-md hover:bg-dark-background hover:text-theme-dark-white transition"
class="p-2 border-b border-opacity-10 border-highVizLight-primary rounded-md hover:bg-theme-highVizLight-accent hover:text-white transition"
>
<a href={route} class="flex items-center text-inherit no-underline">
<Icon path={iconPath} />
Expand All @@ -29,3 +30,24 @@
</ul>
</nav>
</div>

{:else}
<div
class="relative bg-dark-background_secondary text-dark-primary border border-dark-background_secondary rounded-lg p-2 w-64 flex flex-col z-50"
>
<nav>
<ul class="list-none p-0 m-0">
{#each items as { name, route, iconPath }}
<li
class="p-2 border-b border-opacity-10 border-theme-dark-backgroundBlue rounded-md hover:bg-dark-background hover:text-theme-dark-white transition"
>
<a href={route} class="flex items-center text-inherit no-underline">
<Icon path={iconPath} />
<span class="ml-2">{name}</span>
</a>
</li>
{/each}
</ul>
</nav>
</div>
{/if}
112 changes: 78 additions & 34 deletions Desktop/src/components/AddMember.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
import { Button, TextField, Icon } from "svelte-materialify";
import {mdiAccountPlus} from "@mdi/js";
import axios from "axios";
import {theme} from '../stores/themeStore';
let email = '';
let newMembers = [];
Expand Down Expand Up @@ -43,43 +44,86 @@
};
</script>


<div class="fixed inset-0 flex items-center justify-center bg-modal z-50">
<div
class="bg-theme-dark-background p-6 rounded-lg shadow-lg border border-theme-keith-primary w-1/4"
>
<div id="form" class="flex flex-col gap-2 py-3 text-white">
<TextField
bind:value={email}
outlined
class="border-b border-dark-primary ">Email address
{#if $theme === 'highVizLight'}
<div class="fixed inset-0 flex items-center justify-center bg-modal z-50">
<div
class="bg-theme-dark-background p-6 rounded-lg shadow-lg border border-theme-keith-primary w-1/4"
>
<div id="form" class="flex flex-col gap-2 py-3 text-black">
<TextField
bind:value={email}
outlined
class="border-b border-dark-primary text-white">Email address

<!-- svelte-ignore a11y-click-events-have-key-events -->
<div
slot="append"
on:click={addMemberToList}
>
<Icon path={mdiAccountPlus} class="text-theme-dark-primary cursor-pointer"/>
</div>
</TextField>
<!-- svelte-ignore a11y-click-events-have-key-events -->
<div
slot="append"
on:click={addMemberToList}
>
<Icon path={mdiAccountPlus} class="cursor-pointer"/>
</div>
</TextField>
</div>
<div class="flex gap-2 newMember content-fit">
{#each newMembers as member}
<p class="bg-theme-dark-primary rounded-lg px-1 mt-2 text-theme-dark-white hoverClass">{member}</p>
{/each}
</div>
<div class="flex mt-4 space-x-4">
<button
on:click={closePopup}
class="font-medium bg-opacity-70 px-4 py-2 bg-highVizLight-error text-white rounded hover:bg-opacity-100 transition-all duration-300 ease-in-out"
>Cancel</button
>
<button
on:click={addMember}
class="font-medium bg-opacity-70 px-4 py-2 bg-highVizLight-secondary text-white rounded hover:bg-opacity-100 transition-all duration-300 ease-in-out"
>Add</button
>
</div>
</div>
<div class="flex gap-2 newMember content-fit">
{#each newMembers as member}
<p class="bg-theme-dark-primary rounded-lg px-1 mt-2 text-theme-dark-white hoverClass">{member}</p>
{/each}
</div>
<div class="flex mt-4 space-x-4">
<button
on:click={closePopup}
class="font-medium px-4 py-2 bg-theme-dark-error text-white rounded"
>Cancel</button
>
<button
on:click={addMember}
class="font-medium px-4 py-2 bg-theme-dark-primary text-white rounded"
>Add</button
>
</div>
</div>
{:else}
<div class="fixed inset-0 flex items-center justify-center bg-modal z-50">
<div
class="bg-theme-dark-background p-6 rounded-lg shadow-lg border border-theme-keith-primary w-1/4"
>
<div id="form" class="flex flex-col gap-2 py-3 text-white">
<TextField
bind:value={email}
outlined
class="border-b border-dark-primary ">Email address

<!-- svelte-ignore a11y-click-events-have-key-events -->
<div
slot="append"
on:click={addMemberToList}
>
<Icon path={mdiAccountPlus} class="text-theme-dark-primary cursor-pointer"/>
</div>
</TextField>
</div>
<div class="flex gap-2 newMember content-fit">
{#each newMembers as member}
<p class="bg-theme-dark-primary rounded-lg px-1 mt-2 text-theme-dark-white hoverClass">{member}</p>
{/each}
</div>
<div class="flex mt-4 space-x-4">
<button
on:click={closePopup}
class="font-medium px-4 py-2 bg-theme-dark-error text-white rounded"
>Cancel</button
>
<button
on:click={addMember}
class="font-medium px-4 py-2 bg-theme-dark-primary text-white rounded"
>Add</button
>
</div>
</div>
</div>
{/if}


34 changes: 31 additions & 3 deletions Desktop/src/components/DeleteModal.svelte
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<script>
import { push } from "svelte-spa-router";
import { createEventDispatcher } from "svelte";
import {theme } from "../stores/themeStore";
export let videoPath;
const dispatch = createEventDispatcher();
Expand All @@ -28,6 +28,31 @@
}
</script>

{#if $theme === 'highVizLight'}
<div class="fixed inset-0 flex items-center justify-center bg-modal z-50">
<div
class="bg-highVizLight-accent p-6 rounded-lg shadow-lg border border-theme-keith-primary w-1/4"
>
<div class="flex flex-col boder border-theme-dark-backgroundBlue">
<p class="text-md">
Are you sure you would like to delete the video from your downloads?
</p>
<div class="flex mt-4 space-x-4">
<button
on:click={cancel}
class="font-medium bg-opacity-70 px-4 py-2 bg-highVizLight-secondary text-white rounded hover:bg-opacity-100 transition-all duration-300 ease-in-out"
>Cancel</button
>
<button
on:click={deleteVideo}
class="font-medium bg-opacity-70 px-4 py-2 bg-highVizLight-error text-white rounded hover:bg-opacity-100 transition-all duration-300 ease-in-out"
>Delete</button
>
</div>
</div>
</div>
</div>
{:else}
<div class="fixed inset-0 flex items-center justify-center bg-modal z-50">
<div
class="bg-theme-dark-background p-6 rounded-lg shadow-lg border border-theme-keith-primary w-1/4"
Expand All @@ -39,15 +64,18 @@
<div class="flex mt-4 space-x-4">
<button
on:click={cancel}
class="font-medium px-4 py-2 bg-theme-dark-primary text-white rounded"
class="font-medium px-4 py-2 bg-theme-dark-primary text-white rounded-full"
>Cancel</button
>
<button
on:click={deleteVideo}
class="font-medium px-4 py-2 bg-theme-dark-error text-white rounded"
class="font-medium px-4 py-2 bg-theme-dark-error text-white rounded-full"
>Delete</button
>
</div>
</div>
</div>
</div>
{/if}


Loading

0 comments on commit 917a1e8

Please sign in to comment.