From f32c78131a2d589dfde09217497ea7f93da4b9d9 Mon Sep 17 00:00:00 2001 From: Philipp Hoenisch Date: Wed, 31 Jan 2024 16:35:40 +0100 Subject: [PATCH] chore: redesign webapp overview --- .../lib/trade/order_and_position_table.dart | 48 ---------- .../lib/trade/order_history_table.dart | 8 +- webapp/frontend/lib/trade/position_table.dart | 10 +- webapp/frontend/lib/trade/trade_screen.dart | 96 ++++++++++++------- 4 files changed, 64 insertions(+), 98 deletions(-) delete mode 100644 webapp/frontend/lib/trade/order_and_position_table.dart diff --git a/webapp/frontend/lib/trade/order_and_position_table.dart b/webapp/frontend/lib/trade/order_and_position_table.dart deleted file mode 100644 index aa837895a..000000000 --- a/webapp/frontend/lib/trade/order_and_position_table.dart +++ /dev/null @@ -1,48 +0,0 @@ -import 'package:flutter/material.dart'; -import 'package:get_10101/common/color.dart'; -import 'package:get_10101/trade/order_history_table.dart'; -import 'package:get_10101/trade/position_table.dart'; - -class OrderAndPositionTable extends StatefulWidget { - const OrderAndPositionTable({super.key}); - - @override - OrderAndPositionTableState createState() => OrderAndPositionTableState(); -} - -class OrderAndPositionTableState extends State - with SingleTickerProviderStateMixin { - late final _tabController = TabController(length: 2, vsync: this); - - @override - Widget build(BuildContext context) { - return Column( - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.center, - children: [ - TabBar( - unselectedLabelColor: Colors.black, - labelColor: tenTenOnePurple, - controller: _tabController, - isScrollable: false, - tabs: const [ - Tab( - text: 'Open Position', - ), - Tab( - text: 'Order History', - ), - ], - ), - Expanded( - child: TabBarView( - controller: _tabController, - children: const [ - OpenPositionTable(), - OrderHistoryTable(), - ], - )) - ], - ); - } -} diff --git a/webapp/frontend/lib/trade/order_history_table.dart b/webapp/frontend/lib/trade/order_history_table.dart index 8cdda0f5b..f55fb727b 100644 --- a/webapp/frontend/lib/trade/order_history_table.dart +++ b/webapp/frontend/lib/trade/order_history_table.dart @@ -37,7 +37,7 @@ class OrderHistoryTable extends StatelessWidget { orders.sort((a, b) => b.creationTimestamp.compareTo(a.creationTimestamp)); return Table( - border: TableBorder.symmetric(inside: const BorderSide(width: 2, color: Colors.black)), + border: const TableBorder(verticalInside: BorderSide(width: 0.5, color: Colors.black)), defaultVerticalAlignment: TableCellVerticalAlignment.middle, columnWidths: const { 0: MinColumnWidth(FixedColumnWidth(100.0), FractionColumnWidth(0.1)), @@ -50,11 +50,7 @@ class OrderHistoryTable extends StatelessWidget { TableRow( decoration: BoxDecoration( color: tenTenOnePurple.shade300, - border: Border.all( - width: 1, - ), - borderRadius: const BorderRadius.only( - topLeft: Radius.circular(10), topRight: Radius.circular(10)), + border: const Border(bottom: BorderSide(width: 0.5, color: Colors.black)), ), children: [ buildHeaderCell('State'), diff --git a/webapp/frontend/lib/trade/position_table.dart b/webapp/frontend/lib/trade/position_table.dart index 9c20395e0..bcab05b62 100644 --- a/webapp/frontend/lib/trade/position_table.dart +++ b/webapp/frontend/lib/trade/position_table.dart @@ -34,7 +34,7 @@ class OpenPositionTable extends StatelessWidget { Widget buildTable(List positions, BestQuote? bestQuote, BuildContext context) { return Table( - border: TableBorder.symmetric(inside: const BorderSide(width: 2, color: Colors.black)), + border: const TableBorder(verticalInside: BorderSide(width: 0.5, color: Colors.black)), defaultVerticalAlignment: TableCellVerticalAlignment.middle, columnWidths: const { 0: MinColumnWidth(FixedColumnWidth(100.0), FractionColumnWidth(0.1)), @@ -50,11 +50,7 @@ class OpenPositionTable extends StatelessWidget { TableRow( decoration: BoxDecoration( color: tenTenOnePurple.shade300, - border: Border.all( - width: 1, - ), - borderRadius: const BorderRadius.only( - topLeft: Radius.circular(10), topRight: Radius.circular(10)), + border: const Border(bottom: BorderSide(width: 0.5, color: Colors.black)), ), children: [ buildHeaderCell('Quantity'), @@ -120,7 +116,7 @@ class OpenPositionTable extends StatelessWidget { alignment: Alignment.center, child: Text(text, textAlign: TextAlign.center, - style: const TextStyle(fontWeight: FontWeight.bold, color: Colors.white)))); + style: const TextStyle(fontWeight: FontWeight.normal, color: Colors.white)))); } TableCell buildTableCell(Widget child) => TableCell( diff --git a/webapp/frontend/lib/trade/trade_screen.dart b/webapp/frontend/lib/trade/trade_screen.dart index c17fe3056..388d48f91 100644 --- a/webapp/frontend/lib/trade/trade_screen.dart +++ b/webapp/frontend/lib/trade/trade_screen.dart @@ -1,6 +1,7 @@ import 'package:flutter/material.dart'; import 'package:get_10101/common/color.dart'; -import 'package:get_10101/trade/order_and_position_table.dart'; +import 'package:get_10101/trade/order_history_table.dart'; +import 'package:get_10101/trade/position_table.dart'; import 'package:get_10101/trade/trade_screen_order_form.dart'; class TradeScreen extends StatefulWidget { @@ -65,6 +66,8 @@ class _TradeScreenState extends State with SingleTickerProviderStat Expanded( flex: 2, child: Column( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + crossAxisAlignment: CrossAxisAlignment.stretch, children: [ Visibility( visible: false, @@ -84,20 +87,11 @@ class _TradeScreenState extends State with SingleTickerProviderStat ), ), ), - Expanded( - child: Padding( - padding: const EdgeInsets.only(left: 8, right: 8), - child: Container( - decoration: BoxDecoration( - borderRadius: BorderRadius.circular(8), - color: Colors.grey[100], - ), - child: const Row( - children: [Expanded(child: OrderAndPositionTable())], - ), - ), - ), + createTableWidget(const OpenPositionTable(), "Open Positions"), + const SizedBox( + height: 10, ), + createTableWidget(const OrderHistoryTable(), "Order History"), ], ), ), @@ -106,6 +100,50 @@ class _TradeScreenState extends State with SingleTickerProviderStat ); } + Expanded createTableWidget(Widget child, String title) { + return Expanded( + child: Padding( + padding: const EdgeInsets.only(left: 8, right: 8), + child: Container( + decoration: BoxDecoration( + borderRadius: BorderRadius.circular(8), + color: Colors.grey[100], + ), + child: Column( + children: [ + Row( + children: [ + Expanded( + child: Container( + decoration: BoxDecoration( + color: tenTenOnePurple.shade300, + border: Border.all( + width: 0.5, + ), + borderRadius: const BorderRadius.only( + topLeft: Radius.circular(10), topRight: Radius.circular(10)), + ), + padding: const EdgeInsets.all(10), + alignment: Alignment.center, + child: Text(title, + textAlign: TextAlign.center, + style: + const TextStyle(fontWeight: FontWeight.bold, color: Colors.white))), + ), + ], + ), + Row( + children: [ + Expanded(child: child), + ], + ), + ], + ), + ), + ), + ); + } + Widget _buildHVerticalWidget(BoxConstraints constraints, BoxConstraints viewportConstraints) { return Padding( padding: const EdgeInsets.all(8.0), @@ -126,30 +164,14 @@ class _TradeScreenState extends State with SingleTickerProviderStat ), child: NewOrderWidget(tabController: _tabController), ), - Expanded( - child: Container( - height: 120.0, - alignment: Alignment.center, - child: Column( - children: [ - Expanded( - child: Padding( - padding: const EdgeInsets.only(top: 8), - child: Container( - decoration: BoxDecoration( - borderRadius: BorderRadius.circular(8), - color: Colors.grey[100], - ), - child: const Row( - children: [Expanded(child: OrderAndPositionTable())], - ), - ), - ), - ), - ], - ), - ), + const SizedBox( + height: 10, + ), + createTableWidget(const OpenPositionTable(), "Open Positions"), + const SizedBox( + height: 10, ), + createTableWidget(const OrderHistoryTable(), "Order History"), ], ), ))));