ammar/syncrow-web
1
0
Fork 0
mirror of https://github.com/SyncrowIOT/web.git synced 2025-07-09 22:57:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

changed ui for community list and view list

Browse Source
This commit is contained in:
hannathkadher
2024-09-10 21:22:43 +04:00
parent 7e6b0f33c8
commit b362029424
6 changed files with 199 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
assets/icons/rounded_add_icon.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="15.0001" cy="15" r="13.5" fill="#F4F4F4" stroke="#E5E5E5" stroke-width="3"/>
<path d="M19.4508 14.0508H15.9493V10.5492C15.9493 10.025 15.5243 9.59998 15 9.59998C14.4758 9.59998 14.0508 10.025 14.0508 10.5492V14.0508H10.5493C10.025 14.0508 9.60004 14.4757 9.60004 15C9.60004 15.5242 10.025 15.9492 10.5493 15.9492H14.0508V19.4508C14.0508 19.975 14.4758 20.4 15 20.4C15.5243 20.4 15.9493 19.975 15.9493 19.4508V15.9492H19.4508C19.9751 15.9492 20.4 15.5242 20.4 15C20.4 14.4757 19.9751 14.0508 19.4508 14.0508Z" fill="#023DFE" fill-opacity="0.7"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 660 B

4
assets/icons/textfield_search_icon.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1.89883 11.08C-0.632454 8.54864 -0.632402 4.42983 1.89883 1.8985C4.43016 -0.632833 8.54891 -0.632833 11.0802 1.8985C13.2277 4.04599 13.5529 7.23986 12.0568 9.73392C12.0568 9.73392 11.9493 9.91422 12.0945 10.0593C12.9225 10.8872 15.4068 13.3716 15.4068 13.3716C16.0661 14.0308 16.223 14.9527 15.6384 15.5374L15.5377 15.638C14.953 16.2227 14.0311 16.0658 13.3719 15.4065C13.3719 15.4065 10.8929 12.9275 10.0665 12.1012C9.91444 11.9491 9.7342 12.0566 9.7342 12.0566C7.24018 13.5526 4.04632 13.2275 1.89883 11.08ZM9.88161 9.88133C11.752 8.01094 11.752 4.96763 9.88156 3.09724C8.01117 1.22689 4.96786 1.22684 3.09751 3.09724C1.22712 4.96758 1.22712 8.01094 3.09751 9.88133C4.96791 11.7516 8.01117 11.7516 9.88161 9.88133Z" fill="#999999" fill-opacity="0.7"/>
<path d="M9.46725 6.10398C9.55431 6.10398 9.6428 6.08687 9.72811 6.05084C10.0689 5.90662 10.2283 5.51345 10.0841 5.17265C9.17763 3.03057 6.69753 2.02532 4.5555 2.93176C4.21475 3.07598 4.05533 3.46915 4.19955 3.80995C4.34382 4.15075 4.73688 4.31007 5.07779 4.16591C6.53924 3.54749 8.2315 4.23338 8.84987 5.69483C8.95806 5.95043 9.20618 6.10398 9.46725 6.10398Z" fill="#999999" fill-opacity="0.7"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

104
lib/common/custom_expansion_tile.dart Normal file
View File

@ -0,0 +1,104 @@
import 'package:flutter/material.dart';
import 'package:syncrow_web/utils/color_manager.dart';
class CustomExpansionTile extends StatefulWidget {
final String title;
final List<Widget>? children;
final bool initiallyExpanded;
CustomExpansionTile({
required this.title,
this.children,
this.initiallyExpanded = false,
});
@override
CustomExpansionTileState createState() => CustomExpansionTileState();
}
class CustomExpansionTileState extends State<CustomExpansionTile> {
bool _isExpanded = false;
bool _isChecked = false;
@override
void initState() {
super.initState();
_isExpanded = widget.initiallyExpanded;
}
@override
Widget build(BuildContext context) {
return Column(
children: [
InkWell(
onTap: () {
setState(() {
_isExpanded = !_isExpanded;
});
},
child: Row(
children: [
// Customizing the Checkbox
Checkbox(
value: _isChecked,
onChanged: (bool? value) {
setState(() {
_isChecked = value ?? false;
});
},
side: WidgetStateBorderSide.resolveWith((states) {
if (states.contains(WidgetState.selected)) {
return const BorderSide(color: ColorsManager.grayBorder);
}
return const BorderSide(color: ColorsManager.grayBorder);
}),
// Customize the color for different checkbox states
fillColor: WidgetStateProperty.resolveWith((states) {
if (states.contains(WidgetState.selected)) {
return ColorsManager.grayBorder; // Checked state color
}
return ColorsManager
.checkBoxFillColor; // Unchecked state color
}),
checkColor: ColorsManager.whiteColors, // Checkmark color
),
// Expand/Collapse Icon with reduced size
if (widget.children != null && widget.children!.isNotEmpty)
Icon(
_isExpanded
? Icons.keyboard_arrow_down // Upward arrow when expanded
: Icons
.keyboard_arrow_right, // Right arrow when collapsed
color: Colors.grey,
size: 16.0, // Reduced icon size
),
// Title Text
Expanded(
child: Text(
widget.title,
style: TextStyle(
color: _isExpanded
? ColorsManager.blackColor
: ColorsManager.lightGrayColor,
fontWeight: FontWeight.w400,
),
),
),
],
),
),
// Display children if available and expanded
if (_isExpanded &&
widget.children != null &&
widget.children!.isNotEmpty)
Padding(
padding: const EdgeInsets.only(left: 48.0), // Indent the children
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: widget.children!,
),
),
],
);
}
}

159
lib/pages/spaces_management/view/spaces_management_page.dart
View File

@ -1,8 +1,12 @@
import 'dart:ui_web';
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:syncrow_web/common/custom_expansion_tile.dart';
import 'package:syncrow_web/pages/common/buttons/add_space_button.dart';
import 'package:syncrow_web/pages/spaces_management/view/dialogs/create_space_dialog.dart';
import 'package:syncrow_web/utils/color_manager.dart';
import 'package:syncrow_web/utils/constants/assets.dart';
class SpaceManagementPage extends StatefulWidget {
@override
@ -25,17 +29,16 @@ class SpaceManagementPageState extends State<SpaceManagementPage> {
),
body: Stack(
clipBehavior: Clip.none,
children: [
Row(
children: [
// Sidebar for navigation and community list
Container(
width: 250, // Fixed width for sidebar
width: 300, // Fixed width for sidebar
decoration: BoxDecoration(
color: Colors.white, // No gradient inside
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
@ -73,107 +76,104 @@ class SpaceManagementPageState extends State<SpaceManagementPage> {
child: Container(
width: 30,
height: 30,
decoration: BoxDecoration(
decoration: const BoxDecoration(
color: Colors.white,
shape: BoxShape.circle,
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.1),
blurRadius: 10,
spreadRadius: 1,
),
],
),
child: Center(
child: Icon(Icons.add,
color: Colors.blue, size: 18),
child: SvgPicture.asset(
Assets
.roundedAddIcon, // Path to your SVG asset
width: 24, // Set the width
height: 24, // Set the height
),
),
),
),
],
),
),
// Search bar
// Search bar
SizedBox(height: 16),
Container(
decoration: BoxDecoration(
color: ColorsManager.whiteColors,
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.1),
blurRadius: 10,
spreadRadius: 1,
offset: Offset(0, 2), // Slight shadow offset
color:
Colors.black.withOpacity(0.2), // Subtle shadow
spreadRadius: 0, // No spread
blurRadius: 8, // Softer shadow edges
offset: Offset(0, 4), // Shadow only on the bottom
),
],
),
child: Padding(
padding: const EdgeInsets.symmetric(
horizontal: 16.0), // Padding around the search bar
child: Container(
decoration: BoxDecoration(
color: Colors.grey[
200], // Light background for the search bar
borderRadius: BorderRadius.circular(10),
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.05),
blurRadius:
8, // Softer shadow for the search box
),
],
padding: const EdgeInsets.symmetric(horizontal: 16.0),
child: Container(
padding: const EdgeInsets.symmetric(vertical: 20.0),
width: double
.infinity, // Make the container take the full width of its parent
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(
12), // Smooth rounded corners
),
child: TextField(
style: const TextStyle(
color: Colors.black, // Set the text color to black
),
child: TextField(
decoration: InputDecoration(
hintText: 'Search',
prefixIcon:
Icon(Icons.search, color: Colors.grey),
border: InputBorder.none, // No visible border
decoration: InputDecoration(
filled: true,
fillColor: ColorsManager
.textFieldGreyColor, // Background color for the text field itself
hintText: 'Search',
hintStyle: TextStyle(
color: Colors.grey[400], // Gray hint text color
),
suffixIcon: Padding(
padding: const EdgeInsets.only(
right:
16), // Add padding to avoid icon sticking to the edge
child: SvgPicture.asset(
Assets
.textFieldSearch, // Path to your SVG asset
width: 24, // Set the width
height: 24, // Set the height
),
), // Search icon
border: OutlineInputBorder(
borderSide: BorderSide.none, // Remove border
borderRadius: BorderRadius.circular(
12), // Rounded corners for text field
),
contentPadding: const EdgeInsets.symmetric(
vertical:
14, // Vertical padding for proper text alignment
horizontal:
16, // Add space between the text and the left edge
), // Proper padding for alignment
),
),
),
),
SizedBox(height: 16),
const SizedBox(height: 16),
// Example of community list
Expanded(
child: ListView(
children: [
ListTile(
title: Text(
'Downtown Dubai',
style: TextStyle(
color: Colors.black87,
fontWeight: FontWeight.w500,
),
),
CustomExpansionTile(
title: "Downtown Dubai",
),
ListTile(
title: Text(
'Dubai Creek Harbour',
style: TextStyle(
color: Colors.black87,
fontWeight: FontWeight.w500,
),
),
CustomExpansionTile(
title: 'Dubai Creek Harbour',
),
ExpansionTile(
title: Text(
'Dubai Hills Estate',
style: TextStyle(
color: Colors.black87,
fontWeight: FontWeight.w500,
),
),
CustomExpansionTile(
title: 'Dubai Hills Estate',
children: [
ListTile(
title: Text(
'South Side',
style: TextStyle(
color: Colors
.black54, // Lighter text for nested
),
),
),
CustomExpansionTile(
title: 'South Side',
initiallyExpanded: false),
],
),
],
@ -186,11 +186,11 @@ class SpaceManagementPageState extends State<SpaceManagementPage> {
// Right Side: Community Structure Area
Expanded(
child: Container(
decoration: BoxDecoration(
decoration: const BoxDecoration(
color: ColorsManager.whiteColors,
border: Border(
left: BorderSide(
color: Colors.white!,
color: Colors.white,
width: 1.0), // Light left border to match
),
),
@ -199,7 +199,8 @@ class SpaceManagementPageState extends State<SpaceManagementPage> {
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
padding: const EdgeInsets.all(16.0),
padding:
const EdgeInsets.fromLTRB(16.0, 16.0, 16.0, 27.0),
width: double.infinity,
decoration: BoxDecoration(
color: ColorsManager.whiteColors,
@ -273,15 +274,15 @@ class SpaceManagementPageState extends State<SpaceManagementPage> {
Positioned(
top: 0,
bottom: 0,
left: 250, // Align with the sidebar's width
width: 6, // Width of the gradient border
left: 300, // Align with the sidebar's width
width: 8, // Width of the gradient border
child: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.centerLeft,
end: Alignment.centerRight,
colors: [
Color(0x3F000000).withOpacity(0.2), // Light gray
Color(0x3F000000).withOpacity(0.1), // Light gray
Colors.transparent, // Transparent fade
],
),

4
lib/utils/color_manager.dart
View File

@ -18,6 +18,7 @@ abstract class ColorsManager {
static const Color greyColor = Color(0xFFd5d5d5);
static const Color lightGreyColor = Color(0xFF999999);
static const Color backgroundColor = Color(0xFFececec);
static const Color textFieldGreyColor = Color(0xFFF4F4F4);
static const Color dozeColor = Color(0xFFFEC258);
static const Color relaxColor = Color(0xFFFBD288);
static const Color readingColor = Color(0xFFF7D69C);
@ -31,6 +32,8 @@ abstract class ColorsManager {
static const Color grayColor = Color(0xFF999999);
static const Color red = Color(0xFFFF0000);
static const Color graysColor = Color(0xffEBEBEB);
static const Color lightGrayColor = Color(0xB2999999);
static const Color grayBorder = Color(0xFFCFCFCF);
static const Color textGray = Color(0xffD5D5D5);
static const Color btnColor = Color(0xFF00008B);
static const Color blueColor = Color(0xFF0036E6);
@ -42,5 +45,6 @@ abstract class ColorsManager {
static const Color blue4 = Color(0xFF001E7E);
static const Color textGreen = Color(0xFF008905);
static const Color yaGreen = Color(0xFFFFBF44);
static const Color checkBoxFillColor = Color(0xFFF3F3F3);
}
//0036E6

3
lib/utils/constants/assets.dart
View File

@ -159,4 +159,7 @@ class Assets {
static const String unit = 'assets/icons/unit_icon.svg';
static const String villa = 'assets/icons/villa_icon.svg';
static const String iconEdit = 'assets/icons/icon_edit_icon.svg';
static const String textFieldSearch =
'assets/icons/textfield_search_icon.svg';
static const String roundedAddIcon = 'assets/icons/rounded_add_icon.svg';
}