Benoit Marty
1 year ago
committed by
Benoit Marty
3 changed files with 243 additions and 0 deletions
@ -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 @@ |
|||||||
|
/* |
||||||
|
* 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 @@ |
|||||||
|
/* |
||||||
|
* 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