vaultwarden/keyguard-app-Bitwarden-Vaultwarden
1
0
Fork 0
mirror of https://github.com/AChep/keyguard-app.git synced 2025-01-04 18:59:15 +01:00
Code Issues Packages Projects Releases Wiki Activity

improvement(Desktop): Show a tooltip with Full title text on hover

Browse Source
This commit is contained in:
Artem Chepurnoy 2024-12-28 15:21:22 +02:00
parent e450fb3fec
commit 60ec3c6d9a
No known key found for this signature in database
GPG Key ID: FAC37D0CF674043E
3 changed files with 94 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
common/src/commonMain/kotlin/com/artemchep/keyguard/feature/home/vault/screen/VaultViewScreen.kt
View File

@ -4,8 +4,10 @@ package com.artemchep.keyguard.feature.home.vault.screen
import androidx.compose.animation.AnimatedVisibility
import androidx.compose.foundation.ExperimentalFoundationApi
import androidx.compose.foundation.TooltipArea
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.RowScope
import androidx.compose.foundation.layout.Spacer
@ -13,8 +15,10 @@ import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.layout.widthIn
import androidx.compose.foundation.lazy.LazyListState
import androidx.compose.foundation.lazy.items
import androidx.compose.material.LocalContentAlpha
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.outlined.Edit
import androidx.compose.material.icons.outlined.Lock
@ -30,6 +34,7 @@ import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBarDefaults
import androidx.compose.material3.minimumInteractiveComponentSize
import androidx.compose.runtime.Composable
import androidx.compose.runtime.CompositionLocalProvider
import androidx.compose.runtime.collectAsState
import androidx.compose.runtime.rememberUpdatedState
import androidx.compose.runtime.saveable.rememberSaveable
@ -71,6 +76,7 @@ import com.artemchep.keyguard.ui.text.AutoSizeText
import com.artemchep.keyguard.ui.theme.combineAlpha
import com.artemchep.keyguard.ui.toolbar.LargeToolbar
import com.artemchep.keyguard.ui.toolbar.util.ToolbarBehavior
import com.artemchep.keyguard.ui.tooltip.Tooltip
import org.jetbrains.compose.resources.stringResource
@Composable
@ -323,22 +329,32 @@ private fun VaultViewTitle(
is VaultViewState.Content.Cipher -> {
val title = state.content.data.name
.takeUnless { it.isEmpty() }
if (title != null) {
AutoSizeText(
text = title,
maxLines = 2,
minTextSize = MaterialTheme.typography.titleSmall.fontSize,
maxTextSize = LocalTextStyle.current.fontSize,
overflow = TextOverflow.Ellipsis,
)
} else {
Text(
text = stringResource(Res.string.empty_value),
color = LocalContentColor.current
.combineAlpha(DisabledEmphasisAlpha),
maxLines = 1,
overflow = TextOverflow.Ellipsis,
)
Tooltip(
valueOrNull = title,
tooltip = { text ->
Text(
text,
maxLines = 8,
)
},
) {
if (title != null) {
AutoSizeText(
text = title,
maxLines = 2,
minTextSize = MaterialTheme.typography.titleSmall.fontSize,
maxTextSize = LocalTextStyle.current.fontSize,
overflow = TextOverflow.Ellipsis,
)
} else {
Text(
text = stringResource(Res.string.empty_value),
color = LocalContentColor.current
.combineAlpha(DisabledEmphasisAlpha),
maxLines = 1,
overflow = TextOverflow.Ellipsis,
)
}
}
}

2
common/src/commonMain/kotlin/com/artemchep/keyguard/ui/theme/Dimen.kt
View File

@ -39,3 +39,5 @@ data class Dimen(
val Dimen.horizontalPaddingHalf get() = horizontalPadding / 2
val Dimen.horizontalPaddingFourth get() = horizontalPadding / 4
val Dimen.verticalPaddingHalf get() = verticalPadding / 2

60
common/src/commonMain/kotlin/com/artemchep/keyguard/ui/tooltip/Tooltip.kt Normal file
View File

@ -0,0 +1,60 @@
package com.artemchep.keyguard.ui.tooltip
import androidx.compose.foundation.TooltipArea
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.BoxScope
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.widthIn
import androidx.compose.material3.LocalContentColor
import androidx.compose.material3.LocalTextStyle
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.contentColorFor
import androidx.compose.runtime.Composable
import androidx.compose.runtime.CompositionLocalProvider
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import com.artemchep.keyguard.ui.surface.LocalSurfaceColor
import com.artemchep.keyguard.ui.theme.Dimens
import com.artemchep.keyguard.ui.theme.verticalPaddingHalf
@Composable
fun <T : Any> Tooltip(
modifier: Modifier = Modifier,
valueOrNull: T?,
tooltip: @Composable BoxScope.(T) -> Unit,
content: @Composable () -> Unit,
) {
TooltipArea(
modifier = modifier,
tooltip = {
if (valueOrNull != null) {
val backgroundColor = MaterialTheme.colorScheme.surfaceVariant
val contentColor = contentColorFor(backgroundColor)
Box(
modifier = Modifier
.background(
color = backgroundColor,
shape = MaterialTheme.shapes.medium,
)
.padding(
horizontal = Dimens.horizontalPadding,
vertical = Dimens.verticalPaddingHalf,
)
.widthIn(
max = 320.dp,
),
) {
CompositionLocalProvider(
LocalSurfaceColor provides backgroundColor,
LocalContentColor provides contentColor,
LocalTextStyle provides MaterialTheme.typography.bodyMedium,
) {
tooltip(valueOrNull)
}
}
}
},
content = content,
)
}