[auth][mob] Add compact mode

This commit is contained in:
Neeraj Gupta
2024-09-09 17:27:26 +05:30
parent 0ad84be3ab
commit 3bb9790229
7 changed files with 83 additions and 29 deletions

View File

@@ -364,6 +364,7 @@
"sigInBackupReminder": "Please export your codes to ensure that you have a backup you can restore from.", "sigInBackupReminder": "Please export your codes to ensure that you have a backup you can restore from.",
"offlineModeWarning": "You have chosen to proceed without backups. Please take manual backups to make sure your codes are safe.", "offlineModeWarning": "You have chosen to proceed without backups. Please take manual backups to make sure your codes are safe.",
"showLargeIcons": "Show large icons", "showLargeIcons": "Show large icons",
"compactMode": "Compact mode",
"shouldHideCode": "Hide codes", "shouldHideCode": "Hide codes",
"doubleTapToViewHiddenCode": "You can double tap on an entry to view code", "doubleTapToViewHiddenCode": "You can double tap on an entry to view code",
"focusOnSearchBar": "Focus search on app start", "focusOnSearchBar": "Focus search on app start",

View File

@@ -14,6 +14,7 @@ class PreferenceService {
static const kShouldHideCodesKey = "should_hide_codes"; static const kShouldHideCodesKey = "should_hide_codes";
static const kShouldAutoFocusOnSearchBar = "should_auto_focus_on_search_bar"; static const kShouldAutoFocusOnSearchBar = "should_auto_focus_on_search_bar";
static const kShouldMinimizeOnCopy = "should_minimize_on_copy"; static const kShouldMinimizeOnCopy = "should_minimize_on_copy";
static const kCompactMode = "vi.compactMode";
Future<void> init() async { Future<void> init() async {
_prefs = await SharedPreferences.getInstance(); _prefs = await SharedPreferences.getInstance();
@@ -48,6 +49,14 @@ class PreferenceService {
return _prefs.getBool(kShouldHideCodesKey) ?? false; return _prefs.getBool(kShouldHideCodesKey) ?? false;
} }
bool isCompactMode() {
return _prefs.getBool(kCompactMode) ?? false;
}
Future<void> setCompactMode(bool value) async {
await _prefs.setBool(kCompactMode, value);
}
Future<void> setHideCodes(bool value) async { Future<void> setHideCodes(bool value) async {
await _prefs.setBool(kShouldHideCodesKey, value); await _prefs.setBool(kShouldHideCodesKey, value);
Bus.instance.fire(IconsChangedEvent()); Bus.instance.fire(IconsChangedEvent());

View File

@@ -48,6 +48,9 @@ class CodeStore {
code.generatedID = entity.generatedID; code.generatedID = entity.generatedID;
code.hasSynced = entity.hasSynced; code.hasSynced = entity.hasSynced;
codes.add(code); codes.add(code);
codes.add(code);
codes.add(code);
codes.add(code);
} }
if (sortCodes) { if (sortCodes) {

View File

@@ -1,3 +1,4 @@
import 'package:ente_auth/services/preference_service.dart';
import 'package:ente_auth/theme/ente_theme.dart'; import 'package:ente_auth/theme/ente_theme.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter/scheduler.dart'; import 'package:flutter/scheduler.dart';
@@ -30,6 +31,7 @@ class _CodeTimerProgressState extends State<CodeTimerProgress>
late final Ticker _ticker; late final Ticker _ticker;
late final ValueNotifier<double> _progress; late final ValueNotifier<double> _progress;
late final int _microSecondsInPeriod; late final int _microSecondsInPeriod;
late bool _isCompactMode=false;
@override @override
void initState() { void initState() {
@@ -38,6 +40,7 @@ class _CodeTimerProgressState extends State<CodeTimerProgress>
_progress = ValueNotifier<double>(0.0); _progress = ValueNotifier<double>(0.0);
_ticker = createTicker(_updateTimeRemaining); _ticker = createTicker(_updateTimeRemaining);
_ticker.start(); _ticker.start();
_isCompactMode = PreferenceService.instance.isCompactMode();
_updateTimeRemaining(Duration.zero); _updateTimeRemaining(Duration.zero);
} }
@@ -57,7 +60,7 @@ class _CodeTimerProgressState extends State<CodeTimerProgress>
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return SizedBox( return SizedBox(
height: 3, height: _isCompactMode ?1:3,
child: ValueListenableBuilder<double>( child: ValueListenableBuilder<double>(
valueListenable: _progress, valueListenable: _progress,
builder: (context, progress, _) { builder: (context, progress, _) {

View File

@@ -30,10 +30,12 @@ import 'package:move_to_background/move_to_background.dart';
class CodeWidget extends StatefulWidget { class CodeWidget extends StatefulWidget {
final Code code; final Code code;
final bool isCompactMode;
const CodeWidget( const CodeWidget(
this.code, { this.code, {
super.key, super.key,
required this.isCompactMode,
}); });
@override @override
@@ -50,12 +52,14 @@ class _CodeWidgetState extends State<CodeWidget> {
late bool _shouldShowLargeIcon; late bool _shouldShowLargeIcon;
late bool _hideCode; late bool _hideCode;
bool isMaskingEnabled = false; bool isMaskingEnabled = false;
bool isCompactMode = true;
int _codeTimeStep = -1; int _codeTimeStep = -1;
@override @override
void initState() { void initState() {
super.initState(); super.initState();
isMaskingEnabled = PreferenceService.instance.shouldHideCodes(); isMaskingEnabled = PreferenceService.instance.shouldHideCodes();
_hideCode = isMaskingEnabled; _hideCode = isMaskingEnabled;
_everySecondTimer = _everySecondTimer =
Timer.periodic(const Duration(milliseconds: 500), (Timer t) { Timer.periodic(const Duration(milliseconds: 500), (Timer t) {
@@ -116,7 +120,7 @@ class _CodeWidgetState extends State<CodeWidget> {
painter: PinBgPainter( painter: PinBgPainter(
color: colorScheme.pinnedBgColor, color: colorScheme.pinnedBgColor,
), ),
size: const Size(39, 39), size: isCompactMode ? const Size(24, 24) : const Size(39, 39),
), ),
), ),
if (widget.code.isTrashed && kDebugMode) if (widget.code.isTrashed && kDebugMode)
@@ -137,7 +141,9 @@ class _CodeWidgetState extends State<CodeWidget> {
CodeTimerProgressCache.getCachedWidget( CodeTimerProgressCache.getCachedWidget(
widget.code.period, widget.code.period,
), ),
const SizedBox(height: 28), widget.isCompactMode
? const SizedBox(height: 4)
: const SizedBox(height: 28),
Row( Row(
children: [ children: [
_shouldShowLargeIcon ? _getIcon() : const SizedBox.shrink(), _shouldShowLargeIcon ? _getIcon() : const SizedBox.shrink(),
@@ -145,22 +151,32 @@ class _CodeWidgetState extends State<CodeWidget> {
child: Column( child: Column(
children: [ children: [
_getTopRow(), _getTopRow(),
const SizedBox(height: 4), widget.isCompactMode
? const SizedBox.shrink()
: const SizedBox(height: 4),
_getBottomRow(l10n), _getBottomRow(l10n),
], ],
), ),
), ),
], ],
), ),
const SizedBox(height: 32), isCompactMode
? const SizedBox(height: 4)
: const SizedBox(height: 32),
], ],
), ),
if (widget.code.isPinned) ...[ if (widget.code.isPinned) ...[
Align( Align(
alignment: Alignment.topRight, alignment: Alignment.topRight,
child: Padding( child: Padding(
padding: const EdgeInsets.only(right: 6, top: 6), padding: widget.isCompactMode
child: SvgPicture.asset("assets/svg/pin-card.svg"), ? const EdgeInsets.only(right: 2, top: 2)
: const EdgeInsets.only(right: 6, top: 6),
child: SvgPicture.asset(
"assets/svg/pin-card.svg",
width: widget.isCompactMode ? 8 : null,
height: widget.isCompactMode ? 8 : null,
),
), ),
), ),
], ],
@@ -207,7 +223,9 @@ class _CodeWidgetState extends State<CodeWidget> {
} }
return Container( return Container(
margin: const EdgeInsets.only(left: 16, right: 16, bottom: 8, top: 8), margin: widget.isCompactMode
? const EdgeInsets.only(left: 16, right: 16, bottom: 6, top: 6)
: const EdgeInsets.only(left: 16, right: 16, bottom: 8, top: 8),
child: Builder( child: Builder(
builder: (context) { builder: (context) {
if (PlatformUtil.isDesktop()) { if (PlatformUtil.isDesktop()) {
@@ -248,6 +266,7 @@ class _CodeWidgetState extends State<CodeWidget> {
child: clippedCard(l10n), child: clippedCard(l10n),
); );
} }
double slideSpace = isCompactMode ? 4 : 8;
return Slidable( return Slidable(
key: ValueKey(widget.code.hashCode), key: ValueKey(widget.code.hashCode),
@@ -255,9 +274,7 @@ class _CodeWidgetState extends State<CodeWidget> {
extentRatio: 0.90, extentRatio: 0.90,
motion: const ScrollMotion(), motion: const ScrollMotion(),
children: [ children: [
const SizedBox( SizedBox(width: slideSpace),
width: 14,
),
SlidableAction( SlidableAction(
onPressed: _onShowQrPressed, onPressed: _onShowQrPressed,
backgroundColor: Colors.grey.withOpacity(0.1), backgroundColor: Colors.grey.withOpacity(0.1),
@@ -269,9 +286,7 @@ class _CodeWidgetState extends State<CodeWidget> {
padding: const EdgeInsets.only(left: 4, right: 0), padding: const EdgeInsets.only(left: 4, right: 0),
spacing: 8, spacing: 8,
), ),
const SizedBox( SizedBox(width: slideSpace),
width: 14,
),
CustomSlidableAction( CustomSlidableAction(
onPressed: _onPinPressed, onPressed: _onPinPressed,
backgroundColor: Colors.grey.withOpacity(0.1), backgroundColor: Colors.grey.withOpacity(0.1),
@@ -305,9 +320,7 @@ class _CodeWidgetState extends State<CodeWidget> {
), ),
padding: const EdgeInsets.only(left: 4, right: 0), padding: const EdgeInsets.only(left: 4, right: 0),
), ),
const SizedBox( SizedBox(width: slideSpace),
width: 14,
),
SlidableAction( SlidableAction(
onPressed: _onEditPressed, onPressed: _onEditPressed,
backgroundColor: Colors.grey.withOpacity(0.1), backgroundColor: Colors.grey.withOpacity(0.1),
@@ -319,9 +332,7 @@ class _CodeWidgetState extends State<CodeWidget> {
padding: const EdgeInsets.only(left: 4, right: 0), padding: const EdgeInsets.only(left: 4, right: 0),
spacing: 8, spacing: 8,
), ),
const SizedBox( SizedBox(width: slideSpace),
width: 14,
),
SlidableAction( SlidableAction(
onPressed: widget.code.isTrashed onPressed: widget.code.isTrashed
? _onDeletePressed ? _onDeletePressed
@@ -362,7 +373,7 @@ class _CodeWidgetState extends State<CodeWidget> {
type: MaterialType.transparency, type: MaterialType.transparency,
child: AutoSizeText( child: AutoSizeText(
_getFormattedCode(value), _getFormattedCode(value),
style: const TextStyle(fontSize: 24), style: TextStyle(fontSize: widget.isCompactMode ? 14 : 24),
maxLines: 1, maxLines: 1,
), ),
); );
@@ -389,8 +400,8 @@ class _CodeWidgetState extends State<CodeWidget> {
type: MaterialType.transparency, type: MaterialType.transparency,
child: Text( child: Text(
_getFormattedCode(value), _getFormattedCode(value),
style: const TextStyle( style: TextStyle(
fontSize: 18, fontSize: widget.isCompactMode ? 12 : 18,
color: Colors.grey, color: Colors.grey,
), ),
), ),
@@ -423,6 +434,7 @@ class _CodeWidgetState extends State<CodeWidget> {
} }
Widget _getTopRow() { Widget _getTopRow() {
bool isCompactMode = widget.isCompactMode;
return Padding( return Padding(
padding: const EdgeInsets.only(left: 16, right: 16), padding: const EdgeInsets.only(left: 16, right: 16),
child: Row( child: Row(
@@ -434,13 +446,15 @@ class _CodeWidgetState extends State<CodeWidget> {
children: [ children: [
Text( Text(
safeDecode(widget.code.issuer).trim(), safeDecode(widget.code.issuer).trim(),
style: Theme.of(context).textTheme.titleLarge, style: isCompactMode
? Theme.of(context).textTheme.bodyMedium
: Theme.of(context).textTheme.titleLarge,
), ),
const SizedBox(height: 2), if (!isCompactMode) const SizedBox(height: 2),
Text( Text(
safeDecode(widget.code.account).trim(), safeDecode(widget.code.account).trim(),
style: Theme.of(context).textTheme.bodySmall?.copyWith( style: Theme.of(context).textTheme.bodySmall?.copyWith(
fontSize: 12, fontSize: isCompactMode ? 12 : 12,
color: Colors.grey, color: Colors.grey,
), ),
), ),
@@ -471,12 +485,14 @@ class _CodeWidgetState extends State<CodeWidget> {
Widget _getIcon() { Widget _getIcon() {
return Padding( return Padding(
padding: _shouldShowLargeIcon padding: _shouldShowLargeIcon
? const EdgeInsets.only(left: 16) ? EdgeInsets.only(left: widget.isCompactMode ? 12 : 16)
: const EdgeInsets.all(0), : const EdgeInsets.all(0),
child: IconUtils.instance.getIcon( child: IconUtils.instance.getIcon(
context, context,
safeDecode(widget.code.issuer).trim(), safeDecode(widget.code.issuer).trim(),
width: _shouldShowLargeIcon ? 42 : 24, width: widget.isCompactMode
? (_shouldShowLargeIcon ? 32 : 24)
: (_shouldShowLargeIcon ? 42 : 24),
), ),
); );
} }

View File

@@ -76,6 +76,7 @@ class _HomePageState extends State<HomePage> {
String selectedTag = ""; String selectedTag = "";
bool _isTrashOpen = false; bool _isTrashOpen = false;
bool hasTrashedCodes = false; bool hasTrashedCodes = false;
bool isCompactMode = false;
@override @override
void initState() { void initState() {
@@ -244,6 +245,7 @@ class _HomePageState extends State<HomePage> {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
final l10n = context.l10n; final l10n = context.l10n;
isCompactMode = PreferenceService.instance.isCompactMode();
return PopScope( return PopScope(
onPopInvokedWithResult: (_, result) async { onPopInvokedWithResult: (_, result) async {
@@ -446,6 +448,7 @@ class _HomePageState extends State<HomePage> {
child: CodeWidget( child: CodeWidget(
key: ValueKey(code.hashCode), key: ValueKey(code.hashCode),
code, code,
isCompactMode: isCompactMode,
), ),
); );
}), }),
@@ -476,6 +479,7 @@ class _HomePageState extends State<HomePage> {
final codeState = _filteredCodes[index]; final codeState = _filteredCodes[index];
return CodeWidget( return CodeWidget(
codeState, codeState,
isCompactMode: isCompactMode,
); );
}), }),
itemCount: _filteredCodes.length, itemCount: _filteredCodes.length,

View File

@@ -1,7 +1,9 @@
import 'dart:io'; import 'dart:io';
import 'package:ente_auth/app/view/app.dart'; import 'package:ente_auth/app/view/app.dart';
import 'package:ente_auth/core/event_bus.dart';
import 'package:ente_auth/core/logging/super_logging.dart'; import 'package:ente_auth/core/logging/super_logging.dart';
import 'package:ente_auth/events/icons_changed_event.dart';
import 'package:ente_auth/l10n/l10n.dart'; import 'package:ente_auth/l10n/l10n.dart';
import 'package:ente_auth/locale.dart'; import 'package:ente_auth/locale.dart';
import 'package:ente_auth/services/preference_service.dart'; import 'package:ente_auth/services/preference_service.dart';
@@ -78,6 +80,22 @@ class _AdvancedSectionWidgetState extends State<AdvancedSectionWidget> {
), ),
), ),
sectionOptionSpacing, sectionOptionSpacing,
MenuItemWidget(
captionedTextWidget: CaptionedTextWidget(
title: l10n.compactMode,
),
trailingWidget: ToggleSwitchWidget(
value: () => PreferenceService.instance.isCompactMode(),
onChanged: () async {
await PreferenceService.instance.setCompactMode(
!PreferenceService.instance.isCompactMode(),
);
Bus.instance.fire(IconsChangedEvent());
setState(() {});
},
),
),
sectionOptionSpacing,
MenuItemWidget( MenuItemWidget(
captionedTextWidget: CaptionedTextWidget( captionedTextWidget: CaptionedTextWidget(
title: l10n.shouldHideCode, title: l10n.shouldHideCode,
@@ -88,7 +106,7 @@ class _AdvancedSectionWidgetState extends State<AdvancedSectionWidget> {
await PreferenceService.instance.setHideCodes( await PreferenceService.instance.setHideCodes(
!PreferenceService.instance.shouldHideCodes(), !PreferenceService.instance.shouldHideCodes(),
); );
if(PreferenceService.instance.shouldHideCodes()) { if (PreferenceService.instance.shouldHideCodes()) {
showToast(context, context.l10n.doubleTapToViewHiddenCode); showToast(context, context.l10n.doubleTapToViewHiddenCode);
} }
setState(() {}); setState(() {});