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

Fix margin around the button on about:safebrowsing & Add browserButton_subtleItem fixing regressions #9026

Merged
merged 3 commits into from
May 30, 2017
Merged

Fix margin around the button on about:safebrowsing & Add browserButton_subtleItem fixing regressions #9026

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
906b7c1
Fix margin around the button on about:safebrowsing
May 24, 2017
e13a784
Add browserButton_subtleItem and fix regressions
May 26, 2017
830f76c
Remove wideItem from styles.js
May 29, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
65 changes: 55 additions & 10 deletions app/renderer/components/common/browserButton.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,17 +13,17 @@ class BrowserButton extends ImmutableComponent {
styles.browserButton,
this.props.primaryColor && [styles.browserButton_default, styles.browserButton_primaryColor],
this.props.secondaryColor && [styles.browserButton_default, styles.browserButton_secondaryColor],
this.props.subtleItem && [styles.browserButton_default, styles.browserButton_subtleItem],
this.props.extensionItem && styles.browserButton_extensionItem,
this.props.groupedItem && styles.browserButton_groupedItem,
this.props.notificationItem && styles.browserButton_notificationItem
// TODO: These are other button styles app-wise
// that needs to be refactored and included in this file
// .............................................
// this.props.smallItem && styles.browserButton_actionItem,
// this.props.smallItem && styles.browserButton_smallItem,
// this.props.actionItem && styles.browserButton_actionItem,
// this.props.navItem && styles.browserButton_navItem,
// this.props.panelItem && styles.browserButton_panelItem,
// this.props.subtleItem && styles.browserButton_subtleItem
]
}
render () {
Expand All @@ -46,18 +46,19 @@ class BrowserButton extends ImmutableComponent {
}
}

const buttonSize = '25px'

const styles = StyleSheet.create({
browserButton: {
margin: '0 3px',
whiteSpace: 'nowrap',
outline: 'none',
cursor: 'default',
display: 'inline-block',
lineHeight: '25px',
height: '25px',
width: '25px',
lineHeight: buttonSize,
height: buttonSize,
width: buttonSize,
fontSize: '13px',
color: globalStyles.button.default.color,
borderRadius: '2px',
textAlign: 'center',
transition: '.1s opacity, .1s background',
Expand All @@ -68,49 +69,71 @@ const styles = StyleSheet.create({
backgroundImage: 'none',
backgroundColor: globalStyles.button.default.backgroundColor,
border: 'none',

// cf: https://github.com/brave/browser-laptop/blob/548e11b1c889332fadb379237555625ad2a3c845/less/button.less#L49
color: globalStyles.button.color,

':hover': {
color: globalStyles.button.default.hoverColor
}
},

// applies for primary and white buttons
browserButton_default: {
// cf: https://github.com/brave/browser-laptop/blob/548e11b1c889332fadb379237555625ad2a3c845/less/button.less#L92
color: globalStyles.button.default.color,

position: 'relative',
boxShadow: globalStyles.button.default.boxShadow,
cursor: 'pointer',
lineHeight: 1.25,
width: 'auto',
height: 'auto',
minWidth: '78px',
fontSize: '13px',
padding: '7px 20px',
fontSize: globalStyles.spacing.defaultFontSize,

// cf: https://github.com/brave/browser-laptop/blob/548e11b1c889332fadb379237555625ad2a3c845/less/button.less#L94-L95
paddingTop: '5px',
paddingBottom: '5px',

// cf: https://github.com/brave/browser-laptop/blob/548e11b1c889332fadb379237555625ad2a3c845/less/button.less#L105-L106
paddingRight: '16px',
paddingLeft: '16px',

// cf: https://github.com/brave/browser-laptop/blob/548e11b1c889332fadb379237555625ad2a3c845/less/button.less#L98
minWidth: `calc(${globalStyles.spacing.defaultFontSize} * 6)`, // issue #6384
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nice catch


':active': {
// push the button down when active
bottom: '-1px'
}
},

browserButton_primaryColor: {
background: globalStyles.button.primary.background,
borderLeft: '2px solid transparent',
borderRight: '2px solid transparent',
borderTop: `2px solid ${globalStyles.button.primary.gradientColor1}`,
borderBottom: `2px solid ${globalStyles.button.primary.gradientColor2}`,
color: globalStyles.button.primary.color,
cursor: 'pointer',

':hover': {
border: `2px solid ${globalStyles.button.primary.borderHoverColor}`,
color: globalStyles.button.primary.hoverColor
}
},

browserButton_secondaryColor: {
background: globalStyles.button.secondary.background,
border: '1px solid white',
color: globalStyles.button.secondary.color,
cursor: 'pointer',

':hover': {
border: `1px solid ${globalStyles.button.secondary.borderHoverColor}`,
color: globalStyles.button.secondary.hoverColor
}
},

browserButton_extensionItem: {
WebkitAppRegion: 'no-drag',
backgroundSize: 'contain',
Expand All @@ -119,20 +142,42 @@ const styles = StyleSheet.create({
opacity: '0.85',
backgroundRepeat: 'no-repeat'
},

browserButton_groupedItem: {
// Legacy LESS inside ledger is too nested
// and this style won't have effect without using !important
//
// TODO: remove !important and check advancedSettings.js
// once preferences is fully refactored
marginRight: '4px !important',
marginLeft: '4px !important'
},

browserButton_notificationItem: {
fontSize: '13px',
marginRight: '10px',
padding: '2px 15px',
textTransform: 'capitalize',
width: 'auto'
},

browserButton_subtleItem: {
background: globalStyles.button.subtle.backgroundColor,

// cf: https://github.com/brave/browser-laptop/blob/548e11b1c889332fadb379237555625ad2a3c845/less/button.less#L152
fontSize: '14px',

// Adding box-shadow:none to cancel the box-shadow specified on browserButton_default
// On button.less, box-shadow is only speficied to .primaryButton and .whiteButton
// cf:
// https://github.com/brave/browser-laptop/blob/548e11b1c889332fadb379237555625ad2a3c845/less/button.less#L114
// https://github.com/brave/browser-laptop/blob/548e11b1c889332fadb379237555625ad2a3c845/less/button.less#L137
boxShadow: 'none',

// Cancel pushing down the button to make the button subtle
':active': {
bottom: 0
}
}
})

Expand Down
14 changes: 12 additions & 2 deletions app/renderer/components/styles/global.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -252,30 +252,40 @@ const globalStyles = {
animationFillMode: 'forwards'
}
},

button: {
color: '#5a5a5a',

default: {
color: '#5a5a5a',
color: '#fff',
backgroundColor: 'transparent',
hoverColor: '#000',
boxShadow: '0px 1px 5px -1px rgba(0, 0, 0, 0.5)'
},

primary: {
gradientColor1: '#FF7A1D',
gradientColor2: '#ff5000',
background: 'linear-gradient(#FF7A1D, #ff5000)',
color: '#fff',
hoverColor: '#fff',
borderHoverColor: '#fff'
},

secondary: {
gradientColor1: '#fff',
gradientColor2: '#ececec',
background: 'linear-gradient(#fff, #ececec)',
color: '#444',
hoverColor: '#000',
borderHoverColor: 'rgb(153, 153, 153)'
},

subtle: {
// cf: https://github.com/brave/browser-laptop/blob/548e11b1c889332fadb379237555625ad2a3c845/less/button.less#L151
backgroundColor: '#ccc'
}
},

braveryPanel: {
color: '#3b3b3b',

Expand Down
48 changes: 40 additions & 8 deletions js/about/safebrowsing.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,9 @@
* You can obtain one at http://mozilla.org/MPL/2.0/. */

const React = require('react')
const Button = require('../../app/renderer/components/common/button')
const BrowserButton = require('../../app/renderer/components/common/browserButton')

const {StyleSheet, css} = require('aphrodite/no-important')

require('../../less/button.less')
require('../../less/window.less')
Expand All @@ -26,18 +28,48 @@ class SafebrowsingPage extends React.Component {
<svg width='75' height='75' className='errorLogo' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'>
<path className='errorLogoInner' d='M11.4743662,97.2253545 C1.98936285,97.2253571 -1.69987039,86.6466353 1.98936288,81.2764443 C2.36018089,80.2888073 37.5445854,9.4248374 37.6406733,9.21698534 C41.524789,0.483122973 56.8650161,0.0416071437 60.7924391,9.21698534 C60.7572519,9.19524917 98.2991929,81.8687547 97.9337883,81.2642177 C101.323931,86.2404407 96.9260512,97.2253571 88.8978453,97.2253545 C88.8978453,97.2253545 11.4756386,97.2879401 11.4743662,97.2253545 Z M50.5378687,73.3388569 C47.2443918,73.3388569 44.2703808,76.046195 44.2703808,79.5061732 C44.2703808,82.9729198 47.1388056,85.6802579 50.5378687,85.6802579 C53.9369317,85.6802579 56.8040029,82.9729198 56.8040029,79.5061732 C56.8053565,76.046195 53.8313455,73.3388569 50.5378687,73.3388569 Z M50.3063913,28.5 C46.5729719,28.5 42.719076,30.2990258 43.0805057,32.9143334 L45.8826007,65.934287 L54.7315355,65.934287 L57.5322768,32.9143334 C57.8937065,30.2990258 54.0398106,28.5 50.3063913,28.5 Z' />
</svg>
<div className='safebrowsingErrorText'>
<div className={css(styles.safebrowsingErrorText__wrapper)}>
<span data-l10n-id='safebrowsingErrorText' />
</div>
<div className='buttons'>
<section>
{this.state.advanced
? <div>
<Button l10nId='safebrowsingErrorHideAdvanced' className='subtleButton' onClick={this.onAdvancedToggle.bind(this)} />
<div className='subtleText'><p data-l10n-id='safebrowsingErrorInfo' /><br /><p data-l10n-id='safebrowsingErrorBypass' /></div></div>
: <Button l10nId='safebrowsingErrorAdvanced' className='subtleButton' onClick={this.onAdvancedToggle.bind(this)} />}
</div>
? <section>
<div className='buttons'>
<BrowserButton subtleItem
l10nId='safebrowsingErrorHideAdvanced'
testId='safebrowsingErrorHideAdvanced'
onClick={this.onAdvancedToggle.bind(this)}
/>
</div>
<div className={css(styles.subtleText)}>
<p data-l10n-id='safebrowsingErrorInfo' />
<p className={css(styles.subtleText__p)} data-l10n-id='safebrowsingErrorBypass' />
</div>
</section>
: <section className='buttons'>
<BrowserButton subtleItem
l10nId='safebrowsingErrorAdvanced'
testId='safebrowsingErrorAdvanced'
onClick={this.onAdvancedToggle.bind(this)}
/>
</section>
}
</section>
</div>
}
}

const styles = StyleSheet.create({
safebrowsingErrorText__wrapper: {
marginBottom: '1rem'
},

subtleText: {
marginTop: '1rem'
},
subtleText__p: {
marginTop: '1rem'
}
})

module.exports = <SafebrowsingPage />
7 changes: 2 additions & 5 deletions js/about/styles.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -289,20 +289,17 @@ class AboutStyle extends ImmutableComponent {
onClick={'{this.onRemoveBookmark}'} />
</Code></Pre>

<button data-l10n-id='subtleButton' className='browserButton subtleButton' onClick={this.onRemoveBookmark} />
<BrowserButton subtleItem l10nId='subtleButton' onClick={this.onRemoveBookmark} />
<Pre><Code>
&lt;button data-l10n-id='cancel' className='browserButton subtleButton'{'\n'}
onClick={'{this.onRemoveBookmark}'} />
&lt;BrowserButton subtleItem l10nId='cancel' onClick={'{this.onRemoveBookmark}'} />
</Code></Pre>

<BrowserButton primaryColor groupedItem l10nId='primaryButton' onClick={this.onRemoveBookmark} />
<BrowserButton secondaryColor groupedItem l10nId='whiteButton' onClick={this.onRemoveBookmark} />
<BrowserButton secondaryColor groupedItem l10nId='wideButton' onClick={this.onRemoveBookmark} />
<BrowserButton primaryColor groupedItem l10nId='primaryButton' onClick={this.onRemoveBookmark} />
<Pre><Code>
&lt;BrowserButton primaryColor groupedItem l10nId='cancel' onClick={'{this.onRemoveBookmark}'} />{'\n'}
&lt;BrowserButton secondaryColor groupedItem l10nId='cancel' onClick={'{this.onRemoveBookmark}'} />{'\n'}
&lt;BrowserButton secondaryColor groupedItem wideItem l10nId='cancel'{'\n'} onClick={'{this.onRemoveBookmark}'} />{'\n'}
&lt;BrowserButton primaryColor groupedItem l10nId='cancel' onClick={'{this.onRemoveBookmark}'} />
</Code></Pre>

Expand Down
4 changes: 0 additions & 4 deletions less/about/error.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,10 +67,6 @@

&.safeBrowsing {
background-color: red;

.safebrowsingErrorText {
padding-bottom: 2rem;
}
}
}
}