Skip to content

Commit

Permalink
Merge pull request #3 from Konyaco/dev
Browse files Browse the repository at this point in the history 
dev3
  • Loading branch information
@Konyaco
Konyaco authored Dec 31, 2022
2 parents 3571bd3 + 5407037 commit 5119166
Show file tree
Hide file tree
Showing 3,981 changed files with 262,877 additions and 200 deletions.
The diff you're trying to view is too large. We only load the first 3000 changed files.
4 changes: 2 additions & 2 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@

> This library is experimental, any API (even the package name) would be changed in the future without any notification.
Current version: `v0.0.1-dev2`
Current version: `v0.0.1-dev3`

Now supported:

Expand Down Expand Up @@ -41,7 +41,7 @@ About the API usage, just see `Main.kt`

This library is under Apache-2.0 license.

The copyright to the icon assets (in `/resources/icon/`) belongs to Microsoft.
The copyright of the icon assets (in `com.konyaco.fluent.icons` package) belongs to Microsoft.

## TODO

Expand Down
286 changes: 170 additions & 116 deletions example/src/jvmMain/kotlin/com/konyaco/fluent/example/Main.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,8 @@ import com.konyaco.fluent.background.Layer
import com.konyaco.fluent.background.Mica
import com.konyaco.fluent.component.*
import com.konyaco.fluent.darkColors
import com.konyaco.fluent.icons.Icons
import com.konyaco.fluent.icons.regular.*
import com.konyaco.fluent.lightColors

fun main() = application {
Expand All @@ -36,11 +38,12 @@ fun main() = application {
private fun App() {
val systemDarkMode = isSystemInDarkTheme()
var darkMode by remember(systemDarkMode) { mutableStateOf(systemDarkMode) }
var displayDialog by remember { mutableStateOf(false) }

FluentTheme(colors = if (darkMode) darkColors() else lightColors()) {
Mica(Modifier.fillMaxSize().verticalScroll(rememberScrollState()).horizontalScroll(rememberScrollState())) {
val density = LocalDensity.current
var scale by remember { mutableStateOf(density.density) }
var scale by remember(density) { mutableStateOf(density.density) }

Layer(
modifier = Modifier.padding(start = 32.dp, top = 16.dp, end = 16.dp, bottom = 16.dp)
Expand All @@ -49,128 +52,179 @@ private fun App() {
border = BorderStroke(1.dp, FluentTheme.colors.stroke.control.default),
cornerRadius = 8.dp
) {
Column(Modifier.padding(16.dp), verticalArrangement = Arrangement.spacedBy(8.dp)) {
Row(
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.spacedBy(8.dp)
) {
Text("Scale: %.2f".format(scale))
Button(onClick = { scale = density.density }) { Text("Reset") }
Switcher(darkMode, text = "Dark Mode", onCheckStateChange = { darkMode = it })
}
Slider(
modifier = Modifier.width(200.dp),
value = scale,
onValueChange = { scale = it },
valueRange = 1f..10f
)
Column(Modifier.padding(16.dp), Arrangement.spacedBy(8.dp)) {
Controller(scale, { scale = it }, darkMode, { darkMode = it })

CompositionLocalProvider(LocalDensity provides Density(scale)) {
var sliderValue by remember { mutableStateOf(0.5f) }
Slider(
modifier = Modifier.width(200.dp),
value = sliderValue,
onValueChange = { sliderValue = it },
)
var text by remember { mutableStateOf("Hello World") }
Row {
val onClick = { text = "Hello, Fluent Design!" }
Button(onClick) { Text(text) }
Spacer(Modifier.width(8.dp))
AccentButton(onClick) {
Icon(
modifier = Modifier.size(12.dp),
painter = rememberResourcePainter("icon/AcceptMedium.svg"),
contentDescription = null
)
Text(text)
}
Spacer(Modifier.width(8.dp))
}
var checked by remember { mutableStateOf(false) }
Switcher(checked, text = null, onCheckStateChange = { checked = it })

var checked2 by remember { mutableStateOf(true) }
Switcher(checked2, text = "With Label", onCheckStateChange = { checked2 = it })

var checked3 by remember { mutableStateOf(true) }
Switcher(
checked3,
text = "Before Label",
textBefore = true,
onCheckStateChange = { checked3 = it }
)

var checked4 by remember { mutableStateOf(false) }
CheckBox(checked4) { checked4 = it }

var checked5 by remember { mutableStateOf(true) }
CheckBox(checked5, label = "With Label") { checked5 = it }

var selectedRadio by remember { mutableStateOf(0) }
RadioButton(selectedRadio == 0, onClick = { selectedRadio = 0 })
RadioButton(selectedRadio == 1, onClick = { selectedRadio = 1 }, label = "With Label")

Row {
Layer(
modifier = Modifier.size(32.dp),
shape = RoundedCornerShape(4.dp),
cornerRadius = 4.dp,
color = FluentTheme.colors.fillAccent.default,
border = BorderStroke(1.dp, FluentTheme.colors.stroke.control.default),
content = {},
outsideBorder = false
)
Layer(
modifier = Modifier.size(32.dp),
shape = RoundedCornerShape(4.dp),
cornerRadius = 4.dp,
color = FluentTheme.colors.fillAccent.default,
border = BorderStroke(1.dp, FluentTheme.colors.stroke.control.default),
content = {},
outsideBorder = true
)
}

var value by remember { mutableStateOf(TextFieldValue("")) }
TextField(value, onValueChange = { value = it })
TextField(value, onValueChange = { value = it }, enabled = false)

// ProgressRings
Row(
horizontalArrangement = Arrangement.spacedBy(32.dp),
verticalAlignment = Alignment.CenterVertically
) {
ProgressRing(size = ProgressRingSize.Medium)
ProgressRing(progress = sliderValue)
AccentButton(onClick = {}) {
ProgressRing(size = ProgressRingSize.Small, color = LocalContentColor.current)
Text("Small")
}
}

ProgressBar(sliderValue)
ProgressBar()
Content()
}

var displayDialog by remember { mutableStateOf(false) }
AccentButton(onClick = {
displayDialog = true
}) { Text("Display Dialog") }

Dialog(
title = "This is a example dialog",
visible = displayDialog,
cancelButtonText = "Cancel",
confirmButtonText = "Confirm",
onCancel = {
displayDialog = false
},
onConfirm = {
displayDialog = false
}
)
}
Dialog(
title = "This is a example dialog",
visible = displayDialog,
cancelButtonText = "Cancel",
confirmButtonText = "Confirm",
onCancel = {
displayDialog = false
},
onConfirm = {
displayDialog = false
}
)
}
}
}
}
}

@Composable
private fun Controller(
scale: Float,
onScaleChange: (Float) -> Unit,
darkMode: Boolean,
onDarkModeChange: (Boolean) -> Unit
) {
Row(
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.spacedBy(8.dp)
) {
Text("Scale: %.2f".format(scale))
val density = LocalDensity.current
Button(onClick = { onScaleChange(density.density) }) { Text("Reset") }
Switcher(darkMode, text = "Dark Mode", onCheckStateChange = { onDarkModeChange(it) })
}
Slider(
modifier = Modifier.width(200.dp),
value = scale,
onValueChange = { onScaleChange(it) },
valueRange = 1f..10f
)
}

@Composable
private fun Content() {

var sliderValue by remember { mutableStateOf(0.5f) }
Slider(
modifier = Modifier.width(200.dp),
value = sliderValue,
onValueChange = { sliderValue = it },
)
Buttons()

Controls()

Row {
Layer(
modifier = Modifier.size(32.dp),
shape = RoundedCornerShape(4.dp),
cornerRadius = 4.dp,
color = FluentTheme.colors.fillAccent.default,
border = BorderStroke(1.dp, FluentTheme.colors.stroke.control.default),
content = {},
outsideBorder = false
)
Layer(
modifier = Modifier.size(32.dp),
shape = RoundedCornerShape(4.dp),
cornerRadius = 4.dp,
color = FluentTheme.colors.fillAccent.default,
border = BorderStroke(1.dp, FluentTheme.colors.stroke.control.default),
content = {},
outsideBorder = true
)
}

var value by remember { mutableStateOf(TextFieldValue("Hello Fluent!")) }
TextField(value, onValueChange = { value = it })
TextField(
value = value, onValueChange = { value = it }, enabled = false,
header = { Text("With Header") }
)

// ProgressRings
Row(
horizontalArrangement = Arrangement.spacedBy(32.dp),
verticalAlignment = Alignment.CenterVertically
) {
ProgressRing(size = ProgressRingSize.Medium)
ProgressRing(progress = sliderValue)
AccentButton(onClick = {}) {
ProgressRing(size = ProgressRingSize.Small, color = LocalContentColor.current)
Text("Small")
}
}

ProgressBar(sliderValue)
ProgressBar()

Row(horizontalArrangement = Arrangement.spacedBy(8.dp)) {
for (imageVector in icons) {
Icon(
modifier = Modifier.size(18.dp),
imageVector = imageVector, contentDescription = null
)
}
}
}

@Composable
private fun Controls() {
var checked by remember { mutableStateOf(false) }
Switcher(checked, text = null, onCheckStateChange = { checked = it })

var checked2 by remember { mutableStateOf(true) }
Switcher(checked2, text = "With Label", onCheckStateChange = { checked2 = it })

var checked3 by remember { mutableStateOf(true) }
Switcher(
checked3,
text = "Before Label",
textBefore = true,
onCheckStateChange = { checked3 = it }
)

var checked4 by remember { mutableStateOf(false) }
CheckBox(checked4) { checked4 = it }

var checked5 by remember { mutableStateOf(true) }
CheckBox(checked5, label = "With Label") { checked5 = it }

var selectedRadio by remember { mutableStateOf(0) }
RadioButton(selectedRadio == 0, onClick = { selectedRadio = 0 })
RadioButton(selectedRadio == 1, onClick = { selectedRadio = 1 }, label = "With Label")
}

@Composable
private fun Buttons() {
var text by remember { mutableStateOf("Hello World") }
Row(horizontalArrangement = Arrangement.spacedBy(8.dp)) {
val onClick = { text = "Hello, Fluent Design!" }
Button(onClick) { Text(text) }

AccentButton(onClick) {
Icon(
modifier = Modifier.size(16.dp),
imageVector = Icons.Default.Checkmark,
contentDescription = null
)
Text(text)
}

SubtleButton(onClick) {
Text("Text Button")
}
}
}

private val icons = arrayOf(
Icons.Default.Add,
Icons.Default.Delete,
Icons.Default.Dismiss,
Icons.Default.ArrowLeft,
Icons.Default.Navigation,
Icons.Default.List
)
24 changes: 24 additions & 0 deletions fluent-icons-core/build.gradle.kts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
plugins {
kotlin("multiplatform")
id("org.jetbrains.compose")
}

group = "com.konyaco.fluent"
version = "0.0.1-dev3"

kotlin {
jvm {
compilations.all {
kotlinOptions.jvmTarget = "11"
}
withJava()
}
sourceSets {
val jvmMain by getting {
dependencies {
implementation(compose.desktop.currentOs)
}
}
val jvmTest by getting
}
}
Loading

0 comments on commit 5119166

Please sign in to comment.