thenickdude · blurymind · May 24, 2021 · May 25, 2021 · May 31, 2021 · Jun 1, 2021
diff --git a/example/index.html b/example/index.html
@@ -13,8 +13,7 @@
 
 </head>
 <body>
-	<h1>ChickenPaint testbed</h1>
 	<div id="chickenpaint-parent"></div>
     <p></p>
 </body>
-</html>
+</html>
diff --git a/js/gui/CPMainMenu.js b/js/gui/CPMainMenu.js
@@ -432,6 +432,7 @@ export default function CPMainMenu(controller, mainGUI) {
                     + '<ul class="navbar-nav mr-auto">'
                     + '</ul>'
                 + '</div>'
+                + '<div class="widget-nav" id="chickenpaint-palette-toggler-content"/>'
             + '</nav>'
         ),
         macPlatform = /^Mac/i.test(navigator.platform);
@@ -612,12 +613,31 @@ export default function CPMainMenu(controller, mainGUI) {
             return topLevelMenuElem;
         }));
     }
-
+
+    function fillWidgetTray(menuElem, entries) {
+        menuElem.append(entries.filter(item => !!item.mnemonic && controller.isActionSupported(item.action)).map(entry => {
+            let
+                widgetMenuElem = $(
+                    `<button class="widget-toggler selected" type="button" data-action="${entry.action}" data-checkbox="true" data-selected="${!entry.checked}">`
+                        + '<span>'
+                            + entry.mnemonic
+                        +'</span>'
+                    + '</button>'
+                );
+            widgetMenuElem.click(e => {
+                menuItemClicked(widgetMenuElem);
+                e.preventDefault();
+            })
+            return widgetMenuElem;
+        }));
+    }
+
     this.getElement = function() {
         return bar[0];
     };
 
     fillMenu($(".navbar-nav", bar), MENU_ENTRIES);
+    fillWidgetTray($(".widget-nav", bar), MENU_ENTRIES[5].children);
 
     $(bar).on('click', 'a:not(.dropdown-toggle)', function(e) {
         menuItemClicked($(this));

diff --git a/js/gui/CPPalette.js b/js/gui/CPPalette.js
@@ -23,6 +23,8 @@
 import $ from "jquery";
 import EventEmitter from "wolfy87-eventemitter";
 
+const isInLowResolutionMode = window.innerHeight < 820 || window.innerWidth < 400;
+
 export default function CPPalette(cpController, className, title, resizeVert, resizeHorz) {
     this.title = title;
     this.name = className;
@@ -84,7 +86,13 @@ export default function CPPalette(cpController, className, title, resizeVert, re
         this.setWidth(width);
         this.setHeight(height);
     };
-
+
+    this.toggleBodyElementVisibility = function() {
+        if (isInLowResolutionMode) {
+            $(containerElement).toggleClass("collapsed");
+        }
+    };
+
     function paletteHeaderPointerMove(e) {
         if (e.buttons != 0 && dragAction == "move") {
             that.setLocation(e.pageX - dragOffset.x, e.pageY - dragOffset.y);
@@ -109,6 +117,7 @@ export default function CPPalette(cpController, className, title, resizeVert, re
         if (dragAction == "move") {
             headElement.releasePointerCapture(e.pointerId);
             dragAction = false;
+            that.toggleBodyElementVisibility();
         }
     }
 
@@ -187,12 +196,12 @@ export default function CPPalette(cpController, className, title, resizeVert, re
     titleElem.appendChild(document.createTextNode(this.title));
 
     titleContainer.appendChild(titleElem);
-    titleContainer.appendChild(closeButton);
+    if (!isInLowResolutionMode) titleContainer.appendChild(closeButton);
 
     headElement.appendChild(titleContainer);
 
     bodyElement.className = "chickenpaint-palette-body";
-    
+
     containerElement.appendChild(headElement);
     containerElement.appendChild(bodyElement);
 

diff --git a/js/gui/CPPaletteManager.js b/js/gui/CPPaletteManager.js
@@ -169,6 +169,11 @@ export default function CPPaletteManager(cpController) {
         palettes.textures.setLocation(palettes.color.getX() + palettes.color.getWidth() + 4, windowHeight - palettes.textures.getHeight());
 
         palettes.color.setLocation(0, Math.max(palettes.tool.getY() + palettes.tool.getHeight(), windowHeight - palettes.color.getHeight()));
+
+        for (var i in palettes) {
+            var palette = palettes[i];
+            palette.toggleBodyElementVisibility();
+        }
     };
 
     this.getElement = function() {

diff --git a/js/gui/CPStrokePalette.js b/js/gui/CPStrokePalette.js
@@ -86,6 +86,7 @@ export default function CPStrokePalette(cpController) {
                 $(this).addClass("selected");
 
                 cpController.actionPerformed({action: button.command});
+                that.toggleBodyElementVisibility();
             });
 
         body.appendChild(listElem);

diff --git a/js/gui/CPSwatchesPalette.js b/js/gui/CPSwatchesPalette.js
@@ -222,6 +222,7 @@ export default function CPSwatchesPalette(controller) {
                 controller.setCurColor(new CPColor(parseInt(swatch.getAttribute("data-color"), 10)));
                 e.stopPropagation();
                 e.preventDefault();
+                that.toggleBodyElementVisibility();
             }
         });
 

diff --git a/js/gui/CPToolPalette.js b/js/gui/CPToolPalette.js
@@ -165,6 +165,7 @@ export default function CPToolPalette(cpController) {
                 button = buttons[parseInt(this.getAttribute("data-buttonIndex"), 10)];
 
             cpController.actionPerformed({action: button.command});
+            that.toggleBodyElementVisibility();
         }
     }
 

diff --git a/resources/css/chickenpaint.scss b/resources/css/chickenpaint.scss
@@ -220,6 +220,13 @@
 
     box-shadow: 0 1px 1px rgba(0,0,0,.05);
 }
+.chickenpaint-palette.collapsed {
+    min-height: 27px;
+    max-height: 27px;
+}
+.chickenpaint-palette.collapsed > .chickenpaint-palette-body {
+    display: none;
+}
 .chickenpaint-palette-head {
     background-color:#e8e8e8;
     color:#444;
@@ -476,6 +483,7 @@ body.chickenpaint-full-screen {
 }
 
 .chickenpaint-palette-brush {
+    min-width:200px;
     min-height:250px;
 }
 .chickenpaint-palette-brush .chickenpaint-slider {
@@ -540,7 +548,7 @@ body.chickenpaint-full-screen {
 
 .chickenpaint-palette-layers {
     min-height:250px;
-    min-width:150px;
+    min-width:160px;
 }
 .chickenpaint-palette-layers .chickenpaint-palette-body {
     display:flex;
@@ -965,21 +973,38 @@ body.chickenpaint-full-screen {
 
 @include chickenpaint-icon-classes;
 
+.chickenpaint .widget-nav {
+    display: none;
+}
+.chickenpaint .widget-nav .widget-toggler {
+    padding: 0.1rem 0.5rem;
+    margin: 0.15rem;
+    font-size: 0.75rem;
+    background-color: transparent;
+    border: 1px solid #00000036;
+    border-radius: 0.25rem;
+}
+.chickenpaint .widget-nav .widget-toggler.selected {
+    background-color: #ffffc4;
+}
 /* More compact styles for small screens */
-@media (max-height: 768px) {
+@media (max-height: 768px), (max-width: 400px)  {
     .chickenpaint .navbar {
-        min-height: 40px;
+        min-height: 20px;
+        padding: 0.1rem;
+    }
+
+    .chickenpaint .navbar-toggler {
+        padding: 0;
     }
 
     .chickenpaint .navbar-nav > li > a {
-        padding-top: 10px;
-        padding-bottom: 10px;
+        padding-top: 3px;
+        padding-bottom: 3px;
     }
 
     .chickenpaint .navbar-brand {
-        padding-top: 10px;
-        padding-bottom: 10px;
-        height: 40px;
+        display: none;
     }
 
     .chickenpaint-palette-head {
@@ -1010,6 +1035,10 @@ body.chickenpaint-full-screen {
         padding:0;
         padding-left:12px;
     }
+
+    .chickenpaint .widget-nav {
+        display: block;
+    }
 }
 
 /* High resolution alternatives */
-Original file line number
+Diff line change
@@ Expand Up / @@ -13,8 +13,7 @@ @@
     </head>
     <body>
-    	<h1>ChickenPaint testbed</h1>
     	<div id="chickenpaint-parent"></div>
         <p></p>
     </body>
-    </html>
+    </html>