-
Notifications
You must be signed in to change notification settings - Fork 17
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
TW-1904: Improve style for backup dialog (#1937)
* TW-1904: Create UI for skeleton chat list widget * TW-1904: Update style for backup dialog on web * TW-1904: Update style for backup dialog on mobile * TW-1904: Set timer for bootstrap dialog when get recovery key failed * TW-1904: Update color and style for textfield on mobile * TW-1904: Update color and style for textfield on web
- Loading branch information
Showing
14 changed files
with
342 additions
and
67 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
23 changes: 23 additions & 0 deletions
23
lib/pages/bootstrap/tom_bootstrap_dialog_mobile_style.dart
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| import 'package:flutter/material.dart'; | ||
|
|
||
| class TomBootstrapDialogMobileStyle { | ||
| static const String backButtonTitle = 'Back'; | ||
|
|
||
| static const String titleScreen = 'Titlte Screen'; | ||
|
|
||
| static const String trailing = 'Trailing'; | ||
|
|
||
| static const EdgeInsets paddingAppbar = EdgeInsets.only( | ||
| left: 16, | ||
| right: 16, | ||
| bottom: 16, | ||
| ); | ||
|
|
||
| static const EdgeInsets paddingTextField = EdgeInsets.only( | ||
| left: 16, | ||
| right: 16, | ||
| bottom: 16, | ||
| ); | ||
|
|
||
| static const EdgeInsets paddingDivider = EdgeInsets.only(bottom: 32); | ||
| } |
113 changes: 113 additions & 0 deletions
113
lib/pages/bootstrap/tom_bootstrap_dialog_mobile_view.dart
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,113 @@ | ||
| import 'package:fluffychat/pages/bootstrap/tom_bootstrap_dialog_mobile_style.dart'; | ||
| import 'package:fluffychat/pages/bootstrap/tom_bootstrap_dialog_style.dart'; | ||
| import 'package:fluffychat/pages/chat_list/chat_list_header_style.dart'; | ||
| import 'package:fluffychat/pages/chat_list/chat_list_skeletonizer_widget.dart'; | ||
| import 'package:fluffychat/resource/image_paths.dart'; | ||
| import 'package:skeletonizer/skeletonizer.dart'; | ||
| import 'package:flutter/material.dart'; | ||
| import 'package:flutter_gen/gen_l10n/l10n.dart'; | ||
| import 'package:linagora_design_flutter/linagora_design_flutter.dart'; | ||
| import 'package:lottie/lottie.dart'; | ||
|
|
||
| class TomBootstrapDialogMobileView extends StatelessWidget { | ||
| final String description; | ||
| const TomBootstrapDialogMobileView({ | ||
| super.key, | ||
| required this.description, | ||
| }); | ||
|
|
||
| @override | ||
| Widget build(BuildContext context) { | ||
| return Scaffold( | ||
| body: Column( | ||
| children: [ | ||
| Padding( | ||
| padding: TomBootstrapDialogMobileStyle.paddingAppbar, | ||
| child: Skeletonizer( | ||
| ignoreContainers: true, | ||
| child: Card( | ||
| child: Row( | ||
| children: [ | ||
| Text( | ||
| TomBootstrapDialogMobileStyle.backButtonTitle, | ||
| style: Theme.of(context).textTheme.titleLarge, | ||
| ), | ||
| Expanded( | ||
| child: Align( | ||
| alignment: Alignment.center, | ||
| child: Text( | ||
| TomBootstrapDialogMobileStyle.titleScreen, | ||
| style: Theme.of(context).textTheme.titleLarge, | ||
| ), | ||
| ), | ||
| ), | ||
| Text( | ||
| TomBootstrapDialogMobileStyle.trailing, | ||
| style: Theme.of(context).textTheme.titleLarge, | ||
| ), | ||
| ], | ||
| ), | ||
| ), | ||
| ), | ||
| ), | ||
| Padding( | ||
| padding: TomBootstrapDialogMobileStyle.paddingTextField, | ||
| child: TextField( | ||
| textInputAction: TextInputAction.search, | ||
| enabled: false, | ||
| decoration: ChatListHeaderStyle.searchInputDecoration( | ||
| context, | ||
| hintText: '', | ||
| prefixIconColor: LinagoraRefColors.material().neutral[90], | ||
| ), | ||
| ), | ||
| ), | ||
| Padding( | ||
| padding: TomBootstrapDialogMobileStyle.paddingDivider, | ||
| child: Divider( | ||
| height: 1, | ||
| color: LinagoraStateLayer( | ||
| LinagoraSysColors.material().surfaceTintDark, | ||
| ).opacityLayer3, | ||
| ), | ||
| ), | ||
| SizedBox( | ||
| height: TomBootstrapDialogStyle.sizedDialogWeb, | ||
| width: TomBootstrapDialogStyle.sizedDialogWeb, | ||
| child: Padding( | ||
| padding: TomBootstrapDialogStyle.paddingDialog, | ||
| child: Column( | ||
| mainAxisAlignment: MainAxisAlignment.center, | ||
| children: [ | ||
| Text( | ||
| L10n.of(context)!.settingUpYourTwake, | ||
| style: Theme.of(context).textTheme.titleLarge?.copyWith( | ||
| color: LinagoraSysColors.material().onBackground, | ||
| ), | ||
| textAlign: TextAlign.center, | ||
| ), | ||
| Padding( | ||
| padding: TomBootstrapDialogStyle.lottiePadding, | ||
| child: LottieBuilder.asset( | ||
| ImagePaths.lottieTwakeLoading, | ||
| width: TomBootstrapDialogStyle.lottieSize, | ||
| height: TomBootstrapDialogStyle.lottieSize, | ||
| ), | ||
| ), | ||
| Text( | ||
| description, | ||
| style: Theme.of(context).textTheme.bodyMedium?.copyWith( | ||
| color: LinagoraSysColors.material().tertiary, | ||
| ), | ||
| textAlign: TextAlign.center, | ||
| ), | ||
| ], | ||
| ), | ||
| ), | ||
| ), | ||
| const Expanded(child: ChatListSkeletonizerWidget()), | ||
| ], | ||
| ), | ||
| ); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,57 @@ | ||
| import 'package:fluffychat/pages/bootstrap/tom_bootstrap_dialog_style.dart'; | ||
| import 'package:fluffychat/resource/image_paths.dart'; | ||
| import 'package:flutter/material.dart'; | ||
| import 'package:flutter_gen/gen_l10n/l10n.dart'; | ||
| import 'package:linagora_design_flutter/linagora_design_flutter.dart'; | ||
| import 'package:lottie/lottie.dart'; | ||
|
|
||
| class TomBootstrapDialogWebView extends StatelessWidget { | ||
| final String description; | ||
| const TomBootstrapDialogWebView({ | ||
| super.key, | ||
| required this.description, | ||
| }); | ||
|
|
||
| @override | ||
| Widget build(BuildContext context) { | ||
| return Scaffold( | ||
| backgroundColor: Colors.transparent, | ||
| body: Center( | ||
| child: SizedBox( | ||
| height: TomBootstrapDialogStyle.sizedDialogWeb, | ||
| width: TomBootstrapDialogStyle.sizedDialogWeb, | ||
| child: Padding( | ||
| padding: TomBootstrapDialogStyle.paddingDialog, | ||
| child: Column( | ||
| mainAxisAlignment: MainAxisAlignment.center, | ||
| children: [ | ||
| Text( | ||
| L10n.of(context)!.settingUpYourTwake, | ||
| style: Theme.of(context).textTheme.titleLarge?.copyWith( | ||
| color: LinagoraSysColors.material().onBackground, | ||
| ), | ||
| textAlign: TextAlign.center, | ||
| ), | ||
| Padding( | ||
| padding: TomBootstrapDialogStyle.lottiePadding, | ||
| child: LottieBuilder.asset( | ||
| ImagePaths.lottieTwakeLoading, | ||
| width: TomBootstrapDialogStyle.lottieSize, | ||
| height: TomBootstrapDialogStyle.lottieSize, | ||
| ), | ||
| ), | ||
| Text( | ||
| description, | ||
| style: Theme.of(context).textTheme.bodyMedium?.copyWith( | ||
| color: LinagoraSysColors.material().onBackground, | ||
| ), | ||
| textAlign: TextAlign.center, | ||
| ), | ||
| ], | ||
| ), | ||
| ), | ||
| ), | ||
| ), | ||
| ); | ||
| } | ||
| } |
Oops, something went wrong.