Skip to content

Criação dos cards de tarefas #92

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
gusoliveira21 merged 5 commits into from
Oct 12, 2025
Merged

Criação dos cards de tarefas #92

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
5d37731
mudancas no button3 e adicao da expansao do taskcard
Aug 13, 2025
6e241a1
Finalizado o card em formato expandido
Aug 14, 2025
e46ad00
Adicionado Dummies para testar comportamento
Aug 14, 2025
f353582
adicionado icone vetorizado para os cards; adicionado campo para icon…
Aug 18, 2025
3dbb568
inicio da implementacao da tela
Aug 18, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 9 additions & 5 deletions petJournal/app/src/main/java/com/soujunior/petjournal/ui/components/Button3.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,8 @@ import androidx.compose.ui.draw.shadow
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.TextUnit
import androidx.compose.ui.unit.dp
import ir.kaaveh.sdpcompose.sdp
import ir.kaaveh.sdpcompose.ssp
Expand All @@ -31,6 +33,8 @@ fun Button3(
enableButton: Boolean,
modifier: Modifier = Modifier,
text: String = "Button",
textSize: TextUnit = 12.ssp,
contentPaddingValues : Dp = 12.sdp,
buttonColor: ButtonColors = ButtonDefaults.buttonColors(MaterialTheme.colorScheme.background),
textColor: Color = MaterialTheme.colorScheme.primary,
isLoading: Boolean = false
Expand All @@ -54,20 +58,20 @@ fun Button3(
)
,
border = BorderStroke(
width = 2.sdp,
width = 1.sdp,
color = Color(0xFF959EA6)
),

shape = RoundedCornerShape(size = 50.dp),
colors = buttonColor,
contentPadding = PaddingValues(12.sdp)
contentPadding = PaddingValues(contentPaddingValues)
) {
if (!isLoading) {
Text(
text = text,
fontWeight = FontWeight.W900,
fontSize = 12.ssp,
style = MaterialTheme.typography.titleLarge,
fontWeight = FontWeight.W500,
fontSize = textSize,
style = MaterialTheme.typography.headlineLarge,
color = textColor
)
} else {
Expand Down
32 changes: 26 additions & 6 deletions petJournal/app/src/main/java/com/soujunior/petjournal/ui/components/PetItem.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
package com.soujunior.petjournal.ui.components

import android.widget.ImageView
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
Expand All @@ -13,7 +14,11 @@ import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.tooling.preview.Preview
import com.soujunior.petjournal.R
import ir.kaaveh.sdpcompose.sdp
import ir.kaaveh.sdpcompose.ssp

Expand All @@ -34,12 +39,21 @@ fun PetItem(
shape = RoundedCornerShape(16.sdp),
onClick = onClick
) {
GlideImage(
modifier = Modifier.fillMaxSize(),
context = LocalContext.current,
url = imageRes,
scaleType = ImageView.ScaleType.CENTER_CROP
)
if(!imageRes.isEmpty()) {
GlideImage(
modifier = Modifier.fillMaxSize(),
context = LocalContext.current,
url = imageRes,
scaleType = ImageView.ScaleType.CENTER_CROP
)
}else{
//placeholder de imagem vazia
Image(
painter = painterResource(id = R.drawable.image_pet_empty_selected),
contentDescription = "image description",
contentScale = ContentScale.Crop
)
}
}

Text(
Expand All @@ -50,4 +64,10 @@ fun PetItem(
)
Spacer(Modifier.padding(bottom = 24.sdp))
}
}

@Preview
@Composable
private fun previewPetItem(){
PetItem(modifier = Modifier, imageRes = "", name = "", onClick = {})
}
229 changes: 229 additions & 0 deletions petJournal/app/src/main/java/com/soujunior/petjournal/ui/components/TaskCard.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,229 @@
package com.soujunior.petjournal.ui.components

import androidx.compose.animation.animateContentSize
import androidx.compose.foundation.BorderStroke
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
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.aspectRatio
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.offset
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.lazy.grid.GridCells
import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Button
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.RectangleShape
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.soujunior.petjournal.R
import com.soujunior.petjournal.ui.components.data.TaskData
import com.soujunior.petjournal.ui.components.data.TaskDummyData
import ir.kaaveh.sdpcompose.sdp
import ir.kaaveh.sdpcompose.ssp

@Composable
fun TaskCard(
taskData: TaskData
) {
var expanded by remember { mutableStateOf(false) }

Box(
modifier = Modifier.clip(RectangleShape)
) {
Surface(
shape = RoundedCornerShape(8.sdp),
tonalElevation = 2.dp,
modifier = Modifier
.padding(2.sdp)
.animateContentSize() // Animates the size change
) {
// Background icon when expanded - outside the Surface
if (expanded) {
Icon(
painter = painterResource(id = taskData.tipo.iconeVector!!),
contentDescription = "Ícone ${taskData.tipo.nome}",
tint = taskData.tipo.cor.copy(alpha = .5f),
modifier = Modifier
.align(Alignment.BottomStart)
.padding(start = 2.sdp, bottom = 42.sdp)
.size(150.sdp)
.offset(x = (-80).dp, y = (70).dp)
)
}
Column {
// Main content: Title/Date on Start, Description on End
Row(
modifier = Modifier
.fillMaxWidth()
.padding(4.sdp),
horizontalArrangement = Arrangement.SpaceBetween,
verticalAlignment = Alignment.Top
) {
// Left side: Title and Date
Column(
modifier = Modifier
.padding(horizontal = 8.sdp)
.weight(0.4f),
horizontalAlignment = Alignment.Start
) {
Text(
text = taskData.titulo,
modifier = Modifier.padding(bottom = 2.sdp),
style = MaterialTheme.typography.titleMedium,
fontSize = 15.ssp

)
Text(
text = taskData.dataHora,
style = MaterialTheme.typography.titleMedium,
color = Color.Gray,
fontSize = 10.ssp
)

/**
* Vai receber n ids de pets e vai criar a grid com as imagens dos respectivos pets
* */
if (expanded) {
LazyVerticalGrid(
modifier = Modifier.fillMaxWidth(),
columns = GridCells.Fixed(3),
horizontalArrangement = Arrangement.Start
) {
items(taskData.pets.size) { index ->
Box(modifier = Modifier.aspectRatio(1f)) {
PetItem(modifier = Modifier, imageRes = "", name = "", onClick = {})
}
}
}
}
}

// Right side: Description
Column(
modifier = Modifier
.padding(horizontal = 8.sdp)
.weight(0.6f),
horizontalAlignment = Alignment.Start
) {
val displayText = if (!expanded && taskData.descricaoResumida.length > 50) {
taskData.descricaoResumida.take(50) + "..."
} else {
taskData.descricaoResumida
}

Text(
text = displayText,
style = MaterialTheme.typography.titleSmall,
modifier = Modifier
.fillMaxWidth(1f)
.padding(start = 8.sdp)
)

if (expanded) {
Text(
text = taskData.descricaoCompleta,
style = MaterialTheme.typography.titleSmall,
modifier = Modifier
.fillMaxWidth(1f)
.padding(start = 8.sdp, top = 8.sdp)
)
}
}
}

// Expanded content
if (expanded) {
Column(
modifier = Modifier
.fillMaxWidth()
.padding(bottom = 8.sdp, top = 16.sdp),
) {
Button(
onClick = {},
modifier = Modifier
.width(100.sdp)
.height(25.sdp)
.align(Alignment.CenterHorizontally),
border = BorderStroke(
1.sdp, Color(0xFF959EA6)
),
shape = RoundedCornerShape(50.sdp),
colors = ButtonDefaults.buttonColors(MaterialTheme.colorScheme.background)

) {
// TODO: AJUSTAR A COR DO BOTÃO PARA A COR DA TAREFA
Text(
text = "Editar Tarefa",
fontSize = 10.ssp,
color = taskData.tipo.cor,
style = MaterialTheme.typography.headlineLarge
)
}
}
}

// Bottom section: "Ver Mais" / "Ver Menos"
Box(
modifier = Modifier
.fillMaxWidth()
.background(taskData.tipo.cor)
.clickable { expanded = !expanded } // Toggles the expanded state
) {
Row(
modifier = Modifier
.fillMaxWidth()
.padding(vertical = 6.sdp),
horizontalArrangement = Arrangement.Center
) {
Text(
text = if (expanded) "Ver Menos" else "Ver Mais",
fontSize = 10.ssp,
color = MaterialTheme.colorScheme.background,
style = MaterialTheme.typography.displaySmall
)
}
}
}
}


}
}

@Preview
@Composable
private fun TaskCardPreview() {
Column(Modifier.padding(8.sdp)) {
TaskCard(
taskData = TaskDummyData.sampleTasks[0]
)
// TaskCard(
// taskData = TaskDummyData.sampleTasks[1]
// )
// TaskCard(
// taskData = TaskDummyData.sampleTasks[2]
// )
}
}
Loading