Skip to content

Commit

Permalink
DROID-1589 Templates | Design | Template preview design, fixes (anypr…
Browse files Browse the repository at this point in the history 
…oto#358)
  • Loading branch information
@konstantiniiv
konstantiniiv committed Sep 8, 2023
1 parent 3d36222 commit 955fcc4
Show file tree
Hide file tree
Showing 3 changed files with 110 additions and 63 deletions.
8 changes: 8 additions & 0 deletions core-ui/src/main/java/com/anytypeio/anytype/core_ui/views/TypographyCompose.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -177,6 +177,14 @@ val CodeBlock = TextStyle(
letterSpacing = (-0.016).em
)

val TitleInter15 = TextStyle(
fontFamily = fontInterRegular,
fontWeight = FontWeight.W600,
fontSize = 15.sp,
lineHeight = 20.sp,
letterSpacing = (-0.02).em
)

//UX/Title 1/Semibold
val Title1 = TextStyle(
fontFamily = fontInterSemibold,
Expand Down
162 changes: 100 additions & 62 deletions core-ui/src/main/java/com/anytypeio/anytype/core_ui/widgets/ObjectTypeTemplatesWidget.kt
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
package com.anytypeio.anytype.core_ui.widgets

import android.widget.Space
import androidx.annotation.ColorRes
import androidx.compose.animation.AnimatedVisibility
import androidx.compose.animation.core.tween
Expand All @@ -26,6 +27,7 @@ import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.layout.wrapContentHeight
import androidx.compose.foundation.layout.wrapContentSize
import androidx.compose.foundation.layout.wrapContentWidth
import androidx.compose.foundation.lazy.LazyListState
import androidx.compose.foundation.lazy.LazyRow
Expand Down Expand Up @@ -72,9 +74,12 @@ import com.anytypeio.anytype.core_models.ObjectType
import com.anytypeio.anytype.core_ui.R
import com.anytypeio.anytype.core_ui.foundation.noRippleClickable
import com.anytypeio.anytype.core_ui.views.BodyCalloutRegular
import com.anytypeio.anytype.core_ui.views.Caption1Medium
import com.anytypeio.anytype.core_ui.views.Caption2Semibold
import com.anytypeio.anytype.core_ui.views.Title1
import com.anytypeio.anytype.core_ui.views.TitleInter15
import com.anytypeio.anytype.emojifier.Emojifier
import com.anytypeio.anytype.presentation.editor.cover.CoverColor
import com.anytypeio.anytype.presentation.editor.cover.CoverGradient
import com.anytypeio.anytype.presentation.templates.TemplateMenuClick
import com.anytypeio.anytype.presentation.templates.TemplateView
Expand Down Expand Up @@ -147,22 +152,19 @@ fun ObjectTypeTemplatesWidget(
enter = slideInVertically { it },
exit = slideOutVertically(tween(200)) { it },
modifier = Modifier
.swipeable(
state = swipeableState,
.swipeable(state = swipeableState,
orientation = Orientation.Vertical,
anchors = mapOf(
0f to DragStates.VISIBLE,
sizePx to DragStates.DISMISSED
0f to DragStates.VISIBLE, sizePx to DragStates.DISMISSED
),
thresholds = { _, _ -> FractionalThreshold(0.3f) }
)
thresholds = { _, _ -> FractionalThreshold(0.3f) })
.offset { IntOffset(0, swipeableState.offset.value.roundToInt()) }
) {
Box(
modifier = Modifier
.fillMaxWidth()
.height(312.dp)
.padding(start = 8.dp, end = 8.dp, bottom = 31.dp)
.wrapContentHeight()
.padding(start = 8.dp, end = 8.dp, bottom = 15.dp)
.background(
color = colorResource(id = R.color.background_secondary),
shape = RoundedCornerShape(size = 16.dp)
Expand All @@ -172,7 +174,7 @@ fun ObjectTypeTemplatesWidget(
modifier = Modifier
.fillMaxWidth()
.wrapContentHeight()
.padding(bottom = 24.dp)
.padding(bottom = 20.dp, top = 8.dp)
) {
Box(
modifier = Modifier
Expand All @@ -187,10 +189,7 @@ fun ObjectTypeTemplatesWidget(
Text(
modifier = Modifier
.padding(
start = 15.dp,
top = 12.dp,
bottom = 12.dp,
end = 16.dp
start = 15.dp, top = 12.dp, bottom = 12.dp, end = 16.dp
)
.noRippleClickable { doneClick() },
text = stringResource(id = R.string.done),
Expand Down Expand Up @@ -234,6 +233,14 @@ fun ObjectTypeTemplatesWidget(
// }
}
val itemsScroll = rememberLazyListState()
Spacer(modifier = Modifier.height(26.dp))
Text(
modifier = Modifier.padding(start = 20.dp),
text = stringResource(id = R.string.templates),
style = Caption1Medium,
color = colorResource(id = R.color.text_secondary)
)
Spacer(modifier = Modifier.height(8.dp))
TemplatesList(
state = currentState,
moreClick = { template, intOffset ->
Expand Down Expand Up @@ -353,11 +360,10 @@ private fun TemplatesList(
LazyRow(
state = scrollState,
modifier = Modifier
.padding(top = 8.dp)
.height(224.dp)
.wrapContentHeight()
.fillMaxWidth(),
contentPadding = PaddingValues(start = 16.dp, end = 16.dp),
horizontalArrangement = Arrangement.spacedBy(16.dp)
contentPadding = PaddingValues(start = 20.dp, end = 20.dp),
horizontalArrangement = Arrangement.spacedBy(5.dp)
)
{
itemsIndexed(
Expand All @@ -366,8 +372,9 @@ private fun TemplatesList(
Box(
modifier =
Modifier
.height(231.dp)
.width(127.dp)
.height(232.dp)
.width(127.dp),
contentAlignment = Alignment.BottomStart
) {
val borderWidth: Dp
val borderColor: Color
Expand All @@ -380,7 +387,6 @@ private fun TemplatesList(
}
Box(
modifier = Modifier
.padding(top = 7.dp, end = 7.dp)
.border(
width = borderWidth,
color = borderColor,
Expand Down Expand Up @@ -452,14 +458,10 @@ private fun TemplateItemContent(item: TemplateView) {
} else {
Spacer(modifier = Modifier.height(6.dp))
}
if (item.layout == ObjectType.Layout.PROFILE) {
TemplateItemTitle(
text = item.name,
textAlign = TextAlign.Center,
)
} else {
TemplateItemTitle(text = item.name)
}
TemplateItemTitle(
text = item.name,
textAlign = getProperTextAlign(item.layout)
)
}
} else {
if (item.layout == ObjectType.Layout.TODO) {
Expand All @@ -471,36 +473,37 @@ private fun TemplateItemContent(item: TemplateView) {
Box(
modifier = Modifier
.wrapContentWidth()
.height(60.dp)
.height(68.dp)
.padding(top = 28.dp)
.align(Alignment.CenterHorizontally)
) {
val modifier = Modifier
.size(32.dp)
.clip(CircleShape)
val modifier = Modifier.clip(CircleShape)
TemplateItemIconOrImage(item = item, modifier = modifier)
}
Spacer(modifier = Modifier.height(6.dp))
TemplateItemTitle(
text = item.name,
textAlign = TextAlign.Center
textAlign = getProperTextAlign(item.layout)
)
} else {
val modifier = Modifier
.width(48.dp)
.height(60.dp)
.padding(start = 16.dp, top = 28.dp)
.clip(RoundedCornerShape(3.dp))
.padding(start = 14.dp, top = 26.dp)
TemplateItemIconOrImage(item = item, modifier = modifier)
TemplateItemTitle(text = item.name)
Spacer(modifier = Modifier.height(8.dp))
TemplateItemTitle(
text = item.name, textAlign = getProperTextAlign(item.layout)
)
}
} else {
Spacer(modifier = Modifier.height(28.dp))
TemplateItemTitle(text = item.name)
TemplateItemTitle(
text = item.name,
textAlign = getProperTextAlign(item.layout)
)
}
}
}
Spacer(modifier = Modifier.height(12.dp))
Spacer(modifier = Modifier.height(8.dp))
TemplateItemRectangles()
}

Expand All @@ -527,28 +530,46 @@ private fun TemplateItemIconOrImage(
modifier: Modifier = Modifier
) {
item.image?.let {
Image(
painter = rememberAsyncImagePainter(
model = it,
error = painterResource(id = R.drawable.ic_home_widget_space)
),
contentDescription = "Custom image template's icon",
modifier = modifier,
contentScale = ContentScale.Crop
)
}
item.emoji?.let {
Box(
modifier = modifier
.clip(RoundedCornerShape(8.dp))
.wrapContentSize()
.border(
width = 2.dp,
color = colorResource(id = R.color.background_primary),
shape = RoundedCornerShape(2.dp)
)
.clip(RoundedCornerShape(2.dp))
.background(
color = colorResource(id = R.color.shape_tertiary)
)
) {
Image(
painter = rememberAsyncImagePainter(
model = it,
error = painterResource(id = R.drawable.ic_home_widget_space)
),
contentDescription = "Custom image template's icon",
modifier = Modifier
.size(40.dp)
.align(Alignment.Center),
contentScale = ContentScale.Crop
)
}
}
item.emoji?.let {
Box(
modifier = modifier
.wrapContentSize()
.border(
width = 2.dp,
color = colorResource(id = R.color.background_primary),
shape = RoundedCornerShape(8.dp)
)
.clip(RoundedCornerShape(8.dp))
.background(
color = colorResource(id = R.color.shape_tertiary)
)
.padding(8.dp)
) {
Image(
painter = rememberAsyncImagePainter(
Expand All @@ -557,7 +578,7 @@ private fun TemplateItemIconOrImage(
),
contentDescription = "Emoji template's icon",
modifier = Modifier
.size(20.dp)
.size(24.dp)
.align(Alignment.Center),
contentScale = ContentScale.Crop
)
Expand Down Expand Up @@ -586,7 +607,6 @@ private fun TemplateItemCoverAndIcon(item: TemplateView.Template) {
.align(Alignment.TopCenter)
) {
val modifier = Modifier
.size(32.dp)
.clip(CircleShape)
.align(Alignment.Center)
TemplateItemIconOrImage(item = item, modifier = modifier)
Expand All @@ -595,9 +615,7 @@ private fun TemplateItemCoverAndIcon(item: TemplateView.Template) {

else -> {
val modifier = Modifier
.width(48.dp)
.height(82.dp)
.padding(start = 16.dp, top = 50.dp)
.padding(start = 14.dp, top = 44.dp)
TemplateItemIconOrImage(item = item, modifier = modifier)
}
}
Expand Down Expand Up @@ -688,12 +706,14 @@ private fun TemplateItemCoverGradient(item: TemplateView.Template) {
@Composable
private fun TemplateItemTitle(text: String, textAlign: TextAlign = TextAlign.Start) {
Text(
modifier = Modifier.padding(
start = 16.dp,
end = 16.dp
),
modifier = Modifier
.fillMaxWidth()
.padding(
start = 16.dp,
end = 16.dp
),
text = text.ifBlank { stringResource(id = R.string.untitled) },
style = Caption2Semibold.copy(
style = TitleInter15.copy(
color = colorResource(id = R.color.text_primary)
),
maxLines = 2,
Expand Down Expand Up @@ -729,6 +749,17 @@ private fun TemplateItemTodoTitle(text: String) {
@Composable
private fun TemplateItemRectangles() {
Column {
Box(
modifier = Modifier
.padding(start = 16.dp)
.width(24.dp)
.height(4.dp)
.background(
color = colorResource(id = R.color.shape_secondary),
shape = RoundedCornerShape(size = 1.dp)
)
)
Spacer(modifier = Modifier.height(12.dp))
Box(
modifier = Modifier
.fillMaxWidth()
Expand Down Expand Up @@ -764,6 +795,13 @@ private fun TemplateItemRectangles() {
}
}

private fun getProperTextAlign(layout: ObjectType.Layout): TextAlign {
return when (layout) {
ObjectType.Layout.PROFILE -> TextAlign.Center
else -> TextAlign.Start
}
}

enum class DragStates {
VISIBLE,
DISMISSED
Expand Down
3 changes: 2 additions & 1 deletion core-ui/src/main/res/values/strings.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -449,6 +449,7 @@
<string name="name_is_required">Name is required</string>
<string name="favourite">Favorite</string>
<string name="template">Template</string>
<string name="templates">Templates</string>
<string name="lock">Lock</string>
<string name="unlock">Unlock</string>
<string name="restore">Restore</string>
Expand Down Expand Up @@ -646,7 +647,7 @@
<string name="menu_type_open_set">Open set of %1$s</string>
<string name="menu_type_create_set">Create set of %1$s</string>
<string name="toast_active_view_delete">Current view cannot be deleted</string>
<string name="type_templates_widget_title">Select template</string>
<string name="type_templates_widget_title">Create object</string>
<string name="blank">Blank</string>

<string name="templates_menu_default_for_view">Default for this view</string>
Expand Down

0 comments on commit 955fcc4

Please sign in to comment.