Skip to content

Commit

Permalink
🐛 Cleanup icons-extension and use local references
Browse files Browse the repository at this point in the history
  • Loading branch information
andretortolano committed Nov 8, 2024
1 parent 94a371b commit 096be8e
Show file tree
Hide file tree
Showing 6 changed files with 165 additions and 25 deletions.
1 change: 0 additions & 1 deletion appcues/build.gradle
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,6 @@ dependencies {
implementation "androidx.navigation:navigation-compose:2.7.3"
implementation "androidx.compose.ui:ui:$compose_version"
implementation "androidx.compose.material:material:$compose_version"
implementation "androidx.compose.material:material-icons-extended:$compose_version"
implementation "androidx.compose.ui:ui-tooling-preview:$compose_version"
debugImplementation "androidx.compose.ui:ui-tooling:$compose_version"
debugImplementation "androidx.compose.ui:ui-test-manifest:$compose_version"
Expand Down
41 changes: 20 additions & 21 deletions appcues/src/main/java/com/appcues/debugger/ui/AppcuesSearchView.kt
Original file line number Diff line number Diff line change
Expand Up @@ -10,24 +10,21 @@ import androidx.compose.foundation.layout.BoxScope
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.text.BasicTextField
import androidx.compose.foundation.text.KeyboardActions
import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.material.Icon
import androidx.compose.material.Text
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Close
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.MutableState
import androidx.compose.runtime.derivedStateOf
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.ExperimentalComposeUiApi
import androidx.compose.ui.Modifier
import androidx.compose.ui.Modifier.Companion
import androidx.compose.ui.draw.clip
import androidx.compose.ui.draw.shadow
import androidx.compose.ui.focus.FocusManager
Expand All @@ -45,10 +42,11 @@ import androidx.compose.ui.text.input.TextFieldValue
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
import com.appcues.R.string
import com.appcues.debugger.ui.icons.Close
import com.appcues.debugger.ui.icons.DebuggerIcons
import com.appcues.debugger.ui.theme.LocalAppcuesTheme
import kotlinx.coroutines.delay

@OptIn(ExperimentalComposeUiApi::class)
@Composable
internal fun AppcuesSearchView(
modifier: Modifier,
Expand All @@ -75,7 +73,10 @@ internal fun AppcuesSearchView(
.border(1.dp, border.value, RoundedCornerShape(cornerDp.value))
.background(LocalAppcuesTheme.current.background)
.height(height)
.clickable(interactionSource = MutableInteractionSource(), indication = null) { focusRequester.requestFocus() },
.clickable(
interactionSource = remember { MutableInteractionSource() },
indication = null,
) { focusRequester.requestFocus() },
) {
val text = remember { mutableStateOf(TextFieldValue(String())) }
val keyboardController = LocalSoftwareKeyboardController.current
Expand Down Expand Up @@ -125,7 +126,6 @@ internal fun AppcuesSearchView(
}
}

@OptIn(ExperimentalComposeUiApi::class)
@Composable
private fun BoxScope.SearchViewOverlay(
isFocusOn: MutableState<Boolean>,
Expand All @@ -136,27 +136,26 @@ private fun BoxScope.SearchViewOverlay(
onClear: () -> Unit,
) {
if (isFocusOn.value) {
val iconModifier = Companion
.align(Alignment.CenterEnd)
.size(height)
.clickable {
onClear()
isFocusOn.value = false
keyboardController?.hide()
focusManager.clearFocus()
}
.padding(8.dp)

Icon(
modifier = iconModifier,
imageVector = Icons.Default.Close,
modifier = Modifier
.align(Alignment.CenterEnd)
.size(height)
.clip(CircleShape)
.clickable {
onClear()
isFocusOn.value = false
keyboardController?.hide()
focusManager.clearFocus()
}
.padding(8.dp),
imageVector = DebuggerIcons.Filled.Close,
contentDescription = LocalContext.current.getString(string.appcues_debugger_font_details_clean_filter),
tint = LocalAppcuesTheme.current.secondary
)
} else {
Text(
text = hint,
modifier = Companion
modifier = Modifier
.align(Alignment.CenterStart)
.padding(start = 12.dp)
)
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,15 +7,15 @@ import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.Icon
import androidx.compose.material.Text
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.outlined.Info
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.appcues.debugger.ui.icons.DebuggerIcons
import com.appcues.debugger.ui.icons.Info
import com.appcues.debugger.ui.theme.LocalAppcuesTheme

@Composable
Expand All @@ -32,7 +32,7 @@ internal fun InfoBox(modifier: Modifier = Modifier, text: String) {
) {
Icon(
modifier = Modifier.padding(start = 8.dp),
imageVector = Icons.Outlined.Info,
imageVector = DebuggerIcons.Outlined.Info,
contentDescription = "Info Box icon",
tint = theme.background
)
Expand Down
31 changes: 31 additions & 0 deletions appcues/src/main/java/com/appcues/debugger/ui/icons/CloseIcon.kt
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
package com.appcues.debugger.ui.icons

import androidx.compose.ui.graphics.vector.ImageVector

private var filled: ImageVector? = null

@Suppress("UnusedReceiverParameter", "MagicNumber")
internal val DebuggerIcons.Filled.Close: ImageVector
get() {
if (filled != null) {
return filled!!
}
filled = debuggerIcon(name = "Filled.Close") {
iconPath {
moveTo(19.0f, 6.41f)
lineTo(17.59f, 5.0f)
lineTo(12.0f, 10.59f)
lineTo(6.41f, 5.0f)
lineTo(5.0f, 6.41f)
lineTo(10.59f, 12.0f)
lineTo(5.0f, 17.59f)
lineTo(6.41f, 19.0f)
lineTo(12.0f, 13.41f)
lineTo(17.59f, 19.0f)
lineTo(19.0f, 17.59f)
lineTo(13.41f, 12.0f)
close()
}
}
return filled!!
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
package com.appcues.debugger.ui.icons

import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.PathFillType
import androidx.compose.ui.graphics.SolidColor
import androidx.compose.ui.graphics.StrokeCap
import androidx.compose.ui.graphics.StrokeJoin
import androidx.compose.ui.graphics.vector.DefaultFillType
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.graphics.vector.PathBuilder
import androidx.compose.ui.graphics.vector.path
import androidx.compose.ui.unit.dp

/**
* Similar solution for icons used in Material-Icons-Extensions library
*/
internal object DebuggerIcons {

object Filled

object Outlined
}

/**
* Utility delegate to construct an Icon with default size information.
* This is used by generated icons, and should not be used manually.
*
* @param name the full name of the generated icon
* @param autoMirror determines if the vector asset should automatically be mirrored for right to
* left locales
* @param block builder lambda to add paths to this vector asset
*/
internal inline fun debuggerIcon(
name: String,
autoMirror: Boolean = false,
block: ImageVector.Builder.() -> ImageVector.Builder
): ImageVector = ImageVector.Builder(
name = name,
defaultWidth = 24.dp,
defaultHeight = 24.dp,
viewportWidth = 24F,
viewportHeight = 24F,
autoMirror = autoMirror
).block().build()

/**
* Adds a vector path to this icon with Material defaults.
*
* @param fillAlpha fill alpha for this path
* @param strokeAlpha stroke alpha for this path
* @param pathFillType [PathFillType] for this path
* @param pathBuilder builder lambda to add commands to this path
*/
internal inline fun ImageVector.Builder.iconPath(
fillAlpha: Float = 1f,
strokeAlpha: Float = 1f,
pathFillType: PathFillType = DefaultFillType,
pathBuilder: PathBuilder.() -> Unit
) =
path(
fill = SolidColor(Color.Black),
fillAlpha = fillAlpha,
stroke = null,
strokeAlpha = strokeAlpha,
strokeLineWidth = 1f,
strokeLineCap = StrokeCap.Butt,
strokeLineJoin = StrokeJoin.Bevel,
strokeLineMiter = 1f,
pathFillType = pathFillType,
pathBuilder = pathBuilder
)
40 changes: 40 additions & 0 deletions appcues/src/main/java/com/appcues/debugger/ui/icons/InfoIcon.kt
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
package com.appcues.debugger.ui.icons

import androidx.compose.ui.graphics.vector.ImageVector

private var outlined: ImageVector? = null

@Suppress("UnusedReceiverParameter", "MagicNumber")
internal val DebuggerIcons.Outlined.Info: ImageVector
get() {
if (outlined != null) {
return outlined!!
}
outlined = debuggerIcon(name = "Outlined.Info") {
iconPath {
moveTo(11.0f, 7.0f)
horizontalLineToRelative(2.0f)
verticalLineToRelative(2.0f)
horizontalLineToRelative(-2.0f)
close()
moveTo(11.0f, 11.0f)
horizontalLineToRelative(2.0f)
verticalLineToRelative(6.0f)
horizontalLineToRelative(-2.0f)
close()
moveTo(12.0f, 2.0f)
curveTo(6.48f, 2.0f, 2.0f, 6.48f, 2.0f, 12.0f)
reflectiveCurveToRelative(4.48f, 10.0f, 10.0f, 10.0f)
reflectiveCurveToRelative(10.0f, -4.48f, 10.0f, -10.0f)
reflectiveCurveTo(17.52f, 2.0f, 12.0f, 2.0f)
close()
moveTo(12.0f, 20.0f)
curveToRelative(-4.41f, 0.0f, -8.0f, -3.59f, -8.0f, -8.0f)
reflectiveCurveToRelative(3.59f, -8.0f, 8.0f, -8.0f)
reflectiveCurveToRelative(8.0f, 3.59f, 8.0f, 8.0f)
reflectiveCurveToRelative(-3.59f, 8.0f, -8.0f, 8.0f)
close()
}
}
return outlined!!
}

0 comments on commit 096be8e

Please sign in to comment.