Skip to content

Commit

Permalink
update spec of sync enabled view
Browse files Browse the repository at this point in the history 
fix brave/brave-browser#2574
  • Loading branch information
@cezaraugusto
cezaraugusto committed Jan 2, 2019
1 parent c0e3777 commit cbbf95b
Show file tree
Hide file tree
Showing 3 changed files with 129 additions and 98 deletions.
4 changes: 3 additions & 1 deletion browser/ui/webui/brave_webui_source.cc
View file
Original file line number Diff line number Diff line change
Expand Up @@ -454,7 +454,9 @@ void CustomizeWebUIHTMLSource(const std::string &name, content::WebUIDataSource*
{ "addedOn", IDS_BRAVE_SYNC_ENABLED_TABLE_ADDED_ON_TITLE },
{ "addDevice", IDS_BRAVE_SYNC_ENABLED_ADD_DEVICE_BUTTON },
{ "viewSyncCode", IDS_BRAVE_SYNC_ENABLED_VIEW_CODE_BUTTON },
{ "dataToSync", IDS_BRAVE_SYNC_ENABLED_DATA_TITLE },
{ "settingsTitle", IDS_BRAVE_SYNC_ENABLED_SETTINGS_TITLE },
{ "settingsDescription", IDS_BRAVE_SYNC_ENABLED_SETTINGS_DESCRIPTION },
{ "settings", IDS_BRAVE_SYNC_ENABLED_TABLE_SETTINGS },
{ "bookmarks", IDS_BRAVE_SYNC_ENABLED_BOOKMARKS_LABEL },
{ "savedSiteSettings", IDS_BRAVE_SYNC_ENABLED_SITE_SETTINGS_LABEL },
{ "browsingHistory", IDS_BRAVE_SYNC_ENABLED_HISTORY_LABEL },
Expand Down
211 changes: 119 additions & 92 deletions components/brave_sync/ui/components/enabledContent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,22 +6,25 @@ import * as React from 'react'

// Components
import { Button, AlertBox } from 'brave-ui'
import { CloseCircleIcon } from 'brave-ui/components/icons'
import Table, { Cell, Row } from 'brave-ui/components/dataTables/table'
import { Toggle } from 'brave-ui/features/shields'

// Feature-specific components
import {
Main,
Title,
SettingsToggleGrid,
SwitchLabel,
Paragraph,
SectionBlock,
SubTitle,
TableRowDevice,
TableRowRemove,
TableRowRemoveButton,
TableRowToggleButton,
TableGrid,
TableButtonGrid
TableButtonGrid,
EnabledContent,
SyncCard
} from 'brave-ui/features/sync'

// Modals
Expand Down Expand Up @@ -60,7 +63,7 @@ export default class SyncEnabledContent extends React.PureComponent<Props, State
}
}

getRows = (devices?: any): Row[] | undefined => {
getDevicesRows = (devices?: any): Row[] | undefined => {
if (!devices) {
return
}
Expand All @@ -81,7 +84,7 @@ export default class SyncEnabledContent extends React.PureComponent<Props, State
data-name={device.name}
onClick={this.onClickRemoveDeviceButton}
>
&times;
<CloseCircleIcon />
</TableRowRemoveButton>
)
}
Expand All @@ -91,14 +94,41 @@ export default class SyncEnabledContent extends React.PureComponent<Props, State
})
}

get header (): Cell[] {
get devicesHeader (): Cell[] {
return [
{ content: <TableRowDevice>{getLocale('deviceName')}</TableRowDevice> },
{ content: getLocale('addedOn') },
{ content: <TableRowRemove>{getLocale('remove')}</TableRowRemove> }
]
}

get settingsHeader (): Cell[] {
return [
{ content: <TableRowDevice>{getLocale('settings')}</TableRowDevice> },
{ content: '' }
]
}

get settingsRows (): Row[] {
return [
{
content: [
{ content: getLocale('bookmarks') },
{ content: (
<TableRowToggleButton>
<Toggle
id='bookmarks'
size='large'
checked={this.props.syncData.syncBookmarks}
onChange={this.onSyncBookmarks}
/>
</TableRowToggleButton>
) }
]
}
]
}

onClickRemoveDeviceButton = (event: React.MouseEvent<HTMLButtonElement>) => {
if (!event || !event.currentTarget || !event.currentTarget.dataset) {
return
Expand Down Expand Up @@ -147,98 +177,95 @@ export default class SyncEnabledContent extends React.PureComponent<Props, State
}

return (
<Main>
{
syncData.error === 'ERR_SYNC_NO_INTERNET'
? <AlertBox okString={getLocale('ok')} onClickOk={this.onUserNoticedError}>
<Title>{getLocale('errorNoInternetTitle')}</Title>
<SubTitle>{getLocale('errorNoInternetDescription')}</SubTitle>
</AlertBox>
: null
}
{
syncData.error === 'ERR_SYNC_INIT_FAILED'
? <AlertBox okString={getLocale('ok')} onClickOk={this.onUserNoticedError}>
<Title>{getLocale('errorSyncInitFailedTitle')}</Title>
<SubTitle>{getLocale('errorSyncInitFailedDescription')}</SubTitle>
</AlertBox>
: null
}
{
removeDevice
? (
<RemoveDeviceModal
deviceName={deviceToRemoveName}
deviceId={Number(deviceToRemoveId)}
actions={actions}
onClose={this.onClickRemoveDeviceButton}
/>
)
: null
}
{
viewSyncCode
? <ViewSyncCodeModal syncData={syncData} actions={actions} onClose={this.onClickViewSyncCodeButton} />
: null
}
{
addDevice
? <DeviceTypeModal syncData={syncData} actions={actions} onClose={this.onClickAddDeviceButton} />
<EnabledContent>
<Main>
{
syncData.error === 'ERR_SYNC_NO_INTERNET'
? <AlertBox okString={getLocale('ok')} onClickOk={this.onUserNoticedError}>
<Title>{getLocale('errorNoInternetTitle')}</Title>
<SubTitle>{getLocale('errorNoInternetDescription')}</SubTitle>
</AlertBox>
: null
}
{
resetSync
? <ResetSyncModal syncData={syncData} actions={actions} onClose={this.onClickResetSyncButton} />
}
{
syncData.error === 'ERR_SYNC_INIT_FAILED'
? <AlertBox okString={getLocale('ok')} onClickOk={this.onUserNoticedError}>
<Title>{getLocale('errorSyncInitFailedTitle')}</Title>
<SubTitle>{getLocale('errorSyncInitFailedDescription')}</SubTitle>
</AlertBox>
: null
}
<Title level={2}>{getLocale('braveSync')}</Title>
<SectionBlock>
<SubTitle level={2}>{getLocale('syncChainDevices')}</SubTitle>
<TableGrid>
<Table header={this.header} rows={this.getRows(syncData.devices)}>
Device list is empty
</Table>
<TableButtonGrid>
<Button
level='secondary'
type='accent'
size='medium'
text={getLocale('addDevice')}
onClick={this.onClickAddDeviceButton}
/>
}
{
removeDevice
? (
<RemoveDeviceModal
deviceName={deviceToRemoveName}
deviceId={Number(deviceToRemoveId)}
actions={actions}
onClose={this.onClickRemoveDeviceButton}
/>
)
: null
}
{
viewSyncCode
? <ViewSyncCodeModal syncData={syncData} actions={actions} onClose={this.onClickViewSyncCodeButton} />
: null
}
{
addDevice
? <DeviceTypeModal syncData={syncData} actions={actions} onClose={this.onClickAddDeviceButton} />
: null
}
{
resetSync
? <ResetSyncModal syncData={syncData} actions={actions} onClose={this.onClickResetSyncButton} />
: null
}
<SyncCard>
<Title level={2}>{getLocale('braveSync')}</Title>
<Paragraph>{getLocale('syncChainDevices')}</Paragraph>
<SectionBlock>
<TableGrid isDeviceTable={true}>
<Table header={this.devicesHeader} rows={this.getDevicesRows(syncData.devices)}>
Device list is empty
</Table>
<TableButtonGrid>
<br />
<Button
level='secondary'
type='accent'
size='medium'
text={getLocale('viewSyncCode')}
onClick={this.onClickViewSyncCodeButton}
/>
<Button
level='primary'
type='accent'
size='medium'
text={getLocale('addDevice')}
onClick={this.onClickAddDeviceButton}
/>
</TableButtonGrid>
</TableGrid>
</SectionBlock>
<Title level={2}>{getLocale('settingsTitle')}</Title>
<Paragraph>{getLocale('settingsDescription')}</Paragraph>
<SectionBlock>
<Table header={this.settingsHeader} rows={this.settingsRows} />
</SectionBlock>
<SectionBlock>
<Button
level='secondary'
level='primary'
type='accent'
size='medium'
text={getLocale('viewSyncCode')}
onClick={this.onClickViewSyncCodeButton}
text={getLocale('leaveSyncChain')}
onClick={this.onClickResetSyncButton}
/>
</TableButtonGrid>
</TableGrid>
</SectionBlock>
<SectionBlock>
<SubTitle level={2}>{getLocale('dataToSync')} {syncData.thisDeviceName}</SubTitle>
<SettingsToggleGrid>
<Toggle
id='bookmarks'
checked={syncData.syncBookmarks}
onChange={this.onSyncBookmarks}
/>
<SwitchLabel htmlFor='bookmarks'>
{getLocale('bookmarks')}
</SwitchLabel>
</SettingsToggleGrid>
</SectionBlock>
<SectionBlock>
<Button
level='primary'
type='accent'
size='medium'
text={getLocale('leaveSyncChain')}
onClick={this.onClickResetSyncButton}
/>
</SectionBlock>
</Main>
</SectionBlock>
</SyncCard>
</Main>
</EnabledContent>
)
}
}
12 changes: 7 additions & 5 deletions components/resources/brave_components_strings.grd
View file
Original file line number Diff line number Diff line change
Expand Up @@ -457,13 +457,15 @@
<message name="IDS_BRAVE_SYNC_SHARED_FROM_THIS_CHAIN_PARTIAL" desc="The Sync partial phrase included in `remove X from this sync chain` where X is the user's device name">from this sync chain</message>
<!-- WebUI brave sync resources: Enabled Content -->
<message name="IDS_BRAVE_SYNC_ENABLED_BRAVE_TITLE" desc="The Brae Sync title">Brave Sync</message>
<message name="IDS_BRAVE_SYNC_ENABLED_DEVICES_CHAIN_TITLE" desc="The Sync title for the table of devices synced">Devices in your sync chain</message>
<message name="IDS_BRAVE_SYNC_ENABLED_DEVICES_CHAIN_TITLE" desc="The Sync title for the table of devices synced">The device list below includes all devices in your sync chain. Each device can be managed from any other device.</message>
<message name="IDS_BRAVE_SYNC_ENABLED_TABLE_DEVICE_NAME_TITLE" desc="The Sync table title for the device column">device name</message>
<message name="IDS_BRAVE_SYNC_ENABLED_TABLE_THIS_DEVICE_TEXT" desc="The Sync table title for the device column">(This Device)</message>
<message name="IDS_BRAVE_SYNC_ENABLED_TABLE_ADDED_ON_TITLE" desc="The Sync table title indicating when a device was added to the chain">added on</message>
<message name="IDS_BRAVE_SYNC_ENABLED_ADD_DEVICE_BUTTON" desc="The Sync button `add device` for adding a new device to the sync chain. triggers a modal with device options">add device</message>
<message name="IDS_BRAVE_SYNC_ENABLED_VIEW_CODE_BUTTON" desc="The Sync button `view sync code` for viewing the passphrase and qr code needed to add a new device. triggers a modal with sync code">view QR code and code words</message>
<message name="IDS_BRAVE_SYNC_ENABLED_DATA_TITLE" desc="The Sync title that shows the options for data syncing">Data to sync from</message>
<message name="IDS_BRAVE_SYNC_ENABLED_TABLE_ADDED_ON_TITLE" desc="The Sync table title indicating when a device was added to the chain">Date Added</message>
<message name="IDS_BRAVE_SYNC_ENABLED_ADD_DEVICE_BUTTON" desc="The Sync button `add device` for adding a new device to the sync chain. triggers a modal with device options">Add New Device</message>
<message name="IDS_BRAVE_SYNC_ENABLED_VIEW_CODE_BUTTON" desc="The Sync button `view sync code` for viewing the passphrase and qr code needed to add a new device. triggers a modal with sync code">View Sync Code</message>
<message name="IDS_BRAVE_SYNC_ENABLED_SETTINGS_TITLE" desc="The Sync title that shows the options for data syncing">Brave Sync Settings</message>
<message name="IDS_BRAVE_SYNC_ENABLED_SETTINGS_DESCRIPTION" desc="The Sync description that shows the options for data syncing">Manage what information you would like to sync between devices. These settings only effect this device.</message>
<message name="IDS_BRAVE_SYNC_ENABLED_TABLE_SETTINGS" desc="The Sync description that shows the options for data syncing">Settings</message>
<message name="IDS_BRAVE_SYNC_ENABLED_BOOKMARKS_LABEL" desc="The Sync label for the `bookmarks` toggle">Bookmarks</message>
<message name="IDS_BRAVE_SYNC_ENABLED_SITE_SETTINGS_LABEL" desc="The Sync label for the `saved site settings` toggle">Saved Site Settings</message>
<message name="IDS_BRAVE_SYNC_ENABLED_HISTORY_LABEL" desc="The Sync label for the `browsing history` toggle">Browsing History</message>
Expand Down

0 comments on commit cbbf95b

Please sign in to comment.