From 3d9df9262aba36043339395a904bff8a88b5b856 Mon Sep 17 00:00:00 2001 From: DerL30N Date: Wed, 13 Jan 2021 05:01:28 +0100 Subject: [PATCH] added switchButton and disabledButton (#88) --- .../components/AircraftSection/index.tsx | 40 +++++++++++++++---- .../components/AircraftSection/styles.tsx | 38 +++++++++++++----- src/renderer/components/Logo/index.tsx | 5 ++- src/renderer/components/Logo/styles.tsx | 14 +++++++ .../components/LogoWithText/index.tsx | 3 +- src/renderer/style/theme.ts | 1 + 6 files changed, 80 insertions(+), 21 deletions(-) diff --git a/src/renderer/components/AircraftSection/index.tsx b/src/renderer/components/AircraftSection/index.tsx index 0ecc522b..dbd3ec92 100644 --- a/src/renderer/components/AircraftSection/index.tsx +++ b/src/renderer/components/AircraftSection/index.tsx @@ -13,15 +13,16 @@ import { EngineOption, DownloadProgress, UpdateButton, + SwitchButton, InstalledButton, CancelButton, DetailsContainer, VersionHistoryContainer, LeftContainer, TopContainer, - MSFSIsOpenButton, StateText, - ButtonContainer + ButtonContainer, + DisabledButton } from './styles'; import Store from 'electron-store'; import * as fs from "fs"; @@ -57,6 +58,7 @@ const index: React.FC = (props: Props) => { const [selectedTrack, setSelectedTrack] = useState(handleFindInstalledTrack()); const [needsUpdate, setNeedsUpdate] = useState(false); const [needsUpdateReason, setNeedsUpdateReason] = useState(); + const [changeVersion, setChangeVersion] = useState(false); const [isInstalled, setIsInstalled] = useState(false); const [installedStateText, setInstalledStateText] = useState(''); @@ -82,7 +84,7 @@ const index: React.FC = (props: Props) => { useEffect(() => { checkForUpdates(); - const checkMsfsInterval = setInterval(checkIfMSFS, 5_000); + const checkMsfsInterval = setInterval(checkIfMSFS, 500); return () => clearInterval(checkMsfsInterval); }, []); @@ -113,6 +115,8 @@ const index: React.FC = (props: Props) => { const installDir = `${settings.get('mainSettings.msfsPackagePath')}\\${props.mod.targetDirectory}\\`; + setChangeVersion(false); + if (fs.existsSync(installDir)) { setIsInstalled(true); console.log('Installed'); @@ -138,8 +142,9 @@ const index: React.FC = (props: Props) => { if (localLastTrack !== selectedTrack.name) { // The installed track is not the same - require update - setNeedsUpdate(true); - setNeedsUpdateReason(UpdateReasonMessages.VERSION_CHANGED); + setNeedsUpdate(false); + setIsInstalled(false); + setChangeVersion(true); } else { // We are still on the same track - check the installed build @@ -340,6 +345,21 @@ const index: React.FC = (props: Props) => { } } + function getButtonText() { + if (!isInstalledAsGitRepo && !isInstalled && !isDownloading && !changeVersion) { + return "Install"; + } else if (!isInstalledAsGitRepo && !isInstalled && !isDownloading && changeVersion) { + return "Switch version"; + } else if (isInstalledAsGitRepo && isInstalled) { + return "Installed (git)"; + } else if (!isInstalledAsGitRepo && isInstalled && !needsUpdate && !isDownloading) { + return "Installed"; + } else if (!isInstalledAsGitRepo && needsUpdate && !isDownloading) { + return "Update"; + } + return ""; + } + return ( @@ -348,8 +368,14 @@ const index: React.FC = (props: Props) => { {props.mod.shortDescription} - {msfsIsOpen && } - {!msfsIsOpen && !isInstalledAsGitRepo && !isInstalled && !isDownloading && } + {msfsIsOpen && <> + + Please close MSFS + + + } + {!msfsIsOpen && !isInstalledAsGitRepo && !isInstalled && !isDownloading && !changeVersion && } + {!msfsIsOpen && !isInstalledAsGitRepo && !isInstalled && !isDownloading && changeVersion && } {!msfsIsOpen && isInstalledAsGitRepo && isInstalled && <> {installedStateText} diff --git a/src/renderer/components/AircraftSection/styles.tsx b/src/renderer/components/AircraftSection/styles.tsx index 74c6f70d..dc043d91 100644 --- a/src/renderer/components/AircraftSection/styles.tsx +++ b/src/renderer/components/AircraftSection/styles.tsx @@ -18,9 +18,9 @@ export const HeaderImage = styled.div` display: flex; align-items: flex-end; justify-content: space-between; - padding-left: 18px; - padding-right: 18px; - padding-bottom: 8px; + padding-left: 16px; + padding-right: 16px; + padding-bottom: 12px; `; export const ModelName = styled.span` @@ -36,6 +36,14 @@ export const ModelSmallDesc = styled.span` export const ModelInformationContainer = styled.div` display: flex; flex-direction: column; + + *:first-child { + line-height: 40px; + } + + *:last-child { + line-height: 20px; + } `; export const ButtonsContainer = styled.div` @@ -214,13 +222,23 @@ export const UpdateButton = styled( {...props} >Update)``; +export const SwitchButton = styled( + props => + Switch version)``; + export const CancelButton = styled( props => )``; @@ -238,15 +256,15 @@ export const InstalledButton = styled( {...props} >{props.inGitRepo ? 'Installed (git)' : 'Installed'})``; -export const MSFSIsOpenButton = styled( - props => +export const DisabledButton = styled( + (props: { text: string }) => Please close MSFS)``; + >{props.text})``; diff --git a/src/renderer/components/Logo/index.tsx b/src/renderer/components/Logo/index.tsx index f983b289..871e3f2a 100644 --- a/src/renderer/components/Logo/index.tsx +++ b/src/renderer/components/Logo/index.tsx @@ -1,12 +1,13 @@ import React from 'react'; import logo from 'renderer/assets/FBW-Tail.svg'; import fullLogo from 'renderer/assets/FBW-Logo-White.svg'; -import { Container } from './styles'; +import { Container, Title } from './styles'; export function Logo(): JSX.Element { return ( - + + Installer ); } diff --git a/src/renderer/components/Logo/styles.tsx b/src/renderer/components/Logo/styles.tsx index a6eb8b99..6a3c1c2c 100644 --- a/src/renderer/components/Logo/styles.tsx +++ b/src/renderer/components/Logo/styles.tsx @@ -1,4 +1,5 @@ import styled from "styled-components"; +import { colors } from "renderer/style/theme"; export const Container = styled.div` display: flex; @@ -9,3 +10,16 @@ export const Container = styled.div` height: 1.2rem; } `; + +export const Title = styled.span` + line-height: 26px; + border-left: 1px solid ${colors.mutedTextDark}; + + color: ${colors.title}; + + margin-left: 1.1em; + padding-left: 1.1em; + + font-size: 1.4em; + font-weight: 600; +`; diff --git a/src/renderer/components/LogoWithText/index.tsx b/src/renderer/components/LogoWithText/index.tsx index b04fac9c..7e71d2cb 100644 --- a/src/renderer/components/LogoWithText/index.tsx +++ b/src/renderer/components/LogoWithText/index.tsx @@ -1,12 +1,11 @@ import React from 'react'; import { Logo } from 'renderer/components/Logo'; -import { Container, Title } from './styles'; +import { Container } from './styles'; function index(): JSX.Element { return ( - FlyByWire Installer ); } diff --git a/src/renderer/style/theme.ts b/src/renderer/style/theme.ts index 1915087c..cf7786e2 100644 --- a/src/renderer/style/theme.ts +++ b/src/renderer/style/theme.ts @@ -11,6 +11,7 @@ export const colors = { titleContrast: '#FFFFFF', mutedText: '#929292', + mutedTextDark: '#666666', listItem: '#393939', listItemSelected: '#474747',