ui: assorted UI tweaks + disconnected view
Updates tailscale/corp#18202 - Begins using the brand theme colors for both light and dark mode - Adds a symbol to match the disconnected iOS view - Adds a PrimaryActionButton for blue colored buttons - Adds a static TailscaleLogoView, progress indicator mode to follow Signed-off-by: Andrea Gottardo <andrea@gottardo.me>pull/203/head
Andrea Gottardo
2 months ago
parent
4df18951a6
commit
4f46ce15a9
@ -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