Directional icons should be mirrored in right to left languages (#999)

This commit is contained in:
David Perez 2024-02-12 15:50:46 -06:00 committed by Álison Fernandes
parent b434feed0b
commit ad31994ab7
4 changed files with 29 additions and 2 deletions

View file

@ -9,9 +9,12 @@ import androidx.compose.runtime.Stable
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.drawBehind
import androidx.compose.ui.draw.drawWithCache
import androidx.compose.ui.draw.scale
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.LocalLayoutDirection
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.LayoutDirection
import androidx.compose.ui.unit.dp
import com.x8bit.bitwarden.data.platform.annotation.OmitFromCoverage
@ -69,3 +72,18 @@ fun Modifier.bottomDivider(
}
}
}
/**
* This is a [Modifier] extension for mirroring the contents of a composable when the layout
* direction is set to [LayoutDirection.Rtl]. Primarily used for directional icons, such as the
* up button and chevrons.
*/
@OmitFromCoverage
@Stable
@Composable
fun Modifier.mirrorIfRtl(): Modifier =
if (LocalLayoutDirection.current == LayoutDirection.Rtl) {
scale(scaleX = -1f, scaleY = 1f)
} else {
this
}

View file

@ -20,6 +20,7 @@ import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.x8bit.bitwarden.R
import com.x8bit.bitwarden.ui.platform.base.util.bottomDivider
import com.x8bit.bitwarden.ui.platform.base.util.mirrorIfRtl
import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme
/**
@ -86,7 +87,9 @@ fun BitwardenGroupItem(
painter = painterResource(id = R.drawable.ic_navigate_next),
contentDescription = null,
tint = MaterialTheme.colorScheme.onSurfaceVariant,
modifier = Modifier.size(24.dp),
modifier = Modifier
.mirrorIfRtl()
.size(24.dp),
)
}
}

View file

@ -11,12 +11,14 @@ import androidx.compose.material3.TopAppBarDefaults
import androidx.compose.material3.TopAppBarScrollBehavior
import androidx.compose.material3.rememberTopAppBarState
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.painter.Painter
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.tooling.preview.Preview
import com.x8bit.bitwarden.R
import com.x8bit.bitwarden.ui.platform.base.util.mirrorIfRtl
import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme
/**
@ -83,6 +85,7 @@ fun BitwardenTopAppBar(
onClick = it.onNavigationIconClick,
) {
Icon(
modifier = Modifier.mirrorIfRtl(),
painter = it.navigationIcon,
contentDescription = it.navigationIconContentDescription,
)

View file

@ -33,6 +33,7 @@ import com.x8bit.bitwarden.R
import com.x8bit.bitwarden.ui.platform.base.util.EventsEffect
import com.x8bit.bitwarden.ui.platform.base.util.Text
import com.x8bit.bitwarden.ui.platform.base.util.bottomDivider
import com.x8bit.bitwarden.ui.platform.base.util.mirrorIfRtl
import com.x8bit.bitwarden.ui.platform.components.BitwardenMediumTopAppBar
import com.x8bit.bitwarden.ui.platform.components.BitwardenScaffold
import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme
@ -127,7 +128,9 @@ private fun SettingsRow(
painter = painterResource(id = R.drawable.ic_navigate_next),
contentDescription = null,
tint = MaterialTheme.colorScheme.onSurface,
modifier = Modifier.size(24.dp),
modifier = Modifier
.mirrorIfRtl()
.size(24.dp),
)
}
}