Skip to content
This repository has been archived by the owner. It is now read-only.

sync v2 #13197

Closed
wants to merge 16 commits into from

sync v2

-
several UI changes
user flow for sync improvements
  • Loading branch information
Cezar Augusto authored and cezaraugusto committed Feb 22, 2018
commit a1c0d9fe7b6c687e5f3a408c32f766b4cb4fc75b
@@ -76,6 +76,7 @@ clearAll=Clear all
clearBrowsingDataNow=Clear Browsing Data Now…
comingSoon=Coming soon!
compactBraveryPanel=Use compact panel
computer=Computer
contentSettings=Content Settings
contributionAmount=Contribution Amount
contributionDate=Contribution Date
@@ -325,27 +326,42 @@ submitFeedback=Help Center
swipeNavigationDistance=Swipe Navigation Distance
switchToNewTabs=Switch to new tabs immediately
sync=Sync
syncAdd=I have an existing Sync code
syncAddCode=Enter a sync chain code
syncAddButton=Add
syncBetaMessage=Note: Sync for iOS and Android is still being completed and will be released soon.
syncBookmarks=Bookmarks
syncChainCode=Enter the sync chain code below
syncChainCodeDescription1=On your computer, go to:
syncChainCodeDescription2=Settings > Sync and click "Enter a sync chain code".
syncChainCodeDescription3=Then enter this code:
syncChooseDevice=Choose a device type:
syncClearData=Clear Data
syncClearProfile=Sync a new device…
syncConfirm=Confirm Sync Code
syncCreate=Set up Sync
syncData=Sync Data
syncDataMessage=Sync the following data from this device:
syncDeviceLastActive=Last active
syncDeviceLoading=Loading devices. Please wait...
syncDeviceListLoaded=Great! Your devices are now in sync
syncDeviceListLoading=Updating devices list
syncDeviceName=Device name
syncDeviceNameInput=Enter an optional name for this device:
syncDevices=Devices
syncDevicesDescription=Your synced devices are listed below. You can add additional devices now or at any time in the future.
syncDevicesInSyncChain=Devices in your sync chain:
syncEnable=Sync this device
syncEnterPassphrase=Enter your Sync code words:
syncEnterPassphrase=Go to Brave Settings > Sync > Display sync code.
syncHidePassphrase=Hide code words
syncHideQR=Hide QR code
syncHistory=Browsing history
syncNewDeviceTitle=Let's sync a new device with "{{device}}"
syncNewDevice1=Open Brave on your new device and go to Preferences > Sync > 'I have an existing synced device'.
syncNewDevice2=If it asks you to scan a QR code, click the button below and point your camera at the QR code.
syncNewDevice3=If asks you to enter code words, type in the words below.
syncNewDevice=Sync a new device…
syncNewDeviceButton=Sync a new device…
syncNoCamera=I don't have a camera
syncPhoneOrTablet=Phone/Tablet
syncQRImg.title=Brave sync QR code
syncReset=Reset Sync
syncResetButton=Reset Sync…
@@ -354,10 +370,15 @@ syncResetMessageOtherDevices=If you've synced other devices, they will continue
syncResetMessageWhat=Resetting Sync clears data stored on the Sync server and resets this device's Sync settings.
syncResetMessageWhatNot=You will keep any bookmarks, history and other browsing data currently on this device.
syncRetryButton=Try again
syncScan=Scan the code
syncWelcome1=Brave Sync allows you to sync bookmarks, tabs, history and other data privately between your Brave Browsers on your various devices.
syncWelcome2=When you start a new sync chain, a new sync code is created. You will use this same code across your devices to link them together.
syncScanDescription=On your phone or tablet, go to: Brave Settings > Sync > Scan Sync Code
syncScanCamera=Then scan this code with your device camera.
syncShowPassphrase=Show secret code words. (Do not share!)
syncShowQR=Show secret QR code. (Do not share!)
syncSiteSettings=Saved site settings
syncStart=I am new to Sync
syncStart=Start a new sync chain
syncTitle=Brave Sync
syncTitleMessage=Sync encrypted browser data between your devices securely and privately using Brave Sync.
tabCloseAction=When closing an active tab:
@@ -393,3 +414,4 @@ visits=Visits
wideURLbar=Use wide URL bar
widevine=Run Google Widevine
widevineSection=Google Widevine Support
wordCount=word count:
@@ -52,6 +52,7 @@ class ModalOverlay extends ImmutableComponent {
var close = null
var title = null
var subTitle = null
var titleImage = null

const customDialogClassesStr = this.props.customDialogClasses ? this.props.customDialogClasses : ''
const customDialogHeaderClassesStr = this.props.customDialogHeaderClasses ? this.props.customDialogHeaderClasses : ''
@@ -66,11 +67,15 @@ class ModalOverlay extends ImmutableComponent {
testId='modalCloseButton'
onClick={this.props.onHide}
/> : null)
titleImage = (this.props.titleImage
? <img className={css(styles.dialog__header__image)}
src={this.props.titleImage} /> : null)
title = (this.props.title
? <div className={cx({
[css(styles.dialog__header__title)]: true,
[customTitleClassesStr]: true
})} data-l10n-id={this.props.title}
data-l10n-args={JSON.stringify(this.props.titleArgs)}
/> : null)
subTitle = (this.props.subTitle
? <aside className={css(styles.dialog__header__subTitle)}>
@@ -88,13 +93,17 @@ class ModalOverlay extends ImmutableComponent {

return <section className={cx({
[css(styles.dialog)]: true,
[css(styles.dialog_gray)]: this.props.grayOverlay,
[customDialogClassesStr]: true
})}>

<header className={cx({
[css(styles.dialog__header)]: true,
[customDialogHeaderClassesStr]: true
})}>
[customDialogHeaderClassesStr]: true,
[css(styles.dialog__header_white)]: this.props.grayOverlay
})}
style={this.props.titleImage ? {justifyContent: 'start'} : null}>
{titleImage}
{title}
{subTitle}
{close}
@@ -106,6 +115,7 @@ class ModalOverlay extends ImmutableComponent {
})}>
<div className={cx({
[css(styles.dialog__body)]: true,
[css(styles.dialog__body_gray)]: this.props.grayOverlay,
[customDialogBodyClassesStr]: true
})}>
{this.props.content}
@@ -167,12 +177,25 @@ const styles = StyleSheet.create({
zIndex: globalStyles.zindex.zindexDialogs
},

dialog_gray: {
background: '#eee'
},

dialog__header: {
padding: `25px ${globalStyles.spacing.modalDialogPaddingHorizontal}`,
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center'
},

dialog__header_white: {
padding: '25px 50px 0px'
},

dialog__header__image: {
marginRight: '20px'
},

dialog__header__close: {
display: 'inline-block',
position: 'absolute',
@@ -221,6 +244,10 @@ const styles = StyleSheet.create({
padding: `${globalStyles.spacing.dialogInsideMargin} ${globalStyles.spacing.modalDialogPaddingHorizontal}`
},

dialog__body_gray: {
background: '#eee'
},

dialog__footer: {
padding: '20px',
paddingLeft: globalStyles.spacing.modalDialogPaddingHorizontal,
ProTip! Use n and p to navigate between commits in a pull request.
You can’t perform that action at this time.