Mirrored_Repos/AppFlowy
1
0
Fork 0
mirror of https://github.com/AppFlowy-IO/AppFlowy.git synced 2024-08-30 18:12:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

[flutter]: customize checkbox style of quill editor

Browse Source
This commit is contained in:
appflowy 2021-11-01 18:37:00 +08:00
parent 8ec0f0160f
commit 6a5cc9fd89
8 changed files with 176 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app_flowy/assets/images/editor/editor_check.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="2" y="2" width="12" height="12" rx="4" fill="#00BCF0"/>
<path d="M6 8L7.61538 9.5L10.5 6.5" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 268 B

3
app_flowy/assets/images/editor/editor_uncheck.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="2.5" y="2.5" width="11" height="11" rx="3.5" stroke="#BDBDBD"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 176 B

2
app_flowy/lib/workspace/application/app/app_bloc.dart
View File

@ -75,7 +75,7 @@ class AppBloc extends Bloc<AppEvent, AppState> {
AppState newState = state.copyWith(views: views);
if (selectedView != null) {
final index = views.indexWhere((element) => element.id == selectedView.id);
if (index != -1) {
if (index == -1) {
newState = newState.copyWith(selectedView: null);
}
}

7
app_flowy/lib/workspace/presentation/stack_page/doc/styles.dart
View File

@ -4,13 +4,15 @@ import 'package:provider/provider.dart';
import 'package:tuple/tuple.dart';
import 'package:flowy_infra/theme.dart';
import 'widget/style_widgets/style_widgets.dart';
DefaultStyles customStyles(BuildContext context) {
const baseSpacing = Tuple2<double, double>(6, 0);
final defaultTextStyle = DefaultTextStyle.of(context);
final baseStyle = defaultTextStyle.style.copyWith(
fontSize: 18,
height: 1.3,
fontWeight: FontWeight.w400,
fontWeight: FontWeight.w300,
letterSpacing: 0.6,
);
final theme = context.watch<AppTheme>();
@ -72,7 +74,8 @@ DefaultStyles customStyles(BuildContext context) {
const Tuple2(0, 0),
const Tuple2(0, 0),
null),
lists: DefaultTextBlockStyle(baseStyle, baseSpacing, const Tuple2(0, 6), null),
lists:
DefaultListBlockStyle(baseStyle, baseSpacing, const Tuple2(0, 6), null, StyleWidgetBuilder.checkbox(theme)),
quote: DefaultTextBlockStyle(
TextStyle(color: baseStyle.color!.withOpacity(0.6)),
baseSpacing,

69
app_flowy/lib/workspace/presentation/stack_page/doc/widget/style_widgets/style_widgets.dart Normal file
View File

@ -0,0 +1,69 @@
import 'package:flowy_infra/image.dart';
import 'package:flowy_infra/theme.dart';
import 'package:flowy_infra_ui/style_widget/icon_button.dart';
import 'package:flutter/material.dart';
import 'package:flutter_quill/flutter_quill.dart';
class StyleWidgetBuilder {
static QuillCheckboxBuilder checkbox(AppTheme theme) {
return EditorCheckboxBuilder(theme);
}
}
class EditorCheckboxBuilder extends QuillCheckboxBuilder {
final AppTheme theme;
EditorCheckboxBuilder(this.theme);
@override
Widget build({required BuildContext context, required bool isChecked, required void Function(bool? p1) onChanged}) {
return FlowyEditorCheckbox(
theme: theme,
isChecked: isChecked,
onChanged: onChanged,
);
}
}
class FlowyEditorCheckbox extends StatefulWidget {
final bool isChecked;
final void Function(bool? value) onChanged;
final AppTheme theme;
const FlowyEditorCheckbox({
required this.theme,
required this.isChecked,
required this.onChanged,
Key? key,
}) : super(key: key);
@override
_FlowyEditorCheckboxState createState() => _FlowyEditorCheckboxState();
}
class _FlowyEditorCheckboxState extends State<FlowyEditorCheckbox> {
late bool isChecked;
@override
void initState() {
isChecked = widget.isChecked;
super.initState();
}
@override
Widget build(BuildContext context) {
final icon = isChecked ? svg('editor/editor_check') : svg('editor/editor_uncheck');
return Align(
alignment: Alignment.centerLeft,
child: FlowyIconButton(
onPressed: () {
isChecked = !isChecked;
widget.onChanged(isChecked);
setState(() {});
},
iconPadding: EdgeInsets.zero,
icon: icon,
width: 23,
),
);
}
}

54
app_flowy/packages/flowy_infra_ui/example/pubspec.lock
View File

@ -14,7 +14,7 @@ packages:
name: async
url: "https://pub.dartlang.org"
source: hosted
version: "2.7.0"
version: "2.8.2"
boolean_selector:
dependency: transitive
description:
@ -28,7 +28,7 @@ packages:
name: characters
url: "https://pub.dartlang.org"
source: hosted
version: "1.1.0"
version: "1.2.0"
charcode:
dependency: transitive
description:
@ -125,6 +125,13 @@ packages:
url: "https://pub.dartlang.org"
source: hosted
version: "1.0.4"
flutter_svg:
dependency: transitive
description:
name: flutter_svg
url: "https://pub.dartlang.org"
source: hosted
version: "0.22.0"
flutter_test:
dependency: "direct dev"
description: flutter
@ -163,20 +170,13 @@ packages:
url: "https://pub.dartlang.org"
source: hosted
version: "3.0.1"
logger:
dependency: transitive
description:
name: logger
url: "https://pub.dartlang.org"
source: hosted
version: "1.0.0"
matcher:
dependency: transitive
description:
name: matcher
url: "https://pub.dartlang.org"
source: hosted
version: "0.12.10"
version: "0.12.11"
meta:
dependency: transitive
description:
@ -198,6 +198,27 @@ packages:
url: "https://pub.dartlang.org"
source: hosted
version: "1.8.0"
path_drawing:
dependency: transitive
description:
name: path_drawing
url: "https://pub.dartlang.org"
source: hosted
version: "0.5.1+1"
path_parsing:
dependency: transitive
description:
name: path_parsing
url: "https://pub.dartlang.org"
source: hosted
version: "0.2.1"
petitparser:
dependency: transitive
description:
name: petitparser
url: "https://pub.dartlang.org"
source: hosted
version: "4.4.0"
plugin_platform_interface:
dependency: transitive
description:
@ -211,7 +232,7 @@ packages:
name: provider
url: "https://pub.dartlang.org"
source: hosted
version: "5.0.0"
version: "6.0.1"
sky_engine:
dependency: transitive
description: flutter
@ -265,7 +286,7 @@ packages:
name: test_api
url: "https://pub.dartlang.org"
source: hosted
version: "0.4.1"
version: "0.4.3"
textstyle_extensions:
dependency: transitive
description:
@ -301,6 +322,13 @@ packages:
url: "https://pub.dartlang.org"
source: hosted
version: "2.1.0"
xml:
dependency: transitive
description:
name: xml
url: "https://pub.dartlang.org"
source: hosted
version: "5.3.1"
sdks:
dart: ">=2.12.0 <3.0.0"
dart: ">=2.14.0 <3.0.0"
flutter: ">=2.0.0"

15
app_flowy/packages/flowy_infra_ui/lib/style_widget/icon_button.dart
View File

@ -1,3 +1,5 @@
import 'dart:math';
import 'package:flowy_infra/image.dart';
import 'package:flutter/material.dart';
@ -12,9 +14,9 @@ class FlowyIconButton extends StatelessWidget {
const FlowyIconButton({
Key? key,
this.width = 30,
this.height,
this.onPressed,
this.width = 30,
this.fillColor = Colors.transparent,
this.hoverColor = Colors.transparent,
this.iconPadding = EdgeInsets.zero,
@ -34,9 +36,16 @@ class FlowyIconButton extends StatelessWidget {
// child: child,
// );
// }
final size = Size(width, height ?? width);
assert(size.width > iconPadding.horizontal);
assert(size.height > iconPadding.vertical);
final childWidth = min(size.width - iconPadding.horizontal, size.height - iconPadding.vertical);
final childSize = Size(childWidth, childWidth);
return ConstrainedBox(
constraints: BoxConstraints.tightFor(width: width, height: width),
constraints: BoxConstraints.tightFor(width: size.width, height: size.height),
child: RawMaterialButton(
visualDensity: VisualDensity.compact,
hoverElevation: 0,
@ -51,7 +60,7 @@ class FlowyIconButton extends StatelessWidget {
onPressed: onPressed,
child: Padding(
padding: iconPadding,
child: SizedBox.fromSize(child: child, size: Size(width, width)),
child: SizedBox.fromSize(child: child, size: childSize),
),
),
);

54
app_flowy/packages/flowy_infra_ui/pubspec.lock
View File

@ -14,7 +14,7 @@ packages:
name: async
url: "https://pub.dartlang.org"
source: hosted
version: "2.7.0"
version: "2.8.2"
boolean_selector:
dependency: transitive
description:
@ -28,7 +28,7 @@ packages:
name: characters
url: "https://pub.dartlang.org"
source: hosted
version: "1.1.0"
version: "1.2.0"
charcode:
dependency: transitive
description:
@ -111,6 +111,13 @@ packages:
url: "https://pub.dartlang.org"
source: hosted
version: "1.0.4"
flutter_svg:
dependency: transitive
description:
name: flutter_svg
url: "https://pub.dartlang.org"
source: hosted
version: "0.22.0"
flutter_test:
dependency: "direct dev"
description: flutter
@ -149,20 +156,13 @@ packages:
url: "https://pub.dartlang.org"
source: hosted
version: "3.0.1"
logger:
dependency: transitive
description:
name: logger
url: "https://pub.dartlang.org"
source: hosted
version: "1.0.0"
matcher:
dependency: transitive
description:
name: matcher
url: "https://pub.dartlang.org"
source: hosted
version: "0.12.10"
version: "0.12.11"
meta:
dependency: transitive
description:
@ -184,6 +184,27 @@ packages:
url: "https://pub.dartlang.org"
source: hosted
version: "1.8.0"
path_drawing:
dependency: transitive
description:
name: path_drawing
url: "https://pub.dartlang.org"
source: hosted
version: "0.5.1+1"
path_parsing:
dependency: transitive
description:
name: path_parsing
url: "https://pub.dartlang.org"
source: hosted
version: "0.2.1"
petitparser:
dependency: transitive
description:
name: petitparser
url: "https://pub.dartlang.org"
source: hosted
version: "4.4.0"
plugin_platform_interface:
dependency: transitive
description:
@ -197,7 +218,7 @@ packages:
name: provider
url: "https://pub.dartlang.org"
source: hosted
version: "5.0.0"
version: "6.0.1"
sky_engine:
dependency: transitive
description: flutter
@ -251,7 +272,7 @@ packages:
name: test_api
url: "https://pub.dartlang.org"
source: hosted
version: "0.4.1"
version: "0.4.3"
textstyle_extensions:
dependency: "direct main"
description:
@ -287,6 +308,13 @@ packages:
url: "https://pub.dartlang.org"
source: hosted
version: "2.1.0"
xml:
dependency: transitive
description:
name: xml
url: "https://pub.dartlang.org"
source: hosted
version: "5.3.1"
sdks:
dart: ">=2.12.0 <3.0.0"
dart: ">=2.14.0 <3.0.0"
flutter: ">=2.0.0"