Skip to content

Commit

Permalink
Use cobble theming in the watches tab
Browse files Browse the repository at this point in the history
  • Loading branch information
@hellcp
hellcp committed May 30, 2021
1 parent 0dec08c commit 1fc53c0
Showing 1 changed file with 46 additions and 70 deletions.
116 changes: 46 additions & 70 deletions lib/ui/home/tabs/watches_tab.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,19 @@ import 'package:cobble/infrastructure/datasources/paired_storage.dart';
import 'package:cobble/infrastructure/datasources/preferences.dart';
import 'package:cobble/infrastructure/pigeons/pigeons.g.dart';
import 'package:cobble/localization/localization.dart';
import 'package:cobble/ui/common/components/cobble_button.dart';
import 'package:cobble/ui/common/components/cobble_divider.dart';
import 'package:cobble/ui/common/components/cobble_fab.dart';
import 'package:cobble/ui/common/components/cobble_sheet.dart';
import 'package:cobble/ui/common/components/cobble_tile.dart';
import 'package:cobble/ui/common/icons/watch_icon.dart';
import 'package:cobble/ui/common/icons/comp_icon.dart';
import 'package:cobble/ui/common/icons/fonts/rebble_icons.dart';
import 'package:cobble/ui/router/cobble_navigator.dart';
import 'package:cobble/ui/router/cobble_scaffold.dart';
import 'package:cobble/ui/router/cobble_screen.dart';
import 'package:cobble/ui/setup/pair_page.dart';
import 'package:cobble/ui/theme/with_cobble_theme.dart';
import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
Expand All @@ -20,8 +28,7 @@ import '../../common/icons/fonts/rebble_icons.dart';

class MyWatchesTab extends HookWidget implements CobbleScreen {
final Color _disconnectedColor = Color.fromRGBO(255, 255, 255, 0.5);
final Color _connectedColor = Color.fromARGB(255, 0, 255, 170);
final Color _connectedBrColor = Color.fromARGB(255, 0, 169, 130);
final Color _connectedColor = Color.fromARGB(255, 0, 169, 130);

void getCurrentWatchStatus() {}
final UiConnectionControl uiConnectionControl = UiConnectionControl();
Expand Down Expand Up @@ -83,16 +90,14 @@ class MyWatchesTab extends HookWidget implements CobbleScreen {

Color _getBrStatusColor(PebbleScanDevice device) {
if (connectionState.currentWatchAddress == device.address)
return _connectedBrColor;
return _connectedColor;
else
return _disconnectedColor;
}

Color _getStatusColor(PebbleScanDevice device) {
if (connectionState.currentWatchAddress == device.address)
return _connectedColor;
else
return _disconnectedColor;
// In the future this will return green for firmware update status
return context.scheme!.muted;
}

void _onDisconnectPressed(bool inSettings) {
Expand Down Expand Up @@ -138,16 +143,10 @@ class MyWatchesTab extends HookWidget implements CobbleScreen {
PebbleScanDevice device =
allWatchesList.firstWhere((e) => e.address == address);

showModalBottomSheet(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.vertical(top: Radius.circular(15.0)),
),
CobbleSheet.showModal(
context: context,
isScrollControlled: true,
builder: (context) {
return Container(
//Todo:use theme
color: Color.fromARGB(1, 65, 65, 65),
child: Wrap(
children: <Widget>[
Container(
Expand Down Expand Up @@ -181,49 +180,35 @@ class MyWatchesTab extends HookWidget implements CobbleScreen {
),
Expanded(child: Container(width: 0.0, height: 0.0)),
]),
margin: EdgeInsets.fromLTRB(16, 16, 16, 0),
),
const Divider(
color: Colors.white24,
height: 20,
thickness: 2,
indent: 0,
endIndent: 0,
margin: EdgeInsets.all(16.0),
),
CobbleDivider(),
Offstage(
offstage: isConnected,
child: ListTile(
leading: Icon(RebbleIcons.connect_to_watch),
title: Text(tr.watchesPage.action.connect),
child: CobbleTile.action(
leading: RebbleIcons.connect_to_watch,
title: tr.watchesPage.action.connect,
onTap: () => _onConnectPressed(device, true),
),
),
Offstage(
offstage: !isConnected,
child: ListTile(
leading: Icon(RebbleIcons.disconnect_from_watch),
title: Text(tr.watchesPage.action.disconnect),
child: CobbleTile.action(
leading: RebbleIcons.disconnect_from_watch,
title: tr.watchesPage.action.disconnect,
onTap: () => _onDisconnectPressed(true),
),
),
ListTile(
leading: Icon(RebbleIcons.check_for_updates),
title: Text(tr.watchesPage.action.checkUpdates),
CobbleTile.action(
leading: RebbleIcons.check_for_updates,
title: tr.watchesPage.action.checkUpdates,
onTap: () => _onUpdatePressed(device),
),
const Divider(
color: Colors.white24,
height: 20,
thickness: 2,
indent: 0,
endIndent: 0,
),
ListTile(
leading: Icon(RebbleIcons.x_close, color: Colors.red),
title: Text(
tr.watchesPage.action.forget,
style: TextStyle(color: Colors.red),
),
CobbleDivider(),
CobbleTile.action(
leading: RebbleIcons.x_close,
title: tr.watchesPage.action.forget,
intent: context.scheme!.destructive,
onTap: () => _onForgetPressed(device),
),
],
Expand All @@ -241,8 +226,9 @@ class MyWatchesTab extends HookWidget implements CobbleScreen {
child: Row(children: <Widget>[
Container(
child: Center(
child: Icon(RebbleIcons.disconnect_from_watch,
color: Colors.black)),
child: CompIcon(RebbleIcons.disconnect_from_watch,
RebbleIcons.disconnect_from_watch_background)
),
width: 56,
height: 56,
decoration: BoxDecoration(
Expand Down Expand Up @@ -277,7 +263,7 @@ class MyWatchesTab extends HookWidget implements CobbleScreen {
width: 56,
height: 56,
decoration: BoxDecoration(
color: _connectedBrColor,
color: _connectedColor,
shape: BoxShape.circle),
),
SizedBox(width: 16),
Expand All @@ -286,7 +272,7 @@ class MyWatchesTab extends HookWidget implements CobbleScreen {
Text(e.name!, style: TextStyle(fontSize: 16)),
SizedBox(height: 4),
Text(_getStatusText(e.address),
style: TextStyle(color: _connectedColor)),
style: TextStyle(color: context.scheme!.muted)),
Wrap(
spacing: 4,
children: [],
Expand All @@ -296,11 +282,9 @@ class MyWatchesTab extends HookWidget implements CobbleScreen {
),
Expanded(
child: Container(width: 0.0, height: 0.0)),
IconButton(
icon: Icon(RebbleIcons.disconnect_from_watch,
color: Theme.of(context)
.colorScheme
.secondary),
CobbleButton(
outlined: false,
icon: RebbleIcons.disconnect_from_watch,
onPressed: () => _onDisconnectPressed(false),
),
]),
Expand All @@ -309,16 +293,8 @@ class MyWatchesTab extends HookWidget implements CobbleScreen {
))
.toList()),
],
Padding(
padding: EdgeInsets.fromLTRB(15, 25, 15, 5),
child: Text(tr.watchesPage.allWatches, style: TextStyle(fontSize: 18))),
const Divider(
color: Colors.white24,
height: 20,
thickness: 2,
indent: 15,
endIndent: 15,
),
CobbleTile.title(title: tr.watchesPage.allWatches),
CobbleDivider(),
Column(
children: allDisconnectedWatches
.map((e) => InkWell(
Expand All @@ -331,7 +307,7 @@ class MyWatchesTab extends HookWidget implements CobbleScreen {
width: 56,
height: 56,
decoration: BoxDecoration(
color: _disconnectedColor,
color: _getBrStatusColor(e),
shape: BoxShape.circle),
),
SizedBox(width: 16),
Expand All @@ -348,9 +324,9 @@ class MyWatchesTab extends HookWidget implements CobbleScreen {
crossAxisAlignment: CrossAxisAlignment.start,
),
Expanded(child: Container(width: 0.0, height: 0.0)),
IconButton(
icon: Icon(RebbleIcons.connect_to_watch,
color: Theme.of(context).colorScheme.secondary),
CobbleButton(
outlined: false,
icon: RebbleIcons.connect_to_watch,
onPressed: () => _onConnectPressed(e, false),
),
]),
Expand All @@ -360,10 +336,10 @@ class MyWatchesTab extends HookWidget implements CobbleScreen {
))
.toList()),
]),
floatingActionButton: FloatingActionButton.extended(
floatingActionButton: CobbleFab(
onPressed: () => context.push(PairPage.fromTab()),
label: Text(tr.watchesPage.fab),
icon: Icon(Icons.add),
label: tr.watchesPage.fab,
icon: RebbleIcons.plus_add,
),
);
}
Expand Down

0 comments on commit 1fc53c0

Please sign in to comment.