vNext (2.6.1)

- FIxed bug with context menu not hiding after clicking some items
- todoCard now follows dark mode
- Checked items in todoCard now dim
- toDoCard now has a 'larger' view to show all 6 items at once

css/stock_cards/todoCard.css

@@ -2,28 +2,52 @@
     display: flex;
     box-sizing: border-box;
     /* overflow: hidden; */
-    padding-top: 4px;
-    padding-bottom: 4px;
+    padding: 4px;
 }
 
 .todoCard .items {
-    display: flex;
+    width: 100%;
     height: 100%;
+
+    display: flex;
+    flex-direction: column;
     gap: 3px;
+
     border-radius: 12px;
-    flex-direction: column;
     overflow: scroll;
 }
 
+.todoCard.rectCard .items {
+    padding: 0;
+    border-radius: 15px;
+    overflow: hidden !important;
+    flex-wrap: wrap;
+}
+
 .todoCard .items .item {
     display: flex;
     position: relative;
 
-    background-color: rgb(255, 255, 255);
+    height: 25px;
+
+    background-color: #eee;
     border-radius: 5px;
+    box-sizing: border-box;
     padding: 2px;
 }
 
+body:has(.darkModeOn) .todoCard .items .item {
+    background-color: #444;
+}
+
+.todoCard.rectCard .items .item {
+    width: calc(50% - 3px);
+}
+
+.item:has(input:checked) {
+    opacity: .6;
+}
+
 .todoCard .items .item input[type='checkbox'] {
     padding: 0 !important;
     border-radius: 50%;
@@ -39,6 +63,10 @@
     outline: none !important;
 }
 
+body:has(.darkModeOn) .item input[type="text"] {
+    color: white !important;
+}
+
 .todoCard .items .item::after {
     content: "";
     width: 55px;
@@ -50,4 +78,8 @@
 
     opacity: .5;
     background-color: black;
+}
+
+body:has(.darkModeOn) .todoCard .items .item::after {
+    background-color: rgb(255, 255, 255);
 }

index.html

@@ -217,7 +217,7 @@
             <div class="header">
                 <img src="favicons/android-chrome-192x192.png" alt="">
                 <p id="title">(PlusUI)</p>
-                <p class="siteVer" id="ver">v2.6</p>
+                <p class="siteVer" id="ver">v2.6.1</p>
             </div>
             <div class="aboutText">
                 A hybrid dashboard and digital display for large-format screens, heavily inspired by TV & VisionOS
@@ -332,7 +332,7 @@
                     </a>
                 </div>
             </div>
-            <div class="todoCard card deckCard labeled actionable squareCard" data-enabled="n" data-resizableCard="n"
+            <div class="todoCard card deckCard labeled actionable squareCard" data-enabled="n" data-resizableCard="y"
                 data-parallaxCard="n" data-friendlyName="To-Do"
                 data-cardDesc="Keep a customizable checklist of up to 6 items" id="todoCard">
                 <div class="items">

js/shelf.js

@@ -27,13 +27,26 @@ $('.cmi-resize').on('click', function () {
         $('.context-selected-card').addClass('squareCard').removeClass('rectCard');
         var card = $('.context-selected-card').attr('id');
         localStorage.setItem(card + '-size', 'squareCard')
+
+        $(this).attr('data-btnLabel', 'Larger');
+        $(this).children('#cmi-resize-icn').addClass('fa-up-right-and-down-left-from-center').removeClass('fa-down-left-and-up-right-to-center');
     } else if ($('.context-selected-card').hasClass('squareCard')) {
         $('.context-selected-card').addClass('rectCard').removeClass('squareCard');
         var card = $('.context-selected-card').attr('id');
         localStorage.setItem(card + '-size', 'rectCard')
+
+        $(this).attr('data-btnLabel', 'Smaller');
+        $(this).children('#cmi-resize-icn').addClass('fa-down-left-and-up-right-to-center').removeClass('fa-up-right-and-down-left-from-center');
     }
-    $('.context-selected-card').removeClass('context-selected-card')
-    $('.subCards').removeClass('freeze');
+
+    // $('.cmi-resize').attr('data-btnLabel', cardSize);
+    // $('.cmi-expand').attr('data-btnLabel', 'Expand ' + $('.context-selected-card').attr('data-friendlyName'));
+
+    setTimeout(() => {
+        var leftPosi = ($('.context-selected-card').offset().left + 2 + ($('.context-selected-card').width() / 2)) - (($(".contextMenuDiv").outerWidth() / 2));
+        $(".contextMenuDiv").css("left", leftPosi + "px");
+    }, 250);
+
     alignShelfLabel();
 });
 
@@ -66,25 +79,37 @@ $('.cmi-expand').on('click', function () {
             })
         }
 
+        hideContextMenu();
         setTheme();
         dockRadi();
-        $('.context-selected-card').removeClass('context-selected-card')
         $('.shelfLabel').addClass('show').text("Expanded " + elementToMove.attr('data-friendlyName'));
-        $('.subCards').removeClass('freeze');
         alignShelfLabel();
-    }, 500);
+    }, 250);
 
     setTimeout(() => {
         $('.shelfLabel').removeClass('show')
         alignShelfLabel();
     }, 6000);
 })
 
-$('.cmi-editMode').click(function (e) {
+function hideContextMenu() {
+    $('.context-selected-card').addClass('temp').removeClass('context-selected-card');
+    setTimeout(() => {
+        $('.cmSep').children().appendTo('.card.temp .cardOptions');
+    }, 300);
     $('.subCards').removeClass('freeze');
+    $('.contextMenuDiv').removeClass('show');
+    $('.subCards').removeClass('editMode');
+    $('.subCards').sortable('enable');
+    $('.subCards').sortable('refresh');
+
+}
+
+$('.cmi-editMode').click(function (e) {
+    hideContextMenu();
+
     $('.subCards').addClass('editMode');
     $('.subCards').sortable('enable');
-    $('.context-selected-card').removeClass('context-selected-card')
     alignShelfLabel();
 });
 
@@ -108,8 +133,7 @@ $('.cmi-disableCard').on('click', function () {
             // localStorage.setItem(card + '-index', $(this).attr('data-index'))
         });
 
-        $(".subCards").sortable("refresh");
-        $('.subCards').removeClass('freeze');
+        hideContextMenu();
         dockRadi();
         alignShelfLabel();
         saveCards();
@@ -118,7 +142,7 @@ $('.cmi-disableCard').on('click', function () {
         setTimeout(() => {
             $('.shelfLabel').removeClass('show')
         }, 6000);
-    }, 1000);
+    }, 250);
     saveCards();
 })