diff --git a/package.json b/package.json index 3c9d3f222..b73cd9991 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "skye", - "version": "6.4.0", + "version": "6.4.1", "sideEffects": false, "description": "Extensible, fast and innovative web browser with Innatical UI.", "keywords": [ diff --git a/src/constants/index.ts b/src/constants/index.ts index be6a561fc..602eff5c1 100644 --- a/src/constants/index.ts +++ b/src/constants/index.ts @@ -1,3 +1,4 @@ export * from './settings'; export const EXTENSIONS_PROTOCOL = 'chrome-extension'; +export const NONMODAL_DIALOGS = ['find', 'permissions']; diff --git a/src/main/dialogs/downloads.ts b/src/main/dialogs/downloads.ts index 664eb9789..feea3976a 100644 --- a/src/main/dialogs/downloads.ts +++ b/src/main/dialogs/downloads.ts @@ -5,19 +5,19 @@ import { DIALOG_MARGIN, DIALOG_TOP, } from '~/constants/design'; -import {IDialog} from "~/main/services/dialogs-service"; +import { IDialog } from '~/main/services/dialogs-service'; export const showDownloadsDialog = async ( browserWindow: BrowserWindow, x: number, y: number, ) => { - let height = 0; + let height = 64 * 8; const dialog: IDialog = await Application.instance.dialogs.show({ name: 'downloads-dialog', browserWindow, - getBounds: () => { + getBounds: (dialog) => { const winBounds = browserWindow.getContentBounds(); const maxHeight = winBounds.height - DIALOG_TOP - 16; diff --git a/src/main/services/dialogs-service.ts b/src/main/services/dialogs-service.ts index 52ed29c33..26ade01e0 100644 --- a/src/main/services/dialogs-service.ts +++ b/src/main/services/dialogs-service.ts @@ -21,7 +21,7 @@ interface IDialogShowOptions { tabAssociation?: IDialogTabAssociation; onWindowBoundsUpdate?: (disposition: BoundsDisposition) => void; onHide?: (dialog: IDialog) => void; - getBounds: () => IRectangle; + getBounds: (dialog: IDialog) => IRectangle; } export interface IDialog { @@ -212,7 +212,7 @@ export class DialogsService { y: 0, width: 0, height: 0, - ...roundifyRectangle(getBounds()), + ...roundifyRectangle(getBounds(dialog)), ...roundifyRectangle(rect), }); }, diff --git a/src/renderer/views/app/components/App/index.tsx b/src/renderer/views/app/components/App/index.tsx index 8b93b5e89..d77e8a75b 100644 --- a/src/renderer/views/app/components/App/index.tsx +++ b/src/renderer/views/app/components/App/index.tsx @@ -16,6 +16,7 @@ import { COMPACT_TAB_HEIGHT, DEFAULT_TAB_HEIGHT, } from '~/constants/design'; +import { NONMODAL_DIALOGS } from '~/constants'; const onAppLeave = () => { store.barHideTimer = setTimeout(function () { @@ -58,7 +59,7 @@ const App = observer(() => { !!x)} + modalOpen={store.modalOpen} > diff --git a/src/renderer/views/app/components/App/style.ts b/src/renderer/views/app/components/App/style.ts index 842032458..c621ccf12 100644 --- a/src/renderer/views/app/components/App/style.ts +++ b/src/renderer/views/app/components/App/style.ts @@ -11,15 +11,15 @@ export const Line = styled.div` `; interface StyledAppProps { - dialogOpen: boolean; + modalOpen: boolean; } export const StyledApp = styled.div` display: flex; flex-flow: column; background-color: #fff; - ${({ dialogOpen }) => + ${({ modalOpen }) => css` - -webkit-app-region: ${dialogOpen ? 'no-drag' : 'drag'}; + -webkit-app-region: ${modalOpen ? 'no-drag' : 'drag'}; `} `; diff --git a/src/renderer/views/app/components/Titlebar/index.tsx b/src/renderer/views/app/components/Titlebar/index.tsx index ac0a10cf7..8109e0df8 100644 --- a/src/renderer/views/app/components/Titlebar/index.tsx +++ b/src/renderer/views/app/components/Titlebar/index.tsx @@ -24,7 +24,7 @@ export const Titlebar = observer(() => { onMouseDown={onMouseDown} isFullscreen={store.isFullscreen} color={store.tabs.selectedTab?.color} - dialogOpen={Object.values(store.dialogsVisibility).some((x) => !!x)} + modalOpen={store.modalOpen} > {store.isCompact && } diff --git a/src/renderer/views/app/components/Titlebar/style.ts b/src/renderer/views/app/components/Titlebar/style.ts index d1e56ca60..2951cb84c 100644 --- a/src/renderer/views/app/components/Titlebar/style.ts +++ b/src/renderer/views/app/components/Titlebar/style.ts @@ -7,7 +7,7 @@ import { centerIcon } from '~/renderer/mixins'; interface TitlebarProps { isFullscreen: boolean; theme: ITheme; - dialogOpen: boolean; + modalOpen: boolean; } export const StyledTitlebar = styled.div` @@ -28,13 +28,13 @@ export const StyledTitlebar = styled.div` content: ''; } - ${({ isFullscreen, theme, color, dialogOpen }) => css` + ${({ isFullscreen, theme, color, modalOpen }) => css` background-color: ${color ? color : theme['titlebar.backgroundColor']}; height: 45px; align-items: ${theme.isCompact ? 'center' : 'initial'}; &:before { - -webkit-app-region: ${isFullscreen || dialogOpen ? 'no-drag' : 'drag'}; + -webkit-app-region: ${isFullscreen || modalOpen ? 'no-drag' : 'drag'}; } `}; diff --git a/src/renderer/views/app/components/Toolbar/index.tsx b/src/renderer/views/app/components/Toolbar/index.tsx index d7c2cedec..5f7f8968b 100644 --- a/src/renderer/views/app/components/Toolbar/index.tsx +++ b/src/renderer/views/app/components/Toolbar/index.tsx @@ -50,7 +50,7 @@ export const Toolbar = observer(() => { onMouseDown={onMouseDown} isFullscreen={store.isFullscreen} color={store.tabs.selectedTab?.color} - dialogOpen={Object.values(store.dialogsVisibility).some((x) => !!x)} + modalOpen={store.modalOpen} >
diff --git a/src/renderer/views/app/components/Toolbar/style.ts b/src/renderer/views/app/components/Toolbar/style.ts index 36101fc24..5f8813cd3 100644 --- a/src/renderer/views/app/components/Toolbar/style.ts +++ b/src/renderer/views/app/components/Toolbar/style.ts @@ -8,7 +8,7 @@ export interface ToolbarProps { isFullscreen: boolean; theme: ITheme; color?: string; - dialogOpen: boolean; + modalOpen: boolean; } export const StyledToolbar = styled.div` @@ -19,14 +19,14 @@ export const StyledToolbar = styled.div` flex-flow: row; width: 100%; justify-content: center; - ${({ isFullscreen, theme, color, dialogOpen }) => css` + ${({ isFullscreen, theme, color, modalOpen }) => css` background-color: ${!!color ? color : theme['titlebar.backgroundColor']}; align-items: ${theme.isCompact ? 'center' : 'initial'}; padding-left: ${platform() === 'darwin' && !isFullscreen ? 78 : 4}px; padding-top: 10px; padding-bottom: 10px; &:before { - -webkit-app-region: ${isFullscreen || dialogOpen ? 'no-drag' : 'drag'}; + -webkit-app-region: ${isFullscreen || modalOpen ? 'no-drag' : 'drag'}; } `}; diff --git a/src/renderer/views/app/store/index.ts b/src/renderer/views/app/store/index.ts index c93b1ed9e..88e45b89b 100644 --- a/src/renderer/views/app/store/index.ts +++ b/src/renderer/views/app/store/index.ts @@ -22,6 +22,7 @@ import { IBrowserAction } from '../models'; import { NEWTAB_URL } from '~/constants/tabs'; import { IURLSegment } from '~/interfaces/urls'; import { BookmarkBarStore } from './bookmark-bar'; +import { NONMODAL_DIALOGS } from '~/constants'; export class Store { public settings = new SettingsStore(this); @@ -90,6 +91,12 @@ export class Store { // Computed + public get modalOpen() { + return Object.entries(this.dialogsVisibility) + .filter(([key]) => !NONMODAL_DIALOGS.includes(key)) + .some(([, open]) => open); + } + public get downloadProgress() { const downloading = this.downloads.filter((x) => !x.completed); @@ -193,6 +200,7 @@ export class Store { isBookmarked: observable, zoomFactor: observable, dialogsVisibility: observable, + modalOpen: computed, addressbarUrlSegments: computed, addressbarValue: computed, theme: computed,