From 48eec34628d9a8c751d60303f5c4fef232e6171c Mon Sep 17 00:00:00 2001 From: Michael Ochmann Date: Fri, 30 Sep 2022 21:16:41 +0200 Subject: [PATCH] more polishing for `v0.1.0` --- package.json | 2 +- src/Ation.js | 10 ++++ src/WindowManager.js | 3 +- src/ui/src/assets/css/_blackout.scss | 1 + src/ui/src/assets/css/_forms.scss | 20 +++++++ src/ui/src/assets/css/_slide.scss | 74 +++++++++++++++++++++--- src/ui/src/assets/css/_slidesList.scss | 4 ++ src/ui/src/assets/css/_variables.scss | 3 +- src/ui/src/components/Ation.js | 14 +++-- src/ui/src/components/KeyboardControl.js | 15 ++++- src/ui/src/components/NoFile.js | 3 + src/ui/src/components/Slide.js | 4 +- src/ui/src/components/SlideItem.js | 25 ++++++-- src/ui/src/components/SlidesList.js | 4 +- src/ui/src/shared/SlideContext.js | 1 + 15 files changed, 157 insertions(+), 26 deletions(-) diff --git a/package.json b/package.json index 71e4a3a..7c137e7 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "ation", - "version": "0.0.1", + "version": "0.1.0", "description": "a simple presentation software", "main": "main.js", "scripts": { diff --git a/src/Ation.js b/src/Ation.js index 5cb6bb5..27330c2 100644 --- a/src/Ation.js +++ b/src/Ation.js @@ -1,4 +1,6 @@ "use strict"; +const {app, protocol} = require("electron"); +const url = require("url"); const WindowManager = require("./WindowManager"); @@ -9,6 +11,14 @@ class Ation { if (Ation.Instances > 0) throw new Error("Only one Instance of Ation possible"); this.windowManager = new WindowManager(); + + app.whenReady().then(async () => { + protocol.registerFileProtocol("slideimg", (request, callback) => { + const path = request.url.replace(/^slideimg:\/\//, ""); + console.log(path); + callback(path); + }); + }); } } Ation.Instances = 0; diff --git a/src/WindowManager.js b/src/WindowManager.js index 322f49f..e7eee28 100644 --- a/src/WindowManager.js +++ b/src/WindowManager.js @@ -36,9 +36,10 @@ class WindowManager { return null; const fileContents = await fs.readFile(result.filePaths[0], {encoding : "utf-8"}); + const basePath = path.dirname(result.filePaths[0]); const data = parser(fileContents); - return data; + return [basePath, data]; }); } diff --git a/src/ui/src/assets/css/_blackout.scss b/src/ui/src/assets/css/_blackout.scss index c6afcd6..95e09ad 100644 --- a/src/ui/src/assets/css/_blackout.scss +++ b/src/ui/src/assets/css/_blackout.scss @@ -3,6 +3,7 @@ top: 0; left: 0; width: 100vw; + cursor: none; height: 100vh; z-index: 1000; background: black; diff --git a/src/ui/src/assets/css/_forms.scss b/src/ui/src/assets/css/_forms.scss index ce383a9..5f4dfec 100644 --- a/src/ui/src/assets/css/_forms.scss +++ b/src/ui/src/assets/css/_forms.scss @@ -21,4 +21,24 @@ button { margin-right: 0.3rem; vertical-align: middle; } +} + +.checkbox { + display: inline-block; + width: 2vw; + height: 2vw; + border: solid 1px color(hightlight); + color: color(hightlight); + position: relative; + + &.checked { + &::before { + content: "X"; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + font-size: 1.8vw; + } + } } \ No newline at end of file diff --git a/src/ui/src/assets/css/_slide.scss b/src/ui/src/assets/css/_slide.scss index 1500252..7a4c276 100644 --- a/src/ui/src/assets/css/_slide.scss +++ b/src/ui/src/assets/css/_slide.scss @@ -1,33 +1,93 @@ .slide { font-family: "Iosevka", sans-serif; - font-size: 2rem; + font-size: 4vw; display: flex; flex-direction: column; align-items: center; justify-content: center; user-select: none; + padding: 8vw; + text-align: center; aspect-ratio: 1.333; background: color(background); color: color(foreground); + ul, ol, pre { + text-align: left; + } + + ul, ol { + li.task { + list-style: none; + margin-left: -0.8em; + } + } + + blockquote { + opacity: 0.5; + font-style: italic; + position: relative; + + &::before, &::after { + position: absolute; + font-size: 8vw; + opacity: 0.1; + } + + &::before { + top: 0; + left: 0; + margin-left: -4vw; + content: "„"; + } + + &::after { + bottom: 0; + right: 0; + margin-right: -4vw; + content: "“"; + } + } + + figure { + img { + max-width: 95%; + height: auto; + } + + figcaption { + font-size: 1.8vw; + opacity: 0.6; + font-style: italic; + font-weight: normal; + } + } + &.title { p { font-style: italic; - font-size: 1.8rem; + font-size: 3.5vw; color: color(scrollbar); &:nth-of-type(2) { - font-size: 1.2rem; + font-size: 2.8vw; } } } - h1 { - font-size: 4rem; + code:not([class*=language-]) { + font-weight: normal; + font-size: 0.9em; + color: color(hightlight); } - code { - font-size: 1.2rem; + pre { + font-size: 1.5vw; width: 90%; + padding: 4vw !important; + + * { + font-weight: normal !important; + } } } \ No newline at end of file diff --git a/src/ui/src/assets/css/_slidesList.scss b/src/ui/src/assets/css/_slidesList.scss index 9970dc5..5091054 100644 --- a/src/ui/src/assets/css/_slidesList.scss +++ b/src/ui/src/assets/css/_slidesList.scss @@ -16,5 +16,9 @@ margin: 5% 0 0 5%; aspect-ratio: 1.333; -webkit-transform-origin: top left; + + &.active { + border: solid 3px color(hightlight); + } } } \ No newline at end of file diff --git a/src/ui/src/assets/css/_variables.scss b/src/ui/src/assets/css/_variables.scss index 1a83e37..972d73b 100644 --- a/src/ui/src/assets/css/_variables.scss +++ b/src/ui/src/assets/css/_variables.scss @@ -4,7 +4,8 @@ $colors : ( foreground : #ddd, sidebarBackground : #333, mainBackground : #222, - scrollbar : rgba(255,255,255,0.2) + scrollbar : rgba(255,255,255,0.2), + hightlight : lawngreen ); :root { diff --git a/src/ui/src/components/Ation.js b/src/ui/src/components/Ation.js index d3e7b36..b0f5539 100644 --- a/src/ui/src/components/Ation.js +++ b/src/ui/src/components/Ation.js @@ -11,15 +11,17 @@ import Toolbar from "./Toolbar"; import SlideContext from "../shared/SlideContext"; const Ation = () => { - const [mode, setMode] = useState(Mode.NORMAL); - const [deck, setDeck] = useState([]); - const [slide, setSlide] = useState(0); + const [mode, setMode] = useState(Mode.NORMAL); + const [deck, setDeck] = useState([]); + const [slide, setSlide] = useState(0); + const [basePath, setBasePath] = useState(""); const openFile = async () => { - const slideDeck = await window.api.openFile(); + const [basePath, slideDeck] = await window.api.openFile(); if (!slideDeck) return; + setBasePath(basePath); setDeck(slideDeck); } @@ -27,7 +29,7 @@ const Ation = () => { return ; return ( - +
@@ -36,7 +38,7 @@ const Ation = () => {
- + ); }; diff --git a/src/ui/src/components/KeyboardControl.js b/src/ui/src/components/KeyboardControl.js index a659a51..ab3efe1 100644 --- a/src/ui/src/components/KeyboardControl.js +++ b/src/ui/src/components/KeyboardControl.js @@ -3,12 +3,23 @@ import {useContext, useEffect} from "react"; import SlideContext from "../shared/SlideContext"; import Mode from "../models/Mode"; -const KeyboardControl = ({mode, setMode, deck}) => { +const KeyboardControl = ({openFile, mode, setMode, deck}) => { const {slide, setSlide} = useContext(SlideContext); useEffect(() => { const keyHandler = event => { - console.log(event.key); + switch(event.key) { + case "o": + if (!event.metaKey && !event.ctrlKey) + return; + openFile(); + break; + default: + console.log(event.key); + } + if (!mode || !setMode || !deck) + return; + switch (event.key) { case "F5": if (deck.length <= 0) diff --git a/src/ui/src/components/NoFile.js b/src/ui/src/components/NoFile.js index ca8ba86..b8f99e9 100644 --- a/src/ui/src/components/NoFile.js +++ b/src/ui/src/components/NoFile.js @@ -2,6 +2,8 @@ import React from "react"; import {Easel, Folder2Open} from "react-bootstrap-icons"; +import KeyboardControl from "./KeyboardControl"; + const NoFile = ({openFile}) => { return (
@@ -14,6 +16,7 @@ const NoFile = ({openFile}) => {

+ ); }; diff --git a/src/ui/src/components/Slide.js b/src/ui/src/components/Slide.js index b05ba65..2c1d058 100644 --- a/src/ui/src/components/Slide.js +++ b/src/ui/src/components/Slide.js @@ -2,9 +2,9 @@ import React from "react"; import SlideItem from "./SlideItem"; -const Slide = ({data, ...props}) => { +const Slide = ({data, className, ...props}) => { return ( -
+
{data?.content.map((item, index) => )} diff --git a/src/ui/src/components/SlideItem.js b/src/ui/src/components/SlideItem.js index 6740f5c..cf125b1 100644 --- a/src/ui/src/components/SlideItem.js +++ b/src/ui/src/components/SlideItem.js @@ -1,8 +1,10 @@ -import React, {useMemo} from "react"; +import React, {useMemo, useContext} from "react"; import SyntaxHighlighter from "react-syntax-highlighter" import {monokai} from "react-syntax-highlighter/dist/esm/styles/hljs"; +import SlideContext from "../shared/SlideContext"; + const Children = ({items}) => { if (items instanceof Array) return <>{items.map((child, index) => )}; @@ -10,6 +12,8 @@ const Children = ({items}) => { }; const SlideItem = ({item}) => { + const {basePath} = useContext(SlideContext); + const content = useMemo(() => { console.log("ITEM",item); switch (item.type) { @@ -21,12 +25,25 @@ const SlideItem = ({item}) => { else return
case "list_item": - const prefix = item.task ? : null; - return
  • {prefix}
    • + const prefix = item.task ? : null; + return
  • {prefix}
    • + case "image": + return ( +
    + {item.text} + {item.text?.length > 0 ? +
    {item.text}
    + : null} +
    + ) + case "blockquote": + return
    case "paragraph": return

    case "code": return {item.text} + case "codespan": + return {item.text} case "strong": return case "em": @@ -36,7 +53,7 @@ const SlideItem = ({item}) => { default: return JSON.stringify(item); } - }, [item]); + }, [item, basePath]); return ( <> diff --git a/src/ui/src/components/SlidesList.js b/src/ui/src/components/SlidesList.js index 24f5e2c..4d325a9 100644 --- a/src/ui/src/components/SlidesList.js +++ b/src/ui/src/components/SlidesList.js @@ -36,9 +36,9 @@ const SlidesList = ({deck}) => { return ( diff --git a/src/ui/src/shared/SlideContext.js b/src/ui/src/shared/SlideContext.js index 6584d40..c3c034a 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, + basePath : "", setMode : () => {}, setSlide : () => {} });