Dialog fixes

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": [

src/constants/index.ts

@@ -1,3 +1,4 @@
 export * from './settings';
 
 export const EXTENSIONS_PROTOCOL = 'chrome-extension';
+export const NONMODAL_DIALOGS = ['find', 'permissions'];

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;
 

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),
         });
       },

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(() => {
       <StyledApp
         onMouseOver={store.isFullscreen ? onAppEnter : undefined}
         onMouseLeave={store.isFullscreen ? onAppLeave : undefined}
-        dialogOpen={Object.values(store.dialogsVisibility).some((x) => !!x)}
+        modalOpen={store.modalOpen}
       >
         <UIStyle />
 

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<StyledAppProps>`
   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'};
     `}
 `;

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 && <NavigationButtons />}
       <Tabbar />

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<TitlebarProps>`
@@ -28,13 +28,13 @@ export const StyledTitlebar = styled.div<TitlebarProps>`
     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'};
     }
   `};
 

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}
     >
       <NavigationButtons />
       <div style={{ flex: 1 }} />

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<ToolbarProps>`
@@ -19,14 +19,14 @@ export const StyledToolbar = styled.div<ToolbarProps>`
   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'};
     }
   `};
 

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,