Merge branch 'vue' into vue-new-addressbook

9 files changed, 401 insertions, 184 deletions

diff --git a/css/details.scss b/css/ContactDetails.scss
index b55fe867..78c453a3 100644
--- a/css/details.scss
+++ b/css/ContactDetails.scss
@@ -113,21 +113,7 @@
 		}
 	}
 
-	$grid-height-unit: 40px;
-	$grid-input-padding: 7px;
-	$grid-input-margin: 3px;
 	$grid-column-width: 380px;
-	$grid-input-height-with-margin: #{$grid-height-unit - $grid-input-margin * 2};
-	
-	@mixin generate-grid-span($default-unit) {
-		/* we only supports 10 props of the same type */
-		@for $i from 1 through 10 {
-			&.grid-span-#{$i} {
-				/* default unit + title + bottom padding */
-				grid-row-start: span #{$i * $default-unit};
-			}
-		}
-	}
 
 	// contact details
 	section.contact-details {
@@ -135,55 +121,6 @@
 		/* unquote is a strange hack to avoid removal of the comma by the scss compiler */
 		grid-template-columns: repeat(auto-fit, minmax(unquote('#{$grid-column-width}'), 1fr));
 		grid-column-gap: 20px;
-		.contact-details-property {
-			@include generate-grid-span(1);
-			display: flex;
-			flex-wrap: wrap;
-			flex-direction: column;
-			position: relative;
-			width: $grid-column-width;
-			.icon-delete {
-				position: absolute;
-				top: 0;
-				right: 0;
-				width: 44px;
-				height: 44px;
-				border: 0;
-				background-color: transparent;
-				opacity: .5;
-				display: none;
-				&:hover,
-				a:active,
-				a:focus {
-					opacity: .7;
-				}
-			}
-			&:hover,
-			a:active,
-			a:focus {
-				.icon-delete {
-					display: block;
-				}
-			}
-		}
-		.contact-details-label {
-			margin: $grid-input-margin;
-			margin-left: 0;
-			display: inline-block;
-			width: 100px;
-			height: $grid-input-height-with-margin;
-			padding: $grid-input-padding 0;
-			text-align: right;
-			opacity: .5;
-			white-space: nowrap;
-			overflow: hidden;
-			overflow-x: hidden;
-			text-overflow: ellipsis;
-			vertical-align: middle;
-		}
-		.contact-details-property-row {
-			display: flex;
-			align-items: center;
-		}
+		padding: 0 20px;
 	}
 }
\ No newline at end of file
diff --git a/css/Properties/Properties.scss b/css/Properties/Properties.scss
new file mode 100644
index 00000000..d7f76afa
--- /dev/null
+++ b/css/Properties/Properties.scss
@@ -0,0 +1,107 @@
+/**
+ * @copyright Copyright (c) 2018 John Molakvoæ <skjnldsv@protonmail.com>
+ *
+ * @author John Molakvoæ <skjnldsv@protonmail.com>
+ *
+ * @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/>.
+ *
+ */
+
+.property {
+	@include generate-grid-span(1);
+	display: flex;
+	flex-wrap: wrap;
+	flex-direction: column;
+	position: relative;
+	width: $grid-column-width;
+
+	&--last {
+		margin-bottom: $grid-height-unit;
+	}
+	// no delete icon on addressbook selector
+	&--addressbooks .icon-delete {
+		display: none;
+	}
+	
+	&__delete {
+		position: absolute;
+		top: 0;
+		right: 0;
+		width: $grid-height-unit;
+		height: $grid-height-unit;
+		margin: 0;
+		border: 0;
+		background-color: transparent;
+		opacity: .5;
+		display: none;
+		&:hover,
+		a:active,
+		a:focus {
+			opacity: .7;
+		}
+	}
+	
+	&:hover &__delete,
+	a:active &__delete,
+	a:focus &__delete {
+		display: block;
+	}
+	
+	// property row
+	&__row {
+		display: flex;
+		align-items: center;
+		padding-right: 44px;
+		height: $grid-height-unit;
+		position: relative;
+	}
+	
+	// property label or multiselect within row
+	&__label,
+	&__label.multiselect {
+		margin: $grid-input-margin;
+		margin: $grid-input-margin 5px $grid-input-margin 0;
+		height: $grid-input-height-with-margin;
+		padding: $grid-input-padding 0;
+		width: 120px;
+		opacity: .7;
+		user-select: none;
+
+		&,
+		.multiselect__input::placeholder {
+			text-align: right;
+		}
+
+		&:not(.multiselect) {
+			text-overflow: ellipsis;
+			white-space: nowrap;
+			overflow: hidden;
+			overflow-x: hidden;
+		}
+
+		&.multiselect {
+			&:hover,
+			&:focus {
+				opacity: 1;
+			}
+		}
+	}
+
+	// property value within row, after label
+	&__value {
+		flex: 1 1;
+	}
+}
diff --git a/css/Properties/PropertyTitle.scss b/css/Properties/PropertyTitle.scss
new file mode 100644
index 00000000..4152de6b
--- /dev/null
+++ b/css/Properties/PropertyTitle.scss
@@ -0,0 +1,33 @@
+/**
+ * @copyright Copyright (c) 2018 John Molakvoæ <skjnldsv@protonmail.com>
+ *
+ * @author John Molakvoæ <skjnldsv@protonmail.com>
+ *
+ * @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/>.
+ *
+ */
+
+.property__title {
+	display: flex;
+	align-items: center;
+	margin: 0;
+	opacity: 0.6;
+	user-select: none;
+
+	.property__title--icon {
+		background-position: center right;
+	}
+}
\ No newline at end of file
diff --git a/css/contacts.scss b/css/contacts.scss
index d1b2da3e..bfdc8614 100644
--- a/css/contacts.scss
+++ b/css/contacts.scss
@@ -1,2 +1,48 @@
-@import 'settings';
-@import 'details';
+/**
+ * @copyright Copyright (c) 2018 John Molakvoæ <skjnldsv@protonmail.com>
+ *
+ * @author John Molakvoæ <skjnldsv@protonmail.com>
+ * @author Team Popcorn <teampopcornberlin@gmail.com>
+ *
+ * @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/>.
+ *
+ */
+ 
+$grid-height-unit: 40px;
+$grid-input-padding: 7px;
+$grid-input-margin: 3px;
+$grid-column-width: 380px;
+$grid-input-height-with-margin: #{$grid-height-unit - $grid-input-margin * 2};
+
+@mixin generate-grid-span($default-unit) {
+	// we only supports 10 props of the same type
+	@for $i from 1 through 10 {
+		&.grid-span-#{$i} {
+			// default unit + title + bottom padding
+			grid-row-start: span #{$i * $default-unit};
+		}
+	}
+}
+
+
+@import 'settings-section';
+@import 'settings/settings-addressbook';
+@import 'settings/settings-addressbook-shares';
+@import 'settings/settings-addressbook-sharee';
+@import 'ContactDetails';
+@import './Properties/Properties';
+@import './Properties/PropertyTitle';
+@import 'importScreen';
\ No newline at end of file
diff --git a/css/importScreen.scss b/css/importScreen.scss
new file mode 100644
index 00000000..c57dca90
--- /dev/null
+++ b/css/importScreen.scss
@@ -0,0 +1,37 @@
+/**
+ * @copyright Copyright (c) 2018 Team Popcorn <teampopcornberlin@gmail.com>
+ *
+ * author Team Popcorn <teampopcornberlin@gmail.com>
+ *
+ * @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-screen {
+	&__header {
+		padding-top: 20px;
+	}
+	&__progress {
+		width: 50%; 
+		position: absolute; 
+		left: 25%;
+	}
+	&__tracker {
+		padding-top: 10px; 
+		position: absolute; 
+		left: 25%;
+	}
+}
\ No newline at end of file
diff --git a/css/settings.scss b/css/settings-section.scss
index 7ad980b2..568fd999 100644
--- a/css/settings.scss
+++ b/css/settings-section.scss
@@ -2,7 +2,7 @@
  * @copyright Copyright (c) 2018 John Molakvoæ <skjnldsv@protonmail.com>
  *
  * @author John Molakvoæ <skjnldsv@protonmail.com>
- * author Team Popcorn <teampopcornberlin@gmail.com>
+ * @author Team Popcorn <teampopcornberlin@gmail.com>
  *
  * @license GNU AGPL version 3 or any later version
  *
@@ -33,123 +33,6 @@
 	display: flex;
 }
 
-// Addressbook lists
-.addressbook {
-	display: flex;
-	align-items: center;
-	white-space: nowrap;
-	text-overflow: ellipsis;
-
-	&__name {
-		display: block;
-		flex: 0 1 auto;
-		white-space: nowrap;
-		overflow: hidden;
-		text-overflow: ellipsis;
-	}
-	&__share,
-	&__menu .icon-more {
-		width: 44px;
-		height: 44px;
-		opacity: .5;
-		&:hover,
-		&:focus,
-		&:active {
-			opacity: .7;
-		}
-	}
-	&__share {
-		margin-left: auto;
-	}
-}
-
-// Addressbook sharees
-.addressbook__shares {
-	width: 100%;
-	.dropdown-menu {
-		border: 1px solid #d1d1d1;
-		border-radius: 0 0 3px 3px;
-		max-height: 200px;
-		margin-top: -2px;
-		overflow-y: auto;
-		display: flex;
-		flex-wrap: wrap;
-		background-color: #fff;
-		position: relative;
-		width: 100%;
-		z-index: 500;
-		top: -2px;
-		left: 0px;
-		li {
-			width: 100%;
-			padding: 8px 9px 9px;
-			cursor: pointer;
-		}
-		li.active {
-			background: #f0f0f0;
-		}
-	}
-	&__input {
-		width: 100% !important;
-		margin-right: 0;
-		padding-right: 30px;
-		text-overflow: ellipsis;
-	}
-	&__list {
-		margin-top: 8px;
-		margin-bottom: 12px;
-		display: flex;
-		flex-direction: column;
-	}
-}
-
-// Sharees settings for Addressbook
-.addressbook__sharee {
-	padding: 0 5px;
-	display: inline-flex;
-	align-items: center;
-	&__identifier {
-		width: 100%;
-		overflow: hidden;
-		white-space: nowrap;
-		text-overflow: ellipsis;
-		display: inline-block;
-		vertical-align: top;
-		opacity: 0.5;
-	}
-	&__utils {
-		padding: 0 !important;
-		float: right;
-		position: relative !important;
-		display: inline-flex;
-		align-items: center;
-		flex-shrink: 0;
-		height: 20px;
-		.checkbox + label {
-			padding: 0 !important;
-		}
-	}
-	
-	.icon {
-		margin-right: 5px;
-		opacity: 0.2;
-		width: 16px;
-		height: 16px;
-		display: inline-block;
-	}
-	
-	.icon-group {
-		background-image: url(/apps/contacts/img/group.svg);
-	}
-	
-	.icon-delete {
-		display: inline-block;
-		width: 24px;
-		height: 20px;
-		opacity: 0.4;
-	}
-}
-
 // Sort Contacts
 .sort-contacts {
 	.multiselect.multiselect-vue {
diff --git a/css/settings/settings-addressbook-sharee.scss b/css/settings/settings-addressbook-sharee.scss
new file mode 100644
index 00000000..878dfa13
--- /dev/null
+++ b/css/settings/settings-addressbook-sharee.scss
@@ -0,0 +1,69 @@
+/**
+ * @copyright Copyright (c) 2018 John Molakvoæ <skjnldsv@protonmail.com>
+ *
+ * @author John Molakvoæ <skjnldsv@protonmail.com>
+ * @author Team Popcorn <teampopcornberlin@gmail.com>
+ *
+ * @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/>.
+ *
+ */
+
+.addressbook__sharee {
+	padding: 0 5px;
+	display: inline-flex;
+	align-items: center;
+	width: 100%;
+	&__identifier {
+		width: 100%;
+		overflow: hidden;
+		white-space: nowrap;
+		text-overflow: ellipsis;
+		display: inline-block;
+		vertical-align: top;
+		opacity: 0.5;
+	}
+	&__utils {
+		padding: 0 !important;
+		float: right;
+		position: relative !important;
+		display: inline-flex;
+		align-items: center;
+		flex-shrink: 0;
+		height: 20px;
+		.checkbox + label {
+			padding: 0 !important;
+		}
+	}
+	
+	.icon {
+		margin-right: 5px;
+		opacity: 0.2;
+		width: 16px;
+		height: 16px;
+		display: inline-block;
+	}
+	
+	.icon-group {
+		background-image: url(/apps/contacts/img/group.svg);
+	}
+	
+	.icon-delete {
+		display: inline-block;
+		width: 24px;
+		height: 20px;
+		opacity: 0.4;
+	}
+}
\ No newline at end of file
diff --git a/css/settings/settings-addressbook-shares.scss b/css/settings/settings-addressbook-shares.scss
new file mode 100644
index 00000000..33b67410
--- /dev/null
+++ b/css/settings/settings-addressbook-shares.scss
@@ -0,0 +1,54 @@
+/**
+ * @copyright Copyright (c) 2018 John Molakvoæ <skjnldsv@protonmail.com>
+ *
+ * @author John Molakvoæ <skjnldsv@protonmail.com>
+ * @author Team Popcorn <teampopcornberlin@gmail.com>
+ *
+ * @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/>.
+ *
+ */
+
+.addressbook-shares {
+	width: 100%;
+	&__list {
+		margin-top: 8px;
+		margin-bottom: 12px;
+		display: flex;
+		flex-direction: column;
+	}
+	&__shareematch--bold {
+		font-weight: bold;
+	}
+	.multiselect.multiselect-vue {
+		width: inherit;
+
+		.multiselect__tags:focus-within, 
+		.multiselect__tags:hover {
+			border-color: var(--color-primary-element);
+		}
+
+		.multiselect__content-wrapper {
+			display: none;
+		}
+	}
+	.multiselect.showContent {
+		.multiselect__content-wrapper {
+			display: inherit;
+			background: #f0f0f0;
+			width: inherit;
+		}
+	}
+}
\ No newline at end of file
diff --git a/css/settings/settings-addressbook.scss b/css/settings/settings-addressbook.scss
new file mode 100644
index 00000000..b5d779c0
--- /dev/null
+++ b/css/settings/settings-addressbook.scss
@@ -0,0 +1,51 @@
+/**
+ * @copyright Copyright (c) 2018 John Molakvoæ <skjnldsv@protonmail.com>
+ *
+ * @author John Molakvoæ <skjnldsv@protonmail.com>
+ * @author Team Popcorn <teampopcornberlin@gmail.com>
+ *
+ * @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/>.
+ *
+ */
+
+.addressbook {
+	display: flex;
+	align-items: center;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+
+	&__name {
+		display: block;
+		flex: 0 1 auto;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+	&__share,
+	&__menu .icon-more {
+		width: 44px;
+		height: 44px;
+		opacity: .5;
+		&:hover,
+		&:focus,
+		&:active {
+			opacity: .7;
+		}
+	}
+	&__share {
+		margin-left: auto;
+	}
+}
\ No newline at end of file