From df6de5a32b9ee26eaf6cc964c4179330b5b9cb59 Mon Sep 17 00:00:00 2001
From: Michael Ochmann <michael.ochmann@propeller.de>
Date: Fri, 30 Sep 2022 19:51:58 +0200
Subject: [PATCH] added "no file" screen on start
---
src/ui/src/assets/css/_noFile.scss | 26 ++++++++++++++++++++++++++
src/ui/src/assets/css/ation.scss | 5 +++++
src/ui/src/components/Ation.js | 9 +++++++--
src/ui/src/components/NoFile.js | 21 +++++++++++++++++++++
src/ui/src/shared/SlideContext.js | 1 +
5 files changed, 60 insertions(+), 2 deletions(-)
create mode 100644 src/ui/src/assets/css/_noFile.scss
create mode 100644 src/ui/src/components/NoFile.js
diff --git a/src/ui/src/assets/css/_noFile.scss b/src/ui/src/assets/css/_noFile.scss
new file mode 100644
index 0000000..445720e
--- /dev/null
+++ b/src/ui/src/assets/css/_noFile.scss
@@ -0,0 +1,26 @@
+.no-file {
+ width: 100vw;
+ height: 100vh;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ .inner {
+ width: 60%;
+ height: auto;
+ opacity: 0.4;
+ background: color(sidebarBackground);
+ border-radius: 1rem;
+ border: dashed 6px color(scrollbar);
+ padding: 2rem 4rem;
+ text-align: center;
+ max-width: 500px;
+ max-height: 300px;
+
+ svg {
+ &.big {
+ font-size: 4rem;
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/ui/src/assets/css/ation.scss b/src/ui/src/assets/css/ation.scss
index 48ee027..d7ac640 100644
--- a/src/ui/src/assets/css/ation.scss
+++ b/src/ui/src/assets/css/ation.scss
@@ -2,8 +2,11 @@
@import "variables";
@import "mixins";
@import "scrollbars";
+@import "forms";
+@import "toolbar";
@import "window";
+@import "noFile";
@import "slidesList";
@import "slide";
@import "blackout";
@@ -20,4 +23,6 @@ body {
margin: 0;
padding: 0;
background: color(background);
+ color: color(foreground);
+ font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
\ No newline at end of file
diff --git a/src/ui/src/components/Ation.js b/src/ui/src/components/Ation.js
index b4dae99..d3e7b36 100644
--- a/src/ui/src/components/Ation.js
+++ b/src/ui/src/components/Ation.js
@@ -5,6 +5,8 @@ import Mode from "../models/Mode";
import Slide from "./Slide";
import KeyboardControl from "./KeyboardControl";
import Blackout from "./Blackout";
+import NoFile from "./NoFile";
+import Toolbar from "./Toolbar";
import SlideContext from "../shared/SlideContext";
@@ -21,13 +23,16 @@ const Ation = () => {
setDeck(slideDeck);
}
+ if (deck.length < 1)
+ return <NoFile openFile={openFile} />;
+
return (
- <SlideContext.Provider value={{slide, setSlide, mode}}>
+ <SlideContext.Provider value={{slide, setSlide, mode, setMode}}>
<section className={`window${mode === Mode.PRESENT ? " fullscreen" : ""}`}>
+ <Toolbar openFile={openFile} />
<SlidesList deck={deck} />
<main className="main">
<Slide data={deck[slide] || null} />
- <button onClick={openFile}>open</button>
</main>
</section>
<Blackout show={mode === Mode.BLACKOUT} />
diff --git a/src/ui/src/components/NoFile.js b/src/ui/src/components/NoFile.js
new file mode 100644
index 0000000..ca8ba86
--- /dev/null
+++ b/src/ui/src/components/NoFile.js
@@ -0,0 +1,21 @@
+import React from "react";
+
+import {Easel, Folder2Open} from "react-bootstrap-icons";
+
+const NoFile = ({openFile}) => {
+ return (
+ <section className="no-file">
+ <section className="inner">
+ <p>
+ <Easel className="big" />
+ </p>
+ <i>No presentation loaded</i><br />
+ <p>
+ <button onClick={openFile}><Folder2Open /> open</button>
+ </p>
+ </section>
+ </section>
+ );
+};
+
+export default NoFile;
\ No newline at end of file
diff --git a/src/ui/src/shared/SlideContext.js b/src/ui/src/shared/SlideContext.js
index 05a0529..6584d40 100644
--- a/src/ui/src/shared/SlideContext.js
+++ b/src/ui/src/shared/SlideContext.js
@@ -5,6 +5,7 @@ import Mode from "../models/Mode";
const SlideContext = createContext({
slide : 0,
mode : Mode.NORMAL,
+ setMode : () => {},
setSlide : () => {}
});