live chat ui redesigned.

merge-requests/390/head
Sikander Saleem 5 years ago
parent d2d22ff1fc
commit 1b7b7b6334

@ -4,6 +4,7 @@ import 'package:diplomaticquarterapp/core/viewModels/project_view_model.dart';
import 'package:diplomaticquarterapp/pages/base/base_view.dart'; import 'package:diplomaticquarterapp/pages/base/base_view.dart';
import 'package:diplomaticquarterapp/uitl/translations_delegate_base.dart'; import 'package:diplomaticquarterapp/uitl/translations_delegate_base.dart';
import 'package:diplomaticquarterapp/widgets/buttons/button.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/buttons/secondary_button.dart';
import 'package:diplomaticquarterapp/widgets/data_display/text.dart'; import 'package:diplomaticquarterapp/widgets/data_display/text.dart';
import 'package:diplomaticquarterapp/widgets/others/app_scaffold_widget.dart'; import 'package:diplomaticquarterapp/widgets/others/app_scaffold_widget.dart';
@ -37,182 +38,89 @@ class _HospitalsLiveChatPageState extends State<HospitalsLiveChatPage> {
builder: (_, model, widget) => AppScaffold( builder: (_, model, widget) => AppScaffold(
baseViewModel: model, baseViewModel: model,
isShowDecPage: false, isShowDecPage: false,
body: SingleChildScrollView( body: Column(
child: Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Stack(
children: [ children: [
Column( Expanded(
crossAxisAlignment: CrossAxisAlignment.start, child: SingleChildScrollView(
children: [ physics: BouncingScrollPhysics(),
SizedBox( padding: EdgeInsets.only(top: 16, bottom: 16, right: 21, left: 21),
height: 70,
),
Container(
width: double.infinity,
height: 230,
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( child: Column(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [ children: [
SizedBox( Text(
height: projectViewModel.isArabic? 10:20,
),
Texts(
TranslationBase.of(context).instructions, TranslationBase.of(context).instructions,
color: Colors.white, textAlign: TextAlign.center,
textAlign: TextAlign.start, style: TextStyle(fontSize: 14, fontWeight: FontWeight.w600, color: Color(0xff2B353E), letterSpacing: -0.56, height: 21 / 14),
), ),
SizedBox( SizedBox(height: 20),
height:projectViewModel.isArabic? 8:25, Text(
), TranslationBase.of(context).selectHospitalDec + " :",
Texts( style: TextStyle(fontSize: 16, fontWeight: FontWeight.w600, color: Color(0xff2B353E), letterSpacing: -0.64, height: 23 / 16),
TranslationBase.of(context) ),
.selectHospitalDec + SizedBox(height: 20),
" :", ListView.separated(
color: Colors.white, shrinkWrap: true,
fontWeight: FontWeight.w700, physics: NeverScrollableScrollPhysics(),
textAlign: TextAlign.start, separatorBuilder: (context, index) => SizedBox(height: 14),
), itemCount: model.LiveChatModelList.length,
], itemBuilder: (context, index) => InkWell(
),
),
),
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: <Widget>[
InkWell(
onTap: () { onTap: () {
setState(() { setState(() {
tappedIndex = index; 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}"; 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: <Widget>[
SizedBox(
width: 20,
),
Expanded(
child: Container( child: Container(
margin: padding: EdgeInsets.only(right: 12, left: 18, top: 16, bottom: 16),
EdgeInsets.only( decoration: BoxDecoration(
left: 5, borderRadius: BorderRadius.all(
right: 5), Radius.circular(10.0),
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(() {});
},
), ),
], 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: <Widget>[
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,
),
], ],
), ),
), ),
), ),
],
), ),
Container(
height: MediaQuery.of(context).size.height * 0.20,
width: double.maxFinite,
)
], ],
), ),
), ),
), ),
bottomSheet: Container( Container(
height: MediaQuery.of(context).size.height * 0.10, color: Colors.white,
width: double.infinity, padding: EdgeInsets.only(top: 16, bottom: 16, right: 21, left: 21),
padding: EdgeInsets.all(8.0), child: DefaultButton(
child: Center( TranslationBase.of(context).start,
child: Container( chat.isEmpty ? null : () => {launch(chat)},
height: MediaQuery.of(context).size.height * 0.07, color: Color(0xffD02127),
width: MediaQuery.of(context).size.width * 0.8, textColor: chat.isEmpty ? Color(0xff000000) : Colors.white,
child: SecondaryButton( disabledColor: Color(0xffEAEAEA),
label: TranslationBase.of(context).start,
loading: model.state == ViewState.BusyLocal,
textColor: Colors.white,
disabled: chat.isEmpty,
onTap: () {
launch(chat);
},
),
), ),
), ),
],
), ),
), ),
); );

@ -2,6 +2,7 @@ import 'dart:ui';
import 'package:diplomaticquarterapp/core/model/ImagesInfo.dart'; import 'package:diplomaticquarterapp/core/model/ImagesInfo.dart';
import 'package:diplomaticquarterapp/pages/ContactUs/LiveChat/pharmaciesLivechat_page.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/uitl/translations_delegate_base.dart';
import 'package:diplomaticquarterapp/widgets/data_display/text.dart'; import 'package:diplomaticquarterapp/widgets/data_display/text.dart';
import 'package:diplomaticquarterapp/widgets/others/app_scaffold_widget.dart'; import 'package:diplomaticquarterapp/widgets/others/app_scaffold_widget.dart';
@ -15,17 +16,19 @@ class LiveChatPage extends StatefulWidget {
_LiveChatPageState createState() => _LiveChatPageState(); _LiveChatPageState createState() => _LiveChatPageState();
} }
class _LiveChatPageState extends State<LiveChatPage> class _LiveChatPageState extends State<LiveChatPage> with SingleTickerProviderStateMixin {
with SingleTickerProviderStateMixin {
TabController _tabController; TabController _tabController;
List<ImagesInfo> imagesInfo = List(); List<ImagesInfo> imagesInfo = List();
@override @override
void initState() { void initState() {
super.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
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')); .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/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/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); _tabController = TabController(length: 2, vsync: this);
} }
@ -44,85 +47,43 @@ class _LiveChatPageState extends State<LiveChatPage>
title: TranslationBase.of(context).liveChat, title: TranslationBase.of(context).liveChat,
description: TranslationBase.of(context).infoChat, description: TranslationBase.of(context).infoChat,
appBarTitle: TranslationBase.of(context).service, appBarTitle: TranslationBase.of(context).service,
body: Scaffold( showNewAppBar: true,
extendBodyBehindAppBar: true, showNewAppBarTitle: true,
appBar: PreferredSize( backgroundColor: CustomColors.appBackgroudGrey2Color,
preferredSize: Size.fromHeight(65.0), body: Column(
child: Stack(
children: <Widget>[ children: <Widget>[
Positioned( TabBar(
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, controller: _tabController,
indicatorWeight: 5.0, indicatorWeight: 3.0,
indicatorSize: TabBarIndicatorSize.tab, indicatorSize: TabBarIndicatorSize.tab,
indicatorColor: Theme.of(context).primaryColor, labelColor: Color(0xff2B353E),
labelColor: Theme.of(context).primaryColor, unselectedLabelColor: Color(0xff575757),
labelPadding: EdgeInsets.only(top: 4.0, left: 35.0, right: 35.0), labelPadding: EdgeInsets.only(top: 15, bottom: 13, left: 20, right: 20),
unselectedLabelColor: Colors.grey[800], labelStyle: TextStyle(
tabs: [ fontSize: 16,
Container( fontWeight: FontWeight.w600,
width: MediaQuery.of(context).size.width * 0.30, letterSpacing: -0.48,
child: Center(
child: Texts(TranslationBase.of(context).hospitals),
), ),
unselectedLabelStyle: TextStyle(
fontSize: 16,
fontWeight: FontWeight.w600,
letterSpacing: -0.48,
), ),
Container( tabs: [Text(TranslationBase.of(context).hospitals), Text(TranslationBase.of(context).pharmacies)],
width: MediaQuery.of(context).size.width * 0.30,
child: Center(
child: Texts(TranslationBase.of(context).pharmacies),
),
),
],
),
), ),
),
),
],
),
),
body: Column(
children: <Widget>[
Expanded( Expanded(
child: TabBarView( child: TabBarView(
physics: BouncingScrollPhysics(), physics: BouncingScrollPhysics(),
controller: _tabController, controller: _tabController,
children: <Widget>[ children: <Widget>[
HospitalsLiveChatPage(), //SendFeedbackPage(), HospitalsLiveChatPage(), //SendFeedbackPage(),
PhamaciesLiveChatPage() PharmaciesLiveChatPage()
//StatusFeedbackPage() //StatusFeedbackPage()
], ],
), ),
) )
], ],
), ),
),
); );
} }
} }

@ -5,6 +5,7 @@ import 'package:diplomaticquarterapp/core/viewModels/project_view_model.dart';
import 'package:diplomaticquarterapp/pages/base/base_view.dart'; import 'package:diplomaticquarterapp/pages/base/base_view.dart';
import 'package:diplomaticquarterapp/uitl/translations_delegate_base.dart'; import 'package:diplomaticquarterapp/uitl/translations_delegate_base.dart';
import 'package:diplomaticquarterapp/widgets/buttons/button.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/data_display/text.dart';
import 'package:diplomaticquarterapp/widgets/others/app_scaffold_widget.dart'; import 'package:diplomaticquarterapp/widgets/others/app_scaffold_widget.dart';
import 'package:flutter/cupertino.dart'; import 'package:flutter/cupertino.dart';
@ -13,21 +14,8 @@ import 'package:provider/provider.dart';
import 'package:url_launcher/url_launcher.dart'; import 'package:url_launcher/url_launcher.dart';
class PhamaciesLiveChatPage extends StatefulWidget { class PharmaciesLiveChatPage extends StatelessWidget {
@override PharmaciesLiveChatPage({Key key}) : super(key: key);
_PhamaciesLiveChatPageState createState() => _PhamaciesLiveChatPageState();
}
class _PhamaciesLiveChatPageState extends State<PhamaciesLiveChatPage> {
int tappedIndex;
String chat;
@override
void initState() {
super.initState();
tappedIndex = -1;
chat = "";
}
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
@ -36,53 +24,43 @@ class _PhamaciesLiveChatPageState extends State<PhamaciesLiveChatPage> {
builder: (_, model, widget) => AppScaffold( builder: (_, model, widget) => AppScaffold(
baseViewModel: model, baseViewModel: model,
isShowDecPage: false, isShowDecPage: false,
body: SingleChildScrollView( body: Column(
child: Container( children: [
margin: EdgeInsets.only(left: 15, right: 15), Expanded(
child: SingleChildScrollView(
physics: BouncingScrollPhysics(),
padding: EdgeInsets.only(top: 16, bottom: 16, right: 21, left: 21),
child: Column( child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [ children: [
SizedBox( SizedBox(height: 20),
height: 20, Text(
), TranslationBase.of(context).instructions,
Container(
width: double.infinity,
height: 200,
child: Texts(
TranslationBase.of(context).instructionsPharmacies,
color: Colors.black,
textAlign: TextAlign.center, textAlign: TextAlign.center,
), style: TextStyle(fontSize: 14, fontWeight: FontWeight.w600, color: Color(0xff2B353E), letterSpacing: -0.56, height: 21 / 14),
),
///////////
SizedBox(
height: 100,
), ),
], ],
), ),
), ),
), ),
bottomSheet: Container( Container(
height: MediaQuery.of(context).size.height * 0.11, color: Colors.white,
width: double.infinity, padding: EdgeInsets.only(top: 16, bottom: 16, right: 21, left: 21),
padding: EdgeInsets.all(8.0), child: DefaultButton(
child: Center( TranslationBase.of(context).start,
child: Container( () {
height: MediaQuery.of(context).size.height * 0.7, String chat;
width: MediaQuery.of(context).size.width * 0.8,
child: Button(
label: TranslationBase.of(context).start,
loading: model.state == ViewState.BusyLocal,
onTap: () {
print("chat=" + chat);
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); launch(chat);
}, },
color: Color(0xffD02127),
textColor: Colors.white,
disabledColor: Color(0xffEAEAEA),
), ),
), ),
), ],
), ),
), ),
); );

@ -15,5 +15,6 @@ class CustomColors {
static const Color pharmacyGreyColor = Color(0xFFDBDBDB); static const Color pharmacyGreyColor = Color(0xFFDBDBDB);
static const Color backgroudGreyColor = Color(0xFFEFEFEF); static const Color backgroudGreyColor = Color(0xFFEFEFEF);
static const Color appBackgroudGreyColor = Color(0xFFF7F7F7); static const Color appBackgroudGreyColor = Color(0xFFF7F7F7);
static const Color appBackgroudGrey2Color = Color(0xFFF8F8F8);
static const Color green = Color(0xFF359846); static const Color green = Color(0xFF359846);
} }

Loading…
Cancel
Save