From 1b7b7b63345785f57cfa705ce4c5c34812268313 Mon Sep 17 00:00:00 2001 From: Sikander Saleem Date: Mon, 6 Sep 2021 11:24:44 +0300 Subject: [PATCH] live chat ui redesigned. --- .../LiveChat/hospitalsLivechat_page.dart | 234 ++++++------------ .../ContactUs/LiveChat/livechat_page.dart | 125 ++++------ .../LiveChat/pharmaciesLivechat_page.dart | 88 +++---- lib/theme/colors.dart | 1 + 4 files changed, 148 insertions(+), 300 deletions(-) diff --git a/lib/pages/ContactUs/LiveChat/hospitalsLivechat_page.dart b/lib/pages/ContactUs/LiveChat/hospitalsLivechat_page.dart index d85971bb..155f10c7 100644 --- a/lib/pages/ContactUs/LiveChat/hospitalsLivechat_page.dart +++ b/lib/pages/ContactUs/LiveChat/hospitalsLivechat_page.dart @@ -4,6 +4,7 @@ import 'package:diplomaticquarterapp/core/viewModels/project_view_model.dart'; import 'package:diplomaticquarterapp/pages/base/base_view.dart'; import 'package:diplomaticquarterapp/uitl/translations_delegate_base.dart'; import 'package:diplomaticquarterapp/widgets/buttons/button.dart'; +import 'package:diplomaticquarterapp/widgets/buttons/defaultButton.dart'; import 'package:diplomaticquarterapp/widgets/buttons/secondary_button.dart'; import 'package:diplomaticquarterapp/widgets/data_display/text.dart'; import 'package:diplomaticquarterapp/widgets/others/app_scaffold_widget.dart'; @@ -37,182 +38,89 @@ class _HospitalsLiveChatPageState extends State { builder: (_, model, widget) => AppScaffold( baseViewModel: model, isShowDecPage: false, - body: SingleChildScrollView( - child: Container( - child: Column( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Stack( + body: Column( + children: [ + Expanded( + child: SingleChildScrollView( + physics: BouncingScrollPhysics(), + padding: EdgeInsets.only(top: 16, bottom: 16, right: 21, left: 21), + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + mainAxisSize: MainAxisSize.min, children: [ - Column( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - SizedBox( - height: 70, - ), - Container( - width: double.infinity, - height: 230, + Text( + TranslationBase.of(context).instructions, + textAlign: TextAlign.center, + style: TextStyle(fontSize: 14, fontWeight: FontWeight.w600, color: Color(0xff2B353E), letterSpacing: -0.56, height: 21 / 14), + ), + SizedBox(height: 20), + Text( + TranslationBase.of(context).selectHospitalDec + " :", + style: TextStyle(fontSize: 16, fontWeight: FontWeight.w600, color: Color(0xff2B353E), letterSpacing: -0.64, height: 23 / 16), + ), + SizedBox(height: 20), + ListView.separated( + shrinkWrap: true, + physics: NeverScrollableScrollPhysics(), + separatorBuilder: (context, index) => SizedBox(height: 14), + itemCount: model.LiveChatModelList.length, + itemBuilder: (context, index) => InkWell( + onTap: () { + setState(() { + tappedIndex = index; + chat = + "http://chat.dshmg.com:7788/hmgchatapp/hmgchattest/Index.aspx?Name=${model.user.firstName}&PatientID=${model.user.patientID}&MobileNo=${model.user.mobileNumber}&Language=${projectViewModel.currentLanguage}&WorkGroup=${model.LiveChatModelList[index].value}"; + }); + }, + child: Container( + padding: EdgeInsets.only(right: 12, left: 18, top: 16, bottom: 16), decoration: BoxDecoration( - image: DecorationImage( - image: ExactAssetImage( - 'assets/images/dashboard_top_bg.png'), - fit: BoxFit.cover), - ), - child: Padding( - padding: const EdgeInsets.all(8.0), - child: Column( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - SizedBox( - height: projectViewModel.isArabic? 10:20, - ), - Texts( - TranslationBase.of(context).instructions, - color: Colors.white, - textAlign: TextAlign.start, - ), - SizedBox( - height:projectViewModel.isArabic? 8:25, - ), - Texts( - TranslationBase.of(context) - .selectHospitalDec + - " :", - color: Colors.white, - fontWeight: FontWeight.w700, - textAlign: TextAlign.start, + borderRadius: BorderRadius.all( + Radius.circular(10.0), + ), + boxShadow: [ + BoxShadow( + color: Color(0xff000000).withOpacity(.05), + blurRadius: 27, + offset: Offset(0, -3), ), ], - ), + color: tappedIndex == index ? Color(0xff28323A).withOpacity(.7) : Colors.white), + child: Row( + mainAxisAlignment: MainAxisAlignment.spaceAround, + crossAxisAlignment: CrossAxisAlignment.center, + children: [ + Expanded( + child: Text( + model.LiveChatModelList[index]?.projectName ?? "", + style: TextStyle(fontSize: 16, fontWeight: FontWeight.w600, color: tappedIndex == index ? Colors.white : Color(0xff2B353E), letterSpacing: -0.64, height: 23 / 16), + ), + ), + Icon( + Icons.arrow_forward_ios, + color: tappedIndex == index ? Colors.white : Colors.black, + ), + ], ), ), - SizedBox( - height: MediaQuery.of(context).size.height * 0.85, - ), - SizedBox( - height: 100, - ), - ], - ), - Positioned( - left: 13, - right: 13, - top: 200, - child: Container( - width: double.maxFinite, - child: Column( - children: [ - ...List.generate( - model.LiveChatModelList.length, - (index) => Container( - margin: EdgeInsets.only( - left: 0, right: 0, bottom: 20), - decoration: BoxDecoration( - shape: BoxShape.rectangle, - border: Border.all( - color: Colors.white, width: 0.5), - borderRadius: BorderRadius.all( - Radius.circular(5)), - color: tappedIndex == index - ? Theme.of(context).primaryColor - : Colors.white, - ), - child: Padding( - padding: const EdgeInsets.all(8.0), - child: Column( - crossAxisAlignment: - CrossAxisAlignment.start, - children: [ - InkWell( - onTap: () { - setState(() { - tappedIndex = index; - chat = "http://chat.dshmg.com:7788/hmgchatapp/hmgchattest/Index.aspx?Name=${model.user.firstName}&PatientID=${model.user.patientID}&MobileNo=${model.user.mobileNumber}&Language=${projectViewModel.currentLanguage}&WorkGroup=${model.LiveChatModelList[index].value}"; - }); - }, - child: Row( - mainAxisAlignment: - MainAxisAlignment - .spaceAround, - crossAxisAlignment: - CrossAxisAlignment.center, - children: [ - SizedBox( - width: 20, - ), - Expanded( - child: Container( - margin: - EdgeInsets.only( - left: 5, - right: 5), - child: Texts( - '${model.LiveChatModelList[index].projectName}', - color: - tappedIndex == - index - ? Colors - .white - : Colors - .black, - textAlign: TextAlign - .center, - ))), - //model.cOCItemList[index].cOCTitl - IconButton( - icon: Icon( - Icons.arrow_forward_ios, - color: - tappedIndex == index - ? Colors.white - : Colors.black, - ), - tooltip: '', - onPressed: () { - setState(() {}); - }, - ), - ], - ), - ) - ], - ), - ), - )), - ], - ), ), ), ], ), - Container( - height: MediaQuery.of(context).size.height * 0.20, - width: double.maxFinite, - ) - ], + ), ), - ), - ), - bottomSheet: Container( - height: MediaQuery.of(context).size.height * 0.10, - width: double.infinity, - padding: EdgeInsets.all(8.0), - child: Center( - child: Container( - height: MediaQuery.of(context).size.height * 0.07, - width: MediaQuery.of(context).size.width * 0.8, - child: SecondaryButton( - label: TranslationBase.of(context).start, - loading: model.state == ViewState.BusyLocal, - textColor: Colors.white, - disabled: chat.isEmpty, - onTap: () { - launch(chat); - }, + Container( + color: Colors.white, + padding: EdgeInsets.only(top: 16, bottom: 16, right: 21, left: 21), + child: DefaultButton( + TranslationBase.of(context).start, + chat.isEmpty ? null : () => {launch(chat)}, + color: Color(0xffD02127), + textColor: chat.isEmpty ? Color(0xff000000) : Colors.white, + disabledColor: Color(0xffEAEAEA), ), ), - ), + ], ), ), ); diff --git a/lib/pages/ContactUs/LiveChat/livechat_page.dart b/lib/pages/ContactUs/LiveChat/livechat_page.dart index e3826396..0f1bc517 100644 --- a/lib/pages/ContactUs/LiveChat/livechat_page.dart +++ b/lib/pages/ContactUs/LiveChat/livechat_page.dart @@ -2,6 +2,7 @@ import 'dart:ui'; import 'package:diplomaticquarterapp/core/model/ImagesInfo.dart'; import 'package:diplomaticquarterapp/pages/ContactUs/LiveChat/pharmaciesLivechat_page.dart'; +import 'package:diplomaticquarterapp/theme/colors.dart'; import 'package:diplomaticquarterapp/uitl/translations_delegate_base.dart'; import 'package:diplomaticquarterapp/widgets/data_display/text.dart'; import 'package:diplomaticquarterapp/widgets/others/app_scaffold_widget.dart'; @@ -15,17 +16,19 @@ class LiveChatPage extends StatefulWidget { _LiveChatPageState createState() => _LiveChatPageState(); } -class _LiveChatPageState extends State - with SingleTickerProviderStateMixin { +class _LiveChatPageState extends State with SingleTickerProviderStateMixin { TabController _tabController; List imagesInfo = List(); @override void initState() { super.initState(); - imagesInfo.add(ImagesInfo(imageEn: 'https://hmgwebservices.com/Images/MobileApp/imges-info/live-chat/en/0.png',imageAr: 'https://hmgwebservices.com/Images/MobileApp/imges-info/live-chat/ar/0.png')); - imagesInfo.add(ImagesInfo(imageEn: 'https://hmgwebservices.com/Images/MobileApp/imges-info/live-chat/en/1.png',imageAr: 'https://hmgwebservices.com/Images/MobileApp/imges-info/live-chat/ar/1.png')); - imagesInfo.add(ImagesInfo(imageEn: 'https://hmgwebservices.com/Images/MobileApp/imges-info/live-chat/en/2.png',imageAr: 'https://hmgwebservices.com/Images/MobileApp/imges-info/live-chat/ar/2.png')); + imagesInfo + .add(ImagesInfo(imageEn: 'https://hmgwebservices.com/Images/MobileApp/imges-info/live-chat/en/0.png', imageAr: 'https://hmgwebservices.com/Images/MobileApp/imges-info/live-chat/ar/0.png')); + imagesInfo + .add(ImagesInfo(imageEn: 'https://hmgwebservices.com/Images/MobileApp/imges-info/live-chat/en/1.png', imageAr: 'https://hmgwebservices.com/Images/MobileApp/imges-info/live-chat/ar/1.png')); + imagesInfo + .add(ImagesInfo(imageEn: 'https://hmgwebservices.com/Images/MobileApp/imges-info/live-chat/en/2.png', imageAr: 'https://hmgwebservices.com/Images/MobileApp/imges-info/live-chat/ar/2.png')); _tabController = TabController(length: 2, vsync: this); } @@ -44,84 +47,42 @@ class _LiveChatPageState extends State title: TranslationBase.of(context).liveChat, description: TranslationBase.of(context).infoChat, appBarTitle: TranslationBase.of(context).service, - body: Scaffold( - extendBodyBehindAppBar: true, - appBar: PreferredSize( - preferredSize: Size.fromHeight(65.0), - child: Stack( - children: [ - Positioned( - bottom: 1, - left: 0, - right: 0, - child: BackdropFilter( - filter: ImageFilter.blur(sigmaX: 10, sigmaY: 10), - child: Container( - color: Theme.of(context) - .scaffoldBackgroundColor - .withOpacity(0.8), - height: 70.0, - ), - ), - ), - Center( - child: Container( - height: 60.0, - margin: EdgeInsets.only(top: 10.0), - width: MediaQuery.of(context).size.width * 0.92, // 0.9, - decoration: BoxDecoration( - border: Border( - bottom: BorderSide( - color: Theme.of(context).dividerColor, - width: 0.9), //width: 0.7 - ), - color: Colors.white), - child: Center( - child: TabBar( - isScrollable: true, - controller: _tabController, - indicatorWeight: 5.0, - indicatorSize: TabBarIndicatorSize.tab, - indicatorColor: Theme.of(context).primaryColor, - labelColor: Theme.of(context).primaryColor, - labelPadding: EdgeInsets.only(top: 4.0, left: 35.0, right: 35.0), - unselectedLabelColor: Colors.grey[800], - tabs: [ - Container( - width: MediaQuery.of(context).size.width * 0.30, - child: Center( - child: Texts(TranslationBase.of(context).hospitals), - ), - ), - Container( - width: MediaQuery.of(context).size.width * 0.30, - child: Center( - child: Texts(TranslationBase.of(context).pharmacies), - ), - ), - ], - ), - ), - ), - ), - ], + showNewAppBar: true, + showNewAppBarTitle: true, + backgroundColor: CustomColors.appBackgroudGrey2Color, + body: Column( + children: [ + TabBar( + controller: _tabController, + indicatorWeight: 3.0, + indicatorSize: TabBarIndicatorSize.tab, + labelColor: Color(0xff2B353E), + unselectedLabelColor: Color(0xff575757), + labelPadding: EdgeInsets.only(top: 15, bottom: 13, left: 20, right: 20), + labelStyle: TextStyle( + fontSize: 16, + fontWeight: FontWeight.w600, + letterSpacing: -0.48, + ), + unselectedLabelStyle: TextStyle( + fontSize: 16, + fontWeight: FontWeight.w600, + letterSpacing: -0.48, + ), + tabs: [Text(TranslationBase.of(context).hospitals), Text(TranslationBase.of(context).pharmacies)], ), - ), - body: Column( - children: [ - Expanded( - child: TabBarView( - physics: BouncingScrollPhysics(), - controller: _tabController, - children: [ - HospitalsLiveChatPage(), //SendFeedbackPage(), - PhamaciesLiveChatPage() - //StatusFeedbackPage() - ], - ), - ) - ], - ), + Expanded( + child: TabBarView( + physics: BouncingScrollPhysics(), + controller: _tabController, + children: [ + HospitalsLiveChatPage(), //SendFeedbackPage(), + PharmaciesLiveChatPage() + //StatusFeedbackPage() + ], + ), + ) + ], ), ); } diff --git a/lib/pages/ContactUs/LiveChat/pharmaciesLivechat_page.dart b/lib/pages/ContactUs/LiveChat/pharmaciesLivechat_page.dart index 26ccc1fc..e4dff24e 100644 --- a/lib/pages/ContactUs/LiveChat/pharmaciesLivechat_page.dart +++ b/lib/pages/ContactUs/LiveChat/pharmaciesLivechat_page.dart @@ -5,6 +5,7 @@ import 'package:diplomaticquarterapp/core/viewModels/project_view_model.dart'; import 'package:diplomaticquarterapp/pages/base/base_view.dart'; import 'package:diplomaticquarterapp/uitl/translations_delegate_base.dart'; import 'package:diplomaticquarterapp/widgets/buttons/button.dart'; +import 'package:diplomaticquarterapp/widgets/buttons/defaultButton.dart'; import 'package:diplomaticquarterapp/widgets/data_display/text.dart'; import 'package:diplomaticquarterapp/widgets/others/app_scaffold_widget.dart'; import 'package:flutter/cupertino.dart'; @@ -13,21 +14,8 @@ import 'package:provider/provider.dart'; import 'package:url_launcher/url_launcher.dart'; -class PhamaciesLiveChatPage extends StatefulWidget { - @override - _PhamaciesLiveChatPageState createState() => _PhamaciesLiveChatPageState(); -} - -class _PhamaciesLiveChatPageState extends State { - int tappedIndex; - String chat; - - @override - void initState() { - super.initState(); - tappedIndex = -1; - chat = ""; - } +class PharmaciesLiveChatPage extends StatelessWidget { + PharmaciesLiveChatPage({Key key}) : super(key: key); @override Widget build(BuildContext context) { @@ -36,53 +24,43 @@ class _PhamaciesLiveChatPageState extends State { builder: (_, model, widget) => AppScaffold( baseViewModel: model, isShowDecPage: false, - body: SingleChildScrollView( - child: Container( - margin: EdgeInsets.only(left: 15, right: 15), - child: Column( - children: [ - SizedBox( - height: 20, + body: Column( + children: [ + Expanded( + child: SingleChildScrollView( + physics: BouncingScrollPhysics(), + padding: EdgeInsets.only(top: 16, bottom: 16, right: 21, left: 21), + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + mainAxisSize: MainAxisSize.min, + children: [ + SizedBox(height: 20), + Text( + TranslationBase.of(context).instructions, + textAlign: TextAlign.center, + style: TextStyle(fontSize: 14, fontWeight: FontWeight.w600, color: Color(0xff2B353E), letterSpacing: -0.56, height: 21 / 14), + ), + ], ), - Container( - width: double.infinity, - height: 200, - - child: Texts( - TranslationBase.of(context).instructionsPharmacies, - color: Colors.black, - textAlign: TextAlign.center, - ), - ), - /////////// - - SizedBox( - height: 100, - ), - ], + ), ), - ), - ), - bottomSheet: Container( - height: MediaQuery.of(context).size.height * 0.11, - width: double.infinity, - padding: EdgeInsets.all(8.0), - child: Center( - child: Container( - height: MediaQuery.of(context).size.height * 0.7, - width: MediaQuery.of(context).size.width * 0.8, - child: Button( - label: TranslationBase.of(context).start, - loading: model.state == ViewState.BusyLocal, - onTap: () { - print("chat=" + chat); + Container( + color: Colors.white, + padding: EdgeInsets.only(top: 16, bottom: 16, right: 21, left: 21), + child: DefaultButton( + TranslationBase.of(context).start, + () { + String chat; chat = - "http://chat.dshmg.com:7788/EPharmacyChat/EIndex.aspx?CustomerID=undefined&Name=${model.user.firstName}&MobileNo=${model.user.mobileNumber}&Language=${projectViewModel.isArabic? 1:2}"; + "http://chat.dshmg.com:7788/EPharmacyChat/EIndex.aspx?CustomerID=undefined&Name=${model.user.firstName}&MobileNo=${model.user.mobileNumber}&Language=${projectViewModel.isArabic ? 1 : 2}"; launch(chat); }, + color: Color(0xffD02127), + textColor: Colors.white, + disabledColor: Color(0xffEAEAEA), ), ), - ), + ], ), ), ); diff --git a/lib/theme/colors.dart b/lib/theme/colors.dart index 5d67ec5c..9aca16ff 100644 --- a/lib/theme/colors.dart +++ b/lib/theme/colors.dart @@ -15,5 +15,6 @@ class CustomColors { static const Color pharmacyGreyColor = Color(0xFFDBDBDB); static const Color backgroudGreyColor = Color(0xFFEFEFEF); static const Color appBackgroudGreyColor = Color(0xFFF7F7F7); + static const Color appBackgroudGrey2Color = Color(0xFFF8F8F8); static const Color green = Color(0xFF359846); }