mirror of
https://github.com/ente-io/ente.git
synced 2025-08-13 17:57:31 +00:00
[auth][mob] Add compact mode
This commit is contained in:
@@ -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",
|
||||||
|
@@ -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());
|
||||||
|
@@ -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) {
|
||||||
|
@@ -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, _) {
|
||||||
|
@@ -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),
|
||||||
),
|
),
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@@ -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,
|
||||||
|
@@ -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(() {});
|
||||||
|
Reference in New Issue
Block a user