mirror of
https://github.com/AppFlowy-IO/AppFlowy.git
synced 2024-08-30 18:12:39 +00:00
[flutter]: cutom editor styles
This commit is contained in:
appflowy
parent
89aceb098c
commit
d8487fcc16
@ -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<DocPage> {
|
||||
readOnly: false,
|
||||
scrollBottomInset: 0,
|
||||
scrollController: scrollController,
|
||||
customStyles: customStyles(context),
|
||||
);
|
||||
|
||||
return Expanded(
|
||||
@ -102,81 +102,3 @@ class _DocPageState extends State<DocPage> {
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// 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<DocEditBloc>(param1: doc.id);
|
||||
// controller = EditorController(
|
||||
// document: doc.document,
|
||||
// selection: const TextSelection.collapsed(offset: 0),
|
||||
// );
|
||||
// }
|
||||
|
||||
// @override
|
||||
// State<DocPage> createState() => _DocPageState();
|
||||
// }
|
||||
|
||||
// class _DocPageState extends State<DocPage> {
|
||||
// final FocusNode _focusNode = FocusNode();
|
||||
|
||||
// @override
|
||||
// Widget build(BuildContext context) {
|
||||
// return BlocProvider.value(
|
||||
// value: widget.editBloc,
|
||||
// child: BlocBuilder<DocEditBloc, DocEditState>(
|
||||
// builder: (ctx, state) {
|
||||
// return Column(
|
||||
// mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
// children: [
|
||||
// _renderEditor(widget.controller),
|
||||
// _renderToolbar(widget.controller),
|
||||
// ],
|
||||
// );
|
||||
// },
|
||||
// ),
|
||||
// );
|
||||
// }
|
||||
|
||||
// @override
|
||||
// Future<void> 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<String> _onImageSelection(File file) {
|
||||
// throw UnimplementedError();
|
||||
// }
|
||||
// }
|
||||
|
||||
120
app_flowy/lib/workspace/presentation/stack_page/doc/styles.dart
Normal file
120
app_flowy/lib/workspace/presentation/stack_page/doc/styles.dart
Normal file
@ -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<double, double>(6, 0);
|
||||
final defaultTextStyle = DefaultTextStyle.of(context);
|
||||
final baseStyle = defaultTextStyle.style.copyWith(
|
||||
fontSize: 16,
|
||||
height: 1.3,
|
||||
);
|
||||
final theme = context.watch<AppTheme>();
|
||||
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;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user