v6.78

Try to fix some security issue.
Thanks to Responsible Security Disclousure contributors and xet7 !
2023-02-28 14:21:46 +02:00 · 2023-02-28 14:16:08 +02:00 · 2023-02-27 17:29:57 +02:00 · 2023-02-27 17:26:08 +02:00 · 2023-02-27 17:24:54 +02:00 · 2023-02-27 17:03:47 +02:00
887 changed files with 101947 additions and 46309 deletions
@@ -1,12 +1,16 @@
-FROM quay.io/wekan/ubuntu:groovy-20210115
+FROM ubuntu:21.10
 LABEL maintainer="sgr"

-ENV BUILD_DEPS="gnupg gosu libarchive-tools wget curl bzip2 g++ build-essential python git ca-certificates iproute2"
+# 2022-04-25:
+# - gyp does not yet work with Ubuntu 22.04 ubuntu:rolling,
+#   so changing to 21.10. https://github.com/wekan/wekan/issues/4488
+
+ENV BUILD_DEPS="gnupg gosu libarchive-tools wget curl bzip2 g++ build-essential python3 git ca-certificates iproute2"
 ENV DEBIAN_FRONTEND=noninteractive

 ENV \
    DEBUG=false \
-    NODE_VERSION=v12.22.7 \
+    NODE_VERSION=v14.21.3 \
    METEOR_RELEASE=1.10.2 \
    USE_EDGE=false \
    METEOR_EDGE=1.5-beta.17 \
@@ -26,6 +30,12 @@ ENV \
    RICHER_CARD_COMMENT_EDITOR=false \
    CARD_OPENED_WEBHOOK_ENABLED=false \
    ATTACHMENTS_STORE_PATH="" \
+    ATTACHMENTS_UPLOAD_EXTERNAL_PROGRAM="" \
+    ATTACHMENTS_UPLOAD_MIME_TYPES="" \
+    ATTACHMENTS_UPLOAD_MAX_SIZE=0 \
+    AVATARS_UPLOAD_EXTERNAL_PROGRAM="" \
+    AVATARS_UPLOAD_MIME_TYPES="" \
+    AVATARS_UPLOAD_MAX_SIZE=0 \
    MAX_IMAGE_PIXEL="" \
    IMAGE_COMPRESS_RATIO="" \
    NOTIFICATION_TRAY_AFTER_READ_DAYS_BEFORE_REMOVE="" \
@@ -132,7 +142,18 @@ ENV \
    SAML_IDENTIFIER_FORMAT="" \
    SAML_LOCAL_PROFILE_MATCH_ATTRIBUTE="" \
    SAML_ATTRIBUTES="" \
-    DEFAULT_WAIT_SPINNER=""
+    DEFAULT_WAIT_SPINNER="" \
+    S3=""
+# \
+#    NODE_OPTIONS="--max_old_space_size=4096"
+
+#---------------------------------------------------------------------
+# https://github.com/wekan/wekan/issues/3585#issuecomment-1021522132
+# Add more Node heap:
+#   NODE_OPTIONS="--max_old_space_size=4096"
+# Add more stack:
+#   bash -c "ulimit -s 65500; exec node --stack-size=65500 main.js"
+#---------------------------------------------------------------------

 # Install OS
 RUN set -o xtrace \
@@ -211,12 +232,6 @@ RUN set -o xtrace \

 USER wekan

-RUN \
-    set -o xtrace && \
-    sed -i 's/api\.versionsFrom/\/\/api.versionsFrom/' /home/wekan/app/packages/meteor-useraccounts-core/package.js && \
-    cd /home/wekan/.meteor && \
-    /home/wekan/.meteor/meteor -- help;
-
 RUN \
    set -o xtrace && \
    # Build app
@@ -229,7 +244,9 @@ RUN \
    set -o xtrace && \
    cd /home/wekan/app_build/bundle/programs/server/ && \
    chmod u+w package.json npm-shrinkwrap.json && \
-    npm install
+    npm install && \
+    cd node_modules/fibers && \
+    node build.js

 USER root
 # Cleanup
@@ -248,4 +265,14 @@ ENV PORT=3000
 EXPOSE $PORT
 WORKDIR /home/wekan/app

+#---------------------------------------------------------------------
+# https://github.com/wekan/wekan/issues/3585#issuecomment-1021522132
+# Add more Node heap:
+#   NODE_OPTIONS="--max_old_space_size=4096"
+# Add more stack:
+#   bash -c "ulimit -s 65500; exec node --stack-size=65500 main.js"
+#---------------------------------------------------------------------
+#TODO:
+#CMD ["bash", "-c", "ulimit -s 65500; exec node --stack-size=65500 /build/main.js"]
+
 CMD ["/home/wekan/.meteor/meteor", "run", "--verbose", "--settings", "settings.json"]
@@ -9,4 +9,6 @@ cp -f fix-download-unicode/cfs_access-point.txt .build/bundle/programs/server/pa
 cd .build/bundle/programs/server
 rm -rf node_modules
 /home/wekan/.meteor/meteor npm install
+cd node_modules/fibers
+node build.js
 cd /home/wekan/app
@@ -3,7 +3,7 @@ version: '3.7'
 services:

  wekandb-dev:
-    image: mongo:4.4
+    image: mongo:6
    container_name: wekan-dev-db
    restart: unless-stopped
    command: mongod --oplogSize 128
@@ -33,14 +33,16 @@ services:
      - WITH_API=true
      - RICHER_CARD_COMMENT_EDITOR=true
      - BROWSER_POLICY_ENABLED=true
+      - WRITABLE_PATH=/data
    depends_on:
      - wekandb-dev
    volumes:
      - /etc/localtime:/etc/localtime:ro
+      - ./volumes/data:/data
      - ../client:/home/wekan/app/client
      - ../models:/home/wekan/app/models
      - ../config:/home/wekan/app/config
-      - ../i18n:/home/wekan/app/i18n
+      - ../imports:/home/wekan/app/imports
      - ../server:/home/wekan/app/server
      - ../public:/home/wekan/app/public

@@ -81,7 +81,7 @@ parts:
    wekan:
        source: .
        plugin: nodejs
-        node-engine: 12.22.7
+        node-engine: 14.21.3
        node-packages:
            - node-gyp
            - node-pre-gyp
@@ -0,0 +1,155 @@
+name: wekan
+version: git
+summary: The open-source kanban
+description: |
+   Wekan is an open-source and collaborative kanban board application.
+
+   Whether you’re maintaining a personal todo list, planning your holidays with some friends, or working in a team on your next revolutionary idea, Kanban boards are an unbeatable tool to keep your things organized. They give you a visual overview of the current state of your project, and make you productive by allowing you to focus on the few items that matter the most.
+   Depending on target environment, some configuration settings might need to be adjusted.
+   For full list of configuration options call:
+   $ wekan.help
+
+confinement: strict
+grade: stable
+base: core18
+
+architectures:
+  - amd64
+
+plugs:
+  mongodb-plug:
+    interface: content
+    target: $SNAP_DATA/shared
+
+hooks:
+  configure:
+    plugs:
+      - network
+      - network-bind
+
+slots:
+  mongodb-slot:
+    interface: content
+    write:
+      - $SNAP_DATA/share
+
+apps:
+    wekan:
+        command: wekan-control
+        daemon: simple
+        plugs: [network, network-bind]
+
+    mongodb:
+        command: mongodb-control
+        daemon: simple
+        plugs: [network, network-bind]
+
+    caddy:
+        command: caddy-control
+        daemon: simple
+        plugs: [network, network-bind]
+
+    help:
+        command: wekan-help
+
+    database-backup:
+        command: mongodb-backup
+        plugs: [network, network-bind]
+
+    database-list-backups:
+        command: ls -al $SNAP_COMMON/db-backups/
+
+    database-restore:
+        command: mongodb-restore
+        plugs: [network, network-bind]
+
+parts:
+    mongodb:
+        source: https://repo.mongodb.org/apt/ubuntu/dists/xenial/mongodb-org/4.2/multiverse/binary-amd64/mongodb-org-server_4.2.2_amd64.deb
+        #https://fastdl.mongodb.org/linux/mongodb-linux-x86_64-4.0.14.tgz
+        #https://fastdl.mongodb.org/linux/mongodb-linux-x86_64-ubuntu1604-3.2.22.tgz
+        plugin: dump
+        stage-packages: [libssl1.0.0, libcurl3]
+        filesets:
+            mongo:
+                - usr
+                - bin
+                - lib
+        stage:
+            - $mongo
+        prime:
+            - $mongo
+
+    wekan:
+        source: .
+        plugin: nodejs
+        node-engine: 14.19.0
+        node-packages:
+            - node-gyp
+            - node-pre-gyp
+            - fibers
+        build-packages:
+            - ca-certificates
+            - apt-utils
+            - build-essential
+            - python
+            - python3
+            - g++
+            - capnproto
+            - curl
+            - libcurl3
+            - execstack
+            - nodejs
+            - npm
+        stage-packages:
+            - libfontconfig1
+        override-build: |
+            echo "Cleaning environment first"
+            rm -rf ~/.meteor ~/.npm /usr/local/lib/node_modules
+            rm -rf .build
+            echo "Installing meteor"
+            curl https://install.meteor.com/ -o install_meteor.sh
+            chmod +x install_meteor.sh
+            sh install_meteor.sh
+            rm install_meteor.sh
+            rm -rf .build
+            meteor add standard-minifier-js --allow-superuser
+            meteor npm install --allow-superuser
+            meteor npm install --allow-superuser --save babel-runtime
+            meteor build .build --directory --allow-superuser
+            cp -f fix-download-unicode/cfs_access-point.txt .build/bundle/programs/server/packages/cfs_access-point.js
+            cd .build/bundle/programs/server
+            npm install
+            npm install --allow-superuser --save babel-runtime
+            # Change back to Wekan source directory
+            cd ../../../..
+            cp -r .build/bundle/* $SNAPCRAFT_PART_INSTALL/
+            cp .build/bundle/.node_version.txt $SNAPCRAFT_PART_INSTALL/
+            rm -f $SNAPCRAFT_PART_INSTALL/lib/node_modules/wekan
+            rm -f $SNAPCRAFT_PART_INSTALL/programs/server/npm/node_modules/meteor/rajit_bootstrap3-datepicker/lib/bootstrap-datepicker/node_modules/phantomjs-prebuilt/lib/phantom/bin/phantomjs
+            rm -f $SNAPCRAFT_PART_INSTALL/programs/server/npm/node_modules/tar/lib/.mkdir.js.swp
+            rm -f $SNAPCRAFT_PART_INSTALL/lib/node_modules/node-pre-gyp/node_modules/tar/lib/.mkdir.js.swp
+            rm -f $SNAPCRAFT_PART_INSTALL/lib/node_modules/node-gyp/node_modules/tar/lib/.mkdir.js.swp
+            rm -f $SNAPCRAFT_PART_INSTALL/programs/server/node_modules/node-pre-gyp/node_modules/tar/lib/.mkdir.js.swp
+
+        organize:
+            README: README.wekan
+        prime:
+            - -lib/node_modules/node-pre-gyp/node_modules/tar/lib/.unpack.js.swp
+
+    helpers:
+        source: snap-src
+        plugin: dump
+
+    caddy:
+        plugin: dump
+        source: https://caddyserver.com/download/linux/amd64?license=personal&telemetry=off
+        source-type: tar
+        organize:
+          caddy: bin/caddy
+          CHANGES.txt: CADDY_CHANGES.txt
+          EULA.txt: CADDY_EULA.txt
+          LICENSES.txt: CADDY_LICENSES.txt
+          README.txt: CADDY_README.txt
+        stage:
+          - -init
@@ -1,8 +1,9 @@
 name: wekan
-version: git
-summary: The open-source kanban
+version: '6.21'
+base: core20
+summary: Open Source kanban
 description: |
-   Wekan is an open-source and collaborative kanban board application.
+   WeKan ® is an Open Source and collaborative kanban board application.

   Whether you’re maintaining a personal todo list, planning your holidays with some friends, or working in a team on your next revolutionary idea, Kanban boards are an unbeatable tool to keep your things organized. They give you a visual overview of the current state of your project, and make you productive by allowing you to focus on the few items that matter the most.
   Depending on target environment, some configuration settings might need to be adjusted.
@@ -11,10 +12,19 @@ description: |

 confinement: strict
 grade: stable
-base: core18

 architectures:
-  - amd64
+  - build-on: amd64
+    run-on: amd64
+
+  - build-on: arm64
+    run-on: arm64
+
+  - build-on: ppc64el
+    run-on: ppc64el
+
+  - build-on: s390x
+    run-on: s390x

 plugs:
  mongodb-plug:
@@ -37,12 +47,14 @@ apps:
    wekan:
        command: wekan-control
        daemon: simple
-        plugs: [network, network-bind]
+        plugs: [network, network-bind, mount-observe, system-observe, bluetooth-control]
+        restart-condition: on-failure

    mongodb:
        command: mongodb-control
        daemon: simple
-        plugs: [network, network-bind]
+        plugs: [network, network-bind, mount-observe, system-observe, bluetooth-control]
+        restart-condition: on-failure

    caddy:
        command: caddy-control
@@ -54,22 +66,27 @@ apps:

    database-backup:
        command: mongodb-backup
-        plugs: [network, network-bind]
+        plugs: [network, network-bind, mount-observe, system-observe, bluetooth-control]

    database-list-backups:
        command: ls -al $SNAP_COMMON/db-backups/

    database-restore:
        command: mongodb-restore
-        plugs: [network, network-bind]
+        plugs: [network, network-bind, mount-observe, system-observe, bluetooth-control]

 parts:
    mongodb:
-        source: https://repo.mongodb.org/apt/ubuntu/dists/xenial/mongodb-org/4.2/multiverse/binary-amd64/mongodb-org-server_4.2.2_amd64.deb
-        #https://fastdl.mongodb.org/linux/mongodb-linux-x86_64-4.0.14.tgz
-        #https://fastdl.mongodb.org/linux/mongodb-linux-x86_64-ubuntu1604-3.2.22.tgz
        plugin: dump
-        stage-packages: [libssl1.0.0, libcurl3]
+        source:
+          - on amd64: https://repo.mongodb.org/apt/ubuntu/dists/focal/mongodb-org/4.4/multiverse/binary-amd64/mongodb-org-server_4.4.13_amd64.deb
+          - on arm64: https://repo.mongodb.org/apt/ubuntu/dists/focal/mongodb-org/4.4/multiverse/binary-arm64/mongodb-org-server_4.4.13_arm64.deb
+          - on ppc64el: https://repo.mongodb.org/apt/ubuntu/dists/focal/mongodb-org/4.4/multiverse/binary-ppc64el/mongodb-org-server_4.4.13_ppc64el.deb
+          - on s390x: https://repo.mongodb.org/apt/ubuntu/dists/focal/mongodb-org/4.4/multiverse/binary-s390x/mongodb-org-server_4.4.13_s390x.deb
+        stage-packages:
+            - libssl1.1
+            - libcurl3-dev
+            - libcurl4-openssl-dev
        filesets:
            mongo:
                - usr
@@ -81,61 +98,46 @@ parts:
            - $mongo

    wekan:
-        source: .
-        plugin: nodejs
-        node-engine: 12.22.7
-        node-packages:
-            - node-gyp
-            - node-pre-gyp
-            - fibers
-        build-packages:
-            - ca-certificates
-            - apt-utils
-            - build-essential
-            - python
-            - python3
-            - g++
-            - capnproto
-            - curl
-            - libcurl3
-            - execstack
-            - nodejs
-            - npm
-        stage-packages:
-            - libfontconfig1
+        #plugin: npm
+        plugin: dump
+        source:
+        # Fixed URLs to some allowed GitHub releases URL.
+        # Non-GitHub build server file urls are not allowed at 2022-03-02 and later.
+          - on amd64: https://github.com/wekan/wekan/releases/download/v6.20/wekan-6.20-amd64.zip
+          - on arm64: https://github.com/wekan/wekan/releases/download/v6.20/wekan-6.20-arm64.zip
+          - on ppc64el: https://github.com/wekan/wekan/releases/download/v6.20/wekan-6.20-ppc64el.zip
+          - on s390x: https://github.com/wekan/wekan/releases/download/v6.20/wekan-6.20-s390x.zip
+#        npm-node-version: 14.19.1
+#        node-packages:
+#            - node-gyp
+#            - node-pre-gyp
+#            - fibers
+#        build-packages:
+#          - npm
+#            - build-essential
+#            - ca-certificates
+#            - apt-utils
+#            - python
+#            - python3
+#            - g++
+#            - capnproto
+#            - curl
+#            - execstack
+#            - nodejs
+#            - npm
+#          - p7zip-full
+#        stage-packages:
+#            - libfontconfig1
        override-build: |
-            echo "Cleaning environment first"
-            rm -rf ~/.meteor ~/.npm /usr/local/lib/node_modules
-            rm -rf .build
-            echo "Installing meteor"
-            curl https://install.meteor.com/ -o install_meteor.sh
-            chmod +x install_meteor.sh
-            sh install_meteor.sh
-            rm install_meteor.sh
-            rm -rf .build
-            meteor add standard-minifier-js --allow-superuser
-            meteor npm install --allow-superuser
-            meteor npm install --allow-superuser --save babel-runtime
-            meteor build .build --directory --allow-superuser
-            cp -f fix-download-unicode/cfs_access-point.txt .build/bundle/programs/server/packages/cfs_access-point.js
-            cd .build/bundle/programs/server
-            npm install
-            npm install --allow-superuser --save babel-runtime
-            # Change back to Wekan source directory
-            cd ../../../..
-            cp -r .build/bundle/* $SNAPCRAFT_PART_INSTALL/
-            cp .build/bundle/.node_version.txt $SNAPCRAFT_PART_INSTALL/
-            rm -f $SNAPCRAFT_PART_INSTALL/lib/node_modules/wekan
-            rm -f $SNAPCRAFT_PART_INSTALL/programs/server/npm/node_modules/meteor/rajit_bootstrap3-datepicker/lib/bootstrap-datepicker/node_modules/phantomjs-prebuilt/lib/phantom/bin/phantomjs
-            rm -f $SNAPCRAFT_PART_INSTALL/programs/server/npm/node_modules/tar/lib/.mkdir.js.swp
-            rm -f $SNAPCRAFT_PART_INSTALL/lib/node_modules/node-pre-gyp/node_modules/tar/lib/.mkdir.js.swp
-            rm -f $SNAPCRAFT_PART_INSTALL/lib/node_modules/node-gyp/node_modules/tar/lib/.mkdir.js.swp
-            rm -f $SNAPCRAFT_PART_INSTALL/programs/server/node_modules/node-pre-gyp/node_modules/tar/lib/.mkdir.js.swp
-
+          cp -r bundle/* $SNAPCRAFT_PART_INSTALL/
+          cp bundle/.node_version.txt $SNAPCRAFT_PART_INSTALL/
+          rm -f $SNAPCRAFT_PART_INSTALL/lib/node_modules/wekan
+          snapcraftctl build
        organize:
            README: README.wekan
        prime:
            - -lib/node_modules/node-pre-gyp/node_modules/tar/lib/.unpack.js.swp
+            - -lib/node_modules/weka*

    helpers:
        source: snap-src
@@ -143,8 +145,34 @@ parts:

    caddy:
        plugin: dump
-        source: https://caddyserver.com/download/linux/amd64?license=personal&telemetry=off
-        source-type: tar
+        ## Caddy v1 is not developed anymore. TODO: Sometime migrate to Caddy v2.
+        ## https://caddy.community/t/caddyfile-v1-adapter/9129
+        ## https://github.com/caddyserver/caddy/tree/v1
+        #source: https://caddyserver.com/download/linux/amd64?license=personal&telemetry=off
+        #source-type: tar
+        # Using last working binary that was downloaded from above URL to Wekan Snap,
+        # and .txt files from https://github.com/caddyserver/caddy/tree/v1/dist
+        source: https://wekan.github.io/caddy-v1-linux-amd64.7z
+        source-type: 7z
+        organize:
+          caddy: bin/caddy
+          CHANGES.txt: CADDY_CHANGES.txt
+          EULA.txt: CADDY_EULA.txt
+          LICENSES.txt: CADDY_LICENSES.txt
+          README.txt: CADDY_README.txt
+        stage:
+          - -init
+
+    caddy2:
+        plugin: dump
+        source:
+        # Fixed URLs to some allowed GitHub releases URL.
+        # Non-GitHub build server file urls are not allowed at 2022-03-02 and later.
+          - on amd64: https://github.com/wekan/wekan/releases/download/v6.20/caddy-v2-amd64.zip
+          - on arm64: https://github.com/wekan/wekan/releases/download/v6.20/caddy-v2-arm64.zip
+          - on ppc64el: https://github.com/wekan/wekan/releases/download/v6.20/caddy-v2-ppc64el.zip
+          - on s390x: https://github.com/wekan/wekan/releases/download/v6.20/caddy-v2-s390x.zip
+        source-type: zip
        organize:
          caddy: bin/caddy
          CHANGES.txt: CADDY_CHANGES.txt
@@ -1,37 +1,35 @@
 ## Issue
+<!--
+**[PLEASE UPGRADE](https://github.com/wekan/wekan/wiki/Backup)** to the newest WeKan ® before reporting an issue.
+Please search existing Open and Closed issues, most questions have already been answered.

-**[PLEASE UPGRADE](https://github.com/wekan/wekan/wiki/Backup)** to newest WeKan ® before adding new issue !!
- We get too many duplicate reports of already fixed bugs. Newest WeKan ® has newest bugfixes and security fixes.
- Please search existing Open and Closed issues, most questions have already been answered many times.
+If you can not login for any reason: https://github.com/wekan/wekan/wiki/Forgot-Password
+Email settings, only SMTP MAIL_URL and MAIL_FROM are in use: https://github.com/wekan/wekan/wiki/Troubleshooting-Mail

-If you can not login for any reason:
- https://github.com/wekan/wekan/wiki/Forgot-Password
-
-Email settings, only SMTP MAIL_URL and MAIL_FROM are in use:
- https://github.com/wekan/wekan/wiki/Troubleshooting-Mail
-
-Add these issues to elsewhere:
+The following types of issues should be reported separately:
 - SECURITY ISSUES: https://github.com/wekan/wekan/blob/master/SECURITY.md
 - UCS: https://github.com/wekan/univention/issues
+-->

-Other Wekan issues can be added here.
-
-**Server Setup Information**:
-
-* Note: Please anonymize info, and do not add to this public issue any of your Wekan board URLs, passwords, API tokens etc, do you understand?:
+### Server Setup Information
+<!-- Please anonymize info, and do not any of your Wekan board URLs, passwords, API tokens etc to this public issue. -->
 * Did you test in newest Wekan?:
-* For new Wekan install, did you configure root-url correctly so Wekan cards open correctly https://github.com/wekan/wekan/wiki/Settings ?
+* Did you configure root-url correctly so Wekan cards open correctly (see https://github.com/wekan/wekan/wiki/Settings)?
 * Operating System:
-* Deployment Method(Snap/Docker/Sandstorm/bundle/source):
+* Deployment Method (Snap/Docker/Sandstorm/bundle/source):
 * Http frontend if any (Caddy, Nginx, Apache, see config examples from Wekan GitHub wiki first):
 * Node.js Version:
 * MongoDB Version:
-* Wekan works on newest desktop and mobile webbrowsers that support Javascript. What webbrowser version are you using?
+* What webbrowser version are you using (Wekan should work on all modern browsers that support Javascript)?

-**Problem description**:
- *REQUIRED: Add recorded animated gif about how it works currently, and screenshot mockups how it should work. Use peek to record animgif in Linux https://github.com/phw/peek*
- *Explain steps how to reproduce*
- *In webbrowser, what does show Right Click / Inspect / Console ? Chrome shows more detailed info than Firefox.*
- *If using Snap, what does show command `sudo snap logs wekan.wekan` ? Please anonymize logs.* 
- *If using Docker, what does show command `sudo docker logs wekan-app` ? Please anonymize logs.*
- *If logs are very long, attach them in .zip file*
+### Problem description
+<!-- Add a recorded animated gif (e.g. with https://github.com/phw/peek) about how it works currently, and screenshot mockups how it should work. -->
+#### Reproduction Steps
+
+#### Logs
+<!-- Check Right Click>Inspect>Console in you browser - generally Chrome shows more detailed info than Firefox. -->
+
+<!-- Please anonymize logs.
+Snap: sudo snap logs wekan.wekan
+Docker: sudo docker logs wekan-app
+If logs are very long, attach them in .zip file -->
@@ -0,0 +1,6 @@
+version: 2
+updates:
+- package-ecosystem: "github-actions"
+  directory: "/"
+  schedule:
+      interval: "weekly"
@@ -9,8 +9,15 @@ on:
  schedule:
    - cron: '0 16 * * 3'

+permissions:
+  contents: read
+
 jobs:
  analyze:
+    permissions:
+      actions: read  # for github/codeql-action/init to get workflow details
+      contents: read  # for actions/checkout to fetch code
+      security-events: write  # for github/codeql-action/autobuild to send a status report
    name: Analyze
    runs-on: ubuntu-latest

@@ -25,7 +32,7 @@ jobs:

    steps:
    - name: Checkout repository
-      uses: actions/checkout@v2
+      uses: actions/checkout@v3
      with:
        # We must fetch at least the immediate parents so that if this is
        # a pull request then we can checkout the head.
@@ -38,14 +45,14 @@ jobs:

    # Initializes the CodeQL tools for scanning.
    - name: Initialize CodeQL
-      uses: github/codeql-action/init@v1
+      uses: github/codeql-action/init@v2
      with:
        languages: ${{ matrix.language }}

    # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
    # If this step fails, then you should remove it and run the build manually (see below)
    - name: Autobuild
-      uses: github/codeql-action/autobuild@v1
+      uses: github/codeql-action/autobuild@v2

    # ℹ️ Command-line programs to run using the OS shell.
    # 📚 https://git.io/JvXDl
@@ -59,4 +66,4 @@ jobs:
    #   make release

    - name: Perform CodeQL Analysis
-      uses: github/codeql-action/analyze@v1
+      uses: github/codeql-action/analyze@v2
@@ -0,0 +1,14 @@
+name: 'Dependency Review'
+on: [pull_request]
+
+permissions:
+  contents: read
+
+jobs:
+  dependency-review:
+    runs-on: ubuntu-latest
+    steps:
+      - name: 'Checkout Repository'
+        uses: actions/checkout@v3
+      - name: 'Dependency Review'
+        uses: actions/dependency-review-action@v3
@@ -32,13 +32,13 @@ jobs:

    steps:
      - name: Checkout repository
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3

      # Login against a Docker registry except on PR
      # https://github.com/docker/login-action
      - name: Log into registry ${{ env.REGISTRY }}
        if: github.event_name != 'pull_request'
-        uses: docker/login-action@28218f9b04b4f3f62068d7b6ce6ca5b26e35336c
+        uses: docker/login-action@f4ef78c080cd8ba55a85445d5b36e214a81df20a
        with:
          registry: ${{ env.REGISTRY }}
          username: ${{ github.actor }}
@@ -48,14 +48,14 @@ jobs:
      # https://github.com/docker/metadata-action
      - name: Extract Docker metadata
        id: meta
-        uses: docker/metadata-action@98669ae865ea3cffbcbaa878cf57c20bbf1c6c38
+        uses: docker/metadata-action@507c2f2dc502c992ad446e3d7a5dfbe311567a96
        with:
          images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}

      # Build and push Docker image with Buildx (don't push on PR)
      # https://github.com/docker/build-push-action
      - name: Build and push Docker image
-        uses: docker/build-push-action@ad44023a93711e3deb337508980b4b5e9bcdc5dc
+        uses: docker/build-push-action@3b5e8027fcad23fda98b2e3ac259d8d67585f671
        with:
          context: .
          push: ${{ github.event_name != 'pull_request' }}
@@ -5,6 +5,9 @@ on:
    branches:
      - master

+permissions:
+  contents: read
+
 jobs:

  build:
@@ -12,6 +15,6 @@ jobs:
    runs-on: ubuntu-latest

    steps:
-    - uses: actions/checkout@v1
+    - uses: actions/checkout@v3
    - name: Build the Docker image
      run: docker build . --file Dockerfile --tag wekan:$(date +%s)
@@ -5,12 +5,17 @@ on:
    branches:
      - master

+permissions:
+  contents: read
+
 jobs:
  release:
+    permissions:
+      contents: write  # for helm/chart-releaser-action to push chart release and create a release
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
        with:
          fetch-depth: 0

@@ -20,6 +25,6 @@ jobs:
          git config user.email "$GITHUB_ACTOR@users.noreply.github.com"

      - name: Run chart-releaser
-        uses: helm/chart-releaser-action@v1.1.0
+        uses: helm/chart-releaser-action@v1.5.0
        env:
          CR_TOKEN: "${{ secrets.GITHUB_TOKEN }}"
@@ -6,6 +6,9 @@ on:
      - master
  pull_request:

+permissions:
+  contents: read # to fetch code (actions/checkout)
+
 jobs:
 # the following are optional jobs and need to be configured according
 # to this project's settings:
@@ -15,7 +18,7 @@ jobs:
 #    runs-on: ubuntu-latest
 #    steps:
 #    - name: checkout
-#      uses: actions/checkout@v2
+#      uses: actions/checkout@v3
 #
 #    - name: setup node
 #      uses: actions/setup-node@v1
@@ -39,7 +42,7 @@ jobs:
 #    needs: [lintcode]
 #    steps:
 #    - name: checkout
-#      uses: actions/checkout@v2
+#      uses: actions/checkout@v3
 #
 #    - name: setup node
 #      uses: actions/setup-node@v1
@@ -62,7 +65,7 @@ jobs:
 #    needs: [lintcode,lintstyle]
 #    steps:
 #    - name: checkout
-#      uses: actions/checkout@v2
+#      uses: actions/checkout@v3
 #
 #    - name: setup node
 #      uses: actions/setup-node@v1
@@ -87,12 +90,12 @@ jobs:

      # CHECKOUTS
      - name: Checkout
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3

      # CACHING
      - name: Install Meteor
        id: cache-meteor-install
-        uses: actions/cache@v2
+        uses: actions/cache@v3
        with:
          path: ~/.meteor
          key: v1-meteor-${{ hashFiles('.meteor/versions') }}
@@ -101,7 +104,7 @@ jobs:

      - name: Cache NPM dependencies
        id: cache-meteor-npm
-        uses: actions/cache@v2
+        uses: actions/cache@v3
        with:
          path: ~/.npm
          key: v1-npm-${{ hashFiles('package-lock.json') }}
@@ -110,7 +113,7 @@ jobs:

      - name: Cache Meteor build
        id: cache-meteor-build
-        uses: actions/cache@v2
+        uses: actions/cache@v3
        with:
          path: |
            .meteor/local/resolver-result-cache.json
@@ -118,7 +121,7 @@ jobs:
            .meteor/local/isopacks
            .meteor/local/bundler-cache/scanner
          key: v1-meteor_build_cache-${{ github.ref }}-${{ github.sha }}
-          restore-key: |
+          restore-keys: |
            v1-meteor_build_cache-

      - name: Setup meteor
@@ -133,7 +136,7 @@ jobs:
        run: sh ./test-wekan.sh -cv

      - name: Upload coverage
-        uses: actions/upload-artifact@v2
+        uses: actions/upload-artifact@v3
        with:
          name: coverage-folder
          path: .coverage/
@@ -144,17 +147,17 @@ jobs:
    needs: [tests]
    steps:
      - name: Checkout
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3

      - name: Download coverage
-        uses: actions/download-artifact@v2
+        uses: actions/download-artifact@v3
        with:
          name: coverage-folder
          path: .coverage/


      - name: Coverage Report
-        uses: VeryGoodOpenSource/very_good_coverage@v1.1.1
+        uses: VeryGoodOpenSource/very_good_coverage@v2.1.0
        with:
          path: ".coverage/lcov.info"
          min_coverage: 1 # TODO add tests and increase to 95!
@@ -1,5 +1,5 @@
 *~
-*.swp
+*.sw*
 .meteor-spk
 *.sublime-workspace
 tmp/
@@ -38,3 +38,4 @@ ehthumbs.db
 # Helm chart
 # Chart dependencies
 /helm/wekan/**/*.tgz
+/helm/wekan/charts
@@ -3,12 +3,11 @@
 # 'meteor add' and 'meteor remove' will edit this file for you,
 # but you can also edit it by hand.

-meteor-base@1.4.0
+meteor-base@1.5.1

 # Build system
-ecmascript@0.15.1
-standard-minifier-css@1.7.2
-standard-minifier-js@2.6.0
+ecmascript@0.16.5
+standard-minifier-js@2.8.1
 mquandalle:jade
 coffeescript@2.4.1!

@@ -17,33 +16,35 @@ es5-shim@4.8.0

 # Collections
 aldeed:collection2
-wekan-cfs-standard-packages
+cfs:standard-packages
 cottz:publish-relations
 dburles:collection-helpers
 idmontie:migrations
-matb33:collection-hooks
-matteodem:easy-search
-mongo@1.11.0
+easy:search
+mongo@1.16.4
 mquandalle:collection-mutations

 # Account system
-kenton:accounts-sandstorm
-service-configuration@1.0.11
-useraccounts:unstyled
+accounts-password@2.3.3
+useraccounts:core
 useraccounts:flow-routing
+useraccounts:unstyled
+simple:rest-accounts-password
 wekan-ldap
 wekan-accounts-cas
+wekan-accounts-sandstorm
+wekan-accounts-lockout
+wekan-oidc
 wekan-accounts-oidc

 # Utilities
-check@1.3.1
+check@1.3.2
 jquery@1.11.10
-random@1.2.0
-reactive-dict@1.3.0
-session@1.2.0
-tracker@1.2.0
-underscore@1.0.10
-3stack:presence
+random@1.2.1
+reactive-dict@1.3.1
+session@1.2.1
+tracker@1.3.0
+underscore@1.0.11
 arillo:flow-router-helpers
 audit-argument-checks@1.0.7
 kadira:blaze-layout
@@ -51,47 +52,36 @@ kadira:dochead
 mquandalle:autofocus
 ongoworks:speakingurl
 raix:handlebar-helpers
-tap:i18n
-http@1.4.2
+http@2.0.0! # force new http package

 # UI components
 blaze
-reactive-var@1.0.11
+ostrio:i18n
+reactive-var@1.0.12
 fortawesome:fontawesome
 mousetrap:mousetrap
 mquandalle:jquery-textcomplete
-mquandalle:jquery-ui-drag-drop-sort
 mquandalle:mousetrap-bindglobal
-peerlibrary:blaze-components@=0.15.1
+peerlibrary:blaze-components
 templates:tabs
 meteor-autosize
-simple:json-routes
 rajit:bootstrap3-datepicker
 shell-server@0.5.0
-simple:rest-accounts-password
-useraccounts:core
-email@2.0.0
+email@2.2.3
 horka:swipebox
-dynamic-import@0.6.0
-
-accounts-password@1.7.0
-wekan-cfs-gridfs
+dynamic-import@0.7.2
+cfs:gridfs
 rzymek:fullcalendar
-momentjs:moment@2.22.2
-browser-policy-framing@1.1.0
-mquandalle:moment
 msavin:usercache
 # Keep stylus in 1.1.0, because building v2 takes extra 52 minutes.
-coagmano:stylus@1.1.0!
 meteorhacks:subs-manager
-meteorhacks:picker
-lamhieu:unblock
 meteorhacks:aggregate@1.3.0
 wekan-markdown
 konecty:mongo-counter
 percolate:synced-cron
-wekan-cfs-filesystem
-steffo:meteor-accounts-saml
+cfs:filesystem
+ostrio:cookies
+ostrio:files@2.3.0
 rajit:bootstrap3-datepicker-fi
 rajit:bootstrap3-datepicker-ar
 rajit:bootstrap3-datepicker-bg
@@ -140,10 +130,15 @@ rajit:bootstrap3-datepicker-uk
 rajit:bootstrap3-datepicker-vi
 rajit:bootstrap3-datepicker-zh-cn
 rajit:bootstrap3-datepicker-zh-tw
-staringatlights:fast-render
-spacebars
 easylogic:summernote
 pascoual:pdfkit
-wekan-accounts-lockout
 lmieulet:meteor-coverage
-meteortesting:mocha
+meteortesting:mocha@2.0.3
+aldeed:simple-schema
+matb33:collection-hooks
+simple:json-routes
+kadira:flow-router
+spacebars
+service-configuration@1.3.1
+communitypackages:picker
+minifier-css@1.6.2
@@ -1 +1 @@
-METEOR@2.2
+METEOR@2.10.0
@@ -1,61 +1,76 @@
-3stack:presence@1.1.2
-accounts-base@1.9.0
-accounts-oauth@1.2.0
-accounts-password@1.7.1
+accounts-base@2.2.6
+accounts-oauth@1.4.2
+accounts-password@2.3.3
 aldeed:collection2@2.10.0
 aldeed:collection2-core@1.2.0
 aldeed:schema-deny@1.1.0
 aldeed:schema-index@1.1.1
 aldeed:simple-schema@1.5.4
-allow-deny@1.1.0
+allow-deny@1.1.1
 arillo:flow-router-helpers@0.5.2
 audit-argument-checks@1.0.7
-autoupdate@1.7.0
-babel-compiler@7.6.1
-babel-runtime@1.5.0
+autoupdate@1.8.0
+babel-compiler@7.10.2
+babel-runtime@1.5.1
 base64@1.0.12
 binary-heap@1.0.11
-blaze@2.5.0
-blaze-tools@1.1.2
+blaze@2.6.1
+blaze-tools@1.1.3
 boilerplate-generator@1.7.1
-browser-policy-common@1.0.11
-browser-policy-framing@1.1.0
 caching-compiler@1.2.2
-caching-html-compiler@1.2.0
-callback-hook@1.3.0
+caching-html-compiler@1.2.1
+callback-hook@1.5.0
+cfs:access-point@0.1.49
+cfs:base-package@0.0.30
+cfs:collection@0.5.5
+cfs:collection-filters@0.2.4
+cfs:data-man@0.0.6
+cfs:file@0.1.17
+cfs:filesystem@0.1.2
+cfs:gridfs@0.0.34
 cfs:http-methods@0.0.32
-check@1.3.1
-chuangbo:cookie@1.1.0
-coagmano:stylus@1.1.0
+cfs:http-publish@0.0.13
+cfs:power-queue@0.9.11
+cfs:reactive-list@0.0.9
+cfs:reactive-property@0.0.4
+cfs:standard-packages@0.5.10
+cfs:storage-adapter@0.2.4
+cfs:tempstore@0.1.6
+cfs:upload-http@0.0.20
+cfs:worker@0.1.5
+check@1.3.2
 coffeescript@2.4.1
 coffeescript-compiler@2.4.1
+communitypackages:picker@1.1.0
 cottz:publish-relations@2.0.8
 dburles:collection-helpers@1.1.0
-ddp@1.4.0
-ddp-client@2.4.1
+ddp@1.4.1
+ddp-client@2.6.1
 ddp-common@1.4.0
-ddp-rate-limiter@1.0.9
-ddp-server@2.3.3
+ddp-rate-limiter@1.1.1
+ddp-server@2.6.0
 deps@1.0.12
-diff-sequence@1.1.1
-dynamic-import@0.6.0
+diff-sequence@1.1.2
+dynamic-import@0.7.2
+easy:search@2.2.1
 easylogic:summernote@0.8.8
-ecmascript@0.15.1
-ecmascript-runtime@0.7.0
-ecmascript-runtime-client@0.11.1
-ecmascript-runtime-server@0.10.1
-ejson@1.1.1
-email@2.0.0
+easysearch:components@2.2.2
+easysearch:core@2.2.2
+ecmascript@0.16.5
+ecmascript-runtime@0.8.0
+ecmascript-runtime-client@0.12.1
+ecmascript-runtime-server@0.11.0
+ejson@1.1.3
+email@2.2.3
 es5-shim@4.8.0
-fastclick@1.0.13
-fetch@0.1.1
+fetch@0.1.3
 fortawesome:fontawesome@4.7.0
-geojson-utils@1.0.10
+geojson-utils@1.0.11
 horka:swipebox@1.0.2
 hot-code-push@1.0.4
-html-tools@1.1.2
+html-tools@1.1.3
 htmljs@1.1.1
-http@1.4.4
+http@2.0.0
 id-map@1.1.1
 idmontie:migrations@1.0.3
 inter-process-messaging@0.1.1
@@ -63,40 +78,33 @@ jquery@1.11.11
 kadira:blaze-layout@2.3.0
 kadira:dochead@1.5.0
 kadira:flow-router@2.12.1
-kenton:accounts-sandstorm@0.7.0
 konecty:mongo-counter@0.0.5_3
-lamhieu:meteorx@2.1.1
-lamhieu:unblock@1.0.0
-launch-screen@1.2.1
 livedata@1.0.18
-lmieulet:meteor-coverage@3.2.0
+lmieulet:meteor-coverage@1.1.4
 localstorage@1.2.0
-logging@1.2.0
-matb33:collection-hooks@0.9.1
-matteodem:easy-search@1.6.4
+logging@1.3.1
+matb33:collection-hooks@1.2.0
 mdg:validation-error@0.5.1
-meteor@1.9.3
-meteor-base@1.4.0
-meteor-platform@1.2.6
+meteor@1.11.0
+meteor-autosize@5.0.1
+meteor-base@1.5.1
 meteorhacks:aggregate@1.3.0
 meteorhacks:collection-utils@1.2.0
 meteorhacks:picker@1.0.3
 meteorhacks:subs-manager@1.6.4
-meteorspark:util@0.2.0
-meteortesting:browser-tests@1.3.4
-meteortesting:mocha@2.0.1
+meteortesting:browser-tests@1.4.2
+meteortesting:mocha@2.0.4
 meteortesting:mocha-core@8.0.1
-minifier-css@1.5.4
-minifier-js@2.6.0
+minifier-css@1.6.2
+minifier-js@2.7.5
 minifiers@1.1.8-faster-rebuild.0
-minimongo@1.6.2
-mobile-status-bar@1.1.0
-modern-browsers@0.1.5
-modules@0.16.0
-modules-runtime@0.12.0
-momentjs:moment@2.29.1
-mongo@1.11.1
-mongo-decimal@0.1.2
+minimongo@1.9.1
+modern-browsers@0.1.9
+modules@0.19.0
+modules-runtime@0.13.1
+momentjs:moment@2.29.3
+mongo@1.16.4
+mongo-decimal@0.1.3
 mongo-dev-server@1.1.0
 mongo-id@1.0.8
 mongo-livedata@1.0.12
@@ -106,25 +114,27 @@ mquandalle:collection-mutations@0.1.0
 mquandalle:jade@0.4.9
 mquandalle:jade-compiler@0.4.5
 mquandalle:jquery-textcomplete@0.8.0_1
-mquandalle:jquery-ui-drag-drop-sort@0.2.0
-mquandalle:moment@1.0.1
 mquandalle:mousetrap-bindglobal@0.0.1
 msavin:usercache@1.8.0
-npm-bcrypt@0.9.4
-npm-mongo@3.9.0
-oauth@1.3.2
-oauth2@1.3.0
-observe-sequence@1.0.16
+npm-mongo@4.12.1
+oauth@2.1.3
+oauth2@1.3.2
+observe-sequence@1.0.20
 ongoworks:speakingurl@1.1.0
 ordered-dict@1.1.0
+ostrio:cookies@2.7.2
+ostrio:cstorage@4.0.1
+ostrio:files@2.3.2
+ostrio:i18n@3.2.0
 pascoual:pdfkit@1.0.7
 peerlibrary:assert@0.3.0
-peerlibrary:base-component@0.16.0
-peerlibrary:blaze-components@0.15.1
+peerlibrary:base-component@0.17.1
+peerlibrary:blaze-components@0.23.0
 peerlibrary:computed-field@0.10.0
+peerlibrary:data-lookup@0.3.0
 peerlibrary:reactive-field@0.6.0
 percolate:synced-cron@1.3.2
-promise@0.11.2
+promise@0.12.2
 raix:eventemitter@0.1.3
 raix:handlebar-helpers@0.2.5
 rajit:bootstrap3-datepicker@1.7.1_1
@@ -176,75 +186,50 @@ rajit:bootstrap3-datepicker-uk@1.7.1
 rajit:bootstrap3-datepicker-vi@1.7.1
 rajit:bootstrap3-datepicker-zh-cn@1.7.1
 rajit:bootstrap3-datepicker-zh-tw@1.7.1
-random@1.2.0
+random@1.2.1
 rate-limit@1.0.9
-react-fast-refresh@0.1.1
-reactive-dict@1.3.0
-reactive-var@1.0.11
+react-fast-refresh@0.2.5
+reactive-dict@1.3.1
+reactive-var@1.0.12
 reload@1.3.1
 retry@1.1.0
-routepolicy@1.1.0
+routepolicy@1.1.1
 rzymek:fullcalendar@3.8.0
-server-render@0.3.1
-service-configuration@1.0.11
-session@1.2.0
+service-configuration@1.3.1
+session@1.2.1
 sha@1.0.9
 shell-server@0.5.0
-simple:authenticate-user-by-token@1.0.1
-simple:json-routes@2.1.0
-simple:rest-accounts-password@1.1.2
-simple:rest-bearer-token-parser@1.0.1
-simple:rest-json-error-handler@1.0.1
-socket-stream-client@0.3.3
-softwarerero:accounts-t9n@1.3.11
-spacebars@1.2.0
-spacebars-compiler@1.2.1
-srp@1.1.0
-standard-minifier-css@1.7.2
-standard-minifier-js@2.6.0
-staringatlights:fast-render@3.3.0
-staringatlights:inject-data@2.3.0
-steffo:meteor-accounts-saml@0.0.18
-tap:i18n@1.8.2
+simple:authenticate-user-by-token@1.2.1
+simple:json-routes@2.3.1
+simple:rest-accounts-password@1.2.1
+simple:rest-bearer-token-parser@1.1.1
+simple:rest-json-error-handler@1.1.1
+socket-stream-client@0.5.0
+spacebars@1.3.0
+spacebars-compiler@1.3.1
+standard-minifier-js@2.8.1
 templates:tabs@2.3.0
-templating@1.4.0
+templating@1.4.1
 templating-compiler@1.4.1
-templating-runtime@1.4.0
-templating-tools@1.2.0
-tracker@1.2.0
+templating-runtime@1.5.0
+templating-tools@1.2.2
+tracker@1.3.0
 twbs:bootstrap@3.3.6
 ui@1.0.13
-underscore@1.0.10
+underscore@1.0.11
 url@1.3.2
-useraccounts:core@1.14.2
-useraccounts:flow-routing@1.14.2
+useraccounts:core@1.16.2
+useraccounts:flow-routing@1.15.0
 useraccounts:unstyled@1.14.2
-meteor-autosize@5.0.1
-webapp@1.10.1
-webapp-hashing@1.1.0
+webapp@1.13.3
+webapp-hashing@1.1.1
 wekan-accounts-cas@0.1.0
 wekan-accounts-lockout@1.0.0
 wekan-accounts-oidc@1.0.10
-wekan-cfs-access-point@0.1.50
-wekan-cfs-base-package@0.0.30
-wekan-cfs-collection@0.5.5
-wekan-cfs-collection-filters@0.2.4
-wekan-cfs-data-man@0.0.6
-wekan-cfs-file@0.1.17
-wekan-cfs-filesystem@0.1.2
-wekan-cfs-gridfs@0.0.34
-wekan-cfs-http-methods@0.0.32
-wekan-cfs-http-publish@0.0.13
-wekan-cfs-power-queue@0.9.11
-wekan-cfs-reactive-list@0.0.9
-wekan-cfs-reactive-property@0.0.4
-wekan-cfs-standard-packages@0.5.10
-wekan-cfs-storage-adapter@0.2.4
-wekan-cfs-tempstore@0.1.6
-wekan-cfs-upload-http@0.0.21
-wekan-cfs-worker@0.1.5
+wekan-accounts-sandstorm@0.8.0
 wekan-ldap@0.0.2
 wekan-markdown@1.0.9
 wekan-oidc@1.0.12
 yasaricli:slugify@0.0.7
 zimme:active-route@2.3.2
+zodern:types@1.0.9
@@ -3,7 +3,7 @@ sudo: required

 env:
  TRAVIS_DOCKER_COMPOSE_VERSION: 1.24.0
-  TRAVIS_NODE_VERSION: 12.22.7
+  TRAVIS_NODE_VERSION: 14.21.3
  TRAVIS_NPM_VERSION: latest

 before_install:
@@ -1,55 +1,10 @@
-# This is the configuration of the Transifex tool that we use to manage the
-# translations on Wekan. Documentation at: http://docs.transifex.com/client.
-#
-# Push
-# ====
-#
-# It is recommended that contributors use the Transifex web UI to create and
-# edit translated strings. However in case a contributor has directly jumped
-# into the code and made its translations in the corresponding i18n.json file
-# we can push it using
-#
-# > tx push -t -l ar
-#
-# Where `ar` is the language identifier. In addition, the project maintainer
-# should push the English source file to Transifex at least before each release
-# candidate using:
-#
-# > tx push -s
-#
-# Pull
-# ====
-#
-# The set of accepted language is directly managed in Transifex, the only
-# restriction we define to bundle a new language in the application, is that its
-# completion is at least at 75%.
-#
-# We use:
-#
-# > tx pull
-#
-# to download new versions of existing translations, and
-#
-# > tx pull -a --minimum-perc=75
-#
-# to download new sufficiently advanced translations.
-
 [main]
-host = https://www.transifex.com
-# tap:i18n requires us to use `-` separator in the language identifiers whereas
-# Transifex uses a `_` separator, without an option to customize it on one side
-# or the other, so we need to do a Manual mapping.
-lang_map = ar_EG:ar-EG, bg_BG:bg, de_AT:de-AT, de_CH:de-CH, en_DE:en-DE, en_IT:en-IT, en_GB:en-GB, es_AR:es-AR, es_CL:es-CL, es_419:es-LA, es_PE:es-PE, es_MX:es-MX, es_TX:es-TX, es_PY:es-PY, el_GR:el-GR, fa_IR:fa-IR, fi_FI:fi, fr_FR:fr-FR, fr_CH:fr-CH, gu_IN:gu-IN, hi_IN:hi-IN, hu_HU:hu, id_ID:id, mn_MN:mn, ms_MY:ms-MY, lv_LV:lv, pt_BR:pt-BR, ro_RO:ro, sl_SI:sl, zh_CN:zh-CN, zh_TW:zh-TW, zh_Hans:zh-Hans, zh_HK:zh-HK
+host     = https://www.transifex.com
+lang_map = es_AR: es-AR, es_419: es-LA, es_TX: es-TX, he_IL: he-IL, zh_CN: zh-CN, ar_EG: ar-EG, cs_CZ: cs-CZ, fa_IR: fa-IR, ms_MY: ms-MY, nl_NL: nl-NL, de_CH: de-CH, en_IT: en-IT, uz_UZ: uz-UZ, fr_CH: fr-CH, hi_IN: hi-IN, et_EE: et-EE, es_PE: es-PE, es_MX: es-MX, gl_ES: gl-ES, mn_MN: mn, sl_SI: sl, zh_TW: zh-TW, ast_ES: ast-ES, es_CL: es-CL, ja_JP: ja, lv_LV: lv, ro_RO: ro-RO, az_AZ: az-AZ, cy_GB: cy-GB, gu_IN: gu-IN, pl_PL: pl-PL, vep: ve-PP, en_BR: en-BR, en@ysv: en-YS, hu_HU: hu, ko_KR: ko-KR, pt_BR: pt-BR, zh_HK: zh-HK, zu_ZA: zu-ZA, en_MY: en-MY, ja-Hira: ja-HI, fi_FI: fi, vec: ve-CC, vi_VN: vi-VN, fr_FR: fr-FR, id_ID: id, zh_Hans: zh-Hans, en_DE: en-DE, en_GB: en-GB, el_GR: el-GR, uk_UA: uk-UA, az@latin: az-LA, de_AT: de-AT, uz@Latn: uz-LA, vls: vl-SS, ar_DZ: ar-DZ, bg_BG: bg, es_PY: es-PY, fy_NL: fy-NL, uz@Arab: uz-AR, ru_UA: ru-UA, war: wa-RR

-[wekan.application]
-file_filter = i18n/<lang>.i18n.json
+[o:wekan:p:wekan:r:application]
+file_filter = imports/i18n/data/<lang>.i18n.json
+source_file = imports/i18n/data/en.i18n.json
 source_lang = en
-type = KEYVALUEJSON
+type        = KEYVALUEJSON

-# We might have a dedicated second resource later to translate the “Welcome
-# Board” data.
-#
-# [wekan.welcomeBoard]
-# file_filter = private/welcomeBoard/<lang>.json
-# source_lang = en
-# type = KEYVALUEJSON
@@ -0,0 +1,55 @@
+# This is the configuration of the Transifex tool that we use to manage the
+# translations on Wekan. Documentation at: http://docs.transifex.com/client.
+#
+# Push
+# ====
+#
+# It is recommended that contributors use the Transifex web UI to create and
+# edit translated strings. However in case a contributor has directly jumped
+# into the code and made its translations in the corresponding i18n.json file
+# we can push it using
+#
+# > tx push -t -l ar
+#
+# Where `ar` is the language identifier. In addition, the project maintainer
+# should push the English source file to Transifex at least before each release
+# candidate using:
+#
+# > tx push -s
+#
+# Pull
+# ====
+#
+# The set of accepted language is directly managed in Transifex, the only
+# restriction we define to bundle a new language in the application, is that its
+# completion is at least at 75%.
+#
+# We use:
+#
+# > tx pull
+#
+# to download new versions of existing translations, and
+#
+# > tx pull -a --minimum-perc=75
+#
+# to download new sufficiently advanced translations.
+
+[main]
+host = https://www.transifex.com
+# tap:i18n requires us to use `-` separator in the language identifiers whereas
+# Transifex uses a `_` separator, without an option to customize it on one side
+# or the other, so we need to do a Manual mapping.
+lang_map = ar_DZ:ar-DZ, ar_EG:ar-EG, az_AZ:az-AZ, az@latin:az-LA, bg_BG:bg, cs_CZ:cs-CZ, cy_GB:cy-GB, de_AT:de-AT, de_CH:de-CH, en_BR:en-BR, en_DE:en-DE, en_IT:en-IT, en_GB:en-GB, en_MY:en-MY, et_EE:et-EE, ast_ES:ast-ES, es_AR:es-AR, en@ysv:en-YS, es_CL:es-CL, es_419:es-LA, es_PE:es-PE, es_MX:es-MX, es_TX:es-TX, es_PY:es-PY, el_GR:el-GR, fa_IR:fa-IR, ja-Hira:ja-HI, ja_JP:ja, fi_FI:fi, fr_FR:fr-FR, fr_CH:fr-CH, fy_NL:fy-NL, gl_ES:gl-ES, gu_IN:gu-IN, he_IL:he-IL, hi_IN:hi-IN, hu_HU:hu, id_ID:id, mn_MN:mn, ms_MY:ms-MY, nl_NL:nl-NL, ko_KR:ko-KR, lv_LV:lv, pl_PL:pl-PL, pt_BR:pt-BR, ro_RO:ro-RO, ru_UA:ru-UA, sl_SI:sl, uk_UA:uk-UA, uz@Arab:uz-AR, uz@Latn:uz-LA, uz_UZ:uz-UZ, vec:ve-CC, vep:ve-PP, vls:vl-SS, war:wa-RR, vi_VN:vi-VN, zh_CN:zh-CN, zh_TW:zh-TW, zh_Hans:zh-Hans, zh_HK:zh-HK, zu_ZA:zu-ZA
+
+[wekan.application]
+file_filter = imports/i18n/data/<lang>.i18n.json
+source_lang = en
+type = KEYVALUEJSON
+
+# We might have a dedicated second resource later to translate the “Welcome
+# Board” data.
+#
+# [wekan.welcomeBoard]
+# file_filter = private/welcomeBoard/<lang>.json
+# source_lang = en
+# type = KEYVALUEJSON
@@ -17,6 +17,23 @@
          "outputCapture": "std",
          "port": 9229,
          "timeout": 60000
+      },
+      {
+          "type": "node",
+          "request": "launch",
+          "name": "Test: Node",
+          "runtimeExecutable": "meteor",
+          "runtimeArgs": [
+            "test",
+            "--inspect-brk=9229",
+            "--port=4040",
+            "--exclude-archs=web.browser.legacy,web.cordova",
+            "--driver-package=meteortesting:mocha",
+            "--settings=settings.json"
+          ],
+          "outputCapture": "std",
+          "port": 9229,
+          "timeout": 60000
      }
  ],
  "compounds": [
@@ -1,4 +1,73 @@
-To get started, [please sign the Contributor License Agreement](https://www.clahub.com/agreements/wekan/wekan).
+## Contributing Security related

-[Then, please read documentation at wiki](https://github.com/wekan/wekan/wiki).
+For responsible security disclosure, please follow this process:
+https://github.com/wekan/wekan/blob/master/SECURITY.md

+CVE Hall of Fame is at https://wekan.github.io/hall-of-fame/
+
+## Contributing to Documentation Wiki
+
+Please clone wiki:
+```
+git clone https://github.com/wekan/wekan.wiki
+```
+Edit .md files, and add changed files in .zip attachment
+directly to comment of new issue at
+https://github.com/wekan/wekan/issues 
+
+## Contributing code
+
+[Building WeKan and sending PR](https://github.com/wekan/wekan/wiki/Emoji).
+
+WeKan code contributors Hall of Fame is at ChangeLog, where
+GitHub usernames are mentioned with changes added:
+
+https://github.com/wekan/wekan/blob/master/CHANGELOG.md
+
+Changes can be like typo fixes, bugfixes, features, or anything else
+like for example at open GitHub issues https://github.com/wekan/wekan/issues .
+Closed issues are already fixed or implemented.
+
+Also see other docs at wiki, for example:
+
+https://github.com/wekan/wekan/wiki/Developer-Documentation
+
+Do not use code formatting or linting like eslist or prettier.
+
+Only send minimal changed code lines, that are related to feature or fix.
+
+WeKan code has MIT license.
+
+About 300 persons have contributed to WeKan, stats at:
+
+https://www.openhub.net/p/wekan
+
+WeKan maintainer xet7 checks PR for typos etc before accepting to WeKan,
+so that WeKan code will still work OK.
+
+## Contributing translations
+
+Non-English translations are contributed only at
+https://transifex.com/wekan/wekan
+
+When adding new features, in your PR to
+https://github.com/wekan/wekan/pulls
+only add new English source language strings
+to https://github.com/wekan/wekan/blob/master/imports/i18n/data/en.i18n.json
+
+Maintainer of WeKan xet7 downloads all newest
+translations from Transifex and adds
+them to WeKan repo before making
+new release.
+
+## About WeKan Organization https://github.com/wekan
+
+xet7 rarely adds any new members to GitHub Organization,
+because xet7 prefers to check PRs.
+
+For some repos (other than https://github.com/wekan/wekan ),
+some contributors have direct commit access.
+
+Some contributors are mentioned at this outdated page:
+
+https://github.com/wekan/wekan/wiki/Team
@@ -1,6 +1,15 @@
-FROM quay.io/wekan/ubuntu:impish-20211102
+FROM --platform=linux/amd64 ubuntu:22.10 as wekan
 LABEL maintainer="wekan"

+# 2022-09-04:
+# - above "--platform=linux/amd64 ubuntu:22.04 as wekan" is needed to build Dockerfile
+#   correctly on Mac M1 etc, to not get this error:
+#   https://stackoverflow.com/questions/71040681/qemu-x86-64-could-not-open-lib64-ld-linux-x86-64-so-2-no-such-file-or-direc
+
+# 2022-04-25:
+# - gyp does not yet work with Ubuntu 22.04 ubuntu:rolling,
+#   so changing to 21.10. https://github.com/wekan/wekan/issues/4488
+
 # 2021-09-18:
 # - Above Ubuntu base image copied from Docker Hub ubuntu:hirsute-20210825
 #   to Quay to avoid Docker Hub rate limits.
@@ -12,8 +21,8 @@ ARG DEBIAN_FRONTEND=noninteractive

 ENV BUILD_DEPS="apt-utils libarchive-tools gnupg gosu wget curl bzip2 g++ build-essential git ca-certificates python3" \
    DEBUG=false \
-    NODE_VERSION=v12.22.7 \
-    METEOR_RELEASE=1.10.2 \
+    NODE_VERSION=v14.21.3 \
+    METEOR_RELEASE=2.8.1 \
    USE_EDGE=false \
    METEOR_EDGE=1.5-beta.17 \
    NPM_VERSION=latest \
@@ -29,9 +38,14 @@ ENV BUILD_DEPS="apt-utils libarchive-tools gnupg gosu wget curl bzip2 g++ build-
    ACCOUNTS_LOCKOUT_UNKNOWN_USERS_LOCKOUT_PERIOD=60 \
    ACCOUNTS_LOCKOUT_UNKNOWN_USERS_FAILURE_WINDOW=15 \
    ACCOUNTS_COMMON_LOGIN_EXPIRATION_IN_DAYS=90 \
+    ATTACHMENTS_UPLOAD_EXTERNAL_PROGRAM="" \
+    ATTACHMENTS_UPLOAD_MIME_TYPES="" \
+    ATTACHMENTS_UPLOAD_MAX_SIZE=0 \
+    AVATARS_UPLOAD_EXTERNAL_PROGRAM="" \
+    AVATARS_UPLOAD_MIME_TYPES="" \
+    AVATARS_UPLOAD_MAX_SIZE=72000 \
    RICHER_CARD_COMMENT_EDITOR=false \
    CARD_OPENED_WEBHOOK_ENABLED=false \
-    ATTACHMENTS_STORE_PATH="" \
    MAX_IMAGE_PIXEL="" \
    IMAGE_COMPRESS_RATIO="" \
    NOTIFICATION_TRAY_AFTER_READ_DAYS_BEFORE_REMOVE="" \
@@ -43,10 +57,12 @@ ENV BUILD_DEPS="apt-utils libarchive-tools gnupg gosu wget curl bzip2 g++ build-
    MATOMO_SITE_ID="" \
    MATOMO_DO_NOT_TRACK=true \
    MATOMO_WITH_USERNAME=false \
+    METRICS_ALLOWED_IP_ADDRESSES="" \
    BROWSER_POLICY_ENABLED=true \
    TRUSTED_URL="" \
    WEBHOOKS_ATTRIBUTES="" \
    OAUTH2_ENABLED=false \
+    OIDC_REDIRECTION_ENABLED=false \
    OAUTH2_CA_CERT="" \
    OAUTH2_ADFS_ENABLED=false \
    OAUTH2_LOGIN_STYLE=redirect \
@@ -140,7 +156,17 @@ ENV BUILD_DEPS="apt-utils libarchive-tools gnupg gosu wget curl bzip2 g++ build-
    SAML_LOCAL_PROFILE_MATCH_ATTRIBUTE="" \
    SAML_ATTRIBUTES="" \
    ORACLE_OIM_ENABLED=false \
-    WAIT_SPINNER=""
+    WAIT_SPINNER="" \
+    WRITABLE_PATH=/data \
+    S3=""
+
+#   NODE_OPTIONS="--max_old_space_size=4096" \
+
+#---------------------------------------------
+# == at docker-compose.yml: AUTOLOGIN WITH OIDC/OAUTH2 ====
+# https://github.com/wekan/wekan/wiki/autologin
+#- OIDC_REDIRECTION_ENABLED=true
+#---------------------------------------------------------------------

 # Copy the app to the image
 COPY ${SRC_PATH} /home/wekan/app
@@ -152,7 +178,6 @@ RUN \
    \
    # OS dependencies
    apt-get update -y && apt-get install -y --no-install-recommends ${BUILD_DEPS} && \
-    #pip3 install -U pip setuptools wheel && \
    \
    # Meteor installer doesn't work with the default tar binary, so using bsdtar while installing.
    # https://github.com/coreos/bugs/issues/1095#issuecomment-350574389
@@ -163,43 +188,9 @@ RUN \
    wget https://nodejs.org/dist/${NODE_VERSION}/node-${NODE_VERSION}-${ARCHITECTURE}.tar.gz && \
    wget https://nodejs.org/dist/${NODE_VERSION}/SHASUMS256.txt.asc && \
    #---------------------------------------------------------------------------------------------
-    # Node Fibers 100% CPU usage issue:
-    # https://github.com/wekan/wekan-mongodb/issues/2#issuecomment-381453161
-    # https://github.com/meteor/meteor/issues/9796#issuecomment-381676326
-    # https://github.com/sandstorm-io/sandstorm/blob/0f1fec013fe7208ed0fd97eb88b31b77e3c61f42/shell/server/00-startup.js#L99-L129
-    # Also see beginning of wekan/server/authentication.js
-    #   import Fiber from "fibers";
-    #   Fiber.poolSize = 1e9;
-    # OLD: Download node version 8.12.0 prerelease that has fix included, => Official 8.12.0 has been released
-    # Description at https://releases.wekan.team/node.txt
-    #wget https://releases.wekan.team/node-${NODE_VERSION}-${ARCHITECTURE}.tar.gz && \
-    #echo "1ed54adb8497ad8967075a0b5d03dd5d0a502be43d4a4d84e5af489c613d7795  node-v8.12.0-linux-x64.tar.gz" >> SHASUMS256.txt.asc && \
    \
    # Verify nodejs authenticity
    grep ${NODE_VERSION}-${ARCHITECTURE}.tar.gz SHASUMS256.txt.asc | shasum -a 256 -c - && \
-    #export GNUPGHOME="$(mktemp -d)" && \
-    #\
-    # Try other key servers if ha.pool.sks-keyservers.net is unreachable
-    # Code from https://github.com/chorrell/docker-node/commit/2b673e17547c34f17f24553db02beefbac98d23c
-    # gpg keys listed at https://github.com/nodejs/node#release-team
-    # and keys listed here from previous version of this Dockerfile
-    #for key in \
-    #9554F04D7259F04124DE6B476D5A82AC7E37093B \
-    #94AE36675C464D64BAFA68DD7434390BDBE9B9C5 \
-    #FD3A5288F042B6850C66B31F09FE44734EB7990E \
-    #71DCFD284A79C3B38668286BC97EC7A07EDE3FC1 \
-    #DD8F2338BAE7501E3DD5AC78C273792F7D83545D \
-    #C4F0DFFF4E8C1A8236409D08E73BC641CC11F4C8 \
-    #B9AE9905FFD7803F25714661B63B535A4C206CA9 \
-    #; do \
-    #gpg --keyserver ha.pool.sks-keyservers.net --recv-keys "$key" || \
-    #gpg --keyserver pgp.mit.edu --recv-keys "$key" || \
-    #gpg --keyserver keyserver.pgp.com --recv-keys "$key" ; \
-    #done && \
-    #gpg --verify SHASUMS256.txt.asc && \
-    # Ignore socket files then delete files then delete directories
-    #find "$GNUPGHOME" -type f | xargs rm -f && \
-    #find "$GNUPGHOME" -type d | xargs rm -fR && \
    rm -f SHASUMS256.txt.asc && \
    \
    # Install Node
@@ -208,7 +199,7 @@ RUN \
    mv node-${NODE_VERSION}-${ARCHITECTURE} /opt/nodejs && \
    ln -s /opt/nodejs/bin/node /usr/bin/node && \
    ln -s /opt/nodejs/bin/npm /usr/bin/npm && \
-    mkdir -p /opt/nodejs/lib/node_modules/fibers/.node-gyp /root/.node-gyp/8.16.1 /home/wekan/.config && \
+    mkdir -p /opt/nodejs/lib/node_modules/fibers/.node-gyp /root/.node-gyp/${NODE_VERSION} /home/wekan/.config && \
    chown wekan --recursive /home/wekan/.config && \
    \
    #DOES NOT WORK: paxctl fix for alpine linux: https://github.com/wekan/wekan/issues/1303
@@ -216,89 +207,32 @@ RUN \
    \
    # Install Node dependencies. Python path for node-gyp.
    npm install -g npm@${NPM_VERSION} && \
-    #npm config set python python2.7 && \
-    #npm install -g node-gyp && \
-    #npm install -g fibers@${FIBERS_VERSION} && \
    \
    # Change user to wekan and install meteor
    cd /home/wekan/ && \
    chown wekan --recursive /home/wekan && \
-    #curl "https://install.meteor.com" -o /home/wekan/install_meteor.sh && \
-    #curl "https://install.meteor.com/?release=${METEOR_RELEASE}" -o /home/wekan/install_meteor.sh && \
-    # OLD: sed -i "s|RELEASE=.*|RELEASE=${METEOR_RELEASE}\"\"|g" ./install_meteor.sh && \
-    # Install Meteor forcing its progress
-    #sed -i 's/VERBOSITY="--silent"/VERBOSITY="--progress-bar"/' ./install_meteor.sh && \
    echo "Starting meteor ${METEOR_RELEASE} installation...   \n" && \
    gosu wekan:wekan curl https://install.meteor.com/ | /bin/sh && \
    mv /root/.meteor /home/wekan/ && \
    chown wekan --recursive /home/wekan/.meteor && \
    \
-    # Check if opting for a release candidate instead of major release
-    #if [ "$USE_EDGE" = false ]; then \
-      #gosu wekan:wekan sh /home/wekan/install_meteor.sh; \
-    #  gosu wekan:wekan curl https://install.meteor.com/ | sh; \
-    #else \
-    #  gosu wekan:wekan git clone --recursive --depth 1 -b release/METEOR@${METEOR_EDGE} https://github.com/meteor/meteor.git /home/wekan/.meteor; \
-    #fi; \
-    #\
-    # Get additional packages
-    #mkdir -p /home/wekan/app/packages && \
-    #chown wekan:wekan --recursive /home/wekan && \
-    # REPOS BELOW ARE INCLUDED TO WEKAN REPO
-    #cd /home/wekan/app/packages && \
-    #gosu wekan:wekan git clone --depth 1 -b master https://github.com/wekan/flow-router.git kadira-flow-router && \
-    #gosu wekan:wekan git clone --depth 1 -b master https://github.com/meteor-useraccounts/core.git meteor-useraccounts-core && \
-    #gosu wekan:wekan git clone --depth 1 -b master https://github.com/wekan/meteor-accounts-cas.git && \
-    #gosu wekan:wekan git clone --depth 1 -b master https://github.com/wekan/wekan-ldap.git && \
-    #gosu wekan:wekan git clone --depth 1 -b master https://github.com/wekan/wekan-scrollbar.git && \
-    #gosu wekan:wekan git clone --depth 1 -b master https://github.com/wekan/meteor-accounts-oidc.git && \
-    #gosu wekan:wekan git clone --depth 1 -b master --recurse-submodules https://github.com/wekan/markdown.git && \
-    #gosu wekan:wekan mv meteor-accounts-oidc/packages/switch_accounts-oidc wekan-accounts-oidc && \
-    #gosu wekan:wekan mv meteor-accounts-oidc/packages/switch_oidc wekan-oidc && \
-    #gosu wekan:wekan rm -rf meteor-accounts-oidc && \
    sed -i 's/api\.versionsFrom/\/\/api.versionsFrom/' /home/wekan/app/packages/meteor-useraccounts-core/package.js && \
    cd /home/wekan/.meteor && \
    gosu wekan:wekan /home/wekan/.meteor/meteor -- help; \
    \
-    # extract the OpenAPI specification
-    #npm install -g api2html@0.3.3 && \
-    #mkdir -p /home/wekan/python && \
-    #chown wekan --recursive /home/wekan/python && \
-    #cd /home/wekan/python && \
-    #gosu wekan:wekan git clone --depth 1 -b master https://github.com/Kronuz/esprima-python && \
-    #cd /home/wekan/python/esprima-python && \
-    #python3 setup.py install --record files.txt && \
-    #cd /home/wekan/app && \
-    #mkdir -p /home/wekan/app/public/api && \
-    #chown wekan --recursive /home/wekan/app && \
-    #gosu wekan:wekan python3 ./openapi/generate_openapi.py --release $(git describe --tags --abbrev=0) > ./public/api/wekan.yml && \
-    #gosu wekan:wekan /opt/nodejs/bin/api2html -c ./public/logo-header.png -o ./public/api/wekan.html ./public/api/wekan.yml; \
    # Build app
    cd /home/wekan/app && \
    mkdir -p /home/wekan/.npm && \
    chown wekan --recursive /home/wekan/.npm /home/wekan/.config /home/wekan/.meteor && \
-    #gosu wekan:wekan /home/wekan/.meteor/meteor add standard-minifier-js && \
    chmod u+w *.json && \
    gosu wekan:wekan npm install && \
    gosu wekan:wekan /home/wekan/.meteor/meteor build --directory /home/wekan/app_build && \
-    #cp /home/wekan/app/fix-download-unicode/cfs_access-point.txt /home/wekan/app_build/bundle/programs/server/packages/cfs_access-point.js && \
-    #rm /home/wekan/app_build/bundle/programs/server/npm/node_modules/meteor/rajit_bootstrap3-datepicker/lib/bootstrap-datepicker/node_modules/phantomjs-prebuilt/lib/phantom/bin/phantomjs && \
-    #chown wekan /home/wekan/app_build/bundle/programs/server/packages/cfs_access-point.js && \
-    #Removed binary version of bcrypt because of security vulnerability that is not fixed yet.
-    #https://github.com/wekan/wekan/commit/4b2010213907c61b0e0482ab55abb06f6a668eac
-    #https://github.com/wekan/wekan/commit/7eeabf14be3c63fae2226e561ef8a0c1390c8d3c
-    #cd /home/wekan/app_build/bundle/programs/server/npm/node_modules/meteor/npm-bcrypt && \
-    #gosu wekan:wekan rm -rf node_modules/bcrypt && \
-    #gosu wekan:wekan npm install bcrypt && \
-    #
-    # Delete phantomjs
-    #cd /home/wekan/app_build/bundle && \
-    #find . -name "*phantomjs*" | xargs rm -rf && \
-    #
    cd /home/wekan/app_build/bundle/programs/server/ && \
    chmod u+w *.json && \
    gosu wekan:wekan npm install && \
-    #gosu wekan:wekan npm install bcrypt && \
+    cd node_modules/fibers && \
+    node build.js && \
+    cd ../.. && \
    # Remove legacy webbroser bundle, so that Wekan works also at Android Firefox, iOS Safari, etc.
    rm -rf /home/wekan/app_build/bundle/programs/web.browser.legacy && \
    mv /home/wekan/app_build/bundle /build && \
@@ -314,7 +248,9 @@ RUN \
    rm -R /var/lib/apt/lists/* && \
    rm -R /home/wekan/.meteor && \
    rm -R /home/wekan/app && \
-    rm -R /home/wekan/app_build
+    rm -R /home/wekan/app_build && \
+    mkdir /data && \
+    chown wekan --recursive /data
    #cat /home/wekan/python/esprima-python/files.txt | xargs rm -R && \
    #rm -R /home/wekan/python
    #rm /home/wekan/install_meteor.sh
@@ -323,4 +259,17 @@ ENV PORT=8080
 EXPOSE $PORT
 USER wekan

-CMD ["node", "/build/main.js"]
+STOPSIGNAL SIGKILL
+
+#---------------------------------------------------------------------
+# https://github.com/wekan/wekan/issues/3585#issuecomment-1021522132
+# Add more Node heap:
+#   NODE_OPTIONS="--max_old_space_size=4096"
+# Add more stack:
+#   bash -c "ulimit -s 65500; exec node --stack-size=65500 main.js"
+#---------------------------------------------------------------------
+#
+# CMD ["node", "/build/main.js"]
+
+#CMD ["bash", "-c", "ulimit -s 65500; exec node --stack-size=65500 /build/main.js"]
+CMD ["bash", "-c", "ulimit -s 65500; exec node /build/main.js"]
@@ -4,9 +4,18 @@ FROM amd64/alpine:3.7 AS builder
 ENV QEMU_VERSION=v4.2.0-6 \
    QEMU_ARCHITECTURE=aarch64 \
    NODE_ARCHITECTURE=linux-arm64 \
-    NODE_VERSION=v12.22.7 \
+    NODE_VERSION=v14.21.3 \
    WEKAN_VERSION=latest  \
-    WEKAN_ARCHITECTURE=arm64
+    WEKAN_ARCHITECTURE=arm64 \
+    NODE_OPTIONS="--max_old_space_size=4096"
+
+#---------------------------------------------------------------------
+# https://github.com/wekan/wekan/issues/3585#issuecomment-1021522132
+# Add more Node heap:
+#   NODE_OPTIONS="--max_old_space_size=4096"
+# Add more stack:
+#   bash -c "ulimit -s 65500; exec node --stack-size=65500 main.js"
+#---------------------------------------------------------------------

    # Install dependencies
 RUN apk update && apk add ca-certificates outils-sha1 && \
@@ -40,7 +49,7 @@ LABEL maintainer="wekan"
 # Set the environment variables (defaults where required)
 ENV QEMU_ARCHITECTURE=aarch64 \
    NODE_ARCHITECTURE=linux-arm64 \
-    NODE_VERSION=v12.22.7 \
+    NODE_VERSION=v14.21.3 \
    NODE_ENV=production \
    NPM_VERSION=latest \
    WITH_API=true \
@@ -74,4 +83,16 @@ RUN \
 EXPOSE $PORT
 USER wekan

-CMD ["node", "/home/wekan/bundle/main.js"]
+#---------------------------------------------------------------------
+# https://github.com/wekan/wekan/issues/3585#issuecomment-1021522132
+# Add more Node heap:
+#   NODE_OPTIONS="--max_old_space_size=4096"
+# Add more stack:
+#   bash -c "ulimit -s 65500; exec node --stack-size=65500 main.js"
+#---------------------------------------------------------------------
+#
+#CMD ["node", "/home/wekan/bundle/main.js"]
+
+#CMD ["bash", "-c", "ulimit -s 65500; exec node --stack-size=65500 /home/wekan/bundle/main.js"]
+CMD ["bash", "-c", "ulimit -s 65500; exec node /home/wekan/bundle/main.js"]
+
@@ -1,25 +1,27 @@
-[![Gitpod Ready-to-Code](https://img.shields.io/badge/Gitpod-Ready--to--Code-blue?logo=gitpod)](https://gitpod.io/#https://github.com/wekan/wekan)
+[Gitpod Ready-to-Code](https://gitpod.io/#https://github.com/wekan/wekan)

 # WeKan ® - Open Source kanban

-[![Contributors](https://img.shields.io/github/contributors/wekan/wekan.svg "Contributors")](https://github.com/wekan/wekan/graphs/contributors)
-[![Docker Repository on Quay](https://quay.io/repository/wekan/wekan/status "Docker Repository on Quay")](https://quay.io/repository/wekan/wekan)
-[![Docker Hub container status](https://img.shields.io/docker/build/wekanteam/wekan.svg "Docker Hub container status")](https://hub.docker.com/r/wekanteam/wekan)
-[![Docker Hub pulls](https://img.shields.io/docker/pulls/wekanteam/wekan.svg "Docker Hub Pulls")](https://hub.docker.com/r/wekanteam/wekan)
-[![Wekan Build Status][travis_badge]][travis_status]
-[![Codacy Badge](https://api.codacy.com/project/badge/Grade/02137ecec4e34c5aa303f57637196a93 "Codacy Badge")](https://www.codacy.com/app/xet7/wekan?utm_source=github.com&amp;utm_medium=referral&amp;utm_content=wekan/wekan&amp;utm_campaign=Badge_Grade)
-[![Code Climate](https://codeclimate.com/github/wekan/wekan/badges/gpa.svg "Code Climate")](https://codeclimate.com/github/wekan/wekan)
-[![Project Dependencies](https://david-dm.org/wekan/wekan.svg "Project Dependencies")](https://david-dm.org/wekan/wekan)
-[![Code analysis at Open Hub](https://img.shields.io/badge/code%20analysis-at%20Open%20Hub-brightgreen.svg "Code analysis at Open Hub")](https://www.openhub.net/p/wekan)
-[![FOSSA Status](https://app.fossa.io/api/projects/git%2Bgithub.com%2Fwekan%2Fwekan.svg?type=shield)](https://app.fossa.io/projects/git%2Bgithub.com%2Fwekan%2Fwekan?ref=badge_shield)
-[![CII Best Practices](https://bestpractices.coreinfrastructure.org/projects/4619/badge)](https://bestpractices.coreinfrastructure.org/projects/4619)
+## Docker Containers
+
+- [Quay](https://quay.io/repository/wekan/wekan)
+- [Docker Hub](https://hub.docker.com/r/wekanteam/wekan)
+
+Other platforms and compatible software versions at https://wekan.github.io Download section.
+
+## Code stats
+
+- [Code Climate](https://codeclimate.com/github/wekan/wekan)
+- [Open Hub](https://www.openhub.net/p/wekan)
+- [OSS Insight](https://ossinsight.io/analyze/wekan/wekan)
+- [CII Best Practices](https://bestpractices.coreinfrastructure.org/projects/4619)

 ## [Translate WeKan ® at Transifex](https://transifex.com/wekan/wekan)

 Translations to non-English languages are accepted only at [Transifex](https://transifex.com/wekan/wekan) using webbrowser.
-New English strings of new features can be added as PRs to edge branch file wekan/i18n/en.i18n.json .
+New English strings of new features can be added as PRs to master branch file wekan/imports/i18n/data/en.i18n.json .

-## [Wekan feature requests and bugs](https://github.com/wekan/wekan/issues)
+## [WeKan ® feature requests and bugs](https://github.com/wekan/wekan/issues)

 Please add most of your questions as GitHub issue: [WeKan ® Feature Requests and Bugs](https://github.com/wekan/wekan/issues).
 It's better than at chat where details get lost when chat scrolls up.
@@ -28,12 +30,12 @@ It's better than at chat where details get lost when chat scrolls up.

 [Discussions][discussions] - WeKan Community GitHub Discussions, that are not [Feature Requests and Bugs](https://github.com/wekan/wekan/issues).

-[Wekan IRC FAQ](https://github.com/wekan/wekan/wiki/IRC-FAQ)
+[WeKan IRC FAQ](https://github.com/wekan/wekan/wiki/IRC-FAQ)

-## Docker: Please only use Docker release tags
+## Docker: Latest tag has newest release

-Note: With Docker, please don't use latest tag. Only use release tags.
-See https://github.com/wekan/wekan/issues/3874
+You can use latest tag to get newest release tag.
+See bottom of https://github.com/wekan/wekan/issues/3874

 ## FAQ

@@ -56,8 +58,8 @@ install Wekan on your own computer or server. In fact we encourage you to do
 that by providing one-click installation on various platforms.

 - WeKan ® is used in [most countries of the world](https://snapcraft.io/wekan).
- Wekan largest user has 13k users using Wekan in their company.
- Wekan has been [translated](https://transifex.com/wekan/wekan) to about 70 languages.
+- WeKan ® largest user has 22k users using WeKan ® in their company.
+- WeKan ® has been [translated](https://transifex.com/wekan/wekan) to about 105 languages.
 - [Features][features]: WeKan ® has real-time user interface.
 - [Platforms][platforms]: WeKan ® supports many platforms.
  WeKan ® is critical part of new platforms Wekan is currently being integrated to.
@@ -113,12 +115,8 @@ with [Meteor](https://www.meteor.com).
 [wekan_issues]: https://github.com/wekan/wekan/issues
 [wekan_issues]: https://github.com/wekan/wekan/issues
 [docker_image]: https://hub.docker.com/r/wekanteam/wekan/
-[travis_badge]: https://travis-ci.org/wekan/wekan.svg?branch=devel
-[travis_status]: https://travis-ci.org/wekan/wekan
 [wekan_wiki]: https://github.com/wekan/wekan/wiki
 [translate_wekan]: https://www.transifex.com/wekan/wekan/
 [open_source]: https://en.wikipedia.org/wiki/Open-source_software
 [free_software]: https://en.wikipedia.org/wiki/Free_software
 [discussions]: https://github.com/wekan/wekan/discussions
-
-[![FOSSA Status](https://app.fossa.io/api/projects/git%2Bgithub.com%2Fwekan%2Fwekan.svg?type=large)](https://app.fossa.io/projects/git%2Bgithub.com%2Fwekan%2Fwekan?ref=badge_large)
@@ -105,7 +105,7 @@ a security issue, we'd like to know about it, and also how to fix it:

 Typical already known or "no impact" bugs such as:

- Brute force password guessign. Currently there is
+- Brute force password guessing. Currently there is
  [brute force protection with eluck:accounts-lockout](https://github.com/wekan/wekan/blob/master/CHANGELOG.md#v080-2018-04-04-wekan-release).
 - Security issues related to that Wekan uses Meteor 1.6.0.1 related packages, and upgrading to newer
  Meteor 1.6.1 is complicated process that requires lots of changes to many dependency packages.
@@ -1,5 +1,5 @@
 appId: wekan-public/apps/77b94f60-dec9-0136-304e-16ff53095928
-appVersion: "v5.78.0"
+appVersion: "v6.78.0"
 files:
  userUploads:
    - README.md
@@ -21,31 +21,39 @@ import sys

 arguments = len(sys.argv) - 1

+syntax = """=== Wekan API Python CLI: Shows IDs for addcard ===
+# AUTHORID is USERID that writes card or custom field.
+If *nix:  chmod +x api.py => ./api.py users
+  Syntax:
+    User API:
+    python3 api.py user                 # Current user and list of current user boards
+    python3 api.py boards USERID        # Boards of USERID
+    python3 api.py swimlanes BOARDID    # Swimlanes of BOARDID
+    python3 api.py lists BOARDID        # Lists of BOARDID
+    python3 api.py list BOARDID LISTID  # Info of LISTID
+    python3 api.py createlist BOARDID LISTTITLE # Create list
+    python3 api.py addcard AUTHORID BOARDID SWIMLANEID LISTID CARDTITLE CARDDESCRIPTION
+    python3 api.py editcard BOARDID LISTID CARDID NEWCARDTITLE NEWCARDDESCRIPTION
+    python3 api.py customfields BOARDID # Custom Fields of BOARDID
+    python3 api.py customfield BOARDID CUSTOMFIELDID # Info of CUSTOMFIELDID
+    python3 api.py addcustomfieldtoboard AUTHORID BOARDID NAME TYPE SETTINGS SHOWONCARD AUTOMATICALLYONCARD SHOWLABELONMINICARD SHOWSUMATTOPOFLIST # Add Custom Field to Board
+    python3 api.py listattachments BOARDID # List attachments
+
+  Admin API:
+    python3 api.py users                # All users
+    python3 api.py boards               # All Public Boards
+    python3 api.py newuser USERNAME EMAIL PASSWORD
+"""
+
 if arguments == 0:
-    print("=== Wekan API Python CLI: Shows IDs for addcard ===")
-    print("AUTHORID is USERID that writes card.")
-    print("If *nix:  chmod +x api.py => ./api.py users")
-    print("Syntax:")
-    print("  python3 api.py users                # All users")
-    print("  python3 api.py boards               # All Public Boards")
-    print("  python3 api.py boards USERID        # Boards of USERID")
-    print("  python3 api.py board BOARDID        # Info of BOARDID")
-    print("  python3 api.py customfields BOARDID # Custom Fields of BOARDID")
-    print("  python3 api.py customfield BOARDID CUSTOMFIELDID # Info of CUSTOMFIELDID")
-    print("  python3 api.py addcustomfieldtoboard AUTHORID BOARDID NAME TYPE SETTINGS SHOWONCARD AUTOMATICALLYONCARD SHOWLABELONMINICARD SHOWSUMATTOPOFLIST # Add Custom Field to Board")
-    print("  python3 api.py swimlanes BOARDID    # Swimlanes of BOARDID")
-    print("  python3 api.py lists BOARDID        # Lists of BOARDID")
-    print("  python3 api.py list BOARDID LISTID  # Info of LISTID")
-    print("  python3 api.py createlist BOARDID LISTTITLE # Create list")
-    print("  python3 api.py addcard AUTHORID BOARDID SWIMLANEID LISTID CARDTITLE CARDDESCRIPTION")
-    print("  python3 api.py editcard BOARDID LISTID CARDID NEWCARDTITLE NEWCARDDESCRIPTION")
-    print("  python3 api.py listattachments BOARDID # List attachments")
+    print(syntax)
+    exit
+
 # TODO:
 #   print("  python3 api.py attachmentjson BOARDID ATTACHMENTID # One attachment as JSON base64")
 #   print("  python3 api.py attachmentbinary BOARDID ATTACHMENTID # One attachment as binary file")
 #   print("  python3 api.py attachmentdownload BOARDID ATTACHMENTID # One attachment as file")
 #   print("  python3 api.py attachmentsdownload BOARDID # All attachments as files")
-    exit

 # ------- SETTINGS START -------------

@@ -61,33 +69,6 @@ wekanurl = 'http://localhost:4000/'
 # ------- SETTINGS END -------------

 """
-EXAMPLE:
-
-python3 api.py
-
-OR:
-chmod +x api.py
-./api.py
-
-=== Wekan API Python CLI: Shows IDs for addcard ===
-AUTHORID is USERID that writes card.
-Syntax:
-  python3 api.py users                # All users
-  python3 api.py boards USERID        # Boards of USERID
-  python3 api.py board BOARDID        # Info of BOARDID
-  python3 api.py customfields BOARDID # Custom Fields of BOARDID
-  python3 api.py customfield BOARDID CUSTOMFIELDID # Info of CUSTOMFIELDID
-  python3 api.py addcustomfieldtoboard AUTHORID BOARDID NAME TYPE SETTINGS SHOWONCARD AUTOMATICALLYONCARD SHOWLABELONMINICARD SHOWSUMATTOPOFLIST # Add Custom Field to Board
-  python3 api.py swimlanes BOARDID    # Swimlanes of BOARDID
-  python3 api.py lists BOARDID        # Lists of BOARDID
-  python3 api.py list BOARDID LISTID  # Info of LISTID
-  python3 api.py createlist BOARDID LISTTITLE # Create list
-  python3 api.py addcard AUTHORID BOARDID SWIMLANEID LISTID CARDTITLE CARDDESCRIPTION
-  python3 api.py editcard BOARDID LISTID CARDID NEWCARDTITLE NEWCARDDESCRIPTION
-  python3 api.py listattachments BOARDID # List attachments
-  python3 api.py attachmentjson BOARDID ATTACHMENTID # One attachment as JSON base64
-  python3 api.py attachmentbinary BOARDID ATTACHMENTID # One attachment as binary file
-
 === ADD CUSTOM FIELD TO BOARD ===

 Type: text, number, date, dropdown, checkbox, currency, stringtemplate.
@@ -144,6 +125,8 @@ wekanloginurl = wekanurl + loginurl
 apiboards = 'api/boards/'
 apiattachments = 'api/attachments/'
 apiusers = 'api/users'
+apiuser = 'api/user'
+apiallusers = 'api/allusers'
 e = 'export'
 s = '/'
 l = 'lists'
@@ -152,17 +135,20 @@ sws = 'swimlanes'
 cs = 'cards'
 cf = 'custom-fields'
 bs = 'boards'
+apbs = 'allpublicboards'
 atl = 'attachmentslist'
 at = 'attachment'
 ats = 'attachments'
 users = wekanurl + apiusers
+user = wekanurl + apiuser
+allusers = wekanurl + apiallusers

 # ------- API URL GENERATION END -----------

 # ------- LOGIN TOKEN START -----------

 data = {"username": username, "password": password}
-body = requests.post(wekanloginurl, data=data)
+body = requests.post(wekanloginurl, json=data)
 d = body.json()
 apikey = d['token']

@@ -231,6 +217,21 @@ if arguments == 6:
        print(data2)
        # ------- EDIT CARD END -----------

+if arguments == 4:
+
+    if sys.argv[1] == 'newuser':
+
+        # ------- CREATE NEW USER START -----------
+        username = sys.argv[2]
+        email = sys.argv[3]
+        password = sys.argv[4]
+        headers = {'Accept': 'application/json', 'Authorization': 'Bearer {}'.format(apikey)}
+        post_data = {'username': '{}'.format(username),'email': '{}'.format(email),'password': '{}'.format(password)}
+        body = requests.post(users, data=post_data, headers=headers)
+        print("=== CREATE NEW USER ===\n")
+        print(body.text)
+        # ------- CREATE NEW USER END -----------
+
 if arguments == 3:

    if sys.argv[1] == 'createlist':
@@ -356,6 +357,16 @@ if arguments == 1:
        print(data2)
        # ------- LIST OF USERS END -----------

+    if sys.argv[1] == 'user':
+        # ------- LIST OF ALL USERS START -----------
+        headers = {'Accept': 'application/json', 'Authorization': 'Bearer {}'.format(apikey)}
+        print(user)
+        print("=== USER ===\n")
+        body = requests.get(user, headers=headers)
+        data2 = body.text.replace('}',"}\n")
+        print(data2)
+        # ------- LIST OF ALL USERS END -----------
+
    if sys.argv[1] == 'boards':

        # ------- LIST OF PUBLIC BOARDS START -----------
@@ -0,0 +1,8 @@
+# v1.0 2022-03-22 Perl Asana export to WeKan ® release
+
+This release adds the following new features:
+
+- [Added Perl scripts for Asana export to WeKan ®](https://github.com/wekan/wekan/commit/376bcbb373d16317060adc2b1154cc20496775cc).
+  Thanks to GeekRuthie.
+
+Thanks to above GitHub users for their contributions and translators for their translations.
@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2022 WeKan ® Team and GeekRuthie
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
@@ -0,0 +1,178 @@
+#!/usr/local/perl-cbt/bin/perl
+use Modern::Perl;
+use Carp;
+use Data::Dumper;
+use HTTP::Request;
+use JSON;
+use LWP::UserAgent;
+use MIME::Base64 qw/encode_base64/;
+
+my $BASE_URL      = 'https://app.asana.com/api/1.0';
+my $ASANA_API_KEY = 'ASANA_PERSONAL_TOKEN';
+my $ua            = LWP::UserAgent->new();
+
+open my $input_wekan, '<', 'template.json';
+my $wekan_json = readline($input_wekan);
+close $input_wekan;
+my $wekan_board = decode_json($wekan_json);
+my %users;
+my %users_by_gid;
+# get user IDs from template board
+foreach my $user ( @{ $wekan_board->{users} } ) {
+   $users{ $user->{profile}->{fullname} } = $user->{_id};
+}
+# get list IDs from template (we ended up not using these)
+my %lists;
+foreach my $list ( @{ $wekan_board->{lists} } ) {
+   $lists{ $list->{title} } = $list->{_id};
+}
+
+my @headers;
+push @headers, ( 'Accept',        'application/json' );
+push @headers, ( 'Authorization', "Bearer $ASANA_API_KEY" );
+my $projects_req = HTTP::Request->new( "GET", "$BASE_URL/projects", \@headers, );
+my $projects_res = $ua->request($projects_req);
+my $projects     = decode_json( $projects_res->content )->{data};
+foreach my $project (@$projects) {
+   say "Project: ".$project->{name};
+   my $tasks_url =
+         '/tasks?project='
+       . $project->{gid}
+       . '&opt_fields=completed,name,notes,assignee,created_by,memberships.project.name, memberships.section.name,due_on,created_at,custom_fields';
+   my $tasks_req = HTTP::Request->new( 'GET', "$BASE_URL$tasks_url", \@headers );
+   my $tasks_res = $ua->request($tasks_req);
+   my @output_tasks;
+   my $tasks = decode_json( $tasks_res->content )->{data};
+   foreach my $task (@$tasks) {
+      next if $task->{completed};
+      say '   - '.$task->{name};
+      my $git_branch;
+      my $prio;
+      foreach my $custom ( @{ $task->{custom_fields} } ) {
+         if ( $custom->{name} eq 'git branch' ) {
+            $git_branch = $custom->{text_value};
+            next;
+         }
+         # We ended up not importing these.
+         if ( $custom->{name} eq 'Priority' && defined $custom->{display_value} ) {
+            $prio =
+                  $custom->{display_value} eq 'High' ? 'fwccC9'   
+                : $custom->{display_value} eq 'Med'  ? 'yPnaFa'
+                : $custom->{display_value} eq 'Low'  ? 'W4vMvm'
+                :                                      'ML5drH';
+            next;
+         }
+      }
+      if ( !defined $users_by_gid{ $task->{created_by}->{gid} } ) {
+         my $user_req =
+             HTTP::Request->new( 'GET', "$BASE_URL/users/" . $task->{created_by}->{gid},
+            \@headers );
+         my $user_res = $ua->request($user_req);
+         my $user     = decode_json( $user_res->content )->{data};
+         if ( defined $users{ $user->{name} } ) {
+            $users_by_gid{ $task->{created_by}->{gid} } = $users{ $user->{name} };
+         }
+      }
+      my $creator = $users_by_gid{ $task->{created_by}->{gid} } // undef;
+      if ( defined $task->{assignee} && !defined $users_by_gid{ $task->{assignee}->{gid} } ) {
+         my $user_req =
+             HTTP::Request->new( 'GET', "$BASE_URL/users/" . $task->{assignee}->{gid},
+            \@headers );
+         my $user_res = $ua->request($user_req);
+         my $user     = decode_json( $user_res->content )->{data};
+         if ( defined $users{ $user->{name} } ) {
+            $users_by_gid{ $task->{assignee}->{gid} } = $users{ $user->{name} };
+         }
+      }
+      my $assignee = defined $task->{assignee} ? $users_by_gid{ $task->{assignee}->{gid} } : undef;
+      my $list;
+      foreach my $membership ( @{ $task->{memberships} } ) {
+         next if $membership->{project}->{name} ne $project->{name};
+         $list = $membership->{section}->{name};
+      }
+
+      # I was trying to create JSON that I could use on the import screen in Wekan,
+      # but for bigger boards, it was just *too* hefty, so I took that JSON and used 
+      # APIs to import.
+      my %output_task = (
+         swimlaneId   => 'As4SNerx4Y4mMnJ8n',   # 'Bugs'  
+         sort         => 0,
+         type         => 'cardType-card',
+         archived     => JSON::false,
+         title        => $task->{name},
+         description  => $task->{notes},
+         createdAt    => $task->{created_at},
+         dueAt        => defined $task->{due_on} ? $task->{due_on} . 'T22:00:00.000Z' : undef,
+         customFields => [
+            {
+               _id   => 'rL8BpFHp5xxSFbDdr',
+               value => $git_branch,
+            },
+         ],
+         labelIds  => [$prio],
+         listId    => $list,
+         userId    => $creator,
+         assignees => [$assignee],
+      );
+      my @final_comments;
+      my $comments_req =
+          HTTP::Request->new( 'GET', "$BASE_URL/tasks/" . $task->{gid} . '/stories',
+         \@headers );
+      my $comments_res = $ua->request($comments_req);
+      my $comments     = decode_json( $comments_res->content )->{data};
+      foreach my $comment (@$comments) {
+         next if $comment->{type} ne 'comment';
+         if ( !defined $users_by_gid{ $comment->{created_by}->{gid} } ) {
+            my $user_req =
+                HTTP::Request->new( 'GET', "$BASE_URL/users/" . $comment->{created_by}->{gid},
+               \@headers );
+            my $user_res = $ua->request($user_req);
+            my $user     = decode_json( $user_res->content )->{data};
+            if ( defined $users{ $user->{name} } ) {
+               $users_by_gid{ $comment->{created_bye}->{gid} } = $users{ $user->{name} };
+            }
+         }
+         my $commentor    = $users_by_gid{ $comment->{created_by}->{gid} };
+         my %this_comment = (
+            text      => $comment->{text},
+            createdAt => $comment->{created_at},
+            userId    => $commentor,
+         );
+         push @final_comments, \%this_comment;
+      }
+      $output_task{comments} = \@final_comments;
+
+
+      my @final_attachments;
+      my $attachments_req =
+          HTTP::Request->new( 'GET', "$BASE_URL/tasks/" . $task->{gid} . '/attachments',
+         \@headers );
+      my $attachments_res = $ua->request($attachments_req);
+      my $attachments     = decode_json( $attachments_res->content )->{data};
+      foreach my $attachment (@$attachments) {
+         my $att_req =
+             HTTP::Request->new( 'GET', "$BASE_URL/attachments/" . $attachment->{gid},
+            \@headers );
+         my $att_res = $ua->request($att_req);
+         my $att     = decode_json( $att_res->content )->{data};
+         my $file_req=HTTP::Request->new('GET',$att->{download_url});
+         my $file_res=$ua->request($file_req);
+         my $file=encode_base64($file_res->content);
+
+           my %this_attachment = (
+              file => $file,
+              name => $att->{name},
+              createdAt => $att->{created_at},
+           );
+           push @final_attachments, \%this_attachment;
+
+      }
+      $output_task{attachments} = \@final_attachments;
+      push @output_tasks, \%output_task;
+   }
+   my $file_name = $project->{name};
+   $file_name =~ s/\//_/g;
+   open my $output_file, '>',$file_name.'_exported.json';
+   print $output_file encode_json(\@output_tasks);
+   close $output_file;
+}
@@ -0,0 +1,122 @@
+#!/usr/local/perl-cbt/bin/perl
+use Modern::Perl;
+use Carp;
+use Data::Dumper;
+use HTTP::Request;
+use JSON;
+use LWP::UserAgent;
+use MIME::Base64 qw/decode_base64/;
+use Try::Tiny;
+
+my $BASE_URL = 'https://taskboard.example.com/api';
+my $TOKEN    = 'MY_TOKEN';
+my $me       = 'MY_USER_ID';
+my $ua       = LWP::UserAgent->new();
+
+my @headers;
+push @headers, ( 'Accept',        'application/json' );
+push @headers, ( 'Authorization', "Bearer $TOKEN" );
+
+my @form_headers;
+push @form_headers, ( 'Content-Type',  'application/json' );
+push @form_headers, ( 'Accept',        'application/json' );
+push @form_headers, ( 'Authorization', "Bearer $TOKEN" );
+
+# Prior to running this, I built all the boards, with labels and lists and swimlanes.
+# Grabbed the IDs for the boards for each project, and put them here to match up with
+# filenames from the Asana export script.
+
+my %board_to_use = (
+   Project_1        => 'F5ZiCXnf4d7qNBRjp',
+   Project_2        => 'Shw3tyfC2JWCutBLj',
+);
+
+opendir my $files_dir, '.'
+    or croak "Cannot open input directory: $!";
+my @files = readdir $files_dir;
+closedir $files_dir;
+
+foreach my $tasks_file (@files) {
+   next if $tasks_file !~ /_exported.json/;
+   my $project = $tasks_file;
+   $project =~ s/_exported.json//;
+   say "Project - $project";
+   my $board;
+   if ( $board_to_use{$project} ) {
+      $board = $board_to_use{$project};
+   }
+   say '   No board!' if !$board;
+   next               if !$board;
+   my $labels_req = HTTP::Request->new( 'GET', "$BASE_URL/boards/$board", \@headers );
+   my $labels_res = $ua->request($labels_req);
+   my $board_data = decode_json( $labels_res->content);
+   my $labels = $board_data->{labels};
+   my $label_to_use;
+   # We're merging several Asana boards onto one Wekan board, with labels per project.
+   foreach my $label (@$labels) {
+       $label_to_use = $label->{_id} if $label->{name} eq $project;
+   }
+
+   my $lanes_req = HTTP::Request->new( 'GET', "$BASE_URL/boards/$board/swimlanes", \@headers );
+   my $lanes_res = $ua->request($lanes_req);
+   my $lanes     = decode_json( $lanes_res->content );
+   my $lane_to_use;
+   foreach my $lane (@$lanes) {
+      # Our Asana didn't use swimlanes; all of our Wekan boards have a "Bugs" lane, so use that.
+      $lane_to_use = $lane->{_id} if $lane->{title} eq 'Bugs';
+   }
+
+   my $lists_req = HTTP::Request->new( 'GET', "$BASE_URL/boards/$board/lists", \@headers );
+   my $lists_res = $ua->request($lists_req);
+   my $lists     = decode_json( $lists_res->content );
+   my %list_to_use;
+   foreach my $list (@$lists) {
+      $list_to_use{ $list->{title} } = $list->{_id};
+   }
+
+   open my $task_export_file, '<', $tasks_file;
+   my $tasks_json = readline($task_export_file);
+   close $task_export_file;
+   my $tasks = decode_json($tasks_json);
+   foreach my $task (@$tasks) {
+      say '   - ' . $task->{title};
+      my %body_info = (
+         swimlaneId  => $lane_to_use,
+         authorId    => $task->{userId},
+         assignees   => $task->{assignees},
+         title       => $task->{title},
+         description => $task->{description},
+      );
+      my $body     = encode_json( \%body_info );
+      my $list     = $list_to_use{ $task->{listId} } // $list_to_use{'Backlog'};
+      my $task_req = HTTP::Request->new( 'POST', "$BASE_URL/boards/$board/lists/$list/cards",
+         \@form_headers, $body );
+      my $task_res = $ua->request($task_req);
+      my $res;
+      try {
+       $res      = decode_json( $task_res->content );
+      } catch {
+         # Did these manually afterward.
+          say "--->UNABLE TO LOAD TASK";
+          next;
+      };
+      my $card     = $res->{_id};
+
+      if ($label_to_use) {
+          my $card_edit_body = encode_json( { labelIds => [ $label_to_use ]});
+          my $card_edit_req = HTTP::Request->new( 'PUT', "$BASE_URL/boards/$board/lists/$list/cards/$card",
+         \@form_headers, $card_edit_body );
+         my $card_edit_res = $ua->request($card_edit_req);
+      }
+
+      foreach my $comment ( @{ $task->{comments} } ) {
+         my $comment_body =
+             encode_json( { authorId => $comment->{userId}, comment => $comment->{text} } );
+         my $comment_req =
+             HTTP::Request->new( 'POST', "$BASE_URL/boards/$board/cards/$card/comments",
+            \@form_headers, $comment_body );
+         my $comment_res = $ua->request($comment_req);
+      }
+   }
+}
+
@@ -0,0 +1,101 @@
+.activity-title {
+  margin: 0 0.5em 0.8em;
+  display: flex;
+  justify-content: space-between;
+}
+.reactions-popup .add-comment-reaction {
+  display: inline-block;
+  cursor: pointer;
+  border-radius: 5px;
+  font-size: 22px;
+  text-align: center;
+  line-height: 30px;
+  width: 40px;
+}
+.reactions-popup .add-comment-reaction:hover {
+  background-color: #b0c4de;
+}
+.activities {
+  clear: both;
+}
+.activities .activity {
+  margin: 0.5px 0;
+  padding: 6px 0;
+  display: flex;
+}
+.activities .activity .member {
+  width: 32px;
+  height: 32px;
+}
+.activities .activity .activity-member {
+  font-weight: 700;
+}
+.activities .activity .activity-desc {
+  word-wrap: break-word;
+  overflow: hidden;
+  flex: 1;
+  align-self: center;
+  margin: 0;
+  margin-left: 3px;
+  overflow: hidden;
+  word-break: break-word;
+}
+.activities .activity .activity-desc .activity-comment {
+  display: block;
+  border-radius: 3px;
+  background: #fff;
+  text-decoration: none;
+  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
+  margin-top: 5px;
+  padding: 5px;
+}
+.activities .activity .activity-desc .reactions {
+  display: flex;
+  margin-top: 5px;
+  gap: 5px;
+}
+.activities .activity .activity-desc .reactions .open-comment-reaction-popup {
+  display: flex;
+  align-items: center;
+  text-decoration: none;
+  height: 24px;
+}
+.activities .activity .activity-desc .reactions .open-comment-reaction-popup i.fa.fa-smile-o {
+  font-size: 17px;
+  font-weight: 500;
+  margin-left: 2px;
+}
+.activities .activity .activity-desc .reactions .open-comment-reaction-popup i.fa.fa-plus {
+  font-size: 8px;
+  margin-top: -7px;
+  margin-left: 1px;
+}
+.activities .activity .activity-desc .reactions .reaction {
+  cursor: pointer;
+  border: 1px solid #808080;
+  border-radius: 15px;
+  display: flex;
+  padding: 2px 5px;
+}
+.activities .activity .activity-desc .reactions .reaction.selected {
+  background-color: #b0c4de;
+}
+.activities .activity .activity-desc .reactions .reaction:hover {
+  background-color: #b0c4de;
+}
+.activities .activity .activity-desc .reactions .reaction .reaction-count {
+  font-size: 12px;
+}
+.activities .activity .activity-desc .activity-checklist {
+  display: block;
+  border-radius: 3px;
+  background: #fff;
+  text-decoration: none;
+  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
+  margin-top: 5px;
+  padding: 5px;
+}
+.activities .activity .activity-desc .activity-meta {
+  font-size: 0.8em;
+  color: #999;
+}
@@ -42,7 +42,7 @@ template(name="addReactionPopup")
      span.add-comment-reaction(data-codepoint="#{codepoint}") !{codepoint}

 template(name="activity")
-  .activity
+  .activity(data-id=activity._id)
    +userAvatar(userId=activity.user._id)
    p.activity-desc
      span.activity-member
@@ -59,18 +59,17 @@ template(name="activity")
            img.attachment-image-preview(src=activity.attachment.url)

      //- board activity ------------------------------------------------------
-      if($eq mode 'board')
-        if($eq activity.activityType 'createBoard')
-          | {{{_ 'activity-created' boardLabelLink}}}.
+      if($eq activity.activityType 'createBoard')
+        | {{{_ 'activity-created' boardLabelLink}}}.

-        if($eq activity.activityType 'importBoard')
-          | {{{_ 'activity-imported-board' boardLabelLink sourceLink}}}.
+      if($eq activity.activityType 'importBoard')
+        | {{{_ 'activity-imported-board' boardLabelLink sourceLink}}}.

-        if($eq activity.activityType 'addBoardMember')
-          | {{{_ 'activity-added' memberLink boardLabelLink}}}.
+      if($eq activity.activityType 'addBoardMember')
+        | {{{_ 'activity-added' memberLink boardLabelLink}}}.

-        if($eq activity.activityType 'removeBoardMember')
-          | {{{_ 'activity-excluded' memberLink boardLabelLink}}}.
+      if($eq activity.activityType 'removeBoardMember')
+        | {{{_ 'activity-excluded' memberLink boardLabelLink}}}.

      //- card activity -------------------------------------------------------
      if($eq activity.activityType 'createCard')
@@ -153,10 +152,10 @@ template(name="activity")
                +editOrDeleteComment

        if($eq activity.activityType 'deleteComment')
-          | {{{_ 'activity-deleteComment' currentData.commentId}}}.
+          | {{{_ 'activity-deleteComment' activity.commentId}}}.

        if($eq activity.activityType 'editComment')
-          | {{{_ 'activity-editComment' currentData.commentId}}}.
+          | {{{_ 'activity-editComment' activity.commentId}}}.
      else
        //- if we are not in card mode we only display a summary of the comment
        if($eq activity.activityType 'addComment')
@@ -166,42 +165,27 @@ template(name="activity")
              = activity.comment.text

      //- date activity ------------------------------------------------
-      if($eq mode 'card')
-        if($eq activity.activityType 'a-receivedAt')
-          | {{{_ 'activity-receivedDate' (sanitize receivedDate) cardLink}}}.
+      if($eq activity.activityType 'a-receivedAt')
+        | {{{_ 'activity-receivedDate' (sanitize receivedDate) cardLink}}}.

-        if($eq activity.activityType 'a-startAt')
-          | {{{_ 'activity-startDate' (sanitize startDate) cardLink}}}.
+      if($eq activity.activityType 'a-startAt')
+        | {{{_ 'activity-startDate' (sanitize startDate) cardLink}}}.

-        if($eq activity.activityType 'a-dueAt')
-          | {{{_ 'activity-dueDate' (sanitize dueDate) cardLink}}}.
+      if($eq activity.activityType 'a-dueAt')
+        | {{{_ 'activity-dueDate' (sanitize dueDate) cardLink}}}.

-        if($eq activity.activityType 'a-endAt')
-          | {{{_ 'activity-endDate' (sanitize endDate) cardLink}}}.
-
-      if($eq mode 'board')
-        if($eq activity.activityType 'a-receivedAt')
-          | {{{_ 'activity-receivedDate' (sanitize receivedDate) cardLink}}}.
-
-        if($eq activity.activityType 'a-startAt')
-          | {{{_ 'activity-startDate' (sanitize startDate) cardLink}}}.
-
-        if($eq activity.activityType 'a-dueAt')
-          | {{{_ 'activity-dueDate' (sanitize dueDate) cardLink}}}.
-
-        if($eq activity.activityType 'a-endAt')
-          | {{{_ 'activity-endDate' (sanitize endDate) cardLink}}}.
+      if($eq activity.activityType 'a-endAt')
+        | {{{_ 'activity-endDate' (sanitize endDate) cardLink}}}.

      //- customField activity ------------------------------------------------
-      if($eq mode 'board')
-        if($eq activity.activityType 'createCustomField')
-          | {{_ 'activity-customfield-created' customField}}.
+      if($eq activity.activityType 'createCustomField')
+        | {{_ 'activity-customfield-created' customField}}.

-        if($eq activity.activityType 'setCustomField')
-          | {{{_ 'activity-set-customfield' (sanitize lastCustomField) (sanitize lastCustomFieldValue) cardLink}}}.
+      if($eq activity.activityType 'setCustomField')
+        | {{{_ 'activity-set-customfield' (sanitize lastCustomField) (sanitize lastCustomFieldValue) cardLink}}}.

-        if($eq activity.activityType 'unsetCustomField')
-          | {{{_ 'activity-unset-customfield' (sanitize lastCustomField) cardLink}}}.
+      if($eq activity.activityType 'unsetCustomField')
+        | {{{_ 'activity-unset-customfield' (sanitize lastCustomField) cardLink}}}.

      //- label activity ------------------------------------------------------
      if($eq activity.activityType 'addedLabel')
@@ -238,12 +222,11 @@ template(name="activity")
          | {{{_ 'activity-removed' memberLink cardLink}}}.

      //- swimlane activity --------------------------------------------------
-      if($neq mode 'card')
-        if($eq activity.activityType 'createSwimlane')
-          | {{_ 'activity-added' (sanitize activity.swimlane.title) boardLabelLink}}.
+      if($eq activity.activityType 'createSwimlane')
+        | {{{_ 'activity-added' (sanitize activity.swimlane.title) boardLabelLink}}}.

-        if($eq activity.activityType 'archivedSwimlane')
-          | {{_ 'activity-archived' (sanitize activity.swimlane.title)}}.
+      if($eq activity.activityType 'archivedSwimlane')
+        | {{{_ 'activity-archived' (sanitize activity.swimlane.title)}}}.


      //- I don't understand this part ----------------------------------------
@@ -1,4 +1,5 @@
 import DOMPurify from 'dompurify';
+import { TAPi18n } from '/imports/i18n';

 const activitiesPerPage = 500;

@@ -70,22 +71,51 @@ BlazeComponent.extendComponent({

  boardLabelLink() {
    const data = this.currentData();
+    const currentBoardId = Session.get('currentBoard');
    if (data.mode !== 'board') {
-      return createBoardLink(data.activity.board(), data.activity.listName);
+      // data.mode: card, linkedcard, linkedboard
+      return createBoardLink(data.activity.board(), data.activity.listName ? data.activity.listName : null);
+    }
+    else if (currentBoardId != data.activity.boardId) {
+      // data.mode: board
+      // current activitie is linked
+      return createBoardLink(data.activity.board(), data.activity.listName ? data.activity.listName : null);
    }
    return TAPi18n.__('this-board');
  },

  cardLabelLink() {
    const data = this.currentData();
-    if (data.mode !== 'card') {
-      return createCardLink(data.activity.card());
+    const currentBoardId = Session.get('currentBoard');
+    if (data.mode == 'card') {
+      // data.mode: card
+      return TAPi18n.__('this-card');
    }
-    return TAPi18n.__('this-card');
+    else if (data.mode !== 'board') {
+      // data.mode: linkedcard, linkedboard
+      return createCardLink(data.activity.card(), null);
+    }
+    else if (currentBoardId != data.activity.boardId) {
+      // data.mode: board
+      // current activitie is linked
+      return createCardLink(data.activity.card(), data.activity.board().title);
+    }
+    return createCardLink(this.currentData().activity.card(), null);
  },

  cardLink() {
-    return createCardLink(this.currentData().activity.card());
+    const data = this.currentData();
+    const currentBoardId = Session.get('currentBoard');
+    if (data.mode !== 'board') {
+      // data.mode: card, linkedcard, linkedboard
+      return createCardLink(data.activity.card(), null);
+    }
+    else if (currentBoardId != data.activity.boardId) {
+      // data.mode: board
+      // current activitie is linked
+      return createCardLink(data.activity.card(), data.activity.board().title);
+    }
+    return createCardLink(this.currentData().activity.card(), null);
  },

  receivedDate() {
@@ -196,14 +226,14 @@ BlazeComponent.extendComponent({
    // trying to display url before file is stored generates js errors
    return (
      (attachment &&
-        attachment.url({ download: true }) &&
+        attachment.path &&
        Blaze.toHTML(
          HTML.A(
            {
-              href: attachment.url({ download: true }),
+              href: `${attachment.link()}?download=true`,
              target: '_blank',
            },
-            DOMPurify.sanitize(attachment.name()),
+            DOMPurify.sanitize(attachment.name),
          ),
        )) ||
      DOMPurify.sanitize(this.currentData().activity.attachmentName)
@@ -304,8 +334,10 @@ Template.commentReactions.helpers({
  }
 })

-function createCardLink(card) {
+function createCardLink(card, board) {
  if (!card) return '';
+  let text = card.title;
+  if (board) text = `${board} > ` + text;
  return (
    card &&
    Blaze.toHTML(
@@ -314,7 +346,7 @@ function createCardLink(card) {
          href: card.originRelativeUrl(),
          class: 'action-card',
        },
-        DOMPurify.sanitize(card.title, { ALLOW_UNKNOWN_PROTOCOLS: true }),
+        DOMPurify.sanitize(text, { ALLOW_UNKNOWN_PROTOCOLS: true }),
      ),
    )
  );
@@ -1,105 +0,0 @@
-@import 'nib'
-
-.activity-title
-  margin: 0 0.5em 0.8em
-  display: flex
-  justify-content:space-between
-
-.reactions-popup
-  .add-comment-reaction
-    display: inline-block
-    cursor: pointer
-    border-radius: 5px
-    font-size: 22px
-    text-align: center
-    line-height: 30px
-    width: 40px
-
-    &:hover {
-      background-color: #b0c4de
-    }
-
-.activities
-  clear: both
-
-  .activity
-    margin: 0.5px 0
-    padding: 6px 0;
-    display: flex
-
-    .member
-      width: 32px
-      height: @width
-
-    .activity-member
-      font-weight: 700
-
-    .activity-desc
-      word-wrap: break-word
-      overflow: hidden
-      flex: 1
-      align-self: center
-      margin: 0
-      margin-left: 3px
-      overflow: hidden;
-      word-break: break-word;
-
-      .activity-comment
-        display: block
-        border-radius: 3px
-        background: white
-        text-decoration: none
-        box-shadow: 0 1px 2px rgba(0,0,0,.2)
-        margin-top: 5px
-        padding: 5px
-
-      .reactions
-        display: flex
-        margin-top: 5px
-        gap: 5px
-
-        .open-comment-reaction-popup
-          display: flex
-          align-items: center
-          text-decoration: none
-          height: 24px;
-
-          i.fa.fa-smile-o
-            font-size: 17px
-            font-weight: 500
-            margin-left: 2px
-
-          i.fa.fa-plus
-            font-size: 8px;
-            margin-top: -7px;
-            margin-left: 1px;
-
-        .reaction
-          cursor: pointer
-          border: 1px solid grey
-          border-radius: 15px
-          display: flex
-          padding: 2px 5px
-
-          &.selected {
-            background-color: #b0c4de
-          }
-
-          &:hover {
-            background-color: #b0c4de
-          }
-
-          .reaction-count
-            font-size: 12px
-
-      .activity-checklist
-        display: block
-        border-radius: 3px
-        background: white
-        text-decoration: none
-        box-shadow: 0 1px 2px rgba(0,0,0,.2)
-        margin-top: 5px
-        padding: 5px
-      .activity-meta
-        font-size: 0.8em
-        color: darken(white, 40%)
@@ -0,0 +1,65 @@
+.new-comment {
+  position: relative;
+  margin: 0 0 20px 38px;
+}
+.new-comment .member {
+  opacity: 0.7;
+  position: absolute;
+  top: 1px;
+  left: -38px;
+}
+.new-comment.is-open .member {
+  opacity: 1;
+}
+.new-comment.is-open .helper {
+  display: inline-block;
+}
+.new-comment.is-open textarea {
+  min-height: 100px;
+  color: #4d4d4d;
+  cursor: auto;
+  overflow: hidden;
+  word-wrap: break-word;
+}
+.new-comment .too-long {
+  margin-top: 8px;
+}
+.new-comment textarea {
+  background-color: #fff;
+  border: 0;
+  box-shadow: 0 1px 2px rgba(0,0,0,0.23);
+  height: 36px;
+  margin: 4px 4px 6px 0;
+  padding: 9px 11px;
+  width: 100%;
+}
+.new-comment textarea:hover,
+.new-comment textarea:is-open {
+  background-color: #fff;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.33);
+  border: 0;
+  cursor: pointer;
+}
+.new-comment textarea:is-open {
+  cursor: auto;
+}
+.comment-item {
+  background-color: #fff;
+  border: 0;
+  box-shadow: 0 1px 2px rgba(0,0,0,0.23);
+  color: #8c8c8c;
+  height: 36px;
+  margin: 4px 4px 6px 0;
+  width: 92%;
+}
+.comment-item:hover {
+  background: #e0e0e0;
+}
+.comment-item.add-comment {
+  display: flex;
+  margin: 5px;
+}
+.comment-item.add-comment a {
+  display: block;
+  margin: auto;
+}
@@ -26,6 +26,8 @@ BlazeComponent.extendComponent({
          if (card.isLinkedCard()) {
            boardId = Cards.findOne(card.linkedId).boardId;
            cardId = card.linkedId;
+          } else if (card.isLinkedBoard()) {
+            boardId = card.linkedId;
          }
          if (text) {
            CardComments.insert({
@@ -1,68 +0,0 @@
-@import 'nib'
-
-.new-comment
-  position: relative
-  margin: 0 0 20px 38px
-
-  .member
-    opacity: .7
-    position: absolute
-    top: 1px
-    left: -38px
-
-  &.is-open
-    .member
-      opacity: 1
-
-    .helper
-      display: inline-block
-
-    textarea
-      min-height: 100px
-      color: #4d4d4d
-      cursor: auto
-      overflow: hidden
-      word-wrap: break-word
-
-  .too-long
-    margin-top: 8px
-
-  textarea
-    background-color: #fff
-    border: 0
-    box-shadow: 0 1px 2px rgba(0, 0, 0, .23)
-    color: #8c8c8c
-    height: 36px
-    margin: 4px 4px 6px 0
-    padding: 9px 11px
-    width: 100%
-
-    &:hover,
-    &:is-open
-      background-color: #fff
-      box-shadow: 0 1px 3px rgba(0, 0, 0, .33)
-      border: 0
-      cursor: pointer
-
-    &:is-open
-      cursor: auto
-
-.comment-item
-  background-color: #fff
-  border: 0
-  box-shadow: 0 1px 2px rgba(0, 0, 0, .23)
-  color: #8c8c8c
-  height: 36px
-  margin: 4px 4px 6px 0
-  width: 92%
-
-  &:hover
-    background: darken(white, 12%)
-
-  &.add-comment
-    display: flex
-    margin: 5px
-
-    a
-      display: block
-      margin: auto
@@ -14,6 +14,7 @@ template(name="archivedBoards")
            i.fa.fa-undo
            | {{_ 'restore-board'}}
          = title
+        span {{ moment archivedAt 'LLL' }}
    else
      li.no-items-message {{_ 'no-archived-boards'}}

@@ -0,0 +1,169 @@
+.board-wrapper {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  overflow-x: hidden;
+  overflow-y: hidden;
+}
+.board-wrapper .board-canvas {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  transition: margin 0.1s;
+  overflow-y: auto;
+}
+.board-wrapper .board-canvas.is-sibling-sidebar-open {
+  margin-right: 248px;
+}
+.board-wrapper .board-canvas .board-overlay {
+  position: fixed;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  top: -100px;
+  right: -400px;
+  background: #000;
+  opacity: 0.33;
+  animation: fadeIn 0.2s;
+  z-index: 16;
+}
+.board-wrapper .board-canvas.is-dragging-active .open-minicard-composer,
+.board-wrapper .board-canvas.is-dragging-active .minicard-wrapper.is-checked {
+  display: none;
+}
+@media screen and (max-width: 800px) {
+  .board-wrapper .board-canvas .swimlane {
+    border-bottom: 1px solid #ccc;
+    display: flex;
+    flex-direction: column;
+    margin: 0;
+    padding: 0 0px 0px 0;
+    overflow-x: hidden;
+    overflow-y: auto;
+  }
+}
+.calendar-event-green {
+  background: #3cb500 !important;
+  border-color: #2a8000;
+  color: #fff !important;
+}
+.calendar-event-yellow {
+  background: #fad900 !important;
+  border-color: #c7ac00;
+  color: #000 !important;
+}
+.calendar-event-orange {
+  background: #ff9f19 !important;
+  border-color: #cc7c14;
+  color: #000 !important;
+}
+.calendar-event-red {
+  background: #eb4646 !important;
+  border-color: #b83737;
+  color: #fff !important;
+}
+.calendar-event-purple {
+  background: #a632db !important;
+  border-color: #7d26a6;
+  color: #fff !important;
+}
+.calendar-event-blue {
+  background: #0079bf !important;
+  border-color: #005a8a;
+  color: #fff !important;
+}
+.calendar-event-pink {
+  background: #ff78cb !important;
+  border-color: #cc62a3;
+  color: #000 !important;
+}
+.calendar-event-sky {
+  background: #00c2e0 !important;
+  border-color: #0094ab;
+  color: #fff !important;
+}
+.calendar-event-black {
+  background: #4d4d4d !important;
+  border-color: #1a1a1a;
+  color: #fff !important;
+}
+.calendar-event-lime {
+  background: #51e898 !important;
+  border-color: #3eb375;
+  color: #000 !important;
+}
+.calendar-event-silver {
+  background: #c0c0c0 !important;
+  border-color: #8c8c8c;
+  color: #000 !important;
+}
+.calendar-event-peachpuff {
+  background: #ffdab9 !important;
+  border-color: #ccaf95;
+  color: #000 !important;
+}
+.calendar-event-crimson {
+  background: #dc143c !important;
+  border-color: #a8112f;
+  color: #fff !important;
+}
+.calendar-event-plum {
+  background: #dda0dd !important;
+  border-color: #a87ba8;
+  color: #000 !important;
+}
+.calendar-event-darkgreen {
+  background: #006400 !important;
+  border-color: #003000;
+  color: #fff !important;
+}
+.calendar-event-slateblue {
+  background: #6a5acd !important;
+  border-color: #4f4399;
+  color: #fff !important;
+}
+.calendar-event-magenta {
+  background: #f0f !important;
+  border-color: #c0c;
+  color: #fff !important;
+}
+.calendar-event-gold {
+  background: #ffd700 !important;
+  border-color: #ca0;
+  color: #000 !important;
+}
+.calendar-event-navy {
+  background: #000080 !important;
+  border-color: #003;
+  color: #fff !important;
+}
+.calendar-event-gray {
+  background: #808080 !important;
+  border-color: #333;
+  color: #fff !important;
+}
+.calendar-event-saddlebrown {
+  background: #8b4513 !important;
+  border-color: #572b0c;
+  color: #fff !important;
+}
+.calendar-event-paleturquoise {
+  background: #afeeee !important;
+  border-color: #8ababa;
+  color: #000 !important;
+}
+.calendar-event-mistyrose {
+  background: #ffe4e1 !important;
+  border-color: #ccb8b6;
+  color: #000 !important;
+}
+.calendar-event-indigo {
+  background: #4b0082 !important;
+  border-color: #2b004d;
+  color: #fff !important;
+}
@@ -1,3 +1,5 @@
+import { TAPi18n } from '/imports/i18n';
+
 const subManager = new SubsManager();
 const { calculateIndex } = Utils;
 const swimlaneWhileSortingHeight = 150;
@@ -191,7 +193,7 @@ BlazeComponent.extendComponent({
    });

    this.autorun(() => {
-      if (Utils.isMiniScreenOrShowDesktopDragHandles()) {
+      if (Utils.isTouchScreenOrShowDesktopDragHandles()) {
        $swimlanesDom.sortable({
          handle: '.js-swimlane-header-handle',
        });
@@ -226,10 +228,10 @@ BlazeComponent.extendComponent({
    }
  },

-  notDisplayThisBoard(){
+  notDisplayThisBoard() {
    let allowPrivateVisibilityOnly = TableVisibilityModeSettings.findOne('tableVisibilityMode-allowPrivateOnly');
    let currentBoard = Boards.findOne(Session.get('currentBoard'));
-    if(allowPrivateVisibilityOnly !== undefined && allowPrivateVisibilityOnly.booleanValue && currentBoard.permission == 'public'){
+    if (allowPrivateVisibilityOnly !== undefined && allowPrivateVisibilityOnly.booleanValue && currentBoard.permission == 'public') {
      return true;
    }

@@ -267,9 +269,10 @@ BlazeComponent.extendComponent({

  openNewListForm() {
    if (this.isViewSwimlanes()) {
-      this.childComponents('swimlane')[0]
-        .childComponents('addListAndSwimlaneForm')[0]
-        .open();
+      // The form had been removed in 416b17062e57f215206e93a85b02ef9eb1ab4902
+      // this.childComponents('swimlane')[0]
+      //   .childComponents('addListAndSwimlaneForm')[0]
+      //   .open();
    } else if (this.isViewLists()) {
      this.childComponents('listsGroup')[0]
        .childComponents('addListForm')[0]
@@ -316,7 +319,7 @@ BlazeComponent.extendComponent({

 BlazeComponent.extendComponent({
  onRendered() {
-    this.autorun(function() {
+    this.autorun(function () {
      $('#calendar-view').fullCalendar('refetchEvents');
    });
  },
@@ -348,7 +351,7 @@ BlazeComponent.extendComponent({
      events(start, end, timezone, callback) {
        const currentBoard = Boards.findOne(Session.get('currentBoard'));
        const events = [];
-        const pushEvent = function(card, title, start, end, extraCls) {
+        const pushEvent = function (card, title, start, end, extraCls) {
          start = start || card.startAt;
          end = end || card.endAt;
          title = title || card.title;
@@ -372,12 +375,12 @@ BlazeComponent.extendComponent({
        };
        currentBoard
          .cardsInInterval(start.toDate(), end.toDate())
-          .forEach(function(card) {
+          .forEach(function (card) {
            pushEvent(card);
          });
        currentBoard
          .cardsDueInBetween(start.toDate(), end.toDate())
-          .forEach(function(card) {
+          .forEach(function (card) {
            pushEvent(
              card,
              `${card.title} ${TAPi18n.__('card-due')}`,
@@ -385,7 +388,7 @@ BlazeComponent.extendComponent({
              new Date(card.dueAt.getTime() + 36e5),
            );
          });
-        events.sort(function(first, second) {
+        events.sort(function (first, second) {
          return first.id > second.id ? 1 : -1;
        });
        callback(events);
@@ -408,8 +411,10 @@ BlazeComponent.extendComponent({
        if (card) {
          // TODO: add a flag for allDay events
          if (!event.allDay) {
-            card.setStart(event.start.toDate());
-            card.setEnd(event.end.toDate());
+            // https://github.com/wekan/wekan/issues/2917#issuecomment-1236753962
+            //card.setStart(event.start.toDate());
+            //card.setEnd(event.end.toDate());
+            card.setDue(event.start.toDate());
            isOk = true;
          }
        }
@@ -1,133 +0,0 @@
-@import 'nib'
-
-position()
-  if arguments[0] == cover || arguments[0] == fixed-cover
-    if arguments[0] == cover
-      position: absolute
-    else
-      position: fixed
-    left: 0
-    right: 0
-    top: 0
-    bottom: 0
-  else
-    position: arguments
-
-.board-wrapper
-  position: cover
-  overflow-x: hidden
-  overflow-y: hidden
-
-  .board-canvas
-    position: cover
-    transition: margin .1s
-    overflow-y: auto
-
-    &.is-sibling-sidebar-open
-      margin-right: 248px
-
-    .board-overlay
-      position: fixed-cover
-      top: -100px
-      right: -400px
-      background: black
-      opacity: 0.33
-      animation: fadeIn 0.2s
-      z-index: 16
-
-    &.is-dragging-active
-      .open-minicard-composer,
-      .minicard-wrapper.is-checked
-        display: none
-
-@media screen and (max-width: 800px)
-  .board-wrapper
-
-    .board-canvas
-
-      .swimlane
-        border-bottom: 1px solid #CCC
-        display: flex
-        flex-direction: column
-        margin: 0
-        padding: 0 0px 0px 0
-        overflow-x: hidden
-        overflow-y: auto
-
-calendar-event-color(background, borderColor, color...)
-  background: background !important
-  border-color: borderColor
-  if color
-    color: color !important //overwrite text for better visibility
-
-.calendar-event-green
-  calendar-event-color(#3cb500, #2a8000, #ffffff) //White text for better visibility
-
-.calendar-event-yellow
-  calendar-event-color(#fad900, #c7ac00, #000) //Black text for better visibility
-
-.calendar-event-orange
-  calendar-event-color(#ff9f19, #cc7c14, #000) //Black text for better visibility
-
-.calendar-event-red
-  calendar-event-color(#eb4646, #b83737, #ffffff) //White text for better visibility
-
-.calendar-event-purple
-  calendar-event-color(#a632db, #7d26a6, #ffffff) //White text for better visibility
-
-.calendar-event-blue
-  calendar-event-color(#0079bf, #005a8a, #ffffff) //White text for better visibility
-
-.calendar-event-pink
-  calendar-event-color(#ff78cb, #cc62a3, #000) //Black text for better visibility
-
-.calendar-event-sky
-  calendar-event-color(#00c2e0, #0094ab, #ffffff) //White text for better visibility
-
-.calendar-event-black
-  calendar-event-color(#4d4d4d, #1a1a1a, #ffffff) //White text for better visibility
-
-.calendar-event-lime
-  calendar-event-color(#51e898, #3eb375, #000) //Black text for better visibility
-
-.calendar-event-silver
-  calendar-event-color(#c0c0c0, #8c8c8c, #000) //Black text for better visibility
-
-.calendar-event-peachpuff
-  calendar-event-color(#ffdab9, #ccaf95, #000) //Black text for better visibility
-
-.calendar-event-crimson
-  calendar-event-color(#dc143c, #a8112f, #ffffff) //White text for better visibility
-
-.calendar-event-plum
-  calendar-event-color(#dda0dd, #a87ba8, #000) //Black text for better visibility
-
-.calendar-event-darkgreen
-  calendar-event-color(#006400, #003000, #ffffff) //White text for better visibility
-
-.calendar-event-slateblue
-  calendar-event-color(#6a5acd, #4f4399, #ffffff) //White text for better visibility
-
-.calendar-event-magenta
-  calendar-event-color(#ff00ff, #cc00cc, #ffffff) //White text for better visibility
-
-.calendar-event-gold
-  calendar-event-color(#ffd700, #ccaa00, #000) //Black text for better visibility
-
-.calendar-event-navy
-  calendar-event-color(#000080, #000033, #ffffff) //White text for better visibility
-
-.calendar-event-gray
-  calendar-event-color(#808080, #333333, #ffffff) //White text for better visibility
-
-.calendar-event-saddlebrown
-  calendar-event-color(#8b4513, #572b0c, #ffffff) //White text for better visibility
-
-.calendar-event-paleturquoise
-  calendar-event-color(#afeeee, #8ababa, #000) //Black text for better visibility
-
-.calendar-event-mistyrose
-  calendar-event-color(#ffe4e1, #ccb8b6, #000) //Black text for better visibility
-
-.calendar-event-indigo
-  calendar-event-color(#4b0082, #2b004d, #ffffff) //White text for better visibility
@@ -0,0 +1,23 @@
+.integration-form {
+  padding: 5px;
+  border-bottom: 1px solid #ccc;
+}
+.flex,
+.option {
+  display: -webkit-box;
+  display: -moz-box;
+  display: -webkit-flex;
+  display: -moz-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+.option {
+  -webkit-border-radius: 3px;
+  border-radius: 3px;
+  background: #fff;
+  text-decoration: none;
+  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.2);
+  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
+  margin-top: 5px;
+  padding: 5px;
+}
@@ -235,9 +235,9 @@ template(name="createBoard")
          = " "
          | {{{_ 'board-private-info'}}}
        a.js-change-visibility {{_ 'change'}}.
-    //a.flex.js-toggle-add-template-container
-    //  .materialCheckBox#add-template-container
-    //  span {{_ 'add-template-container'}}
+    a.flex.js-toggle-add-template-container
+      .materialCheckBox#add-template-container
+      span {{_ 'add-template-container'}}
    input.primary.wide(type="submit" value="{{_ 'create'}}")
    span.quiet
      | {{_ 'or'}}
@@ -1,3 +1,5 @@
+import { TAPi18n } from '/imports/i18n';
+
 /*
 const DOWNCLS = 'fa-sort-down';
 const UPCLS = 'fa-sort-up';
@@ -32,6 +34,7 @@ Template.boardMenuPopup.events({
  'click .js-import-board': Popup.open('chooseBoardSource'),
  'click .js-subtask-settings': Popup.open('boardSubtaskSettings'),
  'click .js-card-settings': Popup.open('boardCardSettings'),
+  'click .js-minicard-settings': Popup.open('boardMinicardSettings'),
 });

 Template.boardChangeTitlePopup.events({
@@ -1,22 +0,0 @@
-.integration-form
-  padding: 5px
-  border-bottom: 1px solid #ccc
-
-.flex
-  display: -webkit-box
-  display: -moz-box
-  display: -webkit-flex
-  display: -moz-flex
-  display: -ms-flexbox
-  display: flex
-
-.option
-  @extends .flex
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-  background: #fff;
-  text-decoration: none;
-  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.2);
-  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
-  margin-top: 5px;
-  padding: 5px;
@@ -0,0 +1,281 @@
+@import url("../../../css/reset.css") print, screen;
+
+.board-list {
+  margin: 0 8px;
+}
+.board-list li {
+  float: left;
+  width: 20%;
+  box-sizing: border-box;
+  position: relative;
+}
+.board-list li.placeholder:after {
+  content: '';
+  display: block;
+  background: #ccc;
+  border-radius: 3px;
+  height: 106px;
+  margin: 8px;
+}
+.board-list li.ui-sortable-helper {
+  cursor: grabbing;
+  transform: rotate(4deg);
+  display: block !important;
+}
+.board-list li.starred .fa-star,
+.board-list li.starred .fa-star-o {
+  opacity: 1;
+}
+.board-list .board-list-item {
+  overflow: hidden;
+  background-color: #999;
+  color: #f6f6f6;
+  min-height: 100px;
+  font-size: 16px;
+  line-height: 22px;
+  border-radius: 3px;
+  display: block;
+  font-weight: 700;
+  padding: 8px;
+  margin: 8px;
+  position: relative;
+  text-decoration: none;
+  word-wrap: break-word;
+}
+.board-list .board-list-item.template-container {
+  border: 4px solid #fff;
+}
+.board-list .board-list-item.tile {
+  background-size: auto;
+  background-repeat: repeat;
+}
+.board-list .board-list-item-sub-name {
+  color: rgba(255,255,255,0.5);
+  display: block;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 22px;
+}
+.board-list .board-list-item-desc {
+  color: #fff;
+  display: block;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 18px;
+}
+.board-list .js-add-board {
+  text-align: center;
+}
+.board-list .js-add-board .label {
+  font-weight: normal;
+  line-height: 56px;
+}
+.board-list .js-add-board :hover {
+  background-color: #939393;
+}
+.board-list .fa-star,
+.board-list .fa-star-o {
+  bottom: 0;
+  font-size: 14px;
+  height: 18px;
+  line-height: 18px;
+  opacity: 0;
+  padding: 9px 9px;
+  position: absolute;
+  right: 0;
+  top: 0;
+  transition-duration: 0.15s;
+  transition-property: color, font-size, background;
+}
+.board-list .fa-circle {
+  bottom: 0;
+  font-size: 10px;
+  height: 10px;
+  line-height: 10px;
+  padding: 9px 9px;
+  position: absolute;
+  right: 0;
+  transition-duration: 0.15s;
+  transition-property: color, font-size, background;
+}
+.board-list .has-overtime-card-active {
+  color: #eb4646 !important;
+}
+.board-list .no-overtime-card-active {
+  color: #3cb500 !important;
+}
+.board-list .is-star-active {
+  color: #fff;
+}
+.board-list .fa-clone {
+  position: absolute;
+  bottom: 0;
+  font-size: 14px;
+  height: 18px;
+  line-height: 18px;
+  opacity: 0;
+  right: 0;
+  padding: 9px 9px;
+  transition-duration: 0.15s;
+  transition-property: color, font-size, background;
+}
+.board-list .fa-archive {
+  position: absolute;
+  bottom: 0;
+  font-size: 14px;
+  height: 18px;
+  line-height: 18px;
+  opacity: 0;
+  left: 0;
+  padding: 9px 9px;
+  transition-duration: 0.15s;
+  transition-property: color, font-size, background;
+}
+.board-list li:hover a:hover .fa-star,
+.board-list li:hover a:hover .fa-clone,
+.board-list li:hover a:hover .fa-archive,
+.board-list li:hover a:hover .fa-star-o {
+  color: #fff;
+}
+.board-list li:hover a .fa-star,
+.board-list li:hover a .fa-clone,
+.board-list li:hover a .fa-archive,
+.board-list li:hover a .fa-star-o {
+  color: #fff;
+  opacity: 0.75;
+}
+.board-list li:hover a .fa-star:hover,
+.board-list li:hover a .fa-clone:hover,
+.board-list li:hover a .fa-archive:hover,
+.board-list li:hover a .fa-star-o:hover {
+  font-size: 18px;
+  opacity: 1;
+}
+.board-list li:hover a .fa-star.is-star-active,
+.board-list li:hover a .fa-clone.is-star-active,
+.board-list li:hover a .fa-archive.is-star-active,
+.board-list li:hover a .fa-star-o.is-star-active {
+  opacity: 1;
+}
+.board-backgrounds-list .board-background-select {
+  box-sizing: border-box;
+  display: block;
+  float: left;
+  width: 50%;
+  padding-top: 12px;
+  position: relative;
+  z-index: 1;
+}
+.board-backgrounds-list .board-background-select:nth-child(-n + 2) {
+  padding-top: 0;
+}
+.board-backgrounds-list .board-background-select:nth-child(2n) {
+  padding-left: 6px;
+}
+.board-backgrounds-list .board-background-select:nth-child(2n+1) {
+  padding-right: 6px;
+}
+.board-backgrounds-list .board-background-select .background-box {
+  color: #fff;
+  border-radius: 3px;
+  background-size: cover;
+  display: block;
+  height: 74px;
+  position: relative;
+  width: 100%;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.board-backgrounds-list .board-background-select .background-box i.fa-check {
+  font-size: 25px;
+  color: #fff;
+}
+@media screen and (max-width: 800px) {
+  .board-list {
+    height: 100%;
+    overflow: scroll;
+  }
+  .board-list li {
+    width: 50%;
+  }
+  .board-list .board-list-item {
+    overflow: hidden;
+    height: 8rem;
+  }
+  .board-list .board-list-item-sub-name {
+    position: relative;
+    top: -100px;
+    left: -100px;
+  }
+  .board-list .board-handle {
+    position: absolute;
+    padding: 7px;
+    top: 50%;
+    transform: translateY(-50%);
+    right: 10px;
+    font-size: 24px;
+  }
+}
+@media screen and (max-width: 360px) {
+  li {
+    width: 100%;
+  }
+  .board-handle {
+    position: absolute;
+    padding: 7px;
+    top: 50%;
+    transform: translateY(-50%);
+    right: 10px;
+    font-size: 24px;
+  }
+}
+.AllBoardTeamsOrgs {
+  list-style-type: none;
+  overflow: hidden;
+}
+.AllBoardTeams,
+.AllBoardOrgs,
+.AllBoardBtns {
+  float: left;
+}
+.js-AllBoardOrgs {
+  margin-left: 16px;
+}
+.AllBoardTeams {
+  margin-left: 16px;
+}
+.AllBoardButtonsContainer {
+  margin: 16px;
+}
+#filterBtn,
+#resetBtn {
+  display: inline;
+}
+.js-board {
+  display: block;
+}
+.minicard-members {
+  padding: 6px 0 6px 8px;
+  width: 100%;
+  margin-bottom: 2px;
+  margin-left: -4px;
+  display: inline-block;
+}
+.minicard-lists {
+  margin: 0 auto;
+  max-width: 95%;
+  height: 100%;
+}
+.flex {
+  display: flex;
+}
+.flex-wrap {
+  flex-wrap: wrap;
+}
+.flex-wrap .item {
+  margin: 2px;
+  padding-right: 6px;
+  text-align: center;
+}
@@ -13,7 +13,15 @@ template(name="boardList")
          select.js-AllBoardOrgs#jsAllBoardOrgs("multiple")
            option(value="-1") {{_ 'organizations'}} :
            each orgsDatas
-              option(value="{{orgId}}") {{_ orgDisplayName}}
+              option(value="{{orgId}}") {{orgDisplayName}}
+
+      //li.AllBoardTemplates
+      //  if userHasTemplates
+      //  select.js-AllBoardTemplates#jsAllBoardTemplates("multiple")
+      //    option(value="-1") {{_ 'templates'}} :
+      //    each templatesDatas
+      //      option(value="{{templateId}}") {{_ templateDisplayName}}
+
      li.AllBoardBtns
        div.AllBoardButtonsContainer
          if userHasOrgsOrTeams
@@ -54,7 +62,7 @@ template(name="boardList")
                    i.fa.js-has-spenttime-cards(
                      class="fa-circle{{#if hasOvertimeCards}} has-overtime-card-active{{else}} no-overtime-card-active{{/if}}"
                      title="{{#if hasOvertimeCards}}{{_ 'has-overtime-cards'}}{{else}}{{_ 'has-spenttime-cards'}}{{/if}}")
-                  if isMiniScreenOrShowDesktopDragHandles
+                  if isTouchScreenOrShowDesktopDragHandles
                    i.fa.board-handle(
                        class="fa-arrows"
                        title="{{_ 'Drag board'}}")
@@ -86,6 +94,18 @@ template(name="boardList")
                  span.board-list-item-name(title="{{_ 'board-drag-drop-reorder-or-click-open'}}")
                    +viewer
                      = title
+                  unless currentSetting.hideBoardMemberList
+                    if allowsBoardMemberList
+                      .minicard-members
+                        each member in boardMembers _id
+                          a.name
+                            +userAvatar(userId=member noRemove=true)
+                  unless currentSetting.hideCardCounterList
+                    if allowsCardCounterList
+                      .minicard-lists.flex.flex-wrap
+                        each list in boardLists _id
+                          .item
+                            | {{ list }}
                  i.fa.js-star-board(
                    class="fa-star{{#if isStarred}} is-star-active{{else}}-o{{/if}}"
                    title="{{_ 'star-board-title'}}")
@@ -96,7 +116,7 @@ template(name="boardList")
                    i.fa.js-has-spenttime-cards(
                      class="fa-circle{{#if hasOvertimeCards}} has-overtime-card-active{{else}} no-overtime-card-active{{/if}}"
                      title="{{#if hasOvertimeCards}}{{_ 'has-overtime-cards'}}{{else}}{{_ 'has-spenttime-cards'}}{{/if}}")
-                  if isMiniScreenOrShowDesktopDragHandles
+                  if isTouchScreenOrShowDesktopDragHandles
                    i.fa.board-handle(
                        class="fa-arrows"
                        title="{{_ 'Drag board'}}")
@@ -1,5 +1,18 @@
+import { TAPi18n } from '/imports/i18n';
+
 const subManager = new SubsManager();
-const { calculateIndex, enableClickOnTouch } = Utils;
+
+Template.boardList.helpers({
+  currentSetting() {
+    return Settings.findOne();
+  },
+  hideCardCounterList() {
+    return Utils.isMiniScreen() && Session.get('currentBoard');
+  },
+  hideBoardMemberList() {
+    return Utils.isMiniScreen() && Session.get('currentBoard');
+  },
+})

 Template.boardListHeaderBar.events({
  'click .js-open-archived-board'() {
@@ -9,7 +22,11 @@ Template.boardListHeaderBar.events({

 Template.boardListHeaderBar.helpers({
  title() {
+    //if (FlowRouter.getRouteName() === 'template-container') {
+    //  return 'template-container';
+    //} else {
    return FlowRouter.getRouteName() === 'home' ? 'my-boards' : 'public';
+    //}
  },
  templatesBoardId() {
    return Meteor.user() && Meteor.user().getTemplatesBoardId();
@@ -25,12 +42,11 @@ BlazeComponent.extendComponent({
    Meteor.subscribe('tableVisibilityModeSettings');
    let currUser = Meteor.user();
    let userLanguage;
-    if(currUser && currUser.profile){
+    if (currUser && currUser.profile) {
      userLanguage = currUser.profile.language
    }
    if (userLanguage) {
      TAPi18n.setLanguage(userLanguage);
-      T9n.setLanguage(userLanguage);
    }
  },

@@ -56,7 +72,7 @@ BlazeComponent.extendComponent({
        // of the previous and the following card -- if any.
        const prevBoardDom = ui.item.prev('.js-board').get(0);
        const nextBoardBom = ui.item.next('.js-board').get(0);
-        const sortIndex = calculateIndex(prevBoardDom, nextBoardBom, 1);
+        const sortIndex = Utils.calculateIndex(prevBoardDom, nextBoardBom, 1);

        const boardDomElement = ui.item.get(0);
        const board = Blaze.getData(boardDomElement);
@@ -73,51 +89,56 @@ BlazeComponent.extendComponent({
      },
    });

-    // ugly touch event hotfix
-    enableClickOnTouch(itemsSelector);
-
    // Disable drag-dropping if the current user is not a board member or is comment only
    this.autorun(() => {
-      if (Utils.isMiniScreenOrShowDesktopDragHandles()) {
+      if (Utils.isTouchScreenOrShowDesktopDragHandles()) {
        $boards.sortable({
          handle: '.board-handle',
        });
      }
    });
  },
-  userHasTeams(){
-    if(Meteor.user() != null && Meteor.user().teams && Meteor.user().teams.length > 0)
+  userHasTeams() {
+    if (Meteor.user() != null && Meteor.user().teams && Meteor.user().teams.length > 0)
      return true;
    else
      return false;
  },
  teamsDatas() {
-    if(Meteor.user().teams)
-      return Meteor.user().teams;
+    if (Meteor.user().teams)
+      return Meteor.user().teams.sort((a, b) => a.teamDisplayName.localeCompare(b.teamDisplayName));
    else
      return [];
  },
-  userHasOrgs(){
-    if(Meteor.user() != null && Meteor.user().orgs && Meteor.user().orgs.length > 0)
+  userHasOrgs() {
+    if (Meteor.user() != null && Meteor.user().orgs && Meteor.user().orgs.length > 0)
      return true;
    else
      return false;
  },
+  /*
+    userHasTemplates(){
+      if(Meteor.user() != null && Meteor.user().orgs && Meteor.user().orgs.length > 0)
+        return true;
+      else
+        return false;
+    },
+  */
  orgsDatas() {
-    if(Meteor.user().orgs)
-      return Meteor.user().orgs;
+    if (Meteor.user().orgs)
+      return Meteor.user().orgs.sort((a, b) => a.orgDisplayName.localeCompare(b.orgDisplayName));
    else
      return [];
  },
-  userHasOrgsOrTeams(){
+  userHasOrgsOrTeams() {
    let boolUserHasOrgs;
-    if(Meteor.user() != null && Meteor.user().orgs && Meteor.user().orgs.length > 0)
+    if (Meteor.user() != null && Meteor.user().orgs && Meteor.user().orgs.length > 0)
      boolUserHasOrgs = true;
    else
      boolUserHasOrgs = false;

    let boolUserHasTeams;
-    if(Meteor.user() != null && Meteor.user().teams && Meteor.user().teams.length > 0)
+    if (Meteor.user() != null && Meteor.user().teams && Meteor.user().teams.length > 0)
      boolUserHasTeams = true;
    else
      boolUserHasTeams = false;
@@ -126,23 +147,23 @@ BlazeComponent.extendComponent({
  },
  boards() {
    let query = {
-      //archived: false,
-      ////type: { $in: ['board','template-container'] },
-      //type: 'board',
+      // { type: 'board' },
+      // { type: { $in: ['board','template-container'] } },
      $and: [
        { archived: false },
-        { type: 'board' },
-        { $or:[] }
+        { type: { $in: ['board', 'template-container'] } },
+        { $or: [] },
+        { title: { $not: { $regex: /^\^.*\^$/ } } }
      ]
    };

    let allowPrivateVisibilityOnly = TableVisibilityModeSettings.findOne('tableVisibilityMode-allowPrivateOnly');

-    if (FlowRouter.getRouteName() === 'home'){
-      query.$and[2].$or.push({'members.userId': Meteor.userId()});
+    if (FlowRouter.getRouteName() === 'home') {
+      query.$and[2].$or.push({ 'members.userId': Meteor.userId() });

-      if(allowPrivateVisibilityOnly !== undefined && allowPrivateVisibilityOnly.booleanValue){
-        query.$and.push({'permission': 'private'});
+      if (allowPrivateVisibilityOnly !== undefined && allowPrivateVisibilityOnly.booleanValue) {
+        query.$and.push({ 'permission': 'private' });
      }
      const currUser = Users.findOne(Meteor.userId());

@@ -154,27 +175,27 @@ BlazeComponent.extendComponent({
      // });

      let orgIdsUserBelongs = currUser !== undefined && currUser.teams !== 'undefined' ? currUser.orgIdsUserBelongs() : '';
-      if(orgIdsUserBelongs && orgIdsUserBelongs != ''){
+      if (orgIdsUserBelongs && orgIdsUserBelongs != '') {
        let orgsIds = orgIdsUserBelongs.split(',');
        // for(let i = 0; i < orgsIds.length; i++){
        //   query.$and[2].$or.push({'orgs.orgId': orgsIds[i]});
        // }

        //query.$and[2].$or.push({'orgs': {$elemMatch : {orgId: orgsIds[0]}}});
-        query.$and[2].$or.push({'orgs.orgId': {$in : orgsIds}});
+        query.$and[2].$or.push({ 'orgs.orgId': { $in: orgsIds } });
      }

      let teamIdsUserBelongs = currUser !== undefined && currUser.teams !== 'undefined' ? currUser.teamIdsUserBelongs() : '';
-      if(teamIdsUserBelongs && teamIdsUserBelongs != ''){
+      if (teamIdsUserBelongs && teamIdsUserBelongs != '') {
        let teamsIds = teamIdsUserBelongs.split(',');
        // for(let i = 0; i < teamsIds.length; i++){
        //   query.$or[2].$or.push({'teams.teamId': teamsIds[i]});
        // }
        //query.$and[2].$or.push({'teams': { $elemMatch : {teamId: teamsIds[0]}}});
-        query.$and[2].$or.push({'teams.teamId': {$in : teamsIds}});
+        query.$and[2].$or.push({ 'teams.teamId': { $in: teamsIds } });
      }
    }
-    else if(allowPrivateVisibilityOnly !== undefined && !allowPrivateVisibilityOnly.booleanValue){
+    else if (allowPrivateVisibilityOnly !== undefined && !allowPrivateVisibilityOnly.booleanValue) {
      query = {
        archived: false,
        //type: { $in: ['board','template-container'] },
@@ -187,6 +208,26 @@ BlazeComponent.extendComponent({
      sort: { sort: 1 /* boards default sorting */ },
    });
  },
+  boardLists(boardId) {
+    let boardLists = [];
+    const lists = Lists.find({ 'boardId': boardId, 'archived': false },{sort: ['sort','asc']});
+    lists.forEach(list => {
+      let cardCount = Cards.find({ 'boardId': boardId, 'listId': list._id }).count()
+      boardLists.push(`${list.title}: ${cardCount}`);
+    });
+    return boardLists
+  },
+
+  boardMembers(boardId) {
+    let boardMembers = [];
+    const lists = Boards.findOne({ '_id': boardId })
+    let members = lists.members
+    members.forEach(member => {
+      boardMembers.push(member.userId);
+    });
+    return boardMembers
+  },
+
  isStarred() {
    const user = Meteor.user();
    return user && user.hasStarred(this.currentData()._id);
@@ -221,6 +262,7 @@ BlazeComponent.extendComponent({
          evt.preventDefault();
        },
        'click .js-clone-board'(evt) {
+          let title = getSlug(Boards.findOne(this.currentData()._id).title) || 'cloned-board';
          Meteor.call(
            'copyBoard',
            this.currentData()._id,
@@ -231,10 +273,14 @@ BlazeComponent.extendComponent({
            },
            (err, res) => {
              if (err) {
-                this.setError(err.error);
+                console.error(err);
              } else {
                Session.set('fromBoard', null);
-                Utils.goBoardId(res);
+                subManager.subscribe('board', res, false);
+                FlowRouter.go('board', {
+                  id: res,
+                  slug: title,
+                });
              }
            },
          );
@@ -258,10 +304,10 @@ BlazeComponent.extendComponent({
            }
          });
        },
-        'click #resetBtn'(event){
+        'click #resetBtn'(event) {
          let allBoards = document.getElementsByClassName("js-board");
          let currBoard;
-          for(let i=0; i < allBoards.length; i++){
+          for (let i = 0; i < allBoards.length; i++) {
            currBoard = allBoards[i];
            currBoard.style.display = "block";
          }
@@ -269,57 +315,55 @@ BlazeComponent.extendComponent({
        'click #filterBtn'(event) {
          event.preventDefault();
          let selectedTeams = document.querySelectorAll('#jsAllBoardTeams option:checked');
-          let selectedTeamsValues = Array.from(selectedTeams).map(function(elt){return elt.value});
+          let selectedTeamsValues = Array.from(selectedTeams).map(function (elt) { return elt.value });
          let index = selectedTeamsValues.indexOf("-1");
          if (index > -1) {
            selectedTeamsValues.splice(index, 1);
          }

          let selectedOrgs = document.querySelectorAll('#jsAllBoardOrgs option:checked');
-          let selectedOrgsValues = Array.from(selectedOrgs).map(function(elt){return elt.value});
+          let selectedOrgsValues = Array.from(selectedOrgs).map(function (elt) { return elt.value });
          index = selectedOrgsValues.indexOf("-1");
          if (index > -1) {
            selectedOrgsValues.splice(index, 1);
          }

-          if(selectedTeamsValues.length > 0 || selectedOrgsValues.length > 0){
+          if (selectedTeamsValues.length > 0 || selectedOrgsValues.length > 0) {
            const query = {
              $and: [
                { archived: false },
                { type: 'board' },
-                { $or:[] }
+                { $or: [] }
              ]
            };
-            if(selectedTeamsValues.length > 0)
-            {
-              query.$and[2].$or.push({'teams.teamId': {$in : selectedTeamsValues}});
+            if (selectedTeamsValues.length > 0) {
+              query.$and[2].$or.push({ 'teams.teamId': { $in: selectedTeamsValues } });
            }
-            if(selectedOrgsValues.length > 0)
-            {
-              query.$and[2].$or.push({'orgs.orgId': {$in : selectedOrgsValues}});
+            if (selectedOrgsValues.length > 0) {
+              query.$and[2].$or.push({ 'orgs.orgId': { $in: selectedOrgsValues } });
            }

            let filteredBoards = Boards.find(query, {}).fetch();
            let allBoards = document.getElementsByClassName("js-board");
            let currBoard;
-            if(filteredBoards.length > 0){
+            if (filteredBoards.length > 0) {
              let currBoardId;
              let found;
-              for(let i=0; i < allBoards.length; i++){
+              for (let i = 0; i < allBoards.length; i++) {
                currBoard = allBoards[i];
                currBoardId = currBoard.classList[0];
-                found = filteredBoards.find(function(board){
+                found = filteredBoards.find(function (board) {
                  return board._id == currBoardId;
                });

-                if(found !== undefined)
+                if (found !== undefined)
                  currBoard.style.display = "block";
                else
                  currBoard.style.display = "none";
              }
            }
-            else{
-              for(let i=0; i < allBoards.length; i++){
+            else {
+              for (let i = 0; i < allBoards.length; i++) {
                currBoard = allBoards[i];
                currBoard.style.display = "none";
              }
@@ -1,253 +0,0 @@
-@import 'nib'
-
-$spaceBetweenTiles = 16px
-
-.board-list
-  margin: 0 ($spaceBetweenTiles/2)
-
-  li
-    float: left
-    width: 20%
-    box-sizing: border-box
-    position: relative
-
-    &.placeholder:after
-      content: '';
-      display: block;
-      background: darken(white, 20%)
-      border-radius: 3px;
-      height: 106px;
-      margin: 8px;
-
-    &.ui-sortable-helper
-      cursor: grabbing
-      transform: rotate(4deg)
-      display: block !important
-
-    &.starred
-      .fa-star,
-      .fa-star-o
-        opacity: 1
-
-  .board-list-item
-    overflow: hidden;
-    background-color: #999
-    color: #f6f6f6
-    min-height: 100px
-    font-size: 16px
-    line-height: 22px
-    border-radius: 3px
-    display: block
-    font-weight: 700
-    padding: 8px
-    margin: ($spaceBetweenTiles/2)
-    position: relative
-    text-decoration: none
-    word-wrap: break-word
-
-    &.template-container
-      border: 4px solid #fff
-
-    &.tile
-      background-size: auto
-      background-repeat: repeat
-
-  .board-list-item-sub-name
-    color: rgba(255, 255, 255, .5)
-    display: block
-    font-size: 14px
-    font-weight: 400
-    line-height: 22px
-
-  .board-list-item-desc
-    color: #fff
-    display: block
-    font-size: 14px
-    font-weight: 400
-    line-height: 18px
-
-  .js-add-board
-    text-align:center
-
-    .label
-      font-weight: normal
-      line-height: 56px
-
-    :hover
-      background-color:#939393
-
-  .fa-star,
-  .fa-star-o
-    bottom: 0
-    font-size: 14px
-    height: 18px
-    line-height: 18px
-    opacity: 0
-    padding: 9px 9px
-    position: absolute
-    right: 0
-    top: 0
-    transition-duration: .15s
-    transition-property: color, font-size, background
-
-  .fa-circle
-    bottom: 0;
-    font-size: 10px;
-    height: 10px;
-    line-height: 10px;
-    padding: 9px 9px;
-    position: absolute;
-    right: 0;
-    transition-duration: .15s
-    transition-property: color, font-size, background
-
-  .has-overtime-card-active
-    color: #eb4646 !important
-
-  .no-overtime-card-active
-    color: #3cb500 !important
-
-  .is-star-active
-    color: white
-
-  .fa-clone
-    position: absolute;
-    bottom: 0
-    font-size: 14px
-    height: 18px
-    line-height: 18px
-    opacity: 0
-    right: 0
-    padding: 9px 9px
-    transition-duration: .15s
-    transition-property: color, font-size, background
-
-  .fa-archive
-    position: absolute;
-    bottom: 0
-    font-size: 14px
-    height: 18px
-    line-height: 18px
-    opacity: 0
-    left: 0
-    padding: 9px 9px
-    transition-duration: .15s
-    transition-property: color, font-size, background
-
-  li:hover a
-    &:hover
-      .fa-star,
-      .fa-clone,
-      .fa-archive,
-      .fa-star-o
-        color: white
-
-    .fa-star,
-    .fa-clone,
-    .fa-archive,
-    .fa-star-o
-      color: white
-      opacity: .75
-
-      &:hover
-        font-size: 18px
-        opacity: 1
-
-      &.is-star-active
-        opacity: 1
-
-.board-backgrounds-list
-
-  .board-background-select
-    box-sizing: border-box
-    display: block
-    float: left
-    width: 50%
-    padding-top: 12px
-    position: relative
-    z-index: 1
-
-    &:nth-child(-n + 2)
-      padding-top: 0
-
-    &:nth-child(2n)
-      padding-left: 6px
-
-    &:nth-child(2n+1)
-      padding-right: 6px
-
-    .background-box
-      color: white
-      border-radius: 3px
-      background-size: cover
-      display: block
-      height: 74px
-      position: relative
-      width: 100%
-      cursor: pointer
-      display: flex
-      align-items: center
-      justify-content: center
-
-      i.fa-check
-        font-size: 25px
-        color: white
-
-@media screen and (max-width: 800px)
-  .board-list
-    height: 100%
-    overflow: scroll
-
-    li
-      width: 50%
-
-    .board-list-item
-      overflow: hidden
-      height: 8rem
-
-    .board-list-item-sub-name
-      position: relative
-      top: -100px
-      left: -100px
-
-    .board-handle
-      position: absolute
-      padding: 7px
-      top: 50%
-      transform: translateY(-50%)
-      right: 10px
-      font-size: 24px
-
-@media screen and (max-width: 360px)
-    li
-      width: 100%
-
-    .board-handle
-      position: absolute
-      padding: 7px
-      top: 50%
-      transform: translateY(-50%)
-      right: 10px
-      font-size: 24px
-
-.AllBoardTeamsOrgs
-  list-style-type: none;
-  overflow: hidden;
-
-.AllBoardTeams,.AllBoardOrgs,.AllBoardBtns
-  float: left;
-
-.js-AllBoardOrgs
-  margin-left: 16px;
-
-.AllBoardTeams
-  margin-left : 16px;
-
-.AllBoardButtonsContainer
-  margin: 16px;
-
-#filterBtn,#resetBtn
-  display: inline;
-
-.js-board
-  display: block;
@@ -0,0 +1,90 @@
+.slide {
+  /* swipebox slide background gradient of black to blue, so that back SVG images are visible */
+  background: rgb(2,0,36);
+  background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 14%, rgba(0,212,255,1) 100%); 
+}
+.attachment-upload {
+  text-align: center;
+  font-weight: bold;
+}
+.attachments-galery {
+  display: flex;
+  flex-wrap: wrap;
+}
+.attachments-galery .attachment-item {
+  width: 31.33%;
+  margin: 10px 1% 0;
+  text-align: center;
+  border-radius: 3px;
+  overflow: auto;
+  background: #ededed;
+  min-height: 120px;
+}
+.attachments-galery .attachment-item:hover {
+  background: #e0e0e0;
+}
+.attachments-galery .attachment-item.add-attachment {
+  display: flex;
+  align-items: center;
+}
+.attachments-galery .attachment-item.add-attachment a {
+  display: block;
+  margin: auto;
+}
+.attachments-galery .attachment-item .attachment-thumbnail {
+  height: 80px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+}
+.attachments-galery .attachment-item .attachment-thumbnail .attachment-thumbnail-img {
+  max-height: 100%;
+  max-width: 100%;
+}
+.attachments-galery .attachment-item .attachment-thumbnail .attachment-thumbnail-ext {
+  text-transform: uppercase;
+  font-size: 1.6em;
+}
+.attachments-galery .attachment-item .attachment-details {
+  font-size: 0.75em;
+  margin: 3px;
+}
+.attachments-galery .attachment-item .attachment-details .attachment-details-actions a {
+  display: block;
+}
+.attachments-galery .attachment-item .attachment-details .attachment-details-actions a.attachment-details-menu {
+  padding-top: 10px;
+}
+.attachment-image-preview {
+  max-width: 100px;
+  display: block;
+  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
+}
+.preview-clipboard-image {
+  width: 280px;
+  max-width: 100%;
+  height: 200px;
+  display: block;
+  border: 1px solid #000;
+  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
+}
+@media screen and (max-width: 800px) {
+  .attachments-galery .attachment-item {
+    width: 48%;
+  }
+  .attachments-galery .attachment-item .attachment-thumbnail {
+    height: 130px;
+  }
+  .attachments-galery .attachment-item .attachment-details {
+    font-size: 1.1em;
+  }
+}
+@media screen and (max-width: 360px) {
+  .attachments-galery .attachment-item {
+    width: 100%;
+  }
+  .attachments-galery .attachment-item .attachment-thumbnail {
+    height: 200px;
+  }
+}
@@ -1,19 +1,31 @@
 template(name="cardAttachmentsPopup")
-  ul.pop-over-list
-    li
-      input.js-attach-file.hide(type="file" name="file" multiple)
-      a.js-computer-upload {{_ 'computer'}}
-    li
-      a.js-upload-clipboard-image {{_ 'clipboard'}}
+  if $gt uploads.length 0
+    .attachment-upload {{_ 'uploading'}}
+      table
+        tr
+          th.upload-file-name-descr {{_ 'name'}}
+          th.upload-progress-descr {{_ 'progress'}}
+          th.upload-remaining-descr {{_ 'remaining_time'}}
+          th.upload-speed-descr {{_ 'speed'}}
+        each upload in uploads
+          tr
+            td.upload-file-name-value {{upload.file.name}}
+            td.upload-progress-value {{upload.progress.get}}%
+            td.upload-remaining-value {{getEstimateTime upload}}
+            td.upload-speed-value {{getEstimateSpeed upload}}
+  else
+    ul.pop-over-list
+      li
+        input.js-attach-file.hide(type="file" name="file" multiple)
+        a.js-computer-upload {{_ 'computer'}}
+      li
+        a.js-upload-clipboard-image {{_ 'clipboard'}}

 template(name="previewClipboardImagePopup")
  p <kbd>Ctrl</kbd>+<kbd>V</kbd> {{_ "paste-or-dragdrop"}}
  img.preview-clipboard-image()
  button.primary.js-upload-pasted-image {{_ 'upload'}}

-template(name="previewAttachedImagePopup")
-  img.preview-large-image.js-large-image-clicked(src="{{url}}")
-
 template(name="attachmentDeletePopup")
  p {{_ "attachment-delete-pop"}}
  button.js-confirm.negate.full(type="submit") {{_ 'delete'}}
@@ -22,46 +34,35 @@ template(name="attachmentsGalery")
  .attachments-galery
    each attachments
      .attachment-item
-        a.attachment-thumbnail.swipebox(href="{{url}}" title="{{name}}")
-          if isUploaded
+        a.attachment-thumbnail.swipebox(href="{{link}}" title="{{sanitize name}}")
+          if link
            if isImage
-              img.attachment-thumbnail-img(src="{{url}}")
+              img.attachment-thumbnail-img(src="{{link}}" title="{{sanitize name}}")
            else if($eq extension 'mp3')
-                video(width="100%" height="100%" controls="true")
-                  source(src="{{url}}" type="audio/mpeg")
+              video(width="100%" height="100%" title="{{sanitize name}}" controls="true")
+                source(src="{{link}}" type="audio/mpeg")
            else if($eq extension 'ogg')
-                video(width="100%" height="100%" controls="true")
-                  source(src="{{url}}" type="video/ogg")
+              video(width="100%" height="100%" title="{{sanitize name}}" controls="true")
+                source(src="{{link}}" type="video/ogg")
            else if($eq extension 'webm')
-                video(width="100%" height="100%" controls="true")
-                  source(src="{{url}}" type="video/webm")
+              video(width="100%" height="100%" title="{{sanitize name}}" controls="true")
+                source(src="{{link}}" type="video/webm")
            else if($eq extension 'mp4')
-                video(width="100%" height="100%" controls="true")
-                  source(src="{{url}}" type="video/mp4")
+              video(width="100%" height="100%" title="{{sanitize name}}" controls="true")
+                source(src="{{link}}" type="video/mp4")
            else
              span.attachment-thumbnail-ext= extension
-          else
-            +spinner
        p.attachment-details
          = name
+          span.file-size ({{fileSize size}})
          span.attachment-details-actions
-            a.js-download(href="{{url download=true}}")
+            a.js-download(href="{{link}}?download=true", download="{{name}}")
              i.fa.fa-download
              | {{_ 'download'}}
            if currentUser.isBoardMember
              unless currentUser.isCommentOnly
                unless currentUser.isWorker
-                  if isImage
-                    a(class="{{#if $eq ../coverId _id}}js-remove-cover{{else}}js-add-cover{{/if}}")
-                      i.fa.fa-thumb-tack
-                      if($eq ../coverId _id)
-                        | {{_ 'remove-cover'}}
-                      else
-                        | {{_ 'add-cover'}}
-                  if currentUser.isBoardAdmin
-                    a.js-confirm-delete
-                      i.fa.fa-close
-                      | {{_ 'delete'}}
+                  a.fa.fa-navicon.attachment-details-menu.js-open-attachment-menu(title="{{_ 'attachmentActionsPopup-title'}}")

    if currentUser.isBoardMember
      unless currentUser.isCommentOnly
@@ -69,3 +70,45 @@ template(name="attachmentsGalery")
          //li.attachment-item.add-attachment
          a.js-add-attachment(title="{{_ 'add-attachment' }}")
            i.fa.fa-plus
+
+template(name="attachmentActionsPopup")
+  ul.pop-over-list
+    li
+      if isImage
+        a(class="{{#if isCover}}js-remove-cover{{else}}js-add-cover{{/if}}")
+          i.fa.fa-thumb-tack
+          if isCover
+            | {{_ 'remove-cover'}}
+          else
+            | {{_ 'add-cover'}}
+      if currentUser.isBoardAdmin
+        a.js-rename
+          i.fa.fa-pencil-square-o
+          | {{_ 'rename'}}
+        a.js-confirm-delete
+          i.fa.fa-close
+          | {{_ 'delete'}}
+        p.attachment-storage
+          | {{versions.original.storage}}
+
+        if $neq versions.original.storage "fs"
+          a.js-move-storage-fs
+            i.fa.fa-arrow-right
+            | {{_ 'attachment-move-storage-fs'}}
+
+        if $neq versions.original.storage "gridfs"
+          if versions.original.storage
+            a.js-move-storage-gridfs
+              i.fa.fa-arrow-right
+              | {{_ 'attachment-move-storage-gridfs'}}
+
+        if $neq versions.original.storage "s3"
+          if versions.original.storage
+            a.js-move-storage-s3
+              i.fa.fa-arrow-right
+              | {{_ 'attachment-move-storage-s3'}}
+
+template(name="attachmentRenamePopup")
+  input.js-edit-attachment-name(type='text' autofocus value="{{getNameWithoutExtension}}" dir="auto")
+  .edit-controls.clearfix
+    button.primary.confirm.js-submit-edit-attachment-name(type="submit") {{_ 'save'}}
@@ -1,109 +1,94 @@
+import { ObjectID } from 'bson';
+import DOMPurify from 'dompurify';
+
+const filesize = require('filesize');
+const prettyMilliseconds = require('pretty-ms');
+
 Template.attachmentsGalery.events({
  'click .js-add-attachment': Popup.open('cardAttachments'),
-  'click .js-confirm-delete': Popup.afterConfirm(
-    'attachmentDelete',
-    function() {
-      Attachments.remove(this._id);
-      Popup.back();
-    },
-  ),
  // If we let this event bubble, FlowRouter will handle it and empty the page
  // content, see #101.
  'click .js-download'(event) {
    event.stopPropagation();
  },
-  'click .js-add-cover'() {
-    Cards.findOne(this.cardId).setCover(this._id);
-  },
-  'click .js-remove-cover'() {
-    Cards.findOne(this.cardId).unsetCover();
-  },
-  'click .js-preview-image'(event) {
-    Popup.open('previewAttachedImage').call(this, event);
-    // when multiple thumbnails, if click one then another very fast,
-    // we might get a wrong width from previous img.
-    // when popup reused, onRendered() won't be called, so we cannot get there.
-    // here make sure to get correct size when this img fully loaded.
-    const img = $('img.preview-large-image')[0];
-    if (!img) return;
-    const rePosPopup = () => {
-      const w = img.width;
-      const h = img.height;
-      // if the image is too large, we resize & center the popup.
-      if (w > 300) {
-        $('div.pop-over').css({
-          width: w + 20,
-          position: 'absolute',
-          left: (window.innerWidth - w) / 2,
-          top: (window.innerHeight - h) / 2,
-        });
-      }
-    };
-    const url = $(event.currentTarget).attr('src');
-    if (img.src === url && img.complete) rePosPopup();
-    else img.onload = rePosPopup;
-  },
+  'click .js-open-attachment-menu': Popup.open('attachmentActions'),
 });

 Template.attachmentsGalery.helpers({
  isBoardAdmin() {
    return Meteor.user().isBoardAdmin();
  },
-});
-
-Template.previewAttachedImagePopup.events({
-  'click .js-large-image-clicked'() {
-    Popup.back();
+  fileSize(size) {
+    const ret = filesize(size);
+    return ret;
+  },
+  sanitize(value) {
+    return DOMPurify.sanitize(value);
  },
 });

-Template.cardAttachmentsPopup.events({
-  'change .js-attach-file'(event) {
-    const card = this;
-    const processFile = f => {
-      Utils.processUploadedAttachment(card, f, attachment => {
-        if (attachment && attachment._id && attachment.isImage()) {
-          card.setCover(attachment._id);
-        }
-        Popup.back();
-      });
-    };
+Template.cardAttachmentsPopup.onCreated(function() {
+  this.uploads = new ReactiveVar([]);
+});

-    FS.Utility.eachFile(event, f => {
-      if (
-        MAX_IMAGE_PIXEL > 0 &&
-        typeof f.type === 'string' &&
-        f.type.match(/^image/)
-      ) {
-        // is image
-        const reader = new FileReader();
-        reader.onload = function(e) {
-          const dataurl = e && e.target && e.target.result;
-          if (dataurl !== undefined) {
-            Utils.shrinkImage({
-              dataurl,
-              maxSize: MAX_IMAGE_PIXEL,
-              ratio: COMPRESS_RATIO,
-              toBlob: true,
-              callback(blob) {
-                if (blob === false) {
-                  processFile(f);
-                } else {
-                  blob.name = f.name;
-                  processFile(blob);
-                }
-              },
-            });
-          } else {
-            // couldn't process it let other function handle it?
-            processFile(f);
-          }
+Template.cardAttachmentsPopup.helpers({
+  getEstimateTime(upload) {
+    const ret = prettyMilliseconds(upload.estimateTime.get());
+    return ret;
+  },
+  getEstimateSpeed(upload) {
+    const ret = filesize(upload.estimateSpeed.get(), {round: 0}) + "/s";
+    return ret;
+  },
+  uploads() {
+    return Template.instance().uploads.get();
+  }
+});
+
+Template.cardAttachmentsPopup.events({
+  'change .js-attach-file'(event, templateInstance) {
+    const card = this;
+    const files = event.currentTarget.files;
+    if (files) {
+      let uploads = [];
+      for (const file of files) {
+        const fileId = new ObjectID().toString();
+        // If filename is not same as sanitized filename, has XSS, then cancel upload
+        if (file.name !== DOMPurify.sanitize(file.name)) {
+          return false;
+        }
+        const config = {
+          file: file,
+          fileId: fileId,
+          meta: Utils.getCommonAttachmentMetaFrom(card),
+          chunkSize: 'dynamic',
        };
-        reader.readAsDataURL(f);
-      } else {
-        processFile(f);
+        config.meta.fileId = fileId;
+        const uploader = Attachments.insert(
+          config,
+          false,
+        );
+        uploader.on('start', function() {
+          uploads.push(this);
+          templateInstance.uploads.set(uploads);
+        });
+        uploader.on('uploaded', (error, fileRef) => {
+          if (!error) {
+            if (fileRef.isImage) {
+              card.setCover(fileRef._id);
+            }
+          }
+        });
+        uploader.on('end', (error, fileRef) => {
+          uploads = uploads.filter(_upload => _upload.config.fileId != fileRef._id);
+          templateInstance.uploads.set(uploads);
+          if (uploads.length == 0 ) {
+            Popup.back();
+          }
+        });
+        uploader.start();
      }
-    });
+    }
  },
  'click .js-computer-upload'(event, templateInstance) {
    templateInstance.find('.js-attach-file').click();
@@ -151,30 +136,104 @@ Template.previewClipboardImagePopup.onRendered(() => {

 Template.previewClipboardImagePopup.events({
  'click .js-upload-pasted-image'() {
-    const results = pastedResults;
-    if (results && results.file) {
+    const card = this;
+    if (pastedResults && pastedResults.file) {
+      const file = pastedResults.file;
      window.oPasted = pastedResults;
-      const card = this;
-      const file = new FS.File(results.file);
-      if (!results.name) {
-        // if no filename, it's from clipboard. then we give it a name, with ext name from MIME type
-        if (typeof results.file.type === 'string') {
-          file.name(results.file.type.replace('image/', 'clipboard.'));
+      const fileId = new ObjectID().toString();
+      const config = {
+        file,
+        fileId: fileId,
+        meta: Utils.getCommonAttachmentMetaFrom(card),
+        fileName: file.name || file.type.replace('image/', 'clipboard.'),
+        chunkSize: 'dynamic',
+      };
+      config.meta.fileId = fileId;
+      const uploader = Attachments.insert(
+        config,
+        false,
+      );
+      uploader.on('uploaded', (error, fileRef) => {
+        if (!error) {
+          if (fileRef.isImage) {
+            card.setCover(fileRef._id);
+          }
        }
-      }
-      file.updatedAt(new Date());
-      file.boardId = card.boardId;
-      file.cardId = card._id;
-      file.userId = Meteor.userId();
-      const attachment = Attachments.insert(file);
-
-      if (attachment && attachment._id && attachment.isImage()) {
-        card.setCover(attachment._id);
-      }
-
-      pastedResults = null;
-      $(document.body).pasteImageReader(() => {});
-      Popup.back();
+      });
+      uploader.on('end', (error, fileRef) => {
+        pastedResults = null;
+        $(document.body).pasteImageReader(() => {});
+        Popup.back();
+      });
+      uploader.start();
    }
  },
 });
+
+BlazeComponent.extendComponent({
+  isCover() {
+    const ret = Cards.findOne(this.data().meta.cardId).coverId == this.data()._id;
+    return ret;
+  },
+  events() {
+    return [
+      {
+        'click .js-rename': Popup.open('attachmentRename'),
+        'click .js-confirm-delete': Popup.afterConfirm('attachmentDelete', function() {
+          Attachments.remove(this._id);
+          Popup.back(2);
+        }),
+        'click .js-add-cover'() {
+          Cards.findOne(this.data().meta.cardId).setCover(this.data()._id);
+          Popup.back();
+        },
+        'click .js-remove-cover'() {
+          Cards.findOne(this.data().meta.cardId).unsetCover();
+          Popup.back();
+        },
+        'click .js-move-storage-fs'() {
+          Meteor.call('moveAttachmentToStorage', this.data()._id, "fs");
+          Popup.back();
+        },
+        'click .js-move-storage-gridfs'() {
+          Meteor.call('moveAttachmentToStorage', this.data()._id, "gridfs");
+          Popup.back();
+        },
+        'click .js-move-storage-s3'() {
+          Meteor.call('moveAttachmentToStorage', this.data()._id, "s3");
+          Popup.back();
+        },
+      }
+    ]
+  }
+}).register('attachmentActionsPopup');
+
+BlazeComponent.extendComponent({
+  getNameWithoutExtension() {
+    const ret = this.data().name.replace(new RegExp("\." + this.data().extension + "$"), "");
+    return ret;
+  },
+  events() {
+    return [
+      {
+        'keydown input.js-edit-attachment-name'(evt) {
+          // enter = save
+          if (evt.keyCode === 13) {
+            this.find('button[type=submit]').click();
+          }
+        },
+        'click button.js-submit-edit-attachment-name'(event) {
+          // save button pressed
+          event.preventDefault();
+          const name = this.$('.js-edit-attachment-name')[0]
+            .value
+            .trim() + this.data().extensionWithDot;
+          if (name === DOMPurify.sanitize(name)) {
+            Meteor.call('renameAttachment', this.data()._id, name);
+          }
+          Popup.back(2);
+        },
+      }
+    ]
+  }
+}).register('attachmentRenamePopup');
@@ -1,85 +0,0 @@
-@import 'nib'
-
-.attachments-galery
-  display: flex
-  flex-wrap: wrap
-
-  .attachment-item
-    width: 33.33% - 2%
-    margin: 10px 1% 0
-    text-align: center
-    border-radius: 3px
-    overflow: auto
-    background: darken(white, 7%)
-    min-height: 120px
-
-    &:hover
-      background: darken(white, 12%)
-
-    &.add-attachment
-      display: flex
-      align-items: center
-
-      a
-        display: block
-        margin: auto
-
-    .attachment-thumbnail
-      height: 80px
-      display: flex
-      align-items: center
-      justify-content: center
-      position: relative
-
-      .attachment-thumbnail-img
-        max-height: 100%
-        max-width: 100%
-
-      .attachment-thumbnail-ext
-        text-transform: uppercase
-        font-size: 1.6em
-
-    .attachment-details
-      font-size: 0.75em
-      margin: 3px
-
-      .attachment-details-actions a
-        display: block
-
-.attachment-image-preview
-  max-width: 100px
-  display: block
-  box-shadow: 0 1px 2px rgba(0,0,0,.2)
-
-.preview-large-image
-  max-width: 1000px
-  display: block
-  box-shadow: 0 1px 2px rgba(0,0,0,.2)
-
-.preview-clipboard-image
-  width: 280px
-  max-width: 100%;
-  height: 200px
-  display: block
-  border: 1px solid black
-  box-shadow: 0 1px 2px rgba(0,0,0,.2)
-
-@media screen and (max-width: 800px)
-  .attachments-galery
-    flex-direction
-      row
-    .attachment-item
-      width: 50% - 2%
-
-      .attachment-thumbnail
-        height: 130px
-      .attachment-details
-        font-size: 1.1em
-
-@media screen and (max-width: 360px)
-  .attachments-galery
-    .attachment-item
-      width: 100%
-
-      .attachment-thumbnail
-        height: 200px
@@ -63,7 +63,7 @@ template(name="cardCustomField-checkbox")
 template(name="cardCustomField-currency")
    if canModifyCard
        +inlinedForm(classNames="js-card-customfield-currency")
-            input(type="text" value=data.value)
+            input(type="text" value=data.value autofocus)
            .edit-controls.clearfix
                button.primary(type="submit") {{_ 'save'}}
                a.fa.fa-times-thin.js-close-inlined-form
@@ -1,5 +1,8 @@
+import moment from 'moment/min/moment-with-locales';
+import { TAPi18n } from '/imports/i18n';
 import { DatePicker } from '/client/lib/datepicker';
 import Cards from '/models/cards';
+import { CustomFieldStringTemplate } from '/client/lib/customFields'

 Template.cardCustomFieldsPopup.helpers({
  hasCustomField() {
@@ -243,21 +246,18 @@ CardCustomField.register('cardCustomField');
 }.register('cardCustomField-dropdown'));

 // cardCustomField-stringtemplate
-(class extends CardCustomField {
+class CardCustomFieldStringTemplate extends CardCustomField {
  onCreated() {
    super.onCreated();

-    this.stringtemplateFormat = this.data().definition.settings.stringtemplateFormat;
-    this.stringtemplateSeparator = this.data().definition.settings.stringtemplateSeparator;
+    this.customField = new CustomFieldStringTemplate(this.data().definition);

    this.stringtemplateItems = new ReactiveVar(this.data().value ?? []);
  }

  formattedValue() {
-    return (this.data().value ?? [])
-      .filter(value => !!value.trim())
-      .map(value => this.stringtemplateFormat.replace(/%\{value\}/gi, value))
-      .join(this.stringtemplateSeparator ?? '');
+    const ret = this.customField.getFormattedValue(this.data().value);
+    return ret;
  }

  getItems() {
@@ -271,7 +271,7 @@ CardCustomField.register('cardCustomField');
      {
        'submit .js-card-customfield-stringtemplate'(event) {
          event.preventDefault();
-          const items = this.getItems();
+          const items = this.stringtemplateItems.get();
          this.card.setCustomField(this.customFieldId, items);
        },

@@ -279,9 +279,7 @@ CardCustomField.register('cardCustomField');
          if (event.keyCode === 13) {
            event.preventDefault();

-            if (event.metaKey || event.ctrlKey) {
-              this.find('button[type=submit]').click();
-            } else if (event.target.value.trim()) {
+            if (event.target.value.trim() || event.metaKey || event.ctrlKey) {
              const inputLast = this.find('input.last');

              let items = this.getItems();
@@ -307,6 +305,9 @@ CardCustomField.register('cardCustomField');

              this.stringtemplateItems.set(items);
            }
+            if (event.metaKey || event.ctrlKey) {
+              this.find('button[type=submit]').click();
+            }
          }
        },

@@ -327,4 +328,5 @@ CardCustomField.register('cardCustomField');
      },
    ];
  }
-}.register('cardCustomField-stringtemplate'));
+}
+CardCustomFieldStringTemplate.register('cardCustomField-stringtemplate');
@@ -0,0 +1,67 @@
+.card-date {
+  display: block;
+  border-radius: 4px;
+  padding: 1px 3px;
+  background-color: #dbdbdb;
+}
+.card-date:hover,
+.card-date.is-active {
+  background-color: #b3b3b3;
+}
+.card-date.current,
+.card-date.almost-due,
+.card-date.due,
+.card-date.long-overdue {
+  color: #fff;
+}
+.card-date.current {
+  background-color: #5ba639;
+}
+.card-date.current:hover,
+.card-date.current.is-active {
+  background-color: #46802c;
+}
+.card-date.almost-due {
+  background-color: #edc909;
+}
+.card-date.almost-due:hover,
+.card-date.almost-due.is-active {
+  background-color: #bc9f07;
+}
+.card-date.due {
+  background-color: #fa3f00;
+}
+.card-date.due:hover,
+.card-date.due.is-active {
+  background-color: #c73200;
+}
+.card-date.long-overdue {
+  background-color: #fd5d47;
+}
+.card-date.long-overdue:hover,
+.card-date.long-overdue.is-active {
+  background-color: #fd3e24;
+}
+.card-date.end-date time::before {
+  content: "\f253";
+}
+.card-date.due-date time::before {
+  content: "\f090";
+}
+.card-date.start-date time::before {
+  content: "\f251";
+}
+.card-date.received-date time::before {
+  content: "\f08b";
+}
+.card-date time::before {
+  font: normal normal normal 14px/1 FontAwesome;
+  font-size: inherit;
+  -webkit-font-smoothing: antialiased;
+  margin-right: 0.3em;
+}
+.customfield-date {
+  display: block;
+  border-radius: 4px;
+  padding: 1px 3px;
+}
@@ -1,3 +1,5 @@
+import moment from 'moment/min/moment-with-locales';
+import { TAPi18n } from '/imports/i18n';
 import { DatePicker } from '/client/lib/datepicker';

 Template.dateBadge.helpers({
@@ -317,31 +319,31 @@ CardCustomFieldDate.register('cardCustomFieldDate');

 (class extends CardReceivedDate {
  showDate() {
-    return this.date.get().format('l');
+    return this.date.get().format('L');
  }
 }.register('minicardReceivedDate'));

 (class extends CardStartDate {
  showDate() {
-    return this.date.get().format('l');
+    return this.date.get().format('L');
  }
 }.register('minicardStartDate'));

 (class extends CardDueDate {
  showDate() {
-    return this.date.get().format('l');
+    return this.date.get().format('L');
  }
 }.register('minicardDueDate'));

 (class extends CardEndDate {
  showDate() {
-    return this.date.get().format('l');
+    return this.date.get().format('L');
  }
 }.register('minicardEndDate'));

 (class extends CardCustomFieldDate {
  showDate() {
-    return this.date.get().format('l');
+    return this.date.get().format('L');
  }
 }.register('minicardCustomFieldDate'));

@@ -358,7 +360,7 @@ class VoteEndDate extends CardDate {
    return classes;
  }
  showDate() {
-    return this.date.get().format('l LT');
+    return this.date.get().format('L LT');
  }
  showTitle() {
    return `${TAPi18n.__('card-end-on')} ${this.date.get().format('LLLL')}`;
@@ -1,63 +0,0 @@
-.card-date
-  display: block
-  border-radius: 4px
-  padding: 1px 3px
-
-  background-color: #dbdbdb
-  &:hover, &.is-active
-    background-color: #b3b3b3
-
-  &.current, &.almost-due, &.due, &.long-overdue
-    color: #fff
-
-  &.current
-    background-color: #5ba639
-    &:hover, &.is-active
-      background-color: darken(#5ba639, 10)
-
-  &.almost-due
-    background-color: #edc909
-    &:hover, &.is-active
-      background-color: darken(#edc909, 10)
-
-  &.due
-    background-color: #fa3f00
-    &:hover, &.is-active
-      background-color: darken(#fa3f00, 10)
-
-  &.long-overdue
-    background-color: #fd5d47
-    &:hover, &.is-active
-      background-color: darken(#fd5d47, 7)
-
-  &.end-date
-    time
-      &::before
-        content: "\f253"  // symbol: fa-hourglass-end
-
-  &.due-date
-    time
-      &::before
-        content: "\f090"  // symbol: fa-sign-in
-
-  &.start-date
-    time
-      &::before
-        content: "\f251"  // symbol: fa-hourglass-start
-
-  &.received-date
-    time
-      &::before
-        content: "\f08b"  // symbol: fa-sign-out
-
-  time
-    &::before
-      font: normal normal normal 14px/1 FontAwesome
-      font-size: inherit
-      -webkit-font-smoothing: antialiased
-      margin-right: 0.3em
-
-.customfield-date
-  display: block
-  border-radius: 4px
-  padding: 1px 3px
@@ -0,0 +1,56 @@
+.new-description {
+  position: relative;
+  margin: 0 0 20px 0;
+}
+.new-description.is-open .helper {
+  display: inline-block;
+}
+.new-description.is-open textarea {
+  min-height: 100px;
+  color: #4d4d4d;
+  cursor: auto;
+  overflow: hidden;
+  word-wrap: break-word;
+}
+.new-description .too-long {
+  margin-top: 8px;
+}
+.new-description textarea {
+  background-color: #fff;
+  border: 0;
+  box-shadow: 0 1px 2px rgba(0,0,0,0.23);
+  height: 36px;
+  margin: 4px 4px 6px 0;
+  padding: 9px 11px;
+  width: 100%;
+}
+.new-description textarea:hover,
+.new-description textarea:is-open {
+  background-color: #fff;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.33);
+  border: 0;
+  cursor: pointer;
+}
+.new-description textarea:is-open {
+  cursor: auto;
+}
+.description-item {
+  background-color: #fff;
+  border: 0;
+  box-shadow: 0 1px 2px rgba(0,0,0,0.23);
+  color: #8c8c8c;
+  height: 36px;
+  margin: 4px 4px 6px 0;
+  width: 92%;
+}
+.description-item:hover {
+  background: #e0e0e0;
+}
+.description-item.add-description {
+  display: flex;
+  margin: 5px;
+}
+.description-item.add-description a {
+  display: block;
+  margin: auto;
+}
@@ -1,59 +0,0 @@
-@import 'nib'
-
-.new-description
-  position: relative
-  margin: 0 0 20px 0
-
-
-  &.is-open
-    .helper
-      display: inline-block
-
-    textarea
-      min-height: 100px
-      color: #4d4d4d
-      cursor: auto
-      overflow: hidden
-      word-wrap: break-word
-
-  .too-long
-    margin-top: 8px
-
-  textarea
-    background-color: #fff
-    border: 0
-    box-shadow: 0 1px 2px rgba(0, 0, 0, .23)
-    height: 36px
-    margin: 4px 4px 6px 0
-    padding: 9px 11px
-    width: 100%
-
-    &:hover,
-    &:is-open
-      background-color: #fff
-      box-shadow: 0 1px 3px rgba(0, 0, 0, .33)
-      border: 0
-      cursor: pointer
-
-    &:is-open
-      cursor: auto
-
-.description-item
-  background-color: #fff
-  border: 0
-  box-shadow: 0 1px 2px rgba(0, 0, 0, .23)
-  color: #8c8c8c
-  height: 36px
-  margin: 4px 4px 6px 0
-  width: 92%
-
-  &:hover
-    background: darken(white, 12%)
-
-  &.add-description
-    display: flex
-    margin: 5px
-
-    a
-      display: block
-      margin: auto
@@ -0,0 +1,588 @@
+.assignee {
+  border-radius: 3px;
+  display: block;
+  position: relative;
+  float: left;
+  height: 30px;
+  width: 30px;
+  margin: 0 4px 4px 0;
+  cursor: pointer;
+  user-select: none;
+  z-index: 1;
+  text-decoration: none;
+  border-radius: 50%;
+}
+.assignee .avatar {
+  overflow: hidden;
+  border-radius: 50%;
+}
+.assignee .avatar.avatar-assignee-initials {
+  height: 70%;
+  width: 70%;
+  padding: 15%;
+  background-color: #dbdbdb;
+  color: #444;
+  position: absolute;
+}
+.assignee .avatar.avatar-image {
+  object-fit: cover;
+  object-position: center;
+  height: 100%;
+  width: 100%;
+}
+.assignee .assignee-presence-status {
+  background-color: #b3b3b3;
+  border: 1px solid #fff;
+  border-radius: 50%;
+  height: 7px;
+  width: 7px;
+  position: absolute;
+  right: -1px;
+  bottom: -1px;
+  border: 1px solid #fff;
+  z-index: 15;
+}
+.assignee .assignee-presence-status.active {
+  background: #64c464;
+  border-color: #daf1da;
+}
+.assignee .assignee-presence-status.idle {
+  background: #e4e467;
+  border-color: #f7f7d4;
+}
+.assignee .assignee-presence-status.disconnected {
+  background: #bdbdbd;
+  border-color: #ededed;
+}
+.assignee .assignee-presence-status.pending {
+  background: #e44242;
+  border-color: #f1dada;
+}
+.assignee.add-assignee {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 0 0 2px #bfbfbf inset;
+}
+.assignee.add-assignee:hover,
+.assignee.add-assignee.is-active {
+  box-shadow: 0 0 0 2px #666 inset;
+}
+.copied-tooltip {
+  display: none;
+  padding: 0px 10px;
+  background-color: rgba(0,0,0,0.875);
+  color: #fff;
+  border-radius: 5px;
+}
+.card-details {
+  padding: 0;
+  flex-shrink: 0;
+  flex-basis: 600px;
+  will-change: flex-basis;
+  overflow-y: scroll;
+  overflow-x: hidden;
+  background: #f7f7f7;
+  border-radius: bottom 3px;
+  z-index: 20;
+  animation: flexGrowIn 0.1s;
+  box-shadow: 0 0 7px 0 #b3b3b3;
+  transition: flex-basis 0.1s;
+  box-sizing: border-box;
+}
+.card-details .mCustomScrollBox {
+  padding-left: 0;
+}
+.card-details .card-details-canvas {
+  width: auto;
+  padding: 0 20px;
+}
+.card-details .card-details-header {
+  margin: 0 -20px 5px;
+  padding: 7px 20px;
+  background: #ededed;
+  border-bottom: 1px solid #dbdbdb;
+  position: sticky;
+  top: 0px;
+  z-index: 500;
+}
+.card-details .card-details-header .card-number {
+  color: #b3b3b3;
+  display: inline-block;
+  margin-right: 5px;
+}
+.card-details .card-details-header .close-card-details,
+.card-details .card-details-header .maximize-card-details,
+.card-details .card-details-header .minimize-card-details,
+.card-details .card-details-header .card-details-menu,
+.card-details .card-details-header .card-copy-button,
+.card-details .card-details-header .card-copy-mobile-button,
+.card-details .card-details-header .close-card-details-mobile-web,
+.card-details .card-details-header .card-details-menu-mobile-web,
+.card-details .card-details-header .copied-tooltip {
+  float: right;
+}
+.card-details .card-details-header .close-card-details,
+.card-details .card-details-header .maximize-card-details,
+.card-details .card-details-header .minimize-card-details {
+  font-size: 24px;
+  padding: 5px 10px 5px 10px;
+  margin-right: -8px;
+}
+.card-details .card-details-header .close-card-details-mobile-web {
+  font-size: 24px;
+  padding: 5px;
+  margin-right: 40px;
+}
+.card-details .card-details-header .card-copy-button {
+  font-size: 17px;
+  padding: 10px;
+  margin-right: 10px;
+}
+.card-details .card-details-header .card-copy-mobile-button {
+  font-size: 17px;
+  padding: 10px;
+  margin-right: 10px;
+}
+.card-details .card-details-header .card-details-menu {
+  font-size: 17px;
+  padding: 10px;
+}
+.card-details .card-details-header .card-details-menu-mobile-web {
+  font-size: 17px;
+  padding: 10px;
+  margin-right: 30px;
+}
+.card-details .card-details-header .card-details-watch {
+  font-size: 17px;
+  padding-left: 7px;
+  color: #a6a6a6;
+}
+.card-details .card-details-header .card-details-title {
+  font-weight: bold;
+  font-size: 1.33em;
+  margin: 7px 0 0;
+  padding: 0;
+}
+.card-details .card-details-header .linked-card-location {
+  font-style: italic;
+  font-size: 1em;
+  margin-bottom: 0;
+}
+.card-details .card-details-header .linked-card-location p {
+  margin-bottom: 0;
+}
+.card-details .card-details-header form.inlined-form {
+  margin-top: 5px;
+  margin-bottom: 10px;
+}
+.card-details .card-details-header form.inlined-form .copied-tooltip {
+  padding: 0px 10px;
+}
+.card-details .card-details-header .card-details-list {
+  font-size: 0.85em;
+  margin-bottom: 3px;
+}
+.card-details .card-details-header .card-details-list a.card-details-list-title {
+  font-weight: bold;
+}
+.card-details .card-details-header .card-details-list a.card-details-list-title.is-editable {
+  display: inline-block;
+  background: #e6e6e6;
+  border-radius: 3px;
+  padding: 0px 5px;
+}
+.card-details .card-details-header .copied-tooltip {
+  margin-right: 10px;
+  padding: 10px;
+}
+.card-details .card-description textarea {
+  min-height: 100px;
+}
+.card-details .card-details-items {
+  display: flex;
+  flex-wrap: wrap;
+  margin: 15px 0;
+}
+.card-details .card-details-items .card-details-item {
+  margin-right: 0.5em;
+  flex-grow: 1;
+}
+.card-details .card-details-items .card-details-item:last-child {
+  margin-right: 0;
+}
+.card-details .card-details-items .card-details-item.card-details-item-labels {
+  display: block;
+  word-wrap: break-word;
+  max-width: 95%;
+}
+.card-details .card-details-items .card-details-item.card-details-item-members,
+.card-details .card-details-items .card-details-item.card-details-item-assignees,
+.card-details .card-details-items .card-details-item.card-details-item-customfield,
+.card-details .card-details-items .card-details-item.card-details-item-name {
+  display: block;
+  word-wrap: break-word;
+  max-width: 36%;
+}
+.card-details .card-details-items .card-details-item.card-details-item-creator,
+.card-details .card-details-items .card-details-item.card-details-item-received,
+.card-details .card-details-items .card-details-item.card-details-item-start,
+.card-details .card-details-items .card-details-item.card-details-item-due,
+.card-details .card-details-items .card-details-item.card-details-item-end {
+  display: block;
+  word-wrap: break-word;
+  max-width: 28%;
+}
+.card-details .card-details-items .card-details-item.custom-fields {
+  padding-left: 10px;
+}
+.card-details .card-details-item-title {
+  font-size: 16px;
+  font-weight: bold;
+  color: #4d4d4d;
+}
+.card-details .activities {
+  padding-top: 10px;
+}
+@media screen and (min-width: 801px) {
+  .card-details-maximized {
+    padding: 0;
+    flex-shrink: 0;
+    flex-basis: calc(100% - 20px);
+    will-change: flex-basis;
+    overflow-y: scroll;
+    overflow-x: scroll;
+    background: #f7f7f7;
+    border-radius: bottom 3px;
+    z-index: 100;
+    animation: flexGrowIn 0.1s;
+    box-shadow: 0 0 7px 0 #b3b3b3;
+    transition: flex-basis 0.1s;
+    box-sizing: border-box;
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: calc(100% - 20px);
+    width: calc(100% - 20px);
+    float: left;
+  }
+  .card-details-maximized .card-details-left {
+    float: left;
+    top: 60px;
+    left: 20px;
+    width: 47%;
+    border-right: solid 2px #dbdbdb;
+    padding-right: 10px;
+  }
+  .card-details-maximized .card-details-right {
+    position: absolute;
+    float: right;
+    left: 50%;
+    margin: 15px 0;
+  }
+  .card-details-maximized .card-details-header {
+    width: 100%;
+  }
+}
+input[type="text"].attachment-add-link-input {
+  float: left;
+  margin: 0 0 8px;
+  width: 80%;
+}
+input[type="submit"].attachment-add-link-submit {
+  float: left;
+  margin: 0 0 8px 4px;
+  padding: 6px 12px;
+  width: 18%;
+}
+@media screen and (max-width: 800px) {
+  .card-details {
+    width: calc(100% - 1px);
+    padding: 0px 20px 0px 20px;
+    margin: 0px;
+    transition: none;
+    overflow-y: revert;
+    overflow-x: revert;
+  }
+  .card-details .card-details-canvas {
+    width: 100%;
+    padding-left: 0px;
+  }
+  .card-details .card-details-header .close-card-details {
+    margin-right: 0px;
+  }
+  .card-details .card-details-header .card-details-menu {
+    margin-right: 40px;
+  }
+  .card-details .card-details-header .maximize-card-details {
+    margin-right: 40px;
+  }
+  .card-details .card-details-header .minimize-card-details {
+    margin-right: 40px;
+  }
+  .card-details-popup {
+    padding: 0px 10px;
+  }
+  .pop-over > .content-wrapper > .popup-container-depth-0 {
+    width: 100%;
+  }
+  .pop-over > .content-wrapper > .popup-container-depth-0 > .content {
+    width: calc(100% - 10px);
+  }
+  .pop-over > .content-wrapper > .popup-container-depth-0 > .content > .card-details-popup hr {
+    margin: 15px 0px;
+  }
+  .pop-over > .content-wrapper > .popup-container-depth-0 .card-details-header {
+    margin: 0;
+  }
+}
+.card-details-white {
+  background: #fff !important;
+  color: #000 !important;
+  border: 1px solid #eee;
+}
+.card-details-green {
+  background: #3cb500 !important;
+  color: #fff !important;
+}
+.card-details-yellow {
+  background: #fad900 !important;
+  color: #000 !important;
+}
+.card-details-orange {
+  background: #ff9f19 !important;
+  color: #000 !important;
+}
+.card-details-red {
+  background: #eb4646 !important;
+  color: #fff !important;
+}
+.card-details-purple {
+  background: #a632db !important;
+  color: #fff !important;
+}
+.card-details-blue {
+  background: #0079bf !important;
+  color: #fff !important;
+}
+.card-details-pink {
+  background: #ff78cb !important;
+  color: #000 !important;
+}
+.card-details-sky {
+  background: #00c2e0 !important;
+  color: #fff !important;
+}
+.card-details-black {
+  background: #4d4d4d !important;
+  color: #fff !important;
+}
+.card-details-lime {
+  background: #51e898 !important;
+  color: #000 !important;
+}
+.card-details-silver {
+  background: #c0c0c0 !important;
+  color: #000 !important;
+}
+.card-details-peachpuff {
+  background: #ffdab9 !important;
+  color: #000 !important;
+}
+.card-details-crimson {
+  background: #dc143c !important;
+  color: #fff !important;
+}
+.card-details-plum {
+  background: #dda0dd !important;
+  color: #000 !important;
+}
+.card-details-darkgreen {
+  background: #006400 !important;
+  color: #fff !important;
+}
+.card-details-slateblue {
+  background: #6a5acd !important;
+  color: #fff !important;
+}
+.card-details-magenta {
+  background: #f0f !important;
+  color: #fff !important;
+}
+.card-details-gold {
+  background: #ffd700 !important;
+  color: #000 !important;
+}
+.card-details-navy {
+  background: #000080 !important;
+  color: #fff !important;
+}
+.card-details-gray {
+  background: #808080 !important;
+  color: #fff !important;
+}
+.card-details-saddlebrown {
+  background: #8b4513 !important;
+  color: #fff !important;
+}
+.card-details-paleturquoise {
+  background: #afeeee !important;
+  color: #000 !important;
+}
+.card-details-mistyrose {
+  background: #ffe4e1 !important;
+  color: #000 !important;
+}
+.card-details-indigo {
+  background: #4b0082 !important;
+  color: #fff !important;
+}
+.voted {
+  opacity: 0.7;
+}
+.vote-title {
+  display: flex;
+  justify-content: space-between;
+}
+.vote-title .js-edit-date {
+  align-self: baseline;
+  margin-left: 5px;
+}
+.vote-result {
+  display: flex;
+}
+.js-show-positive-votes {
+  cursor: pointer;
+}
+.poker-voted {
+  opacity: 0.7;
+}
+.poker-title {
+  display: flex;
+  justify-content: space-between;
+}
+.poker-title .js-edit-date {
+  align-self: baseline;
+  margin-left: 5px;
+}
+.poker-result {
+  display: flex;
+  flex-flow: row wrap;
+}
+.js-show-positive-poker-votes {
+  cursor: pointer;
+}
+.poker-deck {
+  display: grid;
+  flex-direction: column;
+  text-align: center;
+}
+.poker-card-result {
+  width: 32px;
+  font-size: 1em;
+  font-weight: bold;
+  padding: 4px 2px 4px 2px;
+  cursor: default;
+}
+.winner {
+  font-weight: bold;
+  outline: #2d2d2d solid 2px;
+}
+.loser {
+  opacity: 0.5;
+}
+.responsive-table {
+  overflow-x: auto;
+}
+.poker-table {
+  display: table;
+  width: 100%;
+  padding-top: 10px;
+}
+.poker-table-row {
+  display: table-row;
+}
+.poker-table-heading {
+  background-color: #eee;
+  display: table-header-group;
+}
+.poker-table-cell {
+  display: table-cell;
+  padding: 0 0 5px 2px;
+  border-bottom: 1px solid #d2d0d0;
+  text-align: center;
+  min-width: 45px;
+}
+.poker-table-cell-who {
+  width: 150px;
+  vertical-align: middle;
+}
+.poker-table-heading-left,
+.poker-table-heading-right {
+  display: table-header-group;
+  font-weight: bold;
+  border-top: 1px solid #808080;
+}
+@media (max-width: 400px) {
+  .poker-table-heading-right {
+    display: none;
+  }
+}
+.poker-table-body {
+  display: table-row-group;
+}
+.poker-table-side-left,
+.poker-table-side-right {
+  display: inline-block;
+}
+.poker-table-side-right {
+  padding-left: 10px;
+}
+@media (max-width: 400px) {
+  .poker-table-side-right {
+    padding-left: 0px;
+  }
+}
+.estimation-add {
+  display: block;
+  overflow: auto;
+  margin-top: 15px;
+  margin-bottom: 5px;
+}
+.estimation-add input {
+  display: inline-block;
+  float: right;
+  margin: auto;
+  margin-right: 10px;
+  width: 100px;
+}
+.estimation-add button {
+  display: inline-block;
+  float: right;
+  margin: auto;
+}
+.poker-card {
+  width: 48px;
+  height: 72px;
+  float: left;
+  background: #fff;
+  border-radius: 5px;
+  display: table;
+  box-sizing: border-box;
+  padding: 5px;
+  margin: 3px;
+  font-size: 20px;
+  font-weight: bold;
+  text-shadow: #2d2d2d 1px 1px 0;
+  box-shadow: 0 0 5px #aaa;
+  text-align: center;
+  position: relative;
+  cursor: pointer;
+}
+.poker-card .inner {
+  display: table-cell;
+  vertical-align: middle;
+  border-radius: 5px;
+  overflow: hidden;
+  background-color: #cecece;
+}
@@ -22,6 +22,7 @@ template(name="cardDetails")
              title="{{_ 'copy-card-link-to-clipboard'}}"
              href="{{ originRelativeUrl }}"
            )
+            span.copied-tooltip {{_ 'copied'}}
        else
          unless isPopup
            a.fa.fa-times-thin.close-card-details.js-close-card-details(title="{{_ 'close-card'}}")
@@ -33,6 +34,7 @@ template(name="cardDetails")
              title="{{_ 'copy-card-link-to-clipboard'}}"
              href="{{ originRelativeUrl }}"
            )
+            span.copied-tooltip {{_ 'copied'}}
        h2.card-details-title.js-card-title(
          class="{{#if canModifyCard}}js-open-inlined-form is-editable{{/if}}")
            +viewer
@@ -232,6 +234,15 @@ template(name="cardDetails")
                  +viewer
                    = sort

+        if currentBoard.allowsShowLists
+          .card-details-item.card-details-show-lists
+            h3.card-details-item-title
+              i.fa.fa-list
+              | {{_ 'list'}}
+            select.js-select-card-details-lists(disabled="{{#unless canModifyCard}}disabled{{/unless}}")
+              each currentBoard.lists
+                option(value="{{_id}}" selected="{{#if isCurrentListId _id}}selected{{/if}}") {{title}}
+
        //.card-details-items
        if getSpentTime
          .card-details-item.card-details-item-spent
@@ -543,11 +554,11 @@ template(name="cardDetails")
            | {{_ 'attachments'}}
          .card-checklist-attachmentGalery.card-attachmentGalery
            +attachmentsGalery
+      hr

    .card-details-right

      unless currentUser.isNoComments
-        hr
        .activity-title
          h3.card-details-item-title
            i.fa.fa-history
@@ -574,6 +585,8 @@ template(name="cardDetails")
            +activities(card=this mode="card")

 template(name="editCardTitleForm")
+  a.fa.fa-copy(title="{{_ 'copy-text-to-clipboard'}}")
+  span.copied-tooltip {{_ 'copied'}}
  textarea.js-edit-card-title(rows='1' autofocus dir="auto")
    = getTitle
  .edit-controls.clearfix
@@ -669,13 +682,12 @@ template(name="cardDetailsActionsPopup")
          i.fa.fa-copy
          | {{_ 'copyCardPopup-title'}}
  unless currentUser.isWorker
-    hr
    ul.pop-over-list
      li
        a.js-copy-checklist-cards
-          i.fa.fa-list
          i.fa.fa-copy
-          | {{_ 'copyChecklistToManyCardsPopup-title'}}
+          i.fa.fa-copy
+          | {{_ 'copyManyCardsPopup-title'}}
    unless archived
      hr
      ul.pop-over-list
@@ -699,39 +711,42 @@ template(name="exportCardPopup")
        | {{_ 'export-card-pdf'}}

 template(name="moveCardPopup")
-  +boardsAndLists
+  +copyAndMoveCard

 template(name="copyCardPopup")
  label(for='copy-card-title') {{_ 'title'}}:
  textarea#copy-card-title.minicard-composer-textarea.js-card-title(autofocus)
    = getTitle
-  +boardsAndLists
+  +copyAndMoveCard

-template(name="copyChecklistToManyCardsPopup")
-  label(for='copy-checklist-cards-title') {{_ 'copyChecklistToManyCardsPopup-instructions'}}:
+template(name="copyManyCardsPopup")
+  label(for='copy-checklist-cards-title') {{_ 'copyManyCardsPopup-instructions'}}:
  textarea#copy-card-title.minicard-composer-textarea.js-card-title(autofocus)
-    | {{_ 'copyChecklistToManyCardsPopup-format'}}
-  +boardsAndLists
+    | {{_ 'copyManyCardsPopup-format'}}
+  +copyAndMoveCard

-template(name="boardsAndLists")
+template(name="convertChecklistItemToCardPopup")
+  label(for='convert-checklist-item-to-card-title') {{_ 'title'}}:
+  textarea#copy-card-title.minicard-composer-textarea.js-card-title(autofocus)
+    = item.title
+  +copyAndMoveCard
+
+template(name="copyAndMoveCard")
  unless currentUser.isWorker
    label {{_ 'boards'}}:
    select.js-select-boards(autofocus)
      each boards
-        if $eq _id currentBoard._id
-          option(value="{{_id}}" selected) {{_ 'current'}}
-        else
-          option(value="{{_id}}") {{title}}
+        option(value="{{_id}}" selected="{{#if isDialogOptionBoardId _id}}selected{{/if}}") {{title}}

  label {{_ 'swimlanes'}}:
  select.js-select-swimlanes
    each swimlanes
-      option(value="{{_id}}") {{title}}
+      option(value="{{_id}}" selected="{{#if isDialogOptionSwimlaneId _id}}selected{{/if}}") {{title}}

  label {{_ 'lists'}}:
  select.js-select-lists
-    each aBoardLists
-      option(value="{{_id}}") {{title}}
+    each lists
+      option(value="{{_id}}" selected="{{#if isDialogOptionListId _id}}selected{{/if}}") {{title}}

  .edit-controls.clearfix
    button.primary.confirm.js-done {{_ 'done'}}
@@ -798,6 +813,7 @@ template(name="cardMorePopup")
      i.fa.colorful(class="{{#if board.isPublic}}fa-globe{{else}}fa-lock{{/if}}")
      input.inline-input(type="text" id="cardURL" readonly value="{{ originRelativeUrl }}" autofocus="autofocus")
      button.js-copy-card-link-to-clipboard(class="btn" id="clipboard") {{_ 'copy-card-link-to-clipboard'}}
+      .copied-tooltip {{_ 'copied'}}
    span.clearfix
    br
    h2 {{_ 'change-card-parent'}}
@@ -1,3 +1,5 @@
+import moment from 'moment/min/moment-with-locales';
+import { TAPi18n } from '/imports/i18n';
 import { DatePicker } from '/client/lib/datepicker';
 import Cards from '/models/cards';
 import Boards from '/models/boards';
@@ -7,8 +9,8 @@ import Users from '/models/users';
 import Lists from '/models/lists';
 import CardComments from '/models/cardComments';
 import { ALLOWED_COLORS } from '/config/const';
-import moment from 'moment';
 import { UserAvatar } from '../users/userAvatar';
+import { DialogWithBoardSwimlaneList } from '/client/lib/dialogWithBoardSwimlaneList';

 const subManager = new SubsManager();
 const { calculateIndexData } = Utils;
@@ -32,7 +34,7 @@ BlazeComponent.extendComponent({
  },

  onCreated() {
-    this.currentBoard = Boards.findOne(Session.get('currentBoard'));
+    this.currentBoard = Utils.getCurrentBoard();
    this.isLoaded = new ReactiveVar(false);

    if (this.parentComponent() && this.parentComponent().parentComponent()) {
@@ -70,7 +72,7 @@ BlazeComponent.extendComponent({


  cardMaximized() {
-    return Meteor.user().hasCardMaximized();
+    return !Utils.getPopupCardId() && Meteor.user().hasCardMaximized();
  },

  canModifyCard() {
@@ -85,17 +87,29 @@ BlazeComponent.extendComponent({
  scrollParentContainer() {
    const cardPanelWidth = 600;
    const parentComponent = this.parentComponent();
-    // TODO sometimes parentComponent is not available, maybe because it's not
-    // yet created?!
-    if (!parentComponent) return;
-    const bodyBoardComponent = parentComponent.parentComponent();
+
+    /*
+        // Incomplete fix about bug where opening card scrolls to wrong place
+        // https://github.com/wekan/wekan/issues/4572#issuecomment-1184149395
+        // TODO sometimes parentComponent is not available, maybe because it's not
+        // yet created?!
+        if (!parentComponent) return;
+        const bodyBoardComponent = parentComponent.parentComponent();
+    */
+
    //On Mobile View Parent is Board, Not Board Body. I cant see how this funciton should work then.
    if (bodyBoardComponent === null) return;
    const $cardView = this.$(this.firstNode());
    const $cardContainer = bodyBoardComponent.$('.js-swimlanes');
-    // TODO sometimes cardContainer is not available, maybe because it's not yet
-    // created?!
-    if (!$cardContainer) return;
+
+    /*
+        // Incomplete fix about bug where opening card scrolls to wrong place
+        // https://github.com/wekan/wekan/issues/4572#issuecomment-1184149395
+        // TODO sometimes cardContainer is not available, maybe because it's not yet
+        // created?!
+        if (!$cardContainer) return;
+    */
+
    const cardContainerScroll = $cardContainer.scrollLeft();
    const cardContainerWidth = $cardContainer.width();

@@ -168,6 +182,15 @@ BlazeComponent.extendComponent({
    );
  },

+  /** returns if the list id is the current list id
+   * @param listId list id to check
+   * @return is the list id the current list id ?
+   */
+  isCurrentListId(listId) {
+    const ret = this.data().listId == listId;
+    return ret;
+  },
+
  onRendered() {
    if (Meteor.settings.public.CARD_OPENED_WEBHOOK_ENABLED) {
      // Send Webhook but not create Activities records ---
@@ -202,11 +225,6 @@ BlazeComponent.extendComponent({
      //-------------
    }

-    if (!Utils.isMiniScreen()) {
-      Meteor.setTimeout(() => {
-        this.scrollParentContainer();
-      }, 500);
-    }
    const $checklistsDom = this.$('.card-checklist-items');

    $checklistsDom.sortable({
@@ -289,7 +307,7 @@ BlazeComponent.extendComponent({
        $checklistsDom.data('sortable')
      ) {
        $checklistsDom.sortable('option', 'disabled', disabled);
-        if (Utils.isMiniScreenOrShowDesktopDragHandles()) {
+        if (Utils.isTouchScreenOrShowDesktopDragHandles()) {
          $checklistsDom.sortable({ handle: '.checklist-handle' });
        }
      }
@@ -325,29 +343,10 @@ BlazeComponent.extendComponent({
        },
        'click .js-copy-link'(event) {
          event.preventDefault();
-          const StringToCopyElement = document.getElementById('cardURL_copy');
-          StringToCopyElement.value =
-            window.location.origin + window.location.pathname;
-          StringToCopyElement.select();
-          if (document.execCommand('copy')) {
-            StringToCopyElement.blur();
-          } else {
-            document.getElementById('cardURL_copy').selectionStart = 0;
-            document.getElementById('cardURL_copy').selectionEnd = 999;
-            document.execCommand('copy');
-            if (window.getSelection) {
-              if (window.getSelection().empty) {
-                // Chrome
-                window.getSelection().empty();
-              } else if (window.getSelection().removeAllRanges) {
-                // Firefox
-                window.getSelection().removeAllRanges();
-              }
-            } else if (document.selection) {
-              // IE?
-              document.selection.empty();
-            }
-          }
+          const promise = Utils.copyTextToClipboard(event.target.href);
+
+          const $tooltip = this.$('.card-details-header .copied-tooltip');
+          Utils.showCopied(promise, $tooltip);
        },
        'click .js-open-card-details-menu': Popup.open('cardDetailsActions'),
        'submit .js-card-description'(event) {
@@ -398,6 +397,14 @@ BlazeComponent.extendComponent({
            card.move(card.boardId, card.swimlaneId, card.listId, sort);
          }
        },
+        'change .js-select-card-details-lists'(event) {
+          let card = this.data();
+          const listSelect = this.$('.js-select-card-details-lists')[0];
+          const listId = listSelect.options[listSelect.selectedIndex].value;
+
+          const minOrder = card.getMinSort(listId, card.swimlaneId);
+          card.move(card.boardId, card.swimlaneId, listId, minOrder - 1);
+        },
        'click .js-go-to-linked-card'() {
          Utils.goCardId(this.data().linkedId);
        },
@@ -443,10 +450,20 @@ BlazeComponent.extendComponent({
        'click .js-maximize-card-details'() {
          Meteor.call('toggleCardMaximized');
          autosize($('.card-details'));
+          if (!Utils.isMiniScreen()) {
+            Meteor.setTimeout(() => {
+              this.scrollParentContainer();
+            }, 500);
+          }
        },
        'click .js-minimize-card-details'() {
          Meteor.call('toggleCardMaximized');
          autosize($('.card-details'));
+          if (!Utils.isMiniScreen()) {
+            Meteor.setTimeout(() => {
+              this.scrollParentContainer();
+            }, 500);
+          }
        },
        'click .js-vote'(e) {
          const forIt = $(e.target).hasClass('js-vote-positive');
@@ -671,25 +688,17 @@ Template.cardDetailsActionsPopup.events({
  'click .js-move-card': Popup.open('moveCard'),
  'click .js-copy-card': Popup.open('copyCard'),
  'click .js-convert-checklist-item-to-card': Popup.open('convertChecklistItemToCard'),
-  'click .js-copy-checklist-cards': Popup.open('copyChecklistToManyCards'),
+  'click .js-copy-checklist-cards': Popup.open('copyManyCards'),
  'click .js-set-card-color': Popup.open('setCardColor'),
  'click .js-move-card-to-top'(event) {
    event.preventDefault();
-    const minOrder = _.min(
-      this.list()
-        .cards(this.swimlaneId)
-        .map((c) => c.sort),
-    );
+    const minOrder = this.getMinSort();
    this.move(this.boardId, this.swimlaneId, this.listId, minOrder - 1);
    Popup.back();
  },
  'click .js-move-card-to-bottom'(event) {
    event.preventDefault();
-    const maxOrder = _.max(
-      this.list()
-        .cards(this.swimlaneId)
-        .map((c) => c.sort),
-    );
+    const maxOrder = this.getMaxSort();
    this.move(this.boardId, this.swimlaneId, this.listId, maxOrder + 1);
    Popup.back();
  },
@@ -708,9 +717,31 @@ Template.cardDetailsActionsPopup.events({
  },
 });

-Template.editCardTitleForm.onRendered(function () {
-  autosize(this.$('.js-edit-card-title'));
-});
+BlazeComponent.extendComponent({
+  onRendered() {
+    autosize(this.$('textarea.js-edit-card-title'));
+  },
+  events() {
+    return [
+      {
+        'click a.fa.fa-copy'(event) {
+          const $editor = this.$('textarea');
+          const promise = Utils.copyTextToClipboard($editor[0].value);
+
+          const $tooltip = this.$('.copied-tooltip');
+          Utils.showCopied(promise, $tooltip);
+        },
+        'keydown .js-edit-card-title'(event) {
+          // If enter key was pressed, submit the data
+          // Unless the shift key is also being pressed
+          if (event.keyCode === 13 && !event.shiftKey) {
+            $('.js-submit-edit-card-title-form').click();
+          }
+        },
+      }
+    ];
+  }
+}).register('editCardTitleForm');

 Template.cardMembersPopup.onCreated(function () {
  let currBoard = Boards.findOne(Session.get('currentBoard'));
@@ -763,23 +794,13 @@ const filterMembers = (filterTerm) => {
        user: Users.findOne(member.userId)
      }))
      .filter(({ user }) =>
-      (user.profile.fullname !== undefined && user.profile.fullname.toLowerCase().indexOf(filterTerm.toLowerCase()) !== -1)
-      || user.profile.fullname === undefined && user.profile.username !== undefined && user.profile.username.toLowerCase().indexOf(filterTerm.toLowerCase()) !== -1)
+        (user.profile.fullname !== undefined && user.profile.fullname.toLowerCase().indexOf(filterTerm.toLowerCase()) !== -1)
+        || user.profile.fullname === undefined && user.profile.username !== undefined && user.profile.username.toLowerCase().indexOf(filterTerm.toLowerCase()) !== -1)
      .map(({ member }) => member);
  }
  return members;
 }

-Template.editCardTitleForm.events({
-  'keydown .js-edit-card-title'(event) {
-    // If enter key was pressed, submit the data
-    // Unless the shift key is also being pressed
-    if (event.keyCode === 13 && !event.shiftKey) {
-      $('.js-submit-edit-card-title-form').click();
-    }
-  },
-});
-
 Template.editCardRequesterForm.onRendered(function () {
  autosize(this.$('.js-edit-card-requester'));
 });
@@ -806,111 +827,58 @@ Template.editCardAssignerForm.events({
  },
 });

-Template.moveCardPopup.events({
-  'click .js-done'() {
-    // XXX We should *not* get the currentCard from the global state, but
-    // instead from a “component” state.
-    const card = Utils.getCurrentCard();
-    const bSelect = $('.js-select-boards')[0];
-    let boardId;
-    // if we are a worker, we won't have a board select so we just use the
-    // current boardId of the card.
-    if (bSelect) boardId = bSelect.options[bSelect.selectedIndex].value;
-    else boardId = card.boardId;
-    const lSelect = $('.js-select-lists')[0];
-    const listId = lSelect.options[lSelect.selectedIndex].value;
-    const slSelect = $('.js-select-swimlanes')[0];
-    const swimlaneId = slSelect.options[slSelect.selectedIndex].value;
-    card.move(boardId, swimlaneId, listId, 0);
+/** Move Card Dialog */
+(class extends DialogWithBoardSwimlaneList {
+  getDialogOptions() {
+    const ret = Meteor.user().getMoveAndCopyDialogOptions();
+    return ret;
+  }
+  setDone(boardId, swimlaneId, listId, options) {
+    Meteor.user().setMoveAndCopyDialogOption(this.currentBoardId, options);
+    const card = this.data();
+    const minOrder = card.getMinSort(listId, swimlaneId);
+    card.move(boardId, swimlaneId, listId, minOrder - 1);
+  }
+}).register('moveCardPopup');

-    // set new id's to card object in case the card is moved to top by the comment "moveCard" after this command (.js-move-card)
-    this.boardId = boardId;
-    this.swimlaneId = swimlaneId;
-    this.listId = listId;
+/** Copy Card Dialog */
+(class extends DialogWithBoardSwimlaneList {
+  getDialogOptions() {
+    const ret = Meteor.user().getMoveAndCopyDialogOptions();
+    return ret;
+  }
+  setDone(boardId, swimlaneId, listId, options) {
+    Meteor.user().setMoveAndCopyDialogOption(this.currentBoardId, options);
+    const card = this.data();

-    Popup.back();
-  },
-});
-BlazeComponent.extendComponent({
-  onCreated() {
-    subManager.subscribe('board', Session.get('currentBoard'), false);
-    this.selectedBoardId = new ReactiveVar(Session.get('currentBoard'));
-  },
-
-  boards() {
-    return Boards.find(
-      {
-        archived: false,
-        'members.userId': Meteor.userId(),
-        _id: { $ne: Meteor.user().getTemplatesBoardId() },
-      },
-      {
-        sort: { sort: 1 /* boards default sorting */ },
-      },
-    );
-  },
-
-  swimlanes() {
-    const board = Boards.findOne(this.selectedBoardId.get());
-    return board.swimlanes();
-  },
-
-  aBoardLists() {
-    const board = Boards.findOne(this.selectedBoardId.get());
-    return board.lists();
-  },
-
-  events() {
-    return [
-      {
-        'change .js-select-boards'(event) {
-          this.selectedBoardId.set($(event.currentTarget).val());
-          subManager.subscribe('board', this.selectedBoardId.get(), false);
-        },
-      },
-    ];
-  },
-}).register('boardsAndLists');
-
-Template.copyCardPopup.events({
-  'click .js-done'() {
-    const card = Utils.getCurrentCard();
-    const lSelect = $('.js-select-lists')[0];
-    const listId = lSelect.options[lSelect.selectedIndex].value;
-    const slSelect = $('.js-select-swimlanes')[0];
-    const swimlaneId = slSelect.options[slSelect.selectedIndex].value;
-    const bSelect = $('.js-select-boards')[0];
-    const boardId = bSelect.options[bSelect.selectedIndex].value;
-    const textarea = $('#copy-card-title');
+    // const textarea = $('#copy-card-title');
+    const textarea = this.$('#copy-card-title');
    const title = textarea.val().trim();
-    // insert new card to the bottom of new list
-    card.sort = Lists.findOne(card.listId).cards().count();

    if (title) {
-      card.title = title;
-      card.coverId = '';
-      const _id = card.copy(boardId, swimlaneId, listId);
+      // insert new card to the top of new list
+      const newCardId = Meteor.call('copyCard', card._id, boardId, swimlaneId, listId, true, {title: title});
+
      // In case the filter is active we need to add the newly inserted card in
      // the list of exceptions -- cards that are not filtered. Otherwise the
      // card will disappear instantly.
      // See https://github.com/wekan/wekan/issues/80
-      Filter.addException(_id);
-
-      Popup.back();
+      Filter.addException(newCardId);
    }
-  },
-});
+  }
+}).register('copyCardPopup');

-Template.convertChecklistItemToCardPopup.events({
-  'click .js-done'() {
-    const card = Utils.getCurrentCard();
-    const lSelect = $('.js-select-lists')[0];
-    const listId = lSelect.options[lSelect.selectedIndex].value;
-    const slSelect = $('.js-select-swimlanes')[0];
-    const swimlaneId = slSelect.options[slSelect.selectedIndex].value;
-    const bSelect = $('.js-select-boards')[0];
-    const boardId = bSelect.options[bSelect.selectedIndex].value;
-    const textarea = $('#copy-card-title');
+/** Convert Checklist-Item to card dialog */
+(class extends DialogWithBoardSwimlaneList {
+  getDialogOptions() {
+    const ret = Meteor.user().getMoveAndCopyDialogOptions();
+    return ret;
+  }
+  setDone(boardId, swimlaneId, listId, options) {
+    Meteor.user().setMoveAndCopyDialogOption(this.currentBoardId, options);
+    const card = this.data();
+
+    const textarea = this.$('#copy-card-title');
    const title = textarea.val().trim();

    if (title) {
@@ -921,68 +889,42 @@ Template.convertChecklistItemToCardPopup.events({
        swimlaneId: swimlaneId,
        sort: 0,
      });
+      const card = Cards.findOne(_id);
+      const minOrder = card.getMinSort();
+      card.move(card.boardId, card.swimlaneId, card.listId, minOrder - 1);
+
      Filter.addException(_id);
-
-      Popup.back();
-
    }
-  },
-});
+  }
+}).register('convertChecklistItemToCardPopup');

-Template.copyChecklistToManyCardsPopup.events({
-  'click .js-done'() {
-    const card = Utils.getCurrentCard();
-    const oldId = card._id;
-    card._id = null;
-    const lSelect = $('.js-select-lists')[0];
-    card.listId = lSelect.options[lSelect.selectedIndex].value;
-    const slSelect = $('.js-select-swimlanes')[0];
-    card.swimlaneId = slSelect.options[slSelect.selectedIndex].value;
-    const bSelect = $('.js-select-boards')[0];
-    card.boardId = bSelect.options[bSelect.selectedIndex].value;
-    const textarea = $('#copy-card-title');
-    const titleEntry = textarea.val().trim();
-    // insert new card to the bottom of new list
-    card.sort = Lists.findOne(card.listId).cards().count();
+/** Copy many cards dialog */
+(class extends DialogWithBoardSwimlaneList {
+  getDialogOptions() {
+    const ret = Meteor.user().getMoveAndCopyDialogOptions();
+    return ret;
+  }
+  setDone(boardId, swimlaneId, listId, options) {
+    Meteor.user().setMoveAndCopyDialogOption(this.currentBoardId, options);
+    const card = this.data();
+
+    const textarea = this.$('#copy-card-title');
+    const title = textarea.val().trim();
+
+    if (title) {
+      const titleList = JSON.parse(title);
+      for (const obj of titleList) {
+        const newCardId = Meteor.call('copyCard', card._id, boardId, swimlaneId, listId, false, {title: obj.title, description: obj.description});

-    if (titleEntry) {
-      const titleList = JSON.parse(titleEntry);
-      for (let i = 0; i < titleList.length; i++) {
-        const obj = titleList[i];
-        card.title = obj.title;
-        card.description = obj.description;
-        card.coverId = '';
-        const _id = Cards.insert(card);
        // In case the filter is active we need to add the newly inserted card in
        // the list of exceptions -- cards that are not filtered. Otherwise the
        // card will disappear instantly.
        // See https://github.com/wekan/wekan/issues/80
-        Filter.addException(_id);
-
-        // copy checklists
-        Checklists.find({ cardId: oldId }).forEach((ch) => {
-          ch.copy(_id);
-        });
-
-        // copy subtasks
-        const cursor = Cards.find({ parentId: oldId });
-        cursor.forEach(function () {
-          'use strict';
-          const subtask = arguments[0];
-          subtask.parentId = _id;
-          subtask._id = null;
-          /* const newSubtaskId = */ Cards.insert(subtask);
-        });
-
-        // copy card comments
-        CardComments.find({ cardId: oldId }).forEach((cmt) => {
-          cmt.copy(_id);
-        });
+        Filter.addException(newCardId);
      }
-      Popup.back();
    }
-  },
-});
+  }
+}).register('copyManyCardsPopup');

 BlazeComponent.extendComponent({
  onCreated() {
@@ -1089,30 +1031,11 @@ BlazeComponent.extendComponent({
  events() {
    return [
      {
-        'click .js-copy-card-link-to-clipboard'() {
-          // Clipboard code from:
-          // https://stackoverflow.com/questions/6300213/copy-selected-text-to-the-clipboard-without-using-flash-must-be-cross-browser
-          const StringToCopyElement = document.getElementById('cardURL');
-          StringToCopyElement.select();
-          if (document.execCommand('copy')) {
-            StringToCopyElement.blur();
-          } else {
-            document.getElementById('cardURL').selectionStart = 0;
-            document.getElementById('cardURL').selectionEnd = 999;
-            document.execCommand('copy');
-            if (window.getSelection) {
-              if (window.getSelection().empty) {
-                // Chrome
-                window.getSelection().empty();
-              } else if (window.getSelection().removeAllRanges) {
-                // Firefox
-                window.getSelection().removeAllRanges();
-              }
-            } else if (document.selection) {
-              // IE?
-              document.selection.empty();
-            }
-          }
+        'click .js-copy-card-link-to-clipboard'(event) {
+          const promise = Utils.copyTextToClipboard(location.origin + document.getElementById('cardURL').value);
+
+          const $tooltip = this.$('.copied-tooltip');
+          Utils.showCopied(promise, $tooltip);
        },
        'click .js-delete': Popup.afterConfirm('cardDelete', function () {
          Popup.close();
@@ -1654,10 +1577,29 @@ BlazeComponent.extendComponent({
 EscapeActions.register(
  'detailsPane',
  () => {
+    // if card description diverges from database due to editing
+    // ask user whether changes should be applied
+    if (Meteor.user()) {
+      if (Meteor.user().profile.rescueCardDescription == true) {
+        currentDescription = document.getElementsByClassName("editor js-new-description-input").item(0)
+        if (currentDescription?.value && !(currentDescription.value === Utils.getCurrentCard().getDescription())) {
+          if (confirm(TAPi18n.__('rescue-card-description-dialogue'))) {
+            Utils.getCurrentCard().setDescription(document.getElementsByClassName("editor js-new-description-input").item(0).value);
+            // Save it!
+            console.log(document.getElementsByClassName("editor js-new-description-input").item(0).value);
+            console.log("current description", Utils.getCurrentCard().getDescription());
+          } else {
+            // Do nothing!
+            console.log('Description changes were not saved to the database.');
+          }
+        }
+      }
+    }
    if (Session.get('cardDetailsIsDragging')) {
      // Reset dragging status as the mouse landed outside the cardDetails template area and this will prevent a mousedown event from firing
      Session.set('cardDetailsIsDragging', false);
      Session.set('cardDetailsIsMouseDown', false);
+
    } else {
      // Prevent close card when the user is selecting text and moves the mouse cursor outside the card detail area
      Utils.goBoardId(Session.get('currentBoard'));
@@ -1720,13 +1662,7 @@ Template.cardAssigneesPopup.helpers({

 Template.cardAssigneePopup.helpers({
  userData() {
-    // We need to handle a special case for the search results provided by the
-    // `matteodem:easy-search` package. Since these results gets published in a
-    // separate collection, and not in the standard Meteor.Users collection as
-    // expected, we use a component parameter ("property") to distinguish the
-    // two cases.
-    const userCollection = this.esSearch ? ESSearchResults : Users;
-    return userCollection.findOne(this.userId, {
+    return Users.findOne(this.userId, {
      fields: {
        profile: 1,
        username: 1,
@@ -1739,16 +1675,17 @@ Template.cardAssigneePopup.helpers({
    return user && user.isBoardAdmin() ? 'admin' : 'normal';
  },

-  presenceStatusClassName() {
-    const user = Users.findOne(this.userId);
-    const userPresence = presences.findOne({ userId: this.userId });
-    if (user && user.isInvitedTo(Session.get('currentBoard'))) return 'pending';
-    else if (!userPresence) return 'disconnected';
-    else if (Session.equals('currentBoard', userPresence.state.currentBoardId))
-      return 'active';
-    else return 'idle';
-  },
-
+  /*
+    presenceStatusClassName() {
+      const user = Users.findOne(this.userId);
+      const userPresence = presences.findOne({ userId: this.userId });
+      if (user && user.isInvitedTo(Session.get('currentBoard'))) return 'pending';
+      else if (!userPresence) return 'disconnected';
+      else if (Session.equals('currentBoard', userPresence.state.currentBoardId))
+        return 'active';
+      else return 'idle';
+    },
+  */
  isCardAssignee() {
    const card = Template.parentData();
    const cardAssignees = card.getAssignees();
@@ -1,547 +0,0 @@
-@import 'nib'
-
-// Assignee, code copied from wekan/client/users/userAvatar.styl
-
-avatar-radius = 50%
-
-.assignee
-  border-radius: 3px
-  display: block
-  position: relative
-  float: left
-  height: 30px
-  width: @height
-  margin: 0 4px 4px 0
-  cursor: pointer
-  user-select: none
-  z-index: 1
-  text-decoration: none
-  border-radius: avatar-radius
-
-  .avatar
-    overflow: hidden
-    border-radius: avatar-radius
-
-    &.avatar-assignee-initials
-      height: 70%
-      width: @height
-      padding: 15%
-      background-color: #dbdbdb
-      color: #444444
-      position: absolute
-
-    &.avatar-image
-      object-fit: cover;
-      object-position: center;
-      height: 100%
-      width: @height
-
-  .assignee-presence-status
-    background-color: #b3b3b3
-    border: 1px solid #fff
-    border-radius: 50%
-    height: 7px
-    width: @height
-    position: absolute
-    right: -1px
-    bottom: -1px
-    border: 1px solid white
-    z-index: 15
-
-    &.active
-      background: #64c464
-      border-color: #daf1da
-
-    &.idle
-      background: #e4e467
-      border-color: #f7f7d4
-
-    &.disconnected
-      background: #bdbdbd
-      border-color: #ededed
-
-    &.pending
-      background: #e44242
-      border-color: #f1dada
-
-
-
-  &.add-assignee
-    display: flex
-    align-items: center
-    justify-content: center
-    box-shadow: 0 0 0 2px darken(white, 25%) inset
-
-    &:hover, &.is-active
-      box-shadow: 0 0 0 2px darken(white, 60%) inset
-
-// Other card details
-
-.card-details
-  padding: 0
-  flex-shrink: 0
-  flex-basis: 600px
-  will-change: flex-basis
-  overflow-y: scroll
-  overflow-x: hidden
-  background: darken(white, 3%)
-  border-radius: bottom 3px
-  z-index: 20 !important
-  animation: flexGrowIn 0.1s
-  box-shadow: 0 0 7px 0 darken(white, 30%)
-  transition: flex-basis 0.1s
-  box-sizing: border-box
-
-  .mCustomScrollBox
-    padding-left: 0
-
-  .card-details-canvas
-    width: auto
-    padding: 0 20px
-
-  .card-details-header
-    margin: 0 -20px 5px
-    padding: 7px 20px
-    background: darken(white, 7%)
-    border-bottom: 1px solid darken(white, 14%)
-
-    .card-number {
-      color: darken(white, 30%);
-      display: inline-block;
-      margin-right: 5px;
-    }
-
-    .close-card-details,
-    .maximize-card-details,
-    .minimize-card-details,
-    .card-details-menu,
-    .card-copy-button,
-    .card-copy-mobile-button,
-    .close-card-details-mobile-web,
-    .card-details-menu-mobile-web
-      float: right
-
-    .close-card-details,
-    .maximize-card-details,
-    .minimize-card-details
-      font-size: 24px
-      padding: 5px 10px 5px 10px
-      margin-right: -8px
-
-    .close-card-details-mobile-web
-      font-size: 24px
-      padding: 5px
-      margin-right: 40px
-
-    .card-copy-button
-      font-size: 17px
-      padding: 10px
-      margin-right: 10px
-
-    .card-copy-mobile-button
-      font-size: 17px
-      padding: 10px
-      margin-right: 10px
-
-    .card-details-menu
-      font-size: 17px
-      padding: 10px
-
-    .card-details-menu-mobile-web
-      font-size: 17px
-      padding: 10px
-      margin-right: 30px
-
-    .card-details-watch
-      font-size: 17px
-      padding-left: 7px
-      color: #a6a6a6
-
-    .card-details-title
-      font-weight: bold
-      font-size: 1.33em
-      margin: 7px 0 0
-      padding: 0
-
-    .linked-card-location
-      font-style: italic
-      font-size: 1em
-      margin-bottom: 0
-      & p
-        margin-bottom: 0
-
-    form.inlined-form
-      margin-top: 5px
-      margin-bottom: 10px
-
-    .card-details-list
-      font-size: 0.85em
-      margin-bottom: 3px
-
-      a.card-details-list-title
-        font-weight: bold
-
-        &.is-editable
-          display: inline-block
-          background: darken(white, 10%)
-          border-radius: 3px
-          padding: 0px 5px
-
-  .card-description textarea
-    min-height: 100px
-
-  .card-details-items
-    display: flex
-    flex-wrap: wrap
-    margin: 15px 0
-
-    .card-details-item
-      margin-right: 0.5em
-      &:last-child
-        margin-right: 0
-      &.card-details-item-labels
-        display: block
-        word-wrap: break-word
-        max-width: 95%
-        flex-grow: 1
-      &.card-details-item-members,
-      &.card-details-item-assignees,
-      &.card-details-item-customfield,
-      &.card-details-item-name
-        display: block
-        word-wrap: break-word
-        max-width: 36%
-        flex-grow: 1
-      &.card-details-item-creator,
-      &.card-details-item-received,
-      &.card-details-item-start,
-      &.card-details-item-due,
-      &.card-details-item-end
-        display: block
-        word-wrap: break-word
-        max-width: 28%
-        flex-grow: 1
-      &.custom-fields
-        padding-left: 10px
-
-
-  .card-details-item-title
-    font-size: 16px
-    font-weight: bold
-    color: #4d4d4d
-
-  .activities
-    padding-top: 10px
-
-@media screen and (min-width: 801px)
-  .card-details-maximized
-    padding: 0
-    flex-shrink: 0
-    flex-basis: calc(100% - 20px)
-    will-change: flex-basis
-    overflow-y: scroll
-    overflow-x: scroll
-    background: darken(white, 3%)
-    border-radius: bottom 3px
-    z-index: 1000 !important
-    animation: flexGrowIn 0.1s
-    box-shadow: 0 0 7px 0 darken(white, 30%)
-    transition: flex-basis 0.1s
-    box-sizing: border-box
-    position: absolute
-    top: 0
-    left: 0
-    height: calc(100% - 20px)
-    width: calc(100% - 20px)
-    float: left
-
-    .card-details-left
-      float: left
-      top: 60px
-      left: 20px
-      width: 47%
-
-    .card-details-right
-      position: absolute
-      float: right
-      top: 20px
-      left: 50%
-
-    .card-details-header
-      width: 47%
-
-input[type="text"].attachment-add-link-input
-  float: left
-  margin: 0 0 8px
-  width: 80%
-
-input[type="submit"].attachment-add-link-submit
-  float: left
-  margin: 0 0 8px 4px
-  padding: 6px 12px
-  width: 18%
-
-@media screen and (max-width: 800px)
-  .card-details
-    width: calc(100% - 1px)
-    padding: 0px 20px 0px 20px
-    margin: 0px
-    transition: none
-    overflow-y: revert
-    overflow-x: revert
-
-    .card-details-canvas
-      width: 100%
-      padding-left: 0px
-
-    .card-details-header
-      .close-card-details
-        margin-right: 0px
-
-      .card-details-menu
-        margin-right: 40px
-
-      .maximize-card-details
-        margin-right: 40px
-
-      .minimize-card-details
-        margin-right: 40px
-
-  .card-details-popup
-    padding: 0px 10px
-
-  .pop-over > .content-wrapper > .popup-container-depth-0
-    width: 100%
-
-    & > .content
-      width: calc(100% - 10px)
-
-    & > .content > .card-details-popup hr
-        margin: 15px 0px
-
-      .card-details-header
-        margin: 0
-
-card-details-color(background, color...)
-  background: background !important
-  if color
-    color: color !important //overwrite text for better visibility
-
-.card-details-white
-  card-details-color(unset, #000) //Black text for better visibility
-  border: 1px solid #eee
-
-.card-details-green
-  card-details-color(#3cb500, #ffffff) //White text for better visibility
-
-.card-details-yellow
-  card-details-color(#fad900, #000) //Black text for better visibility
-
-.card-details-orange
-  card-details-color(#ff9f19, #000) //Black text for better visibility
-
-.card-details-red
-  card-details-color(#eb4646, #ffffff) //White text for better visibility
-
-.card-details-purple
-  card-details-color(#a632db, #ffffff) //White text for better visibility
-
-.card-details-blue
-  card-details-color(#0079bf, #ffffff) //White text for better visibility
-
-.card-details-pink
-  card-details-color(#ff78cb, #000) //Black text for better visibility
-
-.card-details-sky
-  card-details-color(#00c2e0, #ffffff) //White text for better visibility
-
-.card-details-black
-  card-details-color(#4d4d4d, #ffffff) //White text for better visibility
-
-.card-details-lime
-  card-details-color(#51e898, #000) //Black text for better visibility
-
-.card-details-silver
-  card-details-color(#c0c0c0, #000) //Black text for better visibility
-
-.card-details-peachpuff
-  card-details-color(#ffdab9, #000) //Black text for better visibility
-
-.card-details-crimson
-  card-details-color(#dc143c, #ffffff) //White text for better visibility
-
-.card-details-plum
-  card-details-color(#dda0dd, #000) //Black text for better visibility
-
-.card-details-darkgreen
-  card-details-color(#006400, #ffffff) //White text for better visibility
-
-.card-details-slateblue
-  card-details-color(#6a5acd, #ffffff) //White text for better visibility
-
-.card-details-magenta
-  card-details-color(#ff00ff, #ffffff) //White text for better visibility
-
-.card-details-gold
-  card-details-color(#ffd700, #000) //Black text for better visibility
-
-.card-details-navy
-  card-details-color(#000080, #ffffff) //White text for better visibility
-
-.card-details-gray
-  card-details-color(#808080, #ffffff) //White text for better visibility
-
-.card-details-saddlebrown
-  card-details-color(#8b4513, #ffffff) //White text for better visibility
-
-.card-details-paleturquoise
-  card-details-color(#afeeee, #000) //Black text for better visibility
-
-.card-details-mistyrose
-  card-details-color(#ffe4e1, #000) //Black text for better visibility
-
-.card-details-indigo
-  card-details-color(#4b0082, #ffffff) //White text for better visibility
-
-.voted
-  opacity: .7
-.vote-title
-  display: flex
-  justify-content: space-between
-
-  .js-edit-date
-    align-self: baseline
-    margin-left: 5px
-
-.vote-result
-  display: flex
-.js-show-positive-votes
-  cursor: pointer
-
-.poker-voted
-  opacity: .7
-
-.poker-title
-  display: flex
-  justify-content: space-between
-
-  .js-edit-date
-    align-self: baseline
-    margin-left: 5px
-
-.poker-result
-  display: flex
-  flex-flow: row wrap
-.js-show-positive-poker-votes
-  cursor: pointer
-
-.poker-deck
-  display: grid
-  flex-direction: column
-  text-align: center
-
-.poker-card-result
-  width: 32px
-  font-size: 1em
-  font-weight: bold
-  padding: 4px 2px 4px 2px
-  cursor: default
-
-.winner
-  font-weight: bold
-  outline: #2d2d2d solid 2px
-
-.loser
-  opacity: .5
-
-.responsive-table
-  overflow-x: auto
-
-.poker-table
-  display: table
-  width: 100%
-  padding-top: 10px
-
-.poker-table-row
-  display: table-row
-
-.poker-table-heading
-  background-color: #EEE
-  display: table-header-group
-
-.poker-table-cell
-  display: table-cell
-  padding: 0 0 5px 2px
-  border-bottom: 1px solid #d2d0d0
-  text-align: center
-  min-width: 45px
-
-.poker-table-cell-who
-  width: 150px
-  vertical-align: middle
-
-.poker-table-heading-left,
-.poker-table-heading-right
-  display: table-header-group
-  font-weight: bold
-  border-top: 1px solid #808080
-
-@media (max-width: 400px)
-  .poker-table-heading-right
-    display: none
-
-.poker-table-body
-  display: table-row-group
-
-.poker-table-side-left,
-.poker-table-side-right
-  display: inline-block
-
-.poker-table-side-right
-  padding-left: 10px
-
-@media (max-width: 400px)
-  .poker-table-side-right
-    padding-left: 0px
-
-.estimation-add
-  display: block
-  overflow: auto
-  margin-top: 15px
-  margin-bottom: 5px
-  input
-    display: inline-block
-    float: right
-    margin: auto
-    margin-right: 10px
-    width: 100px
-  button
-    display: inline-block
-    float: right
-    margin: auto
-
-.poker-card
-  width:48px
-  height:72px
-  float:left
-  background:#fff
-  border-radius:5px
-  display:table
-  box-sizing:border-box
-  padding:5px
-  margin:3px
-  font-size:20px
-  font-weight: bold
-  text-shadow: #2d2d2d 1px 1px 0
-  box-shadow:0 0 5px #aaaaaa
-  text-align:center
-  position:relative
-  cursor: pointer
-
-  .inner
-    display:table-cell
-    vertical-align:middle
-    border-radius:5px
-    overflow:hidden
-    background-color: #cecece
-
@@ -0,0 +1,18 @@
+.card-time {
+  display: block;
+  border-radius: 4px;
+  padding: 1px 3px;
+  color: #fff;
+  background-color: #dbdbdb;
+}
+.card-time:hover,
+.card-time.is-active {
+  background-color: #b3b3b3;
+}
+.card-time time::before {
+  font: normal normal normal 14px/1 FontAwesome;
+  font-size: inherit;
+  -webkit-font-smoothing: antialiased;
+  content: "\f017";
+  margin-right: 0.3em;
+}
@@ -1,3 +1,5 @@
+import { TAPi18n } from '/imports/i18n';
+
 BlazeComponent.extendComponent({
  template() {
    return 'editCardSpentTime';
@@ -1,17 +0,0 @@
-.card-time
-  display: block
-  border-radius: 4px
-  padding: 1px 3px
-  color: #fff
-
-  background-color: #dbdbdb
-  &:hover, &.is-active
-    background-color: #b3b3b3
-
-  time
-    &::before
-      font: normal normal normal 14px/1 FontAwesome
-      font-size: inherit
-      -webkit-font-smoothing: antialiased
-      content: "\f017"  // clock symbol
-      margin-right: 0.3em
@@ -0,0 +1,173 @@
+.js-add-checklist {
+  color: #8c8c8c;
+}
+textarea.js-add-checklist-item,
+textarea.js-edit-checklist-item {
+  overflow: hidden;
+  word-wrap: break-word;
+  resize: none;
+  height: 34px;
+}
+.delete-text,
+.js-delete-checklist-item,
+.js-convert-checklist-item-to-card {
+  color: #8c8c8c;
+  text-decoration: underline;
+  word-wrap: break-word;
+  float: right;
+  padding-top: 6px;
+}
+.delete-text:hover,
+.js-delete-checklist-item:hover,
+.js-convert-checklist-item-to-card:hover {
+  color: inherit;
+}
+.checklists-title {
+  display: flex;
+  justify-content: space-between;
+}
+.checklist-progress-bar-container {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+.checklist-progress-bar-container .checklist-progress-text {
+  margin-right: 10px;
+}
+.checklist-progress-bar-container .checklist-progress-bar {
+  width: 80%;
+  height: 10px;
+}
+.checklist-progress-bar-container .checklist-progress-bar .checklist-progress {
+  color: #fff !important;
+  background-color: #2196f3 !important;
+  padding: 0.01em 16px;
+  border-radius: 16px;
+  height: 100%;
+}
+.checklist-title .checkbox {
+  float: left;
+  width: 30px;
+  height: 30px;
+  font-size: 18px;
+  line-height: 30px;
+}
+.checklist-title .title {
+  font-size: 18px;
+  line-height: 25px;
+}
+.checklist-title .checklist-stat {
+  margin: 0 0.5em;
+  float: right;
+  padding-top: 6px;
+}
+.checklist-title .checklist-stat.is-finished {
+  color: #3cb500;
+}
+.checklist-title span.fa.checklist-handle {
+  padding-right: 20px;
+  padding-top: 3px;
+  float: left;
+}
+#card-details-overlay {
+  top: 0;
+  bottom: -600px;
+  right: 0;
+}
+.checklist {
+  background: #f7f7f7;
+}
+.checklist.placeholder {
+  background: #ccc;
+  border-radius: 2px;
+}
+.checklist.ui-sortable-helper {
+  box-shadow: -2px 2px 8px rgba(0,0,0,0.3), 0 0 1px rgba(0,0,0,0.5);
+  transform: rotate(4deg);
+  cursor: grabbing;
+}
+.checklist-item {
+  margin: 0 0 0 0.1em;
+  line-height: 18px;
+  font-size: 1.1em;
+  margin-top: 3px;
+  display: flex;
+  background: #f7f7f7;
+  opacity: 1;
+  transition: height 0ms 400ms, opacity 400ms 0ms;
+  height: auto;
+  overflow: hidden;
+}
+.checklist-item.is-checked.invisible {
+  opacity: 0;
+  height: 0;
+  transition: height 0ms 0ms, opacity 600ms 0ms;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+.checklist-item.placeholder {
+  background: #ccc;
+  border-radius: 2px;
+}
+.checklist-item.ui-sortable-helper {
+  box-shadow: -2px 2px 8px rgba(0,0,0,0.3), 0 0 1px rgba(0,0,0,0.5);
+  transform: rotate(4deg);
+  cursor: grabbing;
+}
+.checklist-item:hover {
+  background-color: #ebebeb;
+}
+.checklist-item .check-box-container {
+  padding-right: 10px;
+}
+.checklist-item .check-box {
+  margin: 0.1em 0 0 0;
+}
+.checklist-item .check-box.is-checked {
+  border-bottom: 2px solid #3cb500;
+  border-right: 2px solid #3cb500;
+}
+.checklist-item .item-title {
+  flex: 1;
+}
+.checklist-item .item-title.is-checked {
+  color: #8c8c8c;
+  font-style: italic;
+  text-decoration: line-through;
+}
+.checklist-item .item-title .viewer p {
+  margin-bottom: 2px;
+  display: block;
+  word-wrap: break-word;
+  max-width: 420px;
+}
+.checklist-item span.fa.checklistitem-handle {
+  padding-top: 2px;
+  padding-right: 10px;
+}
+.js-delete-checklist-item,
+.js-convert-checklist-item-to-card {
+  margin: 0 0 0.5em 1.33em;
+  padding: 12px 0 0 0;
+}
+.add-checklist-item {
+  margin: 0.2em 0 0.5em 1.33em;
+}
+.add-checklist-item.js-open-inlined-form,
+.add-checklist.js-open-inlined-form {
+  display: block;
+  width: 50%;
+}
+.add-checklist-item.js-open-inlined-form:hover,
+.add-checklist.js-open-inlined-form:hover {
+  background: #dbdbdb;
+  color: #222;
+  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
+}
+.checklist-details-menu {
+  float: right;
+  padding: 6px 10px 6px 10px;
+}
+.edit-controls label.toggle-label {
+  margin-left: 2px;
+}
@@ -12,18 +12,13 @@ template(name="checklists")
          input.toggle-switch(type="checkbox" id="toggleHideCheckedItemsButton")
        label.toggle-label(for="toggleHideCheckedItemsButton")

-  if toggleDeleteDialog.get
-    .board-overlay#card-details-overlay
-    +checklistDeleteDialog(checklist = checklistToDelete)
-
-
  .card-checklist-items
    each checklist in checklists
      +checklistDetail(checklist = checklist)

  if canModifyCard
    +inlinedForm(autoclose=false classNames="js-add-checklist" cardId = cardId)
-      +addChecklistItemForm
+      +addChecklistItemForm(checklist=checklist showNewlineBecomesNewChecklistItem=false)
    else
      a.add-checklist.js-open-inlined-form(title="{{_ 'add-checklist'}}")
        i.fa.fa-plus
@@ -36,39 +31,45 @@ template(name="checklistDetail")
      .checklist-title
        span
        if canModifyCard
-          a.js-delete-checklist.toggle-delete-checklist-dialog {{_ "delete"}}...
+          a.fa.fa-navicon.checklist-details-menu.js-open-checklist-details-menu(title="{{_ 'checklistActionsPopup-title'}}")

        if canModifyCard
-          h2.title.js-open-inlined-form.is-editable
-            if isMiniScreenOrShowDesktopDragHandles
+          h4.title.js-open-inlined-form.is-editable
+            if isTouchScreenOrShowDesktopDragHandles
              span.fa.checklist-handle(class="fa-arrows" title="{{_ 'dragChecklist'}}")
            +viewer
              = checklist.title
        else
-          h2.title
+          h4.title
            +viewer
                = checklist.title
+
+    if $gt finishedPercent 0
+      .checklist-progress-bar-container
+        .checklist-progress-text {{finishedPercent}}%
+        .checklist-progress-bar
+          .checklist-progress(style="width:{{finishedPercent}}%")
    +checklistItems(checklist = checklist)

-template(name="checklistDeleteDialog")
-  .js-confirm-checklist-delete
-    p
-      i(class="fa fa-exclamation-triangle" aria-hidden="true")
-    p
-      | {{_ 'confirm-checklist-delete-dialog'}}
-      span {{checklist.title}}
-      | ?
-    .js-checklist-delete-buttons
-      button.confirm-checklist-delete(type="button") {{_ 'delete'}}
-      button.toggle-delete-checklist-dialog(type="button") {{_ 'cancel'}}
+template(name="checklistDeletePopup")
+  p {{_ 'confirm-checklist-delete-popup'}}
+  button.js-confirm.negate.full(type="submit") {{_ 'delete'}}

 template(name="addChecklistItemForm")
+  a.fa.fa-copy(title="{{_ 'copy-text-to-clipboard'}}")
+  span.copied-tooltip {{_ 'copied'}}
  textarea.js-add-checklist-item(rows='1' autofocus)
  .edit-controls.clearfix
    button.primary.confirm.js-submit-add-checklist-item-form(type="submit") {{_ 'save'}}
-    a.fa.fa-times-thin.js-close-inlined-form
+    a.fa.fa-times-thin.js-close-inlined-form(title="{{_ 'close-add-checklist-item'}}")
+    if showNewlineBecomesNewChecklistItem
+      .material-toggle-switch(title="{{_ 'newlineBecomesNewChecklistItem'}}")
+        input.toggle-switch(type="checkbox" id="toggleNewlineBecomesNewChecklistItem")
+        label.toggle-label(for="toggleNewlineBecomesNewChecklistItem")

 template(name="editChecklistItemForm")
+  a.fa.fa-copy(title="{{_ 'copy-text-to-clipboard'}}")
+  span.copied-tooltip {{_ 'copied'}}
  textarea.js-edit-checklist-item(rows='1' autofocus dir="auto")
    if $eq type 'item'
      = item.title
@@ -76,7 +77,7 @@ template(name="editChecklistItemForm")
      = checklist.title
  .edit-controls.clearfix
    button.primary.confirm.js-submit-edit-checklist-item-form(type="submit") {{_ 'save'}}
-    a.fa.fa-times-thin.js-close-inlined-form
+    a.fa.fa-times-thin.js-close-inlined-form(title="{{_ 'close-edit-checklist-item'}}")
    span(title=createdAt) {{ moment createdAt }}
    if canModifyCard
      a.js-delete-checklist-item {{_ "delete"}}...
@@ -93,17 +94,18 @@ template(name="checklistItems")
        +checklistItemDetail(item = item checklist = checklist)
    if canModifyCard
      +inlinedForm(autoclose=false classNames="js-add-checklist-item" checklist = checklist)
-        +addChecklistItemForm
+        +addChecklistItemForm(checklist=checklist showNewlineBecomesNewChecklistItem=true)
      else
        a.add-checklist-item.js-open-inlined-form(title="{{_ 'add-checklist-item'}}")
          i.fa.fa-plus

 template(name='checklistItemDetail')
-  .js-checklist-item.checklist-item(class="{{#if item.isFinished }}is-checked{{#if hideCheckedItems}} invisible{{/if}}{{/if}}")
+  .js-checklist-item.checklist-item(class="{{#if item.isFinished }}is-checked{{#if hideCheckedItems}} invisible{{/if}}{{/if}}"
+    role="checkbox" aria-checked="{{#if item.isFinished }}true{{else}}false{{/if}}" tabindex="0")
    if canModifyCard
      .check-box-container
        .check-box.materialCheckBox(class="{{#if item.isFinished }}is-checked{{/if}}")
-      if isMiniScreenOrShowDesktopDragHandles
+      if isTouchScreenOrShowDesktopDragHandles
        span.fa.checklistitem-handle(class="fa-arrows" title="{{_ 'dragChecklistItem'}}")
      .item-title.js-open-inlined-form.is-editable(class="{{#if item.isFinished }}is-checked{{/if}}")
        +viewer
@@ -114,13 +116,26 @@ template(name='checklistItemDetail')
        +viewer
          = item.title

-template(name="convertChecklistItemToCardPopup")
-  label(for='convert-checklist-item-to-card-title') {{_ 'title'}}:
-  textarea#copy-card-title.minicard-composer-textarea.js-card-title(autofocus)
-    = item.title
-  +boardsSwimlanesAndLists
+template(name="checklistActionsPopup")
+  ul.pop-over-list
+    li
+      a.js-delete-checklist.delete-checklist
+        i.fa.fa-trash
+        | {{_ "delete"}} ...
+      a.js-move-checklist.move-checklist
+        i.fa.fa-arrow-right
+        | {{_ "moveChecklist"}} ...
+      a.js-copy-checklist.copy-checklist
+        i.fa.fa-copy
+        | {{_ "copyChecklist"}} ...

-template(name="boardsSwimlanesAndLists")
+template(name="copyChecklistPopup")
+  +copyAndMoveChecklist
+
+template(name="moveChecklistPopup")
+  +copyAndMoveChecklist
+
+template(name="copyAndMoveChecklist")
  unless currentUser.isWorker
    label {{_ 'boards'}}:
    select.js-select-boards(autofocus)
@@ -128,17 +143,22 @@ template(name="boardsSwimlanesAndLists")
        if $eq _id currentBoard._id
          option(value="{{_id}}" selected) {{_ 'current'}}
        else
-          option(value="{{_id}}") {{title}}
+          option(value="{{_id}}" selected="{{#if isDialogOptionBoardId _id}}selected{{/if}}") {{title}}

  label {{_ 'swimlanes'}}:
  select.js-select-swimlanes
    each swimlanes
-      option(value="{{_id}}") {{title}}
+      option(value="{{_id}}" selected="{{#if isDialogOptionSwimlaneId _id}}selected{{/if}}") {{title}}

  label {{_ 'lists'}}:
  select.js-select-lists
-    each aBoardLists
-      option(value="{{_id}}") {{title}}
+    each lists
+      option(value="{{_id}}" selected="{{#if isDialogOptionListId _id}}selected{{/if}}") {{title}}
+
+  label {{_ 'cards'}}:
+  select.js-select-cards
+    each cards
+      option(value="{{_id}}" selected="{{#if isDialogOptionCardId _id}}selected{{/if}}") {{title}}

  .edit-controls.clearfix
    button.primary.confirm.js-done {{_ 'done'}}
@@ -1,5 +1,7 @@
+import { TAPi18n } from '/imports/i18n';
 import Cards from '/models/cards';
 import Boards from '/models/boards';
+import { DialogWithBoardSwimlaneListCard } from '/client/lib/dialogWithBoardSwimlaneListCard';

 const subManager = new SubsManager();
 const { calculateIndexData, capitalize } = Utils;
@@ -47,7 +49,7 @@ BlazeComponent.extendComponent({
    const self = this;
    self.itemsDom = this.$('.js-checklist-items');
    initSorting(self.itemsDom);
-    self.itemsDom.mousedown(function(evt) {
+    self.itemsDom.mousedown(function (evt) {
      evt.stopPropagation();
    });

@@ -60,7 +62,7 @@ BlazeComponent.extendComponent({
      const $itemsDom = $(self.itemsDom);
      if ($itemsDom.data('uiSortable') || $itemsDom.data('sortable')) {
        $(self.itemsDom).sortable('option', 'disabled', !userIsMember());
-        if (Utils.isMiniScreenOrShowDesktopDragHandles()) {
+        if (Utils.isTouchScreenOrShowDesktopDragHandles()) {
          $(self.itemsDom).sortable({
            handle: 'span.fa.checklistitem-handle',
          });
@@ -77,6 +79,12 @@ BlazeComponent.extendComponent({
      !Meteor.user().isWorker()
    );
  },
+
+  /** returns the finished percent of the checklist */
+  finishedPercent() {
+    const ret = this.data().checklist.finishedPercent();
+    return ret;
+  },
 }).register('checklistDetail');

 BlazeComponent.extendComponent({
@@ -86,7 +94,8 @@ BlazeComponent.extendComponent({
    const title = textarea.value.trim();
    let cardId = this.currentData().cardId;
    const card = Cards.findOne(cardId);
-    if (card.isLinked()) cardId = card.linkedId;
+    //if (card.isLinked()) cardId = card.linkedId;
+    if (card.isLinkedCard()) cardId = card.linkedId;

    if (title) {
      Checklists.insert({
@@ -105,16 +114,23 @@ BlazeComponent.extendComponent({
  addChecklistItem(event) {
    event.preventDefault();
    const textarea = this.find('textarea.js-add-checklist-item');
+    const newlineBecomesNewChecklistItem = this.find('input#toggleNewlineBecomesNewChecklistItem');
    const title = textarea.value.trim();
    const checklist = this.currentData().checklist;

    if (title) {
-      ChecklistItems.insert({
-        title,
-        checklistId: checklist._id,
-        cardId: checklist.cardId,
-        sort: Utils.calculateIndexData(checklist.lastItem()).base,
-      });
+      let checklistItems = [title];
+      if (newlineBecomesNewChecklistItem.checked) {
+        checklistItems = title.split('\n').map(_value => _value.trim());
+      }
+      for (let checklistItem of checklistItems) {
+        ChecklistItems.insert({
+          title: checklistItem,
+          checklistId: checklist._id,
+          cardId: checklist.cardId,
+          sort: Utils.calculateIndexData(checklist.lastItem()).base,
+        });
+      }
    }
    // We keep the form opened, empty it.
    textarea.value = '';
@@ -130,14 +146,6 @@ BlazeComponent.extendComponent({
    );
  },

-  deleteChecklist() {
-    const checklist = this.currentData().checklist;
-    if (checklist && checklist._id) {
-      Checklists.remove(checklist._id);
-      this.toggleDeleteDialog.set(false);
-    }
-  },
-
  deleteItem() {
    const checklist = this.currentData().checklist;
    const item = this.currentData().item;
@@ -163,11 +171,6 @@ BlazeComponent.extendComponent({
    item.setTitle(title);
  },

-  onCreated() {
-    this.toggleDeleteDialog = new ReactiveVar(false);
-    this.checklistToDelete = null; //Store data context to pass to checklistDeleteDialog template
-  },
-
  pressKey(event) {
    //If user press enter key inside a form, submit it
    //Unless the user is also holding down the 'shift' key
@@ -195,12 +198,6 @@ BlazeComponent.extendComponent({

  events() {
    const events = {
-      'click .toggle-delete-checklist-dialog'(event) {
-        if ($(event.target).hasClass('js-delete-checklist')) {
-          this.checklistToDelete = this.currentData().checklist; //Store data context
-        }
-        this.toggleDeleteDialog.set(!this.toggleDeleteDialog.get());
-      },
      'click #toggleHideCheckedItemsButton'() {
        Meteor.call('toggleHideCheckedItems');
      },
@@ -209,13 +206,13 @@ BlazeComponent.extendComponent({
    return [
      {
        ...events,
+        'click .js-open-checklist-details-menu': Popup.open('checklistActions'),
        'submit .js-add-checklist': this.addChecklist,
        'submit .js-edit-checklist-title': this.editChecklist,
        'submit .js-add-checklist-item': this.addChecklistItem,
        'submit .js-edit-checklist-item': this.editChecklistItem,
        'click .js-convert-checklist-item-to-card': Popup.open('convertChecklistItemToCard'),
        'click .js-delete-checklist-item': this.deleteItem,
-        'click .confirm-checklist-delete': this.deleteChecklist,
        'focus .js-add-checklist-item': this.focusChecklistItem,
        // add and delete checklist / checklist-item
        'click .js-open-inlined-form': this.closeAllInlinedForms,
@@ -279,39 +276,77 @@ Template.checklists.helpers({
  },
 });

-Template.addChecklistItemForm.onRendered(() => {
-  autosize($('textarea.js-add-checklist-item'));
-});
+BlazeComponent.extendComponent({
+  onRendered() {
+    autosize(this.$('textarea.js-add-checklist-item'));
+  },
+  canModifyCard() {
+    return (
+      Meteor.user() &&
+      Meteor.user().isBoardMember() &&
+      !Meteor.user().isCommentOnly() &&
+      !Meteor.user().isWorker()
+    );
+  },
+  events() {
+    return [
+      {
+        'click a.fa.fa-copy'(event) {
+          const $editor = this.$('textarea');
+          const promise = Utils.copyTextToClipboard($editor[0].value);

-Template.editChecklistItemForm.onRendered(() => {
-  autosize($('textarea.js-edit-checklist-item'));
-});
+          const $tooltip = this.$('.copied-tooltip');
+          Utils.showCopied(promise, $tooltip);
+        },
+      }
+    ];
+  }
+}).register('addChecklistItemForm');

-Template.checklistDeleteDialog.onCreated(() => {
-  const $cardDetails = this.$('.card-details');
-  this.scrollState = {
-    position: $cardDetails.scrollTop(), //save current scroll position
-    top: false, //required for smooth scroll animation
-  };
-  //Callback's purpose is to only prevent scrolling after animation is complete
-  $cardDetails.animate({ scrollTop: 0 }, 500, () => {
-    this.scrollState.top = true;
-  });
+BlazeComponent.extendComponent({
+  events() {
+    return [
+      {
+        'click .js-delete-checklist': Popup.afterConfirm('checklistDelete', function () {
+          Popup.back(2);
+          const checklist = this.checklist;
+          if (checklist && checklist._id) {
+            Checklists.remove(checklist._id);
+          }
+        }),
+        'click .js-move-checklist': Popup.open('moveChecklist'),
+        'click .js-copy-checklist': Popup.open('copyChecklist'),
+      }
+    ]
+  }
+}).register('checklistActionsPopup');

-  //Prevent scrolling while dialog is open
-  $cardDetails.on('scroll', () => {
-    if (this.scrollState.top) {
-      //If it's already in position, keep it there. Otherwise let animation scroll
-      $cardDetails.scrollTop(0);
-    }
-  });
-});
+BlazeComponent.extendComponent({
+  onRendered() {
+    autosize(this.$('textarea.js-edit-checklist-item'));
+  },
+  canModifyCard() {
+    return (
+      Meteor.user() &&
+      Meteor.user().isBoardMember() &&
+      !Meteor.user().isCommentOnly() &&
+      !Meteor.user().isWorker()
+    );
+  },
+  events() {
+    return [
+      {
+        'click a.fa.fa-copy'(event) {
+          const $editor = this.$('textarea');
+          const promise = Utils.copyTextToClipboard($editor[0].value);

-Template.checklistDeleteDialog.onDestroyed(() => {
-  const $cardDetails = this.$('.card-details');
-  $cardDetails.off('scroll'); //Reactivate scrolling
-  $cardDetails.animate({ scrollTop: this.scrollState.position });
-});
+          const $tooltip = this.$('.copied-tooltip');
+          Utils.showCopied(promise, $tooltip);
+        },
+      }
+    ];
+  }
+}).register('editChecklistItemForm');

 Template.checklistItemDetail.helpers({
  canModifyCard() {
@@ -345,3 +380,27 @@ BlazeComponent.extendComponent({
    ];
  },
 }).register('checklistItemDetail');
+
+/** Move Checklist Dialog */
+(class extends DialogWithBoardSwimlaneListCard {
+  getDialogOptions() {
+    const ret = Meteor.user().getMoveChecklistDialogOptions();
+    return ret;
+  }
+  setDone(cardId, options) {
+    Meteor.user().setMoveChecklistDialogOption(this.currentBoardId, options);
+    this.data().checklist.move(cardId);
+  }
+}).register('moveChecklistPopup');
+
+/** Copy Checklist Dialog */
+(class extends DialogWithBoardSwimlaneListCard {
+  getDialogOptions() {
+    const ret = Meteor.user().getCopyChecklistDialogOptions();
+    return ret;
+  }
+  setDone(cardId, options) {
+    Meteor.user().setCopyChecklistDialogOption(this.currentBoardId, options);
+    this.data().checklist.copy(cardId);
+  }
+}).register('copyChecklistPopup');
@@ -1,179 +0,0 @@
-.js-add-checklist
-  color: #8c8c8c
-
-textarea.js-add-checklist-item, textarea.js-edit-checklist-item
-  overflow: hidden
-  word-wrap: break-word
-  resize: none
-  height: 34px
-
-.delete-text
-  color: #8c8c8c
-  text-decoration: underline
-  word-wrap: break-word
-  float: right
-  padding-top: 6px
-  &:hover
-    color: inherit
-
-.checklists-title
-  display: flex
-  justify-content: space-between
-
-.checklist-title
-  .checkbox
-    float: left
-    width: 30px
-    height 30px
-    font-size: 18px
-    line-height: 30px
-
-  .title
-    font-size: 18px
-    line-height: 25px
-
-  .checklist-stat
-    margin: 0 0.5em
-    float: right
-    padding-top: 6px
-    &.is-finished
-      color: #3cb500
-
-  .js-delete-checklist
-    @extends .delete-text
-
-  span.fa.checklist-handle
-    padding-right: 20px
-    padding-top: 3px
-    float: left
-
-
-.js-confirm-checklist-delete
-  background-color: darken(white, 3%)
-  position: absolute
-  float: left;
-  width: 60%
-  margin-top: 0
-  margin-left: 13%
-  padding-bottom: 2%
-  padding-left: 3%
-  padding-right: 3%
-  z-index: 17
-  border-radius: 3px
-
-  p
-    position: relative
-    margin-top: 3%
-    width: 100%
-    text-align: center
-    span
-      font-weight: bold
-
-    i
-      font-size: 2em
-
-  .js-checklist-delete-buttons
-    position: relative
-    padding: left 2% right 2%
-    .confirm-checklist-delete
-      margin-left: 12%
-      float: left
-    .toggle-delete-checklist-dialog
-      margin-right: 12%
-      float: right
-
-#card-details-overlay
-  top: 0
-  bottom: -600px
-  right: 0
-
-.checklist
-  background: darken(white, 3%)
-
-  &.placeholder
-    background: darken(white, 20%)
-    border-radius: 2px
-
-  &.ui-sortable-helper
-    box-shadow: -2px 2px 8px rgba(0, 0, 0, .3),
-                0 0 1px rgba(0, 0, 0, .5)
-    transform: rotate(4deg)
-    cursor: grabbing
-
-
-.checklist-item
-  margin: 0 0 0 0.1em
-  line-height: 18px
-  font-size: 1.1em
-  margin-top: 3px
-  display: flex
-  background: darken(white, 3%)
-  opacity: 1
-  transition: height 0ms 400ms, opacity 400ms 0ms
-  height: auto
-  overflow: hidden
-
-  &.is-checked.invisible
-    opacity: 0
-    height: 0
-    transition: height 0ms 0ms, opacity 600ms 0ms
-    margin-top: 0
-    margin-bottom: 0
-
-  &.placeholder
-    background: darken(white, 20%)
-    border-radius: 2px
-
-  &.ui-sortable-helper
-    box-shadow: -2px 2px 8px rgba(0, 0, 0, .3),
-                0 0 1px rgba(0, 0, 0, .5)
-    transform: rotate(4deg)
-    cursor: grabbing
-
-  &:hover
-    background-color: darken(white, 8%)
-
-  .check-box-container
-    padding-right: 10px;
-
-  .check-box
-    margin: 0.1em 0 0 0;
-    &.is-checked
-      border-bottom: 2px solid #3cb500
-      border-right: 2px solid #3cb500
-
-  .item-title
-    flex: 1
-    &.is-checked
-      color: #8c8c8c
-      font-style: italic
-      text-decoration: line-through
-    & .viewer
-      p
-        margin-bottom: 2px
-        display: block
-        word-wrap: break-word
-        max-width: 420px
-
-  span.fa.checklistitem-handle
-    padding-top: 2px
-    padding-right: 10px;
-
-.js-delete-checklist-item,
-.js-convert-checklist-item-to-card
-  margin: 0 0 0.5em 1.33em
-  @extends .delete-text
-  padding: 12px 0 0 0
-
-.add-checklist-item
-  margin: 0.2em 0 0.5em 1.33em
-
-.add-checklist-item,.add-checklist
-  &.js-open-inlined-form
-    display: block
-    width: 50%
-
-    &:hover
-      background: #dbdbdb
-      color: #222
-      box-shadow: 0 1px 2px rgba(0,0,0,.2)
@@ -0,0 +1,230 @@
+.card-label {
+  border: 1px solid #000;
+  border-radius: 4px;
+  color: #fff;
+  display: inline-block;
+  font-weight: 700;
+  font-size: 13px;
+  margin-right: 4px;
+  margin-bottom: 5px;
+  padding: 3px 8px;
+  max-width: 210px;
+  min-width: 8px;
+  word-wrap: break-word;
+  min-height: 18px;
+  vertical-align: middle;
+  white-space: initial;
+  overflow: initial;
+}
+.card-label:hover {
+  color: #fff;
+}
+.card-label.square {
+  height: 30px;
+  width: 30px;
+  padding: 0;
+}
+.card-label.add-label {
+  box-shadow: 0 0 0 2px #bfbfbf inset;
+  border: initial;
+}
+.card-label.add-label:hover,
+.card-label.add-label.is-active {
+  box-shadow: 0 0 0 2px #666 inset;
+}
+.card-label p {
+  margin: 0px;
+}
+.palette-colors {
+  display: flex;
+  flex-wrap: wrap;
+}
+.palette-colors .palette-color {
+  flex-grow: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.card-label-white {
+  background-color: #fff;
+  color: #000;
+}
+.card-label-white:hover {
+  color: #aaa;
+}
+.card-label-green {
+  background-color: #3cb500;
+}
+.card-label-green:hover {
+  color: #000;
+}
+.card-label-yellow {
+  background-color: #fad900;
+  color: #000;
+}
+.card-label-orange {
+  background-color: #ff9f19;
+  color: #000;
+}
+.card-label-red {
+  background-color: #eb4646;
+}
+.card-label-purple {
+  background-color: #a632db;
+}
+.card-label-blue {
+  background-color: #0079bf;
+}
+.card-label-pink {
+  background-color: #ff78cb;
+  color: #000;
+}
+.card-label-sky {
+  background-color: #00c2e0;
+}
+.card-label-black {
+  background-color: #4d4d4d;
+}
+.card-label-lime {
+  background-color: #51e898;
+  color: #000;
+}
+.card-label-silver {
+  background-color: #c0c0c0;
+  color: #000;
+}
+.card-label-peachpuff {
+  background-color: #ffdab9;
+  color: #000;
+}
+.card-label-crimson {
+  background-color: #dc143c;
+}
+.card-label-plum {
+  background-color: #dda0dd;
+  color: #000;
+}
+.card-label-darkgreen {
+  background-color: #006400;
+}
+.card-label-slateblue {
+  background-color: #6a5acd;
+}
+.card-label-magenta {
+  background-color: #f0f;
+}
+.card-label-gold {
+  background-color: #ffd700;
+  color: #000;
+}
+.card-label-navy {
+  background-color: #000080;
+}
+.card-label-gray {
+  background-color: #808080;
+}
+.card-label-saddlebrown {
+  background-color: #8b4513;
+}
+.card-label-paleturquoise {
+  background-color: #afeeee;
+  color: #000;
+}
+.card-label-mistyrose {
+  background-color: #ffe4e1;
+  color: #000;
+}
+.card-label-indigo {
+  background-color: #4b0082;
+}
+.edit-label .card-label,
+.create-label .card-label {
+  float: left;
+  height: 25px;
+  margin: 0px 3% 7px 0px;
+  width: 10.5%;
+  max-width: 10.5%;
+  cursor: pointer;
+}
+.edit-labels input[type="text"] {
+  margin: 4px 0 6px 38px;
+  width: 243px;
+}
+.edit-labels .card-label {
+  height: 30px;
+  left: 0;
+  padding: 1px 5px;
+  position: absolute;
+  top: 0;
+  width: 24px;
+}
+.edit-labels .labels-static .card-label {
+  line-height: 30px;
+  margin-bottom: 4px;
+  position: relative;
+  top: auto;
+  left: 0;
+  width: 260px;
+}
+.edit-labels-pop-over {
+  margin-bottom: 8px;
+}
+.edit-labels-pop-over .card-label .viewer p {
+  margin: 0;
+}
+.edit-labels-pop-over .shortcut {
+  display: inline-block;
+}
+.card-label-selectable {
+  border-radius: 3px;
+  cursor: pointer;
+  margin: 0;
+  margin-bottom: 3px;
+  width: 190px;
+  min-height: 18px;
+  padding: 8px;
+  position: relative;
+  transition: margin-right 0.1s;
+}
+.card-label-selectable .card-label-selectable-icon {
+  position: absolute;
+  top: 8px;
+  right: -20px;
+}
+.card-label-selectable.active:hover,
+.card-label-selectable.active,
+.card-label-selectable.active.selected:hover,
+.card-label-selectable.active.selected {
+  padding-right: 32px;
+}
+.card-label-selectable.active:hover .card-label-selectable-icon,
+.card-label-selectable.active .card-label-selectable-icon,
+.card-label-selectable.active.selected:hover .card-label-selectable-icon,
+.card-label-selectable.active.selected .card-label-selectable-icon {
+  right: 6px;
+}
+.card-label-selectable.selected,
+.card-label-selectable:hover {
+  opacity: 0.8;
+}
+.active .card-label-selectable,
+.active .card-label-selectable:hover {
+  margin-right: 0;
+}
+.active .card-label-selectable .card-label-selectable-icon {
+  right: 8px;
+}
+.card-label-edit-button {
+  border-radius: 3px;
+  float: right;
+  padding: 8px;
+}
+.card-label-edit-button:hover {
+  background: #dbdbdb;
+}
+ul.edit-labels-pop-over span.fa.label-handle {
+  padding-right: 10px;
+}
+ul.edit-labels-pop-over span.fa.label-handle + .card-label {
+  max-width: 180px;
+}
@@ -29,7 +29,7 @@ template(name="cardLabelsPopup")
    each board.labels
      li.js-card-label-item
        a.card-label-edit-button.fa.fa-pencil.js-edit-label
-        if isMiniScreenOrShowDesktopDragHandles
+        if isTouchScreenOrShowDesktopDragHandles
          span.fa.label-handle(class="fa-arrows" title="{{_ 'dragLabel'}}")
        span.card-label.card-label-selectable.js-select-label.card-label-wrapper(class="card-label-{{color}}"
          class="{{# if isLabelSelected ../_id }}active{{/if}}")
@@ -48,7 +48,16 @@ BlazeComponent.extendComponent({
      connectWith: '.edit-labels-pop-over',
      tolerance: 'pointer',
      appendTo: '.edit-labels-pop-over',
-      helper: 'clone',
+      helper(element, currentItem) {
+        let ret = currentItem.clone();
+        if (currentItem.closest('.popup-container-depth-0').size() == 0) { // only set css transform at every sub-popup, not at the main popup
+          const content = currentItem.closest('.content')[0]
+          const offsetLeft = content.offsetLeft;
+          const offsetTop = $('.pop-over > .header').height() * -1;
+          ret.css("transform", `translate(${offsetLeft}px, ${offsetTop}px)`);
+        }
+        return ret;
+      },
      distance: 7,
      items: itemsSelector,
      placeholder: 'card-label-wrapper placeholder',
@@ -63,11 +72,10 @@ BlazeComponent.extendComponent({
        card.board().setNewLabelOrder(newLabelOrderOnlyIds);
      },
    });
-    Utils.enableClickOnTouch(itemsSelector);

    // Disable drag-dropping if the current user is not a board member or is comment only
    this.autorun(() => {
-      if (Utils.isMiniScreenOrShowDesktopDragHandles()) {
+      if (Utils.isTouchScreenOrShowDesktopDragHandles()) {
        $labels.sortable({
          handle: '.label-handle',
        });
@@ -78,7 +86,7 @@ BlazeComponent.extendComponent({
    return [
      {
        'click .js-select-label'(event) {
-          const card = Utils.getCurrentCard();
+          const card = this.data();
          const labelId = this.currentData()._id;
          card.toggleLabel(labelId);
          event.preventDefault();
@@ -121,7 +129,7 @@ Template.createLabelPopup.events({
 });

 Template.editLabelPopup.events({
-  'click .js-delete-label': Popup.afterConfirm('deleteLabel', function() {
+  'click .js-delete-label': Popup.afterConfirm('deleteLabel', function () {
    const board = Boards.findOne(Session.get('currentBoard'));
    board.removeLabel(this._id);
    Popup.back(2);
@@ -1,230 +0,0 @@
-@import 'nib'
-
-// XXX Use .board-widget-labels as a flexbox container
-.card-label
-  border: 1px solid #000000
-  border-radius: 4px
-  color: white  //Default white text, in select cases,  changed to black to improve contrast between label colour and text
-  display: inline-block
-  font-weight: 700
-  font-size: 13px
-  margin-right: 4px
-  margin-bottom: 5px
-  padding: 3px 8px
-  max-width: 210px
-  min-width: 8px
-  word-wrap: break-word
-  min-height: 18px
-  vertical-align: middle
-  white-space: initial
-  overflow: initial
-
-  &:hover
-    color: white
-
-  &.square
-    height: 30px
-    width: @height
-    padding: 0
-
-  &.add-label
-    box-shadow: 0 0 0 2px darken(white, 25%) inset
-    border: initial
-
-    &:hover, &.is-active
-      box-shadow: 0 0 0 2px darken(white, 60%) inset
-
-  p
-    margin: 0px
-
-.palette-colors
-  display: flex
-  flex-wrap: wrap
-
-  .palette-color
-    flex-grow: 1
-    display: flex
-    align-items: center
-    justify-content: center
-
-.card-label-white
-  background-color: #ffffff
-  color: #000000 //Black text for better visibility
-
-.card-label-white:hover
-  color: #aaaaaa //grey text for better visibility
-
-.card-label-green
-  background-color: #3cb500
-
-.card-label-green:hover
-  color: #000000 //Black hover text for better visibility
-
-.card-label-yellow
-  background-color: #fad900
-  color: #000000 //Black text for better visibility
-
-.card-label-orange
-  background-color: #ff9f19
-  color: #000000 //Black text for better visibility
-
-.card-label-red
-  background-color: #eb4646
-
-.card-label-purple
-  background-color: #a632db
-
-.card-label-blue
-  background-color: #0079bf
-
-.card-label-pink
-  background-color: #ff78cb
-  color: #000000 //Black text for better visibility
-
-.card-label-sky
-  background-color: #00c2e0
-
-.card-label-black
-  background-color: #4d4d4d
-
-.card-label-lime
-  background-color: #51e898
-  color: #000000 //Black text for better visibility
-
-.card-label-silver
-  background-color: #c0c0c0
-  color: #000000 //Black text for better visibility
-
-.card-label-peachpuff
-  background-color: #ffdab9
-  color: #000000 //Black text for better visibility
-
-.card-label-crimson
-  background-color: #dc143c
-
-.card-label-plum
-  background-color: #dda0dd
-  color: #000000 //Black text for better visibility
-
-.card-label-darkgreen
-  background-color: #006400
-
-.card-label-slateblue
-  background-color: #6a5acd
-
-.card-label-magenta
-  background-color: #ff00ff
-
-.card-label-gold
-  background-color: #ffd700
-  color: #000000 //Black text for better visibility
-
-.card-label-navy
-  background-color: #000080
-
-.card-label-gray
-  background-color: #808080
-
-.card-label-saddlebrown
-  background-color: #8b4513
-
-.card-label-paleturquoise
-  background-color: #afeeee
-  color: #000000 //Black text for better visibility
-
-.card-label-mistyrose
-  background-color: #ffe4e1
-  color: #000000 //Black text for better visibility
-
-.card-label-indigo
-  background-color: #4b0082
-
-.edit-label,
-.create-label
-  .card-label
-    float: left
-    height: 25px
-    margin: 0px 3% 7px 0px
-    width: 10.5%
-    cursor: pointer
-
-.edit-labels
-  input[type="text"]
-    margin: 4px 0 6px 38px
-    width: 243px
-
-  .card-label
-    height: 30px
-    left: 0
-    padding: 1px 5px
-    position: absolute
-    top: 0
-    width: 24px
-
-  .labels-static .card-label
-    line-height: 30px
-    margin-bottom: 4px
-    position: relative
-    top: auto
-    left: 0
-    width: 260px
-
-.edit-labels-pop-over
-  margin-bottom: 8px
-  .card-label .viewer p
-    margin: 0
-
-.edit-labels-pop-over .shortcut
-  display: inline-block
-
-.card-label-selectable
-  border-radius: 3px
-  cursor: pointer
-  margin: 0
-  margin-bottom: 3px
-  width: 190px
-  min-height: 18px
-  padding: 8px
-  position: relative
-  transition: margin-right .1s
-
-  .card-label-selectable-icon
-    position: absolute
-    top: 8px
-    right: -20px
-
-  &.active:hover,
-  &.active,
-  &.active.selected:hover,
-  &.active.selected
-    padding-right: 32px
-
-    .card-label-selectable-icon
-      right: 6px
-
-  &.selected,
-  &:hover
-    opacity: .8
-
-.active .card-label-selectable
-  &,
-  &:hover
-    margin-right: 0
-
-  .card-label-selectable-icon
-    right: 8px
-
-.card-label-edit-button
-  border-radius: 3px
-  float: right
-  padding: 8px
-
-  &:hover
-    background: #dbdbdb
-
-ul.edit-labels-pop-over
-  span.fa.label-handle
-    padding-right: 10px;
-
-  span.fa.label-handle + .card-label
-    max-width: 180px
@@ -0,0 +1,573 @@
+.minicard-wrapper {
+  cursor: pointer;
+  position: relative;
+  display: flex;
+  align-items: center;
+  margin-bottom: 9px;
+}
+.minicard-wrapper.placeholder {
+  background: #ccc;
+  border-radius: 9px;
+}
+.minicard-wrapper.ui-sortable-helper {
+  cursor: grabbing;
+  transform: rotate(4deg);
+  display: block !important;
+}
+.minicard-wrapper.ui-sortable-helper .and-n-other {
+  width: 100%;
+  height: 16px;
+  padding: 4px;
+  background-color: #f2f2f2;
+  text-align: center;
+  border-radius: 3px;
+}
+.minicard-wrapper.ui-sortable-helper .multi-selection-checkbox {
+  display: none;
+}
+.minicard-wrapper .multi-selection-checkbox + .minicard {
+  margin-left: 8px;
+}
+@media only screen {
+  .minicard {
+    padding: 6px 8px 2px;
+    position: relative;
+    flex: 1;
+    flex-wrap: wrap;
+    background-color: #fff;
+    min-height: 20px;
+    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
+    border-radius: 2px;
+    color: #4d4d4d;
+    overflow: hidden;
+    transition: transform 0.2s, border-radius 0.2s;
+  }
+}
+.minicard-details-menu-with-handle {
+  float: right;
+  font-size: 18px;
+  padding-right: 30px;
+}
+.minicard-details-menu {
+  float: right;
+  font-size: 18px;
+}
+@media print {
+  .minicard-details-menu,
+  .minicard-details-menu-with-handle {
+    display: none;
+  }
+}
+.minicard.linked-board .linked-icon,
+.minicard.linked-card .linked-icon {
+  display: inline-block;
+  margin-right: 11px;
+  vertical-align: baseline;
+  font-size: 0.9em;
+}
+.minicard.linked-board .linked-archived,
+.minicard.linked-card .linked-archived {
+  color: #937760;
+}
+.is-selected .minicard {
+  transform: translateX(11px);
+  border-bottom-right-radius: 0;
+  border-top-right-radius: 0;
+  z-index: 25;
+  box-shadow: -2px 1px 2px rgba(0,0,0,0.2);
+}
+.minicard:hover:not(.minicard-composer),
+.is-selected .minicard,
+.draggable-hover-card .minicard {
+  background: #f7f7f7;
+}
+.draggable-hover-card .minicard {
+  background: #ededed;
+}
+.minicard .minicard-cover {
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: contain;
+  height: 145px;
+  user-select: none;
+  margin: -6px -8px 6px -8px;
+  border-radius: top 2px;
+}
+.minicard .minicard-labels {
+  float: none;
+}
+.minicard .minicard-labels .minicard-label {
+  width: 11px;
+  height: 11px;
+  border-radius: 2px;
+  margin-right: 3px;
+  margin-bottom: 3px;
+}
+.minicard .minicard-labels-no-text {
+  display: flex;
+  flex-wrap: wrap;
+}
+.minicard .minicard-custom-fields {
+  display: block;
+}
+.minicard .minicard-custom-field {
+  display: flex;
+}
+.minicard .minicard-custom-field-item {
+  flex-grow: 1;
+  display: block;
+  word-wrap: break-word;
+  max-width: 100px;
+  margin-right: 4px;
+}
+.minicard .handle {
+  width: 20px;
+  height: 20px;
+  position: absolute;
+  right: 5px;
+  top: 5px;
+  display: none;
+}
+@media only screen {
+  .minicard .handle {
+    display: block;
+  }
+}
+.minicard .handle .fa-arrows {
+  font-size: 20px;
+  color: #ccc;
+}
+.minicard .minicard-title .card-number {
+  color: #b3b3b3;
+  display: inline-block;
+  margin-right: 5px;
+}
+@media only screen {
+  .minicard .minicard-title p:last-child {
+    margin-bottom: 0;
+  }
+  .minicard .minicard-title .viewer {
+    display: block;
+    word-wrap: break-word;
+    max-width: 230px;
+  }
+}
+.minicard .dates {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+.minicard .date {
+  margin-right: 3px;
+}
+.minicard .badges {
+  float: left;
+  margin-top: 7px;
+  color: #808080;
+}
+.minicard .badges:empty {
+  display: none;
+}
+.minicard .badges .badge {
+  float: left;
+  margin-right: 11px;
+  margin-bottom: 3px;
+  font-size: 0.9em;
+}
+.minicard .badges .badge.is-finished {
+  background: #3cb500;
+  padding: 0px 3px;
+  border-radius: 3px;
+  color: #fff;
+}
+.minicard .badges .badge:last-of-type {
+  margin-right: 0;
+}
+.minicard .badges .badge .badge-icon,
+.minicard .badges .badge .badge-text {
+  vertical-align: middle;
+}
+.minicard .badges .badge .badge-icon.badge-comment,
+.minicard .badges .badge .badge-text.badge-comment {
+  margin-bottom: 0.1rem;
+}
+.minicard .badges .badge .badge-text {
+  font-size: 0.9em;
+  padding-left: 2px;
+  line-height: 14px;
+}
+.minicard .badges .badge .check-list-text {
+  padding-left: 0px;
+  line-height: 12px;
+}
+.minicard .minicard-members,
+.minicard .minicard-assignees,
+.minicard .minicard-creator {
+  float: right;
+  margin-left: 5px;
+  margin-bottom: 4px;
+}
+.minicard .minicard-members .member,
+.minicard .minicard-assignees .member,
+.minicard .minicard-creator .member {
+  float: right;
+  border-radius: 50%;
+  height: 28px;
+  width: 28px;
+  margin-bottom: 4px;
+}
+.minicard .minicard-members .assignee,
+.minicard .minicard-assignees .assignee,
+.minicard .minicard-creator .assignee {
+  float: right;
+  border-radius: 50%;
+  height: 28px;
+  width: 28px;
+}
+.minicard .minicard-members + .badges,
+.minicard .minicard-assignees + .badges,
+.minicard .minicard-creator + .badges {
+  margin-top: 5px;
+}
+.minicard .minicard-assignees {
+  border-bottom: 1px solid #f00;
+}
+.minicard .minicard-creator {
+  border-bottom: 1px solid #008000;
+}
+.minicard .minicard-members:empty,
+.minicard .minicard-assignees:empty {
+  display: none;
+}
+.minicard .minicard-description {
+  padding: 6px 0 0 8px;
+  background-color: #eee;
+  width: 100%;
+  margin-bottom: 2px;
+  margin-left: -4px;
+  border-radius: 3px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+}
+.minicard.minicard-composer {
+  margin-bottom: 10px;
+}
+.minicard.minicard-composer textarea.minicard-composer-textarea,
+.minicard.minicard-composer textarea.minicard-composer-textarea:focus {
+  resize: none;
+  background: none;
+  border: none;
+  box-shadow: none;
+  height: auto;
+  margin: 0;
+  padding: 0;
+  max-height: 162px;
+  min-height: 36px;
+  margin-bottom: 20px;
+  overflow-y: auto;
+}
+.parent-prefix {
+  color: #b3b3b3;
+  font-size: 0.9em;
+}
+.parent-subtext {
+  color: #b3b3b3;
+  font-size: 0.9em;
+}
+@media screen and (max-width: 800px) {
+  .is-selected .minicard {
+    transform: translateX(0px);
+    border-bottom-right-radius: 0;
+    border-top-right-radius: 0;
+    z-index: 15;
+    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
+  }
+}
+/* https://github.com/wekan/wekan/issues/4254#issuecomment-1037192960 */
+.minicard-green {
+  background-color: #3cb500 !important;
+  color: #fff !important;
+}
+.minicard-green:hover:not(.minicard-composer),
+.is-selected .minicard-green,
+.draggable-hover-card .minicard-green {
+  background: #3ab000;
+}
+.draggable-hover-card .minicard-green {
+  background: #38a800;
+}
+.minicard-yellow {
+  background-color: #fad900 !important;
+}
+.minicard-yellow:hover:not(.minicard-composer),
+.is-selected .minicard-yellow,
+.draggable-hover-card .minicard-yellow {
+  background: #f3d200;
+}
+.draggable-hover-card .minicard-yellow {
+  background: #e9ca00;
+}
+.minicard-orange {
+  background-color: #ff9f19 !important;
+}
+.minicard-orange:hover:not(.minicard-composer),
+.is-selected .minicard-orange,
+.draggable-hover-card .minicard-orange {
+  background: #ff9b11;
+}
+.draggable-hover-card .minicard-orange {
+  background: #ff9705;
+}
+.minicard-red {
+  background-color: #eb4646 !important;
+  color: #fff !important;
+}
+.minicard-red:hover:not(.minicard-composer),
+.is-selected .minicard-red,
+.draggable-hover-card .minicard-red {
+  background: #ea3e3e;
+}
+.draggable-hover-card .minicard-red {
+  background: #e93333;
+}
+.minicard-purple {
+  background-color: #a632db !important;
+  color: #fff !important;
+}
+.minicard-purple:hover:not(.minicard-composer),
+.is-selected .minicard-purple,
+.draggable-hover-card .minicard-purple {
+  background: #a32bda;
+}
+.draggable-hover-card .minicard-purple {
+  background: #9e25d5;
+}
+.minicard-blue {
+  background-color: #0079bf !important;
+  color: #fff !important;
+}
+.minicard-blue:hover:not(.minicard-composer),
+.is-selected .minicard-blue,
+.draggable-hover-card .minicard-blue {
+  background: #0075b9;
+}
+.draggable-hover-card .minicard-blue {
+  background: #0071b2;
+}
+.minicard-pink {
+  background-color: #ff78cb !important;
+}
+.minicard-pink:hover:not(.minicard-composer),
+.is-selected .minicard-pink,
+.draggable-hover-card .minicard-pink {
+  background: #ff6dc7;
+}
+.draggable-hover-card .minicard-pink {
+  background: #ff5ec1;
+}
+.minicard-sky {
+  background-color: #00c2e0 !important;
+  color: #fff !important;
+}
+.minicard-sky:hover:not(.minicard-composer),
+.is-selected .minicard-sky,
+.draggable-hover-card .minicard-sky {
+  background: #00bcd9;
+}
+.draggable-hover-card .minicard-sky {
+  background: #00b4d0;
+}
+.minicard-black {
+  background-color: #4d4d4d !important;
+  color: #fff !important;
+}
+.minicard-black:hover:not(.minicard-composer),
+.is-selected .minicard-black,
+.draggable-hover-card .minicard-black {
+  background: #4b4b4b;
+}
+.draggable-hover-card .minicard-black {
+  background: #484848;
+}
+.minicard-lime {
+  background-color: #51e898 !important;
+}
+.minicard-lime:hover:not(.minicard-composer),
+.is-selected .minicard-lime,
+.draggable-hover-card .minicard-lime {
+  background: #49e793;
+}
+.draggable-hover-card .minicard-lime {
+  background: #3ee58d;
+}
+.minicard-silver {
+  background-color: #c0c0c0 !important;
+}
+.minicard-silver:hover:not(.minicard-composer),
+.is-selected .minicard-silver,
+.draggable-hover-card .minicard-silver {
+  background: #bababa;
+}
+.draggable-hover-card .minicard-silver {
+  background: #b3b3b3;
+}
+.minicard-peachpuff {
+  background-color: #ffdab9 !important;
+}
+.minicard-peachpuff:hover:not(.minicard-composer),
+.is-selected .minicard-peachpuff,
+.draggable-hover-card .minicard-peachpuff {
+  background: #ffd3ac;
+}
+.draggable-hover-card .minicard-peachpuff {
+  background: #ffca9a;
+}
+.minicard-crimson {
+  background-color: #dc143c !important;
+  color: #fff !important;
+}
+.minicard-crimson:hover:not(.minicard-composer),
+.is-selected .minicard-crimson,
+.draggable-hover-card .minicard-crimson {
+  background: #d5133a;
+}
+.draggable-hover-card .minicard-crimson {
+  background: #cd1338;
+}
+.minicard-plum {
+  background-color: #dda0dd !important;
+}
+.minicard-plum:hover:not(.minicard-composer),
+.is-selected .minicard-plum,
+.draggable-hover-card .minicard-plum {
+  background: #da98da;
+}
+.draggable-hover-card .minicard-plum {
+  background: #d68cd6;
+}
+.minicard-darkgreen {
+  background-color: #006400 !important;
+  color: #fff !important;
+}
+.minicard-darkgreen:hover:not(.minicard-composer),
+.is-selected .minicard-darkgreen,
+.draggable-hover-card .minicard-darkgreen {
+  background: #006100;
+}
+.draggable-hover-card .minicard-darkgreen {
+  background: #005d00;
+}
+.minicard-slateblue {
+  background-color: #6a5acd !important;
+  color: #fff !important;
+}
+.minicard-slateblue:hover:not(.minicard-composer),
+.is-selected .minicard-slateblue,
+.draggable-hover-card .minicard-slateblue {
+  background: #6453cb;
+}
+.draggable-hover-card .minicard-slateblue {
+  background: #5c4ac8;
+}
+.minicard-magenta {
+  background-color: #f0f !important;
+  color: #fff !important;
+}
+.minicard-magenta:hover:not(.minicard-composer),
+.is-selected .minicard-magenta,
+.draggable-hover-card .minicard-magenta {
+  background: #f700f7;
+}
+.draggable-hover-card .minicard-magenta {
+  background: #ed00ed;
+}
+.minicard-gold {
+  background-color: #ffd700 !important;
+}
+.minicard-gold:hover:not(.minicard-composer),
+.is-selected .minicard-gold,
+.draggable-hover-card .minicard-gold {
+  background: #f7d100;
+}
+.draggable-hover-card .minicard-gold {
+  background: #edc800;
+}
+.minicard-navy {
+  background-color: #000080 !important;
+  color: #fff !important;
+}
+.minicard-navy:hover:not(.minicard-composer),
+.is-selected .minicard-navy,
+.draggable-hover-card .minicard-navy {
+  background: #00007c;
+}
+.draggable-hover-card .minicard-navy {
+  background: #007;
+}
+.minicard-gray {
+  background-color: #808080 !important;
+  color: #fff !important;
+}
+.minicard-gray:hover:not(.minicard-composer),
+.is-selected .minicard-gray,
+.draggable-hover-card .minicard-gray {
+  background: #7c7c7c;
+}
+.draggable-hover-card .minicard-gray {
+  background: #777;
+}
+.minicard-saddlebrown {
+  background-color: #8b4513 !important;
+  color: #fff !important;
+}
+.minicard-saddlebrown:hover:not(.minicard-composer),
+.is-selected .minicard-saddlebrown,
+.draggable-hover-card .minicard-saddlebrown {
+  background: #874312;
+}
+.draggable-hover-card .minicard-saddlebrown {
+  background: #814012;
+}
+.minicard-paleturquoise {
+  background-color: #afeeee !important;
+}
+.minicard-paleturquoise:hover:not(.minicard-composer),
+.is-selected .minicard-paleturquoise,
+.draggable-hover-card .minicard-paleturquoise {
+  background: #a5ecec;
+}
+.draggable-hover-card .minicard-paleturquoise {
+  background: #97e9e9;
+}
+.minicard-mistyrose {
+  background-color: #ffe4e1 !important;
+}
+.minicard-mistyrose:hover:not(.minicard-composer),
+.is-selected .minicard-mistyrose,
+.draggable-hover-card .minicard-mistyrose {
+  background: #ffd7d3;
+}
+.draggable-hover-card .minicard-mistyrose {
+  background: #ffc6bf;
+}
+.minicard-indigo {
+  background-color: #4b0082 !important;
+  color: #fff !important;
+}
+.minicard-indigo:hover:not(.minicard-composer),
+.is-selected .minicard-indigo,
+.draggable-hover-card .minicard-indigo {
+  background: #49007e;
+}
+.draggable-hover-card .minicard-indigo {
+  background: #460079;
+}
+.text-red {
+  color: #f00;
+}
+.text-green {
+  color: #008000;
+}
@@ -3,11 +3,14 @@ template(name="minicard")
    class="{{#if isLinkedCard}}linked-card{{/if}}"
    class="{{#if isLinkedBoard}}linked-board{{/if}}"
    class="{{#if colorClass}}minicard-{{colorClass}}{{/if}}")
-    if isMiniScreenOrShowDesktopDragHandles
+    if isTouchScreenOrShowDesktopDragHandles
+      a.fa.fa-navicon.minicard-details-menu-with-handle.js-open-minicard-details-menu(title="{{_ 'cardDetailsActionsPopup-title'}}")
      .handle
        .fa.fa-arrows
+    else
+      a.fa.fa-navicon.minicard-details-menu.js-open-minicard-details-menu(title="{{_ 'cardDetailsActionsPopup-title'}}")
    if cover
-      .minicard-cover(style="background-image: url('{{cover.url}}');")
+      .minicard-cover(style="background-image: url('{{cover.link 'original'}}?dummyReloadAfterSessionEstablished={{sess}}');")
    if labels
      .minicard-labels(class="{{#if hiddenMinicardLabelText}}minicard-labels-no-text{{/if}}")
        each labels
@@ -88,15 +91,17 @@ template(name="minicard")
                  +viewer
                    = trueValue

-    if getAssignees
-      .minicard-assignees.js-minicard-assignees
-        each getAssignees
-          +userAvatar(userId=this)
+    if showAssignee
+      if getAssignees
+        .minicard-assignees.js-minicard-assignees
+          each getAssignees
+            +userAvatar(userId=this)

-    if getMembers
-      .minicard-members.js-minicard-members
-        each getMembers
-          +userAvatar(userId=this)
+    if showMembers
+      if getMembers
+        .minicard-members.js-minicard-members
+          each getMembers
+            +userAvatar(userId=this)

    if showCreator
      .minicard-creator
@@ -112,8 +117,9 @@ template(name="minicard")
            //span.badge-comment.badge-text
            //|  {{_ 'comment'}}
      if getDescription
-        .badge.badge-state-image-only(title=getDescription)
-          span.badge-icon.fa.fa-align-left
+        unless currentBoard.allowsDescriptionTextOnMinicard
+          .badge.badge-state-image-only(title=getDescription)
+            span.badge-icon.fa.fa-align-left
      if getVoteQuestion
        .badge.badge-state-image-only(title=getVoteQuestion)
          span.badge-icon.fa.fa-thumbs-up(class="{{#if voteState}}text-green{{/if}}")
@@ -125,10 +131,10 @@ template(name="minicard")
          span.badge-icon.fa.fa-check(class="{{#if pokerState}}text-green{{/if}}")
          if expiredPoker
            span.badge-text {{ getPokerEstimation }}
-      if attachments.count
+      if attachments.length
        .badge
          span.badge-icon.fa.fa-paperclip
-          span.badge-text= attachments.count
+          span.badge-text= attachments.length
      if checklists.count
        .badge(class="{{#if checklistFinished}}is-finished{{/if}}")
          span.badge-icon.fa.fa-check-square-o
@@ -142,8 +148,58 @@ template(name="minicard")
        .badge
          span.badge-icon.fa.fa-sort
          span.badge-text.check-list-sort {{ sort }}
+    if currentBoard.allowsDescriptionTextOnMinicard
+      if getDescription
+        .minicard-description
+          +viewer
+            | {{ getDescription }}

 template(name="editCardSortOrderPopup")
  input.js-edit-card-sort-popup(type='text' autofocus value=sort dir="auto")
  .edit-controls.clearfix
    button.primary.confirm.js-submit-edit-card-sort-popup(type="submit") {{_ 'save'}}
+
+template(name="minicardDetailsActionsPopup")
+  ul.pop-over-list
+    if currentUser.isBoardAdmin
+      li
+        a.js-move-card
+          i.fa.fa-arrow-right
+          | {{_ 'moveCardPopup-title'}}
+    unless currentUser.isWorker
+      li
+        a.js-copy-card
+          i.fa.fa-copy
+          | {{_ 'copyCardPopup-title'}}
+      hr
+      li
+        a.js-archive
+          i.fa.fa-arrow-right
+          i.fa.fa-archive
+          | {{_ 'archive-card'}}
+      hr
+      li
+        a.js-move-card-to-top
+          i.fa.fa-arrow-up
+          | {{_ 'moveCardToTop-title'}}
+      li
+        a.js-move-card-to-bottom
+          i.fa.fa-arrow-down
+          | {{_ 'moveCardToBottom-title'}}
+      hr
+      li
+        a.js-add-labels
+          i.fa.fa-tags
+          | {{_ 'card-edit-labels'}}
+      li
+        a.js-due-date
+          i.fa.fa-sign-in
+          | {{_ 'editCardDueDatePopup-title'}}
+      li
+        a.js-set-card-color
+          i.fa.fa-paint-brush
+          | {{_ 'setCardColorPopup-title'}}
+      li
+        a.js-link
+          i.fa.fa-link
+          | {{_ 'link-card'}}
@@ -1,3 +1,6 @@
+import { TAPi18n } from '/imports/i18n';
+import { CustomFieldStringTemplate } from '/client/lib/customFields'
+
 // Template.cards.events({
 //   'click .member': Popup.open('cardMember')
 // });
@@ -29,12 +32,8 @@ BlazeComponent.extendComponent({
    const customFieldTrueValue =
      customField && customField.trueValue ? customField.trueValue : [];

-    return customFieldTrueValue
-      .filter(value => !!value.trim())
-      .map(value =>
-        definition.settings.stringtemplateFormat.replace(/%\{value\}/gi, value),
-      )
-      .join(definition.settings.stringtemplateSeparator ?? '');
+    const ret = new CustomFieldStringTemplate(definition).getFormattedValue(customFieldTrueValue);
+    return ret;
  },

  showCreator() {
@@ -49,6 +48,28 @@ BlazeComponent.extendComponent({
    return false;
  },

+  showMembers() {
+    if (this.data().board()) {
+      return (
+        this.data().board.allowsMembers === null ||
+        this.data().board().allowsMembers === undefined ||
+        this.data().board().allowsMembers
+      );
+    }
+    return false;
+  },
+
+  showAssignee() {
+    if (this.data().board()) {
+      return (
+        this.data().board.allowsAssignee === null ||
+        this.data().board().allowsAssignee === undefined ||
+        this.data().board().allowsAssignee
+      );
+    }
+    return false;
+  },
+
  /** opens the card label popup only if clicked onto a label
   * <li> this is necessary to have the data context of the minicard.
   *      if .js-card-label is used at click event, then only the data context of the label itself is available at this.currentData()
@@ -76,6 +97,7 @@ BlazeComponent.extendComponent({
        },
        'click span.badge-icon.fa.fa-sort, click span.badge-text.check-list-sort' : Popup.open("editCardSortOrder"),
        'click .minicard-labels' : this.cardLabelsPopup,
+        'click .js-open-minicard-details-menu': Popup.open('minicardDetailsActions'),
      }
    ];
  },
@@ -92,6 +114,12 @@ Template.minicard.helpers({
      return false;
    }
  },
+  // XXX resolve this nasty hack for https://github.com/veliovgroup/Meteor-Files/issues/763
+  sess() {
+    return Meteor.connection && Meteor.connection._lastSessionId
+      ? Meteor.connection._lastSessionId
+      : null;
+  },
 });

 BlazeComponent.extendComponent({
@@ -120,3 +148,29 @@ BlazeComponent.extendComponent({
    ]
  }
 }).register('editCardSortOrderPopup');
+
+Template.minicardDetailsActionsPopup.events({
+  'click .js-due-date': Popup.open('editCardDueDate'),
+  'click .js-move-card': Popup.open('moveCard'),
+  'click .js-copy-card': Popup.open('copyCard'),
+  'click .js-set-card-color': Popup.open('setCardColor'),
+  'click .js-add-labels': Popup.open('cardLabels'),
+  'click .js-link': Popup.open('linkCard'),
+  'click .js-move-card-to-top'(event) {
+    event.preventDefault();
+    const minOrder = this.getMinSort();
+    this.move(this.boardId, this.swimlaneId, this.listId, minOrder - 1);
+    Popup.back();
+  },
+  'click .js-move-card-to-bottom'(event) {
+    event.preventDefault();
+    const maxOrder = this.getMaxSort();
+    this.move(this.boardId, this.swimlaneId, this.listId, maxOrder + 1);
+    Popup.back();
+  },
+  'click .js-archive': Popup.afterConfirm('cardArchive', function () {
+    Popup.close();
+    this.archive();
+    Utils.goBoardId(this.boardId);
+  }),
+});
@@ -1,323 +0,0 @@
-@import 'nib'
-
-.minicard-wrapper
-  cursor: pointer
-  position: relative
-  display: flex
-  align-items: center
-  margin-bottom: 9px
-
-  &.placeholder
-    background: darken(white, 20%)
-    border-radius: 9px
-
-  &.ui-sortable-helper
-    cursor: grabbing
-    transform: rotate(4deg)
-    display: block !important
-
-    .and-n-other
-      width: 100%
-      height: 16px
-      padding: 4px
-      background-color: darken(white, 5%)
-      text-align: center
-      border-radius: 3px
-
-    .multi-selection-checkbox
-      display: none
-
-  .multi-selection-checkbox + .minicard
-    margin-left: 8px
-
-.minicard
-  padding: 6px 8px 2px
-  position: relative
-  flex: 1
-  flex-wrap: wrap
-  background-color: #fff
-  min-height: 20px
-  box-shadow: 0 1px 2px rgba(0,0,0,.15)
-  border-radius: 2px
-  color: #4d4d4d
-  overflow: hidden
-  transition: transform 0.2s,
-              border-radius 0.2s
-
-  &.linked-board
-  &.linked-card
-    .linked-icon
-      display: inline-block
-      margin-right: 11px
-      vertical-align: baseline
-      font-size: 0.9em
-    .linked-archived
-      color: #937760
-
-  .is-selected &
-    transform: translateX(11px)
-    border-bottom-right-radius: 0
-    border-top-right-radius: 0
-    z-index: 25
-    box-shadow: -2px 1px 2px rgba(0,0,0,.2)
-
-  &:hover:not(.minicard-composer),
-  .is-selected &,
-  .draggable-hover-card &
-    background: darken(white, 3%)
-
-  .draggable-hover-card &
-    background: darken(white, 7%)
-
-  .minicard-cover
-    background-position: center
-    background-repeat: no-repeat
-    background-size: contain
-    height: 145px
-    user-select: none
-    margin: -6px -8px 6px -8px
-    border-radius: top 2px
-
-  .minicard-labels
-    float: none
-
-    .minicard-label
-      width: 11px
-      height: @width
-      border-radius: 2px
-      margin-right: 3px
-      margin-bottom: 3px
-
-  .minicard-labels-no-text
-    display: flex
-    flex-wrap: wrap
-
-  .minicard-custom-fields
-    display:block;
-  .minicard-custom-field
-    display:flex;
-  .minicard-custom-field-item
-    flex-grow: 1
-    display: block
-    word-wrap: break-word
-    max-width: 100px
-    margin-right: 4px
-  .handle
-    width: 20px;
-    height: 20px;
-    position: absolute;
-    right: 5px;
-    top: 5px;
-    display:none;
-    @media only screen {
-      display:block;
-    }
-    .fa-arrows
-      font-size:20px;
-      color: #ccc;
-  .minicard-title
-    .card-number
-      color: darken(white, 30%);
-      display: inline-block;
-      margin-right: 5px;
-    p:last-child
-      margin-bottom: 0
-    .viewer
-      display: block
-      word-wrap: break-word
-      max-width: 230px
-  .dates
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-  .date
-    margin-right: 3px
-  .badges
-    float: left
-    margin-top: 7px
-    color: darken(white, 50%)
-
-    &:empty
-      display: none
-
-    .badge
-      float: left
-      margin-right: 11px
-      margin-bottom: 3px
-      font-size: 0.9em
-      &.is-finished
-         background: #3cb500
-         padding: 0px 3px
-         border-radius: 3px
-         color: white
-
-      &:last-of-type
-        margin-right: 0
-
-      .badge-icon,
-      .badge-text
-        vertical-align: middle
-        &.badge-comment
-          margin-bottom: 0.1rem
-
-      .badge-text
-        font-size: 0.9em
-        padding-left: 2px
-        line-height: 14px
-      .check-list-text
-        padding-left: 0px
-        line-height: 12px
-
-  .minicard-members,
-  .minicard-assignees,
-  .minicard-creator
-    float: right
-    margin-left: 5px
-    margin-bottom: 4px
-
-    .member
-      float: right
-      border-radius: 50%
-      height: 28px
-      width: @height
-      margin-bottom: 4px
-
-    .assignee
-      float: right
-      border-radius: 50%
-      height: 28px
-      width: @height
-
-    + .badges
-      margin-top: 5px
-
-  .minicard-assignees
-    border-bottom: 1px solid red
-
-  .minicard-creator
-    border-bottom: 1px solid green
-
-  .minicard-members:empty,
-  .minicard-assignees:empty
-    display: none
-
-  &.minicard-composer
-    margin-bottom: 10px
-
-    textarea.minicard-composer-textarea,
-    textarea.minicard-composer-textarea:focus
-      resize: none
-      background: none
-      border: none
-      box-shadow: none
-      height: auto
-      margin: 0
-      padding: 0
-      max-height: 162px
-      min-height: 36px
-      margin-bottom: 20px
-      overflow-y: auto
-
-.parent-prefix
-  color: darken(white, 30%)
-  font-size: 0.9em
-.parent-subtext
-  color: darken(white, 30%)
-  font-size: 0.9em
-
-@media screen and (max-width: 800px)
-  .minicard
-    .is-selected &
-      transform: translateX(0px)
-      border-bottom-right-radius: 0
-      border-top-right-radius: 0
-      z-index: 15
-      box-shadow: 0 1px 2px rgba(0,0,0,.15)
-
-minicard-color(background, color...)
-  background-color: background
-  if color
-    color: color //overwrite text for better visibility
-  &:hover:not(.minicard-composer),
-  .is-selected &,
-  .draggable-hover-card &
-    background: darken(background, 3%)
-  .draggable-hover-card &
-    background: darken(background, 7%)
-
-.minicard-green
-  minicard-color(#3cb500, #ffffff) //White text for better visibility
-
-.minicard-yellow
-  minicard-color(#fad900)
-
-.minicard-orange
-  minicard-color(#ff9f19)
-
-.minicard-red
-  minicard-color(#eb4646, #ffffff) //White text for better visibility
-
-.minicard-purple
-  minicard-color(#a632db, #ffffff) //White text for better visibility
-
-.minicard-blue
-  minicard-color(#0079bf, #ffffff) //White text for better visibility
-
-.minicard-pink
-  minicard-color(#ff78cb)
-
-.minicard-sky
-  minicard-color(#00c2e0, #ffffff) //White text for better visibility
-
-.minicard-black
-  minicard-color(#4d4d4d, #ffffff) //White text for better visibility
-
-.minicard-lime
-  minicard-color(#51e898)
-
-.minicard-silver
-  minicard-color(#c0c0c0)
-
-.minicard-peachpuff
-  minicard-color(#ffdab9)
-
-.minicard-crimson
-  minicard-color(#dc143c, #ffffff) //White text for better visibility
-
-.minicard-plum
-  minicard-color(#dda0dd)
-
-.minicard-darkgreen
-  minicard-color(#006400, #ffffff) //White text for better visibility
-
-.minicard-slateblue
-  minicard-color(#6a5acd, #ffffff) //White text for better visibility
-
-.minicard-magenta
-  minicard-color(#ff00ff, #ffffff) //White text for better visibility
-
-.minicard-gold
-  minicard-color(#ffd700)
-
-.minicard-navy
-  minicard-color(#000080, #ffffff) //White text for better visibility
-
-.minicard-gray
-  minicard-color(#808080, #ffffff) //White text for better visibility
-
-.minicard-saddlebrown
-  minicard-color(#8b4513, #ffffff) //White text for better visibility
-
-.minicard-paleturquoise
-  minicard-color(#afeeee)
-
-.minicard-mistyrose
-  minicard-color(#ffe4e1)
-
-.minicard-indigo
-  minicard-color(#4b0082, #ffffff) //White text for better visibility
-
-.text-red
-  color:red
-.text-green
-  color:green
@@ -0,0 +1,25 @@
+.result-card-list-wrapper {
+  margin: 1rem;
+  border-radius: 5px;
+  padding: 1.5rem;
+  padding-top: 0.75rem;
+  display: inline-block;
+  min-width: 250px;
+  max-width: 350px;
+}
+.result-card-wrapper {
+  margin-top: 0;
+  margin-bottom: 10px;
+}
+.result-card-context {
+  display: inline-block;
+}
+.result-card-context-separator {
+  font-weight: bold;
+}
+.result-card-context-list {
+  margin-bottom: 0.7rem;
+}
+.result-card-block-wrapper {
+  display: inline-block;
+}
@@ -1,24 +0,0 @@
-.result-card-list-wrapper
-  margin: 1rem
-  border-radius: 5px
-  padding: 1.5rem
-  padding-top: 0.75rem
-  display: inline-block
-  min-width: 250px
-  max-width: 350px
-
-.result-card-wrapper
-  margin-top: 0
-  margin-bottom: 10px
-
-.result-card-context
-  display: inline-block
-
-.result-card-context-separator
-  font-weight: bold
-
-.result-card-context-list
-  margin-bottom: 0.7rem
-
-.result-card-block-wrapper
-  display: inline-block
@@ -0,0 +1,152 @@
+.js-add-subtask {
+  color: #8c8c8c;
+}
+textarea.js-add-subtask-item,
+textarea.js-edit-subtask-item {
+  overflow: hidden;
+  word-wrap: break-word;
+  resize: none;
+  height: 34px;
+}
+.delete-text,
+.subtask-title .js-delete-subtask,
+.subtask-title .js-view-subtask,
+.js-delete-subtask-item {
+  color: #8c8c8c;
+  text-decoration: underline;
+  word-wrap: break-word;
+  float: right;
+  padding-top: 6px;
+}
+.delete-text:hover,
+.subtask-title .js-delete-subtask:hover,
+.subtask-title .js-view-subtask:hover,
+.js-delete-subtask-item:hover {
+  color: inherit;
+}
+.subtask-title .checkbox {
+  float: left;
+  width: 30px;
+  height: 30px;
+  font-size: 18px;
+  line-height: 30px;
+}
+.subtask-title .title {
+  font-size: 18px;
+  line-height: 25px;
+}
+.subtask-title .subtasks-stat {
+  margin: 0 0.5em;
+  float: right;
+  padding-top: 6px;
+}
+.subtask-title .subtasks-stat.is-finished {
+  color: #3cb500;
+}
+.subtask-title .js-delete-subtask {
+  margin: 0 0.5em;
+}
+.js-confirm-subtask-delete {
+  background-color: #f7f7f7;
+  position: absolute;
+  float: left;
+  width: 60%;
+  margin-top: 0;
+  margin-left: 13%;
+  padding-bottom: 2%;
+  padding-left: 3%;
+  padding-right: 3%;
+  z-index: 17;
+  border-radius: 3px;
+}
+.js-confirm-subtask-delete p {
+  position: relative;
+  margin-top: 3%;
+  width: 100%;
+  text-align: center;
+}
+.js-confirm-subtask-delete p span {
+  font-weight: bold;
+}
+.js-confirm-subtask-delete p i {
+  font-size: 2em;
+}
+.js-confirm-subtask-delete .js-subtask-delete-buttons {
+  position: relative;
+  padding: left 2% right 2%;
+}
+.js-confirm-subtask-delete .js-subtask-delete-buttons .confirm-subtask-delete {
+  margin-left: 12%;
+  float: left;
+}
+.js-confirm-subtask-delete .js-subtask-delete-buttons .toggle-delete-subtask-dialog {
+  margin-right: 12%;
+  float: right;
+}
+#card-details-overlay {
+  top: 0;
+  bottom: -600px;
+  right: 0;
+}
+.subtasks {
+  background: #f7f7f7;
+}
+.subtasks.placeholder {
+  background: #ccc;
+  border-radius: 2px;
+}
+.subtasks.ui-sortable-helper {
+  box-shadow: -2px 2px 8px rgba(0,0,0,0.3), 0 0 1px rgba(0,0,0,0.5);
+  transform: rotate(4deg);
+  cursor: grabbing;
+}
+.subtasks-item {
+  margin: 0 0 0 0.1em;
+  line-height: 18px;
+  font-size: 1.1em;
+  margin-top: 3px;
+  display: flex;
+  background: #f7f7f7;
+}
+.subtasks-item.placeholder {
+  background: #ccc;
+  border-radius: 2px;
+}
+.subtasks-item.ui-sortable-helper {
+  box-shadow: -2px 2px 8px rgba(0,0,0,0.3), 0 0 1px rgba(0,0,0,0.5);
+  transform: rotate(4deg);
+  cursor: grabbing;
+}
+.subtasks-item:hover {
+  background-color: #ebebeb;
+}
+.subtasks-item .check-box {
+  margin: 0.1em 0 0 0;
+}
+.subtasks-item .check-box.is-checked {
+  border-bottom: 2px solid #3cb500;
+  border-right: 2px solid #3cb500;
+}
+.subtasks-item .item-title {
+  flex: 1;
+  padding-left: 10px;
+}
+.subtasks-item .item-title.is-checked {
+  color: #8c8c8c;
+  font-style: italic;
+}
+.subtasks-item .item-title .viewer p {
+  margin-bottom: 2px;
+}
+.js-delete-subtask-item {
+  margin: 0 0 0.5em 1.33em;
+  padding: 12px 0 0 0;
+}
+.add-subtask-item {
+  margin: 0.2em 0 0.5em 1.33em;
+  display: inline-block;
+}
+.subtask-details-menu {
+  float: right;
+  padding: 6px 10px 6px 10px;
+}
@@ -25,11 +25,9 @@ template(name="subtaskDetail")
    else
      .subtask-title
        span
-        a.js-view-subtask(title="{{ subtask.title }}") {{_ "view-it"}}
        if canModifyCard
          if currentUser.isBoardAdmin
-            a.js-delete-subtask.toggle-delete-subtask-dialog {{_ "delete"}}...
-
+            a.fa.fa-navicon.subtask-details-menu.js-open-subtask-details-menu(title="{{_ 'subtaskActionsPopup-title'}}")
        if canModifyCard
          h2.title.js-open-inlined-form.is-editable
            +viewer
@@ -39,18 +37,6 @@ template(name="subtaskDetail")
            +viewer
                = subtask.title

-template(name="subtaskDeleteDialog")
-  .js-confirm-subtask-delete
-    p
-      i(class="fa fa-exclamation-triangle" aria-hidden="true")
-    p
-      | {{_ 'confirm-subtask-delete-dialog'}}
-      span {{subtask.title}}
-      | ?
-    .js-subtask-delete-buttons
-      button.confirm-subtask-delete(type="button") {{_ 'delete'}}
-      button.toggle-delete-subtask-dialog(type="button") {{_ 'cancel'}}
-
 template(name="addSubtaskItemForm")
  textarea.js-add-subtask-item(rows='1' autofocus dir="auto")
  .edit-controls.clearfix
@@ -98,3 +84,18 @@ template(name='subtaskItemDetail')
      .item-title(class="{{#if item.isFinished }}is-checked{{/if}}")
        +viewer
          = item.title
+
+template(name="subtaskDeletePopup")
+  p {{_ 'confirm-subtask-delete-popup'}}
+  button.js-confirm.negate.full(type="submit") {{_ 'delete'}}
+
+template(name="subtaskActionsPopup")
+  ul.pop-over-list
+    li
+      a.js-view-subtask(title="{{ subtask.title }}")
+        i.fa.fa-eye
+        | {{_ "view-it"}}
+      a.js-delete-subtask.delete-subtask
+        i.fa.fa-trash
+        | {{_ "delete"}} ...
+
@@ -83,7 +83,6 @@ BlazeComponent.extendComponent({
    const subtask = this.currentData().subtask;
    if (subtask && subtask._id) {
      subtask.archive();
-      this.toggleDeleteDialog.set(false);
    }
  },

@@ -95,11 +94,6 @@ BlazeComponent.extendComponent({
    subtask.setTitle(title);
  },

-  onCreated() {
-    this.toggleDeleteDialog = new ReactiveVar(false);
-    this.subtaskToDelete = null; //Store data context to pass to subtaskDeleteDialog template
-  },
-
  pressKey(event) {
    //If user press enter key inside a form, submit it
    //Unless the user is also holding down the 'shift' key
@@ -111,64 +105,18 @@ BlazeComponent.extendComponent({
  },

  events() {
-    const events = {
-      'click .toggle-delete-subtask-dialog'(event) {
-        if ($(event.target).hasClass('js-delete-subtask')) {
-          this.subtaskToDelete = this.currentData().subtask; //Store data context
-        }
-        this.toggleDeleteDialog.set(!this.toggleDeleteDialog.get());
-      },
-      'click .js-view-subtask'(event) {
-        if ($(event.target).hasClass('js-view-subtask')) {
-          const subtask = this.currentData().subtask;
-          const board = subtask.board();
-          FlowRouter.go('card', {
-            boardId: board._id,
-            slug: board.slug,
-            cardId: subtask._id,
-          });
-        }
-      },
-    };
-
    return [
      {
-        ...events,
+        'click .js-open-subtask-details-menu': Popup.open('subtaskActions'),
        'submit .js-add-subtask': this.addSubtask,
        'submit .js-edit-subtask-title': this.editSubtask,
-        'click .confirm-subtask-delete': this.deleteSubtask,
+        'click .js-delete-subtask-item': this.deleteSubtask,
        keydown: this.pressKey,
      },
    ];
  },
 }).register('subtasks');

-Template.subtaskDeleteDialog.onCreated(() => {
-  const $cardDetails = this.$('.card-details');
-  this.scrollState = {
-    position: $cardDetails.scrollTop(), //save current scroll position
-    top: false, //required for smooth scroll animation
-  };
-  //Callback's purpose is to only prevent scrolling after animation is complete
-  $cardDetails.animate({ scrollTop: 0 }, 500, () => {
-    this.scrollState.top = true;
-  });
-
-  //Prevent scrolling while dialog is open
-  $cardDetails.on('scroll', () => {
-    if (this.scrollState.top) {
-      //If it's already in position, keep it there. Otherwise let animation scroll
-      $cardDetails.scrollTop(0);
-    }
-  });
-});
-
-Template.subtaskDeleteDialog.onDestroyed(() => {
-  const $cardDetails = this.$('.card-details');
-  $cardDetails.off('scroll'); //Reactivate scrolling
-  $cardDetails.animate({ scrollTop: this.scrollState.position });
-});
-
 Template.subtaskItemDetail.helpers({
  canModifyCard() {
    return (
@@ -183,3 +131,30 @@ Template.subtaskItemDetail.helpers({
 BlazeComponent.extendComponent({
  // ...
 }).register('subtaskItemDetail');
+
+BlazeComponent.extendComponent({
+  events() {
+    return [
+      {
+        'click .js-view-subtask'(event) {
+          if ($(event.target).hasClass('js-view-subtask')) {
+            const subtask = this.currentData().subtask;
+            const board = subtask.board();
+            FlowRouter.go('card', {
+              boardId: board._id,
+              slug: board.slug,
+              cardId: subtask._id,
+            });
+          }
+        },
+        'click .js-delete-subtask' : Popup.afterConfirm('subtaskDelete', function () {
+          Popup.back(2);
+          const subtask = this.subtask;
+          if (subtask && subtask._id) {
+            subtask.archive();
+          }
+        }),
+      }
+    ]
+  }
+}).register('subtaskActionsPopup');
@@ -1,142 +0,0 @@
-.js-add-subtask
-  color: #8c8c8c
-
-textarea.js-add-subtask-item, textarea.js-edit-subtask-item
-  overflow: hidden
-  word-wrap: break-word
-  resize: none
-  height: 34px
-
-.delete-text
-  color: #8c8c8c
-  text-decoration: underline
-  word-wrap: break-word
-  float: right
-  padding-top: 6px
-  &:hover
-    color: inherit
-
-.subtask-title
-  .checkbox
-    float: left
-    width: 30px
-    height 30px
-    font-size: 18px
-    line-height: 30px
-
-  .title
-    font-size: 18px
-    line-height: 25px
-
-  .subtasks-stat
-    margin: 0 0.5em
-    float: right
-    padding-top: 6px
-    &.is-finished
-      color: #3cb500
-
-  .js-delete-subtask
-    @extends .delete-text
-    margin: 0 0.5em
-
-  .js-view-subtask
-    @extends .delete-text
-
-.js-confirm-subtask-delete
-  background-color: darken(white, 3%)
-  position: absolute
-  float: left;
-  width: 60%
-  margin-top: 0
-  margin-left: 13%
-  padding-bottom: 2%
-  padding-left: 3%
-  padding-right: 3%
-  z-index: 17
-  border-radius: 3px
-
-  p
-    position: relative
-    margin-top: 3%
-    width: 100%
-    text-align: center
-    span
-      font-weight: bold
-
-    i
-      font-size: 2em
-
-  .js-subtask-delete-buttons
-    position: relative
-    padding: left 2% right 2%
-    .confirm-subtask-delete
-      margin-left: 12%
-      float: left
-    .toggle-delete-subtask-dialog
-      margin-right: 12%
-      float: right
-
-#card-details-overlay
-  top: 0
-  bottom: -600px
-  right: 0
-
-.subtasks
-  background: darken(white, 3%)
-
-  &.placeholder
-    background: darken(white, 20%)
-    border-radius: 2px
-
-  &.ui-sortable-helper
-    box-shadow: -2px 2px 8px rgba(0, 0, 0, .3),
-                0 0 1px rgba(0, 0, 0, .5)
-    transform: rotate(4deg)
-    cursor: grabbing
-
-
-.subtasks-item
-  margin: 0 0 0 0.1em
-  line-height: 18px
-  font-size: 1.1em
-  margin-top: 3px
-  display: flex
-  background: darken(white, 3%)
-
-  &.placeholder
-    background: darken(white, 20%)
-    border-radius: 2px
-
-  &.ui-sortable-helper
-    box-shadow: -2px 2px 8px rgba(0, 0, 0, .3),
-                0 0 1px rgba(0, 0, 0, .5)
-    transform: rotate(4deg)
-    cursor: grabbing
-
-  &:hover
-    background-color: darken(white, 8%)
-
-  .check-box
-    margin: 0.1em 0 0 0;
-    &.is-checked
-      border-bottom: 2px solid #3cb500
-      border-right: 2px solid #3cb500
-
-  .item-title
-    flex: 1
-    padding-left: 10px;
-    &.is-checked
-      color: #8c8c8c
-      font-style: italic
-    & .viewer
-      p
-        margin-bottom: 2px
-
-.js-delete-subtask-item
-  margin: 0 0 0.5em 1.33em
-  @extends .delete-text
-  padding: 12px 0 0 0
-
-.add-subtask-item
-  margin: 0.2em 0 0.5em 1.33em
-  display: inline-block
@@ -0,0 +1,22 @@
+.datepicker-container .fields .left {
+  width: 56%;
+}
+.datepicker-container .fields .right {
+  width: 38%;
+}
+.datepicker-container .datepicker {
+  width: 100%;
+}
+.datepicker-container .datepicker table {
+  width: 100%;
+  border: none;
+  border-spacing: 0;
+  border-collapse: collapse;
+}
+.datepicker-container .datepicker table thead {
+  background: none;
+}
+.datepicker-container .datepicker table td,
+.datepicker-container .datepicker table th {
+  box-sizing: border-box;
+}
@@ -1,17 +0,0 @@
-.datepicker-container
-  .fields
-    .left
-      width: 56%
-    .right
-      width: 38%
-  .datepicker
-    width: 100%
-    table
-      width: 100%
-      border: none
-      border-spacing: 0
-      border-collapse: collapse
-      thead
-        background: none
-      td, th
-        box-sizing: border-box
@@ -0,0 +1,741 @@
+select,
+textarea,
+input:not([type=file]),
+button {
+  box-sizing: border-box;
+  background-color: #ebebeb;
+  border: 1px solid #ccc;
+  border-radius: 3px;
+  display: block;
+  margin-bottom: 12px;
+  min-height: 34px;
+  padding: 7px;
+}
+select.full,
+textarea.full,
+input:not([type=file]).full,
+button.full {
+  width: 100%;
+}
+select.input-error,
+textarea.input-error,
+input:not([type=file]).input-error,
+button.input-error {
+  background-color: #ece9e9;
+  border-color: #ba1212;
+}
+select:focus,
+textarea:focus,
+input:not([type=file]):focus,
+button:focus {
+  outline: 0;
+}
+input[type="file"] {
+  margin-bottom: 16px;
+}
+input[type="radio"] {
+  -webkit-appearance: radio;
+  min-height: inherit;
+}
+input[type="text"],
+input[type="password"],
+input[type="email"] {
+  transition: background 85ms ease-in, border-color 85ms ease-in;
+  width: 250px;
+}
+input[type="text"].inline-input,
+input[type="password"].inline-input,
+input[type="email"].inline-input {
+  background: none;
+  border: 0;
+  margin: 0;
+  padding: 2px;
+  min-height: 0;
+  height: 18px;
+  width: 200px;
+}
+input[type="text"].full-line,
+input[type="password"].full-line,
+input[type="email"].full-line {
+  width: 100%;
+}
+input[type="email"]:invalid {
+  box-shadow: none;
+}
+input[type="text"]:hover,
+input[type="password"]:hover,
+input[type="email"]:hover,
+textarea:hover {
+  border-color: #999;
+}
+input[type="text"]:hover.input-error,
+input[type="password"]:hover.input-error,
+input[type="email"]:hover.input-error,
+textarea:hover.input-error {
+  border-color: #ba1212;
+}
+input[type="text"]:focus,
+input[type="password"]:focus,
+input[type="email"]:focus,
+textarea:focus {
+  background: #fff;
+  border-color: #318ec4;
+  box-shadow: 0 0 2px #318ec4;
+}
+input[type="text"]:focus.input-error,
+input[type="password"]:focus.input-error,
+input[type="email"]:focus.input-error,
+textarea:focus.input-error {
+  background-color: #f8f7f7;
+  border-color: #ba1212;
+  box-shadow: 0 0 2px #d11515;
+}
+input[type="text"]:disabled,
+input[type="password"]:disabled,
+input[type="email"]:disabled,
+textarea:disabled {
+  background-color: #dcdcdc;
+  border-color: #bfbfbf;
+  color: #8c8c8c;
+  -webkit-touch-callout: none;
+  user-select: none;
+}
+select {
+  max-height: 300px;
+  width: 256px;
+  margin-bottom: 8px;
+}
+select.inline {
+  width: 100%;
+}
+option[disabled] {
+  color: #8c8c8c;
+}
+textarea {
+  height: 150px;
+  transition: background 85ms ease-in, border-color 85ms ease-in;
+  resize: vertical;
+  width: 100%;
+}
+textarea.editor {
+  resize: none;
+  padding-bottom: 22px;
+}
+.button {
+  border-radius: 3px;
+  text-decoration: none;
+  position: relative;
+}
+input[type="submit"],
+button {
+  background: #cfcfcf;
+  background: linear-gradient(#cfcfcf, #c2c2c2);
+  border: none;
+  cursor: pointer;
+  display: inline-block;
+  font-weight: 700;
+  line-height: 22px;
+  padding: 7px 20px;
+  text-align: center;
+}
+input[type="submit"] .wide,
+button .wide {
+  padding-left: 30px;
+  padding-right: 30px;
+}
+input[type="submit"]:hover,
+button:hover,
+input[type="submit"]:focus,
+button:focus {
+  background: #c2c2c2;
+  background: linear-gradient(#c2c2c2, #b5b5b5);
+}
+input[type="submit"]:active,
+button:active {
+  background: #b5b5b5;
+  background: linear-gradient(#b5b5b5, #a8a8a8);
+  box-shadow: inset 0 3px 6px rgba(0,0,0,0.1);
+}
+input[type="submit"]:active:hover,
+button:active:hover,
+input[type="submit"]:active:focus,
+button:active:focus,
+input[type="submit"]:active:active,
+button:active:active {
+  background: #e6e6e6;
+  background: linear-gradient(#e6e6e6, #e6e6e6);
+}
+input[type="submit"].primary,
+button.primary {
+  background: #005377;
+  box-shadow: 0 1px 0 #4d4d4d;
+  color: #fff;
+}
+input[type="submit"].primary:hover,
+button.primary:hover,
+input[type="submit"].primary:focus,
+button.primary:focus {
+  background: #004766;
+}
+input[type="submit"].primary:active,
+button.primary:active {
+  background: #01628c;
+}
+input[type="submit"].negate:hover,
+button.negate:hover,
+input[type="submit"].negate:focus,
+button.negate:focus {
+  background: #990f0f;
+  background: linear-gradient(#990f0f, #7d0c0c);
+  box-shadow: 0 1px 0 #4d4d4d;
+  color: #fff;
+}
+input[type="submit"].negate:active,
+button.negate:active {
+  background: #7d0c0c;
+  box-shadow: 0 1px 0 #4d4d4d;
+  color: #fff;
+}
+input[type="submit"] i.fa,
+button i.fa {
+  margin-right: 10px;
+}
+input[type="submit"].disabled,
+input[type="submit"]:disabled,
+input[type="button"].disabled,
+button.disabled,
+.button.disabled,
+input[type="submit"].disabled:hover,
+input[type="submit"]:disabled:hover,
+input[type="button"].disabled:hover,
+button.disabled:hover,
+.button.disabled:hover,
+input[type="submit"].disabled:active,
+input[type="submit"]:disabled:active,
+input[type="button"].disabled:active,
+button.disabled:active,
+.button.disabled:active {
+  background: #cfcfcf;
+  cursor: default;
+  box-shadow: none;
+  color: #a8a8a8;
+}
+fieldset {
+  border: 1px solid #bfbfbf;
+  padding: 15px;
+  margin-bottom: 15px;
+}
+input[type="hidden"] {
+  display: none;
+}
+.radio-div,
+.check-div {
+  display: block;
+  margin: 0 0 4px 20px;
+  min-height: 20px;
+  position: relative;
+}
+.radio-div input,
+.check-div input {
+  left: -18px;
+  min-height: 0;
+  margin: 0;
+  padding: 0;
+  position: absolute;
+  top: 2px;
+}
+.radio-div label,
+.check-div label {
+  font-weight: 400;
+}
+label {
+  display: block;
+  font-weight: 700;
+  margin-bottom: 4px;
+}
+label.form-error {
+  color: #ba1212;
+}
+input::-webkit-input-placeholder,
+textarea::-webkit-input-placeholder,
+input::-moz-placeholder,
+textarea::-moz-placeholder {
+  color: #8c8c8c;
+}
+.edit-controls,
+.add-controls {
+  display: flex;
+  align-items: center;
+  margin-top: 0px;
+  margin-bottom: 12px;
+}
+@media print {
+  .add-controls {
+    display: none;
+  }
+}
+.edit-controls button[type=submit],
+.add-controls button[type=submit],
+.edit-controls input[type=button],
+.add-controls input[type=button] {
+  float: left;
+  height: 32px;
+  margin-bottom: 0px;
+}
+.edit-controls .fa-times-thin,
+.add-controls .fa-times-thin {
+  font-size: 26px;
+  margin: 3px 10px;
+}
+[type="checkbox"]:not(:checked),
+[type="checkbox"]:checked {
+  position: absolute;
+  left: -9999px;
+  visibility: hidden;
+  display: none;
+}
+.materialCheckBox {
+  position: relative;
+  width: 13px;
+  height: 13px;
+  z-index: 0;
+  border: 2px solid #5a5a5a;
+  border-radius: 1px;
+  transition: 0.2s;
+  margin: 0;
+  cursor: pointer;
+}
+.materialCheckBox.is-checked {
+  top: -4px;
+  left: -3px;
+  width: 7px;
+  height: 15px;
+  margin-right: 6px;
+  border-top: 2px solid transparent;
+  border-left: 2px solid transparent;
+  transform: rotate(40deg);
+  -webkit-backface-visibility: hidden;
+  transform-origin: 100% 100%;
+}
+.button-link {
+  background: #fff;
+  background: linear-gradient(#fff, #f5f5f5);
+  border-radius: 3px;
+  box-sizing: border-box;
+  user-select: none;
+  border: 1px solid #e3e3e3;
+  border-bottom-color: #c2c2c2;
+  cursor: pointer;
+  display: block;
+  font-weight: 700;
+  height: 34px;
+  margin-top: 6px;
+  max-width: 300px;
+  padding: 7px;
+  position: relative;
+  text-decoration: none;
+  overflow: ellipsis;
+}
+.button-link .on {
+  background: #48b512;
+  background: linear-gradient(#48b512, #3d990f);
+  border-radius: 3px;
+  color: #fff;
+  display: none;
+  font-size: 12px;
+  font-weight: 700;
+  height: 17px;
+  line-height: 17px;
+  margin: 0;
+  padding: 2px 4px;
+  position: absolute;
+  right: 5px;
+  top: 5px;
+  text-align: center;
+}
+.button-link.is-on {
+  padding-right: 30px;
+  max-width: 196px;
+}
+.button-link.is-on .on {
+  display: block;
+}
+.button-link.inline {
+  color: #666;
+  padding: 2px 14px;
+  margin-left: 4px;
+}
+.button-link.setting {
+  height: 52px;
+  float: left;
+  position: relative;
+  margin-top: 0;
+}
+.button-link.setting.disabled {
+  background: #fff;
+  border-color: #e9e9e9;
+  color: #8c8c8c;
+  cursor: default;
+}
+.button-link.setting.disabled select {
+  display: none;
+}
+.button-link.setting.disabled:hover .label {
+  color: #8c8c8c;
+}
+.button-link.setting.disabled,
+.button-link.setting.disabled:hover,
+.button-link.setting.disabled:active,
+.button-link.setting.disabled.primary,
+.button-link.setting.disabled.primary:hover,
+.button-link.setting.disabled.primary:active {
+  background: #cfcfcf;
+  border-color: #c2c2c2;
+  border-bottom-color: #b5b5b5;
+  cursor: default;
+  box-shadow: none;
+  color: #a8a8a8;
+}
+.button-link.setting .label {
+  color: #8c8c8c;
+  display: block;
+  font-size: 12px;
+  line-height: 14px;
+  margin-bottom: 0;
+}
+.button-link.setting:hover .label {
+  color: #eee;
+}
+.button-link.setting .value {
+  display: block;
+  font-size: 18px;
+  line-height: 24px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.button-link.setting label {
+  display: none;
+}
+.button-link.setting select {
+  border: none;
+  cursor: pointer;
+  height: 50px;
+  left: 0;
+  margin: 0;
+  opacity: 0;
+  position: absolute;
+  top: 0;
+  z-index: 2;
+  width: 100%;
+}
+.button-link:hover {
+  background: #318ec4;
+  background: linear-gradient(#318ec4, #2b7cab);
+  border-color: #2e85b8;
+  color: #fff;
+}
+.button-link:hover .on {
+  background-image: none;
+  background-color: rgba(255,255,255,0.3);
+  border-color: transparent;
+}
+.button-link:active {
+  background: #2e85b8;
+  background: linear-gradient(#2e85b8, #28739f);
+  border-color: #2b7cab;
+  color: #fff;
+}
+.button-link .button-link.negate:hover {
+  background: #990f0f;
+  background: linear-gradient(#990f0f, #7d0c0c);
+  border-color: linear-gradient(#990f0f, #7d0c0c);
+}
+.button-link .button-link.negate:active {
+  background: #7d0c0c;
+  border-color: #990f0f;
+}
+.button-link.primary {
+  background: #48b512;
+  background: linear-gradient(#48b512, #3d990f);
+  border: 1px solid;
+  border-color: #3d990f;
+  color: #fff;
+}
+.button-link.primary:hover {
+  background: #3d990f;
+  background: linear-gradient(#3d990f, #327d0c);
+  border-color: #3d990f;
+}
+.button-link.danger {
+  background: #ba1212;
+  background: linear-gradient(#ba1212, #8b0e0e);
+  border: 1px solid;
+  border-color: #a21010;
+  color: #fff;
+}
+.button-link.danger:hover {
+  background: #a21010;
+  background: linear-gradient(#a21010, #740b0b);
+  border-color: #8b0e0e;
+}
+button.quiet-button,
+button.loud-text-button {
+  background: none;
+  text-align: left;
+  line-height: normal;
+  border: none;
+  box-shadow: none;
+}
+button.quiet-button:active,
+button.loud-text-button:active {
+  color: #4d4d4d;
+  background: #d3d3d3;
+  box-shadow: none;
+}
+button.quiet-button {
+  font-weight: 400;
+  text-decoration: underline;
+}
+button.loud-text-button {
+  width: 100%;
+}
+button.loud-text-button:hover {
+  color: #111;
+}
+.emphasis-button,
+.quiet-button {
+  border-radius: 3px;
+  user-select: none;
+  color: #8c8c8c;
+  display: block;
+  margin: 2px 0;
+  padding: 6px 8px;
+  position: relative;
+}
+.emphasis-button.w-img,
+.quiet-button.w-img {
+  padding-left: 28px;
+}
+.emphasis-button:hover,
+.quiet-button:hover {
+  color: #4d4d4d;
+  background: #dcdcdc;
+}
+.emphasis-button:active,
+.quiet-button:active {
+  color: #4d4d4d;
+  background: #d3d3d3;
+}
+.quiet-button-large {
+  padding: 16px 24px;
+}
+.emphasis-button {
+  color: #74663e;
+  background: #ecdfbb;
+}
+.emphasis-button:hover {
+  color: #53492d;
+  background: #e7d6a7;
+}
+.emphasis-button:active {
+  color: #53492d;
+  background: #e1cc93;
+}
+.is-editable {
+  cursor: pointer;
+}
+.big-link {
+  border-radius: 3px;
+  display: block;
+  margin: 6px 0 6px 40px;
+  padding: 11px;
+  position: relative;
+  text-decoration: none;
+  font-size: 16px;
+  line-height: 20px;
+}
+.big-link .text {
+  text-decoration: underline;
+}
+.big-link:hover {
+  background: #dcdcdc;
+}
+.big-link.options {
+  padding-right: 41px;
+}
+.big-link .option {
+  height: 30px;
+  width: 30px;
+  position: absolute;
+  right: 6px;
+  top: 6px;
+}
+.big-link.none {
+  color: #8c8c8c;
+  text-decoration: none;
+}
+.big-link.none:hover {
+  background: transparent;
+}
+.big-link.avatar-changer {
+  padding-right: 51px;
+}
+.big-link.avatar-changer .member {
+  border: 1px solid #ccc;
+  border-radius: 3px;
+  height: 40px;
+  width: 40px;
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+.big-link.avatar-changer .member .member-avatar {
+  height: 40px;
+  width: 40px;
+}
+.big-link.avatar-changer .member .member-initials {
+  font-size: 16px;
+  height: 40px;
+  line-height: 40px;
+  max-height: 40px;
+}
+.show-more {
+  border-radius: 3px;
+  color: #8c8c8c;
+  display: block;
+  padding: 16px 8px 16px 40px;
+  margin: 8px 0;
+}
+.show-more:hover {
+  background: #dcdcdc;
+  text-decoration: underline;
+}
+.show-more.compact {
+  padding: 12px 8px;
+  margin: 8px 0 0;
+  text-align: center;
+}
+.board-widget .show-more {
+  padding: 12px 8px 12px 40px;
+}
+.uploader {
+  clear: both;
+  cursor: pointer;
+  position: relative;
+  height: 34px;
+  width: 100%;
+}
+.uploader .realfile {
+  cursor: pointer;
+  height: 34px;
+  line-height: 34px;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  z-index: 2;
+  font-size: 23px;
+}
+.uploader .realfile input[type="file"] {
+  cursor: pointer;
+  height: 34px;
+  line-height: 34px;
+  margin: 0;
+  opacity: 0;
+  padding: 0;
+  width: 100%;
+  z-index: 2;
+  font-size: 23px;
+}
+.uploader:hover .fakefile {
+  background: #318ec4;
+  background: linear-gradient(#318ec4, #2b7cab);
+  border-color: #2e85b8;
+  color: #fff;
+}
+.dropdown-menu {
+  border-radius: 2px;
+  overflow: hidden;
+}
+.dropdown-menu li {
+  border-top: none;
+}
+.dropdown-menu li a {
+  padding: 4px 12px 4px 8px;
+}
+.dropdown-menu li a img {
+  width: 18px;
+  height: 18px;
+  margin-right: 5px;
+  vertical-align: middle;
+}
+.dropdown-menu li a .minicard-label {
+  width: 11px;
+  height: 11px;
+  border-radius: 2px;
+  margin: 2px 7px -2px -2px;
+  display: inline-block;
+}
+.dropdown-menu li.active {
+  background: #005377;
+}
+.dropdown-menu li.active a,
+.dropdown-menu li.active .quiet {
+  color: #fff;
+}
+.material-toggle-switch {
+  display: flex;
+}
+.toggle-label {
+  position: relative;
+  display: block;
+  height: 20px;
+  width: 44px;
+  background-color: #a6a6a6;
+  border-radius: 100px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+.toggle-label:after {
+  position: absolute;
+  left: -2px;
+  top: -3px;
+  display: block;
+  width: 26px;
+  height: 26px;
+  border-radius: 100px;
+  background-color: #fff;
+  box-shadow: 0px 3px 3px rgba(0,0,0,0.05);
+  content: '';
+  transition: all 0.3s ease;
+}
+.toggle-label:active:after {
+  transform: scale(1.15, 0.85);
+}
+.toggle-switch:checked ~ .toggle-label {
+  background-color: #6fbeb5;
+}
+.toggle-switch:checked ~ .toggle-label:after {
+  left: 20px;
+  background-color: #179588;
+}
+.toggle-switch:checked:disabled ~ .toggle-label {
+  background-color: #d5d5d5;
+  pointer-events: none;
+}
+.toggle-switch:checked:disabled ~ .toggle-label:after {
+  background-color: #bcbdbc;
+}
+.toggle-switch {
+  display: none;
+}
+.toggle-switch-title {
+  margin: 0 0.5em;
+  display: flex;
+}
+@media screen and (max-width: 800px) {
+  .edit-controls .fa-times-thin,
+  .add-controls .fa-times-thin {
+    margin: 3px 20px;
+  }
+}
@@ -1,697 +0,0 @@
-@import 'nib'
-
-select,
-textarea,
-input:not([type=file]),
-button
-  box-sizing: border-box
-  background-color: #ebebeb
-  border: 1px solid #ccc
-  border-radius: 3px
-  display: block
-  margin-bottom: 12px
-  min-height: 34px
-  padding: 7px
-
-  &.full
-    width: 100%
-
-  &.input-error
-    background-color: #ece9e9
-    border-color: #ba1212
-
-  &:focus
-    outline: 0
-
-input[type="file"]
-  margin-bottom: 16px
-
-input[type="radio"]
-  -webkit-appearance: radio
-  min-height: inherit
-
-input[type="text"],
-input[type="password"],
-input[type="email"]
-  transition: background 85ms ease-in,
-        border-color 85ms ease-in
-  width: 250px
-
-  &.inline-input
-    background: none
-    border: 0
-    margin: 0
-    padding: 2px
-    min-height: 0
-    height: 18px
-    width: 200px
-
-  &.full-line
-    width: 100%
-
-input[type="email"]:invalid
-  box-shadow: none
-
-input[type="text"],
-input[type="password"],
-input[type="email"],
-textarea
-
-  &:hover
-    border-color: #999
-
-    &.input-error
-      border-color: #ba1212
-
-  &:focus
-    background: #fff
-    border-color: #318ec4
-    box-shadow: 0 0 2px #318ec4
-
-    &.input-error
-      background-color: #f8f7f7
-      border-color: #ba1212
-      box-shadow: 0 0 2px #d11515
-
-  &:disabled
-    background-color: #dcdcdc
-    border-color: #bfbfbf
-    color: #8c8c8c
-    -webkit-touch-callout: none
-    user-select: none
-
-select
-  max-height: 300px
-  width: 256px
-  margin-bottom: 8px
-
-  &.inline
-    width: 100%
-
-option[disabled]
-  color: #8c8c8c
-
-textarea
-  height: 150px
-  transition: background 85ms ease-in,
-        border-color 85ms ease-in
-  resize: vertical
-  width: 100%
-
-  &.editor
-    resize: none
-    padding-bottom: 22px
-
-
-.button
-  border-radius: 3px
-  text-decoration: none
-  position: relative
-
-input[type="submit"],
-button
-  background: #cfcfcf
-  background: linear-gradient(#cfcfcf, #c2c2c2)
-  border: none
-  cursor: pointer
-  display: inline-block
-  font-weight: 700
-  line-height: 22px
-  margin: 8px 4px 0 0
-  padding: 7px 20px
-  text-align: center
-
-  .wide
-    padding-left: 30px
-    padding-right: 30px
-
-  &:hover,
-  &:focus
-    background: #c2c2c2
-    background: linear-gradient(#c2c2c2, #b5b5b5)
-
-  &:active
-    background: #b5b5b5
-    background: linear-gradient(#b5b5b5, #a8a8a8)
-    box-shadow: inset 0 3px 6px rgba(0, 0, 0, .1)
-
-    &:hover,
-    &:focus,
-    &:active
-      background: #e6e6e6
-      background: linear-gradient(#e6e6e6, #e6e6e6)
-
-  &.primary
-    background: #005377
-    box-shadow: 0 1px 0 #4d4d4d
-    color: white
-
-    &:hover,
-    &:focus
-      background: #004766
-
-    &:active
-      background: #01628C
-
-  &.negate
-    &:hover,
-    &:focus
-      background: #990f0f
-      background: linear-gradient(#990f0f, #7d0c0c)
-      box-shadow: 0 1px 0 #4d4d4d
-      color: #fff
-
-    &:active
-      background: #7d0c0c
-      box-shadow: 0 1px 0 #4d4d4d
-      color: #fff
-
-  i.fa
-    margin-right: 10px
-
-input[type="submit"].disabled,
-input[type="submit"]:disabled,
-input[type="button"].disabled,
-button.disabled,
-.button.disabled
-
-  &,
-  &:hover,
-  &:active
-    background: #cfcfcf
-    cursor: default
-    box-shadow: none
-    color: #a8a8a8
-
-fieldset
-  border: 1px solid #bfbfbf
-  padding: 15px
-  margin-bottom: 15px
-
-input[type="hidden"]
-  display: none
-
-.radio-div,
-.check-div
-  display: block
-  margin: 0 0 4px 20px
-  min-height: 20px
-  position: relative
-
-  input
-    left: -18px
-    min-height: 0
-    margin: 0
-    padding: 0
-    position: absolute
-    top: 2px
-
-  label
-    font-weight: 400
-
-label
-  display: block
-  font-weight: 700
-  margin-bottom: 4px
-
-  &.form-error
-    color: #ba1212
-
-input,
-textarea
-  &::-webkit-input-placeholder,
-  &::-moz-placeholder
-    color: #8c8c8c
-
-.edit-controls,
-.add-controls
-  display: flex
-  align-items: baseline
-  margin-top: 0
-
-  button[type=submit]
-  input[type=button]
-    float: left
-    height: 32px
-    margin-top: -2px
-    padding-top: 5px
-    padding-bottom: 5px
-
-  .fa-times-thin
-    font-size: 26px
-    margin: 3px 4px
-
-// Material Design checkboxes
-  [type="checkbox"]:not(:checked),
-  [type="checkbox"]:checked
-    position: absolute
-    left: -9999px
-    visibility: hidden
-    display: none
-
-.materialCheckBox
-  position: relative
-  width: 13px
-  height: @width
-  z-index: 0
-  border: 2px solid #5a5a5a
-  border-radius: 1px
-  transition: .2s
-  margin: 0
-  cursor: pointer
-
-  &.is-checked
-    top: -4px
-    left: -3px
-    width: 7px
-    height: 15px
-    margin-right: 6px
-    border-top: 2px solid transparent
-    border-left: 2px solid transparent
-    transform: rotate(40deg)
-    -webkit-backface-visibility: hidden
-    transform-origin: 100% 100%
-
-.button-link
-  background: #fff
-  background: linear-gradient(#fff, #f5f5f5)
-  border-radius: 3px
-  box-sizing: border-box
-  user-select: none
-  border: 1px solid #e3e3e3
-  border-bottom-color: #c2c2c2
-  cursor: pointer
-  display: block
-  font-weight: 700
-  height: 34px
-  margin-top: 6px
-  max-width: 300px
-  padding: 7px
-  position: relative
-  text-decoration: none
-  overflow: ellipsis
-
-  .on
-    background: #48b512
-    background: linear-gradient(#48b512, #3d990f)
-    border-radius: 3px
-    color: #fff
-    display: none
-    font-size: 12px
-    font-weight: 700
-    height: 17px
-    line-height: @height
-    margin: 0
-    padding: 2px 4px
-    position: absolute
-    right: 5px
-    top: 5px
-    text-align: center
-
-  &.is-on
-    padding-right: 30px
-    max-width: 196px
-
-    .on
-      display: block
-
-  &.inline
-    color: #666
-    padding: 2px 14px
-    margin-left: 4px
-
-  &.setting
-    height: 52px
-    float: left
-    position: relative
-    margin-top: 0
-
-    &.disabled
-      background: #fff
-      border-color: #e9e9e9
-      color: #8c8c8c
-      cursor: default
-
-      select
-        display: none
-
-      &:hover .label
-        color: #8c8c8c
-
-      &,
-      &:hover,
-      &:active,
-      &.primary,
-      &.primary:hover,
-      &.primary:active
-        background: #cfcfcf
-        border-color: #c2c2c2
-        border-bottom-color: #b5b5b5
-        cursor: default
-        box-shadow: none
-        color: #a8a8a8
-
-    .label
-      color: #8c8c8c
-      display: block
-      font-size: 12px
-      line-height: 14px
-      margin-bottom: 0
-
-    &:hover .label
-      color: #eee
-
-    .value
-      display: block
-      font-size: 18px
-      line-height: 24px
-      overflow: hidden
-      text-overflow: ellipsis
-
-    label
-      display: none
-
-    select
-      border: none
-      cursor: pointer
-      height: 50px
-      left: 0
-      margin: 0
-      opacity: 0
-      position: absolute
-      top: 0
-      z-index: 2
-      width: 100%
-
-  &:hover
-    background: #318ec4
-    background: linear-gradient(#318ec4, #2b7cab)
-    border-color: #2e85b8
-    color: #fff
-
-    .on
-      background-image: none
-      background-color: rgba(255, 255, 255, .3)
-      border-color: transparent
-
-  &:active
-    background: #2e85b8
-    background: linear-gradient(#2e85b8, #28739f)
-    border-color: #2b7cab
-    color: #fff
-
-  .button-link.negate
-
-    &:hover
-      background: #990f0f
-      background: linear-gradient(#990f0f, #7d0c0c)
-      border-color: @background
-
-    &:active
-      background: #7d0c0c
-      border-color: #990f0f
-
-
-  &.primary
-    background: #48b512
-    background: linear-gradient(#48b512, #3d990f)
-    border: 1px solid
-    border-color: #3d990f
-    color: #fff
-
-    &:hover
-      background: #3d990f
-      background: linear-gradient(#3d990f, #327d0c)
-      border-color: #3d990f
-
-  &.danger
-    background: #ba1212
-    background: linear-gradient(#ba1212, #8b0e0e)
-    border: 1px solid
-    border-color: #a21010
-    color: #fff
-
-    &:hover
-      background: #a21010
-      background: linear-gradient(#a21010, #740b0b)
-      border-color: #8b0e0e
-
-button
-  &.quiet-button,
-  &.loud-text-button
-    background: none
-    text-align: left
-    line-height: normal
-    border: none
-    box-shadow: none
-
-    &:active
-      color: #4d4d4d
-      background: #d3d3d3
-      box-shadow: none
-
-  &.quiet-button
-    font-weight: 400
-    text-decoration: underline
-
-  &.loud-text-button
-    width: 100%
-
-    &:hover
-      color: #111
-
-.emphasis-button,
-.quiet-button
-  border-radius: 3px
-  user-select: none
-  color: #8c8c8c
-  display: block
-  margin: 2px 0
-  padding: 6px 8px
-  position: relative
-
-  &.w-img
-    padding-left: 28px
-
-  &:hover
-    color: #4d4d4d
-    background: #dcdcdc
-
-  &:active
-    color: #4d4d4d
-    background: #d3d3d3
-
-.quiet-button-large
-  padding: 16px 24px
-
-.emphasis-button
-  color: #74663e
-  background: #ecdfbb
-
-  &:hover
-    color: #53492d
-    background: #e7d6a7
-
-  &:active
-    color: #53492d
-    background: #e1cc93
-
-.is-editable
-  cursor: pointer
-
-.big-link
-  border-radius: 3px
-  display: block
-  margin: 6px 0 6px 40px
-  padding: 11px
-  position: relative
-  text-decoration: none
-  font-size: 16px
-  line-height: 20px
-
-  .text
-    text-decoration: underline
-
-  &:hover
-    background: #dcdcdc
-
-  &.options
-    padding-right: 41px
-
-  .option
-    height: 30px
-    width: @height
-    position: absolute
-    right: 6px
-    top: 6px
-
-  &.none
-    color: #8c8c8c
-    text-decoration: none
-
-    &:hover
-      background: transparent
-
-  &.avatar-changer
-    padding-right: 51px
-
-    .member
-      border: 1px solid #ccc
-      border-radius: 3px
-      height: 40px
-      width: @height
-      position: absolute
-      right: 0
-      top: 0
-
-      .member-avatar
-        height: 40px
-        width: @height
-
-      .member-initials
-        font-size: 16px
-        height: 40px
-        line-height: @height
-        max-height: @height
-
-.show-more
-  border-radius: 3px
-  color: #8c8c8c
-  display: block
-  padding: 16px 8px 16px 40px
-  margin: 8px 0
-
-  &:hover
-    background: #dcdcdc
-    text-decoration: underline
-
-  &.compact
-    padding: 12px 8px
-    margin: 8px 0 0
-    text-align: center
-
-.board-widget .show-more
-  padding: 12px 8px 12px 40px
-
-.uploader
-  clear: both
-  cursor: pointer
-  position: relative
-  height: 34px
-  width: 100%
-
-  .realfile
-    cursor: pointer
-    height: 34px
-    line-height: @height
-    position: absolute
-    top: 0
-    left: 0
-    width: 100%
-    z-index: 2
-    font-size: 23px
-
-    input[type="file"]
-      cursor: pointer
-      height: 34px
-      line-height: @height
-      margin: 0
-      opacity: 0
-      padding: 0
-      width: 100%
-      z-index: 2
-      font-size: 23px
-
-  &:hover .fakefile
-    background: #318ec4
-    background: linear-gradient(#318ec4, #2b7cab)
-    border-color: #2e85b8
-    color: #fff
-
-.dropdown-menu
-  border-radius: 2px
-  overflow: hidden
-
-  li
-    border-top: none
-
-    a
-      padding: 4px 12px 4px 8px
-
-      img
-        width: 18px
-        height: @width
-        margin-right: 5px
-        vertical-align: middle
-
-      .minicard-label
-        width: 11px
-        height: @width
-        border-radius: 2px
-        margin: 2px 7px -2px -2px
-        display: inline-block
-
-    &.active
-      background: #005377
-
-      a, .quiet
-        color: white
-
-// Material Design Toggle Switch
-.material-toggle-switch
-  display: flex
-
-.toggle-label
-  position: relative
-  display: block
-  height: 20px
-  width: 44px
-  background-color: #a6a6a6
-  border-radius: 100px
-  cursor: pointer
-  transition: all 0.3s ease
-
-  &:after
-    position: absolute
-    left: -2px
-    top: -3px
-    display: block
-    width: 26px
-    height: 26px
-    border-radius: 100px
-    background-color: #fff
-    box-shadow: 0px 3px 3px rgba(0,0,0,0.05)
-    content: ''
-    transition: all 0.3s ease
-
-  &:active
-    &:after
-      transform: scale(1.15, 0.85)
-
-.toggle-switch:checked ~ .toggle-label
-  background-color: #6fbeb5
-
-  &:after
-    left: 20px
-    background-color: #179588
-
-.toggle-switch:checked:disabled ~ .toggle-label
-  background-color: #d5d5d5
-  pointer-events: none
-
-  &:after
-    background-color: #bcbdbc
-
-.toggle-switch
-  display: none
-
-.toggle-switch-title
-  margin: 0 0.5em
-  display: flex
-
-
-@media screen and (max-width: 800px)
-  .edit-controls,
-  .add-controls
-    .fa-times-thin
-      margin: 3px 20px
@@ -0,0 +1,51 @@
+.map-members:after {
+  content: "";
+  flex: auto;
+}
+.map-members .mapping-list {
+  display: flex;
+  flex-wrap: wrap;
+  margin: 0 -4px;
+}
+.map-members .mapping-list .mapping-item {
+  max-width: 300px;
+  min-width: 200px;
+  padding: 6px;
+  margin: 5px;
+  flex: 1;
+  background: #fff;
+  border-radius: 3px;
+  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
+}
+.map-members .mapping-list .mapping-item:hover {
+  background: #f2f2f2;
+}
+.map-members .mapping-list .mapping-item.filled {
+  background: #e0ffe5;
+}
+.map-members .mapping-list .mapping-item.filled:hover {
+  background: #ffe0e0;
+}
+.map-members .mapping-list .mapping-item.ghost-item {
+  height: 0;
+  visibility: hidden;
+  border: none;
+}
+.map-members .mapping-list .profile-source {
+  display: inline-block;
+  width: 80%;
+}
+.map-members .mapping-list .wekan {
+  display: inline-block;
+  width: 35px;
+}
+.map-members .mapping-list .wekan .member {
+  float: none;
+}
+a.show-mapping {
+  text-decoration: underline;
+}
+.import-members-map-note {
+  font-size: 90%;
+  font-weight: bold;
+}
@@ -56,17 +56,17 @@ template(name="importMapMembersAddPopup")
    p
      | {{_ 'import-user-select'}}
    .js-map-member
-      +esInput(index="users")
+      +EasySearch.Input(index=searchIndex)
    ul.pop-over-list
-      +esEach(index="users")
+      +EasySearch.Each(index=searchIndex)
        li.item.js-member-item
-          a.name.js-select-import(title="{{profile.fullname}} ({{username}})" data-id="{{_id}}")
-            +userAvatar(userId=_id esSearch=true)
+          a.name.js-select-import(title="{{profile.fullname}} ({{username}})" data-id="{{__originalId}}")
+            +userAvatar(userId=__originalId)
            span.full-name
              = profile.fullname
              | (<span class="username">{{username}}</span>)
-      +ifEsIsSearching(index='users')
+      +EasySearch.IfSearching(index=searchIndex)
        +spinner
-      +ifEsHasNoResults(index="users")
+      +EasySearch.IfNoResults(index=searchIndex)
        .manage-member-section
          p.quiet {{_ 'no-results'}}
@@ -87,8 +87,13 @@ BlazeComponent.extendComponent({
        if (err) {
          this.setError(err.error);
        } else {
+          let title = getSlug(this.importedData.get().title) || 'imported-board';
          Session.set('fromBoard', null);
-          Utils.goBoardId(res);
+          FlowRouter.go('board', {
+            id: res,
+            slug: title,
+          })
+          //Utils.goBoardId(res);
        }
      },
    );
@@ -292,7 +297,7 @@ BlazeComponent.extendComponent({
  },

  onSelectUser() {
-    Popup.getOpenerComponent().mapSelectedMember(this.currentData()._id);
+    Popup.getOpenerComponent(5).mapSelectedMember(this.currentData().__originalId);
    Popup.back();
  },

@@ -304,3 +309,7 @@ BlazeComponent.extendComponent({
    ];
  },
 }).register('importMapMembersAddPopup');
+
+Template.importMapMembersAddPopup.helpers({
+  searchIndex: () => UserSearchIndex,
+})
@@ -1,53 +0,0 @@
-@import 'nib'
-
-.map-members
-  &:after
-    content: "";
-    flex: auto;
-
-  .mapping-list
-    display: flex
-    flex-wrap: wrap
-    margin: 0 -4px
-
-    .mapping-item
-      max-width: 300px
-      min-width: 200px
-      padding: 6px
-      margin: 5px
-      flex:1
-      background: white
-      border-radius: 3px
-      box-shadow: 0 1px 2px rgba(0,0,0,.15)
-
-      &:hover
-        background: darken(white, 5%)
-
-      &.filled
-        background: #E0FFE5
-
-        &:hover
-          background: #FFE0E0
-
-      &.ghost-item
-        height: 0
-        visibility: hidden
-        border: none
-
-    .profile-source
-      display: inline-block
-      width: 80%
-
-    .wekan
-      display: inline-block
-      width: 35px
-
-      .member
-        float: none
-
-a.show-mapping
-  text-decoration underline
-
-.import-members-map-note
-  font-size: 90%
-  font-weight: bold
@@ -0,0 +1,367 @@
+.list {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  background: #dedede;
+  border-left: 1px solid #ccc;
+  padding: 0;
+  float: left;
+  min-width: 270px;
+  max-width: 270px;
+  /* Reverted incomplete change list width: */
+  /* https://github.com/wekan/wekan/issues/4558 */
+  /* Orinal width: 270px. Changes not saved yet: */
+  /*resize: both;  - List width and height resizeable */
+  /* overflow: auto; - List width and height resizeable */
+}
+.list:first-child {
+  margin-left: 5px;
+  border-left: none;
+}
+.card-details + .list {
+  border-left: none;
+}
+.list.ui-sortable-helper {
+  box-shadow: -2px 2px 8px rgba(0,0,0,0.3), 0 0 1px rgba(0,0,0,0.5);
+  transform: rotate(4deg);
+  cursor: grabbing;
+}
+.list.ui-sortable-helper .list-header.ui-sortable-handle {
+  cursor: grabbing;
+}
+.list.placeholder {
+  background-color: rgba(0,0,0,0.2);
+  border-color: transparent;
+  box-shadow: none;
+  height: 100px;
+}
+.list.list-composer .open-list-composer,
+.list .list-composer .open-list-composer {
+  color: #8c8c8c;
+}
+.list.list-composer .list-name-input,
+.list .list-composer .list-name-input {
+  background: #fff;
+  margin: -3px 0 8px;
+}
+.list-header-add {
+  flex: 0 0 auto;
+  padding: 20px 12px 4px;
+  position: relative;
+  min-height: 20px;
+}
+.list-header {
+  flex: 0 0 auto;
+  padding: 20px 12px 4px;
+  position: relative;
+  min-height: 20px;
+  background-color: #e4e4e4;
+  border-bottom: 6px solid #e4e4e4;
+}
+.list-header.list-header-card-count {
+  min-height: 35px;
+  height: auto;
+}
+.list-header.ui-sortable-handle {
+  cursor: grab;
+}
+.list-header .list-header-left-icon {
+  display: none;
+}
+.list-header .list-header-name {
+  display: inline;
+  font-size: 16px;
+  line-height: 17px;
+  margin: 0;
+  font-weight: bold;
+  min-height: 9px;
+  min-width: 30px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  word-wrap: break-word;
+}
+.list-header .list-header-watch-icon {
+  padding-left: 10px;
+  color: #a6a6a6;
+}
+.list-header .list-header-menu {
+  float: right;
+}
+@media print {
+  .list-header .list-header-menu,
+  .list-header .list-header-menu-icon {
+    display: none;
+  }
+}
+.list-header .list-header-plus-top {
+  color: #a6a6a6;
+  margin-right: 15px;
+}
+.list-header .highlight {
+  color: #ce1414;
+}
+.list-header .cardCount {
+  color: #8c8c8c;
+  font-size: 12px;
+  font-weight: bold;
+}
+.list-header .list-header-plus-top,
+.js-open-list-menu,
+.list-header-menu a {
+  color: #4d4d4d;
+  padding-left: 4px;
+}
+.js-open-list-menu {
+  font-size: 18px;
+}
+.list-body {
+  flex: 1 1 auto;
+  flex-direction: column;
+  display: flex;
+  overflow-y: auto;
+  padding: 5px 11px;
+}
+.list-body .minicards {
+  flex-grow: 1;
+  flex-shrink: 0;
+}
+.list-body .minicards form {
+  margin-bottom: 9px;
+}
+.list-body .minicards .add-controls button {
+  min-height: 50px;
+}
+.list-body .open-minicard-composer {
+  border-radius: 2px;
+  color: #8c8c8c;
+  display: block;
+  padding: 7px 10px;
+  position: relative;
+  text-decoration: none;
+  animation: fadeIn 0.3s;
+}
+@media print {
+  .list-body .open-minicard-composer {
+    display: none;
+  }
+}
+.list-body .open-minicard-composer i.fa {
+  margin-right: 7px;
+}
+.list-body .open-minicard-composer:hover {
+  background: #fafafa;
+  color: #222;
+  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
+}
+#js-wip-limit-edit {
+  padding-top: 2%;
+}
+#js-wip-limit-edit p {
+  margin-bottom: 0;
+}
+#js-wip-limit-edit input {
+  display: inline-block;
+}
+#js-wip-limit-edit .wip-limit-value {
+  width: 20%;
+  margin-right: 5%;
+}
+#js-wip-limit-edit .wip-limit-error {
+  display: none;
+}
+#js-wip-limit-edit .soft-wip-limit {
+  margin-right: 8px;
+}
+#js-wip-limit-edit div {
+  float: left;
+}
+@media screen and (max-width: 800px) {
+  .mini-list {
+    flex: 0 0 60px;
+    height: auto;
+    width: 100%;
+    border-left: 0px;
+    border-bottom: 1px solid #ccc;
+  }
+  .list {
+    display: contents;
+    flex-basis: auto;
+    width: 100%;
+    border-left: 0px;
+  }
+  .list:first-child {
+    margin-left: 0px;
+  }
+  .list.ui-sortable-helper {
+    flex: 0 0 60px;
+    height: 60px;
+    width: 100%;
+    border-left: 0px;
+    border-bottom: 1px solid #ccc;
+  }
+  .list.ui-sortable-helper .list-header.ui-sortable-handle {
+    cursor: grabbing;
+  }
+  .list.placeholder {
+    flex: 0 0 60px;
+    height: 60px;
+    width: 100%;
+    border-left: 0px;
+    border-bottom: 1px solid #ccc;
+  }
+  .list-body {
+    padding: 15px 19px;
+  }
+  .list-header {
+    padding: 0 12px 0px;
+    border-bottom: 0px solid #e4e4e4;
+    height: 60px;
+    margin-top: 10px;
+    display: flex;
+    align-items: center;
+  }
+  .list-header .list-header-left-icon {
+    padding: 7px;
+    padding-right: 27px;
+    margin-top: 1px;
+    top: -7px;
+    left: -7px;
+  }
+  .list-header .list-header-menu-icon {
+    position: absolute;
+    padding: 7px;
+    top: 50%;
+    transform: translateY(-50%);
+    right: 47px;
+    font-size: 20px;
+  }
+  .list-header .list-header-handle {
+    position: absolute;
+    padding: 7px;
+    top: 50%;
+    transform: translateY(-50%);
+    right: 10px;
+    font-size: 24px;
+  }
+  .list-header {
+    display: grid;
+    grid-template-columns: 30px 5fr 1fr;
+  }
+  .list-header .list-header-left-icon {
+    display: grid;
+    grid-row: 1/3;
+    grid-column: 1;
+  }
+  .list-header .list-header-name {
+    grid-row: 1;
+    grid-column: 2;
+    align-self: end;
+  }
+  .list-header .cardCount {
+    grid-row: 2;
+    grid-column: 2;
+    align-self: start;
+  }
+  .list-header .list-header-menu {
+    grid-row: 1/3;
+    grid-column: 3;
+  }
+  .list-header .inlined-form {
+    grid-row: 1/3;
+    grid-column: 1/4;
+  }
+  .list-header .edit-controls {
+    align-items: initial;
+  }
+}
+.link-board-wrapper {
+  display: flex;
+  align-items: baseline;
+}
+.link-board-wrapper .js-link-board {
+  margin-left: 15px;
+}
+.search-card-results {
+  max-height: 250px;
+  overflow: hidden;
+}
+.sk-spinner-list {
+  margin-top: unset !important;
+}
+.list-header-white {
+  border-bottom: 6px solid #fff;
+  border: 1px solid #eee;
+}
+.list-header-green {
+  border-bottom: 6px solid #3cb500;
+}
+.list-header-yellow {
+  border-bottom: 6px solid #fad900;
+}
+.list-header-orange {
+  border-bottom: 6px solid #ff9f19;
+}
+.list-header-red {
+  border-bottom: 6px solid #eb4646;
+}
+.list-header-purple {
+  border-bottom: 6px solid #a632db;
+}
+.list-header-blue {
+  border-bottom: 6px solid #0079bf;
+}
+.list-header-pink {
+  border-bottom: 6px solid #ff78cb;
+}
+.list-header-sky {
+  border-bottom: 6px solid #00c2e0;
+}
+.list-header-black {
+  border-bottom: 6px solid #4d4d4d;
+}
+.list-header-lime {
+  border-bottom: 6px solid #51e898;
+}
+.list-header-silver {
+  border-bottom: 6px solid unset;
+}
+.list-header-peachpuff {
+  border-bottom: 6px solid #ffdab9;
+}
+.list-header-crimson {
+  border-bottom: 6px solid #dc143c;
+}
+.list-header-plum {
+  border-bottom: 6px solid #dda0dd;
+}
+.list-header-darkgreen {
+  border-bottom: 6px solid #006400;
+}
+.list-header-slateblue {
+  border-bottom: 6px solid #6a5acd;
+}
+.list-header-magenta {
+  border-bottom: 6px solid #f0f;
+}
+.list-header-gold {
+  border-bottom: 6px solid #ffd700;
+}
+.list-header-navy {
+  border-bottom: 6px solid #000080;
+}
+.list-header-gray {
+  border-bottom: 6px solid #808080;
+}
+.list-header-saddlebrown {
+  border-bottom: 6px solid #8b4513;
+}
+.list-header-paleturquoise {
+  border-bottom: 6px solid #afeeee;
+}
+.list-header-mistyrose {
+  border-bottom: 6px solid #ffe4e1;
+}
+.list-header-indigo {
+  border-bottom: 6px solid #4b0082;
+}