mobile/android/fenix/app/src/main/java/org/mozilla/fenix/compose/Divider.kt

   1 /* This Source Code Form is subject to the terms of the Mozilla Public
   2  * License, v. 2.0. If a copy of the MPL was not distributed with this
   3  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
   4
   5 package org.mozilla.fenix.compose
   6
   7 import androidx.compose.foundation.background
   8 import androidx.compose.foundation.layout.Box
   9 import androidx.compose.foundation.layout.Column
  10 import androidx.compose.foundation.layout.Row
  11 import androidx.compose.foundation.layout.fillMaxHeight
  12 import androidx.compose.foundation.layout.height
  13 import androidx.compose.foundation.layout.padding
  14 import androidx.compose.foundation.layout.width
  15 import androidx.compose.material.Text
  16 import androidx.compose.runtime.Composable
  17 import androidx.compose.ui.Modifier
  18 import androidx.compose.ui.graphics.Color
  19 import androidx.compose.ui.unit.dp
  20 import org.mozilla.fenix.compose.annotation.LightDarkPreview
  21 import org.mozilla.fenix.theme.FirefoxTheme
  22
  23 /**
  24  * Generic divider.
  25  *
  26  * @param modifier [Modifier] used to be applied to the layout of the divider.
  27  * @param color [Color] of the divider line.
  28  */
  29 @Composable
  30 fun Divider(
  31     modifier: Modifier = Modifier,
  32     color: Color = FirefoxTheme.colors.borderPrimary,
  33 ) {
  34     androidx.compose.material.Divider(
  35         modifier = modifier,
  36         color = color,
  37     )
  38 }
  39
  40 /**
  41  * An example of a vertical divider.
  42  */
  43 @Composable
  44 @LightDarkPreview
  45 private fun VerticalDividerPreview() {
  46     FirefoxTheme {
  47         Box(
  48             Modifier
  49                 .background(FirefoxTheme.colors.layer1)
  50                 .height(75.dp),
  51         ) {
  52             Row {
  53                 Text(
  54                     text = "Before the line",
  55                     modifier = Modifier.padding(end = 10.dp),
  56                 )
  57
  58                 Divider(
  59                     modifier = Modifier
  60                         .fillMaxHeight()
  61                         .width(0.5.dp)
  62                         .padding(vertical = 10.dp),
  63                 )
  64
  65                 Text(
  66                     text = "After the line",
  67                     modifier = Modifier.padding(start = 10.dp),
  68                 )
  69             }
  70         }
  71     }
  72 }
  73
  74 /**
  75  * An example of divider usage in a list menu.
  76  */
  77 @Composable
  78 @LightDarkPreview
  79 private fun HorizontalDividerPreview() {
  80     FirefoxTheme {
  81         Box(
  82             Modifier
  83                 .background(FirefoxTheme.colors.layer1)
  84                 .width(100.dp)
  85                 .height(175.dp),
  86         ) {
  87             Column(Modifier.padding(start = 4.dp)) {
  88                 Text(text = "New")
  89
  90                 Text(text = "Open")
  91
  92                 Text(text = "Open Recent")
  93
  94                 Divider(modifier = Modifier.padding(vertical = 10.dp, horizontal = 24.dp))
  95
  96                 Text(text = "Close")
  97
  98                 Text(text = "Save")
  99
 100                 Text(text = "Save as")
 101
 102                 Text(text = "Rename")
 103
 104                 Divider(modifier = Modifier.padding(vertical = 10.dp, horizontal = 24.dp))
 105             }
 106         }
 107     }
 108 }