Fix New Board Permissions: NormalAssignedOnly, CommentAssignedOnly, ReadOnly, ReadAssignedOnly. Part 1.

Thanks to nazim-oss and xet7 !

Related #6060

client/components/cards/cardDetails.jade

@@ -19,14 +19,12 @@ template(name="cardDetails")
                 | 🔽
             a.close-card-details.js-close-card-details(title="{{_ 'close-card'}}")
               | ❌
-            if canModifyCard
-              if cardMaximized
-                a.minimize-card-details.js-minimize-card-details(title="{{_ 'minimize-card'}}")
-                  | 🔽
-              else
-                a.maximize-card-details.js-maximize-card-details(title="{{_ 'maximize-card'}}")
-                  | 🔼
-          if canModifyCard
+            if cardMaximized
+              a.minimize-card-details.js-minimize-card-details(title="{{_ 'minimize-card'}}")
+                | 🔽
+            else
+              a.maximize-card-details.js-maximize-card-details(title="{{_ 'maximize-card'}}")
+                | 🔼
             a.card-details-menu.js-open-card-details-menu(title="{{_ 'cardDetailsActionsPopup-title'}}")
               | ☰
             a.card-copy-button.js-copy-link(
@@ -35,8 +33,9 @@ template(name="cardDetails")
               href="{{ originRelativeUrl }}"
             )
               span.emoji-icon 🔗
-            span.card-drag-handle.js-card-drag-handle(title="Drag card")
-              | ↕️
+            if canModifyCard
+              span.card-drag-handle.js-card-drag-handle(title="Drag card")
+                | ↕️
             span.copied-tooltip {{_ 'copied'}}
         else
           a.close-card-details.js-close-card-details(title="{{_ 'close-card'}}")
@@ -50,24 +49,23 @@ template(name="cardDetails")
               | 🖥️
             else
               | 📱
-          if canModifyCard
-            if cardMaximized
-              a.minimize-card-details.js-minimize-card-details(title="{{_ 'minimize-card'}}")
-                | 🔽
-            else
-              a.maximize-card-details.js-maximize-card-details(title="{{_ 'maximize-card'}}")
-                | 🔼
-            a.card-details-menu-mobile-web.js-open-card-details-menu(title="{{_ 'cardDetailsActionsPopup-title'}}")
-              | ☰
-            a.card-copy-mobile-button.js-copy-link(
-              id="cardURL_copy"
-              title="{{_ 'copy-card-link-to-clipboard'}}"
-              href="{{ originRelativeUrl }}"
-            )
-              span.emoji-icon 🔗
-            span.copied-tooltip {{_ 'copied'}}
+          if cardMaximized
+            a.minimize-card-details.js-minimize-card-details(title="{{_ 'minimize-card'}}")
+              | 🔽
+          else
+            a.maximize-card-details.js-maximize-card-details(title="{{_ 'maximize-card'}}")
+              | 🔼
+          a.card-details-menu-mobile-web.js-open-card-details-menu(title="{{_ 'cardDetailsActionsPopup-title'}}")
+            | ☰
+          a.card-copy-mobile-button.js-copy-link(
+            id="cardURL_copy"
+            title="{{_ 'copy-card-link-to-clipboard'}}"
+            href="{{ originRelativeUrl }}"
+          )
+            span.emoji-icon 🔗
+          span.copied-tooltip {{_ 'copied'}}
         h2.card-details-title.js-card-title(
-          class="{{#if canModifyCard}}js-open-inlined-form is-editable{{/if}}")
+          class="{{#if canModifyCard}}js-open-inlined-form is-editable{{else}}js-card-title-drag-handle{{/if}}")
             +viewer
               if currentBoard.allowsCardNumber
                 span.card-number
@@ -636,13 +634,15 @@ template(name="cardDetails")
         if currentBoard.allowsComments
           if currentUser.isBoardMember
             unless currentUser.isNoComments
-              +commentForm
+              unless currentUser.isReadOnly
+                unless currentUser.isReadAssignedOnly
+                  +commentForm
               +comments
       hr
 
     .card-details-right
 
-      unless currentUser.isNoComments
+      if currentUser.isBoardAdmin
         .activity-title
           h3.card-details-item-title
             | 📜
@@ -655,7 +655,7 @@ template(name="cardDetails")
                 input.toggle-switch(type="checkbox" id="toggleShowActivitiesCard")
               label.toggle-label(for="toggleShowActivitiesCard")
 
-      unless currentUser.isNoComments
+      if currentUser.isBoardAdmin
         if isLoaded.get
           if isLinkedCard
             +activities(card=this mode="linkedcard")
@@ -741,55 +741,107 @@ template(name="cardDetailsActionsPopup")
             else
               | 👁️
               | {{_ 'show-list-on-minicard'}}
-  hr
+  if canModifyCard
+    hr
+  else
+    unless currentUser.isReadOnly
+      unless currentUser.isReadAssignedOnly
+        hr
   ul.pop-over-list
     li
       a.js-export-card
         | 📤
         | {{_ 'export-card'}}
-  hr
-  ul.pop-over-list
-    li
-      a.js-move-card-to-top
-        | ⬆️
-        | {{_ 'moveCardToTop-title'}}
-    li
-      a.js-move-card-to-bottom
-        | ⬇️
-        | {{_ 'moveCardToBottom-title'}}
-  hr
-  ul.pop-over-list
-    if currentUser.isBoardAdmin
-      li
-        a.js-move-card
-          | ➡️
-          | {{_ 'moveCardPopup-title'}}
-    unless currentUser.isWorker
-      li
-        a.js-copy-card
-          | 📋
-          | {{_ 'copyCardPopup-title'}}
-  unless currentUser.isWorker
-    ul.pop-over-list
-      li
-        a.js-copy-checklist-cards
-          | 📋
-          | 📋
-          | {{_ 'copyManyCardsPopup-title'}}
-    unless archived
-      hr
-      ul.pop-over-list
-        li
-          a.js-archive
-            | ➡️
-            | 📦
-            | {{_ 'archive-card'}}
+  unless canModifyCard
+    unless currentUser.isReadOnly
+      unless currentUser.isReadAssignedOnly
+        hr
+        ul.pop-over-list
+          li
+            a.js-move-card-to-top
+              | ⬆️
+              | {{_ 'moveCardToTop-title'}}
+          li
+            a.js-move-card-to-bottom
+              | ⬇️
+              | {{_ 'moveCardToBottom-title'}}
+        hr
+        ul.pop-over-list
+          if currentUser.isBoardAdmin
+            li
+              a.js-move-card
+                | ➡️
+                | {{_ 'moveCardPopup-title'}}
+          unless currentUser.isWorker
+            li
+              a.js-copy-card
+                | 📋
+                | {{_ 'copyCardPopup-title'}}
+        unless currentUser.isWorker
+          ul.pop-over-list
+            li
+              a.js-copy-checklist-cards
+                | 📋
+                | 📋
+                | {{_ 'copyManyCardsPopup-title'}}
+          unless archived
+            hr
+            ul.pop-over-list
+              li
+                a.js-archive
+                  | ➡️
+                  | 📦
+                  | {{_ 'archive-card'}}
+          hr
+          ul.pop-over-list
+            li
+              a.js-more
+                span.emoji-icon 🔗
+                | {{_ 'cardMorePopup-title'}}
+  if canModifyCard
     hr
     ul.pop-over-list
       li
-        a.js-more
-          span.emoji-icon 🔗
-          | {{_ 'cardMorePopup-title'}}
+        a.js-move-card-to-top
+          | ⬆️
+          | {{_ 'moveCardToTop-title'}}
+      li
+        a.js-move-card-to-bottom
+          | ⬇️
+          | {{_ 'moveCardToBottom-title'}}
+    hr
+    ul.pop-over-list
+      if currentUser.isBoardAdmin
+        li
+          a.js-move-card
+            | ➡️
+            | {{_ 'moveCardPopup-title'}}
+      unless currentUser.isWorker
+        li
+          a.js-copy-card
+            | 📋
+            | {{_ 'copyCardPopup-title'}}
+    unless currentUser.isWorker
+      ul.pop-over-list
+        li
+          a.js-copy-checklist-cards
+            | 📋
+            | 📋
+            | {{_ 'copyManyCardsPopup-title'}}
+      unless archived
+        hr
+        ul.pop-over-list
+          li
+            a.js-archive
+              | ➡️
+              | 📦
+              | {{_ 'archive-card'}}
+      hr
+      ul.pop-over-list
+        li
+          a.js-more
+            span.emoji-icon 🔗
+            | {{_ 'cardMorePopup-title'}}
 
 template(name="exportCardPopup")
   ul.pop-over-list

client/components/cards/cardDetails.js

@@ -100,6 +100,11 @@ BlazeComponent.extendComponent({
     return !Utils.getPopupCardId() && ReactiveCache.getCurrentUser().hasCardMaximized();
   },
 
+  showActivities() {
+    const user = ReactiveCache.getCurrentUser();
+    return user && user.hasShowActivities();
+  },
+
   cardCollapsed() {
     const user = ReactiveCache.getCurrentUser();
     if (user && user.profile) {
@@ -350,6 +355,37 @@ BlazeComponent.extendComponent({
           $(document).on('mousemove', onMouseMove);
           $(document).on('mouseup', onMouseUp);
         },
+        'mousedown .js-card-title-drag-handle'(event) {
+          // Allow dragging from title for ReadOnly users
+          // Don't interfere with text selection
+          if (event.target.tagName === 'A' || $(event.target).closest('a').length > 0) {
+            return; // Don't drag if clicking on links
+          }
+          
+          event.preventDefault();
+          const $card = $(event.target).closest('.card-details');
+          const startX = event.clientX;
+          const startY = event.clientY;
+          const startLeft = $card.offset().left;
+          const startTop = $card.offset().top;
+          
+          const onMouseMove = (e) => {
+            const deltaX = e.clientX - startX;
+            const deltaY = e.clientY - startY;
+            $card.css({
+              left: startLeft + deltaX + 'px',
+              top: startTop + deltaY + 'px'
+            });
+          };
+          
+          const onMouseUp = () => {
+            $(document).off('mousemove', onMouseMove);
+            $(document).off('mouseup', onMouseUp);
+          };
+          
+          $(document).on('mousemove', onMouseMove);
+          $(document).on('mouseup', onMouseUp);
+        },
         'click .js-close-card-details'() {
           // Get board ID from either the card data or current board in session
           const card = this.currentData() || this.data();
@@ -517,9 +553,6 @@ BlazeComponent.extendComponent({
           Session.set('cardDetailsIsDragging', false);
           Session.set('cardDetailsIsMouseDown', false);
         },
-        'click #toggleShowActivitiesCard'() {
-          this.data().toggleShowActivities();
-        },
         'click #toggleHideCheckedChecklistItems'() {
           this.data().toggleHideCheckedChecklistItems();
         },