-
Notifications
You must be signed in to change notification settings - Fork 34
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
💄 Implementing a reusable window decoration bar (#83)
- Loading branch information
1 parent
9cc39b8
commit e495fb4
Showing
9 changed files
with
211 additions
and
37 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
19 changes: 19 additions & 0 deletions
19
composeApp/src/commonMain/kotlin/com/clipevery/ui/AboutUI.kt
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,19 @@ | ||
| package com.clipevery.ui | ||
|
|
||
| import androidx.compose.foundation.layout.Column | ||
| import androidx.compose.foundation.layout.fillMaxSize | ||
| import androidx.compose.runtime.Composable | ||
| import androidx.compose.runtime.MutableState | ||
| import androidx.compose.ui.Modifier | ||
| import com.clipevery.PageType | ||
|
|
||
| @Composable | ||
| fun AboutUI(currentPage: MutableState<PageType>) { | ||
| WindowDecoration(currentPage, "About") | ||
| AboutContentUI() | ||
| } | ||
|
|
||
| @Composable | ||
| fun AboutContentUI() { | ||
| Column(modifier = Modifier.fillMaxSize()) { } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
19 changes: 19 additions & 0 deletions
19
composeApp/src/commonMain/kotlin/com/clipevery/ui/SettingsUI.kt
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,19 @@ | ||
| package com.clipevery.ui | ||
|
|
||
| import androidx.compose.foundation.layout.Column | ||
| import androidx.compose.foundation.layout.fillMaxSize | ||
| import androidx.compose.runtime.Composable | ||
| import androidx.compose.runtime.MutableState | ||
| import androidx.compose.ui.Modifier | ||
| import com.clipevery.PageType | ||
|
|
||
| @Composable | ||
| fun SettingsUI(currentPage: MutableState<PageType>) { | ||
| WindowDecoration(currentPage, "Settings") | ||
| SettingsContentUI() | ||
| } | ||
|
|
||
| @Composable | ||
| fun SettingsContentUI() { | ||
| Column(modifier = Modifier.fillMaxSize()) { } | ||
| } |
106 changes: 106 additions & 0 deletions
106
composeApp/src/commonMain/kotlin/com/clipevery/ui/WindowDecoration.kt
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,106 @@ | ||
| package com.clipevery.ui | ||
|
|
||
| import androidx.compose.foundation.background | ||
| import androidx.compose.foundation.clickable | ||
| import androidx.compose.foundation.layout.Arrangement | ||
| import androidx.compose.foundation.layout.Box | ||
| import androidx.compose.foundation.layout.Column | ||
| import androidx.compose.foundation.layout.Row | ||
| import androidx.compose.foundation.layout.fillMaxWidth | ||
| import androidx.compose.foundation.layout.height | ||
| import androidx.compose.foundation.layout.offset | ||
| import androidx.compose.foundation.layout.padding | ||
| import androidx.compose.foundation.layout.wrapContentWidth | ||
| import androidx.compose.foundation.shape.RoundedCornerShape | ||
| import androidx.compose.material.MaterialTheme | ||
| import androidx.compose.material.Surface | ||
| import androidx.compose.material.Text | ||
| import androidx.compose.runtime.Composable | ||
| import androidx.compose.runtime.MutableState | ||
| import androidx.compose.ui.Alignment | ||
| import androidx.compose.ui.Modifier | ||
| import androidx.compose.ui.graphics.Brush | ||
| import androidx.compose.ui.graphics.Color | ||
| import androidx.compose.ui.text.TextStyle | ||
| import androidx.compose.ui.text.font.FontFamily | ||
| import androidx.compose.ui.text.font.FontWeight | ||
| import androidx.compose.ui.text.platform.Font | ||
| import androidx.compose.ui.unit.dp | ||
| import androidx.compose.ui.unit.sp | ||
| import com.clipevery.LocalKoinApplication | ||
| import com.clipevery.PageType | ||
| import com.clipevery.i18n.GlobalCopywriter | ||
|
|
||
| @Composable | ||
| fun WindowDecoration(currentPage: MutableState<PageType>, title: String) { | ||
| Surface( | ||
| modifier = Modifier | ||
| .fillMaxWidth() | ||
| .height(62.dp), | ||
| color = MaterialTheme.colors.background, | ||
| shape = RoundedCornerShape( | ||
| topStart = 10.dp, | ||
| topEnd = 10.dp, | ||
| bottomEnd = 0.dp, | ||
| bottomStart = 0.dp | ||
| ) | ||
| ) { | ||
| DecorationUI(currentPage, title) | ||
| } | ||
| } | ||
|
|
||
| @Composable | ||
| fun DecorationUI(currentPage: MutableState<PageType>, title: String) { | ||
| val current = LocalKoinApplication.current | ||
| val copywriter = current.koin.get<GlobalCopywriter>() | ||
|
|
||
| val customFontFamily = FontFamily( | ||
| Font(resource = "font/BebasNeue.otf", FontWeight.Normal) | ||
| ) | ||
|
|
||
| Box( | ||
| modifier = Modifier.background(Color.Black) | ||
| .background( | ||
| brush = Brush.verticalGradient( | ||
| colors = listOf( | ||
| Color.White.copy(alpha = 0.6f), | ||
| Color.Transparent | ||
| ), | ||
| startY = 0.0f, | ||
| endY = 3.0f | ||
| ) | ||
| ), | ||
| ) { | ||
| Row(modifier = Modifier.align(Alignment.CenterStart) | ||
| .wrapContentWidth(), | ||
| horizontalArrangement = Arrangement.Center) { | ||
| Column(Modifier.weight(0.5f) | ||
| .align(Alignment.CenterVertically) | ||
| .offset(y = 2.dp), | ||
| horizontalAlignment = Alignment.CenterHorizontally) { | ||
| Text( | ||
| modifier = Modifier.padding(16.dp) | ||
| .align(Alignment.Start) | ||
| .clickable { currentPage.value = PageType.HOME }, | ||
| text = "‹ ${copywriter.getText("Return")}", | ||
| color = Color(0xFF70b0f3), | ||
| fontWeight = FontWeight.Light | ||
| ) | ||
| } | ||
| Column(Modifier.weight(0.5f) | ||
| .align(Alignment.CenterVertically), | ||
| horizontalAlignment = Alignment.CenterHorizontally) { | ||
| Text( | ||
| modifier = Modifier.padding(16.dp) | ||
| .align(Alignment.End), | ||
| text = copywriter.getText(title), | ||
| color = Color.White, | ||
| fontSize = 25.sp, | ||
| style = TextStyle(fontWeight = FontWeight.Bold), | ||
| fontFamily = customFontFamily | ||
| ) | ||
| } | ||
|
|
||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -6,4 +6,5 @@ Check_for_updates=Check for updates | |
| Settings=Settings | ||
| About=About | ||
| FQA=FQA↗ | ||
| Quit=Quit | ||
| Quit=Quit | ||
| Return=Return | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -6,4 +6,5 @@ Check_for_updates=更新を確認 | |
| Settings=設定 | ||
| About=情報 | ||
| FQA=よくある問題↗ | ||
| Quit=終了 | ||
| Quit=終了 | ||
| Return=戻る | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -6,4 +6,5 @@ Check_for_updates=检查更新 | |
| Settings=设置 | ||
| About=关于 | ||
| FQA=常见问题↗ | ||
| Quit=退出 | ||
| Quit=退出 | ||
| Return=返回 | ||