From 5362f9fda4172875dee9697b5c062b28784695cb Mon Sep 17 00:00:00 2001 From: Robin Scholtes Date: Tue, 9 May 2023 22:14:36 +1200 Subject: [PATCH] [#181] add --- src/web/App.mjs | 12 +++++++++--- src/web/HTMLOperation.mjs | 7 +++++++ src/web/Manager.mjs | 1 + src/web/TODO.md | 14 +------------- src/web/stylesheets/components/_operation.css | 19 ++++++++++++++++++- .../components/operations/_operations.css | 2 -- src/web/waiters/ControlsWaiter.mjs | 2 +- src/web/waiters/OperationsWaiter.mjs | 12 ++++++++++-- src/web/waiters/RecipeWaiter.mjs | 2 +- 9 files changed, 48 insertions(+), 23 deletions(-) diff --git a/src/web/App.mjs b/src/web/App.mjs index 46b01979..22e4de1f 100755 --- a/src/web/App.mjs +++ b/src/web/App.mjs @@ -451,6 +451,7 @@ class App { this.loadFavourites(); this.populateOperationsList(); this.manager.recipe.initialiseOperationDragNDrop(); + this.manager.recipe.updateSelectedOperations(); } @@ -471,6 +472,7 @@ class App { this.saveFavourites(favourites); this.loadFavourites(); this.populateOperationsList(); + this.manager.recipe.updateSelectedOperations(); this.manager.recipe.initialiseOperationDragNDrop(); } @@ -886,7 +888,7 @@ class App { setMobileUI(){ $("[data-toggle=tooltip]").tooltip("disable"); this.setMobileSplitter(); - this.divideAvailableSpace(); + this.assignAvailableHeight(); this.populateOperationsList(); this.manager.recipe.updateSelectedOperations(); } @@ -902,12 +904,16 @@ class App { * Be mindful to update these accordingly in the stylesheets * ( themes/_structure ) if you want to make changes. */ - divideAvailableSpace( isMobile ){ - const remainingSpace = window.innerHeight - (40+70+90-2); // banner, operations, controls height + borders + assignAvailableHeight( isMobile ){ + const remainingSpace = window.innerHeight - (40+70+90-2); // banner, operations, controls height + // equally divide among recipe, input and output ["recipe", "input", "output"].forEach(( div ) => { document.getElementById(div).style.height = `${remainingSpace/3}px`; }); + + // set the ops-dropdown height + document.getElementById("operations-dropdown").style.maxHeight = `${remainingSpace}px`; } } diff --git a/src/web/HTMLOperation.mjs b/src/web/HTMLOperation.mjs index 1c92fae1..1f77a5ed 100755 --- a/src/web/HTMLOperation.mjs +++ b/src/web/HTMLOperation.mjs @@ -68,6 +68,13 @@ class HTMLOperation { html += "check"; } + const favourites = JSON.parse(localStorage.favourites); + const isFavourite = favourites.includes(this.name); + + html += ` + ${isFavourite ? "star" : "star_outline"} + ` + html += ""; return html; diff --git a/src/web/Manager.mjs b/src/web/Manager.mjs index f1b5d8bc..5f0edd38 100755 --- a/src/web/Manager.mjs +++ b/src/web/Manager.mjs @@ -155,6 +155,7 @@ class Manager { document.getElementById("reset-favourites").addEventListener("click", this.ops.resetFavouritesClick.bind(this.ops)); this.addDynamicListener(".op-list", "oplistcreate", this.ops.opListCreate, this.ops); this.addDynamicListener("li.operation", "operationadd", this.recipe.opAdd, this.recipe); + this.addDynamicListener(".icon-add-favourite", "click", this.ops.onIconFavouriteClick, this.ops); // Recipe this.addDynamicListener(".arg:not(select)", "input", this.recipe.ingChange, this.recipe); diff --git a/src/web/TODO.md b/src/web/TODO.md index 56ad5fc9..bb597af2 100644 --- a/src/web/TODO.md +++ b/src/web/TODO.md @@ -4,26 +4,14 @@ --- #### Mobile UI ( on real device ): -- need long press checks on mobile to add favourites ( recipe is done ) > - - check on window resizing - - shannon entropy thingies - +- maybe a bit annoying that the fav cat opens whenever you add a new fav via icon-fav-click on mobile - backspace on fs view should close max view. Keep making the same mistake and navigating away when for instance recipe is expanded and double click the window to fs > resolve. Reset layout - -### Desktop UI: -### General UI: -- fix up key / tab events so UI can be navigated comfortably with keys ( inc. visual focus feedback ). Probably a lot of -work though - ### JS: - `core/Recipe.mjs`, `core/lib/Magic.js` return imports to original ### Misc: - Gruntfile revert dev config -- check for lingering @TODO across code -- comb through CSS and improve organisation for better DevX. Ask repo owners to open another issue perhaps and just -redo all of the stylesheets ( preferably with SASS ) - delete this file when done :) diff --git a/src/web/stylesheets/components/_operation.css b/src/web/stylesheets/components/_operation.css index ffbe8475..5a303e56 100755 --- a/src/web/stylesheets/components/_operation.css +++ b/src/web/stylesheets/components/_operation.css @@ -7,7 +7,6 @@ */ .operation { - cursor: grab; padding: 10px; list-style-type: none; position: relative; @@ -19,6 +18,10 @@ } @media only screen and (min-width: 768px){ + .operation { + cursor: grab; + } + /* never display check icons on desktop views */ .op-icon.check-icon { display: none; @@ -31,6 +34,20 @@ cursor: pointer; } +/*mobile only favourite icon in operation list*/ +.icon-add-favourite { + float: left; + margin: 0 10px 0 0; + padding: 0; + color: var(--category-list-font-colour); + opacity: .5; + cursor: pointer; +} + +.icon-add-favourite.fav-op { + opacity: 1; +} + .op-icon.remove-icon { color: #f44336; } diff --git a/src/web/stylesheets/components/operations/_operations.css b/src/web/stylesheets/components/operations/_operations.css index e6419982..240402b6 100644 --- a/src/web/stylesheets/components/operations/_operations.css +++ b/src/web/stylesheets/components/operations/_operations.css @@ -18,10 +18,8 @@ top: 41px; width: 100%; height: auto; - max-height: 60vh; overflow: auto; z-index: 20; /* to dropdown on top of all the other elements */ - border-bottom: 1px solid var(--primary-border-colour); background-color: var(--secondary-background-colour); } diff --git a/src/web/waiters/ControlsWaiter.mjs b/src/web/waiters/ControlsWaiter.mjs index 1b5190d0..3ef359dd 100755 --- a/src/web/waiters/ControlsWaiter.mjs +++ b/src/web/waiters/ControlsWaiter.mjs @@ -451,7 +451,7 @@ ${navigator.userAgent} pane.style.height = `${window.innerHeight - 40}px`; } else { if ( window.innerWidth < this.app.breakpoint ){ - this.app.divideAvailableSpace(); + this.app.assignAvailableHeight(); } } } diff --git a/src/web/waiters/OperationsWaiter.mjs b/src/web/waiters/OperationsWaiter.mjs index 9d8e971b..8a3fda05 100755 --- a/src/web/waiters/OperationsWaiter.mjs +++ b/src/web/waiters/OperationsWaiter.mjs @@ -325,7 +325,7 @@ class OperationsWaiter { * Open operations dropdown */ openOperationsDropdown(){ - // 'close' ( dropdown ) icon in Operations component mobile UI + // the 'close' ( dropdown ) icon in Operations component mobile UI const closeOperationsDropdown = document.getElementById("close-operations-dropdown"); const categories = document.getElementById("categories"); @@ -373,7 +373,15 @@ class OperationsWaiter { */ resetFavouritesClick() { this.app.resetFavourites(); - this.manager.recipe.updateSelectedOperations(); + } + + /** + * Add a favourite op, for mobile UI only + * + * @param {Event} e + */ + onIconFavouriteClick(e){ + this.app.addFavourite(e.target.getAttribute("title")); } } diff --git a/src/web/waiters/RecipeWaiter.mjs b/src/web/waiters/RecipeWaiter.mjs index e65935d0..7cf18345 100755 --- a/src/web/waiters/RecipeWaiter.mjs +++ b/src/web/waiters/RecipeWaiter.mjs @@ -658,7 +658,7 @@ class RecipeWaiter { * Note: It seems a little overkill, but with the current tightly coupled code this is * a reliable way to make sure the 'selected' operations are always in sync with * the recipe list ( I think this is preferable to complicating a lot of existing - * code ), I'd recommend to refactor this at one point, but that will mean a huge code + * code ), I'd recommend to refactor this at one point, but that would mean a huge code * overhaul for another time / issue. */ updateSelectedOperations(){