[MM-41559] Dynamically size URL view to avoid overlapping bottom links (#1991)
This commit is contained in:
parent
e4394caf97
commit
94cc15168c
|
@ -104,3 +104,5 @@ export const GET_MODAL_UNCLOSEABLE = 'get-modal-uncloseable';
|
|||
export const MODAL_UNCLOSEABLE = 'modal-uncloseable';
|
||||
|
||||
export const UPDATE_PATHS = 'update-paths';
|
||||
|
||||
export const UPDATE_URL_VIEW_WIDTH = 'update-url-view-width';
|
||||
|
|
22
src/main/preload/urlView.js
Normal file
22
src/main/preload/urlView.js
Normal file
|
@ -0,0 +1,22 @@
|
|||
// Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved.
|
||||
// See LICENSE.txt for license information.
|
||||
// Copyright (c) 2015-2016 Yuya Ochiai
|
||||
|
||||
'use strict';
|
||||
|
||||
import {ipcRenderer} from 'electron';
|
||||
|
||||
import {UPDATE_URL_VIEW_WIDTH} from 'common/communication';
|
||||
|
||||
console.log('preloaded for the url view');
|
||||
|
||||
window.addEventListener('message', async (event) => {
|
||||
switch (event.data.type) {
|
||||
case UPDATE_URL_VIEW_WIDTH:
|
||||
ipcRenderer.send(UPDATE_URL_VIEW_WIDTH, event.data.data);
|
||||
break;
|
||||
default:
|
||||
console.log(`got a message: ${event}`);
|
||||
console.log(event);
|
||||
}
|
||||
});
|
|
@ -1,7 +1,7 @@
|
|||
// Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved.
|
||||
// See LICENSE.txt for license information.
|
||||
import log from 'electron-log';
|
||||
import {BrowserView, BrowserWindow, dialog, ipcMain} from 'electron';
|
||||
import {BrowserView, BrowserWindow, dialog, ipcMain, IpcMainEvent} from 'electron';
|
||||
import {BrowserViewConstructorOptions} from 'electron/main';
|
||||
|
||||
import {Tab, TeamWithTabs} from 'types/config';
|
||||
|
@ -18,6 +18,7 @@ import {
|
|||
OPEN_TAB,
|
||||
BROWSER_HISTORY_PUSH,
|
||||
UPDATE_LAST_ACTIVE,
|
||||
UPDATE_URL_VIEW_WIDTH,
|
||||
} from 'common/communication';
|
||||
import Config from 'common/config';
|
||||
import urlUtils from 'common/utils/url';
|
||||
|
@ -289,9 +290,11 @@ export class ViewManager {
|
|||
}
|
||||
if (url && url !== '') {
|
||||
const urlString = typeof url === 'string' ? url : url.toString();
|
||||
const preload = getLocalPreload('urlView.js');
|
||||
const urlView = new BrowserView({
|
||||
webPreferences: {
|
||||
nativeWindowOpen: true,
|
||||
preload,
|
||||
|
||||
// Workaround for this issue: https://github.com/electron/electron/issues/30993
|
||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||
|
@ -303,12 +306,6 @@ export class ViewManager {
|
|||
urlView.webContents.loadURL(localURL);
|
||||
this.mainWindow.addBrowserView(urlView);
|
||||
const boundaries = this.mainWindow.getBounds();
|
||||
urlView.setBounds({
|
||||
x: 0,
|
||||
y: boundaries.height - URL_VIEW_HEIGHT,
|
||||
width: boundaries.width,
|
||||
height: URL_VIEW_HEIGHT,
|
||||
});
|
||||
|
||||
const hideView = () => {
|
||||
delete this.urlViewCancel;
|
||||
|
@ -321,11 +318,23 @@ export class ViewManager {
|
|||
urlView.webContents.destroy();
|
||||
};
|
||||
|
||||
const adjustWidth = (event: IpcMainEvent, width: number) => {
|
||||
urlView.setBounds({
|
||||
x: 0,
|
||||
y: boundaries.height - URL_VIEW_HEIGHT,
|
||||
width: width + 5, // add some padding to ensure that we don't cut off the border
|
||||
height: URL_VIEW_HEIGHT,
|
||||
});
|
||||
};
|
||||
|
||||
ipcMain.on(UPDATE_URL_VIEW_WIDTH, adjustWidth);
|
||||
|
||||
const timeout = setTimeout(hideView,
|
||||
URL_VIEW_DURATION);
|
||||
|
||||
this.urlViewCancel = () => {
|
||||
clearTimeout(timeout);
|
||||
ipcMain.removeListener(UPDATE_URL_VIEW_WIDTH, adjustWidth);
|
||||
hideView();
|
||||
};
|
||||
}
|
||||
|
|
|
@ -1,12 +1,23 @@
|
|||
// Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved.
|
||||
// See LICENSE.txt for license information.
|
||||
|
||||
import React from 'react';
|
||||
import React, {useEffect} from 'react';
|
||||
|
||||
import {UPDATE_URL_VIEW_WIDTH} from 'common/communication';
|
||||
|
||||
export default function UrlDescription(props: {url: string}) {
|
||||
const urlRef = React.createRef<HTMLDivElement>();
|
||||
|
||||
useEffect(() => {
|
||||
window.postMessage({type: UPDATE_URL_VIEW_WIDTH, data: urlRef.current?.scrollWidth}, window.location.href);
|
||||
}, []);
|
||||
|
||||
if (props.url) {
|
||||
return (
|
||||
<div className='HoveringURL HoveringURL-left'>
|
||||
<div
|
||||
ref={urlRef}
|
||||
className='HoveringURL HoveringURL-left'
|
||||
>
|
||||
<p>{props.url}</p>
|
||||
</div>
|
||||
);
|
||||
|
|
|
@ -22,6 +22,7 @@ module.exports = merge(base, {
|
|||
preload: './src/main/preload/mattermost.js',
|
||||
modalPreload: './src/main/preload/modalPreload.js',
|
||||
loadingScreenPreload: './src/main/preload/loadingScreenPreload.js',
|
||||
urlView: './src/main/preload/urlView.js',
|
||||
},
|
||||
output: {
|
||||
path: path.join(__dirname, 'dist/'),
|
||||
|
|
Loading…
Reference in a new issue