v4.52

Some more small improvements to Modern Dark theme

.meteor/packages

@@ -144,3 +144,4 @@ rajit:bootstrap3-datepicker-vi
 rajit:bootstrap3-datepicker-zh-cn
 rajit:bootstrap3-datepicker-zh-tw
 staringatlights:fast-render
+spacebars

CHANGELOG.md

@@ -1,3 +1,45 @@
+# v4.52 2020-11-12 Wekan release
+
+This release adds the following improvements:
+
+- [Some more small improvements to Modern Dark theme](https://github.com/wekan/wekan/pull/3346).
+  Thanks to jghaanstra.
+
+Thanks to above GitHub users for their contributions and translators for their translations.
+
+# v4.51 2020-11-11 Wekan release
+
+This release adds the following new features:
+
+- [Board admin can edit and delete comments as well](https://github.com/wekan/wekan/pull/3340).
+  Thanks to mfilser.
+- [Drag handles for checklist](https://github.com/wekan/wekan/pull/3341).
+  Thanks to mfilser.
+- [Custom URL Schemes autolinked](https://github.com/wekan/wekan/pull/3339).
+  Thanks to brian-j.
+
+and adds the following improvements:
+
+- [Improvements to Modern Dark Theme](https://github.com/wekan/wekan/pull/3344).
+  Thanks to jghaanstra.
+
+Thanks to above GitHub users for their contributions and translators for their translations.
+
+# v4.50 2020-11-10 Wekan release
+
+This release adds the following new features:
+
+- Add 'Modern Dark' theme [Part1](https://github.com/wekan/wekan/pulls/3335)
+  and [Part2](https://github.com/wekan/wekan/commit/6801c960b115be4265bf18ba05c444ac79aef887).
+  Thanks to jghaanstra, helioguardabaxo and xet7.
+
+and fixes the following bugs:
+
+- [Fix edit description to require only one click](https://github.com/wekan/wekan/commit/0ef248574c2751be1245c5748a9cbbe5ba2969b5).
+  Thanks to uusijani and xet7.
+
+Thanks to above GitHub users for their contributions and translators for their translations.
+
 # v4.49 2020-11-04 Wekan release
 
 This release adds the following new features:

Stackerfile.yml

@@ -1,5 +1,5 @@
 appId: wekan-public/apps/77b94f60-dec9-0136-304e-16ff53095928
-appVersion: "v4.49.0"
+appVersion: "v4.52.0"
 files:
   userUploads:
     - README.md

client/components/activities/activities.jade

@@ -15,6 +15,12 @@ template(name="cardActivities")
   each activityData in currentCard.activities
     +activity(activity=activityData card=card mode=mode)
 
+template(name="editOrDeleteComment")
+  = ' - '
+  a.js-open-inlined-form {{_ "edit"}}
+  = ' - '
+  a.js-delete-comment {{_ "delete"}}
+
 template(name="activity")
   .activity
     +userAvatar(userId=activity.user._id)
@@ -118,11 +124,10 @@ template(name="activity")
               +viewer
                 = activity.comment.text
             span(title=activity.createdAt).activity-meta {{ moment activity.createdAt }}
-              if ($eq currentUser._id activity.comment.userId)
-                = ' - '
-                a.js-open-inlined-form {{_ "edit"}}
-                = ' - '
-                a.js-delete-comment {{_ "delete"}}
+              if($eq currentUser._id activity.comment.userId)
+                +editOrDeleteComment
+              else if currentUser.isBoardAdmin
+                +editOrDeleteComment
 
         if($eq activity.activityType 'deleteComment')
           | {{{_ 'activity-deleteComment' currentData.commentId}}}.

client/components/boards/boardColors.styl

@@ -589,15 +589,15 @@ setBoardClear(color1,color2)
     position relative
 
   &#header-quick-access #header-user-bar .header-user-bar-name
-    margin: 5px 3px 0 0;
+    margin: 5px 3px 0 0
 
   section#notifications-drawer
-    top: 46px;
+    top: 46px
     box-shadow: 0 4px 20px rgba(0,0,0,.1)
     max-width: 100%
 
   section#notifications-drawer .header
-    top: 46px;
+    top: 46px
     border-radius: 0 3px
     height: 21px
     background: #f7f7f7
@@ -742,3 +742,263 @@ setBoardClear(color1,color2)
 
   section#notifications-drawer .header .toggle-read
     top: 18px
+
+/*
+  Alternate "Modern Dark" Styling
+*/
+.board-color-moderndark
+  setBoardColor(#2a2a2a)
+
+  /* General */
+  body
+    background: #2a2a2a
+
+  /* Forms */
+  button[type=submit].primary, .board-color-modern input[type=submit].primary
+    background-color: #819C5D
+
+  .toggle-switch:checked~.toggle-label
+    background-color: #D2E9B4
+
+  .toggle-label:after, .board-color-modern .toggle-switch:checked~.toggle-label:after
+    background-color: #819C5D !important
+
+  /* Headers */
+  &#header-quick-access, .background-box, #header
+    background-color: #333333
+
+  &#header-quick-access
+    padding: 4px
+    font-size: 14px
+
+  &#header #header-main-bar
+    height: 30px
+    padding-top: 3px
+    padding-bottom: 3px
+
+  &#header
+    box-shadow: 0 6px 6px -6px rgba(0,0,0,0.8)
+
+  &#header-quick-access ul
+    overflow: visible
+
+  &#header-quick-access ul li.current
+    border: 0 !important
+    font-weight: bold
+
+  &#header-quick-access ul li.separator
+    display: none
+
+  &#header-quick-access ul li:nth-child(3)
+    margin-right: 10px
+
+  &#header-quick-access ul li a
+    padding: 5px 10px
+    border-radius: 2px
+
+  &#header-quick-access ul li.current a
+    border-radius: 2px
+    background: rgba(255,255,255,.2)
+
+  &#header #header-main-bar h1
+    font-family: Poppins
+    font-weight: bold
+    line-height: 0.8em
+    padding-top: 10px
+
+  /* Content */
+  .board-canvas
+    background: #2a2a2a
+    padding: 10px 10px 0
+
+  /* Swimlanes */
+  .swimlane .swimlane-header-wrap
+    background-color: #666666
+    color: #cccccc
+    padding: 4px 0
+    margin-bottom: 10px
+
+  .swimlane .swimlane-header-wrap .swimlane-header
+    font-family: Poppins
+
+  .swimlane
+    background: #2a2a2a
+    line-height: 15px
+    max-height: 100%
+
+  /* Lists */
+  .swimlane .list
+    background: #666666
+    border-radius: 0
+    border: 0px solid #666666
+
+  .swimlane .list:nth-child(even)
+    background: #5f5f5f
+
+  .list-header
+    background: #333333
+    padding-top: 10px
+    border-bottom: 6px solid #333333
+
+  .list-header .viewer
+    padding-left: 10px
+
+  .list-header .list-header-name
+    line-height: 14px
+    color: #eeeeee
+
+  .list-header .list-header-menu
+    padding-top: 17px
+
+  .list-body
+    scrollbar-width: thin
+    scrollbar-color: #343434 #999999
+
+  .list-body::-webkit-scrollbar
+    width: 10px
+
+  .list-body::-webkit-scrollbar-track
+    background: #343434
+    border-radius: 3px
+    margin: 4px 0
+
+  .list-body::-webkit-scrollbar-thumb
+    background-color: #999999
+    border-radius: 6px
+    border: 3px solid #343434
+
+  .list-body .open-minicard-composer:hover
+    background: none
+    box-shadow: none
+    border-bottom: 0
+
+  .list-body a.open-minicard-composer, .list-body a.open-minicard-composer i
+    color: #bbbbbb
+
+  .list-body a.open-minicard-composer:hover, .list-body a.open-minicard-composer:hover i
+    color: #ffffff
+
+  /* Mini Card */
+  .minicard
+    background-color: #444444
+    color: #cccccc
+    border-radius: 2px
+    font-size: 0.9em
+    padding: 10px
+    box-shadow: 0 4px 3px -3px rgba(0,0,0,0.8)
+    border-bottom: 1px solid #666666
+
+  .minicard:hover
+    background-color: #555555 !important
+
+  .card-label
+    font-size: 11px
+    font-weight: 400
+    padding: 2px 6px 0
+
+  .minicard .badges
+    color: #bbbbbb
+
+  .minicard .date
+    margin-top: 7px
+    font-size: 11px
+
+  .card-date.almost-due
+    color: #666666
+
+  .minicard.minicard-composer textarea.minicard-composer-textarea:focus
+    background-color: #eeeeee
+    color: #333333
+    padding: 6px
+
+  .is-selected .minicard
+    background-color: #666666
+
+  /* Card Details */
+  .card-details
+    background-color: #454545
+    color: #cccccc
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)
+    border: 1px solid #111111
+
+  .card-details
+    scrollbar-width: thin
+    scrollbar-color: #343434 #999999
+
+  .card-details::-webkit-scrollbar
+    width: 16px
+
+  .card-details::-webkit-scrollbar-track
+    background: #343434
+
+  .card-details::-webkit-scrollbar-thumb
+    background-color: #999999
+    border-radius: 6px
+    border: 4px solid #343434
+
+  .card-details .card-details-header
+    background: #333333
+    color: #cccccc
+    border-bottom: 2px solid #2d2d2d
+
+  .card-details hr
+    background: #2d2d2d
+
+  .card-details .card-details-item-title
+    color: #ffffff
+
+  .card-details .new-description textarea, .card-details .new-comment textarea
+    background-color: #dddddd
+    color: #111111
+
+  .card-details .checklist
+    background-color: transparent
+
+  .card-details .checklist-item
+    background-color: rgba(255,255,255,0.1)
+    padding: 2px 8px
+    border-radius: 3px
+
+  .card-details .check-box.materialCheckBox
+    border-color: #ffffff
+
+  .card-details .check-box.materialCheckBox.is-checked
+    border-bottom: 2px solid #819C5D
+    border-right: 2px solid #819C5D
+    border-top: 0
+    border-left: 0
+
+  .card-details .js-add-checklist-item
+    margin-top: 4px
+
+  .card-details .activities .activity .activity-desc .activity-comment
+    background-color: rgba(255,255,255,0.1)
+
+  /* Sidebar */
+  .sidebar .sidebar-shadow
+    background-color: #222222
+    box-shadow: -10px 0 5px -10px #444444
+    border-left: 1px solid #333333
+    color: #cccccc
+
+  .activities .activity .activity-desc .activity-comment
+    background-color: #cccccc
+    color: #222222
+
+  /* Pop-Ups for "Modern Dark" */
+.pop-over.board-color-moderndark
+  background-color: #454545
+  color: #cccccc
+  border: 1px solid #111111
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)
+
+.pop-over.board-color-moderndark .header
+  background-color: #333333
+
+.pop-over.board-color-moderndark .header-title
+  font-family: Poppins
+  font-size: 16px
+  color: #cccccc
+
+.pop-over.board-color-moderndark .pop-over-list li:hover > a
+  background-color: #819C5D !important

client/components/cards/cardDescription.jade

@@ -3,5 +3,5 @@ template(name="descriptionForm")
   .new-description.js-new-description(
     class="{{#if descriptionFormIsOpen}}is-open{{/if}}")
     form.js-new-description-form
-      +editor(class="js-new-description-input" data-meteor-emoji-large="true")
+      +editor(class="js-new-description-input" data-meteor-emoji-large="true" autofocus="autofocus")
         | {{getUnsavedValue 'cardDescription' _id getDescription}}

client/components/cards/cardDetails.js

@@ -250,12 +250,15 @@ BlazeComponent.extendComponent({
 
     // Disable sorting if the current user is not a board member
     this.autorun(() => {
-      const disabled = !userIsMember() || Utils.isMiniScreen();
+      const disabled = !userIsMember();
       if (
         $checklistsDom.data('uiSortable') ||
         $checklistsDom.data('sortable')
       ) {
         $checklistsDom.sortable('option', 'disabled', disabled);
+        if (Utils.isMiniScreenOrShowDesktopDragHandles()) {
+          $checklistsDom.sortable({ handle: '.checklist-handle'});
+        }
       }
       if ($subtasksDom.data('uiSortable') || $subtasksDom.data('sortable')) {
         $subtasksDom.sortable('option', 'disabled', disabled);

client/components/cards/checklists.jade

@@ -41,6 +41,8 @@ template(name="checklistDetail")
 
         if canModifyCard
           h2.title.js-open-inlined-form.is-editable
+            if isMiniScreenOrShowDesktopDragHandles
+              span.fa.checklist-handle(class="fa-arrows" title="{{_ 'dragChecklist'}}")
             +viewer
               = checklist.title
         else

client/components/cards/checklists.styl

@@ -42,6 +42,11 @@ textarea.js-add-checklist-item, textarea.js-edit-checklist-item
   .js-delete-checklist
     @extends .delete-text
 
+  span.fa.checklist-handle
+    padding-right: 20px
+    padding-top: 6px
+    float: right
+
 
 .js-confirm-checklist-delete
   background-color: darken(white, 3%)

client/components/main/editor.jade

@@ -3,6 +3,7 @@ template(name="editor")
     dir="auto"
     class="{{class}}"
     id=id
+    autofocus=autofocus
     placeholder="{{_ 'comment-placeholder'}}")
     +Template.contentBlock
 

client/components/main/editor.js

@@ -265,6 +265,26 @@ Template.editor.onRendered(() => {
 
 import sanitizeXss from 'xss';
 
+// Additional  safeAttrValue function to allow for other specific protocols
+// See https://github.com/leizongmin/js-xss/issues/52#issuecomment-241354114
+function mySafeAttrValue(tag, name, value, cssFilter) {
+  // only when the tag is 'a' and attribute is 'href'
+  // then use your custom function
+  if (tag === 'a' && name === 'href') {
+    // only filter the value if starts with 'cbthunderlink:' or 'aodroplink'
+    if (/^thunderlink:/ig.test(value) || /^cbthunderlink:/ig.test(value) || /^aodroplink:/ig.test(value)) {
+      return value;
+    }
+    else {
+      // use the default safeAttrValue function to process all non cbthunderlinks
+      return sanitizeXss.safeAttrValue(tag, name, value, cssFilter);
+    }
+  } else {
+    // use the default safeAttrValue function to process it
+    return sanitizeXss.safeAttrValue(tag, name, value, cssFilter);
+  }
+};
+
 // XXX I believe we should compute a HTML rendered field on the server that
 // would handle markdown and user mentions. We can simply have two
 // fields, one source, and one compiled version (in HTML) and send only the
@@ -278,7 +298,7 @@ Blaze.Template.registerHelper(
     const view = this;
     let content = Blaze.toHTML(view.templateContentBlock);
     const currentBoard = Boards.findOne(Session.get('currentBoard'));
-    if (!currentBoard) return HTML.Raw(sanitizeXss(content));
+    if (!currentBoard) return HTML.Raw(sanitizeXss(content, { safeAttrValue: mySafeAttrValue }));
     const knowedUsers = currentBoard.members.map(member => {
       const u = Users.findOne(member.userId);
       if (u) {
@@ -322,7 +342,7 @@ Blaze.Template.registerHelper(
       content = content.replace(fullMention, Blaze.toHTML(link));
     }
 
-    return HTML.Raw(sanitizeXss(content));
+    return HTML.Raw(sanitizeXss(content, { safeAttrValue: mySafeAttrValue }));
   }),
 );
 

client/config/blazeHelpers.js

@@ -30,3 +30,7 @@ Blaze.registerHelper('getUser', userId => Users.findOne(userId));
 Blaze.registerHelper('concat', (...args) => args.slice(0, -1).join(''));
 
 Blaze.registerHelper('isMiniScreen', () => Utils.isMiniScreen());
+
+Blaze.registerHelper('isShowDesktopDragHandles', () => Utils.isShowDesktopDragHandles());
+
+Blaze.registerHelper('isMiniScreenOrShowDesktopDragHandles', () => Utils.isMiniScreenOrShowDesktopDragHandles());

client/lib/utils.js

@@ -190,6 +190,23 @@ Utils = {
     //return false;
   },
 
+  // returns if desktop drag handles are enabled
+  isShowDesktopDragHandles() {
+    let currentUser = Meteor.user();
+    if (currentUser) {
+      return (currentUser.profile || {}).showDesktopDragHandles;
+    } else if (cookies.has('showDesktopDragHandles')) {
+      return true;
+    } else {
+      return false;
+    }
+  },
+
+  // returns if mini screen or desktop drag handles
+  isMiniScreenOrShowDesktopDragHandles() {
+    return this.isMiniScreen() || this.isShowDesktopDragHandles()
+  },
+
   calculateIndexData(prevData, nextData, nItems = 1) {
     let base, increment;
     // If we drop the card to an empty column

models/boards.js

@@ -254,6 +254,7 @@ Boards.attachSchema(
         'clearblue',
         'natural',
         'modern',
+        'moderndark',
       ],
       // eslint-disable-next-line consistent-return
       autoValue() {

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "wekan",
-  "version": "v4.49.0",
+  "version": "v4.52.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "wekan",
-  "version": "v4.49.0",
+  "version": "v4.52.0",
   "description": "Open-Source kanban",
   "private": true,
   "scripts": {

packages/markdown/src/template-integration.js

@@ -6,6 +6,26 @@ var Markdown = require('markdown-it')({
 	breaks: true,
 });
 
+// Additional  safeAttrValue function to allow for other specific protocols
+// See https://github.com/leizongmin/js-xss/issues/52#issuecomment-241354114
+function mySafeAttrValue(tag, name, value, cssFilter) {
+  // only when the tag is 'a' and attribute is 'href'
+  // then use your custom function
+  if (tag === 'a' && name === 'href') {
+    // only filter the value if starts with 'cbthunderlink:' or 'aodroplink'
+    if (/^thunderlink:/ig.test(value) || /^cbthunderlink:/ig.test(value) || /^aodroplink:/ig.test(value)) {
+      return value;
+    }
+    else {
+      // use the default safeAttrValue function to process all non cbthunderlinks
+      return sanitizeXss.safeAttrValue(tag, name, value, cssFilter);
+    }
+  } else {
+    // use the default safeAttrValue function to process it
+    return sanitizeXss.safeAttrValue(tag, name, value, cssFilter);
+  }
+};
+
 var emoji = require('markdown-it-emoji');
 Markdown.use(emoji);
 
@@ -22,6 +42,6 @@ if (Package.ui) {
 			text = Blaze._toText(self.templateContentBlock, HTML.TEXTMODE.STRING);
 		}
 
-			return HTML.Raw(sanitizeXss(Markdown.render(text)));
+			return HTML.Raw(sanitizeXss(Markdown.render(text), { safeAttrValue: mySafeAttrValue }));
 	}));
 }

public/api/wekan.html

@@ -1524,7 +1524,7 @@ var n=this.pipeline.run(e.tokenizer(t)),r=new e.Vector,i=[],o=this._fields.reduc
 	  	<ul class="toc-list-h1">
         
           <li>
-            <a href="#wekan-rest-api" class="toc-h1 toc-link" data-title="Wekan REST API v4.49">Wekan REST API v4.49</a>
+            <a href="#wekan-rest-api" class="toc-h1 toc-link" data-title="Wekan REST API v4.52">Wekan REST API v4.52</a>
             
           </li>
         
@@ -2027,7 +2027,7 @@ var n=this.pipeline.run(e.tokenizer(t)),r=new e.Vector,i=[],o=this._fields.reduc
     <div class="page-wrapper">
       <div class="dark-box"></div>
       <div class="content">
-        <h1 id="wekan-rest-api">Wekan REST API v4.49</h1>
+        <h1 id="wekan-rest-api">Wekan REST API v4.52</h1>
 <blockquote>
 <p>Scroll down for code samples, example requests and responses. Select a language for code samples from the tabs above or the mobile navigation menu.</p>
 </blockquote>
@@ -15299,6 +15299,10 @@ UserSecurity
 <td>modern</td>
 </tr>
 <tr>
+<td>color</td>
+<td>moderndark</td>
+</tr>
+<tr>
 <td>presentParentTask</td>
 <td>prefix-with-full-path</td>
 </tr>

public/api/wekan.yml

@@ -1,7 +1,7 @@
 swagger: '2.0'
 info:
   title: Wekan REST API
-  version: v4.49
+  version: v4.52
   description: |
     The REST API allows you to control and extend Wekan with ease.
 
@@ -2375,6 +2375,7 @@ definitions:
           - clearblue
           - natural
           - modern
+          - moderndark
       description:
         description: |
            The description of the board

sandstorm-pkgdef.capnp

@@ -22,10 +22,10 @@ const pkgdef :Spk.PackageDefinition = (
     appTitle = (defaultText = "Wekan"),
     # The name of the app as it is displayed to the user.
 
-    appVersion = 449,
+    appVersion = 452,
     # Increment this for every release.
 
-    appMarketingVersion = (defaultText = "4.49.0~2020-11-04"),
+    appMarketingVersion = (defaultText = "4.52.0~2020-11-12"),
     # Human-readable presentation of the app version.
 
     minUpgradableAppVersion = 0,

server/migrations.js

@@ -122,6 +122,7 @@ Migrations.add('use-css-class-for-boards-colors', () => {
     '#499BEA': 'clearblue',
     '#596557': 'natural',
     '#2A80B8': 'modern',
+    '#2a2a2a': 'moderndark',
   };
   Boards.find().forEach(board => {
     const oldBoardColor = board.background.color;