Add info for social prop

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>

5 files changed, 82 insertions, 2 deletions

diff --git a/css/Properties/Properties.scss b/css/Properties/Properties.scss
index d79fb758..ba108c53 100644
--- a/css/Properties/Properties.scss
+++ b/css/Properties/Properties.scss
@@ -79,6 +79,7 @@
 		width: 120px;
 		opacity: .7;
 		user-select: none;
+		background-size: 16px;
 
 		&,
 		.multiselect__input::placeholder {
diff --git a/css/contacts.scss b/css/contacts.scss
index 50016148..37d73802 100644
--- a/css/contacts.scss
+++ b/css/contacts.scss
@@ -49,3 +49,4 @@ $grid-input-height-with-margin: #{$grid-height-unit - $grid-input-margin * 2};
 @import 'Properties/PropertyTitle';
 @import 'importScreen';
 @import 'animations';
+@import 'icons';
diff --git a/css/icons.scss b/css/icons.scss
new file mode 100644
index 00000000..1c82c4da
--- /dev/null
+++ b/css/icons.scss
@@ -0,0 +1,25 @@
+/**
+ * @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/>.
+ *
+ */
+
+.icon-social {
+	@include icon-color('social', 'contacts', $color-black, 1);
+}
\ No newline at end of file
diff --git a/img/social.svg b/img/social.svg
new file mode 100644
index 00000000..55463165
--- /dev/null
+++ b/img/social.svg
@@ -0,0 +1,47 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   viewBox="0 0 16 16"
+   xml:space="preserve"
+   id="svg13"
+   sodipodi:docname="social2.svg"
+   width="16"
+   height="16"
+   inkscape:version="0.92.2 2405546, 2018-03-11"><metadata
+     id="metadata19"><rdf:RDF><cc:Work
+         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
+     id="defs17" /><sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1880"
+     inkscape:window-height="993"
+     id="namedview15"
+     showgrid="false"
+     inkscape:zoom="27.812867"
+     inkscape:cx="13.066729"
+     inkscape:cy="10.41647"
+     inkscape:window-x="20"
+     inkscape:window-y="67"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="g10" /><g
+     id="Icons"
+     transform="matrix(0.45670338,0,0,0.45670338,-2.9608834,-2.9606307)"><g
+       id="g10"><path
+         style="fill:#000000;stroke-width:0.47350845"
+         d="M 4.8300781 1.734375 C 3.8235126 1.734375 2.8175141 2.1160792 2.0546875 2.8789062 C 1.2877789 3.641733 0.90820312 4.6486619 0.90820312 5.65625 C 0.90820312 6.6597566 1.2877837 7.6727202 2.0546875 8.4355469 L 2.4453125 8.828125 L 7.7988281 14.181641 C 7.9102163 14.293029 8.0937284 14.293071 8.2050781 14.181641 L 13.554688 8.828125 L 13.949219 8.4355469 C 14.712046 7.6727202 15.091797 6.6597566 15.091797 5.65625 C 15.091797 4.6486669 14.712046 3.641733 13.949219 2.8789062 C 12.995685 1.9253726 11.662036 1.5682572 10.421875 1.8066406 C 9.6777782 1.9496705 8.9662291 2.3067857 8.3925781 2.8789062 L 8.0019531 3.2753906 L 7.6074219 2.8789062 C 6.8445948 2.1160792 5.8366432 1.734375 4.8300781 1.734375 z M 4.8144531 2.8378906 A 0.15986216 0.15986216 0 0 1 4.8300781 2.8378906 A 0.15986216 0.15986216 0 0 1 4.8632812 3.1542969 C 4.2926852 3.2640642 3.7495598 3.5375536 3.3105469 3.9765625 C 2.986103 4.2992801 2.752042 4.6786752 2.6074219 5.0839844 A 0.15986216 0.15986216 0 1 1 2.3066406 4.9765625 C 2.4666969 4.5279916 2.7251178 4.1069575 3.0839844 3.75 C 3.5693112 3.2646782 4.1721097 2.9611588 4.8027344 2.8398438 A 0.15986216 0.15986216 0 0 1 4.8144531 2.8378906 z M 2.2695312 5.9453125 A 0.15986216 0.15986216 0 0 1 2.4316406 6.1074219 C 2.4316406 6.2970045 2.4490125 6.4864546 2.484375 6.6738281 A 0.15986216 0.15986216 0 1 1 2.1699219 6.734375 C 2.1308527 6.5273486 2.1113281 6.3168332 2.1113281 6.1074219 A 0.15986216 0.15986216 0 0 1 2.2695312 5.9453125 z "
+         transform="matrix(2.189605,0,0,2.189605,6.4831651,6.4826118)"
+         id="path2" /></g></g></svg>
\ No newline at end of file
diff --git a/src/models/rfcProps.js b/src/models/rfcProps.js
index 30745eeb..fd766946 100644
--- a/src/models/rfcProps.js
+++ b/src/models/rfcProps.js
@@ -170,13 +170,19 @@ const properties = {
 			{ id: 'WORK,PAGER', name: t('contacts', 'Work pager') }
 		]
 	},
-	'X-SOCIALPROFILE': {
+	'x-socialprofile': {
 		multiple: true,
+		force: 'text',
+		icon: 'icon-social',
 		readableName: t('contacts', 'Social network'),
 		defaultValue: {
-			value: [''],
+			value: '',
 			type: ['facebook']
 		},
+		info: t(
+			'contacts',
+			'The url of the profile. e.g. https://www.facebook.com/Nextclouders/ '
+		),
 		options: [
 			{ id: 'FACEBOOK', name: 'Facebook' },
 			{ id: 'GITHUB', name: 'GitHub' },