Skip to content

Commit

Permalink
Update the tab component for better customization
Browse files Browse the repository at this point in the history 
TabScope now expose a new Api to allow a custom content inside the composable, updated standalone sample
  • Loading branch information
@fscarponi
fscarponi committed Dec 20, 2023
1 parent effad57 commit 904bb80
Show file tree
Hide file tree
Showing 9 changed files with 202 additions and 49 deletions.
4 changes: 3 additions & 1 deletion ide-laf-bridge/src/main/kotlin/org/jetbrains/jewel/bridge/theme/IntUiBridge.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -163,14 +163,16 @@ internal fun createBridgeComponentStyling(

val textFieldStyle = readTextFieldStyle(textFieldTextStyle)
val menuStyle = readMenuStyle()
val defaultTabStyle = readDefaultTabStyle()

return DefaultComponentStyling(
checkboxStyle = readCheckboxStyle(),
chipStyle = readChipStyle(),
circularProgressStyle = readCircularProgressStyle(theme.isDark),
defaultButtonStyle = readDefaultButtonStyle(),
defaultDropdownStyle = readDefaultDropdownStyle(menuStyle, dropdownTextStyle),
defaultTabStyle = readDefaultTabStyle(),
toolWindowTabStyle = readDefaultTabStyle(),
customTabStyle = defaultTabStyle,
dividerStyle = readDividerStyle(),
editorTabStyle = readEditorTabStyle(),
groupHeaderStyle = readGroupHeaderStyle(),
Expand Down
6 changes: 4 additions & 2 deletions ...nt-ui-standalone/src/main/kotlin/org/jetbrains/jewel/intui/standalone/theme/IntUiTheme.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -116,7 +116,8 @@ public fun ComponentStyling.dark(
circularProgressStyle = circularProgressStyle,
defaultButtonStyle = defaultButtonStyle,
defaultDropdownStyle = dropdownStyle,
defaultTabStyle = defaultTabStyle,
toolWindowTabStyle = defaultTabStyle,
customTabStyle = defaultTabStyle,
dividerStyle = dividerStyle,
editorTabStyle = editorTabStyle,
groupHeaderStyle = groupHeaderStyle,
Expand Down Expand Up @@ -168,7 +169,8 @@ public fun ComponentStyling.light(
circularProgressStyle = circularProgressStyle,
defaultButtonStyle = defaultButtonStyle,
defaultDropdownStyle = dropdownStyle,
defaultTabStyle = defaultTabStyle,
toolWindowTabStyle = defaultTabStyle,
customTabStyle = defaultTabStyle,
dividerStyle = dividerStyle,
editorTabStyle = editorTabStyle,
groupHeaderStyle = groupHeaderStyle,
Expand Down
98 changes: 91 additions & 7 deletions .../standalone/src/main/kotlin/org/jetbrains/jewel/samples/standalone/view/component/Tabs.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,18 +2,24 @@

package org.jetbrains.jewel.samples.standalone.view.component

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import org.jetbrains.jewel.foundation.theme.JewelTheme
import org.jetbrains.jewel.samples.standalone.StandaloneSampleIcons
Expand All @@ -23,30 +29,108 @@ import org.jetbrains.jewel.ui.component.IconButton
import org.jetbrains.jewel.ui.component.TabData
import org.jetbrains.jewel.ui.component.TabStrip
import org.jetbrains.jewel.ui.component.Text
import org.jetbrains.jewel.ui.theme.defaultTabStyle
import org.jetbrains.jewel.ui.theme.editorTabStyle
import kotlin.math.max

@Composable
@View(title = "Tabs", position = 7)
fun Tabs() {
Text("Default tabs", Modifier.fillMaxWidth())
DefaultTabShowcase()
Text("Toolwindow tabs", Modifier.fillMaxWidth())
ToolwindowTabShowcase()

Spacer(Modifier.height(16.dp))
Text("Editor tabs", Modifier.fillMaxWidth())
EditorTabShowcase()

Spacer(Modifier.height(16.dp))
Text("Custom tabs", Modifier.fillMaxWidth())
CustomTabShowcase()
}

@Composable
fun CustomTabShowcase() {
var selectedTabIndex by remember { mutableStateOf(0) }

var tabIds by remember { mutableStateOf((1..12).toList()) }
val maxId = remember(tabIds) { tabIds.maxOrNull() ?: 0 }

val tabs = remember(tabIds, selectedTabIndex) {
tabIds.mapIndexed { index, id ->
TabData.Custom(
selected = index == selectedTabIndex,
content = {
Row(
horizontalArrangement = Arrangement.spacedBy(2.dp),
verticalAlignment = Alignment.CenterVertically,
) {
val textColor = when {
it.isHovered -> Color.Red
else -> Color.Unspecified
}
Text(text = "Custom tab $id")
Text(text = "($id)", color = textColor)
Box(
contentAlignment = Alignment.Center,
modifier = Modifier
.size(24.dp)
.background(color = Color.Yellow, shape = CircleShape)
.padding(2.dp),
) {
Text(text = 'C'.toString())
}
Box(
contentAlignment = Alignment.Center,
modifier = Modifier
.size(24.dp)
.background(color = Color.Green, shape = CircleShape)
.padding(2.dp),
) {
Text(text = 'W'.toString())
}
Box(
contentAlignment = Alignment.Center,
modifier = Modifier
.size(24.dp)
.background(color = Color.Magenta, shape = CircleShape)
.padding(2.dp),
) {
Text(text = 'M'.toString())
}
}
},
onClose = {
tabIds = tabIds.toMutableList().apply { removeAt(index) }
if (selectedTabIndex >= index) {
val maxPossibleIndex = max(0, tabIds.lastIndex)
selectedTabIndex = (selectedTabIndex - 1)
.coerceIn(0..maxPossibleIndex)
}
},
onClick = { selectedTabIndex = index },
)
}
}

TabStripWithAddButton(tabs) {
val insertionIndex = (selectedTabIndex + 1).coerceIn(0..tabIds.size)
val nextTabId = maxId + 1

tabIds = tabIds.toMutableList()
.apply { add(insertionIndex, nextTabId) }
selectedTabIndex = insertionIndex
}
}

@Composable
private fun DefaultTabShowcase() {
private fun ToolwindowTabShowcase() {
var selectedTabIndex by remember { mutableStateOf(0) }

var tabIds by remember { mutableStateOf((1..12).toList()) }
val maxId = remember(tabIds) { tabIds.maxOrNull() ?: 0 }

val tabs = remember(tabIds, selectedTabIndex) {
tabIds.mapIndexed { index, id ->
TabData.Default(
TabData.Default.ToolWindowTab(
selected = index == selectedTabIndex,
label = "Default tab $id",
onClose = {
Expand Down Expand Up @@ -81,7 +165,7 @@ private fun EditorTabShowcase() {

val tabs = remember(tabIds, selectedTabIndex) {
tabIds.mapIndexed { index, id ->
TabData.Editor(
TabData.Default.Editor(
selected = index == selectedTabIndex,
label = "Editor tab $id",
onClose = {
Expand Down Expand Up @@ -117,7 +201,7 @@ private fun TabStripWithAddButton(

IconButton(
onClick = onAddClick,
modifier = Modifier.size(JewelTheme.defaultTabStyle.metrics.tabHeight),
modifier = Modifier.size(JewelTheme.editorTabStyle.metrics.tabHeight),
) {
Icon(
resource = "expui/general/add.svg",
Expand Down
38 changes: 31 additions & 7 deletions ui/api/ui.api
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,14 +25,14 @@ public final class org/jetbrains/jewel/ui/ComponentStyling$DefaultImpls {

public final class org/jetbrains/jewel/ui/DefaultComponentStyling : org/jetbrains/jewel/ui/ComponentStyling {
public static final field $stable I
public fun <init> (Lorg/jetbrains/jewel/ui/component/styling/CheckboxStyle;Lorg/jetbrains/jewel/ui/component/styling/ChipStyle;Lorg/jetbrains/jewel/ui/component/styling/CircularProgressStyle;Lorg/jetbrains/jewel/ui/component/styling/ButtonStyle;Lorg/jetbrains/jewel/ui/component/styling/DropdownStyle;Lorg/jetbrains/jewel/ui/component/styling/TabStyle;Lorg/jetbrains/jewel/ui/component/styling/DividerStyle;Lorg/jetbrains/jewel/ui/component/styling/TabStyle;Lorg/jetbrains/jewel/ui/component/styling/GroupHeaderStyle;Lorg/jetbrains/jewel/ui/component/styling/HorizontalProgressBarStyle;Lorg/jetbrains/jewel/ui/component/styling/IconButtonStyle;Lorg/jetbrains/jewel/ui/component/styling/LazyTreeStyle;Lorg/jetbrains/jewel/ui/component/styling/LinkStyle;Lorg/jetbrains/jewel/ui/component/styling/MenuStyle;Lorg/jetbrains/jewel/ui/component/styling/ButtonStyle;Lorg/jetbrains/jewel/ui/component/styling/RadioButtonStyle;Lorg/jetbrains/jewel/ui/component/styling/ScrollbarStyle;Lorg/jetbrains/jewel/ui/component/styling/SliderStyle;Lorg/jetbrains/jewel/ui/component/styling/TextAreaStyle;Lorg/jetbrains/jewel/ui/component/styling/TextFieldStyle;Lorg/jetbrains/jewel/ui/component/styling/TooltipStyle;Lorg/jetbrains/jewel/ui/component/styling/DropdownStyle;)V
public fun <init> (Lorg/jetbrains/jewel/ui/component/styling/CheckboxStyle;Lorg/jetbrains/jewel/ui/component/styling/ChipStyle;Lorg/jetbrains/jewel/ui/component/styling/CircularProgressStyle;Lorg/jetbrains/jewel/ui/component/styling/ButtonStyle;Lorg/jetbrains/jewel/ui/component/styling/DropdownStyle;Lorg/jetbrains/jewel/ui/component/styling/TabStyle;Lorg/jetbrains/jewel/ui/component/styling/TabStyle;Lorg/jetbrains/jewel/ui/component/styling/TabStyle;Lorg/jetbrains/jewel/ui/component/styling/DividerStyle;Lorg/jetbrains/jewel/ui/component/styling/GroupHeaderStyle;Lorg/jetbrains/jewel/ui/component/styling/HorizontalProgressBarStyle;Lorg/jetbrains/jewel/ui/component/styling/IconButtonStyle;Lorg/jetbrains/jewel/ui/component/styling/LazyTreeStyle;Lorg/jetbrains/jewel/ui/component/styling/LinkStyle;Lorg/jetbrains/jewel/ui/component/styling/MenuStyle;Lorg/jetbrains/jewel/ui/component/styling/ButtonStyle;Lorg/jetbrains/jewel/ui/component/styling/RadioButtonStyle;Lorg/jetbrains/jewel/ui/component/styling/ScrollbarStyle;Lorg/jetbrains/jewel/ui/component/styling/SliderStyle;Lorg/jetbrains/jewel/ui/component/styling/TextAreaStyle;Lorg/jetbrains/jewel/ui/component/styling/TextFieldStyle;Lorg/jetbrains/jewel/ui/component/styling/TooltipStyle;Lorg/jetbrains/jewel/ui/component/styling/DropdownStyle;)V
public fun equals (Ljava/lang/Object;)Z
public final fun getCheckboxStyle ()Lorg/jetbrains/jewel/ui/component/styling/CheckboxStyle;
public final fun getChipStyle ()Lorg/jetbrains/jewel/ui/component/styling/ChipStyle;
public final fun getCircularProgressStyle ()Lorg/jetbrains/jewel/ui/component/styling/CircularProgressStyle;
public final fun getCustomTabStyle ()Lorg/jetbrains/jewel/ui/component/styling/TabStyle;
public final fun getDefaultButtonStyle ()Lorg/jetbrains/jewel/ui/component/styling/ButtonStyle;
public final fun getDefaultDropdownStyle ()Lorg/jetbrains/jewel/ui/component/styling/DropdownStyle;
public final fun getDefaultTabStyle ()Lorg/jetbrains/jewel/ui/component/styling/TabStyle;
public final fun getDividerStyle ()Lorg/jetbrains/jewel/ui/component/styling/DividerStyle;
public final fun getEditorTabStyle ()Lorg/jetbrains/jewel/ui/component/styling/TabStyle;
public final fun getGroupHeaderStyle ()Lorg/jetbrains/jewel/ui/component/styling/GroupHeaderStyle;
Expand All @@ -47,13 +47,16 @@ public final class org/jetbrains/jewel/ui/DefaultComponentStyling : org/jetbrain
public final fun getSliderStyle ()Lorg/jetbrains/jewel/ui/component/styling/SliderStyle;
public final fun getTextAreaStyle ()Lorg/jetbrains/jewel/ui/component/styling/TextAreaStyle;
public final fun getTextFieldStyle ()Lorg/jetbrains/jewel/ui/component/styling/TextFieldStyle;
public final fun getToolWindowTabStyle ()Lorg/jetbrains/jewel/ui/component/styling/TabStyle;
public final fun getTooltipStyle ()Lorg/jetbrains/jewel/ui/component/styling/TooltipStyle;
public final fun getUndecoratedDropdownStyle ()Lorg/jetbrains/jewel/ui/component/styling/DropdownStyle;
public fun hashCode ()I
public synthetic fun provide (Lkotlin/jvm/functions/Function0;)Lorg/jetbrains/jewel/ui/ComponentStyling;
public fun provide (Lkotlin/jvm/functions/Function2;)Lorg/jetbrains/jewel/ui/ComponentStyling;
public fun provide ([Landroidx/compose/runtime/ProvidedValue;)Lorg/jetbrains/jewel/ui/ComponentStyling;
public fun styles (Landroidx/compose/runtime/Composer;I)[Landroidx/compose/runtime/ProvidedValue;
public fun toString ()Ljava/lang/String;
public synthetic fun with (Lkotlin/jvm/functions/Function0;)Lorg/jetbrains/jewel/ui/ComponentStyling;
public fun with (Lkotlin/jvm/functions/Function2;)Lorg/jetbrains/jewel/ui/ComponentStyling;
public fun with (Lorg/jetbrains/jewel/ui/ComponentStyling;)Lorg/jetbrains/jewel/ui/ComponentStyling;
}
Expand Down Expand Up @@ -598,13 +601,32 @@ public abstract class org/jetbrains/jewel/ui/component/TabData {
public static final field $stable I
public abstract fun getClosable ()Z
public abstract fun getIcon ()Landroidx/compose/ui/graphics/painter/Painter;
public abstract fun getLabel ()Ljava/lang/String;
public abstract fun getOnClick ()Lkotlin/jvm/functions/Function0;
public abstract fun getOnClose ()Lkotlin/jvm/functions/Function0;
public abstract fun getSelected ()Z
}

public final class org/jetbrains/jewel/ui/component/TabData$Default : org/jetbrains/jewel/ui/component/TabData {
public final class org/jetbrains/jewel/ui/component/TabData$Custom : org/jetbrains/jewel/ui/component/TabData {
public static final field $stable I
public fun <init> (ZLkotlin/jvm/functions/Function3;Landroidx/compose/ui/graphics/painter/Painter;ZLkotlin/jvm/functions/Function0;Lkotlin/jvm/functions/Function0;)V
public synthetic fun <init> (ZLkotlin/jvm/functions/Function3;Landroidx/compose/ui/graphics/painter/Painter;ZLkotlin/jvm/functions/Function0;Lkotlin/jvm/functions/Function0;ILkotlin/jvm/internal/DefaultConstructorMarker;)V
public fun equals (Ljava/lang/Object;)Z
public fun getClosable ()Z
public final fun getContent ()Lkotlin/jvm/functions/Function3;
public fun getIcon ()Landroidx/compose/ui/graphics/painter/Painter;
public fun getOnClick ()Lkotlin/jvm/functions/Function0;
public fun getOnClose ()Lkotlin/jvm/functions/Function0;
public fun getSelected ()Z
public fun hashCode ()I
public fun toString ()Ljava/lang/String;
}

public abstract class org/jetbrains/jewel/ui/component/TabData$Default : org/jetbrains/jewel/ui/component/TabData {
public static final field $stable I
public abstract fun getLabel ()Ljava/lang/String;
}

public final class org/jetbrains/jewel/ui/component/TabData$Default$Editor : org/jetbrains/jewel/ui/component/TabData$Default {
public static final field $stable I
public fun <init> (ZLjava/lang/String;Landroidx/compose/ui/graphics/painter/Painter;ZLkotlin/jvm/functions/Function0;Lkotlin/jvm/functions/Function0;)V
public synthetic fun <init> (ZLjava/lang/String;Landroidx/compose/ui/graphics/painter/Painter;ZLkotlin/jvm/functions/Function0;Lkotlin/jvm/functions/Function0;ILkotlin/jvm/internal/DefaultConstructorMarker;)V
Expand All @@ -619,7 +641,7 @@ public final class org/jetbrains/jewel/ui/component/TabData$Default : org/jetbra
public fun toString ()Ljava/lang/String;
}

public final class org/jetbrains/jewel/ui/component/TabData$Editor : org/jetbrains/jewel/ui/component/TabData {
public final class org/jetbrains/jewel/ui/component/TabData$Default$ToolWindowTab : org/jetbrains/jewel/ui/component/TabData$Default {
public static final field $stable I
public fun <init> (ZLjava/lang/String;Landroidx/compose/ui/graphics/painter/Painter;ZLkotlin/jvm/functions/Function0;Lkotlin/jvm/functions/Function0;)V
public synthetic fun <init> (ZLjava/lang/String;Landroidx/compose/ui/graphics/painter/Painter;ZLkotlin/jvm/functions/Function0;Lkotlin/jvm/functions/Function0;ILkotlin/jvm/internal/DefaultConstructorMarker;)V
Expand Down Expand Up @@ -1862,8 +1884,9 @@ public final class org/jetbrains/jewel/ui/component/styling/TabStyle$Companion {
}

public final class org/jetbrains/jewel/ui/component/styling/TabStylingKt {
public static final fun getLocalDefaultTabStyle ()Landroidx/compose/runtime/ProvidableCompositionLocal;
public static final fun getLocalCustomTabStyle ()Landroidx/compose/runtime/ProvidableCompositionLocal;
public static final fun getLocalEditorTabStyle ()Landroidx/compose/runtime/ProvidableCompositionLocal;
public static final fun getLocalToolWindowTabStyle ()Landroidx/compose/runtime/ProvidableCompositionLocal;
}

public final class org/jetbrains/jewel/ui/component/styling/TextAreaColors : org/jetbrains/jewel/ui/component/styling/InputFieldColors {
Expand Down Expand Up @@ -2295,8 +2318,8 @@ public final class org/jetbrains/jewel/ui/theme/JewelThemeKt {
public static final fun getChipStyle (Lorg/jetbrains/jewel/foundation/theme/JewelTheme$Companion;Landroidx/compose/runtime/Composer;I)Lorg/jetbrains/jewel/ui/component/styling/ChipStyle;
public static final fun getCircularProgressStyle (Lorg/jetbrains/jewel/foundation/theme/JewelTheme$Companion;Landroidx/compose/runtime/Composer;I)Lorg/jetbrains/jewel/ui/component/styling/CircularProgressStyle;
public static final fun getColorPalette (Lorg/jetbrains/jewel/foundation/theme/JewelTheme$Companion;Landroidx/compose/runtime/Composer;I)Lorg/jetbrains/jewel/foundation/theme/ThemeColorPalette;
public static final fun getCustomTabStyle (Lorg/jetbrains/jewel/foundation/theme/JewelTheme$Companion;Landroidx/compose/runtime/Composer;I)Lorg/jetbrains/jewel/ui/component/styling/TabStyle;
public static final fun getDefaultButtonStyle (Lorg/jetbrains/jewel/foundation/theme/JewelTheme$Companion;Landroidx/compose/runtime/Composer;I)Lorg/jetbrains/jewel/ui/component/styling/ButtonStyle;
public static final fun getDefaultTabStyle (Lorg/jetbrains/jewel/foundation/theme/JewelTheme$Companion;Landroidx/compose/runtime/Composer;I)Lorg/jetbrains/jewel/ui/component/styling/TabStyle;
public static final fun getDividerStyle (Lorg/jetbrains/jewel/foundation/theme/JewelTheme$Companion;Landroidx/compose/runtime/Composer;I)Lorg/jetbrains/jewel/ui/component/styling/DividerStyle;
public static final fun getDropdownStyle (Lorg/jetbrains/jewel/foundation/theme/JewelTheme$Companion;Landroidx/compose/runtime/Composer;I)Lorg/jetbrains/jewel/ui/component/styling/DropdownStyle;
public static final fun getEditorTabStyle (Lorg/jetbrains/jewel/foundation/theme/JewelTheme$Companion;Landroidx/compose/runtime/Composer;I)Lorg/jetbrains/jewel/ui/component/styling/TabStyle;
Expand All @@ -2312,6 +2335,7 @@ public final class org/jetbrains/jewel/ui/theme/JewelThemeKt {
public static final fun getSliderStyle (Lorg/jetbrains/jewel/foundation/theme/JewelTheme$Companion;Landroidx/compose/runtime/Composer;I)Lorg/jetbrains/jewel/ui/component/styling/SliderStyle;
public static final fun getTextAreaStyle (Lorg/jetbrains/jewel/foundation/theme/JewelTheme$Companion;Landroidx/compose/runtime/Composer;I)Lorg/jetbrains/jewel/ui/component/styling/TextAreaStyle;
public static final fun getTextFieldStyle (Lorg/jetbrains/jewel/foundation/theme/JewelTheme$Companion;Landroidx/compose/runtime/Composer;I)Lorg/jetbrains/jewel/ui/component/styling/TextFieldStyle;
public static final fun getToolWindowTabStyle (Lorg/jetbrains/jewel/foundation/theme/JewelTheme$Companion;Landroidx/compose/runtime/Composer;I)Lorg/jetbrains/jewel/ui/component/styling/TabStyle;
public static final fun getTooltipStyle (Lorg/jetbrains/jewel/foundation/theme/JewelTheme$Companion;Landroidx/compose/runtime/Composer;I)Lorg/jetbrains/jewel/ui/component/styling/TooltipStyle;
public static final fun getTreeStyle (Lorg/jetbrains/jewel/foundation/theme/JewelTheme$Companion;Landroidx/compose/runtime/Composer;I)Lorg/jetbrains/jewel/ui/component/styling/LazyTreeStyle;
}
Expand Down
Loading

0 comments on commit 904bb80

Please sign in to comment.