Update Material theme to match IntelliJ theme, cover with Preview all…

… screens, new design for IntroScreen
ComposeGears · Jul 14, 2024 · b684f64 · b684f64
1 parent 8080194
commit b684f64
Show file tree

Hide file tree

Showing 26 changed files with 1,998 additions and 346 deletions.
diff --git a/plugin/src/main/kotlin/io/github/composegears/valkyrie/AppToolWindowFactory.kt b/plugin/src/main/kotlin/io/github/composegears/valkyrie/AppToolWindowFactory.kt
@@ -1,6 +1,5 @@
 package io.github.composegears.valkyrie
 
-import androidx.compose.material3.Surface
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.awt.ComposePanel
 import com.intellij.openapi.project.DumbAware
@@ -27,9 +26,7 @@ class AppToolWindowFactory : ToolWindowFactory, DumbAware {
                 project = project,
                 currentComponent = this
             ) {
-                Surface {
-                    ValkyriePlugin()
-                }
+                ValkyriePlugin()
             }
         }
     }

diff --git a/plugin/src/main/kotlin/io/github/composegears/valkyrie/ui/foundation/DragAndDropBox.kt b/plugin/src/main/kotlin/io/github/composegears/valkyrie/ui/foundation/DragAndDropBox.kt
@@ -7,6 +7,7 @@ import androidx.compose.foundation.clickable
 import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.BoxScope
+import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.heightIn
@@ -24,6 +25,7 @@ import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.input.pointer.PointerEventType
 import androidx.compose.ui.input.pointer.onPointerEvent
 import androidx.compose.ui.unit.dp
+import io.github.composegears.valkyrie.ui.foundation.theme.PreviewTheme
 
 @OptIn(ExperimentalComposeUiApi::class)
 @Composable
@@ -71,16 +73,21 @@ fun DragAndDropBox(
 
 @Preview
 @Composable
-private fun DragAndDropBoxPreview() {
-    DragAndDropBox(
-        isDragging = false,
-        onChoose = {},
+private fun DragAndDropBoxPreview() = PreviewTheme {
+    Box(
+        modifier = Modifier.fillMaxSize(),
+        contentAlignment = Alignment.Center
     ) {
-        Box(
-            modifier = Modifier
-                .fillMaxWidth()
-                .height(300.dp)
-                .background(Color.Gray.copy(alpha = 0.3f))
-        )
+        DragAndDropBox(
+            isDragging = false,
+            onChoose = {},
+        ) {
+            Box(
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .height(300.dp)
+                    .background(Color.Gray.copy(alpha = 0.3f))
+            )
+        }
     }
 }
diff --git a/plugin/src/main/kotlin/io/github/composegears/valkyrie/ui/foundation/InputField.kt b/plugin/src/main/kotlin/io/github/composegears/valkyrie/ui/foundation/InputField.kt
@@ -1,10 +1,13 @@
 package io.github.composegears.valkyrie.ui.foundation
 
+import androidx.compose.desktop.ui.tooling.preview.Preview
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
@@ -18,6 +21,7 @@ import androidx.compose.ui.text.AnnotatedString
 import androidx.compose.ui.unit.dp
 import io.github.composegears.valkyrie.ui.foundation.icons.Backspace
 import io.github.composegears.valkyrie.ui.foundation.icons.ValkyrieIcons
+import io.github.composegears.valkyrie.ui.foundation.theme.PreviewTheme
 
 @Composable
 fun InputField(
@@ -69,13 +73,11 @@ fun InputTextField(
         colors = TextFieldDefaults.colors().copy(
             focusedTextColor = MaterialTheme.colorScheme.onSurfaceVariant,
             unfocusedTextColor = MaterialTheme.colorScheme.onSurfaceVariant,
-            focusedTrailingIconColor = MaterialTheme.colorScheme.surface.copy(alpha = 0.4f),
-            unfocusedTrailingIconColor = MaterialTheme.colorScheme.surface.copy(alpha = 0.4f),
-            cursorColor = MaterialTheme.colorScheme.surface,
-            errorTextColor = MaterialTheme.colorScheme.surface,
+            cursorColor = MaterialTheme.colorScheme.onSurfaceVariant,
+            errorTextColor = MaterialTheme.colorScheme.error,
             errorContainerColor = MaterialTheme.colorScheme.surfaceVariant,
-            errorCursorColor = MaterialTheme.colorScheme.surface,
-            errorTrailingIconColor = MaterialTheme.colorScheme.surface.copy(alpha = 0.4f),
+            errorCursorColor = MaterialTheme.colorScheme.onSurfaceVariant,
+            errorTrailingIconColor = MaterialTheme.colorScheme.onSurfaceVariant,
             errorIndicatorColor = Color.Transparent,
             focusedIndicatorColor = Color.Transparent,
             unfocusedIndicatorColor = Color.Transparent
@@ -93,4 +95,29 @@ fun InputTextField(
             }
         }
     )
+}
+
+@Preview
+@Composable
+private fun InputTextFieldPreview() = PreviewTheme {
+    Column(
+        modifier = Modifier.fillMaxSize(),
+        verticalArrangement = Arrangement.spacedBy(16.dp, Alignment.CenterVertically),
+        horizontalAlignment = Alignment.CenterHorizontally
+    ) {
+        InputTextField(
+            modifier = Modifier.width(300.dp),
+            value = "Hello, World!",
+            onValueChange = {}
+        )
+        InputTextField(
+            modifier = Modifier.width(300.dp),
+            value = "Hello, World!",
+            isError = true,
+            onValueChange = {},
+            supportingText = {
+                Text("This is an error message")
+            }
+        )
+    }
 }
diff --git a/plugin/src/main/kotlin/io/github/composegears/valkyrie/ui/foundation/IntellijEditor.kt b/plugin/src/main/kotlin/io/github/composegears/valkyrie/ui/foundation/IntellijEditor.kt
@@ -1,9 +1,14 @@
 package io.github.composegears.valkyrie.ui.foundation
 
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.remember
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.awt.SwingPanel
+import androidx.compose.ui.platform.LocalInspectionMode
 import com.intellij.lang.Language
 import com.intellij.openapi.editor.EditorFactory
 import com.intellij.openapi.editor.ScrollType
@@ -18,21 +23,30 @@ fun IntellijEditorTextField(
     text: String,
     modifier: Modifier = Modifier,
 ) {
-    val project = LocalProject.current
-    val document = remember(text) { EditorFactory.getInstance().createDocument(text) }
+    if (LocalInspectionMode.current) {
+        Box(
+            modifier = Modifier.fillMaxSize(),
+            contentAlignment = Alignment.Center
+        ) {
+            Text(text = "EditorTextField")
+        }
+    } else {
+        val project = LocalProject.current
+        val document = remember(text) { EditorFactory.getInstance().createDocument(text) }
 
-    SwingPanel(
-        modifier = modifier,
-        factory = {
-            EditorTextFieldProvider.getInstance().getEditorField(
-                /* language = */ kotlinLanguage,
-                /* project = */ project,
-                /* features = */ listOf(EditorCustomization(true))
-            ).apply {
-                setDocument(document)
-            }
-        },
-    )
+        SwingPanel(
+            modifier = modifier,
+            factory = {
+                EditorTextFieldProvider.getInstance().getEditorField(
+                    /* language = */ kotlinLanguage,
+                    /* project = */ project,
+                    /* features = */ listOf(EditorCustomization(true))
+                ).apply {
+                    setDocument(document)
+                }
+            },
+        )
+    }
 }
 
 private class EditorCustomization(enabled: Boolean) : SimpleEditorCustomization(enabled) {

diff --git a/plugin/src/main/kotlin/io/github/composegears/valkyrie/ui/foundation/PreviewWrapper.kt b/plugin/src/main/kotlin/io/github/composegears/valkyrie/ui/foundation/PreviewWrapper.kt
diff --git a/plugin/src/main/kotlin/io/github/composegears/valkyrie/ui/foundation/Tooltip.kt b/plugin/src/main/kotlin/io/github/composegears/valkyrie/ui/foundation/Tooltip.kt
@@ -10,6 +10,7 @@ import androidx.compose.material3.Text
 import androidx.compose.material3.TooltipBox
 import androidx.compose.material3.TooltipDefaults
 import androidx.compose.material3.rememberTooltipState
+import androidx.compose.material3.surfaceColorAtElevation
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.text.AnnotatedString
@@ -24,6 +25,7 @@ fun Tooltip(text: AnnotatedString) {
         positionProvider = TooltipDefaults.rememberRichTooltipPositionProvider(),
         tooltip = {
             RichTooltip(
+                tonalElevation = 0.dp,
                 text = {
                     Text(
                         modifier = Modifier.padding(vertical = 8.dp),
@@ -32,7 +34,8 @@ fun Tooltip(text: AnnotatedString) {
                     )
                 },
                 colors = TooltipDefaults.richTooltipColors().copy(
-                    containerColor = MaterialTheme.colorScheme.inverseSurface,
+                    containerColor = MaterialTheme.colorScheme.surfaceColorAtElevation(1.dp),
+                    contentColor = MaterialTheme.colorScheme.onSurface
                 )
             )
         },

diff --git a/plugin/src/main/kotlin/io/github/composegears/valkyrie/ui/foundation/TooltipButton.kt b/plugin/src/main/kotlin/io/github/composegears/valkyrie/ui/foundation/TooltipButton.kt
diff --git a/plugin/src/main/kotlin/io/github/composegears/valkyrie/ui/foundation/TopAppBar.kt b/plugin/src/main/kotlin/io/github/composegears/valkyrie/ui/foundation/TopAppBar.kt
@@ -1,8 +1,10 @@
 package io.github.composegears.valkyrie.ui.foundation
 
 import androidx.compose.desktop.ui.tooling.preview.Preview
+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.RowScope
+import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
@@ -18,6 +20,7 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.unit.dp
 import io.github.composegears.valkyrie.ui.foundation.icons.ContentCopy
 import io.github.composegears.valkyrie.ui.foundation.icons.ValkyrieIcons
+import io.github.composegears.valkyrie.ui.foundation.theme.PreviewTheme
 
 @Composable
 fun TopAppBar(content: @Composable RowScope.() -> Unit) {
@@ -77,12 +80,15 @@ fun SettingsAction(openSettings: () -> Unit) {
 
 @Preview
 @Composable
-private fun TopAppBarPreview() {
-    TopAppBar {
-        BackAction {}
-        AppBarTitle("Title")
-        ClearAction {}
-        CopyAction {}
-        SettingsAction {}
+private fun TopAppBarPreview() = PreviewTheme {
+    Box(modifier = Modifier.fillMaxSize()) {
+        TopAppBar {
+            BackAction {}
+            AppBarTitle(title = "Page title")
+            WeightSpacer()
+            ClearAction {}
+            CopyAction {}
+            SettingsAction {}
+        }
     }
 }