diff --git a/app_flowy/lib/user/presentation/sign_in/sign_in_screen.dart b/app_flowy/lib/user/presentation/sign_in/sign_in_screen.dart index 7c5e9a98c3..fd0b6beafa 100644 --- a/app_flowy/lib/user/presentation/sign_in/sign_in_screen.dart +++ b/app_flowy/lib/user/presentation/sign_in/sign_in_screen.dart @@ -123,7 +123,7 @@ class LoginButton extends StatelessWidget { Widget build(BuildContext context) { return RoundedTextButton( title: 'Login', - height: 65, + height: 45, borderRadius: BorderRadius.circular(10), color: Colors.lightBlue, press: () { diff --git a/app_flowy/lib/workspace/domain/image.dart b/app_flowy/lib/workspace/domain/image.dart new file mode 100644 index 0000000000..0ee8ad46a6 --- /dev/null +++ b/app_flowy/lib/workspace/domain/image.dart @@ -0,0 +1,16 @@ +import 'package:flowy_sdk/protobuf/flowy-workspace/view_create.pb.dart'; +import 'package:flutter/material.dart'; + +AssetImage assetImageForViewType(ViewType type) { + final imageName = imageNameForViewType(type); + return AssetImage('assets/images/$imageName'); +} + +String imageNameForViewType(ViewType type) { + switch (type) { + case ViewType.Doc: + return "file_icon.jpg"; + default: + return "file_icon.jpg"; + } +} diff --git a/app_flowy/lib/workspace/domain/page_stack/page_stack.dart b/app_flowy/lib/workspace/domain/page_stack/page_stack.dart index 6aece7556d..bd18b92632 100644 --- a/app_flowy/lib/workspace/domain/page_stack/page_stack.dart +++ b/app_flowy/lib/workspace/domain/page_stack/page_stack.dart @@ -32,7 +32,7 @@ class HomePageStack { child: BlocBuilder( builder: (context, state) { return HomeTopBar( - title: state.stackView.title, + view: state.stackView, ); }, ), diff --git a/app_flowy/lib/workspace/presentation/app/view_list.dart b/app_flowy/lib/workspace/presentation/app/view_list.dart index c9570abd39..0f81b64eaa 100644 --- a/app_flowy/lib/workspace/presentation/app/view_list.dart +++ b/app_flowy/lib/workspace/presentation/app/view_list.dart @@ -1,11 +1,9 @@ import 'package:app_flowy/workspace/presentation/view/view_widget.dart'; import 'package:flowy_infra/flowy_logger.dart'; -import 'package:flowy_infra/size.dart'; import 'package:flowy_sdk/protobuf/flowy-workspace/view_create.pb.dart'; import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:dartz/dartz.dart'; -import 'package:styled_widget/styled_widget.dart'; class ViewList extends StatelessWidget { final Option> views; diff --git a/app_flowy/lib/workspace/presentation/doc/editor_widget.dart b/app_flowy/lib/workspace/presentation/doc/editor_widget.dart index fdb3732b8f..9a4e41c9b6 100644 --- a/app_flowy/lib/workspace/presentation/doc/editor_widget.dart +++ b/app_flowy/lib/workspace/presentation/doc/editor_widget.dart @@ -50,7 +50,9 @@ class EditorWdiget extends StatelessWidget { scrollBottomInset: 0, scrollController: ScrollController(), ); - return Expanded(child: editor); + return Expanded( + child: Padding(padding: const EdgeInsets.all(10), child: editor), + ); } Widget _renderToolbar(EditorController controller) { diff --git a/app_flowy/lib/workspace/presentation/home/home_screen.dart b/app_flowy/lib/workspace/presentation/home/home_screen.dart index 1e1c65b17c..bdee084fa4 100644 --- a/app_flowy/lib/workspace/presentation/home/home_screen.dart +++ b/app_flowy/lib/workspace/presentation/home/home_screen.dart @@ -31,7 +31,8 @@ class HomeScreen extends StatelessWidget { buildWhen: (previous, current) => previous != current, builder: (context, state) { return StyledContainer( - Theme.of(context).colorScheme.background, + Theme.of(context).colorScheme.surface, + // Colors.white, child: _buildBody( state, context.read().state.forceCollapse), ); diff --git a/app_flowy/lib/workspace/presentation/view/view_widget.dart b/app_flowy/lib/workspace/presentation/view/view_widget.dart index 6deba74c1b..50a730e7d0 100644 --- a/app_flowy/lib/workspace/presentation/view/view_widget.dart +++ b/app_flowy/lib/workspace/presentation/view/view_widget.dart @@ -1,4 +1,5 @@ import 'package:app_flowy/startup/startup.dart'; +import 'package:app_flowy/workspace/domain/image.dart'; import 'package:app_flowy/workspace/domain/page_stack/page_stack.dart'; import 'package:flowy_infra_ui/widget/spacing.dart'; import 'package:flowy_sdk/protobuf/flowy-workspace/view_create.pb.dart'; @@ -16,11 +17,11 @@ class ViewWidget extends StatelessWidget { Row buildContent() { return Row( children: [ - const Image( + Image( fit: BoxFit.cover, width: 20, height: 20, - image: AssetImage('assets/images/file_icon.jpg')), + image: assetImageForViewType(view.viewType)), const HSpace(6), Text( view.name, diff --git a/app_flowy/lib/workspace/presentation/widgets/home_top_bar.dart b/app_flowy/lib/workspace/presentation/widgets/home_top_bar.dart index 6c9d91a4e5..1b43b14a5a 100644 --- a/app_flowy/lib/workspace/presentation/widgets/home_top_bar.dart +++ b/app_flowy/lib/workspace/presentation/widgets/home_top_bar.dart @@ -1,20 +1,62 @@ +import 'package:app_flowy/workspace/domain/image.dart'; +import 'package:app_flowy/workspace/domain/page_stack/page_stack.dart'; import 'package:app_flowy/workspace/presentation/home/home_sizes.dart'; +import 'package:flowy_infra_ui/widget/rounded_button.dart'; +import 'package:flowy_infra_ui/widget/spacing.dart'; +import 'package:flowy_sdk/protobuf/flowy-workspace/view_create.pbenum.dart'; import 'package:flutter/material.dart'; class HomeTopBar extends StatelessWidget { - final String title; - const HomeTopBar({Key? key, required this.title}) : super(key: key); + final HomeStackView view; + const HomeTopBar({Key? key, required this.view}) : super(key: key); @override Widget build(BuildContext context) { - return Container( - padding: EdgeInsets.symmetric(horizontal: HomeInsets.topBarTitlePadding), + return SizedBox( height: HomeSizes.topBarHeight, - child: Column( - crossAxisAlignment: CrossAxisAlignment.center, - children: [ - HomeTitle(title: title), - ], + child: Container( + decoration: BoxDecoration( + border: Border( + bottom: BorderSide(width: 0.5, color: Colors.grey.shade300), + ), + ), + child: Padding( + padding: + EdgeInsets.symmetric(horizontal: HomeInsets.topBarTitlePadding), + child: Row( + crossAxisAlignment: CrossAxisAlignment.center, + children: [ + HomeTitle(title: view.title, type: view.type), + const Spacer(), + _renderShareButton(), + _renderMoreButton(), + ], + ), + ), + ), + ); + } + + Widget _renderShareButton() { + return RoundedTextButton( + title: 'Share', + height: 30, + width: 60, + fontSize: 12, + borderRadius: BorderRadius.circular(6), + color: Colors.lightBlue, + press: () {}, + ); + } + + Widget _renderMoreButton() { + return SizedBox( + width: 24, + child: IconButton( + icon: const Icon(Icons.more_vert), + iconSize: 12, + alignment: Alignment.center, + onPressed: () {}, ), ); } @@ -22,28 +64,32 @@ class HomeTopBar extends StatelessWidget { class HomeTitle extends StatelessWidget { final String title; - final _editingController = TextEditingController( - text: '', - ); + final ViewType type; - HomeTitle({ + const HomeTitle({ Key? key, required this.title, + required this.type, }) : super(key: key); @override Widget build(BuildContext context) { - _editingController.text = title; - - return Expanded( - child: TextField( - controller: _editingController, - textAlign: TextAlign.left, - style: const TextStyle(fontSize: 28.0), - decoration: const InputDecoration( - hintText: 'Name the view', - border: UnderlineInputBorder(borderSide: BorderSide.none), - ), + return Flexible( + child: Row( + children: [ + Image( + fit: BoxFit.scaleDown, + width: 15, + height: 15, + image: assetImageForViewType(type)), + const HSpace(6), + Text( + title, + overflow: TextOverflow.fade, + softWrap: false, + style: const TextStyle(fontSize: 16), + ), + ], ), ); } diff --git a/app_flowy/packages/flowy_infra/lib/theme.dart b/app_flowy/packages/flowy_infra/lib/theme.dart index a9994e335a..4cf60ee854 100644 --- a/app_flowy/packages/flowy_infra/lib/theme.dart +++ b/app_flowy/packages/flowy_infra/lib/theme.dart @@ -39,7 +39,7 @@ class AppTheme { switch (t) { case ThemeType.light: return AppTheme(isDark: false) - ..bg1 = const Color(0xfff1f7f0) + ..bg1 = const Color.fromARGB(255, 247, 248, 252) ..bg2 = const Color(0xffc1dcbc) ..surface = Colors.white ..accent1 = const Color(0xff00a086) diff --git a/app_flowy/packages/flowy_infra_ui/lib/widget/rounded_button.dart b/app_flowy/packages/flowy_infra_ui/lib/widget/rounded_button.dart index 6eac0a72c5..f7b379f696 100644 --- a/app_flowy/packages/flowy_infra_ui/lib/widget/rounded_button.dart +++ b/app_flowy/packages/flowy_infra_ui/lib/widget/rounded_button.dart @@ -9,6 +9,7 @@ class RoundedTextButton extends StatelessWidget { final Color borderColor; final Color color; final Color textColor; + final double fontSize; const RoundedTextButton({ Key? key, @@ -20,19 +21,19 @@ class RoundedTextButton extends StatelessWidget { this.borderColor = Colors.transparent, this.color = Colors.transparent, this.textColor = Colors.white, + this.fontSize = 16, }) : super(key: key); @override Widget build(BuildContext context) { return ConstrainedBox( constraints: BoxConstraints( - minWidth: 100, + minWidth: 10, maxWidth: width ?? double.infinity, - minHeight: 50, + minHeight: 10, maxHeight: height ?? 60, ), child: Container( - margin: const EdgeInsets.symmetric(vertical: 10), decoration: BoxDecoration( border: Border.all(color: borderColor), borderRadius: borderRadius, @@ -40,7 +41,10 @@ class RoundedTextButton extends StatelessWidget { ), child: SizedBox.expand( child: TextButton( - child: Text(title ?? '', style: TextStyle(color: textColor)), + child: Text( + title ?? '', + style: TextStyle(color: textColor, fontSize: fontSize), + ), onPressed: press, ), ),