diff --git a/desktop-app/app/actions/browser.js b/desktop-app/app/actions/browser.js index 38e5228f..07253035 100644 --- a/desktop-app/app/actions/browser.js +++ b/desktop-app/app/actions/browser.js @@ -18,6 +18,7 @@ import { } from '../constants/pubsubEvents'; import {getBounds, getDefaultDevToolsWindowSize} from '../reducers/browser'; import {DEVTOOLS_MODES} from '../constants/previewerLayouts'; +import {normalizeZoomLevel} from '../utils/browserUtils'; export const NEW_ADDRESS = 'NEW_ADDRESS'; export const NEW_PAGE_META_FIELD = 'NEW_PAGE_META_FIELD'; @@ -225,12 +226,13 @@ export function onZoomChange(newLevel) { const { browser: {zoomLevel}, } = getState(); + const normalizedZoomLevel = normalizeZoomLevel(newLevel); - if (newLevel === zoomLevel) { + if (normalizedZoomLevel === zoomLevel) { return; } - dispatch(newZoomLevel(newLevel)); + dispatch(newZoomLevel(normalizedZoomLevel)); }; } diff --git a/desktop-app/app/components/ZoomInput/index.js b/desktop-app/app/components/ZoomInput/index.js index 87fff493..bc225e7c 100644 --- a/desktop-app/app/components/ZoomInput/index.js +++ b/desktop-app/app/components/ZoomInput/index.js @@ -16,6 +16,7 @@ import styles from './styles.module.css'; import useCommonStyles from '../useCommonStyles'; import './otherStyles.css'; import {Tooltip} from '@material-ui/core'; +import {MIN_ZOOM_LEVEL, MAX_ZOOM_LEVEL} from '../../constants'; function BrowserZoom(props) { const [showExpanded, setShowExpanded] = useState(false); @@ -51,7 +52,7 @@ function BrowserZoom(props) { } }; - const value = Math.round(props.browser.zoomLevel * 100); + const zoomLevel = props.browser.zoomLevel; return (
- + - {value}% + {Math.round(props.browser.zoomLevel * 100)}% - + + diff --git a/desktop-app/app/constants/index.js b/desktop-app/app/constants/index.js new file mode 100644 index 00000000..ccbae3d1 --- /dev/null +++ b/desktop-app/app/constants/index.js @@ -0,0 +1,16 @@ +// @flow + +/** + * Default zoom level for the application. + */ +export const DEFAULT_ZOOM_LEVEL = 0.6; + +/** + * Minimum zoom threshold for the application. + */ +export const MIN_ZOOM_LEVEL = 0.2; + +/** + * Maximum zoom threshold for the application. + */ +export const MAX_ZOOM_LEVEL = 2.0; diff --git a/desktop-app/app/containers/Root.js b/desktop-app/app/containers/Root.js index dae5c844..6c76efc8 100644 --- a/desktop-app/app/containers/Root.js +++ b/desktop-app/app/containers/Root.js @@ -28,6 +28,7 @@ import {toggleBookmarkUrl} from '../actions/bookmarks'; import pubsub from 'pubsub.js'; import {PROXY_AUTH_ERROR} from '../constants/pubsubEvents'; import useCreateTheme from '../components/useCreateTheme'; +import {DEFAULT_ZOOM_LEVEL} from '../constants'; function App() { const theme = useCreateTheme(); @@ -90,7 +91,7 @@ export default class Root extends Component { registerShortcut( {id: 'ZoomReset', title: 'Zoom Reset', accelerators: ['mod+0']}, () => { - store.dispatch(onZoomChange(0.6)); + store.dispatch(onZoomChange(DEFAULT_ZOOM_LEVEL)); }, true ); diff --git a/desktop-app/app/reducers/browser.js b/desktop-app/app/reducers/browser.js index b4093fa6..04ed7677 100644 --- a/desktop-app/app/reducers/browser.js +++ b/desktop-app/app/reducers/browser.js @@ -52,6 +52,8 @@ import { saveLastOpenedAddress, } from '../utils/navigatorUtils'; import {updateExistingUrl} from '../services/searchUrlSuggestions'; +import {normalizeZoomLevel} from '../utils/browserUtils'; +import {DEFAULT_ZOOM_LEVEL} from '../constants'; export const FILTER_FIELDS = { OS: 'OS', @@ -295,7 +297,8 @@ export default function browser( ? getLastOpenedAddress() : getHomepage(), currentPageMeta: {}, - zoomLevel: _getUserPreferences().zoomLevel || 0.6, + zoomLevel: + normalizeZoomLevel(_getUserPreferences().zoomLevel) || DEFAULT_ZOOM_LEVEL, theme: _getUserPreferences().theme, previousZoomLevel: null, scrollPosition: {x: 0, y: 0}, diff --git a/desktop-app/app/utils/browserUtils.js b/desktop-app/app/utils/browserUtils.js new file mode 100644 index 00000000..d7d458f1 --- /dev/null +++ b/desktop-app/app/utils/browserUtils.js @@ -0,0 +1,19 @@ +// @flow + +import {MAX_ZOOM_LEVEL, MIN_ZOOM_LEVEL} from '../constants'; + +/** + * Ensures that the given zoom level stays between MIN_ZOOM_LEVEL and MAX_ZOOM_LEVEL and returns it. + * @param zoomLevel The zoom level to be normalized. + */ +export function normalizeZoomLevel(zoomLevel: number): number { + if (zoomLevel < MIN_ZOOM_LEVEL) { + return MIN_ZOOM_LEVEL; + } + + if (zoomLevel > MAX_ZOOM_LEVEL) { + return MAX_ZOOM_LEVEL; + } + + return zoomLevel; +}