Merge pull request #681 from nextcloud/design-fixes

Design fixes
nextcloud · Nov 10, 2018 · 9cf30dc · 9cf30dc
2 parents dc5eb9e + b42c80b
commit 9cf30dc
Show file tree

Hide file tree

Showing 9 changed files with 99 additions and 85 deletions.
diff --git a/css/activity.css b/css/activity.css
@@ -8,6 +8,11 @@
 	text-decoration: none;
 }
 
+.activitymessage .visualdiff {
+	overflow: scroll;
+	max-height: 200px;
+}
+
 .activityTabView .avatardiv-container {
 	display: inline-block;
 	bottom: -3px;

diff --git a/css/comp-13.scss b/css/comp-13.scss
@@ -16,7 +16,7 @@
 	width: 500px;
 	display:flex;
 	flex-direction: column;
-	z-index: 1500;
+	z-index: 1000;
 
 	&.details-visible {
 		right: 0;

diff --git a/css/icons.scss b/css/icons.scss
@@ -34,13 +34,11 @@
 }
 
 .icon-home {
-  background-image: url('../../../core/img/places/home.svg');
-  background-image: var(--icon-home-000);
+  background-image: var(--icon-home-000, url('../../../core/img/places/home.svg'));
 }
 
 .icon-description {
-  background-image: url('../img/description.svg');
-  background-image: var(--icon-text-000);
+  background-image: var(--icon-text-000, url('../img/description.svg'));
 }
 
 .icon-badge {

diff --git a/css/style.scss b/css/style.scss
@@ -156,8 +156,7 @@ input.input-inline {
 	z-index: 999;
 	width: 100%;
 	height: 100%;
-	background-color: $color-main-background;
-	background-color: var(--color-main-background);
+	background-color: var(--color-main-background, $color-main-background);
 }
 
 #board {
@@ -186,12 +185,10 @@ input.input-inline {
 	&.card-selected {
 
 		.card {
-			box-shadow: 0px 0px 7px 0px $color-grey;
-			box-shadow: 0px 0px 7px 0px var(--color-grey);
+			box-shadow: 0px 0px 7px 0px var(--color-background-darker, $color-grey);
 
 			&.current {
-				box-shadow: 0px 0px 7px 0px $color-darkgrey;
-				box-shadow: 0px 0px 7px 0px var(--color-darkgrey);
+				box-shadow: 0px 0px 7px 0px var(--color-text-lighter, $color-darkgrey);
 			}
 		}
 	}
@@ -224,10 +221,7 @@ input.input-inline {
 	}
 
 	> .as-sortable-drag {
-		background-color: $color-main-background;
-		background-color: var(--color-main-background);
-		box-shadow: 0 0 7px 0 $color-background-dark;
-		box-shadow: 0 0 7px 0 var(--color-background-dark);
+		background-color: var(--color-main-background $color-main-background);
 	}
 }
 
@@ -266,9 +260,17 @@ input.input-inline {
 	}
 
 	button {
-		height: inherit;
+		width: 36px;
+		height: 36px;
+		padding: 9px;
 	}
 
+	#stack-add form {
+		button {
+			height: auto;
+			width: 32px;
+		}
+	}
 	input[type='text'] {
 		padding: 6px;
 		border: 0 none transparent;
@@ -333,8 +335,7 @@ input.input-inline {
 }
 
 #stack-add {
-	background-color: $color-lightgrey;
-	background-color: var(--color-lightgrey);
+	background-color: var(--color-background-dark, $color-lightgrey);
 	border-radius: 3px;
 	margin: 3px;
 	display: flex;
@@ -380,8 +381,7 @@ input.input-inline {
 			margin: 0;
 			font-size: 12pt;
 			border: 0;
-			background-color: $color-main-background;
-			background-color: var(--color-main-background);
+			background-color: var(--color-main-background, $color-main-background);
 			min-height: initial;
 		}
 
@@ -427,13 +427,11 @@ input.input-inline {
 }
 
 .card {
-	background-color: $color-main-background;
-	background-color: var(--color-main-background);
+	background-color: var(--color-main-background, $color-main-background);
 	margin: $board-item-margin;
 	white-space: normal;
 	position: relative;
-	box-shadow: 0 0 3px $color-darkgrey;
-	box-shadow: 0 0 3px --var(color-darkgrey);
+	box-shadow: 0 0 3px var(--color-background-darker, $color-darkgrey);
 	border-radius: 3px;
 	transition: margin 250ms linear;
 
@@ -462,8 +460,7 @@ input.input-inline {
 	}
 
 	.card-controls {
-		background: $color-lightgrey;
-		background: var(--color-background-dark);
+		background: var(--color-background-dark, $color-lightgrey);
 		display: flex;
 		position: relative;
 		padding-left: 10px;
@@ -497,8 +494,7 @@ input.input-inline {
 
 			&.overdue {
 				background-color: $color-error;
-				color: $color-primary-text;
-				color: var(--color-primary-text);
+				color: var(--color-primary-text, $color-primary-text);
 
 				.icon-badge {
 					background-image: url('../img/calendar-white.svg');
@@ -680,8 +676,7 @@ input.input-inline {
 
 	position: sticky;
 	top: 0;
-	background-color: $color-main-background;
-	background-color: var(--color-main-background);
+	background-color: var(--color-main-background, $color-main-background);
 	z-index: 200;
 
 	h3 {
@@ -721,8 +716,7 @@ input.input-inline {
 	position: absolute;
 	width: 100%;
 	height: 100%;
-	background-color: $color-main-background;
-	background-color: var(--color-main-background);
+	background-color: var(--color-main-background, $color-main-background);
 	z-index: 100;
 	opacity: 0.9;
 	text-align: center;
@@ -809,10 +803,8 @@ input.input-inline {
 			color: $color-primary-text;
 		}
 		&.unsaved {
-			background-color: $color-lightgrey;
-			background-color: var(--color-lightgrey);
-			color: $color-darkgrey;
-			color: var(--color-darkgrey);
+			background-color: var(--color-background-dark, $color-lightgrey);
+			color: var(--color-text-light, $color-darkgrey);
 		}
 	}
 
@@ -853,9 +845,9 @@ input.input-inline {
 		width: 100%;
 		height: 100%;
 		background-color: rgba($color-darkgrey, 0.5);
-		background-color: var(--color-background-dark);
 		left: 0;
 		top: 0;
+		z-index: 300;
 	}
 	.attachment-list {
 		&.selector {
@@ -868,12 +860,10 @@ input.input-inline {
 			top: 50%;
 			left: 50%;
 			transform: translate(-50%, -50%);
-			background-color: $color-main-background;
-			background-color: var(--color-main-background);
+			background-color: var(--color-main-background, $color-main-background);
 			z-index: 2;
 			border-radius: 3px;
-			box-shadow: 0 0 3px $color-darkgrey;
-			box-shadow: 0 0 3px var(--color-darkgrey);
+			box-shadow: 0 0 3px var(--color-background-dark, $color-darkgrey);
 			overflow: scroll;
 		}
 		h3.attachment-selector {
@@ -967,8 +957,7 @@ input.input-inline {
 			}
 
 			.container {
-				background-color: $color-main-background;
-				background-color: var(--color-main-background);
+				background-color: var(--color-main-background, $color-main-background);
 
 			}
 		}
@@ -1349,7 +1338,6 @@ input.input-inline {
 	.icon {
 		display: inline-block;
 		background-size: contain;
-		margin: -3px;
 		margin-right: 5px;
 		opacity: 0.5;
 	}
@@ -1440,6 +1428,8 @@ input.input-inline {
  */
 #markdown {
 	width: 100% !important;
+	min-height: 40px;
+	cursor: text;
 
 	p {
 		margin-bottom: 15px;
@@ -1493,8 +1483,7 @@ input.input-inline {
 	}
 
 	pre {
-		background-color: $color-lightgrey;
-		background-color: var(--color-background-dark);
+		background-color: var(--color-background-dark, $color-lightgrey);
 		padding: 3px;
 		overflow: auto;
 
@@ -1531,6 +1520,19 @@ input.input-inline {
 	li input[type="checkbox"].checkbox:not(:checked) + label::before {
 			background-color: $color-main-background;
 	}
+
+	table {
+		margin-bottom: 10px;
+		border-collapse: collapse;
+
+		thead {
+			background-color: var(--color-background-dark, $color-lightgrey);
+		}
+		td, th {
+			border: 1px solid var(--color-background-darker, $color-darkgrey);
+			padding: 3px;
+		}
+	}
 }
 
 .section-wrapper {

diff --git a/js/controller/ActivityController.js b/js/controller/ActivityController.js
@@ -20,7 +20,7 @@
  *
  */
 
-/* global OC OCA OCP t escapeHTML */
+/* global OC OCA OCP t escapeHTML Handlebars */
 
 import CommentCollection from '../legacy/commentcollection';
 import CommentModel from '../legacy/commentmodel';
@@ -64,6 +64,23 @@ class ActivityController {
 		this.activityservice.subscribe(this.$scope, function() {
 			self.$scope.$apply();
 		});
+
+		if (typeof OCA.Activity.Templates !== 'undefined') {
+			OCA.Activity.Templates.userLocal = Handlebars.template({"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) {
+				var helper;
+				// Compiled handlesbars template
+				// '<span class="avatar-name-wrapper"><avatar ng-attr-contactsmenu ng-attr-tooltip ng-attr-user="{{ id }}" ng-attr-displayname="{{name}}" ng-attr-size="16"></avatar> {{ name }}</span>';
+				return "<span class=\"avatar-name-wrapper\"><avatar ng-attr-contactsmenu ng-attr-tooltip ng-attr-user=\""
+					+ container.escapeExpression(((helper = (helper = helpers.id || (depth0 != null ? depth0.id : depth0)) != null ? helper : helpers.helperMissing),(typeof helper === "function" ? helper.call(depth0 != null ? depth0 : {},{"name":"id","hash":{},"data":data}) : helper)))
+					+ "\" ng-attr-displayname=\""
+					+ container.escapeExpression(((helper = (helper = helpers.name || (depth0 != null ? depth0.name : depth0)) != null ? helper : helpers.helperMissing),(typeof helper === "function" ? helper.call(depth0 != null ? depth0 : {},{"name":"name","hash":{},"data":data}) : helper)))
+					+ "\" ng-attr-size=\"16\"></avatar> "
+					+ container.escapeExpression(((helper = (helper = helpers.name || (depth0 != null ? depth0.name : depth0)) != null ? helper : helpers.helperMissing),(typeof helper === "function" ? helper.call(depth0 != null ? depth0 : {},{"name":"name","hash":{},"data":data}) : helper)))
+					+ "</span>";
+			},"useData":true});
+		} else {
+			OCA.Activity.RichObjectStringParser._userLocalTemplate = '<span class="avatar-name-wrapper"><avatar ng-attr-contactsmenu ng-attr-tooltip ng-attr-user="{{ id }}" ng-attr-displayname="{{name}}" ng-attr-size="16"></avatar> {{ name }}</span>';
+		}
 	}
 
 	applyAtWho($target) {
@@ -263,23 +280,6 @@ class ActivityController {
 	}
 
 	parseMessage(subject, parameters) {
-		if (typeof OCA.Activity.Templates !== 'undefined') {
-			OCA.Activity.Templates.userLocal = {"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) {
-				var helper;
-				// Compiled handlesbars template
-				// '<span class="avatar-name-wrapper"><avatar ng-attr-contactsmenu ng-attr-tooltip ng-attr-user="{{ id }}" ng-attr-displayname="{{name}}" ng-attr-size="16"></avatar> {{ name }}</span>';
-				return "<span class=\"avatar-name-wrapper\"><avatar ng-attr-contactsmenu ng-attr-tooltip ng-attr-user=\""
-					+ container.escapeExpression(((helper = (helper = helpers.id || (depth0 != null ? depth0.id : depth0)) != null ? helper : helpers.helperMissing),(typeof helper === "function" ? helper.call(depth0 != null ? depth0 : {},{"name":"id","hash":{},"data":data}) : helper)))
-					+ "\" ng-attr-displayname=\""
-					+ container.escapeExpression(((helper = (helper = helpers.name || (depth0 != null ? depth0.name : depth0)) != null ? helper : helpers.helperMissing),(typeof helper === "function" ? helper.call(depth0 != null ? depth0 : {},{"name":"name","hash":{},"data":data}) : helper)))
-					+ "\" ng-attr-size=\"16\"></avatar> "
-					+ container.escapeExpression(((helper = (helper = helpers.name || (depth0 != null ? depth0.name : depth0)) != null ? helper : helpers.helperMissing),(typeof helper === "function" ? helper.call(depth0 != null ? depth0 : {},{"name":"name","hash":{},"data":data}) : helper)))
-					+ "</span>";
-			},"useData":true};
-		} else {
-			OCA.Activity.RichObjectStringParser._userLocalTemplate = '<span class="avatar-name-wrapper"><avatar ng-attr-contactsmenu ng-attr-tooltip ng-attr-user="{{ id }}" ng-attr-displayname="{{name}}" ng-attr-size="16"></avatar> {{ name }}</span>';
-		}
-
 		return OCA.Activity.RichObjectStringParser.parseMessage(subject, parameters);
 	}
 

diff --git a/js/controller/CardController.js b/js/controller/CardController.js
@@ -117,7 +117,7 @@ app.controller('CardController', function ($scope, $rootScope, $sce, $location,
 			return match;
 		});
 		CardService.update($scope.status.edit).then(function (data) {
-			var header = $('.section-header-tabbed .tabDetails');
+			var header = $('.tabDetails');
 			header.find('.save-indicator.unsaved').hide();
 			header.find('.save-indicator.saved').fadeIn(250).fadeOut(1000);
 		});
@@ -147,7 +147,7 @@ app.controller('CardController', function ($scope, $rootScope, $sce, $location,
 	};
 	$scope.cardEditDescriptionChanged = function ($event) {
 		$scope.status.lastEdit = Date.now();
-		var header = $('.section-header-tabbed .tabDetails');
+		var header = $('.tabDetails');
 		header.find('.save-indicator.unsaved').show();
 		header.find('.save-indicator.saved').hide();
 	};
@@ -157,10 +157,10 @@ app.controller('CardController', function ($scope, $rootScope, $sce, $location,
 		if (timeSinceEdit > 1000 && $scope.status.lastEdit > $scope.status.lastSave && !$scope.status.saving) {
 			$scope.status.lastSave = currentTime;
 			$scope.status.saving = true;
-			var header = $('.section-header-tabbed .tabDetails');
+			var header = $('.tabDetails');
 			header.find('.save-indicator.unsaved').fadeIn(500);
 			CardService.update($scope.status.edit).then(function (data) {
-				var header = $('.section-header-tabbed .tabDetails');
+				var header = $('.tabDetails');
 				header.find('.save-indicator.unsaved').hide();
 				header.find('.save-indicator.saved').fadeIn(250).fadeOut(1000);
 				$scope.status.saving = false;
@@ -196,7 +196,7 @@ app.controller('CardController', function ($scope, $rootScope, $sce, $location,
 		CardService.update(card).then(function (data) {
 			$scope.status.cardEditDescription = false;
 			$scope.updateMarkdown($scope.status.edit.description);
-			var header = $('.section-header-tabbed .tabDetails');
+			var header = $('.tabDetails');
 			header.find('.save-indicator.unsaved').hide();
 			header.find('.save-indicator.saved').fadeIn(500).fadeOut(1000);
 		});

diff --git a/lib/Activity/DeckProvider.php b/lib/Activity/DeckProvider.php
@@ -276,7 +276,8 @@ private function parseParamForComment($subjectParams, $params, IEvent $event) {
 	private function parseParamForChanges($subjectParams, $params, $event) {
 		if (array_key_exists('diff', $subjectParams) && $subjectParams['diff']) {
 			$diff = new Diff();
-			$event->setMessage($subjectParams['after']);
+			// Don't add diff as message since we are limited to 255 chars here
+			//$event->setMessage($subjectParams['after']);
 			$event->setParsedMessage('<pre class="visualdiff">' . $diff->render($subjectParams['before'], $subjectParams['after']) . '</pre>');
 			return $params;
 		}

diff --git a/templates/main.php b/templates/main.php
@@ -24,7 +24,9 @@
 use OCP\Util;
 
 Util::addScript('activity', 'richObjectStringParser');
-Util::addScript('activity', 'templates');
+if (\OC_Util::getVersion()[0] > 14) {
+	Util::addScript('activity', 'templates');
+}
 Util::addScript('activity', 'script');
 
 Util::addStyle('activity', 'style');