Skip to content

Commit

Permalink
Style fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
@veloce
veloce committed Sep 13, 2024
1 parent 4b1d624 commit f5eaed7
Show file tree
Hide file tree
Showing 17 changed files with 349 additions and 308 deletions.
23 changes: 11 additions & 12 deletions lib/src/styles/styles.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,17 @@ abstract class Styles {
static const bodyPadding =
EdgeInsets.symmetric(vertical: 16.0, horizontal: 16.0);
static const verticalBodyPadding = EdgeInsets.symmetric(vertical: 16.0);
static const horizontalBodyPadding = EdgeInsets.symmetric(horizontal: 16.0);
static const sectionBottomPadding = EdgeInsets.only(bottom: 16.0);
static const sectionTopPadding = EdgeInsets.only(top: 16.0);
static const bodySectionPadding = EdgeInsets.all(16.0);

/// Horizontal and bottom padding for the body section.
static const bodySectionBottomPadding = EdgeInsets.only(
bottom: 16.0,
left: 16.0,
right: 16.0,
);

// colors
static Color? expansionTileColor(BuildContext context) =>
Expand Down Expand Up @@ -188,18 +199,6 @@ abstract class Styles {
),
);

/// Gets horizontal padding according to platform.
static const horizontalBodyPadding = EdgeInsets.symmetric(horizontal: 16.0);
static const sectionBottomPadding = EdgeInsets.only(bottom: 16);
static const sectionTopPadding = EdgeInsets.only(top: 16);

/// Horizontal and bottom padding for a body section
static EdgeInsetsGeometry get bodySectionPadding =>
horizontalBodyPadding.add(sectionBottomPadding).add(sectionTopPadding);

static EdgeInsetsGeometry get bodySectionBottomPadding =>
horizontalBodyPadding.add(sectionBottomPadding);

// from:
// https://github.com/flutter/flutter/blob/796c8ef79279f9c774545b3771238c3098dbefab/packages/flutter/lib/src/cupertino/bottom_tab_bar.dart#L17
static const CupertinoDynamicColor cupertinoDefaultTabBarBorderColor =
Expand Down
4 changes: 2 additions & 2 deletions lib/src/view/board_editor/board_editor_menu.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,9 +73,9 @@ class BoardEditorMenu extends ConsumerWidget {
);
}),
if (editorState.enPassantOptions.isNotEmpty) ...[
Padding(
const Padding(
padding: Styles.bodySectionPadding,
child: const Text('En passant', style: Styles.subtitle),
child: Text('En passant', style: Styles.subtitle),
),
Wrap(
spacing: 8.0,
Expand Down
212 changes: 190 additions & 22 deletions lib/src/view/clock/clock_screen.dart
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,20 @@
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:lichess_mobile/src/model/clock/clock_controller.dart';
import 'package:lichess_mobile/src/model/common/time_increment.dart';
import 'package:lichess_mobile/src/styles/styles.dart';
import 'package:lichess_mobile/src/utils/immersive_mode.dart';
import 'package:lichess_mobile/src/utils/l10n_context.dart';
import 'package:lichess_mobile/src/view/clock/clock_settings.dart';
import 'package:lichess_mobile/src/view/clock/clock_tile.dart';
import 'package:lichess_mobile/src/widgets/adaptive_bottom_sheet.dart';
import 'package:lichess_mobile/src/widgets/buttons.dart';
import 'package:lichess_mobile/src/widgets/countdown_clock.dart';

class ClockScreen extends StatefulWidget {
const ClockScreen({super.key});
import 'custom_clock_settings.dart';

@override
State<ClockScreen> createState() => _ClockScreenState();
}
class ClockScreen extends StatelessWidget {
const ClockScreen({super.key});

class _ClockScreenState extends State<ClockScreen> {
@override
Widget build(BuildContext context) {
return const ImmersiveModeWidget(
Expand All @@ -28,23 +30,189 @@ class _Body extends ConsumerWidget {
Widget build(BuildContext context, WidgetRef ref) {
final state = ref.watch(clockControllerProvider);

return Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Expanded(
child: ClockTile(
playerType: ClockPlayerType.top,
clockState: state,
return OrientationBuilder(
builder: (context, orientation) {
return (orientation == Orientation.portrait ? Column.new : Row.new)(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Expanded(
child: ClockTile(
orientation: orientation,
playerType: ClockPlayerType.top,
clockState: state,
),
),
ClockSettings(orientation: orientation),
Expanded(
child: ClockTile(
orientation: orientation,
playerType: ClockPlayerType.bottom,
clockState: state,
),
),
],
);
},
);
}
}

class ClockTile extends ConsumerWidget {
const ClockTile({
required this.playerType,
required this.clockState,
required this.orientation,
super.key,
});

final ClockPlayerType playerType;
final ClockState clockState;
final Orientation orientation;

@override
Widget build(BuildContext context, WidgetRef ref) {
final colorScheme = Theme.of(context).colorScheme;
final backgroundColor = clockState.isLoser(playerType)
? context.lichessColors.error
: !clockState.paused && clockState.isPlayersTurn(playerType)
? colorScheme.primary
: clockState.activeSide == playerType
? colorScheme.secondaryContainer
: colorScheme.surfaceContainer;

final clockStyle = ClockStyle(
textColor: clockState.activeSide == playerType
? colorScheme.onSecondaryContainer
: colorScheme.onSurface,
activeTextColor: colorScheme.onPrimary,
emergencyTextColor: Colors.white,
backgroundColor: Colors.transparent,
activeBackgroundColor: Colors.transparent,
emergencyBackgroundColor: const Color(0xFF673431),
);

return RotatedBox(
quarterTurns: orientation == Orientation.portrait &&
playerType == ClockPlayerType.top
? 2
: 0,
child: Stack(
alignment: Alignment.center,
fit: StackFit.expand,
children: [
Material(
color: backgroundColor,
child: InkWell(
splashFactory: NoSplash.splashFactory,
onTap: !clockState.started
? () {
ref
.read(clockControllerProvider.notifier)
.setActiveSide(playerType);
}
: null,
onTapDown: clockState.started &&
clockState.isPlayersMoveAllowed(playerType)
? (_) {
ref
.read(clockControllerProvider.notifier)
.onTap(playerType);
}
: null,
child: Padding(
padding: const EdgeInsets.all(40),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.center,
children: [
FittedBox(
child: AnimatedCrossFade(
duration: const Duration(milliseconds: 300),
firstChild: CountdownClock(
key: Key('${clockState.id}-$playerType'),
padLeft: true,
clockStyle: clockStyle,
duration: clockState.getDuration(playerType),
active: clockState.isActivePlayer(playerType),
onFlag: () {
ref
.read(clockControllerProvider.notifier)
.setLoser(playerType);
},
onStop: (remaining) {
ref
.read(clockControllerProvider.notifier)
.updateDuration(playerType, remaining);
},
),
secondChild: const Icon(Icons.flag),
crossFadeState: clockState.isLoser(playerType)
? CrossFadeState.showSecond
: CrossFadeState.showFirst,
),
),
],
),
),
),
),
Positioned(
top: 24,
right: 24,
child: Text(
'${context.l10n.stormMoves}: ${clockState.getMovesCount(playerType)}',
style: TextStyle(
fontSize: 13,
color:
!clockState.paused && clockState.isPlayersTurn(playerType)
? clockStyle.activeTextColor
: clockStyle.textColor,
),
),
),
),
const ClockSettings(),
Expanded(
child: ClockTile(
playerType: ClockPlayerType.bottom,
clockState: state,
Positioned(
bottom: MediaQuery.paddingOf(context).bottom + 48.0,
child: AnimatedOpacity(
opacity: clockState.started ? 0 : 1.0,
duration: const Duration(milliseconds: 300),
child: PlatformIconButton(
semanticsLabel: context.l10n.settingsSettings,
iconSize: 32,
icon: Icons.tune,
color: clockStyle.textColor,
onTap: clockState.started
? null
: () => showAdaptiveBottomSheet<void>(
context: context,
builder: (BuildContext context) =>
CustomClockSettings(
player: playerType,
clock: playerType == ClockPlayerType.top
? TimeIncrement.fromDurations(
clockState.options.timePlayerTop,
clockState.options.incrementPlayerTop,
)
: TimeIncrement.fromDurations(
clockState.options.timePlayerBottom,
clockState.options.incrementPlayerBottom,
),
onSubmit: (
ClockPlayerType player,
TimeIncrement clock,
) {
Navigator.of(context).pop();
ref
.read(clockControllerProvider.notifier)
.updateOptionsCustom(clock, player);
},
),
),
),
),
),
),
],
],
),
);
}
}
10 changes: 7 additions & 3 deletions lib/src/view/clock/clock_settings.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,9 @@ import 'package:lichess_mobile/src/widgets/adaptive_bottom_sheet.dart';
const _iconSize = 38.0;

class ClockSettings extends ConsumerWidget {
const ClockSettings({super.key});
const ClockSettings({required this.orientation, super.key});

final Orientation orientation;

@override
Widget build(BuildContext context, WidgetRef ref) {
Expand All @@ -22,8 +24,10 @@ class ClockSettings extends ConsumerWidget {
);

return Padding(
padding: const EdgeInsets.symmetric(vertical: 8.0),
child: Row(
padding: orientation == Orientation.portrait
? const EdgeInsets.symmetric(vertical: 10.0)
: const EdgeInsets.symmetric(horizontal: 10.0),
child: (orientation == Orientation.portrait ? Row.new : Column.new)(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
const _PlayResumeButton(_iconSize),
Expand Down
Loading

0 comments on commit f5eaed7

Please sign in to comment.