fix: styling issues with compact mode + fullscreen

zidoro · Dec 20, 2022 · 3cb1725 · 3cb1725
1 parent 50b68c0
commit 3cb1725
Show file tree

Hide file tree

Showing 7 changed files with 69 additions and 22 deletions.
diff --git a/app/renderer/.env b/app/renderer/.env
@@ -1,2 +1,3 @@
+SKIP_PREFLIGHT_CHECK=true
 BROWSER=none
 CI=true
diff --git a/app/renderer/src/routes/Timer/Control/CompactModeButton.tsx b/app/renderer/src/routes/Timer/Control/CompactModeButton.tsx
@@ -1,11 +1,18 @@
 import { SVG } from "components";
+import { CounterContext } from "contexts";
 import { useRippleEffect } from "hooks";
 import React, { useCallback, useRef } from "react";
-import { StyledMainButton } from "styles";
+import { useSelector } from "react-redux";
+import { AppStateTypes, SettingTypes } from "store";
+import { StyledCompactButton } from "styles";
 
 type Props = { flipped?: boolean } & React.HTMLProps<HTMLButtonElement>;
 
 const CompactModeButton: React.FC<Props> = ({ onClick, flipped }) => {
+	const { compactMode }: SettingTypes = useSelector(
+		(state: AppStateTypes) => state.settings
+	);
+
 	const buttonRef = useRef<HTMLButtonElement>(null);
 
 	const buttonClickAction = useRippleEffect();
@@ -17,16 +24,20 @@ const CompactModeButton: React.FC<Props> = ({ onClick, flipped }) => {
 					onClick(e);
 				}
 			}),
-		[buttonClickAction, onClick],
+		[buttonClickAction, onClick]
 	);
 
 	return (
-		<StyledMainButton ref={buttonRef} onClick={onClickAction}>
+		<StyledCompactButton
+			ref={buttonRef}
+			onClick={onClickAction}
+			compact={compactMode}
+		>
 			<SVG
 				name="expand"
 				style={flipped ? { transform: "rotate(180deg)" } : {}}
 			/>
-		</StyledMainButton>
+		</StyledCompactButton>
 	);
 };
 

diff --git a/app/renderer/src/routes/Timer/Control/Control.tsx b/app/renderer/src/routes/Timer/Control/Control.tsx
@@ -43,7 +43,7 @@ const Control: React.FC<Props> = ({ resetTimerAction }) => {
 	}));
 
 	const settings: SettingTypes = useSelector(
-		(state: AppStateTypes) => state.settings,
+		(state: AppStateTypes) => state.settings
 	);
 
 	const dispatch = useDispatch();
@@ -154,7 +154,7 @@ const Control: React.FC<Props> = ({ resetTimerAction }) => {
 					onClick={onResetSessionCallback}
 				/>
 				<StyledControlSpacer className="test" />
-				<StyledControlMain>
+				<StyledControlMain compact={settings.compactMode}>
 					<ResetButton className="compact" onClick={onResetCallback} />
 					<PlayButton
 						compact

diff --git a/app/renderer/src/routes/Timer/Counter/Counter.tsx b/app/renderer/src/routes/Timer/Counter/Counter.tsx
@@ -14,24 +14,47 @@ import CounterType from "./CounterType";
 
 const Counter: React.FC = () => {
 	const settings: SettingTypes = useSelector(
-		(state: AppStateTypes) => state.settings,
+		(state: AppStateTypes) => state.settings
 	);
 
-	const { count, duration, timerType, shouldFullscreen } =
-		useContext(CounterContext);
+	const { count, duration, timerType, shouldFullscreen } = useContext(
+		CounterContext
+	);
 
 	const dashOffset = (duration - count) * (674 / duration);
 
 	const { minutes, seconds } = useTime(count);
+
 	if (settings.compactMode) {
 		return (
 			<StyledCounterContainer className="compact" fullscreen={shouldFullscreen}>
-				<CounterTimer
-					compact
-					timerType={timerType}
-					minutes={minutes}
-					seconds={seconds}
-				/>
+				{shouldFullscreen ? (
+					<>
+						<StyledCounterProgress
+							offset={dashOffset}
+							type={timerType}
+							animate={settings.enableProgressAnimation ? "true" : "false"}
+						/>
+						<StyledCounterWrapper>
+							<CounterType timerType={timerType} />
+							<CounterTimer
+								compact
+								fullscreen={shouldFullscreen}
+								timerType={timerType}
+								minutes={minutes}
+								seconds={seconds}
+							/>
+							<CounterLabel timerType={timerType} />
+						</StyledCounterWrapper>
+					</>
+				) : (
+					<CounterTimer
+						compact
+						timerType={timerType}
+						minutes={minutes}
+						seconds={seconds}
+					/>
+				)}
 			</StyledCounterContainer>
 		);
 	}

diff --git a/app/renderer/src/routes/Timer/Counter/CounterTimer.tsx b/app/renderer/src/routes/Timer/Counter/CounterTimer.tsx
@@ -7,16 +7,22 @@ type Props = {
 	minutes: string;
 	seconds: string;
 	compact?: boolean;
+	fullscreen?: boolean;
 };
 
 const CounterTimer: React.FC<Props> = ({
 	timerType,
 	minutes,
 	seconds,
 	compact,
+	fullscreen,
 }) => {
 	return (
-		<StyledCounterTimer className={compact ? "compact" : ""} type={timerType}>
+		<StyledCounterTimer
+			type={timerType}
+			className={compact ? "compact" : ""}
+			fullscreen={fullscreen}
+		>
 			<span>{minutes}</span>
 			<span>:</span>
 			<span>{seconds}</span>

diff --git a/app/renderer/src/styles/routes/timer/control.ts b/app/renderer/src/styles/routes/timer/control.ts
@@ -24,8 +24,8 @@ const ControlButton = css`
 	}
 
 	&.compact {
-		min-width: 2rem;
-		min-height: 2rem;
+		min-width: 1.6rem;
+		min-height: 1.6rem;
 	}
 `;
 
@@ -131,12 +131,13 @@ export const StyledSessions = styled.p`
 	}
 `;
 
-export const StyledControlMain = styled.div`
+export const StyledControlMain = styled.div<{ compact?: boolean }>`
 	display: grid;
 	align-items: center;
 	align-content: center;
 	grid-auto-flow: column;
 	column-gap: 1rem;
+	margin-right: ${(p) => (p.compact ? 0 : "-1rem")};
 `;
 
 export const StyledResetButton = styled.button`
@@ -147,6 +148,11 @@ export const StyledMainButton = styled.button`
 	${ControlButton};
 `;
 
+export const StyledCompactButton = styled.button<{ compact?: boolean }>`
+	${ControlButton}
+	padding-right: ${(p) => (p.compact ? "1.6rem" : 0)};
+`;
+
 export const StyledSkipButton = styled.button`
 	${ControlButton};
 

diff --git a/app/renderer/src/styles/routes/timer/counter.ts b/app/renderer/src/styles/routes/timer/counter.ts
@@ -94,7 +94,7 @@ export const StyledCounterContainer = styled.div<CounterContainerProps>`
 		display: flex;
 		flex: 0;
 		&::before {
-			display: none;
+			display: ${(p) => (p.fullscreen ? "auto" : "none")} ;
 		}
 	}
 `;
@@ -105,7 +105,7 @@ export const StyledCounterType = styled.div`
 	padding-bottom: 0.8rem;
 `;
 
-type TimerProps = { type?: string };
+type TimerProps = { type?: string } & CounterContainerProps;
 
 export const StyledCounterTimer = styled.h3<TimerProps>`
 	font-size: 4rem;
@@ -131,7 +131,7 @@ export const StyledCounterTimer = styled.h3<TimerProps>`
 	}
 
 	&.compact {
-		font-size: 2.5rem;
+		font-size: ${(p) => (p.fullscreen ? "4rem" : "2.5rem")};
 		width: unset;
 		display: flex;
 		gap: 0.25rem;