style

Author: nitzano

src/components/ReadingPanel/ReadingPanel.stories.tsx

@@ -34,3 +34,30 @@ export const Primary: Story = {
     </>
   ),
 };
+
+export const Vertical: Story = {
+  args: {},
+  render: () => (
+    <>
+      <ReadingPanel
+        targetId="sample"
+        settings={{ direction: "vertical" }}
+      ></ReadingPanel>
+      <div>
+        <p id="sample" style={{ userSelect: "none", maxWidth: "400px" }}>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua.
+          Pellentesque habitant morbi tristique senectus et netus et malesuada
+          fames. Ultrices neque ornare aenean euismod elementum nisi quis.
+          Euismod elementum nisi quis eleifend quam adipiscing. Est ante in nibh
+          mauris cursus. Morbi tristique senectus et netus et malesuada fames ac
+          turpis. Vitae purus faucibus ornare suspendisse. In nisl nisi
+          scelerisque eu ultrices vitae auctor eu. Purus viverra accumsan in
+          nisl nisi scelerisque eu ultrices vitae. Ultrices gravida dictum fusce
+          ut. At quis risus sed vulputate odio. Nisl tincidunt eget nullam non.
+          Malesuada fames ac turpis egestas sed tempus.
+        </p>
+      </div>
+    </>
+  ),
+};

src/components/ReadingPanel/ReadingPanel.styles.ts

@@ -1,7 +1,10 @@
 import styled from "styled-components";
+import { PanelDirection } from "./settings/settings.types";
 
 
 export const PanelButton = styled.div`
+
+
 cursor: pointer;
 height: 35px;
 width: 35px;
@@ -15,8 +18,9 @@ border-radius: 50%;
 `;
 
 
-export const Container = styled.div`
+export const Container = styled.div<{ direction?: PanelDirection}>`
   display: flex;
+  flex-direction: ${props => props.direction === 'vertical' ? 'column' : 'row'};
   align-items: center;
   background: white;
   padding: 5px 2px;

src/components/ReadingPanel/ReadingPanel.tsx

@@ -136,7 +136,7 @@ export function ReadingPanel({
   };
 
   return (
-    <Container>
+    <Container direction={settings.direction}>
       <>
         {!isOpen && (
           <PanelButton onClick={handleSwitchOpen}>
@@ -155,7 +155,6 @@ export function ReadingPanel({
           <PanelButton onClick={handleFontIncrease}>
             <MdTextIncrease></MdTextIncrease>
           </PanelButton>
-
           <PanelButton onClick={handleFontDecrease}>
             <MdTextDecrease></MdTextDecrease>
           </PanelButton>

src/components/ReadingPanel/settings/settings.types.ts

@@ -15,6 +15,7 @@ export interface ColorSettings {
 
   export type Theme = 'light' | 'dark';
 
+  export type PanelDirection = 'horizontal' | 'vertical'
 
 export interface Settings {
   colorSettings: ColorSettings;
@@ -28,7 +29,7 @@ export interface Settings {
   lineHeightsStep: number
   lineHeightUnits: string;
   startOpen: boolean;
-  direction: 'horizontal' | 'vertical';
+  direction: PanelDirection;
 }  
 
 export const defaultSettings: Settings = {