diff --git a/web/repertory/lib/constants.dart b/web/repertory/lib/constants.dart index d2ee089c..ea78352d 100644 --- a/web/repertory/lib/constants.dart +++ b/web/repertory/lib/constants.dart @@ -15,6 +15,7 @@ const boxShadowAlpha = 0.20; const databaseTypeList = ['rocksdb', 'sqlite']; const dialogAlpha = 0.95; const downloadTypeList = ['default', 'direct', 'ring_buffer']; +const dropDownAlpha = 99.0; const eventLevelList = ['critical', 'error', 'warn', 'info', 'debug', 'trace']; const gradientColors = [Color(0xFF0A0F1F), Color(0xFF1B1C1F)]; const gradientColors2 = [Color(0x07FFFFFF), Color(0x00000000)]; @@ -24,13 +25,15 @@ const logonWidth = 300.0; const outlineAlpha = 0.15; const padding = 16.0; const paddingSmall = padding / 2.0; -const primaryAlpha = 0.20; +const paddingLarge = padding * 2.0; +const primaryAlpha = 0.12; const primarySurfaceAlpha = 92.0; const protocolTypeList = ['http', 'https']; const providerTypeList = ['Encrypt', 'Remote', 'S3', 'Sia']; const ringBufferSizeList = ['128', '256', '512', '1024', '2048']; const secondaryAlpha = 0.45; const secondarySurfaceAlpha = 70.0; +const smallIconSize = 18.0; const surfaceContainerLowDark = Color(0xFF292A2D); const surfaceDark = Color(0xFF202124); diff --git a/web/repertory/lib/helpers.dart b/web/repertory/lib/helpers.dart index 9dbaccea..b06c0976 100644 --- a/web/repertory/lib/helpers.dart +++ b/web/repertory/lib/helpers.dart @@ -18,9 +18,10 @@ Future doShowDialog(BuildContext context, Widget child) => showDialog( return Theme( data: theme.copyWith( dialogTheme: DialogThemeData( - backgroundColor: scheme.surfaceDim.withValues( - alpha: constants.dialogAlpha, - ), + backgroundColor: darken( + scheme.primary, + 0.95, + ).withValues(alpha: constants.dropDownAlpha), surfaceTintColor: Colors.transparent, shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(constants.borderRadius), @@ -492,3 +493,11 @@ SettingsThemeData createSettingsTheme(ColorScheme scheme) { ), ); } + +Color darken(Color color, [double percentage = 0.1]) { + final hsl = HSLColor.fromColor(color); + final hslDark = hsl.withLightness( + (hsl.lightness - (hsl.lightness * percentage)).clamp(0.0, 1.0), + ); + return hslDark.toColor(); +} diff --git a/web/repertory/lib/models/settings.dart b/web/repertory/lib/models/settings.dart index 43ad7a0e..1f3946d1 100644 --- a/web/repertory/lib/models/settings.dart +++ b/web/repertory/lib/models/settings.dart @@ -8,7 +8,7 @@ import 'package:repertory/models/auth.dart'; class Settings with ChangeNotifier { final Auth _auth; bool _autoStart = false; - bool _enableAnimations = false; + bool _enableAnimations = true; Settings(this._auth) { _auth.addListener(() { diff --git a/web/repertory/lib/screens/auth_screen.dart b/web/repertory/lib/screens/auth_screen.dart index 38d70174..900918cd 100644 --- a/web/repertory/lib/screens/auth_screen.dart +++ b/web/repertory/lib/screens/auth_screen.dart @@ -151,7 +151,7 @@ class _AuthScreenState extends State { ), child: Padding( padding: const EdgeInsets.all( - constants.padding * 2.0, + constants.paddingLarge, ), child: Form( key: _formKey, @@ -187,7 +187,7 @@ class _AuthScreenState extends State { ], ), padding: const EdgeInsets.all( - constants.borderRadiusSmall, + constants.borderRadius, ), child: Image.asset( 'assets/images/repertory.png', @@ -196,7 +196,7 @@ class _AuthScreenState extends State { return Icon( Icons.folder, color: scheme.primary, - size: 40, + size: constants.largeIconSize, ); }, ), @@ -225,7 +225,7 @@ class _AuthScreenState extends State { ?.copyWith(color: scheme.onSurface), ), const SizedBox( - height: constants.padding * 2.0, + height: constants.paddingLarge, ), AppTextField( autofocus: true, @@ -275,9 +275,7 @@ class _AuthScreenState extends State { doLogin(auth); }, ), - const SizedBox( - height: constants.padding * 2.0, - ), + const SizedBox(height: constants.padding), SizedBox( height: 46, child: ElevatedButton( diff --git a/web/repertory/lib/screens/home_screen.dart b/web/repertory/lib/screens/home_screen.dart index 83e3340a..2ca07386 100644 --- a/web/repertory/lib/screens/home_screen.dart +++ b/web/repertory/lib/screens/home_screen.dart @@ -62,7 +62,9 @@ class _HomeScreeState extends State { child: const SizedBox( width: 56, height: 56, - child: Center(child: Icon(Icons.add, size: 28)), + child: Center( + child: Icon(Icons.add, size: constants.largeIconSize), + ), ), ), ), diff --git a/web/repertory/lib/widgets/app_dropdown.dart b/web/repertory/lib/widgets/app_dropdown.dart index b1277e28..2ee70578 100644 --- a/web/repertory/lib/widgets/app_dropdown.dart +++ b/web/repertory/lib/widgets/app_dropdown.dart @@ -78,7 +78,7 @@ class AppDropdown extends StatelessWidget { final pad = contentPadding ?? const EdgeInsets.all(constants.paddingSmall); final padW = (pad is EdgeInsets) ? (pad.left + pad.right) - : constants.paddingSmall * 2; + : constants.padding; final base = labelW + prefixW + arrowW + padW; @@ -93,7 +93,8 @@ class AppDropdown extends StatelessWidget { final scheme = theme.colorScheme; final effectiveFill = - fillColor ?? scheme.primary.withValues(alpha: constants.primaryAlpha); + fillColor ?? + darken(scheme.primary, 0.95).withValues(alpha: constants.dropDownAlpha); final effectiveTextStyle = textStyle ?? diff --git a/web/repertory/lib/widgets/app_edit_path_button.dart b/web/repertory/lib/widgets/app_edit_path_button.dart new file mode 100644 index 00000000..10a4e0f3 --- /dev/null +++ b/web/repertory/lib/widgets/app_edit_path_button.dart @@ -0,0 +1,43 @@ +// app_edit_path_button.dart + +import 'package:flutter/material.dart'; +import 'package:repertory/constants.dart' as constants; + +class AppEditPathButton extends StatelessWidget { + final bool enabled; + final VoidCallback onPressed; + + const AppEditPathButton({ + super.key, + required this.enabled, + required this.onPressed, + }); + + @override + Widget build(BuildContext context) { + final scheme = Theme.of(context).colorScheme; + + return Opacity( + opacity: enabled ? 1.0 : constants.secondaryAlpha, + child: OutlinedButton.icon( + onPressed: enabled ? onPressed : null, + icon: const Icon(Icons.edit, size: constants.smallIconSize), + label: const Text('Edit path'), + style: OutlinedButton.styleFrom( + foregroundColor: scheme.primary, + side: BorderSide( + color: scheme.primary.withValues(alpha: constants.secondaryAlpha), + width: 1.2, + ), + shape: RoundedRectangleBorder( + borderRadius: BorderRadius.circular(constants.borderRadiusSmall), + ), + padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 10), + backgroundColor: scheme.primary.withValues( + alpha: constants.outlineAlpha, + ), + ), + ), + ); + } +} diff --git a/web/repertory/lib/widgets/app_scaffold.dart b/web/repertory/lib/widgets/app_scaffold.dart index 4ec6b4c9..7c44817c 100644 --- a/web/repertory/lib/widgets/app_scaffold.dart +++ b/web/repertory/lib/widgets/app_scaffold.dart @@ -74,7 +74,7 @@ class AppScaffold extends StatelessWidget { return Icon( Icons.folder, color: scheme.primary, - size: 32, + size: constants.largeIconSize, ); }, ), diff --git a/web/repertory/lib/widgets/mount_widget.dart b/web/repertory/lib/widgets/mount_widget.dart index 0576aded..7f8307d6 100644 --- a/web/repertory/lib/widgets/mount_widget.dart +++ b/web/repertory/lib/widgets/mount_widget.dart @@ -7,6 +7,7 @@ import 'package:repertory/constants.dart' as constants; import 'package:repertory/helpers.dart'; import 'package:repertory/models/mount.dart'; import 'package:repertory/utils/safe_set_state_mixin.dart'; +import 'package:repertory/widgets/app_edit_path_button.dart'; import 'package:repertory/widgets/app_icon_button_framed.dart'; import 'package:repertory/widgets/app_toggle_button_framed.dart'; @@ -93,7 +94,7 @@ class _MountWidgetState extends State const SizedBox(height: constants.padding), Row( children: [ - _EditPathButton( + AppEditPathButton( enabled: mount.mounted == false, onPressed: () async { if (!_editEnabled) { @@ -240,38 +241,3 @@ class _MountWidgetState extends State super.dispose(); } } - -class _EditPathButton extends StatelessWidget { - final bool enabled; - final VoidCallback onPressed; - - const _EditPathButton({required this.enabled, required this.onPressed}); - - @override - Widget build(BuildContext context) { - final scheme = Theme.of(context).colorScheme; - - return Opacity( - opacity: enabled ? 1.0 : constants.secondaryAlpha, - child: OutlinedButton.icon( - onPressed: enabled ? onPressed : null, - icon: const Icon(Icons.edit, size: 18), - label: const Text('Edit path'), - style: OutlinedButton.styleFrom( - foregroundColor: scheme.primary, - side: BorderSide( - color: scheme.primary.withValues(alpha: constants.secondaryAlpha), - width: 1.2, - ), - shape: RoundedRectangleBorder( - borderRadius: BorderRadius.circular(constants.borderRadiusSmall), - ), - padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 10), - backgroundColor: scheme.primary.withValues( - alpha: constants.outlineAlpha, - ), - ), - ), - ); - } -}