Skip to content

Commit 63e7d93

Browse files
committed
TF-4179 Display tag list in sidebar
1 parent 53c7f96 commit 63e7d93

File tree

8 files changed

+215
-4
lines changed

8 files changed

+215
-4
lines changed

assets/images/ic_tag.svg

Lines changed: 5 additions & 0 deletions
Loading

core/lib/presentation/resources/image_paths.dart

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -261,6 +261,7 @@ class ImagePaths {
261261
String get icRemoveLink => _getImagePath('ic_remove_link.svg');
262262
String get icText => _getImagePath('ic_text.svg');
263263
String get icUser => _getImagePath('ic_user.svg');
264+
String get icTag => _getImagePath('ic_tag.svg');
264265

265266
String _getImagePath(String imageName) {
266267
return AssetsPaths.images + imageName;

lib/features/mailbox/presentation/base_mailbox_view.dart

Lines changed: 31 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_catego
1717
import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_node.dart';
1818
import 'package:tmail_ui_user/features/mailbox/presentation/styles/mailbox_item_widget_styles.dart';
1919
import 'package:tmail_ui_user/features/mailbox/presentation/widgets/folders_bar_widget.dart';
20+
import 'package:tmail_ui_user/features/mailbox/presentation/widgets/labels/label_list_view.dart';
2021
import 'package:tmail_ui_user/features/mailbox/presentation/widgets/labels/labels_bar_widget.dart';
2122
import 'package:tmail_ui_user/features/mailbox/presentation/widgets/mailbox_app_bar.dart';
2223
import 'package:tmail_ui_user/features/mailbox/presentation/widgets/mailbox_category_widget.dart';
@@ -335,18 +336,19 @@ abstract class BaseMailboxView extends GetWidget<MailboxController>
335336
: const Offstage(),
336337
)),
337338
buildLabelsBar(context, isDesktop),
339+
buildLabelsList(context, isDesktop),
338340
]),
339341
);
340342
}
341343

342344
Widget buildLabelsBar(BuildContext context, bool isDesktop) {
343345
return Obx(() {
344346
if (controller.mailboxDashBoardController.isLabelCapabilitySupported) {
345-
final labelController = controller
346-
.mailboxDashBoardController
347-
.labelController;
347+
final labelController =
348+
controller.mailboxDashBoardController.labelController;
348349

349350
final labelListExpandMode = labelController.labelListExpandMode.value;
351+
final countLabels = labelController.labels.length;
350352

351353
return LabelsBarWidget(
352354
imagePaths: controller.imagePaths,
@@ -357,11 +359,37 @@ abstract class BaseMailboxView extends GetWidget<MailboxController>
357359
: const EdgeInsetsDirectional.only(start: 24, end: 12),
358360
labelStyle: isDesktop ? null : ThemeUtils.textStyleInter500(),
359361
expandMode: labelListExpandMode,
362+
countLabels: countLabels,
360363
onToggleLabelListState: labelController.toggleLabelListState,
361364
);
362365
} else {
363366
return const SizedBox.shrink();
364367
}
365368
});
366369
}
370+
371+
Widget buildLabelsList(BuildContext context, bool isDesktop) {
372+
return Obx(() {
373+
if (controller.mailboxDashBoardController.isLabelCapabilitySupported) {
374+
final labelController =
375+
controller.mailboxDashBoardController.labelController;
376+
377+
final labelListExpandMode = labelController.labelListExpandMode.value;
378+
final labels = labelController.labels;
379+
380+
return AnimatedContainer(
381+
duration: const Duration(milliseconds: 400),
382+
child: labelListExpandMode == ExpandMode.EXPAND && labels.isNotEmpty
383+
? LabelListView(
384+
labels: labels,
385+
imagePaths: controller.imagePaths,
386+
isDesktop: isDesktop,
387+
)
388+
: const Offstage(),
389+
);
390+
} else {
391+
return const SizedBox.shrink();
392+
}
393+
});
394+
}
367395
}
Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import 'package:core/presentation/extensions/color_extension.dart';
2+
import 'package:flutter/material.dart';
3+
import 'package:flutter_svg/flutter_svg.dart';
4+
import 'package:tmail_ui_user/features/mailbox/presentation/styles/mailbox_icon_widget_styles.dart';
5+
import 'package:tmail_ui_user/features/mailbox/presentation/styles/mailbox_item_widget_styles.dart';
6+
7+
class LabelIconWidget extends StatelessWidget {
8+
final String icon;
9+
final double iconSize;
10+
final EdgeInsetsGeometry padding;
11+
final Color? color;
12+
13+
const LabelIconWidget({
14+
super.key,
15+
required this.icon,
16+
this.iconSize = MailboxIconWidgetStyles.iconSize,
17+
this.padding = const EdgeInsetsDirectional.only(
18+
end: MailboxItemWidgetStyles.labelIconSpace,
19+
),
20+
this.color,
21+
});
22+
23+
@override
24+
Widget build(BuildContext context) {
25+
return Padding(
26+
padding: padding,
27+
child: SvgPicture.asset(
28+
icon,
29+
width: iconSize,
30+
height: iconSize,
31+
colorFilter: color?.asFilter(),
32+
fit: BoxFit.fill,
33+
),
34+
);
35+
}
36+
}
Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
import 'package:core/presentation/resources/image_paths.dart';
2+
import 'package:flutter/material.dart';
3+
import 'package:labels/extensions/label_extension.dart';
4+
import 'package:labels/model/label.dart';
5+
import 'package:tmail_ui_user/features/mailbox/presentation/styles/mailbox_item_widget_styles.dart';
6+
import 'package:tmail_ui_user/features/mailbox/presentation/widgets/labels/label_icon_widget.dart';
7+
import 'package:tmail_ui_user/features/mailbox/presentation/widgets/labels/label_name_widget.dart';
8+
9+
class LabelListItem extends StatelessWidget {
10+
final Label label;
11+
final ImagePaths imagePaths;
12+
final bool isDesktop;
13+
14+
const LabelListItem({
15+
super.key,
16+
required this.label,
17+
required this.imagePaths,
18+
this.isDesktop = false,
19+
});
20+
21+
@override
22+
Widget build(BuildContext context) {
23+
final borderRadius = BorderRadius.all(
24+
Radius.circular(
25+
isDesktop
26+
? MailboxItemWidgetStyles.mobileBorderRadius
27+
: MailboxItemWidgetStyles.borderRadius,
28+
),
29+
);
30+
31+
return Material(
32+
type: MaterialType.transparency,
33+
child: InkWell(
34+
onTap: () {},
35+
borderRadius: borderRadius,
36+
child: Container(
37+
decoration: BoxDecoration(borderRadius: borderRadius),
38+
padding: EdgeInsetsDirectional.symmetric(
39+
horizontal: isDesktop
40+
? MailboxItemWidgetStyles.mobileItemPadding
41+
: MailboxItemWidgetStyles.itemPadding,
42+
),
43+
height: isDesktop
44+
? MailboxItemWidgetStyles.mobileHeight
45+
: MailboxItemWidgetStyles.height,
46+
child: Row(
47+
mainAxisAlignment: MainAxisAlignment.center,
48+
children: [
49+
LabelIconWidget(
50+
icon: imagePaths.icTag,
51+
color: label.backgroundColor,
52+
padding: EdgeInsetsDirectional.only(
53+
end: isDesktop
54+
? MailboxItemWidgetStyles.labelIconSpace
55+
: MailboxItemWidgetStyles.mobileLabelIconSpace,
56+
),
57+
),
58+
Expanded(
59+
child: LabelNameWidget(
60+
name: label.safeDisplayName,
61+
isDesktop: isDesktop,
62+
),
63+
),
64+
],
65+
),
66+
),
67+
),
68+
);
69+
}
70+
}
Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import 'package:core/presentation/resources/image_paths.dart';
2+
import 'package:flutter/material.dart';
3+
import 'package:labels/model/label.dart';
4+
import 'package:tmail_ui_user/features/mailbox/presentation/widgets/labels/label_list_item.dart';
5+
6+
class LabelListView extends StatelessWidget {
7+
final List<Label> labels;
8+
final ImagePaths imagePaths;
9+
final bool isDesktop;
10+
11+
const LabelListView({
12+
super.key,
13+
required this.labels,
14+
required this.imagePaths,
15+
this.isDesktop = false,
16+
});
17+
18+
@override
19+
Widget build(BuildContext context) {
20+
Widget labelListView = ListView.builder(
21+
key: const PageStorageKey('label_list'),
22+
shrinkWrap: true,
23+
primary: false,
24+
padding: EdgeInsets.zero,
25+
itemCount: labels.length,
26+
itemBuilder: (context, index) {
27+
return LabelListItem(
28+
label: labels[index],
29+
imagePaths: imagePaths,
30+
isDesktop: isDesktop,
31+
);
32+
},
33+
);
34+
35+
if (!isDesktop) {
36+
labelListView = Padding(
37+
padding: const EdgeInsets.symmetric(horizontal: 12),
38+
child: labelListView,
39+
);
40+
}
41+
42+
return labelListView;
43+
}
44+
}
Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import 'package:core/presentation/utils/theme_utils.dart';
2+
import 'package:flutter/material.dart';
3+
4+
class LabelNameWidget extends StatelessWidget {
5+
final String name;
6+
final bool isDesktop;
7+
8+
const LabelNameWidget({
9+
super.key,
10+
required this.name,
11+
this.isDesktop = false,
12+
});
13+
14+
@override
15+
Widget build(BuildContext context) {
16+
return Text(
17+
name,
18+
style: isDesktop
19+
? ThemeUtils.textStyleBodyBody3(color: Colors.black)
20+
: ThemeUtils.textStyleInter500(),
21+
maxLines: 1,
22+
overflow: TextOverflow.ellipsis,
23+
);
24+
}
25+
}

lib/features/mailbox/presentation/widgets/labels/labels_bar_widget.dart

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ class LabelsBarWidget extends StatelessWidget {
1212
final ImagePaths imagePaths;
1313
final bool isDesktop;
1414
final double? height;
15+
final int countLabels;
1516
final EdgeInsetsGeometry? padding;
1617
final TextStyle? labelStyle;
1718
final ExpandMode? expandMode;
@@ -22,6 +23,7 @@ class LabelsBarWidget extends StatelessWidget {
2223
super.key,
2324
required this.imagePaths,
2425
this.isDesktop = false,
26+
this.countLabels = 0,
2527
this.height,
2628
this.padding,
2729
this.labelStyle,
@@ -65,7 +67,7 @@ class LabelsBarWidget extends StatelessWidget {
6567
height: height ?? 48,
6668
child: Row(
6769
children: [
68-
if (expandMode != null)
70+
if (expandMode != null && countLabels > 0)
6971
Expanded(
7072
child: Row(
7173
children: [

0 commit comments

Comments
 (0)