Allow changing logo size in templates (#267)

* Added LogoSize component to previewWindow side bar

Also set initial value in reducer

* Hook up logoSize to templates

* Refactored other components

+ Bumped resize size from 125px to 500px.
+ Added new string: “Logo Size” for translation
+ Updated CSS

app/components/settings/_partials/profile/Logo.jsx

@@ -28,15 +28,19 @@ const LogoContainer = styled.div`
   display: flex;
   justify-content: center;
   align-items: center;
+`;
+
+const LogoDisplayzone = styled.div`
+  max-width: 160px;
+  max-height: 160px;
+  display: flex;
   img {
     max-width: 180px;
     width: 100%;
     height: auto;
   }
 `;
 
-const LogoDisplayzone = styled.div``;
-
 const RemoveLogoBtn = styled.a`
   position: absolute;
   top: -15px;

app/helpers/image.js

@@ -28,7 +28,7 @@ function processImg(filePath, callback) {
     if (err) handleError(err);
     try {
       image
-        .resize(125, Jimp.AUTO)
+        .resize(500, Jimp.AUTO)
         .quality(100)
         .getBase64(Jimp.MIME_PNG, (err, result) => {
           if (err) handleError(err);

i18n/en/preview.json

@@ -8,6 +8,7 @@
       "bottom": "Bottom"
     },
     "fontSize": "Font Size",
+    "logoSize": "Logo Size",
     "toggle": {
       "name": "Toggle",
       "logo": "Logo",

preview/components/sidebar/LogoSize.jsx

@@ -0,0 +1,32 @@
+// Libs
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Section, Label, Range } from '../shared';
+
+function LogoSize({ t, logoSize, handleInputChange, UILang }) {
+  return (
+    <Section>
+      <Label>
+        {t('preview:sidebar:logoSize', { lng: UILang })}
+      </Label>
+      <Range
+        name="logoSize"
+        type="range"
+        min="5"
+        max="50"
+        step="2.5"
+        value={logoSize}
+        onChange={handleInputChange}
+      />
+    </Section>
+  );
+}
+
+LogoSize.propTypes = {
+  logoSize: PropTypes.string.isRequired,
+  handleInputChange: PropTypes.func.isRequired,
+  t: PropTypes.func.isRequired,
+  UILang: PropTypes.string.isRequired,
+};
+
+export default LogoSize;

preview/containers/SideBar.jsx

@@ -28,6 +28,7 @@ import Actions from '../components/sidebar/Actions';
 import Alignment from '../components/sidebar/Alignment';
 import DateFormat from '../components/sidebar/DateFormat';
 import FontSize from '../components/sidebar/FontSize';
+import LogoSize from '../components/sidebar/LogoSize';
 import Language from '../components/sidebar/Language';
 import Template from '../components/sidebar/Template';
 import Toggler from '../components/sidebar/Toggler';
@@ -73,6 +74,7 @@ class SideBar extends Component {
       language,
       alignItems,
       fontSize,
+      logoSize,
       accentColor
     } = configs;
     return (
@@ -108,6 +110,14 @@ class SideBar extends Component {
           fontSize={fontSize}
           handleInputChange={this.handleInputChange}
         />
+        { configs.showLogo &&
+          <LogoSize
+            t={t}
+            UILang={UILang}
+            logoSize={logoSize}
+            handleInputChange={this.handleInputChange}
+          />
+        }
         <Toggler
           t={t}
           UILang={UILang}

preview/reducers/index.jsx

@@ -23,6 +23,7 @@ const initialState = {
     // Other settings
     alignItems: 'middle',
     fontSize: '200',
+    logoSize: '20',
     showLogo: true,
     showRecipient: true,
     useSymbol: true,

preview/templates/business/components/Logo.jsx

@@ -4,7 +4,6 @@ import PropTypes from 'prop-types';
 
 // Styles
 import styled from 'styled-components';
-
 const InvoiceLogo = styled.div`
   flex: 1;
   max-height: 6em;
@@ -14,12 +13,30 @@ const InvoiceLogo = styled.div`
   }
 `;
 
+const Wrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-start;
+  margin-bottom: 2em;
+  ${props =>
+    props.logoSize &&
+    `
+    max-width: ${props.logoSize}%;
+  `};
+  img {
+    width: 100%;
+    height: auto;
+  }
+`;
+
 // Component
 function Logo({ profile, configs }) {
-  return configs.showLogo ? (
-    <InvoiceLogo>
+  const { showLogo, logoSize } = configs;
+  return showLogo ? (
+    <Wrapper logoSize={logoSize}>
       <img src={profile.logo} alt="Logo" />
-    </InvoiceLogo>
+    </Wrapper>
   ) : null;
 }
 
@@ -28,4 +45,5 @@ Logo.propTypes = {
   profile: PropTypes.object.isRequired,
 };
 
+
 export default Logo;

preview/templates/minimal/components/Header.jsx

@@ -10,10 +10,6 @@ import styled from 'styled-components';
 const Wrapper = styled.div`
   display: flex;
   justify-content: space-between;
-  img {
-    width: auto;
-    max-height: 5em;
-  }
   text-transform: capitalize;
 `;
 
@@ -30,9 +26,25 @@ const Heading = styled.h1`
   `};
 `;
 
+const Logo = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  justify-content: flex-start;
+  height: auto;
+  ${props =>
+    props.logoSize &&
+    `
+    max-width: ${props.logoSize}%;
+  `};
+  img {
+    width: 100%;
+  }
+`;
+
 // Component
 function Header({ t, invoice, profile, configs }) {
-  const { language } = configs;
+  const { language, logoSize } = configs;
   const { dueDate } = invoice;
   return (
     <Wrapper>
@@ -82,9 +94,9 @@ function Header({ t, invoice, profile, configs }) {
         ]}
       </div>
       {configs.showLogo && (
-        <div>
+        <Logo logoSize={logoSize}>
           <img src={profile.logo} alt="Logo" />
-        </div>
+        </Logo>
       )}
     </Wrapper>
   );