[MM-60605] Fix the Download button being hidden on Windows/Linux (#3148)

* [MM-60605] Fix missing downloads/developer mode icon hidden on Linux and Windows * Disable for mac * Fix lint * Fix misalignment on Windows * "fix" linux * Return to inline version, ignore Linux
mattermost · Sep 23, 2024 · 3b179c7 · 3b179c7
1 parent b4eeabb
commit 3b179c7
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 64 deletions.
diff --git a/src/renderer/components/MainPage.tsx b/src/renderer/components/MainPage.tsx
@@ -483,16 +483,17 @@ class MainPage extends React.PureComponent<Props, State> {
                         developerMode={this.state.developerMode}
                     />
                     {downloadsDropdownButton}
-                    {window.process.platform !== 'darwin' && this.state.fullScreen &&
-                        <span className='title-bar-btns'>
-                            <div
-                                className='button full-screen-button'
-                                onClick={this.handleExitFullScreen}
-                            >
-                                <i className='icon icon-arrow-collapse'/>
-                            </div>
-                        </span>
-                    }
+                    {window.process.platform !== 'darwin' && this.state.fullScreen && (
+                        <div
+                            className={`button full-screen-button${this.props.darkMode ? ' darkMode' : ''}`}
+                            onClick={this.handleExitFullScreen}
+                        >
+                            <i className='icon icon-arrow-collapse'/>
+                        </div>
+                    )}
+                    {window.process.platform !== 'darwin' && !this.state.fullScreen && (
+                        <span style={{width: `${window.innerWidth - (window.navigator.windowControlsOverlay?.getTitlebarAreaRect().width ?? 0)}px`}}/>
+                    )}
                 </div>
             </Row>
         );

diff --git a/src/renderer/css/index.css b/src/renderer/css/index.css
@@ -113,10 +113,6 @@ body {
   color: rgba(243,243,243,0.7);
 }
 
-.topBar.darkMode .title-bar-btns {
-  color: rgba(243,243,243,0.7);
-}
-
 .topBar .app-title {
   position: absolute;
   top: 0;
@@ -139,58 +135,43 @@ body {
   color: rgba(221,221,221,0.64);
 }
 
-.topBar .title-bar-btns {
-  position: relative;
-  line-height: 40px;
-  height: 40px;
-  z-index: 9;
-  color: rgba(61,60,64,0.7);
-  -webkit-app-region: no-drag;
-  display: grid;
-  grid-template-columns: repeat(3, 46px);
-}
-
-.topBar .title-bar-btns>.button {
-  grid-row: 1 / span 1;
+.full-screen-button {
+  align-items: center;
+  background: transparent;
+  border-radius: 4px;
+  border: none;
+  cursor: pointer;
   display: flex;
+  flex-direction: column;
   justify-content: center;
-  align-items: center;
-  width: 100%;
-  height: 100%;
-  user-select: none;
-}
-
-.topBar.darkMode .title-bar-btns>.button:hover {
-  background: rgba(255,255,255,0.1);
-}
-
-.topBar.darkMode .title-bar-btns>.button:active {
-  background: rgba(255,255,255,0.2);
-}
-
-.topBar .title-bar-btns>.button:hover {
-  background: rgba(0,0,0,0.1);
-}
-
-.topBar .title-bar-btns>.button:active {
-  background: rgba(0,0,0,0.2);
-}
-
-.topBar .title-bar-btns>.full-screen-button {
-  font-size: 18px;
-}
-
-.topBar .title-bar-btns img {
-  opacity: 0.7;
-}
-
-.topBar.darkMode .title-bar-btns img {
-  filter: invert(100%);
-  -webkit-filter: invert(100%);
-}
-
-.topBar .title-bar-btns>.close-button, .topBar .title-bar-btns>.full-screen-button {
-  grid-column: 3;
+  margin: 4px;
+  position: relative;
+  width: 32px;
+
+  i {
+      color: rgba(63, 67, 80, 0.56);
+      cursor: pointer;
+      font-size: 21px;
+      line-height: 21px;
+  }
+
+  &:hover, &:focus {
+      i {
+          color: rgba(63, 67, 80, 0.78);
+      }
+  }
+
+  &.darkMode {
+      i {
+          color: rgba(221, 223, 228, 0.56);
+      }
+
+      &:hover, &:focus {
+          i {
+              color: rgba(221, 223, 228, 0.78);
+          }
+      }
+  }
 }
 
 .topBar .overlay-gradient {

diff --git a/src/types/window.ts b/src/types/window.ts
@@ -155,4 +155,10 @@ declare global {
             };
         };
     }
+
+    interface Navigator {
+        windowControlsOverlay?: {
+            getTitlebarAreaRect: () => DOMRect;
+        };
+    }
 }