kolo/Casha
1
0
Fork 0
mirror of https://github.com/koloideal/Casha.git synced 2026-06-10 10:25:28 +03:00
Code Issues Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
kolo
2026-03-21 11:27:16 +03:00
parent 5c88248cf5
commit 3e7242cc23
1 changed files with 98 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/features/dashboard/widgets/color_editor_overlay.dart
+97 -102
View File
@@ -30,10 +30,8 @@ class _FullScreenBlurOverlayState extends State<FullScreenBlurOverlay> {
final mq = MediaQuery.of(widget.context); final mq = MediaQuery.of(widget.context);
final cardTop = mq.padding.top + kToolbarHeight + 16; final cardTop = mq.padding.top + kToolbarHeight + 16;
const cardHeight = 220.0; const cardHeight = 220.0;
final panelTop = cardTop + cardHeight + 16; final panelTop = cardTop + cardHeight + 32;
const panelHeight = 460.0;
// Fixed panel height — smaller than before, no bottom stretching
const panelHeight = 310.0;
return Material( return Material(
color: Colors.transparent, color: Colors.transparent,
@@ -71,7 +69,6 @@ class _FullScreenBlurOverlayState extends State<FullScreenBlurOverlay> {
top: panelTop, top: panelTop,
left: 20, left: 20,
right: 20, right: 20,
// No bottom — height is explicit, panel won't stretch to screen bottom
child: GestureDetector( child: GestureDetector(
onTap: () {}, onTap: () {},
behavior: HitTestBehavior.opaque, behavior: HitTestBehavior.opaque,
@@ -113,7 +110,6 @@ class _FullScreenBlurOverlayState extends State<FullScreenBlurOverlay> {
dash.overlayEntry?.markNeedsBuild(); dash.overlayEntry?.markNeedsBuild();
} }
// In solid mode, editing is always "primary" (the solid color)
final currentHSV = dash.editingPrimary final currentHSV = dash.editingPrimary
? dash.tempPrimaryHSV ? dash.tempPrimaryHSV
: dash.tempSecondaryHSV; : dash.tempSecondaryHSV;
@@ -125,18 +121,19 @@ class _FullScreenBlurOverlayState extends State<FullScreenBlurOverlay> {
mainAxisSize: MainAxisSize.max, mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
children: [ children: [
// ── Row 1: [──Primary──] [──Secondary──] | [Solid] [X] ──
Row( Row(
children: [ children: [
// Expanded tabs fill available width equally
Expanded( Expanded(
child: PanelTab( child: PanelTab(
label: 'Primary', label: 'Primary',
isSelected: dash.editingPrimary && !isSolid, isSelected: dash.editingPrimary,
color: dash.tempPrimary, color: dash.tempPrimary,
onTap: isSolid ? null : () { isDimmed: isSolid,
dash.setState(() => dash.editingPrimary = true); onTap: () {
dash.setState(() {
if (isSolid) dash.tempGradientType = GradientType.linear;
dash.editingPrimary = true;
});
setPanelState(() {}); setPanelState(() {});
dash.overlayEntry?.markNeedsBuild(); dash.overlayEntry?.markNeedsBuild();
}, },
@@ -146,10 +143,14 @@ class _FullScreenBlurOverlayState extends State<FullScreenBlurOverlay> {
Expanded( Expanded(
child: PanelTab( child: PanelTab(
label: 'Secondary', label: 'Secondary',
isSelected: !dash.editingPrimary && !isSolid, isSelected: !dash.editingPrimary,
color: dash.tempSecondary, color: dash.tempSecondary,
onTap: isSolid ? null : () { isDimmed: isSolid,
dash.setState(() => dash.editingPrimary = false); onTap: () {
dash.setState(() {
if (isSolid) dash.tempGradientType = GradientType.linear;
dash.editingPrimary = false;
});
setPanelState(() {}); setPanelState(() {});
dash.overlayEntry?.markNeedsBuild(); dash.overlayEntry?.markNeedsBuild();
}, },
@@ -166,7 +167,6 @@ class _FullScreenBlurOverlayState extends State<FullScreenBlurOverlay> {
.withOpacity(0.15), .withOpacity(0.15),
), ),
), ),
// Solid toggle
GestureDetector( GestureDetector(
onTap: () { onTap: () {
dash.setState(() { dash.setState(() {
@@ -214,7 +214,6 @@ class _FullScreenBlurOverlayState extends State<FullScreenBlurOverlay> {
), ),
), ),
const SizedBox(width: 8), const SizedBox(width: 8),
// Close button
GestureDetector( GestureDetector(
onTap: () => dash.closeOverlay(apply: false), onTap: () => dash.closeOverlay(apply: false),
child: Container( child: Container(
@@ -230,17 +229,10 @@ class _FullScreenBlurOverlayState extends State<FullScreenBlurOverlay> {
), ),
], ],
), ),
const SizedBox(height: 10), const SizedBox(height: 10),
// ── Spectrum + hue + preview ──
// LayoutBuilder captures finite height from Expanded.
// Spectrum alone is wrapped in IgnorePointer when solid.
// Hue slider is ALWAYS active (used to pick the solid color too).
Expanded( Expanded(
child: LayoutBuilder( child: LayoutBuilder(
builder: (lbCtx, constraints) { builder: (lbCtx, constraints) {
// Reserve space for: hue(20) + gap(8) + preview(26) + 2×gap(8) = 62
const reservedBelow = 62.0; const reservedBelow = 62.0;
final spectrumH = final spectrumH =
(constraints.maxHeight - reservedBelow).clamp( (constraints.maxHeight - reservedBelow).clamp(
@@ -250,41 +242,45 @@ class _FullScreenBlurOverlayState extends State<FullScreenBlurOverlay> {
mainAxisSize: MainAxisSize.min, mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.stretch, crossAxisAlignment: CrossAxisAlignment.stretch,
children: [ children: [
// Spectrum — dimmed & blocked in Solid mode ClipRRect(
IgnorePointer( borderRadius: BorderRadius.circular(10),
ignoring: isSolid, child: SizedBox(
child: AnimatedOpacity( height: spectrumH,
duration: const Duration(milliseconds: 200), child: ColorPickerArea(
opacity: isSolid ? 0.3 : 1.0, currentHSV,
child: ClipRRect( onHSVChanged,
borderRadius: BorderRadius.circular(10), PaletteType.hsvWithHue,
child: SizedBox( ),
height: spectrumH, ),
child: ColorPickerArea( ),
currentHSV, const SizedBox(height: 8),
onHSVChanged, Theme(
PaletteType.hsvWithHue, data: Theme.of(widget.context).copyWith(
), sliderTheme: const SliderThemeData(
thumbShape: RoundSliderThumbShape(
enabledThumbRadius: 8,
elevation: 0,
pressedElevation: 0,
),
overlayShape: RoundSliderOverlayShape(
overlayRadius: 0,
),
),
),
child: ClipRRect(
borderRadius: BorderRadius.circular(6),
child: SizedBox(
height: 20,
child: ColorPickerSlider(
TrackType.hue,
currentHSV,
onHSVChanged,
displayThumbColor: true,
), ),
), ),
), ),
), ),
const SizedBox(height: 8), const SizedBox(height: 8),
// Hue slider — ALWAYS active (works for both gradient & solid)
ClipRRect(
borderRadius: BorderRadius.circular(6),
child: SizedBox(
height: 20,
child: ColorPickerSlider(
TrackType.hue,
currentHSV,
onHSVChanged,
displayThumbColor: true,
),
),
),
const SizedBox(height: 8),
// Color hex preview row
IgnorePointer( IgnorePointer(
ignoring: isSolid, ignoring: isSolid,
child: AnimatedOpacity( child: AnimatedOpacity(
@@ -401,10 +397,7 @@ class _FullScreenBlurOverlayState extends State<FullScreenBlurOverlay> {
}, },
), ),
), ),
const SizedBox(height: 8), const SizedBox(height: 8),
// ── Gradient type row (dimmed when Solid) ──
IgnorePointer( IgnorePointer(
ignoring: isSolid, ignoring: isSolid,
child: AnimatedOpacity( child: AnimatedOpacity(
@@ -497,10 +490,7 @@ class _FullScreenBlurOverlayState extends State<FullScreenBlurOverlay> {
), ),
), ),
), ),
const SizedBox(height: 8), const SizedBox(height: 8),
// ── Reset + Apply ──
Row( Row(
children: [ children: [
Expanded( Expanded(
@@ -577,14 +567,16 @@ class PanelTab extends StatelessWidget {
final String label; final String label;
final bool isSelected; final bool isSelected;
final Color color; final Color color;
final VoidCallback? onTap; final bool isDimmed;
final VoidCallback onTap;
const PanelTab({ const PanelTab({
super.key, super.key,
required this.label, required this.label,
required this.isSelected, required this.isSelected,
required this.color, required this.color,
this.onTap, required this.isDimmed,
required this.onTap,
}); });
@override @override
@@ -598,51 +590,54 @@ class PanelTab extends StatelessWidget {
return GestureDetector( return GestureDetector(
onTap: onTap, onTap: onTap,
child: AnimatedContainer( child: AnimatedOpacity(
duration: const Duration(milliseconds: 150), duration: const Duration(milliseconds: 200),
// Fill full width of Expanded slot (no padding-based width) opacity: isDimmed ? 0.5 : 1.0,
width: double.infinity, child: AnimatedContainer(
padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 8), duration: const Duration(milliseconds: 150),
decoration: BoxDecoration( width: double.infinity,
color: isSelected ? color.withOpacity(0.15) : Colors.transparent, padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 8),
borderRadius: BorderRadius.circular(10), decoration: BoxDecoration(
border: Border.all( color: isSelected ? color.withOpacity(0.15) : Colors.transparent,
color: isSelected ? color : unselectedBorder, borderRadius: BorderRadius.circular(10),
width: 1.5, border: Border.all(
color: isSelected ? color : unselectedBorder,
width: 1.5,
),
), ),
), child: Row(
child: Row( mainAxisSize: MainAxisSize.min,
mainAxisSize: MainAxisSize.min, mainAxisAlignment: MainAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center, children: [
children: [ Container(
Container( width: 10,
width: 10, height: 10,
height: 10, decoration: BoxDecoration(
decoration: BoxDecoration( color: color,
color: color, shape: BoxShape.circle,
shape: BoxShape.circle, border: Border.all(
border: Border.all( color: isDark ? Colors.white30 : Colors.black12,
color: isDark ? Colors.white30 : Colors.black12, width: 1,
width: 1, ),
), ),
), ),
), const SizedBox(width: 6),
const SizedBox(width: 6), Flexible(
Flexible( child: Text(
child: Text( label,
label, overflow: TextOverflow.ellipsis,
overflow: TextOverflow.ellipsis, maxLines: 1,
maxLines: 1, textAlign: TextAlign.center,
textAlign: TextAlign.center, style: TextStyle(
style: TextStyle( fontSize: 12,
fontSize: 12, fontWeight:
fontWeight: isSelected ? FontWeight.w600 : FontWeight.normal,
isSelected ? FontWeight.w600 : FontWeight.normal, color: isSelected ? color : unselectedText,
color: isSelected ? color : unselectedText, ),
), ),
), ),
), ],
], ),
), ),
), ),
); );