Comments support

appinfo/app.php

@@ -28,5 +28,7 @@
 $app = new \OCA\Deck\AppInfo\Application();
 $app->registerNavigationEntry();
 $app->registerNotifications();
+$app->registerCommentsEntity();
 
+/** Load activity style global so it is availabile in the activity app as well */
 \OC_Util::addStyle('deck', 'activity');

appinfo/info.xml

@@ -14,7 +14,7 @@
 - 🚀 Get your project organized
 
 </description>
-    <version>0.5.0-dev3</version>
+    <version>0.5.0-dev4</version>
     <licence>agpl</licence>
     <author>Julius Härtl</author>
     <namespace>Deck</namespace>

css/autocomplete.scss

@@ -0,0 +1,77 @@
+/**
+ * based upon apps/comments/js/vendor/At.js/dist/css/jquery.atwho.css,
+ * only changed colors and font-weight
+ */
+
+.atwho-view {
+	position:absolute;
+	top: 0;
+	left: 0;
+	display: none;
+	margin-top: 18px;
+	background: var(--color-main-background);
+	color: var(--color-main-text);
+	border: 1px solid var(--color-border);
+	border-radius: var(--border-radius);
+	box-shadow: 0 0 5px var(--color-box-shadow);
+	min-width: 120px;
+	z-index: 11110 !important;
+}
+
+.atwho-view .atwho-header {
+	padding: 5px;
+	margin: 5px;
+	cursor: pointer;
+	border-bottom: solid 1px var(--color-border);
+	color: var(--color-main-text);
+	font-size: 11px;
+	font-weight: bold;
+}
+
+.atwho-view .atwho-header .small {
+	color: var(--color-main-text);
+	float: right;
+	padding-top: 2px;
+	margin-right: -5px;
+	font-size: 12px;
+	font-weight: normal;
+}
+
+.atwho-view .atwho-header:hover {
+	cursor: default;
+}
+
+.atwho-view .cur {
+	background: var(--color-primary);
+	color: var(--color-primary-text);
+}
+.atwho-view .cur small {
+	color: var(--color-primary-text);
+}
+.atwho-view strong {
+	color: var(--color-main-text);
+	font-weight: normal;
+}
+.atwho-view .cur strong {
+	color: var(--color-primary-text);
+	font-weight: normal;
+}
+.atwho-view ul {
+	/* width: 100px; */
+	list-style:none;
+	padding:0;
+	margin:auto;
+	max-height: 200px;
+	overflow-y: auto;
+}
+.atwho-view ul li {
+	display: block;
+	padding: 5px 10px;
+	border-bottom: 1px solid var(--color-border);
+	cursor: pointer;
+}
+.atwho-view small {
+	font-size: smaller;
+	color: var(--color-main-text);
+	font-weight: normal;
+}

css/icons.scss

@@ -37,6 +37,10 @@
   background-image: url('../../../core/img/places/home.svg');
 }
 
+.icon-description {
+  background-image: url('../img/description.svg');
+}
+
 .icon-badge {
   background-image: url('../img/calendar-dark.svg');
 }

css/style.scss

@@ -41,6 +41,7 @@ $compact-board-last-item-margin: 5px 10px 10px;
 @import 'icons';
 @import 'animations';
 @import 'compact-mode';
+@import 'autocomplete';
 
 /**
  * General styles
@@ -454,9 +455,10 @@ input.input-inline {
 			opacity: 1;
 		}
 
-		.icon-filetype-text {
+		.icon-description {
 			margin: 10px;
 			margin-left: 0px;
+			opacity: 0.5;
 		}
 
 		.due {
@@ -492,7 +494,7 @@ input.input-inline {
 			}
 		}
 
-		.card-tasks, .card-files {
+		.card-tasks, .card-files, .card-comments {
 			border-radius: 3px;
 			margin: 4px 4px 4px 0px;
 			padding: 0 2px;
@@ -937,6 +939,63 @@ input.input-inline {
 	}
 }
 
+.activity-icon {
+	opacity: 1 !important;
+	.avatardiv-container {
+		top: -4px;
+		left: -7px;
+		margin-right: 5px;
+		img {
+			max-width: 24px;
+			max-height: 24px;
+		}
+	}
+}
+
+.activitysubject.commentAuthor {
+	margin-left: 26px;
+	margin-right: 0;
+	margin-top: 10px;
+}
+.activityTabView {
+	.activity {
+		margin-bottom: 20px;
+	}
+	.activitytime {
+		margin: 0 !important;
+	}
+}
+.activitysubject .app-popover-menu-utils {
+	display: inline-block;
+	a {
+		font-weight: normal;
+	}
+	button {
+		opacity: .5;
+		padding: 7px;
+		margin-left: 10px;
+	}
+}
+
+#commentsTabView {
+	.newCommentRow .avatardiv-container {
+		left: -7px;
+	}
+	.comment {
+		position: relative;
+		padding: 0 0 15px;
+
+		.avatardiv {
+			width: 24px;
+			height: 24px;
+			line-height: 24px;
+		}
+	}
+	.newCommentForm {
+		margin-left: 26px;
+	}
+}
+
 .card-attachments {
 	.error {
 		padding-left: 38px;
@@ -1250,6 +1309,13 @@ input.input-inline {
 	clear: both;
 	overflow: initial;
 	margin-bottom: 0;
+	.icon {
+		display: inline-block;
+		background-size: contain;
+		margin: -3px;
+		margin-right: 5px;
+		opacity: 0.5;
+	}
 }
 
 .tabsContainer {

js/app/App.js

@@ -49,6 +49,8 @@ import md from 'angular-markdown-it';
 import nganimate from 'angular-animate';
 import 'angular-file-upload';
 import ngInfiniteScroll from 'ng-infinite-scroll';
+import '../legacy/jquery.atwho.min';
+import '../legacy/jquery.caret.min';
 
 var app = angular.module('Deck', [
 	ngsanitize,

js/app/Run.js

@@ -4,20 +4,20 @@
  * @author Julius Härtl <jus@bitgrid.net>
  *
  * @license GNU AGPL version 3 or any later version
- *  
+ *
  *  This program is free software: you can redistribute it and/or modify
  *  it under the terms of the GNU Affero General Public License as
  *  published by the Free Software Foundation, either version 3 of the
  *  License, or (at your option) any later version.
- *  
+ *
  *  This program is distributed in the hope that it will be useful,
  *  but WITHOUT ANY WARRANTY; without even the implied warranty of
  *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  *  GNU Affero General Public License for more details.
- *  
+ *
  *  You should have received a copy of the GNU Affero General Public License
  *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
- *  
+ *
  */
 import app from './App.js';