From 47fc2eb20d05c91e991c6d942d6e94dcad072ffe Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julius=20H=C3=A4rtl?= <jus@bitgrid.net>
Date: Thu, 8 Nov 2018 18:33:50 +0100
Subject: [PATCH] Fix css variable usage on Nextcloud 13
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Julius Härtl <jus@bitgrid.net>
---
 css/icons.scss          |  6 ++--
 css/style.scss          | 68 +++++++++++++++++------------------------
 templates/part.card.php |  9 ++++--
 3 files changed, 37 insertions(+), 46 deletions(-)

diff --git a/css/icons.scss b/css/icons.scss
index 3c3afcffe..0b2aa0ff6 100644
--- 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
index 462fec439..23d182454 100644
--- 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-dark, $color-grey);
 
 			&.current {
-				box-shadow: 0px 0px 7px 0px $color-darkgrey;
-				box-shadow: 0px 0px 7px 0px var(--color-background-dark);
+				box-shadow: 0px 0px 7px 0px var(--color-background-darker, $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-background-dark);
+	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-dark, $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-background-dark);
-			color: $color-darkgrey;
-			color: var(--color-text-light);
+			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-background-dark);
+			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);
 
 			}
 		}
@@ -1493,8 +1482,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;
 
diff --git a/templates/part.card.php b/templates/part.card.php
index b0fa011c9..c566b370f 100644
--- a/templates/part.card.php
+++ b/templates/part.card.php
@@ -96,12 +96,17 @@
 		<span class="save-indicator unsaved"><?php p($l->t('Unsaved changes')); ?></span>
 		<div style="flex-grow: 1;"> </div>
 		<a ng-if="params.tab === 0" href="https://github.com/nextcloud/deck/wiki/Markdown-Help" target="_blank" class="icon icon-help" data-toggle="tooltip" data-placement="left" title="<?php p($l->t('Formatting help')); ?>"><span class="hidden-visually"><?php p($l->t('Formatting help')); ?></span></a>
-		<label ng-if="params.tab === 1" for="attachment-upload" class="button icon-upload" ng-class="{'icon-loading-small': fileservice.uploader.isUploading}" data-toggle="tooltip" data-placement="left" title="<?php p($l->t('Upload attachment')); ?>"></label>
-		<input id="attachment-upload" type="file" nv-file-select="" uploader="fileservice.uploader" class="hidden" options="{cardId: cardservice.getCurrent().id}"/>
 		<input ng-if="status.cardEditDescription" type="button" ng-mousedown="status.continueEdit = true; status.selectAttachment = true;" class="icon-files-dark" data-toggle="tooltip" data-placement="left" title="<?php p($l->t('Insert attachment')); ?>"/>
 
 	</div>
 	<div class="section-content card-attachments">
+		<div>
+			<label ng-if="params.tab === 1" for="attachment-upload" class="button data-toggle="tooltip" data-placement="left" title="<?php p($l->t('Upload attachment')); ?>">
+			<span class="icon-upload" ng-class="{'icon-loading-small': fileservice.uploader.isUploading}"></span>
+			<?php p($l->t('Upload attachment')); ?>
+			</label>
+			<input id="attachment-upload" type="file" nv-file-select="" uploader="fileservice.uploader" class="hidden" options="{cardId: cardservice.getCurrent().id}"/>
+		</div>
 		<div class="error icon-error" ng-if="fileservice.status"><strong>{{ fileservice.status.error }}</strong><br />{{ fileservice.status.message }}</div>
 		<attachment-list-component ng-if="params.tab === 1 && cardservice.getCurrent() && isArray(cardservice.getCurrent().attachments)" attachments="cardservice.getCurrent().attachments"></attachment-list-component>
 	</div>