From 75147e54716328ce02a26ec2eab6534fc7f9f65c Mon Sep 17 00:00:00 2001 From: Weslley Nascimento Rocha Date: Fri, 25 Feb 2022 21:39:26 -0300 Subject: [PATCH] feature: added compact mode (#178) * feature: added compact mode * chore: add cross-env to better support different operating systems in dev Co-authored-by: Sekwah --- app/main/src/main.ts | 26 ++++++++- app/main/src/store/index.ts | 1 + app/renderer/src/App.tsx | 30 +++++++--- app/renderer/src/assets/icons/expand.svg | 1 + app/renderer/src/assets/icons/index.ts | 2 + app/renderer/src/components/Layout.tsx | 4 +- app/renderer/src/components/SVG.tsx | 16 ++++-- app/renderer/src/config.ts | 10 ++++ app/renderer/src/contexts/ElectronContext.tsx | 9 +++ .../src/routes/Settings/FeatureSection.tsx | 9 +++ .../Timer/Control/CompactModeButton.tsx | 33 +++++++++++ .../src/routes/Timer/Control/Control.tsx | 55 ++++++++++++++----- .../src/routes/Timer/Control/PlayButton.tsx | 22 +++++++- .../src/routes/Timer/Control/ResetButton.tsx | 8 ++- .../src/routes/Timer/Counter/Counter.tsx | 23 +++++--- .../src/routes/Timer/Counter/CounterTimer.tsx | 10 +++- app/renderer/src/routes/Timer/index.tsx | 14 +++-- app/renderer/src/store/settings/actions.ts | 10 ++++ app/renderer/src/store/settings/reducer.ts | 7 +++ app/renderer/src/store/settings/types.ts | 2 + app/renderer/src/styles/components/layout.ts | 3 + .../src/styles/routes/timer/control.ts | 10 ++++ .../src/styles/routes/timer/counter.ts | 18 +++++- app/renderer/src/styles/routes/timer/timer.ts | 6 ++ app/shareables/src/index.ts | 2 + package.json | 3 +- yarn.lock | 9 ++- 27 files changed, 290 insertions(+), 53 deletions(-) create mode 100644 app/renderer/src/assets/icons/expand.svg create mode 100644 app/renderer/src/routes/Timer/Control/CompactModeButton.tsx diff --git a/app/main/src/main.ts b/app/main/src/main.ts index 2cf4987f..d65050ba 100644 --- a/app/main/src/main.ts +++ b/app/main/src/main.ts @@ -21,6 +21,7 @@ import { SET_SHOW, RELEASED_NOTES_LINK, TRAY_ICON_UPDATE, + SET_COMPACT_MODE, } from "@pomatez/shareables"; import { activateGlobalShortcuts, @@ -36,7 +37,10 @@ import store from "./store"; import isDev from "electron-is-dev"; import "v8-compile-cache"; -import { FullscreenState, setFullscreenBreakHandler } from "./lifecycleEventHandlers/fullScreenBreak"; +import { + FullscreenState, + setFullscreenBreakHandler, +} from "./lifecycleEventHandlers/fullScreenBreak"; const onProduction = app.isPackaged; @@ -69,7 +73,7 @@ function createMainWindow() { win = new BrowserWindow({ width: 340, height: getFrameHeight(), - resizable: false, + resizable: true, maximizable: false, show: false, frame: store.get("useNativeTitlebar"), @@ -298,7 +302,23 @@ ipcMain.on(SET_ALWAYS_ON_TOP, (e, { alwaysOnTop }) => { }); ipcMain.on(SET_FULLSCREEN_BREAK, (e, args) => { - setFullscreenBreakHandler(args, { tray, trayTooltip, fullscreenState, win, contextMenu}); + setFullscreenBreakHandler(args, { + tray, + trayTooltip, + fullscreenState, + win, + contextMenu, + }); +}); + +ipcMain.on(SET_COMPACT_MODE, (e, args) => { + if (args.compactMode) { + win?.setMinimumSize(340, 100); + win?.setSize(340, 100); + } else { + win?.setMinimumSize(340, getFrameHeight()); + win?.setSize(340, getFrameHeight()); + } }); ipcMain.on(SET_UI_THEME, (e, { isDarkMode }) => { diff --git a/app/main/src/store/index.ts b/app/main/src/store/index.ts index 73b66911..a0d0fdcf 100644 --- a/app/main/src/store/index.ts +++ b/app/main/src/store/index.ts @@ -6,6 +6,7 @@ type StoreProps = { userId: string; isDarkMode: boolean; useNativeTitlebar: boolean; + compactMode: boolean; }; const store = new Store(); diff --git a/app/renderer/src/App.tsx b/app/renderer/src/App.tsx index a0b9b9e5..f5808747 100644 --- a/app/renderer/src/App.tsx +++ b/app/renderer/src/App.tsx @@ -2,9 +2,12 @@ import React, { Suspense } from "react"; import { HashRouter as Router, Switch, Route } from "react-router-dom"; import { ThemeProvider, CounterProvider, ElectronProvider } from "contexts"; import { Layout, Preloader } from "components"; -import { routes } from "config"; +import { compactRoutes, routes } from "config"; +import { useSelector } from "react-redux"; +import { AppStateTypes } from "store"; export default () => { + const settings = useSelector((state: AppStateTypes) => state.settings); return ( @@ -13,14 +16,23 @@ export default () => { }> - {routes.map(({ exact, path, component }, index) => ( - - ))} + {settings["compactMode"] + ? compactRoutes.map(({ exact, path, component }, index) => ( + + )) + : routes.map(({ exact, path, component }, index) => ( + + ))} diff --git a/app/renderer/src/assets/icons/expand.svg b/app/renderer/src/assets/icons/expand.svg new file mode 100644 index 00000000..cb71a1ae --- /dev/null +++ b/app/renderer/src/assets/icons/expand.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/renderer/src/assets/icons/index.ts b/app/renderer/src/assets/icons/index.ts index 3cb2a525..5c2b8bef 100644 --- a/app/renderer/src/assets/icons/index.ts +++ b/app/renderer/src/assets/icons/index.ts @@ -33,3 +33,5 @@ export { ReactComponent as RefreshSVG } from "./refresh.svg"; export { ReactComponent as AlertSVG } from "./alert.svg"; export { ReactComponent as ChevronDownSVG } from "./chevron-down.svg"; + +export { ReactComponent as ExpandSVG } from "./expand.svg"; diff --git a/app/renderer/src/components/Layout.tsx b/app/renderer/src/components/Layout.tsx index cbc3e4cb..99cee9ad 100644 --- a/app/renderer/src/components/Layout.tsx +++ b/app/renderer/src/components/Layout.tsx @@ -77,7 +77,9 @@ const Layout: React.FC = ({ history, location, children }) => { timerType={timer.timerType} /> )} - + {settings["compactMode"] ? null : ( + + )} {children} ); diff --git a/app/renderer/src/components/SVG.tsx b/app/renderer/src/components/SVG.tsx index eb147353..79a8601b 100644 --- a/app/renderer/src/components/SVG.tsx +++ b/app/renderer/src/components/SVG.tsx @@ -1,4 +1,4 @@ -import React from "react"; +import React, { SVGProps } from "react"; import { BonfireSVG, ConfigSVG, @@ -26,9 +26,12 @@ import { ChevronDownSVG, OptionYSVG, AlertSVG, + ExpandSVG, } from "assets/icons"; export type SVGTypes = { + size?: number; + style?: SVGProps["style"]; name: | "bonfire" | "headset" @@ -55,10 +58,11 @@ export type SVGTypes = { | "fast-food" | "refresh" | "alert" - | "chevron-down"; + | "chevron-down" + | "expand"; }; -const SVG: React.FC = ({ name }) => { +const SVG: React.FC = ({ name, size, style }) => { switch (name) { case "bonfire": return ; @@ -73,9 +77,9 @@ const SVG: React.FC = ({ name }) => { case "option-y": return ; case "pause": - return ; + return ; case "play": - return ; + return ; case "progress": return ; case "reset": @@ -112,6 +116,8 @@ const SVG: React.FC = ({ name }) => { return ; case "chevron-down": return ; + case "expand": + return ; default: return ; } diff --git a/app/renderer/src/config.ts b/app/renderer/src/config.ts index dee3c9da..ce3a07c8 100644 --- a/app/renderer/src/config.ts +++ b/app/renderer/src/config.ts @@ -43,6 +43,16 @@ export const routes: NavItemTypes[] = [ }, ]; +export const compactRoutes: NavItemTypes[] = [ + { + icon: "timer", + name: "Timer", + exact: false, + path: "/", + component: Timer, + }, +]; + export const rangeConfig: ConfigSliderProps[] = [ { label: "Stay focus", diff --git a/app/renderer/src/contexts/ElectronContext.tsx b/app/renderer/src/contexts/ElectronContext.tsx index 818b112f..99883ec4 100644 --- a/app/renderer/src/contexts/ElectronContext.tsx +++ b/app/renderer/src/contexts/ElectronContext.tsx @@ -10,6 +10,7 @@ import { SET_UI_THEME, SET_NATIVE_TITLEBAR, TRAY_ICON_UPDATE, + SET_COMPACT_MODE, } from "@pomatez/shareables"; import { AppStateTypes, SettingTypes } from "store"; @@ -94,6 +95,14 @@ const ElectronProvider: React.FC = ({ children }) => { } }, [electron, settings.alwaysOnTop, shouldFullscreen]); + useEffect(() => { + if (isElectron()) { + electron.send(SET_COMPACT_MODE, { + compactMode: settings.compactMode, + }); + } + }, [electron, settings.compactMode]); + useEffect(() => { if (isElectron()) { electron.send(SET_UI_THEME, { diff --git a/app/renderer/src/routes/Settings/FeatureSection.tsx b/app/renderer/src/routes/Settings/FeatureSection.tsx index cd45408a..954a6d3a 100644 --- a/app/renderer/src/routes/Settings/FeatureSection.tsx +++ b/app/renderer/src/routes/Settings/FeatureSection.tsx @@ -13,6 +13,7 @@ import { setMinimizeToTray, setCloseToTray, setEnableVoiceAssistance, + setEnableCompactMode, } from "store"; import { Toggler, TogglerProps, Collapse, Radio } from "components"; import { ThemeContext } from "contexts"; @@ -37,6 +38,14 @@ const FeatureSection: React.FC = () => { dispatch(setAlwaysOnTop(!settings.alwaysOnTop)); }, [dispatch, settings.alwaysOnTop]), }, + { + id: "compact-mode", + label: "Compact Mode", + checked: settings.compactMode, + onChange: useCallback(() => { + dispatch(setEnableCompactMode(!settings.compactMode)); + }, [dispatch, settings.compactMode]), + }, { id: "fullscreen-break", label: "Fullscreen Break", diff --git a/app/renderer/src/routes/Timer/Control/CompactModeButton.tsx b/app/renderer/src/routes/Timer/Control/CompactModeButton.tsx new file mode 100644 index 00000000..e11a0865 --- /dev/null +++ b/app/renderer/src/routes/Timer/Control/CompactModeButton.tsx @@ -0,0 +1,33 @@ +import { SVG } from "components"; +import { useRippleEffect } from "hooks"; +import React, { useCallback, useRef } from "react"; +import { StyledMainButton } from "styles"; + +type Props = { flipped?: boolean } & React.HTMLProps; + +const CompactModeButton: React.FC = ({ onClick, flipped }) => { + const buttonRef = useRef(null); + + const buttonClickAction = useRippleEffect(); + + const onClickAction = useCallback( + (e) => + buttonClickAction(e, buttonRef, () => { + if (onClick) { + onClick(e); + } + }), + [buttonClickAction, onClick] + ); + + return ( + + + + ); +}; + +export default React.memo(CompactModeButton); diff --git a/app/renderer/src/routes/Timer/Control/Control.tsx b/app/renderer/src/routes/Timer/Control/Control.tsx index 5e6078d2..b23f8538 100644 --- a/app/renderer/src/routes/Timer/Control/Control.tsx +++ b/app/renderer/src/routes/Timer/Control/Control.tsx @@ -1,17 +1,20 @@ -import React, { useCallback, useState, useEffect } from "react"; -import { useSelector, useDispatch } from "react-redux"; +import WarningBell from "assets/audios/warning-bell.wav"; +import { SVG } from "components"; +import React, { useCallback, useEffect, useState } from "react"; +import { useDispatch, useSelector } from "react-redux"; import { AppStateTypes, + LONG_BREAK, + setEnableCompactMode, setPlay, - skipTimer, setRound, setTimerType, - STAY_FOCUS, + SettingTypes, SHORT_BREAK, - LONG_BREAK, + skipTimer, SPECIAL_BREAK, + STAY_FOCUS, togglenotificationSoundOn, - SettingTypes, } from "store"; import { StyledControl, @@ -19,13 +22,10 @@ import { StyledStrictIndicator, StyledStrictSnackbar, } from "styles"; -import { SVG } from "components"; - -import WarningBell from "assets/audios/warning-bell.wav"; - -import Sessions from "./Sessions"; -import ResetButton from "./ResetButton"; +import CompactModeButton from "./CompactModeButton"; import PlayButton from "./PlayButton"; +import ResetButton from "./ResetButton"; +import Sessions from "./Sessions"; import SkipButton from "./SkipButton"; import VolumeButton from "./VolumeButton"; @@ -79,6 +79,10 @@ const Control: React.FC = ({ resetTimerAction }) => { dispatch(togglenotificationSoundOn()); }, [dispatch]); + const onToggleCompactCallback = useCallback(() => { + dispatch(setEnableCompactMode(!settings.compactMode)); + }, [dispatch, settings.compactMode]); + const onSkipAction = useCallback(() => { if (timer.playing && settings.enableStrictMode) { activateWarning(); @@ -139,6 +143,29 @@ const Control: React.FC = ({ resetTimerAction }) => { return () => clearTimeout(timeout); }, [warn]); + if (settings.compactMode) { + return ( + + + + + + + + + + ); + } + return ( = ({ resetTimerAction }) => { /> - {settings.enableStrictMode && ( + {settings.enableStrictMode ? ( @@ -166,6 +193,8 @@ const Control: React.FC = ({ resetTimerAction }) => { You are currently on Strict Mode! + ) : ( + )} ); diff --git a/app/renderer/src/routes/Timer/Control/PlayButton.tsx b/app/renderer/src/routes/Timer/Control/PlayButton.tsx index ea4ef6a8..63bb710a 100644 --- a/app/renderer/src/routes/Timer/Control/PlayButton.tsx +++ b/app/renderer/src/routes/Timer/Control/PlayButton.tsx @@ -5,9 +5,15 @@ import { SVG } from "components"; type Props = { playing: boolean; + compact?: boolean; } & React.HTMLProps; -const PlayButton: React.FC = ({ playing, onClick }) => { +const PlayButton: React.FC = ({ + playing, + onClick, + className, + compact, +}) => { const buttonRef = useRef(null); const buttonClickAction = useRippleEffect(); @@ -22,9 +28,19 @@ const PlayButton: React.FC = ({ playing, onClick }) => { [buttonClickAction, onClick] ); + const size = compact ? 36 : 56; + return ( - - {playing ? : } + + {playing ? ( + + ) : ( + + )} ); }; diff --git a/app/renderer/src/routes/Timer/Control/ResetButton.tsx b/app/renderer/src/routes/Timer/Control/ResetButton.tsx index ed5041ff..001435fa 100644 --- a/app/renderer/src/routes/Timer/Control/ResetButton.tsx +++ b/app/renderer/src/routes/Timer/Control/ResetButton.tsx @@ -5,7 +5,7 @@ import { SVG } from "components"; type Props = {} & React.HTMLProps; -const ResetButton: React.FC = ({ onClick }) => { +const ResetButton: React.FC = ({ onClick, className }) => { const buttonRef = useRef(null); const buttonClickAction = useRippleEffect(); @@ -21,7 +21,11 @@ const ResetButton: React.FC = ({ onClick }) => { ); return ( - + ); diff --git a/app/renderer/src/routes/Timer/Counter/Counter.tsx b/app/renderer/src/routes/Timer/Counter/Counter.tsx index 67af4349..8e7494d8 100644 --- a/app/renderer/src/routes/Timer/Counter/Counter.tsx +++ b/app/renderer/src/routes/Timer/Counter/Counter.tsx @@ -1,19 +1,16 @@ +import { CounterContext } from "contexts"; +import { useTime } from "hooks"; import React, { useContext } from "react"; import { useSelector } from "react-redux"; - -import { CounterContext } from "contexts"; import { AppStateTypes, SettingTypes } from "store"; -import { useTime } from "hooks"; - import { StyledCounterContainer, - StyledCounterWrapper, StyledCounterProgress, + StyledCounterWrapper, } from "styles"; - -import CounterType from "./CounterType"; import CounterLabel from "./CounterLabel"; import CounterTimer from "./CounterTimer"; +import CounterType from "./CounterType"; const Counter: React.FC = () => { const settings: SettingTypes = useSelector( @@ -27,6 +24,18 @@ const Counter: React.FC = () => { const dashOffset = (duration - count) * (674 / duration); const { minutes, seconds } = useTime(count); + if (settings.compactMode) { + return ( + + + + ); + } return ( diff --git a/app/renderer/src/routes/Timer/Counter/CounterTimer.tsx b/app/renderer/src/routes/Timer/Counter/CounterTimer.tsx index ab279da2..71af5036 100644 --- a/app/renderer/src/routes/Timer/Counter/CounterTimer.tsx +++ b/app/renderer/src/routes/Timer/Counter/CounterTimer.tsx @@ -6,11 +6,17 @@ type Props = { timerType?: TimerTypes["timerType"]; minutes: string; seconds: string; + compact?: boolean; }; -const CounterTimer: React.FC = ({ timerType, minutes, seconds }) => { +const CounterTimer: React.FC = ({ + timerType, + minutes, + seconds, + compact, +}) => { return ( - + {minutes} : {seconds} diff --git a/app/renderer/src/routes/Timer/index.tsx b/app/renderer/src/routes/Timer/index.tsx index 67a67a7e..50550e58 100644 --- a/app/renderer/src/routes/Timer/index.tsx +++ b/app/renderer/src/routes/Timer/index.tsx @@ -1,12 +1,16 @@ -import React, { useContext, useCallback } from "react"; import { CounterContext } from "contexts"; +import React, { useCallback, useContext } from "react"; +import { useSelector } from "react-redux"; +import { AppStateTypes } from "store"; import { StyledTimer } from "styles"; - +import Control from "./Control"; import Counter from "./Counter"; import PriorityCard from "./PriorityCard"; -import Control from "./Control"; export default () => { + const compactMode = useSelector( + (state: AppStateTypes) => state.settings.compactMode + ); const { resetTimerAction } = useContext(CounterContext); const onResetCallback = useCallback(() => { @@ -14,9 +18,9 @@ export default () => { }, [resetTimerAction]); return ( - + - + {compactMode ? null : } ); diff --git a/app/renderer/src/store/settings/actions.ts b/app/renderer/src/store/settings/actions.ts index 2d14ecf5..fa1f17ba 100644 --- a/app/renderer/src/store/settings/actions.ts +++ b/app/renderer/src/store/settings/actions.ts @@ -14,6 +14,7 @@ import { MINIMIZE_TO_TRAY, AUTO_START_WORK_TIME, ENABLE_VOICE_ASSISTANCE, + ENABLE_COMPACT_MODE, } from "./types"; export const setAlwaysOnTop = ( @@ -40,6 +41,15 @@ export const setEnableDarkTheme = ( }; }; +export const setEnableCompactMode = ( + enableCompactMode: SettingTypes["compactMode"] +): SettingActionTypes => { + return { + type: ENABLE_COMPACT_MODE, + payload: enableCompactMode, + }; +}; + export const setEnableFullscreenBreak = ( enableFullscreenBreak: SettingTypes["enableFullscreenBreak"] ): SettingActionTypes => { diff --git a/app/renderer/src/store/settings/reducer.ts b/app/renderer/src/store/settings/reducer.ts index a95e0aa3..e15691b8 100644 --- a/app/renderer/src/store/settings/reducer.ts +++ b/app/renderer/src/store/settings/reducer.ts @@ -15,10 +15,12 @@ import { MINIMIZE_TO_TRAY, AUTO_START_WORK_TIME, ENABLE_VOICE_ASSISTANCE, + ENABLE_COMPACT_MODE, } from "./types"; const defaultSettings: SettingTypes = { alwaysOnTop: false, + compactMode: false, enableFullscreenBreak: false, enableStrictMode: false, enableDarkTheme: isPreferredDark(), @@ -53,6 +55,11 @@ export const settingReducer = ( ...state, notificationSoundOn: !state.notificationSoundOn, }; + case ENABLE_COMPACT_MODE: + return { + ...state, + compactMode: Boolean(action.payload), + }; case ENABLE_FULLSCREEN_BREAK: return { ...state, diff --git a/app/renderer/src/store/settings/types.ts b/app/renderer/src/store/settings/types.ts index ecbe9615..ed26fa72 100644 --- a/app/renderer/src/store/settings/types.ts +++ b/app/renderer/src/store/settings/types.ts @@ -2,6 +2,7 @@ const settings = "[settings]"; export type SettingTypes = { alwaysOnTop: boolean; + compactMode: boolean; enableFullscreenBreak: boolean; enableDarkTheme: boolean; enableStrictMode: boolean; @@ -18,6 +19,7 @@ export type SettingTypes = { export const ALWAYS_ON_TOP = `${settings} ALWAYS_ON_TOP`; export const ENABLE_DARK_THEME = `${settings} ENABLE_DARK_THEME`; +export const ENABLE_COMPACT_MODE = `${settings} ENABLE_COMPACT_MODE`; export const ENABLE_FULLSCREEN_BREAK = `${settings} ENABLE_FULLSCREEN_BREAK`; export const ENABLE_STRICT_MODE = `${settings} ENABLE_STRICT_MODE`; diff --git a/app/renderer/src/styles/components/layout.ts b/app/renderer/src/styles/components/layout.ts index e4cd943a..150a74d3 100644 --- a/app/renderer/src/styles/components/layout.ts +++ b/app/renderer/src/styles/components/layout.ts @@ -14,5 +14,8 @@ export const StyledLayout = styled.div` & > main { height: 41.2rem; animation: ${(p) => p.noTransition && "none"}; + &.compact { + height: unset; + } } `; diff --git a/app/renderer/src/styles/routes/timer/control.ts b/app/renderer/src/styles/routes/timer/control.ts index 270c652c..14c9a99b 100644 --- a/app/renderer/src/styles/routes/timer/control.ts +++ b/app/renderer/src/styles/routes/timer/control.ts @@ -22,6 +22,11 @@ const ControlButton = css` &:hover { color: currentColor; } + + &.compact { + min-width: 2rem; + min-height: 2rem; + } `; type ControlProps = { type?: TimerTypes["timerType"] }; @@ -51,6 +56,11 @@ export const StyledControl = styled.div` (p.type === SPECIAL_BREAK && "var(--color-bg-ripple-yellow)") || "var(--color-bg-ripple-primary)"}; } + + &.compact { + height: 100%; + padding: 0; + } `; type SessionProps = { timerType?: TimerTypes["timerType"] }; diff --git a/app/renderer/src/styles/routes/timer/counter.ts b/app/renderer/src/styles/routes/timer/counter.ts index 8c7beec4..974f7bc6 100644 --- a/app/renderer/src/styles/routes/timer/counter.ts +++ b/app/renderer/src/styles/routes/timer/counter.ts @@ -1,5 +1,5 @@ import styled, { css } from "styled-components/macro"; -import { SHORT_BREAK, LONG_BREAK, SPECIAL_BREAK } from "store"; +import { LONG_BREAK, SHORT_BREAK, SPECIAL_BREAK } from "store"; import { ProgressSVG } from "assets/icons"; export type ProgressProps = { offset: number; animate: "true" | "false" }; @@ -86,6 +86,15 @@ export const StyledCounterContainer = styled.div` border-radius: 50%; border: 6px solid var(--color-border-primary); } + + &.compact { + padding: 16px; + display: flex; + flex: 0; + &::before { + display: none; + } + } `; export const StyledCounterType = styled.div` @@ -118,6 +127,13 @@ export const StyledCounterTimer = styled.h3` & > span:first-of-type { justify-self: end; } + + &.compact { + font-size: 2.5rem; + width: unset; + display: flex; + gap: 0.25rem; + } `; export const StyledCounterLabel = styled.p` diff --git a/app/renderer/src/styles/routes/timer/timer.ts b/app/renderer/src/styles/routes/timer/timer.ts index 802f0f32..7f32f072 100644 --- a/app/renderer/src/styles/routes/timer/timer.ts +++ b/app/renderer/src/styles/routes/timer/timer.ts @@ -11,6 +11,12 @@ export const StyledTimer = styled.main` grid-template-rows: 1fr; align-items: end; + &.compact { + padding-top: 0; + display: flex; + align-items: center; + } + animation: enterFromBottom 160ms ease; @keyframes enterFromBottom { diff --git a/app/shareables/src/index.ts b/app/shareables/src/index.ts index 2730a309..423b8ef6 100644 --- a/app/shareables/src/index.ts +++ b/app/shareables/src/index.ts @@ -1,5 +1,6 @@ export const SET_ALWAYS_ON_TOP = "SET_ALWAYS_ON_TOP"; export const SET_FULLSCREEN_BREAK = "SET_FULLSCREEN_BREAK"; +export const SET_COMPACT_MODE = "SET_COMPACT_MODE"; export const SET_NATIVE_TITLEBAR = "SET_NATIVE_TITLEBAR"; export const TRAY_ICON_UPDATE = "TRAY_ICON_UPDATE"; export const SET_UI_THEME = "SET_UI_THEME"; @@ -10,6 +11,7 @@ export const SET_SHOW = "SET_SHOW"; export const TO_MAIN: string[] = [ SET_ALWAYS_ON_TOP, SET_FULLSCREEN_BREAK, + SET_COMPACT_MODE, SET_NATIVE_TITLEBAR, TRAY_ICON_UPDATE, SET_UI_THEME, diff --git a/package.json b/package.json index 3f4b7bd2..7924b779 100644 --- a/package.json +++ b/package.json @@ -10,7 +10,7 @@ "sync": "lerna bootstrap", "dev:renderer": "lerna run dev:renderer --stream", "dev:main": "lerna run dev:main --stream", - "dev:app": "lerna run start --parallel --stream --ignore '@pomatez/website'", + "dev:app": "cross-env ELECTRON_ENABLE_LOGGING=1 lerna run start --parallel --stream --ignore '@pomatez/website'", "prebuild": "lerna run prepare --stream --ignore '@pomatez/website'", "build": "lerna run build --parallel --stream --ignore '@pomatez/website'", "build:mwl": "yarn build && lerna run build:mwl --stream", @@ -48,6 +48,7 @@ "cz-conventional-changelog": "^1.0.0", "husky": "^4.2.5", "lerna": "^3.22.1", + "cross-env": "^7.0.3", "lint-staged": "^10.2.13", "prettier": "^2.0.5", "rimraf": "^3.0.2", diff --git a/yarn.lock b/yarn.lock index 8cdac7bb..51858dbc 100644 --- a/yarn.lock +++ b/yarn.lock @@ -8098,6 +8098,13 @@ create-react-context@0.3.0: gud "^1.0.0" warning "^4.0.3" +cross-env@^7.0.3: + version "7.0.3" + resolved "https://registry.yarnpkg.com/cross-env/-/cross-env-7.0.3.tgz#865264b29677dc015ba8418918965dd232fc54cf" + integrity sha512-+/HKd6EgcQCJGh2PSjZuUitQBQynKor4wrFbRg4DtAgS1aWO+gU52xpH7M9ScGgXSYmAVS9bIJ8EzuaGw0oNAw== + dependencies: + cross-spawn "^7.0.1" + cross-fetch@2.2.2: version "2.2.2" resolved "https://registry.yarnpkg.com/cross-fetch/-/cross-fetch-2.2.2.tgz#a47ff4f7fc712daba8f6a695a11c948440d45723" @@ -8135,7 +8142,7 @@ cross-spawn@^6.0.0, cross-spawn@^6.0.5: shebang-command "^1.2.0" which "^1.2.9" -cross-spawn@^7.0.0: +cross-spawn@^7.0.0, cross-spawn@^7.0.1: version "7.0.3" resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.3.tgz#f73a85b9d5d41d045551c177e2882d4ac85728a6" integrity sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==