Skip to content

Commit 0a3ddb1

Browse files
SimonSchubertSimonSchubert
committed
Improve info dialog UI
1 parent 7284087 commit 0a3ddb1

3 files changed

Lines changed: 141 additions & 119 deletions

File tree

‎composeApp/src/commonMain/composeResources/drawable/app_logo.png‎

20 KB
Loading

‎composeApp/src/commonMain/composeResources/drawable/ic_icons8_github.xml‎

Lines changed: 4 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,52 +1,9 @@
11
<vector xmlns:android="http://schemas.android.com/apk/res/android"
2-
android:width="40dp"
3-
android:height="40dp"
2+
android:width="24dp"
3+
android:height="24dp"
44
android:viewportWidth="24"
55
android:viewportHeight="24">
66
<path
7-
android:fillColor="#FFF"
8-
android:pathData="M12,4c4.411,0 8,3.589 8,8c0,4.411 -3.589,8 -8,8c-4.411,0 -8,-3.589 -8,-8C4,7.589 7.589,4 12,4M12,2C6.477,2 2,6.477 2,12s4.477,10 10,10s10,-4.478 10,-10S17.522,2 12,2L12,2z" />
9-
<path
10-
android:fillColor="#00000000"
11-
android:pathData="M17.254,13.547c0,0 1.003,-0.172 1.602,-0.164c0.599,0.008 1.281,0.189 1.281,0.189"
12-
android:strokeWidth="0.25"
13-
android:strokeColor="#FFF"
14-
android:strokeLineCap="round"
15-
android:strokeLineJoin="round" />
16-
<path
17-
android:fillColor="#00000000"
18-
android:pathData="M17,13.869c0,0 1.15,-0.102 1.627,-0.091C19.284,13.795 19.989,14 19.989,14"
19-
android:strokeWidth="0.25"
20-
android:strokeColor="#FFF"
21-
android:strokeLineCap="round"
22-
android:strokeLineJoin="round" />
23-
<path
24-
android:fillColor="#00000000"
25-
android:pathData="M7.323,13.302c0,0 -1.425,-0.135 -1.869,-0.135c-0.444,0 -1.291,0.135 -1.695,0.251"
26-
android:strokeWidth="0.25"
27-
android:strokeColor="#FFF"
28-
android:strokeLineCap="round"
29-
android:strokeLineJoin="round" />
30-
<path
31-
android:fillColor="#00000000"
32-
android:pathData="M7.651,13.744c0,0 -1.499,-0.139 -2.177,-0.057C4.665,13.783 3.292,14.2 3.292,14.2"
33-
android:strokeWidth="0.25"
34-
android:strokeColor="#FFF"
35-
android:strokeLineCap="round"
36-
android:strokeLineJoin="round" />
37-
<path
38-
android:fillColor="#FFF"
39-
android:pathData="M7,12.233C7,10.025 9.575,8 12.612,8S18,10.024 18,12.233S16.233,16 12.5,16S7,14.442 7,12.233z" />
40-
<path
41-
android:fillColor="#FFF"
42-
android:pathData="M14.154,8.219c0,0 0.884,-1.219 2.506,-1.219c0.65,0.649 0.205,2.507 -0.005,3.061L14.154,8.219z" />
43-
<path
44-
android:fillColor="#FFF"
45-
android:pathData="M10.845,8.158c0,0 -0.884,-1.219 -2.506,-1.219C7.69,7.589 8.135,9.447 8.344,10L10.845,8.158z" />
46-
<path
47-
android:fillColor="#FFF"
48-
android:pathData="M10.378,18c0,0 -1.239,0 -1.47,0c-0.641,0 -1.211,-0.302 -1.487,-0.863c-0.307,-0.624 -0.597,-1.327 -1.357,-1.911c-0.133,-0.102 -0.057,-0.252 0.203,-0.222c0.258,0.033 0.747,0.095 1.122,0.631c0.373,0.537 0.779,1.15 1.476,1.15c0.697,0 1.446,0.02 1.829,-0.526L10.378,18z" />
49-
<path
50-
android:fillColor="#FFF"
51-
android:pathData="M13.294,15.531h-1.588c-1.495,0 -2.706,1.639 -2.706,2.79v2.104c0,0.65 0.395,0.913 1,1.024V19.5c0,-0.275 0.225,-0.5 0.5,-0.5s0.5,0.225 0.5,0.5v2c0,0.01 -0.005,0.018 -0.005,0.027l0.005,0c0.227,0.003 0.46,0.004 0.706,0.004H12V18.5c0,-0.275 0.225,-0.5 0.5,-0.5s0.5,0.225 0.5,0.5v3.031h0.294c0.246,0 0.479,-0.001 0.706,-0.004l0.005,0C14.005,21.518 14,21.51 14,21.5v-2c0,-0.275 0.225,-0.5 0.5,-0.5s0.5,0.225 0.5,0.5v1.949c0.605,-0.112 1,-0.373 1,-1.024v-2.104C16,17.17 14.789,15.531 13.294,15.531z" />
7+
android:fillColor="#FF000000"
8+
android:pathData="M12,2C6.477,2 2,6.477 2,12c0,4.418 2.865,8.166 6.839,9.489c0.5,0.092 0.682,-0.217 0.682,-0.482c0,-0.237 -0.008,-0.866 -0.013,-1.7c-2.782,0.603 -3.369,-1.342 -3.369,-1.342c-0.454,-1.155 -1.11,-1.462 -1.11,-1.462c-0.908,-0.62 0.069,-0.608 0.069,-0.608c1.003,0.071 1.531,1.03 1.531,1.03c0.892,1.529 2.341,1.087 2.91,0.831c0.092,-0.646 0.35,-1.086 0.636,-1.337c-2.22,-0.253 -4.555,-1.11 -4.555,-4.943c0,-1.091 0.39,-1.984 1.029,-2.683c-0.103,-0.253 -0.446,-1.27 0.098,-2.647c0,0 0.84,-0.268 2.75,1.026A9.578,9.578 0,0 1,12 6.836a9.59,9.59 0,0 1,2.504 0.337c1.909,-1.294 2.747,-1.026 2.747,-1.026c0.546,1.377 0.202,2.394 0.1,2.647c0.64,0.699 1.028,1.592 1.028,2.683c0,3.842 -2.339,4.687 -4.566,4.935c0.359,0.309 0.678,0.919 0.678,1.852c0,1.336 -0.012,2.415 -0.012,2.743c0,0.267 0.18,0.578 0.688,0.48C19.138,20.161 22,16.416 22,12C22,6.477 17.523,2 12,2z" />
529
</vector>

‎composeApp/src/commonMain/kotlin/com/linuxcommandlibrary/app/ui/screens/Dialogs.kt‎

Lines changed: 137 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -2,37 +2,43 @@ package com.linuxcommandlibrary.app.ui.screens
22

33
import androidx.compose.foundation.Image
44
import androidx.compose.foundation.clickable
5+
import androidx.compose.foundation.layout.Arrangement
56
import androidx.compose.foundation.layout.Column
67
import androidx.compose.foundation.layout.Row
78
import androidx.compose.foundation.layout.Spacer
89
import androidx.compose.foundation.layout.fillMaxSize
10+
import androidx.compose.foundation.layout.fillMaxWidth
911
import androidx.compose.foundation.layout.height
1012
import androidx.compose.foundation.layout.padding
1113
import androidx.compose.foundation.layout.size
14+
import androidx.compose.foundation.layout.width
1215
import androidx.compose.foundation.rememberScrollState
1316
import androidx.compose.foundation.shape.RoundedCornerShape
1417
import androidx.compose.foundation.verticalScroll
1518
import androidx.compose.material.Button
19+
import androidx.compose.material.ButtonDefaults
1620
import androidx.compose.material.Card
21+
import androidx.compose.material.Divider
1722
import androidx.compose.material.Icon
18-
import androidx.compose.material.IconButton
1923
import androidx.compose.material.MaterialTheme
24+
import androidx.compose.material.OutlinedButton
2025
import androidx.compose.material.Text
21-
import androidx.compose.material.TextButton
2226
import androidx.compose.runtime.Composable
2327
import androidx.compose.runtime.LaunchedEffect
2428
import androidx.compose.ui.Alignment
2529
import androidx.compose.ui.Modifier
26-
import androidx.compose.ui.graphics.Color
30+
import androidx.compose.ui.draw.clip
2731
import androidx.compose.ui.input.pointer.PointerIcon
2832
import androidx.compose.ui.input.pointer.pointerHoverIcon
2933
import androidx.compose.ui.platform.LocalUriHandler
34+
import androidx.compose.ui.text.font.FontWeight
3035
import androidx.compose.ui.unit.dp
3136
import androidx.compose.ui.window.Dialog
3237
import com.linuxcommandlibrary.app.platform.showRateAppButton
3338
import com.linuxcommandlibrary.app.resources.Res
3439
import com.linuxcommandlibrary.app.resources.af_linode
3540
import com.linuxcommandlibrary.app.resources.af_proton
41+
import com.linuxcommandlibrary.app.resources.app_logo
3642
import com.linuxcommandlibrary.app.ui.composables.AppIcon
3743
import com.linuxcommandlibrary.app.ui.composables.SectionTitle
3844
import com.linuxcommandlibrary.app.ui.composables.rememberIconPainter
@@ -49,99 +55,158 @@ fun AppInfoDialog(
4955

5056
Dialog(onDismissRequest = { onDismiss() }) {
5157
Card(
52-
elevation = 8.dp,
53-
shape = RoundedCornerShape(6.dp),
58+
elevation = 16.dp,
59+
shape = RoundedCornerShape(24.dp),
5460
) {
55-
Column(modifier = Modifier.fillMaxSize()) {
61+
Column(
62+
modifier = Modifier
63+
.fillMaxSize()
64+
.verticalScroll(rememberScrollState())
65+
.padding(24.dp),
66+
horizontalAlignment = Alignment.CenterHorizontally,
67+
) {
68+
Image(
69+
painter = painterResource(Res.drawable.app_logo),
70+
contentDescription = null,
71+
modifier = Modifier.size(72.dp).clip(RoundedCornerShape(16.dp)),
72+
)
73+
Spacer(Modifier.height(12.dp))
5674
Text(
5775
"Linux Command Library",
58-
style = MaterialTheme.typography.h5,
59-
modifier = Modifier.padding(8.dp),
76+
style = MaterialTheme.typography.h6,
77+
fontWeight = FontWeight.Bold,
78+
)
79+
Text(
80+
"Version ${Version.APP_VERSION}",
81+
style = MaterialTheme.typography.caption,
82+
color = MaterialTheme.colors.onSurface.copy(alpha = 0.6f),
6083
)
61-
Row {
84+
85+
Spacer(Modifier.height(20.dp))
86+
87+
Row(
88+
horizontalArrangement = Arrangement.spacedBy(12.dp),
89+
modifier = Modifier.fillMaxWidth(),
90+
) {
6291
if (showRateAppButton) {
6392
Button(
64-
modifier = Modifier.padding(start = 6.dp).pointerHoverIcon(PointerIcon.Hand),
65-
content = {
66-
Text(
67-
"Rate the app",
68-
color = Color.White,
69-
)
70-
},
7193
onClick = {
7294
uriHandler.openUri("https://play.google.com/store/apps/details?id=com.inspiredandroid.linuxcommandbibliotheca")
7395
},
74-
)
96+
modifier = Modifier.weight(1f).pointerHoverIcon(PointerIcon.Hand),
97+
shape = RoundedCornerShape(12.dp),
98+
elevation = ButtonDefaults.elevation(defaultElevation = 0.dp),
99+
) {
100+
Text("Rate the app")
101+
}
75102
}
76-
IconButton(
77-
modifier = Modifier.pointerHoverIcon(PointerIcon.Hand),
103+
OutlinedButton(
78104
onClick = {
79105
uriHandler.openUri("https://github.com/SimonSchubert/LinuxCommandLibrary")
80106
},
107+
modifier = Modifier.weight(1f).pointerHoverIcon(PointerIcon.Hand),
108+
shape = RoundedCornerShape(12.dp),
81109
) {
82110
Icon(
83111
painter = githubPainter,
84-
contentDescription = "View on GitHub",
85-
modifier = Modifier.size(40.dp),
112+
contentDescription = null,
113+
modifier = Modifier.size(18.dp),
86114
)
115+
Spacer(Modifier.width(8.dp))
116+
Text("GitHub")
87117
}
88118
}
119+
120+
Spacer(Modifier.height(20.dp))
121+
Divider(color = MaterialTheme.colors.onSurface.copy(alpha = 0.12f))
122+
Spacer(Modifier.height(20.dp))
89123
Text(
90-
"Version: ${Version.APP_VERSION}",
91-
style = MaterialTheme.typography.caption,
92-
modifier = Modifier.padding(8.dp),
124+
"Support this project",
125+
style = MaterialTheme.typography.subtitle1,
126+
fontWeight = FontWeight.SemiBold,
93127
)
94-
Column(
95-
modifier = Modifier
96-
.padding(8.dp)
97-
.weight(1f)
98-
.verticalScroll(rememberScrollState()),
128+
Spacer(Modifier.height(4.dp))
129+
Text(
130+
"By using my referral links for these amazing products.",
131+
style = MaterialTheme.typography.body2,
132+
color = MaterialTheme.colors.onSurface.copy(alpha = 0.7f),
133+
)
134+
Spacer(Modifier.height(12.dp))
135+
OutlinedButton(
136+
onClick = {
137+
uriHandler.openUri("https://github.com/sponsors/SimonSchubert")
138+
},
139+
modifier = Modifier.fillMaxWidth().pointerHoverIcon(PointerIcon.Hand),
140+
shape = RoundedCornerShape(12.dp),
99141
) {
100-
Text("Support this project", style = MaterialTheme.typography.h6)
101-
Text("By using my referral links for these amazing products.")
102-
Spacer(Modifier.height(8.dp))
103-
Row {
104-
Image(
105-
painter = painterResource(Res.drawable.af_proton),
106-
contentDescription = "Proton Free",
107-
modifier = Modifier
108-
.weight(1f)
109-
.pointerHoverIcon(PointerIcon.Hand)
110-
.clickable {
111-
uriHandler.openUri("https://linuxcommandlibrary.com/proton-free-2025")
112-
},
113-
)
114-
Image(
115-
painter = painterResource(Res.drawable.af_linode),
116-
contentDescription = "Linode Cloud",
117-
modifier = Modifier
118-
.weight(1f)
119-
.pointerHoverIcon(PointerIcon.Hand)
120-
.clickable {
121-
uriHandler.openUri("https://linuxcommandlibrary.com/linode-2025")
122-
},
123-
)
124-
}
125-
Spacer(Modifier.height(8.dp))
126-
Text("Man pages", style = MaterialTheme.typography.h6)
127-
Text("Licence information about the man page is usually specified in the man detail page under the category Author, Copyright or Licence.")
128-
129-
Spacer(Modifier.height(8.dp))
130-
Text("TLDR pages", style = MaterialTheme.typography.h6)
131-
Text("The MIT License (MIT) Copyright (c) 2014 the TLDR team and contributors")
132-
Spacer(Modifier.height(8.dp))
133-
Text(
134-
"Thanks to icons8.com for the icons",
135-
style = MaterialTheme.typography.h6,
142+
Icon(
143+
painter = githubPainter,
144+
contentDescription = null,
145+
modifier = Modifier.size(18.dp),
136146
)
147+
Spacer(Modifier.width(8.dp))
148+
Text("Sponsor on GitHub")
137149
}
138-
TextButton(
139-
content = { Text("OK") },
140-
modifier = Modifier
141-
.align(Alignment.End)
142-
.padding(end = 6.dp)
143-
.pointerHoverIcon(PointerIcon.Hand),
144-
onClick = onDismiss,
150+
Spacer(Modifier.height(12.dp))
151+
Row(horizontalArrangement = Arrangement.spacedBy(12.dp)) {
152+
Image(
153+
painter = painterResource(Res.drawable.af_proton),
154+
contentDescription = "Proton Free",
155+
modifier = Modifier
156+
.weight(1f)
157+
.clip(RoundedCornerShape(12.dp))
158+
.pointerHoverIcon(PointerIcon.Hand)
159+
.clickable {
160+
uriHandler.openUri("https://linuxcommandlibrary.com/proton-free-2025")
161+
},
162+
)
163+
Image(
164+
painter = painterResource(Res.drawable.af_linode),
165+
contentDescription = "Linode Cloud",
166+
modifier = Modifier
167+
.weight(1f)
168+
.clip(RoundedCornerShape(12.dp))
169+
.pointerHoverIcon(PointerIcon.Hand)
170+
.clickable {
171+
uriHandler.openUri("https://linuxcommandlibrary.com/linode-2025")
172+
},
173+
)
174+
}
175+
176+
Spacer(Modifier.height(24.dp))
177+
178+
Text(
179+
"Acknowledgements",
180+
style = MaterialTheme.typography.subtitle1,
181+
fontWeight = FontWeight.SemiBold,
182+
)
183+
Spacer(Modifier.height(8.dp))
184+
Text(
185+
"Man pages",
186+
style = MaterialTheme.typography.body2,
187+
fontWeight = FontWeight.Medium,
188+
)
189+
Text(
190+
"Licence information about the man page is usually specified in the man detail page under the category Author, Copyright or Licence.",
191+
style = MaterialTheme.typography.caption,
192+
color = MaterialTheme.colors.onSurface.copy(alpha = 0.6f),
193+
)
194+
Spacer(Modifier.height(12.dp))
195+
Text(
196+
"TLDR pages",
197+
style = MaterialTheme.typography.body2,
198+
fontWeight = FontWeight.Medium,
199+
)
200+
Text(
201+
"The MIT License (MIT) Copyright (c) 2014 the TLDR team and contributors",
202+
style = MaterialTheme.typography.caption,
203+
color = MaterialTheme.colors.onSurface.copy(alpha = 0.6f),
204+
)
205+
Spacer(Modifier.height(12.dp))
206+
Text(
207+
"Thanks to icons8.com for the icons",
208+
style = MaterialTheme.typography.caption,
209+
color = MaterialTheme.colors.onSurface.copy(alpha = 0.6f),
145210
)
146211
}
147212
}

0 commit comments

Comments
 (0)