Merge pull request #4203 from bsclifton/titlebar-fix-caption-wrap

Fix titlebar menu + titlebar resize issues
brave · Sep 22, 2016 · a515706 · a515706
2 parents 9f7073c + d0f55d3
commit a515706
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 18 deletions.
diff --git a/app/renderer/components/windowCaptionButtons.js b/app/renderer/components/windowCaptionButtons.js
@@ -55,7 +55,7 @@ class WindowCaptionButtons extends ImmutableComponent {
   }
 
   render () {
-    return <div className={this.buttonClass + ' windowCaptionButtons'}>
+    return <div className={this.buttonClass + ' windowCaptionButtons' + (this.props.shouldAllowWindowDrag ? ' allowDragging' : '')}>
       <div className={'container ' + this.osClass}>
         <button
           className={this.buttonClass + ' captionButton minimize'}

diff --git a/js/components/main.js b/js/components/main.js
@@ -838,7 +838,8 @@ class Main extends ImmutableComponent {
       !autofillCreditCardPanelIsVisible &&
       !releaseNotesIsVisible &&
       !noScriptIsVisible &&
-      activeFrame && !activeFrame.getIn(['security', 'loginRequiredDetail'])
+      activeFrame && !activeFrame.getIn(['security', 'loginRequiredDetail']) &&
+      !customTitlebar.menubarSelectedIndex
 
     return <div id='window'
       className={cx({
@@ -868,7 +869,10 @@ class Main extends ImmutableComponent {
             <div className='navbarMenubarBlockContainer'>
               {
                 customTitlebar.menubarVisible
-                  ? <div className='menubarContainer'>
+                  ? <div className={cx({
+                    allowDragging: shouldAllowWindowDrag,
+                    menubarContainer: true
+                  })}>
                     <Menubar
                       template={customTitlebar.menubarTemplate}
                       selectedIndex={customTitlebar.menubarSelectedIndex}
@@ -939,7 +943,7 @@ class Main extends ImmutableComponent {
           </div>
           {
             customTitlebar.captionButtonsVisible
-              ? <WindowCaptionButtons windowMaximized={customTitlebar.isMaximized} />
+              ? <WindowCaptionButtons windowMaximized={customTitlebar.isMaximized} shouldAllowWindowDrag={shouldAllowWindowDrag} />
               : null
           }
         </div>

diff --git a/less/navigationBar.less b/less/navigationBar.less
@@ -56,9 +56,23 @@
     .loadTime { display: none; }
     #urlInput { max-width: 75px; }
     #titleBar { width: 100px; }
+    .menubarContainer {
+      .menubar {
+        .menubarItem {
+          padding: 0 5px 1px;
+        }
+      }
+    }
   }
   @media (max-width: @breakpointTinyWin32) {
     #urlInput { max-width: 50px; }
+    .menubarContainer {
+      .menubar {
+        .menubarItem {
+          padding: 0 3px 1px;
+        }
+      }
+    }
   }
 }
 
@@ -83,7 +97,15 @@
 // Window Caption Buttons (for use w/ slim titlebar)
 .windowCaptionButtons {
   display: inline-block;
-  -webkit-app-region: drag;
+
+  &.allowDragging {
+    -webkit-app-region: drag;
+    >* {
+      -webkit-app-region: no-drag;
+    }
+  }
+
+  white-space: nowrap;
 
   .hidden {
     display: none;
@@ -111,18 +133,18 @@
       outline: 0;
       height: 18px;
       color: #b1acac;
-      border: 1px solid #838383;
+      border: 1px solid #adadad;
       border-top: 0;
       display: inline-block;
-      background-color: #e0e0e0;
+      background-color: #f5f5f5;
       box-shadow: inset 1px 1px rgba(255, 255, 255, 0.9);
       width: 25px;
 
       &.minimize {
         width: 28px;
         border-right: 0px;
         &:hover {
-          background-color: #f5f5f5;
+          background-color: #fff;
         }
         &:active {
           background-color: #cacacb;
@@ -133,7 +155,7 @@
           width: 10px;
           height: 3px;
           border: 1px solid #838383;
-          background: #fefefe;
+          background: #fff;
           display: inline-block;
           border-radius: 1px;
         }
@@ -143,10 +165,10 @@
         border-right: 0px;
         width: 27px;
         &:hover {
-          background-color: #f5f5f5;
+          background-color: #fff;
           .widget {
             .widget2 {
-              background-color: #f5f5f5;
+              background-color: #fff;
             }
           }
         }
@@ -176,15 +198,15 @@
               height: 8px;
               top: -5px;
               left: 6px;
-              background: #fefefe;
+              background: #fff;
               border-radius: 1px;
             }
             .widget3 {
               display: inline-block;
               width: 2px;
               height: 2px;
               border: 1px solid #838383;
-              background: #fefefe;
+              background: #fff;
               position: relative;
               top: -20px;
               left: -2px;
@@ -197,7 +219,7 @@
             width: 10px;
             height: 8px;
             border: 1px solid #838383;
-            background: #fefefe;
+            background: #fff;
             position: relative;
             top: 2px;
             left: 7px;
@@ -207,7 +229,7 @@
             width: 4px;
             height: 2px;
             border: 1px solid #838383;
-            background-color: #e0e0e0;
+            background-color: #f5f5f5;
             position: relative;
             top: -5px;
             left: 10px;
@@ -269,6 +291,8 @@
           background: black;
           display: inline-block;
           vertical-align: middle;
+          position: relative;
+          left: -1px;
         }
       }
 
@@ -386,8 +410,8 @@
             display: inline-block;
             transform: rotate(315deg);
             position: relative;
-            top: -21px;
-            left: -2px;
+            top: -6px;
+            left: -16px;
           }
           .widget3 { display: none; }
         }
@@ -398,13 +422,19 @@
 
 // Menubar (for use w/ slim titlebar)
 .menubarContainer {
-  -webkit-app-region: drag;
   width: 100%;
   height: 29px;
   display: inline-block;
   margin-top: 5px;
   margin-left: 4px;
 
+  &.allowDragging {
+    -webkit-app-region: drag;
+    >* {
+      -webkit-app-region: no-drag;
+    }
+  }
+
   .menubar {
     display: inline-block;
     cursor: default;