From f2d0748831cc73db8366fd6770dca62a47cd9793 Mon Sep 17 00:00:00 2001 From: Konstantin Ivanov <54908981+konstantiniiv@users.noreply.github.com> Date: Wed, 19 Apr 2023 17:50:39 +0200 Subject: [PATCH] DROID-1086 Design | Sample app, compose + doc (#3106) --- docs/design_system.md | 26 ++ sample/build.gradle | 17 + .../ComposeButtonsPrimaryFragment.kt | 295 ++++++++++++++++++ .../design_system/DesignSystemActivity.kt | 9 + .../sample/design_system/NavigateFragment.kt | 3 + .../src/main/res/layout/fragment_navigate.xml | 10 + sample/src/main/res/values/styles.xml | 4 +- 7 files changed, 361 insertions(+), 3 deletions(-) create mode 100644 docs/design_system.md create mode 100644 sample/src/main/java/com/anytypeio/anytype/sample/design_system/ComposeButtonsPrimaryFragment.kt diff --git a/docs/design_system.md b/docs/design_system.md new file mode 100644 index 0000000000..11b341d338 --- /dev/null +++ b/docs/design_system.md @@ -0,0 +1,26 @@ +Typography and buttons are separated into individual styles. The project utilizes styles from both XML and Jetpack Compose. + +Typography link: https://www.figma.com/file/vgXV7x2v20vJajc7clYJ7a/Mobile-Design-System?node-id=1587%3A54&t=0D7rA21FfRyKOF1l-1 + +Buttons link: https://www.figma.com/file/vgXV7x2v20vJajc7clYJ7a/Mobile-Design-System?node-id=1588%3A59&t=0D7rA21FfRyKOF1l-1 + +Key points for non-Compose styles: + +Text styles are located in the design_system file (android-anytype/core-ui/src/main/res/values/design_system.xml). +Example: TextView.ContentStyle.Headline.Title + +Button styles are also located in the design_system file. +Example: Button.Primary.Medium + +Custom buttons are defined in the DesignSystemButtons class within the core-ui module. +Example: ButtonPrimaryXSmall + +Key points for Compose styles: + +Typography is found in the TypographyCompose.kt class within the core-ui module. +Example: BodyCalloutMedium + +Composable button templates are also located in the DesignSystemButtons class within the core-ui module. +Example: ButtonPrimary + +All previews can be viewed through the Sample app, DesignSystemActivity. \ No newline at end of file diff --git a/sample/build.gradle b/sample/build.gradle index 8cf7c66589..fd322d27e5 100644 --- a/sample/build.gradle +++ b/sample/build.gradle @@ -40,6 +40,11 @@ android { buildFeatures { viewBinding true + compose true + } + + composeOptions { + kotlinCompilerExtensionVersion libs.versions.androidxComposeVersion1.get() } } @@ -60,6 +65,18 @@ dependencies { implementation libs.design implementation libs.pickT + implementation libs.compose + implementation libs.composeFoundation + implementation libs.composeMaterial + implementation libs.composeToolingPreview + implementation libs.composeAccompanistPager + implementation libs.composeAccompanistThemeAdapter + implementation libs.composeAccompanistPagerIndicators + implementation libs.preference + implementation libs.activityCompose + implementation libs.composeReorderable + debugImplementation libs.composeTooling + //implementation 'com.github.gregcockroft:AndroidMath:ALPHA' testImplementation libs.junit diff --git a/sample/src/main/java/com/anytypeio/anytype/sample/design_system/ComposeButtonsPrimaryFragment.kt b/sample/src/main/java/com/anytypeio/anytype/sample/design_system/ComposeButtonsPrimaryFragment.kt new file mode 100644 index 0000000000..e299c700e2 --- /dev/null +++ b/sample/src/main/java/com/anytypeio/anytype/sample/design_system/ComposeButtonsPrimaryFragment.kt @@ -0,0 +1,295 @@ +package com.anytypeio.anytype.sample.design_system + +import android.os.Bundle +import android.view.LayoutInflater +import android.view.View +import android.view.ViewGroup +import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.fillMaxSize +import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.layout.size +import androidx.compose.foundation.layout.wrapContentHeight +import androidx.compose.foundation.rememberScrollState +import androidx.compose.foundation.verticalScroll +import androidx.compose.material.ExperimentalMaterialApi +import androidx.compose.material.MaterialTheme +import androidx.compose.material.Text +import androidx.compose.runtime.Composable +import androidx.compose.ui.Alignment.Companion.CenterHorizontally +import androidx.compose.ui.ExperimentalComposeUiApi +import androidx.compose.ui.Modifier +import androidx.compose.ui.platform.ComposeView +import androidx.compose.ui.platform.ViewCompositionStrategy +import androidx.compose.ui.res.colorResource +import androidx.compose.ui.tooling.preview.Preview +import androidx.compose.ui.unit.dp +import com.anytypeio.anytype.core_ui.views.ButtonPrimary +import com.anytypeio.anytype.core_ui.views.ButtonPrimaryLarge +import com.anytypeio.anytype.core_ui.views.ButtonPrimaryMedium +import com.anytypeio.anytype.core_ui.views.ButtonPrimarySmall +import com.anytypeio.anytype.core_ui.views.ButtonPrimaryXSmall +import com.anytypeio.anytype.core_ui.views.ButtonSecondary +import com.anytypeio.anytype.core_ui.views.ButtonSecondaryLarge +import com.anytypeio.anytype.core_ui.views.ButtonSecondaryMedium +import com.anytypeio.anytype.core_ui.views.ButtonSecondarySmall +import com.anytypeio.anytype.core_ui.views.ButtonSecondaryXSmall +import com.anytypeio.anytype.core_ui.views.ButtonSize +import com.anytypeio.anytype.core_ui.views.ButtonWarning +import com.anytypeio.anytype.core_ui.views.HeadlineHeading +import com.anytypeio.anytype.core_utils.ui.BaseComposeFragment +import com.anytypeio.anytype.sample.R +import com.google.accompanist.pager.ExperimentalPagerApi +import kotlinx.coroutines.FlowPreview + +class ComposeButtonsPrimaryFragment : BaseComposeFragment() { + + @FlowPreview + @ExperimentalPagerApi + @ExperimentalMaterialApi + @ExperimentalComposeUiApi + override fun onCreateView( + inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle? + ): View { + return ComposeView(requireContext()).apply { + setViewCompositionStrategy(ViewCompositionStrategy.DisposeOnViewTreeLifecycleDestroyed) + setContent { + Box( + modifier = Modifier + .fillMaxSize() + .padding(vertical = 16.dp) + ) { + Column( + modifier = Modifier + .fillMaxWidth() + .verticalScroll(rememberScrollState()) + ) { + Text( + text = "Button.XSmall", + modifier = Modifier.align(CenterHorizontally), + style = HeadlineHeading, + color = colorResource(id = R.color.text_primary) + ) + ButtonPrimary( + onClick = {}, + modifier = Modifier + .wrapContentHeight() + .align(CenterHorizontally), + text = "Button", + size = ButtonSize.XSmall + ) + ButtonPrimary( + onClick = {}, + modifier = Modifier + .wrapContentHeight() + .align(CenterHorizontally), + text = "Button", + enabled = false, + size = ButtonSize.XSmall + ) + ButtonSecondary( + onClick = {}, + modifier = Modifier + .wrapContentHeight() + .align(CenterHorizontally), + text = "Button", + size = ButtonSize.XSmall + ) + ButtonSecondary( + onClick = {}, + modifier = Modifier + .wrapContentHeight() + .align(CenterHorizontally), + text = "Button", + enabled = false, + size = ButtonSize.XSmall + ) + ButtonWarning( + onClick = {}, + modifier = Modifier + .wrapContentHeight() + .align(CenterHorizontally), + text = "Button", + size = ButtonSize.XSmall + ) + Text( + text = "Button.Small", + modifier = Modifier + .align(CenterHorizontally) + .padding(top = 16.dp), + style = HeadlineHeading, + color = colorResource(id = R.color.text_primary) + ) + ButtonPrimary( + onClick = {}, + modifier = Modifier + .wrapContentHeight() + .align(CenterHorizontally), + text = "Button", + size = ButtonSize.Small + ) + ButtonPrimary( + onClick = {}, + modifier = Modifier + .wrapContentHeight() + .align(CenterHorizontally), + text = "Button", + size = ButtonSize.Small, + enabled = false + ) + ButtonSecondary( + onClick = {}, + modifier = Modifier + .wrapContentHeight() + .align(CenterHorizontally), + text = "Button", + size = ButtonSize.Small + ) + ButtonSecondary( + onClick = {}, + modifier = Modifier + .wrapContentHeight() + .align(CenterHorizontally), + text = "Button", + enabled = false, + size = ButtonSize.Small + ) + ButtonWarning( + onClick = {}, + modifier = Modifier + .wrapContentHeight() + .align(CenterHorizontally), + text = "Button", + size = ButtonSize.Small + ) + Text( + text = "Button.Medium", + modifier = Modifier + .align(CenterHorizontally) + .padding(top = 16.dp), + style = HeadlineHeading, + color = colorResource(id = R.color.text_primary) + ) + ButtonPrimary( + onClick = {}, + modifier = Modifier + .wrapContentHeight() + .padding(horizontal = 16.dp, vertical = 8.dp) + .align(CenterHorizontally), + text = "Button", + size = ButtonSize.Medium + ) + ButtonPrimary( + onClick = {}, + modifier = Modifier + .wrapContentHeight() + .padding(horizontal = 16.dp, vertical = 8.dp) + .align(CenterHorizontally), + text = "Button", + size = ButtonSize.Medium, + enabled = false + ) + ButtonSecondary( + onClick = {}, + modifier = Modifier + .wrapContentHeight() + .padding(horizontal = 16.dp, vertical = 8.dp) + .align(CenterHorizontally), + text = "Button", + size = ButtonSize.Medium + ) + ButtonSecondary( + onClick = {}, + modifier = Modifier + .wrapContentHeight() + .padding(horizontal = 16.dp, vertical = 8.dp) + .align(CenterHorizontally), + text = "Button", + enabled = false, + size = ButtonSize.Medium + ) + ButtonWarning( + onClick = {}, + modifier = Modifier + .wrapContentHeight() + .padding(horizontal = 16.dp, vertical = 8.dp) + .align(CenterHorizontally), + text = "Button", + size = ButtonSize.Medium + ) + Text( + text = "Button.Large", + modifier = Modifier + .align(CenterHorizontally) + .padding(top = 16.dp), + style = HeadlineHeading, + color = colorResource(id = R.color.text_primary) + ) + ButtonPrimary( + onClick = {}, + modifier = Modifier + .wrapContentHeight() + .fillMaxWidth() + .padding(horizontal = 16.dp, vertical = 8.dp) + .align(CenterHorizontally), + text = "Button", + size = ButtonSize.Large + ) + ButtonPrimary( + onClick = {}, + modifier = Modifier + .wrapContentHeight() + .fillMaxWidth() + .padding(horizontal = 16.dp, vertical = 8.dp) + .align(CenterHorizontally), + text = "Button", + size = ButtonSize.Large, + enabled = false + ) + ButtonSecondary( + onClick = {}, + modifier = Modifier + .wrapContentHeight() + .fillMaxWidth() + .padding(horizontal = 16.dp, vertical = 8.dp) + .align(CenterHorizontally), + text = "Button", + size = ButtonSize.Large + ) + ButtonSecondary( + onClick = {}, + modifier = Modifier + .wrapContentHeight() + .fillMaxWidth() + .padding(horizontal = 16.dp, vertical = 8.dp) + .align(CenterHorizontally), + text = "Button", + enabled = false, + size = ButtonSize.Large + ) + ButtonWarning( + onClick = {}, + modifier = Modifier + .wrapContentHeight() + .fillMaxWidth() + .padding(horizontal = 16.dp, vertical = 8.dp) + .align(CenterHorizontally), + text = "Button", + size = ButtonSize.Large + ) + } + } + } + } + } + + override fun injectDependencies() {} + override fun releaseDependencies() {} +} + +@Composable +@Preview +fun MyFragment() { + ComposeButtonsPrimaryFragment() +} \ No newline at end of file diff --git a/sample/src/main/java/com/anytypeio/anytype/sample/design_system/DesignSystemActivity.kt b/sample/src/main/java/com/anytypeio/anytype/sample/design_system/DesignSystemActivity.kt index b3a2a40ee8..3714c2d54f 100644 --- a/sample/src/main/java/com/anytypeio/anytype/sample/design_system/DesignSystemActivity.kt +++ b/sample/src/main/java/com/anytypeio/anytype/sample/design_system/DesignSystemActivity.kt @@ -63,6 +63,14 @@ class DesignSystemActivity : AppCompatActivity(), Navigate { .addToBackStack(null) .commit() } + + override fun toButtonsCompose() { + supportFragmentManager + .beginTransaction() + .replace(R.id.root, ComposeButtonsPrimaryFragment()) + .addToBackStack(null) + .commit() + } } interface Navigate { @@ -72,4 +80,5 @@ interface Navigate { fun toButtons() fun toButtonsSecondary() fun toButtonsWarning() + fun toButtonsCompose() } \ No newline at end of file diff --git a/sample/src/main/java/com/anytypeio/anytype/sample/design_system/NavigateFragment.kt b/sample/src/main/java/com/anytypeio/anytype/sample/design_system/NavigateFragment.kt index 3e0ef65ad1..ac4d7118e9 100644 --- a/sample/src/main/java/com/anytypeio/anytype/sample/design_system/NavigateFragment.kt +++ b/sample/src/main/java/com/anytypeio/anytype/sample/design_system/NavigateFragment.kt @@ -31,6 +31,9 @@ class NavigateFragment : Fragment(R.layout.fragment_navigate) { view.findViewById(R.id.button20).setOnClickListener { (activity as Navigate).toButtonsWarning() } + view.findViewById(R.id.btnCompose).setOnClickListener { + (activity as Navigate).toButtonsCompose() + } view.findViewById(R.id.switch3).setOnClickListener { it as Switch if (it.isChecked) { diff --git a/sample/src/main/res/layout/fragment_navigate.xml b/sample/src/main/res/layout/fragment_navigate.xml index c1fad6d374..66b2f339bc 100644 --- a/sample/src/main/res/layout/fragment_navigate.xml +++ b/sample/src/main/res/layout/fragment_navigate.xml @@ -76,4 +76,14 @@ app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@+id/button12" /> + + \ No newline at end of file diff --git a/sample/src/main/res/values/styles.xml b/sample/src/main/res/values/styles.xml index ddd75c7510..5a589ff531 100644 --- a/sample/src/main/res/values/styles.xml +++ b/sample/src/main/res/values/styles.xml @@ -8,10 +8,8 @@ @color/sync_status_red @color/palette_dark_teal @color/orange - @style/DialogTheme - - + normal @style/Button.Primary.XSmall @style/Button.Primary.Small