Use Compose calculator UI

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)
             }
         })
-    }
 
-
+        binding.composeView.setContent {
-    private fun bind(calc: Calculator) {
+            val converter by calculator.observeAsState()
-
+            LegacyLauncherTheme {
-        binding.calculatorTerm.text = beautifyTerm(calc.term)
+                // TODO: Temporary solution until parent widget card is rewritten in Compose
-        binding.calculatorSolution.text = context.getString(R.string.calculator_solution, calc.formattedString)
+                CompositionLocalProvider(LocalContentColor provides MaterialTheme.colorScheme.onSurface) {
-        if (calc.solution == round(calc.solution) && calc.term.matches(Regex("[0-9]+"))) {
+                    Column {
-            val binHexOct = StringBuilder()
+                        converter?.let {
-            binHexOct.append(calc.formattedBinaryString).append("\n")
+                            CalculatorItem(
-                    .append(calc.formattedOctString).append("\n")
+                                calculator = it,
-                    .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
         }
     }
-
-    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(">", " > ")
-    }
 }

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.search.data.Calculator
-import de.mm20.launcher2.calculator.CalculatorViewModel
-import de.mm20.launcher2.ui.component.SectionDivider
-import org.koin.androidx.compose.getViewModel
 
 @Composable
-fun calculatorItem(): LazyListScope.() -> Unit {
+fun CalculatorItem(
-    val viewModel: CalculatorViewModel = getViewModel()
+    calculator: Calculator
-    val calculator by viewModel.calculator.observeAsState()
+) {
-    return {
+    Column(
-        calculator?.let {
+        modifier = Modifier
-            item {
+            .padding(16.dp)
-                Card(
+            .fillMaxWidth()
-                    elevation = 0.dp
+    ) {
-                ) {
-                    Column(
-                        modifier = Modifier
-                            .padding(16.dp)
-                            .fillMaxWidth()
-                    ) {
 
-                        CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.medium) {
+        CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.medium) {
-                            Text(it.getBeatifiedTerm())
+            Text(
-                        }
+                text = calculator.getBeatifiedTerm(),
-                        Text(
+                style = MaterialTheme.typography.labelLarge,
-                            text = "= ${it.formattedString}",
+                color = MaterialTheme.colorScheme.secondary
-                            style = MaterialTheme.typography.titleLarge,
+            )
-                            modifier = Modifier.align(Alignment.End),
+        }
-                        )
+        Text(
-                        if (it.term.matches(Regex("(0x|0b)?[0-9]+"))) {
+            text = "= ${calculator.formattedString}",
-                            Text(
+            style = MaterialTheme.typography.titleLarge,
-                                it.formattedBinaryString,
+            modifier = Modifier.align(Alignment.End),
-                                fontFamily = FontFamily.Monospace,
+        )
-                                modifier = Modifier
+        if (calculator.term.matches(Regex("(0x|0b)?[0-9]+"))) {
-                                    .align(Alignment.End)
+            Text(
-                                    .padding(top = 8.dp),
+                calculator.formattedBinaryString,
-                            )
+                style = MaterialTheme.typography.bodyMedium.copy(fontFamily =  FontFamily.Monospace),
-                            Text(
+                modifier = Modifier
-                                it.formattedHexString,
+                    .align(Alignment.End)
-                                fontFamily = FontFamily.Monospace,
+                    .padding(top = 8.dp),
-                                modifier = Modifier.align(Alignment.End),
+            )
-                            )
+            Text(
-                            Text(
+                calculator.formattedHexString,
-                                it.formattedOctString,
+                style = MaterialTheme.typography.bodyMedium.copy(fontFamily =  FontFamily.Monospace),
-                                fontFamily = FontFamily.Monospace,
+                modifier = Modifier.align(Alignment.End),
-                                modifier = Modifier.align(Alignment.End),
+            )
-                            )
+            Text(
-                        }
+                calculator.formattedOctString,
-                    }
+                style = MaterialTheme.typography.bodyMedium.copy(fontFamily =  FontFamily.Monospace),
-                }
+                modifier = Modifier.align(Alignment.End),
-            }
+            )
-            SectionDivider()
         }
     }
 }

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

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:id="@+id/composeView"/>
-        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>
 </de.mm20.launcher2.ui.legacy.view.LauncherCardView>