Use Compose calculator UI

2021-12-12 21:10:08 +01:00 · 2021-12-12 21:10:08 +01:00 · 733491ceda
commit 733491ceda
parent c9539b915e
4 changed files with 104 additions and 143 deletions
--- a/ui/src/main/java/de/mm20/launcher2/ui/legacy/component/CalculatorView.kt
+++ b/ui/src/main/java/de/mm20/launcher2/ui/legacy/component/CalculatorView.kt
@ -6,12 +6,21 @@ import android.view.LayoutInflater
 import android.view.View
 import android.widget.FrameLayout
 import androidx.appcompat.app.AppCompatActivity
+import androidx.compose.foundation.layout.Column
+import androidx.compose.material3.LocalContentColor
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.runtime.CompositionLocalProvider
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.livedata.observeAsState
 import androidx.lifecycle.LiveData
 import androidx.lifecycle.Observer
 import de.mm20.launcher2.ui.R
 import de.mm20.launcher2.calculator.CalculatorViewModel
 import de.mm20.launcher2.search.data.Calculator
+import de.mm20.launcher2.ui.LegacyLauncherTheme
 import de.mm20.launcher2.ui.databinding.ViewCalculatorBinding
+import de.mm20.launcher2.ui.search.CalculatorItem
+import de.mm20.launcher2.ui.search.UnitConverterItem
 import org.koin.androidx.viewmodel.ext.android.viewModel
 import kotlin.math.round

@ -32,45 +41,23 @@ class CalculatorView : FrameLayout {
            if (it == null) visibility = View.GONE
            else {
                visibility = View.VISIBLE
-                bind(it)
            }
        })
-    }

-
-    private fun bind(calc: Calculator) {
-
-        binding.calculatorTerm.text = beautifyTerm(calc.term)
-        binding.calculatorSolution.text = context.getString(R.string.calculator_solution, calc.formattedString)
-        if (calc.solution == round(calc.solution) && calc.term.matches(Regex("[0-9]+"))) {
-            val binHexOct = StringBuilder()
-            binHexOct.append(calc.formattedBinaryString).append("\n")
-                    .append(calc.formattedOctString).append("\n")
-                    .append(calc.formattedHexString)
-            binding.calculatorSolutionHexBinOct.text = binHexOct.toString()
-            binding.calculatorSolutionHexBinOct.visibility = View.VISIBLE
-            binding.calculatorLabelHexBinOct.visibility = View.VISIBLE
-        } else {
-            binding.calculatorSolutionHexBinOct.visibility = GONE
-            binding.calculatorLabelHexBinOct.visibility = GONE
+        binding.composeView.setContent {
+            val converter by calculator.observeAsState()
+            LegacyLauncherTheme {
+                // TODO: Temporary solution until parent widget card is rewritten in Compose
+                CompositionLocalProvider(LocalContentColor provides MaterialTheme.colorScheme.onSurface) {
+                    Column {
+                        converter?.let {
+                            CalculatorItem(
+                                calculator = it,
+                            )
+                        }
+                    }
+                }
+            }
        }
    }
-
-    private fun beautifyTerm(term: String): String {
-        return term.replace(Regex("\\s+"), "")
-                .replace("pi", " \u03C0 ", ignoreCase = true)
-                .replace("*", " \u00D7 ")
-                .replace("-", " \u2212 ")
-                .replace("/", " \u2215 ")
-                .replace("+", " + ")
-                .replace(Regex("&{1,2}"), " \u2227 ")
-                .replace(Regex("\\|{1,2}"), " \u2228 ")
-                .replace("!=", " \u2260 ")
-                .replace("<>", " \u2260 ")
-                .replace(">=", " \u2265 ")
-                .replace("<=", " \u2264 ")
-                .replace("=", " = ")
-                .replace("<", " < ")
-                .replace(">", " > ")
-    }
 }
--- a/ui/src/main/java/de/mm20/launcher2/ui/search/CalculatorItem.kt
+++ b/ui/src/main/java/de/mm20/launcher2/ui/search/CalculatorItem.kt
@ -3,71 +3,57 @@ package de.mm20.launcher2.ui.search
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.lazy.LazyListScope
-import androidx.compose.material.Card
 import androidx.compose.material.ContentAlpha
 import androidx.compose.material.LocalContentAlpha
 import androidx.compose.material3.*
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.CompositionLocalProvider
-import androidx.compose.runtime.getValue
-import androidx.compose.runtime.livedata.observeAsState
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.text.font.FontFamily
 import androidx.compose.ui.unit.dp
-import androidx.lifecycle.viewmodel.compose.viewModel
-import de.mm20.launcher2.calculator.CalculatorViewModel
-import de.mm20.launcher2.ui.component.SectionDivider
-import org.koin.androidx.compose.getViewModel
+import de.mm20.launcher2.search.data.Calculator

@Composable
-fun calculatorItem(): LazyListScope.() -> Unit {
-    val viewModel: CalculatorViewModel = getViewModel()
-    val calculator by viewModel.calculator.observeAsState()
-    return {
-        calculator?.let {
-            item {
-                Card(
-                    elevation = 0.dp
-                ) {
-                    Column(
-                        modifier = Modifier
-                            .padding(16.dp)
-                            .fillMaxWidth()
-                    ) {
+fun CalculatorItem(
+    calculator: Calculator
+) {
+    Column(
+        modifier = Modifier
+            .padding(16.dp)
+            .fillMaxWidth()
+    ) {

-                        CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.medium) {
-                            Text(it.getBeatifiedTerm())
-                        }
-                        Text(
-                            text = "= ${it.formattedString}",
-                            style = MaterialTheme.typography.titleLarge,
-                            modifier = Modifier.align(Alignment.End),
-                        )
-                        if (it.term.matches(Regex("(0x|0b)?[0-9]+"))) {
-                            Text(
-                                it.formattedBinaryString,
-                                fontFamily = FontFamily.Monospace,
-                                modifier = Modifier
-                                    .align(Alignment.End)
-                                    .padding(top = 8.dp),
-                            )
-                            Text(
-                                it.formattedHexString,
-                                fontFamily = FontFamily.Monospace,
-                                modifier = Modifier.align(Alignment.End),
-                            )
-                            Text(
-                                it.formattedOctString,
-                                fontFamily = FontFamily.Monospace,
-                                modifier = Modifier.align(Alignment.End),
-                            )
-                        }
-                    }
-                }
-            }
-            SectionDivider()
+        CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.medium) {
+            Text(
+                text = calculator.getBeatifiedTerm(),
+                style = MaterialTheme.typography.labelLarge,
+                color = MaterialTheme.colorScheme.secondary
+            )
+        }
+        Text(
+            text = "= ${calculator.formattedString}",
+            style = MaterialTheme.typography.titleLarge,
+            modifier = Modifier.align(Alignment.End),
+        )
+        if (calculator.term.matches(Regex("(0x|0b)?[0-9]+"))) {
+            Text(
+                calculator.formattedBinaryString,
+                style = MaterialTheme.typography.bodyMedium.copy(fontFamily =  FontFamily.Monospace),
+                modifier = Modifier
+                    .align(Alignment.End)
+                    .padding(top = 8.dp),
+            )
+            Text(
+                calculator.formattedHexString,
+                style = MaterialTheme.typography.bodyMedium.copy(fontFamily =  FontFamily.Monospace),
+                modifier = Modifier.align(Alignment.End),
+            )
+            Text(
+                calculator.formattedOctString,
+                style = MaterialTheme.typography.bodyMedium.copy(fontFamily =  FontFamily.Monospace),
+                modifier = Modifier.align(Alignment.End),
+            )
        }
    }
 }
--- a/ui/src/main/java/de/mm20/launcher2/ui/search/CalculatorResults.kt
+++ b/ui/src/main/java/de/mm20/launcher2/ui/search/CalculatorResults.kt
@ -0,0 +1,40 @@
+package de.mm20.launcher2.ui.search
+
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.lazy.LazyListScope
+import androidx.compose.material.Card
+import androidx.compose.material.ContentAlpha
+import androidx.compose.material.LocalContentAlpha
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.CompositionLocalProvider
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.livedata.observeAsState
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.text.font.FontFamily
+import androidx.compose.ui.unit.dp
+import de.mm20.launcher2.calculator.CalculatorViewModel
+import de.mm20.launcher2.ui.component.SectionDivider
+import org.koin.androidx.compose.getViewModel
+
+@Composable
+fun calculatorItem(): LazyListScope.() -> Unit {
+    val viewModel: CalculatorViewModel = getViewModel()
+    val calculator by viewModel.calculator.observeAsState()
+    return {
+        calculator?.let {
+            item {
+                Card(
+                    elevation = 0.dp
+                ) {
+                    CalculatorItem(it)
+                }
+            }
+            SectionDivider()
+        }
+    }
+}
--- a/ui/src/main/res/layout/view_calculator.xml
+++ b/ui/src/main/res/layout/view_calculator.xml
@ -10,60 +10,8 @@
    android:clipToPadding="false"
    android:elevation="@dimen/card_elevation">

-    <androidx.constraintlayout.widget.ConstraintLayout
+    <androidx.compose.ui.platform.ComposeView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
-        android:layout_margin="16dp"
-        android:animateLayoutChanges="true"
-        android:orientation="vertical">
-
-        <TextView
-            android:id="@+id/calculatorTerm"
-            android:layout_width="match_parent"
-            android:layout_height="wrap_content"
-            android:textAppearance="?textAppearanceLabelLarge"
-            android:textColor="?colorSecondary"
-            app:layout_constraintEnd_toEndOf="parent"
-            app:layout_constraintStart_toStartOf="parent"
-            app:layout_constraintTop_toTopOf="parent"
-            tools:text="3 + 4" />
-
-        <TextView
-            android:id="@+id/calculatorSolution"
-            android:layout_width="match_parent"
-            android:layout_height="wrap_content"
-            android:gravity="end"
-            android:textAppearance="?textAppearanceTitleLarge"
-            app:layout_constraintEnd_toEndOf="parent"
-            app:layout_constraintStart_toStartOf="parent"
-            app:layout_constraintTop_toBottomOf="@+id/calculatorTerm"
-            tools:text="= 7" />
-
-        <TextView
-            android:id="@+id/calculatorSolutionHexBinOct"
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            android:layout_gravity="start"
-            android:layout_marginStart="8dp"
-            android:gravity="start"
-            android:visibility="gone"
-            tools:visibility="visible"
-            android:textAppearance="?textAppearanceBodySmall"
-            app:layout_constraintStart_toEndOf="@+id/calculatorLabelHexBinOct"
-            app:layout_constraintTop_toTopOf="@+id/calculatorLabelHexBinOct"
-            tools:text="0111\n007\n07" />
-
-        <TextView
-            android:id="@+id/calculatorLabelHexBinOct"
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            android:layout_gravity="start"
-            android:gravity="start"
-            android:text="@string/calculator_bin_oct_hex_label"
-            android:visibility="gone"
-            tools:visibility="visible"
-            android:textAppearance="?textAppearanceBodySmall"
-            app:layout_constraintStart_toStartOf="parent"
-            app:layout_constraintTop_toBottomOf="@+id/calculatorSolution" />
-    </androidx.constraintlayout.widget.ConstraintLayout>
+        android:id="@+id/composeView"/>
 </de.mm20.launcher2.ui.legacy.view.LauncherCardView>