feat: Handy - groessere Symbole, Suche/Mitglieder im Menue, Kontakt-Banner repariert, Schrift 110 %, federnde Knoepfe
Bernds Feedback 2026-10-07: - Schrift-Standard Handy 110 % (statt 115 %). - PyrIconBtn: im Handy-Layout Symbol 22 px (vorher fest 16), Flaeche 40, Tippflaeche 44; Farben aus dem Farbmodus statt fest verdrahtet. - Eingabeleiste: Anhaengen/GIF/Emoji/Senden auf dem Handy 22-23 px statt 12-13 px. - Chat-Kopf (Handy): Anrufen + Videoanruf sichtbar, Suchen + Mitglieder im Drei-Punkte-Menue. - Aufklappbarer DM-Kopf als Ebenen: Zurueck + Symbole bleiben oben, Profilbereich gleitet darunter und nutzt die volle Breite (vorher Name zu "p..." gekuerzt, Symbole rutschten in die Mitte); Kuerzel im Avatar mittig, skaliert mit. - SpringPress (widgets/spring_press.dart): federnde Druck-Rueckmeldung, aus bei "Animationen 0 %". Co-Authored-By: Claude Opus 5.5 <[email protected]>
This commit is contained in:
Bernd Steckmeister
co-authored by
Claude Opus 5.5
Claude Opus 5.5
parent
36875ef9cd
commit
382747cdb1
@@ -1,4 +1,9 @@
|
||||
import 'dart:math' as math;
|
||||
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:pyramid/core/appearance.dart';
|
||||
import 'package:pyramid/core/theme.dart';
|
||||
import 'package:pyramid/widgets/spring_press.dart';
|
||||
|
||||
// Simple hover-aware widget for desktop hover effects
|
||||
class HoverRegion extends StatefulWidget {
|
||||
@@ -29,7 +34,10 @@ class _HoverRegionState extends State<HoverRegion> {
|
||||
}
|
||||
}
|
||||
|
||||
// Icon button styled to match Pyramid's .icon-btn
|
||||
// Icon button styled to match Pyramid's .icon-btn.
|
||||
// Handy-Layout (Bernds Feedback 2026-10-07: Symbole zu klein): Symbol 22 px
|
||||
// statt 16, Fläche mind. 40 px, Tippfläche mind. 44 px. Farben folgen dem
|
||||
// gewählten Farbmodus, Druck federt (SpringPress).
|
||||
class PyrIconBtn extends StatefulWidget {
|
||||
final Widget icon;
|
||||
final VoidCallback? onPressed;
|
||||
@@ -39,6 +47,9 @@ class PyrIconBtn extends StatefulWidget {
|
||||
final Color? dangerColor;
|
||||
final double size;
|
||||
|
||||
/// Symbolgröße; ohne Angabe 16 (PC) bzw. 22 (Handy-Layout).
|
||||
final double? iconSize;
|
||||
|
||||
const PyrIconBtn({
|
||||
super.key,
|
||||
required this.icon,
|
||||
@@ -48,6 +59,7 @@ class PyrIconBtn extends StatefulWidget {
|
||||
this.activeColor,
|
||||
this.dangerColor,
|
||||
this.size = 32,
|
||||
this.iconSize,
|
||||
});
|
||||
|
||||
@override
|
||||
@@ -59,20 +71,16 @@ class _PyrIconBtnState extends State<PyrIconBtn> {
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final theme = Theme.of(context);
|
||||
final isDark = theme.brightness == Brightness.dark;
|
||||
final fgMuted = isDark ? const Color(0xFFA4A4B0) : const Color(0xFF54545E);
|
||||
final fg = isDark ? const Color(0xFFECECF0) : const Color(0xFF1A1A1F);
|
||||
final bgHover = isDark ? const Color(0xFF232330) : const Color(0xFFE9E7E1);
|
||||
final pt = PyramidTheme.of(context);
|
||||
final mobile = isMobileLayout(MediaQuery.sizeOf(context));
|
||||
|
||||
final color = widget.active
|
||||
? (widget.activeColor ?? const Color(0xFFF5A614))
|
||||
: _hovered ? fg : fgMuted;
|
||||
? (widget.activeColor ?? pt.accent)
|
||||
: _hovered ? pt.fg : pt.fgMuted;
|
||||
|
||||
final platform = Theme.of(context).platform;
|
||||
final isMobile = platform == TargetPlatform.android || platform == TargetPlatform.iOS;
|
||||
// On mobile, use a slightly larger touch target, but respect the requested size
|
||||
final touchSize = isMobile ? (widget.size + 8).clamp(32.0, 48.0) : widget.size;
|
||||
final boxSize = mobile ? math.max(widget.size, 40.0) : widget.size;
|
||||
final touchSize = mobile ? math.max(boxSize, 44.0) : boxSize;
|
||||
final iconSize = widget.iconSize ?? (mobile ? 22.0 : 16.0);
|
||||
|
||||
final btn = MouseRegion(
|
||||
cursor: SystemMouseCursors.click,
|
||||
@@ -80,23 +88,26 @@ class _PyrIconBtnState extends State<PyrIconBtn> {
|
||||
onExit: (_) => setState(() => _hovered = false),
|
||||
child: GestureDetector(
|
||||
onTap: widget.onPressed,
|
||||
child: SizedBox(
|
||||
width: touchSize,
|
||||
height: touchSize,
|
||||
child: Center(
|
||||
child: AnimatedContainer(
|
||||
duration: const Duration(milliseconds: 150),
|
||||
curve: Curves.easeOutCubic,
|
||||
width: widget.size,
|
||||
height: widget.size,
|
||||
decoration: BoxDecoration(
|
||||
color: _hovered ? bgHover : Colors.transparent,
|
||||
borderRadius: BorderRadius.circular(7),
|
||||
),
|
||||
child: Center(
|
||||
child: IconTheme(
|
||||
data: IconThemeData(color: color, size: 16),
|
||||
child: widget.icon,
|
||||
child: SpringPress(
|
||||
enabled: widget.onPressed != null,
|
||||
child: SizedBox(
|
||||
width: touchSize,
|
||||
height: touchSize,
|
||||
child: Center(
|
||||
child: AnimatedContainer(
|
||||
duration: const Duration(milliseconds: 150),
|
||||
curve: Curves.easeOutCubic,
|
||||
width: boxSize,
|
||||
height: boxSize,
|
||||
decoration: BoxDecoration(
|
||||
color: _hovered ? pt.bgHover : Colors.transparent,
|
||||
borderRadius: BorderRadius.circular(mobile ? boxSize / 2 : 7),
|
||||
),
|
||||
child: Center(
|
||||
child: IconTheme(
|
||||
data: IconThemeData(color: color, size: iconSize),
|
||||
child: widget.icon,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
|
||||
@@ -0,0 +1,71 @@
|
||||
import 'package:flutter/widgets.dart';
|
||||
import 'package:pyramid/core/theme.dart';
|
||||
|
||||
/// Federnde Druck-Rückmeldung: beim Drücken leicht kleiner, beim Loslassen
|
||||
/// elastisch zurück (Bernds Wunsch 2026-10-07: mehr „Springiness“).
|
||||
///
|
||||
/// Hört nur passiv mit (Listener) – Tippen, Halten und Scrollen bleiben beim
|
||||
/// Kind bzw. beim umgebenden Scrollbereich. Bewegt sich der Finger (Scrollen),
|
||||
/// wird die Rückmeldung sofort abgebrochen. Mit „Animationen: 0 %“ in den
|
||||
/// Einstellungen (PyramidTheme.motion) ist sie aus.
|
||||
class SpringPress extends StatefulWidget {
|
||||
const SpringPress({
|
||||
super.key,
|
||||
required this.child,
|
||||
this.pressedScale = 0.88,
|
||||
this.enabled = true,
|
||||
});
|
||||
|
||||
final Widget child;
|
||||
final double pressedScale;
|
||||
final bool enabled;
|
||||
|
||||
@override
|
||||
State<SpringPress> createState() => _SpringPressState();
|
||||
}
|
||||
|
||||
class _SpringPressState extends State<SpringPress> {
|
||||
static const _moveSlop = 8.0;
|
||||
bool _pressed = false;
|
||||
Offset? _down;
|
||||
|
||||
void _set(bool pressed) {
|
||||
if (_pressed != pressed && mounted) setState(() => _pressed = pressed);
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final motion = PyramidTheme.of(context).motion;
|
||||
if (!widget.enabled || motion < 0.05) return widget.child;
|
||||
return Listener(
|
||||
behavior: HitTestBehavior.translucent,
|
||||
onPointerDown: (e) {
|
||||
_down = e.position;
|
||||
_set(true);
|
||||
},
|
||||
onPointerMove: (e) {
|
||||
final d = _down;
|
||||
if (d != null && (e.position - d).distance > _moveSlop) _set(false);
|
||||
},
|
||||
onPointerUp: (_) => _set(false),
|
||||
onPointerCancel: (_) => _set(false),
|
||||
child: AnimatedScale(
|
||||
scale: _pressed ? widget.pressedScale : 1.0,
|
||||
duration: _pressed
|
||||
? const Duration(milliseconds: 90)
|
||||
: Duration(milliseconds: (420 * motion).round().clamp(120, 420)),
|
||||
curve: _pressed ? Curves.easeOut : Curves.elasticOut,
|
||||
child: widget.child,
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/// Gemeinsame „federnde“ Kurve für Ein-/Ausblendungen (leichtes Überschwingen).
|
||||
const springyCurve = Cubic(0.18, 0.89, 0.32, 1.12);
|
||||
|
||||
/// Dauer, skaliert mit der Einstellung „Animationen“ (0 = sofort).
|
||||
Duration motionDuration(BuildContext context, int milliseconds) {
|
||||
final motion = PyramidTheme.of(context).motion;
|
||||
return Duration(milliseconds: (milliseconds * motion).round());
|
||||
}
|
||||
Reference in New Issue
Block a user