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

Commit

Permalink
Merge pull request #9026 from luixxiul/aboutSafebrowsing-aphrodite
Browse files Browse the repository at this point in the history 
Fix margin around the button on about:safebrowsing & Add browserButton_subtleItem fixing regressions
  • Loading branch information
@cezaraugusto
cezaraugusto committed May 30, 2017
2 parents 033b122 + 830f76c commit e93ce87
Show file tree
Hide file tree
Showing 5 changed files with 109 additions and 29 deletions.
65 changes: 55 additions & 10 deletions app/renderer/components/common/browserButton.js
View file
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

':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
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
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
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
Original file line number Diff line number Diff line change
Expand Up @@ -67,10 +67,6 @@

&.safeBrowsing {
background-color: red;

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

0 comments on commit e93ce87

Please sign in to comment.