font icon improvement

font icon improvement

composeApp/src/commonMain/kotlin/org/mjdev/desktop/components/appsmenu/components/AppsMenuCategory.kt

@@ -65,8 +65,8 @@ fun AppsMenuCategory(
                 iconSize = iconSize,
                 iconColor = textColor,
                 iconBackgroundColor = backgroundColor,
-                outerPadding = PaddingValues(2.dp),
-                innerPadding = PaddingValues(0.dp),
+                outerPadding = PaddingValues(0.dp),
+                innerPadding = PaddingValues(4.dp),
             )
             TextAny(
                 modifier = Modifier.padding(start = 4.dp).fillMaxWidth(),

composeApp/src/commonMain/kotlin/org/mjdev/desktop/components/desktoppanel/applets/DesktopMenuIcon.kt

@@ -3,6 +3,7 @@ package org.mjdev.desktop.components.desktoppanel.applets
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.Row
 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.unit.DpSize
@@ -19,15 +20,17 @@ fun DesktopMenuIcon(
     iconSize: DpSize = DpSize(56.dp, 56.dp),
     iconPadding: PaddingValues = PaddingValues(2.dp),
     iconOuterPadding: PaddingValues = PaddingValues(2.dp),
+    iconName :String = "menu" ,
     onTooltip: (item: Any?) -> Unit = {},
     onClick: () -> Unit = {},
     onContextMenuClick: () -> Unit = {}
 ) = Row(
-    modifier = modifier
+    modifier = modifier,
+    verticalAlignment = Alignment.CenterVertically,
 ) {
     DesktopPanelIcon(
         contentDescription = "System menu",
-        icon = "menu",
+        iconName = iconName,
         iconColor = iconColor,
         iconBackgroundColor = iconBackgroundColor,
         iconBackgroundHover = Color.White.copy(alpha = 0.4f),

composeApp/src/commonMain/kotlin/org/mjdev/desktop/components/desktoppanel/applets/DesktopPanelIcon.kt

@@ -38,23 +38,25 @@ import org.mjdev.desktop.extensions.PaddingValues.size
 @Composable
 fun DesktopPanelIcon(
     app: IApp? = null,
-    icon: String? = null,
+    iconName: String? = null,
     iconColor: Color = Color.Black,
     iconBackgroundColor: Color = Color.White,
     iconBackgroundHover: Color = Color.White,
     iconColorRunning: Color = Color.White,
     iconSize: DpSize = DpSize(48.dp, 48.dp),
-    iconPadding: PaddingValues = PaddingValues(2.dp),
-    iconOuterPadding: PaddingValues = PaddingValues(2.dp),
+    iconPadding: PaddingValues = PaddingValues(4.dp),
+    iconOuterPadding: PaddingValues = PaddingValues(4.dp),
     iconState: MutableState<Boolean> = rememberState(false),
     contentDescription: String? = null,
+    innerPadding: PaddingValues = PaddingValues(4.dp),
+    outerPadding: PaddingValues = PaddingValues(4.dp),
     onTooltip: (item: Any?) -> Unit = {},
     onContextMenuClick: () -> Unit = {},
     onClick: () -> Unit = {},
 ) = withDesktopContext {
-    val materialIcon: Int = remember(app, icon) {
-        val iconName = app?.name ?: icon // todo better guess
-        iconSet.iconForName(iconName) ?: 0
+    val materialIcon: Int = remember(app, iconName) {
+        val icn = app?.name ?: iconName // todo better guess
+        iconSet.iconForName(icn) ?: 0
     }
     val background = when {
         iconState.value -> iconBackgroundHover

composeApp/src/commonMain/kotlin/org/mjdev/desktop/components/file/FolderIcon.kt

@@ -38,6 +38,8 @@ fun FolderIcon(
     dragEnabled: Boolean = true,
     iconSize: DpSize = DpSize(128.dp, 128.dp),
     modifier: Modifier = Modifier,
+    innerPadding: PaddingValues = PaddingValues(4.dp),
+    outerPadding: PaddingValues = PaddingValues(4.dp),
     onDragStart: () -> Unit = {},
     onDragEnd: () -> Unit = {},
     onContextMenuClick: () -> Unit = {},
@@ -72,8 +74,8 @@ fun FolderIcon(
                     iconSize = iconSize,
                     iconColor = textColor,
                     iconBackgroundColor = iconsTintColor.alpha(0.4f),
-                    outerPadding = PaddingValues(8.dp),
-                    innerPadding = PaddingValues(8.dp),
+                    outerPadding = outerPadding,
+                    innerPadding = innerPadding,
                     onClick = onClick,
                     onRightClick = onContextMenuClick
                 )

composeApp/src/commonMain/kotlin/org/mjdev/desktop/components/file/FolderView.kt

@@ -1,6 +1,7 @@
 package org.mjdev.desktop.components.file
 
 import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.aspectRatio
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
@@ -45,6 +46,8 @@ fun FolderView(
     showHomeFolder: Boolean = false,
     iconSpacing: Dp = 2.dp,
     iconSize: DpSize = DpSize(128.dp, 128.dp),
+    innerIconPadding: PaddingValues = PaddingValues(8.dp),
+    outerIconPadding: PaddingValues = PaddingValues(4.dp),
     path: Path = cwd,
 //    orientation: Orientation = Orientation.Vertical, // todo
     guideVisibleState: VisibilityState = rememberVisibilityState(false),
@@ -61,6 +64,8 @@ fun FolderView(
             FolderIcon(
                 modifier = Modifier.padding(iconSpacing),
                 iconSize = iconSize,
+                outerPadding = outerIconPadding,
+                innerPadding = innerIconPadding,
             )
         }
     ) { size ->

composeApp/src/commonMain/kotlin/org/mjdev/desktop/components/fonticon/FontIcon.kt

@@ -4,6 +4,10 @@ package org.mjdev.desktop.components.fonticon
 
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.PaddingValues
+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.shape.CircleShape
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
@@ -24,15 +28,15 @@ import org.jetbrains.compose.ui.tooling.preview.Preview
 @Composable
 fun FontIcon(
     modifier: Modifier = Modifier,
-    iconId: Int = 0,
+    iconId: Int = "x".toInt(),
     iconicFont: IFont? = null,
     iconSize: DpSize = DpSize(32.dp, 32.dp),
     iconColor: Color = Color.Black,
     iconBackgroundColor: Color = Color.White,
-    innerPadding: PaddingValues = PaddingValues(2.dp),
-    contentDescription: String = "",
-    outerPadding: PaddingValues = PaddingValues(2.dp),
+    innerPadding: PaddingValues = PaddingValues(4.dp),
+    outerPadding: PaddingValues = PaddingValues(4.dp),
     iconShape: Shape = CircleShape,
+    contentDescription: String = "",
     onRightClick: () -> Unit = {},
     onClick: () -> Unit = {}
 ) = withDesktopContext {
@@ -47,7 +51,6 @@ fun FontIcon(
         outerPadding = outerPadding,
         customContent = {
             AutoResizeText(
-                modifier = Modifier.align(Alignment.Center),
                 text = iconId.toChar().toString(),
                 color = iconColor,
                 fontFamily = (iconicFont ?: theme.iconSet).fontFamily,
@@ -100,9 +103,18 @@ fun FontIcon(
 @Composable
 fun FontIconPreview() = preview {
     Column {
-        FontIcon(iconId = 0)
-        FontIcon(iconName = "")
-        FontIcon(iconName = "tv")
-        FontIcon(iconName = "browser")
+        Column {
+            FontIcon(iconId = 0)
+            FontIcon(iconName = "")
+            FontIcon(iconName = "tv")
+            FontIcon(iconName = "browser")
+        }
+        Spacer(modifier = Modifier.height(32.dp).fillMaxWidth())
+        Row {
+            FontIcon(iconId = 0)
+            FontIcon(iconName = "")
+            FontIcon(iconName = "tv")
+            FontIcon(iconName = "browser")
+        }
     }
 }

composeApp/src/commonMain/kotlin/org/mjdev/desktop/components/text/AutoResizeText.kt

@@ -2,9 +2,9 @@ package org.mjdev.desktop.components.text
 
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.BoxWithConstraints
-import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.offset
 import androidx.compose.foundation.layout.size
-import androidx.compose.material.Text
+import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
@@ -26,7 +26,7 @@ import kotlin.math.max
 @Suppress("FunctionName")
 @Composable
 fun AutoResizeText(
-    text: String = "A",
+    text: String = "x",
     modifier: Modifier = Modifier,
     color: Color = Color.Unspecified,
     fontStyle: FontStyle? = FontStyle.Normal,
@@ -45,15 +45,13 @@ fun AutoResizeText(
         maxFontSize.value,
         max(
             minFontSize.value,
-            constraints
-                .maxWidth
-                .coerceAtMost(
+            constraints.maxWidth.coerceAtMost(
                     constraints.maxHeight
-                ).toFloat() / 2
+            ).toFloat()
         )
     ).sp
+    val verticalOffset = -(calculatedFontSize.value * 0.1f).dp
     Text(
-        modifier = modifier,
         text = text,
         color = color,
         fontStyle = fontStyle,
@@ -63,6 +61,9 @@ fun AutoResizeText(
         maxLines = maxLines,
         textAlign = textAlign,
         overflow = TextOverflow.Clip,
+        modifier = Modifier.offset(
+            y = verticalOffset
+        )
     )
 }
 
@@ -73,6 +74,6 @@ fun AutoResizeTextPreview() = preview(64, 64) {
         modifier = Modifier
             .background(Color.White)
             .size(64.dp),
-        text = "o",
+        text = "x",
     )
 }