anyproto/anytype-kotlin
1
0
Fork 0
mirror of https://github.com/anyproto/anytype-kotlin.git synced 2025-06-07 21:37:02 +09:00
Code Activity

DROID-1086 Design | Sample app, compose + doc (#3106)

Browse source
This commit is contained in:
Konstantin Ivanov 2023-04-19 17:50:39 +02:00 • committed by GitHub
parent 06665ecda9
commit f2d0748831
Signed by: github
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 361 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

26
docs/design_system.md Normal file
View file

@ -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.

17
sample/build.gradle
View file

@ -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

295
sample/src/main/java/com/anytypeio/anytype/sample/design_system/ComposeButtonsPrimaryFragment.kt Normal file
View file

@ -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()
}

9
sample/src/main/java/com/anytypeio/anytype/sample/design_system/DesignSystemActivity.kt
View file

@ -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()
}

3
sample/src/main/java/com/anytypeio/anytype/sample/design_system/NavigateFragment.kt
View file

@ -31,6 +31,9 @@ class NavigateFragment : Fragment(R.layout.fragment_navigate) {
view.findViewById<TextView>(R.id.button20).setOnClickListener {
(activity as Navigate).toButtonsWarning()
}
view.findViewById<TextView>(R.id.btnCompose).setOnClickListener {
(activity as Navigate).toButtonsCompose()
}
view.findViewById<Switch>(R.id.switch3).setOnClickListener {
it as Switch
if (it.isChecked) {

10
sample/src/main/res/layout/fragment_navigate.xml
View file

@ -76,4 +76,14 @@
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/button12" />
<com.anytypeio.anytype.core_ui.views.ButtonPrimaryMedium
android:id="@+id/btnCompose"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="32dp"
android:text="Buttons Compose"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/button20" />
</androidx.constraintlayout.widget.ConstraintLayout>

4
sample/src/main/res/values/styles.xml
View file

@ -8,10 +8,8 @@
<item name="colorPrimary">@color/sync_status_red</item>
<item name="colorPrimaryDark">@color/palette_dark_teal</item>
<item name="colorAccent">@color/orange</item>
<!-- <item name="android:dialogTheme">@style/AppBottomSheetDialogTheme</item>-->
<item name="alertDialogTheme">@style/DialogTheme</item>
<!-- <item name="android:alertDialogTheme">?alertDialogTheme</item>-->
<!-- <item name="dialogTheme">?alertDialogTheme</item>-->
<item name="android:textStyle">normal</item>
<item name="primaryXSmallButtonStyle">@style/Button.Primary.XSmall</item>
<item name="primarySmallButtonStyle">@style/Button.Primary.Small</item>