diff --git a/apps/cutelauncher/app.js b/apps/cutelauncher/app.js index a88c6a57c..b4fea218a 100644 --- a/apps/cutelauncher/app.js +++ b/apps/cutelauncher/app.js @@ -42,7 +42,7 @@ Bangle.drawWidgets = () => { }; Bangle.loadWidgets = () => { }; - const ITEM_HEIGHT = 125; + const ITEM_HEIGHT = 110; E.showScroller({ h: ITEM_HEIGHT, @@ -55,75 +55,31 @@ let icon = apps[idx].icon; let iconWidth = icon.width || 48; let iconHeight = icon.height || 48; - let maxSize = 60; + let maxSize = 70; let scale = Math.min(maxSize / iconWidth, maxSize / iconHeight); let scaledHeight = Math.floor(iconHeight * scale); // Center the icon horizontally let iconX = rect.x + (rect.w - maxSize) / 2; + g.drawImage(icon, iconX, rect.y, { scale: scale }); - // Define rectangle size (independent of icon size) - const rectSize = 100; - const rectX = rect.x + (rect.w - rectSize) / 2; + // Draw app name with ellipsis if needed + let name = apps[idx].name; + let maxWidth = rect.w - 80; // Leave some padding + let textWidth = g.stringWidth(name); - // Draw rounded rectangle background using polygon - g.setColor(g.theme.bg2); - const r = 20; // increased radius from 10 to 20 - const x1 = rectX - 5; - const y1 = rect.y + 5; - const x2 = rectX + rectSize + 5; - const y2 = rect.y + rectSize + 15; - - // Create points for a rounded rectangle (approximating curves with more points per corner) - g.fillPoly([ - x1 + r, y1, // Top edge - x2 - r, y1, - x2 - r * 0.7, y1, - x2 - r * 0.4, y1 + r * 0.1, - x2 - r * 0.1, y1 + r * 0.4, // Top right corner - x2, y1 + r * 0.7, - x2, y1 + r, - x2, y2 - r, // Right edge - x2, y2 - r * 0.7, - x2 - r * 0.1, y2 - r * 0.4, - x2 - r * 0.4, y2 - r * 0.1, // Bottom right corner - x2 - r * 0.7, y2, - x2 - r, y2, - x1 + r, y2, // Bottom edge - x1 + r * 0.7, y2, - x1 + r * 0.4, y2 - r * 0.1, - x1 + r * 0.1, y2 - r * 0.4, // Bottom left corner - x1, y2 - r * 0.7, - x1, y2 - r, - x1, y1 + r, // Left edge - x1, y1 + r * 0.7, - x1 + r * 0.1, y1 + r * 0.4, - x1 + r * 0.4, y1 + r * 0.1, // Top left corner - x1 + r * 0.7, y1 - ]); - g.setColor(g.theme.fg); - - // Draw icon centered in the top portion - let iconPadding = 12; - // Center icon within the rectangle - let iconXInRect = rectX + (rectSize - maxSize) / 2; - g.setBgColor(g.theme.bg2).drawImage(icon, iconXInRect, rect.y + iconPadding + 10, { scale: scale }); - - // Draw app name with ellipsis if too long - const maxWidth = rectSize - 10; - let text = apps[idx].name; - let textWidth = g.stringWidth(text); if (textWidth > maxWidth) { - const ellipsis = "..."; - const ellipsisWidth = g.stringWidth(ellipsis); - while (textWidth + ellipsisWidth > maxWidth && text.length > 0) { - text = text.slice(0, -1); - textWidth = g.stringWidth(text); + // Add ellipsis and truncate text + while (textWidth > maxWidth - g.stringWidth("...") && name.length > 1) { + name = name.slice(0, -1); + textWidth = g.stringWidth(name); } - text = text + ellipsis; + name += "..."; } - let textY = rect.y + iconPadding + scaledHeight + 18; - g.drawString(text, rectX + rectSize / 2, textY); + + // Position text below icon with padding + let textY = rect.y + scaledHeight + 4; + g.drawString(name, rect.x + rect.w / 2, textY); }, select: (idx) => { // Launch the selected app diff --git a/apps/cutelauncher/metadata.json b/apps/cutelauncher/metadata.json index abd857ad1..0d8e1ec17 100644 --- a/apps/cutelauncher/metadata.json +++ b/apps/cutelauncher/metadata.json @@ -1,7 +1,7 @@ { "id": "cutelauncher", "name": "Cute Launcher", - "version": "0.08", + "version": "0.09", "description": "A simple launcher app for Bangle.js 2 that makes use of the full touchscreen", "icon": "app.png", "type": "launch",