From cbc979263ebe4f44ca70e74405e991da7a46bcf1 Mon Sep 17 00:00:00 2001 From: Alex Date: Mon, 28 Nov 2022 14:14:22 -0600 Subject: [PATCH] chore(mobile): Improve readability of logs page (#1033) --- .../shared/providers/websocket.provider.dart | 12 +-- mobile/lib/shared/views/app_log_page.dart | 86 +++++++++++-------- 2 files changed, 55 insertions(+), 43 deletions(-) diff --git a/mobile/lib/shared/providers/websocket.provider.dart b/mobile/lib/shared/providers/websocket.provider.dart index 9b5e1e87c9..e9f8db40ea 100644 --- a/mobile/lib/shared/providers/websocket.provider.dart +++ b/mobile/lib/shared/providers/websocket.provider.dart @@ -60,7 +60,7 @@ class WebsocketNotifier extends StateNotifier { var accessToken = Hive.box(userInfoBox).get(accessTokenKey); var endpoint = Hive.box(userInfoBox).get(serverEndpointKey); try { - log.info("Attempting to connect to websocket"); + debugPrint("Attempting to connect to websocket"); // Configure socket transports must be specified Socket socket = io( endpoint.toString().replaceAll('/api', ''), @@ -76,12 +76,12 @@ class WebsocketNotifier extends StateNotifier { ); socket.onConnect((_) { - log.info("Established Websocket Connection"); + debugPrint("Established Websocket Connection"); state = WebsocketState(isConnected: true, socket: socket); }); socket.onDisconnect((_) { - log.info("Disconnect to Websocket Connection"); + debugPrint("Disconnect to Websocket Connection"); state = WebsocketState(isConnected: false, socket: null); }); @@ -105,7 +105,7 @@ class WebsocketNotifier extends StateNotifier { } disconnect() { - log.info("Attempting to disconnect from websocket"); + debugPrint("Attempting to disconnect from websocket"); var socket = state.socket?.disconnect(); @@ -115,12 +115,12 @@ class WebsocketNotifier extends StateNotifier { } stopListenToEvent(String eventName) { - log.info("Stop listening to event $eventName"); + debugPrint("Stop listening to event $eventName"); state.socket?.off(eventName); } listenUploadEvent() { - log.info("Start listening to event on_upload_success"); + debugPrint("Start listening to event on_upload_success"); state.socket?.on('on_upload_success', (data) { var jsonString = jsonDecode(data.toString()); AssetResponseDto? newAsset = AssetResponseDto.fromJson(jsonString); diff --git a/mobile/lib/shared/views/app_log_page.dart b/mobile/lib/shared/views/app_log_page.dart index 1306d03eb5..ff3b2e71c2 100644 --- a/mobile/lib/shared/views/app_log_page.dart +++ b/mobile/lib/shared/views/app_log_page.dart @@ -15,44 +15,33 @@ class AppLogPage extends HookConsumerWidget { final immichLogger = ImmichLogger(); final logMessages = useState(immichLogger.messages); + Widget colorStatusIndicator(Color color) { + return Column( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + Container( + width: 10, + height: 10, + decoration: BoxDecoration( + color: color, + shape: BoxShape.circle, + ), + ), + ], + ); + } + Widget buildLeadingIcon(String level) { switch (level) { case "INFO": - return Container( - width: 10, - height: 10, - decoration: BoxDecoration( - color: Theme.of(context).primaryColor, - borderRadius: BorderRadius.circular(5), - ), - ); + return colorStatusIndicator(Theme.of(context).primaryColor); case "SEVERE": - return Container( - width: 10, - height: 10, - decoration: BoxDecoration( - color: Colors.redAccent, - borderRadius: BorderRadius.circular(5), - ), - ); + return colorStatusIndicator(Colors.redAccent); + case "WARNING": - return Container( - width: 10, - height: 10, - decoration: BoxDecoration( - color: Colors.orangeAccent, - borderRadius: BorderRadius.circular(5), - ), - ); + return colorStatusIndicator(Colors.orangeAccent); default: - return Container( - width: 10, - height: 10, - decoration: BoxDecoration( - color: Theme.of(context).primaryColor, - borderRadius: BorderRadius.circular(5), - ), - ); + return colorStatusIndicator(Colors.grey); } } @@ -61,9 +50,13 @@ class AppLogPage extends HookConsumerWidget { case "INFO": return Colors.transparent; case "SEVERE": - return Colors.redAccent.withOpacity(0.075); + return Theme.of(context).brightness == Brightness.dark + ? Colors.redAccent.withOpacity(0.25) + : Colors.redAccent.withOpacity(0.075); case "WARNING": - return Colors.orangeAccent.withOpacity(0.075); + return Theme.of(context).brightness == Brightness.dark + ? Colors.orangeAccent.withOpacity(0.25) + : Colors.orangeAccent.withOpacity(0.075); default: return Theme.of(context).primaryColor.withOpacity(0.1); } @@ -122,7 +115,7 @@ class AppLogPage extends HookConsumerWidget { height: 0, color: Theme.of(context).brightness == Brightness.dark ? Colors.white70 - : Colors.grey[500], + : Colors.grey[600], ); }, itemCount: logMessages.value.length, @@ -133,8 +126,27 @@ class AppLogPage extends HookConsumerWidget { dense: true, tileColor: getTileColor(logMessage.level), minLeadingWidth: 10, - title: Text( - logMessage.message, + title: Text.rich( + TextSpan( + children: [ + TextSpan( + text: "#$index ", + style: TextStyle( + color: Theme.of(context).brightness == Brightness.dark + ? Colors.white70 + : Colors.grey[600], + fontSize: 14.0, + fontWeight: FontWeight.bold, + ), + ), + TextSpan( + text: logMessage.message, + style: const TextStyle( + fontSize: 14.0, + ), + ), + ], + ), style: const TextStyle(fontSize: 14.0, fontFamily: "Inconsolata"), ), subtitle: Text(