From d8487fcc165724475fe4cdfcc02827353192b887 Mon Sep 17 00:00:00 2001 From: appflowy Date: Wed, 27 Oct 2021 17:46:50 +0800 Subject: [PATCH] [flutter]: cutom editor styles --- .../presentation/stack_page/doc/doc_page.dart | 82 +----------- .../presentation/stack_page/doc/styles.dart | 120 ++++++++++++++++++ 2 files changed, 122 insertions(+), 80 deletions(-) create mode 100644 app_flowy/lib/workspace/presentation/stack_page/doc/styles.dart diff --git a/app_flowy/lib/workspace/presentation/stack_page/doc/doc_page.dart b/app_flowy/lib/workspace/presentation/stack_page/doc/doc_page.dart index 4ec7eda9e6..b01371a8d5 100644 --- a/app_flowy/lib/workspace/presentation/stack_page/doc/doc_page.dart +++ b/app_flowy/lib/workspace/presentation/stack_page/doc/doc_page.dart @@ -1,4 +1,3 @@ -import 'dart:io'; import 'package:app_flowy/startup/startup.dart'; import 'package:app_flowy/workspace/application/doc/doc_bloc.dart'; import 'package:flowy_infra_ui/style_widget/scrolling/styled_scroll_bar.dart'; @@ -10,7 +9,7 @@ import 'package:flowy_sdk/protobuf/flowy-workspace/view_create.pb.dart'; import 'package:flutter/material.dart'; import 'package:flutter_bloc/flutter_bloc.dart'; import 'package:styled_widget/styled_widget.dart'; - +import 'styles.dart'; import 'widget/toolbar/tool_bar.dart'; class DocPage extends StatefulWidget { @@ -84,6 +83,7 @@ class _DocPageState extends State { readOnly: false, scrollBottomInset: 0, scrollController: scrollController, + customStyles: customStyles(context), ); return Expanded( @@ -102,81 +102,3 @@ class _DocPageState extends State { ); } } - -// import 'package:flowy_editor/flowy_editor.dart'; - -// ignore: must_be_immutable -// class DocPage extends StatefulWidget { -// late EditorController controller; -// late DocEditBloc editBloc; -// final FlowyDoc doc; - -// DocPage({Key? key, required this.doc}) : super(key: key) { -// editBloc = getIt(param1: doc.id); -// controller = EditorController( -// document: doc.document, -// selection: const TextSelection.collapsed(offset: 0), -// ); -// } - -// @override -// State createState() => _DocPageState(); -// } - -// class _DocPageState extends State { -// final FocusNode _focusNode = FocusNode(); - -// @override -// Widget build(BuildContext context) { -// return BlocProvider.value( -// value: widget.editBloc, -// child: BlocBuilder( -// builder: (ctx, state) { -// return Column( -// mainAxisAlignment: MainAxisAlignment.spaceBetween, -// children: [ -// _renderEditor(widget.controller), -// _renderToolbar(widget.controller), -// ], -// ); -// }, -// ), -// ); -// } - -// @override -// Future dispose() async { -// widget.editBloc.add(const DocEditEvent.close()); -// widget.editBloc.close(); -// super.dispose(); -// await widget.doc.close(); -// } - -// Widget _renderEditor(EditorController controller) { -// final editor = FlowyEditor( -// controller: controller, -// focusNode: _focusNode, -// scrollable: true, -// autoFocus: false, -// expands: false, -// padding: const EdgeInsets.symmetric(horizontal: 8.0), -// readOnly: false, -// scrollBottomInset: 0, -// scrollController: ScrollController(), -// ); -// return Expanded( -// child: Padding(padding: const EdgeInsets.all(10), child: editor), -// ); -// } - -// Widget _renderToolbar(EditorController controller) { -// return FlowyToolbar.basic( -// controller: controller, -// onImageSelectCallback: _onImageSelection, -// ); -// } - -// Future _onImageSelection(File file) { -// throw UnimplementedError(); -// } -// } diff --git a/app_flowy/lib/workspace/presentation/stack_page/doc/styles.dart b/app_flowy/lib/workspace/presentation/stack_page/doc/styles.dart new file mode 100644 index 0000000000..cd143c97d9 --- /dev/null +++ b/app_flowy/lib/workspace/presentation/stack_page/doc/styles.dart @@ -0,0 +1,120 @@ +import 'package:flutter/material.dart'; +import 'package:flutter_quill/flutter_quill.dart'; +import 'package:tuple/tuple.dart'; +import 'package:flowy_infra/theme.dart'; + +DefaultStyles customStyles(BuildContext context) { + const baseSpacing = Tuple2(6, 0); + final defaultTextStyle = DefaultTextStyle.of(context); + final baseStyle = defaultTextStyle.style.copyWith( + fontSize: 16, + height: 1.3, + ); + final theme = context.watch(); + final themeData = theme.themeData; + final fontFamily = makeFontFamily(themeData); + + return DefaultStyles( + h1: DefaultTextBlockStyle( + defaultTextStyle.style.copyWith( + fontSize: 34, + color: defaultTextStyle.style.color!.withOpacity(0.70), + height: 1.15, + fontWeight: FontWeight.w300, + ), + const Tuple2(16, 0), + const Tuple2(0, 0), + null), + h2: DefaultTextBlockStyle( + defaultTextStyle.style.copyWith( + fontSize: 24, + color: defaultTextStyle.style.color!.withOpacity(0.70), + height: 1.15, + fontWeight: FontWeight.normal, + ), + const Tuple2(8, 0), + const Tuple2(0, 0), + null), + h3: DefaultTextBlockStyle( + defaultTextStyle.style.copyWith( + fontSize: 20, + color: defaultTextStyle.style.color!.withOpacity(0.70), + height: 1.25, + fontWeight: FontWeight.w500, + ), + const Tuple2(8, 0), + const Tuple2(0, 0), + null), + paragraph: DefaultTextBlockStyle(baseStyle, const Tuple2(10, 0), const Tuple2(0, 0), null), + bold: const TextStyle(fontWeight: FontWeight.bold), + italic: const TextStyle(fontStyle: FontStyle.italic), + small: const TextStyle(fontSize: 12, color: Colors.black45), + underline: const TextStyle(decoration: TextDecoration.underline), + strikeThrough: const TextStyle(decoration: TextDecoration.lineThrough), + inlineCode: TextStyle( + color: Colors.blue.shade900.withOpacity(0.9), + fontFamily: fontFamily, + fontSize: 13, + ), + link: TextStyle( + color: themeData.colorScheme.secondary, + decoration: TextDecoration.underline, + ), + placeHolder: DefaultTextBlockStyle( + defaultTextStyle.style.copyWith( + fontSize: 20, + height: 1.5, + color: Colors.grey.withOpacity(0.6), + ), + const Tuple2(0, 0), + const Tuple2(0, 0), + null), + lists: DefaultTextBlockStyle(baseStyle, baseSpacing, const Tuple2(0, 6), null), + quote: DefaultTextBlockStyle( + TextStyle(color: baseStyle.color!.withOpacity(0.6)), + baseSpacing, + const Tuple2(6, 2), + BoxDecoration( + border: Border( + left: BorderSide(width: 4, color: Colors.grey.shade300), + ), + )), + code: DefaultTextBlockStyle( + TextStyle( + color: Colors.blue.shade900.withOpacity(0.9), + fontFamily: fontFamily, + fontSize: 13, + height: 1.15, + ), + baseSpacing, + const Tuple2(0, 0), + BoxDecoration( + color: Colors.grey.shade50, + borderRadius: BorderRadius.circular(2), + )), + indent: DefaultTextBlockStyle(baseStyle, baseSpacing, const Tuple2(0, 6), null), + align: DefaultTextBlockStyle(baseStyle, const Tuple2(0, 0), const Tuple2(0, 0), null), + leading: DefaultTextBlockStyle(baseStyle, const Tuple2(0, 0), const Tuple2(0, 0), null), + sizeSmall: const TextStyle(fontSize: 10), + sizeLarge: const TextStyle(fontSize: 18), + sizeHuge: const TextStyle(fontSize: 22)); +} + +String makeFontFamily(ThemeData themeData) { + String fontFamily; + switch (themeData.platform) { + case TargetPlatform.iOS: + case TargetPlatform.macOS: + fontFamily = 'Menlo'; + break; + case TargetPlatform.android: + case TargetPlatform.fuchsia: + case TargetPlatform.windows: + case TargetPlatform.linux: + fontFamily = 'Roboto Mono'; + break; + default: + throw UnimplementedError(); + } + return fontFamily; +}