From a13aff603882095d493d81e572bca6828393f51b Mon Sep 17 00:00:00 2001 From: Viktor Konyshev Date: Sun, 13 Aug 2023 19:00:48 +0600 Subject: [PATCH 1/3] edited time picker and date picker layout --- .../pickerDateTime/DatePickerView.kt | 5 ++++- .../pickerDateTime/DateTimePickerModalView.kt | 18 +++++++++++------- .../pickerDateTime/TimePickerView.kt | 8 +++++--- 3 files changed, 20 insertions(+), 11 deletions(-) diff --git a/tabletApp/features/core/src/commonMain/kotlin/band/effective/office/tablet/ui/bookingComponents/pickerDateTime/DatePickerView.kt b/tabletApp/features/core/src/commonMain/kotlin/band/effective/office/tablet/ui/bookingComponents/pickerDateTime/DatePickerView.kt index f7d619ae..0226a7c0 100644 --- a/tabletApp/features/core/src/commonMain/kotlin/band/effective/office/tablet/ui/bookingComponents/pickerDateTime/DatePickerView.kt +++ b/tabletApp/features/core/src/commonMain/kotlin/band/effective/office/tablet/ui/bookingComponents/pickerDateTime/DatePickerView.kt @@ -7,8 +7,10 @@ import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Row +import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.fillMaxHeight import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.layout.height import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.material.Text import androidx.compose.material3.Button @@ -66,11 +68,12 @@ fun DatePickerView(epicDatePickerState: EpicDatePickerState) { ) } ) + Spacer(modifier = Modifier.height(25.dp)) EpicDatePicker( state = epicDatePickerState, dayOfWeekContent = CustomDayOfWeekContent, dayOfMonthContent = CustomDayOfMonthContent, - modifier = Modifier.background(Color.Transparent), + modifier = Modifier.background(Color.Transparent).fillMaxHeight(0.65f), ) } } diff --git a/tabletApp/features/core/src/commonMain/kotlin/band/effective/office/tablet/ui/bookingComponents/pickerDateTime/DateTimePickerModalView.kt b/tabletApp/features/core/src/commonMain/kotlin/band/effective/office/tablet/ui/bookingComponents/pickerDateTime/DateTimePickerModalView.kt index 21add35b..e0b392eb 100644 --- a/tabletApp/features/core/src/commonMain/kotlin/band/effective/office/tablet/ui/bookingComponents/pickerDateTime/DateTimePickerModalView.kt +++ b/tabletApp/features/core/src/commonMain/kotlin/band/effective/office/tablet/ui/bookingComponents/pickerDateTime/DateTimePickerModalView.kt @@ -88,7 +88,7 @@ fun DateTimePickerModalView( ) { Box( modifier = Modifier - .fillMaxHeight(0.6f) + .fillMaxHeight(0.7f) .fillMaxWidth(0.8f) .clip(RoundedCornerShape(3)) .background(LocalCustomColorsPalette.current.elevationBackground) @@ -112,16 +112,20 @@ fun DateTimePickerModalView( /*TODO LOGIC MUST BE IN COMPONENT OR STORE */ selectedDateTime.set( /* year = */ if (epicDatePickerState.selectedDates.isNotEmpty()) epicDatePickerState.selectedDates.first().year else selectedDateTime[Calendar.YEAR], - /* month = */ if (epicDatePickerState.selectedDates.isNotEmpty()) epicDatePickerState.selectedDates.first().monthNumber - 1 else selectedDateTime[Calendar.MONTH], - /* date = */ if (epicDatePickerState.selectedDates.isNotEmpty()) epicDatePickerState.selectedDates.first().dayOfMonth else selectedDateTime[Calendar.DATE], - /* hourOfDay = */ selectedDateTime[Calendar.HOUR_OF_DAY], - /* minute = */selectedDateTime[Calendar.MINUTE] + /* month = */ + if (epicDatePickerState.selectedDates.isNotEmpty()) epicDatePickerState.selectedDates.first().monthNumber - 1 else selectedDateTime[Calendar.MONTH], + /* date = */ + if (epicDatePickerState.selectedDates.isNotEmpty()) epicDatePickerState.selectedDates.first().dayOfMonth else selectedDateTime[Calendar.DATE], + /* hourOfDay = */ + selectedDateTime[Calendar.HOUR_OF_DAY], + /* minute = */ + selectedDateTime[Calendar.MINUTE] ) - Spacer(modifier = Modifier.height(10.dp)) + Spacer(modifier = Modifier.height(30.dp)) Button( modifier = Modifier - //.fillMaxHeight(1f) + .fillMaxHeight(0.5f) .fillMaxWidth(0.3f), onClick = { onSetDate( diff --git a/tabletApp/features/core/src/commonMain/kotlin/band/effective/office/tablet/ui/bookingComponents/pickerDateTime/TimePickerView.kt b/tabletApp/features/core/src/commonMain/kotlin/band/effective/office/tablet/ui/bookingComponents/pickerDateTime/TimePickerView.kt index c938f48c..ed959d85 100644 --- a/tabletApp/features/core/src/commonMain/kotlin/band/effective/office/tablet/ui/bookingComponents/pickerDateTime/TimePickerView.kt +++ b/tabletApp/features/core/src/commonMain/kotlin/band/effective/office/tablet/ui/bookingComponents/pickerDateTime/TimePickerView.kt @@ -5,8 +5,10 @@ import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Row +import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.fillMaxHeight import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.layout.height import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.material.Text import androidx.compose.runtime.Composable @@ -46,13 +48,13 @@ fun TimePickerView(currentDate: Calendar, selectedTime: Calendar) { color = LocalCustomColorsPalette.current.primaryTextAndIcon ) } - + Spacer(modifier = Modifier.height(15.dp)) WheelTimePicker( - modifier = Modifier.fillMaxWidth(1f), + modifier = Modifier.fillMaxWidth(1f).fillMaxHeight(0.65f), size = DpSize(248.dp, 260.dp), textStyle = header6, textColor = LocalCustomColorsPalette.current.primaryTextAndIcon, - rowCount = 7, + rowCount = 5, startTime = LocalTime( currentDate[Calendar.HOUR_OF_DAY], currentDate[Calendar.MINUTE] -- GitLab From a498ee6b6a6ec7fcf0a77fc5f7cfb77c44ca26d8 Mon Sep 17 00:00:00 2001 From: Viktor Konyshev Date: Wed, 16 Aug 2023 16:24:31 +0600 Subject: [PATCH 2/3] change background color of selectedDays for DatePicker and icons in DatePickerTitleView --- .../pickerDateTime/DatePickerView.kt | 19 +++++++++++-------- .../pickerDateTime/DateTimePickerModalView.kt | 3 ++- 2 files changed, 13 insertions(+), 9 deletions(-) diff --git a/tabletApp/features/core/src/commonMain/kotlin/band/effective/office/tablet/ui/bookingComponents/pickerDateTime/DatePickerView.kt b/tabletApp/features/core/src/commonMain/kotlin/band/effective/office/tablet/ui/bookingComponents/pickerDateTime/DatePickerView.kt index 0226a7c0..709200dc 100644 --- a/tabletApp/features/core/src/commonMain/kotlin/band/effective/office/tablet/ui/bookingComponents/pickerDateTime/DatePickerView.kt +++ b/tabletApp/features/core/src/commonMain/kotlin/band/effective/office/tablet/ui/bookingComponents/pickerDateTime/DatePickerView.kt @@ -2,6 +2,7 @@ package band.effective.office.tablet.ui.bookingComponents.pickerDateTime import android.os.Build import androidx.annotation.RequiresApi +import androidx.compose.foundation.Image import androidx.compose.foundation.background import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Box @@ -25,6 +26,7 @@ import androidx.compose.ui.draw.clip import androidx.compose.ui.graphics.Color import androidx.compose.ui.text.style.TextAlign import androidx.compose.ui.unit.dp +import band.effective.office.tablet.features.core.MainRes import band.effective.office.tablet.ui.theme.LocalCustomColorsPalette import band.effective.office.tablet.ui.theme.header4 import band.effective.office.tablet.ui.theme.header6 @@ -38,6 +40,7 @@ import epicarchitect.calendar.compose.datepicker.EpicDatePicker import epicarchitect.calendar.compose.datepicker.state.EpicDatePickerState import epicarchitect.calendar.compose.datepicker.state.LocalEpicDatePickerState import epicarchitect.calendar.compose.pager.state.EpicCalendarPagerState +import io.github.skeptick.libres.compose.painterResource import kotlinx.coroutines.CoroutineScope import kotlinx.coroutines.launch import kotlinx.datetime.LocalDate @@ -101,10 +104,10 @@ private fun DatePickerTitleView( ) ) { - Text( - text = " < ", - style = header4, - color = LocalCustomColorsPalette.current.tertiaryTextAndIcon + Image( + modifier = Modifier, + painter = painterResource(MainRes.image.arrow_left), + contentDescription = null ) } Text( @@ -125,10 +128,10 @@ private fun DatePickerTitleView( ) ) { - Text( - text = " > ", - color = LocalCustomColorsPalette.current.tertiaryTextAndIcon, - style = header4, + Image( + modifier = Modifier, + painter = painterResource(MainRes.image.arrow_right), + contentDescription = null ) } } diff --git a/tabletApp/features/core/src/commonMain/kotlin/band/effective/office/tablet/ui/bookingComponents/pickerDateTime/DateTimePickerModalView.kt b/tabletApp/features/core/src/commonMain/kotlin/band/effective/office/tablet/ui/bookingComponents/pickerDateTime/DateTimePickerModalView.kt index e0b392eb..f4e8ae1f 100644 --- a/tabletApp/features/core/src/commonMain/kotlin/band/effective/office/tablet/ui/bookingComponents/pickerDateTime/DateTimePickerModalView.kt +++ b/tabletApp/features/core/src/commonMain/kotlin/band/effective/office/tablet/ui/bookingComponents/pickerDateTime/DateTimePickerModalView.kt @@ -5,6 +5,7 @@ import androidx.annotation.RequiresApi import androidx.compose.foundation.background import androidx.compose.foundation.layout.* import androidx.compose.foundation.shape.RoundedCornerShape +import androidx.compose.material.MaterialTheme import androidx.compose.material.Text import androidx.compose.material3.Button import androidx.compose.material3.ButtonDefaults.buttonColors @@ -44,7 +45,7 @@ fun DateTimePickerModalView(dateTimePickerComponent: DateTimePickerComponent, cu dayOfMonthViewHeight = 32.dp ) ), - selectionContainerColor = LocalCustomColorsPalette.current.pressedPrimaryButton, + selectionContainerColor = MaterialTheme.colors.secondary, ), selectedDates = listOf( -- GitLab From 93d81c25f0ac0bc0f11a44982125ec3badae871e Mon Sep 17 00:00:00 2001 From: Viktor Konyshev Date: Fri, 18 Aug 2023 18:21:17 +0600 Subject: [PATCH 3/3] [~] time picker step is now 5 minutes, fixed button for accepting new date and time in date and time picker modal --- .../pickerDateTime/DateTimePickerModalView.kt | 46 ++++++++++--------- .../pickerDateTime/TimePickerView.kt | 2 +- .../commonMain/libres/strings/strings_ru.xml | 1 + 3 files changed, 26 insertions(+), 23 deletions(-) diff --git a/tabletApp/features/core/src/commonMain/kotlin/band/effective/office/tablet/ui/bookingComponents/pickerDateTime/DateTimePickerModalView.kt b/tabletApp/features/core/src/commonMain/kotlin/band/effective/office/tablet/ui/bookingComponents/pickerDateTime/DateTimePickerModalView.kt index 7fb3a7d2..3c97bf6a 100644 --- a/tabletApp/features/core/src/commonMain/kotlin/band/effective/office/tablet/ui/bookingComponents/pickerDateTime/DateTimePickerModalView.kt +++ b/tabletApp/features/core/src/commonMain/kotlin/band/effective/office/tablet/ui/bookingComponents/pickerDateTime/DateTimePickerModalView.kt @@ -16,6 +16,7 @@ import androidx.compose.ui.draw.clip import androidx.compose.ui.unit.dp import androidx.compose.ui.window.Dialog import androidx.compose.ui.window.DialogProperties +import band.effective.office.tablet.features.core.MainRes import band.effective.office.tablet.ui.common.CrossButtonView import band.effective.office.tablet.ui.theme.LocalCustomColorsPalette import band.effective.office.tablet.ui.theme.header8 @@ -136,29 +137,30 @@ fun DateTimePickerModalView( selectedDateTime[Calendar.MINUTE] ) Spacer(modifier = Modifier.height(10.dp)) - Button( - modifier = Modifier - //.fillMaxHeight(0.5f) - .fillMaxWidth(0.3f), - onClick = { - onSetDate( - selectedDateTime[Calendar.DATE], - selectedDateTime[Calendar.MONTH], - selectedDateTime[Calendar.YEAR], - selectedDateTime[Calendar.HOUR_OF_DAY], - selectedDateTime[Calendar.MINUTE] + Box(modifier = Modifier.fillMaxSize()) { + Button( + modifier = Modifier.align(Alignment.Center) + .fillMaxWidth(0.3f), + onClick = { + onSetDate( + selectedDateTime[Calendar.DATE], + selectedDateTime[Calendar.MONTH], + selectedDateTime[Calendar.YEAR], + selectedDateTime[Calendar.HOUR_OF_DAY], + selectedDateTime[Calendar.MINUTE] + ) + onCloseRequest() + }, + colors = buttonColors( + containerColor = LocalCustomColorsPalette.current.pressedPrimaryButton ) - onCloseRequest() - }, - colors = buttonColors( - containerColor = LocalCustomColorsPalette.current.pressedPrimaryButton - ) - ) { - Text( - text = selectedDateTime.date() + " с ${selectedDateTime.time24()}", - style = header8, - color = LocalCustomColorsPalette.current.primaryTextAndIcon, - ) + ) { + Text( + text = MainRes.string.apply_date_time_for_booking, + style = header8, + color = LocalCustomColorsPalette.current.primaryTextAndIcon, + ) + } } } } diff --git a/tabletApp/features/core/src/commonMain/kotlin/band/effective/office/tablet/ui/bookingComponents/pickerDateTime/TimePickerView.kt b/tabletApp/features/core/src/commonMain/kotlin/band/effective/office/tablet/ui/bookingComponents/pickerDateTime/TimePickerView.kt index a41d953c..323741b7 100644 --- a/tabletApp/features/core/src/commonMain/kotlin/band/effective/office/tablet/ui/bookingComponents/pickerDateTime/TimePickerView.kt +++ b/tabletApp/features/core/src/commonMain/kotlin/band/effective/office/tablet/ui/bookingComponents/pickerDateTime/TimePickerView.kt @@ -49,7 +49,7 @@ fun TimePickerView(currentDate: Calendar, selectedTime: Calendar) { } WheelTimePicker( - modifier = Modifier.height(180.dp), + modifier = Modifier.height(180.dp).fillMaxWidth(1f), size = DpSize(248.dp, 180.dp), textStyle = header6, textColor = LocalCustomColorsPalette.current.primaryTextAndIcon, diff --git a/tabletApp/features/core/src/commonMain/libres/strings/strings_ru.xml b/tabletApp/features/core/src/commonMain/libres/strings/strings_ru.xml index f463df50..e16e1865 100644 --- a/tabletApp/features/core/src/commonMain/libres/strings/strings_ru.xml +++ b/tabletApp/features/core/src/commonMain/libres/strings/strings_ru.xml @@ -13,4 +13,5 @@ ч Выберите организатора Занять с + Подтвердить \ No newline at end of file -- GitLab