Scrollbars followup, Textareas, Textfields, and more #457

hamen · 2024-07-18T15:22:35Z

TextAread and TextFields are now based on Compose 1.7 implementation
Tabstrip scrollbar have a new style

rock3r · 2024-07-23T15:29:48Z

Please add screenshots and videos of the scrollbars in action, and comparable Swing implementations, to help validate they look and behave as expected.

rock3r

Please try to revert unneded code formatting changes, and split out both the standalone sample shortcuts (#462) and BTF2 introduction (#296) to keep this simple and self-contained.

rock3r · 2024-07-23T15:24:45Z

.idea/inspectionProfiles/Project_Default.xml

@@ -11,7 +11,6 @@
    <inspection_tool class="LanguageDetectionInspection" enabled="false" level="WARNING" enabled_by_default="false" />
    <inspection_tool class="NoButtonGroup" enabled="false" level="WARNING" enabled_by_default="false" />
    <inspection_tool class="NoScrollPane" enabled="false" level="WARNING" enabled_by_default="false" />
-    <inspection_tool class="StructuralWrap" enabled="false" level="INFORMATION" enabled_by_default="false" />


Please revert this. The StructuralWrap inspection is incredibly unhelpful 🙃

decorated-window/src/main/kotlin/org/jetbrains/jewel/window/DecoratedWindow.kt

ide-laf-bridge/src/main/kotlin/org/jetbrains/jewel/bridge/theme/IntUiBridge.kt

samples/standalone/src/main/resources/icons/components/scroll.svg

rock3r · 2024-07-23T16:06:57Z

ui/src/main/kotlin/org/jetbrains/jewel/ui/component/InputField.kt

+    state: TextFieldState,
+    enabled: Boolean,
+    readOnly: Boolean,
+    outline: Outline,
+    undecorated: Boolean,
+    keyboardOptions: KeyboardOptions,
+    singleLine: Boolean,
+    maxLines: Int,
+    interactionSource: MutableInteractionSource,
+    style: InputFieldStyle,
+    textStyle: TextStyle,
+    modifier: Modifier = Modifier,
+    decorationBox: @Composable (innerTextField: @Composable () -> Unit, state: InputFieldState) -> Unit,
+    showScrollbar: Boolean = true,
+) {
+    var inputState by remember(interactionSource) {
+        mutableStateOf(InputFieldState.of(enabled = enabled))
+    }
+    remember(enabled) { inputState = inputState.copy(enabled = enabled) }
+
+    LaunchedEffect(interactionSource) {
+        interactionSource.interactions.collect { interaction ->
+            when (interaction) {
+                is FocusInteraction.Focus -> inputState = inputState.copy(focused = true)
+                is FocusInteraction.Unfocus -> inputState = inputState.copy(focused = false)
+            }
+        }
+    }
+
+    val colors = style.colors
+    val backgroundColor by colors.backgroundFor(inputState)
+    val shape = RoundedCornerShape(style.metrics.cornerSize)
+
+    val backgroundModifier =
+        Modifier.thenIf(!undecorated && backgroundColor.isSpecified) {
+            background(backgroundColor, shape)
+        }
+
+    val borderColor by style.colors.borderFor(inputState)
+    val hasNoOutline = outline == Outline.None
+    val borderModifier =
+        Modifier.thenIf(!undecorated && borderColor.isSpecified && hasNoOutline) {
+            border(
+                alignment = Stroke.Alignment.Center,
+                width = style.metrics.borderWidth,
+                color = borderColor,
+                shape = shape,
+            )
+        }
+
+    val contentColor by colors.contentFor(inputState)
+    val mergedTextStyle = style.textStyle.merge(textStyle).copy(color = contentColor)
+    val caretColor by colors.caretFor(inputState)
+
+    val lineLimits =
+        when {
+            singleLine -> SingleLine
+            else -> MultiLine(maxLines)
+        }
+
+    val scrollState = rememberScrollState()
+    val canScroll by remember {
+        derivedStateOf {
+            scrollState.canScrollBackward || scrollState.canScrollForward
+        }
+    }
+
+    Box(
+        modifier = modifier
+            .then(backgroundModifier)
+            .then(borderModifier)
+            .thenIf(!undecorated && hasNoOutline) { focusOutline(inputState, shape) }
+            .outline(inputState, outline, shape, Stroke.Alignment.Center),
+    ) {
+        BasicTextField(
+            modifier = Modifier
+                .fillMaxWidth()
+                .align(Alignment.CenterStart)
+                .thenIf(canScroll && showScrollbar) { padding(end = 12.dp) },
+            state = state,
+            enabled = enabled,
+            readOnly = readOnly,
+            textStyle = mergedTextStyle,
+            cursorBrush = SolidColor(caretColor),
+            keyboardOptions = keyboardOptions,
+            lineLimits = lineLimits,
+            interactionSource = interactionSource,
+            decorator = { innerTextField: @Composable () -> Unit -> decorationBox(innerTextField, inputState) },
+            scrollState = scrollState,
+        )
+
+        if (showScrollbar)
+            VerticalScrollbar(
+                scrollState = scrollState,
+                modifier = Modifier.align(Alignment.CenterEnd),
+                interactionSource = interactionSource,
+            )
+    }
+}
+


To keep this PR more legible, would it be possible to split the text area scrollbars work to a separate PR?

ui/src/main/kotlin/org/jetbrains/jewel/ui/component/InputField.kt

ui/src/main/kotlin/org/jetbrains/jewel/ui/component/TextArea.kt

ide-laf-bridge/src/main/kotlin/org/jetbrains/jewel/bridge/theme/IntUiBridge.kt

ide-laf-bridge/src/main/kotlin/org/jetbrains/jewel/bridge/theme/ScrollbarBridge.kt

rock3r · 2024-08-01T17:25:16Z

...dalone/src/main/kotlin/org/jetbrains/jewel/intui/standalone/styling/IntUiScrollbarStyling.kt

+        scrollbarVisibility = scrollbarVisibility,
+    )
+
+public fun ScrollbarStyle.Companion.winOsDark(


windowsAndLinux* here and below?

Done in a37a196

rock3r · 2024-08-01T17:28:44Z

...andalone/src/main/kotlin/org/jetbrains/jewel/samples/standalone/view/component/Scrollbars.kt

-                )
-            }
+        var alwaysVisible by remember { mutableStateOf(false) }
+        val resolvedStyle = readStyle()


Is this meant to be done to detect the initial style? I think the issue here is that this will be re-executed on every composition. You should probably call this "baseStyle", and remember(JewelTheme.isDark) it

Done in 9af3d55

...i-standalone/src/main/kotlin/org/jetbrains/jewel/intui/standalone/styling/IntUiTabStyling.kt

Signed-off-by: Ivan Morgillo <[email protected]>

...dalone/src/main/kotlin/org/jetbrains/jewel/intui/standalone/styling/IntUiScrollbarStyling.kt

...andalone/src/main/kotlin/org/jetbrains/jewel/samples/standalone/view/component/TextFields.kt

reference: #457 (comment)

Signed-off-by: Ivan Morgillo <[email protected]>

rock3r · 2024-08-06T15:22:50Z

ui/src/main/kotlin/org/jetbrains/jewel/ui/component/Scrollbars.kt

+                if (isHighlighted) {
+                    style.colors.thumbBackgroundHovered
+                } else {
+                    style.colors.thumbBackgroundHovered


Suggested change

style.colors.thumbBackgroundHovered

style.colors.thumbBackground

rock3r · 2024-08-06T15:22:57Z

ui/src/main/kotlin/org/jetbrains/jewel/ui/component/Scrollbars.kt

+            if (isHighlighted) {
+                style.colors.thumbBackgroundHovered
+            } else {
+                style.colors.thumbBackgroundHovered


Suggested change

style.colors.thumbBackgroundHovered

style.colors.thumbBackground

Done in 70d2cda

rock3r · 2024-08-06T15:25:58Z

ui/src/main/kotlin/org/jetbrains/jewel/ui/component/InputField.kt

+    state: TextFieldState,
+    enabled: Boolean,
+    readOnly: Boolean,
+    outline: Outline,
+    undecorated: Boolean,
+    keyboardOptions: KeyboardOptions,
+    singleLine: Boolean,
+    maxLines: Int,
+    interactionSource: MutableInteractionSource,
+    style: InputFieldStyle,
+    textStyle: TextStyle,
+    modifier: Modifier = Modifier,
+    decorationBox: @Composable (innerTextField: @Composable () -> Unit, state: InputFieldState) -> Unit,
+    showScrollbar: Boolean,


Suggested change

state: TextFieldState,

enabled: Boolean,

readOnly: Boolean,

outline: Outline,

undecorated: Boolean,

keyboardOptions: KeyboardOptions,

singleLine: Boolean,

maxLines: Int,

interactionSource: MutableInteractionSource,

style: InputFieldStyle,

textStyle: TextStyle,

modifier: Modifier = Modifier,

decorationBox: @Composable (innerTextField: @Composable () -> Unit, state: InputFieldState) -> Unit,

showScrollbar: Boolean,

state: TextFieldState,

enabled: Boolean,

readOnly: Boolean,

outline: Outline,

undecorated: Boolean,

keyboardOptions: KeyboardOptions,

singleLine: Boolean,

maxLines: Int,

interactionSource: MutableInteractionSource,

style: InputFieldStyle,

textStyle: TextStyle,

showScrollbar: Boolean,

modifier: Modifier,

decorationBox: @Composable (innerTextField: @Composable () -> Unit, state: InputFieldState) -> Unit,

Done in e494398

rock3r · 2024-08-06T15:28:35Z

.editorconfig

@@ -16,11 +16,14 @@ indent_size = 2
 [*.yml]
 indent_size = 2

+# noinspection EditorConfigKeyCorrectness


Please revert this file.

rock3r · 2024-08-06T15:28:54Z

ui/src/main/kotlin/org/jetbrains/jewel/ui/component/TextField.kt

+            Modifier.defaultMinSize(minWidth = minSize.width, minHeight = minSize.height)
+                .padding(style.metrics.contentPadding),


Please revert this.

rock3r · 2024-08-06T15:31:33Z

ui/src/main/kotlin/org/jetbrains/jewel/ui/component/InputField.kt

+public value class InputFieldState(
+    public val state: ULong,
+) : FocusableComponentState {


Please revert this.

rock3r · 2024-08-06T15:31:40Z

ui/src/main/kotlin/org/jetbrains/jewel/ui/component/InputField.kt

+                (if (enabled) Enabled else 0UL) or
+                    (if (focused) Focused else 0UL) or
+                    (if (hovered) Hovered else 0UL) or
+                    (if (pressed) Pressed else 0UL) or
+                    (if (active) Active else 0UL),


Please revert this.

rock3r · 2024-08-06T15:31:53Z

ui/src/main/kotlin/org/jetbrains/jewel/ui/component/Scrollbars.kt

+            derivedStateOf {
+                isHovered || dragInteraction.value is DragInteraction.Start
+            }


Please revert this.

rock3r · 2024-08-06T15:32:05Z

ui/src/main/kotlin/org/jetbrains/jewel/ui/component/Scrollbars.kt

+                                thumbColor,
+                                RoundedCornerShape(style.metrics.thumbCornerSize),


Please revert this.

rock3r · 2024-08-06T15:32:47Z

ui/src/main/kotlin/org/jetbrains/jewel/ui/component/TextArea.kt

+            measurables
+                .single { it.layoutId == TEXT_AREA_ID }


Please revert this.

reference: #457 (comment) Signed-off-by: Ivan Morgillo <[email protected]>

hamen self-assigned this Jul 18, 2024

hamen force-pushed the im-419 branch from fb8dfb5 to 13ce90d Compare July 19, 2024 10:11

rock3r force-pushed the im-419 branch from 13ce90d to 60838e9 Compare July 22, 2024 12:48

rock3r self-requested a review July 22, 2024 12:48

rock3r added feature New feature or request consistency Our UI presentation is not consistent with IJ labels Jul 23, 2024

rock3r requested changes Jul 23, 2024

View reviewed changes

hamen force-pushed the im-419 branch from 60838e9 to f1f9dfd Compare July 29, 2024 10:41

hamen mentioned this pull request Jul 29, 2024

Add basic shortcuts to Standalone L1 navigation screens #502

Merged

rock3r reviewed Jul 29, 2024

View reviewed changes

ide-laf-bridge/src/main/kotlin/org/jetbrains/jewel/bridge/theme/IntUiBridge.kt Outdated Show resolved Hide resolved

hamen force-pushed the im-419 branch from d066157 to 8daf47d Compare July 30, 2024 15:13

rock3r reviewed Jul 30, 2024

View reviewed changes

ide-laf-bridge/src/main/kotlin/org/jetbrains/jewel/bridge/theme/ScrollbarBridge.kt Outdated Show resolved Hide resolved

rock3r reviewed Aug 1, 2024

View reviewed changes

...i-standalone/src/main/kotlin/org/jetbrains/jewel/intui/standalone/styling/IntUiTabStyling.kt Outdated Show resolved Hide resolved

hamen force-pushed the im-419 branch from 5e9a7ea to cc374cc Compare August 2, 2024 08:18

hamen added a commit that referenced this pull request Aug 2, 2024

fix #457 (comment)

8d01a88

Signed-off-by: Ivan Morgillo <[email protected]>

hamen added a commit that referenced this pull request Aug 5, 2024

fix #457 (comment)

89072fc

Signed-off-by: Ivan Morgillo <[email protected]>

hamen force-pushed the im-419 branch from 8d01a88 to 89072fc Compare August 5, 2024 09:07

hamen mentioned this pull request Aug 5, 2024

New iteration on scrollbars #515

Merged

hamen changed the base branch from main to im-fancy-scrollbars August 5, 2024 14:02

hamen changed the base branch from im-fancy-scrollbars to main August 5, 2024 14:02

hamen changed the title ~~Add scrollbars~~ Scrollbars followup, Textareas, Textfields, and more Aug 5, 2024

hamen added 13 commits August 5, 2024 17:32

update API files

0dc52d8

Signed-off-by: Ivan Morgillo <[email protected]>

migrate TextField to BasicTextField2

f2289ec

Signed-off-by: Ivan Morgillo <[email protected]>

update API files

9ce3024

Signed-off-by: Ivan Morgillo <[email protected]>

make the formatter happy

e5fea4f

Signed-off-by: Ivan Morgillo <[email protected]>

clean up unused constants in ComponentShowcaseTab

7b455d5

Signed-off-by: Ivan Morgillo <[email protected]>

iterate on scrollbar.svg

c923f78

Signed-off-by: Ivan Morgillo <[email protected]>

iterate on scrollbar styles

0ed9b3d

Signed-off-by: Ivan Morgillo <[email protected]>

update API files

6195bfb

Signed-off-by: Ivan Morgillo <[email protected]>

clean up unnecessary @composable annotation in IntUiScrollbarStyling

e45d3c0

Signed-off-by: Ivan Morgillo <[email protected]>

update API files

b2210a8

Signed-off-by: Ivan Morgillo <[email protected]>

fix #457 (comment)

aea1217

Signed-off-by: Ivan Morgillo <[email protected]>

iterate on tabStrip scrollbars

6e808ca

Signed-off-by: Ivan Morgillo <[email protected]>

update API files

92429e3

Signed-off-by: Ivan Morgillo <[email protected]>

hamen force-pushed the im-419 branch from 08331ec to 92429e3 Compare August 5, 2024 15:35

hamen marked this pull request as ready for review August 5, 2024 15:43

fix border width for menu

e4afa7d

Signed-off-by: Ivan Morgillo <[email protected]>

rock3r reviewed Aug 5, 2024

View reviewed changes

morgillo and others added 6 commits August 6, 2024 12:19

rename winOs* to windowsAndLinux* in IntUiScrollbarStyling

a37a196

reference: #457 (comment)

remove unnecessary comments in IntUiScrollbarStyling

7e0f58d

reference: #457 (comment)

remove unused duplicate method in IntUiScrollbarStyling

137f7d7

reference: #457 (comment)

renamed state in TextFields

317855d

reference: #457 (comment)

update API files

0206fc0

revert unnecessary changes to .editorconfig

90b633e

Signed-off-by: Ivan Morgillo <[email protected]>

rock3r reviewed Aug 6, 2024

View reviewed changes

hamen added 2 commits August 6, 2024 17:43

extract targetColor in Scrollbars

70d2cda

reference: #457 (comment) Signed-off-by: Ivan Morgillo <[email protected]>

rework arguments order in InputField

e494398

reference: #457 (comment) Signed-off-by: Ivan Morgillo <[email protected]>

hamen changed the base branch from main to im-108-add-scrollbars-to-textareas August 7, 2024 08:26

hamen changed the base branch from im-108-add-scrollbars-to-textareas to main August 7, 2024 08:27

hamen closed this Aug 7, 2024

hamen deleted the im-419 branch August 26, 2024 15:14

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Scrollbars followup, Textareas, Textfields, and more #457

Scrollbars followup, Textareas, Textfields, and more #457

hamen commented Jul 18, 2024 •

edited

Loading

rock3r commented Jul 23, 2024

rock3r left a comment

rock3r Jul 23, 2024

rock3r Aug 6, 2024

rock3r Jul 23, 2024

rock3r Aug 1, 2024

hamen Aug 6, 2024 •

edited

Loading

rock3r Aug 1, 2024

hamen Aug 2, 2024

rock3r Aug 6, 2024

rock3r Aug 6, 2024

hamen Aug 6, 2024

rock3r Aug 6, 2024

hamen Aug 6, 2024

rock3r Aug 6, 2024

rock3r Aug 6, 2024

rock3r Aug 6, 2024

rock3r Aug 6, 2024

rock3r Aug 6, 2024

rock3r Aug 6, 2024

rock3r Aug 6, 2024

	style.colors.thumbBackgroundHovered
	style.colors.thumbBackground

		Modifier.defaultMinSize(minWidth = minSize.width, minHeight = minSize.height)
		.padding(style.metrics.contentPadding),

		thumbColor,
		RoundedCornerShape(style.metrics.thumbCornerSize),

Scrollbars followup, Textareas, Textfields, and more #457

Scrollbars followup, Textareas, Textfields, and more #457

Conversation

hamen commented Jul 18, 2024 • edited Loading

rock3r commented Jul 23, 2024

rock3r left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

hamen Aug 6, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

hamen commented Jul 18, 2024 •

edited

Loading

hamen Aug 6, 2024 •

edited

Loading