Skip to content

Commit fe7bffb

Browse files
committed
Polished and refactored drawer UI
1 parent cbf8aa9 commit fe7bffb

File tree

9 files changed

+132
-122
lines changed

9 files changed

+132
-122
lines changed

app/PokeScout/.idea/deploymentTargetDropDown.xml

Lines changed: 1 addition & 14 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

app/PokeScout/pokescout/trainer/src/main/java/com/example/trainer/presentation/MainView.kt

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import androidx.compose.ui.tooling.preview.Preview
55
import com.example.pokemon.presentation.theme.PokeScoutTheme
66
import com.example.pokemon.presentation.theme.pokeBallColors
77
import com.example.pokemon.presentation.ui.PokeballScaffold
8-
import com.example.trainer.presentation.screens.DisplayScreen
8+
import com.example.trainer.presentation.screens.display.DisplayScreen
99
import com.example.trainer.presentation.screens.ErrorScreen
1010
import com.example.trainer.presentation.screens.LoadingScreen
1111
import com.example.trainer.presentation.state.Trainer
Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
package com.example.trainer.presentation.screens
1+
package com.example.trainer.presentation.screens.display
22

33
import androidx.compose.foundation.background
44
import androidx.compose.foundation.layout.Column
@@ -14,12 +14,12 @@ import androidx.compose.material3.ModalNavigationDrawer
1414
import androidx.compose.material3.rememberDrawerState
1515
import androidx.compose.runtime.Composable
1616
import androidx.compose.ui.Modifier
17+
import androidx.compose.ui.graphics.Color
1718
import androidx.compose.ui.unit.dp
1819
import com.example.pokemon.domain.nfc.PokemonNfcData
1920
import com.example.pokemon.presentation.theme.pokeBallColors
2021
import com.example.pokemon.presentation.ui.PokemonImage
2122
import com.example.trainer.presentation.state.Trainer
22-
import com.example.trainer.presentation.ui.DisplayScreenDrawer
2323
import com.example.trainer.presentation.ui.StatColumn
2424

2525
@Composable
@@ -31,14 +31,15 @@ fun DisplayScreen(
3131
onPressed: (Trainer.Event.Menu) -> Unit,
3232
) {
3333
ModalNavigationDrawer(
34+
scrimColor = Color.Transparent,
3435
drawerState = rememberDrawerState(initialValue = DrawerValue.Closed),
3536
drawerContent = { DisplayScreenDrawer(nfc = nfc, drawerState = drawerState, badgeViewMode = badgeViewMode, onPressed = onPressed) },
3637
modifier = Modifier
3738
.fillMaxSize()
3839
.padding(vertical = 8.dp),
3940
) {
4041
Column(
41-
modifier = Modifier.padding(horizontal = 8.dp),
42+
modifier = Modifier.padding(horizontal = 12.dp),
4243
) {
4344
PokemonImage(
4445
id = api.species.id,
Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
package com.example.trainer.presentation.screens.display
2+
3+
import androidx.compose.foundation.background
4+
import androidx.compose.foundation.layout.Arrangement
5+
import androidx.compose.foundation.layout.Box
6+
import androidx.compose.foundation.layout.Column
7+
import androidx.compose.foundation.layout.Row
8+
import androidx.compose.foundation.layout.Spacer
9+
import androidx.compose.foundation.layout.fillMaxSize
10+
import androidx.compose.foundation.layout.fillMaxWidth
11+
import androidx.compose.foundation.layout.height
12+
import androidx.compose.foundation.layout.padding
13+
import androidx.compose.foundation.layout.size
14+
import androidx.compose.material3.ModalDrawerSheet
15+
import androidx.compose.runtime.Composable
16+
import androidx.compose.ui.Alignment
17+
import androidx.compose.ui.Modifier
18+
import androidx.compose.ui.graphics.Color
19+
import androidx.compose.ui.graphics.RectangleShape
20+
import androidx.compose.ui.unit.dp
21+
import com.example.pokemon.domain.nfc.PokemonNfcData
22+
import com.example.pokemon.presentation.theme.PokeBallDarkGrey
23+
import com.example.pokemon.presentation.theme.PokeBallGrey
24+
import com.example.pokemon.presentation.theme.PokeBallWhite
25+
import com.example.trainer.R
26+
import com.example.trainer.presentation.state.Trainer
27+
import com.example.trainer.presentation.ui.MenuButton
28+
import com.example.trainer.presentation.ui.gym.GymBadgeDisplay
29+
30+
@Composable
31+
fun DisplayScreenDrawer(
32+
nfc: PokemonNfcData,
33+
drawerState: Trainer.DrawerState,
34+
badgeViewMode: Trainer.BadgeViewMode,
35+
onPressed: (Trainer.Event.Menu) -> Unit,
36+
) {
37+
ModalDrawerSheet(
38+
drawerShape = RectangleShape,
39+
drawerContainerColor = PokeBallGrey,
40+
modifier = Modifier
41+
.fillMaxSize()
42+
.padding(end = 12.dp)
43+
) {
44+
Column(
45+
modifier = Modifier
46+
.fillMaxSize()
47+
.padding(horizontal = 12.dp)
48+
.padding(start = 12.dp)
49+
) {
50+
// Content
51+
when (drawerState) {
52+
is Trainer.DrawerState.DailyView -> Box(modifier = Modifier.weight(1f).fillMaxWidth().background(PokeBallDarkGrey))
53+
is Trainer.DrawerState.BadgeView -> {
54+
GymBadgeDisplay(
55+
nfc = nfc,
56+
viewMode = badgeViewMode,
57+
modifier = Modifier
58+
.weight(1f)
59+
.background(PokeBallDarkGrey)
60+
.padding(12.dp)
61+
)
62+
}
63+
}
64+
65+
Spacer(modifier = Modifier.height(8.dp))
66+
67+
// Menu
68+
Row(
69+
horizontalArrangement = Arrangement.SpaceBetween,
70+
verticalAlignment = Alignment.CenterVertically,
71+
modifier = Modifier
72+
.fillMaxWidth()
73+
.height(64.dp)
74+
.background(PokeBallDarkGrey)
75+
.padding(horizontal = 12.dp)
76+
) {
77+
// BadgeMenu
78+
when (drawerState) {
79+
is Trainer.DrawerState.BadgeView -> Row(
80+
horizontalArrangement = Arrangement.spacedBy(8.dp)
81+
) {
82+
MenuButton(
83+
modifier = Modifier.size(32.dp),
84+
resourceId = R.drawable.grid,
85+
isSelected = when (badgeViewMode) {
86+
Trainer.BadgeViewMode.GridView -> true
87+
Trainer.BadgeViewMode.ListView -> false
88+
}
89+
) { onPressed(Trainer.Event.Menu.View.GridPressed) }
90+
MenuButton(
91+
modifier = Modifier.size(32.dp),
92+
resourceId = R.drawable.list,
93+
isSelected = when (badgeViewMode) {
94+
Trainer.BadgeViewMode.GridView -> false
95+
Trainer.BadgeViewMode.ListView -> true
96+
}
97+
) { onPressed(Trainer.Event.Menu.View.ListPressed) }
98+
}
99+
100+
is Trainer.DrawerState.DailyView -> {}
101+
}
102+
103+
Spacer(modifier = Modifier)
104+
105+
// Toggle Button
106+
MenuButton(
107+
resourceId = when (drawerState) {
108+
is Trainer.DrawerState.BadgeView -> R.drawable.badge
109+
is Trainer.DrawerState.DailyView -> R.drawable.clock
110+
},
111+
modifier = Modifier.size(32.dp)
112+
) { onPressed(Trainer.Event.Menu.Toggle) }
113+
}
114+
}
115+
}
116+
}

app/PokeScout/pokescout/trainer/src/main/java/com/example/trainer/presentation/ui/DisplayScreenDrawer.kt

Lines changed: 0 additions & 61 deletions
This file was deleted.

app/PokeScout/pokescout/trainer/src/main/java/com/example/trainer/presentation/ui/gym/GymBadgeDisplay.kt

Lines changed: 2 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -19,50 +19,14 @@ import com.example.trainer.presentation.ui.gym.list.GymBadgeList
1919

2020
@Composable
2121
fun GymBadgeDisplay(
22+
modifier: Modifier = Modifier,
2223
nfc: PokemonNfcData,
2324
viewMode: Trainer.BadgeViewMode,
24-
onPressed: (Trainer.Event.Menu) -> Unit,
2525
) {
26-
// Content
27-
Box(
28-
modifier = Modifier
29-
.fillMaxSize()
30-
.padding(vertical = 60.dp, horizontal = 24.dp)
31-
.padding(start = 24.dp)
32-
) {
26+
Box(modifier = modifier) {
3327
when (viewMode) {
3428
Trainer.BadgeViewMode.GridView -> GymBadgeGrid(nfc = nfc)
3529
Trainer.BadgeViewMode.ListView -> GymBadgeList(nfc = nfc)
3630
}
3731
}
38-
39-
// View Menu
40-
Box(
41-
modifier = Modifier
42-
.fillMaxSize()
43-
.padding(vertical = 16.dp, horizontal = 24.dp)
44-
.padding(start = 24.dp)
45-
) {
46-
Row(
47-
horizontalArrangement = Arrangement.spacedBy(16.dp),
48-
modifier = Modifier.align(Alignment.BottomStart)
49-
) {
50-
MenuButton(
51-
modifier = Modifier.size(32.dp),
52-
resourceId = R.drawable.grid,
53-
isSelected = when (viewMode) {
54-
Trainer.BadgeViewMode.GridView -> true
55-
Trainer.BadgeViewMode.ListView -> false
56-
}
57-
) { onPressed(Trainer.Event.Menu.View.GridPressed) }
58-
MenuButton(
59-
modifier = Modifier.size(32.dp),
60-
resourceId = R.drawable.list,
61-
isSelected = when (viewMode) {
62-
Trainer.BadgeViewMode.GridView -> false
63-
Trainer.BadgeViewMode.ListView -> true
64-
}
65-
) { onPressed(Trainer.Event.Menu.View.ListPressed) }
66-
}
67-
}
6832
}

app/PokeScout/pokescout/trainer/src/main/java/com/example/trainer/presentation/ui/gym/grid/GymBadgeGrid.kt

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import androidx.compose.foundation.layout.Row
66
import androidx.compose.foundation.layout.Spacer
77
import androidx.compose.foundation.layout.fillMaxSize
88
import androidx.compose.foundation.layout.fillMaxWidth
9+
import androidx.compose.foundation.layout.height
910
import androidx.compose.foundation.layout.size
1011
import androidx.compose.foundation.rememberScrollState
1112
import androidx.compose.foundation.verticalScroll
@@ -19,11 +20,10 @@ import com.example.pokemon.domain.nfc.PokemonNfcData
1920
@Composable
2021
fun GymBadgeGrid(nfc: PokemonNfcData, modifier: Modifier = Modifier) {
2122
Column(
22-
modifier
23-
.fillMaxSize()
24-
.verticalScroll(rememberScrollState()),
25-
verticalArrangement = Arrangement.spacedBy(24.dp)
23+
modifier.verticalScroll(rememberScrollState()),
24+
verticalArrangement = Arrangement.spacedBy(12.dp)
2625
) {
26+
Spacer(modifier = Modifier.height(36.dp))
2727
val badgeSize = 80.dp
2828
val gyms = nfc.trainerGroup.filterGyms()
2929
var index = 0

app/PokeScout/pokescout/trainer/src/main/java/com/example/trainer/presentation/ui/gym/list/GymBadgeList.kt

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@ package com.example.trainer.presentation.ui.gym.list
22

33
import androidx.compose.foundation.layout.Arrangement
44
import androidx.compose.foundation.layout.Column
5+
import androidx.compose.foundation.layout.Spacer
6+
import androidx.compose.foundation.layout.height
57
import androidx.compose.foundation.rememberScrollState
68
import androidx.compose.foundation.verticalScroll
79
import androidx.compose.runtime.Composable
@@ -21,6 +23,7 @@ fun GymBadgeList(
2123
verticalArrangement = Arrangement.spacedBy(12.dp),
2224
modifier = modifier.verticalScroll(rememberScrollState()),
2325
) {
26+
Spacer(modifier = Modifier.height(36.dp))
2427
for ((index, item) in TrainerGroup.Type.Intermediate.filterGyms().withIndex()) {
2528
GymBadgeListItem(gym = item, nfc.gymBadges[index])
2629
}

app/PokeScout/pokescout/trainer/src/main/java/com/example/trainer/presentation/ui/gym/list/GymBadgeListItem.kt

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ fun GymBadgeListItem(gym: PokemonGym, isBeaten: Boolean) {
3030
) {
3131
val imageBitmap = ImageBitmap.imageResource(getGymBadgePainterInt(gym))
3232
Image(
33-
modifier = Modifier.size(48.dp),
33+
modifier = Modifier.size(56.dp),
3434
bitmap = imageBitmap,
3535
filterQuality = FilterQuality.None,
3636
contentDescription = null,

0 commit comments

Comments
 (0)