Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[TEST] Text rendering comparison #13

Closed
wants to merge 3 commits into from
Closed

[TEST] Text rendering comparison #13

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
39f12eb
Initial commit for text rendering comparison
c5inco May 20, 2022
b0b0a79
Fix IDE demos background/theming
rock3r May 24, 2022
adbc958
Cleanup code and styling
rock3r May 24, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 0 additions & 6 deletions themes/intellij/build.gradle.kts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,12 +21,6 @@ kotlin {
}
}

repositories {
jetbrainsCompose()
maven("https://androidx.dev/storage/compose-compiler/repository/")
mavenCentral()
}

dependencies {
implementation(compose.desktop.currentOs) {
exclude(group = "org.jetbrains.compose.material")
Expand Down
4 changes: 3 additions & 1 deletion themes/intellij/idea/src/main/kotlin/org/jetbrains/jewel/theme/idea/Bridge.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.painter.Painter
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontFamily
import androidx.compose.ui.text.font.FontSynthesis
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.platform.Typeface
import androidx.compose.ui.unit.TextUnit
Expand Down Expand Up @@ -130,7 +131,8 @@ suspend fun retrieveFont(
fontWeight = FontWeight.Normal,
fontFamily = FontFamily(Typeface(typeface)),
// todo textDecoration might be defined in the awt theme
lineHeight = lineHeight
lineHeight = lineHeight,
fontSynthesis = FontSynthesis.None // TODO remove this, for testing only
)
}
}
10 changes: 8 additions & 2 deletions themes/intellij/idea/src/main/kotlin/org/jetbrains/jewel/theme/idea/ComposePanel.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,15 @@ import com.intellij.openapi.wm.ToolWindow
fun ToolWindow.addComposePanel(
displayName: String,
isLockable: Boolean = true,
isCloseable: Boolean = true,
content: @Composable ComposePanel.() -> Unit
) = ComposePanel(content = content)
.also { contentManager.addContent(contentManager.factory.createContent(it, displayName, isLockable)) }
): ComposePanel {
val composePanel = ComposePanel(content = content)
val panel = contentManager.factory.createContent(composePanel, displayName, isLockable)
panel.isCloseable = isCloseable
contentManager.addContent(panel)
return composePanel
}

internal fun ComposePanel(
height: Int = 800,
Expand Down
23 changes: 21 additions & 2 deletions ...lij/idea/src/main/kotlin/org/jetbrains/jewel/theme/idea/CurrentIntelliJThemeDefinition.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,10 @@ package org.jetbrains.jewel.theme.idea
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.shape.CornerSize
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.intellij.icons.AllIcons
import com.intellij.ui.JBColor
import org.jetbrains.jewel.theme.intellij.IntelliJMetrics
Expand Down Expand Up @@ -51,7 +54,7 @@ suspend fun CurrentIntelliJThemeDefinition(): IntelliJThemeDefinition {
isLight = JBColor.isBright(),
button = buttonPalette,
background = retrieveColorOrUnspecified("Panel.background"),
text = retrieveColorOrUnspecified("Panel.foreground"),
text = retrieveColorOrUnspecified("Label.foreground"),
textDisabled = retrieveColorOrUnspecified("Label.disabledForeground"),
controlStroke = retrieveColorOrUnspecified("Component.borderColor"),
controlStrokeDisabled = retrieveColorOrUnspecified("Component.disabledBorderColor"),
Expand Down Expand Up @@ -159,8 +162,24 @@ suspend fun CurrentIntelliJThemeDefinition(): IntelliJThemeDefinition {
)
)

val baseTextStyle = retrieveFont(key = "Label.font", color = palette.text)

fun TextStyle.scaleFont(amount: Float): TextStyle {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just a nit, but I'd expect a function called scale* to take in a float scale factor, not an offset amount

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That's fair. I think given text units in Compose use SP we get scaling for free, unlike these utility functions (biggerOn, lessOn) in JBUI. That is what I modeled it after with some simplification.

val size = fontSize.value
return copy(fontSize = (size + amount).sp)
}

fun TextStyle.withWeight(weight: FontWeight) = copy(fontWeight = weight)

val typography = IntelliJTypography(
default = retrieveFont("Panel.font", palette.text),
h0 = baseTextStyle.scaleFont(12f).withWeight(FontWeight.Bold),
h1 = baseTextStyle.scaleFont(9f).withWeight(FontWeight.Bold),
h2 = baseTextStyle.scaleFont(5f),
h3 = baseTextStyle.scaleFont(3f),
h4 = baseTextStyle.withWeight(FontWeight.Bold),
default = baseTextStyle,
medium = baseTextStyle.scaleFont(-1f),
small = baseTextStyle.scaleFont(-2f),
button = retrieveFont("Button.font", palette.button.foreground),
checkBox = retrieveFont("CheckBox.font", palette.checkbox.foreground),
radioButton = retrieveFont("RadioButton.font", palette.radioButton.foreground),
Expand Down
99 changes: 91 additions & 8 deletions .../intellij/idea/src/main/kotlin/org/jetbrains/jewel/theme/idea/demo/JewelDemoToolWindow.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,22 +5,29 @@ import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxHeight
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.selection.selectableGroup
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.ExperimentalComposeUiApi
import androidx.compose.ui.Modifier
import androidx.compose.ui.awt.SwingPanel
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import com.intellij.openapi.project.DumbAware
import com.intellij.openapi.project.Project
import com.intellij.openapi.wm.ToolWindow
import com.intellij.openapi.wm.ToolWindowFactory
import com.intellij.ui.layout.panel
import com.intellij.util.ui.JBFont
import kotlinx.coroutines.ExperimentalCoroutinesApi
import org.jetbrains.jewel.Orientation
import org.jetbrains.jewel.theme.idea.IntelliJTheme
Expand All @@ -44,9 +51,8 @@ internal class JewelDemoToolWindow : ToolWindowFactory, DumbAware {
Enabled, Disabled, Automatic, Unavailable
}

@OptIn(ExperimentalComposeUiApi::class)
override fun createToolWindowContent(project: Project, toolWindow: ToolWindow) {
toolWindow.addComposePanel("Compose Demo") {
toolWindow.addComposePanel("Compose Demo", isCloseable = false) {
IntelliJTheme(this) {
Box(
modifier = Modifier
Expand Down Expand Up @@ -91,7 +97,7 @@ internal class JewelDemoToolWindow : ToolWindowFactory, DumbAware {
}

val tabState = rememberTabContainerState("1")
TabRow(tabState, ) {
TabRow(tabState) {
Section("1", "One")
Section("2", "Two")
Section("3", "Three")
Expand Down Expand Up @@ -126,10 +132,13 @@ internal class JewelDemoToolWindow : ToolWindowFactory, DumbAware {
}
}
}
toolWindow.addComposePanel("Compose Demo 2") {
toolWindow.addComposePanel("Compose Demo 2", isCloseable = false) {
IntelliJTheme(this) {
Box(
modifier = Modifier.fillMaxWidth(),
modifier = Modifier
.fillMaxSize()
.background(IntelliJTheme.palette.background)
.padding(16.dp),
contentAlignment = Alignment.Center
) {
var checked by remember { mutableStateOf(true) }
Expand All @@ -145,6 +154,80 @@ internal class JewelDemoToolWindow : ToolWindowFactory, DumbAware {
}
}
}

toolWindow.addComposePanel("Text rendering comparison", isCloseable = false) {
val sampleText = "Lorem ipsum 1234567890"
IntelliJTheme(this) {
Row(
modifier = Modifier
.fillMaxSize()
.background(IntelliJTheme.palette.background)
) {
val colModifiers = Modifier
.padding(20.dp)
.fillMaxHeight()
.weight(1f)

SwingPanel(
background = Color.Unspecified,
modifier = colModifiers,
factory = {
panel {
row("H0") { label(sampleText, JBFont.h0()) }
row("H1") { label(sampleText, JBFont.h1()) }
row("H2") { label(sampleText, JBFont.h2()) }
row("H2 Bold") { label(sampleText, JBFont.h2().asBold()) }
row("H3") { label(sampleText, JBFont.h3()) }
row("H3 Bold") { label(sampleText, JBFont.h3().asBold()) }
row("H4") { label(sampleText, JBFont.h4()) }
row("Default") { label(sampleText, JBFont.regular()) }
row("Default Bold") { label(sampleText, JBFont.regular().asBold()) }
row("Medium") { label(sampleText, JBFont.medium()) }
row("Medium Bold") { label(sampleText, JBFont.medium().asBold()) }
row("Small") { label(sampleText, JBFont.small()) }
}
}
)
@Composable
fun TypeRow(label: String, style: TextStyle) {
Row {
Text(
label,
style = IntelliJTheme.typography.default,
modifier = Modifier
.alignByBaseline()
.width(92.dp)
)
Text(
sampleText,
style = style,
modifier = Modifier
.alignByBaseline()
.weight(1f)
)
}
}

Column(
modifier = colModifiers,
verticalArrangement = Arrangement.spacedBy(12.dp)
) {
TypeRow("H0", IntelliJTheme.typography.h0)
TypeRow("H1", IntelliJTheme.typography.h1)
TypeRow("H2", IntelliJTheme.typography.h2)
TypeRow("H2 Bold", IntelliJTheme.typography.h2.copy(fontWeight = FontWeight.Bold))
TypeRow("H3", IntelliJTheme.typography.h3)
TypeRow("H3 Bold", IntelliJTheme.typography.h3.copy(fontWeight = FontWeight.Bold))
TypeRow("H4", IntelliJTheme.typography.h4)
TypeRow("Default", IntelliJTheme.typography.default)
TypeRow("Default Bold", IntelliJTheme.typography.default.copy(fontWeight = FontWeight.Bold))
TypeRow("Medium", IntelliJTheme.typography.medium)
TypeRow("Medium Bold", IntelliJTheme.typography.medium.copy(fontWeight = FontWeight.Bold))
TypeRow("Small", IntelliJTheme.typography.small)
}
}
}
}
}
}

Expand All @@ -153,4 +236,4 @@ private fun TabScope<String>.Section(key: String, caption: String) {
Tab(key) {
Text(caption)
}
}
}
2 changes: 1 addition & 1 deletion themes/intellij/src/main/kotlin/org/jetbrains/jewel/theme/intellij/IntelliJPalette.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ data class IntelliJPalette(

val background: Color, // Panel.background

val text: Color, // Panel.foreground
val text: Color, // Label.foreground
val textDisabled: Color, // Label.disabledForeground

val controlStroke: Color, // Component.borderColor
Expand Down
12 changes: 8 additions & 4 deletions themes/intellij/src/main/kotlin/org/jetbrains/jewel/theme/intellij/IntelliJTypography.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,17 @@ package org.jetbrains.jewel.theme.intellij
import androidx.compose.ui.text.TextStyle

data class IntelliJTypography(
val h0: TextStyle,
val h1: TextStyle,
val h2: TextStyle,
val h3: TextStyle,
val h4: TextStyle,
val default: TextStyle,
val medium: TextStyle,
val small: TextStyle,
val button: TextStyle,
val checkBox: TextStyle,
val radioButton: TextStyle,
val textField: TextStyle,
val slider: TextStyle
) {

companion object
}
)
2 changes: 1 addition & 1 deletion themes/intellij/src/main/kotlin/org/jetbrains/jewel/theme/intellij/components/Table.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -108,7 +108,7 @@ class TableState(
mapOf(
"initialFirstVisibleRowIndex" to it.firstVisibleRowIndex,
"initialFirstVisibleRowScrollOffset" to it.firstVisibleRowScrollOffset,
*it.dividerOffsets.map { (k, v) -> it.toString() to v }.toTypedArray()
*it.dividerOffsets.map { (_, v) -> it.toString() to v }.toTypedArray()
)
},
restore = {
Expand Down