Remove card element grouping to create compact card layout.

Card Settings / Show on Card: Description Title and Description Text.

Thanks to e-stoniauk, 2020product and xet7 !

Fixes https://github.com/wekan/wekan/pull/2922

client/components/cards/attachments.jade

@@ -53,5 +53,7 @@ template(name="attachmentsGalery")
     if currentUser.isBoardMember
       unless currentUser.isCommentOnly
         unless currentUser.isWorker
-          li.attachment-item.add-attachment
+          //li.attachment-item.add-attachment
-            a.js-add-attachment {{_ 'add-attachment' }}
+          a.js-add-attachment
+            i.fa.fa-paperclip
+            | {{_ 'add-attachment' }}

client/components/cards/cardDetails.jade

@@ -95,7 +95,7 @@ template(name="cardDetails")
                 a.card-label.add-label.js-end-date
                   i.fa.fa-plus
 
-    .card-details-items
+      //.card-details-items
       if currentBoard.allowsMembers
         .card-details-item.card-details-item-members
           h3
@@ -141,7 +141,7 @@ template(name="cardDetails")
               a.card-label.add-label.js-add-labels(title="{{_ 'card-labels-title'}}")
                 i.fa.fa-plus
 
-    .card-details-items
+      //.card-details-items
       each customFieldsWD
         .card-details-item.card-details-item-customfield
           h3.card-details-item-title
@@ -149,7 +149,7 @@ template(name="cardDetails")
               = definition.name
           +cardCustomField
 
-    .card-details-items
+      //.card-details-items
       if getSpentTime
         .card-details-item.card-details-item-spent
           if getIsOvertime
@@ -158,37 +158,7 @@ template(name="cardDetails")
             h3.card-details-item-title {{_ 'spent-time-hours'}}
           +cardSpentTime
 
-    //- XXX We should use "editable" to avoid repetiting ourselves
+      //.card-details-items
-    if canModifyCard
-      unless currentUser.isWorker
-        h3
-          i.fa.fa-align-left
-          card-details-item-title {{_ 'description'}}
-        +inlinedCardDescription(classNames="card-description js-card-description")
-          +editor(autofocus=true)
-            | {{getUnsavedValue 'cardDescription' _id getDescription}}
-          .edit-controls.clearfix
-            button.primary(type="submit") {{_ 'save'}}
-            a.fa.fa-times-thin.js-close-inlined-form
-        else
-          a.js-open-inlined-form
-            if getDescription
-              +viewer
-                = getDescription
-            else
-              | {{_ 'edit'}}
-          if (hasUnsavedValue 'cardDescription' _id)
-            p.quiet
-              | {{_ 'unsaved-description'}}
-              a.js-open-inlined-form {{_ 'view-it'}}
-              = ' - '
-              a.js-close-inlined-form {{_ 'discard'}}
-    else if getDescription
-      h3.card-details-item-title {{_ 'description'}}
-      +viewer
-        = getDescription
-
-    .card-details-items
       if currentBoard.allowsRequestedBy
         .card-details-item.card-details-item-name
           h3
@@ -229,6 +199,41 @@ template(name="cardDetails")
             +viewer
               = getAssignedBy
 
+    //- XXX We should use "editable" to avoid repetiting ourselves
+    if canModifyCard
+      unless currentUser.isWorker
+        if currentBoard.allowsDescriptionTitle
+          h3
+            i.fa.fa-align-left
+            card-details-item-title {{_ 'description'}}
+        if currentBoard.allowsDescriptionText
+          +inlinedCardDescription(classNames="card-description js-card-description")
+            +editor(autofocus=true)
+              | {{getUnsavedValue 'cardDescription' _id getDescription}}
+            .edit-controls.clearfix
+              button.primary(type="submit") {{_ 'save'}}
+              a.fa.fa-times-thin.js-close-inlined-form
+          else
+            if currentBoard.allowsDescriptionText
+              a.js-open-inlined-form
+                if getDescription
+                  +viewer
+                    = getDescription
+                else
+                  | {{_ 'edit'}}
+              if (hasUnsavedValue 'cardDescription' _id)
+                p.quiet
+                  | {{_ 'unsaved-description'}}
+                  a.js-open-inlined-form {{_ 'view-it'}}
+                  = ' - '
+                  a.js-close-inlined-form {{_ 'discard'}}
+    else if getDescription
+      if currentBoard.allowsDescriptionTitle
+        h3.card-details-item-title {{_ 'description'}}
+      if currentBoard.allowsDescriptionText
+        +viewer
+          = getDescription
+
     .card-checklist-attachmentGalerys
       .card-checklist-attachmentGalery.card-checklists
         if currentBoard.allowsChecklists

client/components/sidebar/sidebar.jade

@@ -129,6 +129,20 @@ template(name="boardCardSettingsPopup")
         span
           i.fa.fa-tags
           | {{_ 'labels'}}
+    div.check-div
+      a.flex.js-field-has-description-title(class="{{#if allowsDescriptionTitle}}is-checked{{/if}}")
+        .materialCheckBox(class="{{#if allowsDescriptionTitle}}is-checked{{/if}}")
+        span
+          i.fa.fa-align-left
+          | {{_ '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}}")
+        span
+          i.fa.fa-align-left
+          | {{_ 'description'}}
+          | {{_ 'custom-field-text'}}
     div.check-div
       a.flex.js-field-has-checklists(class="{{#if allowsChecklists}}is-checked{{/if}}")
         .materialCheckBox(class="{{#if allowsChecklists}}is-checked{{/if}}")

client/components/sidebar/sidebar.js

@@ -647,6 +647,14 @@ BlazeComponent.extendComponent({
     return this.currentBoard.allowsComments;
   },
 
+  allowsDescriptionTitle() {
+    return this.currentBoard.allowsDescriptionTitle;
+  },
+
+  allowsDescriptionText() {
+    return this.currentBoard.allowsDescriptionText;
+  },
+
   isBoardSelected() {
     return this.currentBoard.dateSettingsDefaultBoardID;
   },
@@ -837,6 +845,38 @@ BlazeComponent.extendComponent({
             this.currentBoard.allowsLabels,
           );
         },
+        'click .js-field-has-description-title'(evt) {
+          evt.preventDefault();
+          this.currentBoard.allowsDescriptionTitle = !this.currentBoard
+            .allowsDescriptionTitle;
+          this.currentBoard.setAllowsDescriptionTitle(
+            this.currentBoard.allowsDescriptionTitle,
+          );
+          $(`.js-field-has-description-title ${MCB}`).toggleClass(
+            CKCLS,
+            this.currentBoard.allowsDescriptionTitle,
+          );
+          $('.js-field-has-description-title').toggleClass(
+            CKCLS,
+            this.currentBoard.allowsDescriptionTitle,
+          );
+        },
+        'click .js-field-has-description-text'(evt) {
+          evt.preventDefault();
+          this.currentBoard.allowsDescriptionText = !this.currentBoard
+            .allowsDescriptionText;
+          this.currentBoard.setAllowsDescriptionText(
+            this.currentBoard.allowsDescriptionText,
+          );
+          $(`.js-field-has-description-text ${MCB}`).toggleClass(
+            CKCLS,
+            this.currentBoard.allowsDescriptionText,
+          );
+          $('.js-field-has-description-text').toggleClass(
+            CKCLS,
+            this.currentBoard.allowsDescriptionText,
+          );
+        },
         'click .js-field-has-checklists'(evt) {
           evt.preventDefault();
           this.currentBoard.allowsChecklists = !this.currentBoard

models/boards.js

@@ -332,6 +332,22 @@ Boards.attachSchema(
       defaultValue: true,
     },
 
+    allowsDescriptionTitle: {
+      /**
+       * Does the board allows description title?
+       */
+      type: Boolean,
+      defaultValue: true,
+    },
+
+    allowsDescriptionText: {
+      /**
+       * Does the board allows description text?
+       */
+      type: Boolean,
+      defaultValue: true,
+    },
+
     allowsActivities: {
       /**
        * Does the board allows comments?
@@ -1127,6 +1143,14 @@ Boards.mutations({
     return { $set: { allowsComments } };
   },
 
+  setAllowsDescriptionTitle(allowsDescriptionTitle) {
+    return { $set: { allowsDescriptionTitle } };
+  },
+
+  setAllowsDescriptionText(allowsDescriptionText) {
+    return { $set: { allowsDescriptionText } };
+  },
+
   setAllowsActivities(allowsActivities) {
     return { $set: { allowsActivities } };
   },

server/migrations.js

@@ -1001,3 +1001,35 @@ Migrations.add('add-activities-allowed', () => {
     noValidateMulti,
   );
 });
+
+Migrations.add('add-description-title-allowed', () => {
+  Boards.update(
+    {
+      allowsDescriptionTitle: {
+        $exists: false,
+      },
+    },
+    {
+      $set: {
+        allowsDescriptionTitle: true,
+      },
+    },
+    noValidateMulti,
+  );
+});
+
+Migrations.add('add-description-text-allowed', () => {
+  Boards.update(
+    {
+      allowsDescriptionText: {
+        $exists: false,
+      },
+    },
+    {
+      $set: {
+        allowsDescriptionText: true,
+      },
+    },
+    noValidateMulti,
+  );
+});