Use generic picture_circle class for use on avatar images through out site, add preview of picture on settings page

frontend/src/assets/scss/elementStyles.scss

@@ -38,6 +38,25 @@ b, strong {
 	font-weight: 700;
 }
 
+.picture_circle {
+	border-radius: 100%;
+	background-position: center center;
+	background-size: cover;
+	background-repeat: no-repeat;
+	position: relative;
+
+	&:after {
+		content: '';
+		position: absolute;
+		width: calc(100% - 0.25rem);
+		height: calc(100% - 0.25rem);
+		left: 0;
+		top: 0;
+		border: 0.125rem solid rgba(150,150,150,0.5);
+		border-radius: 100%;
+	}
+}
+
 .button {
 	border: 1px solid $color__gray--darker;
 	display: inline-block;

frontend/src/components/AvatarIcon.vue

@@ -4,7 +4,7 @@
 			<template v-if='ajaxUser'>
 				<div class='avatar_icon__header'>
 					<div
-						class='avatar_icon__icon avatar_icon__icon--small'
+						class='avatar_icon__icon avatar_icon__icon--small picture_circle'
 						:style='{
 							"background-color": user.color,
 							"background-image": user.picture ? "url(" + user.picture + ")" : null,
@@ -26,7 +26,7 @@
 		</template>
 		<div
 			slot='display'
-			class='avatar_icon__icon'
+			class='avatar_icon__icon picture_circle'
 			:class='{"avatar_icon__icon--small": size === "small"}'
 			:style='{ "background-color": userColor, "background-image": userPicture, }'
 			@click.stop='goToUser'
@@ -121,9 +121,6 @@
 			border-radius: 100%;
 			background-color: $color__gray--darkest;
 			color: #fff;
-			background-position: center center;
-			background-size: cover;
-			background-repeat: no-repeat;
 
 			@at-root #{&}--small {
 				height: 2.5rem;

frontend/src/components/routes/SettingsGeneral.vue

@@ -1,12 +1,12 @@
 <template>
 	<div class='route_container'>
-		<modal-window v-model='showProfilePictureModal' width='25rem' @input='hideProflePictureModal'>
+		<modal-window v-model='picture.showProfilePictureModal' width='25rem' @input='hideProflePictureModal'>
 			<div
 				class='profile_picture_modal'
-				:class='{ "profile_picture_modal--dragging": dragging  }'
+				:class='{ "profile_picture_modal--picture.dragging": picture.dragging  }'
 				@dragover='handleDragOver'
-				@drkagend='dragging = false'
-				@drkgleave='dragging = false'
+				@drkagend='picture.dragging = false'
+				@drkgleave='picture.dragging = false'
 				@drop='handleFileDrop'
 			>
 				<div class='h3'>Add a profile picture</div>
@@ -19,13 +19,13 @@
 				</p>
 				<div class='profile_picture_modal__drag_area'>
 					<span
-						v-if='!dataURL'
+						v-if='!picture.dataURL'
 						class='fa fa-cloud-upload profile_picture_modal__drag_area__icon'
-						:class='{ "profile_picture_modal__drag_area__icon--dragging": dragging }' 
+						:class='{ "profile_picture_modal__drag_area__icon--picture.dragging": picture.dragging }' 
 					></span>
 					<div
-						class='profile_picture_modal__drag_area__image'
-						:style='{ "background-image": "url(" + dataURL + ")" }'
+						class='profile_picture_modal__drag_area__image picture_circle'
+						:style='{ "background-image": "url(" + picture.dataURL + ")" }'
 						v-else
 					></div>
 				</div>
@@ -33,7 +33,7 @@
 					<button class='button button--modal button--borderless' @click='hideProflePictureModal'>Cancel</button>
 					<button
 						class='button button--modal button--green'
-						:class='{ "button--disabled": !dataURL }'
+						:class='{ "button--disabled": !picture.dataURL }'
 						@click='uploadProfilePicture'
 					>Upload picture</button>
 				</div>
@@ -65,7 +65,14 @@
 			<p class='p--condensed'>
 				This will be displayed by your posts on the site
 			</p>
-			<button class='button' @click='showProfilePictureModal = true'>Add profile picture</button>
+			<p
+				class='p--condensed profile_picture_preview picture_circle'
+				:style='{ "background-image": "url(" + picture.current + ")" }'
+				v-if='picture.current'
+			></p>
+			<button class='button' @click='picture.showProfilePictureModal = true'>
+				{{picture.current ? "Change" : "Add" }} profile picture
+			</button>
 		</p>
 	</div>
 </template>
@@ -93,9 +100,12 @@
 					error: ''
 				},
 
-				showProfilePictureModal: false,
-				dragging: false,
-				dataURL: null
+				picture: {
+					current: null,
+					showProfilePictureModal: false,
+					dragging: false,
+					dataURL: null
+				}
 			}
 		},
 		computed: {},
@@ -124,10 +134,11 @@
 
 				this.axios
 					.post('/api/v1/user/' + this.$store.state.username + '/picture', {
-						picture: this.dataURL
+						picture: this.picture.dataURL
 					})
 					.then(res => {
 						this.hideProflePictureModal()
+						this.picture.current = this.picture.dataURL
 					})
 					.catch(e => {
 						this.profilePictureModalLoading = false
@@ -137,21 +148,21 @@
 
 			},
 			hideProflePictureModal () {
-				this.showProfilePictureModal = false
+				this.picture.showProfilePictureModal = false
 				
 				//Wait for transition to complete
 				setTimeout(() => {
-					this.dataURL = null
+					this.picture.dataURL = null
 					this.profilePictureModalLoading = false
 				}, 200)
 			},	
 			handleDragOver (e) {
 				e.preventDefault()
-				this.dragging = true
+				this.picture.dragging = true
 			},
 			handleFileDrop (e) {
 				e.preventDefault()
-				this.dragging = false
+				this.picture.dragging = false
 				
 				if(e.dataTransfer && e.dataTransfer.items) {
 					let file = e.dataTransfer.items[0]
@@ -167,7 +178,7 @@
 				reader.readAsDataURL(file)
 
 				reader.addEventListener('load', () => {
-					this.dataURL = reader.result
+					this.picture.dataURL = reader.result
 				})
 			}
 		},
@@ -179,6 +190,7 @@
 					.get('/api/v1/user/' + this.$store.state.username)
 					.then(res => {
 						this.description.value = res.data.description || ''
+						this.picture.current = res.data.picture
 					})
 					.catch(e => {
 						AjaxErrorHandler(this.$store)(e)
@@ -193,11 +205,16 @@
 <style lang='scss' scoped>
 	@import '../../assets/scss/variables.scss';
 
+	.profile_picture_preview {
+		height: 5rem;
+		width: 5rem;
+	}
+
 	.profile_picture_modal {
 		padding: 1rem;
 		transition: all 0.2s;
 
-		@at-root #{&}--dragging {
+		@at-root #{&}--picture.dragging {
 			//background-color: $color__lightgray--primary;
 		}
 
@@ -213,10 +230,6 @@
 				width: 5rem;
 				height: 5rem;
 				display: inline-block;
-				background-position: center center;
-				background-size: cover;
-				background-repeat: no-repeat;
-				border-radius: 100%;
 				margin-top: -1rem;
 			}
 
@@ -225,7 +238,7 @@
 				color: $color__gray--darker;
 				transition: all 0.2s;
 
-				@at-root #{&}--dragging {
+				@at-root #{&}--picture.dragging {
 					transform: translateY(-0.5rem) scale(1.1);
 					color: $color__gray--darkest;
 				}

frontend/src/components/routes/User.vue

@@ -2,7 +2,7 @@
 	<div class='route_container user_route'>
 		<div class='user_header'>
 			<div
-				class='user_header__icon'
+				class='user_header__icon picture_circle'
 				:style='{
 					"background-color": userColor,
 					"background-image": userPicture,
@@ -126,7 +126,6 @@
 			line-height: 4rem;
 			@include text($font--role-emphasis, 3rem)
 			text-align: center;
-			border-radius: 100%;
 			background-color: $color__gray--darkest;
 			color: #fff;
 		}