feat(studio): award-tier visual polish
Brightness-aware elevation tokens (FaiElevation low/medium) applied to cards, sheets and the sidebar active item; gentle hover-lift on Store + Doc cards; a longer, eased sidebar expand using the under-used FaiMotion.slow; and a branded empty state carrying the F∆I delta mark with warmer spacing. Subtle, Linear/Raycast-style — both light and dark themes tuned. Signed-off-by: flemming-it <stefan.a.flemming@googlemail.com>
This commit is contained in:
flemming-it
parent
5313266cc4
commit
f0a944dce7
4 changed files with 261 additions and 146 deletions
|
|
@ -1792,7 +1792,7 @@ class _FeaturedTile extends StatelessWidget {
|
|||
}
|
||||
}
|
||||
|
||||
class _StoreCard extends StatelessWidget {
|
||||
class _StoreCard extends StatefulWidget {
|
||||
final StoreItem item;
|
||||
final String locale;
|
||||
|
||||
|
|
@ -1810,6 +1810,19 @@ class _StoreCard extends StatelessWidget {
|
|||
required this.onInstall,
|
||||
});
|
||||
|
||||
@override
|
||||
State<_StoreCard> createState() => _StoreCardState();
|
||||
}
|
||||
|
||||
class _StoreCardState extends State<_StoreCard> {
|
||||
bool _hovered = false;
|
||||
|
||||
StoreItem get item => widget.item;
|
||||
String get locale => widget.locale;
|
||||
String? get installedVersion => widget.installedVersion;
|
||||
VoidCallback get onTap => widget.onTap;
|
||||
VoidCallback get onInstall => widget.onInstall;
|
||||
|
||||
/// True iff the operator has this module installed AND the
|
||||
/// store-index offers a strictly-newer best_version. Uses a
|
||||
/// dotted-numeric semver-light compare so 0.10.5 > 0.9.99.
|
||||
|
|
@ -1836,6 +1849,22 @@ class _StoreCard extends StatelessWidget {
|
|||
final notInstallable = !installable && !item.installed;
|
||||
return Opacity(
|
||||
opacity: notInstallable ? 0.6 : 1.0,
|
||||
// Hover-lift: a 2px rise plus shadow bump signals the card
|
||||
// is clickable without a heavy hover fill. Resting state
|
||||
// carries the low elevation so cards read as physical.
|
||||
child: MouseRegion(
|
||||
onEnter: (_) => setState(() => _hovered = true),
|
||||
onExit: (_) => setState(() => _hovered = false),
|
||||
child: AnimatedContainer(
|
||||
duration: FaiMotion.base,
|
||||
curve: FaiMotion.easing,
|
||||
transform: Matrix4.translationValues(0, _hovered ? -2 : 0, 0),
|
||||
decoration: BoxDecoration(
|
||||
borderRadius: BorderRadius.circular(FaiRadius.md),
|
||||
boxShadow: _hovered
|
||||
? FaiElevation.medium(theme.brightness)
|
||||
: FaiElevation.low(theme.brightness),
|
||||
),
|
||||
child: Material(
|
||||
color: theme.colorScheme.surfaceContainer,
|
||||
borderRadius: BorderRadius.circular(FaiRadius.md),
|
||||
|
|
@ -1876,7 +1905,10 @@ class _StoreCard extends StatelessWidget {
|
|||
Text(
|
||||
item.category.isEmpty
|
||||
? '—'
|
||||
: _categoryDisplayName(context, item.category),
|
||||
: _categoryDisplayName(
|
||||
context,
|
||||
item.category,
|
||||
),
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
style: theme.textTheme.bodySmall?.copyWith(
|
||||
|
|
@ -1980,6 +2012,8 @@ class _StoreCard extends StatelessWidget {
|
|||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -2003,6 +2037,7 @@ class _StoreDetailSheet extends StatefulWidget {
|
|||
context: context,
|
||||
isScrollControlled: true,
|
||||
backgroundColor: Theme.of(context).colorScheme.surfaceContainer,
|
||||
elevation: 8,
|
||||
shape: const RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.vertical(top: Radius.circular(FaiRadius.md)),
|
||||
),
|
||||
|
|
|
|||
|
|
@ -61,6 +61,50 @@ class FaiRadius {
|
|||
static const md = 10.0;
|
||||
}
|
||||
|
||||
/// Elevation tokens. Subtle, Linear/Raycast-style depth — never
|
||||
/// heavy drop-shadows. Two resting levels plus a hover bump.
|
||||
/// Brightness-aware: dark themes lean on deeper, lower-alpha
|
||||
/// shadows (they read as ambient occlusion against near-black
|
||||
/// surfaces); light themes use softer, slightly larger spreads.
|
||||
class FaiElevation {
|
||||
FaiElevation._();
|
||||
|
||||
/// Resting elevation for cards and sheets. Just enough to lift
|
||||
/// a surface off the canvas without announcing itself.
|
||||
static List<BoxShadow> low(Brightness b) => b == Brightness.dark
|
||||
? const [
|
||||
BoxShadow(
|
||||
color: Color(0x33000000),
|
||||
blurRadius: 6,
|
||||
offset: Offset(0, 2),
|
||||
),
|
||||
]
|
||||
: const [
|
||||
BoxShadow(
|
||||
color: Color(0x14000000),
|
||||
blurRadius: 8,
|
||||
offset: Offset(0, 2),
|
||||
),
|
||||
];
|
||||
|
||||
/// Raised elevation for hover-lifted cards and floating sheets.
|
||||
static List<BoxShadow> medium(Brightness b) => b == Brightness.dark
|
||||
? const [
|
||||
BoxShadow(
|
||||
color: Color(0x4D000000),
|
||||
blurRadius: 16,
|
||||
offset: Offset(0, 6),
|
||||
),
|
||||
]
|
||||
: const [
|
||||
BoxShadow(
|
||||
color: Color(0x1F000000),
|
||||
blurRadius: 20,
|
||||
offset: Offset(0, 8),
|
||||
),
|
||||
];
|
||||
}
|
||||
|
||||
/// Animation durations. Keep them under 300ms for power-user feel.
|
||||
class FaiMotion {
|
||||
FaiMotion._();
|
||||
|
|
|
|||
|
|
@ -1,9 +1,17 @@
|
|||
// FaiEmptyState — gracious empty / loading / error placeholder.
|
||||
// Replaces "(no data)" strings with one tone, one icon, one tip.
|
||||
//
|
||||
// The blank surface is where an app most easily feels unfinished,
|
||||
// so this state is deliberately *designed*: the F∆I delta (∆)
|
||||
// sits as a soft watermark behind the icon badge, the badge
|
||||
// carries a whisper of elevation, and the copy breathes. The
|
||||
// result reads "nothing here yet, on purpose" rather than
|
||||
// "something is broken".
|
||||
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
import '../theme/tokens.dart';
|
||||
import 'fai_delta_mark.dart';
|
||||
|
||||
class FaiEmptyState extends StatelessWidget {
|
||||
final IconData icon;
|
||||
|
|
@ -30,40 +38,67 @@ class FaiEmptyState extends StatelessWidget {
|
|||
final color = iconColor ?? theme.colorScheme.onSurfaceVariant;
|
||||
return Center(
|
||||
child: ConstrainedBox(
|
||||
constraints: const BoxConstraints(maxWidth: 420),
|
||||
constraints: const BoxConstraints(maxWidth: 440),
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(FaiSpace.xxl),
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
// Brand hero: an oversized, low-opacity ∆ watermark
|
||||
// anchors the composition while the contextual icon
|
||||
// badge sits crisply on top — so every empty surface
|
||||
// still carries the F∆I signature, never a bare icon.
|
||||
SizedBox(
|
||||
width: 112,
|
||||
height: 112,
|
||||
child: Stack(
|
||||
alignment: Alignment.center,
|
||||
children: [
|
||||
Opacity(
|
||||
opacity: 0.10,
|
||||
child: FaiDeltaMark(
|
||||
color: theme.colorScheme.primary,
|
||||
size: 112,
|
||||
),
|
||||
),
|
||||
Container(
|
||||
width: 56,
|
||||
height: 56,
|
||||
width: 60,
|
||||
height: 60,
|
||||
decoration: BoxDecoration(
|
||||
color: color.withValues(alpha: 0.1),
|
||||
color: theme.colorScheme.surfaceContainerHigh,
|
||||
shape: BoxShape.circle,
|
||||
border: Border.all(
|
||||
color: color.withValues(alpha: 0.18),
|
||||
),
|
||||
child: Icon(icon, size: 24, color: color),
|
||||
boxShadow: FaiElevation.low(theme.brightness),
|
||||
),
|
||||
const SizedBox(height: FaiSpace.lg),
|
||||
child: Icon(icon, size: 26, color: color),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
const SizedBox(height: FaiSpace.xl),
|
||||
Text(
|
||||
title,
|
||||
textAlign: TextAlign.center,
|
||||
style: theme.textTheme.titleMedium,
|
||||
style: theme.textTheme.titleMedium?.copyWith(
|
||||
fontWeight: FontWeight.w600,
|
||||
),
|
||||
),
|
||||
if (hint != null) ...[
|
||||
const SizedBox(height: FaiSpace.sm),
|
||||
Text(
|
||||
hint!,
|
||||
textAlign: TextAlign.center,
|
||||
style: theme.textTheme.bodySmall?.copyWith(
|
||||
style: theme.textTheme.bodyMedium?.copyWith(
|
||||
color: theme.colorScheme.onSurfaceVariant,
|
||||
height: 1.5,
|
||||
),
|
||||
),
|
||||
],
|
||||
if (action != null) ...[
|
||||
const SizedBox(height: FaiSpace.lg),
|
||||
const SizedBox(height: FaiSpace.xl),
|
||||
action!,
|
||||
],
|
||||
],
|
||||
|
|
|
|||
|
|
@ -26,6 +26,7 @@ class FaiModuleSheet extends StatefulWidget {
|
|||
context: context,
|
||||
backgroundColor: Theme.of(context).colorScheme.surfaceContainer,
|
||||
isScrollControlled: true,
|
||||
elevation: 8,
|
||||
shape: const RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.vertical(top: Radius.circular(FaiRadius.md)),
|
||||
),
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue