Create and implement HighlightLabel in Passphrase screen#46

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ovitrif merged 9 commits into from
Mar 11, 2025
Merged

Create and implement HighlightLabel in Passphrase screen #46

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
3d2bec2
feat: create HighlightLabel.kt component
jvsena42 Mar 10, 2025
1df7500
refactor: make the HighlightLabel.kt more flexible
jvsena42 Mar 10, 2025
e39ba20
refactor: get orange color from colors
jvsena42 Mar 10, 2025
20e6391
refactor: implement Caption13Up
jvsena42 Mar 10, 2025
6ad5ee4
refactor: remove imports
jvsena42 Mar 10, 2025
911b9aa
feat: implement tag "advanced"
jvsena42 Mar 10, 2025
13eb8f5
fix: tag alignment
jvsena42 Mar 10, 2025
91123d6
fix: image padding
jvsena42 Mar 10, 2025
074f597
refactor: move HighlightLabel.kt to components package
jvsena42 Mar 11, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
124 changes: 124 additions & 0 deletions app/src/main/java/to/bitkit/ui/components/HighlightLabel.kt
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,124 @@
package to.bitkit.ui.components


import androidx.compose.foundation.Canvas
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.layout.wrapContentWidth
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.drawBehind
import androidx.compose.ui.geometry.Size
import androidx.compose.ui.graphics.Path
import androidx.compose.ui.platform.LocalDensity
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import to.bitkit.R
import to.bitkit.ui.theme.AppThemeSurface
import to.bitkit.ui.theme.Colors.Brand

val mainRectHeight = 26.dp

@Composable
fun HighlightLabel(
text: String,
modifier: Modifier = Modifier,
) {
val density = LocalDensity.current
val triangleWidth = 13.dp
val triangleWidthPx = with(density) { triangleWidth.toPx() }
val logoHeight = 42.dp
val mainRectHeightPx = with(density) { mainRectHeight.toPx() }
val logoHeightPx = with(density) { logoHeight.toPx() }

Row(
modifier = modifier.height(logoHeight),
verticalAlignment = Alignment.Top
) {
// Left triangles
Canvas(
modifier = Modifier
.width(triangleWidth)
.fillMaxHeight()
) {
// Top left triangle
drawPath(
path = Path().apply {
moveTo(0f, 0f)
lineTo(triangleWidthPx, triangleWidthPx)
lineTo(triangleWidthPx, 0f)
close()
},
color = Brand
)

// Bottom left triangle
drawPath(
path = Path().apply {
moveTo(0f, mainRectHeightPx)
lineTo(triangleWidthPx, triangleWidthPx)
lineTo(triangleWidthPx, mainRectHeightPx)
close()
},
color = Brand
)
}

// Text with background
Box(
modifier = Modifier
.height(mainRectHeight)
.wrapContentWidth()
.drawBehind {
// Main rectangle (flexible width based on text)
drawRect(
color = Brand,
size = Size(this.size.width, this.size.height)
)

// Top right triangle (semi-transparent)
if (this.size.width > 0) {
drawPath(
path = Path().apply {
val startX = this@drawBehind.size.width - triangleWidthPx
moveTo(startX, this@drawBehind.size.height)
lineTo(this@drawBehind.size.width, logoHeightPx)
lineTo(this@drawBehind.size.width, this@drawBehind.size.height)
close()
},
color = Brand.copy(alpha = 0.5f)
)
}
},
contentAlignment = Alignment.Center
) {
Caption13Up(
text = text,
modifier = Modifier.padding(horizontal = 16.dp, vertical = 4.dp)
)
}
}
}

// Usage example
@Preview(showBackground = true)
@Composable
fun FlexibleLogoPreview() {
AppThemeSurface {
HighlightLabel(text = stringResource(R.string.onboarding__advanced))
}
}

@Preview(showBackground = true)
@Composable
fun LongTextLogoPreview() {
AppThemeSurface {
HighlightLabel(text = "NOT YOUR KEYS, NOT YOUR COINS")
}
}
48 changes: 29 additions & 19 deletions app/src/main/java/to/bitkit/ui/onboarding/CreateWalletWithPassphraseScreen.kt
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -3,12 +3,12 @@ package to.bitkit.ui.onboarding
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.imePadding
import androidx.compose.foundation.layout.offset
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.rememberScrollState
Expand All@@ -17,36 +17,33 @@ import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.foundation.verticalScroll
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.automirrored.filled.ArrowBack
import androidx.compose.material3.Button
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.OutlinedTextField
import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBar
import androidx.compose.material3.TopAppBarDefaults.MediumAppBarCollapsedHeight
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.input.ImeAction
import androidx.compose.ui.text.input.KeyboardCapitalization
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import to.bitkit.R
import to.bitkit.ui.components.BodyM
import to.bitkit.ui.components.Display
import to.bitkit.ui.components.HighlightLabel
import to.bitkit.ui.components.PrimaryButton
import to.bitkit.ui.components.mainRectHeight
import to.bitkit.ui.theme.AppTextFieldDefaults
import to.bitkit.ui.theme.AppThemeSurface
import to.bitkit.ui.theme.Colors
Expand All@@ -63,18 +60,30 @@ fun CreateWalletWithPassphraseScreen(
Box(
modifier = Modifier.fillMaxSize(),
) {
TopAppBar(
title = {},
navigationIcon = {
IconButton(onClick = onBackClick) {
Icon(
imageVector = Icons.AutoMirrored.Default.ArrowBack,
contentDescription = stringResource(R.string.common__back),
modifier = Modifier.size(24.dp)
)
}
},
)
Row(
modifier = Modifier.fillMaxWidth(),
verticalAlignment = Alignment.Bottom
) {
TopAppBar(
title = {},
navigationIcon = {
IconButton(onClick = onBackClick) {
Icon(
imageVector = Icons.AutoMirrored.Default.ArrowBack,
contentDescription = stringResource(R.string.common__back),
modifier = Modifier.size(24.dp)
)
}
},
modifier = Modifier.weight(1f)
)

HighlightLabel(
stringResource(R.string.onboarding__advanced).uppercase(),
Modifier
.padding(top = MediumAppBarCollapsedHeight / 2 - (mainRectHeight / 2))
)
}
Column(
modifier = Modifier
.align(Alignment.BottomCenter)
Expand All@@ -83,6 +92,7 @@ fun CreateWalletWithPassphraseScreen(
.imePadding()
.verticalScroll(rememberScrollState())
) {
Spacer(modifier = Modifier.height(MediumAppBarCollapsedHeight))
Image(
painter = painterResource(id = R.drawable.padlock2),
contentDescription = null,
Expand Down
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all 
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '

Skip to content
Create and implement HighlightLabel in Passphrase screen#46

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

ovitrif
merged 9 commits into

from

Mar 11, 2025
 Merged


Create and implement HighlightLabel in Passphrase screen
#46
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


9 commits


Select commit
Hold shift + click to select a range
3d2bec2

feat: create HighlightLabel.kt component


jvsena42 Mar 10, 2025
1df7500

refactor: make the HighlightLabel.kt more flexible


jvsena42 Mar 10, 2025
e39ba20

refactor: get orange color from colors


jvsena42 Mar 10, 2025
20e6391

refactor: implement Caption13Up


jvsena42 Mar 10, 2025
6ad5ee4

refactor: remove imports


jvsena42 Mar 10, 2025
911b9aa

feat: implement tag "advanced"


jvsena42 Mar 10, 2025
13eb8f5

fix: tag alignment


jvsena42 Mar 10, 2025
91123d6

fix: image padding


jvsena42 Mar 10, 2025
074f597

refactor: move HighlightLabel.kt to components package


jvsena42 Mar 11, 2025

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


124 changes: 124 additions & 0 deletions
app/src/main/java/to/bitkit/ui/components/HighlightLabel.kt

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,124 @@
package to.bitkit.ui.components


import androidx.compose.foundation.Canvas
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.layout.wrapContentWidth
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.drawBehind
import androidx.compose.ui.geometry.Size
import androidx.compose.ui.graphics.Path
import androidx.compose.ui.platform.LocalDensity
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import to.bitkit.R
import to.bitkit.ui.theme.AppThemeSurface
import to.bitkit.ui.theme.Colors.Brand

val mainRectHeight = 26.dp

@Composable
fun HighlightLabel(
 text: String,
 modifier: Modifier = Modifier,
) {
 val density = LocalDensity.current
 val triangleWidth = 13.dp
 val triangleWidthPx = with(density) { triangleWidth.toPx() }
 val logoHeight = 42.dp
 val mainRectHeightPx = with(density) { mainRectHeight.toPx() }
 val logoHeightPx = with(density) { logoHeight.toPx() }

 Row(
 modifier = modifier.height(logoHeight),
 verticalAlignment = Alignment.Top
 ) {
 // Left triangles
 Canvas(
 modifier = Modifier
 .width(triangleWidth)
 .fillMaxHeight()
 ) {
 // Top left triangle
 drawPath(
 path = Path().apply {
 moveTo(0f, 0f)
 lineTo(triangleWidthPx, triangleWidthPx)
 lineTo(triangleWidthPx, 0f)
 close()
 },
 color = Brand
 )

 // Bottom left triangle
 drawPath(
 path = Path().apply {
 moveTo(0f, mainRectHeightPx)
 lineTo(triangleWidthPx, triangleWidthPx)
 lineTo(triangleWidthPx, mainRectHeightPx)
 close()
 },
 color = Brand
 )
 }

 // Text with background
 Box(
 modifier = Modifier
 .height(mainRectHeight)
 .wrapContentWidth()
 .drawBehind {
 // Main rectangle (flexible width based on text)
 drawRect(
 color = Brand,
 size = Size(this.size.width, this.size.height)
 )

 // Top right triangle (semi-transparent)
 if (this.size.width > 0) {
 drawPath(
 path = Path().apply {
 val startX = this@drawBehind.size.width - triangleWidthPx
 moveTo(startX, this@drawBehind.size.height)
 lineTo(this@drawBehind.size.width, logoHeightPx)
 lineTo(this@drawBehind.size.width, this@drawBehind.size.height)
 close()
 },
 color = Brand.copy(alpha = 0.5f)
 )
 }
 },
 contentAlignment = Alignment.Center
 ) {
 Caption13Up(
 text = text,
 modifier = Modifier.padding(horizontal = 16.dp, vertical = 4.dp)
 )
 }
 }
}

// Usage example
@Preview(showBackground = true)
@Composable
fun FlexibleLogoPreview() {
 AppThemeSurface {
 HighlightLabel(text = stringResource(R.string.onboarding__advanced))
 }
}

@Preview(showBackground = true)
@Composable
fun LongTextLogoPreview() {
 AppThemeSurface {
 HighlightLabel(text = "NOT YOUR KEYS, NOT YOUR COINS")
 }
}

48 changes: 29 additions & 19 deletions
app/src/main/java/to/bitkit/ui/onboarding/CreateWalletWithPassphraseScreen.kt

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -3,12 +3,12 @@ package to.bitkit.ui.onboarding
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.imePadding
import androidx.compose.foundation.layout.offset
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.rememberScrollState
Expand All@@ -17,36 +17,33 @@ import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.foundation.verticalScroll
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.automirrored.filled.ArrowBack
import androidx.compose.material3.Button
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.OutlinedTextField
import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBar
import androidx.compose.material3.TopAppBarDefaults.MediumAppBarCollapsedHeight
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.input.ImeAction
import androidx.compose.ui.text.input.KeyboardCapitalization
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import to.bitkit.R
import to.bitkit.ui.components.BodyM
import to.bitkit.ui.components.Display
import to.bitkit.ui.components.HighlightLabel
import to.bitkit.ui.components.PrimaryButton
import to.bitkit.ui.components.mainRectHeight
import to.bitkit.ui.theme.AppTextFieldDefaults
import to.bitkit.ui.theme.AppThemeSurface
import to.bitkit.ui.theme.Colors
Expand All@@ -63,18 +60,30 @@ fun CreateWalletWithPassphraseScreen(
 Box(
 modifier = Modifier.fillMaxSize(),
 ) {
 TopAppBar(
 title = {},
 navigationIcon = {
 IconButton(onClick = onBackClick) {
 Icon(
 imageVector = Icons.AutoMirrored.Default.ArrowBack,
 contentDescription = stringResource(R.string.common__back),
 modifier = Modifier.size(24.dp)
 )
 }
 },
 )
 Row(
 modifier = Modifier.fillMaxWidth(),
 verticalAlignment = Alignment.Bottom
 ) {
 TopAppBar(
 title = {},
 navigationIcon = {
 IconButton(onClick = onBackClick) {
 Icon(
 imageVector = Icons.AutoMirrored.Default.ArrowBack,
 contentDescription = stringResource(R.string.common__back),
 modifier = Modifier.size(24.dp)
 )
 }
 },
 modifier = Modifier.weight(1f)
 )

 HighlightLabel(
 stringResource(R.string.onboarding__advanced).uppercase(),
 Modifier
 .padding(top = MediumAppBarCollapsedHeight / 2 - (mainRectHeight / 2))
 )
 }
 Column(
 modifier = Modifier
 .align(Alignment.BottomCenter)
Expand All@@ -83,6 +92,7 @@ fun CreateWalletWithPassphraseScreen(
 .imePadding()
 .verticalScroll(rememberScrollState())
 ) {
 Spacer(modifier = Modifier.height(MediumAppBarCollapsedHeight))
 Image(
 painter = painterResource(id = R.drawable.padlock2),
 contentDescription = null,
Expand Down

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix");
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
Create and implement HighlightLabel in Passphrase screen#46

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

ovitrif
merged 9 commits into

from

Mar 11, 2025
 Merged


Create and implement HighlightLabel in Passphrase screen
#46
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


9 commits


Select commit
Hold shift + click to select a range
3d2bec2

feat: create HighlightLabel.kt component


jvsena42 Mar 10, 2025
1df7500

refactor: make the HighlightLabel.kt more flexible


jvsena42 Mar 10, 2025
e39ba20

refactor: get orange color from colors


jvsena42 Mar 10, 2025
20e6391

refactor: implement Caption13Up


jvsena42 Mar 10, 2025
6ad5ee4

refactor: remove imports


jvsena42 Mar 10, 2025
911b9aa

feat: implement tag "advanced"


jvsena42 Mar 10, 2025
13eb8f5

fix: tag alignment


jvsena42 Mar 10, 2025
91123d6

fix: image padding


jvsena42 Mar 10, 2025
074f597

refactor: move HighlightLabel.kt to components package


jvsena42 Mar 11, 2025

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


124 changes: 124 additions & 0 deletions
app/src/main/java/to/bitkit/ui/components/HighlightLabel.kt

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,124 @@
package to.bitkit.ui.components


import androidx.compose.foundation.Canvas
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.layout.wrapContentWidth
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.drawBehind
import androidx.compose.ui.geometry.Size
import androidx.compose.ui.graphics.Path
import androidx.compose.ui.platform.LocalDensity
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import to.bitkit.R
import to.bitkit.ui.theme.AppThemeSurface
import to.bitkit.ui.theme.Colors.Brand

val mainRectHeight = 26.dp

@Composable
fun HighlightLabel(
 text: String,
 modifier: Modifier = Modifier,
) {
 val density = LocalDensity.current
 val triangleWidth = 13.dp
 val triangleWidthPx = with(density) { triangleWidth.toPx() }
 val logoHeight = 42.dp
 val mainRectHeightPx = with(density) { mainRectHeight.toPx() }
 val logoHeightPx = with(density) { logoHeight.toPx() }

 Row(
 modifier = modifier.height(logoHeight),
 verticalAlignment = Alignment.Top
 ) {
 // Left triangles
 Canvas(
 modifier = Modifier
 .width(triangleWidth)
 .fillMaxHeight()
 ) {
 // Top left triangle
 drawPath(
 path = Path().apply {
 moveTo(0f, 0f)
 lineTo(triangleWidthPx, triangleWidthPx)
 lineTo(triangleWidthPx, 0f)
 close()
 },
 color = Brand
 )

 // Bottom left triangle
 drawPath(
 path = Path().apply {
 moveTo(0f, mainRectHeightPx)
 lineTo(triangleWidthPx, triangleWidthPx)
 lineTo(triangleWidthPx, mainRectHeightPx)
 close()
 },
 color = Brand
 )
 }

 // Text with background
 Box(
 modifier = Modifier
 .height(mainRectHeight)
 .wrapContentWidth()
 .drawBehind {
 // Main rectangle (flexible width based on text)
 drawRect(
 color = Brand,
 size = Size(this.size.width, this.size.height)
 )

 // Top right triangle (semi-transparent)
 if (this.size.width > 0) {
 drawPath(
 path = Path().apply {
 val startX = this@drawBehind.size.width - triangleWidthPx
 moveTo(startX, this@drawBehind.size.height)
 lineTo(this@drawBehind.size.width, logoHeightPx)
 lineTo(this@drawBehind.size.width, this@drawBehind.size.height)
 close()
 },
 color = Brand.copy(alpha = 0.5f)
 )
 }
 },
 contentAlignment = Alignment.Center
 ) {
 Caption13Up(
 text = text,
 modifier = Modifier.padding(horizontal = 16.dp, vertical = 4.dp)
 )
 }
 }
}

// Usage example
@Preview(showBackground = true)
@Composable
fun FlexibleLogoPreview() {
 AppThemeSurface {
 HighlightLabel(text = stringResource(R.string.onboarding__advanced))
 }
}

@Preview(showBackground = true)
@Composable
fun LongTextLogoPreview() {
 AppThemeSurface {
 HighlightLabel(text = "NOT YOUR KEYS, NOT YOUR COINS")
 }
}

48 changes: 29 additions & 19 deletions
app/src/main/java/to/bitkit/ui/onboarding/CreateWalletWithPassphraseScreen.kt

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -3,12 +3,12 @@ package to.bitkit.ui.onboarding
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.imePadding
import androidx.compose.foundation.layout.offset
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.rememberScrollState
Expand All@@ -17,36 +17,33 @@ import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.foundation.verticalScroll
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.automirrored.filled.ArrowBack
import androidx.compose.material3.Button
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.OutlinedTextField
import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBar
import androidx.compose.material3.TopAppBarDefaults.MediumAppBarCollapsedHeight
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.input.ImeAction
import androidx.compose.ui.text.input.KeyboardCapitalization
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import to.bitkit.R
import to.bitkit.ui.components.BodyM
import to.bitkit.ui.components.Display
import to.bitkit.ui.components.HighlightLabel
import to.bitkit.ui.components.PrimaryButton
import to.bitkit.ui.components.mainRectHeight
import to.bitkit.ui.theme.AppTextFieldDefaults
import to.bitkit.ui.theme.AppThemeSurface
import to.bitkit.ui.theme.Colors
Expand All@@ -63,18 +60,30 @@ fun CreateWalletWithPassphraseScreen(
 Box(
 modifier = Modifier.fillMaxSize(),
 ) {
 TopAppBar(
 title = {},
 navigationIcon = {
 IconButton(onClick = onBackClick) {
 Icon(
 imageVector = Icons.AutoMirrored.Default.ArrowBack,
 contentDescription = stringResource(R.string.common__back),
 modifier = Modifier.size(24.dp)
 )
 }
 },
 )
 Row(
 modifier = Modifier.fillMaxWidth(),
 verticalAlignment = Alignment.Bottom
 ) {
 TopAppBar(
 title = {},
 navigationIcon = {
 IconButton(onClick = onBackClick) {
 Icon(
 imageVector = Icons.AutoMirrored.Default.ArrowBack,
 contentDescription = stringResource(R.string.common__back),
 modifier = Modifier.size(24.dp)
 )
 }
 },
 modifier = Modifier.weight(1f)
 )

 HighlightLabel(
 stringResource(R.string.onboarding__advanced).uppercase(),
 Modifier
 .padding(top = MediumAppBarCollapsedHeight / 2 - (mainRectHeight / 2))
 )
 }
 Column(
 modifier = Modifier
 .align(Alignment.BottomCenter)
Expand All@@ -83,6 +92,7 @@ fun CreateWalletWithPassphraseScreen(
 .imePadding()
 .verticalScroll(rememberScrollState())
 ) {
 Spacer(modifier = Modifier.height(MediumAppBarCollapsedHeight))
 Image(
 painter = painterResource(id = R.drawable.padlock2),
 contentDescription = null,
Expand Down

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms");
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
Create and implement HighlightLabel in Passphrase screen#46

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

ovitrif
merged 9 commits into

from

Mar 11, 2025
 Merged


Create and implement HighlightLabel in Passphrase screen
#46
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


9 commits


Select commit
Hold shift + click to select a range
3d2bec2

feat: create HighlightLabel.kt component


jvsena42 Mar 10, 2025
1df7500

refactor: make the HighlightLabel.kt more flexible


jvsena42 Mar 10, 2025
e39ba20

refactor: get orange color from colors


jvsena42 Mar 10, 2025
20e6391

refactor: implement Caption13Up


jvsena42 Mar 10, 2025
6ad5ee4

refactor: remove imports


jvsena42 Mar 10, 2025
911b9aa

feat: implement tag "advanced"


jvsena42 Mar 10, 2025
13eb8f5

fix: tag alignment


jvsena42 Mar 10, 2025
91123d6

fix: image padding


jvsena42 Mar 10, 2025
074f597

refactor: move HighlightLabel.kt to components package


jvsena42 Mar 11, 2025

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


124 changes: 124 additions & 0 deletions
app/src/main/java/to/bitkit/ui/components/HighlightLabel.kt

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,124 @@
package to.bitkit.ui.components


import androidx.compose.foundation.Canvas
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.layout.wrapContentWidth
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.drawBehind
import androidx.compose.ui.geometry.Size
import androidx.compose.ui.graphics.Path
import androidx.compose.ui.platform.LocalDensity
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import to.bitkit.R
import to.bitkit.ui.theme.AppThemeSurface
import to.bitkit.ui.theme.Colors.Brand

val mainRectHeight = 26.dp

@Composable
fun HighlightLabel(
 text: String,
 modifier: Modifier = Modifier,
) {
 val density = LocalDensity.current
 val triangleWidth = 13.dp
 val triangleWidthPx = with(density) { triangleWidth.toPx() }
 val logoHeight = 42.dp
 val mainRectHeightPx = with(density) { mainRectHeight.toPx() }
 val logoHeightPx = with(density) { logoHeight.toPx() }

 Row(
 modifier = modifier.height(logoHeight),
 verticalAlignment = Alignment.Top
 ) {
 // Left triangles
 Canvas(
 modifier = Modifier
 .width(triangleWidth)
 .fillMaxHeight()
 ) {
 // Top left triangle
 drawPath(
 path = Path().apply {
 moveTo(0f, 0f)
 lineTo(triangleWidthPx, triangleWidthPx)
 lineTo(triangleWidthPx, 0f)
 close()
 },
 color = Brand
 )

 // Bottom left triangle
 drawPath(
 path = Path().apply {
 moveTo(0f, mainRectHeightPx)
 lineTo(triangleWidthPx, triangleWidthPx)
 lineTo(triangleWidthPx, mainRectHeightPx)
 close()
 },
 color = Brand
 )
 }

 // Text with background
 Box(
 modifier = Modifier
 .height(mainRectHeight)
 .wrapContentWidth()
 .drawBehind {
 // Main rectangle (flexible width based on text)
 drawRect(
 color = Brand,
 size = Size(this.size.width, this.size.height)
 )

 // Top right triangle (semi-transparent)
 if (this.size.width > 0) {
 drawPath(
 path = Path().apply {
 val startX = this@drawBehind.size.width - triangleWidthPx
 moveTo(startX, this@drawBehind.size.height)
 lineTo(this@drawBehind.size.width, logoHeightPx)
 lineTo(this@drawBehind.size.width, this@drawBehind.size.height)
 close()
 },
 color = Brand.copy(alpha = 0.5f)
 )
 }
 },
 contentAlignment = Alignment.Center
 ) {
 Caption13Up(
 text = text,
 modifier = Modifier.padding(horizontal = 16.dp, vertical = 4.dp)
 )
 }
 }
}

// Usage example
@Preview(showBackground = true)
@Composable
fun FlexibleLogoPreview() {
 AppThemeSurface {
 HighlightLabel(text = stringResource(R.string.onboarding__advanced))
 }
}

@Preview(showBackground = true)
@Composable
fun LongTextLogoPreview() {
 AppThemeSurface {
 HighlightLabel(text = "NOT YOUR KEYS, NOT YOUR COINS")
 }
}

48 changes: 29 additions & 19 deletions
app/src/main/java/to/bitkit/ui/onboarding/CreateWalletWithPassphraseScreen.kt

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -3,12 +3,12 @@ package to.bitkit.ui.onboarding
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.imePadding
import androidx.compose.foundation.layout.offset
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.rememberScrollState
Expand All@@ -17,36 +17,33 @@ import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.foundation.verticalScroll
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.automirrored.filled.ArrowBack
import androidx.compose.material3.Button
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.OutlinedTextField
import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBar
import androidx.compose.material3.TopAppBarDefaults.MediumAppBarCollapsedHeight
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.input.ImeAction
import androidx.compose.ui.text.input.KeyboardCapitalization
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import to.bitkit.R
import to.bitkit.ui.components.BodyM
import to.bitkit.ui.components.Display
import to.bitkit.ui.components.HighlightLabel
import to.bitkit.ui.components.PrimaryButton
import to.bitkit.ui.components.mainRectHeight
import to.bitkit.ui.theme.AppTextFieldDefaults
import to.bitkit.ui.theme.AppThemeSurface
import to.bitkit.ui.theme.Colors
Expand All@@ -63,18 +60,30 @@ fun CreateWalletWithPassphraseScreen(
 Box(
 modifier = Modifier.fillMaxSize(),
 ) {
 TopAppBar(
 title = {},
 navigationIcon = {
 IconButton(onClick = onBackClick) {
 Icon(
 imageVector = Icons.AutoMirrored.Default.ArrowBack,
 contentDescription = stringResource(R.string.common__back),
 modifier = Modifier.size(24.dp)
 )
 }
 },
 )
 Row(
 modifier = Modifier.fillMaxWidth(),
 verticalAlignment = Alignment.Bottom
 ) {
 TopAppBar(
 title = {},
 navigationIcon = {
 IconButton(onClick = onBackClick) {
 Icon(
 imageVector = Icons.AutoMirrored.Default.ArrowBack,
 contentDescription = stringResource(R.string.common__back),
 modifier = Modifier.size(24.dp)
 )
 }
 },
 modifier = Modifier.weight(1f)
 )

 HighlightLabel(
 stringResource(R.string.onboarding__advanced).uppercase(),
 Modifier
 .padding(top = MediumAppBarCollapsedHeight / 2 - (mainRectHeight / 2))
 )
 }
 Column(
 modifier = Modifier
 .align(Alignment.BottomCenter)
Expand All@@ -83,6 +92,7 @@ fun CreateWalletWithPassphraseScreen(
 .imePadding()
 .verticalScroll(rememberScrollState())
 ) {
 Spacer(modifier = Modifier.height(MediumAppBarCollapsedHeight))
 Image(
 painter = painterResource(id = R.drawable.padlock2),
 contentDescription = null,
Expand Down

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links");
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '

Skip to content
Create and implement HighlightLabel in Passphrase screen#46

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

ovitrif
merged 9 commits into

from

Mar 11, 2025
 Merged


Create and implement HighlightLabel in Passphrase screen
#46
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


9 commits


Select commit
Hold shift + click to select a range
3d2bec2

feat: create HighlightLabel.kt component


jvsena42 Mar 10, 2025
1df7500

refactor: make the HighlightLabel.kt more flexible


jvsena42 Mar 10, 2025
e39ba20

refactor: get orange color from colors


jvsena42 Mar 10, 2025
20e6391

refactor: implement Caption13Up


jvsena42 Mar 10, 2025
6ad5ee4

refactor: remove imports


jvsena42 Mar 10, 2025
911b9aa

feat: implement tag "advanced"


jvsena42 Mar 10, 2025
13eb8f5

fix: tag alignment


jvsena42 Mar 10, 2025
91123d6

fix: image padding


jvsena42 Mar 10, 2025
074f597

refactor: move HighlightLabel.kt to components package


jvsena42 Mar 11, 2025

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


124 changes: 124 additions & 0 deletions
app/src/main/java/to/bitkit/ui/components/HighlightLabel.kt

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,124 @@
package to.bitkit.ui.components


import androidx.compose.foundation.Canvas
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.layout.wrapContentWidth
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.drawBehind
import androidx.compose.ui.geometry.Size
import androidx.compose.ui.graphics.Path
import androidx.compose.ui.platform.LocalDensity
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import to.bitkit.R
import to.bitkit.ui.theme.AppThemeSurface
import to.bitkit.ui.theme.Colors.Brand

val mainRectHeight = 26.dp

@Composable
fun HighlightLabel(
 text: String,
 modifier: Modifier = Modifier,
) {
 val density = LocalDensity.current
 val triangleWidth = 13.dp
 val triangleWidthPx = with(density) { triangleWidth.toPx() }
 val logoHeight = 42.dp
 val mainRectHeightPx = with(density) { mainRectHeight.toPx() }
 val logoHeightPx = with(density) { logoHeight.toPx() }

 Row(
 modifier = modifier.height(logoHeight),
 verticalAlignment = Alignment.Top
 ) {
 // Left triangles
 Canvas(
 modifier = Modifier
 .width(triangleWidth)
 .fillMaxHeight()
 ) {
 // Top left triangle
 drawPath(
 path = Path().apply {
 moveTo(0f, 0f)
 lineTo(triangleWidthPx, triangleWidthPx)
 lineTo(triangleWidthPx, 0f)
 close()
 },
 color = Brand
 )

 // Bottom left triangle
 drawPath(
 path = Path().apply {
 moveTo(0f, mainRectHeightPx)
 lineTo(triangleWidthPx, triangleWidthPx)
 lineTo(triangleWidthPx, mainRectHeightPx)
 close()
 },
 color = Brand
 )
 }

 // Text with background
 Box(
 modifier = Modifier
 .height(mainRectHeight)
 .wrapContentWidth()
 .drawBehind {
 // Main rectangle (flexible width based on text)
 drawRect(
 color = Brand,
 size = Size(this.size.width, this.size.height)
 )

 // Top right triangle (semi-transparent)
 if (this.size.width > 0) {
 drawPath(
 path = Path().apply {
 val startX = this@drawBehind.size.width - triangleWidthPx
 moveTo(startX, this@drawBehind.size.height)
 lineTo(this@drawBehind.size.width, logoHeightPx)
 lineTo(this@drawBehind.size.width, this@drawBehind.size.height)
 close()
 },
 color = Brand.copy(alpha = 0.5f)
 )
 }
 },
 contentAlignment = Alignment.Center
 ) {
 Caption13Up(
 text = text,
 modifier = Modifier.padding(horizontal = 16.dp, vertical = 4.dp)
 )
 }
 }
}

// Usage example
@Preview(showBackground = true)
@Composable
fun FlexibleLogoPreview() {
 AppThemeSurface {
 HighlightLabel(text = stringResource(R.string.onboarding__advanced))
 }
}

@Preview(showBackground = true)
@Composable
fun LongTextLogoPreview() {
 AppThemeSurface {
 HighlightLabel(text = "NOT YOUR KEYS, NOT YOUR COINS")
 }
}

48 changes: 29 additions & 19 deletions
app/src/main/java/to/bitkit/ui/onboarding/CreateWalletWithPassphraseScreen.kt

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -3,12 +3,12 @@ package to.bitkit.ui.onboarding
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.imePadding
import androidx.compose.foundation.layout.offset
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.rememberScrollState
Expand All@@ -17,36 +17,33 @@ import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.foundation.verticalScroll
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.automirrored.filled.ArrowBack
import androidx.compose.material3.Button
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.OutlinedTextField
import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBar
import androidx.compose.material3.TopAppBarDefaults.MediumAppBarCollapsedHeight
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.input.ImeAction
import androidx.compose.ui.text.input.KeyboardCapitalization
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import to.bitkit.R
import to.bitkit.ui.components.BodyM
import to.bitkit.ui.components.Display
import to.bitkit.ui.components.HighlightLabel
import to.bitkit.ui.components.PrimaryButton
import to.bitkit.ui.components.mainRectHeight
import to.bitkit.ui.theme.AppTextFieldDefaults
import to.bitkit.ui.theme.AppThemeSurface
import to.bitkit.ui.theme.Colors
Expand All@@ -63,18 +60,30 @@ fun CreateWalletWithPassphraseScreen(
 Box(
 modifier = Modifier.fillMaxSize(),
 ) {
 TopAppBar(
 title = {},
 navigationIcon = {
 IconButton(onClick = onBackClick) {
 Icon(
 imageVector = Icons.AutoMirrored.Default.ArrowBack,
 contentDescription = stringResource(R.string.common__back),
 modifier = Modifier.size(24.dp)
 )
 }
 },
 )
 Row(
 modifier = Modifier.fillMaxWidth(),
 verticalAlignment = Alignment.Bottom
 ) {
 TopAppBar(
 title = {},
 navigationIcon = {
 IconButton(onClick = onBackClick) {
 Icon(
 imageVector = Icons.AutoMirrored.Default.ArrowBack,
 contentDescription = stringResource(R.string.common__back),
 modifier = Modifier.size(24.dp)
 )
 }
 },
 modifier = Modifier.weight(1f)
 )

 HighlightLabel(
 stringResource(R.string.onboarding__advanced).uppercase(),
 Modifier
 .padding(top = MediumAppBarCollapsedHeight / 2 - (mainRectHeight / 2))
 )
 }
 Column(
 modifier = Modifier
 .align(Alignment.BottomCenter)
Expand All@@ -83,6 +92,7 @@ fun CreateWalletWithPassphraseScreen(
 .imePadding()
 .verticalScroll(rememberScrollState())
 ) {
 Spacer(modifier = Modifier.height(MediumAppBarCollapsedHeight))
 Image(
 painter = painterResource(id = R.drawable.padlock2),
 contentDescription = null,
Expand Down

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default");
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
Create and implement HighlightLabel in Passphrase screen#46

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

ovitrif
merged 9 commits into

from

Mar 11, 2025
 Merged


Create and implement HighlightLabel in Passphrase screen
#46
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


9 commits


Select commit
Hold shift + click to select a range
3d2bec2

feat: create HighlightLabel.kt component


jvsena42 Mar 10, 2025
1df7500

refactor: make the HighlightLabel.kt more flexible


jvsena42 Mar 10, 2025
e39ba20

refactor: get orange color from colors


jvsena42 Mar 10, 2025
20e6391

refactor: implement Caption13Up


jvsena42 Mar 10, 2025
6ad5ee4

refactor: remove imports


jvsena42 Mar 10, 2025
911b9aa

feat: implement tag "advanced"


jvsena42 Mar 10, 2025
13eb8f5

fix: tag alignment


jvsena42 Mar 10, 2025
91123d6

fix: image padding


jvsena42 Mar 10, 2025
074f597

refactor: move HighlightLabel.kt to components package


jvsena42 Mar 11, 2025

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


124 changes: 124 additions & 0 deletions
app/src/main/java/to/bitkit/ui/components/HighlightLabel.kt

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,124 @@
package to.bitkit.ui.components


import androidx.compose.foundation.Canvas
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.layout.wrapContentWidth
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.drawBehind
import androidx.compose.ui.geometry.Size
import androidx.compose.ui.graphics.Path
import androidx.compose.ui.platform.LocalDensity
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import to.bitkit.R
import to.bitkit.ui.theme.AppThemeSurface
import to.bitkit.ui.theme.Colors.Brand

val mainRectHeight = 26.dp

@Composable
fun HighlightLabel(
 text: String,
 modifier: Modifier = Modifier,
) {
 val density = LocalDensity.current
 val triangleWidth = 13.dp
 val triangleWidthPx = with(density) { triangleWidth.toPx() }
 val logoHeight = 42.dp
 val mainRectHeightPx = with(density) { mainRectHeight.toPx() }
 val logoHeightPx = with(density) { logoHeight.toPx() }

 Row(
 modifier = modifier.height(logoHeight),
 verticalAlignment = Alignment.Top
 ) {
 // Left triangles
 Canvas(
 modifier = Modifier
 .width(triangleWidth)
 .fillMaxHeight()
 ) {
 // Top left triangle
 drawPath(
 path = Path().apply {
 moveTo(0f, 0f)
 lineTo(triangleWidthPx, triangleWidthPx)
 lineTo(triangleWidthPx, 0f)
 close()
 },
 color = Brand
 )

 // Bottom left triangle
 drawPath(
 path = Path().apply {
 moveTo(0f, mainRectHeightPx)
 lineTo(triangleWidthPx, triangleWidthPx)
 lineTo(triangleWidthPx, mainRectHeightPx)
 close()
 },
 color = Brand
 )
 }

 // Text with background
 Box(
 modifier = Modifier
 .height(mainRectHeight)
 .wrapContentWidth()
 .drawBehind {
 // Main rectangle (flexible width based on text)
 drawRect(
 color = Brand,
 size = Size(this.size.width, this.size.height)
 )

 // Top right triangle (semi-transparent)
 if (this.size.width > 0) {
 drawPath(
 path = Path().apply {
 val startX = this@drawBehind.size.width - triangleWidthPx
 moveTo(startX, this@drawBehind.size.height)
 lineTo(this@drawBehind.size.width, logoHeightPx)
 lineTo(this@drawBehind.size.width, this@drawBehind.size.height)
 close()
 },
 color = Brand.copy(alpha = 0.5f)
 )
 }
 },
 contentAlignment = Alignment.Center
 ) {
 Caption13Up(
 text = text,
 modifier = Modifier.padding(horizontal = 16.dp, vertical = 4.dp)
 )
 }
 }
}

// Usage example
@Preview(showBackground = true)
@Composable
fun FlexibleLogoPreview() {
 AppThemeSurface {
 HighlightLabel(text = stringResource(R.string.onboarding__advanced))
 }
}

@Preview(showBackground = true)
@Composable
fun LongTextLogoPreview() {
 AppThemeSurface {
 HighlightLabel(text = "NOT YOUR KEYS, NOT YOUR COINS")
 }
}

48 changes: 29 additions & 19 deletions
app/src/main/java/to/bitkit/ui/onboarding/CreateWalletWithPassphraseScreen.kt

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -3,12 +3,12 @@ package to.bitkit.ui.onboarding
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.imePadding
import androidx.compose.foundation.layout.offset
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.rememberScrollState
Expand All@@ -17,36 +17,33 @@ import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.foundation.verticalScroll
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.automirrored.filled.ArrowBack
import androidx.compose.material3.Button
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.OutlinedTextField
import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBar
import androidx.compose.material3.TopAppBarDefaults.MediumAppBarCollapsedHeight
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.input.ImeAction
import androidx.compose.ui.text.input.KeyboardCapitalization
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import to.bitkit.R
import to.bitkit.ui.components.BodyM
import to.bitkit.ui.components.Display
import to.bitkit.ui.components.HighlightLabel
import to.bitkit.ui.components.PrimaryButton
import to.bitkit.ui.components.mainRectHeight
import to.bitkit.ui.theme.AppTextFieldDefaults
import to.bitkit.ui.theme.AppThemeSurface
import to.bitkit.ui.theme.Colors
Expand All@@ -63,18 +60,30 @@ fun CreateWalletWithPassphraseScreen(
 Box(
 modifier = Modifier.fillMaxSize(),
 ) {
 TopAppBar(
 title = {},
 navigationIcon = {
 IconButton(onClick = onBackClick) {
 Icon(
 imageVector = Icons.AutoMirrored.Default.ArrowBack,
 contentDescription = stringResource(R.string.common__back),
 modifier = Modifier.size(24.dp)
 )
 }
 },
 )
 Row(
 modifier = Modifier.fillMaxWidth(),
 verticalAlignment = Alignment.Bottom
 ) {
 TopAppBar(
 title = {},
 navigationIcon = {
 IconButton(onClick = onBackClick) {
 Icon(
 imageVector = Icons.AutoMirrored.Default.ArrowBack,
 contentDescription = stringResource(R.string.common__back),
 modifier = Modifier.size(24.dp)
 )
 }
 },
 modifier = Modifier.weight(1f)
 )

 HighlightLabel(
 stringResource(R.string.onboarding__advanced).uppercase(),
 Modifier
 .padding(top = MediumAppBarCollapsedHeight / 2 - (mainRectHeight / 2))
 )
 }
 Column(
 modifier = Modifier
 .align(Alignment.BottomCenter)
Expand All@@ -83,6 +92,7 @@ fun CreateWalletWithPassphraseScreen(
 .imePadding()
 .verticalScroll(rememberScrollState())
 ) {
 Spacer(modifier = Modifier.height(MediumAppBarCollapsedHeight))
 Image(
 painter = painterResource(id = R.drawable.padlock2),
 contentDescription = null,
Expand Down

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers");
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
Create and implement HighlightLabel in Passphrase screen#46

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

ovitrif
merged 9 commits into

from

Mar 11, 2025
 Merged


Create and implement HighlightLabel in Passphrase screen
#46
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


9 commits


Select commit
Hold shift + click to select a range
3d2bec2

feat: create HighlightLabel.kt component


jvsena42 Mar 10, 2025
1df7500

refactor: make the HighlightLabel.kt more flexible


jvsena42 Mar 10, 2025
e39ba20

refactor: get orange color from colors


jvsena42 Mar 10, 2025
20e6391

refactor: implement Caption13Up


jvsena42 Mar 10, 2025
6ad5ee4

refactor: remove imports


jvsena42 Mar 10, 2025
911b9aa

feat: implement tag "advanced"


jvsena42 Mar 10, 2025
13eb8f5

fix: tag alignment


jvsena42 Mar 10, 2025
91123d6

fix: image padding


jvsena42 Mar 10, 2025
074f597

refactor: move HighlightLabel.kt to components package


jvsena42 Mar 11, 2025

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


124 changes: 124 additions & 0 deletions
app/src/main/java/to/bitkit/ui/components/HighlightLabel.kt

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,124 @@
package to.bitkit.ui.components


import androidx.compose.foundation.Canvas
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.layout.wrapContentWidth
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.drawBehind
import androidx.compose.ui.geometry.Size
import androidx.compose.ui.graphics.Path
import androidx.compose.ui.platform.LocalDensity
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import to.bitkit.R
import to.bitkit.ui.theme.AppThemeSurface
import to.bitkit.ui.theme.Colors.Brand

val mainRectHeight = 26.dp

@Composable
fun HighlightLabel(
 text: String,
 modifier: Modifier = Modifier,
) {
 val density = LocalDensity.current
 val triangleWidth = 13.dp
 val triangleWidthPx = with(density) { triangleWidth.toPx() }
 val logoHeight = 42.dp
 val mainRectHeightPx = with(density) { mainRectHeight.toPx() }
 val logoHeightPx = with(density) { logoHeight.toPx() }

 Row(
 modifier = modifier.height(logoHeight),
 verticalAlignment = Alignment.Top
 ) {
 // Left triangles
 Canvas(
 modifier = Modifier
 .width(triangleWidth)
 .fillMaxHeight()
 ) {
 // Top left triangle
 drawPath(
 path = Path().apply {
 moveTo(0f, 0f)
 lineTo(triangleWidthPx, triangleWidthPx)
 lineTo(triangleWidthPx, 0f)
 close()
 },
 color = Brand
 )

 // Bottom left triangle
 drawPath(
 path = Path().apply {
 moveTo(0f, mainRectHeightPx)
 lineTo(triangleWidthPx, triangleWidthPx)
 lineTo(triangleWidthPx, mainRectHeightPx)
 close()
 },
 color = Brand
 )
 }

 // Text with background
 Box(
 modifier = Modifier
 .height(mainRectHeight)
 .wrapContentWidth()
 .drawBehind {
 // Main rectangle (flexible width based on text)
 drawRect(
 color = Brand,
 size = Size(this.size.width, this.size.height)
 )

 // Top right triangle (semi-transparent)
 if (this.size.width > 0) {
 drawPath(
 path = Path().apply {
 val startX = this@drawBehind.size.width - triangleWidthPx
 moveTo(startX, this@drawBehind.size.height)
 lineTo(this@drawBehind.size.width, logoHeightPx)
 lineTo(this@drawBehind.size.width, this@drawBehind.size.height)
 close()
 },
 color = Brand.copy(alpha = 0.5f)
 )
 }
 },
 contentAlignment = Alignment.Center
 ) {
 Caption13Up(
 text = text,
 modifier = Modifier.padding(horizontal = 16.dp, vertical = 4.dp)
 )
 }
 }
}

// Usage example
@Preview(showBackground = true)
@Composable
fun FlexibleLogoPreview() {
 AppThemeSurface {
 HighlightLabel(text = stringResource(R.string.onboarding__advanced))
 }
}

@Preview(showBackground = true)
@Composable
fun LongTextLogoPreview() {
 AppThemeSurface {
 HighlightLabel(text = "NOT YOUR KEYS, NOT YOUR COINS")
 }
}

48 changes: 29 additions & 19 deletions
app/src/main/java/to/bitkit/ui/onboarding/CreateWalletWithPassphraseScreen.kt

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -3,12 +3,12 @@ package to.bitkit.ui.onboarding
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.imePadding
import androidx.compose.foundation.layout.offset
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.rememberScrollState
Expand All@@ -17,36 +17,33 @@ import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.foundation.verticalScroll
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.automirrored.filled.ArrowBack
import androidx.compose.material3.Button
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.OutlinedTextField
import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBar
import androidx.compose.material3.TopAppBarDefaults.MediumAppBarCollapsedHeight
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.input.ImeAction
import androidx.compose.ui.text.input.KeyboardCapitalization
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import to.bitkit.R
import to.bitkit.ui.components.BodyM
import to.bitkit.ui.components.Display
import to.bitkit.ui.components.HighlightLabel
import to.bitkit.ui.components.PrimaryButton
import to.bitkit.ui.components.mainRectHeight
import to.bitkit.ui.theme.AppTextFieldDefaults
import to.bitkit.ui.theme.AppThemeSurface
import to.bitkit.ui.theme.Colors
Expand All@@ -63,18 +60,30 @@ fun CreateWalletWithPassphraseScreen(
 Box(
 modifier = Modifier.fillMaxSize(),
 ) {
 TopAppBar(
 title = {},
 navigationIcon = {
 IconButton(onClick = onBackClick) {
 Icon(
 imageVector = Icons.AutoMirrored.Default.ArrowBack,
 contentDescription = stringResource(R.string.common__back),
 modifier = Modifier.size(24.dp)
 )
 }
 },
 )
 Row(
 modifier = Modifier.fillMaxWidth(),
 verticalAlignment = Alignment.Bottom
 ) {
 TopAppBar(
 title = {},
 navigationIcon = {
 IconButton(onClick = onBackClick) {
 Icon(
 imageVector = Icons.AutoMirrored.Default.ArrowBack,
 contentDescription = stringResource(R.string.common__back),
 modifier = Modifier.size(24.dp)
 )
 }
 },
 modifier = Modifier.weight(1f)
 )

 HighlightLabel(
 stringResource(R.string.onboarding__advanced).uppercase(),
 Modifier
 .padding(top = MediumAppBarCollapsedHeight / 2 - (mainRectHeight / 2))
 )
 }
 Column(
 modifier = Modifier
 .align(Alignment.BottomCenter)
Expand All@@ -83,6 +92,7 @@ fun CreateWalletWithPassphraseScreen(
 .imePadding()
 .verticalScroll(rememberScrollState())
 ) {
 Spacer(modifier = Modifier.height(MediumAppBarCollapsedHeight))
 Image(
 painter = painterResource(id = R.drawable.padlock2),
 contentDescription = null,
Expand Down

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode");
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();

Skip to content
Create and implement HighlightLabel in Passphrase screen#46

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

ovitrif
merged 9 commits into

from

Mar 11, 2025
 Merged


Create and implement HighlightLabel in Passphrase screen
#46
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


9 commits


Select commit
Hold shift + click to select a range
3d2bec2

feat: create HighlightLabel.kt component


jvsena42 Mar 10, 2025
1df7500

refactor: make the HighlightLabel.kt more flexible


jvsena42 Mar 10, 2025
e39ba20

refactor: get orange color from colors


jvsena42 Mar 10, 2025
20e6391

refactor: implement Caption13Up


jvsena42 Mar 10, 2025
6ad5ee4

refactor: remove imports


jvsena42 Mar 10, 2025
911b9aa

feat: implement tag "advanced"


jvsena42 Mar 10, 2025
13eb8f5

fix: tag alignment


jvsena42 Mar 10, 2025
91123d6

fix: image padding


jvsena42 Mar 10, 2025
074f597

refactor: move HighlightLabel.kt to components package


jvsena42 Mar 11, 2025

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


124 changes: 124 additions & 0 deletions
app/src/main/java/to/bitkit/ui/components/HighlightLabel.kt

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,124 @@
package to.bitkit.ui.components


import androidx.compose.foundation.Canvas
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.layout.wrapContentWidth
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.drawBehind
import androidx.compose.ui.geometry.Size
import androidx.compose.ui.graphics.Path
import androidx.compose.ui.platform.LocalDensity
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import to.bitkit.R
import to.bitkit.ui.theme.AppThemeSurface
import to.bitkit.ui.theme.Colors.Brand

val mainRectHeight = 26.dp

@Composable
fun HighlightLabel(
 text: String,
 modifier: Modifier = Modifier,
) {
 val density = LocalDensity.current
 val triangleWidth = 13.dp
 val triangleWidthPx = with(density) { triangleWidth.toPx() }
 val logoHeight = 42.dp
 val mainRectHeightPx = with(density) { mainRectHeight.toPx() }
 val logoHeightPx = with(density) { logoHeight.toPx() }

 Row(
 modifier = modifier.height(logoHeight),
 verticalAlignment = Alignment.Top
 ) {
 // Left triangles
 Canvas(
 modifier = Modifier
 .width(triangleWidth)
 .fillMaxHeight()
 ) {
 // Top left triangle
 drawPath(
 path = Path().apply {
 moveTo(0f, 0f)
 lineTo(triangleWidthPx, triangleWidthPx)
 lineTo(triangleWidthPx, 0f)
 close()
 },
 color = Brand
 )

 // Bottom left triangle
 drawPath(
 path = Path().apply {
 moveTo(0f, mainRectHeightPx)
 lineTo(triangleWidthPx, triangleWidthPx)
 lineTo(triangleWidthPx, mainRectHeightPx)
 close()
 },
 color = Brand
 )
 }

 // Text with background
 Box(
 modifier = Modifier
 .height(mainRectHeight)
 .wrapContentWidth()
 .drawBehind {
 // Main rectangle (flexible width based on text)
 drawRect(
 color = Brand,
 size = Size(this.size.width, this.size.height)
 )

 // Top right triangle (semi-transparent)
 if (this.size.width > 0) {
 drawPath(
 path = Path().apply {
 val startX = this@drawBehind.size.width - triangleWidthPx
 moveTo(startX, this@drawBehind.size.height)
 lineTo(this@drawBehind.size.width, logoHeightPx)
 lineTo(this@drawBehind.size.width, this@drawBehind.size.height)
 close()
 },
 color = Brand.copy(alpha = 0.5f)
 )
 }
 },
 contentAlignment = Alignment.Center
 ) {
 Caption13Up(
 text = text,
 modifier = Modifier.padding(horizontal = 16.dp, vertical = 4.dp)
 )
 }
 }
}

// Usage example
@Preview(showBackground = true)
@Composable
fun FlexibleLogoPreview() {
 AppThemeSurface {
 HighlightLabel(text = stringResource(R.string.onboarding__advanced))
 }
}

@Preview(showBackground = true)
@Composable
fun LongTextLogoPreview() {
 AppThemeSurface {
 HighlightLabel(text = "NOT YOUR KEYS, NOT YOUR COINS")
 }
}

48 changes: 29 additions & 19 deletions
app/src/main/java/to/bitkit/ui/onboarding/CreateWalletWithPassphraseScreen.kt

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -3,12 +3,12 @@ package to.bitkit.ui.onboarding
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.imePadding
import androidx.compose.foundation.layout.offset
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.rememberScrollState
Expand All@@ -17,36 +17,33 @@ import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.foundation.verticalScroll
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.automirrored.filled.ArrowBack
import androidx.compose.material3.Button
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.OutlinedTextField
import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBar
import androidx.compose.material3.TopAppBarDefaults.MediumAppBarCollapsedHeight
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.input.ImeAction
import androidx.compose.ui.text.input.KeyboardCapitalization
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import to.bitkit.R
import to.bitkit.ui.components.BodyM
import to.bitkit.ui.components.Display
import to.bitkit.ui.components.HighlightLabel
import to.bitkit.ui.components.PrimaryButton
import to.bitkit.ui.components.mainRectHeight
import to.bitkit.ui.theme.AppTextFieldDefaults
import to.bitkit.ui.theme.AppThemeSurface
import to.bitkit.ui.theme.Colors
Expand All@@ -63,18 +60,30 @@ fun CreateWalletWithPassphraseScreen(
 Box(
 modifier = Modifier.fillMaxSize(),
 ) {
 TopAppBar(
 title = {},
 navigationIcon = {
 IconButton(onClick = onBackClick) {
 Icon(
 imageVector = Icons.AutoMirrored.Default.ArrowBack,
 contentDescription = stringResource(R.string.common__back),
 modifier = Modifier.size(24.dp)
 )
 }
 },
 )
 Row(
 modifier = Modifier.fillMaxWidth(),
 verticalAlignment = Alignment.Bottom
 ) {
 TopAppBar(
 title = {},
 navigationIcon = {
 IconButton(onClick = onBackClick) {
 Icon(
 imageVector = Icons.AutoMirrored.Default.ArrowBack,
 contentDescription = stringResource(R.string.common__back),
 modifier = Modifier.size(24.dp)
 )
 }
 },
 modifier = Modifier.weight(1f)
 )

 HighlightLabel(
 stringResource(R.string.onboarding__advanced).uppercase(),
 Modifier
 .padding(top = MediumAppBarCollapsedHeight / 2 - (mainRectHeight / 2))
 )
 }
 Column(
 modifier = Modifier
 .align(Alignment.BottomCenter)
Expand All@@ -83,6 +92,7 @@ fun CreateWalletWithPassphraseScreen(
 .imePadding()
 .verticalScroll(rememberScrollState())
 ) {
 Spacer(modifier = Modifier.height(MediumAppBarCollapsedHeight))
 Image(
 painter = painterResource(id = R.drawable.padlock2),
 contentDescription = null,
Expand Down