added switchButton and disabledButton (#88)

flybywiresim · Jan 13, 2021 · 3d9df92 · 3d9df92
1 parent ec94c6c
commit 3d9df92
Show file tree

Hide file tree

Showing 6 changed files with 80 additions and 21 deletions.
diff --git 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: Props) => {
     const [selectedTrack, setSelectedTrack] = useState<ModTrack>(handleFindInstalledTrack());
     const [needsUpdate, setNeedsUpdate] = useState<boolean>(false);
     const [needsUpdateReason, setNeedsUpdateReason] = useState<string>();
+    const [changeVersion, setChangeVersion] = useState<boolean>(false);
 
     const [isInstalled, setIsInstalled] = useState<boolean>(false);
     const [installedStateText, setInstalledStateText] = useState('');
@@ -82,7 +84,7 @@ const index: React.FC<Props> = (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: 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: 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: 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 (
         <Container wait={wait}>
             <HeaderImage>
@@ -348,8 +368,14 @@ const index: React.FC<Props> = (props: Props) => {
                     <ModelSmallDesc>{props.mod.shortDescription}</ModelSmallDesc>
                 </ModelInformationContainer>
                 <SelectionContainer>
-                    {msfsIsOpen && <MSFSIsOpenButton />}
-                    {!msfsIsOpen && !isInstalledAsGitRepo && !isInstalled && !isDownloading && <InstallButton onClick={handleInstall} />}
+                    {msfsIsOpen && <>
+                        <ButtonContainer>
+                            <StateText>Please close MSFS</StateText>
+                            <DisabledButton text={getButtonText()} />
+                        </ButtonContainer>
+                    </>}
+                    {!msfsIsOpen && !isInstalledAsGitRepo && !isInstalled && !isDownloading && !changeVersion && <InstallButton onClick={handleInstall} />}
+                    {!msfsIsOpen && !isInstalledAsGitRepo && !isInstalled && !isDownloading && changeVersion && <SwitchButton onClick={handleInstall} />}
                     {!msfsIsOpen && isInstalledAsGitRepo && isInstalled && <>
                         <ButtonContainer>
                             <StateText>{installedStateText}</StateText>

diff --git 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</InstallButtonTemplate>)``;
 
+export const SwitchButton = styled(
+    props =>
+        <InstallButtonTemplate
+            style={{
+                background: "#BC05E1",
+                borderColor: "#BC05E1"
+            }}
+            {...props}
+        >Switch version</InstallButtonTemplate>)``;
+
 export const CancelButton = styled(
     props =>
         <InstallButtonTemplate
             icon={null}
             style={{
-                background: "#fa8c16",
-                borderColor: "#fa8c16"
+                background: "#fa3516",
+                borderColor: "#fa3516"
             }}
             {...props}
         />)``;
@@ -238,15 +256,15 @@ export const InstalledButton = styled(
             {...props}
         >{props.inGitRepo ? 'Installed (git)' : 'Installed'}</InstallButtonTemplate>)``;
 
-export const MSFSIsOpenButton = styled(
-    props =>
+export const DisabledButton = styled(
+    (props: { text: string }) =>
         <InstallButtonTemplate
             icon={null}
             style={{
                 color: "#dddddd",
-                background: "#bc0d0d",
-                borderColor: "#bc0d0d",
+                background: "#2e3236",
+                borderColor: "#2e3236",
                 pointerEvents: "none"
             }}
             {...props}
-        >Please close MSFS</InstallButtonTemplate>)``;
+        >{props.text}</InstallButtonTemplate>)``;
diff --git 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 (
         <Container>
-            <img src={logo} alt="FlyByWire Logo" id="fbw-logo"/>
+            <img src={logo} alt="FlyByWire Logo" id="fbw-logo" style={{ transform: 'scale(1.1)' }} />
+            <Title>Installer</Title>
         </Container>
     );
 }

diff --git 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
@@ -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 (
         <Container>
             <Logo />
-            <Title>FlyByWire Installer</Title>
         </Container>
     );
 }

diff --git 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',