From 29fe1b0cf83cf2f238e0a61129a3f31d24e61afc Mon Sep 17 00:00:00 2001 From: Cezar Augusto Date: Mon, 19 Feb 2018 20:40:59 -0300 Subject: [PATCH 01/16] add brave-ui as dep, add sync v2 images --- .../brave/img/sync/add_device_titleicon.svg | 28 +++++++ .../sync/circle_of_sync_landing_graphic.svg | 82 +++++++++++++++++++ .../brave/img/sync/device_type_computer.svg | 38 +++++++++ .../img/sync/device_type_phone-tablet.svg | 49 +++++++++++ .../img/sync/remove_device_titleicon.svg | 30 +++++++ .../brave/img/sync/synccode_titleicon.svg | 24 ++++++ package-lock.json | 63 ++++++++++++-- package.json | 1 + 8 files changed, 309 insertions(+), 6 deletions(-) create mode 100644 app/extensions/brave/img/sync/add_device_titleicon.svg create mode 100644 app/extensions/brave/img/sync/circle_of_sync_landing_graphic.svg create mode 100644 app/extensions/brave/img/sync/device_type_computer.svg create mode 100644 app/extensions/brave/img/sync/device_type_phone-tablet.svg create mode 100644 app/extensions/brave/img/sync/remove_device_titleicon.svg create mode 100644 app/extensions/brave/img/sync/synccode_titleicon.svg diff --git a/app/extensions/brave/img/sync/add_device_titleicon.svg b/app/extensions/brave/img/sync/add_device_titleicon.svg new file mode 100644 index 00000000000..ba342e34342 --- /dev/null +++ b/app/extensions/brave/img/sync/add_device_titleicon.svg @@ -0,0 +1,28 @@ + + + + Group 2 + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/app/extensions/brave/img/sync/circle_of_sync_landing_graphic.svg b/app/extensions/brave/img/sync/circle_of_sync_landing_graphic.svg new file mode 100644 index 00000000000..30cff69ede2 --- /dev/null +++ b/app/extensions/brave/img/sync/circle_of_sync_landing_graphic.svg @@ -0,0 +1,82 @@ + + + + Graphic + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/app/extensions/brave/img/sync/device_type_computer.svg b/app/extensions/brave/img/sync/device_type_computer.svg new file mode 100644 index 00000000000..346f41bb3b3 --- /dev/null +++ b/app/extensions/brave/img/sync/device_type_computer.svg @@ -0,0 +1,38 @@ + + + + Laptop Graphic + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/app/extensions/brave/img/sync/device_type_phone-tablet.svg b/app/extensions/brave/img/sync/device_type_phone-tablet.svg new file mode 100644 index 00000000000..4c45cddda6f --- /dev/null +++ b/app/extensions/brave/img/sync/device_type_phone-tablet.svg @@ -0,0 +1,49 @@ + + + + Mobile Graphic + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/app/extensions/brave/img/sync/remove_device_titleicon.svg b/app/extensions/brave/img/sync/remove_device_titleicon.svg new file mode 100644 index 00000000000..878058d05e8 --- /dev/null +++ b/app/extensions/brave/img/sync/remove_device_titleicon.svg @@ -0,0 +1,30 @@ + + + + Group 4 + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/app/extensions/brave/img/sync/synccode_titleicon.svg b/app/extensions/brave/img/sync/synccode_titleicon.svg new file mode 100644 index 00000000000..e1e0f9dd087 --- /dev/null +++ b/app/extensions/brave/img/sync/synccode_titleicon.svg @@ -0,0 +1,24 @@ + + + + Page 1 + Created with Sketch. + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 20af179b847..6900c349874 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2407,6 +2407,50 @@ } } }, + "brave-crypto": { + "version": "0.0.1", + "resolved": "https://registry.npmjs.org/brave-crypto/-/brave-crypto-0.0.1.tgz", + "integrity": "sha512-gsm2eb4npxQh8WpnnIsUoxRVEPyFdRo5NZsU0ebrd7r3Ava+N/NkGqD2ZpdHA6m3mkIhbBaoJG4gHXLREc8liw==", + "requires": { + "tweetnacl": "1.0.0" + }, + "dependencies": { + "tweetnacl": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/tweetnacl/-/tweetnacl-1.0.0.tgz", + "integrity": "sha1-cT2LgY2kIGh0C/aDhtBHnmb8ins=" + } + } + }, + "brave-ui": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/brave-ui/-/brave-ui-0.4.0.tgz", + "integrity": "sha512-Jf0LZPALuA6qjMhPXlqTTTPyVdLXsLWsY+FprqnO1vkYueCjrnSsd0k4c8RzxDLNBmjJrrg7VY0E/UN8XS3J+Q==", + "requires": { + "aphrodite": "1.2.5" + }, + "dependencies": { + "aphrodite": { + "version": "1.2.5", + "resolved": "https://registry.npmjs.org/aphrodite/-/aphrodite-1.2.5.tgz", + "integrity": "sha1-g1jDbIC7A67puXFlqqcBhiJbSYM=", + "requires": { + "asap": "2.0.6", + "inline-style-prefixer": "3.0.8", + "string-hash": "1.1.3" + } + }, + "inline-style-prefixer": { + "version": "3.0.8", + "resolved": "https://registry.npmjs.org/inline-style-prefixer/-/inline-style-prefixer-3.0.8.tgz", + "integrity": "sha1-hVG45bTVcyROZqNLBPfTIHaitTQ=", + "requires": { + "bowser": "1.7.3", + "css-in-js-utils": "2.0.0" + } + } + } + }, "brorand": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/brorand/-/brorand-1.1.0.tgz", @@ -3853,6 +3897,14 @@ "integrity": "sha1-gIrcLnnPhHOAabZGyyDsJ762KeA=", "dev": true }, + "css-in-js-utils": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/css-in-js-utils/-/css-in-js-utils-2.0.0.tgz", + "integrity": "sha512-yuWmPMD9FLi50Xf3k8W8oO3WM1eVnxEGCldCLyfusQ+CgivFk0s23yst4ooW6tfxMuSa03S6uUEga9UhX6GRrA==", + "requires": { + "hyphenate-style-name": "1.0.2" + } + }, "css-list": { "version": "0.1.3", "resolved": "https://registry.npmjs.org/css-list/-/css-list-0.1.3.tgz", @@ -12661,12 +12713,6 @@ "es6-promisify": "5.0.0" } }, - "ansi-regex": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz", - "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=", - "dev": true - }, "camelcase": { "version": "4.1.0", "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-4.1.0.tgz", @@ -17343,6 +17389,11 @@ "safe-buffer": "5.1.1" } }, + "string_decoder": { + "version": "0.10.31", + "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz", + "integrity": "sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ=" + }, "stringstream": { "version": "0.0.5", "resolved": "https://registry.npmjs.org/stringstream/-/stringstream-0.0.5.tgz", diff --git a/package.json b/package.json index a1cdf5fd64b..b3cf0833e17 100644 --- a/package.json +++ b/package.json @@ -93,6 +93,7 @@ "bat-publisher": "^2.0.15", "bignumber.js": "^4.0.4", "bloodhound-js": "brave/bloodhound", + "brave-ui": "^0.4.0", "clipboard-copy": "^1.0.0", "compare-versions": "^3.0.1", "date-fns": "^1.29.0", From a1c0d9fe7b6c687e5f3a408c32f766b4cb4fc75b Mon Sep 17 00:00:00 2001 From: Cezar Augusto Date: Thu, 22 Feb 2018 16:12:12 -0300 Subject: [PATCH 02/16] sync v2 - several UI changes user flow for sync improvements --- .../locales/en-US/preferences.properties | 30 +- .../components/common/modalOverlay.js | 31 +- .../components/preferences/syncTab.js | 843 ++++++++++++++---- app/sessionStore.js | 3 +- docs/state.md | 2 + js/about/preferences.js | 31 +- js/actions/appActions.js | 10 + js/constants/appConstants.js | 1 + js/stores/appStore.js | 3 + package-lock.json | 6 +- package.json | 2 +- 11 files changed, 736 insertions(+), 226 deletions(-) diff --git a/app/extensions/brave/locales/en-US/preferences.properties b/app/extensions/brave/locales/en-US/preferences.properties index 8d512f503a4..52176c7132d 100644 --- a/app/extensions/brave/locales/en-US/preferences.properties +++ b/app/extensions/brave/locales/en-US/preferences.properties @@ -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: diff --git a/app/renderer/components/common/modalOverlay.js b/app/renderer/components/common/modalOverlay.js index 07c4d6b625b..060bb32b22f 100644 --- a/app/renderer/components/common/modalOverlay.js +++ b/app/renderer/components/common/modalOverlay.js @@ -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 + ? : null) title = (this.props.title ?
: null) subTitle = (this.props.subTitle ?