updated change picture modal to allow plugins

less/account.less

@@ -183,3 +183,14 @@
 		width:100px;
 	}
 }
+
+.picture-switcher {
+	img, .user-icon {
+		.user-icon-style(46px, 2.4rem, 50%);
+	}
+
+	h4 {
+		line-height: 46px;
+		margin: 0;
+	}
+}

templates/partials/modals/change_picture_modal.tpl

@@ -1,36 +1,38 @@
-	<div id="change-picture-modal" class="modal" tabindex="-1" role="dialog" aria-labelledby="change-picture" aria-hidden="true">
-		<div class="modal-dialog">
-			<div class="modal-content">
-				<div class="modal-header">
-					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
-					<h3 id="change-picture">[[user:change_picture]]</h3>
-				</div>
-				<div class="modal-body">
-					<div id="default-box">
-						<div class="user-icon user-profile-picture"></div>
-						<span class="user-picture-label">[[user:default_picture]]</span>
-						<i class='fa fa-check fa-2x'></i>
-					</div>
-					<br/>
-
-					<!-- IF config.allowProfileImageUploads -->
-					<div id="uploaded-box">
-						<img id="user-uploaded-picture" src="" class="user-profile-picture">
-						<span class="user-picture-label">[[user:uploaded_picture]]</span>
-						<i class='fa fa-check fa-2x'></i>
-					</div>
-
-					<a id="uploadPictureBtn" href="#">[[user:upload_new_picture]]</a> <br/>
-					<!-- IF config.hasImageUploadPlugin -->
-					<a id="uploadFromUrlBtn" href="#">[[user:upload_new_picture_from_url]]</a> <br/>
-					<!-- ENDIF config.hasImageUploadPlugin -->
-					<a id="removeUploadedPictureBtn" href="#" class="<!-- IF !uploadedpicture -->hide<!-- ENDIF !uploadedpicture -->">[[user:remove_uploaded_picture]]</a>
-					<!-- ENDIF config.allowProfileImageUploads -->
-				</div>
-				<div class="modal-footer">
-					<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">[[global:close]]</button>
-					<button id="savePictureChangesBtn" class="btn btn-primary">[[global:save_changes]]</button>
-				</div>
-			</div>
+<div class="list-group media">
+	<button type="button" class="list-group-item" data-type="default">
+		<div class="media-left">
+			<div class="user-icon media-object"></div>
+		</div>
+		<div class="media-body">
+			<h4 class="media-heading">[[user:default_picture]]</h4>
+		</div>
+	</button>
+	<!-- BEGIN pictures -->
+	<button type="button" class="list-group-item" data-type="{pictures.type}">
+		<div class="media-left">
+			<img class="media-object" src="{pictures.url}" title="{pictures.text}" />
 		</div>
+		<div class="media-body">
+			<h4 class="media-heading">{pictures.text}</h4>
+		</div>
+	</button>
+	<!-- END pictures -->
+</div>
+
+<div class="btn-group btn-group-justified" role="group">
+	<!-- IF config.allowProfileImageUploads -->
+	<div class="btn-group" role="group">
+		<button type="button" class="btn btn-default" data-action="upload">[[user:upload_new_picture]]</button>
+	</div>
+	<!-- ENDIF config.allowProfileImageUploads -->
+	<!-- IF config.hasImageUploadPlugin -->
+	<div class="btn-group" role="group">
+		<button type="button" class="btn btn-default" data-action="upload-url">[[user:upload_new_picture_from_url]]</button>
+	</div>
+	<!-- ENDIF config.hasImageUploadPlugin -->
+	<!-- IF uploaded -->
+	<div class="btn-group" role="group">
+		<button type="button" class="btn btn-default" data-action="remove-uploaded">[[user:remove_uploaded_picture]]</button>
 	</div>
+	<!-- ENDIF uploaded -->
+</div>