16 preview pane (#59)

* Adding Windows self-hosted runner to build and test

* Add application store, toggleswitch updates, and preview pane

* tslint fix

* Remove branch from workflow and bump version

.github/workflows/build-and-test-mac.yml → .github/workflows/build-and-test.yml

@@ -1,14 +1,18 @@
-name: Build and Test Mac
+name: Build and Test
 
 on:
   push:
-    branches: main
+    branches: [main]
   pull_request:
-    branches: main
+    branches: [main]
 
 jobs:
-  release:
-    runs-on: [self-hosted, macOS]
+  build_and_test:
+    runs-on: ${{ matrix.os }}
+
+    strategy:
+      matrix:
+        os: [[self-hosted, macOS], [self-hosted, Windows]]
 
     steps:
       - name: Check out Git repository

README.md

@@ -7,7 +7,7 @@
     Write and Publish Novels With Ease
   </p>
 
-  [![Test](https://github.com/midnightprioriem/calamus/actions/workflows/test.yml/badge.svg)](https://github.com/midnightprioriem/calamus/actions/workflows/test.yml)
+  [![Build and Test](https://github.com/midnightprioriem/calamus/actions/workflows/build-and-test.yml/badge.svg)](https://github.com/midnightprioriem/calamus/actions/workflows/build-and-test.yml)
   [![Release](https://github.com/midnightprioriem/calamus/actions/workflows/release.yml/badge.svg)](https://github.com/midnightprioriem/calamus/actions/workflows/release.yml)
   <a href="https://github.com/midnightprioriem/calamus/releases"><img src="https://img.shields.io/github/release/midnightprioriem/calamus.svg" alt="github release version"></a>
   <a href="https://github.com/midnightprioriem/calamus/releases"><img src="https://img.shields.io/github/downloads/midnightprioriem/calamus/total.svg" alt="github release downloads"></a>

app/renderer/App.css

@@ -32,7 +32,7 @@ body {
     align-items: center;
     margin: 0;
     font-family: 'Poppins', sans-serif;
-    font-size: 0.8em;
+    font-size: 0.9em;
 }
 
 h1 {

app/renderer/App.tsx

@@ -1,8 +1,7 @@
 // import { MemoryRouter as Router, Routes, Route } from 'react-router-dom';
 import './App.css';
 import styled, { ThemeProvider } from 'styled-components';
-import Writer from './components/Writer';
-import ProjectSidebar from './components/ProjectSidebar';
+import { SidebarPane, PreviewPane, Writer } from './panes';
 import theme from './theme/theme';
 
 const AppContainer = styled.div`
@@ -12,11 +11,14 @@ const AppContainer = styled.div`
   flex-shrink: 0;
   height: 100vh;
   width: 100vw;
+  overflow-x: hidden;
 `;
 
 const MainContent = styled.div`
   padding-top: env(titlebar-area-height, 500px);
-  width: 100%;
+  width: 50%;
+  flex-grow: 2;
+  flex-shrink: 2;
   height: calc(100% - env(titlebar-area-height, 500px));
   color: ${(p) => p.theme.mainFgText};
   background-color: ${(p) => p.theme.mainBg};
@@ -26,10 +28,11 @@ const App = () => {
   return (
     <ThemeProvider theme={theme}>
       <AppContainer>
-        <ProjectSidebar />
+        <SidebarPane />
         <MainContent>
           <Writer />
         </MainContent>
+        <PreviewPane />
       </AppContainer>
     </ThemeProvider>
   );

app/renderer/components/MoreOptionsSidebarItem.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import styled, { useTheme } from 'styled-components';
+import styled, { useTheme, css } from 'styled-components';
 import Color from 'color';
 
 type StyledMenuItemProps = {
@@ -20,10 +20,15 @@ const StyledMenuItem = styled.div<StyledMenuItemProps>`
   font-size: 0.9em;
 
   color: ${(p) => p.theme.mainFgTextSecondary};
-  &:hover {
-    background-color: ${(p) =>
-      p.hover ? p.hoverColor : p.theme.contextMenuBg};
-  }
+
+  ${(p) =>
+    p.hover &&
+    css`
+      &:hover {
+        background-color: ${p.hoverColor}};
+      }
+    `}
+
   transition: background-color 100ms ease-in-out;
 `;
 
@@ -54,7 +59,7 @@ const MoreOptionsSidebarItem = ({
   label,
 }: MoreOptionsSidebarItemProps) => {
   const theme = useTheme();
-  const menuItemHoverColor = Color(theme.contextMenuBg).darken(0.2);
+  const menuItemHoverColor = Color(theme.contextMenuBg).lighten(0.3);
 
   return (
     <StyledMenuItem

app/renderer/components/MoreOptionsSidebarMenu.tsx

@@ -12,10 +12,12 @@ import {
   UpdateIcon,
 } from '../icons';
 import icon from '../../../assets/icon.png';
+import useStore from '../store/useStore';
 
 const StyledPopupDiv = styled.div`
   width: 180px;
   background-color: ${(p) => p.theme.contextMenuBg};
+  backdrop-filter: blur(40px);
   border-radius: 10px;
   padding: 5px;
   display: flex;
@@ -33,6 +35,8 @@ const StyledMenuDivider = styled.div`
 
 const MoreOptionsSidebarMenu = () => {
   const theme = useTheme();
+  const previewEnabled = useStore((state) => state.previewEnabled);
+  const setPreviewEnabled = useStore((state) => state.setPreviewEnabled);
   return (
     <div>
       <Popup
@@ -73,9 +77,8 @@ const MoreOptionsSidebarMenu = () => {
             rightElement={
               <ToggleSwitch
                 altColor
-                onChange={(val) => {
-                  console.log(val);
-                }}
+                onChange={setPreviewEnabled}
+                defaultValue={previewEnabled}
               />
             }
             label="Preview"

app/renderer/components/ScrollContainer.tsx

@@ -4,14 +4,14 @@ import styled from 'styled-components';
 const Scroller = styled.div`
   overflow-y: overlay;
   height: 100%;
-  width: calc(100% - 40px);
+  width: calc(100% - 100px);
   display: flex;
   align-items: center;
   flex-direction: column;
   align-content: center;
   justify-content: flex-start;
-  padding-right: 20px;
-  padding-left: 20px;
+  padding-right: 50px;
+  padding-left: 50px;
 `;
 
 const Padding = styled.div`

app/renderer/components/index.ts

@@ -0,0 +1,3 @@
+export { default as MoreOptionsSidebarItem } from './MoreOptionsSidebarItem';
+export { default as MoreOptionsSidebarMenu } from './MoreOptionsSidebarMenu';
+export { default as ScrollContainer } from './ScrollContainer';

app/renderer/controls/ToggleSwitch.tsx

@@ -1,6 +1,6 @@
-import { useEffect } from 'react';
-import styled from 'styled-components';
-import useToggle from '../utils/toggle';
+import { useEffect, useState } from 'react';
+import styled, { keyframes, css } from 'styled-components';
+import { useToggle, useIsMount } from '../hooks';
 
 type ToggleSwitchProps = {
   defaultValue?: boolean;
@@ -31,19 +31,38 @@ const StyledToggleBase = styled.div<StyledToggleBaseProps>`
 type StyledToggleThumbProps = {
   type: string;
   enabled: boolean;
+  animate: boolean;
 };
 
+const animateThumb = keyframes`
+  0% {
+    width: 11px;
+  }
+  50% {
+    width: 25px;
+  }
+  100% {
+    width: 11px;
+  }
+`;
+
 const StyledToggleThumb = styled.div<StyledToggleThumbProps>`
   height: 11px;
   width: 11px;
   border-radius: 8px;
   margin: 4px 2px;
+  ${(p) =>
+    p.animate &&
+    css`
+      animation: ${animateThumb} 300ms ease-in-out;
+    `}
+
   margin-left: ${(p) => (p.enabled ? '15px' : '2px')};
   background-color: ${(p) =>
     p.enabled ? p.theme.toggleOnFg : p.theme.toggleOffFg[p.type]};
   box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.2);
   user-select: none;
-  transition: all 100ms ease-in-out;
+  transition: all 300ms ease-in-out;
 `;
 
 const ToggleSwitch = ({
@@ -52,10 +71,17 @@ const ToggleSwitch = ({
   onChange,
 }: ToggleSwitchProps) => {
   const [enabled, toggleValue] = useToggle(defaultValue);
-
+  const [animate, setAnimate] = useState(false);
+  const isMount = useIsMount();
   useEffect(() => {
-    if (onChange) onChange(enabled);
-  }, [enabled, onChange]);
+    if (!isMount) {
+      setAnimate(true);
+      if (onChange) onChange(enabled);
+      setTimeout(() => {
+        setAnimate(false);
+      }, 300);
+    }
+  }, [enabled, onChange, isMount]);
 
   return (
     <StyledToggleBase
@@ -64,6 +90,7 @@ const ToggleSwitch = ({
       onClick={toggleValue}
     >
       <StyledToggleThumb
+        animate={animate}
         enabled={enabled}
         type={altColor ? 'alt' : 'default'}
       />
@@ -72,8 +99,8 @@ const ToggleSwitch = ({
 };
 
 ToggleSwitch.defaultProps = {
-  defaultValue: true,
-  altColor: true,
+  defaultValue: false,
+  altColor: false,
   onChange: () => {},
 };
 

app/renderer/hooks/index.ts

@@ -0,0 +1,2 @@
+export { default as useToggle } from './useToggle';
+export { default as useIsMount } from './useIsMount';

app/renderer/hooks/useIsMount.ts

@@ -0,0 +1,11 @@
+import { useRef, useEffect } from 'react';
+
+const useIsMount = () => {
+  const isMountRef = useRef(true);
+  useEffect(() => {
+    isMountRef.current = false;
+  }, []);
+  return isMountRef.current;
+};
+
+export default useIsMount;

app/renderer/utils/toggle.ts → app/renderer/hooks/useToggle.ts

@@ -4,7 +4,6 @@ const useToggle = (initialValue = false): [boolean, () => void] => {
   const [value, setValue] = useState(initialValue);
 
   const toggle = useCallback(() => {
-    console.log('toggling value');
     setValue((v) => !v);
   }, []);
 

app/renderer/panes/PreviewPane.tsx

@@ -0,0 +1,21 @@
+import styled from 'styled-components';
+import useStore from '../store/useStore';
+
+type StyledPaneProps = {
+  previewEnabled: boolean;
+};
+
+const StyledPane = styled.div<StyledPaneProps>`
+  height: 100%;
+  width: 600px;
+  margin-right: ${(p) => (p.previewEnabled ? '0px' : '-600px')};
+  background-color: ${(p) => p.theme.previewBg};
+  transition: margin-right 300ms ease-in-out;
+`;
+
+const PreviewPane = () => {
+  const previewEnabled = useStore((state) => state.previewEnabled);
+  return <StyledPane previewEnabled={previewEnabled} />;
+};
+
+export default PreviewPane;

app/renderer/components/ProjectSidebar.tsx → app/renderer/panes/SidebarPane.tsx

@@ -1,8 +1,8 @@
 import styled, { useTheme } from 'styled-components';
-import MoreOptionsSidebarMenu from './MoreOptionsSidebarMenu';
+import { MoreOptionsSidebarMenu } from '../components';
 import { IconButton } from '../controls';
 import { SidebarOpenIcon, SidebarClosedIcon } from '../icons';
-import useToggle from '../utils/toggle';
+import { useToggle } from '../hooks';
 
 type StyledSidebarProps = {
   open: boolean;
@@ -32,48 +32,41 @@ const SidebarTopContainer = styled.div`
   justify-content: space-between;
 `;
 
-const SidebarTopButtonsDiv = styled.div`
-  display: flex;
-  justify-content: center;
-  box-sizing: border-box;
-  flex-direction: row;
-  height: 100%;
-  gap: 10px;
-`;
-
 type SidebarToggleButtonDivProps = {
   open: boolean;
 };
 const SidebarToggleButtonDiv = styled.div<SidebarToggleButtonDivProps>`
-  margin-right: ${(props) => (props.open ? '0px' : '-140px')};
+  display: flex;
+  flex-direction: row;
+  height: 100%;
+  gap: 10px;
+  margin-right: ${(props) => (props.open ? '0px' : '-100px')};
   transition: margin-right 200ms ease-in-out;
   z-index: 100;
 `;
 
-const ProjectSidebar = () => {
+const SidebarPane = () => {
   const theme = useTheme();
   const [open, toggleOpen] = useToggle(true);
 
   return (
     <StyledSidebar open={open} width="300px">
       <SidebarTopContainer>
         <div /* placeholder */ />
-        <SidebarTopButtonsDiv>
-          <SidebarToggleButtonDiv open={open}>
-            <IconButton
-              size="20px"
-              foregroundColor={theme.sidebarIconFg}
-              backgroundColor={theme.sidebarIconBg}
-              onClick={toggleOpen}
-            >
-              {open ? <SidebarOpenIcon /> : <SidebarClosedIcon />}
-            </IconButton>
-          </SidebarToggleButtonDiv>
+        <SidebarToggleButtonDiv open={open}>
+          <IconButton
+            size="20px"
+            foregroundColor={theme.sidebarIconFg}
+            backgroundColor={theme.sidebarIconBg}
+            onClick={toggleOpen}
+          >
+            {open ? <SidebarOpenIcon /> : <SidebarClosedIcon />}
+          </IconButton>
           <MoreOptionsSidebarMenu />
-        </SidebarTopButtonsDiv>
+        </SidebarToggleButtonDiv>
       </SidebarTopContainer>
     </StyledSidebar>
   );
 };
 
-export default ProjectSidebar;
+export default SidebarPane;

app/renderer/components/Writer.tsx → app/renderer/panes/Writer.tsx

@@ -25,7 +25,7 @@ import {
   softBreakPluginOptions,
   withStyledPlaceholders,
 } from '../writer/options';
-import ScrollContainer from './ScrollContainer';
+import { ScrollContainer } from '../components';
 import initialValue from '../writer/initialText';
 
 const editorId = '1';

app/renderer/panes/index.ts

@@ -0,0 +1,3 @@
+export { default as PreviewPane } from './PreviewPane';
+export { default as SidebarPane } from './SidebarPane';
+export { default as Writer } from './Writer';