Skip to content

Commit

Permalink
TW-2005: added dividers and update padding and icons colors
Browse files Browse the repository at this point in the history
  • Loading branch information
@KhaledNjim
KhaledNjim committed Sep 24, 2024
1 parent 49763f6 commit 58ad733
Show file tree
Hide file tree
Showing 4 changed files with 73 additions and 23 deletions.
10 changes: 5 additions & 5 deletions lib/pages/settings_dashboard/settings/settings_item_builder.dart
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import 'package:fluffychat/config/app_config.dart';
import 'package:fluffychat/pages/settings_dashboard/settings/settings_view_style.dart';
import 'package:flutter/material.dart';
import 'package:linagora_design_flutter/linagora_design_flutter.dart';
Expand All @@ -24,7 +23,7 @@ class SettingsItemBuilder extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Material(
borderRadius: BorderRadius.circular(AppConfig.borderRadius),
borderRadius: BorderRadius.circular(SettingsViewStyle.borderRadius),
clipBehavior: Clip.hardEdge,
color: isSelected
? Theme.of(context).colorScheme.secondaryContainer
Expand All @@ -43,7 +42,7 @@ class SettingsItemBuilder extends StatelessWidget {
size: SettingsViewStyle.iconSize,
color: isHideTrailingIcon
? Theme.of(context).colorScheme.error
: Theme.of(context).colorScheme.onSurfaceVariant,
: LinagoraRefColors.material().tertiary[30],
),
),
Expanded(
Expand Down Expand Up @@ -82,17 +81,18 @@ class SettingsItemBuilder extends StatelessWidget {
color: LinagoraRefColors.material()
.neutral[40],
),
maxLines: 3,
maxLines: 2,
overflow: TextOverflow.ellipsis,
),
),
],
),
),
if (!isHideTrailingIcon)
const Icon(
Icon(
Icons.chevron_right_outlined,
size: SettingsViewStyle.iconSize,
color: LinagoraRefColors.material().tertiary[30],
),
],
),
Expand Down
63 changes: 48 additions & 15 deletions lib/pages/settings_dashboard/settings/settings_view.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ class SettingsView extends StatelessWidget {
style: responsiveUtils.isMobile(context)
? LinagoraTextStyle.material().bodyLarge1.copyWith(
color: Theme.of(context).colorScheme.onSurface,
height: 24 / 17,
height: SettingsViewStyle.titleLineHeightMobile,
)
: Theme.of(context).textTheme.headlineSmall,
),
Expand All @@ -78,7 +78,8 @@ class SettingsView extends StatelessWidget {
Padding(
padding: SettingsViewStyle.bodySettingsScreenPadding,
child: Material(
borderRadius: BorderRadius.circular(AppConfig.borderRadius),
borderRadius:
BorderRadius.circular(SettingsViewStyle.borderRadius),
clipBehavior: Clip.hardEdge,
color: controller.optionsSelectNotifier.value ==
SettingEnum.profile
Expand Down Expand Up @@ -155,17 +156,19 @@ class SettingsView extends StatelessWidget {
.labelLarge
?.copyWith(
color: LinagoraRefColors.material()
.neutral[40],
.tertiary[30],
),
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
],
),
),
const Icon(
Icon(
Icons.chevron_right_outlined,
size: SettingsViewStyle.iconSize,
color:
LinagoraRefColors.material().tertiary[30],
),
],
),
Expand All @@ -176,7 +179,16 @@ class SettingsView extends StatelessWidget {
),
),
),
const Divider(thickness: 1),
Padding(
padding: SettingsViewStyle.profileItemDividerPadding(context),
child: Divider(
color: LinagoraStateLayer(
LinagoraSysColors.material().surfaceTint,
).opacityLayer3,
thickness: SettingsViewStyle.settingsItemDividerThikness,
height: SettingsViewStyle.settingsItemDividerHeight,
),
),
if (!controller.matrix.twakeSupported)
ValueListenableBuilder(
valueListenable: controller.showChatBackupSwitch,
Expand All @@ -198,16 +210,37 @@ class SettingsView extends StatelessWidget {
),
Column(
children: controller.getListSettingItem.map((item) {
return Padding(
padding: SettingsViewStyle.bodySettingsScreenPadding,
child: SettingsItemBuilder(
title: item.titleSettings(context),
subtitle: item.subtitleSettings(context),
leading: item.iconLeading(),
onTap: () => controller.onClickToSettingsItem(item),
isHideTrailingIcon: item.isHideTrailingIcon,
isSelected: controller.optionSelected(item),
),
return Column(
children: [
Padding(
padding: SettingsViewStyle.bodySettingsScreenPadding,
child: SettingsItemBuilder(
title: item.titleSettings(context),
subtitle: item.subtitleSettings(context),
leading: item.iconLeading(),
onTap: () => controller.onClickToSettingsItem(item),
isHideTrailingIcon: item.isHideTrailingIcon,
isSelected: controller.optionSelected(item),
),
),
item.index == SettingEnum.logout.index
? const SizedBox()
: Padding(
padding:
SettingsViewStyle.settingsItemDividerPadding(
context,
),
child: Divider(
color: LinagoraStateLayer(
LinagoraSysColors.material().surfaceTint,
).opacityLayer3,
thickness:
SettingsViewStyle.settingsItemDividerThikness,
height:
SettingsViewStyle.settingsItemDividerHeight,
),
),
],
);
}).toList(),
),
Expand Down
19 changes: 18 additions & 1 deletion lib/pages/settings_dashboard/settings/settings_view_style.dart
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,9 @@
import 'package:fluffychat/di/global/get_it_initializer.dart';
import 'package:fluffychat/utils/responsive/responsive_utils.dart';
import 'package:flutter/material.dart';

class SettingsViewStyle {
static ResponsiveUtils responsiveUtils = getIt.get<ResponsiveUtils>();
static const double iconSize = 24.0;

static const double fontSizeAvatar = 9 * 2.5;
Expand All @@ -12,7 +15,7 @@ class SettingsViewStyle {
static const EdgeInsetsDirectional titlePaddingWeb =
EdgeInsetsDirectional.symmetric(horizontal: 16, vertical: 8);
static EdgeInsetsDirectional itemBuilderPadding =
const EdgeInsetsDirectional.all(16.0);
const EdgeInsetsDirectional.only(top: 16.0, bottom: 16.0, start: 8.0);

static EdgeInsetsDirectional leadingItemBuilderPadding =
const EdgeInsetsDirectional.only(end: 8);
Expand All @@ -32,4 +35,18 @@ class SettingsViewStyle {

static EdgeInsetsDirectional avatarPadding =
const EdgeInsetsDirectional.only(end: 8);

static const double borderRadius = 4.0;
static const double settingsItemDividerHeight = 1.0;
static const double settingsItemDividerThikness = 1;
static EdgeInsets settingsItemDividerPadding(BuildContext context) =>
EdgeInsets.only(
left: 48.0,
right: responsiveUtils.isMobile(context) ? 0 : 8.0,
);
static EdgeInsets profileItemDividerPadding(BuildContext context) =>
EdgeInsets.only(
right: responsiveUtils.isMobile(context) ? 0 : 16.0,
);
static const double titleLineHeightMobile = 24 / 17;
}
4 changes: 2 additions & 2 deletions lib/presentation/enum/settings/settings_enum.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ enum SettingEnum {
String subtitleSettings(BuildContext context) {
switch (this) {
case SettingEnum.chatSettings:
return '';
return L10n.of(context)!.settingsChatSubtitle;
case SettingEnum.privacyAndSecurity:
return L10n.of(context)!.settingsPrivacyAndSecuritySubtitle;
case SettingEnum.notificationAndSounds:
Expand All @@ -64,7 +64,7 @@ enum SettingEnum {
case SettingEnum.chatSettings:
return Icons.chat_bubble_outline_outlined;
case SettingEnum.privacyAndSecurity:
return Icons.lock;
return Icons.lock_outline;
case SettingEnum.notificationAndSounds:
return Icons.notifications_none;
case SettingEnum.chatFolders:
Expand Down

0 comments on commit 58ad733

Please sign in to comment.