From cb1aad91f95df174d41cf6ac5072af0356e9ff09 Mon Sep 17 00:00:00 2001 From: "Fatimah.Alshammari" Date: Thu, 23 Jan 2020 10:23:00 +0300 Subject: [PATCH] edit side menue new design --- Mohem/package-lock.json | 7 + Mohem/package.json | 17 +- Mohem/src/app/app.component.html | 112 +++++++++++-- Mohem/src/app/app.component.scss | 152 ++++++++++++++++-- Mohem/src/app/app.component.ts | 17 ++ .../file-uploder-profile.component.html | 24 ++- .../file-uploder-profile.component.scss | 23 ++- .../profile-image.component.html | 2 +- .../profile-image.component.scss | 7 +- Mohem/src/assets/imgs/camera_icon.png | Bin 0 -> 2157 bytes Mohem/src/assets/imgs/close_menu_icon.png | Bin 0 -> 726 bytes Mohem/src/assets/imgs/edit_icon.png | Bin 0 -> 464 bytes Mohem/src/assets/imgs/lock_icon.png | Bin 0 -> 599 bytes Mohem/src/assets/imgs/menu_mohemm_logo.png | Bin 0 -> 20289 bytes Mohem/src/assets/imgs/profile_icon.png | Bin 0 -> 569 bytes Mohem/src/assets/localization/i18n.json | 4 + 16 files changed, 324 insertions(+), 41 deletions(-) create mode 100644 Mohem/src/assets/imgs/camera_icon.png create mode 100644 Mohem/src/assets/imgs/close_menu_icon.png create mode 100644 Mohem/src/assets/imgs/edit_icon.png create mode 100644 Mohem/src/assets/imgs/lock_icon.png create mode 100644 Mohem/src/assets/imgs/menu_mohemm_logo.png create mode 100644 Mohem/src/assets/imgs/profile_icon.png diff --git a/Mohem/package-lock.json b/Mohem/package-lock.json index fc11c970..7c7d2b6c 100644 --- a/Mohem/package-lock.json +++ b/Mohem/package-lock.json @@ -1103,6 +1103,13 @@ "integrity": "sha512-UKNfGmwxy6++21KkZwZxXf0/t1zIKkybwCk6NVRwyuEnPTtNgnynA2G10pYOfTkOFu5UnK8WpqFagRJbHHBHdg==", "requires": { "@types/cordova": "^0.0.34" + }, + "dependencies": { + "@types/cordova": { + "version": "0.0.34", + "resolved": "https://registry.npmjs.org/@types/cordova/-/cordova-0.0.34.tgz", + "integrity": "sha1-6nrd907Ow9dimCegw54smt3HPQQ=" + } } }, "@ionic-native/geolocation": { diff --git a/Mohem/package.json b/Mohem/package.json index b4fc242d..ed651699 100755 --- a/Mohem/package.json +++ b/Mohem/package.json @@ -190,7 +190,20 @@ "cordova-plugin-fingerprint-aio": { "FACEID_USAGE_DESCRIPTION": "User Authentication" }, - "cordova-plugin-firebasex": {} + "cordova-plugin-firebasex": { + "FIREBASE_ANALYTICS_COLLECTION_ENABLED": "true", + "FIREBASE_PERFORMANCE_COLLECTION_ENABLED": "true", + "FIREBASE_CRASHLYTICS_COLLECTION_ENABLED": "true", + "ANDROID_ICON_ACCENT": "#FF00FFFF", + "ANDROID_PLAY_SERVICES_TAGMANAGER_VERSION": "17.0.0", + "ANDROID_FIREBASE_ANALYTICS_VERSION": "17.2.1", + "ANDROID_FIREBASE_MESSAGING_VERSION": "20.0.0", + "ANDROID_FIREBASE_CONFIG_VERSION": "19.0.3", + "ANDROID_FIREBASE_PERF_VERSION": "19.0.1", + "ANDROID_FIREBASE_AUTH_VERSION": "19.1.0", + "ANDROID_CRASHLYTICS_VERSION": "2.10.1", + "ANDROID_CRASHLYTICS_NDK_VERSION": "2.1.1" + } }, "platforms": [ "browser", @@ -198,4 +211,4 @@ "android" ] } -} \ No newline at end of file +} diff --git a/Mohem/src/app/app.component.html b/Mohem/src/app/app.component.html index 1556b050..f3b35531 100644 --- a/Mohem/src/app/app.component.html +++ b/Mohem/src/app/app.component.html @@ -1,25 +1,109 @@ +
-
-

{{ts.trPK('home','hello')}}, {{User_name_Emp}}

- -
+
+ + + + +
+
+
+ +
+
+ + +
+
+ + +

{{User_name_Emp}}

+ +

{{User_Job_name}}

+ +
- - + + + + + +
+ +
+ + + + + + + + + +
+ + + +
+ + + + +
+ + + + + + + + + {{ts.trPK('userProfile','title')}} + + + + + + + + + {{ts.trPK('login','changepassword')}} {{notBadge}} @@ -29,15 +113,15 @@ --> - + +
@@ -55,7 +139,7 @@

{{CompanyImageDescription}}

diff --git a/Mohem/src/app/app.component.scss b/Mohem/src/app/app.component.scss index 0a6314c5..d7c1c6e7 100644 --- a/Mohem/src/app/app.component.scss +++ b/Mohem/src/app/app.component.scss @@ -8,9 +8,112 @@ header .content-ios:not([no-bounce])>.scroll-content::before { bottom: 0; } + +.mohemmLogo{ + + max-width: 46% !important; + border: 0 !important; + margin-left: 70px !important; + margin-top: -24px !important; + margin-bottom: 11px; +} +.closeIcon{ + + height: 10px !important; + margin-left: 255px !important; + margin-top: 0px !important; + background: transparent; + --background: white !important; + +} +// .editIcon{ +// margin-left: 174px !important; +// margin-bottom: -104px !important; +// padding: 6px -3px !important; +// // margin-top: 50px !important; +// background: transparent; +// --background: rgb(235, 232, 232) !important; +// --border-radius: 80% !important; +// // border-color: rgb(211, 208, 208) !important; +// --box-shadow: 3px 0 rgb(194, 191, 191) !important; +// z-index: 3 !important; + +// } + +.menubutton{ + white-space: normal; + color: var(--light); + text-transform: capitalize; + min-height: 39px; + background: #f0ecec; + font-size: 2rem; + position: absolute; + width: 35px !important; + height: 19px; + box-shadow: 3px 0px 7px 0px #c5c2c2; + border-radius: 50%; + + // box-shadow: 0px 2px 7px 0px #dfe1e3 #7f8c8d; + // white-space: normal; + // color: var(--light); + // text-transform: capitalize; + // min-height: 47px; + // background: transparent; + // font-size: 2rem; + // position: absolute; + // top: 40px; +} + +.changeIcon{ + /* background: #c1c1c1; */ + width: 21px; + /* height: 26px; */ + border-radius: 50% !important; + position: relative; + color: #7f8c8d; + + // background: #c1c1c1; + // width: 40px; + // height: 39px; + // border-radius: 50% !important; + // position: relative; + // left: 51px; + // top:16px; +} + +.changeImgBtn{ + // margin: 0; + position: absolute; + top: 18%; + left: 68%; + // -ms-transform: translate(-50%, -50%); + // transform: translate(-50%, -50%); +} + + +.logout{ + background-color:#22C6B3; + border: none; + color:white; + // padding: 20px; + text-align: center; + text-decoration: none; + display: inline-block; + font-size: 12px; + margin-left: 120px !important; + margin-top: 15px !important; + margin-bottom: 20px !important; + border-radius: 30px; +// width: 40px; +height: 26px; +padding: 6px 24px; + +} + .menuImg{ - width: 80px; - height: 80px; + width: 105px !important; + height: 105px !important; + margin-left: 90px !important; display: inline-flex; overflow: hidden; background: transparent; @@ -122,17 +225,19 @@ header margin-left: 0.2cm; } + + .sidebar-menu .header-div { - background: var(--primary); - background: -moz-linear-gradient(45deg, var(--primary) 0%, var(--secondary) 36%, var(--secondary) 59%, var(--customnavy) 100%); - background: -webkit-linear-gradient(45deg, var(--primary) 0%, var(--secondary) 36%, var(--secondary) 59%, var(--customnavy) 100%); - background: linear-gradient(45deg, var(--primary) 0%, var(--secondary) 36%, var(--secondary) 59%, var(--customnavy) 100%); - color: var(--light); + // background: var(--primary); + // background: -moz-linear-gradient(45deg, var(--primary) 0%, var(--secondary) 36%, var(--secondary) 59%, var(--customnavy) 100%); + // background: -webkit-linear-gradient(45deg, var(--primary) 0%, var(--secondary) 36%, var(--secondary) 59%, var(--customnavy) 100%); + // background: linear-gradient(45deg, var(--primary) 0%, var(--secondary) 36%, var(--secondary) 59%, var(--customnavy) 100%); + // color: var(--light); text-transform: capitalize; - height: 120px; + height: 100px; position: relative; display: block; - margin-bottom: 40px; + margin-bottom: -28px; } .list-md .item-block .item-inner, @@ -154,8 +259,20 @@ button.menu-item.item.item-block.item-ios { .TxtPlace { margin: 0; - padding: 40px 0 10px 0; + padding: 0; text-align: center; + font-weight: bolder; + color: black; + font-size: 16px; +} +.TxtPlaces{ + + margin: 0; + padding: 0; + text-align: center; + font-weight: bolder; + font-size: 14px; + color: darkgray; } .menuFooter { @@ -189,6 +306,17 @@ button.menu-item.item.item-block.item-ios { text-align: center; } ion-thumbnail.menu-thumb{ - width:30px; - height:30px; + width:20px; + height:20px; + // margin-top: 5px !important; +} +.changepassword{ +color: black !important; +font-weight: bolder !important; + +} +.profile{ + color: black !important; + font-weight: bolder !important; + } \ No newline at end of file diff --git a/Mohem/src/app/app.component.ts b/Mohem/src/app/app.component.ts index fde78091..a1e655df 100644 --- a/Mohem/src/app/app.component.ts +++ b/Mohem/src/app/app.component.ts @@ -28,6 +28,7 @@ export class AppComponent implements OnInit, AfterViewInit { companyUrl: string = "../assets/imgs/CS.png"; companyDesc: string = "Powered By Cloud Solutions"; public direction = "ltr"; + User_Job_name: string; constructor( public ts: TranslatorService, private cs: CommonService, @@ -89,6 +90,8 @@ export class AppComponent implements OnInit, AfterViewInit { this.user_image = user.EMPLOYEE_IMAGE ? "data:image/png;base64," + user.EMPLOYEE_IMAGE : "../assets/imgs/profile.png"; + this.User_Job_name=user.JOB_NAME; + console.log(user); } else { console.log(user); @@ -133,4 +136,18 @@ export class AppComponent implements OnInit, AfterViewInit { this.menu.toggle(); } + openChangePassword(){ + this.cs.openChangePassword(); + this.menu.toggle(); + } + + private changeImage() { + this.cs.openChangeImagePage(); + this.menu.toggle(); + } + + closeMenu(){ + this.menu.toggle(); + } + } diff --git a/Mohem/src/app/hmg-common/ui/file-uploder-profile/file-uploder-profile.component.html b/Mohem/src/app/hmg-common/ui/file-uploder-profile/file-uploder-profile.component.html index 4cabc97c..6f53759d 100644 --- a/Mohem/src/app/hmg-common/ui/file-uploder-profile/file-uploder-profile.component.html +++ b/Mohem/src/app/hmg-common/ui/file-uploder-profile/file-uploder-profile.component.html @@ -1,10 +1,28 @@ -
+ + {{'userProfile,changeImg' | translate}} -
+
--> + + +
+ + +
+ + + + + + diff --git a/Mohem/src/app/hmg-common/ui/file-uploder-profile/file-uploder-profile.component.scss b/Mohem/src/app/hmg-common/ui/file-uploder-profile/file-uploder-profile.component.scss index e3f037ce..da5d7c33 100644 --- a/Mohem/src/app/hmg-common/ui/file-uploder-profile/file-uploder-profile.component.scss +++ b/Mohem/src/app/hmg-common/ui/file-uploder-profile/file-uploder-profile.component.scss @@ -8,13 +8,24 @@ transform: translate(-50%, -50%); } .btnImge{ - button{ - border-color:transparent !important; - } + // button{ + border-color:transparent !important; + --background: #22C6B3 !important; + background: #22C6B3 !important; + + height: 57px !important; + width: 60px !important; + border-radius: 50% !important; + // } + } //test .changeIcon{ - background: #19a163; - width: 15px; - height: 15px; + background: #22C6B3 !important; + border-radius: 50% !important; + width: 73px; + height: 55px; + color: white !important; + width: 80px; + height: 71px; } \ No newline at end of file diff --git a/Mohem/src/app/profile/profile-image/profile-image.component.html b/Mohem/src/app/profile/profile-image/profile-image.component.html index 0544d51b..04bfb165 100644 --- a/Mohem/src/app/profile/profile-image/profile-image.component.html +++ b/Mohem/src/app/profile/profile-image/profile-image.component.html @@ -3,7 +3,7 @@ - {{ts.trPK('userProfile','title')}} + {{ts.trPK('userProfile','changepicture')}}