From d1d3a307b7e1801e7f888b1de45ab3f1c6f19477 Mon Sep 17 00:00:00 2001 From: Mohamed Mekawy Date: Thu, 20 Feb 2020 15:53:01 +0300 Subject: [PATCH] finish replacement modal --- .../absence-replacement-list.component.html | 132 +++++++ .../absence-replacement-list.component.scss | 121 +++++++ ...absence-replacement-list.component.spec.ts | 27 ++ .../absence-replacement-list.component.ts | 342 ++++++++++++++++++ Mohem/src/app/absence/absence.module.ts | 14 +- .../submit-absence.component.scss | 2 + .../submit-absence.component.ts | 8 +- Mohem/src/assets/localization/i18n.json | 2 +- Mohem/src/theme/styles.scss | 9 + 9 files changed, 651 insertions(+), 6 deletions(-) create mode 100644 Mohem/src/app/absence/absence-replacement-list/absence-replacement-list.component.html create mode 100644 Mohem/src/app/absence/absence-replacement-list/absence-replacement-list.component.scss create mode 100644 Mohem/src/app/absence/absence-replacement-list/absence-replacement-list.component.spec.ts create mode 100644 Mohem/src/app/absence/absence-replacement-list/absence-replacement-list.component.ts diff --git a/Mohem/src/app/absence/absence-replacement-list/absence-replacement-list.component.html b/Mohem/src/app/absence/absence-replacement-list/absence-replacement-list.component.html new file mode 100644 index 00000000..5ecc61f1 --- /dev/null +++ b/Mohem/src/app/absence/absence-replacement-list/absence-replacement-list.component.html @@ -0,0 +1,132 @@ + + + + {{ 'replacementRoll, title' | translate}} + + + + + + + + {{'replacementRoll, searchBy' | translate}} + + {{'addAttach, name' | translate}} + {{'login, username' | translate}} + {{'general, email' | translate}} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+ + + + +
+ + + +
+ +
+ +
+ + + {{employee.EMPLOYEE_DISPLAY_NAME}} +
{{employee.USER_NAME}}
+ {{employee.EMAIL_ADDRESS}} +
+
+
+ +
+ + +
+ + + +
+ + +
+ + {{'general, submit' | translate}} + + + {{'general, cancel' | translate}} +
+
\ No newline at end of file diff --git a/Mohem/src/app/absence/absence-replacement-list/absence-replacement-list.component.scss b/Mohem/src/app/absence/absence-replacement-list/absence-replacement-list.component.scss new file mode 100644 index 00000000..7da0d5c7 --- /dev/null +++ b/Mohem/src/app/absence/absence-replacement-list/absence-replacement-list.component.scss @@ -0,0 +1,121 @@ +button.item-button.button.button-md.button-clear.button-clear-md { + background-color: transparent; + } + + .footer-button { + border-radius: 3px; + padding: 0 1.1em; + min-height: 45px; + min-width: 200px; + } + + // ion-item { + // margin-top: 5%; + // margin-right: 7%; + // width: 100%; + // } + .ionItem{ + border: #e4e4e4 solid; + /* margin: 6px; */ + /* padding: 11px; */ + height: 85px; + width: 164px; + border-radius: 5px; + text-align: center; + + } + + + .profileImageDiv{ + text-align: center; + margin-bottom: -27px; + z-index: 3; + position: relative; + top: 0; + + } + .profileImage{ + width:60px !important; + // margin-left: -25px; + // margin-right: 22px; + } + + .activated{ + border: #209a83 0.02cm solid ; + } + .deactivated{ border: #e4e4e4 0.02cm solid; + } + .repContentDiv{ + text-align: center; + width: 85%; + font-size: 14px; + border: #e4e4e4 solid; + border-radius: 5px; + padding: 20px 8px 8px 8px; + margin-top: -9px; + margin-right: -35px + + } + .selIEmpDiv{ + text-align: right; + margin-bottom: -26px; + margin-right: 0px; + z-index: 3; + position: relative; + top: 0; + } + + .selIEmpImage{ + width:22px !important + + } + + .noteInput{ + border: solid var(--gray) 1px; + border-radius: 15px; + margin: 8px 17px 0px 17px; + padding: 10px 2px 10px 2px; + } + .filterInput{ + border: solid var(--gray) 1px; + border-radius: 21px; + padding-left: 10px !important; + } + .filterBtn{ + background: var(--newgreen); + --background: var (--newgreen); + border-radius: 50%; + height: 60px; + width: 60px; + } + + + + *{ + box-sizing: border-box; + } + + .square-container{ + // padding: 8px; + width:100%; + } + .square{ + // width:calc(100% / 2); + width:50%; + float:left; + position: relative; + // padding-bottom: calc(100% / 2); + } + + .square .content{ + width: calc(100% - 16px) !important; + height: calc(100% - 16px) !important; + margin: 8px; + padding: 16px; + // position: absolute; + color: white; + border-radius: 9px; + text-align: center; + // background-color: #0095ff; + // box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26); + } \ No newline at end of file diff --git a/Mohem/src/app/absence/absence-replacement-list/absence-replacement-list.component.spec.ts b/Mohem/src/app/absence/absence-replacement-list/absence-replacement-list.component.spec.ts new file mode 100644 index 00000000..4dbb31b1 --- /dev/null +++ b/Mohem/src/app/absence/absence-replacement-list/absence-replacement-list.component.spec.ts @@ -0,0 +1,27 @@ +import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { AbsenceReplacementListComponent } from './absence-replacement-list.component'; + +describe('AbsenceReplacementListComponent', () => { + let component: AbsenceReplacementListComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ AbsenceReplacementListComponent ], + schemas: [CUSTOM_ELEMENTS_SCHEMA], + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(AbsenceReplacementListComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/Mohem/src/app/absence/absence-replacement-list/absence-replacement-list.component.ts b/Mohem/src/app/absence/absence-replacement-list/absence-replacement-list.component.ts new file mode 100644 index 00000000..c14a88e6 --- /dev/null +++ b/Mohem/src/app/absence/absence-replacement-list/absence-replacement-list.component.ts @@ -0,0 +1,342 @@ +import { ModalController } from '@ionic/angular'; +import { Component, OnInit } from '@angular/core'; +import { CommonService } from 'src/app/hmg-common/services/common/common.service'; +import { TranslatorService } from 'src/app/hmg-common/services/translator/translator.service'; +import { WorKListReplacmentEmployeeResponse } from 'src/app/notification/models/ReplacmentEmployeeRes'; +import { WorkListReplacmentEmployeeRequest } from 'src/app/notification/models/ReplacmentEmployeeReq'; +import { WorkListActionRequest } from 'src/app/notification/models/NotificationActionReq'; +import { WorklistMainService } from 'src/app/notification/service/work-list.main.service'; +import { ViewReplacementModalComponent } from 'src/app/notification/view-replacement-modal/view-replacement-modal.component'; +import { WorklistService } from 'src/app/notification/service/worklist.service'; + +@Component({ + selector: 'app-absence-replacement-list', + templateUrl: './absence-replacement-list.component.html', + styleUrls: ['./absence-replacement-list.component.scss'], +}) +export class AbsenceReplacementListComponent implements OnInit { + + P_SEARCH_EMPLOYEE_DISPLAY_NAME: string = ""; + P_SEARCH_EMAIL_ADDRESS: string = ""; + getPassActionMode: any; + selectedValue: any; + inputSearch: any; + selEmpName: any; + selectedUserInf: any; + userNote: any; + getPassNotificationDetails: any; + isAnswer: boolean = false; + pQuestion: string = ""; + selEmp: any; + P_PAGE_NUM: number; + P_PAGE_LIMIT: number; + ReplacementList: any = []; + searchBy: string = ""; + IsReachEnd: boolean = false; + ReplacmentListRes: WorKListReplacmentEmployeeResponse; + private WorkListReplacmentEmployeeObj: WorkListReplacmentEmployeeRequest = new WorkListReplacmentEmployeeRequest(); + private WorkListActionObj: WorkListActionRequest; + getpassResAttr: any = []; + active: any; + demoeAttach:any=[]; + + constructor(public worklistService: WorklistService, private cs: CommonService, private ts: TranslatorService, public workListMainService: WorklistMainService, public modalCtrl: ModalController) { + this.P_PAGE_NUM = 1; + this.P_PAGE_LIMIT = 50; + // this.getPassActionMode = this.cs.sharedService.getSharedData('passActionMode', false); + // this.getPassNotificationDetails = this.cs.sharedService.getSharedData('passNotificationInfo', false); + // this.getpassResAttr = this.cs.sharedService.getSharedData('passResAttr', false); + // this.pQuestion = this.cs.sharedService.getSharedData('pQuestion', false); + // if (this.getPassActionMode == "ANSWER_INFO") { + // this.isAnswer = true; + // } + this.WorkListReplacmentEmployeeObj.P_PAGE_NUM = this.P_PAGE_NUM; + this.WorkListReplacmentEmployeeObj.P_PAGE_LIMIT = this.P_PAGE_LIMIT; + + // this.WorkListActionObj = new WorkListActionRequest(); + // this.WorkListActionObj.P_NOTIFICATION_ID = this.getPassNotificationDetails.NOTIFICATION_ID;//26919060; + // this.WorkListActionObj.P_FORWARD_TO_USER_NAME = ""; + // this.WorkListActionObj.P_ACTION_MODE = ""; + // this.WorkListActionObj.P_COMMENTS = ""; + // this.WorkListActionObj.RespondAttributeList =[];// this.getpassResAttr; + // this.WorkListActionObj.P_APPROVER_INDEX = null; + } + + ngOnInit() { + + this.demoeAttach = [{ + USER_NAME: '18888', + EMPLOYEE_DISPLAY_NAME: "AAA fgfhfhfhf hyutyututut ", + EMAIL_ADDRESS: "test@yuyuu.hjj", + + + + }, + { + + USER_NAME: '18888', + EMPLOYEE_DISPLAY_NAME: "AAA fgfhfhfhf hyutyututut ", + EMAIL_ADDRESS: "test@yuyuu.hjj" + + }, + { + USER_NAME: '18888', + EMPLOYEE_DISPLAY_NAME: "AAA fgfhfhfhf hyutyututut ", + EMAIL_ADDRESS: "test@yuyuu.hjj" + + }, + { + USER_NAME: '18888', + EMPLOYEE_DISPLAY_NAME: "AAA fgfhfhfhf hyutyututut ", + EMAIL_ADDRESS: "test@yuyuu.hjj" + + } + ]; + } + + getreplacmentemployee() { + this.ReplacementList = []; + this.IsReachEnd = false; + this.P_PAGE_NUM = 1; + if (this.inputSearch) { + switch (this.searchBy) { + case '1': { + + this.WorkListReplacmentEmployeeObj.P_SEARCH_EMPLOYEE_DISPLAY_NAME = this.inputSearch; + this.WorkListReplacmentEmployeeObj.P_SEARCH_USER_NAME = ""; + this.WorkListReplacmentEmployeeObj.P_SEARCH_EMAIL_ADDRESS = ""; + + break; + } + case '2': { + this.WorkListReplacmentEmployeeObj.P_SEARCH_USER_NAME = this.inputSearch; + this.WorkListReplacmentEmployeeObj.P_SEARCH_EMPLOYEE_DISPLAY_NAME = ""; + this.WorkListReplacmentEmployeeObj.P_SEARCH_EMAIL_ADDRESS = ""; + break; + } + case '3': { + this.WorkListReplacmentEmployeeObj.P_SEARCH_EMAIL_ADDRESS = this.inputSearch; + this.WorkListReplacmentEmployeeObj.P_SEARCH_USER_NAME = ""; + this.WorkListReplacmentEmployeeObj.P_SEARCH_EMPLOYEE_DISPLAY_NAME = ""; + break; + } + default: { + this.WorkListReplacmentEmployeeObj.P_SEARCH_USER_NAME = ""; + this.WorkListReplacmentEmployeeObj.P_SEARCH_EMPLOYEE_DISPLAY_NAME = ""; + this.WorkListReplacmentEmployeeObj.P_SEARCH_EMAIL_ADDRESS = ""; + break; + } + } + } else { + this.WorkListReplacmentEmployeeObj.P_SEARCH_USER_NAME = ""; + this.WorkListReplacmentEmployeeObj.P_SEARCH_EMPLOYEE_DISPLAY_NAME = ""; + this.WorkListReplacmentEmployeeObj.P_SEARCH_EMAIL_ADDRESS = ""; + } + // if(this.selectedValue =="1"){ + // this.WorkListReplacmentEmployeeObj.P_SEARCH_USER_NAME=this.inputSearch; + // this.WorkListReplacmentEmployeeObj.P_SEARCH_EMPLOYEE_DISPLAY_NAME=""; + // this.WorkListReplacmentEmployeeObj.P_SEARCH_EMAIL_ADDRESS=""; + // } + // else if(this.selectedValue =="2"){ + // this.WorkListReplacmentEmployeeObj.P_SEARCH_USER_NAME=""; + // this.WorkListReplacmentEmployeeObj.P_SEARCH_EMPLOYEE_DISPLAY_NAME=this.inputSearch; + // this.WorkListReplacmentEmployeeObj.P_SEARCH_EMAIL_ADDRESS=""; + // } + // else if(this.selectedValue =="3"){ + // this.WorkListReplacmentEmployeeObj.P_SEARCH_USER_NAME=""; + // this.WorkListReplacmentEmployeeObj.P_SEARCH_EMPLOYEE_DISPLAY_NAME=""; + // this.WorkListReplacmentEmployeeObj.P_SEARCH_EMAIL_ADDRESS=this.inputSearch; + // } + + this.worklistService.getReplacmentEmployeeList(this.WorkListReplacmentEmployeeObj). + subscribe((result: WorKListReplacmentEmployeeResponse) => { + this.handleWorkListReplacmentEmployeeResult(result); + }); + + }//End replacment Employee + + handleWorkListReplacmentEmployeeResult(result) { + + if (this.cs.validResponse(result)) { + // this.sharedData.setSharedData(result, WorKListResponse.SHARED_DATA); + if (this.cs.hasData(result.ReplacementList)) { + //this.ReplacmentListRes =result.ReplacementList; + this.ReplacementList = result.ReplacementList; + this.P_PAGE_NUM++; + let lastItemIndex = this.ReplacementList.length - 1; + if (result.ReplacementList[lastItemIndex]) { + let lastitem = result.ReplacementList[lastItemIndex]; + if (lastitem.NO_OF_ROWS == lastitem.ROW_NUM) { + this.IsReachEnd = true; + } else { + this.IsReachEnd = false; + } + } + } else { + let msg: string = this.ts.trPK('general', 'noResult'); + this.cs.presentAlert(msg); + } + // if(result.ReplacementList.length == 0){ + + // } + + // else if(result.ReplacementList != null) + // { + // this.ReplacmentListRes =result.ReplacementList; + // //open modal + // this.openModale(this.ReplacmentListRes); + + + // } // if result == null + + } // valid it + } + + getValueSelected(Value) { + + this.selectedValue = Value; + } + + + select(selectEmp,index){ + console.log(selectEmp.EMPLOYEE_DISPLAY_NAME); + this.selEmp=selectEmp + this.active=index; + } + clear() { + this.selEmpName = ""; + this.selectedUserInf = null; + + } + async openModale(ReplacmentListRes) { + const modal = await this.modalCtrl.create({ + component: ViewReplacementModalComponent + }); + + modal.onDidDismiss() + .then((data) => { + if (data == "cancel" || data == "undefined") { + //this.selEmpName=""; + return; + } else { + this.selectedUserInf = data; + this.selEmpName = this.selectedUserInf.EMPLOYEE_DISPLAY_NAME; + } + }); + + return await modal.present(); + } + + submitAction() { + this.selEmp + if( this.selEmp){ + let data = this.selEmp; + this.modalCtrl.dismiss(data); + }else{ + let msg: string = this.ts.trPK("replacementRoll", "msg"); + this.cs.showErrorMessageDialog(() => { + }, this.ts.trPK('general', 'ok'), msg); + return false; + } + + // if (this.selEmp && this.isAnswer == false) { + // // this.selectedUserInf = this.ReplacementList[this.selEmp]; + // this.selectedUserInf = this.selEmp; + // console.log("selEmp "+ this.selEmp.USER_NAME); + + // if (this.selectedUserInf && this.selectedUserInf.USER_NAME) { + // console.log("userInfo "+this.selectedUserInf.USER_NAME); + // if (this.userNote) { + // this.WorkListActionObj.P_FORWARD_TO_USER_NAME = this.selectedUserInf.USER_NAME; + // this.WorkListActionObj.P_ACTION_MODE = this.getPassActionMode; + // this.WorkListActionObj.P_COMMENTS = this.userNote;// response Attr + + // this.workListMainService.actionButton(this.WorkListActionObj). + // subscribe((result: any) => { + // this.handleApplayActionResult(result); + // }); + // } else { + // let msg: string = this.ts.trPK("replacementRoll", "enterNote"); + // this.cs.showErrorMessageDialog(() => { + // }, this.ts.trPK('general', 'ok'), msg); + + // } + // } else { + // let msg: string = this.ts.trPK("replacementRoll", "msg"); + // this.cs.showErrorMessageDialog(() => { + // }, this.ts.trPK('general', 'ok'), msg); + // } + // } else if (this.isAnswer == true) { + // if (this.userNote) { + // this.WorkListActionObj.P_FORWARD_TO_USER_NAME = null; + // this.WorkListActionObj.P_ACTION_MODE = this.getPassActionMode; + // this.WorkListActionObj.P_COMMENTS = this.userNote;// response Attr + + // this.workListMainService.actionButton(this.WorkListActionObj). + // subscribe((result: any) => { + // this.handleApplayActionResult(result); + // }); + // } else { + // let msg: string = this.ts.trPK("replacementRoll", "enterNote"); + // this.cs.showErrorMessageDialog(() => { + // }, this.ts.trPK('general', 'ok'), msg); + // } + // } else { + // let msg: string = this.ts.trPK("replacementRoll", "msg"); + // this.cs.showErrorMessageDialog(() => { + // }, this.ts.trPK('general', 'ok'), msg); + // } + } + + + + + doInfinite(infiniteScroll) { + if (!this.IsReachEnd) { + //const request =new WorkListActionRequest(); + // request.WorkListReplacmentEmployeeObj.P_SEARCH_USER_NAME=this.P_SEARCH_USER_NAME; + // request.WorkListReplacmentEmployeeObj.P_SEARCH_EMPLOYEE_DISPLAY_NAME=this.P_SEARCH_EMPLOYEE_DISPLAY_NAME; + // request.P_SEARCH_EMAIL_ADDRESS=this.P_SEARCH_EMAIL_ADDRESS; + this.WorkListReplacmentEmployeeObj.P_PAGE_NUM = this.P_PAGE_NUM; + this.WorkListReplacmentEmployeeObj.P_PAGE_LIMIT = this.P_PAGE_LIMIT; + // request.P_SELECTED_EMPLOYEE_NUMBER=this.selEmp; + + this.worklistService.getReplacmentEmployeeList(this.WorkListReplacmentEmployeeObj). + subscribe((result: any) => { + if (this.cs.validResponse(result)) { + if (this.cs.hasData(result.ReplacementList)) { + this.P_PAGE_NUM++; + result.ReplacementList.forEach(vr => { + if (vr.ROW_NUM == vr.NO_OF_ROWS) { + this.IsReachEnd = true; + } + else { + this.IsReachEnd = false; + } + this.ReplacementList.push(vr); + // this.pro.GetVacationRulesList.push(vr); + }); + } else { + this.IsReachEnd = true; + } + } + //this.P_PAGE_NUM++; + if (infiniteScroll) + infiniteScroll.target.complete(); + + + // console.log(resFlag); + }, (Error) => console.log(Error), () => infiniteScroll.target.complete()); + } else { + if (infiniteScroll) + infiniteScroll.target.complete(); + } + } + + + closeModal() { + this.modalCtrl.dismiss(); + } + +} + diff --git a/Mohem/src/app/absence/absence.module.ts b/Mohem/src/app/absence/absence.module.ts index e98a0b8d..1b8d9bc5 100644 --- a/Mohem/src/app/absence/absence.module.ts +++ b/Mohem/src/app/absence/absence.module.ts @@ -21,6 +21,9 @@ import { AddAttachService } from "./service/add-attach-service"; import { WorkListAttachViewComponent } from "src/app/notification/work-list-attach-view/work-list-attach-view.component"; import { ViewAttachmentsComponent } from './view-attachments/view-attachments.component'; import { SubmitAbsenceModalComponent } from './submit-absence-modal/submit-absence-modal.component'; +import { AbsenceReplacementListComponent } from './absence-replacement-list/absence-replacement-list.component'; +import { WorklistService } from 'src/app/notification/service/worklist.service'; +import { WorklistMainService } from 'src/app/notification/service/work-list.main.service'; const routes: Routes = [ { path: "", @@ -57,6 +60,10 @@ const routes: Routes = [ { path:'absence-submit-modal', component:SubmitAbsenceModalComponent + }, + { + path:'absence-replacment-modal', + component:AbsenceReplacementListComponent } ] } @@ -78,7 +85,9 @@ const routes: Routes = [ SubmitAbConfirmService, DatePicker, ConfirmAddEitService, - AddAttachService + AddAttachService, + WorklistService, + WorklistMainService ], declarations: [ AbsencePage, @@ -87,7 +96,8 @@ const routes: Routes = [ AbsenceConfirmComponent, AbsenceAttachmentComponent, ViewAttachmentsComponent, - SubmitAbsenceModalComponent + SubmitAbsenceModalComponent, + AbsenceReplacementListComponent ] }) export class AbsencePageModule {} diff --git a/Mohem/src/app/absence/submit-absence/submit-absence.component.scss b/Mohem/src/app/absence/submit-absence/submit-absence.component.scss index 5725eec4..477ee720 100644 --- a/Mohem/src/app/absence/submit-absence/submit-absence.component.scss +++ b/Mohem/src/app/absence/submit-absence/submit-absence.component.scss @@ -19,3 +19,5 @@ color: white!important; border-radius: 16px !important; } + + diff --git a/Mohem/src/app/absence/submit-absence/submit-absence.component.ts b/Mohem/src/app/absence/submit-absence/submit-absence.component.ts index 81d1bc98..cd019974 100644 --- a/Mohem/src/app/absence/submit-absence/submit-absence.component.ts +++ b/Mohem/src/app/absence/submit-absence/submit-absence.component.ts @@ -26,6 +26,7 @@ import * as moment from "moment"; import {ReplacementListComponent} from "../../vacation-rule/replacement-list/replacement-list.component"; import {ReplacmentResponse} from "../models/replacment-response"; import { AbsenceResponse } from '../models/absence.response'; +import { AbsenceReplacementListComponent } from '../absence-replacement-list/absence-replacement-list.component'; @Component({ selector: "app-submit-absence", templateUrl: "./submit-absence.component.html", @@ -230,12 +231,13 @@ export class SubmitAbsenceComponent implements OnInit { async SearchReplacment() { const modal = await this.modalCtrl.create({ - component: ReplacementListComponent + component: AbsenceReplacementListComponent, + backdropDismiss: false }); - + modal.cssClass = 'replaceRoll-modal'; modal.onDidDismiss() .then((data) => { - const user = data.data.empData; + const user = data.data; console.log(data) console.log(user); if (data) { diff --git a/Mohem/src/assets/localization/i18n.json b/Mohem/src/assets/localization/i18n.json index 6a42895d..433eb926 100644 --- a/Mohem/src/assets/localization/i18n.json +++ b/Mohem/src/assets/localization/i18n.json @@ -1587,7 +1587,7 @@ }, "msg":{ "en": "Select a replacement", - "ar":"اختيار بديل" + "ar":"اختر بديل" }, "title":{ "en": "Replacement Roll", diff --git a/Mohem/src/theme/styles.scss b/Mohem/src/theme/styles.scss index fe19cdc7..208a5fac 100644 --- a/Mohem/src/theme/styles.scss +++ b/Mohem/src/theme/styles.scss @@ -1154,3 +1154,12 @@ border:0px .modal-wrapper{ border-radius: 20px !important; } + +.replaceRoll-modal { + + padding: 30% 1% !important; + --height: 15cm !important; + --width: 100% !important; + --border-radius: 0.4cm; + +} \ No newline at end of file