fossilfranv/wekan
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
franv 2020-09-04 10:22:51 -07:00
commit 9b2dab266e
604 changed files with 153528 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6054
CHANGELOG.md Normal file
View File

File diff suppressed because it is too large Load Diff

4
CONTRIBUTING.md Normal file
View File

@ -0,0 +1,4 @@
To get started, [please sign the Contributor License Agreement](https://www.clahub.com/agreements/wekan/wekan).
[Then, please read documentation at wiki](https://github.com/wekan/wekan/wiki).

300
Dockerfile Normal file
View File

@ -0,0 +1,300 @@
FROM ubuntu:rolling
LABEL maintainer="wekan"
# Set the environment variables (defaults where required)
# DOES NOT WORK: paxctl fix for alpine linux: https://github.com/wekan/wekan/issues/1303
# ENV BUILD_DEPS="paxctl"
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.18.3 \
METEOR_RELEASE=1.10.2 \
USE_EDGE=false \
METEOR_EDGE=1.5-beta.17 \
NPM_VERSION=latest \
FIBERS_VERSION=4.0.1 \
ARCHITECTURE=linux-x64 \
SRC_PATH=./ \
WITH_API=true \
ACCOUNTS_LOCKOUT_KNOWN_USERS_FAILURES_BEFORE=3 \
ACCOUNTS_LOCKOUT_KNOWN_USERS_PERIOD=60 \
ACCOUNTS_LOCKOUT_KNOWN_USERS_FAILURE_WINDOW=15 \
ACCOUNTS_LOCKOUT_UNKNOWN_USERS_FAILURES_BERORE=3 \
ACCOUNTS_LOCKOUT_UNKNOWN_USERS_LOCKOUT_PERIOD=60 \
ACCOUNTS_LOCKOUT_UNKNOWN_USERS_FAILURE_WINDOW=15 \
RICHER_CARD_COMMENT_EDITOR=false \
CARD_OPENED_WEBHOOK_ENABLED=false \
ATTACHMENTS_STORE_PATH="" \
MAX_IMAGE_PIXEL="" \
IMAGE_COMPRESS_RATIO="" \
NOTIFICATION_TRAY_AFTER_READ_DAYS_BEFORE_REMOVE="" \
BIGEVENTS_PATTERN=NONE \
NOTIFY_DUE_DAYS_BEFORE_AND_AFTER="" \
NOTIFY_DUE_AT_HOUR_OF_DAY="" \
EMAIL_NOTIFICATION_TIMEOUT=30000 \
MATOMO_ADDRESS="" \
MATOMO_SITE_ID="" \
MATOMO_DO_NOT_TRACK=true \
MATOMO_WITH_USERNAME=false \
BROWSER_POLICY_ENABLED=true \
TRUSTED_URL="" \
WEBHOOKS_ATTRIBUTES="" \
OAUTH2_ENABLED=false \
OAUTH2_LOGIN_STYLE=redirect \
OAUTH2_CLIENT_ID="" \
OAUTH2_SECRET="" \
OAUTH2_SERVER_URL="" \
OAUTH2_AUTH_ENDPOINT="" \
OAUTH2_USERINFO_ENDPOINT="" \
OAUTH2_TOKEN_ENDPOINT="" \
OAUTH2_ID_MAP="" \
OAUTH2_USERNAME_MAP="" \
OAUTH2_FULLNAME_MAP="" \
OAUTH2_ID_TOKEN_WHITELIST_FIELDS="" \
OAUTH2_REQUEST_PERMISSIONS='openid profile email' \
OAUTH2_EMAIL_MAP="" \
LDAP_ENABLE=false \
LDAP_PORT=389 \
LDAP_HOST="" \
LDAP_BASEDN="" \
LDAP_LOGIN_FALLBACK=false \
LDAP_RECONNECT=true \
LDAP_TIMEOUT=10000 \
LDAP_IDLE_TIMEOUT=10000 \
LDAP_CONNECT_TIMEOUT=10000 \
LDAP_AUTHENTIFICATION=false \
LDAP_AUTHENTIFICATION_USERDN="" \
LDAP_AUTHENTIFICATION_PASSWORD="" \
LDAP_LOG_ENABLED=false \
LDAP_BACKGROUND_SYNC=false \
LDAP_BACKGROUND_SYNC_INTERVAL="" \
LDAP_BACKGROUND_SYNC_KEEP_EXISTANT_USERS_UPDATED=false \
LDAP_BACKGROUND_SYNC_IMPORT_NEW_USERS=false \
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="" \
LDAP_SEARCH_PAGE_SIZE=0 \
LDAP_SEARCH_SIZE_LIMIT=0 \
LDAP_GROUP_FILTER_ENABLE=false \
LDAP_GROUP_FILTER_OBJECTCLASS="" \
LDAP_GROUP_FILTER_GROUP_ID_ATTRIBUTE="" \
LDAP_GROUP_FILTER_GROUP_MEMBER_ATTRIBUTE="" \
LDAP_GROUP_FILTER_GROUP_MEMBER_FORMAT="" \
LDAP_GROUP_FILTER_GROUP_NAME="" \
LDAP_UNIQUE_IDENTIFIER_FIELD="" \
LDAP_UTF8_NAMES_SLUGIFY=true \
LDAP_USERNAME_FIELD="" \
LDAP_FULLNAME_FIELD="" \
LDAP_MERGE_EXISTING_USERS=false \
LDAP_EMAIL_FIELD="" \
LDAP_EMAIL_MATCH_ENABLE=false \
LDAP_EMAIL_MATCH_REQUIRE=false \
LDAP_EMAIL_MATCH_VERIFIED=false \
LDAP_SYNC_USER_DATA=false \
LDAP_SYNC_USER_DATA_FIELDMAP="" \
LDAP_SYNC_GROUP_ROLES="" \
LDAP_DEFAULT_DOMAIN="" \
LDAP_SYNC_ADMIN_STATUS="" \
LDAP_SYNC_ADMIN_GROUPS="" \
HEADER_LOGIN_ID="" \
HEADER_LOGIN_FIRSTNAME="" \
HEADER_LOGIN_LASTNAME="" \
HEADER_LOGIN_EMAIL="" \
LOGOUT_WITH_TIMER=false \
LOGOUT_IN="" \
LOGOUT_ON_HOURS="" \
LOGOUT_ON_MINUTES="" \
CORS="" \
CORS_ALLOW_HEADERS="" \
CORS_EXPOSE_HEADERS="" \
DEFAULT_AUTHENTICATION_METHOD="" \
SCROLLINERTIA="0" \
SCROLLAMOUNT="auto" \
SCROLLDELTAFACTOR="auto" \
PASSWORD_LOGIN_ENABLED=true
# Copy the app to the image
COPY ${SRC_PATH} /home/wekan/app
RUN \
set -o xtrace && \
# Add non-root user wekan
useradd --user-group --system --home-dir /home/wekan wekan && \
\
# OS dependencies
apt-get update -y && apt-get install -y --no-install-recommends ${BUILD_DEPS} && \
#pip3 install -U pip setuptools wheel && \
\
# Meteor installer doesn't work with the default tar binary, so using bsdtar while installing.
# https://github.com/coreos/bugs/issues/1095#issuecomment-350574389
cp $(which tar) $(which tar)~ && \
ln -sf $(which bsdtar) $(which tar) && \
\
# Download nodejs
wget https://nodejs.org/dist/${NODE_VERSION}/node-${NODE_VERSION}-${ARCHITECTURE}.tar.gz && \
wget https://nodejs.org/dist/${NODE_VERSION}/SHASUMS256.txt.asc && \
#---------------------------------------------------------------------------------------------
# Node Fibers 100% CPU usage issue:
# https://github.com/wekan/wekan-mongodb/issues/2#issuecomment-381453161
# https://github.com/meteor/meteor/issues/9796#issuecomment-381676326
# https://github.com/sandstorm-io/sandstorm/blob/0f1fec013fe7208ed0fd97eb88b31b77e3c61f42/shell/server/00-startup.js#L99-L129
# Also see beginning of wekan/server/authentication.js
# import Fiber from "fibers";
# Fiber.poolSize = 1e9;
# OLD: Download node version 8.12.0 prerelease that has fix included, => Official 8.12.0 has been released
# Description at https://releases.wekan.team/node.txt
#wget https://releases.wekan.team/node-${NODE_VERSION}-${ARCHITECTURE}.tar.gz && \
#echo "1ed54adb8497ad8967075a0b5d03dd5d0a502be43d4a4d84e5af489c613d7795 node-v8.12.0-linux-x64.tar.gz" >> SHASUMS256.txt.asc && \
\
# Verify nodejs authenticity
grep ${NODE_VERSION}-${ARCHITECTURE}.tar.gz SHASUMS256.txt.asc | shasum -a 256 -c - && \
#export GNUPGHOME="$(mktemp -d)" && \
#\
# Try other key servers if ha.pool.sks-keyservers.net is unreachable
# Code from https://github.com/chorrell/docker-node/commit/2b673e17547c34f17f24553db02beefbac98d23c
# gpg keys listed at https://github.com/nodejs/node#release-team
# and keys listed here from previous version of this Dockerfile
#for key in \
#9554F04D7259F04124DE6B476D5A82AC7E37093B \
#94AE36675C464D64BAFA68DD7434390BDBE9B9C5 \
#FD3A5288F042B6850C66B31F09FE44734EB7990E \
#71DCFD284A79C3B38668286BC97EC7A07EDE3FC1 \
#DD8F2338BAE7501E3DD5AC78C273792F7D83545D \
#C4F0DFFF4E8C1A8236409D08E73BC641CC11F4C8 \
#B9AE9905FFD7803F25714661B63B535A4C206CA9 \
#; do \
#gpg --keyserver ha.pool.sks-keyservers.net --recv-keys "$key" || \
#gpg --keyserver pgp.mit.edu --recv-keys "$key" || \
#gpg --keyserver keyserver.pgp.com --recv-keys "$key" ; \
#done && \
#gpg --verify SHASUMS256.txt.asc && \
# Ignore socket files then delete files then delete directories
#find "$GNUPGHOME" -type f | xargs rm -f && \
#find "$GNUPGHOME" -type d | xargs rm -fR && \
rm -f SHASUMS256.txt.asc && \
\
# Install Node
tar xvzf node-${NODE_VERSION}-${ARCHITECTURE}.tar.gz && \
rm node-${NODE_VERSION}-${ARCHITECTURE}.tar.gz && \
mv node-${NODE_VERSION}-${ARCHITECTURE} /opt/nodejs && \
ln -s /opt/nodejs/bin/node /usr/bin/node && \
ln -s /opt/nodejs/bin/npm /usr/bin/npm && \
mkdir -p /opt/nodejs/lib/node_modules/fibers/.node-gyp /root/.node-gyp/8.16.1 /home/wekan/.config && \
chown wekan --recursive /home/wekan/.config && \
\
#DOES NOT WORK: paxctl fix for alpine linux: https://github.com/wekan/wekan/issues/1303
#paxctl -mC `which node` && \
\
# Install Node dependencies. Python path for node-gyp.
npm install -g npm@${NPM_VERSION} && \
#npm config set python python2.7 && \
#npm install -g node-gyp && \
#npm install -g fibers@${FIBERS_VERSION} && \
\
# Change user to wekan and install meteor
cd /home/wekan/ && \
chown wekan --recursive /home/wekan && \
#curl "https://install.meteor.com" -o /home/wekan/install_meteor.sh && \
#curl "https://install.meteor.com/?release=${METEOR_RELEASE}" -o /home/wekan/install_meteor.sh && \
# OLD: sed -i "s|RELEASE=.*|RELEASE=${METEOR_RELEASE}\"\"|g" ./install_meteor.sh && \
# Install Meteor forcing its progress
#sed -i 's/VERBOSITY="--silent"/VERBOSITY="--progress-bar"/' ./install_meteor.sh && \
echo "Starting meteor ${METEOR_RELEASE} installation... \n" && \
gosu wekan:wekan curl https://install.meteor.com/ | /bin/sh && \
mv /root/.meteor /home/wekan/ && \
chown wekan --recursive /home/wekan/.meteor && \
\
# Check if opting for a release candidate instead of major release
#if [ "$USE_EDGE" = false ]; then \
#gosu wekan:wekan sh /home/wekan/install_meteor.sh; \
# gosu wekan:wekan curl https://install.meteor.com/ | sh; \
#else \
# gosu wekan:wekan git clone --recursive --depth 1 -b release/METEOR@${METEOR_EDGE} https://github.com/meteor/meteor.git /home/wekan/.meteor; \
#fi; \
#\
# Get additional packages
#mkdir -p /home/wekan/app/packages && \
#chown wekan:wekan --recursive /home/wekan && \
# REPOS BELOW ARE INCLUDED TO WEKAN REPO
#cd /home/wekan/app/packages && \
#gosu wekan:wekan git clone --depth 1 -b master https://github.com/wekan/flow-router.git kadira-flow-router && \
#gosu wekan:wekan git clone --depth 1 -b master https://github.com/meteor-useraccounts/core.git meteor-useraccounts-core && \
#gosu wekan:wekan git clone --depth 1 -b master https://github.com/wekan/meteor-accounts-cas.git && \
#gosu wekan:wekan git clone --depth 1 -b master https://github.com/wekan/wekan-ldap.git && \
#gosu wekan:wekan git clone --depth 1 -b master https://github.com/wekan/wekan-scrollbar.git && \
#gosu wekan:wekan git clone --depth 1 -b master https://github.com/wekan/meteor-accounts-oidc.git && \
#gosu wekan:wekan git clone --depth 1 -b master --recurse-submodules https://github.com/wekan/markdown.git && \
#gosu wekan:wekan mv meteor-accounts-oidc/packages/switch_accounts-oidc wekan-accounts-oidc && \
#gosu wekan:wekan mv meteor-accounts-oidc/packages/switch_oidc wekan-oidc && \
#gosu wekan:wekan rm -rf meteor-accounts-oidc && \
sed -i 's/api\.versionsFrom/\/\/api.versionsFrom/' /home/wekan/app/packages/meteor-useraccounts-core/package.js && \
cd /home/wekan/.meteor && \
gosu wekan:wekan /home/wekan/.meteor/meteor -- help; \
\
# extract the OpenAPI specification
#npm install -g api2html@0.3.3 && \
#mkdir -p /home/wekan/python && \
#chown wekan --recursive /home/wekan/python && \
#cd /home/wekan/python && \
#gosu wekan:wekan git clone --depth 1 -b master https://github.com/Kronuz/esprima-python && \
#cd /home/wekan/python/esprima-python && \
#python3 setup.py install --record files.txt && \
#cd /home/wekan/app && \
#mkdir -p /home/wekan/app/public/api && \
#chown wekan --recursive /home/wekan/app && \
#gosu wekan:wekan python3 ./openapi/generate_openapi.py --release $(git describe --tags --abbrev=0) > ./public/api/wekan.yml && \
#gosu wekan:wekan /opt/nodejs/bin/api2html -c ./public/logo-header.png -o ./public/api/wekan.html ./public/api/wekan.yml; \
# Build app
cd /home/wekan/app && \
mkdir -p /home/wekan/.npm && \
chown wekan --recursive /home/wekan/.npm /home/wekan/.config /home/wekan/.meteor && \
#gosu wekan:wekan /home/wekan/.meteor/meteor add standard-minifier-js && \
gosu wekan:wekan npm install && \
gosu wekan:wekan /home/wekan/.meteor/meteor build --directory /home/wekan/app_build && \
cp /home/wekan/app/fix-download-unicode/cfs_access-point.txt /home/wekan/app_build/bundle/programs/server/packages/cfs_access-point.js && \
#rm /home/wekan/app_build/bundle/programs/server/npm/node_modules/meteor/rajit_bootstrap3-datepicker/lib/bootstrap-datepicker/node_modules/phantomjs-prebuilt/lib/phantom/bin/phantomjs && \
chown wekan /home/wekan/app_build/bundle/programs/server/packages/cfs_access-point.js && \
#Removed binary version of bcrypt because of security vulnerability that is not fixed yet.
#https://github.com/wekan/wekan/commit/4b2010213907c61b0e0482ab55abb06f6a668eac
#https://github.com/wekan/wekan/commit/7eeabf14be3c63fae2226e561ef8a0c1390c8d3c
#cd /home/wekan/app_build/bundle/programs/server/npm/node_modules/meteor/npm-bcrypt && \
#gosu wekan:wekan rm -rf node_modules/bcrypt && \
#gosu wekan:wekan npm install bcrypt && \
#
# Delete phantomjs
#cd /home/wekan/app_build/bundle && \
#find . -name "*phantomjs*" | xargs rm -rf && \
#
cd /home/wekan/app_build/bundle/programs/server/ && \
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 && \
mv /home/wekan/app_build/bundle /build && \
\
# Put back the original tar
mv $(which tar)~ $(which tar) && \
\
# Cleanup
apt-get remove --purge -y ${BUILD_DEPS} && \
apt-get autoremove -y && \
npm uninstall -g api2html &&\
rm -R /var/lib/apt/lists/* && \
rm -R /home/wekan/.meteor && \
rm -R /home/wekan/app && \
rm -R /home/wekan/app_build
#cat /home/wekan/python/esprima-python/files.txt | xargs rm -R && \
#rm -R /home/wekan/python
#rm /home/wekan/install_meteor.sh
ENV PORT=8080
EXPOSE $PORT
USER wekan
CMD ["node", "/build/main.js"]

77
Dockerfile.arm64v8 Normal file
View File

@ -0,0 +1,77 @@
FROM amd64/alpine:3.7 AS builder
# Set the environment variables for builder
ENV QEMU_VERSION=v4.2.0-6 \
QEMU_ARCHITECTURE=aarch64 \
NODE_ARCHITECTURE=linux-arm64 \
NODE_VERSION=v12.18.3 \
WEKAN_VERSION=3.96 \
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 && \
\
# Download wekan and shasum
wget https://releases.wekan.team/raspi3/wekan-${WEKAN_VERSION}-${WEKAN_ARCHITECTURE}.zip && \
wget https://releases.wekan.team/raspi3/SHA256SUMS.txt && \
# Verify wekan
grep wekan-${WEKAN_VERSION}-${WEKAN_ARCHITECTURE}.zip SHA256SUMS.txt | sha256sum -c - && \
\
# Unzip wekan
unzip wekan-${WEKAN_VERSION}-${WEKAN_ARCHITECTURE}.zip && \
\
# Download node and shasums
wget https://nodejs.org/dist/${NODE_VERSION}/node-${NODE_VERSION}-${NODE_ARCHITECTURE}.tar.gz && \
wget https://nodejs.org/dist/${NODE_VERSION}/SHASUMS256.txt.asc && \
\
# Verify nodejs authenticity
grep node-${NODE_VERSION}-${NODE_ARCHITECTURE}.tar.gz SHASUMS256.txt.asc | sha256sum -c - && \
\
# Extract node and remove tar.gz
tar xvzf node-${NODE_VERSION}-${NODE_ARCHITECTURE}.tar.gz
# Build wekan dockerfile
FROM arm64v8/ubuntu:19.10
LABEL maintainer="wekan"
# Set the environment variables (defaults where required)
ENV QEMU_ARCHITECTURE=aarch64 \
NODE_ARCHITECTURE=linux-arm64 \
NODE_VERSION=v12.18.3 \
NODE_ENV=production \
NPM_VERSION=latest \
WITH_API=true \
PORT=8080 \
ROOT_URL=http://localhost \
MONGO_URL=mongodb://127.0.0.1:27017/wekan
# Copy qemu-static to image
COPY --from=builder qemu-${QEMU_ARCHITECTURE}-static /usr/bin
# Copy the app to the image
COPY --from=builder bundle /home/wekan/bundle
# Copy
COPY --from=builder node-${NODE_VERSION}-${NODE_ARCHITECTURE} /opt/nodejs
RUN \
set -o xtrace && \
# Add non-root user wekan
useradd --user-group --system --home-dir /home/wekan wekan && \
\
# Install Node
ln -s /opt/nodejs/bin/node /usr/bin/node && \
ln -s /opt/nodejs/bin/npm /usr/bin/npm && \
mkdir -p /opt/nodejs/lib/node_modules/fibers/.node-gyp /root/.node-gyp/8.16.1 /home/wekan/.config && \
chown wekan --recursive /home/wekan/.config && \
\
# Install Node dependencies
npm install -g npm@${NPM_VERSION}
EXPOSE $PORT
USER wekan
CMD ["node", "/home/wekan/bundle/main.js"]

21
LICENSE Normal file
View File

@ -0,0 +1,21 @@
The MIT License (MIT)
Copyright (c) 2014-2019 The Wekan Team
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

121
README.md Normal file
View File

@ -0,0 +1,121 @@
[![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
[![Contributors](https://img.shields.io/github/contributors/wekan/wekan.svg "Contributors")](https://github.com/wekan/wekan/graphs/contributors)
[![Docker Repository on Quay](https://quay.io/repository/wekan/wekan/status "Docker Repository on Quay")](https://quay.io/repository/wekan/wekan)
[![Docker Hub container status](https://img.shields.io/docker/build/wekanteam/wekan.svg "Docker Hub container status")](https://hub.docker.com/r/wekanteam/wekan)
[![Docker Hub pulls](https://img.shields.io/docker/pulls/wekanteam/wekan.svg "Docker Hub Pulls")](https://hub.docker.com/r/wekanteam/wekan)
[![Wekan Build Status][travis_badge]][travis_status]
[![Codacy Badge](https://api.codacy.com/project/badge/Grade/02137ecec4e34c5aa303f57637196a93 "Codacy Badge")](https://www.codacy.com/app/xet7/wekan?utm_source=github.com&utm_medium=referral&utm_content=wekan/wekan&utm_campaign=Badge_Grade)
[![Code Climate](https://codeclimate.com/github/wekan/wekan/badges/gpa.svg "Code Climate")](https://codeclimate.com/github/wekan/wekan)
[![Project Dependencies](https://david-dm.org/wekan/wekan.svg "Project Dependencies")](https://david-dm.org/wekan/wekan)
[![Code analysis at Open Hub](https://img.shields.io/badge/code%20analysis-at%20Open%20Hub-brightgreen.svg "Code analysis at Open Hub")](https://www.openhub.net/p/wekan)
[![FOSSA Status](https://app.fossa.io/api/projects/git%2Bgithub.com%2Fwekan%2Fwekan.svg?type=shield)](https://app.fossa.io/projects/git%2Bgithub.com%2Fwekan%2Fwekan?ref=badge_shield)
## [Translate Wekan at Transifex](https://transifex.com/wekan/wekan)
Translations to non-English languages are accepted only at [Transifex](https://transifex.com/wekan/wekan) using webbrowser.
New English strings of new features can be added as PRs to edge branch file wekan/i18n/en.i18n.json .
## [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.
[Wekan IRC FAQ](https://github.com/wekan/wekan/wiki/IRC-FAQ)
## FAQ
**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 :)
## About Wekan
Wekan is an completely [Open Source][open_source] and [Free software][free_software]
collaborative kanban board application with MIT license.
Whether you’re maintaining a personal todo list, planning your holidays with some friends,
or working in a team on your next revolutionary idea, Kanban boards are an unbeatable tool
to keep your things organized. They give you a visual overview of the current state of your project,
and make you productive by allowing you to focus on the few items that matter the most.
Since Wekan is a free software, you don’t have to trust us with your data and can
install Wekan on your own computer or server. In fact we encourage you to do
that by providing one-click installation on various platforms.
- Wekan is used in [most countries of the world](https://snapcraft.io/wekan).
- Wekan largest user has 13k users using Wekan in their company.
- Wekan has been [translated](https://transifex.com/wekan/wekan) to about 50 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.
## Requirements
- 64bit: Linux [Snap](https://github.com/wekan/wekan-snap/wiki/Install) or [Sandstorm](https://sandstorm.io) /
[Mac](https://github.com/wekan/wekan/wiki/Mac) / [Windows](https://github.com/wekan/wekan/wiki/Install-Wekan-from-source-on-Windows).
[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.
- 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.
Wekan on Sandstorm is not usually affected by any Standalone Wekan (Snap/Docker/Source) security issues.
- [Reporting all new bugs immediately](https://github.com/wekan/wekan/issues).
New features and fixes are added to Wekan [many times a day](https://github.com/wekan/wekan/blob/devel/CHANGELOG.md).
- [Backups](https://github.com/wekan/wekan/wiki/Backup) of Wekan database once a day miminum.
Bugs, updates, users deleting list or card, harddrive full, harddrive crash etc can eat your data. There is no undo yet.
Some bug can cause Wekan board to not load at all, requiring manual fixing of database content.
## Roadmap and Demo
[Roadmap][roadmap_wekan] - Public read-only board at Wekan demo.
[Developer Documentation][dev_docs]
- There is many companies and individuals contributing code to Wekan, to add features and bugfixes
[many times a day](https://github.com/wekan/wekan/blob/devel/CHANGELOG.md).
- [Please add Add new Feature Requests and Bug Reports immediately](https://github.com/wekan/wekan/issues).
- [Commercial Support](https://wekan.team/commercial-support/).
We also welcome sponsors for features and bugfixes.
By working directly with Wekan you get the benefit of active maintenance and new features added by growing Wekan developer community.
## Screenshot
[More screenshots at Features page](https://github.com/wekan/wekan/wiki/Features)
[![Screenshot of Wekan][screenshot_wekan]][roadmap_wekan]
## License
Wekan is released under the very permissive [MIT license](LICENSE), and made
with [Meteor](https://www.meteor.com).
[platforms]: https://github.com/wekan/wekan/wiki/Platforms
[dev_docs]: https://github.com/wekan/wekan/wiki/Developer-Documentation
[screenshot_wekan]: https://wekan.github.io/wekan-markdown.png
[features]: https://github.com/wekan/wekan/wiki/Features
[roadmap_wekan]: https://boards.wekan.team/b/D2SzJKZDS4Z48yeQH/wekan-open-source-kanban-board-with-mit-license
[wekan_issues]: https://github.com/wekan/wekan/issues
[wekan_issues]: https://github.com/wekan/wekan/issues
[docker_image]: https://hub.docker.com/r/wekanteam/wekan/
[travis_badge]: https://travis-ci.org/wekan/wekan.svg?branch=devel
[travis_status]: https://travis-ci.org/wekan/wekan
[wekan_wiki]: https://github.com/wekan/wekan/wiki
[translate_wekan]: https://www.transifex.com/wekan/wekan/
[open_source]: https://en.wikipedia.org/wiki/Open-source_software
[free_software]: https://en.wikipedia.org/wiki/Free_software
[vanila_badge]: https://vanila.io/img/join-chat-button2.png
[wekan_chat]: https://community.vanila.io/wekan
[![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)

129
SECURITY.md Normal file
View File

@ -0,0 +1,129 @@
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
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.
## How should reports be formatted?
```
Name: %name
Twitter: %twitter
Bug type: %bugtype
Domain: %domain
Severity: %severity
URL: %url
PoC: %poc
CVSS (optional): %cvss
CWSS (optional): %cwss
```
## Who can participate in the program
Anyone who reports a unique security issue in scope and does not disclose it to
a third party before we have patched and updated may be upon their approval
added to the Wekan Hall of Fame.
## Which domains are in scope?
No public domains, because all those are donated to Wekan Open Source project,
and we don't have any permissions to do security scans on those donated servers
Please don't perform research that could impact other users. Secondly, please keep
the reports short and succinct. If we fail to understand the logics of your bug, we will tell you.
You can [Install Wekan](https://github.com/wekan/wekan/releases) to your own computer
and scan it's vulnerabilities there.
## About Wekan versions
There are only 2 versions of Wekan: Standalone Wekan, and Sandstorm Wekan.
### Standalone Wekan Security
Standalone Wekan includes all non-Sandstorm platforms. Some Standalone Wekan platforms
like Snap and Docker have their own specific sandboxing etc features.
Standalone Wekan by default does not load any files from Internet, like fonts, CSS, etc.
This also means all Standalone Wekan functionality works in offline local networks.
Wekan is used by companies that have [thousands of users](https://github.com/wekan/wekan/wiki/AWS) and at healthcare.
Wekan uses xss package for input fields like cards, as you can see from
[package.json](https://github.com/wekan/wekan/blob/devel/package.json). Other used versions can be seen from
[Meteor versions file](https://github.com/wekan/wekan/blob/devel/.meteor/versions).
Forms can include markdown links, html, image tags etc like you see at https://wekan.github.io .
It's possible to add attachments to cards, and markdown/html links to files.
Wekan attachments are not accessible without logging in. Import from Trello works by copying
Trello export JSON to Wekan Trello import page, and in Trello JSON file there is direct links to all publicly
accessible Trello attachment files, that Standalone Wekan downloads directly to Wekan MongoDB database in
[CollectionFS](https://github.com/wekan/wekan/pull/875) format. When Wekan board is exported in
Wekan JSON format, all board attachments are included in Wekan JSON file as base64 encoded text.
That Wekan JSON format file can be imported to Sandstorm Wekan with all the attachments, when we get
latest Wekan version working on Sandstorm, only couple of bugs are left before that. In Sandstorm it's not
possible yet to import from Trello with attachments, because Wekan does not implement Sandstorm-compatible
access to outside of Wekan grain.
Standalone Wekan only has password auth currently, there is work in progress to add
[oauth2](https://github.com/wekan/wekan/pull/1578), [Openid](https://github.com/wekan/wekan/issues/538),
[LDAP](https://github.com/wekan/wekan/issues/119) etc. If you need more login security for Standalone Wekan now,
it's possible add additional [Google Auth proxybouncer](https://github.com/wekan/wekan/wiki/Let's-Encrypt-and-Google-Auth) in front of password auth, and then use Google Authenticator for Google Auth. Standalone Wekan does have [brute force protection with eluck:accounts-lockout and browser-policy clickjacking protection](https://github.com/wekan/wekan/blob/devel/CHANGELOG.md#v080-2018-04-04-wekan-release). You can also optionally use some [WAF](https://en.wikipedia.org/wiki/Web_application_firewall)
like for example [AWS WAF](https://aws.amazon.com/waf/).
[All Wekan Platforms](https://github.com/wekan/wekan/wiki/Platforms)
### Sandstorm Wekan Security
On Sandstorm platform using environment variable Standalone Wekan features like Admin Panel etc are
turned off, because Sandstorm platform provides SSO for all apps running on Sandstorm.
[Sandstorm](https://sandstorm.io) is separate Open Source platform that has been
[security audited](https://sandstorm.io/news/2017-03-02-security-review) and found bugs fixed.
Sandstorm also has passwordless login, LDAP, SAML, Google etc auth options already.
At Sandstorm code is read-only and signed by app maintainers, only grain content can be modified.
Wekan at Sandstorm runs in sandboxed grain, it does not have access elsewhere without user-visible
PowerBox request or opening randomly-generated API key URL.
Also read [Sandstorm Security Practices](https://docs.sandstorm.io/en/latest/using/security-practices/) and
[Sandstorm Security non-events](https://docs.sandstorm.io/en/latest/using/security-non-events/).
For Sandstorm specific security issues you can contact [kentonv](https://github.com/kentonv) by email.
## What Wekan bugs are eligible?
Any typical web security bugs. If any of the previously mentioned is somehow problematic and
a security issue, we'd like to know about it, and also how to fix it:
- Cross-site Scripting
- Open redirect
- Cross-site request forgery
- File inclusion
- Authentication bypass
- Server-side code execution
## What Wekan bugs are NOT eligible?
Typical already known or "no impact" bugs such as:
- Brute force password guessign. Currently there is
[brute force protection with eluck:accounts-lockout](https://github.com/wekan/wekan/blob/devel/CHANGELOG.md#v080-2018-04-04-wekan-release).
- Security issues related to that Wekan uses Meteor 1.6.0.1 related packages, and upgrading to newer
Meteor 1.6.1 is complicated process that requires lots of changes to many dependency packages.
Upgrading [has been tried many times, spending a lot of time](https://github.com/meteor/meteor/issues/9609)
but there still is issues. Helping with package upgrades is very welcome.
- [Wekan API old tokens not replaced correctly](https://github.com/wekan/wekan/issues/1437)
- Missing Cookie flags on non-session cookies or 3rd party cookies
- Logout CSRF
- Social engineering
- Denial of service
- SSL BEAST/CRIME/etc. Wekan does not have SSL built-in, it uses Caddy/Nginx/Apache etc at front.
Integrated Caddy support is updated often.
- Email spoofing, SPF, DMARC & DKIM. Wekan does not include email server.
Wekan is Open Source with MIT license, and free to use also for commercial use.
We welcome all fixes to improve security by email to security (at) wekan.team .
## Bonus Points
If your Responsible Security Disclosure includes code for fixing security issue,
you get bonus points, as seen on [Hall of Fame](https://wekan.github.io/hall-of-fame).

9
Stackerfile.yml Normal file
View File

@ -0,0 +1,9 @@
appId: wekan-public/apps/77b94f60-dec9-0136-304e-16ff53095928
appVersion: "v4.25.0"
files:
userUploads:
- README.md
userScripts:
build: stacksmith/user-scripts/build.sh
boot: stacksmith/user-scripts/boot.sh
run: stacksmith/user-scripts/run.sh

3
app.env Executable file
View File

@ -0,0 +1,3 @@
#!/bin/bash
export PACKAGE_DIRS="$(pwd)/packages"

19
app.json Normal file
View File

@ -0,0 +1,19 @@
{
"name": "Wekan",
"description": "The open-source kanban",
"repository": "https://github.com/wekan/wekan",
"logo": "https://raw.githubusercontent.com/wekan/wekan/master/meta/icons/wekan-150.png",
"keywords": ["productivity", "tool", "team", "kanban"],
"website": "https://wekan.github.io",
"env": {
"BUILDPACK_URL": "https://github.com/AdmitHub/meteor-buildpack-horse.git",
"ROOT_URL": {
"description": "IMPORTANT! Please replace <App Name> with the value provided on the top. This will be the full URL of your Wekan app.",
"value": "https://<App Name>.herokuapp.com"
}
},
"addons": [
"mongolab",
"logentries"
]
}

6
client/00-startup.js Normal file
View File

@ -0,0 +1,6 @@
// PWA
if ('serviceWorker' in navigator) {
window.addEventListener('load', function() {
navigator.serviceWorker.register('/pwa-service-worker.js');
});
}

208
client/components/activities/activities.jade Normal file
View File

@ -0,0 +1,208 @@
template(name="activities")
.activities.js-sidebar-activities
//- We should use Template.dynamic here but there is a bug with
//- blaze-components: https://github.com/peerlibrary/meteor-blaze-components/issues/30
if $eq mode "board"
+boardActivities
else
+cardActivities
template(name="boardActivities")
each activityData in currentBoard.activities
+activity(activity=activityData card=card mode=mode)
template(name="cardActivities")
each activityData in currentCard.activities
+activity(activity=activityData card=card mode=mode)
template(name="activity")
.activity
+userAvatar(userId=activity.user._id)
p.activity-desc
+memberName(user=activity.user)
//- attachment activity -------------------------------------------------
if($eq activity.activityType 'deleteAttachment')
| {{{_ 'activity-delete-attach' cardLink}}}.
if($eq activity.activityType 'addAttachment')
| {{{_ 'activity-attached' attachmentLink cardLink}}}.
if($neq mode 'board')
if activity.attachment.isImage
img.attachment-image-preview(src=activity.attachment.url)
//- board activity ------------------------------------------------------
if($eq mode 'board')
if($eq activity.activityType 'createBoard')
| {{{_ 'activity-created' boardLabelLink}}}.
if($eq activity.activityType 'importBoard')
| {{{_ 'activity-imported-board' boardLabelLink sourceLink}}}.
if($eq activity.activityType 'addBoardMember')
| {{{_ 'activity-added' memberLink boardLabelLink}}}.
if($eq activity.activityType 'removeBoardMember')
| {{{_ 'activity-excluded' memberLink boardLabelLink}}}.
//- card activity -------------------------------------------------------
if($eq activity.activityType 'createCard')
if($eq mode 'card')
| {{{_ 'activity-added' cardLabelLink (sanitize activity.listName)}}}.
else
| {{{_ 'activity-added' cardLabelLink boardLabelLink}}}.
if($eq activity.activityType 'importCard')
| {{{_ 'activity-imported' cardLink boardLabelLink sourceLink}}}.
if($eq activity.activityType 'moveCard')
| {{{_ 'activity-moved' cardLabelLink (sanitize activity.oldList.title) (sanitize activity.list.title)}}}.
if($eq activity.activityType 'moveCardBoard')
| {{{_ 'activity-moved' cardLink (sanitize activity.oldBoardName) (sanitize activity.boardName)}}}.
if($eq activity.activityType 'archivedCard')
| {{{_ 'activity-archived' cardLink}}}.
if($eq activity.activityType 'restoredCard')
| {{{_ 'activity-sent' cardLink boardLabelLink}}}.
//- checklist activity --------------------------------------------------
if($eq activity.activityType 'addChecklist')
| {{{_ 'activity-checklist-added' cardLink}}}.
if($eq mode 'card')
.activity-checklist
+viewer
= activity.checklist.title
else
a.activity-checklist(href="{{ activity.card.absoluteUrl }}")
+viewer
= activity.checklist.title
if($eq activity.activityType 'removedChecklist')
| {{{_ 'activity-checklist-removed' cardLink}}}.
if($eq activity.activityType 'completeChecklist')
| {{{_ 'activity-checklist-completed' (sanitize activity.checklist.title) cardLink}}}.
if($eq activity.activityType 'uncompleteChecklist')
| {{{_ 'activity-checklist-uncompleted' (sanitize activity.checklist.title) cardLink}}}.
if($eq activity.activityType 'checkedItem')
| {{{_ 'activity-checked-item' (sanitize checkItem) (sanitize activity.checklist.title) cardLink}}}.
if($eq activity.activityType 'uncheckedItem')
| {{{_ 'activity-unchecked-item' (sanitize checkItem) (sanitize activity.checklist.title) cardLink}}}.
if($eq activity.activityType 'addChecklistItem')
| {{{_ 'activity-checklist-item-added' (sanitize activity.checklist.title) cardLink}}}.
.activity-checklist(href="{{ activity.card.absoluteUrl }}")
+viewer
= activity.checklistItem.title
if($eq activity.activityType 'removedChecklistItem')
| {{{_ 'activity-checklist-item-removed' (sanitize activity.checklist.title) cardLink}}}.
//- comment activity ----------------------------------------------------
if($eq mode 'card')
//- if we are in card mode we display the comment in a way that it
//- can be edited by the owner
if($eq activity.activityType 'addComment')
+inlinedForm(classNames='js-edit-comment')
+editor(autofocus=true)
= activity.comment.text
.edit-controls
button.primary(type="submit") {{_ 'edit'}}
else
.activity-comment
+viewer
= activity.comment.text
span(title=activity.createdAt).activity-meta {{ moment activity.createdAt }}
if ($eq currentUser._id activity.comment.userId)
= ' - '
a.js-open-inlined-form {{_ "edit"}}
= ' - '
a.js-delete-comment {{_ "delete"}}
if($eq activity.activityType 'deleteComment')
| {{{_ 'activity-deleteComment' currentData.commentId}}}.
if($eq activity.activityType 'editComment')
| {{{_ 'activity-editComment' currentData.commentId}}}.
else
//- 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 }}")
+viewer
= activity.comment.text
//- customField activity ------------------------------------------------
if($eq mode 'board')
if($eq activity.activityType 'createCustomField')
| {{_ 'activity-customfield-created' customField}}.
if($eq activity.activityType 'setCustomField')
| {{{_ 'activity-set-customfield' (sanitize lastCustomField) (sanitize lastCustomFieldValue) cardLink}}}.
if($eq activity.activityType 'unsetCustomField')
| {{{_ 'activity-unset-customfield' (sanitize lastCustomField) cardLink}}}.
//- label activity ------------------------------------------------------
if($eq activity.activityType 'addedLabel')
| {{{_ 'activity-added-label' (sanitize lastLabel) cardLink}}}.
if($eq activity.activityType 'removedLabel')
| {{{_ 'activity-removed-label' (sanitize lastLabel) cardLink}}}.
//- list activity -------------------------------------------------------
if($neq mode 'card')
if($eq activity.activityType 'createList')
| {{{_ 'activity-added' (sanitize listLabel) boardLabelLink}}}.
if($eq activity.activityType 'importList')
| {{{_ 'activity-imported' (sanitize listLabel) boardLabelLink sourceLink}}}.
if($eq activity.activityType 'removeList')
| {{{_ 'activity-removed' (sanitize activity.title) boardLabelLink}}}.
if($eq activity.activityType 'archivedList')
| {{_ 'activity-archived' (sanitize listLabel)}}.
//- member activity ----------------------------------------------------
if($eq activity.activityType 'joinMember')
if($eq user._id activity.member._id)
| {{{_ 'activity-joined' cardLink}}}.
else
| {{{_ 'activity-added' memberLink cardLink}}}.
if($eq activity.activityType 'unjoinMember')
if($eq user._id activity.member._id)
| {{{_ 'activity-unjoined' cardLink}}}.
else
| {{{_ 'activity-removed' memberLink cardLink}}}.
//- swimlane activity --------------------------------------------------
if($neq mode 'card')
if($eq activity.activityType 'createSwimlane')
| {{_ 'activity-added' (sanitize activity.swimlane.title) boardLabelLink}}.
if($eq activity.activityType 'archivedSwimlane')
| {{_ 'activity-archived' (sanitize activity.swimlane.title)}}.
//- I don't understand this part ----------------------------------------
if(currentData.timeKey)
| {{_ activity.activityType }}
= ' '
i(title=currentData.timeValue).activity-meta {{ moment currentData.timeValue 'LLL' }}
if (currentData.timeOldValue)
= ' '
| {{{_ "previous_as" }}}
= ' '
i(title=currentData.timeOldValue).activity-meta {{ moment currentData.timeOldValue 'LLL' }}
= ' @'
else if(currentData.timeValue)
| {{_ activity.activityType currentData.timeValue}}
span(title=activity.createdAt).activity-meta {{ moment activity.createdAt }}

246
client/components/activities/activities.js Normal file
View File

@ -0,0 +1,246 @@
import sanitizeXss from 'xss';
const activitiesPerPage = 20;
BlazeComponent.extendComponent({
onCreated() {
// XXX Should we use ReactiveNumber?
this.page = new ReactiveVar(1);
this.loadNextPageLocked = false;
// TODO is sidebar always available? E.g. on small screens/mobile devices
const sidebar = Sidebar;
sidebar && sidebar.callFirstWith(null, 'resetNextPeak');
this.autorun(() => {
let mode = this.data().mode;
const capitalizedMode = Utils.capitalize(mode);
let thisId, searchId;
if (mode === 'linkedcard' || mode === 'linkedboard') {
thisId = Session.get('currentCard');
searchId = Cards.findOne({ _id: thisId }).linkedId;
mode = mode.replace('linked', '');
} else {
thisId = Session.get(`current${capitalizedMode}`);
searchId = thisId;
}
const limit = this.page.get() * activitiesPerPage;
const user = Meteor.user();
const hideSystem = user ? user.hasHiddenSystemMessages() : false;
if (searchId === null) return;
this.subscribe('activities', mode, searchId, limit, hideSystem, () => {
this.loadNextPageLocked = false;
// TODO the guard can be removed as soon as the TODO above is resolved
if (!sidebar) return;
// If the sibear peak hasn't increased, that mean that there are no more
// activities, and we can stop calling new subscriptions.
// XXX This is hacky! We need to know excatly and reactively how many
// activities there are, we probably want to denormalize this number
// dirrectly into card and board documents.
const nextPeakBefore = sidebar.callFirstWith(null, 'getNextPeak');
sidebar.calculateNextPeak();
const nextPeakAfter = sidebar.callFirstWith(null, 'getNextPeak');
if (nextPeakBefore === nextPeakAfter) {
sidebar.callFirstWith(null, 'resetNextPeak');
}
});
});
},
loadNextPage() {
if (this.loadNextPageLocked === false) {
this.page.set(this.page.get() + 1);
this.loadNextPageLocked = true;
}
},
}).register('activities');
BlazeComponent.extendComponent({
checkItem() {
const checkItemId = this.currentData().activity.checklistItemId;
const checkItem = ChecklistItems.findOne({ _id: checkItemId });
return checkItem && checkItem.title;
},
boardLabelLink() {
const data = this.currentData();
if (data.mode !== 'board') {
return createBoardLink(data.activity.board(), data.activity.listName);
}
return TAPi18n.__('this-board');
},
cardLabelLink() {
const data = this.currentData();
if (data.mode !== 'card') {
return createCardLink(data.activity.card());
}
return TAPi18n.__('this-card');
},
cardLink() {
return createCardLink(this.currentData().activity.card());
},
lastLabel() {
const lastLabelId = this.currentData().activity.labelId;
if (!lastLabelId) return null;
const lastLabel = Boards.findOne(
this.currentData().activity.boardId,
).getLabelById(lastLabelId);
if (lastLabel && (lastLabel.name === undefined || lastLabel.name === '')) {
return lastLabel.color;
} else {
return lastLabel.name;
}
},
lastCustomField() {
const lastCustomField = CustomFields.findOne(
this.currentData().activity.customFieldId,
);
if (!lastCustomField) return null;
return lastCustomField.name;
},
lastCustomFieldValue() {
const lastCustomField = CustomFields.findOne(
this.currentData().activity.customFieldId,
);
if (!lastCustomField) return null;
const value = this.currentData().activity.value;
if (
lastCustomField.settings.dropdownItems &&
lastCustomField.settings.dropdownItems.length > 0
) {
const dropDownValue = _.find(
lastCustomField.settings.dropdownItems,
item => {
return item._id === value;
},
);
if (dropDownValue) return dropDownValue.name;
}
return value;
},
listLabel() {
const activity = this.currentData().activity;
const list = activity.list();
return (list && list.title) || activity.title;
},
sourceLink() {
const source = this.currentData().activity.source;
if (source) {
if (source.url) {
return Blaze.toHTML(
HTML.A(
{
href: source.url,
},
sanitizeXss(source.system),
),
);
} else {
return sanitizeXss(source.system);
}
}
return null;
},
memberLink() {
return Blaze.toHTMLWithData(Template.memberName, {
user: this.currentData().activity.member(),
});
},
attachmentLink() {
const attachment = this.currentData().activity.attachment();
// trying to display url before file is stored generates js errors
return (
(attachment &&
attachment.url({ download: true }) &&
Blaze.toHTML(
HTML.A(
{
href: attachment.url({ download: true }),
target: '_blank',
},
sanitizeXss(attachment.name()),
),
)) ||
sanitizeXss(this.currentData().activity.attachmentName)
);
},
customField() {
const customField = this.currentData().activity.customField();
if (!customField) return null;
return customField.name;
},
events() {
return [
{
// XXX We should use Popup.afterConfirmation here
'click .js-delete-comment'() {
const commentId = this.currentData().activity.commentId;
CardComments.remove(commentId);
},
'submit .js-edit-comment'(evt) {
evt.preventDefault();
const commentText = this.currentComponent()
.getValue()
.trim();
const commentId = Template.parentData().activity.commentId;
if (commentText) {
CardComments.update(commentId, {
$set: {
text: commentText,
},
});
}
},
},
];
},
}).register('activity');
Template.activity.helpers({
sanitize(value) {
return sanitizeXss(value);
},
});
function createCardLink(card) {
if (!card) return '';
return (
card &&
Blaze.toHTML(
HTML.A(
{
href: card.absoluteUrl(),
class: 'action-card',
},
sanitizeXss(card.title),
),
)
);
}
function createBoardLink(board, list) {
let text = board.title;
if (list) text += `: ${list}`;
return (
board &&
Blaze.toHTML(
HTML.A(
{
href: board.absoluteUrl(),
class: 'action-board',
},
sanitizeXss(text),
),
)
);
}

48
client/components/activities/activities.styl Normal file
View File

@ -0,0 +1,48 @@
@import 'nib'
.activity-title
margin: 0 0.5em 0.8em
display: flex
justify-content:space-between
.activities
clear: both
.activity
margin: 0.5px 0
display: flex
.member
width: 24px
height: @width
.activity-desc
word-wrap: break-word
overflow: hidden
flex: 1
align-self: center
margin: 0
margin-left: 3px
overflow: hidden;
word-break: break-word;
.activity-comment
display: block
border-radius: 3px
background: white
text-decoration: none
box-shadow: 0 1px 2px rgba(0,0,0,.2)
margin-top: 5px
padding: 5px
.activity-checklist
display: block
border-radius: 3px
background: white
text-decoration: none
box-shadow: 0 1px 2px rgba(0,0,0,.2)
margin-top: 5px
padding: 5px
.activity-meta
font-size: 0.8em
color: darken(white, 40%)

9
client/components/activities/comments.jade Normal file
View File

@ -0,0 +1,9 @@
template(name="commentForm")
.new-comment.js-new-comment(
class="{{#if commentFormIsOpen}}is-open{{/if}}")
+userAvatar(userId=currentUser._id)
form.js-new-comment-form
+editor(class="js-new-comment-input")
| {{getUnsavedValue 'cardComment' currentCard._id}}
.add-controls
button.primary.confirm.clear.js-add-comment(type="submit") {{_ 'comment'}}

94
client/components/activities/comments.js Normal file
View File

@ -0,0 +1,94 @@
const commentFormIsOpen = new ReactiveVar(false);
BlazeComponent.extendComponent({
onDestroyed() {
commentFormIsOpen.set(false);
},
commentFormIsOpen() {
return commentFormIsOpen.get();
},
getInput() {
return this.$('.js-new-comment-input');
},
events() {
return [
{
'submit .js-new-comment-form'(evt) {
const input = this.getInput();
const text = input.val().trim();
const card = this.currentData();
let boardId = card.boardId;
let cardId = card._id;
if (card.isLinkedCard()) {
boardId = Cards.findOne(card.linkedId).boardId;
cardId = card.linkedId;
}
if (text) {
CardComments.insert({
text,
boardId,
cardId,
});
resetCommentInput(input);
Tracker.flush();
autosize.update(input);
input.trigger('submitted');
}
evt.preventDefault();
},
// Pressing Ctrl+Enter should submit the form
'keydown form textarea'(evt) {
if (evt.keyCode === 13 && (evt.metaKey || evt.ctrlKey)) {
this.find('button[type=submit]').click();
}
},
},
];
},
}).register('commentForm');
// XXX This should be a static method of the `commentForm` component
function resetCommentInput(input) {
input.val(''); // without manually trigger, input event won't be fired
input.blur();
commentFormIsOpen.set(false);
}
// XXX This should handled a `onUpdated` callback of the `commentForm` component
// but since this callback doesn't exists, and `onRendered` is not called if the
// data is not destroyed and recreated, we simulate the desired callback using
// Tracker.autorun to register the component dependencies, and re-run when these
// dependencies are invalidated. A better component API would remove this hack.
Tracker.autorun(() => {
Session.get('currentCard');
Tracker.afterFlush(() => {
autosize.update($('.js-new-comment-input'));
});
});
EscapeActions.register(
'inlinedForm',
() => {
const draftKey = {
fieldName: 'cardComment',
docId: Session.get('currentCard'),
};
const commentInput = $('.js-new-comment-input');
const draft = commentInput.val().trim();
if (draft) {
UnsavedEdits.set(draftKey, draft);
} else {
UnsavedEdits.reset(draftKey);
}
resetCommentInput(commentInput);
},
() => {
return commentFormIsOpen.get();
},
{
noClickEscapeOn: '.js-new-comment',
},
);

68
client/components/activities/comments.styl Normal file
View File

@ -0,0 +1,68 @@
@import 'nib'
.new-comment
position: relative
margin: 0 0 20px 38px
.member
opacity: .7
position: absolute
top: 1px
left: -38px
&.is-open
.member
opacity: 1
.helper
display: inline-block
textarea
min-height: 100px
color: #4d4d4d
cursor: auto
overflow: hidden
word-wrap: break-word
.too-long
margin-top: 8px
textarea
background-color: #fff
border: 0
box-shadow: 0 1px 2px rgba(0, 0, 0, .23)
color: #8c8c8c
height: 36px
margin: 4px 4px 6px 0
padding: 9px 11px
width: 100%
&:hover,
&:is-open
background-color: #fff
box-shadow: 0 1px 3px rgba(0, 0, 0, .33)
border: 0
cursor: pointer
&:is-open
cursor: auto
.comment-item
background-color: #fff
border: 0
box-shadow: 0 1px 2px rgba(0, 0, 0, .23)
color: #8c8c8c
height: 36px
margin: 4px 4px 6px 0
width: 92%
&:hover
background: darken(white, 12%)
&.add-comment
display: flex
margin: 5px
a
display: block
margin: auto

22
client/components/boards/boardArchive.jade Normal file
View File

@ -0,0 +1,22 @@
template(name="archivedBoards")
h2
i.fa.fa-archive
| {{_ 'archived-boards'}}
ul.archived-lists
each archivedBoards
li.archived-lists-item
div.board-header-btns
button.board-header-btn.js-delete-board
i.fa.fa-trash-o
| {{_ 'delete-board'}}
button.board-header-btn.js-restore-board
i.fa.fa-undo
| {{_ 'restore-board'}}
= title
else
li.no-items-message {{_ 'no-archived-boards'}}
template(name="boardDeletePopup")
p {{_ 'delete-board-confirm-popup'}}
button.js-confirm.negate.full(type="submit") {{_ 'delete'}}

48
client/components/boards/boardArchive.js Normal file
View File

@ -0,0 +1,48 @@
BlazeComponent.extendComponent({
onCreated() {
this.subscribe('archivedBoards');
},
archivedBoards() {
return Boards.find(
{ archived: true },
{
sort: { sort: 1 /* boards default sorting */ },
},
);
},
events() {
return [
{
'click .js-restore-board'() {
// TODO : Make isSandstorm variable global
const isSandstorm =
Meteor.settings &&
Meteor.settings.public &&
Meteor.settings.public.sandstorm;
if (isSandstorm && Session.get('currentBoard')) {
const currentBoard = Boards.findOne(Session.get('currentBoard'));
currentBoard.archive();
}
const board = this.currentData();
board.restore();
Utils.goBoardId(board._id);
},
'click .js-delete-board': Popup.afterConfirm('boardDelete', function() {
Popup.close();
const isSandstorm =
Meteor.settings &&
Meteor.settings.public &&
Meteor.settings.public.sandstorm;
if (isSandstorm && Session.get('currentBoard')) {
const currentBoard = Boards.findOne(Session.get('currentBoard'));
Boards.remove(currentBoard._id);
}
Boards.remove(this._id);
FlowRouter.go('home');
}),
},
];
},
}).register('archivedBoards');

42
client/components/boards/boardBody.jade Normal file
View File

@ -0,0 +1,42 @@
template(name="board")
if isBoardReady.get
if currentBoard
if onlyShowCurrentCard
+cardDetails(currentCard)
else
+boardBody
else
//-- XXX We need a better error message in case the board has been archived
+message(label="board-not-found")
//-- | {{goHome}}
else
+spinner
template(name="boardBody")
.board-wrapper(class=currentBoard.colorClass)
+sidebar
.board-canvas.js-swimlanes(
class="{{#if Sidebar.isOpen}}is-sibling-sidebar-open{{/if}}"
class="{{#if MultiSelection.isActive}}is-multiselection-active{{/if}}"
class="{{#if draggingActive.get}}is-dragging-active{{/if}}")
if showOverlay.get
.board-overlay
if currentBoard.isTemplatesBoard
each currentBoard.swimlanes
+swimlane(this)
else if isViewSwimlanes
each currentBoard.swimlanes
+swimlane(this)
else if isViewLists
+listsGroup(currentBoard)
else if isViewCalendar
+calendarView
else
+listsGroup(currentBoard)
template(name="calendarView")
if isViewCalendar
.calendar-view.swimlane
if currentCard
+cardDetails(currentCard)
+fullcalendar(calendarOptions)

423
client/components/boards/boardBody.js Normal file
View File

@ -0,0 +1,423 @@
import { Cookies } from 'meteor/ostrio:cookies';
const cookies = new Cookies();
const subManager = new SubsManager();
const { calculateIndex } = Utils;
const swimlaneWhileSortingHeight = 150;
BlazeComponent.extendComponent({
onCreated() {
this.isBoardReady = new ReactiveVar(false);
// The pattern we use to manually handle data loading is described here:
// https://kadira.io/academy/meteor-routing-guide/content/subscriptions-and-data-management/using-subs-manager
// XXX The boardId should be readed from some sort the component "props",
// unfortunatly, Blaze doesn't have this notion.
this.autorun(() => {
const currentBoardId = Session.get('currentBoard');
if (!currentBoardId) return;
const handle = subManager.subscribe('board', currentBoardId, false);
Tracker.nonreactive(() => {
Tracker.autorun(() => {
this.isBoardReady.set(handle.ready());
});
});
});
},
onlyShowCurrentCard() {
return Utils.isMiniScreen() && Session.get('currentCard');
},
goHome() {
FlowRouter.go('home');
},
}).register('board');
BlazeComponent.extendComponent({
onCreated() {
this.showOverlay = new ReactiveVar(false);
this.draggingActive = new ReactiveVar(false);
this._isDragging = false;
// Used to set the overlay
this.mouseHasEnterCardDetails = false;
// fix swimlanes sort field if there are null values
const currentBoardData = Boards.findOne(Session.get('currentBoard'));
const nullSortSwimlanes = currentBoardData.nullSortSwimlanes();
if (nullSortSwimlanes.count() > 0) {
const swimlanes = currentBoardData.swimlanes();
let count = 0;
swimlanes.forEach(s => {
Swimlanes.update(s._id, {
$set: {
sort: count,
},
});
count += 1;
});
}
// fix lists sort field if there are null values
const nullSortLists = currentBoardData.nullSortLists();
if (nullSortLists.count() > 0) {
const lists = currentBoardData.lists();
let count = 0;
lists.forEach(l => {
Lists.update(l._id, {
$set: {
sort: count,
},
});
count += 1;
});
}
},
onRendered() {
const boardComponent = this;
const $swimlanesDom = boardComponent.$('.js-swimlanes');
$swimlanesDom.sortable({
tolerance: 'pointer',
appendTo: '.board-canvas',
helper(evt, item) {
const helper = $(`<div class="swimlane"
style="flex-direction: column;
height: ${swimlaneWhileSortingHeight}px;
width: $(boardComponent.width)px;
overflow: hidden;"/>`);
helper.append(item.clone());
// Also grab the list of lists of cards
const list = item.next();
helper.append(list.clone());
return helper;
},
items: '.swimlane:not(.placeholder)',
placeholder: 'swimlane placeholder',
distance: 7,
start(evt, ui) {
const listDom = ui.placeholder.next('.js-swimlane');
const parentOffset = ui.item.parent().offset();
ui.placeholder.height(ui.helper.height());
EscapeActions.executeUpTo('popup-close');
listDom.addClass('moving-swimlane');
boardComponent.setIsDragging(true);
ui.placeholder.insertAfter(ui.placeholder.next());
boardComponent.origPlaceholderIndex = ui.placeholder.index();
// resize all swimlanes + headers to be a total of 150 px per row
// this could be achieved by setIsDragging(true) but we want immediate
// result
ui.item
.siblings('.js-swimlane')
.css('height', `${swimlaneWhileSortingHeight - 26}px`);
// set the new scroll height after the resize and insertion of
// the placeholder. We want the element under the cursor to stay
// at the same place on the screen
ui.item.parent().get(0).scrollTop =
ui.placeholder.get(0).offsetTop + parentOffset.top - evt.pageY;
},
beforeStop(evt, ui) {
const parentOffset = ui.item.parent().offset();
const siblings = ui.item.siblings('.js-swimlane');
siblings.css('height', '');
// compute the new scroll height after the resize and removal of
// the placeholder
const scrollTop =
ui.placeholder.get(0).offsetTop + parentOffset.top - evt.pageY;
// then reset the original view of the swimlane
siblings.removeClass('moving-swimlane');
// and apply the computed scrollheight
ui.item.parent().get(0).scrollTop = scrollTop;
},
stop(evt, ui) {
// To attribute the new index number, we need to get the DOM element
// of the previous and the following card -- if any.
const prevSwimlaneDom = ui.item.prevAll('.js-swimlane').get(0);
const nextSwimlaneDom = ui.item.nextAll('.js-swimlane').get(0);
const sortIndex = calculateIndex(prevSwimlaneDom, nextSwimlaneDom, 1);
$swimlanesDom.sortable('cancel');
const swimlaneDomElement = ui.item.get(0);
const swimlane = Blaze.getData(swimlaneDomElement);
Swimlanes.update(swimlane._id, {
$set: {
sort: sortIndex.base,
},
});
boardComponent.setIsDragging(false);
},
sort(evt, ui) {
// get the mouse position in the sortable
const parentOffset = ui.item.parent().offset();
const cursorY =
evt.pageY - parentOffset.top + ui.item.parent().scrollTop();
// compute the intended index of the placeholder (we need to skip the
// slots between the headers and the list of cards)
const newplaceholderIndex = Math.floor(
cursorY / swimlaneWhileSortingHeight,
);
let destPlaceholderIndex = (newplaceholderIndex + 1) * 2;
// if we are scrolling far away from the bottom of the list
if (destPlaceholderIndex >= ui.item.parent().get(0).childElementCount) {
destPlaceholderIndex = ui.item.parent().get(0).childElementCount - 1;
}
// update the placeholder position in the DOM tree
if (destPlaceholderIndex !== ui.placeholder.index()) {
if (destPlaceholderIndex < boardComponent.origPlaceholderIndex) {
ui.placeholder.insertBefore(
ui.placeholder
.siblings()
.slice(destPlaceholderIndex - 2, destPlaceholderIndex - 1),
);
} else {
ui.placeholder.insertAfter(
ui.placeholder
.siblings()
.slice(destPlaceholderIndex - 1, destPlaceholderIndex),
);
}
}
},
});
this.autorun(() => {
let showDesktopDragHandles = false;
currentUser = Meteor.user();
if (currentUser) {
showDesktopDragHandles = (currentUser.profile || {})
.showDesktopDragHandles;
} else if (cookies.has('showDesktopDragHandles')) {
showDesktopDragHandles = true;
} else {
showDesktopDragHandles = false;
}
if (Utils.isMiniScreen() || showDesktopDragHandles) {
$swimlanesDom.sortable({
handle: '.js-swimlane-header-handle',
});
} else if (!Utils.isMiniScreen() && !showDesktopDragHandles) {
$swimlanesDom.sortable({
handle: '.swimlane-header',
});
}
// Disable drag-dropping if the current user is not a board member
$swimlanesDom.sortable('option', 'disabled', !userIsMember());
});
function userIsMember() {
return (
Meteor.user() &&
Meteor.user().isBoardMember() &&
!Meteor.user().isCommentOnly()
);
}
// If there is no data in the board (ie, no lists) we autofocus the list
// creation form by clicking on the corresponding element.
const currentBoard = Boards.findOne(Session.get('currentBoard'));
if (userIsMember() && currentBoard.lists().count() === 0) {
boardComponent.openNewListForm();
}
},
isViewSwimlanes() {
currentUser = Meteor.user();
if (currentUser) {
return (currentUser.profile || {}).boardView === 'board-view-swimlanes';
} else {
return cookies.get('boardView') === 'board-view-swimlanes';
}
},
isViewLists() {
currentUser = Meteor.user();
if (currentUser) {
return (currentUser.profile || {}).boardView === 'board-view-lists';
} else {
return cookies.get('boardView') === 'board-view-lists';
}
},
isViewCalendar() {
currentUser = Meteor.user();
if (currentUser) {
return (currentUser.profile || {}).boardView === 'board-view-cal';
} else {
return cookies.get('boardView') === 'board-view-cal';
}
},
openNewListForm() {
if (this.isViewSwimlanes()) {
this.childComponents('swimlane')[0]
.childComponents('addListAndSwimlaneForm')[0]
.open();
} else if (this.isViewLists()) {
this.childComponents('listsGroup')[0]
.childComponents('addListForm')[0]
.open();
}
},
events() {
return [
{
// XXX The board-overlay div should probably be moved to the parent
// component.
mouseup() {
if (this._isDragging) {
this._isDragging = false;
}
},
},
];
},
// XXX Flow components allow us to avoid creating these two setter methods by
// exposing a public API to modify the component state. We need to investigate
// best practices here.
setIsDragging(bool) {
this.draggingActive.set(bool);
},
scrollLeft(position = 0) {
const swimlanes = this.$('.js-swimlanes');
swimlanes &&
swimlanes.animate({
scrollLeft: position,
});
},
scrollTop(position = 0) {
const swimlanes = this.$('.js-swimlanes');
swimlanes &&
swimlanes.animate({
scrollTop: position,
});
},
}).register('boardBody');
BlazeComponent.extendComponent({
onRendered() {
this.autorun(function() {
$('#calendar-view').fullCalendar('refetchEvents');
});
},
calendarOptions() {
return {
id: 'calendar-view',
defaultView: 'agendaDay',
editable: true,
timezone: 'local',
header: {
left: 'title today prev,next',
center:
'agendaDay,listDay,timelineDay agendaWeek,listWeek,timelineWeek month,listMonth',
right: '',
},
// height: 'parent', nope, doesn't work as the parent might be small
height: 'auto',
/* TODO: lists as resources: https://fullcalendar.io/docs/vertical-resource-view */
navLinks: true,
nowIndicator: true,
businessHours: {
// days of week. an array of zero-based day of week integers (0=Sunday)
dow: [1, 2, 3, 4, 5], // Monday - Friday
start: '8:00',
end: '18:00',
},
locale: TAPi18n.getLanguage(),
events(start, end, timezone, callback) {
const currentBoard = Boards.findOne(Session.get('currentBoard'));
const events = [];
const pushEvent = function(card, title, start, end, extraCls) {
start = start || card.startAt;
end = end || card.endAt;
title = title || card.title;
const className =
(extraCls ? `${extraCls} ` : '') +
(card.color ? `calendar-event-${card.color}` : '');
events.push({
id: card._id,
title,
start,
end: end || card.endAt,
allDay:
Math.abs(end.getTime() - start.getTime()) / 1000 === 24 * 3600,
url: FlowRouter.url('card', {
boardId: currentBoard._id,
slug: currentBoard.slug,
cardId: card._id,
}),
className,
});
};
currentBoard
.cardsInInterval(start.toDate(), end.toDate())
.forEach(function(card) {
pushEvent(card);
});
currentBoard
.cardsDueInBetween(start.toDate(), end.toDate())
.forEach(function(card) {
pushEvent(
card,
`${card.title} ${TAPi18n.__('card-due')}`,
card.dueAt,
new Date(card.dueAt.getTime() + 36e5),
);
});
events.sort(function(first, second) {
return first.id > second.id ? 1 : -1;
});
callback(events);
},
eventResize(event, delta, revertFunc) {
let isOk = false;
const card = Cards.findOne(event.id);
if (card) {
card.setEnd(event.end.toDate());
isOk = true;
}
if (!isOk) {
revertFunc();
}
},
eventDrop(event, delta, revertFunc) {
let isOk = false;
const card = Cards.findOne(event.id);
if (card) {
// TODO: add a flag for allDay events
if (!event.allDay) {
card.setStart(event.start.toDate());
card.setEnd(event.end.toDate());
isOk = true;
}
}
if (!isOk) {
revertFunc();
}
},
};
},
isViewCalendar() {
currentUser = Meteor.user();
if (currentUser) {
return (currentUser.profile || {}).boardView === 'board-view-cal';
} else {
return cookies.get('boardView') === 'board-view-cal';
}
},
}).register('calendarView');

133
client/components/boards/boardBody.styl Normal file
View File

@ -0,0 +1,133 @@
@import 'nib'
position()
if arguments[0] == cover || arguments[0] == fixed-cover
if arguments[0] == cover
position: absolute
else
position: fixed
left: 0
right: 0
top: 0
bottom: 0
else
position: arguments
.board-wrapper
position: cover
overflow-x: hidden
overflow-y: hidden
.board-canvas
position: cover
transition: margin .1s
overflow-y: auto
&.is-sibling-sidebar-open
margin-right: 248px
.board-overlay
position: fixed-cover
top: -100px
right: -400px
background: black
opacity: 0.33
animation: fadeIn 0.2s
z-index: 16
&.is-dragging-active
.open-minicard-composer,
.minicard-wrapper.is-checked
display: none
@media screen and (max-width: 800px)
.board-wrapper
.board-canvas
.swimlane
border-bottom: 1px solid #CCC
display: flex
flex-direction: column
margin: 0
padding: 0 0px 0px 0
overflow-x: hidden
overflow-y: auto
calendar-event-color(background, borderColor, color...)
background: background !important
border-color: borderColor
if color
color: color !important //overwrite text for better visibility
.calendar-event-green
calendar-event-color(#3cb500, #2a8000, #ffffff) //White text for better visibility
.calendar-event-yellow
calendar-event-color(#fad900, #c7ac00, #000) //Black text for better visibility
.calendar-event-orange
calendar-event-color(#ff9f19, #cc7c14, #000) //Black text for better visibility
.calendar-event-red
calendar-event-color(#eb4646, #b83737, #ffffff) //White text for better visibility
.calendar-event-purple
calendar-event-color(#a632db, #7d26a6, #ffffff) //White text for better visibility
.calendar-event-blue
calendar-event-color(#0079bf, #005a8a, #ffffff) //White text for better visibility
.calendar-event-pink
calendar-event-color(#ff78cb, #cc62a3, #000) //Black text for better visibility
.calendar-event-sky
calendar-event-color(#00c2e0, #0094ab, #ffffff) //White text for better visibility
.calendar-event-black
calendar-event-color(#4d4d4d, #1a1a1a, #ffffff) //White text for better visibility
.calendar-event-lime
calendar-event-color(#51e898, #3eb375, #000) //Black text for better visibility
.calendar-event-silver
calendar-event-color(#c0c0c0, #8c8c8c, #000) //Black text for better visibility
.calendar-event-peachpuff
calendar-event-color(#ffdab9, #ccaf95, #000) //Black text for better visibility
.calendar-event-crimson
calendar-event-color(#dc143c, #a8112f, #ffffff) //White text for better visibility
.calendar-event-plum
calendar-event-color(#dda0dd, #a87ba8, #000) //Black text for better visibility
.calendar-event-darkgreen
calendar-event-color(#006400, #003000, #ffffff) //White text for better visibility
.calendar-event-slateblue
calendar-event-color(#6a5acd, #4f4399, #ffffff) //White text for better visibility
.calendar-event-magenta
calendar-event-color(#ff00ff, #cc00cc, #ffffff) //White text for better visibility
.calendar-event-gold
calendar-event-color(#ffd700, #ccaa00, #000) //Black text for better visibility
.calendar-event-navy
calendar-event-color(#000080, #000033, #ffffff) //White text for better visibility
.calendar-event-gray
calendar-event-color(#808080, #333333, #ffffff) //White text for better visibility
.calendar-event-saddlebrown
calendar-event-color(#8b4513, #572b0c, #ffffff) //White text for better visibility
.calendar-event-paleturquoise
calendar-event-color(#afeeee, #8ababa, #000) //Black text for better visibility
.calendar-event-mistyrose
calendar-event-color(#ffe4e1, #ccb8b6, #000) //Black text for better visibility
.calendar-event-indigo
calendar-event-color(#4b0082, #2b004d, #ffffff) //White text for better visibility

741
client/components/boards/boardColors.styl Normal file
View File

@ -0,0 +1,741 @@
// We define a set of six board colors that we took from the FlatUI palette.
// http://flatuicolors.com
//
// XXX Centralizing all these properties in a single file just because their
// value is derived from the same color, doesn't make any sense. We should
// create a mixin/macro that would generate 6 versions of a given property and
// dispatch this list in the other stylus files.
setBoardColor(color)
&#header,
&.sk-spinner div,
.board-backgrounds-list &.background-box,
.board-list & a
background-color: color
.is-selected .minicard
border-left: 3px solid color
button[type=submit].primary, input[type=submit].primary
background-color: darken(color, 20%)
&.pop-over .pop-over-list li a:not(.disabled):hover,
.sidebar .sidebar-content .sidebar-btn:hover,
.sidebar-list li a:hover
background-color: lighten(color, 10%)
&#header ul li.current, &#header-quick-access ul li.current
border-bottom: 2px solid lighten(color, 10%)
&#header-quick-access
background: darken(color, 10%)
color: white
&#header #header-main-bar .board-header-btn.emphasis
background: complement(color)
&:hover,
.board-header-btn-close
background: darken(complement(color), 10%)
&:hover .board-header-btn-close
background: darken(complement(color), 20%)
.materialCheckBox.is-checked
border-bottom: 2px solid color
border-right: 2px solid color
.is-multiselection-active .multi-selection-checkbox
&.is-checked + .minicard
background: lighten(color, 90%)
&:not(.is-checked) + .minicard:hover:not(.minicard-composer)
background: lighten(color, 97%)
.toggle-label
&:after
background-color: darken(color, 20%)
.toggle-switch:checked ~ .toggle-label
background-color: lighten(color, 20%)
&:after
background-color: darken(color, 20%)
@media screen and (max-width: 800px)
&.pop-over .header
background: color
color: white
&#header ul li.current, &#header-quick-access ul li.current
border-bottom: 4px solid lighten(color, 20%)
.board-color-nephritis
setBoardColor(#27AE60)
.board-color-pomegranate
setBoardColor(#C0392B)
.board-color-belize
setBoardColor(#2980B9)
.board-color-wisteria
setBoardColor(#8E44AD)
.board-color-midnight
setBoardColor(#2C3E50)
.board-color-pumpkin
setBoardColor(#E67E22)
.board-color-moderatepink
setBoardColor(#CD5A91)
.board-color-strongcyan
setBoardColor(#00AECC)
.board-color-limegreen
setBoardColor(#4BBF6B)
.board-color-dark
setBoardColor(#2C3E51)
/* Not hidden in dark mode.
card fields: received, start, due, end, members, requested, assigned
.card-details-item.card-details-item-received,
.card-details-item.card-details-item-start,
.card-details-item.card-details-item-due,
.card-details-item.card-details-item-end,
.card-details-item.card-details-item-members,
.card-details-item.card-details-item-name { display:none; }
.card-details-items:empty { display:none; }
*/
// DARK MODE, when dark background mode selected.
// Modified version from https://github.com/wekan/wekan/wiki/Custom-CSS-themes#dark-theme
// In progress, please send pull requests to fix remaining visibility issues.
.ui-sortable,
.swimlane,
.swimlane >.swimlane-header-wrap,
.swimlane >.list.js-list,
.swimlane >.list-composer.js-list-composer,
.list-body,
.list,
.list-composer,
.sidebar-content,
.card-details
background-color:#2C3E50
.card-details h3,
.card-details-items,
.card-checklist-items .ui-sortable,
.card-subtasks-items,
.activities,
.material-toggle-switch
color:#bbbbbb
.list-header
background-color: #888888
.board-widget,
.board-widget-labels,
.board-widget-members
color: #aaaaaa
/* popup menu titles (boards, swimlanes, lists, cards, labels) */
.pop-over >.header
display:none;
/* HIDE UNTIL HOVER -------------------------------------------------- */
/* header "+" button */
#header-quick-access .fa-plus
display:none
#header-quick-access:hover .fa-plus
display:inherit
/* "add card" links (use visibility rather than display so items don't jump) */
.open-minicard-composer
visibility:hidden
.list.js-list:hover .open-minicard-composer
visibility:visible
.list-header-menu
visibility:hidden
.list.js-list:hover .list-header-menu
visibility:visible
/* "add list/swimlane" links (use visibility rather than display so items don't jump) */
.list.js-list-composer >.list-header
visibility:hidden
.list.js-list-composer:hover >.list-header
visibility:visible
/* headers */
#header-quick-access, #header
background-color:rgba(0,0,0,.75) !important
#header .board-header-btn:hover
background-color:rgba(255,255,255,0.3) !important
/* foregrounds: swimlanes, lists */
.list >.list-header, .swimlane-header
color:rgba(255,255,255,.7)
/* minicards */
.minicard
background-color:rgba(255,255,255,.4)
.minicard-wrapper.is-selected .minicard,
.minicard:hover,
.minicard-composer.js-composer,
.open-minicard-composer:hover
background-color:rgba(255,255,255,.8) !important
color:#000
.minicard, .minicard .badge
color:#fff
.minicard:hover .badge, .minicard-wrapper.is-selected .badge
color:#000
/* cards */
.card-details .card-details-header
background-color:#ccc
/* sidebar */
.sidebar-tongue, .sidebar-shadow
background-color:#666 !important
.sidebar-content h3, .sidebar-content h2, .sidebar-content
color:rgba(255,255,255,.7) !important
.board-color-relax
setBoardColor(#27AE61)
// RELAX MODE: light green background, with green background color,
// to help this theme users to relax.
// Colors and emphasis are specific to this Wekan theme contributor's company.
.ui-sortable
background-color:#a7e366
.list-header
background-color:#a7e366
border-bottom: 6px solid #a7e366
.list-body
background-color:#a7e366
.list
border-left: 1px dotted #000000
// Card details text emphasis: black border and white background
// to make it details text field easier to find for RELAX MODE users,
// and focus attention.
.card-details .card-details-items
& ~ .js-open-inlined-form
.viewer
background-color #ffffff !important
padding 15px !important
border 1px solid #000000 !important
word-wrap: break-word
// When card has comment, emphasis on minicard:
// bigger red comment icon and number of comments,
// to make it easier notice card comments and focus attention.
.minicard .badges .badge
.badge-icon,
.badge-text
&.badge-comment
display: block
border-radius: 4px
padding: 1px 3px
margin-bottom: 0.3rem
color: #ff0000
background-color: #ffffff
font-weight: bold
font-size: 11pt
.board-color-corteza
setBoardColor(#568BA2)
/*
Wekan for Corteza https://cortezaproject.org
Theme to match Corteza colors from:
https://github.com/cortezaproject/corteza-webapp-messaging/blob/master/src/assets/sass/variables.scss
// Paths
$fonts_dir : './assets/fonts/';
$icomoon-font-path: $fonts_dir + 'icomoon' !default;
$icomoon-font-family: "icomoon" !default;
// Typography
$regular: 'nunito_sansregular';
$bold: 'nunito_sansbold';
$semibold: 'nunito_sanssemibold';
// Color system
$white: #fff !default;
$black: #000 !default;
$primary: #568ba2;
$secondary: #90A3B1;
$success: #719430;
$warning: #F5D380;
$danger: #E85568;
$light: #F3F3F5;
$dark: #1e2224;
$currentmymessagebgcolor : #a7d0e3;
*/
//.header-quick-access
// backgroud-color: #568ba2
/*
Alternate "Clear" Styling
*/
setBoardClear(color1,color2)
//color1: The quick access color
//color2: The main bar color
&.sk-spinner div,
.board-backgrounds-list &.background-box,
.board-list & a
background: linear-gradient(180deg, color1 0%, color2 100%)
//background: linear-gradient(180deg, rgb(73, 155, 234) 0%, rgb(0, 174, 204) 100%)
.is-selected .minicard
border-left: 3px solid color1
&.pop-over .pop-over-list li a:not(.disabled):hover,
.sidebar .sidebar-content .sidebar-btn:hover,
.sidebar-list li a:hover
background-color: lighten(color1, 10%)
&#header ul li.current, &#header-quick-access ul li.current
border-bottom: 4px solid lighten(color2, 10%)
&#header-quick-access
background: darken(color1, 10%)
//background: rgba(66,137,204,1)
color: #FFF
&#header-quick-access #header-new-board-icon,
&#header-quick-access #header-user-bar,
&#header-quick-access ul li
color: rgba(255,255,255,0.5)
// The background-color value here is not seen,
// its covered by the background of #header-main-bar
// it's just to aid transitions between boards
&#header
background-color: color2
border-bottom: 1px solid darken(color2, 20%)
border-top: 1px solid darken(color2, 40%)
// Since the theme uses a gradient for the header
// and gradients break transitions, it has to be set here
&#header #header-main-bar
background: linear-gradient(180deg, color1 0%, color2 100%)
&#header #header-main-bar p
margin-bottom: 6px
&#header #header-main-bar .board-header-btn.emphasis
background: lighten(color2, 10%)
&:hover,
.board-header-btn-close
background: rgba(0,0,0,0.2)
&:hover .board-header-btn-close
background: rgba(0,0,0,0.2)
.materialCheckBox.is-checked
border-bottom: 2px solid color1
border-right: 2px solid color1
.is-multiselection-active .multi-selection-checkbox
&.is-checked + .minicard
background: lighten(color2, 90%)
&:not(.is-checked) + .minicard:hover:not(.minicard-composer)
background: lighten(color2, 97%)
.toggle-switch:checked ~ .toggle-label
background-color: lighten(color1, 20%)
&:after
background-color: darken(color1, 20%)
.board-canvas
background: linear-gradient(135deg, color1 0%, color2 100%)
.swimlane
background: none
.list:first-child
margin-left: 15px
.list
background: rgba(255,255,255,0.35)
margin: 10px
border: 0
border-radius: 14px
.list.list-composer
background: rgba(255,255,255,0.1)
height: min-content
flex: unset
width: 270px
padding-bottom: 16px
.list.list-composer .open-list-composer
border-radius: 7px
color: rgba(0,0,0,0.3)
padding: 7px 10px
display: block
.list.list-composer .open-list-composer:hover
box-shadow: 0 1px 2px rgba(0,0,0,.2)
background: rgba(255,255,255,0.7)
color: rgba(0,0,0,0.6)
.list-header
background-color: rgba(255,255,255,0.25)
border-radius: 14px 14px 0 0
.list-header:not([class*="list-header-"])
border-bottom: 6px solid rgba(255,255,255,0)
.list-header .list-header-name
color: rgba(0,0,0,0.6)
.list-body
padding: 11px
.minicard
border-radius: 7px
padding: 10px 10px 4px 10px
box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.15)
color: #222
.card-details
border-radius: 0 0 14px 14px
box-shadow: 0 0 7px 0 rgba(0,0,0,0.5)
margin-left: -10px
.list-body .open-minicard-composer
border-radius: 7px
color: rgba(0,0,0,.3)
margin-bottom: 11px
.list-body .open-minicard-composer:hover
background: rgba(255,255,255,0.7)
color: rgba(0,0,0,0.6)
button[type=submit].primary, input[type=submit].primary
box-shadow: none
background-color: rgba(255,255,255,0.5)
color: rgba(0,0,0,0.55)
border-radius: 7px
border: 0
button[type="submit"].primary:hover, input[type="submit"].primary:hover
background-color: rgba(255,255,255,0.7)
color: rgba(0,0,0,0.8)
box-shadow: 0 1px 2px rgba(0,0,0,.2)
.quiet, .quiet a
color: rgba(0,0,0,0.4)
.list-header .list-header-watch-icon
color: rgba(0,0,0,0.5)
position: absolute
margin-top: -34px
margin-let: -11px
a.fa, a i.fa
color: rgba(0,0,0,0.3)
a:not(.disabled).is-active.fa, a:not(.disabled).is-active i.fa, a:not(.disabled):hover.fa, a:not(.disabled):hover i.fa
color: rgba(0,0,0,0.6)
input[type="email"], input[type="password"], input[type="text"]
border: 0
border-radius: 7px
.sidebar-shadow
box-shadow: none
border-left: 9px solid color2
.is-open .sidebar-shadow
box-shadow: -10px 0 8px rgba(0,0,0,0.3)
.list.ui-sortable-helper
transform:rotate(0deg)
.minicard-wrapper.placeholder
background: rgba(0,0,0,0.1)
.minicard-wrapper.ui-sortable-helper
transform:rotate(0deg)
opacity: 0.8
.list-body .open-minicard-composer
color: rgba(0,0,0,.3)
.swinlane.ui-sortable-helper
transform:rotate(0deg)
.swimlane .swimlane-header-wrap
background: linear-gradient(0deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.25) 100%)
.swimlane-header-wrap .inlined-form
width: 100%
.swimlane-header-wrap .list-composer
text-align: center
margin: 5px
.swimlane-header-wrap .list-name-input.full-line
margin: 0
display: inline-block
width: 270px
.swimlane-header-wrap .edit-controls
display: inline-block
vertical-align: middle
.swimlane-header-wrap .primary.confirm
margin-right: 0
.swimlane-header-wrap .fa.fa-times-thin
margin-top: 2px
// This is a general fix so that the little grabby hand appears when dragging the list via the title
.list.ui-sortable-helper,
.list.ui-sortable-helper .list-header.ui-sortable-handle,
.list.ui-sortable-helper .viewer
cursor:-webkit-grabbing;
cursor:grabbing
.board-color-clearblue
setBoardClear(rgb(73, 155, 234),rgb(0, 174, 204))
/*
Alternate "Natural" Styling
*/
.board-color-natural
setBoardColor(#596557)
&#header-quick-access
background-color: #2d392b
.ui-sortable
background-color:#dedede
.list-header
background-color: #c9cfc3
border-bottom: 6px solid #c9cfc3
.swimlane .swimlane-header-wrap
background-color: #c2c0ab
/*
Alternate "Modern" Styling
*/
.board-color-modern
setBoardColor(#2A80B8)
/* General */
body
background: #f5f5f5
&#header-quick-access
padding: 10px
font-size: 14px
background: #333 !important
&#header-quick-access ul
overflow: visible
&#header-quick-access ul li.current
border: 0 !important
font-weight: bold
&#header-quick-access ul li.separator
display: none
&#header-quick-access ul li:nth-child(3)
margin-right: 10px
&#header-quick-access ul li a
padding: 5px 10px
border-radius: 2px
&#header-quick-access ul li.current a
border-radius: 2px
background: rgba(255,255,255,.2)
&#header #header-main-bar h1
font-family: Poppins
font-weight: bold
&#header-quick-access #header-user-bar
position relative
&#header-quick-access #header-user-bar .header-user-bar-name
margin: 5px 3px 0 0;
section#notifications-drawer
top: 46px;
box-shadow: 0 4px 20px rgba(0,0,0,.1)
max-width: 100%
section#notifications-drawer .header
top: 46px;
border-radius: 0 3px
height: 21px
background: #f7f7f7
/* Swimlane */
.swimlane
background: #f5f5f5
.swimlane .swimlane-header-wrap .swimlane-header
font-family: Poppins
/* All board views */
.board-list .board-list-item
padding: 20px
.board-list-item-name
font-family: Poppins
/* Board */
.list
background: transparent
border-left: 0
margin: 10px 0
padding: 0px
border-radius: 5px
min-width: 300px
.list-body .open-minicard-composer:hover /*me*/
background: none
box-shadow: none
.list:first-child
margin-left: 5px
.list.list-composer.js-list-composer
transition: all .3s ease
min-width: 80px
.open-list-composer.js-open-inlined-form:hover
color: #222
.list-header
background: none
border-bottom-width: 0px
.list-header .list-header-name
font-family: Poppins
color: #000
font-weight: 500
/* Card changes */
.minicard
background: #FFF
padding: 15px 15px 10px
box-shadow: 0 3px 8px rgba(0,0,0,.05)
.minicard-plum:hover:not(.minicard-composer), .is-selected .minicard-plum, .draggable-hover-card .minicard-plum
background: none
.minicard-title
line-height: 1.5em
.minicard .minicard-cover
background-size: cover
margin: -15px -15px 10px
height: 100px
.card-label-orange
color: #fff
.card-date
font-size: 12px
padding: 3px 5px
/* Pop over */
.header-title
font-family: Poppins
font-size: 16px
color: #333
.pop-over
box-shadow: 0 4px 20px rgba(0,0,0,.2)
border: 0
border-radius: 5px
.pop-over .header
padding: 10px
border-bottom: 0
border-radius: 5px 5px 0 0
background:#eee
.pop-over .header .header-title
font-family: Poppins
font-size:16px
color:#333
.pop-over .header .close-btn
font-size:20px
top:6px
right:8px
.pop-over .content-container .content
padding: 5px 20px 20px
width: 260px
.pop-over-list li > a
border-radius: 5px
.pop-over-list li > a > i
margin-right: 5px
.pop-over-list li>a .sub-name
margin-bottom: 8px
/* Sidebar */
.sidebar .sidebar-shadow
box-shadow: 0 0 60px rgba(0,0,0,.2)
.sidebar .sidebar-content
padding: 30px
/* Notifications */
.board-color-modern section#notifications-drawer
border-radius:5px
.board-color-modern section#notifications-drawer .header
padding: 18px 16px
border-bottom: 0
border-radius: 5px 5px 0 0
background: #eee
.board-color-modern section#notifications-drawer .header h5
font-family: Poppins
font-weight: bold
.board-color-modern section#notifications-drawer .header .close
font-size: 20px
top: 14px
section#notifications-drawer .header .toggle-read
top: 18px

249
client/components/boards/boardHeader.jade Normal file
View File

@ -0,0 +1,249 @@
template(name="boardHeaderBar")
h1.header-board-menu
with currentBoard
a(class="{{#if currentUser.isBoardAdmin}}js-edit-board-title{{else}}is-disabled{{/if}}")
+viewer
= title
.board-header-btns.left
unless isMiniScreen
if currentBoard
if currentUser
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}}")
if showStarCounter
span
= currentBoard.stars
a.board-header-btn(
class="{{#if currentUser.isBoardAdmin}}js-change-visibility{{else}}is-disabled{{/if}}"
title="{{_ currentBoard.permission}}")
i.fa(class="{{#if currentBoard.isPublic}}fa-globe{{else}}fa-lock{{/if}}")
span {{_ currentBoard.permission}}
a.board-header-btn.js-watch-board(
title="{{_ watchLevel }}")
if $eq watchLevel "watching"
i.fa.fa-eye
if $eq watchLevel "tracking"
i.fa.fa-bell
if $eq watchLevel "muted"
i.fa.fa-bell-slash
span {{_ watchLevel}}
else
a.board-header-btn.js-log-in(
title="{{_ 'log-in'}}")
i.fa.fa-sign-in
span {{_ 'log-in'}}
.board-header-btns.right
if currentBoard
if isMiniScreen
if currentUser
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}}")
if showStarCounter
span
= currentBoard.stars
a.board-header-btn(
class="{{#if currentUser.isBoardAdmin}}js-change-visibility{{else}}is-disabled{{/if}}"
title="{{_ currentBoard.permission}}")
i.fa(class="{{#if currentBoard.isPublic}}fa-globe{{else}}fa-lock{{/if}}")
span {{_ currentBoard.permission}}
a.board-header-btn.js-watch-board(
title="{{_ watchLevel }}")
if $eq watchLevel "watching"
i.fa.fa-eye
if $eq watchLevel "tracking"
i.fa.fa-bell
if $eq watchLevel "muted"
i.fa.fa-bell-slash
span {{_ watchLevel}}
else
a.board-header-btn.js-log-in(
title="{{_ 'log-in'}}")
i.fa.fa-sign-in
span {{_ 'log-in'}}
if isSandstorm
if currentUser
a.board-header-btn.js-open-archived-board
i.fa.fa-archive
span {{_ 'archives'}}
//if showSort
// a.board-header-btn.js-open-sort-view(title="{{_ 'sort-desc'}}")
// i.fa(class="{{directionClass}}")
// span {{_ 'sort'}}{{_ listSortShortDesc}}
a.board-header-btn.js-open-filter-view(
title="{{#if Filter.isActive}}{{_ 'filter-on-desc'}}{{else}}{{_ 'filter'}}{{/if}}"
class="{{#if Filter.isActive}}emphasis{{/if}}")
i.fa.fa-filter
span {{#if Filter.isActive}}{{_ 'filter-on'}}{{else}}{{_ 'filter'}}{{/if}}
if Filter.isActive
a.board-header-btn-close.js-filter-reset(title="{{_ 'filter-clear'}}")
i.fa.fa-times-thin
a.board-header-btn.js-open-search-view(title="{{_ 'search'}}")
i.fa.fa-search
span {{_ 'search'}}
unless currentBoard.isTemplatesBoard
a.board-header-btn.js-toggle-board-view(
title="{{_ 'board-view'}}")
i.fa.fa-caret-down
if $eq boardView 'board-view-swimlanes'
i.fa.fa-th-large
if $eq boardView 'board-view-lists'
i.fa.fa-trello
if $eq boardView 'board-view-cal'
i.fa.fa-calendar
span {{#if boardView}}{{_ boardView}}{{else}}{{_ 'board-view-swimlanes'}}{{/if}}
if canModifyBoard
a.board-header-btn.js-multiselection-activate(
title="{{#if MultiSelection.isActive}}{{_ 'multi-selection-on'}}{{else}}{{_ 'multi-selection'}}{{/if}}"
class="{{#if MultiSelection.isActive}}emphasis{{/if}}")
i.fa.fa-check-square-o
span {{#if MultiSelection.isActive}}{{_ 'multi-selection-on'}}{{else}}{{_ 'multi-selection'}}{{/if}}
if MultiSelection.isActive
a.board-header-btn-close.js-multiselection-reset(title="{{_ 'filter-clear'}}")
i.fa.fa-times-thin
.separator
a.board-header-btn.js-toggle-sidebar
i.fa.fa-navicon
template(name="boardVisibilityList")
ul.pop-over-list
li
with "private"
a.js-select-visibility
i.fa.fa-lock.colorful
| {{_ 'private'}}
if visibilityCheck
i.fa.fa-check
span.sub-name {{_ 'private-desc'}}
li
with "public"
a.js-select-visibility
i.fa.fa-globe.colorful
| {{_ 'public'}}
if visibilityCheck
i.fa.fa-check
span.sub-name {{_ 'public-desc'}}
template(name="boardChangeVisibilityPopup")
+boardVisibilityList
template(name="boardChangeWatchPopup")
ul.pop-over-list
li
with "watching"
a.js-select-watch
i.fa.fa-eye.colorful
| {{_ 'watching'}}
if watchCheck
i.fa.fa-check
span.sub-name {{_ 'watching-info'}}
li
with "tracking"
a.js-select-watch
i.fa.fa-bell.colorful
| {{_ 'tracking'}}
if watchCheck
i.fa.fa-check
span.sub-name {{_ 'tracking-info'}}
li
with "muted"
a.js-select-watch
i.fa.fa-bell-slash.colorful
| {{_ 'muted'}}
if watchCheck
i.fa.fa-check
span.sub-name {{_ 'muted-info'}}
template(name="boardChangeViewPopup")
ul.pop-over-list
li
with "board-view-swimlanes"
a.js-open-swimlanes-view
i.fa.fa-th-large.colorful
| {{_ 'board-view-swimlanes'}}
if $eq Utils.boardView "board-view-swimlanes"
i.fa.fa-check
li
with "board-view-lists"
a.js-open-lists-view
i.fa.fa-trello.colorful
| {{_ 'board-view-lists'}}
if $eq Utils.boardView "board-view-lists"
i.fa.fa-check
li
with "board-view-cal"
a.js-open-cal-view
i.fa.fa-calendar.colorful
| {{_ 'board-view-cal'}}
if $eq Utils.boardView "board-view-cal"
i.fa.fa-check
template(name="createBoard")
form
label
| {{_ 'title'}}
input.js-new-board-title(type="text" placeholder="{{_ 'bucket-example'}}" autofocus required)
if visibilityMenuIsOpen.get
+boardVisibilityList
else
p.quiet
if $eq visibility.get 'public'
span.fa.fa-globe.colorful
= " "
| {{{_ 'board-public-info'}}}
else
span.fa.fa-lock.colorful
= " "
| {{{_ 'board-private-info'}}}
a.js-change-visibility {{_ 'change'}}.
input.primary.wide(type="submit" value="{{_ 'create'}}")
span.quiet
| {{_ 'or'}}
a.js-import-board {{_ 'import'}}
span.quiet
| /
a.js-board-template {{_ 'template'}}
//template(name="listsortPopup")
// h2
// | {{_ 'list-sort-by'}}
// hr
// ul.pop-over-list
// each value in allowedSortValues
// li
// a.js-sort-by(name="{{value.name}}")
// if $eq sortby value.name
// i(class="fa {{Direction}}")
// | {{_ value.label }}{{_ value.shortLabel}}
// if $eq sortby value.name
// i(class="fa fa-check")
template(name="boardChangeTitlePopup")
form
label
| {{_ 'title'}}
input.js-board-name(type="text" value=title autofocus dir="auto")
label
| {{_ 'description'}}
textarea.js-board-desc(dir="auto")= description
input.primary.wide(type="submit" value="{{_ 'rename'}}")
template(name="boardCreateRulePopup")
p {{_ 'close-board-pop'}}
button.js-confirm.negate.full(type="submit") {{_ 'archive'}}

370
client/components/boards/boardHeader.js Normal file
View File

@ -0,0 +1,370 @@
/*
const DOWNCLS = 'fa-sort-down';
const UPCLS = 'fa-sort-up';
*/
Template.boardMenuPopup.events({
'click .js-rename-board': Popup.open('boardChangeTitle'),
'click .js-custom-fields'() {
Sidebar.setView('customFields');
Popup.close();
},
'click .js-open-archives'() {
Sidebar.setView('archives');
Popup.close();
},
'click .js-change-board-color': Popup.open('boardChangeColor'),
'click .js-change-language': Popup.open('changeLanguage'),
'click .js-archive-board ': Popup.afterConfirm('archiveBoard', function() {
const currentBoard = Boards.findOne(Session.get('currentBoard'));
currentBoard.archive();
// XXX We should have some kind of notification on top of the page to
// confirm that the board was successfully archived.
FlowRouter.go('home');
}),
'click .js-delete-board': Popup.afterConfirm('deleteBoard', function() {
const currentBoard = Boards.findOne(Session.get('currentBoard'));
Popup.close();
Boards.remove(currentBoard._id);
FlowRouter.go('home');
}),
'click .js-outgoing-webhooks': Popup.open('outgoingWebhooks'),
'click .js-import-board': Popup.open('chooseBoardSource'),
'click .js-subtask-settings': Popup.open('boardSubtaskSettings'),
'click .js-card-settings': Popup.open('boardCardSettings'),
});
Template.boardChangeTitlePopup.events({
submit(event, templateInstance) {
const newTitle = templateInstance
.$('.js-board-name')
.val()
.trim();
const newDesc = templateInstance
.$('.js-board-desc')
.val()
.trim();
if (newTitle) {
this.rename(newTitle);
this.setDescription(newDesc);
Popup.close();
}
event.preventDefault();
},
});
BlazeComponent.extendComponent({
watchLevel() {
const currentBoard = Boards.findOne(Session.get('currentBoard'));
return currentBoard && currentBoard.getWatchLevel(Meteor.userId());
},
isStarred() {
const boardId = Session.get('currentBoard');
const user = Meteor.user();
return user && user.hasStarred(boardId);
},
// Only show the star counter if the number of star is greater than 2
showStarCounter() {
const currentBoard = Boards.findOne(Session.get('currentBoard'));
return currentBoard && currentBoard.stars >= 2;
},
/*
showSort() {
return Meteor.user().hasSortBy();
},
directionClass() {
return this.currentDirection() === -1 ? DOWNCLS : UPCLS;
},
changeDirection() {
const direction = 0 - this.currentDirection() === -1 ? '-' : '';
Meteor.call('setListSortBy', direction + this.currentListSortBy());
},
currentDirection() {
return Meteor.user().getListSortByDirection();
},
currentListSortBy() {
return Meteor.user().getListSortBy();
},
listSortShortDesc() {
return `list-label-short-${this.currentListSortBy()}`;
},
*/
events() {
return [
{
'click .js-edit-board-title': Popup.open('boardChangeTitle'),
'click .js-star-board'() {
Meteor.user().toggleBoardStar(Session.get('currentBoard'));
},
'click .js-open-board-menu': Popup.open('boardMenu'),
'click .js-change-visibility': Popup.open('boardChangeVisibility'),
'click .js-watch-board': Popup.open('boardChangeWatch'),
'click .js-open-archived-board'() {
Modal.open('archivedBoards');
},
'click .js-toggle-board-view': Popup.open('boardChangeView'),
'click .js-toggle-sidebar'() {
Sidebar.toggle();
},
'click .js-open-filter-view'() {
Sidebar.setView('filter');
},
/*
'click .js-open-sort-view'(evt) {
const target = evt.target;
if (target.tagName === 'I') {
// click on the text, popup choices
this.changeDirection();
} else {
// change the sort order
Popup.open('listsort')(evt);
}
},
*/
'click .js-filter-reset'(event) {
event.stopPropagation();
Sidebar.setView();
Filter.reset();
},
'click .js-open-search-view'() {
Sidebar.setView('search');
},
'click .js-multiselection-activate'() {
const currentCard = Session.get('currentCard');
MultiSelection.activate();
if (currentCard) {
MultiSelection.add(currentCard);
}
},
'click .js-multiselection-reset'(event) {
event.stopPropagation();
MultiSelection.disable();
},
'click .js-log-in'() {
FlowRouter.go('atSignIn');
},
},
];
},
}).register('boardHeaderBar');
Template.boardHeaderBar.helpers({
canModifyBoard() {
return (
Meteor.user() &&
Meteor.user().isBoardMember() &&
!Meteor.user().isCommentOnly()
);
},
boardView() {
return Utils.boardView();
},
});
Template.boardChangeViewPopup.events({
'click .js-open-lists-view'() {
Utils.setBoardView('board-view-lists');
Popup.close();
},
'click .js-open-swimlanes-view'() {
Utils.setBoardView('board-view-swimlanes');
Popup.close();
},
'click .js-open-cal-view'() {
Utils.setBoardView('board-view-cal');
Popup.close();
},
});
const CreateBoard = BlazeComponent.extendComponent({
template() {
return 'createBoard';
},
onCreated() {
this.visibilityMenuIsOpen = new ReactiveVar(false);
this.visibility = new ReactiveVar('private');
this.boardId = new ReactiveVar('');
},
visibilityCheck() {
return this.currentData() === this.visibility.get();
},
setVisibility(visibility) {
this.visibility.set(visibility);
this.visibilityMenuIsOpen.set(false);
},
toggleVisibilityMenu() {
this.visibilityMenuIsOpen.set(!this.visibilityMenuIsOpen.get());
},
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,
}),
);
Swimlanes.insert({
title: 'Default',
boardId: this.boardId.get(),
});
Utils.goBoardId(this.boardId.get());
},
events() {
return [
{
'click .js-select-visibility'() {
this.setVisibility(this.currentData());
},
'click .js-change-visibility': this.toggleVisibilityMenu,
'click .js-import': Popup.open('boardImportBoard'),
submit: this.onSubmit,
'click .js-import-board': Popup.open('chooseBoardSource'),
'click .js-board-template': Popup.open('searchElement'),
},
];
},
}).register('createBoardPopup');
(class HeaderBarCreateBoard extends CreateBoard {
onSubmit(event) {
super.onSubmit(event);
// Immediately star boards crated with the headerbar popup.
Meteor.user().toggleBoardStar(this.boardId.get());
}
}.register('headerBarCreateBoardPopup'));
BlazeComponent.extendComponent({
visibilityCheck() {
const currentBoard = Boards.findOne(Session.get('currentBoard'));
return this.currentData() === currentBoard.permission;
},
selectBoardVisibility() {
const currentBoard = Boards.findOne(Session.get('currentBoard'));
const visibility = this.currentData();
currentBoard.setVisibility(visibility);
Popup.close();
},
events() {
return [
{
'click .js-select-visibility': this.selectBoardVisibility,
},
];
},
}).register('boardChangeVisibilityPopup');
BlazeComponent.extendComponent({
watchLevel() {
const currentBoard = Boards.findOne(Session.get('currentBoard'));
return currentBoard.getWatchLevel(Meteor.userId());
},
watchCheck() {
return this.currentData() === this.watchLevel();
},
events() {
return [
{
'click .js-select-watch'() {
const level = this.currentData();
Meteor.call(
'watch',
'board',
Session.get('currentBoard'),
level,
(err, ret) => {
if (!err && ret) Popup.close();
},
);
},
},
];
},
}).register('boardChangeWatchPopup');
/*
BlazeComponent.extendComponent({
onCreated() {
//this.sortBy = new ReactiveVar();
////this.sortDirection = new ReactiveVar();
//this.setSortBy();
this.downClass = DOWNCLS;
this.upClass = UPCLS;
},
allowedSortValues() {
const types = [];
const pushed = {};
Meteor.user()
.getListSortTypes()
.forEach(type => {
const key = type.replace(/^-/, '');
if (pushed[key] === undefined) {
types.push({
name: key,
label: `list-label-${key}`,
shortLabel: `list-label-short-${key}`,
});
pushed[key] = 1;
}
});
return types;
},
Direction() {
return Meteor.user().getListSortByDirection() === -1
? this.downClass
: this.upClass;
},
sortby() {
return Meteor.user().getListSortBy();
},
setSortBy(type = null) {
const user = Meteor.user();
if (type === null) {
type = user._getListSortBy();
} else {
let value = '';
if (type.map) {
// is an array
value = (type[1] === -1 ? '-' : '') + type[0];
}
Meteor.call('setListSortBy', value);
}
//this.sortBy.set(type[0]);
//this.sortDirection.set(type[1]);
},
events() {
return [
{
'click .js-sort-by'(evt) {
evt.preventDefault();
const target = evt.target;
const sortby = target.getAttribute('name');
const down = !!target.querySelector(`.${this.upClass}`);
const direction = down ? -1 : 1;
this.setSortBy([sortby, direction]);
if (Utils.isMiniScreen) {
Popup.close();
}
},
},
];
},
}).register('listsortPopup');
*/

22
client/components/boards/boardHeader.styl Normal file
View File

@ -0,0 +1,22 @@
.integration-form
padding: 5px
border-bottom: 1px solid #ccc
.flex
display: -webkit-box
display: -moz-box
display: -webkit-flex
display: -moz-flex
display: -ms-flexbox
display: flex
.option
@extends .flex
-webkit-border-radius: 3px;
border-radius: 3px;
background: #fff;
text-decoration: none;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.2);
box-shadow: 0 1px 2px rgba(0,0,0,0.2);
margin-top: 5px;
padding: 5px;

69
client/components/boards/boardsList.jade Normal file
View File

@ -0,0 +1,69 @@
template(name="boardList")
.wrapper
ul.board-list.clearfix.js-boards
li.js-add-board
a.board-list-item.label {{_ 'add-board'}}
each boards
li(class="{{#if isStarred}}starred{{/if}}" class=colorClass).js-board
if isInvited
.board-list-item
span.details
span.board-list-item-name= 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 {{_ 'just-invited'}}
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'}}")
template(name="boardListHeaderBar")
h1 {{_ title }}
.board-header-btns.right
a.board-header-btn.js-open-archived-board
i.fa.fa-archive
span {{_ 'archives'}}
a.board-header-btn(href="{{pathFor 'board' id=templatesBoardId slug=templatesBoardSlug}}")
i.fa.fa-clone
span {{_ 'templates'}}

162
client/components/boards/boardsList.js Normal file
View File

@ -0,0 +1,162 @@
const subManager = new SubsManager();
const { calculateIndex, enableClickOnTouch } = Utils;
Template.boardListHeaderBar.events({
'click .js-open-archived-board'() {
Modal.open('archivedBoards');
},
});
Template.boardListHeaderBar.helpers({
title() {
return FlowRouter.getRouteName() === 'home' ? 'my-boards' : 'public';
},
templatesBoardId() {
return Meteor.user() && Meteor.user().getTemplatesBoardId();
},
templatesBoardSlug() {
return Meteor.user() && Meteor.user().getTemplatesBoardSlug();
},
});
BlazeComponent.extendComponent({
onCreated() {
Meteor.subscribe('setting');
},
onRendered() {
const itemsSelector = '.js-board:not(.placeholder)';
const $boards = this.$('.js-boards');
$boards.sortable({
connectWith: '.js-boards',
tolerance: 'pointer',
appendTo: '.board-list',
helper: 'clone',
distance: 7,
items: itemsSelector,
placeholder: 'board-wrapper placeholder',
start(evt, ui) {
ui.helper.css('z-index', 1000);
ui.placeholder.height(ui.helper.height());
EscapeActions.executeUpTo('popup-close');
},
stop(evt, ui) {
// To attribute the new index number, we need to get the DOM element
// of the previous and the following card -- if any.
const prevBoardDom = ui.item.prev('.js-board').get(0);
const nextBoardBom = ui.item.next('.js-board').get(0);
const sortIndex = calculateIndex(prevBoardDom, nextBoardBom, 1);
const boardDomElement = ui.item.get(0);
const board = Blaze.getData(boardDomElement);
// Normally the jquery-ui sortable library moves the dragged DOM element
// to its new position, which disrupts Blaze reactive updates mechanism
// (especially when we move the last card of a list, or when multiple
// users move some cards at the same time). To prevent these UX glitches
// we ask sortable to gracefully cancel the move, and to put back the
// DOM in its initial state. The card move is then handled reactively by
// Blaze with the below query.
$boards.sortable('cancel');
board.move(sortIndex.base);
},
});
// ugly touch event hotfix
enableClickOnTouch(itemsSelector);
// Disable drag-dropping if the current user is not a board member or is comment only
this.autorun(() => {
if (Utils.isMiniScreen()) {
$boards.sortable({
handle: '.board-handle',
});
}
});
},
boards() {
const query = {
archived: false,
type: 'board',
};
if (FlowRouter.getRouteName() === 'home')
query['members.userId'] = Meteor.userId();
else query.permission = 'public';
return Boards.find(query, {
sort: { sort: 1 /* boards default sorting */ },
});
},
isStarred() {
const user = Meteor.user();
return user && user.hasStarred(this.currentData()._id);
},
isAdministrable() {
const user = Meteor.user();
return user && user.isBoardAdmin(this.currentData()._id);
},
hasOvertimeCards() {
subManager.subscribe('board', this.currentData()._id, false);
return this.currentData().hasOvertimeCards();
},
hasSpentTimeCards() {
subManager.subscribe('board', this.currentData()._id, false);
return this.currentData().hasSpentTimeCards();
},
isInvited() {
const user = Meteor.user();
return user && user.isInvitedTo(this.currentData()._id);
},
events() {
return [
{
'click .js-add-board': Popup.open('createBoard'),
'click .js-star-board'(evt) {
const boardId = this.currentData()._id;
Meteor.user().toggleBoardStar(boardId);
evt.preventDefault();
},
'click .js-clone-board'(evt) {
Meteor.call(
'cloneBoard',
this.currentData()._id,
Session.get('fromBoard'),
(err, res) => {
if (err) {
this.setError(err.error);
} else {
Session.set('fromBoard', null);
Utils.goBoardId(res);
}
},
);
evt.preventDefault();
},
'click .js-archive-board'(evt) {
const boardId = this.currentData()._id;
Meteor.call('archiveBoard', boardId);
evt.preventDefault();
},
'click .js-accept-invite'() {
const boardId = this.currentData()._id;
Meteor.call('acceptInvite', boardId);
},
'click .js-decline-invite'() {
const boardId = this.currentData()._id;
Meteor.call('quitBoard', boardId, (err, ret) => {
if (!err && ret) {
Meteor.call('acceptInvite', boardId);
FlowRouter.go('home');
}
});
},
},
];
},
}).register('boardList');

229
client/components/boards/boardsList.styl Normal file
View File

@ -0,0 +1,229 @@
@import 'nib'
$spaceBetweenTiles = 16px
.board-list
margin: 0 ($spaceBetweenTiles/2)
li
float: left
width: 25%
box-sizing: border-box
position: relative
&.placeholder:after
content: '';
display: block;
background: darken(white, 20%)
border-radius: 3px;
height: 106px;
margin: 8px;
&.ui-sortable-helper
cursor: grabbing
transform: rotate(4deg)
display: block !important
&.starred
.fa-star,
.fa-star-o
opacity: 1
.board-list-item
overflow: hidden;
background-color: #999
color: #f6f6f6
height: auto
font-size: 16px
line-height: 22px
border-radius: 3px
display: block
font-weight: 700
min-height: 18px
padding: 8px
margin: ($spaceBetweenTiles/2)
position: relative
text-decoration: none
word-wrap: break-word
&.tile
background-size: auto
background-repeat: repeat
.board-list-item-sub-name
color: rgba(255, 255, 255, .5)
display: block
font-size: 14px
font-weight: 400
line-height: 22px
.board-list-item-desc
color: #fff
display: block
font-size: 14px
font-weight: 400
line-height: 18px
.js-add-board
text-align:center
.label
font-weight: normal
line-height: 56px
:hover
background-color:#939393
.fa-star,
.fa-star-o
bottom: 0
font-size: 14px
height: 18px
line-height: 18px
opacity: 0
padding: 9px 9px
position: absolute
right: 0
top: 0
transition-duration: .15s
transition-property: color, font-size, background
.fa-circle
bottom: 0;
font-size: 10px;
height: 10px;
line-height: 10px;
padding: 9px 9px;
position: absolute;
right: 0;
transition-duration: .15s
transition-property: color, font-size, background
.has-overtime-card-active
color: #eb4646 !important
.no-overtime-card-active
color: #3cb500 !important
.is-star-active
color: white
.fa-clone
position: absolute;
bottom: 0
font-size: 14px
height: 18px
line-height: 18px
opacity: 0
right: 0
padding: 9px 9px
transition-duration: .15s
transition-property: color, font-size, background
.fa-archive
position: absolute;
bottom: 0
font-size: 14px
height: 18px
line-height: 18px
opacity: 0
left: 0
padding: 9px 9px
transition-duration: .15s
transition-property: color, font-size, background
li:hover a
&:hover
.fa-star,
.fa-clone,
.fa-archive,
.fa-star-o
color: white
.fa-star,
.fa-clone,
.fa-archive,
.fa-star-o
color: white
opacity: .75
&:hover
font-size: 18px
opacity: 1
&.is-star-active
opacity: 1
.board-backgrounds-list
.board-background-select
box-sizing: border-box
display: block
float: left
width: 50%
padding-top: 12px
position: relative
z-index: 1
&:nth-child(-n + 2)
padding-top: 0
&:nth-child(2n)
padding-left: 6px
&:nth-child(2n+1)
padding-right: 6px
.background-box
color: white
border-radius: 3px
background-size: cover
display: block
height: 74px
position: relative
width: 100%
cursor: pointer
display: flex
align-items: center
justify-content: center
i.fa-check
font-size: 25px
color: white
@media screen and (max-width: 800px)
.board-list
height: 100%
overflow: scroll
li
width: 50%
.board-list-item
overflow: hidden
height: 8rem
.board-list-item-sub-name
position: relative
top: -100px
left: -100px
.board-handle
position: absolute
padding: 7px
top: 50%
transform: translateY(-50%)
right: 10px
font-size: 24px
@media screen and (max-width: 360px)
li
width: 100%
.board-handle
position: absolute
padding: 7px
top: 50%
transform: translateY(-50%)
right: 10px
font-size: 24px

8
client/components/boards/miniboard.jade Normal file
View File

@ -0,0 +1,8 @@
template(name="miniboard")
.minicard(
class="minicard-{{colorClass}}")
.minicard-title
.handle
.fa.fa-arrows
+viewer
= title

59
client/components/cards/attachments.jade Normal file
View File

@ -0,0 +1,59 @@
template(name="cardAttachmentsPopup")
ul.pop-over-list
li
input.js-attach-file.hide(type="file" name="file" multiple)
a.js-computer-upload {{_ 'computer'}}
li
a.js-upload-clipboard-image {{_ 'clipboard'}}
template(name="previewClipboardImagePopup")
p <kbd>Ctrl</kbd>+<kbd>V</kbd> {{_ "paste-or-dragdrop"}}
img.preview-clipboard-image()
button.primary.js-upload-pasted-image {{_ 'upload'}}
template(name="previewAttachedImagePopup")
img.preview-large-image.js-large-image-clicked(src="{{url}}")
template(name="attachmentDeletePopup")
p {{_ "attachment-delete-pop"}}
button.js-confirm.negate.full(type="submit") {{_ 'delete'}}
template(name="attachmentsGalery")
.attachments-galery
each attachments
.attachment-item
a.attachment-thumbnail.swipebox(href="{{url}}" title="{{name}}")
if isUploaded
if isImage
img.attachment-thumbnail-img(src="{{url}}")
else
span.attachment-thumbnail-ext= extension
else
+spinner
p.attachment-details
= name
span.attachment-details-actions
a.js-download(href="{{url download=true}}")
i.fa.fa-download
| {{_ 'download'}}
if currentUser.isBoardMember
unless currentUser.isCommentOnly
unless currentUser.isWorker
if isImage
a(class="{{#if $eq ../coverId _id}}js-remove-cover{{else}}js-add-cover{{/if}}")
i.fa.fa-thumb-tack
if($eq ../coverId _id)
| {{_ 'remove-cover'}}
else
| {{_ 'add-cover'}}
a.js-confirm-delete
i.fa.fa-close
| {{_ 'delete'}}
if currentUser.isBoardMember
unless currentUser.isCommentOnly
unless currentUser.isWorker
//li.attachment-item.add-attachment
a.js-add-attachment
i.fa.fa-plus
| {{_ 'add-attachment' }}

174
client/components/cards/attachments.js Normal file
View File

@ -0,0 +1,174 @@
Template.attachmentsGalery.events({
'click .js-add-attachment': Popup.open('cardAttachments'),
'click .js-confirm-delete': Popup.afterConfirm(
'attachmentDelete',
function() {
Attachments.remove(this._id);
Popup.close();
},
),
// If we let this event bubble, FlowRouter will handle it and empty the page
// content, see #101.
'click .js-download'(event) {
event.stopPropagation();
},
'click .js-add-cover'() {
Cards.findOne(this.cardId).setCover(this._id);
},
'click .js-remove-cover'() {
Cards.findOne(this.cardId).unsetCover();
},
'click .js-preview-image'(event) {
Popup.open('previewAttachedImage').call(this, event);
// when multiple thumbnails, if click one then another very fast,
// we might get a wrong width from previous img.
// when popup reused, onRendered() won't be called, so we cannot get there.
// here make sure to get correct size when this img fully loaded.
const img = $('img.preview-large-image')[0];
if (!img) return;
const rePosPopup = () => {
const w = img.width;
const h = img.height;
// if the image is too large, we resize & center the popup.
if (w > 300) {
$('div.pop-over').css({
width: w + 20,
position: 'absolute',
left: (window.innerWidth - w) / 2,
top: (window.innerHeight - h) / 2,
});
}
};
const url = $(event.currentTarget).attr('src');
if (img.src === url && img.complete) rePosPopup();
else img.onload = rePosPopup;
},
});
Template.previewAttachedImagePopup.events({
'click .js-large-image-clicked'() {
Popup.close();
},
});
Template.cardAttachmentsPopup.events({
'change .js-attach-file'(event) {
const card = this;
const processFile = f => {
Utils.processUploadedAttachment(card, f, attachment => {
if (attachment && attachment._id && attachment.isImage()) {
card.setCover(attachment._id);
}
Popup.close();
});
};
FS.Utility.eachFile(event, f => {
if (
MAX_IMAGE_PIXEL > 0 &&
typeof f.type === 'string' &&
f.type.match(/^image/)
) {
// is image
const reader = new FileReader();
reader.onload = function(e) {
const dataurl = e && e.target && e.target.result;
if (dataurl !== undefined) {
Utils.shrinkImage({
dataurl,
maxSize: MAX_IMAGE_PIXEL,
ratio: COMPRESS_RATIO,
toBlob: true,
callback(blob) {
if (blob === false) {
processFile(f);
} else {
blob.name = f.name;
processFile(blob);
}
},
});
} else {
// couldn't process it let other function handle it?
processFile(f);
}
};
reader.readAsDataURL(f);
} else {
processFile(f);
}
});
},
'click .js-computer-upload'(event, templateInstance) {
templateInstance.find('.js-attach-file').click();
event.preventDefault();
},
'click .js-upload-clipboard-image': Popup.open('previewClipboardImage'),
});
const MAX_IMAGE_PIXEL = Utils.MAX_IMAGE_PIXEL;
const COMPRESS_RATIO = Utils.IMAGE_COMPRESS_RATIO;
let pastedResults = null;
Template.previewClipboardImagePopup.onRendered(() => {
// we can paste image from clipboard
const handle = results => {
if (results.dataURL.startsWith('data:image/')) {
const direct = results => {
$('img.preview-clipboard-image').attr('src', results.dataURL);
pastedResults = results;
};
if (MAX_IMAGE_PIXEL) {
// if has size limitation on image we shrink it before uploading
Utils.shrinkImage({
dataurl: results.dataURL,
maxSize: MAX_IMAGE_PIXEL,
ratio: COMPRESS_RATIO,
callback(changed) {
if (changed !== false && !!changed) {
results.dataURL = changed;
}
direct(results);
},
});
} else {
direct(results);
}
}
};
$(document.body).pasteImageReader(handle);
// we can also drag & drop image file to it
$(document.body).dropImageReader(handle);
});
Template.previewClipboardImagePopup.events({
'click .js-upload-pasted-image'() {
const results = pastedResults;
if (results && results.file) {
window.oPasted = pastedResults;
const card = this;
const file = new FS.File(results.file);
if (!results.name) {
// if no filename, it's from clipboard. then we give it a name, with ext name from MIME type
if (typeof results.file.type === 'string') {
file.name(results.file.type.replace('image/', 'clipboard.'));
}
}
file.updatedAt(new Date());
file.boardId = card.boardId;
file.cardId = card._id;
file.userId = Meteor.userId();
const attachment = Attachments.insert(file);
if (attachment && attachment._id && attachment.isImage()) {
card.setCover(attachment._id);
}
pastedResults = null;
$(document.body).pasteImageReader(() => {});
Popup.close();
}
},
});

85
client/components/cards/attachments.styl Normal file
View File

@ -0,0 +1,85 @@
@import 'nib'
.attachments-galery
display: flex
flex-wrap: wrap
.attachment-item
width: 33.33% - 2%
margin: 10px 1% 0
text-align: center
border-radius: 3px
overflow: hidden
background: darken(white, 7%)
min-height: 120px
&:hover
background: darken(white, 12%)
&.add-attachment
display: flex
align-items: center
a
display: block
margin: auto
.attachment-thumbnail
height: 80px
display: flex
align-items: center
justify-content: center
position: relative
.attachment-thumbnail-img
max-height: 100%
max-width: 100%
.attachment-thumbnail-ext
text-transform: uppercase
font-size: 1.6em
.attachment-details
font-size: 0.75em
margin: 3px
.attachment-details-actions a
display: block
.attachment-image-preview
max-width: 100px
display: block
box-shadow: 0 1px 2px rgba(0,0,0,.2)
.preview-large-image
max-width: 1000px
display: block
box-shadow: 0 1px 2px rgba(0,0,0,.2)
.preview-clipboard-image
width: 280px
max-width: 100%;
height: 200px
display: block
border: 1px solid black
box-shadow: 0 1px 2px rgba(0,0,0,.2)
@media screen and (max-width: 800px)
.attachments-galery
flex-direction
row
.attachment-item
width: 50% - 2%
.attachment-thumbnail
height: 130px
.attachment-details
font-size: 1.1em
@media screen and (max-width: 360px)
.attachments-galery
.attachment-item
width: 100%
.attachment-thumbnail
height: 200px

114
client/components/cards/cardCustomFields.jade Normal file
View File

@ -0,0 +1,114 @@
template(name="cardCustomFieldsPopup")
ul.pop-over-list
each board.customFields
li.item(class="")
a.name.js-select-field(href="#")
span.full-name
+viewer
= name
if hasCustomField
i.fa.fa-check
hr
a.quiet-button.full.js-settings
i.fa.fa-cog
span {{_ 'settings'}}
template(name="cardCustomField")
+Template.dynamic(template=getTemplate)
template(name="cardCustomField-text")
if canModifyCard
+inlinedForm(classNames="js-card-customfield-text")
+editor(autofocus=true)
= value
.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
= value
else
| {{_ 'edit'}}
else
+viewer
= value
template(name="cardCustomField-number")
if canModifyCard
+inlinedForm(classNames="js-card-customfield-number")
input(type="number" value=data.value)
.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
= value
else
| {{_ 'edit'}}
else
if value
= value
template(name="cardCustomField-currency")
if canModifyCard
+inlinedForm(classNames="js-card-customfield-currency")
input(type="text" value=data.value)
.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
= formattedValue
else
| {{_ 'edit'}}
else
if value
= formattedValue
template(name="cardCustomField-date")
if canModifyCard
a.js-edit-date(title="{{showTitle}}" class="{{classes}}")
if value
div.card-date
time(datetime="{{showISODate}}")
| {{showDate}}
else
| {{_ 'edit'}}
else
if value
div.card-date
time(datetime="{{showISODate}}")
| {{showDate}}
template(name="cardCustomField-dropdown")
if canModifyCard
+inlinedForm(classNames="js-card-customfield-dropdown")
select.inline
each items
if($eq data.value this._id)
option(value=_id selected="selected")
+viewer
= name
else
option(value=_id)
+viewer
= name
.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
= selectedItem
else
| {{_ 'edit'}}
else
if value
+viewer
= selectedItem

216
client/components/cards/cardCustomFields.js Normal file
View File

@ -0,0 +1,216 @@
Template.cardCustomFieldsPopup.helpers({
hasCustomField() {
const card = Cards.findOne(Session.get('currentCard'));
const customFieldId = this._id;
return card.customFieldIndex(customFieldId) > -1;
},
});
Template.cardCustomFieldsPopup.events({
'click .js-select-field'(event) {
const card = Cards.findOne(Session.get('currentCard'));
const customFieldId = this._id;
card.toggleCustomField(customFieldId);
event.preventDefault();
},
'click .js-settings'(event) {
EscapeActions.executeUpTo('detailsPane');
Sidebar.setView('customFields');
event.preventDefault();
},
});
// cardCustomField
const CardCustomField = BlazeComponent.extendComponent({
getTemplate() {
return `cardCustomField-${this.data().definition.type}`;
},
onCreated() {
const self = this;
self.card = Cards.findOne(Session.get('currentCard'));
self.customFieldId = this.data()._id;
},
canModifyCard() {
return (
Meteor.user() &&
Meteor.user().isBoardMember() &&
!Meteor.user().isCommentOnly()
);
},
});
CardCustomField.register('cardCustomField');
// cardCustomField-text
(class extends CardCustomField {
onCreated() {
super.onCreated();
}
events() {
return [
{
'submit .js-card-customfield-text'(event) {
event.preventDefault();
const value = this.currentComponent().getValue();
this.card.setCustomField(this.customFieldId, value);
},
},
];
}
}.register('cardCustomField-text'));
// cardCustomField-number
(class extends CardCustomField {
onCreated() {
super.onCreated();
}
events() {
return [
{
'submit .js-card-customfield-number'(event) {
event.preventDefault();
const value = parseInt(this.find('input').value, 10);
this.card.setCustomField(this.customFieldId, value);
},
},
];
}
}.register('cardCustomField-number'));
// cardCustomField-currency
(class extends CardCustomField {
onCreated() {
super.onCreated();
this.currencyCode = this.data().definition.settings.currencyCode;
}
formattedValue() {
const locale = TAPi18n.getLanguage();
return new Intl.NumberFormat(locale, {
style: 'currency',
currency: this.currencyCode,
}).format(this.data().value);
}
events() {
return [
{
'submit .js-card-customfield-currency'(event) {
event.preventDefault();
const value = Number(this.find('input').value, 10);
this.card.setCustomField(this.customFieldId, value);
},
},
];
}
}.register('cardCustomField-currency'));
// cardCustomField-date
(class extends CardCustomField {
onCreated() {
super.onCreated();
const self = this;
self.date = ReactiveVar();
self.now = ReactiveVar(moment());
window.setInterval(() => {
self.now.set(moment());
}, 60000);
self.autorun(() => {
self.date.set(moment(self.data().value));
});
}
showDate() {
// this will start working once mquandalle:moment
// is updated to at least moment.js 2.10.5
// until then, the date is displayed in the "L" format
return this.date.get().calendar(null, {
sameElse: 'llll',
});
}
showISODate() {
return this.date.get().toISOString();
}
classes() {
if (
this.date.get().isBefore(this.now.get(), 'minute') &&
this.now.get().isBefore(this.data().value)
) {
return 'current';
}
return '';
}
showTitle() {
return `${TAPi18n.__('card-start-on')} ${this.date.get().format('LLLL')}`;
}
events() {
return [
{
'click .js-edit-date': Popup.open('cardCustomField-date'),
},
];
}
}.register('cardCustomField-date'));
// cardCustomField-datePopup
(class extends DatePicker {
onCreated() {
super.onCreated();
const self = this;
self.card = Cards.findOne(Session.get('currentCard'));
self.customFieldId = this.data()._id;
this.data().value && this.date.set(moment(this.data().value));
}
_storeDate(date) {
this.card.setCustomField(this.customFieldId, date);
}
_deleteDate() {
this.card.setCustomField(this.customFieldId, '');
}
}.register('cardCustomField-datePopup'));
// cardCustomField-dropdown
(class extends CardCustomField {
onCreated() {
super.onCreated();
this._items = this.data().definition.settings.dropdownItems;
this.items = this._items.slice(0);
this.items.unshift({
_id: '',
name: TAPi18n.__('custom-field-dropdown-none'),
});
}
selectedItem() {
const selected = this._items.find(item => {
return item._id === this.data().value;
});
return selected
? selected.name
: TAPi18n.__('custom-field-dropdown-unknown');
}
events() {
return [
{
'submit .js-card-customfield-dropdown'(event) {
event.preventDefault();
const value = this.find('select').value;
this.card.setCustomField(this.customFieldId, value);
},
},
];
}
}.register('cardCustomField-dropdown'));

10
client/components/cards/cardDate.jade Normal file
View File

@ -0,0 +1,10 @@
template(name="dateBadge")
if canModifyCard
a.js-edit-date.card-date(title="{{showTitle}}" class="{{classes}}")
time(datetime="{{showISODate}}")
| {{showDate}}
else
a.card-date(title="{{showTitle}}" class="{{classes}}")
time(datetime="{{showISODate}}")
| {{showDate}}

415
client/components/cards/cardDate.js Normal file
View File

@ -0,0 +1,415 @@
// 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();
},
},
];
},
});
Template.dateBadge.helpers({
canModifyCard() {
return (
Meteor.user() &&
Meteor.user().isBoardMember() &&
!Meteor.user().isCommentOnly() &&
!Meteor.user().isWorker()
);
},
});
// editCardReceivedDatePopup
(class extends DatePicker {
onCreated() {
super.onCreated(moment().format('YYYY-MM-DD HH:mm'));
this.data().getReceived() &&
this.date.set(moment(this.data().getReceived()));
}
_storeDate(date) {
this.card.setReceived(date);
}
_deleteDate() {
this.card.setReceived(null);
}
}.register('editCardReceivedDatePopup'));
// editCardStartDatePopup
(class extends DatePicker {
onCreated() {
super.onCreated(moment().format('YYYY-MM-DD HH:mm'));
this.data().getStart() && this.date.set(moment(this.data().getStart()));
}
onRendered() {
super.onRendered();
if (moment.isDate(this.card.getReceived())) {
this.$('.js-datepicker').datepicker(
'setStartDate',
this.card.getReceived(),
);
}
}
_storeDate(date) {
this.card.setStart(date);
}
_deleteDate() {
this.card.setStart(null);
}
}.register('editCardStartDatePopup'));
// editCardDueDatePopup
(class extends DatePicker {
onCreated() {
super.onCreated('1970-01-01 17:00:00');
this.data().getDue() && this.date.set(moment(this.data().getDue()));
}
onRendered() {
super.onRendered();
if (moment.isDate(this.card.getStart())) {
this.$('.js-datepicker').datepicker('setStartDate', this.card.getStart());
}
}
_storeDate(date) {
this.card.setDue(date);
}
_deleteDate() {
this.card.setDue(null);
}
}.register('editCardDueDatePopup'));
// editCardEndDatePopup
(class extends DatePicker {
onCreated() {
super.onCreated(moment().format('YYYY-MM-DD HH:mm'));
this.data().getEnd() && this.date.set(moment(this.data().getEnd()));
}
onRendered() {
super.onRendered();
if (moment.isDate(this.card.getStart())) {
this.$('.js-datepicker').datepicker('setStartDate', this.card.getStart());
}
}
_storeDate(date) {
this.card.setEnd(date);
}
_deleteDate() {
this.card.setEnd(null);
}
}.register('editCardEndDatePopup'));
// Display received, start, due & end dates
const CardDate = BlazeComponent.extendComponent({
template() {
return 'dateBadge';
},
onCreated() {
const self = this;
self.date = ReactiveVar();
self.now = ReactiveVar(moment());
window.setInterval(() => {
self.now.set(moment());
}, 60000);
},
showDate() {
// this will start working once mquandalle:moment
// is updated to at least moment.js 2.10.5
// until then, the date is displayed in the "L" format
return this.date.get().calendar(null, {
sameElse: 'llll',
});
},
showISODate() {
return this.date.get().toISOString();
},
});
class CardReceivedDate extends CardDate {
onCreated() {
super.onCreated();
const self = this;
self.autorun(() => {
self.date.set(moment(self.data().getReceived()));
});
}
classes() {
let classes = 'received-date ';
const dueAt = this.data().getDue();
const endAt = this.data().getEnd();
const startAt = this.data().getStart();
const theDate = this.date.get();
// if dueAt, endAt and startAt exist & are > receivedAt, receivedAt doesn't need to be flagged
if (
(startAt && theDate.isAfter(startAt)) ||
(endAt && theDate.isAfter(endAt)) ||
(dueAt && theDate.isAfter(dueAt))
)
classes += 'long-overdue';
else classes += 'current';
return classes;
}
showTitle() {
return `${TAPi18n.__('card-received-on')} ${this.date
.get()
.format('LLLL')}`;
}
events() {
return super.events().concat({
'click .js-edit-date': Popup.open('editCardReceivedDate'),
});
}
}
CardReceivedDate.register('cardReceivedDate');
class CardStartDate extends CardDate {
onCreated() {
super.onCreated();
const self = this;
self.autorun(() => {
self.date.set(moment(self.data().getStart()));
});
}
classes() {
let classes = 'start-date' + ' ';
const dueAt = this.data().getDue();
const endAt = this.data().getEnd();
const theDate = this.date.get();
const now = this.now.get();
// 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 classes += 'current';
return classes;
}
showTitle() {
return `${TAPi18n.__('card-start-on')} ${this.date.get().format('LLLL')}`;
}
events() {
return super.events().concat({
'click .js-edit-date': Popup.open('editCardStartDate'),
});
}
}
CardStartDate.register('cardStartDate');
class CardDueDate extends CardDate {
onCreated() {
super.onCreated();
const self = this;
self.autorun(() => {
self.date.set(moment(self.data().getDue()));
});
}
classes() {
let classes = 'due-date' + ' ';
const endAt = this.data().getEnd();
const theDate = this.date.get();
const now = this.now.get();
// if the due date is after the end date, green - done early
if (endAt && theDate.isAfter(endAt)) classes += 'current';
// if there is an end date, don't need to flag the due date
else if (endAt) classes += '';
else if (now.diff(theDate, 'days') >= 2) classes += 'long-overdue';
else if (now.diff(theDate, 'minute') >= 0) classes += 'due';
else if (now.diff(theDate, 'days') >= -1) classes += 'almost-due';
return classes;
}
showTitle() {
return `${TAPi18n.__('card-due-on')} ${this.date.get().format('LLLL')}`;
}
events() {
return super.events().concat({
'click .js-edit-date': Popup.open('editCardDueDate'),
});
}
}
CardDueDate.register('cardDueDate');
class CardEndDate extends CardDate {
onCreated() {
super.onCreated();
const self = this;
self.autorun(() => {
self.date.set(moment(self.data().getEnd()));
});
}
classes() {
let classes = 'end-date' + ' ';
const dueAt = this.data().getDue();
const theDate = this.date.get();
if (!dueAt) classes += '';
else if (theDate.isBefore(dueAt)) classes += 'current';
else if (theDate.isAfter(dueAt)) classes += 'due';
return classes;
}
showTitle() {
return `${TAPi18n.__('card-end-on')} ${this.date.get().format('LLLL')}`;
}
events() {
return super.events().concat({
'click .js-edit-date': Popup.open('editCardEndDate'),
});
}
}
CardEndDate.register('cardEndDate');
(class extends CardReceivedDate {
showDate() {
return this.date.get().format('l');
}
}.register('minicardReceivedDate'));
(class extends CardStartDate {
showDate() {
return this.date.get().format('l');
}
}.register('minicardStartDate'));
(class extends CardDueDate {
showDate() {
return this.date.get().format('l');
}
}.register('minicardDueDate'));
(class extends CardEndDate {
showDate() {
return this.date.get().format('l');
}
}.register('minicardEndDate'));
class VoteEndDate extends CardDate {
onCreated() {
super.onCreated();
const self = this;
self.autorun(() => {
self.date.set(moment(self.data().getVoteEnd()));
});
}
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('editVoteEndDate'),
});
}
}
VoteEndDate.register('voteEndDate');

59
client/components/cards/cardDate.styl Normal file
View File

@ -0,0 +1,59 @@
.card-date
display: block
border-radius: 4px
padding: 1px 3px
background-color: #dbdbdb
&:hover, &.is-active
background-color: #b3b3b3
&.current, &.almost-due, &.due, &.long-overdue
color: #fff
&.current
background-color: #5ba639
&:hover, &.is-active
background-color: darken(#5ba639, 10)
&.almost-due
background-color: #edc909
&:hover, &.is-active
background-color: darken(#edc909, 10)
&.due
background-color: #fa3f00
&:hover, &.is-active
background-color: darken(#fa3f00, 10)
&.long-overdue
background-color: #fd5d47
&:hover, &.is-active
background-color: darken(#fd5d47, 7)
&.end-date
time
&::before
content: "\f253" // symbol: fa-hourglass-end
&.due-date
time
&::before
content: "\f090" // symbol: fa-sign-in
&.start-date
time
&::before
content: "\f251" // symbol: fa-hourglass-start
&.received-date
time
&::before
content: "\f08b" // symbol: fa-sign-out
time
&::before
font: normal normal normal 14px/1 FontAwesome
font-size: inherit
-webkit-font-smoothing: antialiased
margin-right: 0.3em

625
client/components/cards/cardDetails.jade Normal file
View File

@ -0,0 +1,625 @@
template(name="cardDetails")
section.card-details.js-card-details: .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
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-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
if currentUser.isBoardMember
a.fa.fa-navicon.card-details-menu-mobile-web.js-open-card-details-menu
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
= getTitle
if isWatching
i.card-details-watch.fa.fa-eye
.card-details-path
each parentList
| &nbsp; &gt; &nbsp;
a.js-parent-card(href=linkForCard) {{title}}
// else
{{_ 'top-level-card'}}
if isLinkedCard
a.linked-card-location.js-go-to-linked-card
+viewer
| {{getBoardTitle}} > {{getTitle}}
if getArchived
if isLinkedBoard
p.warning {{_ 'board-archived'}}
else
p.warning {{_ 'card-archived'}}
.card-details-items
if currentBoard.allowsReceivedDate
.card-details-item.card-details-item-received
h3
i.fa.fa-sign-out
card-details-item-title {{_ '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
i.fa.fa-hourglass-start
card-details-item-title {{_ '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
i.fa.fa-sign-in
card-details-item-title {{_ '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
i.fa.fa-hourglass-end
card-details-item-title {{_ '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
.card-details-item.card-details-item-members
h3
i.fa.fa-users
card-details-item-title {{_ 'members'}}
each getMembers
+userAvatar(userId=this 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
i.fa.fa-user
card-details-item-title {{_ '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
a.assignee.add-assignee.card-details-item-add-button.js-add-assignees(title="{{_ 'assignee'}}")
i.fa.fa-plus
if currentBoard.allowsLabels
.card-details-item.card-details-item-labels
h3
i.fa.fa-tags
card-details-item-title {{_ '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-items
each customFieldsWD
.card-details-item.card-details-item-customfield
h3.card-details-item-title
+viewer
= definition.name
+cardCustomField
//.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
i.fa.fa-shopping-cart
card-details-item-title {{_ '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
i.fa.fa-user-plus
card-details-item-title {{_ '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 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
if currentBoard.allowsDescriptionTitle
hr
h3
i.fa.fa-align-left
card-details-item-title {{_ 'description'}}
if currentBoard.allowsDescriptionText
+inlinedCardDescription(classNames="card-description js-card-description")
+editor(autofocus=true)
| {{getUnsavedValue 'cardDescription' _id getDescription}}
.edit-controls.clearfix
button.primary(type="submit") {{_ 'save'}}
a.fa.fa-times-thin.js-close-inlined-form
else
if currentBoard.allowsDescriptionText
a.js-open-inlined-form
if getDescription
+viewer
= getDescription
else
| {{_ 'edit'}}
if (hasUnsavedValue 'cardDescription' _id)
p.quiet
| {{_ 'unsaved-description'}}
a.js-open-inlined-form {{_ 'view-it'}}
= ' - '
a.js-close-inlined-form {{_ 'discard'}}
else if getDescription
if currentBoard.allowsDescriptionTitle
hr
h3.card-details-item-title {{_ 'description'}}
if currentBoard.allowsDescriptionText
+viewer
= getDescription
.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
h3
i.fa.fa-paperclip
| {{_ 'attachments'}}
.card-checklist-attachmentGalery.card-attachmentGalery
+attachmentsGalery
hr
unless currentUser.isNoComments
.activity-title
h3
i.fa.fa-history
| {{ _ 'activity'}}
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")
template(name="editCardTitleForm")
textarea.js-edit-card-title(rows='1' autofocus dir="auto")
= getTitle
.edit-controls.clearfix
button.primary.confirm.js-submit-edit-card-title-form(type="submit") {{_ 'save'}}
a.fa.fa-times-thin.js-close-inlined-form
template(name="editCardRequesterForm")
input.js-edit-card-requester(type='text' autofocus value=getRequestedBy dir="auto")
.edit-controls.clearfix
button.primary.confirm.js-submit-edit-card-requester-form(type="submit") {{_ 'save'}}
a.fa.fa-times-thin.js-close-inlined-form
template(name="editCardAssignerForm")
input.js-edit-card-assigner(type='text' autofocus value=getAssignedBy dir="auto")
.edit-controls.clearfix
button.primary.confirm.js-submit-edit-card-assigner-form(type="submit") {{_ 'save'}}
a.fa.fa-times-thin.js-close-inlined-form
template(name="cardDetailsActionsPopup")
ul.pop-over-list
li
a.js-toggle-watch-card
if isWatching
i.fa.fa-eye
| {{_ 'unwatch'}}
else
i.fa.fa-eye-slash
| {{_ 'watch'}}
if canModifyCard
unless currentUser.isWorker
hr
ul.pop-over-list
//li: a.js-members {{_ 'card-edit-members'}}
//li: a.js-labels {{_ 'card-edit-labels'}}
//li: a.js-attachments {{_ 'card-edit-attachments'}}
li
a.js-start-voting
i.fa.fa-thumbs-up
| {{_ 'card-edit-voting'}}
li
a.js-custom-fields
i.fa.fa-list-alt
| {{_ 'card-edit-custom-fields'}}
//li: a.js-received-date {{_ 'editCardReceivedDatePopup-title'}}
//li: a.js-start-date {{_ 'editCardStartDatePopup-title'}}
//li: a.js-due-date {{_ 'editCardDueDatePopup-title'}}
//li: a.js-end-date {{_ 'editCardEndDatePopup-title'}}
li
a.js-spent-time
i.fa.fa-clock-o
| {{_ 'editCardSpentTimePopup-title'}}
li
a.js-set-card-color
i.fa.fa-paint-brush
| {{_ 'setCardColorPopup-title'}}
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'}}
unless currentUser.isWorker
hr
ul.pop-over-list
li
a.js-move-card
i.fa.fa-arrow-right
| {{_ 'moveCardPopup-title'}}
li
a.js-copy-card
i.fa.fa-copy
| {{_ 'copyCardPopup-title'}}
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'}}
template(name="moveCardPopup")
+boardsAndLists
template(name="copyCardPopup")
label(for='copy-card-title') {{_ 'title'}}:
textarea#copy-card-title.minicard-composer-textarea.js-card-title(autofocus)
= getTitle
+boardsAndLists
template(name="copyChecklistToManyCardsPopup")
label(for='copy-checklist-cards-title') {{_ 'copyChecklistToManyCardsPopup-instructions'}}:
textarea#copy-card-title.minicard-composer-textarea.js-card-title(autofocus)
| {{_ 'copyChecklistToManyCardsPopup-format'}}
+boardsAndLists
template(name="boardsAndLists")
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'}}
template(name="cardMembersPopup")
ul.pop-over-list.js-card-member-list
each board.activeMembers
li.item(class="{{#if isCardMember}}active{{/if}}")
a.name.js-select-member(href="#")
+userAvatar(userId=user._id)
span.full-name
= user.profile.fullname
| (<span class="username">{{ user.username }}</span>)
if isCardMember
i.fa.fa-check
template(name="cardAssigneesPopup")
unless currentUser.isWorker
ul.pop-over-list.js-card-assignee-list
each board.activeMembers
li.item(class="{{#if isCardAssignee}}active{{/if}}")
a.name.js-select-assignee(href="#")
+userAvatar(userId=user._id)
span.full-name
= user.profile.fullname
| (<span class="username">{{ user.username }}</span>)
if isCardAssignee
i.fa.fa-check
if currentUser.isWorker
ul.pop-over-list.js-card-assignee-list
li.item(class="{{#if currentUser.isCardAssignee}}active{{/if}}")
a.name.js-select-assignee(href="#")
+userAvatar(userId=currentUser._id)
span.full-name
= currentUser.profile.fullname
| (<span class="username">{{ currentUser.username }}</span>)
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
+userAvatar(userId=user._id showEdit=true)
.info
h3= user.profile.fullname
p.quiet @{{ user.username }}
ul.pop-over-list
if currentUser.isNotCommentOnly
unless currentUser.isWorker
li: a.js-remove-assignee {{_ 'remove-member-from-card'}}
unless currentUser.isWorker
if $eq currentUser._id user._id
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")
button.js-copy-card-link-to-clipboard(class="btn" id="clipboard") {{_ 'copy-card-link-to-clipboard'}}
span.clearfix
br
h2 {{_ 'change-card-parent'}}
label {{_ 'source-board'}}:
select.js-field-parent-board
if isTopLevel
option(value="none" selected) {{_ 'custom-field-dropdown-none'}}
else
option(value="none") {{_ 'custom-field-dropdown-none'}}
each boards
if isParentBoard
option(value="{{_id}}" selected) {{title}}
else
option(value="{{_id}}") {{title}}
label {{_ 'parent-card'}}:
select.js-field-parent-card
if isTopLevel
option(value="none" selected) {{_ 'custom-field-dropdown-none'}}
else
option(value="none") {{_ 'custom-field-dropdown-none'}}
each cards
if isParentCard
option(value="{{_id}}" selected) {{title}}
else
option(value="{{_id}}") {{title}}
br
| {{_ 'added'}}
span.date(title=card.createdAt) {{ moment createdAt 'LLL' }}
a.js-delete(title="{{_ 'card-delete-notice'}}") {{_ 'delete'}}
template(name="setCardColorPopup")
form.edit-label
.palette-colors: each colors
unless $eq color 'white'
span.card-label.palette-color.js-palette-color(class="card-details-{{color}}")
if(isSelected color)
i.fa.fa-check
button.primary.confirm.js-submit {{_ 'save'}}
button.js-remove-color.negate.wide.right {{_ 'unset-color'}}
template(name="cardDeletePopup")
p {{_ "card-delete-pop"}}
unless archived
p {{_ "card-delete-suggest-archive"}}
button.js-confirm.negate.full(type="submit") {{_ 'delete'}}
template(name="deleteVotePopup")
p {{_ "vote-delete-pop"}}
button.js-confirm.negate.full(type="submit") {{_ 'delete'}}
template(name="cardStartVotingPopup")
form.edit-vote-question
.fields
label(for="vote") {{_ 'vote-question'}}
input.js-vote-field#vote(type="text" name="vote" value="{{getVoteQuestion}}" autofocus disabled="{{#if getVoteQuestion}}disabled{{/if}}")
.check-div
a.flex(class="{{#if getVoteQuestion}}is-disabled{{else}}js-toggle-vote-allow-non-members{{/if}}")
.materialCheckBox#vote-allow-non-members(name="vote-allow-non-members" class="{{#if voteAllowNonBoardMembers}}is-checked{{/if}}")
span {{_ 'allowNonBoardMembers'}}
.check-div
a.flex(class="{{#if getVoteQuestion}}is-disabled{{else}}js-toggle-vote-public{{/if}}")
.materialCheckBox#vote-public(name="vote-public" class="{{#if votePublic}}is-checked{{/if}}")
span {{_ 'vote-public'}}
.check-div.flex
i.fa.fa-hourglass-end
a.js-end-date
span
| {{_ 'card-end'}}
unless getVoteEnd
i.fa.fa-plus
if getVoteEnd
+voteEndDate
button.primary.js-submit {{_ 'save'}}
if getVoteQuestion
button.js-remove-vote.negate.wide.right {{_ 'delete'}}
template(name="positiveVoteMembersPopup")
ul.pop-over-list.js-card-member-list
each m in voteMemberPositive
li.item
a.name
+userAvatar(userId=m._id)
span.full-name
= m.profile.fullname
| (<span class="username">{{ m.username }}</span>)
template(name="negativeVoteMembersPopup")
ul.pop-over-list.js-card-member-list
each m in voteMemberNegative
li.item
a.name
+userAvatar(userId=m._id)
span.full-name
= m.profile.fullname
| (<span class="username">{{ m.username }}</span>)

1171
client/components/cards/cardDetails.js Normal file
View File

File diff suppressed because it is too large Load Diff

349
client/components/cards/cardDetails.styl Normal file
View File

@ -0,0 +1,349 @@
@import 'nib'
// Assignee, code copied from wekan/client/users/userAvatar.styl
avatar-radius = 50%
#cardURL_copy
// Have clipboard text not visible by moving it to far left
position: absolute
left: -2000px
top: 0px
#clipboard
white-space: normal
.assignee
border-radius: 3px
display: block
position: relative
float: left
height: 30px
width: @height
margin: 0 4px 4px 0
cursor: pointer
user-select: none
z-index: 1
text-decoration: none
border-radius: avatar-radius
.avatar
overflow: hidden
border-radius: avatar-radius
&.avatar-assignee-initials
height: 70%
width: @height
padding: 15%
background-color: #dbdbdb
color: #444444
position: absolute
&.avatar-image
object-fit: cover;
object-position: center;
height: 100%
width: @height
.assignee-presence-status
background-color: #b3b3b3
border: 1px solid #fff
border-radius: 50%
height: 7px
width: @height
position: absolute
right: -1px
bottom: -1px
border: 1px solid white
z-index: 15
&.active
background: #64c464
border-color: #daf1da
&.idle
background: #e4e467
border-color: #f7f7d4
&.disconnected
background: #bdbdbd
border-color: #ededed
&.pending
background: #e44242
border-color: #f1dada
&.add-assignee
display: flex
align-items: center
justify-content: center
box-shadow: 0 0 0 2px darken(white, 25%) inset
&:hover, &.is-active
box-shadow: 0 0 0 2px darken(white, 60%) inset
// Other card details
.card-details
padding: 0
flex-shrink: 0
flex-basis: 510px
will-change: flex-basis
overflow-y: scroll
overflow-x: hidden
background: darken(white, 3%)
border-radius: bottom 3px
z-index: 20 !important
animation: flexGrowIn 0.1s
box-shadow: 0 0 7px 0 darken(white, 30%)
transition: flex-basis 0.1s
box-sizing: border-box
.mCustomScrollBox
padding-left: 0
.card-details-canvas
width: 470px
padding-left: 20px
.card-details-header
margin: 0 -20px 5px
padding 7px 16px
background: darken(white, 7%)
border-bottom: 1px solid darken(white, 14%)
.close-card-details,
.card-details-menu,
.card-copy-button,
.card-copy-mobile-button,
.close-card-details-mobile-web,
.card-details-menu-mobile-web
float: right
.close-card-details
font-size: 24px
padding: 5px
margin-right: -8px
.close-card-details-mobile-web
font-size: 24px
padding: 5px
margin-right: 40px
.card-copy-button
font-size: 17px
padding: 10px
margin-right: 10px
.card-copy-mobile-button
font-size: 17px
padding: 10px
margin-right: 10px
.card-details-menu
font-size: 17px
padding: 10px
.card-details-menu-mobile-web
font-size: 17px
padding: 10px
margin-right: 30px
.card-details-watch
font-size: 17px
padding-left: 7px
color: #a6a6a6
.card-details-title
font-weight: bold
font-size: 1.33em
margin: 7px 0 0
padding: 0
.linked-card-location
font-style: italic
font-size: 1em
margin-bottom: 0
& p
margin-bottom: 0
form.inlined-form
margin-top: 5px
margin-bottom: 10px
.card-details-list
font-size: 0.85em
margin-bottom: 3px
a.card-details-list-title
font-weight: bold
&.is-editable
display: inline-block
background: darken(white, 10%)
border-radius: 3px
padding: 0px 5px
.card-description textarea
min-height: 100px
.card-details-items
display: flex
flex-wrap: wrap
margin: 15px 0
.card-details-item
margin-right: 0.5em
&:last-child
margin-right: 0
&.card-details-item-labels,
&.card-details-item-members,
&.card-details-item-assignees,
&.card-details-item-received,
&.card-details-item-start,
&.card-details-item-due,
&.card-details-item-end,
&.card-details-item-customfield,
&.card-details-item-name
display: block
word-wrap: break-word
max-width: 48%
flex-grow: 1
.card-details-item-title
font-size: 16px
color: #000
.card-label
padding-top: 5px
padding-bottom: 5px
.activities
padding-top: 10px
input[type="text"].attachment-add-link-input
float: left
margin: 0 0 8px
width: 80%
input[type="submit"].attachment-add-link-submit
float: left
margin: 0 0 8px 4px
padding: 6px 12px
width: 18%
@media screen and (max-width: 800px)
.card-details
width: calc(100% - 1px)
padding: 0px 20px 0px 20px
margin: 0px
transition: none
.card-details-canvas
width: 100%
padding-left: 0px
.card-details-header
.close-card-details
margin-right: 0px
.card-details-menu
margin-right: 10px
card-details-color(background, color...)
background: background !important
if color
color: color !important //overwrite text for better visibility
.card-details-white
card-details-color(unset, #000) //Black text for better visibility
border: 1px solid #eee
.card-details-green
card-details-color(#3cb500, #ffffff) //White text for better visibility
.card-details-yellow
card-details-color(#fad900, #000) //Black text for better visibility
.card-details-orange
card-details-color(#ff9f19, #000) //Black text for better visibility
.card-details-red
card-details-color(#eb4646, #ffffff) //White text for better visibility
.card-details-purple
card-details-color(#a632db, #ffffff) //White text for better visibility
.card-details-blue
card-details-color(#0079bf, #ffffff) //White text for better visibility
.card-details-pink
card-details-color(#ff78cb, #000) //Black text for better visibility
.card-details-sky
card-details-color(#00c2e0, #ffffff) //White text for better visibility
.card-details-black
card-details-color(#4d4d4d, #ffffff) //White text for better visibility
.card-details-lime
card-details-color(#51e898, #000) //Black text for better visibility
.card-details-silver
card-details-color(#c0c0c0, #000) //Black text for better visibility
.card-details-peachpuff
card-details-color(#ffdab9, #000) //Black text for better visibility
.card-details-crimson
card-details-color(#dc143c, #ffffff) //White text for better visibility
.card-details-plum
card-details-color(#dda0dd, #000) //Black text for better visibility
.card-details-darkgreen
card-details-color(#006400, #ffffff) //White text for better visibility
.card-details-slateblue
card-details-color(#6a5acd, #ffffff) //White text for better visibility
.card-details-magenta
card-details-color(#ff00ff, #ffffff) //White text for better visibility
.card-details-gold
card-details-color(#ffd700, #000) //Black text for better visibility
.card-details-navy
card-details-color(#000080, #ffffff) //White text for better visibility
.card-details-gray
card-details-color(#808080, #ffffff) //White text for better visibility
.card-details-saddlebrown
card-details-color(#8b4513, #ffffff) //White text for better visibility
.card-details-paleturquoise
card-details-color(#afeeee, #000) //Black text for better visibility
.card-details-mistyrose
card-details-color(#ffe4e1, #000) //Black text for better visibility
.card-details-indigo
card-details-color(#4b0082, #ffffff) //White text for better visibility
.voted
opacity: .7
.vote-title
display: flex
justify-content: space-between
.js-edit-date
align-self: baseline
margin-left: 5px
.vote-result
display: flex
.js-show-positive-votes
cursor: pointer

22
client/components/cards/cardTime.jade Normal file
View File

@ -0,0 +1,22 @@
template(name="editCardSpentTime")
.edit-card-time
form.edit-time
.fields
label(for="time") {{_ 'time'}}
input.js-time-field#time(type="number" step="0.01" name="time" value="{{card.getSpentTime}}" placeholder=timeFormat autofocus)
label(for="overtime") {{_ 'overtime'}}
a.js-toggle-overtime
.materialCheckBox#overtime(class="{{#if getIsOvertime}}is-checked{{/if}}" name="overtime")
if error.get
.warning {{_ error.get}}
button.primary.wide.left.js-submit-time(type="submit") {{_ 'save'}}
button.js-delete-time.negate.wide.right {{_ 'delete'}}
template(name="timeBadge")
if canModifyCard
a.js-edit-time.card-time(title="{{showTitle}}" class="{{#if getIsOvertime}}card-label-red{{else}}card-label-green{{/if}}")
| {{showTime}}
else
a.card-time(title="{{showTitle}}" class="{{#if getIsOvertime}}card-label-red{{else}}card-label-green{{/if}}")
| {{showTime}}

90
client/components/cards/cardTime.js Normal file
View File

@ -0,0 +1,90 @@
BlazeComponent.extendComponent({
template() {
return 'editCardSpentTime';
},
onCreated() {
this.error = new ReactiveVar('');
this.card = this.data();
},
toggleOvertime() {
this.card.setIsOvertime(!this.card.getIsOvertime());
$('#overtime .materialCheckBox').toggleClass('is-checked');
$('#overtime').toggleClass('is-checked');
},
storeTime(spentTime, isOvertime) {
this.card.setSpentTime(spentTime);
this.card.setIsOvertime(isOvertime);
},
deleteTime() {
this.card.setSpentTime(null);
},
events() {
return [
{
//TODO : need checking this portion
'submit .edit-time'(evt) {
evt.preventDefault();
const spentTime = parseFloat(evt.target.time.value);
const isOvertime = this.card.getIsOvertime();
if (spentTime >= 0) {
this.storeTime(spentTime, isOvertime);
Popup.close();
} else {
this.error.set('invalid-time');
evt.target.time.focus();
}
},
'click .js-delete-time'(evt) {
evt.preventDefault();
this.deleteTime();
Popup.close();
},
'click a.js-toggle-overtime': this.toggleOvertime,
},
];
},
}).register('editCardSpentTimePopup');
BlazeComponent.extendComponent({
template() {
return 'timeBadge';
},
onCreated() {
const self = this;
self.time = ReactiveVar();
},
showTitle() {
if (this.data().getIsOvertime()) {
return `${TAPi18n.__(
'overtime',
)} ${this.data().getSpentTime()} ${TAPi18n.__('hours')}`;
} else {
return `${TAPi18n.__(
'card-spent',
)} ${this.data().getSpentTime()} ${TAPi18n.__('hours')}`;
}
},
showTime() {
return this.data().getSpentTime();
},
events() {
return [
{
'click .js-edit-time': Popup.open('editCardSpentTime'),
},
];
},
}).register('cardSpentTime');
Template.timeBadge.helpers({
canModifyCard() {
return (
Meteor.user() &&
Meteor.user().isBoardMember() &&
!Meteor.user().isCommentOnly()
);
},
});

17
client/components/cards/cardTime.styl Normal file
View File

@ -0,0 +1,17 @@
.card-time
display: block
border-radius: 4px
padding: 1px 3px
color: #fff
background-color: #dbdbdb
&:hover, &.is-active
background-color: #b3b3b3
time
&::before
font: normal normal normal 14px/1 FontAwesome
font-size: inherit
-webkit-font-smoothing: antialiased
content: "\f017" // clock symbol
margin-right: 0.3em

110
client/components/cards/checklists.jade Normal file
View File

@ -0,0 +1,110 @@
template(name="checklists")
.checklists-title
h3
i.fa.fa-check
| {{_ 'checklists'}}
if currentUser.isBoardMember
.material-toggle-switch
span.toggle-switch-title {{_ 'hide-checked-items'}}
if hideCheckedItems
input.toggle-switch(type="checkbox" id="toggleHideCheckedItemsButton" checked="checked")
else
input.toggle-switch(type="checkbox" id="toggleHideCheckedItemsButton")
label.toggle-label(for="toggleHideCheckedItemsButton")
if toggleDeleteDialog.get
.board-overlay#card-details-overlay
+checklistDeleteDialog(checklist = checklistToDelete)
.card-checklist-items
each checklist in currentCard.checklists
+checklistDetail(checklist = checklist)
if canModifyCard
+inlinedForm(autoclose=false classNames="js-add-checklist" cardId = cardId)
+addChecklistItemForm
else
a.js-open-inlined-form
i.fa.fa-plus
| {{_ 'add-checklist'}}...
template(name="checklistDetail")
.js-checklist.checklist
+inlinedForm(classNames="js-edit-checklist-title" checklist = checklist)
+editChecklistItemForm(checklist = checklist)
else
.checklist-title
span
if canModifyCard
a.js-delete-checklist.toggle-delete-checklist-dialog {{_ "delete"}}...
if canModifyCard
h2.title.js-open-inlined-form.is-editable
+viewer
= checklist.title
else
h2.title
+viewer
= checklist.title
+checklistItems(checklist = checklist)
template(name="checklistDeleteDialog")
.js-confirm-checklist-delete
p
i(class="fa fa-exclamation-triangle" aria-hidden="true")
p
| {{_ 'confirm-checklist-delete-dialog'}}
span {{checklist.title}}
| ?
.js-checklist-delete-buttons
button.confirm-checklist-delete(type="button") {{_ 'delete'}}
button.toggle-delete-checklist-dialog(type="button") {{_ 'cancel'}}
template(name="addChecklistItemForm")
textarea.js-add-checklist-item(rows='1' autofocus)
.edit-controls.clearfix
button.primary.confirm.js-submit-add-checklist-item-form(type="submit") {{_ 'save'}}
a.fa.fa-times-thin.js-close-inlined-form
template(name="editChecklistItemForm")
textarea.js-edit-checklist-item(rows='1' autofocus dir="auto")
if $eq type 'item'
= item.title
else
= checklist.title
.edit-controls.clearfix
button.primary.confirm.js-submit-edit-checklist-item-form(type="submit") {{_ 'save'}}
a.fa.fa-times-thin.js-close-inlined-form
span(title=createdAt) {{ moment createdAt }}
if canModifyCard
a.js-delete-checklist-item {{_ "delete"}}...
template(name="checklistItems")
.checklist-items.js-checklist-items
each item in checklist.items
+inlinedForm(classNames="js-edit-checklist-item" item = item checklist = checklist)
+editChecklistItemForm(type = 'item' item = item checklist = checklist)
else
+checklistItemDetail(item = item checklist = checklist)
if canModifyCard
+inlinedForm(autoclose=false classNames="js-add-checklist-item" checklist = checklist)
+addChecklistItemForm
else
a.add-checklist-item.js-open-inlined-form
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}}")
if canModifyCard
.check-box-container
.check-box.materialCheckBox(class="{{#if item.isFinished }}is-checked{{/if}}")
.item-title.js-open-inlined-form.is-editable(class="{{#if item.isFinished }}is-checked{{/if}}")
+viewer
= item.title
else
.materialCheckBox(class="{{#if item.isFinished }}is-checked{{/if}}")
.item-title(class="{{#if item.isFinished }}is-checked{{/if}}")
+viewer
= item.title

282
client/components/cards/checklists.js Normal file
View File

@ -0,0 +1,282 @@
const { calculateIndexData, capitalize } = Utils;
function initSorting(items) {
items.sortable({
tolerance: 'pointer',
helper: 'clone',
items: '.js-checklist-item:not(.placeholder)',
connectWith: '.js-checklist-items',
appendTo: '.board-canvas',
distance: 7,
placeholder: 'checklist-item placeholder',
scroll: false,
start(evt, ui) {
ui.placeholder.height(ui.helper.height());
EscapeActions.executeUpTo('popup-close');
},
stop(evt, ui) {
const parent = ui.item.parents('.js-checklist-items');
const checklistId = Blaze.getData(parent.get(0)).checklist._id;
let prevItem = ui.item.prev('.js-checklist-item').get(0);
if (prevItem) {
prevItem = Blaze.getData(prevItem).item;
}
let nextItem = ui.item.next('.js-checklist-item').get(0);
if (nextItem) {
nextItem = Blaze.getData(nextItem).item;
}
const nItems = 1;
const sortIndex = calculateIndexData(prevItem, nextItem, nItems);
const checklistDomElement = ui.item.get(0);
const checklistData = Blaze.getData(checklistDomElement);
const checklistItem = checklistData.item;
items.sortable('cancel');
checklistItem.move(checklistId, sortIndex.base);
},
});
}
BlazeComponent.extendComponent({
onRendered() {
const self = this;
self.itemsDom = this.$('.js-checklist-items');
initSorting(self.itemsDom);
self.itemsDom.mousedown(function(evt) {
evt.stopPropagation();
});
function userIsMember() {
return Meteor.user() && Meteor.user().isBoardMember();
}
// Disable sorting if the current user is not a board member or is a miniscreen
self.autorun(() => {
const $itemsDom = $(self.itemsDom);
if ($itemsDom.data('uiSortable') || $itemsDom.data('sortable')) {
$(self.itemsDom).sortable(
'option',
'disabled',
!userIsMember() || Utils.isMiniScreen(),
);
}
});
},
canModifyCard() {
return (
Meteor.user() &&
Meteor.user().isBoardMember() &&
!Meteor.user().isCommentOnly() &&
!Meteor.user().isWorker()
);
},
}).register('checklistDetail');
BlazeComponent.extendComponent({
addChecklist(event) {
event.preventDefault();
const textarea = this.find('textarea.js-add-checklist-item');
const title = textarea.value.trim();
let cardId = this.currentData().cardId;
const card = Cards.findOne(cardId);
if (card.isLinked()) cardId = card.linkedId;
if (title) {
Checklists.insert({
cardId,
title,
sort: card.checklists().count(),
});
setTimeout(() => {
this.$('.add-checklist-item')
.last()
.click();
}, 100);
}
textarea.value = '';
textarea.focus();
},
addChecklistItem(event) {
event.preventDefault();
const textarea = this.find('textarea.js-add-checklist-item');
const title = textarea.value.trim();
const checklist = this.currentData().checklist;
if (title) {
ChecklistItems.insert({
title,
checklistId: checklist._id,
cardId: checklist.cardId,
sort: checklist.itemCount(),
});
}
// We keep the form opened, empty it.
textarea.value = '';
textarea.focus();
},
canModifyCard() {
return (
Meteor.user() &&
Meteor.user().isBoardMember() &&
!Meteor.user().isCommentOnly() &&
!Meteor.user().isWorker()
);
},
deleteChecklist() {
const checklist = this.currentData().checklist;
if (checklist && checklist._id) {
Checklists.remove(checklist._id);
this.toggleDeleteDialog.set(false);
}
},
deleteItem() {
const checklist = this.currentData().checklist;
const item = this.currentData().item;
if (checklist && item && item._id) {
ChecklistItems.remove(item._id);
}
},
editChecklist(event) {
event.preventDefault();
const textarea = this.find('textarea.js-edit-checklist-item');
const title = textarea.value.trim();
const checklist = this.currentData().checklist;
checklist.setTitle(title);
},
editChecklistItem(event) {
event.preventDefault();
const textarea = this.find('textarea.js-edit-checklist-item');
const title = textarea.value.trim();
const item = this.currentData().item;
item.setTitle(title);
},
onCreated() {
this.toggleDeleteDialog = new ReactiveVar(false);
this.checklistToDelete = null; //Store data context to pass to checklistDeleteDialog template
},
pressKey(event) {
//If user press enter key inside a form, submit it
//Unless the user is also holding down the 'shift' key
if (event.keyCode === 13 && !event.shiftKey) {
event.preventDefault();
const $form = $(event.currentTarget).closest('form');
$form.find('button[type=submit]').click();
}
},
focusChecklistItem(event) {
// If a new checklist is created, pre-fill the title and select it.
const checklist = this.currentData().checklist;
if (!checklist) {
const textarea = event.target;
textarea.value = capitalize(TAPi18n.__('r-checklist'));
textarea.select();
}
},
events() {
const events = {
'click .toggle-delete-checklist-dialog'(event) {
if ($(event.target).hasClass('js-delete-checklist')) {
this.checklistToDelete = this.currentData().checklist; //Store data context
}
this.toggleDeleteDialog.set(!this.toggleDeleteDialog.get());
},
'click #toggleHideCheckedItemsButton'() {
Meteor.call('toggleHideCheckedItems');
},
};
return [
{
...events,
'submit .js-add-checklist': this.addChecklist,
'submit .js-edit-checklist-title': this.editChecklist,
'submit .js-add-checklist-item': this.addChecklistItem,
'submit .js-edit-checklist-item': this.editChecklistItem,
'click .js-delete-checklist-item': this.deleteItem,
'click .confirm-checklist-delete': this.deleteChecklist,
'focus .js-add-checklist-item': this.focusChecklistItem,
keydown: this.pressKey,
},
];
},
}).register('checklists');
Template.checklists.helpers({
hideCheckedItems() {
const currentUser = Meteor.user();
if (currentUser) return currentUser.hasHideCheckedItems();
return false;
},
});
Template.checklistDeleteDialog.onCreated(() => {
const $cardDetails = this.$('.card-details');
this.scrollState = {
position: $cardDetails.scrollTop(), //save current scroll position
top: false, //required for smooth scroll animation
};
//Callback's purpose is to only prevent scrolling after animation is complete
$cardDetails.animate({ scrollTop: 0 }, 500, () => {
this.scrollState.top = true;
});
//Prevent scrolling while dialog is open
$cardDetails.on('scroll', () => {
if (this.scrollState.top) {
//If it's already in position, keep it there. Otherwise let animation scroll
$cardDetails.scrollTop(0);
}
});
});
Template.checklistDeleteDialog.onDestroyed(() => {
const $cardDetails = this.$('.card-details');
$cardDetails.off('scroll'); //Reactivate scrolling
$cardDetails.animate({ scrollTop: this.scrollState.position });
});
Template.checklistItemDetail.helpers({
canModifyCard() {
return (
Meteor.user() &&
Meteor.user().isBoardMember() &&
!Meteor.user().isCommentOnly() &&
!Meteor.user().isWorker()
);
},
hideCheckedItems() {
const user = Meteor.user();
if (user) return user.hasHideCheckedItems();
return false;
},
});
BlazeComponent.extendComponent({
toggleItem() {
const checklist = this.currentData().checklist;
const item = this.currentData().item;
if (checklist && item && item._id) {
item.toggleItem();
}
},
events() {
return [
{
'click .js-checklist-item .check-box-container': this.toggleItem,
},
];
},
}).register('checklistItemDetail');

161
client/components/cards/checklists.styl Normal file
View File

@ -0,0 +1,161 @@
.js-add-checklist
color: #8c8c8c
textarea.js-add-checklist-item, textarea.js-edit-checklist-item
overflow: hidden
word-wrap: break-word
resize: none
height: 34px
.delete-text
color: #8c8c8c
text-decoration: underline
word-wrap: break-word
float: right
padding-top: 6px
&:hover
color: inherit
.checklists-title
display: flex
justify-content: space-between
.checklist-title
.checkbox
float: left
width: 30px
height 30px
font-size: 18px
line-height: 30px
.title
font-size: 18px
line-height: 25px
.checklist-stat
margin: 0 0.5em
float: right
padding-top: 6px
&.is-finished
color: #3cb500
.js-delete-checklist
@extends .delete-text
.js-confirm-checklist-delete
background-color: darken(white, 3%)
position: absolute
float: left;
width: 60%
margin-top: 0
margin-left: 13%
padding-bottom: 2%
padding-left: 3%
padding-right: 3%
z-index: 17
border-radius: 3px
p
position: relative
margin-top: 3%
width: 100%
text-align: center
span
font-weight: bold
i
font-size: 2em
.js-checklist-delete-buttons
position: relative
padding: left 2% right 2%
.confirm-checklist-delete
margin-left: 12%
float: left
.toggle-delete-checklist-dialog
margin-right: 12%
float: right
#card-details-overlay
top: 0
bottom: -600px
right: 0
.checklist
background: darken(white, 3%)
&.placeholder
background: darken(white, 20%)
border-radius: 2px
&.ui-sortable-helper
box-shadow: -2px 2px 8px rgba(0, 0, 0, .3),
0 0 1px rgba(0, 0, 0, .5)
transform: rotate(4deg)
cursor: grabbing
.checklist-item
margin: 0 0 0 0.1em
line-height: 18px
font-size: 1.1em
margin-top: 3px
display: flex
background: darken(white, 3%)
opacity: 1
transition: height 0ms 400ms, opacity 400ms 0ms
height: auto
overflow: hidden
&.is-checked.invisible
opacity: 0
height: 0
transition: height 0ms 0ms, opacity 600ms 0ms
margin-top: 0
margin-bottom: 0
&.placeholder
background: darken(white, 20%)
border-radius: 2px
&.ui-sortable-helper
box-shadow: -2px 2px 8px rgba(0, 0, 0, .3),
0 0 1px rgba(0, 0, 0, .5)
transform: rotate(4deg)
cursor: grabbing
&:hover
background-color: darken(white, 8%)
.check-box-container
padding-right: 1px;
.check-box
margin: 0.1em 0 0 0;
&.is-checked
border-bottom: 2px solid #3cb500
border-right: 2px solid #3cb500
.item-title
flex: 1
margin-left: 10px;
&.is-checked
color: #8c8c8c
font-style: italic
text-decoration: line-through
& .viewer
p
margin-bottom: 2px
display: block
word-wrap: break-word
max-width: 420px
.js-delete-checklist-item
margin: 0 0 0.5em 1.33em
@extends .delete-text
padding: 12px 0 0 0
.add-checklist-item
margin: 0.2em 0 0.5em 1.33em
display: inline-block

39
client/components/cards/labels.jade Normal file
View File

@ -0,0 +1,39 @@
template(name="formLabel")
label(for="labelName") {{_ 'name'}}
input.js-label-name#labelName(type="text" name="name" value=name autofocus)
label {{_ "select-color"}}
.palette-colors: each labels
span.card-label.palette-color.js-palette-color(class="card-label-{{color}}")
if(isSelected color)
i.fa.fa-check
template(name="createLabelPopup")
form.create-label
with(color=defaultColor)
+formLabel
button.primary.wide(type="submit") {{_ 'create'}}
template(name="editLabelPopup")
form.edit-label
+formLabel
button.primary.wide.left(type="submit") {{_ 'save'}}
button.js-delete-label.negate.wide.right {{_ 'delete'}}
template(name="deleteLabelPopup")
p {{_ "label-delete-pop"}}
button.js-confirm.negate.full(type="submit") {{_ 'delete'}}
template(name="cardLabelsPopup")
ul.edit-labels-pop-over
each board.labels
li
a.card-label-edit-button.fa.fa-pencil.js-edit-label
span.card-label.card-label-selectable.js-select-label(class="card-label-{{color}}"
class="{{# if isLabelSelected ../_id }}active{{/if}}")
+viewer
= name
if(isLabelSelected ../_id)
i.card-label-selectable-icon.fa.fa-check
if currentUser.isBoardAdmin
a.quiet-button.full.js-add-label {{_ 'label-create'}}

103
client/components/cards/labels.js Normal file
View File

@ -0,0 +1,103 @@
let labelColors;
Meteor.startup(() => {
labelColors = Boards.simpleSchema()._schema['labels.$.color'].allowedValues;
});
BlazeComponent.extendComponent({
onCreated() {
this.currentColor = new ReactiveVar(this.data().color);
},
labels() {
return labelColors.map(color => ({ color, name: '' }));
},
isSelected(color) {
return this.currentColor.get() === color;
},
events() {
return [
{
'click .js-palette-color'() {
this.currentColor.set(this.currentData().color);
},
},
];
},
}).register('formLabel');
Template.createLabelPopup.helpers({
// This is the default color for a new label. We search the first color that
// is not already used in the board (although it's not a problem if two
// labels have the same color).
defaultColor() {
const labels = Boards.findOne(Session.get('currentBoard')).labels;
const usedColors = _.pluck(labels, 'color');
const availableColors = _.difference(labelColors, usedColors);
return availableColors.length > 1 ? availableColors[0] : labelColors[0];
},
});
Template.cardLabelsPopup.events({
'click .js-select-label'(event) {
const card = Cards.findOne(Session.get('currentCard'));
const labelId = this._id;
card.toggleLabel(labelId);
event.preventDefault();
},
'click .js-edit-label': Popup.open('editLabel'),
'click .js-add-label': Popup.open('createLabel'),
});
Template.formLabel.events({
'click .js-palette-color'(event) {
const $this = $(event.currentTarget);
// hide selected ll colors
$('.js-palette-select').addClass('hide');
// show select color
$this.find('.js-palette-select').removeClass('hide');
},
});
Template.createLabelPopup.events({
// Create the new label
'submit .create-label'(event, templateInstance) {
event.preventDefault();
const board = Boards.findOne(Session.get('currentBoard'));
const name = templateInstance
.$('#labelName')
.val()
.trim();
const color = Blaze.getData(templateInstance.find('.fa-check')).color;
board.addLabel(name, color);
Popup.back();
},
});
Template.editLabelPopup.events({
'click .js-delete-label': Popup.afterConfirm('deleteLabel', function() {
const board = Boards.findOne(Session.get('currentBoard'));
board.removeLabel(this._id);
Popup.back(2);
}),
'submit .edit-label'(event, templateInstance) {
event.preventDefault();
const board = Boards.findOne(Session.get('currentBoard'));
const name = templateInstance
.$('#labelName')
.val()
.trim();
const color = Blaze.getData(templateInstance.find('.fa-check')).color;
board.editLabel(this._id, name, color);
Popup.back();
},
});
Template.cardLabelsPopup.helpers({
isLabelSelected(cardId) {
return _.contains(Cards.findOne(cardId).labelIds, this._id);
},
});

211
client/components/cards/labels.styl Normal file
View File

@ -0,0 +1,211 @@
@import 'nib'
// XXX Use .board-widget-labels as a flexbox container
.card-label
border-radius: 4px
color: white //Default white text, in select cases, changed to black to improve contrast between label colour and text
display: inline-block
font-weight: 700
font-size: 13px
margin-right: 4px
margin-bottom: 5px
padding: 3px 8px
max-width: 210px
min-width: 8px
overflow: ellipsis
word-wrap: break-word
height: 18px
vertical-align: bottom
&:hover
color: white
&.square
height: 30px
width: @height
padding: 0
&.add-label
box-shadow: 0 0 0 2px darken(white, 25%) inset
&:hover, &.is-active
box-shadow: 0 0 0 2px darken(white, 60%) inset
i.fa-plus
margin-top: 3px
.palette-colors
display: flex
flex-wrap: wrap
.palette-color
flex-grow: 1
display: flex
align-items: center
justify-content: center
.card-label-green
background-color: #3cb500
.card-label-yellow
background-color: #fad900
color: #000000 //Black text for better visibility
.card-label-orange
background-color: #ff9f19
color: #000000 //Black text for better visibility
.card-label-red
background-color: #eb4646
.card-label-purple
background-color: #a632db
.card-label-blue
background-color: #0079bf
.card-label-pink
background-color: #ff78cb
color: #000000 //Black text for better visibility
.card-label-sky
background-color: #00c2e0
.card-label-black
background-color: #4d4d4d
.card-label-lime
background-color: #51e898
color: #000000 //Black text for better visibility
.card-label-silver
background-color: #c0c0c0
color: #000000 //Black text for better visibility
.card-label-peachpuff
background-color: #ffdab9
color: #000000 //Black text for better visibility
.card-label-crimson
background-color: #dc143c
.card-label-plum
background-color: #dda0dd
color: #000000 //Black text for better visibility
.card-label-darkgreen
background-color: #006400
.card-label-slateblue
background-color: #6a5acd
.card-label-magenta
background-color: #ff00ff
.card-label-gold
background-color: #ffd700
color: #000000 //Black text for better visibility
.card-label-navy
background-color: #000080
.card-label-gray
background-color: #808080
.card-label-saddlebrown
background-color: #8b4513
.card-label-paleturquoise
background-color: #afeeee
color: #000000 //Black text for better visibility
.card-label-mistyrose
background-color: #ffe4e1
color: #000000 //Black text for better visibility
.card-label-indigo
background-color: #4b0082
.edit-label,
.create-label
.card-label
float: left
height: 25px
margin: 0px 3% 7px 0px
width: 10.5%
cursor: pointer
.edit-labels
input[type="text"]
margin: 4px 0 6px 38px
width: 243px
.card-label
height: 30px
left: 0
padding: 1px 5px
position: absolute
top: 0
width: 24px
.labels-static .card-label
line-height: 30px
margin-bottom: 4px
position: relative
top: auto
left: 0
width: 260px
.edit-labels-pop-over
margin-bottom: 8px
.card-label .viewer p
margin: 0
.edit-labels-pop-over .shortcut
display: inline-block
.card-label-selectable
border-radius: 3px
cursor: pointer
margin: 0
margin-bottom: 3px
width: 190px
min-height: 18px
padding: 8px
position: relative
transition: margin-right .1s
.card-label-selectable-icon
position: absolute
top: 8px
right: -20px
&.active:hover,
&.active,
&.active.selected:hover,
&.active.selected
padding-right: 32px
.card-label-selectable-icon
right: 6px
&.selected,
&:hover
opacity: .8
.active .card-label-selectable
&,
&:hover
margin-right: 0
.card-label-selectable-icon
right: 8px
.card-label-edit-button
border-radius: 3px
float: right
padding: 8px
&:hover
background: #dbdbdb

120
client/components/cards/minicard.jade Normal file
View File

@ -0,0 +1,120 @@
template(name="minicard")
.minicard(
class="{{#if isLinkedCard}}linked-card{{/if}}"
class="{{#if isLinkedBoard}}linked-board{{/if}}"
class="minicard-{{colorClass}}")
if isMiniScreen
.handle
.fa.fa-arrows
unless isMiniScreen
if showDesktopDragHandles
.handle
.fa.fa-arrows
if cover
.minicard-cover(style="background-image: url('{{cover.url}}');")
if labels
.minicard-labels
each labels
unless hiddenMinicardLabelText
span.card-label(class="card-label-{{color}}" title=name)
+viewer
= name
if hiddenMinicardLabelText
.minicard-label(class="card-label-{{color}}" title="{{name}}")
.minicard-title
if $eq 'prefix-with-full-path' currentBoard.presentParentTask
.parent-prefix
| {{ parentString ' > ' }}
if $eq 'prefix-with-parent' currentBoard.presentParentTask
.parent-prefix
| {{ parentCardName }}
if isLinkedBoard
a.js-linked-link
span.linked-icon.fa.fa-folder
else if isLinkedCard
a.js-linked-link
span.linked-icon.fa.fa-id-card
if getArchived
span.linked-icon.linked-archived.fa.fa-archive
+viewer
= getTitle
if $eq 'subtext-with-full-path' currentBoard.presentParentTask
.parent-subtext
| {{ parentString ' > ' }}
if $eq 'subtext-with-parent' currentBoard.presentParentTask
.parent-subtext
| {{ parentCardName }}
.dates
if getReceived
unless getStart
unless getDue
unless getEnd
.date
+minicardReceivedDate
if getStart
.date
+minicardStartDate
if getDue
.date
+minicardDueDate
if getEnd
+minicardEndDate
if getSpentTime
.date
+cardSpentTime
.minicard-custom-fields
each customFieldsWD
if definition.showOnCard
if trueValue
.minicard-custom-field
if definition.showLabelOnMiniCard
.minicard-custom-field-item
+viewer
= definition.name
.minicard-custom-field-item
if $eq definition.type "currency"
+viewer
= formattedCurrencyCustomFieldValue(definition)
else
+viewer
= trueValue
if getAssignees
.minicard-assignees.js-minicard-assignees
each getAssignees
+userAvatar(userId=this)
hr
if getMembers
.minicard-members.js-minicard-members
each getMembers
+userAvatar(userId=this)
.badges
unless currentUser.isNoComments
if comments.count
.badge(title="{{_ 'card-comments-title' comments.count }}")
span.badge-icon.fa.fa-comment-o.badge-comment
= ' '
= comments.count
//span.badge-comment.badge-text
//| {{_ 'comment'}}
if getDescription
.badge.badge-state-image-only(title=getDescription)
span.badge-icon.fa.fa-align-left
if getVoteQuestion
.badge.badge-state-image-only(title=getVoteQuestion)
span.badge-icon.fa.fa-thumbs-up(class="{{#if voteState}}text-green{{/if}}")
span.badge-text {{ voteCountPositive }}
span.badge-icon.fa.fa-thumbs-down(class="{{#if $eq voteState false}}text-red{{/if}}")
span.badge-text {{ voteCountNegative }}
if attachments.count
.badge
span.badge-icon.fa.fa-paperclip
span.badge-text= attachments.count
if checklists.count
.badge(class="{{#if checklistFinished}}is-finished{{/if}}")
span.badge-icon.fa.fa-check-square-o
span.badge-text.check-list-text {{checklistFinishedCount}}/{{checklistItemCount}}

69
client/components/cards/minicard.js Normal file
View File

@ -0,0 +1,69 @@
import { Cookies } from 'meteor/ostrio:cookies';
const cookies = new Cookies();
// Template.cards.events({
// 'click .member': Popup.open('cardMember')
// });
BlazeComponent.extendComponent({
template() {
return 'minicard';
},
formattedCurrencyCustomFieldValue(definition) {
const customField = this.data()
.customFieldsWD()
.find(f => f._id === definition._id);
const customFieldTrueValue =
customField && customField.trueValue ? customField.trueValue : '';
const locale = TAPi18n.getLanguage();
return new Intl.NumberFormat(locale, {
style: 'currency',
currency: definition.settings.currencyCode,
}).format(customFieldTrueValue);
},
events() {
return [
{
'click .js-linked-link'() {
if (this.data().isLinkedCard()) Utils.goCardId(this.data().linkedId);
else if (this.data().isLinkedBoard())
Utils.goBoardId(this.data().linkedId);
},
},
{
'click .js-toggle-minicard-label-text'() {
if (cookies.has('hiddenMinicardLabelText')) {
cookies.remove('hiddenMinicardLabelText'); //true
} else {
cookies.set('hiddenMinicardLabelText', 'true'); //true
}
},
},
];
},
}).register('minicard');
Template.minicard.helpers({
showDesktopDragHandles() {
currentUser = Meteor.user();
if (currentUser) {
return (currentUser.profile || {}).showDesktopDragHandles;
} else if (cookies.has('showDesktopDragHandles')) {
return true;
} else {
return false;
}
},
hiddenMinicardLabelText() {
currentUser = Meteor.user();
if (currentUser) {
return (currentUser.profile || {}).hiddenMinicardLabelText;
} else if (cookies.has('hiddenMinicardLabelText')) {
return true;
} else {
return false;
}
},
});

308
client/components/cards/minicard.styl Normal file
View File

@ -0,0 +1,308 @@
@import 'nib'
.minicard-wrapper
cursor: pointer
position: relative
display: flex
align-items: center
margin-bottom: 9px
&.placeholder
background: darken(white, 20%)
border-radius: 9px
&.ui-sortable-helper
cursor: grabbing
transform: rotate(4deg)
display: block !important
.and-n-other
width: 100%
height: 16px
padding: 4px
background-color: darken(white, 5%)
text-align: center
border-radius: 3px
.multi-selection-checkbox
display: none
.multi-selection-checkbox + .minicard
margin-left: 8px
.minicard
padding: 6px 8px 2px
position: relative
flex: 1
flex-wrap: wrap
background-color: #fff
min-height: 20px
box-shadow: 0 1px 2px rgba(0,0,0,.15)
border-radius: 2px
color: #4d4d4d
overflow: hidden
transition: transform 0.2s,
border-radius 0.2s
&.linked-board
&.linked-card
.linked-icon
display: inline-block
margin-right: 11px
vertical-align: baseline
font-size: 0.9em
.linked-archived
color: #937760
.is-selected &
transform: translateX(11px)
border-bottom-right-radius: 0
border-top-right-radius: 0
z-index: 25
box-shadow: -2px 1px 2px rgba(0,0,0,.2)
&:hover:not(.minicard-composer),
.is-selected &,
.draggable-hover-card &
background: darken(white, 3%)
.draggable-hover-card &
background: darken(white, 7%)
.minicard-cover
background-position: center
background-repeat: no-repeat
background-size: contain
height: 145px
user-select: none
margin: -6px -8px 6px -8px
border-radius: top 2px
.minicard-labels
float: none
display: flex
flex-wrap: wrap
.minicard-label
width: 11px
height: @width
border-radius: 2px
margin-right: 3px
margin-bottom: 3px
.minicard-custom-fields
display:block;
.minicard-custom-field
display:flex;
.minicard-custom-field-item
flex-grow: 1
display: block
word-wrap: break-word
max-width: 100px
margin-right: 4px
.handle
width: 20px;
height: 20px;
position: absolute;
right: 5px;
top: 5px;
display:none;
@media only screen {
display:block;
}
.fa-arrows
font-size:20px;
color: #ccc;
.minicard-title
p:last-child
margin-bottom: 0
.viewer
display: block
word-wrap: break-word
max-width: 230px
.dates
display: flex;
flex-direction: row;
flex-wrap: wrap;
.date
margin-right: 3px
.badges
float: left
margin-top: 7px
color: darken(white, 50%)
&:empty
display: none
.badge
float: left
margin-right: 11px
margin-bottom: 3px
font-size: 0.9em
&.is-finished
background: #3cb500
padding: 0px 3px
border-radius: 3px
color: white
&:last-of-type
margin-right: 0
.badge-icon,
.badge-text
vertical-align: middle
&.badge-comment
margin-bottom: 0.1rem
.badge-text
font-size: 0.9em
padding-left: 2px
line-height: 14px
.check-list-text
padding-left: 0px
line-height: 12px
.minicard-members,
.minicard-assignees
float: right
margin: 2px -8px 12px 0
.member
float: right
border-radius: 50%
height: 28px
width: @height
.assignee
float: right
border-radius: 50%
height: 28px
width: @height
+ .badges
margin-top: 10px
.minicard-members:empty,
.minicard-assignees:empty
display: none
&.minicard-composer
margin-bottom: 10px
textarea.minicard-composer-textarea,
textarea.minicard-composer-textarea:focus
resize: none
background: none
border: none
box-shadow: none
height: auto
margin: 0
padding: 0
max-height: 162px
min-height: 36px
margin-bottom: 20px
overflow-y: auto
.parent-prefix
color: darken(white, 30%)
font-size: 0.9em
.parent-subtext
color: darken(white, 30%)
font-size: 0.9em
@media screen and (max-width: 800px)
.minicard
.is-selected &
transform: translateX(0px)
border-bottom-right-radius: 0
border-top-right-radius: 0
z-index: 15
box-shadow: 0 1px 2px rgba(0,0,0,.15)
minicard-color(background, color...)
background-color: background
if color
color: color //overwrite text for better visibility
&:hover:not(.minicard-composer),
.is-selected &,
.draggable-hover-card &
background: darken(background, 3%)
.draggable-hover-card &
background: darken(background, 7%)
.minicard-green
minicard-color(#3cb500, #ffffff) //White text for better visibility
.minicard-yellow
minicard-color(#fad900)
.minicard-orange
minicard-color(#ff9f19)
.minicard-red
minicard-color(#eb4646, #ffffff) //White text for better visibility
.minicard-purple
minicard-color(#a632db, #ffffff) //White text for better visibility
.minicard-blue
minicard-color(#0079bf, #ffffff) //White text for better visibility
.minicard-pink
minicard-color(#ff78cb)
.minicard-sky
minicard-color(#00c2e0, #ffffff) //White text for better visibility
.minicard-black
minicard-color(#4d4d4d, #ffffff) //White text for better visibility
.minicard-lime
minicard-color(#51e898)
.minicard-silver
minicard-color(#c0c0c0)
.minicard-peachpuff
minicard-color(#ffdab9)
.minicard-crimson
minicard-color(#dc143c, #ffffff) //White text for better visibility
.minicard-plum
minicard-color(#dda0dd)
.minicard-darkgreen
minicard-color(#006400, #ffffff) //White text for better visibility
.minicard-slateblue
minicard-color(#6a5acd, #ffffff) //White text for better visibility
.minicard-magenta
minicard-color(#ff00ff, #ffffff) //White text for better visibility
.minicard-gold
minicard-color(#ffd700)
.minicard-navy
minicard-color(#000080, #ffffff) //White text for better visibility
.minicard-gray
minicard-color(#808080, #ffffff) //White text for better visibility
.minicard-saddlebrown
minicard-color(#8b4513, #ffffff) //White text for better visibility
.minicard-paleturquoise
minicard-color(#afeeee)
.minicard-mistyrose
minicard-color(#ffe4e1)
.minicard-indigo
minicard-color(#4b0082, #ffffff) //White text for better visibility
.text-red
color:red
.text-green
color:green

99
client/components/cards/subtasks.jade Normal file
View File

@ -0,0 +1,99 @@
template(name="subtasks")
h3
i.fa.fa-sitemap
| {{_ 'subtasks'}}
if toggleDeleteDialog.get
.board-overlay#card-details-overlay
+subtaskDeleteDialog(subtask = subtaskToDelete)
.card-subtasks-items
each subtask in currentCard.subtasks
+subtaskDetail(subtask = subtask)
if canModifyCard
+inlinedForm(autoclose=false classNames="js-add-subtask" cardId = cardId)
+addSubtaskItemForm
else
a.js-open-inlined-form
i.fa.fa-plus
| {{_ 'add-subtask'}}...
template(name="subtaskDetail")
.js-subtasks.subtask
+inlinedForm(classNames="js-edit-subtask-title" subtask = subtask)
+editSubtaskItemForm(subtask = subtask)
else
.subtask-title
span
a.js-view-subtask(title="{{ subtask.title }}") {{_ "view-it"}}
if canModifyCard
a.js-delete-subtask.toggle-delete-subtask-dialog {{_ "delete"}}...
if canModifyCard
h2.title.js-open-inlined-form.is-editable
+viewer
= subtask.title
else
h2.title
+viewer
= subtask.title
template(name="subtaskDeleteDialog")
.js-confirm-subtask-delete
p
i(class="fa fa-exclamation-triangle" aria-hidden="true")
p
| {{_ 'confirm-subtask-delete-dialog'}}
span {{subtask.title}}
| ?
.js-subtask-delete-buttons
button.confirm-subtask-delete(type="button") {{_ 'delete'}}
button.toggle-delete-subtask-dialog(type="button") {{_ 'cancel'}}
template(name="addSubtaskItemForm")
textarea.js-add-subtask-item(rows='1' autofocus dir="auto")
.edit-controls.clearfix
button.primary.confirm.js-submit-add-subtask-item-form(type="submit") {{_ 'save'}}
a.fa.fa-times-thin.js-close-inlined-form
template(name="editSubtaskItemForm")
textarea.js-edit-subtask-item(rows='1' autofocus dir="auto")
if $eq type 'item'
= item.title
else
= subtask.title
.edit-controls.clearfix
button.primary.confirm.js-submit-edit-subtask-item-form(type="submit") {{_ 'save'}}
a.fa.fa-times-thin.js-close-inlined-form
span(title=createdAt) {{ moment createdAt }}
if canModifyCard
a.js-delete-subtask-item {{_ "delete"}}...
template(name="subtasksItems")
.subtasks-items.js-subtasks-items
each item in subtasks.items
+inlinedForm(classNames="js-edit-subtask-item" item = item subtasks = subtasks)
+editSubtaskItemForm(type = 'item' item = item subtasks = subtasks)
else
+subtaskItemDetail(item = item subtasks = subtasks)
if canModifyCard
+inlinedForm(autoclose=false classNames="js-add-subtask-item" subtasks = subtasks dir="auto")
+addSubtaskItemForm
else
a.add-subtask-item.js-open-inlined-form
i.fa.fa-plus
| {{_ 'add-subtask-item'}}...
template(name='subtaskItemDetail')
.js-subtasks-item.subtasks-item
if canModifyCard
.check-box.materialCheckBox(class="{{#if item.isFinished }}is-checked{{/if}}")
.item-title.js-open-inlined-form.is-editable(class="{{#if item.isFinished }}is-checked{{/if}}")
+viewer
= item.title
else
.materialCheckBox(class="{{#if item.isFinished }}is-checked{{/if}}")
.item-title(class="{{#if item.isFinished }}is-checked{{/if}}")
+viewer
= item.title

182
client/components/cards/subtasks.js Normal file
View File

@ -0,0 +1,182 @@
BlazeComponent.extendComponent({
canModifyCard() {
return (
Meteor.user() &&
Meteor.user().isBoardMember() &&
!Meteor.user().isCommentOnly() &&
!Meteor.user().isWorker()
);
},
}).register('subtaskDetail');
BlazeComponent.extendComponent({
addSubtask(event) {
event.preventDefault();
const textarea = this.find('textarea.js-add-subtask-item');
const title = textarea.value.trim();
const cardId = this.currentData().cardId;
const card = Cards.findOne(cardId);
const sortIndex = -1;
const crtBoard = Boards.findOne(card.boardId);
const targetBoard = crtBoard.getDefaultSubtasksBoard();
const listId = targetBoard.getDefaultSubtasksListId();
//Get the full swimlane data for the parent task.
const parentSwimlane = Swimlanes.findOne({
boardId: crtBoard._id,
_id: card.swimlaneId,
});
//find the swimlane of the same name in the target board.
const targetSwimlane = Swimlanes.findOne({
boardId: targetBoard._id,
title: parentSwimlane.title,
});
//If no swimlane with a matching title exists in the target board, fall back to the default swimlane.
const swimlaneId =
targetSwimlane === undefined
? targetBoard.getDefaultSwimline()._id
: targetSwimlane._id;
if (title) {
const _id = Cards.insert({
title,
parentId: cardId,
members: [],
labelIds: [],
customFields: [],
listId,
boardId: targetBoard._id,
sort: sortIndex,
swimlaneId,
type: 'cardType-card',
});
// In case the filter is active we need to add the newly inserted card in
// the list of exceptions -- cards that are not filtered. Otherwise the
// card will disappear instantly.
// See https://github.com/wekan/wekan/issues/80
Filter.addException(_id);
setTimeout(() => {
this.$('.add-subtask-item')
.last()
.click();
}, 100);
}
textarea.value = '';
textarea.focus();
},
canModifyCard() {
return (
Meteor.user() &&
Meteor.user().isBoardMember() &&
!Meteor.user().isCommentOnly() &&
!Meteor.user().isWorker()
);
},
deleteSubtask() {
const subtask = this.currentData().subtask;
if (subtask && subtask._id) {
subtask.archive();
this.toggleDeleteDialog.set(false);
}
},
editSubtask(event) {
event.preventDefault();
const textarea = this.find('textarea.js-edit-subtask-item');
const title = textarea.value.trim();
const subtask = this.currentData().subtask;
subtask.setTitle(title);
},
onCreated() {
this.toggleDeleteDialog = new ReactiveVar(false);
this.subtaskToDelete = null; //Store data context to pass to subtaskDeleteDialog template
},
pressKey(event) {
//If user press enter key inside a form, submit it
//Unless the user is also holding down the 'shift' key
if (event.keyCode === 13 && !event.shiftKey) {
event.preventDefault();
const $form = $(event.currentTarget).closest('form');
$form.find('button[type=submit]').click();
}
},
events() {
const events = {
'click .toggle-delete-subtask-dialog'(event) {
if ($(event.target).hasClass('js-delete-subtask')) {
this.subtaskToDelete = this.currentData().subtask; //Store data context
}
this.toggleDeleteDialog.set(!this.toggleDeleteDialog.get());
},
'click .js-view-subtask'(event) {
if ($(event.target).hasClass('js-view-subtask')) {
const subtask = this.currentData().subtask;
const board = subtask.board();
FlowRouter.go('card', {
boardId: board._id,
slug: board.slug,
cardId: subtask._id,
});
}
},
};
return [
{
...events,
'submit .js-add-subtask': this.addSubtask,
'submit .js-edit-subtask-title': this.editSubtask,
'click .confirm-subtask-delete': this.deleteSubtask,
keydown: this.pressKey,
},
];
},
}).register('subtasks');
Template.subtaskDeleteDialog.onCreated(() => {
const $cardDetails = this.$('.card-details');
this.scrollState = {
position: $cardDetails.scrollTop(), //save current scroll position
top: false, //required for smooth scroll animation
};
//Callback's purpose is to only prevent scrolling after animation is complete
$cardDetails.animate({ scrollTop: 0 }, 500, () => {
this.scrollState.top = true;
});
//Prevent scrolling while dialog is open
$cardDetails.on('scroll', () => {
if (this.scrollState.top) {
//If it's already in position, keep it there. Otherwise let animation scroll
$cardDetails.scrollTop(0);
}
});
});
Template.subtaskDeleteDialog.onDestroyed(() => {
const $cardDetails = this.$('.card-details');
$cardDetails.off('scroll'); //Reactivate scrolling
$cardDetails.animate({ scrollTop: this.scrollState.position });
});
Template.subtaskItemDetail.helpers({
canModifyCard() {
return (
Meteor.user() &&
Meteor.user().isBoardMember() &&
!Meteor.user().isCommentOnly() &&
!Meteor.user().isWorker()
);
},
});
BlazeComponent.extendComponent({
// ...
}).register('subtaskItemDetail');

142
client/components/cards/subtasks.styl Normal file
View File

@ -0,0 +1,142 @@
.js-add-subtask
color: #8c8c8c
textarea.js-add-subtask-item, textarea.js-edit-subtask-item
overflow: hidden
word-wrap: break-word
resize: none
height: 34px
.delete-text
color: #8c8c8c
text-decoration: underline
word-wrap: break-word
float: right
padding-top: 6px
&:hover
color: inherit
.subtask-title
.checkbox
float: left
width: 30px
height 30px
font-size: 18px
line-height: 30px
.title
font-size: 18px
line-height: 25px
.subtasks-stat
margin: 0 0.5em
float: right
padding-top: 6px
&.is-finished
color: #3cb500
.js-delete-subtask
@extends .delete-text
margin: 0 0.5em
.js-view-subtask
@extends .delete-text
.js-confirm-subtask-delete
background-color: darken(white, 3%)
position: absolute
float: left;
width: 60%
margin-top: 0
margin-left: 13%
padding-bottom: 2%
padding-left: 3%
padding-right: 3%
z-index: 17
border-radius: 3px
p
position: relative
margin-top: 3%
width: 100%
text-align: center
span
font-weight: bold
i
font-size: 2em
.js-subtask-delete-buttons
position: relative
padding: left 2% right 2%
.confirm-subtask-delete
margin-left: 12%
float: left
.toggle-delete-subtask-dialog
margin-right: 12%
float: right
#card-details-overlay
top: 0
bottom: -600px
right: 0
.subtasks
background: darken(white, 3%)
&.placeholder
background: darken(white, 20%)
border-radius: 2px
&.ui-sortable-helper
box-shadow: -2px 2px 8px rgba(0, 0, 0, .3),
0 0 1px rgba(0, 0, 0, .5)
transform: rotate(4deg)
cursor: grabbing
.subtasks-item
margin: 0 0 0 0.1em
line-height: 18px
font-size: 1.1em
margin-top: 3px
display: flex
background: darken(white, 3%)
&.placeholder
background: darken(white, 20%)
border-radius: 2px
&.ui-sortable-helper
box-shadow: -2px 2px 8px rgba(0, 0, 0, .3),
0 0 1px rgba(0, 0, 0, .5)
transform: rotate(4deg)
cursor: grabbing
&:hover
background-color: darken(white, 8%)
.check-box
margin: 0.1em 0 0 0;
&.is-checked
border-bottom: 2px solid #3cb500
border-right: 2px solid #3cb500
.item-title
flex: 1
padding-left: 10px;
&.is-checked
color: #8c8c8c
font-style: italic
& .viewer
p
margin-bottom: 2px
.js-delete-subtask-item
margin: 0 0 0.5em 1.33em
@extends .delete-text
padding: 12px 0 0 0
.add-subtask-item
margin: 0.2em 0 0.5em 1.33em
display: inline-block

15
client/components/forms/datepicker.jade Normal file
View File

@ -0,0 +1,15 @@
template(name="datepicker")
.datepicker-container
form.edit-date
.fields
.left
label(for="date") {{_ 'date'}}
input.js-date-field#date(type="text" name="date" value=showDate placeholder=dateFormat autofocus)
.right
label(for="time") {{_ 'time'}}
input.js-time-field#time(type="text" name="time" value=showTime placeholder=timeFormat)
.js-datepicker
if error.get
.warning {{_ error.get}}
button.primary.wide.left.js-submit-date(type="submit") {{_ 'save'}}
button.js-delete-date.negate.wide.right.js-delete-date {{_ 'delete'}}

17
client/components/forms/datepicker.styl Normal file
View File

@ -0,0 +1,17 @@
.datepicker-container
.fields
.left
width: 56%
.right
width: 38%
.datepicker
width: 100%
table
width: 100%
border: none
border-spacing: 0
border-collapse: collapse
thead
background: none
td, th
box-sizing: border-box

696
client/components/forms/forms.styl Normal file
View File

@ -0,0 +1,696 @@
@import 'nib'
select,
textarea,
input:not([type=file]),
button
box-sizing: border-box
background-color: #ebebeb
border: 1px solid #ccc
border-radius: 3px
display: block
margin-bottom: 12px
min-height: 34px
padding: 7px
&.full
width: 100%
&.input-error
background-color: #ece9e9
border-color: #ba1212
&:focus
outline: 0
input[type="file"]
margin-bottom: 16px
input[type="radio"]
-webkit-appearance: radio
min-height: inherit
input[type="text"],
input[type="password"],
input[type="email"]
transition: background 85ms ease-in,
border-color 85ms ease-in
width: 250px
&.inline-input
background: none
border: 0
margin: 0
padding: 2px
min-height: 0
height: 18px
width: 200px
&.full-line
width: 100%
input[type="email"]:invalid
box-shadow: none
input[type="text"],
input[type="password"],
input[type="email"],
textarea
&:hover
border-color: #999
&.input-error
border-color: #ba1212
&:focus
background: #fff
border-color: #318ec4
box-shadow: 0 0 2px #318ec4
&.input-error
background-color: #f8f7f7
border-color: #ba1212
box-shadow: 0 0 2px #d11515
&:disabled
background-color: #dcdcdc
border-color: #bfbfbf
color: #8c8c8c
-webkit-touch-callout: none
user-select: none
select
max-height: 300px
width: 256px
margin-bottom: 8px
&.inline
width: 100%
option[disabled]
color: #8c8c8c
textarea
height: 150px
transition: background 85ms ease-in,
border-color 85ms ease-in
resize: vertical
width: 100%
&.editor
resize: none
padding-bottom: 22px
.button
border-radius: 3px
text-decoration: none
position: relative
input[type="submit"],
button
background: #cfcfcf
background: linear-gradient(#cfcfcf, #c2c2c2)
border: none
cursor: pointer
display: inline-block
font-weight: 700
line-height: 22px
margin: 8px 4px 0 0
padding: 7px 20px
text-align: center
.wide
padding-left: 30px
padding-right: 30px
&:hover,
&:focus
background: #c2c2c2
background: linear-gradient(#c2c2c2, #b5b5b5)
&:active
background: #b5b5b5
background: linear-gradient(#b5b5b5, #a8a8a8)
box-shadow: inset 0 3px 6px rgba(0, 0, 0, .1)
&:hover,
&:focus,
&:active
background: #e6e6e6
background: linear-gradient(#e6e6e6, #e6e6e6)
&.primary
background: #005377
box-shadow: 0 1px 0 #4d4d4d
color: white
&:hover,
&:focus
background: #004766
&:active
background: #01628C
&.negate
&:hover,
&:focus
background: #990f0f
background: linear-gradient(#990f0f, #7d0c0c)
box-shadow: 0 1px 0 #4d4d4d
color: #fff
&:active
background: #7d0c0c
box-shadow: 0 1px 0 #4d4d4d
color: #fff
i.fa
margin-right: 10px
input[type="submit"].disabled,
input[type="submit"]:disabled,
input[type="button"].disabled,
button.disabled,
.button.disabled
&,
&:hover,
&:active
background: #cfcfcf
cursor: default
box-shadow: none
color: #a8a8a8
fieldset
border: 1px solid #bfbfbf
padding: 15px
margin-bottom: 15px
input[type="hidden"]
display: none
.radio-div,
.check-div
display: block
margin: 0 0 4px 20px
min-height: 20px
position: relative
input
left: -18px
min-height: 0
margin: 0
padding: 0
position: absolute
top: 2px
label
font-weight: 400
label
display: block
font-weight: 700
margin-bottom: 4px
&.form-error
color: #ba1212
input,
textarea
&::-webkit-input-placeholder,
&::-moz-placeholder
color: #8c8c8c
.edit-controls,
.add-controls
display: flex
align-items: baseline
margin-top: 0
button[type=submit]
input[type=button]
float: left
height: 32px
margin-top: -2px
padding-top: 5px
padding-bottom: 5px
.fa-times-thin
font-size: 26px
margin: 3px 4px
// Material Design checkboxes
[type="checkbox"]:not(:checked),
[type="checkbox"]:checked
position: absolute
left: -9999px
visibility: hidden
.materialCheckBox
position: relative
width: 13px
height: @width
z-index: 0
border: 2px solid #5a5a5a
border-radius: 1px
transition: .2s
margin: 0
cursor: pointer
&.is-checked
top: -4px
left: -3px
width: 7px
height: 15px
margin-right: 6px
border-top: 2px solid transparent
border-left: 2px solid transparent
transform: rotate(40deg)
-webkit-backface-visibility: hidden
transform-origin: 100% 100%
.button-link
background: #fff
background: linear-gradient(#fff, #f5f5f5)
border-radius: 3px
box-sizing: border-box
user-select: none
border: 1px solid #e3e3e3
border-bottom-color: #c2c2c2
cursor: pointer
display: block
font-weight: 700
height: 34px
margin-top: 6px
max-width: 300px
padding: 7px
position: relative
text-decoration: none
overflow: ellipsis
.on
background: #48b512
background: linear-gradient(#48b512, #3d990f)
border-radius: 3px
color: #fff
display: none
font-size: 12px
font-weight: 700
height: 17px
line-height: @height
margin: 0
padding: 2px 4px
position: absolute
right: 5px
top: 5px
text-align: center
&.is-on
padding-right: 30px
max-width: 196px
.on
display: block
&.inline
color: #666
padding: 2px 14px
margin-left: 4px
&.setting
height: 52px
float: left
position: relative
margin-top: 0
&.disabled
background: #fff
border-color: #e9e9e9
color: #8c8c8c
cursor: default
select
display: none
&:hover .label
color: #8c8c8c
&,
&:hover,
&:active,
&.primary,
&.primary:hover,
&.primary:active
background: #cfcfcf
border-color: #c2c2c2
border-bottom-color: #b5b5b5
cursor: default
box-shadow: none
color: #a8a8a8
.label
color: #8c8c8c
display: block
font-size: 12px
line-height: 14px
margin-bottom: 0
&:hover .label
color: #eee
.value
display: block
font-size: 18px
line-height: 24px
overflow: hidden
text-overflow: ellipsis
label
display: none
select
border: none
cursor: pointer
height: 50px
left: 0
margin: 0
opacity: 0
position: absolute
top: 0
z-index: 2
width: 100%
&:hover
background: #318ec4
background: linear-gradient(#318ec4, #2b7cab)
border-color: #2e85b8
color: #fff
.on
background-image: none
background-color: rgba(255, 255, 255, .3)
border-color: transparent
&:active
background: #2e85b8
background: linear-gradient(#2e85b8, #28739f)
border-color: #2b7cab
color: #fff
.button-link.negate
&:hover
background: #990f0f
background: linear-gradient(#990f0f, #7d0c0c)
border-color: @background
&:active
background: #7d0c0c
border-color: #990f0f
&.primary
background: #48b512
background: linear-gradient(#48b512, #3d990f)
border: 1px solid
border-color: #3d990f
color: #fff
&:hover
background: #3d990f
background: linear-gradient(#3d990f, #327d0c)
border-color: #3d990f
&.danger
background: #ba1212
background: linear-gradient(#ba1212, #8b0e0e)
border: 1px solid
border-color: #a21010
color: #fff
&:hover
background: #a21010
background: linear-gradient(#a21010, #740b0b)
border-color: #8b0e0e
button
&.quiet-button,
&.loud-text-button
background: none
text-align: left
line-height: normal
border: none
box-shadow: none
&:active
color: #4d4d4d
background: #d3d3d3
box-shadow: none
&.quiet-button
font-weight: 400
text-decoration: underline
&.loud-text-button
width: 100%
&:hover
color: #111
.emphasis-button,
.quiet-button
border-radius: 3px
user-select: none
color: #8c8c8c
display: block
margin: 2px 0
padding: 6px 8px
position: relative
&.w-img
padding-left: 28px
&:hover
color: #4d4d4d
background: #dcdcdc
&:active
color: #4d4d4d
background: #d3d3d3
.quiet-button-large
padding: 16px 24px
.emphasis-button
color: #74663e
background: #ecdfbb
&:hover
color: #53492d
background: #e7d6a7
&:active
color: #53492d
background: #e1cc93
.is-editable
cursor: pointer
.big-link
border-radius: 3px
display: block
margin: 6px 0 6px 40px
padding: 11px
position: relative
text-decoration: none
font-size: 16px
line-height: 20px
.text
text-decoration: underline
&:hover
background: #dcdcdc
&.options
padding-right: 41px
.option
height: 30px
width: @height
position: absolute
right: 6px
top: 6px
&.none
color: #8c8c8c
text-decoration: none
&:hover
background: transparent
&.avatar-changer
padding-right: 51px
.member
border: 1px solid #ccc
border-radius: 3px
height: 40px
width: @height
position: absolute
right: 0
top: 0
.member-avatar
height: 40px
width: @height
.member-initials
font-size: 16px
height: 40px
line-height: @height
max-height: @height
.show-more
border-radius: 3px
color: #8c8c8c
display: block
padding: 16px 8px 16px 40px
margin: 8px 0
&:hover
background: #dcdcdc
text-decoration: underline
&.compact
padding: 12px 8px
margin: 8px 0 0
text-align: center
.board-widget .show-more
padding: 12px 8px 12px 40px
.uploader
clear: both
cursor: pointer
position: relative
height: 34px
width: 100%
.realfile
cursor: pointer
height: 34px
line-height: @height
position: absolute
top: 0
left: 0
width: 100%
z-index: 2
font-size: 23px
input[type="file"]
cursor: pointer
height: 34px
line-height: @height
margin: 0
opacity: 0
padding: 0
width: 100%
z-index: 2
font-size: 23px
&:hover .fakefile
background: #318ec4
background: linear-gradient(#318ec4, #2b7cab)
border-color: #2e85b8
color: #fff
.dropdown-menu
border-radius: 2px
overflow: hidden
li
border-top: none
a
padding: 4px 12px 4px 8px
img
width: 18px
height: @width
margin-right: 5px
vertical-align: middle
.minicard-label
width: 11px
height: @width
border-radius: 2px
margin: 2px 7px -2px -2px
display: inline-block
&.active
background: #005377
a, .quiet
color: white
// Material Design Toggle Switch
.material-toggle-switch
display: flex
.toggle-label
position: relative
display: block
height: 20px
width: 44px
background-color: #a6a6a6
border-radius: 100px
cursor: pointer
transition: all 0.3s ease
&:after
position: absolute
left: -2px
top: -3px
display: block
width: 26px
height: 26px
border-radius: 100px
background-color: #fff
box-shadow: 0px 3px 3px rgba(0,0,0,0.05)
content: ''
transition: all 0.3s ease
&:active
&:after
transform: scale(1.15, 0.85)
.toggle-switch:checked ~ .toggle-label
background-color: #6fbeb5
&:after
left: 20px
background-color: #179588
.toggle-switch:checked:disabled ~ .toggle-label
background-color: #d5d5d5
pointer-events: none
&:after
background-color: #bcbdbc
.toggle-switch
display: none
.toggle-switch-title
margin: 0 0.5em
display: flex
@media screen and (max-width: 800px)
.edit-controls,
.add-controls
.fa-times-thin
margin: 3px 20px

6
client/components/forms/inlinedform.jade Normal file
View File

@ -0,0 +1,6 @@
template(name='inlinedForm')
if isOpen.get
form.inlined-form.js-inlined-form(id=id class=classNames)
+Template.contentBlock
else
+Template.elseBlock

37
client/components/import/csvMembersMapper.js Normal file
View File

@ -0,0 +1,37 @@
export function getMembersToMap(data) {
// we will work on the list itself (an ordered array of objects) when a
// mapping is done, we add a 'wekan' field to the object representing the
// imported member
const membersToMap = [];
const importedMembers = [];
let membersIndex;
for (let i = 0; i < data[0].length; i++) {
if (data[0][i].toLowerCase() === 'members') {
membersIndex = i;
}
}
for (let i = 1; i < data.length; i++) {
if (data[i][membersIndex]) {
for (const importedMember of data[i][membersIndex].split(' ')) {
if (importedMember && importedMembers.indexOf(importedMember) === -1) {
importedMembers.push(importedMember);
}
}
}
}
for (let importedMember of importedMembers) {
importedMember = {
username: importedMember,
id: importedMember,
};
const wekanUser = Users.findOne({ username: importedMember.username });
if (wekanUser) importedMember.wekanId = wekanUser._id;
membersToMap.push(importedMember);
}
return membersToMap;
}

67
client/components/import/import.jade Normal file
View File

@ -0,0 +1,67 @@
template(name="importHeaderBar")
h1
a.back-btn(href="{{pathFor 'home'}}")
i.fa.fa-chevron-left
| {{_ title}}
template(name="import")
.wrapper
if error.get
.warning {{_ error.get}}
+Template.dynamic(template=currentTemplate)
template(name="importTextarea")
form
p: label(for='import-textarea') {{_ instruction}} {{_ 'import-board-instruction-about-errors'}}
textarea.js-import-json(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'}}")
template(name="importMapMembersAddPopup")
.select-member
p
| {{_ 'import-user-select'}}
.js-map-member
+esInput(index="users")
ul.pop-over-list
+esEach(index="users")
li.item.js-member-item
a.name.js-select-import(title="{{profile.fullname}} ({{username}})" data-id="{{_id}}")
+userAvatar(userId=_id esSearch=true)
span.full-name
= profile.fullname
| (<span class="username">{{username}}</span>)
+ifEsIsSearching(index='users')
+spinner
+ifEsHasNoResults(index="users")
.manage-member-section
p.quiet {{_ 'no-results'}}

278
client/components/import/import.js Normal file
View File

@ -0,0 +1,278 @@
import trelloMembersMapper from './trelloMembersMapper';
import wekanMembersMapper from './wekanMembersMapper';
import csvMembersMapper from './csvMembersMapper';
const Papa = require('papaparse');
BlazeComponent.extendComponent({
title() {
return `import-board-title-${Session.get('importSource')}`;
},
}).register('importHeaderBar');
BlazeComponent.extendComponent({
onCreated() {
this.error = new ReactiveVar('');
this.steps = ['importTextarea', 'importMapMembers'];
this._currentStepIndex = new ReactiveVar(0);
this.importedData = new ReactiveVar();
this.membersToMap = new ReactiveVar([]);
this.importSource = Session.get('importSource');
},
currentTemplate() {
return this.steps[this._currentStepIndex.get()];
},
nextStep() {
const nextStepIndex = this._currentStepIndex.get() + 1;
if (nextStepIndex >= this.steps.length) {
this.finishImport();
} else {
this._currentStepIndex.set(nextStepIndex);
}
},
importData(evt, dataSource) {
evt.preventDefault();
const input = this.find('.js-import-json').value;
if (dataSource === 'csv') {
const csv = input.indexOf('\t') > 0 ? input.replace(/(\t)/g, ',') : input;
const ret = Papa.parse(csv);
if (ret && ret.data && ret.data.length) this.importedData.set(ret.data);
else throw new Meteor.Error('error-csv-schema');
const membersToMap = this._prepareAdditionalData(ret.data);
this.membersToMap.set(membersToMap);
this.nextStep();
} else {
try {
const dataObject = JSON.parse(input);
this.setError('');
this.importedData.set(dataObject);
const membersToMap = this._prepareAdditionalData(dataObject);
// store members data and mapping in Session
// (we go deep and 2-way, so storing in data context is not a viable option)
this.membersToMap.set(membersToMap);
this.nextStep();
} catch (e) {
this.setError('error-json-malformed');
}
}
},
setError(error) {
this.error.set(error);
},
finishImport() {
const additionalData = {};
const membersMapping = this.membersToMap.get();
if (membersMapping) {
const mappingById = {};
membersMapping.forEach(member => {
if (member.wekanId) {
mappingById[member.id] = member.wekanId;
}
});
additionalData.membersMapping = mappingById;
}
this.membersToMap.set([]);
Meteor.call(
'importBoard',
this.importedData.get(),
additionalData,
this.importSource,
Session.get('fromBoard'),
(err, res) => {
if (err) {
this.setError(err.error);
} else {
Session.set('fromBoard', null);
Utils.goBoardId(res);
}
},
);
},
_prepareAdditionalData(dataObject) {
const importSource = Session.get('importSource');
let membersToMap;
switch (importSource) {
case 'trello':
membersToMap = trelloMembersMapper.getMembersToMap(dataObject);
break;
case 'wekan':
membersToMap = wekanMembersMapper.getMembersToMap(dataObject);
break;
case 'csv':
membersToMap = csvMembersMapper.getMembersToMap(dataObject);
break;
}
return membersToMap;
},
_screenAdditionalData() {
return 'mapMembers';
},
}).register('import');
BlazeComponent.extendComponent({
template() {
return 'importTextarea';
},
instruction() {
return `import-board-instruction-${Session.get('importSource')}`;
},
importPlaceHolder() {
const importSource = Session.get('importSource');
if (importSource === 'csv') {
return 'import-csv-placeholder';
} else {
return 'import-json-placeholder';
}
},
events() {
return [
{
submit(evt) {
return this.parentComponent().importData(
evt,
Session.get('importSource'),
);
},
},
];
},
}).register('importTextarea');
BlazeComponent.extendComponent({
onCreated() {
this.autorun(() => {
this.parentComponent()
.membersToMap.get()
.forEach(({ wekanId }) => {
if (wekanId) {
this.subscribe('user-miniprofile', wekanId);
}
});
});
},
members() {
return this.parentComponent().membersToMap.get();
},
_refreshMembers(listOfMembers) {
return this.parentComponent().membersToMap.set(listOfMembers);
},
/**
* Will look into the list of members to import for the specified memberId,
* then set its property to the supplied value.
* If unset is true, it will remove the property from the rest of the list as well.
*
* use:
* - memberId = null to use selected member
* - value = null to unset a property
* - unset = true to ensure property is only set on 1 member at a time
*/
_setPropertyForMember(property, value, memberId, unset = false) {
const listOfMembers = this.members();
let finder = null;
if (memberId) {
finder = member => member.id === memberId;
} else {
finder = member => member.selected;
}
listOfMembers.forEach(member => {
if (finder(member)) {
if (value !== null) {
member[property] = value;
} else {
delete member[property];
}
if (!unset) {
// we shortcut if we don't care about unsetting the others
return false;
}
} else if (unset) {
delete member[property];
}
return true;
});
// Session.get gives us a copy, we have to set it back so it sticks
this._refreshMembers(listOfMembers);
},
setSelectedMember(memberId) {
return this._setPropertyForMember('selected', true, memberId, true);
},
/**
* returns the member with specified id,
* or the selected member if memberId is not specified
*/
getMember(memberId = null) {
const allMembers = this.members();
let finder = null;
if (memberId) {
finder = user => user.id === memberId;
} else {
finder = user => user.selected;
}
return allMembers.find(finder);
},
mapSelectedMember(wekanId) {
return this._setPropertyForMember('wekanId', wekanId, null);
},
unmapMember(memberId) {
return this._setPropertyForMember('wekanId', null, memberId);
},
onSubmit(evt) {
evt.preventDefault();
this.parentComponent().nextStep();
},
events() {
return [
{
submit: this.onSubmit,
'click .js-select-member'(evt) {
const memberToMap = this.currentData();
if (memberToMap.wekan) {
// todo xxx ask for confirmation?
this.unmapMember(memberToMap.id);
} else {
this.setSelectedMember(memberToMap.id);
Popup.open('importMapMembersAdd')(evt);
}
},
},
];
},
}).register('importMapMembers');
BlazeComponent.extendComponent({
onRendered() {
this.find('.js-map-member input').focus();
},
onSelectUser() {
Popup.getOpenerComponent().mapSelectedMember(this.currentData()._id);
Popup.back();
},
events() {
return [
{
'click .js-select-import': this.onSelectUser,
},
];
},
}).register('importMapMembersAddPopup');

49
client/components/import/import.styl vendored Normal file
View File

@ -0,0 +1,49 @@
@import 'nib'
.map-members
&:after
content: "";
flex: auto;
.mapping-list
display: flex
flex-wrap: wrap
margin: 0 -4px
.mapping-item
max-width: 300px
min-width: 200px
padding: 6px
margin: 5px
flex:1
background: white
border-radius: 3px
box-shadow: 0 1px 2px rgba(0,0,0,.15)
&:hover
background: darken(white, 5%)
&.filled
background: #E0FFE5
&:hover
background: #FFE0E0
&.ghost-item
height: 0
visibility: hidden
border: none
.profile-source
display: inline-block
width: 80%
.wekan
display: inline-block
width: 35px
.member
float: none
a.show-mapping
text-decoration underline

14
client/components/import/trelloMembersMapper.js Normal file
View File

@ -0,0 +1,14 @@
export function getMembersToMap(data) {
// we will work on the list itself (an ordered array of objects) when a
// mapping is done, we add a 'wekan' field to the object representing the
// imported member
const membersToMap = data.members;
// auto-map based on username
membersToMap.forEach(importedMember => {
const wekanUser = Users.findOne({ username: importedMember.username });
if (wekanUser) {
importedMember.wekanId = wekanUser._id;
}
});
return membersToMap;
}

24
client/components/import/wekanMembersMapper.js Normal file
View File

@ -0,0 +1,24 @@
export function getMembersToMap(data) {
// we will work on the list itself (an ordered array of objects) when a
// mapping is done, we add a 'wekan' field to the object representing the
// imported member
const membersToMap = data.members;
const users = data.users;
// auto-map based on username
membersToMap.forEach(importedMember => {
importedMember.id = importedMember.userId;
delete importedMember.userId;
const user = users.filter(user => {
return user._id === importedMember.id;
})[0];
if (user.profile && user.profile.fullname) {
importedMember.fullName = user.profile.fullname;
}
importedMember.username = user.username;
const wekanUser = Users.findOne({ username: importedMember.username });
if (wekanUser) {
importedMember.wekanId = wekanUser._id;
}
});
return membersToMap;
}

8
client/components/lists/list.jade Normal file
View File

@ -0,0 +1,8 @@
template(name='list')
.list.js-list(id="js-list-{{_id}}")
+listHeader
+listBody
template(name='miniList')
a.mini-list.js-select-list.js-list(id="js-list-{{_id}}")
+listHeader

201
client/components/lists/list.js Normal file
View File

@ -0,0 +1,201 @@
import { Cookies } from 'meteor/ostrio:cookies';
const cookies = new Cookies();
const { calculateIndex } = Utils;
BlazeComponent.extendComponent({
// Proxy
openForm(options) {
this.childComponents('listBody')[0].openForm(options);
},
onCreated() {
this.newCardFormIsVisible = new ReactiveVar(true);
},
// The jquery UI sortable library is the best solution I've found so far. I
// tried sortable and dragula but they were not powerful enough four our use
// case. I also considered writing/forking a drag-and-drop + sortable library
// but it's probably too much work.
// By calling asking the sortable library to cancel its move on the `stop`
// callback, we basically solve all issues related to reactive updates. A
// comment below provides further details.
onRendered() {
const boardComponent = this.parentComponent().parentComponent();
function userIsMember() {
return (
Meteor.user() &&
Meteor.user().isBoardMember() &&
!Meteor.user().isCommentOnly()
);
}
const itemsSelector = '.js-minicard:not(.placeholder, .js-card-composer)';
const $cards = this.$('.js-minicards');
$cards.sortable({
connectWith: '.js-minicards:not(.js-list-full)',
tolerance: 'pointer',
appendTo: '.board-canvas',
helper(evt, item) {
const helper = item.clone();
if (MultiSelection.isActive()) {
const andNOthers = $cards.find('.js-minicard.is-checked').length - 1;
if (andNOthers > 0) {
helper.append(
$(
Blaze.toHTML(
HTML.DIV(
{ class: 'and-n-other' },
TAPi18n.__('and-n-other-card', { count: andNOthers }),
),
),
),
);
}
}
return helper;
},
distance: 7,
items: itemsSelector,
placeholder: 'minicard-wrapper placeholder',
start(evt, ui) {
ui.helper.css('z-index', 1000);
ui.placeholder.height(ui.helper.height());
EscapeActions.executeUpTo('popup-close');
boardComponent.setIsDragging(true);
},
stop(evt, ui) {
// To attribute the new index number, we need to get the DOM element
// of the previous and the following card -- if any.
const prevCardDom = ui.item.prev('.js-minicard').get(0);
const nextCardDom = ui.item.next('.js-minicard').get(0);
const nCards = MultiSelection.isActive() ? MultiSelection.count() : 1;
const sortIndex = calculateIndex(prevCardDom, nextCardDom, nCards);
const listId = Blaze.getData(ui.item.parents('.list').get(0))._id;
const currentBoard = Boards.findOne(Session.get('currentBoard'));
const defaultSwimlaneId = currentBoard.getDefaultSwimline()._id;
let targetSwimlaneId = null;
// only set a new swimelane ID if the swimlanes view is active
if (
Utils.boardView() === 'board-view-swimlanes' ||
currentBoard.isTemplatesBoard()
)
targetSwimlaneId = Blaze.getData(ui.item.parents('.swimlane').get(0))
._id;
// Normally the jquery-ui sortable library moves the dragged DOM element
// to its new position, which disrupts Blaze reactive updates mechanism
// (especially when we move the last card of a list, or when multiple
// users move some cards at the same time). To prevent these UX glitches
// we ask sortable to gracefully cancel the move, and to put back the
// DOM in its initial state. The card move is then handled reactively by
// Blaze with the below query.
$cards.sortable('cancel');
if (MultiSelection.isActive()) {
Cards.find(MultiSelection.getMongoSelector()).forEach((card, i) => {
const newSwimlaneId = targetSwimlaneId
? targetSwimlaneId
: card.swimlaneId || defaultSwimlaneId;
card.move(
currentBoard._id,
newSwimlaneId,
listId,
sortIndex.base + i * sortIndex.increment,
);
});
} else {
const cardDomElement = ui.item.get(0);
const card = Blaze.getData(cardDomElement);
const newSwimlaneId = targetSwimlaneId
? targetSwimlaneId
: card.swimlaneId || defaultSwimlaneId;
card.move(currentBoard._id, newSwimlaneId, listId, sortIndex.base);
}
boardComponent.setIsDragging(false);
},
});
this.autorun(() => {
let showDesktopDragHandles = false;
currentUser = Meteor.user();
if (currentUser) {
showDesktopDragHandles = (currentUser.profile || {})
.showDesktopDragHandles;
} else if (cookies.has('showDesktopDragHandles')) {
showDesktopDragHandles = true;
} else {
showDesktopDragHandles = false;
}
if (Utils.isMiniScreen() || showDesktopDragHandles) {
$cards.sortable({
handle: '.handle',
});
} else if (!Utils.isMiniScreen() && !showDesktopDragHandles) {
$cards.sortable({
handle: '.minicard',
});
}
if ($cards.data('uiSortable') || $cards.data('sortable')) {
$cards.sortable(
'option',
'disabled',
// Disable drag-dropping when user is not member
!userIsMember(),
// Not disable drag-dropping while in multi-selection mode
// MultiSelection.isActive() || !userIsMember(),
);
}
});
// We want to re-run this function any time a card is added.
this.autorun(() => {
const currentBoardId = Tracker.nonreactive(() => {
return Session.get('currentBoard');
});
Cards.find({ boardId: currentBoardId }).fetch();
Tracker.afterFlush(() => {
$cards.find(itemsSelector).droppable({
hoverClass: 'draggable-hover-card',
accept: '.js-member,.js-label',
drop(event, ui) {
const cardId = Blaze.getData(this)._id;
const card = Cards.findOne(cardId);
if (ui.draggable.hasClass('js-member')) {
const memberId = Blaze.getData(ui.draggable.get(0)).userId;
card.assignMember(memberId);
} else {
const labelId = Blaze.getData(ui.draggable.get(0))._id;
card.addLabel(labelId);
}
},
});
});
});
},
}).register('list');
Template.list.helpers({
showDesktopDragHandles() {
currentUser = Meteor.user();
if (currentUser) {
return (currentUser.profile || {}).showDesktopDragHandles;
} else if (cookies.has('showDesktopDragHandles')) {
return true;
} else {
return false;
}
},
});
Template.miniList.events({
'click .js-select-list'() {
const listId = this._id;
Session.set('currentList', listId);
},
});

331
client/components/lists/list.styl Normal file
View File

@ -0,0 +1,331 @@
@import 'nib'
.list
box-sizing: border-box
display: flex
flex-direction: column
flex: 0 0 270px
position: relative
// Even if this background color is the same as the body we can't leave it
// transparent, because that won't work during a list drag.
background: darken(white, 13%)
border-left: 1px solid darken(white, 20%)
padding: 0
float: left
&:first-child
margin-left: 5px
border-left: none
.card-details + &
border-left: none
&.ui-sortable-helper
box-shadow: -2px 2px 8px rgba(0, 0, 0, .3),
0 0 1px rgba(0, 0, 0, .5)
transform: rotate(4deg)
cursor: grabbing
.list-header.ui-sortable-handle
cursor: grabbing
&.placeholder
background-color: rgba(0, 0, 0, .2)
border-color: transparent
box-shadow: none
height: 100px
&.list-composer, & .list-composer
.open-list-composer
color: #8c8c8c
.list-name-input
background: white
margin: -3px 0 8px
.list-header-add
flex: 0 0 auto
padding: 20px 12px 4px
position: relative
min-height: 20px
.list-header
flex: 0 0 auto
padding: 20px 12px 4px
position: relative
min-height: 20px
background-color: #e4e4e4;
border-bottom: 6px solid #e4e4e4;
&.list-header-card-count
min-height: 35px
height: auto
&.ui-sortable-handle
cursor: grab
.list-header-left-icon
display: none
.list-header-name
display: inline
font-size: 16px
line-height: 17px
margin: 0
font-weight: bold
min-height: 9px
min-width: 30px
overflow: hidden
text-overflow: ellipsis
word-wrap: break-word
.list-header-watch-icon
padding-left: 10px
color: #a6a6a6
.list-header-menu
position: absolute
padding: 27px 19px
margin-top: 1px
top: -7px
right: 3px
.list-header-plus-icon
color: #a6a6a6
margin-right: 15px
.highlight
color: #ce1414
.cardCount
color: #8c8c8c
font-size: 0.8em
.list-header .list-header-plus-icon, .js-open-list-menu, .list-header-menu a
color #4d4d4d
padding-left 4px
.list-body
flex: 1 1 auto
flex-direction: column
display: flex
overflow-y: auto
padding: 5px 11px
.minicards
flex-grow: 1
flex-shrink: 0
form
margin-bottom: 9px
.open-minicard-composer
border-radius: 2px
color: #8c8c8c
display: block
padding: 7px 10px
position: relative
text-decoration: none
animation: fadeIn 0.3s
i.fa
margin-right: 7px
&:hover
background: #fafafa
color: #222
box-shadow: 0 1px 2px rgba(0,0,0,.2)
#js-wip-limit-edit
padding-top: 2%
p
margin-bottom: 0
input
display: inline-block
.wip-limit-value
width: 20%
margin-right: 5%
.wip-limit-error
display: none
.soft-wip-limit
margin-right: 8px
div
float: left
@media screen and (max-width: 800px)
.list-header-menu
position: absolute
padding: 27px 19px
margin-top: 1px
top: -7px
margin-right: 7px
right: -3px
.list-header
.list-header-name
margin-left: 1.4rem
.mini-list
flex: 0 0 60px
height: auto
width: 100%
border-left: 0px
border-bottom: 1px solid darken(white, 20%)
.list
display: block
width: 100%
border-left: 0px
&:first-child
margin-left: 0px
&.ui-sortable-helper
flex: 0 0 60px
height: 60px
width: 100%
border-left: 0px
border-bottom: 1px solid darken(white, 20%)
.list-header.ui-sortable-handle
cursor: grabbing
&.placeholder
flex: 0 0 60px
height: 60px
width: 100%
border-left: 0px
border-bottom: 1px solid darken(white, 20%)
.list-body
padding: 15px 19px;
.list-header
padding: 0 12px 0px
border-bottom: 0px solid #e4e4e4
height: 60px
margin-top: 10px
display: flex
align-items: center
.list-header-left-icon
display: inline
padding: 7px
padding-right: 27px
margin-top: 1px
top: -@padding
left: -@padding
.list-header-menu-icon
position: absolute
padding: 7px
top: 50%
transform: translateY(-50%)
right: 47px
font-size: 20px
.list-header-handle
position: absolute
padding: 7px
top: 50%
transform: translateY(-50%)
right: 10px
font-size: 24px
.link-board-wrapper
display: flex
align-items: baseline
.js-link-board
margin-left: 15px
.search-card-results
max-height: 250px
overflow: hidden
.sk-spinner-list
margin-top: unset !important
list-header-color(background, color...)
border-bottom: 6px solid background
.list-header-white
list-header-color(#ffffff, #4d4d4d) //Black text for better visibility
border: 1px solid #eee
.list-header-green
list-header-color(#3cb500, #ffffff) //White text for better visibility
.list-header-yellow
list-header-color(#fad900, #4d4d4d) //Black text for better visibility
.list-header-orange
list-header-color(#ff9f19, #4d4d4d) //Black text for better visibility
.list-header-red
list-header-color(#eb4646, #ffffff) //White text for better visibility
.list-header-purple
list-header-color(#a632db, #ffffff) //White text for better visibility
.list-header-blue
list-header-color(#0079bf, #ffffff) //White text for better visibility
.list-header-pink
list-header-color(#ff78cb, #4d4d4d) //Black text for better visibility
.list-header-sky
list-header-color(#00c2e0, #ffffff) //White text for better visibility
.list-header-black
list-header-color(#4d4d4d, #ffffff) //White text for better visibility
.list-header-lime
list-header-color(#51e898, #4d4d4d) //Black text for better visibility
.list-header-silver
list-header-color(unset, #4d4d4d) //Black text for better visibility
.list-header-peachpuff
list-header-color(#ffdab9, #4d4d4d) //Black text for better visibility
.list-header-crimson
list-header-color(#dc143c, #ffffff) //White text for better visibility
.list-header-plum
list-header-color(#dda0dd, #4d4d4d) //Black text for better visibility
.list-header-darkgreen
list-header-color(#006400, #ffffff) //White text for better visibility
.list-header-slateblue
list-header-color(#6a5acd, #ffffff) //White text for better visibility
.list-header-magenta
list-header-color(#ff00ff, #ffffff) //White text for better visibility
.list-header-gold
list-header-color(#ffd700, #4d4d4d) //Black text for better visibility
.list-header-navy
list-header-color(#000080, #ffffff) //White text for better visibility
.list-header-gray
list-header-color(#808080, #ffffff) //White text for better visibility
.list-header-saddlebrown
list-header-color(#8b4513, #ffffff) //White text for better visibility
.list-header-paleturquoise
list-header-color(#afeeee, #4d4d4d) //Black text for better visibility
.list-header-mistyrose
list-header-color(#ffe4e1, #4d4d4d) //Black text for better visibility
.list-header-indigo
list-header-color(#4b0082, #ffffff) //White text for better visibility

130
client/components/lists/listBody.jade Normal file
View File

@ -0,0 +1,130 @@
template(name="listBody")
.list-body
.minicards.clearfix.js-minicards(class="{{#if reachedWipLimit}}js-list-full{{/if}}")
if cards.count
+inlinedForm(autoclose=false position="top")
+addCardForm(listId=_id position="top")
each (cardsWithLimit (idOrNull ../../_id))
a.minicard-wrapper.js-minicard(href=absoluteUrl
class="{{#if cardIsSelected}}is-selected{{/if}}"
class="{{#if MultiSelection.isSelected _id}}is-checked{{/if}}")
if MultiSelection.isActive
.materialCheckBox.multi-selection-checkbox.js-toggle-multi-selection(
class="{{#if MultiSelection.isSelected _id}}is-checked{{/if}}")
+minicard(this)
if (showSpinner (idOrNull ../../_id))
+spinnerList
if canSeeAddCard
+inlinedForm(autoclose=false position="bottom")
+addCardForm(listId=_id position="bottom")
else
a.open-minicard-composer.js-card-composer.js-open-inlined-form
i.fa.fa-plus
| {{_ 'add-card'}}
template(name="spinnerList")
.sk-spinner.sk-spinner-wave.sk-spinner-list(
class=currentBoard.colorClass
id="showMoreResults")
.sk-rect1
.sk-rect2
.sk-rect3
.sk-rect4
.sk-rect5
template(name="addCardForm")
.minicard.minicard-composer.js-composer
if getLabels
.minicard-labels
each getLabels
.minicard-label(class="card-label-{{color}}" title="{{name}}")
textarea.minicard-composer-textarea.js-card-title(autofocus dir="auto")
if members.get
.minicard-members.js-minicard-composer-members
each members.get
+userAvatar(userId=this)
.add-controls.clearfix
button.primary.confirm(type="submit") {{_ 'add'}}
unless currentBoard.isTemplatesBoard
unless currentBoard.isTemplateBoard
span.quiet
| {{_ 'or'}}
a.js-link {{_ 'link'}}
span.quiet
| &nbsp;
| /
a.js-search {{_ 'search'}}
span.quiet
| &nbsp;
| /
a.js-card-template {{_ 'template'}}
template(name="autocompleteLabelLine")
.minicard-label(class="card-label-{{colorName}}" title=labelName)
span(class="{{#if hasNoName}}quiet{{/if}}")= labelName
template(name="linkCardPopup")
label {{_ 'boards'}}:
.link-board-wrapper
select.js-select-boards
option(value="")
each boards
option(value="{{_id}}") {{title}}
input.primary.confirm.js-link-board(type="button" value="{{_ 'link'}}")
label {{_ 'swimlanes'}}:
select.js-select-swimlanes
each swimlanes
option(value="{{_id}}") {{title}}
label {{_ 'lists'}}:
select.js-select-lists
each lists
option(value="{{_id}}") {{title}}
label {{_ 'cards'}}:
select.js-select-cards
each cards
option(value="{{getId}}") {{getTitle}}
.edit-controls.clearfix
input.primary.confirm.js-done(type="button" value="{{_ 'link'}}")
template(name="searchElementPopup")
form
label
| {{_ 'title'}}
input.js-element-title(type="text" placeholder="{{_ 'title'}}" autofocus required dir="auto")
unless isTemplateSearch
label {{_ 'boards'}}:
.link-board-wrapper
select.js-select-boards
option(value="")
each boards
option(value="{{_id}}") {{title}}
form.js-search-term-form
input(type="text" name="searchTerm" placeholder="{{_ 'search-example'}}" autofocus dir="auto")
.list-body.search-card-results
.minicards.clearfix.js-minicards
if isBoardTemplateSearch
each results
a.minicard-wrapper.js-minicard
+miniboard(this)
if isListTemplateSearch
each results
a.minicard-wrapper.js-minicard
+minilist(this)
if isSwimlaneTemplateSearch
each results
a.minicard-wrapper.js-minicard
+miniswimlane(this)
if isCardTemplateSearch
each results
a.minicard-wrapper.js-minicard
+minicard(this)
unless isTemplateSearch
each results
a.minicard-wrapper.js-minicard
+minicard(this)

778
client/components/lists/listBody.js Normal file
View File

@ -0,0 +1,778 @@
const subManager = new SubsManager();
const InfiniteScrollIter = 10;
BlazeComponent.extendComponent({
onCreated() {
// for infinite scrolling
this.cardlimit = new ReactiveVar(InfiniteScrollIter);
},
mixins() {
return [];
},
openForm(options) {
options = options || {};
options.position = options.position || 'top';
const forms = this.childComponents('inlinedForm');
let form = forms.find(component => {
return component.data().position === options.position;
});
if (!form && forms.length > 0) {
form = forms[0];
}
form.open();
},
addCard(evt) {
evt.preventDefault();
const firstCardDom = this.find('.js-minicard:first');
const lastCardDom = this.find('.js-minicard:last');
const textarea = $(evt.currentTarget).find('textarea');
const position = this.currentData().position;
const title = textarea.val().trim();
const formComponent = this.childComponents('addCardForm')[0];
let sortIndex;
if (position === 'top') {
sortIndex = Utils.calculateIndex(null, firstCardDom).base;
} else if (position === 'bottom') {
sortIndex = Utils.calculateIndex(lastCardDom, null).base;
}
const members = formComponent.members.get();
const labelIds = formComponent.labels.get();
const customFields = formComponent.customFields.get();
const board = this.data().board();
let linkedId = '';
let swimlaneId = '';
let cardType = 'cardType-card';
if (title) {
if (board.isTemplatesBoard()) {
swimlaneId = this.parentComponent()
.parentComponent()
.data()._id; // Always swimlanes view
const swimlane = Swimlanes.findOne(swimlaneId);
// If this is the card templates swimlane, insert a card template
if (swimlane.isCardTemplatesSwimlane()) cardType = 'template-card';
// If this is the board templates swimlane, insert a board template and a linked card
else if (swimlane.isBoardTemplatesSwimlane()) {
linkedId = Boards.insert({
title,
permission: 'private',
type: 'template-board',
});
Swimlanes.insert({
title: TAPi18n.__('default'),
boardId: linkedId,
});
cardType = 'cardType-linkedBoard';
}
} else if (Utils.boardView() === 'board-view-swimlanes')
swimlaneId = this.parentComponent()
.parentComponent()
.data()._id;
else if (
Utils.boardView() === 'board-view-lists' ||
Utils.boardView() === 'board-view-cal' ||
!Utils.boardView()
)
swimlaneId = board.getDefaultSwimline()._id;
const _id = Cards.insert({
title,
members,
labelIds,
customFields,
listId: this.data()._id,
boardId: board._id,
sort: sortIndex,
swimlaneId,
type: cardType,
linkedId,
});
// if the displayed card count is less than the total cards in the list,
// we need to increment the displayed card count to prevent the spinner
// to appear
const cardCount = this.data()
.cards(this.idOrNull(swimlaneId))
.count();
if (this.cardlimit.get() < cardCount) {
this.cardlimit.set(this.cardlimit.get() + InfiniteScrollIter);
}
// In case the filter is active we need to add the newly inserted card in
// the list of exceptions -- cards that are not filtered. Otherwise the
// card will disappear instantly.
// See https://github.com/wekan/wekan/issues/80
Filter.addException(_id);
// We keep the form opened, empty it, and scroll to it.
textarea.val('').focus();
autosize.update(textarea);
if (position === 'bottom') {
this.scrollToBottom();
}
formComponent.reset();
}
},
scrollToBottom() {
const container = this.firstNode();
$(container).animate({
scrollTop: container.scrollHeight,
});
},
clickOnMiniCard(evt) {
if (MultiSelection.isActive() || evt.shiftKey) {
evt.stopImmediatePropagation();
evt.preventDefault();
const methodName = evt.shiftKey ? 'toggleRange' : 'toggle';
MultiSelection[methodName](this.currentData()._id);
// If the card is already selected, we want to de-select it.
// XXX We should probably modify the minicard href attribute instead of
// overwriting the event in case the card is already selected.
} else if (Session.equals('currentCard', this.currentData()._id)) {
evt.stopImmediatePropagation();
evt.preventDefault();
Utils.goBoardId(Session.get('currentBoard'));
}
},
cardIsSelected() {
return Session.equals('currentCard', this.currentData()._id);
},
toggleMultiSelection(evt) {
evt.stopPropagation();
evt.preventDefault();
MultiSelection.toggle(this.currentData()._id);
},
idOrNull(swimlaneId) {
if (
Utils.boardView() === 'board-view-swimlanes' ||
this.data()
.board()
.isTemplatesBoard()
)
return swimlaneId;
return undefined;
},
cardsWithLimit(swimlaneId) {
const limit = this.cardlimit.get();
const selector = {
listId: this.currentData()._id,
archived: false,
};
if (swimlaneId) selector.swimlaneId = swimlaneId;
return Cards.find(Filter.mongoSelector(selector), {
sort: ['sort'],
limit,
});
},
showSpinner(swimlaneId) {
const list = Template.currentData();
return list.cards(swimlaneId).count() > this.cardlimit.get();
},
canSeeAddCard() {
return (
!this.reachedWipLimit() &&
Meteor.user() &&
Meteor.user().isBoardMember() &&
!Meteor.user().isCommentOnly() &&
!Meteor.user().isWorker()
);
},
reachedWipLimit() {
const list = Template.currentData();
return (
!list.getWipLimit('soft') &&
list.getWipLimit('enabled') &&
list.getWipLimit('value') <= list.cards().count()
);
},
events() {
return [
{
'click .js-minicard': this.clickOnMiniCard,
'click .js-toggle-multi-selection': this.toggleMultiSelection,
'click .open-minicard-composer': this.scrollToBottom,
submit: this.addCard,
},
];
},
}).register('listBody');
function toggleValueInReactiveArray(reactiveValue, value) {
const array = reactiveValue.get();
const valueIndex = array.indexOf(value);
if (valueIndex === -1) {
array.push(value);
} else {
array.splice(valueIndex, 1);
}
reactiveValue.set(array);
}
BlazeComponent.extendComponent({
onCreated() {
this.labels = new ReactiveVar([]);
this.members = new ReactiveVar([]);
this.customFields = new ReactiveVar([]);
const currentBoardId = Session.get('currentBoard');
arr = [];
_.forEach(
Boards.findOne(currentBoardId)
.customFields()
.fetch(),
function(field) {
if (field.automaticallyOnCard)
arr.push({ _id: field._id, value: null });
},
);
this.customFields.set(arr);
},
reset() {
this.labels.set([]);
this.members.set([]);
this.customFields.set([]);
},
getLabels() {
const currentBoardId = Session.get('currentBoard');
return Boards.findOne(currentBoardId).labels.filter(label => {
return this.labels.get().indexOf(label._id) > -1;
});
},
pressKey(evt) {
// Pressing Enter should submit the card
if (evt.keyCode === 13 && !evt.shiftKey) {
evt.preventDefault();
const $form = $(evt.currentTarget).closest('form');
// XXX For some reason $form.submit() does not work (it's probably a bug
// of blaze-component related to the fact that the submit event is non-
// bubbling). This is why we click on the submit button instead -- which
// work.
$form.find('button[type=submit]').click();
// Pressing Tab should open the form of the next column, and Maj+Tab go
// in the reverse order
} else if (evt.keyCode === 9) {
evt.preventDefault();
const isReverse = evt.shiftKey;
const list = $(`#js-list-${this.data().listId}`);
const listSelector = '.js-list:not(.js-list-composer)';
let nextList = list[isReverse ? 'prev' : 'next'](listSelector).get(0);
// If there is no next list, loop back to the beginning.
if (!nextList) {
nextList = $(listSelector + (isReverse ? ':last' : ':first')).get(0);
}
BlazeComponent.getComponentForElement(nextList).openForm({
position: this.data().position,
});
}
},
events() {
return [
{
keydown: this.pressKey,
'click .js-link': Popup.open('linkCard'),
'click .js-search': Popup.open('searchElement'),
'click .js-card-template': Popup.open('searchElement'),
},
];
},
onRendered() {
const editor = this;
const $textarea = this.$('textarea');
autosize($textarea);
$textarea.escapeableTextComplete(
[
// User mentions
{
match: /\B@([\w.]*)$/,
search(term, callback) {
const currentBoard = Boards.findOne(Session.get('currentBoard'));
callback(
$.map(currentBoard.activeMembers(), member => {
const user = Users.findOne(member.userId);
return user.username.indexOf(term) === 0 ? user : null;
}),
);
},
template(user) {
return user.username;
},
replace(user) {
toggleValueInReactiveArray(editor.members, user._id);
return '';
},
index: 1,
},
// Labels
{
match: /\B#(\w*)$/,
search(term, callback) {
const currentBoard = Boards.findOne(Session.get('currentBoard'));
callback(
$.map(currentBoard.labels, label => {
if (
label.name.indexOf(term) > -1 ||
label.color.indexOf(term) > -1
) {
return label;
}
return null;
}),
);
},
template(label) {
return Blaze.toHTMLWithData(Template.autocompleteLabelLine, {
hasNoName: !label.name,
colorName: label.color,
labelName: label.name || label.color,
});
},
replace(label) {
toggleValueInReactiveArray(editor.labels, label._id);
return '';
},
index: 1,
},
],
{
// When the autocomplete menu is shown we want both a press of both `Tab`
// or `Enter` to validation the auto-completion. We also need to stop the
// event propagation to prevent the card from submitting (on `Enter`) or
// going on the next column (on `Tab`).
onKeydown(evt, commands) {
if (evt.keyCode === 9 || evt.keyCode === 13) {
evt.stopPropagation();
return commands.KEY_ENTER;
}
return null;
},
},
);
},
}).register('addCardForm');
BlazeComponent.extendComponent({
onCreated() {
this.selectedBoardId = new ReactiveVar('');
this.selectedSwimlaneId = new ReactiveVar('');
this.selectedListId = new ReactiveVar('');
this.boardId = Session.get('currentBoard');
// In order to get current board info
subManager.subscribe('board', this.boardId, false);
this.board = Boards.findOne(this.boardId);
// List where to insert card
const list = $(Popup._getTopStack().openerElement).closest('.js-list');
this.listId = Blaze.getData(list[0])._id;
// Swimlane where to insert card
const swimlane = $(Popup._getTopStack().openerElement).closest(
'.js-swimlane',
);
this.swimlaneId = '';
if (Utils.boardView() === 'board-view-swimlanes')
this.swimlaneId = Blaze.getData(swimlane[0])._id;
else if (Utils.boardView() === 'board-view-lists' || !Utils.boardView)
this.swimlaneId = Swimlanes.findOne({ boardId: this.boardId })._id;
},
boards() {
const boards = Boards.find(
{
archived: false,
'members.userId': Meteor.userId(),
_id: { $ne: Session.get('currentBoard') },
type: 'board',
},
{
sort: { sort: 1 /* boards default sorting */ },
},
);
return boards;
},
swimlanes() {
if (!this.selectedBoardId.get()) {
return [];
}
const swimlanes = Swimlanes.find({ boardId: this.selectedBoardId.get() });
if (swimlanes.count())
this.selectedSwimlaneId.set(swimlanes.fetch()[0]._id);
return swimlanes;
},
lists() {
if (!this.selectedBoardId.get()) {
return [];
}
const lists = Lists.find({ boardId: this.selectedBoardId.get() });
if (lists.count()) this.selectedListId.set(lists.fetch()[0]._id);
return lists;
},
cards() {
if (!this.board) {
return [];
}
const ownCardsIds = this.board.cards().map(card => {
return card.linkedId || card._id;
});
return Cards.find({
boardId: this.selectedBoardId.get(),
swimlaneId: this.selectedSwimlaneId.get(),
listId: this.selectedListId.get(),
archived: false,
linkedId: { $nin: ownCardsIds },
_id: { $nin: ownCardsIds },
type: { $nin: ['template-card'] },
});
},
events() {
return [
{
'change .js-select-boards'(evt) {
subManager.subscribe('board', $(evt.currentTarget).val(), false);
this.selectedBoardId.set($(evt.currentTarget).val());
},
'change .js-select-swimlanes'(evt) {
this.selectedSwimlaneId.set($(evt.currentTarget).val());
},
'change .js-select-lists'(evt) {
this.selectedListId.set($(evt.currentTarget).val());
},
'click .js-done'(evt) {
// LINK CARD
evt.stopPropagation();
evt.preventDefault();
const linkedId = $('.js-select-cards option:selected').val();
if (!linkedId) {
Popup.close();
return;
}
const _id = Cards.insert({
title: $('.js-select-cards option:selected').text(), //dummy
listId: this.listId,
swimlaneId: this.swimlaneId,
boardId: this.boardId,
sort: Lists.findOne(this.listId)
.cards()
.count(),
type: 'cardType-linkedCard',
linkedId,
});
Filter.addException(_id);
Popup.close();
},
'click .js-link-board'(evt) {
//LINK BOARD
evt.stopPropagation();
evt.preventDefault();
const impBoardId = $('.js-select-boards option:selected').val();
if (
!impBoardId ||
Cards.findOne({ linkedId: impBoardId, archived: false })
) {
Popup.close();
return;
}
const _id = Cards.insert({
title: $('.js-select-boards option:selected').text(), //dummy
listId: this.listId,
swimlaneId: this.swimlaneId,
boardId: this.boardId,
sort: Lists.findOne(this.listId)
.cards()
.count(),
type: 'cardType-linkedBoard',
linkedId: impBoardId,
});
Filter.addException(_id);
Popup.close();
},
},
];
},
}).register('linkCardPopup');
BlazeComponent.extendComponent({
mixins() {
return [];
},
onCreated() {
this.isCardTemplateSearch = $(Popup._getTopStack().openerElement).hasClass(
'js-card-template',
);
this.isListTemplateSearch = $(Popup._getTopStack().openerElement).hasClass(
'js-list-template',
);
this.isSwimlaneTemplateSearch = $(
Popup._getTopStack().openerElement,
).hasClass('js-open-add-swimlane-menu');
this.isBoardTemplateSearch = $(Popup._getTopStack().openerElement).hasClass(
'js-add-board',
);
this.isTemplateSearch =
this.isCardTemplateSearch ||
this.isListTemplateSearch ||
this.isSwimlaneTemplateSearch ||
this.isBoardTemplateSearch;
let board = {};
if (this.isTemplateSearch) {
board = Boards.findOne((Meteor.user().profile || {}).templatesBoardId);
} else {
// Prefetch first non-current board id
board = Boards.findOne({
archived: false,
'members.userId': Meteor.userId(),
_id: {
$nin: [
Session.get('currentBoard'),
(Meteor.user().profile || {}).templatesBoardId,
],
},
});
}
if (!board) {
Popup.close();
return;
}
const boardId = board._id;
// Subscribe to this board
subManager.subscribe('board', boardId, false);
this.selectedBoardId = new ReactiveVar(boardId);
if (!this.isBoardTemplateSearch) {
this.boardId = Session.get('currentBoard');
// In order to get current board info
subManager.subscribe('board', this.boardId, false);
this.swimlaneId = '';
// Swimlane where to insert card
const swimlane = $(Popup._getTopStack().openerElement).parents(
'.js-swimlane',
);
if (Utils.boardView() === 'board-view-swimlanes')
this.swimlaneId = Blaze.getData(swimlane[0])._id;
else this.swimlaneId = Swimlanes.findOne({ boardId: this.boardId })._id;
// List where to insert card
const list = $(Popup._getTopStack().openerElement).closest('.js-list');
this.listId = Blaze.getData(list[0])._id;
}
this.term = new ReactiveVar('');
},
boards() {
const boards = Boards.find(
{
archived: false,
'members.userId': Meteor.userId(),
_id: { $ne: Session.get('currentBoard') },
type: 'board',
},
{
sort: { sort: 1 /* boards default sorting */ },
},
);
return boards;
},
results() {
if (!this.selectedBoardId) {
return [];
}
const board = Boards.findOne(this.selectedBoardId.get());
if (!this.isTemplateSearch || this.isCardTemplateSearch) {
return board.searchCards(this.term.get(), false);
} else if (this.isListTemplateSearch) {
return board.searchLists(this.term.get());
} else if (this.isSwimlaneTemplateSearch) {
return board.searchSwimlanes(this.term.get());
} else if (this.isBoardTemplateSearch) {
const boards = board.searchBoards(this.term.get());
boards.forEach(board => {
subManager.subscribe('board', board.linkedId, false);
});
return boards;
} else {
return [];
}
},
events() {
return [
{
'change .js-select-boards'(evt) {
subManager.subscribe('board', $(evt.currentTarget).val(), false);
this.selectedBoardId.set($(evt.currentTarget).val());
},
'submit .js-search-term-form'(evt) {
evt.preventDefault();
this.term.set(evt.target.searchTerm.value);
},
'click .js-minicard'(evt) {
// 0. Common
const title = $('.js-element-title')
.val()
.trim();
if (!title) return;
const element = Blaze.getData(evt.currentTarget);
element.title = title;
let _id = '';
if (!this.isTemplateSearch || this.isCardTemplateSearch) {
// Card insertion
// 1. Common
element.sort = Lists.findOne(this.listId)
.cards()
.count();
// 1.A From template
if (this.isTemplateSearch) {
element.type = 'cardType-card';
element.linkedId = '';
_id = element.copy(this.boardId, this.swimlaneId, this.listId);
// 1.B Linked card
} else {
_id = element.link(this.boardId, this.swimlaneId, this.listId);
}
Filter.addException(_id);
// List insertion
} else if (this.isListTemplateSearch) {
element.sort = Swimlanes.findOne(this.swimlaneId)
.lists()
.count();
element.type = 'list';
_id = element.copy(this.boardId, this.swimlaneId);
} else if (this.isSwimlaneTemplateSearch) {
element.sort = Boards.findOne(this.boardId)
.swimlanes()
.count();
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();
}
Popup.close();
},
},
];
},
}).register('searchElementPopup');
BlazeComponent.extendComponent({
onCreated() {
this.cardlimit = this.parentComponent().cardlimit;
this.listId = this.parentComponent().data()._id;
this.swimlaneId = '';
const isSandstorm =
Meteor.settings &&
Meteor.settings.public &&
Meteor.settings.public.sandstorm;
if (isSandstorm) {
const user = Meteor.user();
if (user) {
if (Utils.boardView() === 'board-view-swimlanes') {
this.swimlaneId = this.parentComponent()
.parentComponent()
.parentComponent()
.data()._id;
}
}
} else if (Utils.boardView() === 'board-view-swimlanes') {
this.swimlaneId = this.parentComponent()
.parentComponent()
.parentComponent()
.data()._id;
}
},
onRendered() {
this.spinner = this.find('.sk-spinner-list');
this.container = this.$(this.spinner).parents('.list-body')[0];
$(this.container).on(
`scroll.spinner_${this.swimlaneId}_${this.listId}`,
() => this.updateList(),
);
$(window).on(`resize.spinner_${this.swimlaneId}_${this.listId}`, () =>
this.updateList(),
);
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) {
const startTime = Date.now();
return setTimeout(function() {
handler({
didTimeout: false,
timeRemaining() {
return Math.max(0, 50.0 - (Date.now() - startTime));
},
});
}, 1);
};
if (this.spinnerInView()) {
this.cardlimit.set(this.cardlimit.get() + InfiniteScrollIter);
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');

158
client/components/lists/listHeader.jade Normal file
View File

@ -0,0 +1,158 @@
template(name="listHeader")
.list-header.js-list-header(
class="{{#if limitToShowCardsCount}}list-header-card-count{{/if}}"
class="{{#if colorClass}}list-header-{{colorClass}}{{/if}}")
+inlinedForm
+editListTitleForm
else
if isMiniScreen
if currentList
a.list-header-left-icon.fa.fa-angle-left.js-unselect-list
h2.list-header-name(
title="{{ moment modifiedAt 'LLL' }}"
class="{{#if currentUser.isBoardMember}}{{#unless currentUser.isCommentOnly}}{{#unless currentUser.isWorker}}js-open-inlined-form is-editable{{/unless}}{{/unless}}{{/if}}")
+viewer
= title
if wipLimit.enabled
|&nbsp;(
span(class="{{#if reachedWipLimit}}highlight{{/if}}") {{cards.count}}
|/#{wipLimit.value})
if showCardsCountForList cards.count
|&nbsp;
span(class="cardCount") {{cardsCount}} {{_ 'cards-count'}}
if isMiniScreen
if currentList
if isWatching
i.list-header-watch-icon.fa.fa-eye
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
else
a.list-header-menu-icon.fa.fa-angle-right.js-select-list
a.list-header-handle.handle.fa.fa-arrows.js-list-handle
else if currentUser.isBoardMember
if isWatching
i.list-header-watch-icon.fa.fa-eye
div.list-header-menu
unless currentUser.isCommentOnly
//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
if showDesktopDragHandles
a.list-header-handle.handle.fa.fa-arrows.js-list-handle
template(name="editListTitleForm")
.list-composer
input.list-name-input.full-line(type="text" value=title autofocus)
.edit-controls.clearfix
button.primary.confirm(type="submit") {{_ 'save'}}
a.fa.fa-times-thin.js-close-inlined-form
template(name="listActionPopup")
ul.pop-over-list
li
a.js-toggle-watch-list
if isWatching
i.fa.fa-eye
| {{_ 'unwatch'}}
else
i.fa.fa-eye-slash
| {{_ 'watch'}}
unless currentUser.isCommentOnly
unless currentUser.isWorker
ul.pop-over-list
li
a.js-set-color-list
i.fa.fa-paint-brush
| {{_ 'set-color-list'}}
ul.pop-over-list
if cards.count
li
a.js-select-cards
i.fa.fa-check-square
| {{_ 'list-select-cards'}}
if currentUser.isBoardAdmin
ul.pop-over-list
li
a.js-set-wip-limit
i.fa.fa-ban
| {{#if isWipLimitEnabled }}{{_ 'edit-wip-limit'}}{{else}}{{_ 'setWipLimitPopup-title'}}{{/if}}
unless currentUser.isWorker
hr
ul.pop-over-list
li
a.js-close-list
i.fa.fa-arrow-right
i.fa.fa-archive
| {{_ 'archive-list'}}
hr
ul.pop-over-list
li
a.js-more
i.fa.fa-link
| {{_ 'listMorePopup-title'}}
template(name="boardLists")
ul.pop-over-list
each currentBoard.lists
li
if($eq ../_id _id)
a.disabled {{title}} ({{_ 'current'}})
else
a.js-select-list= title
template(name="listMorePopup")
p.quiet
span.clearfix
span {{_ 'link-list'}}
= ' '
i.fa.colorful(class="{{#if board.isPublic}}fa-globe{{else}}fa-lock{{/if}}")
input.inline-input(type="text" readonly value="{{ rootUrl }}")
| {{_ 'added'}}
span.date(title=list.createdAt) {{ moment createdAt 'LLL' }}
unless currentUser.isWorker
a.js-delete {{_ 'delete'}}
template(name="listDeletePopup")
p {{_ "list-delete-pop"}}
unless archived
p {{_ "list-delete-suggest-archive"}}
button.js-confirm.negate.full(type="submit") {{_ 'delete'}}
template(name="setWipLimitPopup")
#js-wip-limit-edit
label {{_ 'set-wip-limit-value'}}
ul.pop-over-list
li: a.js-enable-wip-limit {{_ 'enable-wip-limit'}}
if isWipLimitEnabled
i.fa.fa-check
if isWipLimitEnabled
p
input.wip-limit-value(type="number" value="{{ wipLimitValue }}" min="1" max="99")
input.wip-limit-apply(type="submit" value="{{_ 'apply'}}")
input.wip-limit-error
p
.soft-wip-limit
.materialCheckBox(class="{{#if isWipLimitSoft}}is-checked{{/if}}")
label {{_ 'soft-wip-limit'}}
template(name="wipLimitErrorPopup")
.wip-limit-invalid
p {{_ 'wipLimitErrorPopup-dialog-pt1'}}
p {{_ 'wipLimitErrorPopup-dialog-pt2'}}
button.full.js-back-view(type="submit") {{_ 'cancel'}}
template(name="setListColorPopup")
form.edit-label
.palette-colors: each colors
// note: we use the swimlane palette to have more than just the border
span.card-label.palette-color.js-palette-color(class="swimlane-{{color}}")
if(isSelected color)
i.fa.fa-check
button.primary.confirm.js-submit {{_ 'save'}}
button.js-remove-color.negate.wide.right {{_ 'unset-color'}}

290
client/components/lists/listHeader.js Normal file
View File

@ -0,0 +1,290 @@
import { Cookies } from 'meteor/ostrio:cookies';
const cookies = new Cookies();
let listsColors;
Meteor.startup(() => {
listsColors = Lists.simpleSchema()._schema.color.allowedValues;
});
BlazeComponent.extendComponent({
canSeeAddCard() {
const list = Template.currentData();
return (
(!list.getWipLimit('enabled') ||
list.getWipLimit('soft') ||
!this.reachedWipLimit()) &&
!Meteor.user().isWorker()
);
},
isBoardAdmin() {
return Meteor.user().isBoardAdmin();
},
starred(check = undefined) {
const list = Template.currentData();
const status = list.isStarred();
if (check === undefined) {
// just check
return status;
} else {
list.star(!status);
return !status;
}
},
editTitle(event) {
event.preventDefault();
const newTitle = this.childComponents('inlinedForm')[0]
.getValue()
.trim();
const list = this.currentData();
if (newTitle) {
list.rename(newTitle.trim());
}
},
isWatching() {
const list = this.currentData();
return list.findWatcher(Meteor.userId());
},
limitToShowCardsCount() {
const currentUser = Meteor.user();
if (currentUser) {
return Meteor.user().getLimitToShowCardsCount();
} else {
return false;
}
},
cardsCount() {
const list = Template.currentData();
let swimlaneId = '';
if (Utils.boardView() === 'board-view-swimlanes')
swimlaneId = this.parentComponent()
.parentComponent()
.data()._id;
return list.cards(swimlaneId).count();
},
reachedWipLimit() {
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;
},
events() {
return [
{
'click .js-list-star'(event) {
event.preventDefault();
this.starred(!this.starred());
},
'click .js-open-list-menu': Popup.open('listAction'),
'click .js-add-card'(event) {
const listDom = $(event.target).parents(
`#js-list-${this.currentData()._id}`,
)[0];
const listComponent = BlazeComponent.getComponentForElement(listDom);
listComponent.openForm({
position: 'top',
});
},
'click .js-unselect-list'() {
Session.set('currentList', null);
},
submit: this.editTitle,
},
];
},
}).register('listHeader');
Template.listHeader.helpers({
showDesktopDragHandles() {
currentUser = Meteor.user();
if (currentUser) {
return (currentUser.profile || {}).showDesktopDragHandles;
} else if (cookies.has('showDesktopDragHandles')) {
return true;
} else {
return false;
}
},
});
Template.listActionPopup.helpers({
isWipLimitEnabled() {
return Template.currentData().getWipLimit('enabled');
},
isWatching() {
return this.findWatcher(Meteor.userId());
},
});
Template.listActionPopup.events({
'click .js-list-subscribe'() {},
'click .js-set-color-list': Popup.open('setListColor'),
'click .js-select-cards'() {
const cardIds = this.allCards().map(card => card._id);
MultiSelection.add(cardIds);
Popup.close();
},
'click .js-toggle-watch-list'() {
const currentList = this;
const level = currentList.findWatcher(Meteor.userId()) ? null : 'watching';
Meteor.call('watch', 'list', currentList._id, level, (err, ret) => {
if (!err && ret) Popup.close();
});
},
'click .js-close-list'(event) {
event.preventDefault();
this.archive();
Popup.close();
},
'click .js-set-wip-limit': Popup.open('setWipLimit'),
'click .js-more': Popup.open('listMore'),
});
BlazeComponent.extendComponent({
applyWipLimit() {
const list = Template.currentData();
const limit = parseInt(
Template.instance()
.$('.wip-limit-value')
.val(),
10,
);
if (limit < list.cards().count() && !list.getWipLimit('soft')) {
Template.instance()
.$('.wip-limit-error')
.click();
} else {
Meteor.call('applyWipLimit', list._id, limit);
Popup.back();
}
},
enableSoftLimit() {
const list = Template.currentData();
if (
list.getWipLimit('soft') &&
list.getWipLimit('value') < list.cards().count()
) {
list.setWipLimit(list.cards().count());
}
Meteor.call('enableSoftLimit', Template.currentData()._id);
},
enableWipLimit() {
const list = Template.currentData();
// Prevent user from using previously stored wipLimit.value if it is less than the current number of cards in the list
if (
!list.getWipLimit('enabled') &&
list.getWipLimit('value') < list.cards().count()
) {
list.setWipLimit(list.cards().count());
}
Meteor.call('enableWipLimit', list._id);
},
isWipLimitSoft() {
return Template.currentData().getWipLimit('soft');
},
isWipLimitEnabled() {
return Template.currentData().getWipLimit('enabled');
},
wipLimitValue() {
return Template.currentData().getWipLimit('value');
},
events() {
return [
{
'click .js-enable-wip-limit': this.enableWipLimit,
'click .wip-limit-apply': this.applyWipLimit,
'click .wip-limit-error': Popup.open('wipLimitError'),
'click .materialCheckBox': this.enableSoftLimit,
},
];
},
}).register('setWipLimitPopup');
Template.listMorePopup.events({
'click .js-delete': Popup.afterConfirm('listDelete', function() {
Popup.close();
// TODO how can we avoid the fetch call?
const allCards = this.allCards().fetch();
const allCardIds = _.pluck(allCards, '_id');
// it's okay if the linked cards are on the same list
if (
Cards.find({
$and: [
{ listId: { $ne: this._id } },
{ linkedId: { $in: allCardIds } },
],
}).count() === 0
) {
allCardIds.map(_id => Cards.remove(_id));
Lists.remove(this._id);
} else {
// TODO: Figure out more informative message.
// Popup with a hint that the list cannot be deleted as there are
// linked cards. We can adapt the query above so we can list the linked
// cards.
// Related:
// client/components/cards/cardDetails.js about line 969
// https://github.com/wekan/wekan/issues/2785
const message = `${TAPi18n.__(
'delete-linked-cards-before-this-list',
)} linkedId: ${
this._id
} at client/components/lists/listHeader.js and https://github.com/wekan/wekan/issues/2785`;
alert(message);
}
Utils.goBoardId(this.boardId);
}),
});
BlazeComponent.extendComponent({
onCreated() {
this.currentList = this.currentData();
this.currentColor = new ReactiveVar(this.currentList.color);
},
colors() {
return listsColors.map(color => ({ color, name: '' }));
},
isSelected(color) {
return this.currentColor.get() === color;
},
events() {
return [
{
'click .js-palette-color'() {
this.currentColor.set(this.currentData().color);
},
'click .js-submit'() {
this.currentList.setColor(this.currentColor.get());
Popup.close();
},
'click .js-remove-color'() {
this.currentList.setColor(null);
Popup.close();
},
},
];
},
}).register('setListColorPopup');

8
client/components/lists/minilist.jade Normal file
View File

@ -0,0 +1,8 @@
template(name="minilist")
.minicard(
class="minicard-{{colorClass}}")
.minicard-title
.handle
.fa.fa-arrows
+viewer
= title

14
client/components/main/editor.jade Normal file
View File

@ -0,0 +1,14 @@
template(name="editor")
textarea.editor(
dir="auto"
class="{{class}}"
id=id
autofocus=autofocus
placeholder="{{_ 'comment-placeholder'}}")
+Template.contentBlock
template(name="viewer")
.viewer(dir="auto")
+mentions
+markdown
{{> UI.contentBlock }}

353
client/components/main/editor.js Executable file
View File

@ -0,0 +1,353 @@
Template.editor.onRendered(() => {
const textareaSelector = 'textarea';
const mentions = [
// User mentions
{
match: /\B@([\w.]*)$/,
search(term, callback) {
const currentBoard = Boards.findOne(Session.get('currentBoard'));
callback(
currentBoard
.activeMembers()
.map(member => {
const username = Users.findOne(member.userId).username;
return username.includes(term) ? username : null;
})
.filter(Boolean),
);
},
template(value) {
return value;
},
replace(username) {
return `@${username} `;
},
index: 1,
},
];
const enableTextarea = function() {
const $textarea = this.$(textareaSelector);
autosize($textarea);
$textarea.escapeableTextComplete(mentions);
};
if (Meteor.settings.public.RICHER_CARD_COMMENT_EDITOR !== false) {
const isSmall = Utils.isMiniScreen();
const toolbar = isSmall
? [
['view', ['fullscreen']],
['table', ['table']],
['font', ['bold', 'underline']],
//['fontsize', ['fontsize']],
['color', ['color']],
]
: [
['style', ['style']],
['font', ['bold', 'underline', 'clear']],
['fontsize', ['fontsize']],
['fontname', ['fontname']],
['color', ['color']],
['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']],
];
const cleanPastedHTML = function(input) {
const badTags = [
'style',
'script',
'applet',
'embed',
'noframes',
'noscript',
'meta',
'link',
'button',
'form',
].join('|');
const badPatterns = new RegExp(
`(?:${[
`<(${badTags})s*[^>][\\s\\S]*?<\\/\\1>`,
`<(${badTags})[^>]*?\\/>`,
].join('|')})`,
'gi',
);
let output = input;
// remove bad Tags
output = output.replace(badPatterns, '');
// remove attributes ' style="..."'
const badAttributes = new RegExp(
`(?:${[
'on\\S+=([\'"]?).*?\\1',
'href=([\'"]?)javascript:.*?\\2',
'style=([\'"]?).*?\\3',
'target=\\S+',
].join('|')})`,
'gi',
);
output = output.replace(badAttributes, '');
output = output.replace(/(<a )/gi, '$1target=_ '); // always to new target
return output;
};
const editor = '.editor';
const selectors = [
`.js-new-comment-form ${editor}`,
`.js-edit-comment ${editor}`,
].join(','); // only new comment and edit comment
const inputs = $(selectors);
if (inputs.length === 0) {
// only enable richereditor to new comment or edit comment no others
enableTextarea();
} else {
const placeholder = inputs.attr('placeholder') || '';
const mSummernotes = [];
const getSummernote = function(input) {
const idx = inputs.index(input);
if (idx > -1) {
return mSummernotes[idx];
}
return undefined;
};
inputs.each(function(idx, input) {
mSummernotes[idx] = $(input).summernote({
placeholder,
callbacks: {
onInit(object) {
const originalInput = this;
$(originalInput).on('submitted', function() {
// when comment is submitted, the original textarea will be set to '', so shall we
if (!this.value) {
const sn = getSummernote(this);
sn && sn.summernote('code', '');
}
});
const jEditor = object && object.editable;
const toolbar = object && object.toolbar;
if (jEditor !== undefined) {
jEditor.escapeableTextComplete(mentions);
}
if (toolbar !== undefined) {
const fBtn = toolbar.find('.btn-fullscreen');
fBtn.on('click', function() {
const $this = $(this),
isActive = $this.hasClass('active');
$('.minicards,#header-quick-access').toggle(!isActive); // mini card is still showing when editor is in fullscreen mode, we hide here manually
});
}
},
onImageUpload(files) {
const $summernote = getSummernote(this);
if (files && files.length > 0) {
const image = files[0];
const currentCard = Cards.findOne(Session.get('currentCard'));
const MAX_IMAGE_PIXEL = Utils.MAX_IMAGE_PIXEL;
const COMPRESS_RATIO = Utils.IMAGE_COMPRESS_RATIO;
const insertImage = src => {
const img = document.createElement('img');
img.src = src;
img.setAttribute('width', '100%');
$summernote.summernote('insertNode', img);
};
const processData = function(fileObj) {
Utils.processUploadedAttachment(
currentCard,
fileObj,
attachment => {
if (
attachment &&
attachment._id &&
attachment.isImage()
) {
attachment.one('uploaded', function() {
const maxTry = 3;
const checkItvl = 500;
let retry = 0;
const checkUrl = function() {
// even though uploaded event fired, attachment.url() is still null somehow //TODO
const url = attachment.url();
if (url) {
insertImage(
`${location.protocol}//${location.host}${url}`,
);
} else {
retry++;
if (retry < maxTry) {
setTimeout(checkUrl, checkItvl);
}
}
};
checkUrl();
});
}
},
);
};
if (MAX_IMAGE_PIXEL) {
const reader = new FileReader();
reader.onload = function(e) {
const dataurl = e && e.target && e.target.result;
if (dataurl !== undefined) {
// need to shrink image
Utils.shrinkImage({
dataurl,
maxSize: MAX_IMAGE_PIXEL,
ratio: COMPRESS_RATIO,
toBlob: true,
callback(blob) {
if (blob !== false) {
blob.name = image.name;
processData(blob);
}
},
});
}
};
reader.readAsDataURL(image);
} else {
processData(image);
}
}
},
onPaste() {
// clear up unwanted tag info when user pasted in text
const thisNote = this;
const updatePastedText = function(object) {
const someNote = getSummernote(object);
// Fix Pasting text into a card is adding a line before and after
// (and multiplies by pasting more) by changing paste "p" to "br".
// Fixes https://github.com/wekan/wekan/2890 .
// == Fix Start ==
someNote.execCommand('defaultParagraphSeparator', false, 'br');
// == Fix End ==
const original = someNote.summernote('code');
const cleaned = cleanPastedHTML(original); //this is where to call whatever clean function you want. I have mine in a different file, called CleanPastedHTML.
someNote.summernote('code', ''); //clear original
someNote.summernote('pasteHTML', cleaned); //this sets the displayed content editor to the cleaned pasted code.
};
setTimeout(function() {
//this kinda sucks, but if you don't do a setTimeout,
//the function is called before the text is really pasted.
updatePastedText(thisNote);
}, 10);
},
},
dialogsInBody: true,
disableDragAndDrop: true,
toolbar,
popover: {
image: [
[
'image',
['resizeFull', 'resizeHalf', 'resizeQuarter', 'resizeNone'],
],
['float', ['floatLeft', 'floatRight', 'floatNone']],
['remove', ['removeMedia']],
],
table: [
['add', ['addRowDown', 'addRowUp', 'addColLeft', 'addColRight']],
['delete', ['deleteRow', 'deleteCol', 'deleteTable']],
],
air: [
['color', ['color']],
['font', ['bold', 'underline', 'clear']],
],
},
height: 200,
});
});
}
} else {
enableTextarea();
}
});
import sanitizeXss from 'xss';
// XXX I believe we should compute a HTML rendered field on the server that
// would handle markdown and user mentions. We can simply have two
// fields, one source, and one compiled version (in HTML) and send only the
// compiled version to most users -- who don't need to edit.
// In the meantime, all the transformation are done on the client using the
// Blaze API.
const at = HTML.CharRef({ html: '&commat;', str: '@' });
Blaze.Template.registerHelper(
'mentions',
new Template('mentions', function() {
const view = this;
let content = Blaze.toHTML(view.templateContentBlock);
const currentBoard = Boards.findOne(Session.get('currentBoard'));
if (!currentBoard) return HTML.Raw(sanitizeXss(content));
const knowedUsers = currentBoard.members.map(member => {
const u = Users.findOne(member.userId);
if (u) {
member.username = u.username;
}
return member;
});
const mentionRegex = /\B@([\w.]*)/gi;
let currentMention;
while ((currentMention = mentionRegex.exec(content)) !== null) {
const [fullMention, quoteduser, simple] = currentMention;
const username = quoteduser || simple;
const knowedUser = _.findWhere(knowedUsers, { username });
if (!knowedUser) {
continue;
}
const linkValue = [' ', at, knowedUser.username];
let linkClass = 'atMention js-open-member';
if (knowedUser.userId === Meteor.userId()) {
linkClass += ' me';
}
// This @user mention link generation did open same Wekan
// window in new tab, so now A is changed to U so it's
// underlined and there is no link popup. This way also
// text can be selected more easily.
//const link = HTML.A(
const link = HTML.U(
{
class: linkClass,
// XXX Hack. Since we stringify this render function result below with
// `Blaze.toHTML` we can't rely on blaze data contexts to pass the
// `userId` to the popup as usual, and we need to store it in the DOM
// using a data attribute.
'data-userId': knowedUser.userId,
},
linkValue,
);
content = content.replace(fullMention, Blaze.toHTML(link));
}
return HTML.Raw(sanitizeXss(content));
}),
);
Template.viewer.events({
// Viewer sometimes have click-able wrapper around them (for instance to edit
// the corresponding text). Clicking a link shouldn't fire these actions, stop
// we stop these event at the viewer component level.
'click a'(event, templateInstance) {
const prevent = true;
const userId = event.currentTarget.dataset.userid;
if (userId) {
Popup.open('member').call({ userId }, event, templateInstance);
} else {
const href = event.currentTarget.href;
if (href) {
window.open(href, '_blank');
}
}
if (prevent) {
event.stopPropagation();
// XXX We hijack the build-in browser action because we currently don't have
// `_blank` attributes in viewer links, and the transformer function is
// handled by a third party package that we can't configure easily. Fix that
// by using directly `_blank` attribute in the rendered HTML.
event.preventDefault();
}
},
});

41
client/components/main/fonts.styl Normal file
View File

@ -0,0 +1,41 @@
@font-face
font-family: 'Roboto'
font-style: normal
font-weight: 400
src: local('Roboto'),
local('Roboto-Regular'),
url('/fonts/roboto-regular.woff2') format('woff2'),
url('/fonts/roboto-regular.woff') format('woff')
@font-face
font-family: 'Roboto'
font-style: normal
font-weight: 700
src: local('Roboto Bold'),
local('Roboto-Bold'),
url('/fonts/roboto-bold.woff2') format('woff2'),
url('/fonts/roboto-bold.woff') format('woff')
@font-face
font-family: 'Poppins'
font-style: normal
font-weight: 400
src: local('Poppins'),
local('Poppins-Regular'),
url('/fonts/poppins-regular.woff') format('woff')
@font-face
font-family: 'Poppins'
font-style: normal
font-weight: 500
src: local('Poppins Medium'),
local('Poppins-Medium'),
url('/fonts/poppins-medium.woff') format('woff')
@font-face
font-family: 'Poppins'
font-style: normal
font-weight: 700
src: local('Poppins Bold'),
local('Poppins-Bold'),
url('/fonts/poppins-bold.woff') format('woff')

82
client/components/main/header.jade Normal file
View File

@ -0,0 +1,82 @@
template(name="header")
//-
If the user is connected we display a small "quick-access" top bar that
list all starred boards with a link to go there. This is inspired by the
Reddit "subreddit" bar.
The first link goes to the boards page.
if currentUser
#header-quick-access(class=currentBoard.colorClass)
if isMiniScreen
ul
li
a(href="{{pathFor 'home'}}")
span.fa.fa-home
if currentList
each currentBoard.lists
li(class="{{#if $.Session.equals 'currentList' _id}}current{{/if}}")
a.js-select-list
= title
#header-new-board-icon
else
ul
li
a(href="{{pathFor 'home'}}")
span.fa.fa-home
| {{_ 'all-boards'}}
li.separator -
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'}}
a#header-new-board-icon.js-create-board
i.fa.fa-plus(title="Create a new board")
+notifications
+headerUserBar
#header(class=currentBoard.colorClass)
//-
The main bar is a colorful bar that provide all the meta-data for the
current page. This bar is contextual based.
If the user is not connected we display "sign in" and "log in" buttons.
#header-main-bar(class="{{#if wrappedHeader}}wrapper{{/if}}")
+Template.dynamic(template=headerBar)
//unless hideLogo
//-
On sandstorm, the logo shouldn't be clickable, because we only have one
page/document on it, and we don't want to see the home page containing
the list of all boards.
// unless currentSetting.hideLogo
// a.wekan-logo(href="{{pathFor 'home'}}" title="{{_ 'header-logo-title'}}")
// img(src="{{pathFor '/logo-header.png'}}" alt="")
if appIsOffline
+offlineWarning
if currentUser.isBoardMember
if hasAnnouncement
.announcement
p
i.fa.fa-bullhorn
+viewer
| #{announcement}
i.fa.fa-times-circle.js-close-announcement
template(name="offlineWarning")
.offline-warning
p
i.fa.fa-warning
| {{_ 'app-is-offline'}}

43
client/components/main/header.js Normal file
View File

@ -0,0 +1,43 @@
Meteor.subscribe('user-admin');
Meteor.subscribe('boards');
Meteor.subscribe('setting');
Template.header.helpers({
wrappedHeader() {
return !Session.get('currentBoard');
},
currentSetting() {
return Settings.findOne();
},
hideLogo() {
return Utils.isMiniScreen() && Session.get('currentBoard');
},
appIsOffline() {
return !Meteor.status().connected;
},
hasAnnouncement() {
const announcements = Announcements.findOne();
return announcements && announcements.enabled;
},
announcement() {
$('.announcement').show();
const announcements = Announcements.findOne();
return announcements && announcements.body;
},
});
Template.header.events({
'click .js-create-board': Popup.open('headerBarCreateBoard'),
'click .js-close-announcement'() {
$('.announcement').hide();
},
'click .js-select-list'() {
Session.set('currentList', this._id);
Session.set('currentCard', null);
},
});

235
client/components/main/header.styl Normal file
View File

@ -0,0 +1,235 @@
@import 'nib'
#header
color: white
transition: background-color 0.4s
background: #2980B9
z-index: 17
#header-main-bar
height: 40px
padding: 7px 10px 0
h1
font-size: 20px
line-height: 1.7em
padding: 0 10px
margin: 0
margin-right: 10px
float: left
border-radius: 3px
.board-header-watch-icon
padding-left: 7px
a.fa, a i.fa
color: white
.back-btn
font-size: 0.9em
margin-right: 10px
.wekan-logo
margin: 3px auto auto
width: 97px
opacity: 0.6
transition: opacity 0.15s
float: right
&:hover
opacity: 0.9
.board-header-btns
display: block
margin-top: 3px
width: auto
// XXX Use a flexbox instead of floats?
&.left
float: left
&.right
float: right
.board-header-btn
border-radius: 3px
color: darken(white, 5%)
padding: 0
height: 28px
font-size: 13px
float: left
overflow: hidden
line-height: @height
margin: 0 2px
i.fa
float: left
display: block
line-height: 28px
color: darken(white, 5%)
margin: 0 10px
+ span
display: inline-block
margin-top: 1px
margin-right: 10px
.board-header-btn-close
float: right
i.fa
margin: 0 6px
.board-header-btn,
h1.is-clickable
&.is-active,
&:hover:not(.is-disabled)
background: rgba(0, 0, 0, .15)
.separator
margin: 2px 4px
border-left: 1px solid rgba(255, 255, 255, .3)
height: 24px
float: left
#header-quick-access
color: white
transition: background-color 0.4s
background: #2573a7
height: 28px
font-size: 12px
display: flex
z-index: 21
#header-user-bar,
#header-new-board-icon,
ul li
color: darken(white, 17%)
.fa
color: inherit
a:hover, a.is-active
color: white
ul
transition: opacity 0.2s
margin: 4px 0 0 5px
overflow: hidden
li
display: block
float: left
width: auto
color: darken(white, 15%)
padding: 2px 5px 0
&.current
color: darken(white, 5%)
&:first-child .fa-home,&:nth-child(3) .fa-globe
margin-right: 5px
a.js-create-board
margin-left: 5px
#header-user-bar,
#header-new-board-icon
flex-shrink: 0
#header-user-bar
margin: 2px 0
.header-user-bar-avatar
float: left
position: relative
top: -5px
margin-right: 5px
.member
width: 24px
height: @width
margin: 0
margin-top: 1px
.header-user-bar-name
margin: 4px 8px 0 0
float: left
i.fa-chevron-down
margin-right: 4px
#header-new-board-icon
flex-grow: 1
margin: 6px 5px 0
width: 12px
@media screen and (max-width: 800px)
#header
#header-main-bar
height: 40px
.board-header-btns
margin-top: 0px
.board-header-btn
height: 32px
line-height: @height
font-size: 15px
i.fa
line-height: 32px
+ span
display: none
#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
li
height: 100%
padding: 12px 0px
margin: -10px 0px
a
height: 100%
padding: 12px 10px
margin: -10px 0px
.fa-home
font-size: 26px
margin-top: -2px
#header-new-board-icon
display: none
#header-user-bar
position: absolute
right: 0px
padding: 10px
margin: -10px 0 -10px -10px
.announcement .viewer
display: inline-block
.announcement,
.offline-warning
width: 100%
text-align: center
padding: 0
margin: 0
background: #F8ECBD
clear: both
p
margin: 7px
padding: 0

19
client/components/main/keyboardShortcuts.jade Normal file
View File

@ -0,0 +1,19 @@
template(name="shortcutsHeaderBar")
h1
a.back-btn(href="{{pathFor 'home'}}")
i.fa.fa-chevron-left
| {{_ 'keyboard-shortcuts'}}
template(name="shortcutsModalTitle")
h2
i.fa.fa-keyboard-o
| {{_ 'keyboard-shortcuts'}}
template(name="keyboardShortcuts")
.wrapper.shortcuts-list
each mapping
.shortcuts-list-item
.shortcuts-list-item-keys
each keys
kbd= this
.shortcuts-list-item-action {{_ action}}

20
client/components/main/keyboardShortcuts.styl Normal file
View File

@ -0,0 +1,20 @@
.shortcuts-list
.shortcuts-list-item
border-bottom: 1px solid darken(white, 25%)
padding: 10px 5px
&:last-child
border-bottom: none
.shortcuts-list-item-keys
margin-top: 5px
float: right
kbd
padding: 5px 8px
margin: 5px
font-size: 18px
.shortcuts-list-item-action
font-size: 1.4em
margin: 5px

78
client/components/main/layouts.jade Normal file
View File

@ -0,0 +1,78 @@
head
title
meta(name="viewport" content="maximum-scale=1.0,width=device-width,initial-scale=1.0,user-scalable=0")
meta(http-equiv="X-UA-Compatible" content="IE=edge")
//- XXX We should use pathFor in the following `href` to support the case
where the application is deployed with a path prefix, but it seems to be
difficult to do that cleanly with Blaze -- at least without adding extra
packages.
link(rel="shortcut icon" type="image/x-icon" href="/favicon.ico")
link(rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png")
link(rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png")
link(rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png")
link(rel="manifest" href="/site.webmanifest")
link(rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5")
meta(name="apple-mobile-web-app-title" content="Wekan")
meta(name="application-name" content="Wekan")
meta(name="msapplication-TileColor" content="#00aba9")
meta(name="theme-color" content="#ffffff")
template(name="userFormsLayout")
section.auth-layout
section.auth-dialog
if isLoading
+loader
else
+Template.dynamic(template=content)
if currentSetting.displayAuthenticationMethod
+connectionMethod(authenticationMethod=currentSetting.defaultAuthenticationMethod)
div.at-form-lang
select.select-lang.js-userform-set-language
each languages
if isCurrentLanguage
option(value="{{tag}}" selected="selected") {{name}}
else
option(value="{{tag}}") {{name}}
template(name="defaultLayout")
+header
#content
| {{{afterBodyStart}}}
+Template.dynamic(template=content)
| {{{beforeBodyEnd}}}
if (Modal.isOpen)
#modal
.overlay
if (Modal.isWide)
.modal-content-wide.modal-container
a.modal-close-btn.js-close-modal
i.fa.fa-times-thin
+Template.dynamic(template=Modal.getHeaderName)
+Template.dynamic(template=Modal.getTemplateName)
else
.modal-content.modal-container
a.modal-close-btn.js-close-modal
i.fa.fa-times-thin
+Template.dynamic(template=Modal.getHeaderName)
+Template.dynamic(template=Modal.getTemplateName)
template(name="notFound")
+message(label='page-not-found')
template(name="message")
.big-message.quiet(class=color)
h1 {{_ label}}
unless currentUser
with(pathFor route='atSignIn')
p {{{_ 'page-maybe-private' this}}}
template(name="loader")
h1.loadingText {{_ 'loading'}}
.lds-roller
div
div
div
div
div
div
div

188
client/components/main/layouts.js Normal file
View File

@ -0,0 +1,188 @@
BlazeLayout.setRoot('body');
const i18nTagToT9n = i18nTag => {
// t9n/i18n tags are same now, see: https://github.com/softwarerero/meteor-accounts-t9n/pull/129
// but we keep this conversion function here, to be aware that that they are different system.
return i18nTag;
};
const validator = {
set(obj, prop, value) {
if (prop === 'state' && value !== 'signIn') {
$('.at-form-authentication').hide();
} else if (prop === 'state' && value === 'signIn') {
$('.at-form-authentication').show();
}
// The default behavior to store the value
obj[prop] = value;
// Indicate success
return true;
},
};
Template.userFormsLayout.onCreated(function() {
const templateInstance = this;
templateInstance.currentSetting = new ReactiveVar();
templateInstance.isLoading = new ReactiveVar(false);
Meteor.subscribe('setting', {
onReady() {
templateInstance.currentSetting.set(Settings.findOne());
return this.stop();
},
});
Meteor.call('isPasswordLoginDisabled', (_, result) => {
if (result) {
$('.at-pwd-form').hide();
}
});
});
Template.userFormsLayout.onRendered(() => {
AccountsTemplates.state.form.keys = new Proxy(
AccountsTemplates.state.form.keys,
validator,
);
const i18nTag = navigator.language;
if (i18nTag) {
T9n.setLanguage(i18nTagToT9n(i18nTag));
}
EscapeActions.executeAll();
});
Template.userFormsLayout.helpers({
currentSetting() {
return Template.instance().currentSetting.get();
},
isLoading() {
return Template.instance().isLoading.get();
},
afterBodyStart() {
return currentSetting.customHTMLafterBodyStart;
},
beforeBodyEnd() {
return currentSetting.customHTMLbeforeBodyEnd;
},
languages() {
return _.map(TAPi18n.getLanguages(), (lang, code) => {
const tag = code;
let name = lang.name;
if (lang.name === 'br') {
name = 'Brezhoneg';
} else if (lang.name === 'ig') {
name = 'Igbo';
} else if (lang.name === 'oc') {
name = 'Occitan';
} else if (lang.name === '繁体中文（台湾）') {
name = '繁體中文（台灣）';
}
return { tag, name };
}).sort(function(a, b) {
if (a.name === b.name) {
return 0;
} else {
return a.name > b.name ? 1 : -1;
}
});
},
isCurrentLanguage() {
const t9nTag = i18nTagToT9n(this.tag);
const curLang = T9n.getLanguage() || 'en';
return t9nTag === curLang;
},
});
Template.userFormsLayout.events({
'change .js-userform-set-language'(event) {
const i18nTag = $(event.currentTarget).val();
T9n.setLanguage(i18nTagToT9n(i18nTag));
event.preventDefault();
},
'click #at-btn'(event, templateInstance) {
if (FlowRouter.getRouteName() === 'atSignIn') {
templateInstance.isLoading.set(true);
authentication(event, templateInstance).then(() => {
templateInstance.isLoading.set(false);
});
}
},
});
Template.defaultLayout.events({
'click .js-close-modal': () => {
Modal.close();
},
});
async function authentication(event, templateInstance) {
const match = $('#at-field-username_and_email').val();
const password = $('#at-field-password').val();
if (!match || !password) return undefined;
const result = await getAuthenticationMethod(
templateInstance.currentSetting.get(),
match,
);
if (result === 'password') return undefined;
// Stop submit #at-pwd-form
event.preventDefault();
event.stopImmediatePropagation();
switch (result) {
case 'ldap':
return new Promise(resolve => {
Meteor.loginWithLDAP(match, password, function() {
resolve(FlowRouter.go('/'));
});
});
case 'cas':
return new Promise(resolve => {
Meteor.loginWithCas(match, password, function() {
resolve(FlowRouter.go('/'));
});
});
default:
return undefined;
}
}
function getAuthenticationMethod(
{ displayAuthenticationMethod, defaultAuthenticationMethod },
match,
) {
if (displayAuthenticationMethod) {
return $('.select-authentication').val();
}
return getUserAuthenticationMethod(defaultAuthenticationMethod, match);
}
function getUserAuthenticationMethod(defaultAuthenticationMethod, match) {
return new Promise(resolve => {
try {
Meteor.subscribe('user-authenticationMethod', match, {
onReady() {
const user = Users.findOne();
const authenticationMethod = user
? user.authenticationMethod
: defaultAuthenticationMethod;
resolve(authenticationMethod);
},
});
} catch (error) {
resolve(defaultAuthenticationMethod);
}
});
}

540
client/components/main/layouts.styl Normal file
View File

@ -0,0 +1,540 @@
@import 'nib'
global-reset()
*
-webkit-box-sizing: unset
box-sizing: unset
.note-popover .popover-content .note-color-palette div .note-color-btn, .panel-heading.note-toolbar .note-color-palette div .note-color-btn
background: none
a:focus
outline: unset
outline-offset: unset
a:hover,a:focus
color: unset
text-decoration: unset
.badge
display: unset
min-width: unset
padding: unset
font-size: unset
font-weight: unset
line-height: unset
color: unset
text-align: unset
white-space: unset
vertical-align: unset
background-color: unset
border-radius: unset
html, body, input, select, textarea, button
font: 14px Roboto, Poppins, "Helvetica Neue", Arial, Helvetica, sans-serif
line-height: 18px
color: #4d4d4d
html
font-size: 100%
max-height: 100%
user-select: none
-webkit-text-size-adjust: 100%
body
background: darken(white, 13%)
margin: 0
position: relative
z-index: 0
overflow-y: auto
display: flex
flex-direction: column
height: 100vh
#content
position: relative
flex: 1
overflow-x: hidden
.sk-spinner
margin-top: 30vh
> .wrapper
margin-top: 10px
padding: 15px
#modal
position: absolute
top: 0
bottom: 0
left: 0
right: 0
background: rgba(0, 0, 0, 0.6)
z-index: 100
overflow-y: auto
.modal-content
width: 500px
min-height: 160px
margin: 42px auto
padding: 12px
border-radius: 4px
background: darken(white, 13%)
z-index: 110
h2
margin-bottom: 25px
.modal-close-btn
display: block
float: right
font-size: 24px
.modal-content-wide
width: 800px
min-height: 0px
margin: 42px auto
padding: 12px
border-radius: 4px
background: darken(white, 13%)
z-index: 110
h2
margin-bottom: 25px
.modal-close-btn
display: block
float: right
font-size: 24px
h1
font-size: 22px
line-height: 1.2em
margin: 0 0 10px
h2
font-size: 18px
line-height: 1.2em
margin: 0 0 9px
h3, h4, h5, h6
font-size: 16px
line-height: 1.25em
margin: 0 0 6px
.quiet, .quiet a
color: #8c8c8c
.error, .error a
color: #eb3800
.no-items-message
color: darken(white, 60%)
margin: 30px 0
text-align: center
.warning
background: #f0ecdb
border-radius: 3px
color: #aa8f09
padding: 6px 8px
a
color: #aa8f09
.small
font-size: 0.8em
a
color: inherit
cursor: pointer
text-decoration: none
&.is-disabled,
&.is-disabled:hover
cursor: default
text-decoration: none
span a
text-decoration: underline
strong
font-weight: bold
p
user-select: text
a
text-decoration: underline
word-wrap: break-word
table, p
margin-bottom: 8px
pre
margin: 15px 0
white-space: pre
max-height: 516px
pre,
code,
tt
font-family: lucida console, monospace
line-height: 1.25em
blockquote
margin: 8px 0 8px 8px
border-left: 1px solid #ccc
color: #666
padding: 0 0 0 8px
hr
height: 1px
border: 0
border: none
width: 100%
background: #dbdbdb
color: #dbdbdb
margin: 15px 0
padding: 0
table, td, th
vertical-align: top
border-top: 1px solid #ccc
border-left: 1px solid #ccc
td, th
padding: 5px
border-right: 1px solid #ccc
border-bottom: 1px solid #ccc
th
font-weight: 700
thead
background: #fff
background: linear-gradient(to bottom, #fff 0, #f0f0f0 100%)
tbody
background-color: #fff
dl, dt
margin-bottom: 8px
dd
margin: 0 0 16px 24px
kbd
padding: 1px 3px
margin: 3px
font-weight: bold
background: darken(white, 2%)
border-radius: 3px
border: 1px solid darken(white, 10%)
color: unset
box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.15)
.clear
clear: both
.clearfix
clearfix()
.hide
display: none
.show
display: block
.bold
font-weight: 700
.center
text-align: center
.left
float: left
.right
float: right
.first
margin-left: 0
padding-left: 0
.last
margin-right: 0
padding-right: 0
.top
margin-top: 0
padding-top: 0
.bottom
margin-bottom: 0
padding-bottom: 0
.wrapper
max-width: 1200px
margin: 0 auto
.relative
position: relative
.block
display: block
.inline
display: inline
.inline-block
display: inline-block
.pointer
cursor: pointer
.ellip
overflow: hidden
text-overflow: ellipsis
white-space: nowrap
.underline
text-decoration: underline
.lowercase
text-transform: lowercase
.invisible
visibility: hidden
.wrapword
word-wrap: break-word
.grab
cursor: grab
.grabbing
cursor: grabbing
// Implement a thiner close icon as suggested in
// https://github.com/FortAwesome/Font-Awesome/issues/1540#issuecomment-68689950
.fa.fa-times-thin:before
content: '\00d7'
.fa.fa-globe.colorful, .fa.fa-bell.colorful
color: #4caf50
.fa.fa-lock.colorful, .fa.fa-bell-slash.colorful
color: #f44336
.fa.fa-eye.colorful
color: #4336f4
.pop-over .pop-over-list li a:not(.disabled):hover
.fa, .fa.colorful
color: white
&:hover
color: white
a
&.fa, i.fa
color: darken(white, 35%)
&:not(.disabled):hover, &:not(.disabled).is-active
&.fa, i.fa
color: darken(white, 60%)
.ui-draggable-dragging
z-index: 200
.atMention
background: #dbdbdb
border-radius: 3px
padding: 1px 4px
margin: -1px 0
display: inline-block
&.me
background: #cfdfe8
.big-message
display: block
margin: 75px auto
text-align: center
max-width: 600px
h1
font-size: 26px
margin-bottom: 24px
p
font-size: 18px
line-height: 22px
.gutter
margin-left: 38px
.viewer
min-height: 18px
display: block
word-wrap: break-word
table
word-wrap: normal
word-break: normal
ol
list-style-type: decimal
padding-left: 20px
ul
list-style-type: initial
padding-left: 20px
em
font-style : italic
pre
padding: 10px 12px 7px
background: darken(white, 13%)
overflow-y: auto
a
text-decoration: underline
&:hover
color: #333
.basicTabs-container .tabs-content-container
padding: 0
padding-top: 15px
@keyframes fadeIn
from
opacity: 0
@keyframes flexGrowIn
from
// Support IE11 https://github.com/wekan/wekan/pull/646
height: 100%
@media screen and (max-width: 800px)
#content
margin: 1px 0px 0px 0px
height: calc(100% - 0px)
> .wrapper
margin-top: 0px
.wrapper
height: 100%
margin: 0px
.panel-default
width: 83vw
.inline-input
height: 37px
margin: 8px 10px 0 0
width: 50px
.select-authentication
width: 100%
.auth-layout
display: flex
flex-direction: column
align-items: center
justify-content: center
height: 100%
.auth-dialog
margin: 0 !important
.loadingText
text-align: center
.lds-roller
display: block
margin: auto
position: relative
width: 64px
height: 64px
div
animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite
transform-origin: 32px 32px
div:after
content: " "
display: block
position: absolute
width: 6px
height: 6px
border-radius: 50%
background: #dedede
margin: -3px 0 0 -3px
div:nth-child(1)
animation-delay: -0.036s
div:nth-child(1):after
top: 50px
left: 50px
div:nth-child(2)
animation-delay: -0.072s
div:nth-child(2):after
top: 54px
left: 45px
div:nth-child(3)
animation-delay: -0.108s
div:nth-child(3):after
top: 57px
left: 39px
div:nth-child(4)
animation-delay: -0.144s
div:nth-child(4):after
top: 58px
left: 32px
div:nth-child(5)
animation-delay: -0.18s
div:nth-child(5):after
top: 57px
left: 25px
div:nth-child(6)
animation-delay: -0.216s
div:nth-child(6):after
top: 54px
left: 19px
div:nth-child(7)
animation-delay: -0.252s
div:nth-child(7):after
top: 50px
left: 14px
div:nth-child(8)
animation-delay: -0.288s
div:nth-child(8):after
top: 45px
left: 10px
@keyframes lds-roller
0%
transform: rotate(0deg)
100%
transform: rotate(360deg)

39
client/components/main/popup.js Normal file
View File

@ -0,0 +1,39 @@
Popup.template.events({
'click .js-back-view'() {
Popup.back();
},
'click .js-close-pop-over'() {
Popup.close();
},
'click .js-confirm'() {
this.__afterConfirmAction.call(this);
},
// This handler intends to solve a pretty tricky bug with our popup
// transition. The transition is implemented using a large container
// (.content-container) that is moved on the x-axis (from 0 to n*PopupSize)
// inside a wrapper (.container-wrapper) with a hidden overflow. The problem
// is that sometimes the wrapper is scrolled -- even if there are no
// scrollbars. This happen for instance when the newly opened popup has some
// focused field, the browser will automatically scroll the wrapper, resulting
// in moving the whole popup container outside of the popup wrapper. To
// disable this behavior we have to manually reset the scrollLeft position
// whenever it is modified.
'scroll .content-wrapper'(evt) {
evt.currentTarget.scrollLeft = 0;
},
});
// When a popup content is removed (ie, when the user press the "back" button),
// we need to wait for the container translation to end before removing the
// actual DOM element. For that purpose we use the undocumented `_uihooks` API.
Popup.template.onRendered(() => {
const container = this.find('.content-container');
container._uihooks = {
removeElement(node) {
$(node).addClass('no-height');
$(container).one(CSSEvents.transitionend, () => {
node.parentNode.removeChild(node);
});
},
};
});

335
client/components/main/popup.styl Normal file
View File

@ -0,0 +1,335 @@
@import 'nib'
$popupWidth = 300px
.pop-over
background: #fff
border-radius: 3px
border: 1px solid #dbdbdb
border-bottom-color: #c2c2c2
box-shadow: 0 1px 6px rgba(0, 0, 0, .3)
position: absolute
width: $popupWidth
z-index: 99999
margin-top: 5px
hr
margin: 4px -10px
width: $popupWidth
p,
textarea,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="file"]
margin: 4px 0 12px
width: 100%
select
width: 100%
margin-bottom: 14px
textarea
height: 72px
form a span
padding: 0 0.5rem
.header
height: 36px
position: relative
margin-bottom: 8px
background: #F7F7F7
border-bottom: 1px solid #dcdcdc
color: darken(white, 60%)
.header-title
display: block
line-height: 32px
padding-top: 4px
margin: 0 10px
font-weight: bold
overflow: hidden
text-overflow: ellipsis
white-space: nowrap
.back-btn
float: left
overflow: hidden
width: 30px
transition: width 0.2s
i.fa
margin: 10px
margin-top: 12px
&.is-hidden
width: 0
.close-btn
padding: 10px 10px 10px 4px
position: absolute
top: 0
right: 0
&.no-title .header
background: none
.content-wrapper
width: 100%
overflow: hidden
.content-container
width: 5000px
max-height: 550px
transition: transform 0.2s
.content
width: $popupWidth - 20px
padding: 0 10px 10px
float: left
&.no-height
height: 20px
.quiet
padding: 6px 6px 4px
&.search-over
background: #f0f0f0
min-height: 114px
.header
display: none
.content
padding: 8px 4px 8px 10px
margin-right: 8px
.at-form
.at-error, .at-result
padding: 8px 12px
margin: -8px -10px 10px
.at-error
background: #ef9a9a
.at-result
background: #b2dfdb
.sk-spinner
margin: 40px auto
for depth in (1..6)
.popup-container-depth-{depth}
transform: translateX(- depth * $popupWidth)
.select-members-list,
.select-avatars-list
margin-bottom: 8px
.pop-over-list
li
display: block
clear: both
li > a
clear: both
cursor: pointer
display: block
font-weight: 700
padding: 1.5px 10px
position: relative
margin: 0 -10px
text-decoration: none
overflow:hidden
line-height:33px
.item-name
display: block
width: auto
padding-right: 22px
&:not(.disabled):hover
background-color: #005377
color: #fff
.sub-name,
.quiet
color: #eee
.unread-indicator
background: #fff
.sub-name
color: #8c8c8c
display: block
font-size: 12px
font-weight: 400
line-height: 15px
&.current
background-color: #e2e6e9
&:active
background-color: #2e85b8
&.disabled
color: #8c8c8c
cursor: default
.vis-icon
opacity: .35
&:hover
background: none
.sub-name,
.quiet
color: #8c8c8c
&:active
background: none
&.inset li > a
border-radius: 3px
margin: 0
.pop-over-list.checkable
.fa-check
display: none
position: absolute
top: 6px
right: 12px
li.active a
padding-right: 28px
.fa-check
display: block
.pop-over.miniprofile
.header
border-bottom-color: transparent
height: 30px
position: absolute
right: 0
top: 0
width: 60px
z-index: 1
.header-title
display: none
.pop-over-list
padding-top: 8px
.miniprofile-header
margin-top: 8px
min-height: 56px
position: relative
.member,
.avatar
position: absolute
top: 2px
left: 2px
height: 50px
width: @height
.info
margin: 0 0 0 64px
word-wrap: break-word
h3 a
text-decoration: none
&:hover
text-decoration: underline
@media screen and (max-width: 800px)
.pop-over
width: 100%
height: 100%
overflow: hidden
margin-top: 0px
border: 0px solid #dbdbdb
.header
color: white
background: #2980B9
height: 48px
padding: 0px 0px
border: 0px
margin: 0px 0px
width: 100%
position: absolute
top: 0px
.header-title
font-size: 20px
font-weight: normal
padding-top: 8px
.back-btn
width: 30px
padding: 8px 12px 8px 12px
i.fa
color: white
.close-btn
padding: 10px 12px
i.fa
font-size: 24px
color: white
.content-wrapper
width: 100%
height: calc(100% - 48px)
overflow-y: scroll
overflow-x: hidden
margin: 48px 0px 0px 0px
.content-container
width: 1000%
height: 100%
max-height: 100%
.content
width: calc(10% - 20px)
height: calc(100% - 20px)
padding: 10px
form
margin: 10px 10px
width: calc(100% - 20px)
p,
textarea,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="file"]
margin: 4px 0 12px
width: 100%
box-sizing: border-box
.pop-over-list
li > a
width: calc(100% - 20px)
padding: 10px 10px
margin: 0px 0px
border-bottom: 1px solid #eee
hr
width: 100%
height: 20px
margin: 0px 0px
color: #eee
for depth in (1..6)
.popup-container-depth-{depth}
transform: translateX(- depth * 10%)

23
client/components/main/popup.tpl.jade Normal file
View File

@ -0,0 +1,23 @@
.pop-over.js-pop-over(
class="{{#unless title}}miniprofile{{/unless}}"
class=currentBoard.colorClass
class="{{#unless title}}no-title{{/unless}}"
style="left:{{offset.left}}px; top:{{offset.top}}px;")
.header
a.back-btn.js-back-view(class="{{#unless hasPopupParent}}is-hidden{{/unless}}")
i.fa.fa-chevron-left
span.header-title= title
a.close-btn.js-close-pop-over
i.fa.fa-times-thin
.content-wrapper
//-
We display the all stack of popup content next to each other and move
the "window" by translating .content-container inside .content-wrapper.
.content-container(class="popup-container-depth-{{depth}}")
each stack
//-
XXX We need a better way to express the "is the last element" condition.
Hopefully the @last helper will come soon (or at least @index)
.content(class="{{#unless $eq popupName ../popupName}}no-height{{/unless}}")
+Template.dynamic(template=popupName data=dataContext)
.clearfix

43
client/components/main/spinner.styl Normal file
View File

@ -0,0 +1,43 @@
@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 {
width: 50px;
height: 50px;
margin: auto;
text-align: center;
font-size: 10px;
div {
background-color: #333;
height: 100%;
width: 6px;
display: inline-block;
animation: sk-waveStretchDelay 1.2s infinite ease-in-out;
}
.sk-rect2 { animation-delay: -1.1s }
.sk-rect3 { animation-delay: -1.0s }
.sk-rect4 { animation-delay: -0.9s }
.sk-rect5 { animation-delay: -0.8s }
}
@keyframes sk-waveStretchDelay {
0%, 40%, 100% { transform: scaleY(0.4) }
20% { transform: scaleY(1.0) }
}

6
client/components/main/spinner.tpl.jade Normal file
View File

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

34
client/components/mixins/infiniteScrolling.js Normal file
View File

@ -0,0 +1,34 @@
const peakAnticipation = 200;
Mixins.InfiniteScrolling = BlazeComponent.extendComponent({
onCreated() {
this._nextPeak = Infinity;
},
setNextPeak(v) {
this._nextPeak = v;
},
getNextPeak() {
return this._nextPeak;
},
resetNextPeak() {
this._nextPeak = Infinity;
},
events() {
return [
{
scroll(evt) {
const domElement = evt.currentTarget;
let altitude = domElement.scrollTop + domElement.offsetHeight;
altitude += peakAnticipation;
if (altitude >= this.callFirstWith(null, 'getNextPeak')) {
this.mixinParent().callFirstWith(null, 'reachNextPeak');
}
},
},
];
},
});

10
client/components/notifications/notification.jade Normal file
View File

@ -0,0 +1,10 @@
template(name='notification')
li.notification(class="{{#if read}}read{{/if}}")
.read-status
.materialCheckBox(class="{{#if read}}is-checked{{/if}}")
+notificationIcon(activityData)
.details
+activity(activity=activityData mode='none')
if read
.remove
a.fa.fa-trash

28
client/components/notifications/notification.js Normal file
View File

@ -0,0 +1,28 @@
Template.notification.events({
'click .read-status .materialCheckBox'() {
const update = {};
update[`profile.notifications.${this.index}.read`] = this.read
? null
: Date.now();
Users.update(Meteor.userId(), { $set: update });
},
'click .remove a'() {
Meteor.user().removeNotification(this.activityData._id);
},
});
Template.notification.helpers({
mode: 'board',
isOfActivityType(activityId, type) {
const activity = Activities.findOne(activityId);
return activity && activity.activityType === type;
},
activityType(activityId) {
const activity = Activities.findOne(activityId);
return activity ? activity.activityType : '';
},
activityUser(activityId) {
const activity = Activities.findOne(activityId);
return activity && activity.userId;
},
});

57
client/components/notifications/notification.styl Normal file
View File

@ -0,0 +1,57 @@
#notifications-drawer
&.show-read .notification.read
display: flex
.notification
display: flex
float: none
padding: 12px 8px 8px
color: black
border-bottom: 1px solid #dbdbdb
&.read
display: none
.read-status
width: 30px
input
width: 24px
height: 24px
.activity-type
margin: 16px 0 0
width: 17px
height: 17px
font-size: 17px
display: block
color: #bbb
.details
width: calc(100% - 30px)
.activity
display: flex
.activity-desc
width: 100%;
.activity-comment
display: block
width: 100%
border-radius: 3px
background: #fff
text-decoration: none
box-shadow: 0 1px 2px rgba(0,0,0,0.2)
margin-top: 5px
padding: 5px
.activity-meta
display: block
font-size: 0.8em
color: #999
font-style: italic
.remove
a:hover
color #eb4646 !important

53
client/components/notifications/notificationIcon.jade Normal file
View File

@ -0,0 +1,53 @@
template(name='notificationIcon')
if($in activityType 'deleteAttachment' 'addAttachment')
i.fa.fa-paperclip.activity-type(title="attachment")
else if($in activityType 'createBoard' 'importBoard')
i.fa.fa-chalkboard.activity-type(title="board")
else if($in activityType 'createCard' 'importCard' 'moveCard')
+cardNotificationIcon
else if($in activityType 'moveCardBoard' 'archivedCard' 'restoredCard')
+cardNotificationIcon
//- $in can only handle up to 3 cases so we have to break this case over 2 cases... use a simple template to keep it
//- DRY and consistant
else if($in activityType 'addChecklist' 'removedChecklist' 'completeChecklist')
+checklistNotificationIcon
else if($in activityType 'uncompleteChecklist')
+checklistNotificationIcon
//- $in can only handle up to 3 cases so we have to break this case over 2 cases... use a simple template to keep it
//- DRY and consistant
else if($in activityType 'checkedItem' 'uncheckedItem' 'addChecklistItem' 'removedChecklistItem')
i.fa.fa-check-square.activity-type(title="checklist item")
else if($in activityType 'addComment')
i.fa.fa-comment-o.activity-type(title="comment")
else if($in activityType 'createCustomField' 'setCustomField' 'unsetCustomField')
i.fa.fa-code.activity-type(title="custom field")
else if($in activityType 'addedLabel' 'removedLabel')
i.fa.fa-tag.activity-type(title="label")
else if($in activityType 'createList' 'removeList' 'archivedList')
+listNotificationIcon
else if($in activityType 'importList')
+listNotificationIcon
//- $in can only handle up to 3 cases so we have to break this case over 2 cases... use a simple template to keep it
//- DRY and consistant
//- elswhere in the app we use fa-trello to indicate lists...
//- i personally like fa-columns a bit better
else if($in activityType 'unjoinMember' 'addBoardMember' 'joinMember' 'removeBoardMember')
i.fa.fa-user.activity-type(title="member")
else if($in activityType 'createSwimlane' 'archivedSwimlane')
i.fa.fa-th-large.activity-type(title="swimlane")
else
i.fa.fa-bug.activity-type(title="can't find icon for #{activityType}")
template(name='cardNotificationIcon')
i.fa.fa-clone.activity-type(title="card")
template(name='checklistNotificationIcon')
i.fa.fa-list.activity-type(title="checklist")
template(name='listNotificationIcon')
i.fa.fa-columns.activity-type(title="list")

5
client/components/notifications/notifications.jade Normal file
View File

@ -0,0 +1,5 @@
template(name='notifications')
#notifications.board-header-btns.right
a.notifications-drawer-toggle.fa.fa-bell(class="{{#if $gt unreadNotifications 0}}alert{{/if}}")
if $.Session.get 'showNotificationsDrawer'
+notificationsDrawer(unreadNotifications=unreadNotifications)

32
client/components/notifications/notifications.js Normal file
View File

@ -0,0 +1,32 @@
// this hides the notifications drawer if anyone clicks off of the panel
Template.body.events({
click(event) {
if (
!$(event.target).is('#notifications *') &&
Session.get('showNotificationsDrawer')
) {
toggleNotificationsDrawer();
}
},
});
Template.notifications.helpers({
unreadNotifications() {
const notifications = Users.findOne(Meteor.userId()).notifications();
const unreadNotifications = _.filter(notifications, v => !v.read);
return unreadNotifications.length;
},
});
Template.notifications.events({
'click .notifications-drawer-toggle'() {
toggleNotificationsDrawer();
},
});
export function toggleNotificationsDrawer() {
Session.set(
'showNotificationsDrawer',
!Session.get('showNotificationsDrawer'),
);
}

17
client/components/notifications/notifications.styl Normal file
View File

@ -0,0 +1,17 @@
#notifications
position: relative
.notifications-drawer-toggle
display: block
line-height: 28px
color: #f2f2f2
margin: 0 10px
width: 28px
height: 28px
text-align: center
border: 0
padding: 0
&.alert
background-color: #eb4646;

20
client/components/notifications/notificationsDrawer.jade Normal file
View File

@ -0,0 +1,20 @@
template(name='notificationsDrawer')
section#notifications-drawer(class="{{#if $.Session.get 'showReadNotifications'}}show-read{{/if}}")
.header
if $.Session.get 'showReadNotifications'
a.toggle-read {{_ 'filter-by-unread'}}
else
a.toggle-read {{_ 'view-all'}}
h5 {{_ 'notifications'}}
if($gt unreadNotifications 0)
|(#{unreadNotifications})
a.fa.fa-times-thin.close
ul.notifications
each transformedProfile.notifications
+notification(activityData=activity index=dbIndex read=read)
if($gt unreadNotifications 0)
a.all-read {{_ 'mark-all-as-read'}}
if ($and ($.Session.get 'showReadNotifications') ($gt readNotifications 0))
a.remove-read
i.fa.fa-trash
| {{_ 'remove-all-read'}}

53
client/components/notifications/notificationsDrawer.js Normal file
View File

@ -0,0 +1,53 @@
import { toggleNotificationsDrawer } from './notifications.js';
Template.notificationsDrawer.onCreated(function() {
Meteor.subscribe('notificationActivities');
Meteor.subscribe('notificationCards');
Meteor.subscribe('notificationUsers');
Meteor.subscribe('notificationsAttachments');
Meteor.subscribe('notificationChecklistItems');
Meteor.subscribe('notificationChecklists');
Meteor.subscribe('notificationComments');
Meteor.subscribe('notificationLists');
Meteor.subscribe('notificationSwimlanes');
});
Template.notificationsDrawer.helpers({
transformedProfile() {
return Users.findOne(Meteor.userId());
},
readNotifications() {
const readNotifications = _.filter(
Meteor.user().profile.notifications,
v => !!v.read,
);
return readNotifications.length;
},
});
Template.notificationsDrawer.events({
'click .all-read'() {
const notifications = Meteor.user().profile.notifications;
for (const index in notifications) {
if (notifications.hasOwnProperty(index) && !notifications[index].read) {
const update = {};
update[`profile.notifications.${index}.read`] = Date.now();
Users.update(Meteor.userId(), { $set: update });
}
}
},
'click .close'() {
toggleNotificationsDrawer();
},
'click .toggle-read'() {
Session.set('showReadNotifications', !Session.get('showReadNotifications'));
},
'click .remove-read'() {
const user = Meteor.user();
for (const notification of user.profile.notifications) {
if (notification.read) {
user.removeNotification(notification.activity);
}
}
},
});

Some files were not shown because too many files have changed in this diff Show More