v5.45

Fix: Show missing user mentions popover when posting comments in maximized card layout

.babelrc

@@ -1,5 +1,12 @@
 { 
   "presets": [ 
     "@babel/preset-stage-3" 
-  ]
+  ],
+  "env": {
+    "COVERAGE": {
+      "plugins": [
+        "istanbul"
+      ]
+    }
+  }
 }

.devcontainer/Dockerfile

@@ -1,16 +1,12 @@
-FROM quay.io/wekan/ubuntu:groovy-20201125.2
+FROM quay.io/wekan/ubuntu:groovy-20210115
 LABEL maintainer="sgr"
 
-# 2020-12-03:
-# - Above Ubuntu base image copied from Docker Hub ubuntu:groovy-20201125.2
-#   to Quay to avoid Docker Hub rate limits.
-
-ENV BUILD_DEPS="gnupg gosu bsdtar wget curl bzip2 g++ build-essential python git ca-certificates iproute2"
+ENV BUILD_DEPS="gnupg gosu libarchive-tools wget curl bzip2 g++ build-essential python git ca-certificates iproute2"
 ENV DEBIAN_FRONTEND=noninteractive
 
 ENV \
     DEBUG=false \
-    NODE_VERSION=v12.20.1 \
+    NODE_VERSION=v12.22.4 \
     METEOR_RELEASE=1.10.2 \
     USE_EDGE=false \
     METEOR_EDGE=1.5-beta.17 \
@@ -19,6 +15,7 @@ ENV \
     ARCHITECTURE=linux-x64 \
     SRC_PATH=./ \
     WITH_API=true \
+    RESULTS_PER_PAGE="" \
     ACCOUNTS_LOCKOUT_KNOWN_USERS_FAILURES_BEFORE=3 \
     ACCOUNTS_LOCKOUT_KNOWN_USERS_PERIOD=60 \
     ACCOUNTS_LOCKOUT_KNOWN_USERS_FAILURE_WINDOW=15 \
@@ -133,23 +130,24 @@ ENV \
     SAML_PUBLIC_CERTFILE="" \
     SAML_IDENTIFIER_FORMAT="" \
     SAML_LOCAL_PROFILE_MATCH_ATTRIBUTE="" \
-    SAML_ATTRIBUTES=""
+    SAML_ATTRIBUTES="" \
+    DEFAULT_WAIT_SPINNER=""
 
 # Install OS
 RUN set -o xtrace \
   && useradd --user-group -m --system --home-dir /home/wekan wekan \
   && apt-get update \
-	&& apt-get install --assume-yes --no-install-recommends apt-utils apt-transport-https ca-certificates 2>&1 \
-	&& apt-get install --assume-yes --no-install-recommends ${BUILD_DEPS}
+  && apt-get install --assume-yes --no-install-recommends apt-utils apt-transport-https ca-certificates 2>&1 \
+  && apt-get install --assume-yes --no-install-recommends ${BUILD_DEPS}
 
 # Install NodeJS
 RUN set -o xtrace \
   && cd /tmp \
-  && curl -fsSLO --compressed "https://nodejs.org/dist/v$NODE_VERSION/node-v$NODE_VERSION-$ARCHITECTURE.tar.xz" \
-  && curl -fsSLO --compressed "https://nodejs.org/dist/v$NODE_VERSION/SHASUMS256.txt.asc" \
-  && grep " node-v$NODE_VERSION-$ARCHITECTURE.tar.xz\$" SHASUMS256.txt.asc | sha256sum -c - \
-  && tar -xJf "node-v$NODE_VERSION-$ARCHITECTURE.tar.xz" -C /usr/local --strip-components=1 --no-same-owner \
-  && rm "node-v$NODE_VERSION-$ARCHITECTURE.tar.xz" SHASUMS256.txt.asc \
+  && curl -fsSLO --compressed "https://nodejs.org/dist/$NODE_VERSION/node-$NODE_VERSION-$ARCHITECTURE.tar.xz" \
+  && curl -fsSLO --compressed "https://nodejs.org/dist/$NODE_VERSION/SHASUMS256.txt.asc" \
+  && grep " node-$NODE_VERSION-$ARCHITECTURE.tar.xz\$" SHASUMS256.txt.asc | sha256sum -c - \
+  && tar -xJf "node-$NODE_VERSION-$ARCHITECTURE.tar.xz" -C /usr/local --strip-components=1 --no-same-owner \
+  && rm "node-$NODE_VERSION-$ARCHITECTURE.tar.xz" SHASUMS256.txt.asc \
   && ln -s /usr/local/bin/node /usr/local/bin/nodejs \
   && mkdir -p /usr/local/lib/node_modules/fibers/.node-gyp /root/.node-gyp/${NODE_VERSION} /home/wekan/.config \
   && npm install -g npm@${NPM_VERSION} \
@@ -171,17 +169,65 @@ RUN set -o xtrace \
 
 ENV PATH=$PATH:/home/wekan/.meteor/
 
-# Copy source dir
 USER root
 
 RUN echo "export PATH=$PATH" >> /etc/environment
 
-RUN set -o xtrace \
-  && mkdir /home/wekan/app
+USER wekan
 
-COPY ${SRC_PATH} /home/wekan/app/
+# Copy source dir
+RUN set -o xtrace \
+  && mkdir -p /home/wekan/app/.meteor \
+  && mkdir -p /home/wekan/app/packages
+
+COPY \
+    .meteor/.finished-upgraders \
+    .meteor/.id \
+    .meteor/cordova-plugins \
+    .meteor/packages \
+    .meteor/platforms \
+    .meteor/release \
+    .meteor/versions \
+    /home/wekan/app/.meteor/
+
+COPY \
+    package.json \
+    settings.json \
+    /home/wekan/app/
+
+COPY \
+    packages \
+    /home/wekan/app/packages/
+
+USER root
 
 RUN set -o xtrace \
   && chown -R wekan:wekan /home/wekan/app /home/wekan/.meteor
 
 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
+    cd /home/wekan/app && \
+    /home/wekan/.meteor/meteor add standard-minifier-js && \
+    /home/wekan/.meteor/meteor npm install && \
+    /home/wekan/.meteor/meteor build --directory /home/wekan/app_build
+
+RUN \
+    set -o xtrace && \
+    cd /home/wekan/app_build/bundle/programs/server/ && \
+    chmod u+w package.json npm-shrinkwrap.json && \
+    npm install
+
+ENV PORT=3000
+EXPOSE $PORT
+WORKDIR /home/wekan/app
+
+CMD ["/home/wekan/.meteor/meteor", "run", "--verbose", "--settings", "settings.json"]

.devcontainer/docker-compose.yml

@@ -3,17 +3,18 @@ version: '3.7'
 services:
 
   wekandb-dev:
-    image: mongo:4.0.12
+    image: mongo:4.4
     container_name: wekan-dev-db
     restart: unless-stopped
-    command: mongod --smallfiles --oplogSize 128
+    command: mongod --oplogSize 128
     networks:
       - wekan-dev-tier
     expose:
       - 27017
     volumes:
-      - wekan-dev-db:/data/db
-      - wekan-dev-db-dump:/dump
+      - ./volumes/wekan-db:/data/db
+      - ./volumes/wekan-db-dump:/dump
+      - /etc/localtime:/etc/localtime:ro
 
   wekan-dev:
     container_name: wekan-dev-app
@@ -35,9 +36,13 @@ services:
     depends_on:
       - wekandb-dev
     volumes:
-      - ..:/app:delegated
-    command:
-      sleep infinity
+      - ../client:/home/wekan/app/client
+      - ../models:/home/wekan/app/models
+      - ../config:/home/wekan/app/config
+      - ../i18n:/home/wekan/app/i18n
+      - ../server:/home/wekan/app/server
+      - ../public:/home/wekan/app/public
+      - /etc/localtime:/etc/localtime:ro
 
 volumes:
   wekan-dev-db:

.dockerignore

@@ -0,0 +1,36 @@
+*~
+*.swp
+.meteor-spk
+*.sublime-workspace
+tmp/
+node_modules/
+npm-debug.log
+.gitmodules
+.vscode/
+.idea/
+.build/*
+**/parts/
+**/stage
+**/prime
+**/*.snap
+snap/.snapcraft/
+.idea
+.DS_Store
+.DS_Store?
+.build*
+*.browserify.js.cached
+*.browserify.js.map
+.build*
+versions.json
+.versions
+.npm
+.build*
+._*
+.Trashes
+Thumbs.db
+ehthumbs.db
+.eslintcache
+.meteor/local
+.devcontainer/docker-compose.extend.yml
+.devcontainer/volumes*/
+.git

.future-snap/broken-snapcraft.yaml

@@ -81,7 +81,7 @@ parts:
     wekan:
         source: .
         plugin: nodejs
-        node-engine: 12.20.1
+        node-engine: 12.22.4
         node-packages:
             - node-gyp
             - node-pre-gyp

.future-snap/old-rebuild-wekan.sh

@@ -5,7 +5,7 @@ echo "      with 'sudo dpkg-reconfigure locales' , so that MongoDB works correct
 echo "      You can still use any other locale as your main locale."
 
 #Below script installs newest node 8.x for Debian/Ubuntu/Mint.
-#NODE_VERSION=12.18.2
+#NODE_VERSION=12.21.0
 #X64NODE="https://nodejs.org/dist/v${NODE_VERSION}/node-v${NODE_VERSION}-linux-x64.tar.gz"
 
 function pause(){
@@ -80,7 +80,7 @@ do
 			curl -0 -L https://npmjs.org/install.sh | sudo sh
 			sudo chown -R $(id -u):$(id -g) $HOME/.npm
 			sudo npm -g install n
-			sudo n 12.18.2
+			sudo n 12.21.0
 			#curl -sL https://deb.nodesource.com/setup_8.x | sudo -E bash -
 			#sudo apt-get install -y nodejs
 		elif [[ "$OSTYPE" == "darwin"* ]]; then

.future-snap/snapcraft.yaml

@@ -83,7 +83,7 @@ parts:
     wekan:
         source: .
         plugin: nodejs
-        node-engine: 12.20.1
+        node-engine: 12.22.4
         node-packages:
             - node-gyp
             - node-pre-gyp

.github/ISSUE_TEMPLATE.md

@@ -1,8 +1,16 @@
 ## Issue
 
+Note: With Docker, please don't use latest tag. Only use release tags.
+See https://github.com/wekan/wekan/issues/3874
+
+If you can not login for any reason:
+- https://github.com/wekan/wekan/wiki/Forgot-Password
+
+Email settings:
+- https://github.com/wekan/wekan/wiki/Troubleshooting-Mail
+
 Add these issues to elsewhere:
-- Snap: https://github.com/wekan/wekan-snap/issues
-- LDAP: https://github.com/wekan/wekan-ldap/issues
+- 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.

.github/workflows/test_suite.yml

@@ -0,0 +1,160 @@
+name: Test suite
+
+on:
+  push:
+    branches:
+      - master
+  pull_request:
+
+jobs:
+# the following are optional jobs and need to be configured according
+# to this project's settings:
+#
+#  lintcode:
+#    name: Javascript lint
+#    runs-on: ubuntu-latest
+#    steps:
+#    - name: checkout
+#      uses: actions/checkout@v2
+#
+#    - name: setup node
+#      uses: actions/setup-node@v1
+#      with:
+#        node-version: '12.x'
+#
+#    - name: cache dependencies
+#      uses: actions/cache@v1
+#      with:
+#        path: ~/.npm
+#        key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
+#        restore-keys: |
+#          ${{ runner.os }}-node-
+#
+#    - run: npm install
+#    - run: npm run lint:code
+#
+#  lintstyle:
+#    name: SCSS lint
+#    runs-on: ubuntu-latest
+#    needs: [lintcode]
+#    steps:
+#    - name: checkout
+#      uses: actions/checkout@v2
+#
+#    - name: setup node
+#      uses: actions/setup-node@v1
+#      with:
+#        node-version: '12.x'
+#
+#    - name: cache dependencies
+#      uses: actions/cache@v1
+#      with:
+#        path: ~/.npm
+#        key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
+#        restore-keys: |
+#          ${{ runner.os }}-node-
+#    - run: npm install
+#    - run: npm run lint:style
+#
+#  lintdocs:
+#    name: documentation lint
+#    runs-on: ubuntu-latest
+#    needs: [lintcode,lintstyle]
+#    steps:
+#    - name: checkout
+#      uses: actions/checkout@v2
+#
+#    - name: setup node
+#      uses: actions/setup-node@v1
+#      with:
+#        node-version: '12.x'
+#
+#    - name: cache dependencies
+#      uses: actions/cache@v1
+#      with:
+#        path: ~/.npm
+#        key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
+#        restore-keys: |
+#          ${{ runner.os }}-node-
+#
+#    - run: npm install
+#    - run: npm run lint:markdown
+
+  tests:
+    name: Meteor ${{ matrix.meteor }} tests
+    runs-on: ubuntu-latest
+    steps:
+
+      # CHECKOUTS
+      - name: Checkout
+        uses: actions/checkout@v2
+
+      # CACHING
+      - name: Install Meteor
+        id: cache-meteor-install
+        uses: actions/cache@v2
+        with:
+          path: ~/.meteor
+          key: v1-meteor-${{ hashFiles('.meteor/versions') }}
+          restore-keys: |
+                v1-meteor-
+
+      - name: Cache NPM dependencies
+        id: cache-meteor-npm
+        uses: actions/cache@v2
+        with:
+          path: ~/.npm
+          key: v1-npm-${{ hashFiles('package-lock.json') }}
+          restore-keys: |
+                v1-npm-
+
+      - name: Cache Meteor build
+        id: cache-meteor-build
+        uses: actions/cache@v2
+        with:
+          path: |
+            .meteor/local/resolver-result-cache.json
+            .meteor/local/plugin-cache
+            .meteor/local/isopacks
+            .meteor/local/bundler-cache/scanner
+          key: v1-meteor_build_cache-${{ github.ref }}-${{ github.sha }}
+          restore-key: |
+            v1-meteor_build_cache-
+
+      - name: Setup meteor
+        uses: meteorengineer/setup-meteor@v1
+        with:
+          meteor-release: '2.2'
+
+      - name: Install NPM Dependencies
+        run: meteor npm ci
+
+      - name: Run Tests
+        run: sh ./test-wekan.sh -cv
+
+      - name: Upload coverage
+        uses: actions/upload-artifact@v2
+        with:
+          name: coverage-folder
+          path: .coverage/
+
+  coverage:
+    name: Coverage report
+    runs-on: ubuntu-latest
+    needs: [tests]
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+
+      - name: Download coverage
+        uses: actions/download-artifact@v2
+        with:
+          name: coverage-folder
+          path: .coverage/
+
+
+      - name: Coverage Report
+        uses: VeryGoodOpenSource/very_good_coverage@v1.1.1
+        with:
+          path: ".coverage/lcov.info"
+          min_coverage: 1 # TODO add tests and increase to 95!

.gitignore

@@ -31,5 +31,10 @@ Thumbs.db
 ehthumbs.db
 .eslintcache
 .meteor/local
-.meteor-1.6-snap/.meteor/local
 .devcontainer/docker-compose.extend.yml
+.devcontainer/volumes*/
+.coverage
+
+# Helm chart
+# Chart dependencies
+/helm/wekan/**/*.tgz

.meteor/packages

@@ -6,8 +6,8 @@
 meteor-base@1.4.0
 
 # Build system
-ecmascript@0.14.4
-standard-minifier-css@1.7.1
+ecmascript@0.15.1
+standard-minifier-css@1.7.2
 standard-minifier-js@2.6.0
 mquandalle:jade
 coffeescript@2.4.1!
@@ -17,13 +17,13 @@ es5-shim@4.8.0
 
 # Collections
 aldeed:collection2
-cfs:standard-packages
+wekan-cfs-standard-packages
 cottz:publish-relations
 dburles:collection-helpers
 idmontie:migrations
 matb33:collection-hooks
 matteodem:easy-search
-mongo@1.10.1
+mongo@1.11.0
 mquandalle:collection-mutations
 
 # Account system
@@ -72,10 +72,10 @@ simple:rest-accounts-password
 useraccounts:core
 email@2.0.0
 horka:swipebox
-dynamic-import@0.5.5
+dynamic-import@0.6.0
 
-accounts-password@1.6.3
-cfs:gridfs
+accounts-password@1.7.0
+wekan-cfs-gridfs
 rzymek:fullcalendar
 momentjs:moment@2.22.2
 browser-policy-framing@1.1.0
@@ -83,7 +83,6 @@ mquandalle:moment
 msavin:usercache
 # Keep stylus in 1.1.0, because building v2 takes extra 52 minutes.
 coagmano:stylus@1.1.0!
-lucasantoniassi:accounts-lockout
 meteorhacks:subs-manager
 meteorhacks:picker
 lamhieu:unblock
@@ -91,9 +90,7 @@ meteorhacks:aggregate@1.3.0
 wekan-markdown
 konecty:mongo-counter
 percolate:synced-cron
-easylogic:summernote
-cfs:filesystem
-tmeasday:check-npm-versions
+wekan-cfs-filesystem
 steffo:meteor-accounts-saml
 rajit:bootstrap3-datepicker-fi
 rajit:bootstrap3-datepicker-ar
@@ -145,3 +142,8 @@ 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

.meteor/release

@@ -1 +1 @@
-METEOR@1.12.1
+METEOR@2.2

.meteor/versions

@@ -1,7 +1,7 @@
 3stack:presence@1.1.2
-accounts-base@1.7.1
+accounts-base@1.9.0
 accounts-oauth@1.2.0
-accounts-password@1.6.3
+accounts-password@1.7.1
 aldeed:collection2@2.10.0
 aldeed:collection2-core@1.2.0
 aldeed:schema-deny@1.1.0
@@ -10,37 +10,20 @@ aldeed:simple-schema@1.5.4
 allow-deny@1.1.0
 arillo:flow-router-helpers@0.5.2
 audit-argument-checks@1.0.7
-autoupdate@1.6.0
-babel-compiler@7.5.5
+autoupdate@1.7.0
+babel-compiler@7.6.1
 babel-runtime@1.5.0
 base64@1.0.12
 binary-heap@1.0.11
-blaze@2.3.4
-blaze-tools@1.0.10
+blaze@2.5.0
+blaze-tools@1.1.2
 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.1.3
+caching-html-compiler@1.2.0
 callback-hook@1.3.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
-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.1
 chuangbo:cookie@1.1.0
 coagmano:stylus@1.1.0
@@ -49,18 +32,18 @@ coffeescript-compiler@2.4.1
 cottz:publish-relations@2.0.8
 dburles:collection-helpers@1.1.0
 ddp@1.4.0
-ddp-client@2.3.3
+ddp-client@2.4.1
 ddp-common@1.4.0
 ddp-rate-limiter@1.0.9
-ddp-server@2.3.2
+ddp-server@2.3.3
 deps@1.0.12
 diff-sequence@1.1.1
-dynamic-import@0.5.5
+dynamic-import@0.6.0
 easylogic:summernote@0.8.8
-ecmascript@0.14.4
+ecmascript@0.15.1
 ecmascript-runtime@0.7.0
-ecmascript-runtime-client@0.11.0
-ecmascript-runtime-server@0.10.0
+ecmascript-runtime-client@0.11.1
+ecmascript-runtime-server@0.10.1
 ejson@1.1.1
 email@2.0.0
 es5-shim@4.8.0
@@ -70,10 +53,10 @@ fortawesome:fontawesome@4.7.0
 geojson-utils@1.0.10
 horka:swipebox@1.0.2
 hot-code-push@1.0.4
-html-tools@1.0.11
-htmljs@1.0.11
-http@1.4.2
-id-map@1.1.0
+html-tools@1.1.2
+htmljs@1.1.1
+http@1.4.4
+id-map@1.1.1
 idmontie:migrations@1.0.3
 inter-process-messaging@0.1.1
 jquery@1.11.11
@@ -84,11 +67,11 @@ 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.0
+launch-screen@1.2.1
 livedata@1.0.18
+lmieulet:meteor-coverage@3.2.0
 localstorage@1.2.0
-logging@1.1.20
-lucasantoniassi:accounts-lockout@1.0.0
+logging@1.2.0
 matb33:collection-hooks@0.9.1
 matteodem:easy-search@1.6.4
 mdg:validation-error@0.5.1
@@ -100,19 +83,22 @@ meteorhacks:collection-utils@1.2.0
 meteorhacks:picker@1.0.3
 meteorhacks:subs-manager@1.6.4
 meteorspark:util@0.2.0
-minifier-css@1.5.3
+meteortesting:browser-tests@1.3.4
+meteortesting:mocha@2.0.1
+meteortesting:mocha-core@8.0.1
+minifier-css@1.5.4
 minifier-js@2.6.0
 minifiers@1.1.8-faster-rebuild.0
-minimongo@1.6.1
+minimongo@1.6.2
 mobile-status-bar@1.1.0
 modern-browsers@0.1.5
-modules@0.15.0
+modules@0.16.0
 modules-runtime@0.12.0
 momentjs:moment@2.29.1
-mongo@1.10.1
+mongo@1.11.1
 mongo-decimal@0.1.2
 mongo-dev-server@1.1.0
-mongo-id@1.0.7
+mongo-id@1.0.8
 mongo-livedata@1.0.12
 mousetrap:mousetrap@1.4.6_1
 mquandalle:autofocus@1.0.0
@@ -124,13 +110,14 @@ 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.3
-npm-mongo@3.8.1
+npm-bcrypt@0.9.4
+npm-mongo@3.9.0
 oauth@1.3.2
 oauth2@1.3.0
 observe-sequence@1.0.16
 ongoworks:speakingurl@1.1.0
 ordered-dict@1.1.0
+pascoual:pdfkit@1.0.7
 peerlibrary:assert@0.3.0
 peerlibrary:base-component@0.16.0
 peerlibrary:blaze-components@0.15.1
@@ -191,6 +178,7 @@ rajit:bootstrap3-datepicker-zh-cn@1.7.1
 rajit:bootstrap3-datepicker-zh-tw@1.7.1
 random@1.2.0
 rate-limit@1.0.9
+react-fast-refresh@0.1.1
 reactive-dict@1.3.0
 reactive-var@1.0.11
 reload@1.3.1
@@ -207,36 +195,54 @@ 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.1
+socket-stream-client@0.3.3
 softwarerero:accounts-t9n@1.3.11
-spacebars@1.0.15
-spacebars-compiler@1.1.3
+spacebars@1.2.0
+spacebars-compiler@1.2.1
 srp@1.1.0
-standard-minifier-css@1.7.1
+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
 templates:tabs@2.3.0
-templating@1.3.2
-templating-compiler@1.3.3
-templating-runtime@1.3.2
-templating-tools@1.1.2
-tmeasday:check-npm-versions@0.3.2
+templating@1.4.0
+templating-compiler@1.4.1
+templating-runtime@1.4.0
+templating-tools@1.2.0
 tracker@1.2.0
 twbs:bootstrap@3.3.6
 ui@1.0.13
 underscore@1.0.10
-url@1.3.1
+url@1.3.2
 useraccounts:core@1.14.2
 useraccounts:flow-routing@1.14.2
 useraccounts:unstyled@1.14.2
 verron:autosize@3.0.8
-webapp@1.9.1
-webapp-hashing@1.0.9
+webapp@1.10.1
+webapp-hashing@1.1.0
 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-ldap@0.0.2
 wekan-markdown@1.0.9
 wekan-oidc@1.0.12

.travis.yml

@@ -3,7 +3,7 @@ sudo: required
 
 env:
   TRAVIS_DOCKER_COMPOSE_VERSION: 1.24.0
-  TRAVIS_NODE_VERSION: 12.20.1
+  TRAVIS_NODE_VERSION: 12.22.4
   TRAVIS_NPM_VERSION: latest
 
 before_install:

.tx/config

@@ -39,7 +39,7 @@ 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 = bg_BG:bg, en_GB:en-GB, es_AR:es-AR, es_CL:es-CL, es_PE:es-PE, es_MX:es-MX, es_TX:es-TX, es_PY:es-PY, el_GR:el, fi_FI:fi, hu_HU:hu, id_ID:id, mn_MN:mn, no:nb, lv_LV:lv, pt_BR:pt-BR, ro_RO:ro, sl_SI:sl, zh_CN:zh-CN, zh_TW:zh-TW, zh_HK:zh-HK
+lang_map = ar_EG:ar-EG, bg_BG:bg, de_CH:de-CH, 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, fa_IR:fa-IR, fi_FI:fi, hu_HU:hu, id_ID:id, mn_MN:mn, lv_LV:lv, pt_BR:pt-BR, ro_RO:ro, sl_SI:sl, zh_CN:zh-CN, zh_TW:zh-TW, zh_HK:zh-HK
 
 [wekan.application]
 file_filter = i18n/<lang>.i18n.json

Dockerfile

@@ -1,4 +1,4 @@
-FROM quay.io/wekan/ubuntu:groovy-20201125.2
+FROM quay.io/wekan/ubuntu:groovy-20210115
 LABEL maintainer="wekan"
 
 # 2020-12-03:
@@ -12,7 +12,7 @@ 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.20.1 \
+    NODE_VERSION=v12.22.4 \
     METEOR_RELEASE=1.10.2 \
     USE_EDGE=false \
     METEOR_EDGE=1.5-beta.17 \
@@ -21,6 +21,7 @@ ENV BUILD_DEPS="apt-utils libarchive-tools gnupg gosu wget curl bzip2 g++ build-
     ARCHITECTURE=linux-x64 \
     SRC_PATH=./ \
     WITH_API=true \
+    RESULTS_PER_PAGE="" \
     ACCOUNTS_LOCKOUT_KNOWN_USERS_FAILURES_BEFORE=3 \
     ACCOUNTS_LOCKOUT_KNOWN_USERS_PERIOD=60 \
     ACCOUNTS_LOCKOUT_KNOWN_USERS_FAILURE_WINDOW=15 \
@@ -63,6 +64,9 @@ ENV BUILD_DEPS="apt-utils libarchive-tools gnupg gosu wget curl bzip2 g++ build-
     LDAP_ENABLE=false \
     LDAP_PORT=389 \
     LDAP_HOST="" \
+    LDAP_AD_SIMPLE_AUTH="" \
+    LDAP_USER_AUTHENTICATION=false \
+    LDAP_USER_AUTHENTICATION_FIELD=uid \
     LDAP_BASEDN="" \
     LDAP_LOGIN_FALLBACK=false \
     LDAP_RECONNECT=true \
@@ -80,8 +84,6 @@ ENV BUILD_DEPS="apt-utils libarchive-tools gnupg gosu wget curl bzip2 g++ build-
     LDAP_ENCRYPTION=false \
     LDAP_CA_CERT="" \
     LDAP_REJECT_UNAUTHORIZED=false \
-    LDAP_USER_AUTHENTICATION=false \
-    LDAP_USER_AUTHENTICATION_FIELD=uid \
     LDAP_USER_SEARCH_FILTER="" \
     LDAP_USER_SEARCH_SCOPE="" \
     LDAP_USER_SEARCH_FIELD="" \
@@ -136,7 +138,8 @@ ENV BUILD_DEPS="apt-utils libarchive-tools gnupg gosu wget curl bzip2 g++ build-
     SAML_IDENTIFIER_FORMAT="" \
     SAML_LOCAL_PROFILE_MATCH_ATTRIBUTE="" \
     SAML_ATTRIBUTES="" \
-    ORACLE_OIM_ENABLED=false
+    ORACLE_OIM_ENABLED=false \
+    WAIT_SPINNER=""
 
 # Copy the app to the image
 COPY ${SRC_PATH} /home/wekan/app
@@ -274,11 +277,12 @@ RUN \
     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 && \
+    #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 && \
+    #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
@@ -291,10 +295,11 @@ RUN \
     #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 && \
     # 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 && \
+    rm -rf /home/wekan/app_build/bundle/programs/web.browser.legacy && \
     mv /home/wekan/app_build/bundle /build && \
     \
     # Put back the original tar

Dockerfile.arm64v8

@@ -4,16 +4,16 @@ FROM amd64/alpine:3.7 AS builder
 ENV QEMU_VERSION=v4.2.0-6 \
     QEMU_ARCHITECTURE=aarch64 \
     NODE_ARCHITECTURE=linux-arm64 \
-    NODE_VERSION=v12.20.1 \
-    WEKAN_VERSION=3.96  \
+    NODE_VERSION=v12.22.4 \
+    WEKAN_VERSION=latest  \
     WEKAN_ARCHITECTURE=arm64
 
-     # Install dependencies
-RUN  apk update && apk add ca-certificates outils-sha1 && \
-     \
-     # Download qemu static for our architecture
-     wget https://github.com/multiarch/qemu-user-static/releases/download/${QEMU_VERSION}/qemu-${QEMU_ARCHITECTURE}-static.tar.gz -O - | tar -xz && \
-     \
+    # Install dependencies
+RUN apk update && apk add ca-certificates outils-sha1 && \
+    \
+    # Download qemu static for our architecture
+    wget https://github.com/multiarch/qemu-user-static/releases/download/${QEMU_VERSION}/qemu-${QEMU_ARCHITECTURE}-static.tar.gz -O - | tar -xz && \
+    \
     # Download wekan and shasum
     wget https://releases.wekan.team/raspi3/wekan-${WEKAN_VERSION}-${WEKAN_ARCHITECTURE}.zip && \
     wget https://releases.wekan.team/raspi3/SHA256SUMS.txt && \
@@ -40,7 +40,7 @@ LABEL maintainer="wekan"
 # Set the environment variables (defaults where required)
 ENV QEMU_ARCHITECTURE=aarch64 \
     NODE_ARCHITECTURE=linux-arm64 \
-    NODE_VERSION=v12.20.1 \
+    NODE_VERSION=v12.22.4 \
     NODE_ENV=production \
     NPM_VERSION=latest \
     WITH_API=true \

README.md

@@ -1,4 +1,4 @@
-[![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://img.shields.io/badge/Gitpod-Ready--to--Code-blue?logo=gitpod)](https://gitpod.io/#https://github.com/wekan/wekan)
 
 # Wekan - Open Source kanban
 
@@ -12,6 +12,7 @@
 [![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)
 
 ## [Translate Wekan at Transifex](https://transifex.com/wekan/wekan)
 
@@ -20,19 +21,23 @@ New English strings of new features can be added as PRs to edge branch file weka
 
 ## [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).
+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.
 
 ## Chat
 
-[![Wekan Chat][vanila_badge]][wekan_chat] - Most Wekan community and developers are here. Works on webbrowser
-and PWA app that can be added as icon on Android and bookmark on iOS, used like native app.
+[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)
 
+## Docker: Please only use Docker release tags
+
+Note: With Docker, please don't use latest tag. Only use release tags.
+See https://github.com/wekan/wekan/issues/3874
+
 ## FAQ
 
-**NOTE**: 
+**NOTE**:
 - Please read the [FAQ](https://github.com/wekan/wekan/wiki/FAQ) first
 - Please don't feed the [trolls](https://github.com/wekan/wekan/wiki/FAQ#why-am-i-called-a-troll) and [spammers](https://github.com/wekan/wekan/wiki/FAQ#why-am-i-called-a-spammer) that are mentioned in the FAQ :)
 
@@ -52,7 +57,7 @@ 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 60 languages.
+- Wekan has been [translated](https://transifex.com/wekan/wekan) to about 63 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.
@@ -64,7 +69,7 @@ that by providing one-click installation on various platforms.
   [More Platforms](https://github.com/wekan/wekan/wiki/Platforms), bundle for RasPi3 ARM and other CPUs where Node.js and MongoDB exists.
 - 1 GB RAM minimum free for Wekan. Production server should have minimum total 4 GB RAM.
   For thousands of users, for example with [Docker](https://github.com/wekan/wekan/blob/master/docker-compose.yml): 3 frontend servers,
-  each having 2 CPU and 2 wekan-app containers. One backend wekan-db server with many CPUs.  
+  each having 2 CPU and 2 wekan-app containers. One backend wekan-db server with many CPUs.
 - Enough disk space and alerts about low disk space. If you run out disk space, MongoDB database gets corrupted.
 - SECURITY: Updating to newest Wekan version very often. Please check you do not have automatic updates of Sandstorm or Snap turned off.
   Old versions have security issues because of old versions Node.js etc. Only newest Wekan is supported.
@@ -114,8 +119,6 @@ with [Meteor](https://www.meteor.com).
 [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
-[vanila_badge]: https://vanila.io/img/join-chat-button2.png
-[wekan_chat]: https://community.vanila.io/wekan
-
+[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)

SECURITY.md

@@ -1,10 +1,10 @@
 Security is very important to us. If you discover any issue regarding security, please disclose
-the information responsibly by sending an email to security (at) wekan.team and not by
+the information responsibly by sending an email to support (at) wekan.team using
+[this PGP public key](support-at-wekan.team_pgp-publickey.asc) and not by
 creating a GitHub issue. We will respond swiftly to fix verifiable security issues.
 
 We thank you with a place at our hall of fame page, that is
-at https://wekan.github.io/hall-of-fame . Others have just posted public GitHub issue,
-so they are not at that hall-of-fame page.
+at https://wekan.github.io/hall-of-fame
 
 ## How should reports be formatted?
 

Stackerfile.yml

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

api.py

@@ -28,12 +28,16 @@ if arguments == 0:
     print("  python3 api.py board BOARDID      # Info of BOARDID")
     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")
 # TODO:
-#    print("  python3 api.py attachmentdownload BOARDID ATTACHMENTID # One attachment as file")
-#    print("  python3 api.py attachmentsdownload BOARDID # All attachments as files")
+#   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,13 +65,15 @@ chmod +x 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 swimlanes BOARDID  # Swimlanes of BOARDID
-  python3 api.py lists BOARDID      # Lists of BOARDID
+  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 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
@@ -162,6 +168,27 @@ if arguments == 7:
         print(body.text)
         # ------- WRITE TO CARD END -----------
 
+if arguments == 6:
+
+    if sys.argv[1] == 'editcard':
+
+        # ------- LIST OF BOARD START -----------
+        boardid = sys.argv[2]
+        listid = sys.argv[3]
+        cardid = sys.argv[4]
+        newcardtitle = sys.argv[5]
+        newcarddescription = sys.argv[6]
+        edcard = wekanurl + apiboards + boardid + s + l + s + listid + s + cs + s + cardid
+        print(edcard)
+        headers = {'Accept': 'application/json', 'Authorization': 'Bearer {}'.format(apikey)}
+        put_data = {'title': '{}'.format(newcardtitle), 'description': '{}'.format(newcarddescription)}
+        body = requests.put(edcard, data=put_data, headers=headers)
+        print("=== EDIT CARD ===\n")
+        body = requests.get(edcard, headers=headers)
+        data2 = body.text.replace('}',"}\n")
+        print(data2)
+        # ------- LISTS OF BOARD END -----------
+
 if arguments == 3:
 
     if sys.argv[1] == 'createlist':
@@ -177,6 +204,19 @@ if arguments == 3:
         print(body.text)
         # ------- CREATE LIST END -----------
 
+    if sys.argv[1] == 'list':
+
+        # ------- LIST OF BOARD START -----------
+        boardid = sys.argv[2]
+        listid = sys.argv[3]
+        listone = wekanurl + apiboards + boardid + s + l + s + listid
+        headers = {'Accept': 'application/json', 'Authorization': 'Bearer {}'.format(apikey)}
+        print("=== INFO OF ONE LIST ===\n")
+        body = requests.get(listone, headers=headers)
+        data2 = body.text.replace('}',"}\n")
+        print(data2)
+        # ------- LISTS OF BOARD END -----------
+
 if arguments == 2:
 
     # ------- BOARDS LIST START -----------
@@ -217,7 +257,7 @@ if arguments == 2:
 
         # ------- LISTS OF BOARD START -----------
         boardid = sys.argv[2]
-        attachments = wekanurl + apiboards + boardid
+        lists = wekanurl + apiboards + boardid + s + l
         headers = {'Accept': 'application/json', 'Authorization': 'Bearer {}'.format(apikey)}
         print("=== LISTS ===\n")
         body = requests.get(lists, headers=headers)

client/components/activities/activities.jade

@@ -82,7 +82,7 @@ template(name="activity")
             +viewer
               = activity.checklist.title
         else
-          a.activity-checklist(href="{{ activity.card.absoluteUrl }}")
+          a.activity-checklist(href="{{ activity.card.originRelativeUrl }}")
             +viewer
               = activity.checklist.title
 
@@ -103,7 +103,7 @@ template(name="activity")
 
       if($eq activity.activityType 'addChecklistItem')
         | {{{_ 'activity-checklist-item-added' (sanitize activity.checklist.title) cardLink}}}.
-        .activity-checklist(href="{{ activity.card.absoluteUrl }}")
+        .activity-checklist(href="{{ activity.card.originRelativeUrl }}")
           +viewer
             = activity.checklistItem.title
 
@@ -139,7 +139,7 @@ template(name="activity")
         //- if we are not in card mode we only display a summary of the comment
         if($eq activity.activityType 'addComment')
           | {{{_ 'activity-on' cardLink}}}
-          a.activity-comment(href="{{ activity.card.absoluteUrl }}")
+          a.activity-comment(href="{{ activity.card.originRelativeUrl }}")
             +viewer
               = activity.comment.text
 

client/components/activities/activities.js

@@ -1,6 +1,6 @@
-import sanitizeXss from 'xss';
+import DOMPurify from 'dompurify';
 
-const activitiesPerPage = 20;
+const activitiesPerPage = 500;
 
 BlazeComponent.extendComponent({
   onCreated() {
@@ -162,11 +162,15 @@ BlazeComponent.extendComponent({
             {
               href: source.url,
             },
-            sanitizeXss(source.system),
+            DOMPurify.sanitize(source.system, {
+              ALLOW_UNKNOWN_PROTOCOLS: true,
+            }),
           ),
         );
       } else {
-        return sanitizeXss(source.system);
+        return DOMPurify.sanitize(source.system, {
+          ALLOW_UNKNOWN_PROTOCOLS: true,
+        });
       }
     }
     return null;
@@ -190,10 +194,10 @@ BlazeComponent.extendComponent({
               href: attachment.url({ download: true }),
               target: '_blank',
             },
-            sanitizeXss(attachment.name()),
+            DOMPurify.sanitize(attachment.name()),
           ),
         )) ||
-      sanitizeXss(this.currentData().activity.attachmentName)
+      DOMPurify.sanitize(this.currentData().activity.attachmentName)
     );
   },
 
@@ -232,7 +236,7 @@ BlazeComponent.extendComponent({
 
 Template.activity.helpers({
   sanitize(value) {
-    return sanitizeXss(value);
+    return DOMPurify.sanitize(value, { ALLOW_UNKNOWN_PROTOCOLS: true });
   },
 });
 
@@ -243,10 +247,10 @@ function createCardLink(card) {
     Blaze.toHTML(
       HTML.A(
         {
-          href: card.absoluteUrl(),
+          href: card.originRelativeUrl(),
           class: 'action-card',
         },
-        sanitizeXss(card.title),
+        DOMPurify.sanitize(card.title, { ALLOW_UNKNOWN_PROTOCOLS: true }),
       ),
     )
   );
@@ -260,10 +264,10 @@ function createBoardLink(board, list) {
     Blaze.toHTML(
       HTML.A(
         {
-          href: board.absoluteUrl(),
+          href: board.originRelativeUrl(),
           class: 'action-board',
         },
-        sanitizeXss(text),
+        DOMPurify.sanitize(text, { ALLOW_UNKNOWN_PROTOCOLS: true }),
       ),
     )
   );

client/components/activities/comments.jade

@@ -1,7 +1,7 @@
 template(name="commentForm")
   .new-comment.js-new-comment(
     class="{{#if commentFormIsOpen}}is-open{{/if}}")
-    +userAvatar(userId=currentUser._id)
+    +userAvatar(userId=currentUser._id noRemove=true)
     form.js-new-comment-form
       +editor(class="js-new-comment-input")
         | {{getUnsavedValue 'cardComment' currentCard._id}}

client/components/activities/comments.js

@@ -3,6 +3,7 @@ const commentFormIsOpen = new ReactiveVar(false);
 BlazeComponent.extendComponent({
   onDestroyed() {
     commentFormIsOpen.set(false);
+    $('.note-popover').hide();
   },
 
   commentFormIsOpen() {

client/components/boards/boardArchive.js

@@ -11,7 +11,7 @@ BlazeComponent.extendComponent({
     return Boards.find(
       { archived: true },
       {
-        sort: { sort: 1 /* boards default sorting */ },
+        sort: { archivedAt: -1, modifiedAt: -1 },
       },
     );
   },

client/components/boards/boardBody.js

@@ -360,7 +360,7 @@ BlazeComponent.extendComponent({
             end: end || card.endAt,
             allDay:
               Math.abs(end.getTime() - start.getTime()) / 1000 === 24 * 3600,
-            url: FlowRouter.url('card', {
+            url: FlowRouter.path('card', {
               boardId: currentBoard._id,
               slug: currentBoard.slug,
               cardId: card._id,

client/components/boards/boardColors.styl

@@ -654,7 +654,6 @@ setBoardClear(color1,color2)
 
   /* Card changes */
   .minicard
-    background: #FFF
     padding: 15px 15px 10px
     box-shadow: 0 3px 8px rgba(0,0,0,.05)
 
@@ -767,7 +766,15 @@ setBoardClear(color1,color2)
   .toggle-label:after, .board-color-modern .toggle-switch:checked~.toggle-label:after
     background-color: #819C5D !important
 
+  button, input:not([type=file]), select, textarea
+    border-radius: 2px
+
   /* Headers */
+  &#header
+    background-color: #262626
+    border-bottom: 1px solid #555555;
+    border-top: 1px solid #555555;
+
   &#header-quick-access, .background-box, #header
     background-color: #333333
 
@@ -775,14 +782,16 @@ setBoardClear(color1,color2)
     padding: 4px
     font-size: 14px
 
+  &#header-quick-access .allBoards
+    padding: 5px 10px 0 10px;
+
+  &#header-quick-access ul.header-quick-access-list
+    margin: -5px 0 -5px 0
+
   &#header #header-main-bar
-    height: 30px
     padding-top: 3px
     padding-bottom: 3px
 
-  &#header
-    box-shadow: 0 6px 6px -6px rgba(0,0,0,0.8)
-
   &#header-quick-access ul
     overflow: visible
 
@@ -813,18 +822,23 @@ setBoardClear(color1,color2)
   /* Content */
   .board-canvas
     background: #2a2a2a
-    padding: 10px 10px 0
 
   /* Swimlanes */
   .swimlane .swimlane-header-wrap
-    background-color: #666666
+    background-color: #494949
     color: #cccccc
     padding: 4px 0
-    margin-bottom: 10px
 
   .swimlane .swimlane-header-wrap .swimlane-header
     font-family: Poppins
 
+  .swimlane .swimlane-header-wrap .swimlane-header-menu
+    padding: 6px
+    font-size: 16px
+
+  .swimlane .swimlane-header-wrap .swimlane-header-plus-icon
+    font-size: 16px
+
   .swimlane
     background: #2a2a2a
     line-height: 15px
@@ -837,13 +851,19 @@ setBoardClear(color1,color2)
     border: 0px solid #666666
     flex: 0 0 265px;
 
+  .swimlane .list:first-child
+    margin-left: 0
+
   .swimlane .list:nth-child(even)
     background: #5f5f5f
 
+  .swimlane .list:nth-child(odd) .list-header
+    background: #3b3b3b
+
   .list-header
     background: #333333
-    padding-top: 10px
-    border-bottom: 6px solid #333333
+    padding: 10px
+    border-bottom: 0
 
   .list-header .viewer
     padding-left: 10px
@@ -853,7 +873,11 @@ setBoardClear(color1,color2)
     color: #eeeeee
 
   .list-header .list-header-menu
-    padding-top: 17px
+    padding: 10px
+    top: 0
+
+  .list-header .list-header-plus-icon
+    color: #a6a6a6
 
   .list-body
     scrollbar-width: thin
@@ -884,35 +908,43 @@ setBoardClear(color1,color2)
     color: #ffffff
 
   /* Mini Card */
+  .minicard-wrapper
+    margin-bottom: 12px
+
   .minicard
     background-color: #444444
     color: #cccccc
     border-radius: 2px
-    font-size: 0.9em
+    font-size: 0.95em
     padding: 10px
     box-shadow: 0 4px 3px -3px rgba(0,0,0,0.8)
     border-bottom: 1px solid #666666
 
   .minicard:hover
-    background-color: #555555 !important
+    background-color: #494949 !important
+
+  .minicard .minicard-labels
+    margin-bottom: 4px
 
   .minicard .card-label
     font-size: 11px
     font-weight: 400
-    padding: 2px 6px 0
+    padding: 1px 6px 0
+    border-radius: 2px
 
   .minicard .badges
     color: #bbbbbb
 
   .minicard .date
-    margin-top: 7px
+    margin-top: 10px
     font-size: 11px
 
   .card-date
-    color: #555555
+    color: #444444
+    border-radius: 2px
 
   .card-date.almost-due
-    color: #666666
+    color: #444444
 
   .minicard.minicard-composer textarea.minicard-composer-textarea:focus
     background-color: #eeeeee
@@ -971,11 +1003,17 @@ setBoardClear(color1,color2)
 
   .card-details .checklist-item
     background-color: rgba(255,255,255,0.1)
-    padding: 2px 8px
-    border-radius: 3px
+    padding: 4px 8px
+    border-radius: 2px
     font-size: 13px
     margin-top: 5px
 
+  .card-details .checklist-item:hover
+    background-color: rgba(255,255,255,0.2)
+
+  .card-details .checklist-item .item-title .viewer p
+    max-width: auto
+
   .card-details .check-box.materialCheckBox
     border-color: #ffffff
 

client/components/boards/boardHeader.jade

@@ -1,7 +1,9 @@
 template(name="boardHeaderBar")
   h1.header-board-menu
     with currentBoard
-      a(class="{{#if currentUser.isBoardAdmin}}js-edit-board-title{{else}}is-disabled{{/if}}")
+      if $eq title 'Templates'
+        | {{_ 'templates'}}
+      else
         +viewer
           = title
 
@@ -9,6 +11,10 @@ template(name="boardHeaderBar")
     unless isMiniScreen
       if currentBoard
         if currentUser
+          with currentBoard
+            a.board-header-btn(class="{{#if currentUser.isBoardAdmin}}js-edit-board-title{{else}}is-disabled{{/if}}" title="{{_ 'edit'}}" value=title)
+              i.fa.fa-pencil-square-o
+
           a.board-header-btn.js-star-board(class="{{#if isStarred}}is-active{{/if}}"
             title="{{#if isStarred}}{{_ 'click-to-unstar'}}{{else}}{{_ 'click-to-star'}}{{/if}} {{_ 'starred-boards-description'}}")
             i.fa(class="fa-star{{#unless isStarred}}-o{{/unless}}")
@@ -31,6 +37,12 @@ template(name="boardHeaderBar")
             if $eq watchLevel "muted"
               i.fa.fa-bell-slash
             span {{_ watchLevel}}
+          a.board-header-btn(title="{{_ 'sort-cards'}}" class="{{#if isSortActive }}emphasis{{else}} js-sort-cards {{/if}}")
+            i.fa.fa-sort
+            span {{#if isSortActive }}{{_ 'Sort is on'}}{{else}}{{_ 'sort-cards'}}{{/if}}
+            if isSortActive
+              a.board-header-btn-close.js-sort-reset(title="Remove Sort")
+                i.fa.fa-times-thin
 
         else
           a.board-header-btn.js-log-in(
@@ -42,6 +54,10 @@ template(name="boardHeaderBar")
     if currentBoard
       if isMiniScreen
         if currentUser
+          with currentBoard
+            a.board-header-btn(class="{{#if currentUser.isBoardAdmin}}js-edit-board-title{{else}}is-disabled{{/if}}" title="{{_ 'edit'}}" value=title)
+              i.fa.fa-pencil-square-o
+
           a.board-header-btn.js-star-board(class="{{#if isStarred}}is-active{{/if}}"
             title="{{#if isStarred}}{{_ 'click-to-unstar'}}{{else}}{{_ 'click-to-star'}}{{/if}} {{_ 'starred-boards-description'}}")
             i.fa(class="fa-star{{#unless isStarred}}-o{{/unless}}")
@@ -118,7 +134,7 @@ template(name="boardHeaderBar")
               i.fa.fa-times-thin
 
       .separator
-      a.board-header-btn.js-toggle-sidebar
+      a.board-header-btn.js-toggle-sidebar(title="{{_ 'sidebar-open'}} {{_ 'or'}} {{_ 'sidebar-close'}}")
         i.fa.fa-navicon
 
 template(name="boardVisibilityList")
@@ -212,6 +228,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'}}
     input.primary.wide(type="submit" value="{{_ 'create'}}")
     span.quiet
       | {{_ 'or'}}
@@ -247,3 +266,19 @@ template(name="boardChangeTitlePopup")
 template(name="boardCreateRulePopup")
   p {{_ 'close-board-pop'}}
   button.js-confirm.negate.full(type="submit") {{_ 'archive'}}
+
+
+template(name="cardsSortPopup")
+  ul.pop-over-list
+    li
+      a.js-sort-due {{_ 'due-date'}}
+      hr
+    li
+      a.js-sort-title {{_ 'title-alphabetically'}}
+      hr
+    li
+      a.js-sort-created-desc {{_ 'created-at-newest-first'}}
+      hr
+    li
+      a.js-sort-created-asc {{_ 'created-at-oldest-first'}}
+

client/components/boards/boardHeader.js

@@ -2,6 +2,7 @@
 const DOWNCLS = 'fa-sort-down';
 const UPCLS = 'fa-sort-up';
 */
+const sortCardsBy = new ReactiveVar('');
 Template.boardMenuPopup.events({
   'click .js-rename-board': Popup.open('boardChangeTitle'),
   'click .js-custom-fields'() {
@@ -110,6 +111,7 @@ BlazeComponent.extendComponent({
         'click .js-open-filter-view'() {
           Sidebar.setView('filter');
         },
+        'click .js-sort-cards': Popup.open('cardsSort'),
         /*
         'click .js-open-sort-view'(evt) {
           const target = evt.target;
@@ -127,6 +129,9 @@ BlazeComponent.extendComponent({
           Sidebar.setView();
           Filter.reset();
         },
+        'click .js-sort-reset'() {
+          Session.set('sortBy', '');
+        },
         'click .js-open-search-view'() {
           Sidebar.setView('search');
         },
@@ -160,6 +165,9 @@ Template.boardHeaderBar.helpers({
   boardView() {
     return Utils.boardView();
   },
+  isSortActive() {
+    return Session.get('sortBy') ? true : false;
+  },
 });
 
 Template.boardChangeViewPopup.events({
@@ -201,24 +209,79 @@ const CreateBoard = BlazeComponent.extendComponent({
     this.visibilityMenuIsOpen.set(!this.visibilityMenuIsOpen.get());
   },
 
+  toggleAddTemplateContainer() {
+    $('#add-template-container').toggleClass('is-checked');
+  },
+
   onSubmit(event) {
     event.preventDefault();
     const title = this.find('.js-new-board-title').value;
-    const visibility = this.visibility.get();
 
-    this.boardId.set(
-      Boards.insert({
-        title,
-        permission: visibility,
-      }),
-    );
+    const addTemplateContainer = $('#add-template-container.is-checked').length > 0;
+    if (addTemplateContainer) {
+      //const templateContainerId = Meteor.call('setCreateTemplateContainer');
+      //Utils.goBoardId(templateContainerId);
+      //alert('niinku template ' + Meteor.call('setCreateTemplateContainer'));
 
-    Swimlanes.insert({
-      title: 'Default',
-      boardId: this.boardId.get(),
-    });
+      this.boardId.set(
+        Boards.insert({
+            // title: TAPi18n.__('templates'),
+            title: title,
+            permission: 'private',
+            type: 'template-container',
+          }),
+       );
 
-    Utils.goBoardId(this.boardId.get());
+      // Insert the card templates swimlane
+      Swimlanes.insert({
+          // title: TAPi18n.__('card-templates-swimlane'),
+          title: 'Card Templates',
+          boardId: this.boardId.get(),
+          sort: 1,
+          type: 'template-container',
+        }),
+
+      // Insert the list templates swimlane
+      Swimlanes.insert(
+        {
+          // title: TAPi18n.__('list-templates-swimlane'),
+          title: 'List Templates',
+          boardId: this.boardId.get(),
+          sort: 2,
+          type: 'template-container',
+        },
+      );
+
+      // Insert the board templates swimlane
+      Swimlanes.insert(
+        {
+          //title: TAPi18n.__('board-templates-swimlane'),
+          title: 'Board Templates',
+          boardId: this.boardId.get(),
+          sort: 3,
+          type: 'template-container',
+        },
+      );
+
+      Utils.goBoardId(this.boardId.get());
+
+    } else {
+      const visibility = this.visibility.get();
+
+      this.boardId.set(
+        Boards.insert({
+          title,
+          permission: visibility,
+        }),
+      );
+
+      Swimlanes.insert({
+        title: 'Default',
+        boardId: this.boardId.get(),
+      });
+
+      Utils.goBoardId(this.boardId.get());
+    }
   },
 
   events() {
@@ -232,6 +295,7 @@ const CreateBoard = BlazeComponent.extendComponent({
         submit: this.onSubmit,
         'click .js-import-board': Popup.open('chooseBoardSource'),
         'click .js-board-template': Popup.open('searchElement'),
+        'click .js-toggle-add-template-container': this.toggleAddTemplateContainer,
       },
     ];
   },
@@ -368,3 +432,44 @@ BlazeComponent.extendComponent({
   },
 }).register('listsortPopup');
 */
+
+BlazeComponent.extendComponent({
+  events() {
+    return [
+      {
+        'click .js-sort-due'() {
+          const sortBy = {
+            dueAt: 1,
+          };
+          Session.set('sortBy', sortBy);
+          sortCardsBy.set(TAPi18n.__('due-date'));
+          Popup.close();
+        },
+        'click .js-sort-title'() {
+          const sortBy = {
+            title: 1,
+          };
+          Session.set('sortBy', sortBy);
+          sortCardsBy.set(TAPi18n.__('title'));
+          Popup.close();
+        },
+        'click .js-sort-created-asc'() {
+          const sortBy = {
+            createdAt: 1,
+          };
+          Session.set('sortBy', sortBy);
+          sortCardsBy.set(TAPi18n.__('date-created-newest-first'));
+          Popup.close();
+        },
+        'click .js-sort-created-desc'() {
+          const sortBy = {
+            createdAt: -1,
+          };
+          Session.set('sortBy', sortBy);
+          sortCardsBy.set(TAPi18n.__('date-created-oldest-first'));
+          Popup.close();
+        },
+      },
+    ];
+  },
+}).register('cardsSortPopup');

client/components/boards/boardsList.jade

@@ -2,7 +2,8 @@ template(name="boardList")
   .wrapper
     ul.board-list.clearfix.js-boards
       li.js-add-board
-        a.board-list-item.label {{_ 'add-board'}}
+        a.board-list-item.label(title="{{_ 'add-board'}}")
+          | {{_ 'add-board'}}
       each boards
         li(class="{{#if isStarred}}starred{{/if}}" class=colorClass).js-board
           if isInvited
@@ -16,47 +17,90 @@ template(name="boardList")
                 button.js-accept-invite.primary {{_ 'accept'}}
                 button.js-decline-invite {{_ 'decline'}}
           else
-            a.js-open-board.board-list-item(href="{{pathFor 'board' id=_id slug=slug}}")
-              span.details
-                span.board-list-item-name
-                  +viewer
-                    = title
-                i.fa.js-star-board(
-                  class="fa-star{{#if isStarred}} is-star-active{{else}}-o{{/if}}"
-                  title="{{_ 'star-board-title'}}")
-                p.board-list-item-desc
-                  +viewer
-                    = description
-                if hasSpentTimeCards
-                  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 isMiniScreen
-                  i.fa.board-handle(
-                      class="fa-arrows"
-                      title="{{_ 'Drag board'}}")
-                unless isMiniScreen
-                  if isSandstorm
-                    i.fa.js-clone-board(
-                        class="fa-clone"
-                        title="{{_ 'duplicate-board'}}")
-                    i.fa.js-archive-board(
-                        class="fa-archive"
-                        title="{{_ 'archive-board'}}")
-                  else if isAdministrable
-                    i.fa.js-clone-board(
-                        class="fa-clone"
-                        title="{{_ 'duplicate-board'}}")
-                    i.fa.js-archive-board(
-                        class="fa-archive"
-                        title="{{_ 'archive-board'}}")
-                  else if currentUser.isAdmin
-                    i.fa.js-clone-board(
-                        class="fa-clone"
-                        title="{{_ 'duplicate-board'}}")
-                    i.fa.js-archive-board(
-                        class="fa-archive"
-                        title="{{_ 'archive-board'}}")
+            if $eq type "template-container"
+              a.js-open-board.template-container.board-list-item(href="{{pathFor 'board' id=_id slug=slug}}")
+                span.details
+                  span.board-list-item-name(title="{{_ 'template-container'}}")
+                    +viewer
+                      = title
+                  i.fa.js-star-board(
+                    class="fa-star{{#if isStarred}} is-star-active{{else}}-o{{/if}}"
+                    title="{{_ 'star-board-title'}}")
+                  p.board-list-item-desc
+                    +viewer
+                      = description
+                  if hasSpentTimeCards
+                    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 isMiniScreen
+                    i.fa.board-handle(
+                        class="fa-arrows"
+                        title="{{_ 'Drag board'}}")
+                  unless isMiniScreen
+                    if isSandstorm
+                      i.fa.js-clone-board(
+                          class="fa-clone"
+                          title="{{_ 'duplicate-board'}}")
+                      i.fa.js-archive-board(
+                          class="fa-archive"
+                          title="{{_ 'archive-board'}}")
+                    else if isAdministrable
+                      i.fa.js-clone-board(
+                          class="fa-clone"
+                          title="{{_ 'duplicate-board'}}")
+                      i.fa.js-archive-board(
+                          class="fa-archive"
+                          title="{{_ 'archive-board'}}")
+                    else if currentUser.isAdmin
+                      i.fa.js-clone-board(
+                          class="fa-clone"
+                          title="{{_ 'duplicate-board'}}")
+                      i.fa.js-archive-board(
+                          class="fa-archive"
+                          title="{{_ 'archive-board'}}")
+            else
+              a.js-open-board.board-list-item(href="{{pathFor 'board' id=_id slug=slug}}")
+                span.details
+                  span.board-list-item-name(title="{{_ 'board-drag-drop-reorder-or-click-open'}}")
+                    +viewer
+                      = title
+                  i.fa.js-star-board(
+                    class="fa-star{{#if isStarred}} is-star-active{{else}}-o{{/if}}"
+                    title="{{_ 'star-board-title'}}")
+                  p.board-list-item-desc
+                    +viewer
+                      = description
+                  if hasSpentTimeCards
+                    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 isMiniScreen
+                    i.fa.board-handle(
+                        class="fa-arrows"
+                        title="{{_ 'Drag board'}}")
+                  unless isMiniScreen
+                    if isSandstorm
+                      i.fa.js-clone-board(
+                          class="fa-clone"
+                          title="{{_ 'duplicate-board'}}")
+                      i.fa.js-archive-board(
+                          class="fa-archive"
+                          title="{{_ 'archive-board'}}")
+                    else if isAdministrable
+                      i.fa.js-clone-board(
+                          class="fa-clone"
+                          title="{{_ 'duplicate-board'}}")
+                      i.fa.js-archive-board(
+                          class="fa-archive"
+                          title="{{_ 'archive-board'}}")
+                    else if currentUser.isAdmin
+                      i.fa.js-clone-board(
+                          class="fa-clone"
+                          title="{{_ 'duplicate-board'}}")
+                      i.fa.js-archive-board(
+                          class="fa-archive"
+                          title="{{_ 'archive-board'}}")
 
 template(name="boardListHeaderBar")
   h1 {{_ title }}

client/components/boards/boardsList.js

@@ -22,6 +22,15 @@ Template.boardListHeaderBar.helpers({
 BlazeComponent.extendComponent({
   onCreated() {
     Meteor.subscribe('setting');
+    let currUser = Meteor.user();
+    let userLanguage;
+    if(currUser && currUser.profile){
+      userLanguage = currUser.profile.language
+    }
+    if (userLanguage) {
+      TAPi18n.setLanguage(userLanguage);
+      T9n.setLanguage(userLanguage);
+    }
   },
 
   onRendered() {
@@ -78,15 +87,52 @@ BlazeComponent.extendComponent({
 
   boards() {
     const query = {
-      archived: false,
-      type: 'board',
+      //archived: false,
+      ////type: { $in: ['board','template-container'] },
+      //type: 'board',
+      $and: [
+        { archived: false },
+        { type: 'board' },
+        { $or:[] }
+      ]
     };
-    if (FlowRouter.getRouteName() === 'home')
-      query['members.userId'] = Meteor.userId();
+    if (FlowRouter.getRouteName() === 'home'){
+      query.$and[2].$or.push({'members.userId': Meteor.userId()});
+
+      const currUser = Users.findOne(Meteor.userId());
+
+      // const currUser = Users.findOne(Meteor.userId(), {
+      //   fields: {
+      //     orgs: 1,
+      //     teams: 1,
+      //   },
+      // });
+
+      let orgIdsUserBelongs = currUser.teams !== 'undefined' ? currUser.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}});
+      }
+
+      let teamIdsUserBelongs = currUser.teams !== 'undefined' ? currUser.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}});
+      }
+    }
     else query.permission = 'public';
 
     return Boards.find(query, {
-      sort: { sort: 1 /* boards default sorting */ },
+      //sort: { sort: 1 /* boards default sorting */ },
     });
   },
   isStarred() {
@@ -124,9 +170,13 @@ BlazeComponent.extendComponent({
         },
         'click .js-clone-board'(evt) {
           Meteor.call(
-            'cloneBoard',
+            'copyBoard',
             this.currentData()._id,
-            Session.get('fromBoard'),
+            {
+              sort: Boards.find({ archived: false }).count(),
+              type: 'board',
+              title: Boards.findOne(this.currentData()._id).title,
+            },
             (err, res) => {
               if (err) {
                 this.setError(err.error);

client/components/boards/boardsList.styl

@@ -45,6 +45,9 @@ $spaceBetweenTiles = 16px
     text-decoration: none
     word-wrap: break-word
 
+    &.template-container
+      border: 4px solid #fff
+
     &.tile
       background-size: auto
       background-repeat: repeat

client/components/cards/attachments.jade

@@ -55,6 +55,5 @@ template(name="attachmentsGalery")
       unless currentUser.isCommentOnly
         unless currentUser.isWorker
           //li.attachment-item.add-attachment
-          a.js-add-attachment
+          a.js-add-attachment(title="{{_ 'add-attachment' }}")
             i.fa.fa-plus
-            | {{_ 'add-attachment' }}

client/components/cards/cardCustomFields.jade

@@ -52,6 +52,14 @@ template(name="cardCustomField-number")
         if value
             = value
 
+template(name="cardCustomField-checkbox")
+  .js-checklist-item.checklist-item(class="{{#if data.value }}is-checked{{/if}}")
+    if canModifyCard
+      .check-box-container
+        .check-box.materialCheckBox(class="{{#if data.value }}is-checked{{/if}}")
+    else
+      .materialCheckBox(class="{{#if data.value }}is-checked{{/if}}")
+
 template(name="cardCustomField-currency")
     if canModifyCard
         +inlinedForm(classNames="js-card-customfield-currency")
@@ -111,3 +119,24 @@ template(name="cardCustomField-dropdown")
         if value
             +viewer
                 = selectedItem
+
+template(name="cardCustomField-stringtemplate")
+    if canModifyCard
+        +inlinedForm(classNames="js-card-customfield-stringtemplate")
+            each item in stringtemplateItems.get
+                input.js-card-customfield-stringtemplate-item(type="text" value=item placeholder="")
+            input.js-card-customfield-stringtemplate-item.last(type="text" value="" placeholder="{{_ 'custom-field-stringtemplate-item-placeholder'}}" autofocus)
+            .edit-controls.clearfix
+                button.primary(type="submit") {{_ 'save'}}
+                a.fa.fa-times-thin.js-close-inlined-form
+        else
+            a.js-open-inlined-form
+                if value
+                    +viewer
+                        = formattedValue
+                else
+                    | {{_ 'edit'}}
+    else
+        if value
+            +viewer
+                = formattedValue

client/components/cards/cardCustomFields.js

@@ -1,3 +1,6 @@
+import { DatePicker } from '/client/lib/datepicker';
+import Cards from '/models/cards';
+
 Template.cardCustomFieldsPopup.helpers({
   hasCustomField() {
     const card = Cards.findOne(Session.get('currentCard'));
@@ -80,6 +83,25 @@ CardCustomField.register('cardCustomField');
   }
 }.register('cardCustomField-number'));
 
+// cardCustomField-checkbox
+(class extends CardCustomField {
+  onCreated() {
+    super.onCreated();
+  }
+
+  toggleItem() {
+    this.card.setCustomField(this.customFieldId, !this.data().value);
+  }
+
+  events() {
+    return [
+      {
+        'click .js-checklist-item .check-box-container': this.toggleItem,
+      },
+    ];
+  }
+}.register('cardCustomField-checkbox'));
+
 // cardCustomField-currency
 (class extends CardCustomField {
   onCreated() {
@@ -102,7 +124,8 @@ CardCustomField.register('cardCustomField');
       {
         'submit .js-card-customfield-currency'(event) {
           event.preventDefault();
-          const value = Number(this.find('input').value, 10);
+          // To allow input separated by comma, the comma is replaced by a period.
+          const value = Number(this.find('input').value.replace(/,/i, '.'), 10);
           this.card.setCustomField(this.customFieldId, value);
         },
       },
@@ -214,3 +237,90 @@ CardCustomField.register('cardCustomField');
     ];
   }
 }.register('cardCustomField-dropdown'));
+
+// cardCustomField-stringtemplate
+(class extends CardCustomField {
+  onCreated() {
+    super.onCreated();
+
+    this.stringtemplateFormat = this.data().definition.settings.stringtemplateFormat;
+    this.stringtemplateSeparator = this.data().definition.settings.stringtemplateSeparator;
+
+    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 ?? '');
+  }
+
+  getItems() {
+    return Array.from(this.findAll('input'))
+      .map(input => input.value)
+      .filter(value => !!value.trim());
+  }
+
+  events() {
+    return [
+      {
+        'submit .js-card-customfield-stringtemplate'(event) {
+          event.preventDefault();
+          const items = this.getItems();
+          this.card.setCustomField(this.customFieldId, items);
+        },
+
+        'keydown .js-card-customfield-stringtemplate-item'(event) {
+          if (event.keyCode === 13) {
+            event.preventDefault();
+
+            if (event.metaKey || event.ctrlKey) {
+              this.find('button[type=submit]').click();
+            } else if (event.target.value.trim()) {
+              const inputLast = this.find('input.last');
+
+              let items = this.getItems();
+
+              if (event.target === inputLast) {
+                inputLast.value = '';
+              } else if (event.target.nextSibling === inputLast) {
+                inputLast.focus();
+              } else {
+                event.target.blur();
+
+                const idx = Array.from(this.findAll('input')).indexOf(
+                  event.target,
+                );
+                items.splice(idx + 1, 0, '');
+
+                Tracker.afterFlush(() => {
+                  const element = this.findAll('input')[idx + 1];
+                  element.focus();
+                  element.value = '';
+                });
+              }
+
+              this.stringtemplateItems.set(items);
+            }
+          }
+        },
+
+        'blur .js-card-customfield-stringtemplate-item'(event) {
+          if (
+            !event.target.value.trim() ||
+            event.target === this.find('input.last')
+          ) {
+            const items = this.getItems();
+            this.stringtemplateItems.set(items);
+            this.find('input.last').value = '';
+          }
+        },
+
+        'click .js-close-inlined-form'(event) {
+          this.stringtemplateItems.set(this.data().value ?? []);
+        },
+      },
+    ];
+  }
+}.register('cardCustomField-stringtemplate'));

client/components/cards/cardDate.jade

@@ -8,3 +8,7 @@ template(name="dateBadge")
       time(datetime="{{showISODate}}")
         | {{showDate}}
 
+template(name="dateCustomField")
+  a(title="{{showTitle}}" class="{{classes}}")
+    time(datetime="{{showISODate}}")
+      | {{showDate}}

client/components/cards/cardDate.js

@@ -1,96 +1,4 @@
-// Edit received, start, due & end dates
-BlazeComponent.extendComponent({
-  template() {
-    return 'editCardDate';
-  },
-
-  onCreated() {
-    this.error = new ReactiveVar('');
-    this.card = this.data();
-    this.date = new ReactiveVar(moment.invalid());
-  },
-
-  onRendered() {
-    const $picker = this.$('.js-datepicker')
-      .datepicker({
-        todayHighlight: true,
-        todayBtn: 'linked',
-        language: TAPi18n.getLanguage(),
-      })
-      .on(
-        'changeDate',
-        function(evt) {
-          this.find('#date').value = moment(evt.date).format('L');
-          this.error.set('');
-          this.find('#time').focus();
-        }.bind(this),
-      );
-
-    if (this.date.get().isValid()) {
-      $picker.datepicker('update', this.date.get().toDate());
-    }
-  },
-
-  showDate() {
-    if (this.date.get().isValid()) return this.date.get().format('L');
-    return '';
-  },
-  showTime() {
-    if (this.date.get().isValid()) return this.date.get().format('LT');
-    return '';
-  },
-  dateFormat() {
-    return moment.localeData().longDateFormat('L');
-  },
-  timeFormat() {
-    return moment.localeData().longDateFormat('LT');
-  },
-
-  events() {
-    return [
-      {
-        'keyup .js-date-field'() {
-          // parse for localized date format in strict mode
-          const dateMoment = moment(this.find('#date').value, 'L', true);
-          if (dateMoment.isValid()) {
-            this.error.set('');
-            this.$('.js-datepicker').datepicker('update', dateMoment.toDate());
-          }
-        },
-        'keyup .js-time-field'() {
-          // parse for localized time format in strict mode
-          const dateMoment = moment(this.find('#time').value, 'LT', true);
-          if (dateMoment.isValid()) {
-            this.error.set('');
-          }
-        },
-        'submit .edit-date'(evt) {
-          evt.preventDefault();
-
-          // if no time was given, init with 12:00
-          const time =
-            evt.target.time.value ||
-            moment(new Date().setHours(12, 0, 0)).format('LT');
-
-          const dateString = `${evt.target.date.value} ${time}`;
-          const newDate = moment(dateString, 'L LT', true);
-          if (newDate.isValid()) {
-            this._storeDate(newDate.toDate());
-            Popup.close();
-          } else {
-            this.error.set('invalid-date');
-            evt.target.date.focus();
-          }
-        },
-        'click .js-delete-date'(evt) {
-          evt.preventDefault();
-          this._deleteDate();
-          Popup.close();
-        },
-      },
-    ];
-  },
-});
+import { DatePicker } from '/client/lib/datepicker';
 
 Template.dateBadge.helpers({
   canModifyCard() {
@@ -279,7 +187,7 @@ class CardStartDate extends CardDate {
     // if dueAt or endAt exist & are > startAt, startAt doesn't need to be flagged
     if ((endAt && theDate.isAfter(endAt)) || (dueAt && theDate.isAfter(dueAt)))
       classes += 'long-overdue';
-    else if (theDate.isBefore(now, 'minute')) classes += 'almost-due';
+    else if (theDate.isAfter(now)) classes += '';
     else classes += 'current';
     return classes;
   }
@@ -363,6 +271,33 @@ class CardEndDate extends CardDate {
 }
 CardEndDate.register('cardEndDate');
 
+class CardCustomFieldDate extends CardDate {
+  template() {
+    return 'dateCustomField';
+  }
+
+  onCreated() {
+    super.onCreated();
+    const self = this;
+    self.autorun(() => {
+      self.date.set(moment(self.data().value));
+    });
+  }
+
+  classes() {
+    return 'customfield-date';
+  }
+
+  showTitle() {
+    return '';
+  }
+
+  events() {
+    return [];
+  }
+}
+CardCustomFieldDate.register('cardCustomFieldDate');
+
 (class extends CardReceivedDate {
   showDate() {
     return this.date.get().format('l');
@@ -387,6 +322,12 @@ CardEndDate.register('cardEndDate');
   }
 }.register('minicardEndDate'));
 
+(class extends CardCustomFieldDate {
+  showDate() {
+    return this.date.get().format('l');
+  }
+}.register('minicardCustomFieldDate'));
+
 class VoteEndDate extends CardDate {
   onCreated() {
     super.onCreated();
@@ -413,3 +354,30 @@ class VoteEndDate extends CardDate {
   }
 }
 VoteEndDate.register('voteEndDate');
+
+class PokerEndDate extends CardDate {
+  onCreated() {
+    super.onCreated();
+    const self = this;
+    self.autorun(() => {
+      self.date.set(moment(self.data().getPokerEnd()));
+    });
+  }
+  classes() {
+    const classes = 'end-date' + ' ';
+    return classes;
+  }
+  showDate() {
+    return this.date.get().format('l LT');
+  }
+  showTitle() {
+    return `${TAPi18n.__('card-end-on')} ${this.date.get().format('LLLL')}`;
+  }
+
+  events() {
+    return super.events().concat({
+      'click .js-edit-date': Popup.open('editPokerEndDate'),
+    });
+  }
+}
+PokerEndDate.register('pokerEndDate');

client/components/cards/cardDate.styl

@@ -2,11 +2,11 @@
   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
 
@@ -14,17 +14,17 @@
     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
@@ -57,3 +57,7 @@
       -webkit-font-smoothing: antialiased
       margin-right: 0.3em
 
+.customfield-date
+  display: block
+  border-radius: 4px
+  padding: 1px 3px

client/components/cards/cardDescription.jade

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

client/components/cards/cardDescription.js

@@ -3,6 +3,7 @@ const descriptionFormIsOpen = new ReactiveVar(false);
 BlazeComponent.extendComponent({
   onDestroyed() {
     descriptionFormIsOpen.set(false);
+    $('.note-popover').hide();
   },
 
   descriptionFormIsOpen() {

client/components/cards/cardDescription.styl

@@ -23,7 +23,6 @@
     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

client/components/cards/cardDetails.jade

@@ -1,27 +1,33 @@
 template(name="cardDetails")
-  section.card-details.js-card-details: .card-details-canvas
+  section.card-details.js-card-details(class='{{#if cardMaximized}}card-details-maximized{{/if}}'): .card-details-canvas
     .card-details-header(class='{{#if colorClass}}card-details-{{colorClass}}{{/if}}')
       +inlinedForm(classNames="js-card-details-title")
         +editCardTitleForm
       else
         unless isMiniScreen
-          a.fa.fa-times-thin.close-card-details.js-close-card-details
+          a.fa.fa-times-thin.close-card-details.js-close-card-details(title="{{_ 'close-card'}}")
+          unless cardMaximized
+            a.fa.fa-window-maximize.maximize-card-details.js-maximize-card-details(title="{{_ 'maximize-card'}}")
+          if cardMaximized
+            a.fa.fa-window-minimize.minimize-card-details.js-minimize-card-details(title="{{_ 'minimize-card'}}")
           if currentUser.isBoardMember
-            a.fa.fa-navicon.card-details-menu.js-open-card-details-menu
-            input.inline-input(type="text" id="cardURL_copy" value="{{ absoluteUrl }}")
+            a.fa.fa-navicon.card-details-menu.js-open-card-details-menu(title="{{_ 'cardDetailsActionsPopup-title'}}")
+            input.inline-input(type="text" id="cardURL_copy" value="{{ originRelativeUrl }}")
             a.fa.fa-link.card-copy-button.js-copy-link(
               class="fa-link"
               title="{{_ 'copy-card-link-to-clipboard'}}"
-              value="{{ absoluteUrl }}"
             )
         if isMiniScreen
-          a.fa.fa-times-thin.close-card-details-mobile-web.js-close-card-details
+          a.fa.fa-times-thin.close-card-details-mobile-web.js-close-card-details(title="{{_ 'close-card'}}")
           if currentUser.isBoardMember
-            a.fa.fa-navicon.card-details-menu-mobile-web.js-open-card-details-menu
+            a.fa.fa-navicon.card-details-menu-mobile-web.js-open-card-details-menu(title="{{_ 'cardDetailsActionsPopup-title'}}")
             a.fa.fa-link.card-copy-mobile-button
         h2.card-details-title.js-card-title(
           class="{{#if canModifyCard}}js-open-inlined-form is-editable{{/if}}")
             +viewer
+              if currentBoard.allowsCardNumber
+                span.card-number
+                  | ##{getCardNumber}
               = getTitle
             if isWatching
               i.card-details-watch.fa.fa-eye
@@ -42,277 +48,501 @@ template(name="cardDetails")
       else
         p.warning {{_ 'card-archived'}}
 
-    .card-details-items
-      if currentBoard.allowsLabels
-        .card-details-item.card-details-item-labels
-          h3.card-details-item-title
-            i.fa.fa-tags
-            | {{_ 'labels'}}
-          a(class="{{#if canModifyCard}}js-add-labels{{else}}is-disabled{{/if}}" title="{{_ 'card-labels-title'}}")
-            each labels
-              span.card-label(class="card-label-{{color}}" title=name)
-                +viewer
-                  = name
-          if canModifyCard
-            unless currentUser.isWorker
-              a.card-label.add-label.js-add-labels(title="{{_ 'card-labels-title'}}")
-                i.fa.fa-plus
+    .card-details-left
+
+      .card-details-items
+        if currentBoard.allowsLabels
+          .card-details-item.card-details-item-labels
+            h3.card-details-item-title
+              i.fa.fa-tags
+              | {{_ 'labels'}}
+            a(class="{{#if canModifyCard}}js-add-labels{{else}}is-disabled{{/if}}" title="{{_ 'card-labels-title'}}")
+              each labels
+                span.card-label(class="card-label-{{color}}" title=name)
+                  +viewer
+                    = name
+            if canModifyCard
+              unless currentUser.isWorker
+                a.card-label.add-label.js-add-labels(title="{{_ 'card-labels-title'}}")
+                  i.fa.fa-plus
+
+        if currentBoard.allowsReceivedDate
+          hr
+          .card-details-item.card-details-item-received
+            h3.card-details-item-title
+              i.fa.fa-sign-out
+              | {{_ 'card-received'}}
+            if getReceived
+              +cardReceivedDate
+            else
+              if canModifyCard
+                unless currentUser.isWorker
+                  a.card-label.add-label.js-received-date
+                    i.fa.fa-plus
+
+        if currentBoard.allowsStartDate
+          .card-details-item.card-details-item-start
+            h3.card-details-item-title
+              i.fa.fa-hourglass-start
+              | {{_ 'card-start'}}
+            if getStart
+              +cardStartDate
+            else
+              if canModifyCard
+                unless currentUser.isWorker
+                  a.card-label.add-label.js-start-date
+                    i.fa.fa-plus
+
+        if currentBoard.allowsDueDate
+          .card-details-item.card-details-item-due
+            h3.card-details-item-title
+              i.fa.fa-sign-in
+              | {{_ 'card-due'}}
+            if getDue
+              +cardDueDate
+            else
+              if canModifyCard
+                unless currentUser.isWorker
+                  a.card-label.add-label.js-due-date
+                    i.fa.fa-plus
+
+        if currentBoard.allowsEndDate
+          .card-details-item.card-details-item-end
+            h3.card-details-item-title
+              i.fa.fa-hourglass-end
+              | {{_ 'card-end'}}
+            if getEnd
+              +cardEndDate
+            else
+              if canModifyCard
+                unless currentUser.isWorker
+                  a.card-label.add-label.js-end-date
+                    i.fa.fa-plus
 
-      if currentBoard.allowsReceivedDate
         hr
-        .card-details-item.card-details-item-received
-          h3.card-details-item-title
-            i.fa.fa-sign-out
-            | {{_ 'card-received'}}
-          if getReceived
-            +cardReceivedDate
-          else
-            if canModifyCard
-              unless currentUser.isWorker
-                a.card-label.add-label.js-received-date
-                  i.fa.fa-plus
+        if currentBoard.allowsCreator
+          .card-details-item.card-details-item-creator
+            h3.card-details-item-title
+              i.fa.fa-user
+              | {{_ 'creator'}}
 
-      if currentBoard.allowsStartDate
-        .card-details-item.card-details-item-start
-          h3.card-details-item-title
-            i.fa.fa-hourglass-start
-            | {{_ 'card-start'}}
-          if getStart
-            +cardStartDate
-          else
-            if canModifyCard
-              unless currentUser.isWorker
-                a.card-label.add-label.js-start-date
-                  i.fa.fa-plus
-
-      if currentBoard.allowsDueDate
-        .card-details-item.card-details-item-due
-          h3.card-details-item-title
-            i.fa.fa-sign-in
-            | {{_ 'card-due'}}
-          if getDue
-            +cardDueDate
-          else
-            if canModifyCard
-              unless currentUser.isWorker
-                a.card-label.add-label.js-due-date
-                  i.fa.fa-plus
-
-      if currentBoard.allowsEndDate
-        .card-details-item.card-details-item-end
-          h3.card-details-item-title
-            i.fa.fa-hourglass-end
-            | {{_ 'card-end'}}
-          if getEnd
-            +cardEndDate
-          else
-            if canModifyCard
-              unless currentUser.isWorker
-                a.card-label.add-label.js-end-date
-                  i.fa.fa-plus
-
-      //.card-details-items
-      if currentBoard.allowsMembers
-        hr
-        .card-details-item.card-details-item-members
-          h3.card-details-item-title
-            i.fa.fa-users
-            | {{_ 'members'}}
-          each getMembers
-            +userAvatar(userId=this cardId=../_id)
+            +userAvatar(userId=userId noRemove=true)
             | {{! XXX Hack to hide syntaxic coloration /// }}
-          if canModifyCard
-            unless currentUser.isWorker
-              a.member.add-member.card-details-item-add-button.js-add-members(title="{{_ 'card-members-title'}}")
-                i.fa.fa-plus
 
-      //if assigneeSelected
-      if currentBoard.allowsAssignee
-        .card-details-item.card-details-item-assignees
-          h3.card-details-item-title
-            i.fa.fa-user
-            | {{_ 'assignee'}}
-          each getAssignees
-            +userAvatarAssignee(userId=this cardId=../_id)
-            | {{! XXX Hack to hide syntaxic coloration /// }}
-          if canModifyCard
-            a.assignee.add-assignee.card-details-item-add-button.js-add-assignees(title="{{_ 'assignee'}}")
-              i.fa.fa-plus
-          if currentUser.isWorker
-            unless assigneeSelected
+        //.card-details-items
+        if currentBoard.allowsMembers
+          .card-details-item.card-details-item-members
+            h3.card-details-item-title
+              i.fa.fa-users
+              | {{_ 'members'}}
+            each userId in getMembers
+              +userAvatar(userId=userId cardId=_id)
+              | {{! XXX Hack to hide syntaxic coloration /// }}
+            if canModifyCard
+              unless currentUser.isWorker
+                a.member.add-member.card-details-item-add-button.js-add-members(title="{{_ 'card-members-title'}}")
+                  i.fa.fa-plus
+
+        //if assigneeSelected
+        if currentBoard.allowsAssignee
+          .card-details-item.card-details-item-assignees
+            h3.card-details-item-title
+              i.fa.fa-user
+              | {{_ 'assignee'}}
+            each userId in getAssignees
+              +userAvatar(userId=userId cardId=_id assignee=true)
+              | {{! XXX Hack to hide syntaxic coloration /// }}
+            if canModifyCard
               a.assignee.add-assignee.card-details-item-add-button.js-add-assignees(title="{{_ 'assignee'}}")
                 i.fa.fa-plus
+            if currentUser.isWorker
+              unless assigneeSelected
+                a.assignee.add-assignee.card-details-item-add-button.js-add-assignees(title="{{_ 'assignee'}}")
+                  i.fa.fa-plus
 
-      //.card-details-items
-      if getSpentTime
-        .card-details-item.card-details-item-spent
-          if getIsOvertime
-            h3.card-details-item-title
-              | {{_ 'overtime-hours'}}
-          else
-            h3.card-details-item-title
-              | {{_ 'spent-time-hours'}}
-          +cardSpentTime
+        //.card-details-items
+        if getSpentTime
+          .card-details-item.card-details-item-spent
+            if getIsOvertime
+              h3.card-details-item-title
+                | {{_ 'overtime-hours'}}
+            else
+              h3.card-details-item-title
+                | {{_ 'spent-time-hours'}}
+            +cardSpentTime
 
-      //.card-details-items
-      if currentBoard.allowsRequestedBy
-        .card-details-item.card-details-item-name
-          h3.card-details-item-title
-            i.fa.fa-shopping-cart
-            | {{_ 'requested-by'}}
-          if canModifyCard
-            unless currentUser.isWorker
-              +inlinedForm(classNames="js-card-details-requester")
-                +editCardRequesterForm
+        //.card-details-items
+        if currentBoard.allowsRequestedBy
+          .card-details-item.card-details-item-name
+            h3.card-details-item-title
+              i.fa.fa-shopping-cart
+              | {{_ 'requested-by'}}
+            if canModifyCard
+              unless currentUser.isWorker
+                +inlinedForm(classNames="js-card-details-requester")
+                  +editCardRequesterForm
+                else
+                  a.js-open-inlined-form
+                    if getRequestedBy
+                      +viewer
+                        = getRequestedBy
+                    else
+                      | {{_ 'add'}}
+            else if getRequestedBy
+              +viewer
+                = getRequestedBy
+
+        if currentBoard.allowsAssignedBy
+          .card-details-item.card-details-item-name
+            h3.card-details-item-title
+              i.fa.fa-user-plus
+              | {{_ 'assigned-by'}}
+            if canModifyCard
+              unless currentUser.isWorker
+                +inlinedForm(classNames="js-card-details-assigner")
+                  +editCardAssignerForm
+                else
+                  a.js-open-inlined-form
+                    if getAssignedBy
+                      +viewer
+                        = getAssignedBy
+                    else
+                      | {{_ 'add'}}
+            else if getRequestedBy
+              +viewer
+                = getAssignedBy
+
+        if currentBoard.allowsCardSortingByNumber
+          .card-details-item.card-details-sort-order
+            h3.card-details-item-title
+              i.fa.fa-sort
+              | {{_ 'sort'}}
+            if canModifyCard
+              +inlinedForm(classNames="js-card-details-sort")
+                +editCardSortOrderForm
               else
                 a.js-open-inlined-form
-                  if getRequestedBy
-                    +viewer
-                      = getRequestedBy
-                  else
-                    | {{_ 'add'}}
-          else if getRequestedBy
-            +viewer
-              = getRequestedBy
+                  +viewer
+                    = sort
 
-      if currentBoard.allowsAssignedBy
-        .card-details-item.card-details-item-name
-          h3.card-details-item-title
-            i.fa.fa-user-plus
-            | {{_ 'assigned-by'}}
-          if canModifyCard
-            unless currentUser.isWorker
-              +inlinedForm(classNames="js-card-details-assigner")
-                +editCardAssignerForm
-              else
-                a.js-open-inlined-form
-                  if getAssignedBy
-                    +viewer
-                      = getAssignedBy
-                  else
-                    | {{_ 'add'}}
-          else if getRequestedBy
-            +viewer
-              = getAssignedBy
+        //.card-details-items
+        if customFieldsWD
+          hr
+          each customFieldsWD
+            .card-details-item.card-details-item-customfield
+              h3.card-details-item-title
+                i.fa.fa-list-alt
+                = definition.name
+              +cardCustomField
 
-      //.card-details-items
-      if customFieldsWD
+      if getVoteQuestion
         hr
-        each customFieldsWD
-          .card-details-item.card-details-item-customfield
+        .vote-title
+          div.flex
+            h3
+              i.fa.fa-thumbs-up
+              | {{_ 'vote-question'}}
+            if getVoteEnd
+              +voteEndDate
+          .vote-result
+            if votePublic
+              a.card-label.card-label-green.js-show-positive-votes {{ voteCountPositive }}
+              a.card-label.card-label-red.js-show-negative-votes {{ voteCountNegative }}
+            else
+              .card-label.card-label-green {{ voteCountPositive }}
+              .card-label.card-label-red {{ voteCountNegative }}
+            unless ($and currentBoard.isPublic voteAllowNonBoardMembers )
+              .card-label.card-label-gray  {{ voteCount }} {{_ 'r-of' }} {{ currentBoard.activeMembers.length }}
+        +viewer
+          = getVoteQuestion
+        if showVotingButtons
+          button.card-details-green.js-vote.js-vote-positive(class="{{#if voteState}}voted{{/if}}")
+            if voteState
+              i.fa.fa-thumbs-up
+            | {{_ 'vote-for-it'}}
+          button.card-details-red.js-vote.js-vote-negative(class="{{#if $eq voteState false}}voted{{/if}}")
+            if $eq voteState false
+              i.fa.fa-thumbs-down
+            | {{_ 'vote-against'}}
+
+      if getPokerQuestion
+        hr
+        .poker-title
+          div.flex
+            h3
+              i.fa.fa-thumbs-up
+              | {{_ 'poker-question'}}
+            if getPokerEnd
+              +pokerEndDate
+          div.flex
+            .poker-result
+              if expiredPoker
+                unless ($and currentBoard.isPublic pokerAllowNonBoardMembers )
+                  .card-label.card-label-gray  {{ pokerCount }} {{_ 'r-of' }} {{ currentBoard.activeMembers.length }}
+        if showPlanningPokerButtons
+          .poker-result
+            .poker-deck
+              .poker-card
+                span.inner.js-poker.js-poker-vote-one(class="{{#if $eq pokerState 'one'}}poker-voted{{/if}}") {{_ 'poker-one'}}
+              if $eq pokerState "one"
+                i.fa.fa-check
+            .poker-deck
+              .poker-card
+                span.inner.js-poker.js-poker-vote-two(class="{{#if $eq pokerState 'two'}}poker-voted{{/if}}") {{_ 'poker-two'}}
+              if $eq pokerState "two"
+                i.fa.fa-check
+            .poker-deck
+              .poker-card
+                span.inner.js-poker.js-poker-vote-three(class="{{#if $eq pokerState 'three'}}poker-voted{{/if}}") {{_ 'poker-three'}}
+              if $eq pokerState "three"
+                i.fa.fa-check
+            .poker-deck
+              .poker-card
+                span.inner.js-poker.js-poker-vote-five(class="{{#if $eq pokerState 'five'}}poker-voted{{/if}}") {{_ 'poker-five'}}
+              if $eq pokerState "five"
+                i.fa.fa-check
+            .poker-deck
+              .poker-card
+                span.inner.js-poker.js-poker-vote-eight(class="{{#if $eq pokerState 'eight'}}poker-voted{{/if}}") {{_ 'poker-eight'}}
+              if $eq pokerState "eight"
+                i.fa.fa-check
+            .poker-deck
+              .poker-card
+                span.inner.js-poker.js-poker-vote-thirteen(class="{{#if $eq pokerState 'thirteen'}}poker-voted{{/if}}") {{_ 'poker-thirteen'}}
+              if $eq pokerState "thirteen"
+                i.fa.fa-check
+            .poker-deck
+              .poker-card
+                span.inner.js-poker.js-poker-vote-twenty(class="{{#if $eq pokerState 'twenty'}}poker-voted{{/if}}") {{_ 'poker-twenty'}}
+              if $eq pokerState "twenty"
+                i.fa.fa-check
+            .poker-deck
+              .poker-card
+                span.inner.js-poker.js-poker-vote-forty(class="{{#if $eq pokerState 'forty'}}poker-voted{{/if}}") {{_ 'poker-forty'}}
+              if $eq pokerState "forty"
+                i.fa.fa-check
+            .poker-deck
+              .poker-card
+                span.inner.js-poker.js-poker-vote-one-hundred(class="{{#if $eq pokerState 'oneHundred'}}poker-voted{{/if}}") {{_ 'poker-oneHundred'}}
+              if $eq pokerState "oneHundred"
+                i.fa.fa-check
+            .poker-deck
+              .poker-card
+                span.inner.js-poker.js-poker-vote-unsure(class="{{#if $eq pokerState 'unsure'}}poker-voted{{/if}}") {{_ 'poker-unsure'}}
+              if $eq pokerState "unsure"
+                i.fa.fa-check
+
+          if currentUser.isBoardAdmin
+            button.card-details-blue.js-poker-finish(class="{{#if $eq voteState false}}poker-voted{{/if}}") {{_ 'poker-finish'}}
+
+        if expiredPoker
+          .poker-table
+            .poker-table-side-left
+              .poker-table-heading-left
+                .poker-table-row
+                  .poker-table-cell
+                  .poker-table-cell
+                    | {{_ 'poker-result-votes' }}
+                  .poker-table-cell.poker-table-cell-who
+                    | {{_ 'poker-result-who' }}
+              .poker-table-body
+                .poker-table-row
+                  .poker-table-cell
+                    button.card-details-gray.js-poker.poker-card-result(class="{{#if $eq pokerWinner 1}}winner{{else}}loser{{/if}}") {{_ 'poker-one'}}
+                  .poker-table-cell {{ pokerCountOne }}
+                  .poker-table-cell.poker-table-cell-who
+                    .poker-result
+                        each m in pokerMemberOne
+                          a.name
+                            +userAvatar(userId=m._id noRemove=true)
+
+                .poker-table-row
+                  .poker-table-cell
+                    button.card-details-gray.js-poker.poker-card-result(class="{{#if $eq pokerWinner 2}}winner{{else}}loser{{/if}}") {{_ 'poker-two'}}
+                  .poker-table-cell {{ pokerCountTwo }}
+                  .poker-table-cell.poker-table-cell-who
+                    .poker-result
+                        each m in pokerMemberTwo
+                          a.name
+                            +userAvatar(userId=m._id noRemove=true)
+
+                .poker-table-row
+                  .poker-table-cell
+                    button.card-details-gray.js-poker.poker-card-result(class="{{#if $eq pokerWinner 3}}winner{{else}}loser{{/if}}") {{_ 'poker-three'}}
+                  .poker-table-cell {{ pokerCountThree }}
+                  .poker-table-cell.poker-table-cell-who
+                    .poker-result
+                        each m in pokerMemberThree
+                          a.name
+                            +userAvatar(userId=m._id noRemove=true)
+
+                .poker-table-row
+                  .poker-table-cell
+                    button.card-details-gray.js-poker.poker-card-result(class="{{#if $eq pokerWinner 5}}winner{{else}}loser{{/if}}") {{_ 'poker-five'}}
+                  .poker-table-cell {{ pokerCountFive }}
+                  .poker-table-cell.poker-table-cell-who
+                    .poker-result
+                        each m in pokerMemberFive
+                          a.name
+                            +userAvatar(userId=m._id noRemove=true)
+
+                .poker-table-row
+                  .poker-table-cell
+                    button.card-details-gray.js-poker.poker-card-result(class="{{#if $eq pokerWinner 8}}winner{{else}}loser{{/if}}") {{_ 'poker-eight'}}
+                  .poker-table-cell {{ pokerCountEight }}
+                  .poker-table-cell.poker-table-cell-who
+                    .poker-result
+                        each m in pokerMemberEight
+                          a.name
+                            +userAvatar(userId=m._id noRemove=true)
+
+            .poker-table-side-right
+              .poker-table-heading-right
+                .poker-table-row
+                  .poker-table-cell
+                  .poker-table-cell
+                    | {{_ 'poker-result-votes' }}
+                  .poker-table-cell.poker-table-cell-who
+                    | {{_ 'poker-result-who' }}
+              .poker-table-body
+                .poker-table-row
+                  .poker-table-cell
+                    button.card-details-gray.js-poker.poker-card-result(class="{{#if $eq pokerWinner 13}}winner{{else}}loser{{/if}}") {{_ 'poker-thirteen'}}
+                  .poker-table-cell {{ pokerCountThirteen }}
+                  .poker-table-cell.poker-table-cell-who
+                    .poker-result
+                        each m in pokerMemberThirteen
+                          a.name
+                            +userAvatar(userId=m._id noRemove=true)
+
+                .poker-table-row
+                  .poker-table-cell
+                    button.card-details-gray.js-poker.poker-card-result(class="{{#if $eq pokerWinner 20}}winner{{else}}loser{{/if}}") {{_ 'poker-twenty'}}
+                  .poker-table-cell {{ pokerCountTwenty }}
+                  .poker-table-cell.poker-table-cell-who
+                    .poker-result
+                        each m in pokerMemberTwenty
+                          a.name
+                            +userAvatar(userId=m._id noRemove=true)
+
+                .poker-table-row
+                  .poker-table-cell
+                    button.card-details-gray.js-poker.poker-card-result(class="{{#if $eq pokerWinner 40}}winner{{else}}loser{{/if}}") {{_ 'poker-forty'}}
+                  .poker-table-cell {{ pokerCountForty }}
+                  .poker-table-cell.poker-table-cell-who
+                    .poker-result
+                        each m in pokerMemberForty
+                          a.name
+                            +userAvatar(userId=m._id noRemove=true)
+
+                .poker-table-row
+                  .poker-table-cell
+                    button.card-details-gray.js-poker.poker-card-result(class="{{#if $eq pokerWinner 100}}winner{{else}}loser{{/if}}") {{_ 'poker-oneHundred'}}
+                  .poker-table-cell {{ pokerCountOneHundred }}
+                  .poker-table-cell.poker-table-cell-who
+                    .poker-result
+                        each m in pokerMemberOneHundred
+                          a.name
+                            +userAvatar(userId=m._id noRemove=true)
+
+                .poker-table-row
+                  .poker-table-cell
+                    button.card-details-gray.js-poker.poker-card-result(class="{{#if $eq pokerWinner 'unsure'}}winner{{else}}loser{{/if}}") {{_ 'poker-unsure'}}
+                  .poker-table-cell {{ pokerCountUnsure }}
+                  .poker-table-cell.poker-table-cell-who
+                    .poker-result
+                        each m in pokerMemberUnsure
+                          a.name
+                            +userAvatar(userId=m._id noRemove=true)
+
+          if currentUser.isBoardAdmin
+            div.estimation-add
+              button.card-details-red.js-poker-replay(class="{{#if $eq voteState false}}voted{{/if}}") {{_ 'poker-replay'}}
+            div.estimation-add
+              button.js-poker-estimation
+                i.fa.fa-plus
+                | {{_ 'set-estimation'}}
+              input(type=text,autofocus value=getPokerEstimation,id="pokerEstimation")
+
+      //- XXX We should use "editable" to avoid repetiting ourselves
+      if canModifyCard
+        unless currentUser.isWorker
+          if currentBoard.allowsDescriptionTitle
+            hr
             h3.card-details-item-title
-              i.fa.fa-list-alt
-              = definition.name
-            +cardCustomField
-
-    if getVoteQuestion
-      hr
-      .vote-title
-        div.flex
-          h3
-            i.fa.fa-thumbs-up
-            | {{_ 'vote-question'}}
-          if getVoteEnd
-            +voteEndDate
-        .vote-result
-          if votePublic
-            a.card-label.card-label-green.js-show-positive-votes {{ voteCountPositive }}
-            a.card-label.card-label-red.js-show-negative-votes {{ voteCountNegative }}
-          else
-            .card-label.card-label-green {{ voteCountPositive }}
-            .card-label.card-label-red {{ voteCountNegative }}
-          unless ($and currentBoard.isPublic voteAllowNonBoardMembers )
-            .card-label.card-label-gray  {{ voteCount }} {{_ 'r-of' }} {{ currentBoard.activeMembers.length }}
-      +viewer
-        = getVoteQuestion
-      if showVotingButtons
-        button.card-details-green.js-vote.js-vote-positive(class="{{#if voteState}}voted{{/if}}")
-          if voteState
-            i.fa.fa-thumbs-up
-          | {{_ 'vote-for-it'}}
-        button.card-details-red.js-vote.js-vote-negative(class="{{#if $eq voteState false}}voted{{/if}}")
-          if $eq voteState false
-            i.fa.fa-thumbs-down
-          | {{_ 'vote-against'}}
-
-    //- XXX We should use "editable" to avoid repetiting ourselves
-    if canModifyCard
-      unless currentUser.isWorker
+              i.fa.fa-align-left
+              | {{_ 'description'}}
+          if currentBoard.allowsDescriptionText
+            +inlinedCardDescription(classNames="card-description js-card-description")
+              +descriptionForm
+              .edit-controls.clearfix
+                button.primary(type="submit") {{_ 'save'}}
+                a.fa.fa-times-thin.js-close-inlined-form
+            else
+              if currentBoard.allowsDescriptionText
+                a.js-open-inlined-form
+                  if getDescription
+                    +viewer
+                      = getDescription
+                  else
+                    | {{_ 'edit'}}
+                if (hasUnsavedValue 'cardDescription' _id)
+                  p.quiet
+                    | {{_ 'unsaved-description'}}
+                    a.js-open-inlined-form {{_ 'view-it'}}
+                    = ' - '
+                    a.js-close-inlined-form {{_ 'discard'}}
+      else if getDescription
         if currentBoard.allowsDescriptionTitle
           hr
-          h3.card-details-item-title
-            i.fa.fa-align-left
-            | {{_ 'description'}}
+          h3.card-details-item-title {{_ 'description'}}
         if currentBoard.allowsDescriptionText
-          +inlinedCardDescription(classNames="card-description js-card-description")
-            +descriptionForm
-            .edit-controls.clearfix
-              button.primary(type="submit") {{_ 'save'}}
-              a.fa.fa-times-thin.js-close-inlined-form
-          else
-            if currentBoard.allowsDescriptionText
-              a.js-open-inlined-form
-                if getDescription
-                  +viewer
-                    = getDescription
-                else
-                  | {{_ 'edit'}}
-              if (hasUnsavedValue 'cardDescription' _id)
-                p.quiet
-                  | {{_ 'unsaved-description'}}
-                  a.js-open-inlined-form {{_ 'view-it'}}
-                  = ' - '
-                  a.js-close-inlined-form {{_ 'discard'}}
-    else if getDescription
-      if currentBoard.allowsDescriptionTitle
-        hr
-        h3.card-details-item-title {{_ 'description'}}
-      if currentBoard.allowsDescriptionText
-        +viewer
-          = getDescription
+          +viewer
+            = getDescription
 
-    .card-checklist-attachmentGalerys
-      .card-checklist-attachmentGalery.card-checklists
-        if currentBoard.allowsChecklists
+      .card-checklist-attachmentGalerys
+        .card-checklist-attachmentGalery.card-checklists
+          if currentBoard.allowsChecklists
+            hr
+            +checklists(cardId = _id)
+          if currentBoard.allowsSubtasks
+            hr
+            +subtasks(cardId = _id)
+        if currentBoard.allowsAttachments
           hr
-          +checklists(cardId = _id)
-        if currentBoard.allowsSubtasks
-          hr
-          +subtasks(cardId = _id)
-      if currentBoard.allowsAttachments
-        hr
-        h3.card-details-item-title
-          i.fa.fa-paperclip
-          | {{_ 'attachments'}}
-        .card-checklist-attachmentGalery.card-attachmentGalery
-          +attachmentsGalery
+          h3.card-details-item-title
+            i.fa.fa-paperclip
+            | {{_ 'attachments'}}
+          .card-checklist-attachmentGalery.card-attachmentGalery
+            +attachmentsGalery
 
-    hr
-    unless currentUser.isNoComments
-      .activity-title
-        h3.card-details-item-title
-          i.fa.fa-history
-          | {{ _ 'activity'}}
+    .card-details-right
+
+      unless currentUser.isNoComments
+        .activity-title
+          h3.card-details-item-title
+            i.fa.fa-history
+            | {{ _ 'activity'}}
+          if currentUser.isBoardMember
+            .material-toggle-switch(title="{{_ 'hide-system-messages'}}")
+              //span.toggle-switch-title
+              if hiddenSystemMessages
+                input.toggle-switch(type="checkbox" id="toggleButton" checked="checked")
+              else
+                input.toggle-switch(type="checkbox" id="toggleButton")
+              label.toggle-label(for="toggleButton")
+      if currentBoard.allowsComments
         if currentUser.isBoardMember
-          .material-toggle-switch
-            span.toggle-switch-title {{_ 'hide-system-messages'}}
-            if hiddenSystemMessages
-              input.toggle-switch(type="checkbox" id="toggleButton" checked="checked")
-            else
-              input.toggle-switch(type="checkbox" id="toggleButton")
-            label.toggle-label(for="toggleButton")
-    if currentBoard.allowsComments
-      if currentUser.isBoardMember
-        unless currentUser.isNoComments
-          +commentForm
-    unless currentUser.isNoComments
-      if isLoaded.get
-        if isLinkedCard
-          +activities(card=this mode="linkedcard")
-        else if isLinkedBoard
-          +activities(card=this mode="linkedboard")
-        else
-          +activities(card=this mode="card")
+          unless currentUser.isNoComments
+            +commentForm
+      unless currentUser.isNoComments
+        if isLoaded.get
+          if isLinkedCard
+            +activities(card=this mode="linkedcard")
+          else if isLinkedBoard
+            +activities(card=this mode="linkedboard")
+          else
+            +activities(card=this mode="card")
 
 template(name="editCardTitleForm")
   textarea.js-edit-card-title(rows='1' autofocus dir="auto")
@@ -333,6 +563,12 @@ template(name="editCardAssignerForm")
     button.primary.confirm.js-submit-edit-card-assigner-form(type="submit") {{_ 'save'}}
     a.fa.fa-times-thin.js-close-inlined-form
 
+template(name="editCardSortOrderForm")
+  input.js-edit-card-sort(type='text' autofocus value=sort dir="auto")
+  .edit-controls.clearfix
+    button.primary.confirm.js-submit-edit-card-sort-form(type="submit") {{_ 'save'}}
+    a.fa.fa-times-thin.js-close-inlined-form
+
 template(name="cardDetailsActionsPopup")
   ul.pop-over-list
     li
@@ -343,9 +579,9 @@ template(name="cardDetailsActionsPopup")
         else
           i.fa.fa-eye-slash
           |  {{_ 'watch'}}
+  hr
   if canModifyCard
     unless currentUser.isWorker
-      hr
       ul.pop-over-list
         //li: a.js-members {{_ 'card-edit-members'}}
         //li: a.js-labels {{_ 'card-edit-labels'}}
@@ -354,6 +590,10 @@ template(name="cardDetailsActionsPopup")
           a.js-start-voting
             i.fa.fa-thumbs-up
             | {{_ 'card-edit-voting'}}
+        li
+          a.js-start-planning-poker
+            i.fa.fa-thumbs-up
+            | {{_ 'card-edit-planning-poker'}}
         if currentUser.isBoardAdmin
           li
             a.js-custom-fields
@@ -371,50 +611,63 @@ template(name="cardDetailsActionsPopup")
           a.js-set-card-color
             i.fa.fa-paint-brush
             | {{_ 'setCardColorPopup-title'}}
-      hr
-    ul.pop-over-list
+  hr
+  ul.pop-over-list
+    li
+      a.js-export-card
+        i.fa.fa-share-alt
+        | {{_ 'export-card'}}
+  hr
+  ul.pop-over-list
+    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
+  ul.pop-over-list
+    if currentUser.isBoardAdmin
       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
-    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'}}
+        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'}}
+  unless currentUser.isWorker
+    hr
+    ul.pop-over-list
+      li
+        a.js-copy-checklist-cards
+          i.fa.fa-list
+          i.fa.fa-copy
+          | {{_ 'copyChecklistToManyCardsPopup-title'}}
+    unless archived
       hr
       ul.pop-over-list
         li
-          a.js-copy-checklist-cards
-            i.fa.fa-list
-            i.fa.fa-copy
-            | {{_ 'copyChecklistToManyCardsPopup-title'}}
-      unless archived
-        hr
-        ul.pop-over-list
-          li
-            a.js-archive
-              i.fa.fa-arrow-right
-              i.fa.fa-archive
-              | {{_ 'archive-card'}}
-      hr
-      ul.pop-over-list
-        li
-          a.js-more
-            i.fa.fa-link
-            | {{_ 'cardMorePopup-title'}}
+          a.js-archive
+            i.fa.fa-arrow-right
+            i.fa.fa-archive
+            | {{_ 'archive-card'}}
+    hr
+    ul.pop-over-list
+      li
+        a.js-more
+          i.fa.fa-link
+          | {{_ 'cardMorePopup-title'}}
+
+template(name="exportCardPopup")
+  ul.pop-over-list
+    li
+      a(href="{{exportUrlCardPDF}}",, download="{{exportFilenameCardPDF}}")
+        i.fa.fa-share-alt
+        | {{_ 'export-card-pdf'}}
 
 template(name="moveCardPopup")
   +boardsAndLists
@@ -489,23 +742,6 @@ template(name="cardAssigneesPopup")
           if currentUser.isCardAssignee
             i.fa.fa-check
 
-template(name="userAvatarAssignee")
-  a.assignee.js-assignee(title="{{userData.profile.fullname}} ({{userData.username}})")
-    if userData.profile.avatarUrl
-      img.avatar.avatar-image(src="{{userData.profile.avatarUrl}}")
-    else
-      +userAvatarAssigneeInitials(userId=userData._id)
-
-    if showStatus
-      span.assignee-presence-status(class=presenceStatusClassName)
-      span.member-type(class=memberType)
-
-    unless isSandstorm
-      if showEdit
-        if $eq currentUser._id userData._id
-          a.edit-avatar.js-change-avatar
-            i.fa.fa-pencil
-
 template(name="cardAssigneePopup")
   .board-assignee-menu
     .mini-profile-info
@@ -523,17 +759,13 @@ template(name="cardAssigneePopup")
           with currentUser
             li: a.js-edit-profile {{_ 'edit-profile'}}
 
-template(name="userAvatarAssigneeInitials")
-  svg.avatar.avatar-assignee-initials(viewBox="0 0 {{viewPortWidth}} 15")
-    text(x="50%" y="13" text-anchor="middle")= initials
-
 template(name="cardMorePopup")
   p.quiet
     span.clearfix
       span {{_ 'link-card'}}
       = ' '
       i.fa.colorful(class="{{#if board.isPublic}}fa-globe{{else}}fa-lock{{/if}}")
-      input.inline-input(type="text" id="cardURL" readonly value="{{ absoluteUrl }}" autofocus="autofocus")
+      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'}}
     span.clearfix
     br
@@ -634,3 +866,29 @@ template(name="negativeVoteMembersPopup")
           span.full-name
             = m.profile.fullname
             | (<span class="username">{{ m.username }}</span>)
+
+template(name="deletePokerPopup")
+  p {{_ "poker-delete-pop"}}
+  button.js-confirm.negate.full(type="submit") {{_ 'delete'}}
+
+template(name="cardStartPlanningPokerPopup")
+  form.edit-poker-question
+    .fields
+      .check-div
+        a.flex(class="{{#if getPokerQuestion}}is-disabled{{else}}js-toggle-poker-allow-non-members{{/if}}")
+          .materialCheckBox#poker-allow-non-members(name="poker-allow-non-members" class="{{#if pokerAllowNonBoardMembers}}is-checked{{/if}}")
+          span {{_ 'allowNonBoardMembers'}}
+      .check-div.flex
+        i.fa.fa-hourglass-end
+        a.js-end-date
+          span
+            | {{_ 'card-end'}}
+            unless getPokerEnd
+              i.fa.fa-plus
+        if getPokerEnd
+          +pokerEndDate
+
+    button.primary.js-submit {{_ 'save'}}
+    if getPokerQuestion
+      if currentUser.isBoardAdmin
+        button.js-remove-poker.negate.wide.right {{_ 'delete'}}

client/components/cards/cardDetails.styl

@@ -110,11 +110,19 @@ avatar-radius = 50%
 
   .card-details-header
     margin: 0 -20px 5px
-    padding 7px 20px
+    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,
@@ -122,9 +130,11 @@ avatar-radius = 50%
     .card-details-menu-mobile-web
       float: right
 
-    .close-card-details
+    .close-card-details,
+    .maximize-card-details,
+    .minimize-card-details
       font-size: 24px
-      padding: 5px
+      padding: 5px 10px 5px 10px
       margin-right: -8px
 
     .close-card-details-mobile-web
@@ -211,6 +221,7 @@ avatar-radius = 50%
         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,
@@ -232,6 +243,43 @@ avatar-radius = 50%
   .activities
     padding-top: 10px
 
+.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
+    position: absolute
+    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
@@ -259,7 +307,13 @@ input[type="submit"].attachment-add-link-submit
         margin-right: 0px
 
       .card-details-menu
-        margin-right: 10px
+        margin-right: 40px
+
+      .maximize-card-details
+        margin-right: 40px
+
+      .minimize-card-details
+        margin-right: 40px
 
 card-details-color(background, color...)
   background: background !important
@@ -356,3 +410,131 @@ card-details-color(background, color...)
   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
+

client/components/cards/checklists.jade

@@ -4,8 +4,8 @@ template(name="checklists")
       i.fa.fa-check
       | {{_ 'checklists'}}
     if currentUser.isBoardMember
-      .material-toggle-switch
-        span.toggle-switch-title {{_ 'hide-checked-items'}}
+      .material-toggle-switch(title="{{_ 'hide-checked-items'}}")
+        //span.toggle-switch-title
         if hideCheckedItems
           input.toggle-switch(type="checkbox" id="toggleHideCheckedItemsButton" checked="checked")
         else
@@ -25,9 +25,8 @@ template(name="checklists")
     +inlinedForm(autoclose=false classNames="js-add-checklist" cardId = cardId)
       +addChecklistItemForm
     else
-      a.js-open-inlined-form
+      a.js-open-inlined-form(title="{{_ 'add-checklist'}}")
         i.fa.fa-plus
-        | {{_ 'add-checklist'}}...
 
 template(name="checklistDetail")
   .js-checklist.checklist
@@ -81,6 +80,9 @@ template(name="editChecklistItemForm")
     span(title=createdAt) {{ moment createdAt }}
     if canModifyCard
       a.js-delete-checklist-item {{_ "delete"}}...
+      a.js-convert-checklist-item-to-card
+        i.fa.fa-copy
+        | {{_ 'convertChecklistItemToCardPopup-title'}}
 
 template(name="checklistItems")
   .checklist-items.js-checklist-items
@@ -93,9 +95,8 @@ template(name="checklistItems")
       +inlinedForm(autoclose=false classNames="js-add-checklist-item" checklist = checklist)
         +addChecklistItemForm
       else
-        a.add-checklist-item.js-open-inlined-form
+        a.add-checklist-item.js-open-inlined-form(title="{{_ 'add-checklist-item'}}")
           i.fa.fa-plus
-          | {{_ 'add-checklist-item'}}...
 
 template(name='checklistItemDetail')
   .js-checklist-item.checklist-item(class="{{#if item.isFinished }}is-checked{{#if hideCheckedItems}} invisible{{/if}}{{/if}}")
@@ -112,3 +113,32 @@ template(name='checklistItemDetail')
       .item-title(class="{{#if item.isFinished }}is-checked{{/if}}")
         +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="boardsSwimlanesAndLists")
+  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}}
+
+  label {{_ 'swimlanes'}}:
+  select.js-select-swimlanes
+    each swimlanes
+      option(value="{{_id}}") {{title}}
+
+  label {{_ 'lists'}}:
+  select.js-select-lists
+    each aBoardLists
+      option(value="{{_id}}") {{title}}
+
+  .edit-controls.clearfix
+    button.primary.confirm.js-done {{_ 'done'}}

client/components/cards/checklists.js

@@ -1,3 +1,7 @@
+import Cards from '/models/cards';
+import Boards from '/models/boards';
+
+const subManager = new SubsManager();
 const { calculateIndexData, capitalize } = Utils;
 
 function initSorting(items) {
@@ -111,7 +115,7 @@ BlazeComponent.extendComponent({
         title,
         checklistId: checklist._id,
         cardId: checklist.cardId,
-        sort: checklist.itemCount(),
+        sort: Utils.calculateIndexData(checklist.lastItem()).base,
       });
     }
     // We keep the form opened, empty it.
@@ -206,6 +210,7 @@ BlazeComponent.extendComponent({
         '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,
@@ -215,6 +220,47 @@ BlazeComponent.extendComponent({
   },
 }).register('checklists');
 
+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('boardsSwimlanesAndLists');
+
 Template.checklists.helpers({
   hideCheckedItems() {
     const currentUser = Meteor.user();

client/components/cards/checklists.styl

@@ -44,8 +44,8 @@ textarea.js-add-checklist-item, textarea.js-edit-checklist-item
 
   span.fa.checklist-handle
     padding-right: 20px
-    padding-top: 6px
-    float: right
+    padding-top: 3px
+    float: left
 
 
 .js-confirm-checklist-delete
@@ -159,7 +159,8 @@ textarea.js-add-checklist-item, textarea.js-edit-checklist-item
     padding-top: 2px
     padding-right: 10px;
 
-.js-delete-checklist-item
+.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

client/components/cards/labels.styl

@@ -44,9 +44,20 @@
     align-items: center
     justify-content: center
 
+.card-label-white
+  background-color: #ffffff
+  color: #000000 //Black text for better visibility
+  border: 1px solid #c0c0c0
+
+.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

client/components/cards/minicard.jade

@@ -37,6 +37,9 @@ template(name="minicard")
       if getArchived
         span.linked-icon.linked-archived.fa.fa-archive
       +viewer
+        if currentBoard.allowsCardNumber
+          span.card-number
+            | ##{getCardNumber}
         = getTitle
       if $eq 'subtext-with-full-path' currentBoard.presentParentTask
         .parent-subtext
@@ -77,6 +80,14 @@ template(name="minicard")
                 if $eq definition.type "currency"
                   +viewer
                     = formattedCurrencyCustomFieldValue(definition)
+                else if $eq definition.type "date"
+                  .date
+                    +minicardCustomFieldDate
+                else if $eq definition.type "checkbox"
+                  .materialCheckBox(class="{{#if value }}is-checked{{/if}}")
+                else if $eq definition.type "stringtemplate"
+                  +viewer
+                    = formattedStringtemplateCustomFieldValue(definition)
                 else
                   +viewer
                     = trueValue
@@ -85,13 +96,16 @@ template(name="minicard")
       .minicard-assignees.js-minicard-assignees
         each getAssignees
           +userAvatar(userId=this)
-        hr(class="assigneehr" title="{{_ 'assignee'}}")
 
     if getMembers
       .minicard-members.js-minicard-members
         each getMembers
           +userAvatar(userId=this)
 
+    if showCreator
+      .minicard-creator
+        +userAvatar(userId=this.userId noRemove=true)
+
     .badges
       unless currentUser.isNoComments
         if comments.count
@@ -110,6 +124,11 @@ template(name="minicard")
           span.badge-text {{ voteCountPositive }}
           span.badge-icon.fa.fa-thumbs-down(class="{{#if $eq voteState false}}text-red{{/if}}")
           span.badge-text {{ voteCountNegative }}
+      if getPokerQuestion
+        .badge.badge-state-image-only(title=getPokerQuestion)
+          span.badge-icon.fa.fa-check(class="{{#if pokerState}}text-green{{/if}}")
+          if expiredPoker
+            span.badge-text {{ getPokerEstimation }}
       if attachments.count
         .badge
           span.badge-icon.fa.fa-paperclip
@@ -118,3 +137,12 @@ template(name="minicard")
         .badge(class="{{#if checklistFinished}}is-finished{{/if}}")
           span.badge-icon.fa.fa-check-square-o
           span.badge-text.check-list-text {{checklistFinishedCount}}/{{checklistItemCount}}
+      if allSubtasks.count
+        .badge
+          span.badge-icon.fa.fa-sitemap
+          span.badge-text.check-list-text {{subtasksFinishedCount}}/{{allSubtasksCount}}
+          //{{subtasksFinishedCount}}/{{subtasksCount}} does not work because when a subtaks is archived, the count goes down
+      if currentBoard.allowsCardSortingByNumber
+        .badge
+          span.badge-icon.fa.fa-sort
+          span.badge-text {{ sort }}

client/components/cards/minicard.js

@@ -21,6 +21,34 @@ BlazeComponent.extendComponent({
     }).format(customFieldTrueValue);
   },
 
+  formattedStringtemplateCustomFieldValue(definition) {
+    const customField = this.data()
+      .customFieldsWD()
+      .find(f => f._id === definition._id);
+
+    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 ?? '');
+  },
+
+  showCreator() {
+    if (this.data().board()) {
+      return (
+        this.data().board.allowsCreator === null ||
+        this.data().board().allowsCreator === undefined ||
+        this.data().board().allowsCreator
+      );
+      // return this.data().board().allowsCreator;
+    }
+    return false;
+  },
+
   events() {
     return [
       {

client/components/cards/minicard.styl

@@ -89,7 +89,7 @@
       border-radius: 2px
       margin-right: 3px
       margin-bottom: 3px
-      
+
   .minicard-custom-fields
     display:block;
   .minicard-custom-field
@@ -114,6 +114,10 @@
       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
@@ -163,19 +167,18 @@
         line-height: 12px
 
   .minicard-members,
-  .minicard-assignees
+  .minicard-assignees,
+  .minicard-creator
     float: right
     margin-left: 5px
-
-    .assigneehr
-      border-top: 1px solid red
-      margin-bottom: 4px
+    margin-bottom: 4px
 
     .member
       float: right
       border-radius: 50%
       height: 28px
       width: @height
+      margin-bottom: 4px
 
     .assignee
       float: right
@@ -186,6 +189,12 @@
     + .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

client/components/cards/resultCard.jade

@@ -1,23 +1,44 @@
 template(name="resultCard")
   .result-card-wrapper
-    a.minicard-wrapper.card-title(href=card.absoluteUrl)
+    a.minicard-wrapper.card-title(href=originRelativeUrl)
       +minicard(this)
       //= card.title
     ul.result-card-context-list
       li.result-card-context(title="{{_ 'board'}}")
-        +viewer
-          = getBoard.title
+        .result-card-block-wrapper
+          if boardId
+            +viewer
+              = getBoard.title
+          else
+            .broken-cards-null
+              | NULL
+        if getBoard.archived
+          i.fa.fa-archive
       li.result-card-context.result-card-context-separator
         = ' '
         | {{_ 'context-separator'}}
         = ' '
       li.result-card-context(title="{{_ 'swimlane'}}")
-        +viewer
-          = getSwimlane.title
+        .result-card-block-wrapper
+          if swimlaneId
+            +viewer
+              = getSwimlane.title
+          else
+            .broken-cards-null
+              | NULL
+        if getSwimlane.archived
+          i.fa.fa-archive
       li.result-card-context.result-card-context-separator
         = ' '
         | {{_ 'context-separator'}}
         = ' '
       li.result-card-context(title="{{_ 'list'}}")
-        +viewer
-          = getList.title
+        .result-card-block-wrapper
+          if listId
+            +viewer
+              = getList.title
+          else
+            .broken-cards-null
+              | NULL
+        if getList.archived
+          i.fa.fa-archive

client/components/cards/resultCard.styl

@@ -19,3 +19,6 @@
 
 .result-card-context-list
   margin-bottom: 0.7rem
+
+.result-card-block-wrapper
+  display: inline-block

client/components/cards/subtasks.jade

@@ -15,9 +15,8 @@ template(name="subtasks")
     +inlinedForm(autoclose=false classNames="js-add-subtask" cardId = cardId)
       +addSubtaskItemForm
     else
-      a.js-open-inlined-form
+      a.js-open-inlined-form(title="{{_ 'add-subtask'}}")
         i.fa.fa-plus
-        | {{_ 'add-subtask'}}...
 
 template(name="subtaskDetail")
   .js-subtasks.subtask

client/components/forms/forms.styl

@@ -86,7 +86,7 @@ select
   margin-bottom: 8px
 
   &.inline
-  	width: 100%
+    width: 100%
 
 option[disabled]
   color: #8c8c8c
@@ -242,11 +242,11 @@ textarea
     margin: 3px 4px
 
 // Material Design checkboxes
-[type="checkbox"]:not(:checked),
-[type="checkbox"]:checked
-  position: absolute
-  left: -9999px
-  visibility: hidden
+  [type="checkbox"]:not(:checked),
+  [type="checkbox"]:checked
+    position: absolute
+    left: -9999px
+    visibility: hidden
 
 .materialCheckBox
   position: relative

client/components/import/import.jade

@@ -13,38 +13,43 @@ template(name="import")
 template(name="importTextarea")
   form
     p: label(for='import-textarea') {{_ instruction}} {{_ 'import-board-instruction-about-errors'}}
-    textarea.js-import-json(placeholder="{{_ importPlaceHolder}}" autofocus)
+    textarea.js-import-json(id='import-textarea' placeholder="{{_ importPlaceHolder}}" autofocus)
       | {{jsonText}}
     input.primary.wide(type="submit" value="{{_ 'import'}}")
 
 template(name="importMapMembers")
   h2 {{_ 'import-map-members'}}
-  .map-members
-    p {{_ 'import-members-map'}}
-    .mapping-list
-      each members
-        a.mapping-item.js-select-member(class="{{#if wekanId}}filled{{/if}}")
-          .profile-source
-            .full-name= fullName
-            .username
-              | ({{username}})
-          .wekan
-            if wekanId
-              +userAvatar(userId=wekanId)
-            else
-              a.member.add-member
-                i.fa.fa-plus
-      //-
-        Due to the way the flewbox layout is working, we need to set some
-        invisible items so that the last row items have a consistent width.
-        See http://jsfiddle.net/Ln4h3c4n/ for an minimal example of the issue.
-      .mapping-item.ghost-item
-      .mapping-item.ghost-item
-      .mapping-item.ghost-item
-      .mapping-item.ghost-item
-      .mapping-item.ghost-item
-    form
-      input.primary.wide(type="submit" value="{{_ 'done'}}")
+  if usersLoaded.get
+    .map-members
+      p {{_ 'import-members-map'}}
+      p.import-members-map-note
+        | {{_ 'import-members-map-note' }}
+      .mapping-list
+        each members
+          a.mapping-item.js-select-member(class="{{#if wekanId}}filled{{/if}}")
+            .profile-source
+              .full-name= fullName
+              .username
+                | ({{username}})
+            .wekan
+              if wekanId
+                +userAvatar(userId=wekanId)
+              else
+                a.member.add-member
+                  i.fa.fa-plus
+        //-
+          Due to the way the flewbox layout is working, we need to set some
+          invisible items so that the last row items have a consistent width.
+          See http://jsfiddle.net/Ln4h3c4n/ for an minimal example of the issue.
+        .mapping-item.ghost-item
+        .mapping-item.ghost-item
+        .mapping-item.ghost-item
+        .mapping-item.ghost-item
+        .mapping-item.ghost-item
+      form
+        input.primary.wide(type="submit" value="{{_ 'done'}}")
+  else
+    +spinner
 
 template(name="importMapMembersAddPopup")
   .select-member

client/components/import/import.js

@@ -150,14 +150,42 @@ BlazeComponent.extendComponent({
 
 BlazeComponent.extendComponent({
   onCreated() {
+    this.usersLoaded = new ReactiveVar(false);
+
     this.autorun(() => {
-      this.parentComponent()
-        .membersToMap.get()
-        .forEach(({ wekanId }) => {
-          if (wekanId) {
-            this.subscribe('user-miniprofile', wekanId);
+      const handle = this.subscribe(
+        'user-miniprofile',
+        this.members().map(member => {
+          return member.username;
+        }),
+      );
+      Tracker.nonreactive(() => {
+        Tracker.autorun(() => {
+          if (
+            handle.ready() &&
+            !this.usersLoaded.get() &&
+            this.members().length
+          ) {
+            this._refreshMembers(
+              this.members().map(member => {
+                if (!member.wekanId) {
+                  let user = Users.findOne({ username: member.username });
+                  if (!user) {
+                    user = Users.findOne({ importUsernames: member.username });
+                  }
+                  if (user) {
+                    // eslint-disable-next-line no-console
+                    // console.log('found username:', user.username);
+                    member.wekanId = user._id;
+                  }
+                }
+                return member;
+              }),
+            );
           }
+          this.usersLoaded.set(handle.ready());
         });
+      });
     });
   },
 

client/components/import/import.styl

@@ -47,3 +47,7 @@
 
 a.show-mapping
   text-decoration underline
+
+.import-members-map-note
+  font-size: 90%
+  font-weight: bold

client/components/lists/list.styl

@@ -180,7 +180,8 @@
     border-bottom: 1px solid darken(white, 20%)
 
   .list
-    display: block
+    display: contents
+    flex-basis: auto
     width: 100%
     border-left: 0px
     &:first-child

client/components/lists/listBody.jade

@@ -5,7 +5,7 @@ template(name="listBody")
         +inlinedForm(autoclose=false position="top")
           +addCardForm(listId=_id position="top")
       each (cardsWithLimit (idOrNull ../../_id))
-        a.minicard-wrapper.js-minicard(href=absoluteUrl
+        a.minicard-wrapper.js-minicard(href=originRelativeUrl
           class="{{#if cardIsSelected}}is-selected{{/if}}"
           class="{{#if MultiSelection.isSelected _id}}is-checked{{/if}}")
           if MultiSelection.isActive
@@ -19,19 +19,14 @@ template(name="listBody")
         +inlinedForm(autoclose=false position="bottom")
           +addCardForm(listId=_id position="bottom")
         else
-          a.open-minicard-composer.js-card-composer.js-open-inlined-form
+          a.open-minicard-composer.js-card-composer.js-open-inlined-form(title="{{_ 'add-card-to-bottom-of-list'}}")
             i.fa.fa-plus
-            | {{_ 'add-card'}}
 
 template(name="spinnerList")
-  .sk-spinner.sk-spinner-wave.sk-spinner-list(
-    class=currentBoard.colorClass
+  .sk-spinner.sk-spinner-list(
+    class="{{currentBoard.colorClass}} {{getSkSpinnerName}}"
     id="showMoreResults")
-    .sk-rect1
-    .sk-rect2
-    .sk-rect3
-    .sk-rect4
-    .sk-rect5
+    +spinnerRaw
 
 template(name="addCardForm")
   .minicard.minicard-composer.js-composer

client/components/lists/listBody.js

@@ -1,3 +1,5 @@
+import { Spinner } from '/client/lib/spinner';
+
 const subManager = new SubsManager();
 const InfiniteScrollIter = 10;
 
@@ -79,7 +81,9 @@ BlazeComponent.extendComponent({
         Utils.boardView() === 'board-view-cal' ||
         !Utils.boardView()
       )
-        swimlaneId = board.getDefaultSwimline()._id;
+      swimlaneId = board.getDefaultSwimline()._id;
+
+      const nextCardNumber = board.getNextCardNumber();
 
       const _id = Cards.insert({
         title,
@@ -91,6 +95,7 @@ BlazeComponent.extendComponent({
         sort: sortIndex,
         swimlaneId,
         type: cardType,
+        cardNumber: nextCardNumber,
         linkedId,
       });
 
@@ -116,8 +121,6 @@ BlazeComponent.extendComponent({
       if (position === 'bottom') {
         this.scrollToBottom();
       }
-
-      formComponent.reset();
     }
   },
 
@@ -168,13 +171,16 @@ BlazeComponent.extendComponent({
 
   cardsWithLimit(swimlaneId) {
     const limit = this.cardlimit.get();
+    const defaultSort = { sort: 1 };
+    const sortBy = Session.get('sortBy') ? Session.get('sortBy') : defaultSort;
     const selector = {
       listId: this.currentData()._id,
       archived: false,
     };
     if (swimlaneId) selector.swimlaneId = swimlaneId;
     return Cards.find(Filter.mongoSelector(selector), {
-      sort: ['sort'],
+      // sort: ['sort'],
+      sort: sortBy,
       limit,
     });
   },
@@ -238,8 +244,8 @@ BlazeComponent.extendComponent({
       Boards.findOne(currentBoardId)
         .customFields()
         .fetch(),
-      function(field) {
-        if (field.automaticallyOnCard)
+      function (field) {
+        if (field.automaticallyOnCard || field.alwaysOnCard)
           arr.push({ _id: field._id, value: null });
       },
     );
@@ -549,7 +555,7 @@ BlazeComponent.extendComponent({
       board = Boards.findOne((Meteor.user().profile || {}).templatesBoardId);
     } else {
       // Prefetch first non-current board id
-      board = Boards.findOne({
+      board = Boards.find({
         archived: false,
         'members.userId': Meteor.userId(),
         _id: {
@@ -675,12 +681,18 @@ BlazeComponent.extendComponent({
             element.type = 'swimlane';
             _id = element.copy(this.boardId);
           } else if (this.isBoardTemplateSearch) {
-            board = Boards.findOne(element.linkedId);
-            board.sort = Boards.find({ archived: false }).count();
-            board.type = 'board';
-            board.title = element.title;
-            delete board.slug;
-            _id = board.copy();
+            Meteor.call(
+              'copyBoard',
+              element.linkedId,
+              {
+                sort: Boards.find({ archived: false }).count(),
+                type: 'board',
+                title: element.title,
+              },
+              (err, data) => {
+                _id = data;
+              },
+            );
           }
           Popup.close();
         },
@@ -689,7 +701,7 @@ BlazeComponent.extendComponent({
   },
 }).register('searchElementPopup');
 
-BlazeComponent.extendComponent({
+(class extends Spinner {
   onCreated() {
     this.cardlimit = this.parentComponent().cardlimit;
 
@@ -717,7 +729,7 @@ BlazeComponent.extendComponent({
         .parentComponent()
         .data()._id;
     }
-  },
+  }
 
   onRendered() {
     this.spinner = this.find('.sk-spinner-list');
@@ -732,21 +744,18 @@ BlazeComponent.extendComponent({
     );
 
     this.updateList();
-  },
+  }
 
   onDestroyed() {
     $(this.container).off(`scroll.spinner_${this.swimlaneId}_${this.listId}`);
     $(window).off(`resize.spinner_${this.swimlaneId}_${this.listId}`);
-  },
+  }
 
-  updateList() {
-    // Use fallback when requestIdleCallback is not available on iOS and Safari
-    // https://www.afasterweb.com/2017/11/20/utilizing-idle-moments/
-    checkIdleTime =
-      window.requestIdleCallback ||
-      function(handler) {
+  checkIdleTime() {
+    return window.requestIdleCallback ||
+      function (handler) {
         const startTime = Date.now();
-        return setTimeout(function() {
+        return setTimeout(function () {
           handler({
             didTimeout: false,
             timeRemaining() {
@@ -755,24 +764,38 @@ BlazeComponent.extendComponent({
           });
         }, 1);
       };
+  }
+
+  updateList() {
+    // Use fallback when requestIdleCallback is not available on iOS and Safari
+    // https://www.afasterweb.com/2017/11/20/utilizing-idle-moments/
 
     if (this.spinnerInView()) {
       this.cardlimit.set(this.cardlimit.get() + InfiniteScrollIter);
-      checkIdleTime(() => this.updateList());
+      this.checkIdleTime(() => this.updateList());
     }
-  },
+  }
 
   spinnerInView() {
-    const parentViewHeight = this.container.clientHeight;
-    const bottomViewPosition = this.container.scrollTop + parentViewHeight;
-
-    const threshold = this.spinner.offsetTop;
-
     // spinner deleted
     if (!this.spinner.offsetTop) {
       return false;
     }
 
-    return bottomViewPosition > threshold;
-  },
-}).register('spinnerList');
+    const parentViewHeight = this.container.clientHeight;
+    const bottomViewPosition = this.container.scrollTop + parentViewHeight;
+
+    let spinnerOffsetTop = this.spinner.offsetTop;
+
+    const addCard = $(this.container).find("a.open-minicard-composer").first()[0];
+    if (addCard !== undefined) {
+      spinnerOffsetTop -= addCard.clientHeight;
+    }
+
+    return bottomViewPosition > spinnerOffsetTop;
+  }
+
+  getSkSpinnerName() {
+    return "sk-spinner-" + super.getSpinnerName().toLowerCase();
+  }
+}.register('spinnerList'));

client/components/lists/listHeader.jade

@@ -15,7 +15,7 @@ template(name="listHeader")
           = title
         if wipLimit.enabled
          | (
-         span(class="{{#if reachedWipLimit}}highlight{{/if}}") {{cards.count}}
+         span(class="{{#if exceededWipLimit}}highlight{{/if}}") {{cards.count}}
          |/#{wipLimit.value})
 
         if showCardsCountForList cards.count
@@ -28,8 +28,8 @@ template(name="listHeader")
           div.list-header-menu
             unless currentUser.isCommentOnly
               if canSeeAddCard
-                a.js-add-card.fa.fa-plus.list-header-plus-icon
-              a.fa.fa-navicon.js-open-list-menu
+                a.js-add-card.fa.fa-plus.list-header-plus-icon(title="{{_ 'add-card-to-top-of-list'}}")
+              a.fa.fa-navicon.js-open-list-menu(title="{{_ 'listActionPopup-title'}}")
         else
           a.list-header-menu-icon.fa.fa-angle-right.js-select-list
           a.list-header-handle.handle.fa.fa-arrows.js-list-handle
@@ -41,8 +41,8 @@ template(name="listHeader")
             //if isBoardAdmin
             //  a.fa.js-list-star.list-header-plus-icon(class="fa-star{{#unless starred}}-o{{/unless}}")
             if canSeeAddCard
-              a.js-add-card.fa.fa-plus.list-header-plus-icon
-            a.fa.fa-navicon.js-open-list-menu
+              a.js-add-card.fa.fa-plus.list-header-plus-icon(title="{{_ 'add-card-to-top-of-list'}}")
+            a.fa.fa-navicon.js-open-list-menu(title="{{_ 'listActionPopup-title'}}")
           if currentUser.isBoardAdmin
             if showDesktopDragHandles
               a.list-header-handle.handle.fa.fa-arrows.js-list-handle

client/components/lists/listHeader.js

@@ -72,9 +72,17 @@ BlazeComponent.extendComponent({
     );
   },
 
+  exceededWipLimit() {
+    const list = Template.currentData();
+    return (
+      list.getWipLimit('enabled') &&
+      list.getWipLimit('value') < list.cards().count()
+    );
+  },
+
   showCardsCountForList(count) {
     const limit = this.limitToShowCardsCount();
-    return limit > 0 && count > limit;
+    return limit >= 0 && count >= limit;
   },
 
   events() {

client/components/main/brokenCards.jade

@@ -3,39 +3,15 @@ template(name="brokenCardsHeaderBar")
     | {{_ 'broken-cards'}}
 
 template(name="brokenCards")
-  .wrapper
-    .broken-cards-wrapper
-      each card in brokenCardsList
-        .broken-cards-card-wrapper
-          .broken-cards-card-title
-            = card.title
-          ul.broken-cards-context-list
-            li.broken-cards-context(title="{{_ 'board'}}")
-              if card.boardId
-                +viewer
-                  = card.getBoard.title
-              else
-                .broken-cards-null
-                  | NULL
-            li.broken-cards-context.broken-cards-context-separator
-              = ' '
-              | {{_ 'context-separator'}}
-              = ' '
-            li.broken-cards-context(title="{{_ 'swimlane'}}")
-              if card.swimlaneId
-                +viewer
-                  = card.getSwimlane.title
-              else
-                .broken-cards-null
-                  | NULL
-            li.broken-cards-context
-              = ' '
-              | {{_ 'context-separator'}}
-              = ' '
-            li.broken-cards-context(title="{{_ 'list'}}")
-              if card.listId
-                +viewer
-                  = card.getList.title
-              else
-                .broken-cards-null
-                  | NULL
+  if currentUser
+    if searching.get
+      +spinner
+    else if hasResults.get
+      .global-search-results-list-wrapper
+        if hasQueryErrors.get
+          div
+            each msg in errorMessages
+              span.global-search-error-messages
+                = msg
+        else
+          +resultsPaged(this)

client/components/main/brokenCards.js

@@ -1,3 +1,5 @@
+import { CardSearchPagedComponent } from '../../lib/cardSearch';
+
 BlazeComponent.extendComponent({}).register('brokenCardsHeaderBar');
 
 Template.brokenCards.helpers({
@@ -6,23 +8,11 @@ Template.brokenCards.helpers({
   },
 });
 
-BlazeComponent.extendComponent({
+class BrokenCardsComponent extends CardSearchPagedComponent {
   onCreated() {
-    Meteor.subscribe('setting');
-    Meteor.subscribe('brokenCards');
-  },
+    super.onCreated();
 
-  brokenCardsList() {
-    const selector = {
-      $or: [
-        { boardId: { $in: [null, ''] } },
-        { swimlaneId: { $in: [null, ''] } },
-        { listId: { $in: [null, ''] } },
-        { permission: 'public' },
-        { members: { $elemMatch: { userId: user._id, isActive: true } } },
-      ],
-    };
-
-    return Cards.find(selector);
-  },
-}).register('brokenCards');
+    Meteor.subscribe('brokenCards', this.sessionId);
+  }
+}
+BrokenCardsComponent.register('brokenCards');

client/components/main/dueCards.jade

@@ -22,33 +22,17 @@ template(name="dueCardsModalTitle")
 
 template(name="dueCards")
   if currentUser
-    if isPageReady.get
-      .wrapper
-        .due-cards-dueat-list-wrapper
-          each card in dueCardsList
-            .due-cards-card-wrapper
-              a.minicard-wrapper.card-title(href=card.absoluteUrl)
-                +minicard(card)
-              ul.due-cards-context-list
-                li.due-cards-context(title="{{_ 'board'}}")
-                  +viewer
-                    = card.getBoard.title
-                li.due-cards-context.due-cards-context-separator
-                  = ' '
-                  | {{_ 'context-separator'}}
-                  = ' '
-                li.due-cards-context(title="{{_ 'swimlane'}}")
-                  +viewer
-                    = card.getSwimlane.title
-                li.due-cards-context
-                  = ' '
-                  | {{_ 'context-separator'}}
-                  = ' '
-                li.due-cards-context(title="{{_ 'list'}}")
-                  +viewer
-                    = card.getList.title
-    else
+    if searching.get
       +spinner
+    else if hasResults.get
+      .global-search-results-list-wrapper
+        if hasQueryErrors.get
+          div
+            each msg in errorMessages
+              span.global-search-error-messages
+                = msg
+        else
+          +resultsPaged(this)
 
 template(name="dueCardsViewChangePopup")
   if currentUser

client/components/main/dueCards.js

@@ -1,4 +1,14 @@
-const subManager = new SubsManager();
+import { CardSearchPagedComponent } from '../../lib/cardSearch';
+import {
+  OPERATOR_HAS,
+  OPERATOR_SORT,
+  OPERATOR_USER,
+  ORDER_ASCENDING,
+  PREDICATE_DUE_AT,
+} from '../../../config/search-const';
+import { QueryParams } from '../../../config/query-classes';
+
+// const subManager = new SubsManager();
 
 BlazeComponent.extendComponent({
   dueCardsView() {
@@ -40,106 +50,51 @@ BlazeComponent.extendComponent({
   },
 }).register('dueCardsViewChangePopup');
 
-BlazeComponent.extendComponent({
+class DueCardsComponent extends CardSearchPagedComponent {
   onCreated() {
-    this.isPageReady = new ReactiveVar(false);
+    super.onCreated();
 
-    this.autorun(() => {
-      const handle = subManager.subscribe(
-        'dueCards',
-        Utils.dueCardsView() === 'all',
-      );
-      Tracker.nonreactive(() => {
-        Tracker.autorun(() => {
-          this.isPageReady.set(handle.ready());
-        });
-      });
+    const queryParams = new QueryParams();
+    queryParams.addPredicate(OPERATOR_HAS, {
+      field: PREDICATE_DUE_AT,
+      exists: true,
     });
-    Meteor.subscribe('setting');
-  },
+    // queryParams[OPERATOR_LIMIT] = 5;
+    queryParams.addPredicate(OPERATOR_SORT, {
+      name: PREDICATE_DUE_AT,
+      order: ORDER_ASCENDING,
+    });
+
+    if (Utils.dueCardsView() !== 'all') {
+      queryParams.addPredicate(OPERATOR_USER, Meteor.user().username);
+    }
+
+    this.runGlobalSearch(queryParams);
+  }
 
   dueCardsView() {
     // eslint-disable-next-line no-console
-    console.log('sort:', Utils.dueCardsView());
+    //console.log('sort:', Utils.dueCardsView());
     return Utils.dueCardsView();
-  },
+  }
 
   sortByBoard() {
     return this.dueCardsView() === 'board';
-  },
+  }
 
   dueCardsList() {
-    const allUsers = Utils.dueCardsView() === 'all';
-
-    const user = Meteor.user();
-
-    const archivedBoards = [];
-    Boards.find({ archived: true }).forEach(board => {
-      archivedBoards.push(board._id);
-    });
-
-    const permiitedBoards = [];
-    let selector = {
-      archived: false,
-    };
-    // for every user including admin allow her to see cards only from public boards
-    // or those where she is a member
-    //if (!user.isAdmin) {
-    selector.$or = [
-      { permission: 'public' },
-      { members: { $elemMatch: { userId: user._id, isActive: true } } },
-    ];
-    //}
-    Boards.find(selector).forEach(board => {
-      permiitedBoards.push(board._id);
-    });
-
-    const archivedSwimlanes = [];
-    Swimlanes.find({ archived: true }).forEach(swimlane => {
-      archivedSwimlanes.push(swimlane._id);
-    });
-
-    const archivedLists = [];
-    Lists.find({ archived: true }).forEach(list => {
-      archivedLists.push(list._id);
-    });
-
-    selector = {
-      archived: false,
-      boardId: {
-        $nin: archivedBoards,
-        $in: permiitedBoards,
-      },
-      swimlaneId: { $nin: archivedSwimlanes },
-      listId: { $nin: archivedLists },
-      dueAt: { $ne: null },
-      endAt: null,
-    };
-
-    if (!allUsers) {
-      selector.$or = [{ members: user._id }, { assignees: user._id }];
+    const results = this.getResults();
+    console.log('results:', results);
+    const cards = [];
+    if (results) {
+      results.forEach(card => {
+        cards.push(card);
+      });
     }
 
-    const cards = [];
-
-    // eslint-disable-next-line no-console
-    // console.log('cards selector:', selector);
-    Cards.find(selector).forEach(card => {
-      cards.push(card);
-      // eslint-disable-next-line no-console
-      // console.log(
-      //   'board:',
-      //   card.board(),
-      //   'swimlane:',
-      //   card.swimlane(),
-      //   'list:',
-      //   card.list(),
-      // );
-    });
-
     cards.sort((a, b) => {
-      const x = a.dueAt === null ? Date('2100-12-31') : a.dueAt;
-      const y = b.dueAt === null ? Date('2100-12-31') : b.dueAt;
+      const x = a.dueAt === null ? new Date('2100-12-31') : a.dueAt;
+      const y = b.dueAt === null ? new Date('2100-12-31') : b.dueAt;
 
       if (x > y) return 1;
       else if (x < y) return -1;
@@ -148,7 +103,9 @@ BlazeComponent.extendComponent({
     });
 
     // eslint-disable-next-line no-console
-    // console.log('cards:', cards);
+    console.log('cards:', cards);
     return cards;
-  },
-}).register('dueCards');
+  }
+}
+
+DueCardsComponent.register('dueCards');

client/components/main/dueCards.styl

@@ -1,69 +1,4 @@
-.due-cards-board-wrapper
-  border-radius: 8px
-  //padding: 0.5rem
-  min-width: 400px
-  border-width: 8px
-  border-color: grey
-  border-style: solid
-  margin-bottom: 2rem
-  margin-right: auto
-  margin-left: auto
-
-.due-cards-board-title
-  font-size: 1.4rem
-  font-weight: bold
-  padding: 0.5rem
-  background-color: grey
-  color: white
-
-.due-cards-swimlane-title
-  font-size: 1.1rem
-  font-weight: bold
-  padding: 0.5rem
-  padding-bottom: 0.4rem
-  margin-top: 0
-  margin-bottom: 0.5rem
-  //border-top: black 1px solid
-  //border-bottom: black 1px solid
-  text-align: center
-
-.swimlane-default-color
-  background-color: lightgrey
-
-.due-cards-list-title
-  font-weight: bold
-  font-size: 1.1rem
-  //padding-bottom: 0
-  //margin-bottom: 0
-  text-align: center
-  margin-bottom: 0.7rem
-
-.due-cards-list-wrapper
-  margin: 1rem
-  border-radius: 5px
-  padding: 1.5rem
-  padding-top: 0.75rem
-  display: inline-block
-  min-width: 250px
-  max-width: 350px
-
-.due-cards-card-wrapper
-  margin-top: 0
-  margin-bottom: 10px
-
 .due-cards-dueat-list-wrapper
   max-width: 500px
   margin-right: auto
   margin-left: auto
-
-.due-cards-field-name
-  font-weight: bold
-
-.due-cards-context
-  display: inline-block
-
-.due-cards-context-separator
-  font-weight: bold
-
-.due-cards-context-list
-  margin-bottom: 0.7rem

client/components/main/editor.js

@@ -1,3 +1,9 @@
+const specialHandles = [
+  {userId: 'board_members', username: 'board_members'},
+  {userId: 'card_members', username: 'card_members'}
+];
+const specialHandleNames = specialHandles.map(m => m.username);
+
 Template.editor.onRendered(() => {
   const textareaSelector = 'textarea';
   const mentions = [
@@ -7,13 +13,14 @@ Template.editor.onRendered(() => {
       search(term, callback) {
         const currentBoard = Boards.findOne(Session.get('currentBoard'));
         callback(
+          _.union(
           currentBoard
             .activeMembers()
             .map(member => {
               const username = Users.findOne(member.userId).username;
               return username.includes(term) ? username : null;
             })
-            .filter(Boolean),
+            .filter(Boolean), [...specialHandleNames])
         );
       },
       template(value) {
@@ -49,8 +56,8 @@ Template.editor.onRendered(() => {
           ['para', ['ul', 'ol', 'paragraph']],
           ['table', ['table']],
           //['insert', ['link', 'picture', 'video']], // iframe tag will be sanitized TODO if iframe[class=note-video-clip] can be added into safe list, insert video can be enabled
-          //['insert', ['link', 'picture']], // modal popup has issue somehow :(
-          ['view', ['fullscreen', 'help']],
+          ['insert', ['link']], //, 'picture']], // modal popup has issue somehow :(
+          ['view', ['fullscreen', 'codeview', 'help']],
         ];
     const cleanPastedHTML = function(input) {
       const badTags = [
@@ -145,6 +152,7 @@ Template.editor.onRendered(() => {
                 const MAX_IMAGE_PIXEL = Utils.MAX_IMAGE_PIXEL;
                 const COMPRESS_RATIO = Utils.IMAGE_COMPRESS_RATIO;
                 const insertImage = src => {
+                  // process all image upload types to the description/comment window
                   const img = document.createElement('img');
                   img.src = src;
                   img.setAttribute('width', '100%');
@@ -210,7 +218,16 @@ Template.editor.onRendered(() => {
                 }
               }
             },
-            onPaste() {
+            onPaste(e) {
+              var clipboardData = e.clipboardData;
+              var pastedData = clipboardData.getData('Text');
+
+              //if pasted data is an image, exit
+              if (!pastedData.length) {
+                e.preventDefault();
+                return;
+              }
+
               // clear up unwanted tag info when user pasted in text
               const thisNote = this;
               const updatePastedText = function(object) {
@@ -234,17 +251,17 @@ Template.editor.onRendered(() => {
             },
           },
           dialogsInBody: true,
-          disableDragAndDrop: true,
+          spellCheck: true,
+          disableGrammar: false,
+          disableDragAndDrop: false,
           toolbar,
           popover: {
             image: [
-              [
-                'image',
-                ['resizeFull', 'resizeHalf', 'resizeQuarter', 'resizeNone'],
-              ],
+              ['imagesize', ['imageSize100', 'imageSize50', 'imageSize25']],
               ['float', ['floatLeft', 'floatRight', 'floatNone']],
               ['remove', ['removeMedia']],
             ],
+            link: [['link', ['linkDialogShow', 'unlink']]],
             table: [
               ['add', ['addRowDown', 'addRowUp', 'addColLeft', 'addColRight']],
               ['delete', ['deleteRow', 'deleteCol', 'deleteTable']],
@@ -263,10 +280,12 @@ Template.editor.onRendered(() => {
   }
 });
 
-import sanitizeXss from 'xss';
+import DOMPurify from 'dompurify';
 
 // Additional  safeAttrValue function to allow for other specific protocols
 // See https://github.com/leizongmin/js-xss/issues/52#issuecomment-241354114
+
+/*
 function mySafeAttrValue(tag, name, value, cssFilter) {
   // only when the tag is 'a' and attribute is 'href'
   // then use your custom function
@@ -278,6 +297,8 @@ function mySafeAttrValue(tag, name, value, cssFilter) {
       /^aodroplink:/gi.test(value) ||
       /^onenote:/gi.test(value) ||
       /^file:/gi.test(value) ||
+      /^abasurl:/gi.test(value) ||
+      /^conisio:/gi.test(value) ||
       /^mailspring:/gi.test(value)
     ) {
       return value;
@@ -290,6 +311,7 @@ function mySafeAttrValue(tag, name, value, cssFilter) {
     return sanitizeXss.safeAttrValue(tag, name, value, cssFilter);
   }
 }
+*/
 
 // XXX I believe we should compute a HTML rendered field on the server that
 // would handle markdown and user mentions. We can simply have two
@@ -305,14 +327,16 @@ Blaze.Template.registerHelper(
     let content = Blaze.toHTML(view.templateContentBlock);
     const currentBoard = Boards.findOne(Session.get('currentBoard'));
     if (!currentBoard)
-      return HTML.Raw(sanitizeXss(content, { safeAttrValue: mySafeAttrValue }));
-    const knowedUsers = currentBoard.members.map(member => {
+      return HTML.Raw(
+        DOMPurify.sanitize(content, { ALLOW_UNKNOWN_PROTOCOLS: true }),
+      );
+    const knowedUsers = _.union(currentBoard.members.map(member => {
       const u = Users.findOne(member.userId);
       if (u) {
         member.username = u.username;
       }
       return member;
-    });
+    }), [...specialHandles]);
     const mentionRegex = /\B@([\w.]*)/gi;
 
     let currentMention;
@@ -349,7 +373,9 @@ Blaze.Template.registerHelper(
       content = content.replace(fullMention, Blaze.toHTML(link));
     }
 
-    return HTML.Raw(sanitizeXss(content, { safeAttrValue: mySafeAttrValue }));
+    return HTML.Raw(
+      DOMPurify.sanitize(content, { ALLOW_UNKNOWN_PROTOCOLS: true }),
+    );
   }),
 );
 

client/components/main/globalSearch.jade

@@ -10,73 +10,77 @@ template(name="globalSearchModalTitle")
       i.fa.fa-keyboard-o
       | {{_ 'globalSearch-title'}}
 
+template(name="resultsPaged")
+  if resultsHeading.get
+    h1
+      = resultsHeading.get
+      a.fa.fa-link(title="{{_ 'link-to-search' }}" href="{{ getSearchHref }}")
+  each card in results.get
+    +resultCard(card)
+  table.global-search-footer
+    tr
+      td.global-search-previous-page
+        if hasPreviousPage.get
+          button.js-previous-page
+            | {{_ 'previous-page' }}
+      td.global-search-next-page(align="right")
+        if hasNextPage.get
+          button.js-next-page
+            | {{_ 'next-page' }}
+
 template(name="globalSearch")
   if currentUser
     .wrapper
-      form.global-search-instructions.js-search-query-form
-        input.global-search-query-input(type="text" name="searchQuery" placeholder="{{_ 'search-example'}}" autofocus dir="auto")
+      form.global-search-page.js-search-query-form
+        input.global-search-query-input(
+          style="{# if hasResults.get #}display: inline-block;{#/if#}"
+          id="global-search-input"
+          type="text"
+          name="searchQuery"
+          placeholder="{{_ 'search-example'}}"
+          value="{{ query.get }}"
+          autofocus dir="auto"
+        )
+        a.js-new-search.fa.fa-eraser
       if searching.get
         +spinner
       else if hasResults.get
-        .global-search-dueat-list-wrapper
-          h1
-            if $eq resultsCount.get 0
-              | {{_ 'no-cards-found' }}
-            else if $eq resultsCount.get 1
-              | {{_ 'one-card-found' }}
-            else if $eq resultsCount.get totalHits.get
-              | {{_ 'n-cards-found' resultsCount.get }}
-            else
-              | {{_ 'n-n-of-n-cards-found' 1 resultsCount.get totalHits.get }}
-          if queryErrors.get
-            div
+        .global-search-results-list-wrapper
+          if hasQueryErrors.get
+            ul
               each msg in errorMessages
-                span.global-search-error-messages
-                  | {{_ msg.tag msg.value }}
-          each card in results
-            +resultCard(card)
+                li.global-search-error-messages
+                  = msg
+          +resultsPaged(this)
+      else if serverError.get
+        .global-search-page
+          .global-search-help
+            h1 {{_ 'server-error' }}
+            +viewer
+              | {{_ 'server-error-troubleshooting' }}
       else
-        .global-search-instructions
-          h1 Search Operators
-          +viewer
-            = 'Searches can include operators to refine the search.  Operators are specified by writing the operator'
-            = 'name and value separated by a colon.  For example, an operator specification of `list:Blocked` would limit the search'
-            = 'to cards that are contained in a list named *Blocked*.  If the value contains spaces or special characters'
-            = 'it must be enclosed in quotation marks (e.g. `list:"To Review"`).\n'
-            = 'Available operators are:\n'
-            = '* `board:title` - cards in boards matching the specified title\n'
-            = '* `list:title` - cards in lists matching the specified title\n'
-            = '* `swimlane:title` - cards in swimlanes matching the specified title\n'
-            = '* `label:color` - cards that have a label matching the given color\n'
-            = '* `label:name` - cards that have a label matching the given name\n'
-            = '* `user:username` - cards where the specified user is a member or assignee\n'
-            = '* `@username` - shorthand for `user:username`\n'
-            = '* `#label` - shorthand for `label:color-or-name`\n'
-            = '## Notes\n'
-            = '*  Multiple operators may be specified.\n'
-            = '*  Similar operators are *OR*ed together.  Cards that match any of the conditions will be returned.\n'
-            = '    `list:Available list:Blocked` would return cards contained in any list named *Blocked* or *Available*.\n'
-            = '*  Differing operators are *AND*ed together.  Only cards that match all of the differing operators are returned.\n'
-            = '`list:Available label:red` returns only cards in the list *Available* with a *red* label.\n'
-            = '* Text searches are case insensitive.\n'
-
-template(name="globalSearchViewChangePopup")
-  if currentUser
-    ul.pop-over-list
-      li
-        with "globalSearchViewChange-choice-me"
-          a.js-global-search-view-me
-            i.fa.fa-user.colorful
-            | {{_ 'globalSearchViewChange-choice-me'}}
-            if $eq Utils.globalSearchView "me"
-              i.fa.fa-check
-      li
-        with "globalSearchViewChange-choice-all"
-          a.js-global-search-view-all
-            i.fa.fa-users.colorful
-            | {{_ 'globalSearchViewChange-choice-all'}}
-            span.sub-name
-              +viewer
-                | {{_ 'globalSearchViewChange-choice-all-description' }}
-            if $eq Utils.globalSearchView "all"
-              i.fa.fa-check
+        .global-search-page
+          .global-search-help
+            h2 {{_ 'boards' }}
+            .lists-wrapper
+              each title in myBoardNames.get
+                span.card-label.list-title.js-board-title
+                  = title
+            h2 {{_ 'lists' }}
+            .lists-wrapper
+              each title in myLists.get
+                span.card-label.list-title.js-list-title
+                  = title
+            h2 {{_ 'label-colors' }}
+            .palette-colors: each label in labelColors
+              span.card-label.palette-color.js-label-color(class="card-label-{{label.color}}")
+                = label.name
+            if myLabelNames.get.length
+              h2 {{_ 'label-names' }}
+              .lists-wrapper
+                each name in myLabelNames.get
+                  span.card-label.list-title.js-label-name
+                    = name
+          .global-search-instructions
+            +viewer
+              = searchInstructions

client/components/main/globalSearch.js

@@ -1,4 +1,8 @@
-const subManager = new SubsManager();
+import { CardSearchPagedComponent } from '../../lib/cardSearch';
+import Boards from '../../../models/boards';
+import { Query, QueryErrors } from '../../../config/query-classes';
+
+// const subManager = new SubsManager();
 
 BlazeComponent.extendComponent({
   events() {
@@ -16,186 +20,248 @@ Template.globalSearch.helpers({
   },
 });
 
-BlazeComponent.extendComponent({
-  events() {
-    return [
-      {
-        'click .js-due-cards-view-me'() {
-          Utils.setDueCardsView('me');
-          Popup.close();
-        },
-
-        'click .js-due-cards-view-all'() {
-          Utils.setDueCardsView('all');
-          Popup.close();
-        },
-      },
-    ];
-  },
-}).register('globalSearchViewChangePopup');
-
-BlazeComponent.extendComponent({
+class GlobalSearchComponent extends CardSearchPagedComponent {
   onCreated() {
-    this.isPageReady = new ReactiveVar(true);
-    this.searching = new ReactiveVar(false);
-    this.hasResults = new ReactiveVar(false);
-    this.query = new ReactiveVar('');
+    super.onCreated();
+    this.myLists = new ReactiveVar([]);
+    this.myLabelNames = new ReactiveVar([]);
+    this.myBoardNames = new ReactiveVar([]);
+    this.parsingErrors = new QueryErrors();
     this.queryParams = null;
-    this.resultsCount = new ReactiveVar(0);
-    this.totalHits = new ReactiveVar(0);
-    this.queryErrors = new ReactiveVar(null);
-    Meteor.subscribe('setting');
-  },
 
-  results() {
-    if (this.queryParams) {
-      const results = Cards.globalSearch(this.queryParams);
-      // eslint-disable-next-line no-console
-      // console.log('user:', Meteor.user());
-      // eslint-disable-next-line no-console
-      // console.log('user:', Meteor.user().sessionData);
-      // console.log('errors:', results.errors);
-      this.totalHits.set(Meteor.user().sessionData.totalHits);
-      this.resultsCount.set(results.cards.count());
-      this.queryErrors.set(results.errors);
-      return results.cards;
+    Meteor.call('myLists', (err, data) => {
+      if (!err) {
+        this.myLists.set(data);
+      }
+    });
+
+    Meteor.call('myLabelNames', (err, data) => {
+      if (!err) {
+        this.myLabelNames.set(data);
+      }
+    });
+
+    Meteor.call('myBoardNames', (err, data) => {
+      if (!err) {
+        this.myBoardNames.set(data);
+      }
+    });
+  }
+
+  onRendered() {
+    Meteor.subscribe('setting');
+
+    // eslint-disable-next-line no-console
+    //console.log('lang:', TAPi18n.getLanguage());
+
+    if (Session.get('globalQuery')) {
+      this.searchAllBoards(Session.get('globalQuery'));
     }
-    this.resultsCount.set(0);
-    return [];
-  },
+  }
+
+  resetSearch() {
+    super.resetSearch();
+    this.parsingErrors = new QueryErrors();
+  }
 
   errorMessages() {
-    const errors = this.queryErrors.get();
-    const messages = [];
+    if (this.parsingErrors.hasErrors()) {
+      return this.parsingErrors.errorMessages();
+    }
+    return this.queryErrorMessages();
+  }
 
-    errors.notFound.boards.forEach(board => {
-      messages.push({ tag: 'board-title-not-found', value: board });
-    });
-    errors.notFound.swimlanes.forEach(swim => {
-      messages.push({ tag: 'swimlane-title-not-found', value: swim });
-    });
-    errors.notFound.lists.forEach(list => {
-      messages.push({ tag: 'list-title-not-found', value: list });
-    });
-    errors.notFound.users.forEach(user => {
-      messages.push({ tag: 'user-username-not-found', value: user });
-    });
+  parsingErrorMessages() {
+    this.parsingErrors.errorMessages();
+  }
 
-    return messages;
-  },
+  searchAllBoards(queryText) {
+    queryText = queryText.trim();
+    // eslint-disable-next-line no-console
+    //console.log('queryText:', queryText);
+
+    this.query.set(queryText);
+
+    this.resetSearch();
+
+    if (!queryText) {
+      return;
+    }
+
+    this.searching.set(true);
+
+    const query = new Query();
+    query.buildParams(queryText);
+
+    // eslint-disable-next-line no-console
+    // console.log('params:', query.getParams());
+
+    this.queryParams = query.getQueryParams().getParams();
+
+    if (query.hasErrors()) {
+      this.searching.set(false);
+      this.queryErrors = query.errors();
+      this.hasResults.set(true);
+      this.hasQueryErrors.set(true);
+      return;
+    }
+
+    this.runGlobalSearch(query.getQueryParams());
+  }
+
+  searchInstructions() {
+    const tags = {
+      operator_board: TAPi18n.__('operator-board'),
+      operator_list: TAPi18n.__('operator-list'),
+      operator_swimlane: TAPi18n.__('operator-swimlane'),
+      operator_comment: TAPi18n.__('operator-comment'),
+      operator_label: TAPi18n.__('operator-label'),
+      operator_label_abbrev: TAPi18n.__('operator-label-abbrev'),
+      operator_user: TAPi18n.__('operator-user'),
+      operator_user_abbrev: TAPi18n.__('operator-user-abbrev'),
+      operator_member: TAPi18n.__('operator-member'),
+      operator_member_abbrev: TAPi18n.__('operator-member-abbrev'),
+      operator_assignee: TAPi18n.__('operator-assignee'),
+      operator_assignee_abbrev: TAPi18n.__('operator-assignee-abbrev'),
+      operator_creator: TAPi18n.__('operator-creator'),
+      operator_due: TAPi18n.__('operator-due'),
+      operator_created: TAPi18n.__('operator-created'),
+      operator_modified: TAPi18n.__('operator-modified'),
+      operator_status: TAPi18n.__('operator-status'),
+      operator_has: TAPi18n.__('operator-has'),
+      operator_sort: TAPi18n.__('operator-sort'),
+      operator_limit: TAPi18n.__('operator-limit'),
+      predicate_overdue: TAPi18n.__('predicate-overdue'),
+      predicate_archived: TAPi18n.__('predicate-archived'),
+      predicate_all: TAPi18n.__('predicate-all'),
+      predicate_ended: TAPi18n.__('predicate-ended'),
+      predicate_week: TAPi18n.__('predicate-week'),
+      predicate_month: TAPi18n.__('predicate-month'),
+      predicate_quarter: TAPi18n.__('predicate-quarter'),
+      predicate_year: TAPi18n.__('predicate-year'),
+      predicate_attachment: TAPi18n.__('predicate-attachment'),
+      predicate_description: TAPi18n.__('predicate-description'),
+      predicate_checklist: TAPi18n.__('predicate-checklist'),
+      predicate_public: TAPi18n.__('predicate-public'),
+      predicate_private: TAPi18n.__('predicate-private'),
+      predicate_due: TAPi18n.__('predicate-due'),
+      predicate_created: TAPi18n.__('predicate-created'),
+      predicate_modified: TAPi18n.__('predicate-modified'),
+      predicate_start: TAPi18n.__('predicate-start'),
+      predicate_end: TAPi18n.__('predicate-end'),
+      predicate_assignee: TAPi18n.__('predicate-assignee'),
+      predicate_member: TAPi18n.__('predicate-member'),
+    };
+
+    let text = '';
+    [
+      ['# ', 'globalSearch-instructions-heading'],
+      ['\n', 'globalSearch-instructions-description'],
+      ['\n\n', 'globalSearch-instructions-operators'],
+      ['\n- ', 'globalSearch-instructions-operator-board'],
+      ['\n- ', 'globalSearch-instructions-operator-list'],
+      ['\n- ', 'globalSearch-instructions-operator-swimlane'],
+      ['\n- ', 'globalSearch-instructions-operator-comment'],
+      ['\n- ', 'globalSearch-instructions-operator-label'],
+      ['\n- ', 'globalSearch-instructions-operator-hash'],
+      ['\n- ', 'globalSearch-instructions-operator-user'],
+      ['\n- ', 'globalSearch-instructions-operator-at'],
+      ['\n- ', 'globalSearch-instructions-operator-member'],
+      ['\n- ', 'globalSearch-instructions-operator-assignee'],
+      ['\n- ', 'globalSearch-instructions-operator-creator'],
+      ['\n- ', 'globalSearch-instructions-operator-due'],
+      ['\n- ', 'globalSearch-instructions-operator-created'],
+      ['\n- ', 'globalSearch-instructions-operator-modified'],
+      ['\n- ', 'globalSearch-instructions-operator-status'],
+      ['\n    - ', 'globalSearch-instructions-status-archived'],
+      ['\n    - ', 'globalSearch-instructions-status-public'],
+      ['\n    - ', 'globalSearch-instructions-status-private'],
+      ['\n    - ', 'globalSearch-instructions-status-all'],
+      ['\n    - ', 'globalSearch-instructions-status-ended'],
+      ['\n- ', 'globalSearch-instructions-operator-has'],
+      ['\n- ', 'globalSearch-instructions-operator-sort'],
+      ['\n- ', 'globalSearch-instructions-operator-limit'],
+      ['\n## ', 'heading-notes'],
+      ['\n- ', 'globalSearch-instructions-notes-1'],
+      ['\n- ', 'globalSearch-instructions-notes-2'],
+      ['\n- ', 'globalSearch-instructions-notes-3'],
+      ['\n- ', 'globalSearch-instructions-notes-3-2'],
+      ['\n- ', 'globalSearch-instructions-notes-4'],
+      ['\n- ', 'globalSearch-instructions-notes-5'],
+    ].forEach(([prefix, instruction]) => {
+      text += `${prefix}${TAPi18n.__(instruction, tags)}`
+      // Replace *<text>* with `<text>` so markdown shows correctly
+      .replace(/\*\</, '`<')
+      .replace(/\>\*/, '\>\`')
+    });
+    return text;
+  }
+
+  labelColors() {
+    return Boards.simpleSchema()._schema['labels.$.color'].allowedValues.map(
+      color => {
+        return { color, name: TAPi18n.__(`color-${color}`) };
+      },
+    );
+  }
 
   events() {
-    return [
+    return super.events().concat([
       {
         'submit .js-search-query-form'(evt) {
           evt.preventDefault();
-          this.query.set(evt.target.searchQuery.value);
-          this.queryErrors.set(null);
-
-          if (!this.query.get()) {
-            this.searching.set(false);
-            this.hasResults.set(false);
-            return;
-          }
-
-          this.searching.set(true);
+          this.searchAllBoards(evt.target.searchQuery.value);
+        },
+        'click .js-label-color'(evt) {
+          evt.preventDefault();
+          const input = document.getElementById('global-search-input');
+          this.query.set(
+            `${input.value} ${TAPi18n.__('operator-label')}:"${
+              evt.currentTarget.textContent
+            }"`,
+          );
+          document.getElementById('global-search-input').focus();
+        },
+        'click .js-board-title'(evt) {
+          evt.preventDefault();
+          const input = document.getElementById('global-search-input');
+          this.query.set(
+            `${input.value} ${TAPi18n.__('operator-board')}:"${
+              evt.currentTarget.textContent
+            }"`,
+          );
+          document.getElementById('global-search-input').focus();
+        },
+        'click .js-list-title'(evt) {
+          evt.preventDefault();
+          const input = document.getElementById('global-search-input');
+          this.query.set(
+            `${input.value} ${TAPi18n.__('operator-list')}:"${
+              evt.currentTarget.textContent
+            }"`,
+          );
+          document.getElementById('global-search-input').focus();
+        },
+        'click .js-label-name'(evt) {
+          evt.preventDefault();
+          const input = document.getElementById('global-search-input');
+          this.query.set(
+            `${input.value} ${TAPi18n.__('operator-label')}:"${
+              evt.currentTarget.textContent
+            }"`,
+          );
+          document.getElementById('global-search-input').focus();
+        },
+        'click .js-new-search'(evt) {
+          evt.preventDefault();
+          const input = document.getElementById('global-search-input');
+          input.value = '';
+          this.query.set('');
           this.hasResults.set(false);
-
-          let query = this.query.get();
-          // eslint-disable-next-line no-console
-          // console.log('query:', query);
-
-          const reOperator1 = /^((?<operator>\w+):|(?<abbrev>[#@]))(?<value>\w+)(\s+|$)/;
-          const reOperator2 = /^((?<operator>\w+):|(?<abbrev>[#@]))(?<quote>["']*)(?<value>.*?)\k<quote>(\s+|$)/;
-          const reText = /^(?<text>\S+)(\s+|$)/;
-          const reQuotedText = /^(?<quote>["'])(?<text>\w+)\k<quote>(\s+|$)/;
-
-          const operatorMap = {};
-          operatorMap[TAPi18n.__('operator-board')] = 'boards';
-          operatorMap[TAPi18n.__('operator-board-abbrev')] = 'boards';
-          operatorMap[TAPi18n.__('operator-swimlane')] = 'swimlanes';
-          operatorMap[TAPi18n.__('operator-swimlane-abbrev')] = 'swimlanes';
-          operatorMap[TAPi18n.__('operator-list')] = 'lists';
-          operatorMap[TAPi18n.__('operator-list-abbrev')] = 'lists';
-          operatorMap[TAPi18n.__('operator-label')] = 'labels';
-          operatorMap[TAPi18n.__('operator-label-abbrev')] = 'labels';
-          operatorMap[TAPi18n.__('operator-user')] = 'users';
-          operatorMap[TAPi18n.__('operator-user-abbrev')] = 'users';
-          operatorMap[TAPi18n.__('operator-is')] = 'is';
-
-          // eslint-disable-next-line no-console
-          // console.log('operatorMap:', operatorMap);
-          const params = {
-            boards: [],
-            swimlanes: [],
-            lists: [],
-            users: [],
-            labels: [],
-            is: [],
-          };
-
-          let text = '';
-          while (query) {
-            m = query.match(reOperator1);
-            if (!m) {
-              m = query.match(reOperator2);
-              if (m) {
-                query = query.replace(reOperator2, '');
-              }
-            } else {
-              query = query.replace(reOperator1, '');
-            }
-            if (m) {
-              let op;
-              if (m.groups.operator) {
-                op = m.groups.operator.toLowerCase();
-              } else {
-                op = m.groups.abbrev;
-              }
-              if (op in operatorMap) {
-                params[operatorMap[op]].push(m.groups.value);
-              }
-              continue;
-            }
-
-            m = query.match(reQuotedText);
-            if (!m) {
-              m = query.match(reText);
-              if (m) {
-                query = query.replace(reText, '');
-              }
-            } else {
-              query = query.replace(reQuotedText, '');
-            }
-            if (m) {
-              text += (text ? ' ' : '') + m.groups.text;
-            }
-          }
-
-          // eslint-disable-next-line no-console
-          // console.log('text:', text);
-          params.text = text;
-
-          // eslint-disable-next-line no-console
-          // console.log('params:', params);
-
-          this.queryParams = params;
-
-          this.autorun(() => {
-            const handle = subManager.subscribe('globalSearch', params);
-            Tracker.nonreactive(() => {
-              Tracker.autorun(() => {
-                // eslint-disable-next-line no-console
-                // console.log('ready:', handle.ready());
-                if (handle.ready()) {
-                  this.searching.set(false);
-                  this.hasResults.set(true);
-                }
-              });
-            });
-          });
         },
       },
-    ];
-  },
-}).register('globalSearch');
+    ]);
+  }
+}
+
+GlobalSearchComponent.register('globalSearch');

client/components/main/globalSearch.styl

@@ -51,7 +51,7 @@
   margin-top: 0
   margin-bottom: 10px
 
-.global-search-dueat-list-wrapper
+.global-search-results-list-wrapper
   max-width: 500px
   margin-right: auto
   margin-left: auto
@@ -71,13 +71,19 @@
 .global-search-error-messages
   color: darkred
 
-.global-search-instructions
+.global-search-page
   width: 40%
   min-width: 400px
   margin-right: auto
   margin-left: auto
   line-height: 150%
 
+.global-search-page h1
+  margin-top: 2rem;
+
+.global-search-page h2
+  margin-top: 1rem;
+
 .global-search-query-input
   width: 90% !important
   margin-right: auto
@@ -91,7 +97,25 @@
   font-style: italic
 
 code
-  color: white
-  background-color: grey
+  color: black
+  background-color: lightgrey
   padding: 0.1rem !important
-  font-size: 0.7rem !important
+  font-size: 0.8rem !important
+
+.list-title
+  background-color: darkgray
+
+.global-search-footer
+  border: none
+  width: 100%
+
+.global-search-next-page
+  border: none
+  text-align: right;
+
+.global-search-previous-page
+  border: none
+  text-align: left;
+
+.global-search-instructions li
+  margin-bottom: 0.3rem

client/components/main/header.jade

@@ -7,16 +7,21 @@ template(name="header")
   if currentUser
     #header-quick-access(class=currentBoard.colorClass)
       if isMiniScreen
-        ul
-          li
-            a(href="{{pathFor 'home'}}")
-              span.fa.fa-home
+        span
+          a(href="{{pathFor 'home'}}")
+            span.fa.fa-home
 
+        ul.header-quick-access-list
           if currentList
             each currentBoard.lists
               li(class="{{#if $.Session.equals 'currentList' _id}}current{{/if}}")
                 a.js-select-list
                   = title
+          else
+            each currentUser.starredBoards
+              li(class="{{#if $.Session.equals 'currentBoard' _id}}current{{/if}}")
+                a(href="{{pathFor 'board' id=_id slug=slug}}")
+                  = title
         #header-new-board-icon
       else
         //-
@@ -26,29 +31,27 @@ template(name="header")
         unless currentSetting.hideLogo
           if currentSetting.customTopLeftCornerLogoImageUrl
             if currentSetting.customTopLeftCornerLogoLinkUrl
-              a(href="{{currentSetting.customTopLeftCornerLogoLinkUrl}}")
+              a(href="{{currentSetting.customTopLeftCornerLogoLinkUrl}}" alt="{{currentSetting.productName}}" title="{{currentSetting.productName}}")
                 img(src="{{currentSetting.customTopLeftCornerLogoImageUrl}}" height="{{#if currentSetting.customTopLeftCornerLogoHeight}}#{currentSetting.customTopLeftCornerLogoHeight}{{else}}27{{/if}}" width="auto" margin="0" padding="0")
             unless currentSetting.customTopLeftCornerLogoLinkUrl
-              img(src="{{currentSetting.customTopLeftCornerLogoImageUrl}}" height="{{#if currentSetting.customTopLeftCornerLogoHeight}}#{currentSetting.customTopLeftCornerLogoHeight}{{else}}27{{/if}}" width="auto" margin="0" padding="0")
+              img(src="{{currentSetting.customTopLeftCornerLogoImageUrl}}" height="{{#if currentSetting.customTopLeftCornerLogoHeight}}#{currentSetting.customTopLeftCornerLogoHeight}{{else}}27{{/if}}" width="auto" margin="0" padding="0" alt="{{currentSetting.productName}}" title="{{currentSetting.productName}}")
           unless currentSetting.customTopLeftCornerLogoImageUrl
-            img(src="{{pathFor '/logo-header.png'}}" alt="")
-        ul
-          li
-            a(href="{{pathFor 'home'}}")
-              span.fa.fa-home
-              | {{_ 'all-boards'}}
-          li.separator -
+            img(src="{{pathFor '/logo-header.png'}}" alt="{{currentSetting.productName}}" title="{{currentSetting.productName}}")
+        span.allBoards
+          a(href="{{pathFor 'home'}}")
+            span.fa.fa-home
+            | {{_ 'all-boards'}}
+        ul.header-quick-access-list
           //li
           //  a(href="{{pathFor 'public'}}")
           //    span.fa.fa-globe
           //    | {{_ 'public'}}
           each currentUser.starredBoards
-            li.separator -
             li(class="{{#if $.Session.equals 'currentBoard' _id}}current{{/if}}")
               a(href="{{pathFor 'board' id=_id slug=slug}}")
                 = title
           else
-            li.current {{_ 'quick-access-description'}}
+            li.current.empty {{_ 'quick-access-description'}}
 
       // Next line is used only for spacing at header,
       // there is no visible clickable icon.

client/components/main/header.styl

@@ -100,6 +100,10 @@
   font-size: 12px
   display: flex
   z-index: 21
+  padding: 10px 0px
+
+  .allBoards
+      padding: 0 0 0 10px
 
   #header-user-bar,
   #header-new-board-icon,
@@ -112,21 +116,31 @@
     a:hover, a.is-active
       color: white
 
-  ul
+  ul.header-quick-access-list
     transition: opacity 0.2s
-    margin: 4px 0 0 5px
-    overflow: hidden
+    overflow-x: auto
+    overflow-y: hidden
+    white-space: nowrap
+    padding: 10px
+    margin: -10px
 
     li
-      display: block
-      float: left
+      display: inline
       width: auto
       color: darken(white, 15%)
-      padding: 2px 5px 0
+      padding: 12px 0px
+      margin: -10px 0px
+
+      a
+        padding: 12px 10px
+        margin: -10px 0px
 
       &.current
         color: darken(white, 5%)
 
+      &.current.empty
+        padding: 12px 10px 12px 10px
+
       &:first-child .fa-home,&:nth-child(3) .fa-globe
         margin-right: 5px
 
@@ -186,37 +200,32 @@
   #header-quick-access
     transition: background-color 0.4s
     width: 100%
-    padding: 10px 0px
     z-index: 30
 
     ul
       width: calc(100% - 60px)
-      overflow: ellipsis
-      padding: 10px
-      margin: -10px
+      margin-right: 10px
 
       li
         height: 100%
-        padding: 12px 0px
-        margin: -10px 0px
 
         a
           height: 100%
-          padding: 12px 10px
-          margin: -10px 0px
 
-        .fa-home
+    span
+      .fa-home
           font-size: 26px
           margin-top: -2px
+          margin-right: 10px
+          margin-left: 10px
 
     #header-new-board-icon
       display: none
 
     #header-user-bar
-      position: absolute
       right: 0px
       padding: 10px
-      margin: -10px 0 -10px -10px
+      margin: -8px 0 -10px -10px
 
 .announcement .viewer
   display: inline-block

client/components/main/layouts.js

@@ -74,20 +74,52 @@ Template.userFormsLayout.helpers({
       let name = lang.name;
       if (lang.name === 'br') {
         name = 'Brezhoneg';
-      } else if (lang.name === 'es-PY') {
-        name = 'Español de Paraguayo';
+      } else if (lang.name === 'ar-EG') {
+        // ar-EG = Arabic (Egypt), simply Masri (مَصرى, [ˈmɑsˤɾi], Egyptian, Masr refers to Cairo)
+        name = 'مَصرى';
+      } else if (lang.name === 'de-CH') {
+        name = 'Deutsch (Schweiz)';
+      } else if (lang.name === 'fa-IR') {
+        // fa-IR = Persian (Iran)
+        name = 'فارسی/پارسی (ایران‎)';
       } else if (lang.name === 'fr-BE') {
         name = 'Français (Belgique)';
       } else if (lang.name === 'fr-CA') {
         name = 'Français (Canada)';
-      } else if (lang.name === 'fr-CA') {
-        name = 'Français (Canada)';
       } else if (lang.name === 'ig') {
         name = 'Igbo';
       } else if (lang.name === 'lv') {
         name = 'Latviešu';
       } else if (lang.name === 'latviešu valoda') {
         name = 'Latviešu';
+      } else if (lang.name === 'en-IT') {
+        name = 'English (Italy)';
+      } else if (lang.name === 'Español') {
+        name = 'español';
+      } else if (lang.name === 'es_419') {
+        name = 'español de América Latina';
+      } else if (lang.name === 'es-419') {
+        name = 'español de América Latina';
+      } else if (lang.name === 'Español de América Latina') {
+        name = 'español de América Latina';
+      } else if (lang.name === 'es-LA') {
+        name = 'español de América Latina';
+      } else if (lang.name === 'Español de Argentina') {
+        name = 'español de Argentina';
+      } else if (lang.name === 'Español de Chile') {
+        name = 'español de Chile';
+      } else if (lang.name === 'Español de Colombia') {
+        name = 'español de Colombia';
+      } else if (lang.name === 'Español de México') {
+        name = 'español de México';
+      } else if (lang.name === 'es-PY') {
+        name = 'español de Paraguayo';
+      } else if (lang.name === 'Español de Paraguayo') {
+        name = 'español de Paraguayo';
+      } else if (lang.name === 'Español de Perú') {
+        name = 'español de Perú';
+      } else if (lang.name === 'Español de Puerto Rico') {
+        name = 'español de Puerto Rico';
       } else if (lang.name === 'oc') {
         name = 'Occitan';
       } else if (lang.name === 'st') {

client/components/main/layouts.styl

@@ -317,6 +317,9 @@ kbd
 .grabbing
   cursor: grabbing
 
+.textcomplete-dropdown
+  z-index: 2000 !important;
+
 // Implement a thiner close icon as suggested in
 // https://github.com/FortAwesome/Font-Awesome/issues/1540#issuecomment-68689950
 .fa.fa-times-thin:before

client/components/main/myCards.jade

@@ -6,16 +6,6 @@ template(name="myCardsHeaderBar")
       i.fa.fa-list
       | {{_ 'my-cards'}}
 
-    .board-header-btns.left
-      a.board-header-btn.js-toggle-my-cards-choose-sort(title="{{_ 'myCardsSortChange-title'}}")
-        i.fa.fa-caret-down
-        if $eq myCardsSort 'board'
-          i.fa.fa-th-large
-          | {{_ 'myCardsSortChange-choice-board'}}
-        if $eq myCardsSort 'dueAt'
-          i.fa.fa-calendar
-          | {{_ 'myCardsSortChange-choice-dueat'}}
-
 template(name="myCardsModalTitle")
   if currentUser
     h2
@@ -24,69 +14,26 @@ template(name="myCardsModalTitle")
 
 template(name="myCards")
   if currentUser
-    if isPageReady.get
+    if searching.get
+      +spinner
+    else
       .wrapper
-        if $eq myCardsSort 'board'
-          each board in myCardsList
-            .my-cards-board-wrapper
-              .my-cards-board-title
+        each board in myCardsList
+          .my-cards-board-wrapper
+            .my-cards-board-title(class=board.colorClass, id="header")
+              a(href=board.originRelativeUrl)
                 +viewer
                   = board.title
-              each swimlane in board.mySwimlanes
-                .my-cards-swimlane-title(class="{{#if swimlane.colorClass}}{{ swimlane.colorClass }}{{else}}swimlane-default-color{{/if}}")
-                  +viewer
-                    = swimlane.title
-                each list in swimlane.myLists
-                  .my-cards-list-wrapper
-                    .my-cards-list-title(class=list.colorClass)
-                      +viewer
-                        = list.title
-                    each card in list.myCards
-                      .my-cards-card-wrapper
-                        a.minicard-wrapper(href=card.absoluteUrl)
-                          +minicard(card)
-        else
-          .my-cards-dueat-list-wrapper
-            each card in myDueCardsList
-              .my-cards-card-wrapper
-                a.minicard-wrapper.card-title(href=card.absoluteUrl)
-                  +minicard(card)
-                ul.my-cards-context-list
-                  li.my-cards-context(title="{{_ 'board'}}")
+            each swimlane in board.mySwimlanes
+              .my-cards-swimlane-title(class="{{#if swimlane.colorClass}}{{ swimlane.colorClass }}{{else}}swimlane-default-color{{/if}}")
+                +viewer
+                  = swimlane.title
+              each list in swimlane.myLists
+                .my-cards-list-wrapper
+                  .my-cards-list-title(class=list.colorClass)
                     +viewer
-                      = card.getBoard.title
-                  li.my-cards-context.my-cards-context-separator
-                    = ' '
-                    | {{_ 'context-separator'}}
-                    = ' '
-                  li.my-cards-context(title="{{_ 'swimlane'}}")
-                    +viewer
-                      = card.getSwimlane.title
-                  li.my-cards-context
-                    = ' '
-                    | {{_ 'context-separator'}}
-                    = ' '
-                  li.my-cards-context(title="{{_ 'list'}}")
-                    +viewer
-                      = card.getList.title
-    else
-      +spinner
-
-template(name="myCardsSortChangePopup")
-  if currentUser
-    ul.pop-over-list
-      li
-        with "my-cards-sort-board"
-          a.js-my-cards-sort-board
-            i.fa.fa-th-large.colorful
-            | {{_ 'myCardsSortChange-choice-board'}}
-            if $eq Utils.myCardsSort "board"
-              i.fa.fa-check
-      hr
-      li
-        with "my-cards-sort-dueat"
-          a.js-my-cards-sort-dueat
-            i.fa.fa-calendar.colorful
-            | {{_ 'myCardsSortChange-choice-dueat'}}
-            if $eq Utils.myCardsSort "dueAt"
-              i.fa.fa-check
+                      = list.title
+                  each card in list.myCards
+                    .my-cards-card-wrapper
+                      a.minicard-wrapper(href=card.originRelativeUrl)
+                        +minicard(card)

client/components/main/myCards.js

@@ -1,4 +1,4 @@
-const subManager = new SubsManager();
+import { CardSearchPagedComponent } from '../../lib/cardSearch';
 
 BlazeComponent.extendComponent({
   myCardsSort() {
@@ -24,227 +24,115 @@ Template.myCards.helpers({
   },
 });
 
-BlazeComponent.extendComponent({
-  events() {
-    return [
-      {
-        'click .js-my-cards-sort-board'() {
-          Utils.setMyCardsSort('board');
-          Popup.close();
-        },
-
-        'click .js-my-cards-sort-dueat'() {
-          Utils.setMyCardsSort('dueAt');
-          Popup.close();
-        },
-      },
-    ];
-  },
-}).register('myCardsSortChangePopup');
-
-BlazeComponent.extendComponent({
+class MyCardsComponent extends CardSearchPagedComponent {
   onCreated() {
-    this.isPageReady = new ReactiveVar(false);
+    super.onCreated();
 
-    this.autorun(() => {
-      const handle = subManager.subscribe('myCards');
-      Tracker.nonreactive(() => {
-        Tracker.autorun(() => {
-          this.isPageReady.set(handle.ready());
-        });
-      });
-    });
+    this.runGlobalSearch(null);
     Meteor.subscribe('setting');
-  },
+  }
 
-  myCardsSort() {
-    // eslint-disable-next-line no-console
-    //console.log('sort:', Utils.myCardsSort());
-    return Utils.myCardsSort();
-  },
-
-  sortByBoard() {
-    return this.myCardsSort() === 'board';
-  },
+  // eslint-disable-next-line no-unused-vars
+  getSubscription(queryParams) {
+    return Meteor.subscribe(
+      'myCards',
+      this.sessionId,
+      this.subscriptionCallbacks,
+    );
+  }
 
   myCardsList() {
-    const userId = Meteor.userId();
     const boards = [];
     let board = null;
     let swimlane = null;
     let list = null;
 
-    const cursor = Cards.find(
-      {
-        $or: [{ members: userId }, { assignees: userId }],
-        archived: false,
-      },
-      {
-        sort: {
-          boardId: 1,
-          swimlaneId: 1,
-          listId: 1,
-          sort: 1,
-        },
-      },
-    );
+    const cursor = this.getResults();
 
-    let newBoard = false;
-    let newSwimlane = false;
-    let newList = false;
-
-    cursor.forEach(card => {
-      // eslint-disable-next-line no-console
-      // console.log('card:', card.title);
-      if (list === null || card.listId !== list._id) {
+    if (cursor) {
+      cursor.forEach(card => {
         // eslint-disable-next-line no-console
-        // console.log('new list');
-        list = card.getList();
-        if (list.archived) {
-          list = null;
-          return;
-        }
-        list.myCards = [card];
-        newList = true;
-      }
-      if (swimlane === null || card.swimlaneId !== swimlane._id) {
-        // eslint-disable-next-line no-console
-        // console.log('new swimlane');
-        swimlane = card.getSwimlane();
-        if (swimlane.archived) {
+        // console.log('card:', card.title);
+        if (board === null || card.boardId !== board._id) {
+          // eslint-disable-next-line no-console
+          // console.log('new board');
+          board = card.getBoard();
+          if (board.archived) {
+            board = null;
+            return;
+          }
+          // eslint-disable-next-line no-console
+          // console.log('board:', b, b._id, b.title);
+          boards.push(board);
+          board.mySwimlanes = [];
           swimlane = null;
-          return;
+          list = null;
+        }
+
+        if (swimlane === null || card.swimlaneId !== swimlane._id) {
+          // eslint-disable-next-line no-console
+          // console.log('new swimlane');
+          swimlane = card.getSwimlane();
+          if (swimlane.archived) {
+            swimlane = null;
+            return;
+          }
+          board.mySwimlanes.push(swimlane);
+          swimlane.myLists = [];
+          list = null;
+        }
+
+        if (list === null || card.listId !== list._id) {
+          // eslint-disable-next-line no-console
+          // console.log('new list');
+          list = card.getList();
+          if (list.archived) {
+            list = null;
+            return;
+          }
+          swimlane.myLists.push(list);
+          list.myCards = [];
         }
-        swimlane.myLists = [list];
-        newSwimlane = true;
-      }
-      if (board === null || card.boardId !== board._id) {
-        // eslint-disable-next-line no-console
-        // console.log('new board');
-        board = card.getBoard();
-        if (board.archived) {
-          board = null;
-          return;
-        }
-        // eslint-disable-next-line no-console
-        // console.log('board:', b, b._id, b.title);
-        board.mySwimlanes = [swimlane];
-        newBoard = true;
-      }
 
-      if (newBoard) {
-        boards.push(board);
-      } else if (newSwimlane) {
-        board.mySwimlanes.push(swimlane);
-      } else if (newList) {
-        swimlane.myLists.push(list);
-      } else {
         list.myCards.push(card);
-      }
+      });
 
-      newBoard = false;
-      newSwimlane = false;
-      newList = false;
-    });
-
-    // sort the data structure
-    boards.forEach(board => {
-      board.mySwimlanes.forEach(swimlane => {
-        swimlane.myLists.forEach(list => {
-          list.myCards.sort((a, b) => {
+      // sort the data structure
+      boards.forEach(board => {
+        board.mySwimlanes.forEach(swimlane => {
+          swimlane.myLists.forEach(list => {
+            list.myCards.sort((a, b) => {
+              return a.sort - b.sort;
+            });
+          });
+          swimlane.myLists.sort((a, b) => {
             return a.sort - b.sort;
           });
         });
-        swimlane.myLists.sort((a, b) => {
+        board.mySwimlanes.sort((a, b) => {
           return a.sort - b.sort;
         });
       });
-      board.mySwimlanes.sort((a, b) => {
-        return a.sort - b.sort;
+
+      boards.sort((a, b) => {
+        let x = a.sort;
+        let y = b.sort;
+
+        // show the template board last
+        if (a.type === 'template-container') {
+          x = 99999999;
+        } else if (b.type === 'template-container') {
+          y = 99999999;
+        }
+        return x - y;
       });
-    });
 
-    boards.sort((a, b) => {
-      let x = a.sort;
-      let y = b.sort;
+      // eslint-disable-next-line no-console
+      // console.log('boards:', boards);
+      return boards;
+    }
 
-      // show the template board last
-      if (a.type === 'template-container') {
-        x = 99999999;
-      } else if (b.type === 'template-container') {
-        y = 99999999;
-      }
-      return x - y;
-    });
-
-    // eslint-disable-next-line no-console
-    // console.log('boards:', boards);
-    return boards;
-  },
-
-  myDueCardsList() {
-    const userId = Meteor.userId();
-
-    const cursor = Cards.find(
-      {
-        $or: [{ members: userId }, { assignees: userId }],
-        archived: false,
-      },
-      {
-        sort: {
-          dueAt: -1,
-          boardId: 1,
-          swimlaneId: 1,
-          listId: 1,
-          sort: 1,
-        },
-      },
-    );
-
-    // eslint-disable-next-line no-console
-    // console.log('cursor:', cursor);
-
-    const cards = [];
-    cursor.forEach(card => {
-      if (
-        !card.getBoard().archived &&
-        !card.getSwimlane().archived &&
-        !card.getList().archived
-      ) {
-        cards.push(card);
-      }
-    });
-
-    cards.sort((a, b) => {
-      const x = a.dueAt === null ? Date('2100-12-31') : a.dueAt;
-      const y = b.dueAt === null ? Date('2100-12-31') : b.dueAt;
-
-      if (x > y) return 1;
-      else if (x < y) return -1;
-
-      return 0;
-    });
-
-    // eslint-disable-next-line no-console
-    // console.log('cursor:', cards);
-    return cards;
-  },
-
-  events() {
-    return [
-      {
-        // 'click .js-my-card'(evt) {
-        //   const card = this.currentData().card;
-        //   // eslint-disable-next-line no-console
-        //   console.log('currentData():', this.currentData());
-        //   // eslint-disable-next-line no-console
-        //   console.log('card:', card);
-        //   if (card) {
-        //     Utils.goCardId(card._id);
-        //   }
-        //   evt.preventDefault();
-        // },
-      },
-    ];
-  },
-}).register('myCards');
+    return [];
+  }
+}
+MyCardsComponent.register('myCards');

client/components/main/myCards.styl

@@ -1,14 +1,14 @@
 .my-cards-board-wrapper
-  border-radius: 8px
+  border-radius: 0 0 4px 4px;
   //padding: 0.5rem
   min-width: 400px
-  border-width: 8px
-  border-color: grey
-  border-style: solid
   margin-bottom: 2rem
   margin-right: auto
   margin-left: auto
-
+  border-width: 2px
+  border-style: solid
+  border-color: #a2a2a2
+  
 .my-cards-board-title
   font-size: 1.4rem
   font-weight: bold
@@ -41,9 +41,9 @@
 .my-cards-list-wrapper
   margin: 1rem
   border-radius: 5px
-  padding: 1.5rem
-  padding-top: 0.75rem
-  display: inline-block
+  //padding: 1.5rem
+  //padding-top: 0.75rem
+  display: inline-grid
   min-width: 250px
   max-width: 350px
 
@@ -55,15 +55,3 @@
   max-width: 500px
   margin-right: auto
   margin-left: auto
-
-.my-cards-field-name
-  font-weight: bold
-
-.my-cards-context
-  display: inline-block
-
-.my-cards-context-separator
-  font-weight: bold
-
-.my-cards-context-list
-  margin-bottom: 0.7rem

client/components/main/spinner.jade

@@ -0,0 +1,5 @@
+template(name="spinner")
+  +Template.dynamic(template=getSpinnerTemplate)
+
+template(name="spinnerRaw")
+  +Template.dynamic(template=getSpinnerTemplateRaw)

client/components/main/spinner.js

@@ -0,0 +1,11 @@
+import { Spinner } from '/client/lib/spinner';
+
+(class extends Spinner {
+}.register('spinner'));
+
+(class extends Spinner {
+  getSpinnerTemplateRaw() {
+    let ret = super.getSpinnerTemplate() + 'Raw';
+    return ret;
+  }
+}.register('spinnerRaw'));

client/components/main/spinner.tpl.jade

@@ -1,6 +0,0 @@
-.sk-spinner.sk-spinner-wave(class=currentBoard.colorClass)
-  .sk-rect1
-  .sk-rect2
-  .sk-rect3
-  .sk-rect4
-  .sk-rect5

client/components/main/spinner_bounce.jade

@@ -0,0 +1,11 @@
+template(name="spinnerBounce")
+  .sk-spinner.sk-spinner-bounce(class=currentBoard.colorClass)
+    +spinnerBounceRaw
+
+template(name="spinnerBounceRaw")
+  .sk-bounce1
+  |  
+  .sk-bounce2
+  |  
+  .sk-bounce3
+  |  

client/components/main/spinner_bounce.styl

@@ -0,0 +1,44 @@
+@import 'nib'
+
+// From https://github.com/tobiasahlin/SpinKit
+.sk-spinner-bounce {
+  margin: 100px auto 0;
+  width: 70px;
+  text-align: center;
+
+  div {
+    width: 18px;
+    height: 18px;
+    background-color: #333;
+
+    border-radius: 100%;
+    display: inline-block;
+    -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
+    animation: sk-bouncedelay 1.4s infinite ease-in-out both;
+  }
+
+  .sk-bounce1 {
+    -webkit-animation-delay: -0.32s;
+    animation-delay: -0.32s;
+  }
+
+  .sk-bounce2 {
+    -webkit-animation-delay: -0.16s;
+    animation-delay: -0.16s;
+  }
+}
+
+@-webkit-keyframes sk-bouncedelay {
+  0%, 80%, 100% { -webkit-transform: scale(0) }
+  40% { -webkit-transform: scale(1.0) }
+}
+
+@keyframes sk-bouncedelay {
+  0%, 80%, 100% {
+    -webkit-transform: scale(0);
+    transform: scale(0);
+  } 40% {
+    -webkit-transform: scale(1.0);
+    transform: scale(1.0);
+  }
+}

client/components/main/spinner_cube.jade

@@ -0,0 +1,8 @@
+template(name="spinnerCube")
+  .sk-spinner.sk-spinner-cube(class=currentBoard.colorClass)
+    +spinnerCubeRaw
+
+template(name="spinnerCubeRaw")
+  .sk-cube1
+  .sk-cube2
+  .sk-cube3

client/components/main/spinner_cube.styl

@@ -0,0 +1,52 @@
+@import 'nib'
+
+// From https://github.com/tobiasahlin/SpinKit
+.sk-spinner-cube {
+  margin: 100px auto;
+  width: 40px;
+  height: 40px;
+  position: relative;
+}
+
+.sk-cube1, .sk-cube2 {
+  background-color: #333;
+  width: 15px;
+  height: 15px;
+  position: absolute;
+  top: 0;
+  left: 0;
+
+  -webkit-animation: sk-cubemove 1.8s infinite ease-in-out;
+  animation: sk-cubemove 1.8s infinite ease-in-out;
+}
+
+.sk-cube2 {
+  -webkit-animation-delay: -0.9s;
+  animation-delay: -0.9s;
+}
+
+@-webkit-keyframes sk-cubemove {
+  25% { -webkit-transform: translateX(35px) rotate(-90deg) scale(0.5) }
+  50% { -webkit-transform: translateX(35px) translateY(35px) rotate(-180deg) }
+  75% { -webkit-transform: translateX(0px) translateY(35px) rotate(-270deg) scale(0.5) }
+  100% { -webkit-transform: rotate(-360deg) }
+}
+
+@keyframes sk-cubemove {
+  25% {
+    transform: translateX(35px) rotate(-90deg) scale(0.5);
+    -webkit-transform: translateX(35px) rotate(-90deg) scale(0.5);
+  } 50% {
+    transform: translateX(35px) translateY(35px) rotate(-179deg);
+    -webkit-transform: translateX(35px) translateY(35px) rotate(-179deg);
+  } 50.1% {
+    transform: translateX(35px) translateY(35px) rotate(-180deg);
+    -webkit-transform: translateX(35px) translateY(35px) rotate(-180deg);
+  } 75% {
+    transform: translateX(0px) translateY(35px) rotate(-270deg) scale(0.5);
+    -webkit-transform: translateX(0px) translateY(35px) rotate(-270deg) scale(0.5);
+  } 100% {
+    transform: rotate(-360deg);
+    -webkit-transform: rotate(-360deg);
+  }
+}

client/components/main/spinner_cube_grid.jade

@@ -0,0 +1,14 @@
+template(name="spinnerCubeGrid")
+  .sk-spinner.sk-spinner-cube-grid(class=currentBoard.colorClass)
+    +spinnerCubeGridRaw
+
+template(name="spinnerCubeGridRaw")
+  .sk-cube-grid.sk-cube-grid1
+  .sk-cube-grid.sk-cube-grid2
+  .sk-cube-grid.sk-cube-grid3
+  .sk-cube-grid.sk-cube-grid4
+  .sk-cube-grid.sk-cube-grid5
+  .sk-cube-grid.sk-cube-grid6
+  .sk-cube-grid.sk-cube-grid7
+  .sk-cube-grid.sk-cube-grid8
+  .sk-cube-grid.sk-cube-grid9

client/components/main/spinner_cube_grid.styl

@@ -0,0 +1,64 @@
+@import 'nib'
+
+// From https://github.com/tobiasahlin/SpinKit
+.sk-spinner-cube-grid {
+  width: 40px;
+  height: 40px;
+  margin: 100px auto;
+}
+
+.sk-spinner-cube-grid .sk-cube-grid {
+  width: 33%;
+  height: 33%;
+  background-color: #333;
+  float: left;
+  -webkit-animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
+          animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
+}
+.sk-spinner-cube-grid .sk-cube-grid1 {
+  -webkit-animation-delay: 0.2s;
+          animation-delay: 0.2s; }
+.sk-spinner-cube-grid .sk-cube-grid2 {
+  -webkit-animation-delay: 0.3s;
+          animation-delay: 0.3s; }
+.sk-spinner-cube-grid .sk-cube-grid3 {
+  -webkit-animation-delay: 0.4s;
+          animation-delay: 0.4s; }
+.sk-spinner-cube-grid .sk-cube-grid4 {
+  -webkit-animation-delay: 0.1s;
+          animation-delay: 0.1s; }
+.sk-spinner-cube-grid .sk-cube-grid5 {
+  -webkit-animation-delay: 0.2s;
+          animation-delay: 0.2s; }
+.sk-spinner-cube-grid .sk-cube-grid6 {
+  -webkit-animation-delay: 0.3s;
+          animation-delay: 0.3s; }
+.sk-spinner-cube-grid .sk-cube-grid7 {
+  -webkit-animation-delay: 0s;
+          animation-delay: 0s; }
+.sk-spinner-cube-grid .sk-cube-grid8 {
+  -webkit-animation-delay: 0.1s;
+          animation-delay: 0.1s; }
+.sk-spinner-cube-grid .sk-cube-grid9 {
+  -webkit-animation-delay: 0.2s;
+          animation-delay: 0.2s; }
+
+@-webkit-keyframes sk-cubeGridScaleDelay {
+  0%, 70%, 100% {
+    -webkit-transform: scale3D(1, 1, 1);
+            transform: scale3D(1, 1, 1);
+  } 35% {
+    -webkit-transform: scale3D(0, 0, 1);
+            transform: scale3D(0, 0, 1);
+  }
+}
+
+@keyframes sk-cubeGridScaleDelay {
+  0%, 70%, 100% {
+    -webkit-transform: scale3D(1, 1, 1);
+            transform: scale3D(1, 1, 1);
+  } 35% {
+    -webkit-transform: scale3D(0, 0, 1);
+            transform: scale3D(0, 0, 1);
+  }
+}

client/components/main/spinner_dot.jade

@@ -0,0 +1,7 @@
+template(name="spinnerDot")
+  .sk-spinner.sk-spinner-dot(class=currentBoard.colorClass)
+    +spinnerDotRaw
+
+template(name="spinnerDotRaw")
+  .sk-dot1
+  .sk-dot2

client/components/main/spinner_dot.styl

@@ -0,0 +1,51 @@
+@import 'nib'
+
+// From https://github.com/tobiasahlin/SpinKit
+.sk-spinner-dot {
+  margin: 100px auto;
+  width: 40px;
+  height: 40px;
+  position: relative;
+  text-align: center;
+
+  -webkit-animation: sk-rotate 2.0s infinite linear;
+  animation: sk-rotate 2.0s infinite linear;
+}
+
+.sk-dot1, .sk-dot2 {
+  width: 40%;
+  height: 40%;
+  display: inline-block;
+  position: absolute;
+  top: 0;
+  background-color: #333;
+  border-radius: 100%;
+
+  -webkit-animation: sk-bounce 2.0s infinite ease-in-out;
+  animation: sk-bounce 2.0s infinite ease-in-out;
+}
+
+.sk-dot2 {
+  top: auto;
+  bottom: 0;
+  -webkit-animation-delay: -1.0s;
+  animation-delay: -1.0s;
+}
+
+@-webkit-keyframes sk-rotate { 100% { -webkit-transform: rotate(360deg) }}
+@keyframes sk-rotate { 100% { transform: rotate(360deg); -webkit-transform: rotate(360deg) }}
+
+@-webkit-keyframes sk-bounce {
+  0%, 100% { -webkit-transform: scale(0.0) }
+  50% { -webkit-transform: scale(1.0) }
+}
+
+@keyframes sk-bounce {
+  0%, 100% {
+    transform: scale(0.0);
+    -webkit-transform: scale(0.0);
+  } 50% {
+    transform: scale(1.0);
+    -webkit-transform: scale(1.0);
+  }
+}

client/components/main/spinner_double_bounce.jade

@@ -0,0 +1,7 @@
+template(name="spinnerDoubleBounce")
+  .sk-spinner.sk-spinner-double-bounce(class=currentBoard.colorClass)
+    +spinnerDoubleBounceRaw
+
+template(name="spinnerDoubleBounceRaw")
+  .sk-double-bounce1
+  .sk-double-bounce2

client/components/main/spinner_double_bounce.styl

@@ -0,0 +1,44 @@
+@import 'nib'
+
+// From https://github.com/tobiasahlin/SpinKit
+.sk-spinner-double-bounce {
+  width: 40px;
+  height: 40px;
+
+  position: relative;
+  margin: 100px auto;
+}
+
+.sk-double-bounce1, .sk-double-bounce2 {
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  background-color: #333;
+  opacity: 0.6;
+  position: absolute;
+  top: 0;
+  left: 0;
+
+  -webkit-animation: sk-bounce 2.0s infinite ease-in-out;
+  animation: sk-bounce 2.0s infinite ease-in-out;
+}
+
+.sk-double-bounce2 {
+  -webkit-animation-delay: -1.0s;
+  animation-delay: -1.0s;
+}
+
+@-webkit-keyframes sk-bounce {
+  0%, 100% { -webkit-transform: scale(0.0) }
+  50% { -webkit-transform: scale(1.0) }
+}
+
+@keyframes sk-bounce {
+  0%, 100% {
+    transform: scale(0.0);
+    -webkit-transform: scale(0.0);
+  } 50% {
+    transform: scale(1.0);
+    -webkit-transform: scale(1.0);
+  }
+}

client/components/main/spinner_rotateplane.jade

@@ -0,0 +1,6 @@
+template(name="spinnerRotateplane")
+  .sk-spinner.sk-spinner-rotateplane(class=currentBoard.colorClass)
+    +spinnerRotateplaneRaw
+
+template(name="spinnerRotateplaneRaw")
+  .sk-rotateplane1

client/components/main/spinner_rotateplane.styl

@@ -0,0 +1,38 @@
+@import 'nib'
+
+// From https://github.com/tobiasahlin/SpinKit
+.sk-spinner-rotateplane {
+  width: 40px;
+  height: 40px;
+  text-align: center;
+
+  margin: 100px auto;
+  -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
+  animation: sk-rotateplane 1.2s infinite ease-in-out;
+
+  div {
+    background-color: #333;
+    height: 100%;
+    width: 100%;
+    display: inline-block;
+  }
+}
+
+@-webkit-keyframes sk-rotateplane {
+  0% { -webkit-transform: perspective(120px) }
+  50% { -webkit-transform: perspective(120px) rotateY(180deg) }
+  100% { -webkit-transform: perspective(120px) rotateY(180deg)  rotateX(180deg) }
+}
+
+@keyframes sk-rotateplane {
+  0% {
+    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
+    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
+  } 50% {
+    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
+    -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
+  } 100% {
+    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
+    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
+  }
+}

client/components/main/spinner_scaleout.jade

@@ -0,0 +1,6 @@
+template(name="spinnerScaleout")
+  .sk-spinner.sk-spinner-scaleout(class=currentBoard.colorClass)
+    +spinnerScaleoutRaw
+
+template(name="spinnerScaleoutRaw")
+  .sk-scaleout1

client/components/main/spinner_scaleout.styl

@@ -0,0 +1,40 @@
+@import 'nib'
+
+// From https://github.com/tobiasahlin/SpinKit
+.sk-spinner-scaleout {
+  width: 40px;
+  height: 40px;
+  text-align: center;
+
+  margin: 100px auto;
+
+  border-radius: 100%;
+  -webkit-animation: sk-scaleout 1.0s infinite ease-in-out;
+  animation: sk-scaleout 1.0s infinite ease-in-out;
+
+  div {
+    background-color: #333;
+    height: 100%;
+    width: 100%;
+    display: inline-block;
+  }
+}
+
+@-webkit-keyframes sk-scaleout {
+  0% { -webkit-transform: scale(0) }
+  100% {
+    -webkit-transform: scale(1.0);
+    opacity: 0;
+  }
+}
+
+@keyframes sk-scaleout {
+  0% {
+    -webkit-transform: scale(0);
+    transform: scale(0);
+  } 100% {
+    -webkit-transform: scale(1.0);
+    transform: scale(1.0);
+    opacity: 0;
+  }
+}

client/components/main/spinner_wave.jade

@@ -0,0 +1,15 @@
+template(name="spinnerWave")
+  .sk-spinner.sk-spinner-wave(class=currentBoard.colorClass)
+    +spinnerWaveRaw
+
+template(name="spinnerWaveRaw")
+  .sk-rect1
+  |  
+  .sk-rect2
+  |  
+  .sk-rect3
+  |  
+  .sk-rect4
+  |  
+  .sk-rect5
+  |  

client/components/main/spinner_wave.styl

@@ -1,21 +1,7 @@
 @import 'nib'
 
-/*
- * From https://github.com/tobiasahlin/SpinKit
- *
- * Usage:
- *
- *    <div class="sk-spinner sk-spinner-wave">
- *      <div class="sk-rect1"></div>
- *      <div class="sk-rect2"></div>
- *      <div class="sk-rect3"></div>
- *      <div class="sk-rect4"></div>
- *      <div class="sk-rect5"></div>
- *    </div>
- *
- */
-
-.sk-spinner {
+// From https://github.com/tobiasahlin/SpinKit
+.sk-spinner-wave {
   width: 50px;
   height: 50px;
   margin: auto;