From 897c42609b8999cb54c51c309060794038e93047 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julius=20H=C3=A4rtl?= <jus@bitgrid.net>
Date: Thu, 20 Aug 2020 16:48:24 +0200
Subject: [PATCH 1/2] Fix design, dark mode and keyboard navigation of the
 board list
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/collections.css                 |  4 --
 css/icons.scss                      | 80 +++++------------------------
 src/components/boards/BoardItem.vue |  9 +++-
 src/components/boards/Boards.vue    |  4 +-
 src/components/cards/CardItem.vue   |  6 ++-
 5 files changed, 29 insertions(+), 74 deletions(-)

diff --git a/css/collections.css b/css/collections.css
index dbbb2efd7..375bffd97 100644
--- a/css/collections.css
+++ b/css/collections.css
@@ -1,7 +1,3 @@
-.icon-deck {
-	background-image: url('../img/deck-dark.svg');
-}
-
 .resource-type-deck img {
 	opacity: 0.4 !important;
 }
diff --git a/css/icons.scss b/css/icons.scss
index af3a99736..3c9af26cf 100644
--- a/css/icons.scss
+++ b/css/icons.scss
@@ -1,81 +1,27 @@
 /**
  * Custom icons
  */
-.icon-deck {
-	background-image: url('../img/deck-dark.svg');
-}
-
-.icon-help {
-	background-image: url('../../../settings/img/help.svg');
-}
-
-.icon-add-white {
-	background-image: url('../img/add-white.svg');
-}
-
-.icon-attach {
-	background-image: url('../img/attach.svg');
-}
-
-.icon-archive {
-	background-image: url('../img/archive.svg');
-}
-
-.icon-archive-white {
-	background-image: url('../img/archive-white.svg');
-}
-
-.icon-details {
-	background-image: url('../img/details.svg');
-}
-
-.icon-details-white {
-	background-image: url('../img/details-white.svg');
-}
-
-.icon-home {
-	background-image: var(--icon-home-000, url('../../../core/img/places/home.svg'));
-}
-
-.icon-description {
-	background-image: var(--icon-text-000, url('../img/description.svg'));
-}
-
-.icon-badge {
-	background-image: url('../img/calendar-dark.svg');
-}
+@include icon-black-white('deck', 'deck', 1);
+@include icon-black-white('archive', 'deck', 1);
+@include icon-black-white('circles', 'deck', 1);
+@include icon-black-white('clone', 'deck', 1);
+@include icon-black-white('filter', 'deck', 1);
+@include icon-black-white('filter_set', 'deck', 1);
+@include icon-black-white('attach', 'deck', 1);
+@include icon-black-white('reply', 'deck', 1);
 
 .icon-toggle-compact-collapsed {
-	background-image: url('../img/toggle-view-expand.svg');
+	@include icon-color('toggle-view-expand', 'deck', $color-black);
 }
 
 .icon-toggle-compact-expanded {
-	background-image: url('../img/toggle-view-collapse.svg');
+	@include icon-color('toggle-view-collapse', 'deck', $color-black);
+}
+.icon-activity {
+	@include icon-color('activity-dark', 'activity', $color-black);
 }
 
 
-@if mixin-exists('icon-black-white') {
-	@include icon-black-white('deck', 'deck', 1);
-	@include icon-black-white('archive', 'deck', 1);
-	@include icon-black-white('circles', 'deck', 1);
-	@include icon-black-white('clone', 'deck', 1);
-	@include icon-black-white('filter', 'deck', 1);
-	@include icon-black-white('filter_set', 'deck', 1);
-	@include icon-black-white('attach', 'deck', 1);
-	@include icon-black-white('reply', 'deck', 1);
-
-	.icon-toggle-compact-collapsed {
-		@include icon-color('toggle-view-expand', 'deck', $color-black);
-	}
-
-	.icon-toggle-compact-expanded {
-		@include icon-color('toggle-view-collapse', 'deck', $color-black);
-	}
-	.icon-activity {
-		@include icon-color('activity-dark', 'activity', $color-black);
-	}
-}
-
 .avatardiv.circles {
 	background: var(--color-primary);
 }
diff --git a/src/components/boards/BoardItem.vue b/src/components/boards/BoardItem.vue
index 4efa11385..7b4eb7631 100644
--- a/src/components/boards/BoardItem.vue
+++ b/src/components/boards/BoardItem.vue
@@ -25,7 +25,7 @@
 		:title="board.title"
 		:to="routeTo"
 		class="board-list-row"
-		tag="div">
+		tag="a">
 		<div class="board-list-bullet-cell">
 			<div :style="{ 'background-color': `#${board.color}` }" class="board-list-bullet" />
 		</div>
@@ -78,6 +78,13 @@ export default {
 
 <style lang="scss" scoped>
 
+	.board-list-row {
+		&:hover, &:focus {
+			background-color: var(--color-background-hover);
+		}
+		cursor: pointer;
+	}
+
 	.board-list-bullet-cell {
 		padding: 6px 15px;
 
diff --git a/src/components/boards/Boards.vue b/src/components/boards/Boards.vue
index ade8ed8cd..c1ee3b575 100644
--- a/src/components/boards/Boards.vue
+++ b/src/components/boards/Boards.vue
@@ -79,10 +79,11 @@ export default {
 
 <style lang="scss">
 	.board-list {
+		margin-top: -44px;
 
 		.board-list-row {
 			align-items: center;
-			border-bottom: 1px solid #ededed;
+			border-bottom: 1px solid var(--color-border);
 			display: flex;
 		}
 
@@ -93,6 +94,7 @@ export default {
 
 		.board-list-header-row {
 			color: var(--color-text-lighter);
+			height: 44px;
 		}
 
 		.board-list-bullet-cell,
diff --git a/src/components/cards/CardItem.vue b/src/components/cards/CardItem.vue
index 816d173ee..5d2a47fda 100644
--- a/src/components/cards/CardItem.vue
+++ b/src/components/cards/CardItem.vue
@@ -189,11 +189,15 @@ export default {
 	.card {
 		transition: box-shadow 0.1s ease-in-out;
 		box-shadow: 0 0 2px 0 var(--color-box-shadow);
-		border-radius: 3px;
+		border-radius: var(--border-radius-large);
 		font-size: 100%;
 		background-color: var(--color-main-background);
 		margin-bottom: $card-spacing;
 
+		body.dark &, body.theme--dark & {
+			border: 2px solid var(--color-border);
+		}
+
 		&.current-card {
 			box-shadow: 0 0 5px 0 var(--color-box-shadow);
 		}

From bf2c3c557452ad184240838ff59ed650bee22da7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julius=20H=C3=A4rtl?= <jus@bitgrid.net>
Date: Fri, 21 Aug 2020 09:42:01 +0200
Subject: [PATCH 2/2] Fix sharing sidebar in dark mode
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Julius Härtl <jus@bitgrid.net>
---
 package-lock.json                          | 171 ++++++++++++++-------
 package.json                               |   2 +-
 src/components/board/SharingTabSidebar.vue |   2 +-
 3 files changed, 116 insertions(+), 59 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index d951468d5..991eaf2c1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4360,6 +4360,22 @@
 			"resolved": "https://registry.npmjs.org/@nextcloud/browserslist-config/-/browserslist-config-1.0.0.tgz",
 			"integrity": "sha512-f+sKpdLZXkODV+OY39K1M+Spmd4RgxmtEXmNn4Bviv4R7uBFHXuw+JX9ZdfDeOryfHjJ/TRQxQEp0GMpBwZFUw=="
 		},
+		"@nextcloud/capabilities": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/@nextcloud/capabilities/-/capabilities-1.0.2.tgz",
+			"integrity": "sha512-HR5vnT2GKTvoQla/WdP+V0/MD1eAGUNWCM0QXVGXQ0TCHb0AORYYMdEQafROsjNSH2kriArFnS/l3YZQrUa9yA==",
+			"requires": {
+				"@nextcloud/initial-state": "^1.1.2",
+				"core-js": "^3.6.4"
+			},
+			"dependencies": {
+				"core-js": {
+					"version": "3.6.5",
+					"resolved": "https://registry.npmjs.org/core-js/-/core-js-3.6.5.tgz",
+					"integrity": "sha512-vZVEEwZoIsI+vPEuoF9Iqf5H7/M3eeQqWlQnYa8FSKKePuYTf5MWnxb5SDAzCa60b3JBRS5g9b+Dq7b1y/RCrA=="
+				}
+			}
+		},
 		"@nextcloud/dialogs": {
 			"version": "1.4.0",
 			"resolved": "https://registry.npmjs.org/@nextcloud/dialogs/-/dialogs-1.4.0.tgz",
@@ -4738,16 +4754,6 @@
 				"@types/istanbul-lib-coverage": "*"
 			}
 		},
-		"@types/istanbul-reports": {
-			"version": "1.1.1",
-			"resolved": "https://registry.npmjs.org/@types/istanbul-reports/-/istanbul-reports-1.1.1.tgz",
-			"integrity": "sha512-UpYjBi8xefVChsCoBpKShdxTllC9pwISirfoZsUa2AAdQg/Jd2KQGtSbw+ya7GPo7x/wAPlH6JBhKhAsXUEZNA==",
-			"dev": true,
-			"requires": {
-				"@types/istanbul-lib-coverage": "*",
-				"@types/istanbul-lib-report": "*"
-			}
-		},
 		"@types/jquery": {
 			"version": "2.0.54",
 			"resolved": "https://registry.npmjs.org/@types/jquery/-/jquery-2.0.54.tgz",
@@ -6169,24 +6175,6 @@
 				"babel-types": "^6.24.1"
 			}
 		},
-		"babel-preset-current-node-syntax": {
-			"version": "0.1.2",
-			"resolved": "https://registry.npmjs.org/babel-preset-current-node-syntax/-/babel-preset-current-node-syntax-0.1.2.tgz",
-			"integrity": "sha512-u/8cS+dEiK1SFILbOC8/rUI3ml9lboKuuMvZ/4aQnQmhecQAgPw5ew066C1ObnEAUmlx7dv/s2z52psWEtLNiw==",
-			"dev": true,
-			"requires": {
-				"@babel/plugin-syntax-async-generators": "^7.8.4",
-				"@babel/plugin-syntax-bigint": "^7.8.3",
-				"@babel/plugin-syntax-class-properties": "^7.8.3",
-				"@babel/plugin-syntax-json-strings": "^7.8.3",
-				"@babel/plugin-syntax-logical-assignment-operators": "^7.8.3",
-				"@babel/plugin-syntax-nullish-coalescing-operator": "^7.8.3",
-				"@babel/plugin-syntax-numeric-separator": "^7.8.3",
-				"@babel/plugin-syntax-object-rest-spread": "^7.8.3",
-				"@babel/plugin-syntax-optional-catch-binding": "^7.8.3",
-				"@babel/plugin-syntax-optional-chaining": "^7.8.3"
-			}
-		},
 		"babel-preset-jest": {
 			"version": "26.3.0",
 			"resolved": "https://registry.npmjs.org/babel-preset-jest/-/babel-preset-jest-26.3.0.tgz",
@@ -6375,8 +6363,7 @@
 				},
 				"kind-of": {
 					"version": "6.0.2",
-					"resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.2.tgz",
-					"integrity": "sha512-s5kLOcnH0XqDO+FvuaLX8DDjZ18CGFk7VygH40QoKPUQhW4e2rvM0rwUq0t8IQDOwYSeLK01U90OjzBTme2QqA=="
+					"resolved": ""
 				}
 			}
 		},
@@ -8458,7 +8445,8 @@
 		"escape-html": {
 			"version": "1.0.3",
 			"resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
-			"integrity": "sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg="
+			"integrity": "sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg=",
+			"dev": true
 		},
 		"escape-string-regexp": {
 			"version": "1.0.5",
@@ -14959,6 +14947,11 @@
 				"uc.micro": "^1.0.1"
 			}
 		},
+		"linkifyjs": {
+			"version": "2.1.9",
+			"resolved": "https://registry.npmjs.org/linkifyjs/-/linkifyjs-2.1.9.tgz",
+			"integrity": "sha512-74ivurkK6WHvHFozVaGtQWV38FzBwSTGNmJolEgFp7QgR2bl6ArUWlvT4GcHKbPe1z3nWYi+VUdDZk16zDOVug=="
+		},
 		"load-json-file": {
 			"version": "2.0.0",
 			"resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-2.0.0.tgz",
@@ -15751,45 +15744,110 @@
 			"dev": true
 		},
 		"nextcloud-vue-collections": {
-			"version": "0.7.2",
-			"resolved": "https://registry.npmjs.org/nextcloud-vue-collections/-/nextcloud-vue-collections-0.7.2.tgz",
-			"integrity": "sha512-rPNRrj/H+mIy/ln5l9xZYqLSOorZgqS3LS6EM8+ftPvkht+ZM1c4APP4IPoYWVf46jj/51YtY1HtviF188uWEQ==",
+			"version": "0.8.1",
+			"resolved": "https://registry.npmjs.org/nextcloud-vue-collections/-/nextcloud-vue-collections-0.8.1.tgz",
+			"integrity": "sha512-60CYpaqPafxhwg29yREni4SuS5OMYrZ8/X2QU4lSfbTo7XRuYf2aXQrHCCZGMNK0lTlAEHIJMMBnPJBI+keZlw==",
 			"requires": {
-				"@nextcloud/axios": "^1.3.1",
+				"@nextcloud/axios": "^1.3.3",
 				"@nextcloud/browserslist-config": "^1.0.0",
-				"@nextcloud/router": "^1.0.0",
-				"@nextcloud/vue": "^1.3.0",
-				"lodash": "^4.17.11",
-				"vue": "^2.6.11"
+				"@nextcloud/router": "^1.1.0",
+				"@nextcloud/vue": "^2.5.0",
+				"lodash": "^4.17.20",
+				"vue": "^2.6.12"
 			},
 			"dependencies": {
-				"@nextcloud/vue": {
-					"version": "1.5.0",
-					"resolved": "https://registry.npmjs.org/@nextcloud/vue/-/vue-1.5.0.tgz",
-					"integrity": "sha512-z0KZP0PcWyHsD5zpzBJRusToGzC/1DTjapuDMrSAOSuA5lThg/Td7brmIQSwWTrw66OrL5MIRK+8HoKMWmQPAA==",
+				"@babel/polyfill": {
+					"version": "7.2.5",
+					"resolved": "https://registry.npmjs.org/@babel/polyfill/-/polyfill-7.2.5.tgz",
+					"integrity": "sha512-8Y/t3MWThtMLYr0YNC/Q76tqN1w30+b0uQMeFUYauG2UGTR19zyUtFrAzT23zNtBxPp+LbE5E/nwV/q/r3y6ug==",
 					"requires": {
-						"@nextcloud/axios": "^1.1.0",
-						"@nextcloud/l10n": "^1.1.0",
-						"@nextcloud/router": "^1.0.0",
-						"core-js": "^3.4.4",
+						"core-js": "^2.5.7",
+						"regenerator-runtime": "^0.12.0"
+					},
+					"dependencies": {
+						"core-js": {
+							"version": "2.6.11",
+							"resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.11.tgz",
+							"integrity": "sha512-5wjnpaT/3dV+XB4borEsnAYQchn00XSgTAWKDkEqv+K8KevjbzmofK6hfJ9TZIlpj2N0xQpazy7PiRQiWHqzWg=="
+						},
+						"regenerator-runtime": {
+							"version": "0.12.1",
+							"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.12.1.tgz",
+							"integrity": "sha512-odxIc1/vDlo4iZcfXqRYFj0vpXFNoGdKMAUieAlFYO6m/nl5e9KR/beGf41z4a1FI+aQgtjhuaSlDxQ0hmkrHg=="
+						}
+					}
+				},
+				"@babel/runtime": {
+					"version": "7.3.4",
+					"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.3.4.tgz",
+					"integrity": "sha512-IvfvnMdSaLBateu0jfsYIpZTxAc2cKEXEMiezGGN75QcBcecDUKd3PgLAncT0oOgxKy8dd8hrJKj9MfzgfZd6g==",
+					"requires": {
+						"regenerator-runtime": "^0.12.0"
+					},
+					"dependencies": {
+						"regenerator-runtime": {
+							"version": "0.12.1",
+							"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.12.1.tgz",
+							"integrity": "sha512-odxIc1/vDlo4iZcfXqRYFj0vpXFNoGdKMAUieAlFYO6m/nl5e9KR/beGf41z4a1FI+aQgtjhuaSlDxQ0hmkrHg=="
+						}
+					}
+				},
+				"@nextcloud/vue": {
+					"version": "2.5.0",
+					"resolved": "https://registry.npmjs.org/@nextcloud/vue/-/vue-2.5.0.tgz",
+					"integrity": "sha512-xWUM9TUW1r9MTeK9utEcEwmXb015zbHHC07UcCZeG8i6jXFkPOPgZKQzXiuEgu3dEjiA1k3jRMZOqebiZ5NQdA==",
+					"requires": {
+						"@nextcloud/auth": "^1.2.3",
+						"@nextcloud/axios": "^1.3.2",
+						"@nextcloud/capabilities": "^1.0.2",
+						"@nextcloud/dialogs": "^1.3.0",
+						"@nextcloud/event-bus": "^1.1.4",
+						"@nextcloud/l10n": "^1.2.3",
+						"@nextcloud/router": "^1.0.2",
+						"core-js": "^3.6.5",
 						"debounce": "1.2.0",
-						"escape-html": "^1.0.3",
+						"emoji-mart-vue-fast": "^7.0.4",
 						"hammerjs": "^2.0.8",
+						"linkifyjs": "~2.1.9",
 						"md5": "^2.2.1",
-						"regenerator-runtime": "^0.13.3",
-						"v-click-outside": "^3.0.0",
-						"v-tooltip": "^2.0.0-rc.33",
-						"vue": "^2.6.7",
-						"vue-color": "^2.7.0",
-						"vue-multiselect": "^2.1.3",
+						"regenerator-runtime": "^0.13.5",
+						"v-click-outside": "^3.0.1",
+						"v-tooltip": "^2.0.3",
+						"vue": "^2.6.11",
+						"vue-color": "^2.7.1",
+						"vue-multiselect": "^2.1.6",
 						"vue-visible": "^1.0.2",
-						"vue2-datepicker": "^3.3.1"
+						"vue2-datepicker": "^3.6.2"
 					}
 				},
 				"core-js": {
 					"version": "3.6.5",
 					"resolved": "https://registry.npmjs.org/core-js/-/core-js-3.6.5.tgz",
 					"integrity": "sha512-vZVEEwZoIsI+vPEuoF9Iqf5H7/M3eeQqWlQnYa8FSKKePuYTf5MWnxb5SDAzCa60b3JBRS5g9b+Dq7b1y/RCrA=="
+				},
+				"emoji-mart-vue-fast": {
+					"version": "7.0.4",
+					"resolved": "https://registry.npmjs.org/emoji-mart-vue-fast/-/emoji-mart-vue-fast-7.0.4.tgz",
+					"integrity": "sha512-VZuyclCe7ZNPhSvt7WT258MscqRBZTB2Is/7vBilCXgpiZqByaA4AhM1xdIIZZik/aA+5BQiZVmbsDK0jk78Eg==",
+					"requires": {
+						"@babel/polyfill": "7.2.5",
+						"@babel/runtime": "7.3.4",
+						"vue-virtual-scroller": "^1.0.0-rc.2"
+					}
+				},
+				"vue": {
+					"version": "2.6.12",
+					"resolved": "https://registry.npmjs.org/vue/-/vue-2.6.12.tgz",
+					"integrity": "sha512-uhmLFETqPPNyuLLbsKz6ioJ4q7AZHzD8ZVFNATNyICSZouqP2Sz0rotWQC8UNBF6VGSCs5abnKJoStA6JbCbfg=="
+				},
+				"vue2-datepicker": {
+					"version": "3.6.2",
+					"resolved": "https://registry.npmjs.org/vue2-datepicker/-/vue2-datepicker-3.6.2.tgz",
+					"integrity": "sha512-J2fCwUmCxIOPUvwQ12e8evFY9cCv6vJmgxRD9fGeUv6JeMMeLwkdpeQZOcqbMf/4mk1cSrY2/9Fr8DaB30LBpA==",
+					"requires": {
+						"date-fns": "^2.0.1",
+						"date-format-parse": "^0.2.5"
+					}
 				}
 			}
 		},
@@ -18922,8 +18980,7 @@
 				},
 				"kind-of": {
 					"version": "6.0.2",
-					"resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.2.tgz",
-					"integrity": "sha512-s5kLOcnH0XqDO+FvuaLX8DDjZ18CGFk7VygH40QoKPUQhW4e2rvM0rwUq0t8IQDOwYSeLK01U90OjzBTme2QqA=="
+					"resolved": ""
 				}
 			}
 		},
diff --git a/package.json b/package.json
index fe16ac852..fdf9f02ae 100644
--- a/package.json
+++ b/package.json
@@ -46,7 +46,7 @@
 		"markdown-it": "^11.0.0",
 		"markdown-it-task-lists": "^2.1.1",
 		"moment": "^2.27.0",
-		"nextcloud-vue-collections": "^0.7.2",
+		"nextcloud-vue-collections": "^0.8.1",
 		"p-queue": "^6.6.0",
 		"url-search-params-polyfill": "^8.1.0",
 		"vue": "^2.6.11",
diff --git a/src/components/board/SharingTabSidebar.vue b/src/components/board/SharingTabSidebar.vue
index 2948b6e51..ec9f4aed3 100644
--- a/src/components/board/SharingTabSidebar.vue
+++ b/src/components/board/SharingTabSidebar.vue
@@ -198,7 +198,7 @@ export default {
 	}
 
 	.avatardiv {
-		background-color: #f5f5f5;
+		background-color: var(--color-background-dark);
 		border-radius: 16px;
 		width: 32px;
 		height: 32px;