Benoit Marty
1 year ago
committed by
Benoit Marty
3 changed files with 243 additions and 0 deletions
@ -0,0 +1,82 @@
@@ -0,0 +1,82 @@
|
||||
/* |
||||
* Copyright (c) 2023 New Vector Ltd |
||||
* |
||||
* Licensed under the Apache License, Version 2.0 (the "License"); |
||||
* you may not use this file except in compliance with the License. |
||||
* You may obtain a copy of the License at |
||||
* |
||||
* http://www.apache.org/licenses/LICENSE-2.0 |
||||
* |
||||
* Unless required by applicable law or agreed to in writing, software |
||||
* distributed under the License is distributed on an "AS IS" BASIS, |
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||
* See the License for the specific language governing permissions and |
||||
* limitations under the License. |
||||
*/ |
||||
|
||||
package io.element.android.libraries.designsystem.ruler |
||||
|
||||
import androidx.compose.foundation.background |
||||
import androidx.compose.foundation.layout.Row |
||||
import androidx.compose.foundation.layout.Spacer |
||||
import androidx.compose.foundation.layout.fillMaxWidth |
||||
import androidx.compose.foundation.layout.size |
||||
import androidx.compose.runtime.Composable |
||||
import androidx.compose.ui.Modifier |
||||
import androidx.compose.ui.graphics.Color |
||||
import androidx.compose.ui.tooling.preview.Preview |
||||
import androidx.compose.ui.unit.Dp |
||||
import androidx.compose.ui.unit.dp |
||||
import io.element.android.libraries.designsystem.preview.ElementPreviewDark |
||||
import io.element.android.libraries.designsystem.preview.ElementPreviewLight |
||||
|
||||
/** |
||||
* Horizontal ruler is a debug composable that displays a horizontal ruler. |
||||
* It can be used to display the horizontal ruler in the composable preview. |
||||
*/ |
||||
@Composable |
||||
fun HorizontalRuler( |
||||
modifier: Modifier = Modifier, |
||||
) { |
||||
val baseColor = Color.Magenta |
||||
val alphaBaseColor = baseColor.copy(alpha = 0.2f) |
||||
Row(modifier = modifier.fillMaxWidth()) { |
||||
repeat(50) { |
||||
HorizontalRulerItem(1.dp, alphaBaseColor) |
||||
HorizontalRulerItem(2.dp, baseColor) |
||||
HorizontalRulerItem(1.dp, alphaBaseColor) |
||||
HorizontalRulerItem(2.dp, baseColor) |
||||
HorizontalRulerItem(5.dp, alphaBaseColor) |
||||
HorizontalRulerItem(2.dp, baseColor) |
||||
HorizontalRulerItem(1.dp, alphaBaseColor) |
||||
HorizontalRulerItem(2.dp, baseColor) |
||||
HorizontalRulerItem(1.dp, alphaBaseColor) |
||||
HorizontalRulerItem(10.dp, baseColor) |
||||
} |
||||
} |
||||
} |
||||
|
||||
@Composable |
||||
private fun HorizontalRulerItem(height: Dp, color: Color) { |
||||
Spacer( |
||||
modifier = Modifier |
||||
.size(height = height, width = 1.dp) |
||||
.background(color = color) |
||||
) |
||||
} |
||||
|
||||
@Preview |
||||
@Composable |
||||
internal fun HorizontalRulerLightPreview() = |
||||
ElementPreviewLight { ContentToPreview() } |
||||
|
||||
@Preview |
||||
@Composable |
||||
internal fun HorizontalRulerDarkPreview() = |
||||
ElementPreviewDark { ContentToPreview() } |
||||
|
||||
@Composable |
||||
private fun ContentToPreview() { |
||||
HorizontalRuler() |
||||
} |
||||
|
@ -0,0 +1,81 @@
@@ -0,0 +1,81 @@
|
||||
/* |
||||
* Copyright (c) 2023 New Vector Ltd |
||||
* |
||||
* Licensed under the Apache License, Version 2.0 (the "License"); |
||||
* you may not use this file except in compliance with the License. |
||||
* You may obtain a copy of the License at |
||||
* |
||||
* http://www.apache.org/licenses/LICENSE-2.0 |
||||
* |
||||
* Unless required by applicable law or agreed to in writing, software |
||||
* distributed under the License is distributed on an "AS IS" BASIS, |
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||
* See the License for the specific language governing permissions and |
||||
* limitations under the License. |
||||
*/ |
||||
|
||||
package io.element.android.libraries.designsystem.ruler |
||||
|
||||
import androidx.compose.foundation.background |
||||
import androidx.compose.foundation.layout.Column |
||||
import androidx.compose.foundation.layout.Spacer |
||||
import androidx.compose.foundation.layout.fillMaxHeight |
||||
import androidx.compose.foundation.layout.size |
||||
import androidx.compose.runtime.Composable |
||||
import androidx.compose.ui.Modifier |
||||
import androidx.compose.ui.graphics.Color |
||||
import androidx.compose.ui.tooling.preview.Preview |
||||
import androidx.compose.ui.unit.Dp |
||||
import androidx.compose.ui.unit.dp |
||||
import io.element.android.libraries.designsystem.preview.ElementPreviewDark |
||||
import io.element.android.libraries.designsystem.preview.ElementPreviewLight |
||||
|
||||
/** |
||||
* Vertical ruler is a debug composable that displays a vertical ruler. |
||||
* It can be used to display the vertical ruler in the composable preview. |
||||
*/ |
||||
@Composable |
||||
fun VerticalRuler( |
||||
modifier: Modifier = Modifier, |
||||
) { |
||||
val baseColor = Color.Red |
||||
val alphaBaseColor = baseColor.copy(alpha = 0.2f) |
||||
Column(modifier = modifier.fillMaxHeight()) { |
||||
repeat(50) { |
||||
VerticalRulerItem(1.dp, alphaBaseColor) |
||||
VerticalRulerItem(2.dp, baseColor) |
||||
VerticalRulerItem(1.dp, alphaBaseColor) |
||||
VerticalRulerItem(2.dp, baseColor) |
||||
VerticalRulerItem(5.dp, alphaBaseColor) |
||||
VerticalRulerItem(2.dp, baseColor) |
||||
VerticalRulerItem(1.dp, alphaBaseColor) |
||||
VerticalRulerItem(2.dp, baseColor) |
||||
VerticalRulerItem(1.dp, alphaBaseColor) |
||||
VerticalRulerItem(10.dp, baseColor) |
||||
} |
||||
} |
||||
} |
||||
|
||||
@Composable |
||||
private fun VerticalRulerItem(width: Dp, color: Color) { |
||||
Spacer( |
||||
modifier = Modifier |
||||
.size(height = 1.dp, width = width) |
||||
.background(color = color) |
||||
) |
||||
} |
||||
|
||||
@Preview |
||||
@Composable |
||||
internal fun VerticalRulerLightPreview() = |
||||
ElementPreviewLight { ContentToPreview() } |
||||
|
||||
@Preview |
||||
@Composable |
||||
internal fun VerticalRulerDarkPreview() = |
||||
ElementPreviewDark { ContentToPreview() } |
||||
|
||||
@Composable |
||||
private fun ContentToPreview() { |
||||
VerticalRuler() |
||||
} |
@ -0,0 +1,80 @@
@@ -0,0 +1,80 @@
|
||||
/* |
||||
* Copyright (c) 2023 New Vector Ltd |
||||
* |
||||
* Licensed under the Apache License, Version 2.0 (the "License"); |
||||
* you may not use this file except in compliance with the License. |
||||
* You may obtain a copy of the License at |
||||
* |
||||
* http://www.apache.org/licenses/LICENSE-2.0 |
||||
* |
||||
* Unless required by applicable law or agreed to in writing, software |
||||
* distributed under the License is distributed on an "AS IS" BASIS, |
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||
* See the License for the specific language governing permissions and |
||||
* limitations under the License. |
||||
*/ |
||||
|
||||
package io.element.android.libraries.designsystem.ruler |
||||
|
||||
import androidx.compose.runtime.Composable |
||||
import androidx.compose.ui.layout.Layout |
||||
import androidx.compose.ui.tooling.preview.Preview |
||||
import androidx.compose.ui.unit.Dp |
||||
import androidx.compose.ui.unit.dp |
||||
import io.element.android.libraries.designsystem.preview.ElementPreviewDark |
||||
import io.element.android.libraries.designsystem.preview.ElementPreviewLight |
||||
import io.element.android.libraries.designsystem.theme.components.OutlinedButton |
||||
import io.element.android.libraries.designsystem.theme.components.Text |
||||
|
||||
/** |
||||
* Debug tool to add a vertical and a horizontal ruler on top of the content. |
||||
*/ |
||||
@Composable |
||||
fun WithRulers( |
||||
xRulersOffset: Dp = 0.dp, |
||||
yRulersOffset: Dp = 0.dp, |
||||
content: @Composable () -> Unit |
||||
) { |
||||
Layout( |
||||
content = { |
||||
content() |
||||
VerticalRuler() |
||||
HorizontalRuler() |
||||
}, |
||||
measurePolicy = { measurables, constraints -> |
||||
val placeables = measurables.map { it.measure(constraints) } |
||||
// Use layout size of the first item (the content) |
||||
layout( |
||||
width = placeables.first().width, |
||||
height = placeables.first().height |
||||
) { |
||||
placeables.forEachIndexed { index, placeable -> |
||||
if (index == 0) { |
||||
placeable.place(0, 0) |
||||
} else { |
||||
placeable.place(xRulersOffset.roundToPx(), yRulersOffset.roundToPx()) |
||||
} |
||||
} |
||||
} |
||||
} |
||||
) |
||||
} |
||||
|
||||
@Preview |
||||
@Composable |
||||
internal fun WithRulerLightPreview() = |
||||
ElementPreviewLight { ContentToPreview() } |
||||
|
||||
@Preview |
||||
@Composable |
||||
internal fun WithRulerDarkPreview() = |
||||
ElementPreviewDark { ContentToPreview() } |
||||
|
||||
@Composable |
||||
private fun ContentToPreview() { |
||||
WithRulers(xRulersOffset = 20.dp, yRulersOffset = 15.dp) { |
||||
OutlinedButton(onClick = {}) { |
||||
Text(text = "A Button with rulers on it!") |
||||
} |
||||
} |
||||
} |
Loading…
Reference in new issue