From 9c55f8c7177571f443e5b8eb77bef4fd61b86ffb Mon Sep 17 00:00:00 2001 From: Devin Binnie <52460000+devinbinnie@users.noreply.github.com> Date: Thu, 2 Sep 2021 14:05:54 -0400 Subject: [PATCH] [MM-36347] Force max window width of 700px (#1720) --- src/common/utils/constants.ts | 5 +++++ src/main/preload/dropdown.js | 4 ++-- src/main/views/teamDropdownView.ts | 9 +++++++++ src/main/windows/mainWindow.ts | 12 ++++-------- src/main/windows/windowManager.ts | 1 + src/renderer/css/components/TeamDropdownButton.scss | 4 ++++ src/renderer/css/dropdown.scss | 11 +++++++++++ src/renderer/dropdown.tsx | 10 ++++++++-- 8 files changed, 44 insertions(+), 12 deletions(-) diff --git a/src/common/utils/constants.ts b/src/common/utils/constants.ts index 0f7ff113..0bd96efe 100644 --- a/src/common/utils/constants.ts +++ b/src/common/utils/constants.ts @@ -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; diff --git a/src/main/preload/dropdown.js b/src/main/preload/dropdown.js index 98327b97..393dde15 100644 --- a/src/main/preload/dropdown.js +++ b/src/main/preload/dropdown.js @@ -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); }); diff --git a/src/main/views/teamDropdownView.ts b/src/main/views/teamDropdownView.ts index 44a5e780..000e6763 100644 --- a/src/main/views/teamDropdownView.ts +++ b/src/main/views/teamDropdownView.ts @@ -31,6 +31,7 @@ export default class TeamDropdownView { mentions?: Map; expired?: Map; 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, ); } diff --git a/src/main/windows/mainWindow.ts b/src/main/windows/mainWindow.ts index e5aedbeb..e52039d8 100644 --- a/src/main/windows/mainWindow.ts +++ b/src/main/windows/mainWindow.ts @@ -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, diff --git a/src/main/windows/windowManager.ts b/src/main/windows/windowManager.ts index c68f46a2..97a48812 100644 --- a/src/main/windows/windowManager.ts +++ b/src/main/windows/windowManager.ts @@ -184,6 +184,7 @@ function handleResizeMainWindow() { setBoundsFunction(); } status.viewManager.setLoadingScreenBounds(); + status.teamDropdown?.updateWindowBounds(); } export function sendToRenderer(channel: string, ...args: any[]) { diff --git a/src/renderer/css/components/TeamDropdownButton.scss b/src/renderer/css/components/TeamDropdownButton.scss index 6499cf23..9542bf30 100644 --- a/src/renderer/css/components/TeamDropdownButton.scss +++ b/src/renderer/css/components/TeamDropdownButton.scss @@ -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 { diff --git a/src/renderer/css/dropdown.scss b/src/renderer/css/dropdown.scss index d6c70da4..f3cf0b21 100644 --- a/src/renderer/css/dropdown.scss +++ b/src/renderer/css/dropdown.scss @@ -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 { diff --git a/src/renderer/dropdown.tsx b/src/renderer/dropdown.tsx index 2f03e079..bc537731 100644 --- a/src/renderer/dropdown.tsx +++ b/src/renderer/dropdown.tsx @@ -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; hasGPOTeams?: boolean; isAnyDragging: boolean; + windowBounds?: Electron.Rectangle; } function getStyle(style?: DraggingStyle | NotDraggingStyle) { @@ -66,7 +67,7 @@ class TeamDropdown extends React.PureComponent, 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, State> { unreads, mentions, expired, + windowBounds, }); } } @@ -231,6 +233,10 @@ class TeamDropdown extends React.PureComponent, 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, + }} >
{'Servers'}