[#181] add

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 ){
+    assignAvailableHeight( isMobile ){
-        const remainingSpace = window.innerHeight - (40+70+90-2); // banner, operations, controls height + borders
+        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`;
     }
 }
 

src/web/HTMLOperation.mjs

@@ -68,6 +68,13 @@ class HTMLOperation {
             html += "<i class='material-icons check-icon op-icon'>check</i>";
         }
 
+        const favourites = JSON.parse(localStorage.favourites);
+        const isFavourite = favourites.includes(this.name);
+
+        html += `<i title="${this.name}" class='material-icons icon-add-favourite mobile-only star-icon op-icon ${isFavourite ? "fav-op" : ""}'>
+                    ${isFavourite ? "star" : "star_outline"}
+                </i>`
+
         html += "</li>";
 
         return html;

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);

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 :)
 

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;
 }

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);
 }
 

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();
             }
         }
     }

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"));
     }
 }
 

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(){