Skip to content

Commit e5b4b38

Browse files
Yuval-RothYuval-Roth
committed
updated error screen design to be like the new design of the UI
1 parent 4e81cb2 commit e5b4b38

3 files changed

Lines changed: 150 additions & 102 deletions

File tree

‎watch/app/src/main/java/com/imsproject/watch/view/CommonComposables.kt‎

Lines changed: 144 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,144 @@
1+
package com.imsproject.watch.view
2+
3+
import androidx.compose.foundation.ScrollState
4+
import androidx.compose.foundation.background
5+
import androidx.compose.foundation.layout.Box
6+
import androidx.compose.foundation.layout.Column
7+
import androidx.compose.foundation.layout.Spacer
8+
import androidx.compose.foundation.layout.fillMaxHeight
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.rememberScrollState
14+
import androidx.compose.foundation.text.BasicText
15+
import androidx.compose.foundation.verticalScroll
16+
import androidx.compose.runtime.Composable
17+
import androidx.compose.runtime.remember
18+
import androidx.compose.ui.Alignment
19+
import androidx.compose.ui.Modifier
20+
import androidx.compose.ui.draw.drawWithContent
21+
import androidx.compose.ui.geometry.CornerRadius
22+
import androidx.compose.ui.geometry.Offset
23+
import androidx.compose.ui.geometry.Size
24+
import androidx.compose.ui.graphics.Color
25+
import androidx.compose.ui.graphics.RectangleShape
26+
import androidx.compose.ui.unit.Dp
27+
import androidx.compose.ui.unit.dp
28+
import androidx.compose.ui.unit.sp
29+
import androidx.wear.compose.material.Button
30+
import androidx.wear.compose.material.MaterialTheme
31+
import com.imsproject.watch.COLUMN_PADDING
32+
import com.imsproject.watch.DARK_BACKGROUND_COLOR
33+
import com.imsproject.watch.LIGHT_BLUE_COLOR
34+
import com.imsproject.watch.SCREEN_HEIGHT
35+
import com.imsproject.watch.SCREEN_WIDTH
36+
import com.imsproject.watch.textStyle
37+
38+
@Composable
39+
fun ErrorScreen(error: String, onDismiss: () -> Unit) {
40+
MaterialTheme {
41+
Box(
42+
modifier = Modifier
43+
.fillMaxSize()
44+
.background(DARK_BACKGROUND_COLOR),
45+
contentAlignment = Alignment.Center
46+
) {
47+
Column(
48+
modifier = Modifier
49+
.fillMaxSize(),
50+
horizontalAlignment = Alignment.CenterHorizontally,
51+
){
52+
Spacer(modifier = Modifier.height((SCREEN_HEIGHT *0.025f).dp))
53+
val red = remember { Color(0xFFF14141) }
54+
Box(
55+
modifier = Modifier
56+
.background(color = red)
57+
.fillMaxWidth()
58+
.fillMaxHeight(0.10f)
59+
,
60+
contentAlignment = Alignment.Center,
61+
){
62+
BasicText(
63+
text = "ERROR",
64+
style = textStyle.copy(color = Color.Black),
65+
)
66+
}
67+
Spacer(modifier = Modifier.height((SCREEN_HEIGHT *0.02f).dp))
68+
val scrollState = rememberScrollState()
69+
Column(
70+
modifier = Modifier
71+
.padding(start= COLUMN_PADDING,end= COLUMN_PADDING)
72+
.fillMaxWidth()
73+
.fillMaxHeight(0.65f)
74+
.verticalColumnScrollbar(scrollState, endPadding = -SCREEN_WIDTH *0.02f)
75+
.verticalScroll(scrollState),
76+
horizontalAlignment = Alignment.CenterHorizontally,
77+
) {
78+
BasicText(
79+
text = error,
80+
style = textStyle,
81+
modifier = Modifier
82+
.fillMaxWidth()
83+
.align(Alignment.CenterHorizontally)
84+
)
85+
}
86+
Spacer(modifier = Modifier.height((SCREEN_HEIGHT *0.02f).dp))
87+
Button(
88+
onClick = { onDismiss() },
89+
modifier = Modifier
90+
.fillMaxSize()
91+
,
92+
shape = RectangleShape,
93+
) {
94+
BasicText(
95+
text = "Dismiss",
96+
style = textStyle.copy(color = Color.Black, letterSpacing = 1.sp),
97+
)
98+
}
99+
}
100+
}
101+
}
102+
}
103+
104+
@Composable
105+
fun Modifier.verticalColumnScrollbar(
106+
scrollState: ScrollState,
107+
width: Dp = 4.dp,
108+
showScrollBarTrack: Boolean = true,
109+
scrollBarTrackColor: Color = Color.Gray,
110+
scrollBarColor: Color = LIGHT_BLUE_COLOR,
111+
scrollBarCornerRadius: Float = 4f,
112+
endPadding: Float = 0f
113+
): Modifier {
114+
return drawWithContent {
115+
// Draw the column's content
116+
drawContent()
117+
// Dimensions and calculations
118+
val viewportHeight = this.size.height
119+
val totalContentHeight = scrollState.maxValue.toFloat() + viewportHeight
120+
if(totalContentHeight <= viewportHeight) return@drawWithContent
121+
val scrollValue = scrollState.value.toFloat()
122+
// Compute scrollbar height and position
123+
val scrollBarHeight =
124+
(viewportHeight / totalContentHeight) * viewportHeight
125+
val scrollBarStartOffset =
126+
(scrollValue / totalContentHeight) * viewportHeight
127+
// Draw the track (optional)
128+
if (showScrollBarTrack) {
129+
drawRoundRect(
130+
cornerRadius = CornerRadius(scrollBarCornerRadius),
131+
color = scrollBarTrackColor,
132+
topLeft = Offset(this.size.width - endPadding, 0f),
133+
size = Size(width.toPx(), viewportHeight),
134+
)
135+
}
136+
// Draw the scrollbar
137+
drawRoundRect(
138+
cornerRadius = CornerRadius(scrollBarCornerRadius),
139+
color = scrollBarColor,
140+
topLeft = Offset(this.size.width - endPadding, scrollBarStartOffset),
141+
size = Size(width.toPx(), scrollBarHeight)
142+
)
143+
}
144+
}

‎watch/app/src/main/java/com/imsproject/watch/view/GameActivity.kt‎

Lines changed: 0 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -138,57 +138,6 @@ abstract class GameActivity(gameType: GameType) : ComponentActivity() {
138138
}
139139
}
140140

141-
@Composable
142-
private fun ErrorScreen(error: String, onDismiss: () -> Unit) {
143-
MaterialTheme {
144-
Box(
145-
modifier = Modifier
146-
.fillMaxSize()
147-
.background(DARK_BACKGROUND_COLOR),
148-
contentAlignment = Alignment.Center
149-
) {
150-
Column(
151-
modifier = Modifier
152-
.padding(start=COLUMN_PADDING,end=COLUMN_PADDING)
153-
.fillMaxSize()
154-
.verticalScroll(rememberScrollState(0)),
155-
horizontalAlignment = Alignment.CenterHorizontally,
156-
) {
157-
Spacer(modifier = Modifier.height(COLUMN_PADDING))
158-
BasicText(
159-
text = "ERROR",
160-
style = TextStyle(color = Color.White, fontSize = TEXT_SIZE, textAlign = TextAlign.Center, textDecoration = TextDecoration.Underline, letterSpacing = 1.sp),
161-
modifier = Modifier
162-
.fillMaxWidth()
163-
.align(Alignment.CenterHorizontally)
164-
.padding(top = (SCREEN_HEIGHT * 0.04f).dp)
165-
)
166-
Spacer(modifier = Modifier.height(5.dp))
167-
BasicText(
168-
text = error,
169-
style = textStyle,
170-
modifier = Modifier
171-
.fillMaxWidth()
172-
.align(Alignment.CenterHorizontally)
173-
)
174-
Spacer(modifier = Modifier.height((SCREEN_HEIGHT*0.05f).dp))
175-
Button(
176-
onClick = { onDismiss() },
177-
modifier = Modifier
178-
.fillMaxWidth(0.8f)
179-
.fillMaxHeight(0.4f)
180-
) {
181-
BasicText(
182-
text = "Dismiss",
183-
style = textStyle
184-
)
185-
}
186-
Spacer(modifier = Modifier.height((SCREEN_HEIGHT*0.05f).dp))
187-
}
188-
}
189-
}
190-
}
191-
192141
companion object {
193142
private const val _TAG = "GameActivity"
194143
}

‎watch/app/src/main/java/com/imsproject/watch/view/MainActivity.kt‎

Lines changed: 6 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import androidx.activity.ComponentActivity
99
import androidx.activity.compose.setContent
1010
import androidx.activity.result.ActivityResultLauncher
1111
import androidx.activity.viewModels
12+
import androidx.compose.foundation.ScrollState
1213
import androidx.compose.foundation.background
1314
import androidx.compose.foundation.layout.Arrangement
1415
import androidx.compose.foundation.layout.Box
@@ -36,11 +37,16 @@ import androidx.compose.runtime.remember
3637
import androidx.compose.runtime.rememberCoroutineScope
3738
import androidx.compose.ui.Alignment
3839
import androidx.compose.ui.Modifier
40+
import androidx.compose.ui.draw.drawWithContent
41+
import androidx.compose.ui.geometry.CornerRadius
42+
import androidx.compose.ui.geometry.Offset
43+
import androidx.compose.ui.geometry.Size
3944
import androidx.compose.ui.graphics.Color
4045
import androidx.compose.ui.graphics.RectangleShape
4146
import androidx.compose.ui.text.TextStyle
4247
import androidx.compose.ui.text.style.TextAlign
4348
import androidx.compose.ui.text.style.TextDecoration
49+
import androidx.compose.ui.unit.Dp
4450
import androidx.compose.ui.unit.dp
4551
import androidx.compose.ui.unit.sp
4652
import androidx.core.app.ActivityCompat
@@ -524,57 +530,6 @@ class MainActivity : ComponentActivity() {
524530
}
525531
}
526532

527-
@Composable
528-
private fun ErrorScreen(error: String, onDismiss: () -> Unit) {
529-
MaterialTheme {
530-
Box(
531-
modifier = Modifier
532-
.fillMaxSize()
533-
.background(DARK_BACKGROUND_COLOR),
534-
contentAlignment = Alignment.Center
535-
) {
536-
Column(
537-
modifier = Modifier
538-
.padding(start=COLUMN_PADDING,end=COLUMN_PADDING)
539-
.fillMaxSize()
540-
.verticalScroll(rememberScrollState(0)),
541-
horizontalAlignment = Alignment.CenterHorizontally,
542-
) {
543-
Spacer(modifier = Modifier.height(COLUMN_PADDING))
544-
BasicText(
545-
text = "ERROR",
546-
style = TextStyle(color = Color.White, fontSize = TEXT_SIZE, textAlign = TextAlign.Center, textDecoration = TextDecoration.Underline, letterSpacing = 1.sp),
547-
modifier = Modifier
548-
.fillMaxWidth()
549-
.align(Alignment.CenterHorizontally)
550-
.padding(top = (SCREEN_HEIGHT * 0.04f).dp)
551-
)
552-
Spacer(modifier = Modifier.height(5.dp))
553-
BasicText(
554-
text = error,
555-
style = textStyle,
556-
modifier = Modifier
557-
.fillMaxWidth()
558-
.align(Alignment.CenterHorizontally)
559-
)
560-
Spacer(modifier = Modifier.height((SCREEN_HEIGHT*0.05f).dp))
561-
Button(
562-
onClick = { onDismiss() },
563-
modifier = Modifier
564-
.fillMaxWidth(0.8f)
565-
.fillMaxHeight(0.4f)
566-
) {
567-
BasicText(
568-
text = "Dismiss",
569-
style = textStyle
570-
)
571-
}
572-
Spacer(modifier = Modifier.height((SCREEN_HEIGHT*0.05f).dp))
573-
}
574-
}
575-
}
576-
}
577-
578533
@Composable
579534
private fun SimplePicker(
580535
state: PickerState,

0 commit comments

Comments
 (0)