ui: assorted UI tweaks + disconnected view (#203)
Andrea Gottardo
3 months ago
committed by
GitHub
parent
4df18951a6
commit
06e850bbd5
@ -0,0 +1,36 @@
|
|||||||
|
// Copyright (c) Tailscale Inc & AUTHORS
|
||||||
|
// SPDX-License-Identifier: BSD-3-Clause
|
||||||
|
|
||||||
|
package com.tailscale.ipn.ui.util
|
||||||
|
|
||||||
|
import androidx.compose.foundation.layout.PaddingValues
|
||||||
|
import androidx.compose.foundation.layout.RowScope
|
||||||
|
import androidx.compose.foundation.layout.fillMaxWidth
|
||||||
|
import androidx.compose.material3.Button
|
||||||
|
import androidx.compose.material3.ButtonColors
|
||||||
|
import androidx.compose.material3.MaterialTheme
|
||||||
|
import androidx.compose.runtime.Composable
|
||||||
|
import androidx.compose.ui.Modifier
|
||||||
|
import androidx.compose.ui.graphics.Color
|
||||||
|
import androidx.compose.ui.unit.dp
|
||||||
|
import com.tailscale.ipn.ui.theme.ts_color_light_blue
|
||||||
|
|
||||||
|
@Composable
|
||||||
|
fun PrimaryActionButton(
|
||||||
|
onClick: () -> Unit,
|
||||||
|
content: @Composable RowScope.() -> Unit
|
||||||
|
) {
|
||||||
|
Button(
|
||||||
|
onClick = onClick,
|
||||||
|
colors = ButtonColors(
|
||||||
|
containerColor = ts_color_light_blue,
|
||||||
|
contentColor = Color.White,
|
||||||
|
disabledContainerColor = MaterialTheme.colorScheme.secondary,
|
||||||
|
disabledContentColor = MaterialTheme.colorScheme.onSecondary
|
||||||
|
),
|
||||||
|
contentPadding = PaddingValues(vertical = 12.dp),
|
||||||
|
modifier = Modifier
|
||||||
|
.fillMaxWidth(),
|
||||||
|
content = content
|
||||||
|
)
|
||||||
|
}
|
||||||
@ -0,0 +1,63 @@
|
|||||||
|
// Copyright (c) Tailscale Inc & AUTHORS
|
||||||
|
// SPDX-License-Identifier: BSD-3-Clause
|
||||||
|
|
||||||
|
package com.tailscale.ipn.ui.view
|
||||||
|
|
||||||
|
import androidx.compose.foundation.Canvas
|
||||||
|
import androidx.compose.foundation.layout.Arrangement
|
||||||
|
import androidx.compose.foundation.layout.BoxWithConstraints
|
||||||
|
import androidx.compose.foundation.layout.Column
|
||||||
|
import androidx.compose.foundation.layout.Row
|
||||||
|
import androidx.compose.foundation.layout.size
|
||||||
|
import androidx.compose.material3.MaterialTheme
|
||||||
|
import androidx.compose.runtime.Composable
|
||||||
|
import androidx.compose.ui.Modifier
|
||||||
|
import androidx.compose.ui.graphics.Color
|
||||||
|
|
||||||
|
// TODO(angott):
|
||||||
|
// - Implement game-of-life animation for progress indicator.
|
||||||
|
// - Remove hardcoded dots, use a for-each and make it dynamically
|
||||||
|
// use the space available instead of unit = 10.dp
|
||||||
|
|
||||||
|
@Composable
|
||||||
|
fun TailscaleLogoView(modifier: Modifier) {
|
||||||
|
val primaryColor: Color = MaterialTheme.colorScheme.primary
|
||||||
|
val secondaryColor: Color = MaterialTheme.colorScheme.primary.copy(alpha = 0.3f)
|
||||||
|
BoxWithConstraints(modifier) {
|
||||||
|
Column(verticalArrangement = Arrangement.spacedBy(this@BoxWithConstraints.maxWidth.div(8))) {
|
||||||
|
Row(horizontalArrangement = Arrangement.spacedBy(this@BoxWithConstraints.maxWidth.div(8))) {
|
||||||
|
Canvas(modifier = Modifier.size(this@BoxWithConstraints.maxWidth.div(4)), onDraw = {
|
||||||
|
drawCircle(color = secondaryColor)
|
||||||
|
})
|
||||||
|
Canvas(modifier = Modifier.size(this@BoxWithConstraints.maxWidth.div(4)), onDraw = {
|
||||||
|
drawCircle(color = secondaryColor)
|
||||||
|
})
|
||||||
|
Canvas(modifier = Modifier.size(this@BoxWithConstraints.maxWidth.div(4)), onDraw = {
|
||||||
|
drawCircle(color = secondaryColor)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
Row(horizontalArrangement = Arrangement.spacedBy(this@BoxWithConstraints.maxWidth.div(8))) {
|
||||||
|
Canvas(modifier = Modifier.size(this@BoxWithConstraints.maxWidth.div(4)), onDraw = {
|
||||||
|
drawCircle(color = primaryColor)
|
||||||
|
})
|
||||||
|
Canvas(modifier = Modifier.size(this@BoxWithConstraints.maxWidth.div(4)), onDraw = {
|
||||||
|
drawCircle(color = primaryColor)
|
||||||
|
})
|
||||||
|
Canvas(modifier = Modifier.size(this@BoxWithConstraints.maxWidth.div(4)), onDraw = {
|
||||||
|
drawCircle(color = primaryColor)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
Row(horizontalArrangement = Arrangement.spacedBy(this@BoxWithConstraints.maxWidth.div(8))) {
|
||||||
|
Canvas(modifier = Modifier.size(this@BoxWithConstraints.maxWidth.div(4)), onDraw = {
|
||||||
|
drawCircle(color = secondaryColor)
|
||||||
|
})
|
||||||
|
Canvas(modifier = Modifier.size(this@BoxWithConstraints.maxWidth.div(4)), onDraw = {
|
||||||
|
drawCircle(color = primaryColor)
|
||||||
|
})
|
||||||
|
Canvas(modifier = Modifier.size(this@BoxWithConstraints.maxWidth.div(4)), onDraw = {
|
||||||
|
drawCircle(color = secondaryColor)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,5 @@
|
|||||||
|
<vector xmlns:android="http://schemas.android.com/apk/res/android" android:height="24dp" android:tint="#000000" android:viewportHeight="24" android:viewportWidth="24" android:width="24dp">
|
||||||
|
|
||||||
|
<path android:fillColor="@android:color/white" android:pathData="M13,3h-2v10h2L13,3zM17.83,5.17l-1.42,1.42C17.99,7.86 19,9.81 19,12c0,3.87 -3.13,7 -7,7s-7,-3.13 -7,-7c0,-2.19 1.01,-4.14 2.58,-5.42L6.17,5.17C4.23,6.82 3,9.26 3,12c0,4.97 4.03,9 9,9s9,-4.03 9,-9c0,-2.74 -1.23,-5.18 -3.17,-6.83z"/>
|
||||||
|
|
||||||
|
</vector>
|
||||||
Loading…
Reference in New Issue