Skip to content

Commit

Permalink
Revert "#3 Created the Calendar Layout (#33)"
Browse files Browse the repository at this point in the history
This reverts commit 18909c4.
  • Loading branch information
madelahn authored Dec 5, 2022
1 parent 18909c4 commit 6ca9c00
Show file tree
Hide file tree
Showing 3 changed files with 8 additions and 157 deletions.
1 change: 0 additions & 1 deletion app/build.gradle
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,6 @@ dependencies {
implementation "androidx.compose.ui:ui-tooling-preview:$compose_ui_version"
implementation 'androidx.compose.material:material:1.1.1'
implementation 'androidx.navigation:navigation-testing:2.5.3'
implementation 'com.kizitonwose.calendar:compose:2.0.4'
testImplementation 'junit:junit:4.13.2'
androidTestImplementation 'androidx.test.ext:junit:1.1.4'
androidTestImplementation 'androidx.test.espresso:espresso-core:3.4.0'
Expand Down
Original file line number Diff line number Diff line change
@@ -1,43 +1,17 @@
package com.example.theperiodpurse.ui.calendar

import android.os.Build
// import android.os.Bundle
// import androidx.activity.ComponentActivity
// import androidx.activity.compose.setContent
import androidx.annotation.RequiresApi
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.runtime.Composable
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.semantics.contentDescription
import androidx.compose.ui.semantics.semantics
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.example.theperiodpurse.R
import com.example.theperiodpurse.ui.theme.ThePeriodPurseTheme
import com.google.accompanist.pager.*
import com.kizitonwose.calendar.compose.VerticalCalendar
import com.kizitonwose.calendar.compose.rememberCalendarState
import com.kizitonwose.calendar.core.*
import java.time.Month
import java.time.YearMonth
import java.time.format.TextStyle
import java.util.*
import kotlinx.coroutines.launch
import java.time.LocalDate


@OptIn(ExperimentalPagerApi::class)
Expand Down Expand Up @@ -94,7 +68,7 @@ fun CalendarScreen() {
CalendarTabItem.CycleTab
)
val pagerState = rememberPagerState()
ThePeriodPurseTheme {
ThePeriodPurseTheme() {
Scaffold (topBar = {})
{ padding ->
Column(modifier = Modifier.padding(padding)) {
Expand All @@ -105,150 +79,28 @@ fun CalendarScreen() {
}
}

@RequiresApi(Build.VERSION_CODES.O)
@Composable
fun CalendarScreenLayout() {
// Contains the swappable content
ThePeriodPurseTheme {
val bg = painterResource(R.drawable.colourwatercolour)

var selectedDate by remember { mutableStateOf<LocalDate?>(null) }
val currentMonth = remember { YearMonth.now() }
val startMonth = remember { currentMonth.minusMonths(12) } // Previous months
val endMonth = remember { currentMonth.plusMonths(0) } // Next months
val firstDayOfWeek = remember { firstDayOfWeekFromLocale() } // Available from the library

val state = rememberCalendarState(
startMonth = startMonth,
endMonth = endMonth,
firstVisibleMonth = currentMonth,
firstDayOfWeek = firstDayOfWeek
)

Box {
Image(painter = bg,
contentDescription = null,
modifier = Modifier.fillMaxSize(),
contentScale = ContentScale.FillBounds,
)
Column {
VerticalCalendar(
state = state,
monthHeader = { month ->
MonthHeader(month) },
dayContent = { day ->
Day(day, isSelected = selectedDate == day.date) { day ->
selectedDate = if (selectedDate == day.date) null else day.date
}
}
)
}
}
}
}

// Creates the days
@RequiresApi(Build.VERSION_CODES.O)
@Composable
fun Day(day: CalendarDay,
isSelected: Boolean,
onClick: (CalendarDay) -> Unit
) {
Box(
modifier = Modifier
.padding(1.dp)
.aspectRatio(1f),
contentAlignment = Alignment.Center,
)
{
if (day.position == DayPosition.MonthDate) {
Box(
modifier = Modifier
.size(54.dp)
.clip(shape = RoundedCornerShape(6.dp))
.fillMaxSize()
.background(color = if (isSelected) Color.Green else Color.White)
.border(
color = Color.Gray,
width = 1.dp,
shape = RoundedCornerShape(6.dp)
)
.clickable(
enabled = day.position == DayPosition.MonthDate,
onClick = { onClick(day) }
),
contentAlignment = Alignment.TopStart,
) {
Text(modifier = Modifier.padding(horizontal = 5.dp, vertical = 2.dp),
fontSize = 14.sp,
text = day.date.dayOfMonth.toString()
)
}
}
}
}


@RequiresApi(Build.VERSION_CODES.O)
@Composable
fun MonthHeader(calendarMonth: CalendarMonth) {
// The header that is displayed for every month; contains week & month.
val daysOfWeek = calendarMonth.weekDays.first().map { it.date.dayOfWeek }
Column(
modifier = Modifier
.padding(vertical = 5.dp),
horizontalAlignment = Alignment.CenterHorizontally) {

// Month
// Contains the swippable content
ThePeriodPurseTheme() {
Text(
modifier = Modifier.padding(12.dp),
textAlign = TextAlign.Center,
fontWeight = FontWeight.Medium,
fontSize = 15.sp,
text = calendarMonth.yearMonth.displayText()
text="Calendar Screen Content",
modifier = Modifier
.semantics { contentDescription = "Calendar Page" } // keep somewhere for testing
)

// Days of Week
Row(modifier = Modifier.fillMaxWidth()) {
for (dayOfWeek in daysOfWeek) {
Text(
modifier = Modifier.weight(1f),
textAlign = TextAlign.Center,
fontWeight = FontWeight.Medium,
fontSize = 12.sp,
text = dayOfWeek.getDisplayName(TextStyle.SHORT, Locale.getDefault())
)
}
}
}
}

// Function to display Month with Year
@RequiresApi(Build.VERSION_CODES.O)
fun YearMonth.displayText(short: Boolean = false): String {
return "${this.month.displayText(short = short)} ${this.year}"
}

// Function to display Month
@RequiresApi(Build.VERSION_CODES.O)
fun Month.displayText(short: Boolean = true): String {
val style = if (short) TextStyle.SHORT else TextStyle.FULL
return getDisplayName(style, Locale.ENGLISH)
}


//@OptIn(ExperimentalPagerApi::class)
@OptIn(ExperimentalPagerApi::class)
@Preview
@Composable
fun CalendarScreenPreview() {
ThePeriodPurseTheme {
ThePeriodPurseTheme() {
CalendarScreen()
}
}


@OptIn(ExperimentalPagerApi::class)
@Preview(showBackground = true)
@Composable
Expand Down
Binary file not shown.

0 comments on commit 6ca9c00

Please sign in to comment.