Skip to content
This repository was archived by the owner on Dec 11, 2019. It is now read-only.

Commit f2426f1

Browse files
bscliftonbsclifton
committed
Navigation bar now is properly contained separate of the caption buttons.
This works exactly like we want. However, the modals that can be popped up are showing up inside the container. Looking at a fix for that...
1 parent 8fcf66a commit f2426f1

File tree

3 files changed

+112
-79
lines changed

3 files changed

+112
-79
lines changed

‎js/components/main.js

+65-49
Original file line numberDiff line numberDiff line change
@@ -784,57 +784,72 @@ class Main extends ImmutableComponent {
784784
: null
785785
}
786786
<div className='top'>
787-
{
788-
menubarVisible
789-
? <div className='titlebar'>
790-
<Menubar template={menubarTemplate} />
791-
<WindowCaptionButtons windowMaximized={this.props.windowState.getIn(['ui', 'isMaximized'])} />
787+
<div className='navbarCaptionButtonContainer'>
788+
<div className='navbarMenubarFlexContainer'>
789+
<div className='navbarMenubarBlockContainer'>
790+
{
791+
menubarVisible
792+
? <div className='menubarContainer'>
793+
<Menubar template={menubarTemplate} />
794+
</div>
795+
: null
796+
}
797+
<div className='navigatorWrapper'
798+
onDoubleClick={this.onDoubleClick}
799+
onDragOver={this.onDragOver}
800+
onDrop={this.onDrop}>
801+
<div className='backforward'>
802+
<LongPressButton
803+
l10nId='backButton'
804+
className='back fa fa-angle-left'
805+
disabled={!activeFrame || !activeFrame.get('canGoBack')}
806+
onClick={this.onBack}
807+
onLongPress={this.onBackLongPress}
808+
/>
809+
<LongPressButton
810+
l10nId='forwardButton'
811+
className='forward fa fa-angle-right'
812+
disabled={!activeFrame || !activeFrame.get('canGoForward')}
813+
onClick={this.onForward}
814+
onLongPress={this.onForwardLongPress}
815+
/>
816+
</div>
817+
<NavigationBar
818+
ref={(node) => { this.navBar = node }}
819+
navbar={activeFrame && activeFrame.get('navbar')}
820+
frames={this.props.windowState.get('frames')}
821+
sites={this.props.appState.get('sites')}
822+
activeFrameKey={activeFrame && activeFrame.get('key') || undefined}
823+
location={activeFrame && activeFrame.get('location') || ''}
824+
title={activeFrame && activeFrame.get('title') || ''}
825+
scriptsBlocked={activeFrame && activeFrame.getIn(['noScript', 'blocked'])}
826+
partitionNumber={activeFrame && activeFrame.get('partitionNumber') || 0}
827+
history={activeFrame && activeFrame.get('history') || emptyList}
828+
suggestionIndex={activeFrame && activeFrame.getIn(['navbar', 'urlbar', 'suggestions', 'selectedIndex']) || 0}
829+
isSecure={activeFrame && activeFrame.getIn(['security', 'isSecure'])}
830+
locationValueSuffix={activeFrame && activeFrame.getIn(['navbar', 'urlbar', 'suggestions', 'urlSuffix']) || ''}
831+
startLoadTime={activeFrame && activeFrame.get('startLoadTime') || undefined}
832+
endLoadTime={activeFrame && activeFrame.get('endLoadTime') || undefined}
833+
loading={activeFrame && activeFrame.get('loading')}
834+
mouseInTitlebar={this.props.windowState.getIn(['ui', 'mouseInTitlebar'])}
835+
searchDetail={this.props.windowState.get('searchDetail')}
836+
enableNoScript={this.enableNoScript(activeSiteSettings)}
837+
settings={this.props.appState.get('settings')}
838+
noScriptIsVisible={noScriptIsVisible}
839+
/>
840+
<div className='topLevelEndButtons'>
841+
<Button iconClass='braveMenu'
842+
l10nId='braveMenu'
843+
className={cx({
844+
navbutton: true,
845+
braveShieldsDisabled,
846+
braveShieldsDown: !braverySettings.shieldsUp
847+
})}
848+
onClick={this.onBraveMenu} />
849+
</div>
850+
</div>
792851
</div>
793-
: null
794-
}
795-
<div className='navigatorWrapper'
796-
onDoubleClick={this.onDoubleClick}
797-
onDragOver={this.onDragOver}
798-
onDrop={this.onDrop}>
799-
<div className='backforward'>
800-
<LongPressButton
801-
l10nId='backButton'
802-
className='back fa fa-angle-left'
803-
disabled={!activeFrame || !activeFrame.get('canGoBack')}
804-
onClick={this.onBack}
805-
onLongPress={this.onBackLongPress}
806-
/>
807-
<LongPressButton
808-
l10nId='forwardButton'
809-
className='forward fa fa-angle-right'
810-
disabled={!activeFrame || !activeFrame.get('canGoForward')}
811-
onClick={this.onForward}
812-
onLongPress={this.onForwardLongPress}
813-
/>
814852
</div>
815-
<NavigationBar
816-
ref={(node) => { this.navBar = node }}
817-
navbar={activeFrame && activeFrame.get('navbar')}
818-
frames={this.props.windowState.get('frames')}
819-
sites={this.props.appState.get('sites')}
820-
activeFrameKey={activeFrame && activeFrame.get('key') || undefined}
821-
location={activeFrame && activeFrame.get('location') || ''}
822-
title={activeFrame && activeFrame.get('title') || ''}
823-
scriptsBlocked={activeFrame && activeFrame.getIn(['noScript', 'blocked'])}
824-
partitionNumber={activeFrame && activeFrame.get('partitionNumber') || 0}
825-
history={activeFrame && activeFrame.get('history') || emptyList}
826-
suggestionIndex={activeFrame && activeFrame.getIn(['navbar', 'urlbar', 'suggestions', 'selectedIndex']) || 0}
827-
isSecure={activeFrame && activeFrame.getIn(['security', 'isSecure'])}
828-
locationValueSuffix={activeFrame && activeFrame.getIn(['navbar', 'urlbar', 'suggestions', 'urlSuffix']) || ''}
829-
startLoadTime={activeFrame && activeFrame.get('startLoadTime') || undefined}
830-
endLoadTime={activeFrame && activeFrame.get('endLoadTime') || undefined}
831-
loading={activeFrame && activeFrame.get('loading')}
832-
mouseInTitlebar={this.props.windowState.getIn(['ui', 'mouseInTitlebar'])}
833-
searchDetail={this.props.windowState.get('searchDetail')}
834-
enableNoScript={this.enableNoScript(activeSiteSettings)}
835-
settings={this.props.appState.get('settings')}
836-
noScriptIsVisible={noScriptIsVisible}
837-
/>
838853
{
839854
siteInfoIsVisible
840855
? <SiteInfo frameProps={activeFrame}
@@ -919,6 +934,7 @@ class Main extends ImmutableComponent {
919934
: null
920935
}
921936
</div>
937+
922938
<UpdateBar updates={this.props.appState.get('updates')} />
923939
{
924940
this.props.appState.get('notifications') && this.props.appState.get('notifications').size && activeFrame

‎less/contextMenu.less

-28
Original file line numberDiff line numberDiff line change
@@ -145,31 +145,3 @@
145145
font-size: @bookmarksFolderIconSize;
146146
}
147147
}
148-
149-
// Menubar (for use w/ slim titlebar)
150-
.titlebar {
151-
-webkit-user-select: none;
152-
-webkit-app-region: drag;
153-
height: 29px;
154-
155-
.menubar {
156-
display: inline-block;
157-
cursor: default;
158-
margin-top: 5px;
159-
margin-left: 4px;
160-
161-
.menubarItem {
162-
color: black;
163-
font: menu;
164-
font-size: 12px;
165-
-webkit-app-region: no-drag;
166-
padding: 0 10px 1px;
167-
border: 1px solid transparent;
168-
169-
&:hover {
170-
background-color: #e5f3ff;
171-
border: 1px solid #cce8ff;
172-
}
173-
}
174-
}
175-
}

‎less/navigationBar.less

+47-2
Original file line numberDiff line numberDiff line change
@@ -29,10 +29,28 @@
2929
- (@navbarBraveButtonWidth + 2 * @navbarButtonSpacing);
3030
}
3131

32+
// Style adjustments needed for slim titlebar to work properly
33+
.navbarCaptionButtonContainer {
34+
display: flex;
35+
border-bottom: 1px solid #aaaaaa;
36+
}
37+
38+
.navbarMenubarFlexContainer {
39+
display: flex;
40+
flex: 1;
41+
box-sizing: border-box;
42+
position: relative;
43+
overflow: auto;
44+
white-space: nowrap;
45+
}
46+
.navbarMenubarBlockContainer {
47+
display: block;
48+
width: 100%;
49+
}
50+
3251
// Window Caption Buttons (for use w/ slim titlebar)
3352
.windowCaptionButtons {
3453
display: inline-block;
35-
float: right;
3654
-webkit-user-select: none;
3755
-webkit-app-region: drag;
3856
height: 100%;
@@ -382,6 +400,34 @@
382400
}
383401
}
384402

403+
// Menubar (for use w/ slim titlebar)
404+
.menubarContainer {
405+
-webkit-user-select: none;
406+
-webkit-app-region: drag;
407+
height: 29px;
408+
409+
.menubar {
410+
display: inline-block;
411+
cursor: default;
412+
margin-top: 5px;
413+
margin-left: 4px;
414+
415+
.menubarItem {
416+
color: black;
417+
font: menu;
418+
font-size: 12px;
419+
-webkit-app-region: no-drag;
420+
padding: 0 10px 1px;
421+
border: 1px solid transparent;
422+
423+
&:hover {
424+
background-color: #e5f3ff;
425+
border: 1px solid #cce8ff;
426+
}
427+
}
428+
}
429+
}
430+
385431
// Here I grouped the rules to keep the layout of the top bar consistent.
386432
// The tricky part is to keep the title in `#navigator` centered when the
387433
// box on its left has different size than the one on the right.
@@ -474,7 +520,6 @@
474520
justify-content: space-between;
475521
-webkit-app-region: drag;
476522
align-items: center;
477-
border-bottom: 1px solid #aaaaaa;
478523
height: @navbarHeight;
479524
box-sizing: border-box;
480525

0 commit comments

Comments
 (0)