layout

rwst · Nov 21, 2023 · cc965b3 · cc965b3
1 parent 2b66008
commit cc965b3
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 31 deletions.
diff --git a/resources/drawable/delete.svg b/resources/drawable/delete.svg
diff --git a/src/main/kotlin/org/reactome/lit_ball/window/components/Icons.kt b/src/main/kotlin/org/reactome/lit_ball/window/components/Icons.kt
@@ -6,6 +6,7 @@ object Icons {
     const val ArrowBack = "drawable/arrow_back.svg"
     const val Article = "drawable/article.svg"
     const val BarChart = "drawable/bar_chart.svg"
+    const val Delete = "drawable/delete.svg"
     const val Done = "drawable/done.svg"
     const val ExportNotes = "drawable/export_notes.svg"
     const val Help = "drawable/help.svg"

diff --git a/src/main/kotlin/org/reactome/lit_ball/window/components/QueryCard.kt b/src/main/kotlin/org/reactome/lit_ball/window/components/QueryCard.kt
@@ -7,14 +7,12 @@ import androidx.compose.foundation.layout.*
 import androidx.compose.material.Icon
 import androidx.compose.material.IconButton
 import androidx.compose.material.Text
-import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.filled.Delete
-import androidx.compose.material.icons.filled.Settings
 import androidx.compose.material3.*
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.text.AnnotatedString
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.style.TextOverflow
@@ -42,21 +40,40 @@ fun QueryCard(
     )
     ElevatedCard {
         Row(modifier = Modifier.clickable(onClick = onClicked)) {
-            Tooltip("Query-specific settings", Modifier.align(Alignment.CenterVertically)) {
-                IconButton(
-                    onClick = { (onSettingsClicked)(item.id) },
-                    modifier = Modifier
-                        .align(Alignment.CenterVertically),
-                ) {
-                    Icon(
-                        imageVector = Icons.Default.Settings,
-                        contentDescription = "Query Settings",
-                        tint = Color.Gray,
-                        modifier = Modifier.size(48.dp).align(Alignment.CenterVertically),
-                    )
+            Column (modifier = Modifier.align(Alignment.CenterVertically)) {
+                Tooltip("Query-specific settings", Modifier.align(Alignment.CenterHorizontally)) {
+                    IconButton(
+                        onClick = { (onSettingsClicked)(item.id) },
+                        modifier = Modifier
+                            .size(height = 30.dp, width = 30.dp)
+                            .align(Alignment.CenterHorizontally),
+                    ) {
+                        Icon(
+                            painter = painterResource(Icons.Settings),
+                            contentDescription = "Query Settings",
+                            tint = Color.Gray,
+                            modifier = Modifier.size(48.dp).align(Alignment.CenterHorizontally),
+                        )
+                    }
+                }
+                Spacer(modifier = Modifier.fillMaxHeight())
+                Tooltip("Delete query on disk", Modifier.align(Alignment.CenterHorizontally)) {
+                    IconButton(
+                        onClick = onDeleteClicked,
+                        modifier = Modifier
+                            .size(height = 30.dp, width = 30.dp)
+                            .align(Alignment.CenterHorizontally),
+                    ) {
+                        Icon(
+                            painter = painterResource(Icons.Delete),
+                            contentDescription = "Remove Query",
+                            tint = Color.Gray,
+                            modifier = Modifier.size(48.dp).align(Alignment.CenterHorizontally),
+                        )
+                    }
                 }
             }
-            Spacer(modifier = Modifier.width(14.dp))
+            Spacer(modifier = Modifier.width(24.dp))
             Column {
                 Tooltip("Query Type\n${item.type.pretty}", Modifier) {
                     SuggestionChip(
@@ -122,21 +139,6 @@ fun QueryCard(
                     )
                 }
             }
-            Spacer(modifier = Modifier.width(14.dp))
-            Tooltip("Delete query on disk", Modifier.align(Alignment.CenterVertically)) {
-                IconButton(
-                    onClick = onDeleteClicked,
-                    modifier = Modifier
-                        .align(Alignment.CenterVertically),
-                ) {
-                    Icon(
-                        imageVector = Icons.Default.Delete,
-                        contentDescription = "Remove Query",
-                        tint = Color.Gray,
-                        modifier = Modifier.size(48.dp).align(Alignment.CenterVertically),
-                    )
-                }
-            }
 
             Spacer(modifier = Modifier.width(MARGIN_SCROLLBAR))
         }