Просмотр исходного кода

Fix UI issues of Right Sidebar / Subtasks Settings and Card Settings.

Thanks to xet7 !

Fixes #5971
Lauri Ojansivu 1 неделя назад
Родитель
Сommit
45537ede87

+ 53 - 0
client/components/sidebar/sidebar.css

@@ -48,6 +48,59 @@
   display: flex;
   flex-direction: column;
 }
+
+/* Use checklist-style green checkboxes for all sidebar checkboxes */
+.sidebar .materialCheckBox.is-checked,
+.boardCardSettingsPopup .materialCheckBox.is-checked,
+.boardSubtaskSettingsPopup .materialCheckBox.is-checked {
+  top: -4px !important;
+  left: -3px !important;
+  width: 7px !important;
+  height: 15px !important;
+  margin-right: 6px !important;
+  border-top: 2px solid transparent !important;
+  border-left: 2px solid transparent !important;
+  border-bottom: 2px solid #3cb500 !important;
+  border-right: 2px solid #3cb500 !important;
+  transform: rotate(40deg) !important;
+  -webkit-backface-visibility: hidden !important;
+  backface-visibility: hidden !important;
+  transform-origin: 100% 100% !important;
+}
+
+/* Card Settings 3-column grid layout */
+.card-settings-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr 2fr;
+  gap: 10px;
+  margin-bottom: 10px;
+}
+
+.card-settings-row {
+  display: grid;
+  grid-template-columns: 1fr 1fr 2fr;
+  gap: 10px;
+  align-items: center;
+  padding: 5px 0;
+  border-bottom: 1px solid #eee;
+}
+
+.card-settings-column {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.card-settings-column:last-child {
+  justify-content: flex-start;
+}
+
+.card-settings-column h4 {
+  margin: 0;
+  font-size: 12px;
+  font-weight: bold;
+  text-align: center;
+}
 .sidebar .sidebar-content ul.sidebar-list li > a {
   display: flex;
   height: 30px;

+ 211 - 101
client/components/sidebar/sidebar.jade

@@ -34,32 +34,26 @@ template(name='homeSidebar')
   hr
   ul#cards.label-text-hidden
     a.flex.js-toggle-minicard-label-text(title="{{_ 'hide-minicard-label-text'}}")
+      span {{#if hiddenMinicardLabelText}}✅{{else}}⬜{{/if}}
       span {{_ 'hide-minicard-label-text'}}
-      b  
-      .materialCheckBox(class="{{#if hiddenMinicardLabelText}}is-checked{{/if}}")
   if currentUser
     ul#cards.vertical-scrollbars-toggle
       a.flex.js-vertical-scrollbars-toggle(title="{{_ 'enable-vertical-scrollbars'}}")
+        span {{#if isVerticalScrollbars}}✅{{else}}⬜{{/if}}
         span {{_ 'enable-vertical-scrollbars'}}
-        b  
-        .materialCheckBox(class="{{#if isVerticalScrollbars}}is-checked{{/if}}")
   ul#cards.show-week-of-year-toggle
     a.flex.js-show-week-of-year-toggle(title="{{_ 'show-week-of-year'}}")
+      span {{#if isShowWeekOfYear}}✅{{else}}⬜{{/if}}
       span {{_ 'show-week-of-year'}}
-      b  
-      .materialCheckBox(class="{{#if isShowWeekOfYear}}is-checked{{/if}}")
   hr
   unless currentUser.isNoComments
     h3.activity-title
       | 💬
       | {{_ 'activities'}}
 
-      .material-toggle-switch(title="{{_ 'show-activities'}}")
-        if showActivities
-          input.toggle-switch(type="checkbox" id="toggleShowActivitiesBoard" checked="checked")
-        else
-          input.toggle-switch(type="checkbox" id="toggleShowActivitiesBoard")
-        label.toggle-label(for="toggleShowActivitiesBoard")
+      a.flex.js-toggle-show-activities(title="{{_ 'show-activities'}}")
+        span {{#if showActivities}}✅{{else}}⬜{{/if}}
+        span {{_ 'show-activities'}}
     +activities(mode="board")
 
 template(name="membersWidget")
@@ -185,165 +179,282 @@ template(name="boardInfoOnMyBoardsPopup")
     unless currentSetting.hideCardCounterList
       div.check-div
         a.flex.js-field-has-cardcounterlist(class="{{#if allowsCardCounterList}}is-checked{{/if}}")
-          .materialCheckBox(class="{{#if allowsCardCounterList}}is-checked{{/if}}")
+          span {{#if allowsCardCounterList}}✅{{else}}⬜{{/if}}
           span
             | 🚪
             | {{_ 'show-card-counter-per-list'}}
     unless currentSetting.hideBoardMemberList
       div.check-div
         a.flex.js-field-has-boardmemberlist(class="{{#if allowsBoardMemberList}}is-checked{{/if}}")
-          .materialCheckBox(class="{{#if allowsBoardMemberList}}is-checked{{/if}}")
+          span {{#if allowsBoardMemberList}}✅{{else}}⬜{{/if}}
           span
             | ⏳
             | {{_ 'show-board_members-avatar'}}
 
 template(name="boardCardSettingsPopup")
   form.board-card-settings
-    h3 {{_ 'show-on-card'}}, {{_ 'show-on-minicard'}}
-    div.check-div
-      a.flex.js-field-has-receiveddate(class="{{#if allowsReceivedDate}}is-checked{{/if}}")
-        .materialCheckBox(class="{{#if allowsReceivedDate}}is-checked{{/if}}")
+    .card-settings-grid
+      .card-settings-column
+        h4 {{_ 'show-on-card'}}
+      .card-settings-column
+        h4 {{_ 'show-on-minicard'}}
+      .card-settings-column
+        h4 {{_ 'description'}}
+    .card-settings-row
+      .card-settings-column
+        a.flex.js-field-has-receiveddate(title="{{_ 'card-received'}}" class="{{#if allowsReceivedDate}}is-checked{{/if}}")
+          span {{#if allowsReceivedDate}}✅{{else}}⬜{{/if}}
+      .card-settings-column
+        a.flex.js-field-has-receiveddate(title="{{_ 'card-received'}}" class="{{#if allowsReceivedDate}}is-checked{{/if}}")
+          span {{#if allowsReceivedDate}}✅{{else}}⬜{{/if}}
+      .card-settings-column
         span
           | 🚪
           | {{_ 'card-received'}}
-    div.check-div
-      a.flex.js-field-has-startdate(class="{{#if allowsStartDate}}is-checked{{/if}}")
-        .materialCheckBox(class="{{#if allowsStartDate}}is-checked{{/if}}")
+    .card-settings-row
+      .card-settings-column
+        a.flex.js-field-has-startdate(title="{{_ 'card-start'}}" class="{{#if allowsStartDate}}is-checked{{/if}}")
+          span {{#if allowsStartDate}}✅{{else}}⬜{{/if}}
+      .card-settings-column
+        a.flex.js-field-has-startdate(title="{{_ 'card-start'}}" class="{{#if allowsStartDate}}is-checked{{/if}}")
+          span {{#if allowsStartDate}}✅{{else}}⬜{{/if}}
+      .card-settings-column
         span
           | ⏳
           | {{_ 'card-start'}}
-    div.check-div
-      a.flex.js-field-has-duedate(class="{{#if allowsDueDate}}is-checked{{/if}}")
-        .materialCheckBox(class="{{#if allowsDueDate}}is-checked{{/if}}")
+    .card-settings-row
+      .card-settings-column
+        a.flex.js-field-has-duedate(title="{{_ 'card-due'}}" class="{{#if allowsDueDate}}is-checked{{/if}}")
+          span {{#if allowsDueDate}}✅{{else}}⬜{{/if}}
+      .card-settings-column
+        a.flex.js-field-has-duedate(title="{{_ 'card-due'}}" class="{{#if allowsDueDate}}is-checked{{/if}}")
+          span {{#if allowsDueDate}}✅{{else}}⬜{{/if}}
+      .card-settings-column
         span
           | 🚪
           | {{_ 'card-due'}}
-    div.check-div
-      a.flex.js-field-has-enddate(class="{{#if allowsEndDate}}is-checked{{/if}}")
-        .materialCheckBox(class="{{#if allowsEndDate}}is-checked{{/if}}")
+    .card-settings-row
+      .card-settings-column
+        a.flex.js-field-has-enddate(title="{{_ 'card-end'}}" class="{{#if allowsEndDate}}is-checked{{/if}}")
+          span {{#if allowsEndDate}}✅{{else}}⬜{{/if}}
+      .card-settings-column
+        a.flex.js-field-has-enddate(title="{{_ 'card-end'}}" class="{{#if allowsEndDate}}is-checked{{/if}}")
+          span {{#if allowsEndDate}}✅{{else}}⬜{{/if}}
+      .card-settings-column
         span
           | ⏰
           | {{_ 'card-end'}}
-    div.check-div
-      a.flex.js-field-has-members(class="{{#if allowsMembers}}is-checked{{/if}}")
-        .materialCheckBox(class="{{#if allowsMembers}}is-checked{{/if}}")
+    .card-settings-row
+      .card-settings-column
+        a.flex.js-field-has-members(title="{{_ 'members'}}" class="{{#if allowsMembers}}is-checked{{/if}}")
+          span {{#if allowsMembers}}✅{{else}}⬜{{/if}}
+      .card-settings-column
+        a.flex.js-field-has-members(title="{{_ 'members'}}" class="{{#if allowsMembers}}is-checked{{/if}}")
+          span {{#if allowsMembers}}✅{{else}}⬜{{/if}}
+      .card-settings-column
         span
           | 👥
           | {{_ 'members'}}
-    div.check-div
-      a.flex.js-field-has-creator(class="{{#if allowsCreator}}is-checked{{/if}}")
-        .materialCheckBox(class="{{#if allowsCreator}}is-checked{{/if}}")
+    .card-settings-row
+      .card-settings-column
+        a.flex.js-field-has-creator(title="{{_ 'creator'}}" class="{{#if allowsCreator}}is-checked{{/if}}")
+          span {{#if allowsCreator}}✅{{else}}⬜{{/if}}
+      .card-settings-column
+        span
+      .card-settings-column
         span
           | 👤
           | {{_ 'creator'}}
-    div.check-div
-      a.flex.js-field-has-creator-on-minicard(class="{{#if allowsCreatorOnMinicard}}is-checked{{/if}}")
-        .materialCheckBox(class="{{#if allowsCreatorOnMinicard}}is-checked{{/if}}")
+    .card-settings-row
+      .card-settings-column
+        span
+      .card-settings-column
+        a.flex.js-field-has-creator-on-minicard(title="{{_ 'creator-on-minicard'}}" class="{{#if allowsCreatorOnMinicard}}is-checked{{/if}}")
+          span {{#if allowsCreatorOnMinicard}}✅{{else}}⬜{{/if}}
+      .card-settings-column
         span
           | 👤
           | {{_ 'creator-on-minicard'}}
-    div.check-div
-      a.flex.js-field-has-assignee(class="{{#if allowsAssignee}}is-checked{{/if}}")
-        .materialCheckBox(class="{{#if allowsAssignee}}is-checked{{/if}}")
+    .card-settings-row
+      .card-settings-column
+        a.flex.js-field-has-assignee(title="{{_ 'assignee'}}" class="{{#if allowsAssignee}}is-checked{{/if}}")
+          span {{#if allowsAssignee}}✅{{else}}⬜{{/if}}
+      .card-settings-column
+        a.flex.js-field-has-assignee(title="{{_ 'assignee'}}" class="{{#if allowsAssignee}}is-checked{{/if}}")
+          span {{#if allowsAssignee}}✅{{else}}⬜{{/if}}
+      .card-settings-column
         span
           | 👤
           | {{_ 'assignee'}}
-    div.check-div
-      a.flex.js-field-has-assigned-by(class="{{#if allowsAssignedBy}}is-checked{{/if}}")
-        .materialCheckBox(class="{{#if allowsAssignedBy}}is-checked{{/if}}")
+    .card-settings-row
+      .card-settings-column
+        a.flex.js-field-has-assigned-by(title="{{_ 'assigned-by'}}" class="{{#if allowsAssignedBy}}is-checked{{/if}}")
+          span {{#if allowsAssignedBy}}✅{{else}}⬜{{/if}}
+      .card-settings-column
+        a.flex.js-field-has-assigned-by(title="{{_ 'assigned-by'}}" class="{{#if allowsAssignedBy}}is-checked{{/if}}")
+          span {{#if allowsAssignedBy}}✅{{else}}⬜{{/if}}
+      .card-settings-column
         span
           | 🛒
           | {{_ 'assigned-by'}}
-    div.check-div
-      a.flex.js-field-has-requested-by(class="{{#if allowsRequestedBy}}is-checked{{/if}}")
-        .materialCheckBox(class="{{#if allowsRequestedBy}}is-checked{{/if}}")
+    .card-settings-row
+      .card-settings-column
+        a.flex.js-field-has-requested-by(title="{{_ 'requested-by'}}" class="{{#if allowsRequestedBy}}is-checked{{/if}}")
+          span {{#if allowsRequestedBy}}✅{{else}}⬜{{/if}}
+      .card-settings-column
+        a.flex.js-field-has-requested-by(title="{{_ 'requested-by'}}" class="{{#if allowsRequestedBy}}is-checked{{/if}}")
+          span {{#if allowsRequestedBy}}✅{{else}}⬜{{/if}}
+      .card-settings-column
         span
           | 👤➕
           | {{_ 'requested-by'}}
-    div.check-div
-      a.flex.js-field-has-card-sorting-by-number(class="{{#if allowsCardSortingByNumber}}is-checked{{/if}}")
-        .materialCheckBox(class="{{#if allowsCardSortingByNumber}}is-checked{{/if}}")
+    .card-settings-row
+      .card-settings-column
+        a.flex.js-field-has-card-sorting-by-number(title="{{_ 'card-sorting-by-number'}}" class="{{#if allowsCardSortingByNumber}}is-checked{{/if}}")
+          span {{#if allowsCardSortingByNumber}}✅{{else}}⬜{{/if}}
+      .card-settings-column
+        span
+      .card-settings-column
         span
           | 🔢
           | {{_ 'card-sorting-by-number'}}
-    div.check-div
-      a.flex.js-field-has-card-sorting-by-number-on-minicard(class="{{#if allowsCardSortingByNumberOnMinicard}}is-checked{{/if}}")
-        .materialCheckBox(class="{{#if allowsCardSortingByNumberOnMinicard}}is-checked{{/if}}")
+    .card-settings-row
+      .card-settings-column
+        span
+      .card-settings-column
+        a.flex.js-field-has-card-sorting-by-number-on-minicard(title="{{_ 'card-sorting-by-number-on-minicard'}}" class="{{#if allowsCardSortingByNumberOnMinicard}}is-checked{{/if}}")
+          span {{#if allowsCardSortingByNumberOnMinicard}}✅{{else}}⬜{{/if}}
+      .card-settings-column
         span
           | 🔢
           | {{_ 'card-sorting-by-number-on-minicard'}}
-    div.check-div
-      a.flex.js-field-has-card-show-lists(class="{{#if allowsShowLists}}is-checked{{/if}}")
-        .materialCheckBox(class="{{#if allowsShowLists}}is-checked{{/if}}")
+    .card-settings-row
+      .card-settings-column
+        a.flex.js-field-has-card-show-lists(title="{{_ 'card-show-lists'}}" class="{{#if allowsShowLists}}is-checked{{/if}}")
+          span {{#if allowsShowLists}}✅{{else}}⬜{{/if}}
+      .card-settings-column
+        span
+      .card-settings-column
         span
           | 📋
           | {{_ 'card-show-lists'}}
-    div.check-div
-      a.flex.js-field-has-labels(class="{{#if allowsLabels}}is-checked{{/if}}")
-        .materialCheckBox(class="{{#if allowsLabels}}is-checked{{/if}}")
+    .card-settings-row
+      .card-settings-column
+        a.flex.js-field-has-labels(title="{{_ 'labels'}}" class="{{#if allowsLabels}}is-checked{{/if}}")
+          span {{#if allowsLabels}}✅{{else}}⬜{{/if}}
+      .card-settings-column
+        a.flex.js-field-has-labels(title="{{_ 'labels'}}" class="{{#if allowsLabels}}is-checked{{/if}}")
+          span {{#if allowsLabels}}✅{{else}}⬜{{/if}}
+      .card-settings-column
         span
           | 🏷️
           | {{_ 'labels'}}
-    div.check-div
-      a.flex.js-field-has-card-show-lists-on-minicard(class="{{#if allowsShowListsOnMinicard}}is-checked{{/if}}")
-        .materialCheckBox(class="{{#if allowsShowListsOnMinicard}}is-checked{{/if}}")
+    .card-settings-row
+      .card-settings-column
+        span
+      .card-settings-column
+        a.flex.js-field-has-card-show-lists-on-minicard(title="{{_ 'card-show-lists-on-minicard'}}" class="{{#if allowsShowListsOnMinicard}}is-checked{{/if}}")
+          span {{#if allowsShowListsOnMinicard}}✅{{else}}⬜{{/if}}
+      .card-settings-column
         span
           | 📋
           | {{_ 'card-show-lists-on-minicard'}}
-    div.check-div
-      a.flex.js-field-has-card-number(class="{{#if allowsCardNumber}}is-checked{{/if}}")
-        .materialCheckBox(class="{{#if allowsCardNumber}}is-checked{{/if}}")
+    .card-settings-row
+      .card-settings-column
+        a.flex.js-field-has-card-number(title="{{_ 'card'}} {{_ 'number'}}" class="{{#if allowsCardNumber}}is-checked{{/if}}")
+          span {{#if allowsCardNumber}}✅{{else}}⬜{{/if}}
+      .card-settings-column
+        a.flex.js-field-has-card-number(title="{{_ 'card'}} {{_ 'number'}}" class="{{#if allowsCardNumber}}is-checked{{/if}}")
+          span {{#if allowsCardNumber}}✅{{else}}⬜{{/if}}
+      .card-settings-column
         span
           | #️⃣
           | {{_ 'card'}}
           | {{_ 'number'}}
-    div.check-div
-      a.flex.js-field-has-description-title(class="{{#if allowsDescriptionTitle}}is-checked{{/if}}")
-        .materialCheckBox(class="{{#if allowsDescriptionTitle}}is-checked{{/if}}")
+    .card-settings-row
+      .card-settings-column
+        a.flex.js-field-has-description-title(title="{{_ 'description'}} {{_ 'title'}}" class="{{#if allowsDescriptionTitle}}is-checked{{/if}}")
+          span {{#if allowsDescriptionTitle}}✅{{else}}⬜{{/if}}
+      .card-settings-column
+        a.flex.js-field-has-description-title(title="{{_ 'description'}} {{_ 'title'}}" class="{{#if allowsDescriptionTitle}}is-checked{{/if}}")
+          span {{#if allowsDescriptionTitle}}✅{{else}}⬜{{/if}}
+      .card-settings-column
         span
           | 📝
           | {{_ 'description'}}
           | {{_ 'title'}}
-    div.check-div
-      a.flex.js-field-has-description-text(class="{{#if allowsDescriptionText}}is-checked{{/if}}")
-        .materialCheckBox(class="{{#if allowsDescriptionText}}is-checked{{/if}}")
+    .card-settings-row
+      .card-settings-column
+        a.flex.js-field-has-description-text(title="{{_ 'description'}} {{_ 'custom-field-text'}}" class="{{#if allowsDescriptionText}}is-checked{{/if}}")
+          span {{#if allowsDescriptionText}}✅{{else}}⬜{{/if}}
+      .card-settings-column
+        a.flex.js-field-has-description-text(title="{{_ 'description'}} {{_ 'custom-field-text'}}" class="{{#if allowsDescriptionText}}is-checked{{/if}}")
+          span {{#if allowsDescriptionText}}✅{{else}}⬜{{/if}}
+      .card-settings-column
         span
           | 📝
           | {{_ 'description'}}
           | {{_ 'custom-field-text'}}
-    div.check-div
-      a.flex.js-field-has-description-text-on-minicard(class="{{#if allowsDescriptionTextOnMinicard}}is-checked{{/if}}")
-        .materialCheckBox(class="{{#if allowsDescriptionTextOnMinicard}}is-checked{{/if}}")
+    .card-settings-row
+      .card-settings-column
+        span
+      .card-settings-column
+        a.flex.js-field-has-description-text-on-minicard(title="{{_ 'description-on-minicard'}}" class="{{#if allowsDescriptionTextOnMinicard}}is-checked{{/if}}")
+          span {{#if allowsDescriptionTextOnMinicard}}✅{{else}}⬜{{/if}}
+      .card-settings-column
         span
           | 📝
           | {{_ 'description-on-minicard'}}
-    div.check-div
-      a.flex.js-field-has-checklists(class="{{#if allowsChecklists}}is-checked{{/if}}")
-        .materialCheckBox(class="{{#if allowsChecklists}}is-checked{{/if}}")
+    .card-settings-row
+      .card-settings-column
+        a.flex.js-field-has-checklists(title="{{_ 'checklists'}}" class="{{#if allowsChecklists}}is-checked{{/if}}")
+          span {{#if allowsChecklists}}✅{{else}}⬜{{/if}}
+      .card-settings-column
+        a.flex.js-field-has-checklists(title="{{_ 'checklists'}}" class="{{#if allowsChecklists}}is-checked{{/if}}")
+          span {{#if allowsChecklists}}✅{{else}}⬜{{/if}}
+      .card-settings-column
         span
           | ✅
           | {{_ 'checklists'}}
-    div.check-div
-      a.flex.js-field-has-subtasks(class="{{#if allowsSubtasks}}is-checked{{/if}}")
-        .materialCheckBox(class="{{#if allowsSubtasks}}is-checked{{/if}}")
+    .card-settings-row
+      .card-settings-column
+        a.flex.js-field-has-subtasks(title="{{_ 'subtasks'}}" class="{{#if allowsSubtasks}}is-checked{{/if}}")
+          span {{#if allowsSubtasks}}✅{{else}}⬜{{/if}}
+      .card-settings-column
+        a.flex.js-field-has-subtasks(title="{{_ 'subtasks'}}" class="{{#if allowsSubtasks}}is-checked{{/if}}")
+          span {{#if allowsSubtasks}}✅{{else}}⬜{{/if}}
+      .card-settings-column
         span
           | 🌐
           | {{_ 'subtasks'}}
-    div.check-div
-      a.flex.js-field-has-attachments(class="{{#if allowsAttachments}}is-checked{{/if}}")
-        .materialCheckBox(class="{{#if allowsAttachments}}is-checked{{/if}}")
+    .card-settings-row
+      .card-settings-column
+        a.flex.js-field-has-attachments(title="{{_ 'attachments'}}" class="{{#if allowsAttachments}}is-checked{{/if}}")
+          span {{#if allowsAttachments}}✅{{else}}⬜{{/if}}
+      .card-settings-column
+        a.flex.js-field-has-attachments(title="{{_ 'attachments'}}" class="{{#if allowsAttachments}}is-checked{{/if}}")
+          span {{#if allowsAttachments}}✅{{else}}⬜{{/if}}
+      .card-settings-column
         span
           | 📎
           | {{_ 'attachments'}}
-    div.check-div
-      a.flex.js-field-has-badge-attachment-on-minicard(class="{{#if allowsBadgeAttachmentOnMinicard}}is-checked{{/if}}")
-        .materialCheckBox(class="{{#if allowsBadgeAttachmentOnMinicard}}is-checked{{/if}}")
+    .card-settings-row
+      .card-settings-column
+        span
+      .card-settings-column
+        a.flex.js-field-has-badge-attachment-on-minicard(title="{{_ 'badge-attachment-on-minicard'}}" class="{{#if allowsBadgeAttachmentOnMinicard}}is-checked{{/if}}")
+          span {{#if allowsBadgeAttachmentOnMinicard}}✅{{else}}⬜{{/if}}
+      .card-settings-column
         span
           | 📎
           | {{_ 'badge-attachment-on-minicard'}}
-    div.check-div
-      a.flex.js-field-has-cover-attachment-on-minicard(class="{{#if allowsCoverAttachmentOnMinicard}}is-checked{{/if}}")
-        .materialCheckBox(class="{{#if allowsCoverAttachmentOnMinicard}}is-checked{{/if}}")
+    .card-settings-row
+      .card-settings-column
+        span
+      .card-settings-column
+        a.flex.js-field-has-cover-attachment-on-minicard(title="{{_ 'cover-attachment-on-minicard'}}" class="{{#if allowsCoverAttachmentOnMinicard}}is-checked{{/if}}")
+          span {{#if allowsCoverAttachmentOnMinicard}}✅{{else}}⬜{{/if}}
+      .card-settings-column
         span
           | 📖
           | 🖼️
@@ -364,27 +475,27 @@ template(name="boardCardSettingsPopup")
 template(name="boardSubtaskSettingsPopup")
   form.board-subtask-settings
     h3 {{_ 'show-parent-in-minicard'}}
-      a#prefix-with-full-path.flex.js-field-show-parent-in-minicard(class="{{#if $eq presentParentTask 'prefix-with-full-path'}}is-checked{{/if}}")
-        .materialCheckBox(class="{{#if $eq presentParentTask 'prefix-with-full-path'}}is-checked{{/if}}")
+      a#prefix-with-full-path.flex.js-field-show-parent-in-minicard(title="{{_ 'prefix-with-full-path'}}" class="{{#if $eq presentParentTask 'prefix-with-full-path'}}is-checked{{/if}}")
+        span {{#if $eq presentParentTask 'prefix-with-full-path'}}✅{{else}}⬜{{/if}}
         span {{_ 'prefix-with-full-path'}}
-      a#prefix-with-parent.flex.js-field-show-parent-in-minicard(class="{{#if $eq presentParentTask 'prefix-with-parent'}}is-checked{{/if}}")
-        .materialCheckBox(class="{{#if $eq presentParentTask 'prefix-with-parent'}}is-checked{{/if}}")
+      a#prefix-with-parent.flex.js-field-show-parent-in-minicard(title="{{_ 'prefix-with-parent'}}" class="{{#if $eq presentParentTask 'prefix-with-parent'}}is-checked{{/if}}")
+        span {{#if $eq presentParentTask 'prefix-with-parent'}}✅{{else}}⬜{{/if}}
         span {{_ 'prefix-with-parent'}}
-      a#subtext-with-full-path.flex.js-field-show-parent-in-minicard(class="{{#if $eq presentParentTask 'subtext-with-full-path'}}is-checked{{/if}}")
-        .materialCheckBox(class="{{#if $eq presentParentTask 'subtext-with-full-path'}}is-checked{{/if}}")
+      a#subtext-with-full-path.flex.js-field-show-parent-in-minicard(title="{{_ 'subtext-with-full-path'}}" class="{{#if $eq presentParentTask 'subtext-with-full-path'}}is-checked{{/if}}")
+        span {{#if $eq presentParentTask 'subtext-with-full-path'}}✅{{else}}⬜{{/if}}
         span {{_ 'subtext-with-full-path'}}
-      a#subtext-with-parent.flex.js-field-show-parent-in-minicard(class="{{#if $eq presentParentTask 'subtext-with-parent'}}is-checked{{/if}}")
-        .materialCheckBox(class="{{#if $eq presentParentTask 'subtext-with-parent'}}is-checked{{/if}}")
+      a#subtext-with-parent.flex.js-field-show-parent-in-minicard(title="{{_ 'subtext-with-parent'}}" class="{{#if $eq presentParentTask 'subtext-with-parent'}}is-checked{{/if}}")
+        span {{#if $eq presentParentTask 'subtext-with-parent'}}✅{{else}}⬜{{/if}}
         span {{_ 'subtext-with-parent'}}
-      a#no-parent.flex.js-field-show-parent-in-minicard(class="{{#if $eq presentParentTask 'no-parent'}}is-checked{{/if}}")
-        .materialCheckBox(class="{{#if $eq presentParentTask 'no-parent'}}is-checked{{/if}}")
+      a#no-parent.flex.js-field-show-parent-in-minicard(title="{{_ 'no-parent'}}" class="{{#if $eq presentParentTask 'no-parent'}}is-checked{{/if}}")
+        span {{#if $eq presentParentTask 'no-parent'}}✅{{else}}⬜{{/if}}
         span {{_ 'no-parent'}}
     div
       hr
 
     div.check-div
-      a.flex.js-field-has-subtasks(class="{{#if allowsSubtasks}}is-checked{{/if}}")
-        .materialCheckBox(class="{{#if allowsSubtasks}}is-checked{{/if}}")
+      a.flex.js-field-has-subtasks(title="{{_ 'show-subtasks-field'}}" class="{{#if allowsSubtasks}}is-checked{{/if}}")
+        span {{#if allowsSubtasks}}✅{{else}}⬜{{/if}}
         span {{_ 'show-subtasks-field'}}
 
     label
@@ -430,9 +541,8 @@ template(name="outgoingWebhooksPopup")
   each integrations
     form.integration-form
       a.flex
+        span {{#unless enabled}}✅{{else}}⬜{{/unless}}
         span {{_ 'disable-webhook'}}
-        b  
-        .materialCheckBox(class="{{#unless enabled}}is-checked{{/unless}}")
       input.js-outgoing-webhooks-title(placeholder="{{_ 'webhook-title'}}" type="text" name="title" value=title)
       input.js-outgoing-webhooks-url(type="text" name="url" value=url)
       input.js-outgoing-webhooks-token(placeholder="{{_ 'webhook-token' }}" type="text" value=token name="token")

+ 133 - 226
client/components/sidebar/sidebar.js

@@ -195,7 +195,7 @@ BlazeComponent.extendComponent({
   events() {
     return [
       {
-        'click #toggleShowActivitiesBoard'() {
+        'click .js-toggle-show-activities'() {
           Utils.getCurrentBoard().toggleShowActivities();
         },
       },
@@ -822,7 +822,11 @@ BlazeComponent.extendComponent({
   },
 
   allowsSubtasks() {
-    return this.currentBoard.allowsSubtasks;
+    // Get the current board reactively using board ID from Session
+    const boardId = Session.get('currentBoard');
+    const currentBoard = ReactiveCache.getBoard(boardId);
+    const result = currentBoard ? currentBoard.allowsSubtasks : false;
+    return result;
   },
 
   allowsReceivedDate() {
@@ -874,7 +878,11 @@ BlazeComponent.extendComponent({
   },
 
   presentParentTask() {
-    let result = this.currentBoard.presentParentTask;
+    // Get the current board reactively using board ID from Session
+    const boardId = Session.get('currentBoard');
+    const currentBoard = ReactiveCache.getBoard(boardId);
+    
+    let result = currentBoard ? currentBoard.presentParentTask : null;
     if (result === null || result === undefined) {
       result = 'no-parent';
     }
@@ -886,19 +894,11 @@ BlazeComponent.extendComponent({
       {
         'click .js-field-has-subtasks'(evt) {
           evt.preventDefault();
-          this.currentBoard.allowsSubtasks = !this.currentBoard.allowsSubtasks;
-          this.currentBoard.setAllowsSubtasks(this.currentBoard.allowsSubtasks);
-          $(`.js-field-has-subtasks ${MCB}`).toggleClass(
-            CKCLS,
-            this.currentBoard.allowsSubtasks,
-          );
-          $('.js-field-has-subtasks').toggleClass(
-            CKCLS,
-            this.currentBoard.allowsSubtasks,
-          );
+          const newValue = !this.currentBoard.allowsSubtasks;
+          Boards.update(this.currentBoard._id, { $set: { allowsSubtasks: newValue } });
           $('.js-field-deposit-board').prop(
             'disabled',
-            !this.currentBoard.allowsSubtasks,
+            !newValue,
           );
         },
         'change .js-field-deposit-board'(evt) {
@@ -914,28 +914,13 @@ BlazeComponent.extendComponent({
           evt.preventDefault();
         },
         'click .js-field-show-parent-in-minicard'(evt) {
-          const value =
-            evt.target.id ||
-            $(evt.target).parent()[0].id ||
-            $(evt.target)
-              .parent()[0]
-              .parent()[0].id;
-          const options = [
-            'prefix-with-full-path',
-            'prefix-with-parent',
-            'subtext-with-full-path',
-            'subtext-with-parent',
-            'no-parent',
-          ];
-          options.forEach(function(element) {
-            if (element !== value) {
-              $(`#${element} ${MCB}`).toggleClass(CKCLS, false);
-              $(`#${element}`).toggleClass(CKCLS, false);
-            }
-          });
-          $(`#${value} ${MCB}`).toggleClass(CKCLS, true);
-          $(`#${value}`).toggleClass(CKCLS, true);
-          this.currentBoard.setPresentParentTask(value);
+          // Get the ID from the anchor element, not the span
+          const anchorElement = $(evt.target).closest('.js-field-show-parent-in-minicard')[0];
+          const value = anchorElement ? anchorElement.id : null;
+          
+          if (value) {
+            Boards.update(this.currentBoard._id, { $set: { presentParentTask: value } });
+          }
           evt.preventDefault();
         },
       },
@@ -949,115 +934,168 @@ BlazeComponent.extendComponent({
   },
 
   allowsReceivedDate() {
-    return this.currentBoard.allowsReceivedDate;
+    const boardId = Session.get('currentBoard');
+    const currentBoard = ReactiveCache.getBoard(boardId);
+    return currentBoard ? currentBoard.allowsReceivedDate : false;
   },
 
   allowsStartDate() {
-    return this.currentBoard.allowsStartDate;
+    const boardId = Session.get('currentBoard');
+    const currentBoard = ReactiveCache.getBoard(boardId);
+    return currentBoard ? currentBoard.allowsStartDate : false;
   },
 
   allowsDueDate() {
-    return this.currentBoard.allowsDueDate;
+    const boardId = Session.get('currentBoard');
+    const currentBoard = ReactiveCache.getBoard(boardId);
+    return currentBoard ? currentBoard.allowsDueDate : false;
   },
 
   allowsEndDate() {
-    return this.currentBoard.allowsEndDate;
+    const boardId = Session.get('currentBoard');
+    const currentBoard = ReactiveCache.getBoard(boardId);
+    return currentBoard ? currentBoard.allowsEndDate : false;
   },
 
   allowsSubtasks() {
-    return this.currentBoard.allowsSubtasks;
+    const boardId = Session.get('currentBoard');
+    const currentBoard = ReactiveCache.getBoard(boardId);
+    return currentBoard ? currentBoard.allowsSubtasks : false;
   },
 
   allowsCreator() {
-    return this.currentBoard.allowsCreator ?? false;
+    const boardId = Session.get('currentBoard');
+    const currentBoard = ReactiveCache.getBoard(boardId);
+    return currentBoard ? (currentBoard.allowsCreator ?? false) : false;
   },
 
   allowsCreatorOnMinicard() {
-    return this.currentBoard.allowsCreatorOnMinicard ?? false;
+    const boardId = Session.get('currentBoard');
+    const currentBoard = ReactiveCache.getBoard(boardId);
+    return currentBoard ? (currentBoard.allowsCreatorOnMinicard ?? false) : false;
   },
 
   allowsMembers() {
-    return this.currentBoard.allowsMembers;
+    const boardId = Session.get('currentBoard');
+    const currentBoard = ReactiveCache.getBoard(boardId);
+    return currentBoard ? currentBoard.allowsMembers : false;
   },
 
   allowsAssignee() {
-    return this.currentBoard.allowsAssignee;
+    const boardId = Session.get('currentBoard');
+    const currentBoard = ReactiveCache.getBoard(boardId);
+    return currentBoard ? currentBoard.allowsAssignee : false;
   },
 
   allowsAssignedBy() {
-    return this.currentBoard.allowsAssignedBy;
+    const boardId = Session.get('currentBoard');
+    const currentBoard = ReactiveCache.getBoard(boardId);
+    return currentBoard ? currentBoard.allowsAssignedBy : false;
   },
 
   allowsRequestedBy() {
-    return this.currentBoard.allowsRequestedBy;
+    const boardId = Session.get('currentBoard');
+    const currentBoard = ReactiveCache.getBoard(boardId);
+    return currentBoard ? currentBoard.allowsRequestedBy : false;
   },
 
   allowsCardSortingByNumber() {
-    return this.currentBoard.allowsCardSortingByNumber;
+    const boardId = Session.get('currentBoard');
+    const currentBoard = ReactiveCache.getBoard(boardId);
+    return currentBoard ? currentBoard.allowsCardSortingByNumber : false;
   },
 
   allowsShowLists() {
-    return this.currentBoard.allowsShowLists;
+    const boardId = Session.get('currentBoard');
+    const currentBoard = ReactiveCache.getBoard(boardId);
+    return currentBoard ? currentBoard.allowsShowLists : false;
   },
 
-
   allowsLabels() {
-    return this.currentBoard.allowsLabels;
+    const boardId = Session.get('currentBoard');
+    const currentBoard = ReactiveCache.getBoard(boardId);
+    return currentBoard ? currentBoard.allowsLabels : false;
   },
 
   allowsShowListsOnMinicard() {
-    return this.currentBoard.allowsShowListsOnMinicard;
+    const boardId = Session.get('currentBoard');
+    const currentBoard = ReactiveCache.getBoard(boardId);
+    return currentBoard ? currentBoard.allowsShowListsOnMinicard : false;
   },
 
   allowsChecklists() {
-    return this.currentBoard.allowsChecklists;
+    const boardId = Session.get('currentBoard');
+    const currentBoard = ReactiveCache.getBoard(boardId);
+    return currentBoard ? currentBoard.allowsChecklists : false;
   },
 
   allowsAttachments() {
-    return this.currentBoard.allowsAttachments;
+    const boardId = Session.get('currentBoard');
+    const currentBoard = ReactiveCache.getBoard(boardId);
+    return currentBoard ? currentBoard.allowsAttachments : false;
   },
 
   allowsComments() {
-    return this.currentBoard.allowsComments;
+    const boardId = Session.get('currentBoard');
+    const currentBoard = ReactiveCache.getBoard(boardId);
+    return currentBoard ? currentBoard.allowsComments : false;
   },
 
   allowsCardNumber() {
-    return this.currentBoard.allowsCardNumber;
+    const boardId = Session.get('currentBoard');
+    const currentBoard = ReactiveCache.getBoard(boardId);
+    return currentBoard ? currentBoard.allowsCardNumber : false;
   },
 
   allowsDescriptionTitle() {
-    return this.currentBoard.allowsDescriptionTitle;
+    const boardId = Session.get('currentBoard');
+    const currentBoard = ReactiveCache.getBoard(boardId);
+    return currentBoard ? currentBoard.allowsDescriptionTitle : false;
   },
 
   allowsDescriptionText() {
-    return this.currentBoard.allowsDescriptionText;
+    const boardId = Session.get('currentBoard');
+    const currentBoard = ReactiveCache.getBoard(boardId);
+    return currentBoard ? currentBoard.allowsDescriptionText : false;
   },
 
   isBoardSelected() {
-    return this.currentBoard.dateSettingsDefaultBoardID;
+    const boardId = Session.get('currentBoard');
+    const currentBoard = ReactiveCache.getBoard(boardId);
+    return currentBoard ? currentBoard.dateSettingsDefaultBoardID : false;
   },
 
   isNullBoardSelected() {
-    return (
-      this.currentBoard.dateSettingsDefaultBoardId === null ||
-      this.currentBoard.dateSettingsDefaultBoardId === undefined
-    );
+    const boardId = Session.get('currentBoard');
+    const currentBoard = ReactiveCache.getBoard(boardId);
+    return currentBoard ? (
+      currentBoard.dateSettingsDefaultBoardId === null ||
+      currentBoard.dateSettingsDefaultBoardId === undefined
+    ) : true;
   },
 
   allowsDescriptionTextOnMinicard() {
-    return this.currentBoard.allowsDescriptionTextOnMinicard;
+    const boardId = Session.get('currentBoard');
+    const currentBoard = ReactiveCache.getBoard(boardId);
+    return currentBoard ? currentBoard.allowsDescriptionTextOnMinicard : false;
   },
 
   allowsCoverAttachmentOnMinicard() {
-    return this.currentBoard.allowsCoverAttachmentOnMinicard;
+    const boardId = Session.get('currentBoard');
+    const currentBoard = ReactiveCache.getBoard(boardId);
+    return currentBoard ? currentBoard.allowsCoverAttachmentOnMinicard : false;
   },
 
   allowsBadgeAttachmentOnMinicard() {
-    return this.currentBoard.allowsBadgeAttachmentOnMinicard;
+    const boardId = Session.get('currentBoard');
+    const currentBoard = ReactiveCache.getBoard(boardId);
+    return currentBoard ? currentBoard.allowsBadgeAttachmentOnMinicard : false;
   },
 
   allowsCardSortingByNumberOnMinicard() {
-    return this.currentBoard.allowsCardSortingByNumberOnMinicard;
+    const boardId = Session.get('currentBoard');
+    const currentBoard = ReactiveCache.getBoard(boardId);
+    return currentBoard ? currentBoard.allowsCardSortingByNumberOnMinicard : false;
   },
 
   boards() {
@@ -1100,203 +1138,73 @@ BlazeComponent.extendComponent({
       {
         'click .js-field-has-receiveddate'(evt) {
           evt.preventDefault();
-          this.currentBoard.allowsReceivedDate = !this.currentBoard
-            .allowsReceivedDate;
-          this.currentBoard.setAllowsReceivedDate(
-            this.currentBoard.allowsReceivedDate,
-          );
-          $(`.js-field-has-receiveddate ${MCB}`).toggleClass(
-            CKCLS,
-            this.currentBoard.allowsReceivedDate,
-          );
-          $('.js-field-has-receiveddate').toggleClass(
-            CKCLS,
-            this.currentBoard.allowsReceivedDate,
-          );
+          const newValue = !this.currentBoard.allowsReceivedDate;
+          Boards.update(this.currentBoard._id, { $set: { allowsReceivedDate: newValue } });
         },
         'click .js-field-has-startdate'(evt) {
           evt.preventDefault();
-          this.currentBoard.allowsStartDate = !this.currentBoard
-            .allowsStartDate;
-          this.currentBoard.setAllowsStartDate(
-            this.currentBoard.allowsStartDate,
-          );
-          $(`.js-field-has-startdate ${MCB}`).toggleClass(
-            CKCLS,
-            this.currentBoard.allowsStartDate,
-          );
-          $('.js-field-has-startdate').toggleClass(
-            CKCLS,
-            this.currentBoard.allowsStartDate,
-          );
+          const newValue = !this.currentBoard.allowsStartDate;
+          Boards.update(this.currentBoard._id, { $set: { allowsStartDate: newValue } });
         },
         'click .js-field-has-enddate'(evt) {
           evt.preventDefault();
-          this.currentBoard.allowsEndDate = !this.currentBoard.allowsEndDate;
-          this.currentBoard.setAllowsEndDate(this.currentBoard.allowsEndDate);
-          $(`.js-field-has-enddate ${MCB}`).toggleClass(
-            CKCLS,
-            this.currentBoard.allowsEndDate,
-          );
-          $('.js-field-has-enddate').toggleClass(
-            CKCLS,
-            this.currentBoard.allowsEndDate,
-          );
+          const newValue = !this.currentBoard.allowsEndDate;
+          Boards.update(this.currentBoard._id, { $set: { allowsEndDate: newValue } });
         },
         'click .js-field-has-duedate'(evt) {
           evt.preventDefault();
-          this.currentBoard.allowsDueDate = !this.currentBoard.allowsDueDate;
-          this.currentBoard.setAllowsDueDate(this.currentBoard.allowsDueDate);
-          $(`.js-field-has-duedate ${MCB}`).toggleClass(
-            CKCLS,
-            this.currentBoard.allowsDueDate,
-          );
-          $('.js-field-has-duedate').toggleClass(
-            CKCLS,
-            this.currentBoard.allowsDueDate,
-          );
+          const newValue = !this.currentBoard.allowsDueDate;
+          Boards.update(this.currentBoard._id, { $set: { allowsDueDate: newValue } });
         },
         'click .js-field-has-subtasks'(evt) {
           evt.preventDefault();
-          this.currentBoard.allowsSubtasks = !this.currentBoard.allowsSubtasks;
-          this.currentBoard.setAllowsSubtasks(this.currentBoard.allowsSubtasks);
-          $(`.js-field-has-subtasks ${MCB}`).toggleClass(
-            CKCLS,
-            this.currentBoard.allowsSubtasks,
-          );
-          $('.js-field-has-subtasks').toggleClass(
-            CKCLS,
-            this.currentBoard.allowsSubtasks,
-          );
+          const newValue = !this.currentBoard.allowsSubtasks;
+          Boards.update(this.currentBoard._id, { $set: { allowsSubtasks: newValue } });
         },
         'click .js-field-has-creator'(evt) {
           evt.preventDefault();
-          this.currentBoard.allowsCreator = !this.currentBoard.allowsCreator;
-          this.currentBoard.setAllowsCreator(this.currentBoard.allowsCreator);
-          $(`.js-field-has-creator ${MCB}`).toggleClass(
-            CKCLS,
-            this.currentBoard.allowsCreator,
-          );
-          $('.js-field-has-creator').toggleClass(
-            CKCLS,
-            this.currentBoard.allowsCreator,
-          );
+          const newValue = !this.currentBoard.allowsCreator;
+          Boards.update(this.currentBoard._id, { $set: { allowsCreator: newValue } });
         },
         'click .js-field-has-creator-on-minicard'(evt) {
           evt.preventDefault();
-          this.currentBoard.allowsCreatorOnMinicard = !this.currentBoard.allowsCreatorOnMinicard;
-          this.currentBoard.setAllowsCreatorOnMinicard(this.currentBoard.allowsCreatorOnMinicard);
-          $(`.js-field-has-creator-on-minicard ${MCB}`).toggleClass(
-            CKCLS,
-            this.currentBoard.allowsCreatorOnMinicard,
-          );
-          $('.js-field-has-creator-on-minicard').toggleClass(
-            CKCLS,
-            this.currentBoard.allowsCreatorOnMinicard,
-          );
+          const newValue = !this.currentBoard.allowsCreatorOnMinicard;
+          Boards.update(this.currentBoard._id, { $set: { allowsCreatorOnMinicard: newValue } });
         },
         'click .js-field-has-members'(evt) {
           evt.preventDefault();
-          this.currentBoard.allowsMembers = !this.currentBoard.allowsMembers;
-          this.currentBoard.setAllowsMembers(this.currentBoard.allowsMembers);
-          $(`.js-field-has-members ${MCB}`).toggleClass(
-            CKCLS,
-            this.currentBoard.allowsMembers,
-          );
-          $('.js-field-has-members').toggleClass(
-            CKCLS,
-            this.currentBoard.allowsMembers,
-          );
+          const newValue = !this.currentBoard.allowsMembers;
+          Boards.update(this.currentBoard._id, { $set: { allowsMembers: newValue } });
         },
         'click .js-field-has-assignee'(evt) {
           evt.preventDefault();
-          this.currentBoard.allowsAssignee = !this.currentBoard.allowsAssignee;
-          this.currentBoard.setAllowsAssignee(this.currentBoard.allowsAssignee);
-          $(`.js-field-has-assignee ${MCB}`).toggleClass(
-            CKCLS,
-            this.currentBoard.allowsAssignee,
-          );
-          $('.js-field-has-assignee').toggleClass(
-            CKCLS,
-            this.currentBoard.allowsAssignee,
-          );
+          const newValue = !this.currentBoard.allowsAssignee;
+          Boards.update(this.currentBoard._id, { $set: { allowsAssignee: newValue } });
         },
         'click .js-field-has-assigned-by'(evt) {
           evt.preventDefault();
-          this.currentBoard.allowsAssignedBy = !this.currentBoard
-            .allowsAssignedBy;
-          this.currentBoard.setAllowsAssignedBy(
-            this.currentBoard.allowsAssignedBy,
-          );
-          $(`.js-field-has-assigned-by ${MCB}`).toggleClass(
-            CKCLS,
-            this.currentBoard.allowsAssignedBy,
-          );
-          $('.js-field-has-assigned-by').toggleClass(
-            CKCLS,
-            this.currentBoard.allowsAssignedBy,
-          );
+          const newValue = !this.currentBoard.allowsAssignedBy;
+          Boards.update(this.currentBoard._id, { $set: { allowsAssignedBy: newValue } });
         },
         'click .js-field-has-requested-by'(evt) {
           evt.preventDefault();
-          this.currentBoard.allowsRequestedBy = !this.currentBoard
-            .allowsRequestedBy;
-          this.currentBoard.setAllowsRequestedBy(
-            this.currentBoard.allowsRequestedBy,
-          );
-          $(`.js-field-has-requested-by ${MCB}`).toggleClass(
-            CKCLS,
-            this.currentBoard.allowsRequestedBy,
-          );
-          $('.js-field-has-requested-by').toggleClass(
-            CKCLS,
-            this.currentBoard.allowsRequestedBy,
-          );
+          const newValue = !this.currentBoard.allowsRequestedBy;
+          Boards.update(this.currentBoard._id, { $set: { allowsRequestedBy: newValue } });
         },
         'click .js-field-has-card-sorting-by-number'(evt) {
           evt.preventDefault();
-          this.currentBoard.allowsCardSortingByNumber = !this.currentBoard
-            .allowsCardSortingByNumber;
-          this.currentBoard.setAllowsCardSortingByNumber(
-            this.currentBoard.allowsCardSortingByNumber,
-          );
-          $(`.js-field-has-card-sorting-by-number ${MCB}`).toggleClass(
-            CKCLS,
-            this.currentBoard.allowsCardSortingByNumber,
-          );
-          $('.js-field-has-card-sorting-by-number').toggleClass(
-            CKCLS,
-            this.currentBoard.allowsCardSortingByNumber,
-          );
+          const newValue = !this.currentBoard.allowsCardSortingByNumber;
+          Boards.update(this.currentBoard._id, { $set: { allowsCardSortingByNumber: newValue } });
         },
         'click .js-field-has-card-show-lists'(evt) {
           evt.preventDefault();
-          this.currentBoard.allowsShowLists = !this.currentBoard
-            .allowsShowLists;
-          this.currentBoard.setAllowsShowLists(
-            this.currentBoard.allowsShowLists,
-          );
-          $(`.js-field-has-card-show-lists ${MCB}`).toggleClass(
-            CKCLS,
-            this.currentBoard.allowsShowLists,
-          );
-          $('.js-field-has-card-show-lists').toggleClass(
-            CKCLS,
-            this.currentBoard.allowsShowLists,
-          );
+          const newValue = !this.currentBoard.allowsShowLists;
+          Boards.update(this.currentBoard._id, { $set: { allowsShowLists: newValue } });
         },
         'click .js-field-has-labels'(evt) {
           evt.preventDefault();
-          this.currentBoard.allowsLabels = !this.currentBoard.allowsLabels;
-          this.currentBoard.setAllowsLabels(this.currentBoard.allowsLabels);
-          $(`.js-field-has-labels ${MCB}`).toggleClass(
-            CKCLS,
-            this.currentBoard.allowsLabels,
-          );
-          $('.js-field-has-labels').toggleClass(
-            CKCLS,
-            this.currentBoard.allowsLabels,
-          );
+          const newValue = !this.currentBoard.allowsLabels;
+          Boards.update(this.currentBoard._id, { $set: { allowsLabels: newValue } });
         },
         'click .js-field-has-card-show-lists-on-minicard'(evt) {
           evt.preventDefault();
@@ -1499,7 +1407,6 @@ Session.setDefault('addMemberPopup.noResults', false);
 Session.setDefault('addMemberPopup.loading', false);
 Session.setDefault('addMemberPopup.error', '');
 
-console.log('addMemberPopup Session variables initialized');
 
 BlazeComponent.extendComponent({
   onCreated() {

+ 1 - 1
imports/i18n/data/en.i18n.json

@@ -762,7 +762,7 @@
   "subtask-settings": "Subtasks Settings",
   "card-settings": "Card Settings",
   "minicard-settings": "Minicard Settings",
-  "boardSubtaskSettingsPopup-title": "Board Subtasks Settings",
+  "boardSubtaskSettingsPopup-title": "Subtasks Settings",
   "boardCardSettingsPopup-title": "Card Settings",
   "boardMinicardSettingsPopup-title": "Minicard Settings",
   "deposit-subtasks-board": "Deposit subtasks to this board:",