From 2bf08caafeac2f13270910a78127813c810c9b39 Mon Sep 17 00:00:00 2001 From: Todor Imreorov Date: Mon, 24 May 2021 18:22:14 +0100 Subject: [PATCH 01/11] remove header from demo - for better mobile testing --- example/index.html | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/example/index.html b/example/index.html index 193d958..5d700de 100644 --- a/example/index.html +++ b/example/index.html @@ -13,8 +13,7 @@ -

ChickenPaint testbed

- \ No newline at end of file + From 0ab5178350bd84ba6fccef5e73b5f6d040c6e6bf Mon Sep 17 00:00:00 2001 From: Todor Imreorov Date: Tue, 25 May 2021 20:22:43 +0100 Subject: [PATCH 02/11] add body visibility toggle and autoclose when on small screen --- js/gui/CPPalette.js | 16 +++++++++++++--- js/gui/CPStrokePalette.js | 1 + js/gui/CPSwatchesPalette.js | 1 + js/gui/CPToolPalette.js | 1 + 4 files changed, 16 insertions(+), 3 deletions(-) diff --git a/js/gui/CPPalette.js b/js/gui/CPPalette.js index e5f05c7..c92dbef 100644 --- a/js/gui/CPPalette.js +++ b/js/gui/CPPalette.js @@ -23,6 +23,8 @@ import $ from "jquery"; import EventEmitter from "wolfy87-eventemitter"; +const windowIsPortraitMode = window.innerHeight > window.innerWidth; + 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 (windowIsPortraitMode) { + bodyElement.style.display = bodyElement.style.display === "none" ? "block" : "none"; + } + }; + 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,13 @@ export default function CPPalette(cpController, className, title, resizeVert, re titleElem.appendChild(document.createTextNode(this.title)); titleContainer.appendChild(titleElem); - titleContainer.appendChild(closeButton); + if (!windowIsPortraitMode) titleContainer.appendChild(closeButton); headElement.appendChild(titleContainer); bodyElement.className = "chickenpaint-palette-body"; - + bodyElement.style.display = windowIsPortraitMode ? "none" : "block"; + containerElement.appendChild(headElement); containerElement.appendChild(bodyElement); diff --git a/js/gui/CPStrokePalette.js b/js/gui/CPStrokePalette.js index c9da0a2..4017a3f 100644 --- 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 index 144f716..e799215 100644 --- 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 index aa2f48d..794ead5 100644 --- 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(); } } From 600302c98d7da8de8a624140e0472cf24eae9076 Mon Sep 17 00:00:00 2001 From: Todor Imreorov Date: Mon, 31 May 2021 20:55:28 +0100 Subject: [PATCH 03/11] use class toggle --- js/gui/CPPalette.js | 3 +-- resources/css/chickenpaint.scss | 10 +++++++++- 2 files changed, 10 insertions(+), 3 deletions(-) diff --git a/js/gui/CPPalette.js b/js/gui/CPPalette.js index c92dbef..258a397 100644 --- a/js/gui/CPPalette.js +++ b/js/gui/CPPalette.js @@ -89,7 +89,7 @@ export default function CPPalette(cpController, className, title, resizeVert, re this.toggleBodyElementVisibility = function() { if (windowIsPortraitMode) { - bodyElement.style.display = bodyElement.style.display === "none" ? "block" : "none"; + $(containerElement).toggleClass("collapsed"); } }; @@ -201,7 +201,6 @@ export default function CPPalette(cpController, className, title, resizeVert, re headElement.appendChild(titleContainer); bodyElement.className = "chickenpaint-palette-body"; - bodyElement.style.display = windowIsPortraitMode ? "none" : "block"; containerElement.appendChild(headElement); containerElement.appendChild(bodyElement); diff --git a/resources/css/chickenpaint.scss b/resources/css/chickenpaint.scss index 6154863..efead42 100644 --- 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; From a56adeb0a0690548248516ffaa8ea5295cae5f49 Mon Sep 17 00:00:00 2001 From: Todor Imreorov Date: Tue, 1 Jun 2021 17:34:04 +0100 Subject: [PATCH 04/11] fix textures palette is too tall --- resources/css/chickenpaint.scss | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/resources/css/chickenpaint.scss b/resources/css/chickenpaint.scss index efead42..aa167c8 100644 --- a/resources/css/chickenpaint.scss +++ b/resources/css/chickenpaint.scss @@ -750,12 +750,10 @@ body.chickenpaint-full-screen { .chickenpaint-palette-textures .chickenpaint-palette-body { display:flex; - flex-direction:row; + flex-direction: column; + padding: 0; } .chickenpaint-texture-swatches { - flex-basis: 0; - flex-shrink: 1; - flex-grow: 1; line-height:0; overflow-y:auto; } From 4fed5ac2a1d1d5657915bfc47562ec93b5127fe0 Mon Sep 17 00:00:00 2001 From: Todor Imreorov Date: Tue, 1 Jun 2021 17:58:00 +0100 Subject: [PATCH 05/11] reclaim vertical space on tiny screens from the header --- resources/css/chickenpaint.scss | 17 ++++++++++------- 1 file changed, 10 insertions(+), 7 deletions(-) diff --git a/resources/css/chickenpaint.scss b/resources/css/chickenpaint.scss index aa167c8..e5fc75b 100644 --- a/resources/css/chickenpaint.scss +++ b/resources/css/chickenpaint.scss @@ -972,20 +972,23 @@ body.chickenpaint-full-screen { @include chickenpaint-icon-classes; /* 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 { From 476e608d273fc6c332d359e5fb143ad7402d15f2 Mon Sep 17 00:00:00 2001 From: Todor Imreorov Date: Tue, 1 Jun 2021 20:09:26 +0100 Subject: [PATCH 06/11] add toggle widget buttons on tiny screens --- js/gui/CPMainMenu.js | 22 +++++++++++++++++++++- js/gui/CPPalette.js | 2 +- resources/css/chickenpaint.scss | 18 ++++++++++++++++++ 3 files changed, 40 insertions(+), 2 deletions(-) diff --git a/js/gui/CPMainMenu.js b/js/gui/CPMainMenu.js index 50c3de8..c9c371b 100644 --- a/js/gui/CPMainMenu.js +++ b/js/gui/CPMainMenu.js @@ -432,6 +432,7 @@ export default function CPMainMenu(controller, mainGUI) { + '
    ' + '
' + '' + + '
' + '' ), 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 = $( + `' + ); + 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 index 258a397..27aab09 100644 --- a/js/gui/CPPalette.js +++ b/js/gui/CPPalette.js @@ -23,7 +23,7 @@ import $ from "jquery"; import EventEmitter from "wolfy87-eventemitter"; -const windowIsPortraitMode = window.innerHeight > window.innerWidth; +const windowIsPortraitMode = window.innerHeight < 820 || window.innerWidth < 400; export default function CPPalette(cpController, className, title, resizeVert, resizeHorz) { this.title = title; diff --git a/resources/css/chickenpaint.scss b/resources/css/chickenpaint.scss index e5fc75b..80bf2f0 100644 --- a/resources/css/chickenpaint.scss +++ b/resources/css/chickenpaint.scss @@ -971,6 +971,20 @@ 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), (max-width: 400px) { .chickenpaint .navbar { @@ -1019,6 +1033,10 @@ body.chickenpaint-full-screen { padding:0; padding-left:12px; } + + .chickenpaint .widget-nav { + display: block; + } } /* High resolution alternatives */ From dffbc6ccc7495db4e271103a05c0708c39a2cc2d Mon Sep 17 00:00:00 2001 From: Todor Imreorov Date: Tue, 1 Jun 2021 20:30:42 +0100 Subject: [PATCH 07/11] revert teture fix --- resources/css/chickenpaint.scss | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/resources/css/chickenpaint.scss b/resources/css/chickenpaint.scss index 80bf2f0..5d525c1 100644 --- a/resources/css/chickenpaint.scss +++ b/resources/css/chickenpaint.scss @@ -750,10 +750,12 @@ body.chickenpaint-full-screen { .chickenpaint-palette-textures .chickenpaint-palette-body { display:flex; - flex-direction: column; - padding: 0; + flex-direction:row; } .chickenpaint-texture-swatches { + flex-basis: 0; + flex-shrink: 1; + flex-grow: 1; line-height:0; overflow-y:auto; } From cfecdc0e6e02a1563629ae5bf038e3ae425509e1 Mon Sep 17 00:00:00 2001 From: Todor Imreorov Date: Tue, 1 Jun 2021 20:37:22 +0100 Subject: [PATCH 08/11] fix initial selected state of widget toggles --- js/gui/CPMainMenu.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/gui/CPMainMenu.js b/js/gui/CPMainMenu.js index c9c371b..6d7e1c2 100644 --- a/js/gui/CPMainMenu.js +++ b/js/gui/CPMainMenu.js @@ -618,7 +618,7 @@ export default function CPMainMenu(controller, mainGUI) { menuElem.append(entries.filter(item => !!item.mnemonic && controller.isActionSupported(item.action)).map(entry => { let widgetMenuElem = $( - `