[MM-36347] Force max window width of 700px (#1720)
This commit is contained in:
parent
37c637efe9
commit
9c55f8c717
|
@ -16,3 +16,8 @@ export const BACK_BAR_HEIGHT = 36;
|
|||
export const THREE_DOT_MENU_WIDTH = 40;
|
||||
export const THREE_DOT_MENU_WIDTH_MAC = 80;
|
||||
export const MENU_SHADOW_WIDTH = 24;
|
||||
|
||||
export const DEFAULT_WINDOW_WIDTH = 1000;
|
||||
export const DEFAULT_WINDOW_HEIGHT = 700;
|
||||
export const MINIMUM_WINDOW_WIDTH = 700;
|
||||
export const MINIMUM_WINDOW_HEIGHT = 240;
|
||||
|
|
|
@ -52,6 +52,6 @@ window.addEventListener('message', async (event) => {
|
|||
}
|
||||
});
|
||||
|
||||
ipcRenderer.on(UPDATE_TEAMS_DROPDOWN, (event, teams, activeTeam, darkMode, enableServerManagement, hasGPOTeams, expired, mentions, unreads) => {
|
||||
window.postMessage({type: UPDATE_TEAMS_DROPDOWN, data: {teams, activeTeam, darkMode, enableServerManagement, hasGPOTeams, expired, mentions, unreads}}, window.location.href);
|
||||
ipcRenderer.on(UPDATE_TEAMS_DROPDOWN, (event, teams, activeTeam, darkMode, enableServerManagement, hasGPOTeams, expired, mentions, unreads, windowBounds) => {
|
||||
window.postMessage({type: UPDATE_TEAMS_DROPDOWN, data: {teams, activeTeam, darkMode, enableServerManagement, hasGPOTeams, expired, mentions, unreads, windowBounds}}, window.location.href);
|
||||
});
|
||||
|
|
|
@ -31,6 +31,7 @@ export default class TeamDropdownView {
|
|||
mentions?: Map<string, number>;
|
||||
expired?: Map<string, boolean>;
|
||||
window: BrowserWindow;
|
||||
windowBounds: Electron.Rectangle;
|
||||
|
||||
constructor(window: BrowserWindow, teams: TeamWithTabs[], darkMode: boolean, enableServerManagement: boolean) {
|
||||
this.teams = teams;
|
||||
|
@ -38,6 +39,8 @@ export default class TeamDropdownView {
|
|||
this.darkMode = darkMode;
|
||||
this.enableServerManagement = enableServerManagement;
|
||||
|
||||
this.windowBounds = this.window.getContentBounds();
|
||||
|
||||
const preload = getLocalPreload('dropdown.js');
|
||||
this.view = new BrowserView({webPreferences: {
|
||||
contextIsolation: process.env.NODE_ENV !== 'test',
|
||||
|
@ -77,6 +80,11 @@ export default class TeamDropdownView {
|
|||
this.updateDropdown();
|
||||
}
|
||||
|
||||
updateWindowBounds = () => {
|
||||
this.windowBounds = this.window.getContentBounds();
|
||||
this.updateDropdown();
|
||||
}
|
||||
|
||||
updateDropdown = () => {
|
||||
this.view.webContents.send(
|
||||
UPDATE_TEAMS_DROPDOWN,
|
||||
|
@ -88,6 +96,7 @@ export default class TeamDropdownView {
|
|||
this.expired,
|
||||
this.mentions,
|
||||
this.unreads,
|
||||
this.windowBounds,
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
@ -13,6 +13,7 @@ import {CombinedConfig} from 'types/config';
|
|||
import {SavedWindowState} from 'types/mainWindow';
|
||||
|
||||
import {SELECT_NEXT_TAB, SELECT_PREVIOUS_TAB, GET_FULL_SCREEN_STATUS} from 'common/communication';
|
||||
import {DEFAULT_WINDOW_HEIGHT, DEFAULT_WINDOW_WIDTH, MINIMUM_WINDOW_HEIGHT, MINIMUM_WINDOW_WIDTH} from 'common/utils/constants';
|
||||
|
||||
import * as Validator from '../Validator';
|
||||
import ContextMenu from '../contextMenu';
|
||||
|
@ -37,11 +38,6 @@ function isFramelessWindow() {
|
|||
}
|
||||
|
||||
function createMainWindow(config: CombinedConfig, options: {linuxAppIcon: string}) {
|
||||
const defaultWindowWidth = 1000;
|
||||
const defaultWindowHeight = 700;
|
||||
const minimumWindowWidth = 400;
|
||||
const minimumWindowHeight = 240;
|
||||
|
||||
// Create the browser window.
|
||||
const preload = getLocalPreload('mainWindow.js');
|
||||
const boundsInfoPath = path.join(app.getPath('userData'), 'bounds-info.json');
|
||||
|
@ -54,7 +50,7 @@ function createMainWindow(config: CombinedConfig, options: {linuxAppIcon: string
|
|||
}
|
||||
} catch (e) {
|
||||
// Follow Electron's defaults, except for window dimensions which targets 1024x768 screen resolution.
|
||||
savedWindowState = {width: defaultWindowWidth, height: defaultWindowHeight};
|
||||
savedWindowState = {width: DEFAULT_WINDOW_WIDTH, height: DEFAULT_WINDOW_HEIGHT};
|
||||
}
|
||||
|
||||
const {maximized: windowIsMaximized} = savedWindowState;
|
||||
|
@ -66,8 +62,8 @@ function createMainWindow(config: CombinedConfig, options: {linuxAppIcon: string
|
|||
fullscreenable: true,
|
||||
show: false, // don't start the window until it is ready and only if it isn't hidden
|
||||
paintWhenInitiallyHidden: true, // we want it to start painting to get info from the webapp
|
||||
minWidth: minimumWindowWidth,
|
||||
minHeight: minimumWindowHeight,
|
||||
minWidth: MINIMUM_WINDOW_WIDTH,
|
||||
minHeight: MINIMUM_WINDOW_HEIGHT,
|
||||
frame: !isFramelessWindow(),
|
||||
fullscreen: savedWindowState.fullscreen,
|
||||
titleBarStyle: 'hidden' as const,
|
||||
|
|
|
@ -184,6 +184,7 @@ function handleResizeMainWindow() {
|
|||
setBoundsFunction();
|
||||
}
|
||||
status.viewManager.setLoadingScreenBounds();
|
||||
status.teamDropdown?.updateWindowBounds();
|
||||
}
|
||||
|
||||
export function sendToRenderer(channel: string, ...args: any[]) {
|
||||
|
|
|
@ -6,6 +6,7 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
font-family: Open Sans;
|
||||
overflow: hidden;
|
||||
|
||||
&.disabled {
|
||||
opacity: 0.5;
|
||||
|
@ -33,6 +34,9 @@
|
|||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
margin-left: 8px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
i {
|
||||
|
|
|
@ -26,6 +26,11 @@ body {
|
|||
|
||||
.TeamDropdown__droppable {
|
||||
width: 100%;
|
||||
overflow-y: scroll;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
> button {
|
||||
border: none;
|
||||
|
@ -122,6 +127,7 @@ body {
|
|||
.TeamDropdown__draggable-handle {
|
||||
cursor: pointer !important;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
|
||||
&.dragging {
|
||||
cursor: grabbing !important;
|
||||
|
@ -136,6 +142,11 @@ body {
|
|||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
> span {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
.TeamDropdown__badge {
|
||||
|
|
|
@ -18,8 +18,8 @@ import {
|
|||
SWITCH_SERVER, UPDATE_TEAMS,
|
||||
UPDATE_TEAMS_DROPDOWN,
|
||||
} from 'common/communication';
|
||||
|
||||
import {getTabViewName} from 'common/tabs/TabView';
|
||||
import {TAB_BAR_HEIGHT, THREE_DOT_MENU_WIDTH_MAC} from 'common/utils/constants';
|
||||
|
||||
import './css/dropdown.scss';
|
||||
import './css/compass-icons.css';
|
||||
|
@ -35,6 +35,7 @@ type State = {
|
|||
expired?: Map<string, boolean>;
|
||||
hasGPOTeams?: boolean;
|
||||
isAnyDragging: boolean;
|
||||
windowBounds?: Electron.Rectangle;
|
||||
}
|
||||
|
||||
function getStyle(style?: DraggingStyle | NotDraggingStyle) {
|
||||
|
@ -66,7 +67,7 @@ class TeamDropdown extends React.PureComponent<Record<string, never>, State> {
|
|||
|
||||
handleMessageEvent = (event: MessageEvent) => {
|
||||
if (event.data.type === UPDATE_TEAMS_DROPDOWN) {
|
||||
const {teams, activeTeam, darkMode, enableServerManagement, hasGPOTeams, unreads, mentions, expired} = event.data.data;
|
||||
const {teams, activeTeam, darkMode, enableServerManagement, hasGPOTeams, unreads, mentions, expired, windowBounds} = event.data.data;
|
||||
this.setState({
|
||||
teams,
|
||||
orderedTeams: teams.concat().sort((a: TeamWithTabs, b: TeamWithTabs) => a.order - b.order),
|
||||
|
@ -77,6 +78,7 @@ class TeamDropdown extends React.PureComponent<Record<string, never>, State> {
|
|||
unreads,
|
||||
mentions,
|
||||
expired,
|
||||
windowBounds,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
@ -231,6 +233,10 @@ class TeamDropdown extends React.PureComponent<Record<string, never>, State> {
|
|||
className={classNames('TeamDropdown', {
|
||||
darkMode: this.state.darkMode,
|
||||
})}
|
||||
style={{
|
||||
maxHeight: this.state.windowBounds ? (this.state.windowBounds.height - TAB_BAR_HEIGHT - 16) : undefined,
|
||||
maxWidth: this.state.windowBounds ? (this.state.windowBounds.width - THREE_DOT_MENU_WIDTH_MAC) : undefined,
|
||||
}}
|
||||
>
|
||||
<div className='TeamDropdown__header'>
|
||||
<span>{'Servers'}</span>
|
||||
|
|
Loading…
Reference in a new issue