Skip to content

Commit 810e911

Browse files
liannacasperliannacasper
authored
Improve playground side menu dark mode, disabled swipe, and added mobile responsiveness
Related work for #4638 * Improve playground menu theming and mobile layout * Refine playground portrait tabs and side menu theming * Fix folded side menu dark palette and tab uiid refresh
1 parent ca8a78c commit 810e911

2 files changed

Lines changed: 112 additions & 13 deletions

File tree

‎scripts/cn1playground/common/src/main/css/theme.css‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@
22
#Constants {
33
includeNativeBool: true;
44
defaultSourceDPIInt: "0";
5+
sideMenuSizeLandscapeInt: "75";
6+
sideMenuSizeTabLandscapeInt: "75";
57
}
68

79
/** Style for Button class */
@@ -397,6 +399,18 @@ TabDark {
397399
text-align: center;
398400
}
399401

402+
TabSelected {
403+
background: #ffffff;
404+
color: #111827;
405+
border: 1px solid #94a3b8;
406+
}
407+
408+
TabSelectedDark {
409+
background: #1f2937;
410+
color: #f8fafc;
411+
border: 1px solid #64748b;
412+
}
413+
400414
TabsContainer {
401415
background: #e5e7eb;
402416
}

‎scripts/cn1playground/common/src/main/java/com/codenameone/playground/CN1Playground.java‎

Lines changed: 98 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,6 @@
1919
import com.codename1.ui.Toolbar;
2020
import com.codename1.ui.layouts.BorderLayout;
2121
import com.codename1.ui.layouts.BoxLayout;
22-
import com.codename1.ui.layouts.GridLayout;
2322
import com.codename1.ui.plaf.UIManager;
2423
import com.codename1.ui.util.Resources;
2524
import com.codename1.ui.util.UITimer;
@@ -47,6 +46,7 @@ public class CN1Playground extends Lifecycle {
4746
private PlaygroundInspector inspector;
4847
private Container previewRoot;
4948
private Container historyMenu;
49+
private final List<Component> sideMenuComponents = new ArrayList<>();
5050
private Resources theme;
5151
private boolean websiteDarkMode = DEFAULT_DARK_MODE;
5252
private String currentScript;
@@ -155,12 +155,12 @@ private Container createPreviewRoot() {
155155
}
156156

157157
private Component createMainContent(Tabs tabs, Container previewPanel) {
158-
if (CN.getDisplayWidth() >= 900) {
158+
tabs.setSwipeActivated(false);
159+
if (!Display.getInstance().isPortrait()) {
159160
return new SplitPane(SplitPane.HORIZONTAL_SPLIT, tabs, previewPanel, "25%", "50%", "75%");
160161
}
161-
Container stacked = new Container(new GridLayout(2, 1));
162-
stacked.addAll(tabs, previewPanel);
163-
return stacked;
162+
tabs.addTab("Preview", previewPanel);
163+
return tabs;
164164
}
165165

166166
private void runScript(Form form) {
@@ -242,29 +242,36 @@ private void markEmbeddedPreviewRoles(Component component) {
242242
}
243243

244244
private void installSideMenu(Toolbar toolbar) {
245+
Toolbar.setEnableSideMenuSwipe(false);
245246
PlaygroundMenuSection shareSection = new PlaygroundMenuSection("Share");
246-
toolbar.addComponentToSideMenu(shareSection);
247-
toolbar.addComponentToSideMenu(createSideMenuButton(SHARE_BUTTON_LABEL, () -> {
247+
addSideMenuComponent(toolbar, shareSection);
248+
addSideMenuComponent(toolbar, createSideMenuButton(SHARE_BUTTON_LABEL, () -> {
248249
copyCurrentSourceUrl();
249250
toolbar.closeSideMenu();
250251
}));
251252

252253
PlaygroundMenuSection samplesSection = new PlaygroundMenuSection("Samples");
253-
toolbar.addComponentToSideMenu(samplesSection);
254+
addSideMenuComponent(toolbar, samplesSection);
254255
for (PlaygroundExamples.Sample sample : PlaygroundExamples.SAMPLES) {
255-
toolbar.addComponentToSideMenu(createSideMenuButton(sample.title, () -> {
256+
addSideMenuComponent(toolbar, createSideMenuButton(sample.title, () -> {
256257
setScript(sample.script, true);
257258
toolbar.closeSideMenu();
258259
}));
259260
}
260261

261262
PlaygroundMenuSection historySection = new PlaygroundMenuSection("History");
262-
toolbar.addComponentToSideMenu(historySection);
263-
toolbar.addComponentToSideMenu(historyMenu);
263+
addSideMenuComponent(toolbar, historySection);
264+
addSideMenuComponent(toolbar, historyMenu);
264265

265266
refreshHistoryMenu(toolbar, PlaygroundStateStore.loadHistory());
266267
}
267268

269+
private void addSideMenuComponent(Toolbar toolbar, Component component) {
270+
applyWebsiteTheme(component, websiteDarkMode);
271+
sideMenuComponents.add(component);
272+
toolbar.addComponentToSideMenu(component);
273+
}
274+
268275
private void refreshHistoryMenu(Toolbar toolbar, List<PlaygroundStateStore.HistoryEntry> history) {
269276
historyMenu.removeAll();
270277

@@ -294,13 +301,15 @@ private MultiButton createHistoryButton(PlaygroundStateStore.HistoryEntry entry,
294301
setScript(entry.script, true);
295302
toolbar.closeSideMenu();
296303
});
304+
applyWebsiteTheme(button, websiteDarkMode);
297305
return button;
298306
}
299307

300308
private Button createSideMenuButton(String text, Runnable action) {
301309
Button button = new Button(text);
302310
button.setUIID("PlaygroundSideCommand");
303311
button.addActionListener(e -> action.run());
312+
applyWebsiteTheme(button, websiteDarkMode);
304313
return button;
305314
}
306315

@@ -451,6 +460,7 @@ private void applyCurrentCss() {
451460
return;
452461
}
453462
restoreThemeDefaults();
463+
applySideMenuPalette(websiteDarkMode);
454464
List<PlaygroundRunner.Diagnostic> diagnostics = new ArrayList<PlaygroundRunner.Diagnostic>();
455465
List<PlaygroundRunner.InlineMessage> messages = new ArrayList<PlaygroundRunner.InlineMessage>();
456466
try {
@@ -467,6 +477,7 @@ private void applyCurrentCss() {
467477
cssEditor.setMarkers(diagnostics);
468478
cssEditor.setInlineMessages(messages);
469479
cssEditor.setUiidCompletions(PlaygroundCssSupport.collectVisibleUiids(previewRoot));
480+
applyTabsTheme(websiteDarkMode);
470481
appForm.refreshTheme();
471482
}
472483

@@ -561,6 +572,7 @@ private void initWebsiteThemeSync(Form form) {
561572
websiteThemeNative = NativeLookup.create(WebsiteThemeNative.class);
562573
refreshWebsiteTheme(form);
563574
UITimer.timer(900, true, form, () -> refreshWebsiteTheme(form));
575+
UITimer.timer(250, true, form, this::syncOpenSideMenuTheme);
564576
}
565577

566578
private void notifyWebsiteUiReady() {
@@ -636,6 +648,7 @@ private void applyDarkMode(Form form, boolean dark) {
636648
if (!websiteThemeInitialized || dark != websiteDarkMode) {
637649
websiteDarkMode = dark;
638650
websiteThemeInitialized = true;
651+
applySideMenuPalette(dark);
639652
applyWebsiteTheme(form, dark);
640653
applyTabsTheme(dark);
641654
form.refreshTheme();
@@ -649,6 +662,62 @@ private void applyDarkMode(Form form, boolean dark) {
649662
if (inspector != null) {
650663
inspector.applyTheme(dark);
651664
}
665+
for (Component cmp : sideMenuComponents) {
666+
applyWebsiteTheme(cmp, dark);
667+
}
668+
}
669+
}
670+
671+
private void applySideMenuPalette(boolean dark) {
672+
Hashtable sideMenuPalette = new Hashtable();
673+
int bgColor = dark ? 0x0f172a : 0xffffff;
674+
int borderColor = dark ? 0x1f2937 : 0xcccccc;
675+
676+
sideMenuPalette.put("SideNavigationPanel.bgColor", bgColor);
677+
sideMenuPalette.put("SideNavigationPanel.bgTransparency", 255);
678+
sideMenuPalette.put("SideNavigationPanelDark.bgColor", bgColor);
679+
sideMenuPalette.put("SideNavigationPanelDark.bgTransparency", 255);
680+
sideMenuPalette.put("RightSideNavigationPanel.bgColor", bgColor);
681+
sideMenuPalette.put("RightSideNavigationPanel.bgTransparency", 255);
682+
683+
sideMenuPalette.put("StatusBarSideMenu.bgColor", bgColor);
684+
sideMenuPalette.put("StatusBarSideMenu.bgTransparency", 255);
685+
sideMenuPalette.put("StatusBarSideMenuDark.bgColor", bgColor);
686+
sideMenuPalette.put("StatusBarSideMenuDark.bgTransparency", 255);
687+
688+
sideMenuPalette.put("SideCommand.bgColor", bgColor);
689+
sideMenuPalette.put("SideCommand.bgTransparency", 255);
690+
sideMenuPalette.put("SideCommand.border", com.codename1.ui.plaf.Border.createLineBorder(2, borderColor));
691+
UIManager.getInstance().addThemeProps(sideMenuPalette);
692+
}
693+
694+
private void syncOpenSideMenuTheme() {
695+
Form current = Display.getInstance().getCurrent();
696+
if (current == null) {
697+
return;
698+
}
699+
applySideMenuContainerTheme(current);
700+
}
701+
702+
private void applySideMenuContainerTheme(Component component) {
703+
if (component == null) {
704+
return;
705+
}
706+
String uiid = component.getUIID();
707+
if ("SideNavigationPanel".equals(uiid)
708+
|| "SideNavigationPanelDark".equals(uiid)
709+
|| "RightSideNavigationPanel".equals(uiid)
710+
|| "StatusBarSideMenu".equals(uiid)
711+
|| "StatusBarSideMenuDark".equals(uiid)) {
712+
applyWebsiteTheme(component, websiteDarkMode);
713+
component.getAllStyles().setBgTransparency(255);
714+
component.getAllStyles().setBgColor(websiteDarkMode ? 0x0f172a : 0xffffff);
715+
}
716+
if (component instanceof Container) {
717+
Container cnt = (Container) component;
718+
for (int i = 0; i < cnt.getComponentCount(); i++) {
719+
applySideMenuContainerTheme(cnt.getComponentAt(i));
720+
}
652721
}
653722
}
654723

@@ -710,6 +779,16 @@ private boolean supportsDarkVariant(String uiid) {
710779
case "PlaygroundTitle":
711780
case "PlaygroundPanel":
712781
case "PlaygroundPreview":
782+
case "SideNavigationPanel":
783+
case "RightSideNavigationPanel":
784+
case "StatusBarSideMenu":
785+
case "PlaygroundSideCommand":
786+
case "PlaygroundSideCommandLine1":
787+
case "PlaygroundSideCommandLine2":
788+
case "PlaygroundMenuSection":
789+
case "PlaygroundMenuSectionTitle":
790+
case "PlaygroundMenuEmpty":
791+
case "PlaygroundMenuContainer":
713792
case "PlaygroundEmbeddedForm":
714793
case "PlaygroundEmbeddedTitleArea":
715794
case "PlaygroundInspectorRoot":
@@ -730,8 +809,14 @@ private boolean supportsDarkVariant(String uiid) {
730809

731810
private void applyTabsTheme(boolean dark) {
732811
if (editorTabs != null) {
733-
editorTabs.setUIID(dark ? "PlaygroundEditorTabsDark" : "PlaygroundEditorTabs");
734-
editorTabs.setTabUIID(dark ? "TabDark" : "Tab");
812+
String tabsUiid = dark ? "PlaygroundEditorTabsDark" : "PlaygroundEditorTabs";
813+
String tabUiid = dark ? "TabDark" : "Tab";
814+
editorTabs.setUIID(tabsUiid);
815+
editorTabs.setTabUIID(tabUiid);
816+
Container tabsContainer = editorTabs.getTabsContainer();
817+
for (int i = 0; i < tabsContainer.getComponentCount(); i++) {
818+
tabsContainer.getComponentAt(i).setUIID(tabUiid);
819+
}
735820
editorTabs.refreshTheme();
736821
editorTabs.revalidate();
737822
}

0 commit comments

Comments
 (0)