[FAB] WIP

.idea/misc.xml

@@ -1,6 +1,40 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <project version="4">
-  <component name="ProjectRootManager" version="2" languageLevel="JDK_11" default="true" project-jdk-name="11" project-jdk-type="JavaSDK">
+  <component name="DesignSurface">
+    <option name="filePathToZoomLevelMap">
+      <map>
+        <entry key="../../../../layout/compose-model-1627195341053.xml" value="0.33" />
+        <entry key="../../../../layout/compose-model-1627257664594.xml" value="0.4518581081081081" />
+        <entry key="../../../../layout/compose-model-1627353146836.xml" value="0.5" />
+        <entry key="../../../../layout/compose-model-1627359089674.xml" value="0.67" />
+        <entry key="../../../../layout/compose-model-1627469604886.xml" value="0.3684210526315789" />
+        <entry key="../../../../layout/compose-model-1627528986080.xml" value="0.13723644578313254" />
+        <entry key="../../../../layout/compose-model-1627529731737.xml" value="0.18919427710843373" />
+        <entry key="../../../../layout/compose-model-1627530302667.xml" value="0.1" />
+        <entry key="../../../../layout/compose-model-1627605645856.xml" value="0.25" />
+        <entry key="../../../../layout/compose-model-1627688771576.xml" value="0.3023525994772001" />
+        <entry key="../../../../layout/compose-model-1627721024779.xml" value="0.3020621550972989" />
+        <entry key="../../../../layout/compose-model-1628033383820.xml" value="0.23796296296296296" />
+        <entry key="../../../../layout/compose-model-1628120781047.xml" value="0.28405460354342144" />
+        <entry key="../../../../layout/compose-model-1628214547556.xml" value="0.2939297124600639" />
+        <entry key="../../../../layout/compose-model-1628301117560.xml" value="0.18711713384072767" />
+        <entry key="../../../../layout/compose-model-1628301166312.xml" value="0.19250046408019306" />
+        <entry key="../../../../layout/compose-model-1628490334478.xml" value="0.1212177464265825" />
+        <entry key="../../../../layout/compose-model-1628898655628.xml" value="0.19300204727340406" />
+        <entry key="../../../../layout/compose-model-1628898937985.xml" value="0.19300204727340406" />
+        <entry key="../../../../layout/compose-model-1631666404391.xml" value="0.36203703703703705" />
+        <entry key="../../../../layout/compose-model-1631801120026.xml" value="1.922077922077922" />
+        <entry key="../../../../layout/compose-model-1631838314391.xml" value="2.0" />
+        <entry key="../../../../layout/custom_preview.xml" value="0.518974358974359" />
+        <entry key="app/src/main/res/drawable/avd_star.xml" value="0.2722222222222222" />
+        <entry key="app/src/main/res/layout/main_activity.xml" value="0.2953125" />
+        <entry key="app/src/main/res/layout/main_activity_content.xml" value="0.2953125" />
+        <entry key="app/src/main/res/layout/progress_card_view.xml" value="0.2953125" />
+        <entry key="app/src/main/res/layout/search_result_item.xml" value="0.2489868287740628" />
+      </map>
+    </option>
+  </component>
+  <component name="ProjectRootManager" version="2" languageLevel="JDK_11" default="true" project-jdk-name="Android Studio default JDK" project-jdk-type="JavaSDK">
     <output url="file://$PROJECT_DIR$/build/classes" />
   </component>
   <component name="ProjectType">

app/src/main/java/xyz/quaver/pupil/ui/ReaderActivity.kt

@@ -28,11 +28,16 @@ import androidx.compose.material.MaterialTheme
 import androidx.compose.material.Scaffold
 import androidx.compose.material.TopAppBar
 import androidx.compose.material.Text
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.DateRange
+import androidx.compose.material.icons.filled.Science
 import androidx.recyclerview.widget.LinearLayoutManager
 import com.google.accompanist.appcompattheme.AppCompatTheme
 import org.kodein.di.DIAware
 import org.kodein.di.android.closestDI
 import xyz.quaver.pupil.databinding.ReaderActivityBinding
+import xyz.quaver.pupil.ui.composable.MultipleFloatingActionButton
+import xyz.quaver.pupil.ui.composable.SubFabItem
 import xyz.quaver.pupil.ui.viewmodel.ReaderViewModel
 
 class ReaderActivity : ComponentActivity(), DIAware {
@@ -53,6 +58,12 @@ class ReaderActivity : ComponentActivity(), DIAware {
                         TopAppBar(
                             title = { Text("Reader", color = MaterialTheme.colors.onSecondary) }
                         )
+                    },
+                    floatingActionButton = {
+                        MultipleFloatingActionButton(items = listOf(
+                            SubFabItem(Icons.Default.Science, "Testing"),
+                            SubFabItem(Icons.Default.DateRange, "EY")
+                        ))
                     }
                 ) {
 

app/src/main/java/xyz/quaver/pupil/ui/composable/MultipleFloatingActionButton.kt

@@ -1,14 +1,23 @@
 package xyz.quaver.pupil.ui.composable
 
 import androidx.compose.animation.core.updateTransition
-import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.interaction.MutableInteractionSource
-import androidx.compose.material.FloatingActionButton
+import androidx.compose.foundation.layout.*
-import androidx.compose.material.Icon
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material.*
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Add
+import androidx.compose.material.icons.filled.PlayArrow
+import androidx.compose.material.icons.filled.Stop
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.tooling.preview.PreviewParameter
+import androidx.compose.ui.tooling.preview.PreviewParameterProvider
+import androidx.compose.ui.unit.dp
 
 enum class FloatingActionButtonState(val isExpanded: Boolean) {
     COLLAPSED(false), EXPANDED(true);
@@ -28,24 +37,72 @@ data class SubFabItem(
     val label: String? = null
 )
 
+@Composable
+fun MiniFloatingActionButton(
+    modifier: Modifier = Modifier,
+    item: SubFabItem,
+    onClick: ((SubFabItem) -> Unit)? = null
+) {
+    Row(
+        modifier = modifier,
+        verticalAlignment = Alignment.CenterVertically,
+        horizontalArrangement = Arrangement.spacedBy(16.dp)
+    ) {
+        val elevation = FloatingActionButtonDefaults.elevation()
+        val interactionSource = remember { MutableInteractionSource() }
+
+        item.label?.let { label ->
+            Surface(
+                shape = RoundedCornerShape(4.dp),
+                elevation = elevation.elevation(interactionSource).value
+            ) {
+                Text(modifier = Modifier.padding(4.dp), text = label)
+            }
+        }
+
+        FloatingActionButton(
+            modifier = Modifier.size(32.dp),
+            onClick = { onClick?.invoke(item) },
+            elevation = elevation,
+            interactionSource = interactionSource
+        ) {
+            Icon(item.icon, contentDescription = null)
+        }
+    }
+}
+
+private class FloatingActionButtonItemProvider : PreviewParameterProvider<SubFabItem> {
+    override val values: Sequence<SubFabItem>
+        get() = sequenceOf(
+            SubFabItem(Icons.Default.PlayArrow, "Play"),
+            SubFabItem(Icons.Default.Stop, "Stop")
+        )
+}
+
 @Preview
 @Composable
 fun MultipleFloatingActionButton(
-    items: List<SubFabItem>,
+    @PreviewParameter(provider = FloatingActionButtonItemProvider::class) items: List<SubFabItem>,
     fabIcon: ImageVector = Icons.Default.Add,
-    onItemClicked: () -> Unit = {  },
+    onItemClick: ((SubFabItem) -> Unit)? = null,
     targetState: FloatingActionButtonState = FloatingActionButtonState.COLLAPSED,
     onStateChanged: ((FloatingActionButtonState) -> Unit)? = null
 ) {
     val transition = updateTransition(targetState = targetState, label = "expand")
 
-    Column {
+    Column(
+        horizontalAlignment = Alignment.End,
+        verticalArrangement = Arrangement.spacedBy(12.dp)
+    ) {
+        items.forEach { item ->
+            MiniFloatingActionButton(modifier = Modifier.padding(end = 12.dp),item = item) {
+                onItemClick?.invoke(it)
+            }
+        }
+
         FloatingActionButton(onClick = {
             onStateChanged?.invoke(!targetState)
         }) {
-            items.forEach {
-
-            }
             Icon(imageVector = fabIcon, contentDescription = null)
         }
     }