pimhwang
/
ESSE
mirror of https://github.com/CympleTech/ESSE.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

UI: move profile & network to indenpendent page

pull/18/head
Sun 4 years ago
parent
0edbd46d47
commit
f1522f1811
6 changed files with 351 additions and 355 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 174
      lib/apps/device/page.dart
  2. 2
      lib/pages/account_quick.dart
  3. 23
      lib/pages/home.dart
  4. 201
      lib/pages/setting/network.dart
  5. 304
      lib/pages/setting/profile.dart
  6. 2
      lib/widgets/socket_input.dart

174
lib/apps/device/page.dart
Unescape View File

@ -176,6 +176,8 @@ class _DevicesPageState extends State<DevicesPage> { @@ -176,6 +176,8 @@ class _DevicesPageState extends State<DevicesPage> {
double widgetWidth = 300.0;
if (isDesktop) {
widgetWidth = (MediaQuery.of(context).size.width - 450) / 2;
} else {
widgetWidth = MediaQuery.of(context).size.width - 40;
}
final List<Widget> devicesWidgets = provider.devices.values.map((device) {
@ -183,102 +185,84 @@ class _DevicesPageState extends State<DevicesPage> { @@ -183,102 +185,84 @@ class _DevicesPageState extends State<DevicesPage> {
}).toList();
return Scaffold(
body: SafeArea(
child: Padding(
padding: const EdgeInsets.all(10.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: isDesktop ? CrossAxisAlignment.start : CrossAxisAlignment.center,
children: <Widget>[
Row(
children: [
if (!isDesktop)
GestureDetector(
onTap: () => Navigator.pop(context),
child: Container(width: 20.0, child: Icon(Icons.arrow_back, color: color.primary)),
),
const SizedBox(width: 15.0),
Expanded(child: Text(lang.devices, style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20.0))),
PopupMenuButton<int>(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15)
),
color: const Color(0xFFEDEDED),
child: Icon(Icons.add_rounded, color: color.primary),
onSelected: (int value) {
if (value == 0) {
// input address to connect.
_inputAddress(lang);
} else if (value == 1) {
// show qrcode.
final account = Provider.of<AccountProvider>(
context, listen: false).activedAccount;
showShadowDialog(
context,
Icons.security_rounded,
lang.verifyPin,
PinWords(
hashPin: account.lock,
callback: (_key, _hash) async {
Navigator.of(context).pop();
_showQrCode(
account.name,
account.gid,
Global.addr,
account.lock,
color,
lang,
);
}));
}
},
itemBuilder: (context) {
return <PopupMenuEntry<int>>[
PopupMenuItem<int>(value: 0,
child: Row(
children: [
Container(
padding: const EdgeInsets.only(right: 10.0),
width: 30.0,
height: 30.0,
child: Icon(Icons.add_rounded, color: Color(0xFF6174FF)),
),
Text(lang.addDevice, style: TextStyle(color: Colors.black)),
]
)
),
PopupMenuItem<int>(value: 1,
child: Row(
children: [
Container(
padding: const EdgeInsets.only(right: 10.0),
width: 30.0,
height: 30.0,
child: Icon(Icons.qr_code_rounded, color: Color(0xFF6174FF)),
),
Text(lang.deviceQrcode, style: TextStyle(color: Colors.black)),
]
)
),
];
}
),
const SizedBox(width: 10.0),
],
),
const SizedBox(height: 30.0),
Expanded(
child: SingleChildScrollView(
child: Wrap(
spacing: 16.0,
runSpacing: 16.0,
alignment: WrapAlignment.start,
children: devicesWidgets
appBar: AppBar(
title: Text(lang.devices),
actions: [
PopupMenuButton<int>(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15)
),
color: const Color(0xFFEDEDED),
child: Icon(Icons.add_rounded, color: color.primary),
onSelected: (int value) {
if (value == 0) {
// input address to connect.
_inputAddress(lang);
} else if (value == 1) {
// show qrcode.
final account = Provider.of<AccountProvider>(
context, listen: false).activedAccount;
showShadowDialog(
context,
Icons.security_rounded,
lang.verifyPin,
PinWords(
hashPin: account.lock,
callback: (_key, _hash) async {
Navigator.of(context).pop();
_showQrCode(
account.name,
account.gid,
Global.addr,
account.lock,
color,
lang,
);
}));
}
},
itemBuilder: (context) {
return <PopupMenuEntry<int>>[
PopupMenuItem<int>(value: 0,
child: Row(
children: [
Container(
padding: const EdgeInsets.only(right: 10.0),
width: 30.0,
height: 30.0,
child: Icon(Icons.add_rounded, color: Color(0xFF6174FF)),
),
Text(lang.addDevice, style: TextStyle(color: Colors.black)),
]
)
)
),
]
),
PopupMenuItem<int>(value: 1,
child: Row(
children: [
Container(
padding: const EdgeInsets.only(right: 10.0),
width: 30.0,
height: 30.0,
child: Icon(Icons.qr_code_rounded, color: Color(0xFF6174FF)),
),
Text(lang.deviceQrcode, style: TextStyle(color: Colors.black)),
]
)
),
];
}
),
const SizedBox(width: 20.0),
]
),
body: Padding(
padding: const EdgeInsets.all(20.0),
child: SingleChildScrollView(
child: Wrap(
spacing: 16.0,
runSpacing: 16.0,
alignment: WrapAlignment.start,
children: devicesWidgets
)
)
)

2
lib/pages/account_quick.dart
Unescape View File

@ -66,7 +66,7 @@ class _AccountQuickPageState extends State<AccountQuickPage> { @@ -66,7 +66,7 @@ class _AccountQuickPageState extends State<AccountQuickPage> {
child: SingleChildScrollView(
child: Column(crossAxisAlignment: CrossAxisAlignment.center, children: <
Widget>[
_header(lang.newAccountTitle, () => Navigator.of(context).pop()),
_header(lang.loginQuick, () => Navigator.of(context).pop()),
SizedBox(height: maxHeight),
Column(
mainAxisAlignment: MainAxisAlignment.center,

23
lib/pages/home.dart
Unescape View File

@ -374,8 +374,7 @@ class DrawerWidget extends StatelessWidget { @@ -374,8 +374,7 @@ class DrawerWidget extends StatelessWidget {
])));
}
_showDevices(context, bool isDesktop) {
final widget = DevicesPage();
_showPage(Widget widget, bool isDesktop, context) {
if (isDesktop) {
Provider.of<AccountProvider>(context, listen: false)
.updateActivedWidget(widget);
@ -447,8 +446,7 @@ class DrawerWidget extends StatelessWidget { @@ -447,8 +446,7 @@ class DrawerWidget extends StatelessWidget {
style: TextStyle(fontSize: 16.0)),
onTap: () {
Navigator.pop(context);
showShadowDialog(context, Icons.person, lang.profile,
ProfileDetail());
_showPage(ProfileDetail(), isDesktop, context);
}),
ListTile(
leading: Icon(Icons.devices_other_rounded,
@ -458,27 +456,26 @@ class DrawerWidget extends StatelessWidget { @@ -458,27 +456,26 @@ class DrawerWidget extends StatelessWidget {
style: TextStyle(fontSize: 16.0)),
onTap: () {
Navigator.pop(context);
_showDevices(context, isDesktop);
_showPage(DevicesPage(), isDesktop, context);
}),
ListTile(
leading: Icon(Icons.language, color: color.primary),
title: Text(lang.preference,
leading: Icon(Icons.account_tree, color: color.primary),
title: Text(lang.network,
textAlign: TextAlign.left,
style: TextStyle(fontSize: 16.0)),
onTap: () {
Navigator.pop(context);
showShadowDialog(context, Icons.language,
lang.preference, PreferenceDetail());
_showPage(NetworkDetail(), isDesktop, context);
}),
ListTile(
leading: Icon(Icons.account_tree, color: color.primary),
title: Text(lang.network,
leading: Icon(Icons.language, color: color.primary),
title: Text(lang.preference,
textAlign: TextAlign.left,
style: TextStyle(fontSize: 16.0)),
onTap: () {
Navigator.pop(context);
showShadowDialog(context, Icons.account_tree,
lang.network, NetworkDetail());
showShadowDialog(context, Icons.language,
lang.preference, PreferenceDetail());
}),
ListTile(
leading: Icon(Icons.info, color: color.primary),

201
lib/pages/setting/network.dart
Unescape View File

@ -80,109 +80,116 @@ class _NetworkDetailState extends State<NetworkDetail> { @@ -80,109 +80,116 @@ class _NetworkDetailState extends State<NetworkDetail> {
wsController.text = Global.wsRpc;
httpController.text = Global.httpRpc;
return Column(children: [
Container(
width: 500.0,
return Scaffold(
appBar: AppBar(title: Text(lang.network)),
body: SingleChildScrollView(
child: Container(
padding: const EdgeInsets.all(20.0),
decoration: BoxDecoration(
color: Color(0xFF6174FF), borderRadius: BorderRadius.circular(15.0)),
child: Row(children: [
child: Column(
children: [
Container(
width: 40.0,
height: 40.0,
margin: const EdgeInsets.only(right: 15.0),
width: 600.0,
padding: const EdgeInsets.all(20.0),
decoration: BoxDecoration(
color: color.background,
borderRadius: BorderRadius.circular(15.0)),
child: Icon(Icons.info, color: Color(0xFF6174FF), size: 24.0),
),
Expanded(
child: Text(
lang.deviceTip,
style: TextStyle(color: color.background, fontSize: 14.0),
textAlign: TextAlign.center,
color: Color(0xFF6174FF), borderRadius: BorderRadius.circular(15.0)),
child: Row(children: [
Container(
width: 40.0,
height: 40.0,
margin: const EdgeInsets.only(right: 15.0),
decoration: BoxDecoration(
color: color.background,
borderRadius: BorderRadius.circular(15.0)),
child: Icon(Icons.info, color: Color(0xFF6174FF), size: 24.0),
),
Expanded(
child: Text(
lang.deviceTip,
style: TextStyle(color: color.background, fontSize: 14.0),
textAlign: TextAlign.center,
),
),
])),
const SizedBox(height: 20.0),
Container(
width: 600.0,
padding: const EdgeInsets.symmetric(horizontal: 10.0),
decoration: BoxDecoration(
color: const Color(0x26FF0000),
borderRadius: BorderRadius.circular(15.0)
),
),
])),
const SizedBox(height: 20.0),
Container(
width: 500.0,
padding: const EdgeInsets.symmetric(horizontal: 10.0),
decoration: BoxDecoration(
color: const Color(0x26FF0000),
borderRadius: BorderRadius.circular(15.0)
),
child: Column(
children: [
_settingHead(lang.deviceChangeWs),
SocketInputText(controller: wsController, action: changeWs, state: rpc.isLinked()),
_settingHead(lang.deviceChangeHttp),
SocketInputText(controller: httpController, action: changeHttp, state: true),
const SizedBox(height: 15.0),
]
)
),
const SizedBox(height: 20.0),
Container(
width: 500.0,
padding: const EdgeInsets.symmetric(horizontal: 10.0),
decoration: BoxDecoration(
color: const Color(0x40ADB0BB),
borderRadius: BorderRadius.circular(15.0)
),
child: Column(
children: [
_settingHead(lang.networkAdd),
SocketInputText(controller: addController, action: addBootstrap, state: true),
const SizedBox(height: 15.0),
]
)
),
_settingHead(lang.networkStable),
Container(
height: this.networkStable.length > 0 ? 100.0 : 50.0,
child: ListView.builder(
itemCount: this.networkStable.length,
itemBuilder: (context, index) {
final item = this.networkStable[index];
return Padding(
padding: const EdgeInsets.symmetric(vertical: 2.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
child: Column(
children: [
Icon(
item[1] == '1'
? Icons.swap_horiz
: Icons.swap_calls,
size: 18.0,
color: color.primary),
SizedBox(width: 15.0),
Text(addrPrint(item[0]),
style: TextStyle(fontSize: 14.0))
]));
}),
),
_settingHead(lang.networkDht),
Container(
height: this.networkDht.length > 0 ? 100.0 : 50.0,
child: ListView.builder(
itemCount: this.networkDht.length,
itemBuilder: (context, index) {
final item = this.networkDht[index];
return Padding(
padding: const EdgeInsets.symmetric(vertical: 2.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
_settingHead(lang.deviceChangeWs),
SocketInputText(controller: wsController, action: changeWs, state: rpc.isLinked()),
_settingHead(lang.deviceChangeHttp),
SocketInputText(controller: httpController, action: changeHttp, state: true),
const SizedBox(height: 15.0),
]
)
),
const SizedBox(height: 20.0),
Container(
width: 600.0,
padding: const EdgeInsets.symmetric(horizontal: 10.0),
decoration: BoxDecoration(
color: const Color(0x40ADB0BB),
borderRadius: BorderRadius.circular(15.0)
),
child: Column(
children: [
Icon(Icons.cloud_done_outlined,
size: 18.0, color: color.primary),
SizedBox(width: 15.0),
Text(addrPrint(item),
style: TextStyle(fontSize: 14.0)),
]));
}),
),
]);
_settingHead(lang.networkAdd),
SocketInputText(controller: addController, action: addBootstrap, state: true),
const SizedBox(height: 15.0),
]
)
),
_settingHead(lang.networkStable),
Container(
height: this.networkStable.length > 0 ? 100.0 : 50.0,
child: ListView.builder(
itemCount: this.networkStable.length,
itemBuilder: (context, index) {
final item = this.networkStable[index];
return Padding(
padding: const EdgeInsets.symmetric(vertical: 2.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
item[1] == '1'
? Icons.swap_horiz
: Icons.swap_calls,
size: 18.0,
color: color.primary),
SizedBox(width: 15.0),
Text(addrPrint(item[0]),
style: TextStyle(fontSize: 14.0))
]));
}),
),
_settingHead(lang.networkDht),
Container(
height: this.networkDht.length > 0 ? 100.0 : 50.0,
child: ListView.builder(
itemCount: this.networkDht.length,
itemBuilder: (context, index) {
final item = this.networkDht[index];
return Padding(
padding: const EdgeInsets.symmetric(vertical: 2.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(Icons.cloud_done_outlined,
size: 18.0, color: color.primary),
SizedBox(width: 15.0),
Text(addrPrint(item),
style: TextStyle(fontSize: 14.0)),
]));
}),
),
])
)));
}
}

304
lib/pages/setting/profile.dart
Unescape View File

@ -46,174 +46,182 @@ class _ProfileDetailState extends State<ProfileDetail> { @@ -46,174 +46,182 @@ class _ProfileDetailState extends State<ProfileDetail> {
final account = context.watch<AccountProvider>().activedAccount;
final noImage = account.avatar == null;
return Wrap(spacing: 20.0, alignment: WrapAlignment.center, children: <
Widget>[
Container(
width: 180.0,
child: Column(children: [
Container(
width: 100.0,
height: 100.0,
decoration: noImage
? BoxDecoration(
color: color.surface,
borderRadius: BorderRadius.circular(15.0))
: BoxDecoration(
color: color.surface,
image: DecorationImage(
image: MemoryImage(account.avatar!),
fit: BoxFit.cover,
),
borderRadius: BorderRadius.circular(15.0)),
child: Stack(
alignment: Alignment.center,
children: <Widget>[
if (noImage)
Icon(Icons.camera_alt,
size: 47.0, color: Color(0xFFADB0BB)),
Positioned(
bottom: -1.0,
right: -1.0,
child: InkWell(
child: Container(
decoration: const ShapeDecoration(
color: Colors.white,
shape: CircleBorder(),
return Scaffold(
appBar: AppBar(title: Text(lang.profile)),
body: Padding(
padding: const EdgeInsets.all(20.0),
child: SingleChildScrollView(
child: Wrap(
spacing: 20.0,
alignment: WrapAlignment.center,
children: <Widget>[
Container(
width: 180.0,
child: Column(
children: [
Container(
width: 100.0,
height: 100.0,
decoration: noImage
? BoxDecoration(
color: color.surface,
borderRadius: BorderRadius.circular(15.0))
: BoxDecoration(
color: color.surface,
image: DecorationImage(
image: MemoryImage(account.avatar!),
fit: BoxFit.cover,
),
child: Icon(Icons.add_circle,
size: 32.0, color: color.primary),
),
onTap: () => selectAvatar(context, (bytes) =>
context.read<AccountProvider>().accountUpdate(account.name, bytes),
borderRadius: BorderRadius.circular(15.0)),
child: Stack(
alignment: Alignment.center,
children: <Widget>[
if (noImage)
Icon(Icons.camera_alt,
size: 47.0, color: Color(0xFFADB0BB)),
Positioned(
bottom: -1.0,
right: -1.0,
child: InkWell(
child: Container(
decoration: const ShapeDecoration(
color: Colors.white,
shape: CircleBorder(),
),
child: Icon(Icons.add_circle,
size: 32.0, color: color.primary),
),
onTap: () => selectAvatar(context, (bytes) =>
context.read<AccountProvider>().accountUpdate(account.name, bytes),
),
),
),
],
),
),
),
],
),
),
_changeName
? Padding(
padding: const EdgeInsets.symmetric(vertical: 10.0),
child: Row(mainAxisSize: MainAxisSize.max, children: [
Container(
width: 100.0,
child: TextField(
autofocus: true,
style: TextStyle(fontSize: 16.0),
textAlign: TextAlign.center,
controller: _nameController,
decoration: InputDecoration(
hintText: account.name,
hintStyle: TextStyle(
color: Color(0xFF1C1939).withOpacity(0.25)),
filled: false,
isDense: true,
_changeName
? Padding(
padding: const EdgeInsets.symmetric(vertical: 10.0),
child: Row(mainAxisSize: MainAxisSize.max, children: [
Container(
width: 100.0,
child: TextField(
autofocus: true,
style: TextStyle(fontSize: 16.0),
textAlign: TextAlign.center,
controller: _nameController,
decoration: InputDecoration(
hintText: account.name,
hintStyle: TextStyle(
color: Color(0xFF1C1939).withOpacity(0.25)),
filled: false,
isDense: true,
),
),
),
),
),
const SizedBox(width: 10.0),
GestureDetector(
onTap: () {
if (_nameController.text.length > 0) {
context
const SizedBox(width: 10.0),
GestureDetector(
onTap: () {
if (_nameController.text.length > 0) {
context
.read<AccountProvider>()
.accountUpdate(_nameController.text);
}
setState(() {
_changeName = false;
});
},
child: Container(
width: 20.0,
child: Icon(
Icons.done_rounded,
color: color.primary,
}
setState(() {
_changeName = false;
});
},
child: Container(
width: 20.0,
child: Icon(
Icons.done_rounded,
color: color.primary,
)),
),
const SizedBox(width: 10.0),
GestureDetector(
onTap: () => setState(() {
_changeName = false;
),
const SizedBox(width: 10.0),
GestureDetector(
onTap: () => setState(() {
_changeName = false;
}),
child: Container(
width: 20.0, child: Icon(Icons.clear_rounded)),
),
]),
)
: Padding(
padding: const EdgeInsets.symmetric(vertical: 10.0),
child: TextButton(
onPressed: () => setState(() {
_changeName = true;
}),
child: Container(
width: 20.0, child: Icon(Icons.clear_rounded)),
child:
Text(account.name, style: TextStyle(fontSize: 16.0)),
),
]),
)
: Padding(
padding: const EdgeInsets.symmetric(vertical: 10.0),
child: TextButton(
onPressed: () => setState(() {
_changeName = true;
}),
child:
Text(account.name, style: TextStyle(fontSize: 16.0)),
),
),
])),
Container(
width: 300.0,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.max,
children: [
_infoListTooltip(Icons.person, color.primary, gidText(account.gid), gidPrint(account.gid)),
_infoListTooltip(Icons.location_on, color.primary, addrText(Global.addr), addrPrint(Global.addr)),
SizedBox(
width: 300.0,
height: 40.0,
child: Row(children: [
Icon(Icons.security_rounded,
size: 20.0, color: color.primary),
const SizedBox(width: 20.0),
TextButton(
onPressed: () => _pinCheck(account.lock,
() => _changePin(context, account.gid, account.lock, lang.setPin),
lang.verifyPin,
),
child: Text(lang.change + ' PIN'),
])),
Container(
width: 400.0,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.max,
children: [
_infoListTooltip(Icons.person, color.primary, gidText(account.gid), gidPrint(account.gid)),
_infoListTooltip(Icons.location_on, color.primary, addrText(Global.addr), addrPrint(Global.addr)),
SizedBox(
height: 40.0,
child: Row(children: [
Icon(Icons.security_rounded,
size: 20.0, color: color.primary),
const SizedBox(width: 20.0),
TextButton(
onPressed: () => _pinCheck(account.lock,
() => _changePin(context, account.gid, account.lock, lang.setPin),
lang.verifyPin,
),
child: Text(lang.change + ' PIN'),
),
]),
),
]),
),
SizedBox(
width: 300.0,
height: 40.0,
child: Row(children: [
Icon(Icons.psychology_rounded,
size: 20.0, color: color.primary),
const SizedBox(width: 20.0),
_mnemoicShow
? TextButton(
SizedBox(
height: 40.0,
child: Row(children: [
Icon(Icons.psychology_rounded,
size: 20.0, color: color.primary),
const SizedBox(width: 20.0),
_mnemoicShow
? TextButton(
onPressed: () => setState(() {
_mnemoicShow = false;
_mnemoicWords.clear();
_mnemoicShow = false;
_mnemoicWords.clear();
}),
child: Text(lang.hide + ' ' + lang.mnemonic),
)
: TextButton(
: TextButton(
onPressed: () => _pinCheck(account.lock,
() => _showMnemonic(account.gid, account.lock), lang.verifyPin),
() => _showMnemonic(account.gid, account.lock), lang.verifyPin),
child: Text(lang.show + ' ' + lang.mnemonic),
),
]),
),
if (_mnemoicShow)
Container(
width: 300.0,
padding: const EdgeInsets.all(10.0),
decoration: BoxDecoration(
border: Border.all(color: Color(0x40ADB0BB)),
borderRadius: BorderRadius.circular(15),
),
child: Wrap(
spacing: 10.0,
runSpacing: 5.0,
alignment: WrapAlignment.center,
children: _showMnemonicWords(color),
]),
),
)
if (_mnemoicShow)
Container(
padding: const EdgeInsets.all(10.0),
decoration: BoxDecoration(
border: Border.all(color: Color(0x40ADB0BB)),
borderRadius: BorderRadius.circular(15),
),
child: Wrap(
spacing: 10.0,
runSpacing: 5.0,
alignment: WrapAlignment.center,
children: _showMnemonicWords(color),
),
)
])),
]);
]
)
)
));
}
_showMnemonicWords(color) {

2
lib/widgets/socket_input.dart
Unescape View File

@ -44,7 +44,7 @@ class _SocketInputTextState extends State<SocketInputText> { @@ -44,7 +44,7 @@ class _SocketInputTextState extends State<SocketInputText> {
return Container(
height: 50.0,
width: 300.0,
width: 400.0,
padding: const EdgeInsets.symmetric(horizontal: 20.0),
decoration: BoxDecoration(
color: const Color(0x40ADB0BB),

Write Preview
Loading…
Cancel
Save