Skip to content

Improve CN1 playground side menu dark mode, disable swipe, and add mobile responsiveness #4699

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

Merged
liannacasper merged 5 commits into from
Apr 4, 2026
+112 −13
Merged

Improve CN1 playground side menu dark mode, disable swipe, and add mobile responsiveness #4699

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
4ab6f9e
Improve playground menu theming and mobile layout
liannacasper Apr 4, 2026
7aa838e
Refine playground portrait tabs and side menu theming
liannacasper Apr 4, 2026
6b83506
Fix folded side menu dark palette and tab uiid refresh
liannacasper Apr 4, 2026
a7ad001
Reapply menu/tab palettes after theme resets
liannacasper Apr 4, 2026
aa864d4
Force side menu container theming and selected tab contrast
liannacasper Apr 4, 2026
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
14 changes: 14 additions & 0 deletions scripts/cn1playground/common/src/main/css/theme.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@
#Constants {
includeNativeBool: true;
defaultSourceDPIInt: "0";
sideMenuSizeLandscapeInt: "75";
sideMenuSizeTabLandscapeInt: "75";
}

/** Style for Button class */
Expand Down Expand Up @@ -397,6 +399,18 @@ TabDark {
text-align: center;
}

TabSelected {
background: #ffffff;
color: #111827;
border: 1px solid #94a3b8;
}

TabSelectedDark {
background: #1f2937;
color: #f8fafc;
border: 1px solid #64748b;
}

TabsContainer {
background: #e5e7eb;
}
Expand Down
111 changes: 98 additions & 13 deletions scripts/cn1playground/common/src/main/java/com/codenameone/playground/CN1Playground.java
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,6 @@
import com.codename1.ui.Toolbar;
import com.codename1.ui.layouts.BorderLayout;
import com.codename1.ui.layouts.BoxLayout;
import com.codename1.ui.layouts.GridLayout;
import com.codename1.ui.plaf.UIManager;
import com.codename1.ui.util.Resources;
import com.codename1.ui.util.UITimer;
Expand Down Expand Up @@ -47,6 +46,7 @@ public class CN1Playground extends Lifecycle {
private PlaygroundInspector inspector;
private Container previewRoot;
private Container historyMenu;
private final List<Component> sideMenuComponents = new ArrayList<>();
private Resources theme;
private boolean websiteDarkMode = DEFAULT_DARK_MODE;
private String currentScript;
Expand Down Expand Up @@ -155,12 +155,12 @@ private Container createPreviewRoot() {
}

private Component createMainContent(Tabs tabs, Container previewPanel) {
if (CN.getDisplayWidth() >= 900) {
tabs.setSwipeActivated(false);
if (!Display.getInstance().isPortrait()) {
return new SplitPane(SplitPane.HORIZONTAL_SPLIT, tabs, previewPanel, "25%", "50%", "75%");
}
Container stacked = new Container(new GridLayout(2, 1));
stacked.addAll(tabs, previewPanel);
return stacked;
tabs.addTab("Preview", previewPanel);
return tabs;
}

private void runScript(Form form) {
Expand Down Expand Up @@ -242,29 +242,36 @@ private void markEmbeddedPreviewRoles(Component component) {
}

private void installSideMenu(Toolbar toolbar) {
Toolbar.setEnableSideMenuSwipe(false);
PlaygroundMenuSection shareSection = new PlaygroundMenuSection("Share");
toolbar.addComponentToSideMenu(shareSection);
toolbar.addComponentToSideMenu(createSideMenuButton(SHARE_BUTTON_LABEL, () -> {
addSideMenuComponent(toolbar, shareSection);
addSideMenuComponent(toolbar, createSideMenuButton(SHARE_BUTTON_LABEL, () -> {
copyCurrentSourceUrl();
toolbar.closeSideMenu();
}));

PlaygroundMenuSection samplesSection = new PlaygroundMenuSection("Samples");
toolbar.addComponentToSideMenu(samplesSection);
addSideMenuComponent(toolbar, samplesSection);
for (PlaygroundExamples.Sample sample : PlaygroundExamples.SAMPLES) {
toolbar.addComponentToSideMenu(createSideMenuButton(sample.title, () -> {
addSideMenuComponent(toolbar, createSideMenuButton(sample.title, () -> {
setScript(sample.script, true);
toolbar.closeSideMenu();
}));
}

PlaygroundMenuSection historySection = new PlaygroundMenuSection("History");
toolbar.addComponentToSideMenu(historySection);
toolbar.addComponentToSideMenu(historyMenu);
addSideMenuComponent(toolbar, historySection);
addSideMenuComponent(toolbar, historyMenu);

refreshHistoryMenu(toolbar, PlaygroundStateStore.loadHistory());
}

private void addSideMenuComponent(Toolbar toolbar, Component component) {
applyWebsiteTheme(component, websiteDarkMode);
sideMenuComponents.add(component);
toolbar.addComponentToSideMenu(component);
}

private void refreshHistoryMenu(Toolbar toolbar, List<PlaygroundStateStore.HistoryEntry> history) {
historyMenu.removeAll();

Expand Down Expand Up @@ -294,13 +301,15 @@ private MultiButton createHistoryButton(PlaygroundStateStore.HistoryEntry entry,
setScript(entry.script, true);
toolbar.closeSideMenu();
});
applyWebsiteTheme(button, websiteDarkMode);
return button;
}

private Button createSideMenuButton(String text, Runnable action) {
Button button = new Button(text);
button.setUIID("PlaygroundSideCommand");
button.addActionListener(e -> action.run());
applyWebsiteTheme(button, websiteDarkMode);
return button;
}

Expand Down Expand Up @@ -451,6 +460,7 @@ private void applyCurrentCss() {
return;
}
restoreThemeDefaults();
applySideMenuPalette(websiteDarkMode);
List<PlaygroundRunner.Diagnostic> diagnostics = new ArrayList<PlaygroundRunner.Diagnostic>();
List<PlaygroundRunner.InlineMessage> messages = new ArrayList<PlaygroundRunner.InlineMessage>();
try {
Expand All @@ -467,6 +477,7 @@ private void applyCurrentCss() {
cssEditor.setMarkers(diagnostics);
cssEditor.setInlineMessages(messages);
cssEditor.setUiidCompletions(PlaygroundCssSupport.collectVisibleUiids(previewRoot));
applyTabsTheme(websiteDarkMode);
appForm.refreshTheme();
}

Expand Down Expand Up @@ -561,6 +572,7 @@ private void initWebsiteThemeSync(Form form) {
websiteThemeNative = NativeLookup.create(WebsiteThemeNative.class);
refreshWebsiteTheme(form);
UITimer.timer(900, true, form, () -> refreshWebsiteTheme(form));
UITimer.timer(250, true, form, this::syncOpenSideMenuTheme);
}

private void notifyWebsiteUiReady() {
Expand Down Expand Up @@ -636,6 +648,7 @@ private void applyDarkMode(Form form, boolean dark) {
if (!websiteThemeInitialized || dark != websiteDarkMode) {
websiteDarkMode = dark;
websiteThemeInitialized = true;
applySideMenuPalette(dark);
applyWebsiteTheme(form, dark);
applyTabsTheme(dark);
form.refreshTheme();
Expand All @@ -649,6 +662,62 @@ private void applyDarkMode(Form form, boolean dark) {
if (inspector != null) {
inspector.applyTheme(dark);
}
for (Component cmp : sideMenuComponents) {
applyWebsiteTheme(cmp, dark);
}
}
}

private void applySideMenuPalette(boolean dark) {
Hashtable sideMenuPalette = new Hashtable();
int bgColor = dark ? 0x0f172a : 0xffffff;
int borderColor = dark ? 0x1f2937 : 0xcccccc;

sideMenuPalette.put("SideNavigationPanel.bgColor", bgColor);
sideMenuPalette.put("SideNavigationPanel.bgTransparency", 255);
sideMenuPalette.put("SideNavigationPanelDark.bgColor", bgColor);
sideMenuPalette.put("SideNavigationPanelDark.bgTransparency", 255);
sideMenuPalette.put("RightSideNavigationPanel.bgColor", bgColor);
sideMenuPalette.put("RightSideNavigationPanel.bgTransparency", 255);

sideMenuPalette.put("StatusBarSideMenu.bgColor", bgColor);
sideMenuPalette.put("StatusBarSideMenu.bgTransparency", 255);
sideMenuPalette.put("StatusBarSideMenuDark.bgColor", bgColor);
sideMenuPalette.put("StatusBarSideMenuDark.bgTransparency", 255);

sideMenuPalette.put("SideCommand.bgColor", bgColor);
sideMenuPalette.put("SideCommand.bgTransparency", 255);
sideMenuPalette.put("SideCommand.border", com.codename1.ui.plaf.Border.createLineBorder(2, borderColor));
UIManager.getInstance().addThemeProps(sideMenuPalette);
}

private void syncOpenSideMenuTheme() {
Form current = Display.getInstance().getCurrent();
if (current == null) {
return;
}
applySideMenuContainerTheme(current);
}

private void applySideMenuContainerTheme(Component component) {
if (component == null) {
return;
}
String uiid = component.getUIID();
if ("SideNavigationPanel".equals(uiid)
|| "SideNavigationPanelDark".equals(uiid)
|| "RightSideNavigationPanel".equals(uiid)
|| "StatusBarSideMenu".equals(uiid)
|| "StatusBarSideMenuDark".equals(uiid)) {
applyWebsiteTheme(component, websiteDarkMode);
component.getAllStyles().setBgTransparency(255);
component.getAllStyles().setBgColor(websiteDarkMode ? 0x0f172a : 0xffffff);
}
if (component instanceof Container) {
Container cnt = (Container) component;
for (int i = 0; i < cnt.getComponentCount(); i++) {
applySideMenuContainerTheme(cnt.getComponentAt(i));
}
}
}

Expand Down Expand Up @@ -710,6 +779,16 @@ private boolean supportsDarkVariant(String uiid) {
case "PlaygroundTitle":
case "PlaygroundPanel":
case "PlaygroundPreview":
case "SideNavigationPanel":
case "RightSideNavigationPanel":
case "StatusBarSideMenu":
case "PlaygroundSideCommand":
case "PlaygroundSideCommandLine1":
case "PlaygroundSideCommandLine2":
case "PlaygroundMenuSection":
case "PlaygroundMenuSectionTitle":
case "PlaygroundMenuEmpty":
case "PlaygroundMenuContainer":
case "PlaygroundEmbeddedForm":
case "PlaygroundEmbeddedTitleArea":
case "PlaygroundInspectorRoot":
Expand All @@ -730,8 +809,14 @@ private boolean supportsDarkVariant(String uiid) {

private void applyTabsTheme(boolean dark) {
if (editorTabs != null) {
editorTabs.setUIID(dark ? "PlaygroundEditorTabsDark" : "PlaygroundEditorTabs");
editorTabs.setTabUIID(dark ? "TabDark" : "Tab");
String tabsUiid = dark ? "PlaygroundEditorTabsDark" : "PlaygroundEditorTabs";
String tabUiid = dark ? "TabDark" : "Tab";
editorTabs.setUIID(tabsUiid);
editorTabs.setTabUIID(tabUiid);
Container tabsContainer = editorTabs.getTabsContainer();
for (int i = 0; i < tabsContainer.getComponentCount(); i++) {
tabsContainer.getComponentAt(i).setUIID(tabUiid);
}
editorTabs.refreshTheme();
editorTabs.revalidate();
}
Expand Down
Loading