initial work on preview screen and additional options for avatar management

3 files changed, 65 insertions, 38 deletions

diff --git a/css/ContactDetails.scss b/css/ContactDetails.scss
index 78c453a3..4a017529 100644
--- a/css/ContactDetails.scss
+++ b/css/ContactDetails.scss
@@ -28,44 +28,6 @@
 		display: flex;
 		font-weight: bold;
 		align-items: center;
-
-		// AVATAR
-		#contact-header-avatar {
-			position: relative;
-			height: 75px;
-			width: 75px;
-			border-radius: 50%;
-			overflow: hidden;
-			flex-shrink: 0;
-			margin: 0 22px 0 44px;
-			.contact-avatar-background {
-				background-color: var(--color-background-dark);
-				opacity: .2;
-				z-index: 0;
-			}
-			img {
-				z-index: 1;
-			}
-			label.icon-upload-white {
-				opacity: .5;
-				z-index: 2;
-				&:hover,
-				a:active,
-				a:focus {
-					opacity: .7;
-				}
-			}
-			img +  label.icon-upload-white {
-				opacity: 0;
-			}
-			.contact-avatar-background,
-			img,
-			label.icon-upload-white {
-				position: absolute;
-				width: 100%;
-				height: 100%;
-			}
-		}
 		
 		// ORG-TITLE-NAME
 		#contact-header-infos {
diff --git a/css/contact-details-avatar.scss b/css/contact-details-avatar.scss
new file mode 100644
index 00000000..07b494ba
--- /dev/null
+++ b/css/contact-details-avatar.scss
@@ -0,0 +1,64 @@
+/**
+ * @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/>.
+ *
+ */
+
+ // AVATAR
+ #contact-header-avatar {
+    position: relative;
+    height: 75px;
+    width: 75px;
+    border-radius: 50%;
+    overflow: hidden;
+    flex-shrink: 0;
+    margin: 0 22px 0 44px;
+    .contact-avatar-background {
+        background-color: var(--color-background-dark);
+        opacity: .2;
+        z-index: 0;
+    }
+    img {
+        z-index: 1;
+    }
+    label.icon-upload-white {
+        opacity: .5;
+        z-index: 2;
+        &:hover,
+        a:active,
+        a:focus {
+            opacity: .7;
+        }
+    }
+    img +  label.icon-upload-white {
+        opacity: 0;
+    }
+    .contact-avatar-background,
+    img,
+    label.icon-upload-white {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+    }
+    &__picture {
+        border-radius: 50%;
+        flex-shrink: 0;
+    }
+}
\ No newline at end of file
diff --git a/css/contacts.scss b/css/contacts.scss
index 993ed7dd..74b70e2b 100644
--- a/css/contacts.scss
+++ b/css/contacts.scss
@@ -44,6 +44,7 @@ $grid-input-height-with-margin: #{$grid-height-unit - $grid-input-margin * 2};
 @import 'settings/settings-addressbook-sharee';
 @import 'details';
 @import 'ContactDetails';
+@import 'contact-details-avatar';
 @import './Properties/Properties';
 @import './Properties/PropertyTitle';
 @import 'importScreen';
\ No newline at end of file