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