breaking: move/rename change_picture_modal to core

public/scss/client.scss

@@ -0,0 +1,5 @@
+// core scss files shared by all themes
+@import "flags";
+@import "global";
+@import "modals";
+@import "modules/picture-switcher.scss"

public/scss/generics.scss

@@ -126,7 +126,6 @@
 }
 
 .necro-post {
-	font-size: 1.5em;
 	text-align: center;
 	text-transform: uppercase;
 }

public/scss/modules/picture-switcher.scss

@@ -0,0 +1,69 @@
+.picture-switcher {
+	img, .user-icon {
+		@include user-icon-style(46px, 2.4rem, 50%);
+	}
+
+	@include media-breakpoint-down(sm) {
+		img, .user-icon {
+			display: none;
+		}
+	}
+
+	h4 {
+		line-height: 46px;
+		margin: 0;
+	}
+
+	.modal-body .btn {
+		padding: 10px 5px;
+		font-size: 13px;
+	}
+
+	label {
+		vertical-align: top;
+		line-height: 26px;
+
+		> input[type="radio"] {
+			display: none;
+
+			&:checked {
+				+ span:before {
+					border-radius: 50%;
+					border: 2px solid $primary;
+					position: relative;
+					top: -4px;
+					left: -4px;
+				}
+			}
+
+			&[value="transparent"] {
+				&:checked + span:before {
+					padding-top: 2px;
+					padding-left: 2px;
+				}
+
+				+ span:before {
+					content: '\f05e';
+					font-family: FontAwesome;
+					color: $gray-200;
+					font-size: 28px;
+				}
+			}
+		}
+
+		span {
+			display: inline-block;
+			width: 24px;
+			height: 24px;
+			border-radius: 50%;
+			margin-right: .5em;
+
+			&:before {
+				content: '';
+				display: inline-block;
+				width: 32px;
+				height: 32px;
+			}
+		}
+	}
+}

public/src/modules/accounts/picture.js

@@ -21,7 +21,7 @@ define('accounts/picture', [
 				return memo || cur.type === 'uploaded';
 			}, false);
 
-			app.parseAndTranslate('partials/modals/change_picture_modal', {
+			app.parseAndTranslate('modals/change-picture', {
 				pictures: pictures,
 				uploaded: uploaded,
 				icon: { text: ajaxify.data['icon:text'], bgColor: ajaxify.data['icon:bgColor'] },

src/meta/css.js

@@ -35,9 +35,7 @@ const buildImports = {
 			'@import "jquery-ui";',
 			'@import "@adactive/bootstrap-tagsinput/src/bootstrap-tagsinput";',
 			'@import "cropperjs/dist/cropper";',
-			'@import "flags";',
-			'@import "global";',
-			'@import "modals";',
+			'@import "client";',
 		].join('\n');
 	},
 	admin: function (source) {

src/views/modals/change-picture.tpl

@@ -0,0 +1,61 @@
+<div class="row">
+	<div class="col-6 col-sm-8 col-md-6">
+		<div class="list-group">
+			{{{each pictures}}}
+			<button type="button" class="list-group-item d-flex p-3" data-type="{pictures.type}">
+				<div class="flex-shrink-0">
+					{buildAvatar(pictures, "48px", true)}
+				</div>
+				<div class="flex-grow-1 ms-3 align-self-center fs-5 text-start">
+					{pictures.username}
+				</div>
+			</button>
+			{{{end}}}
+		</div>
+	</div>
+	<div class="col-6 col-sm-4 col-md-6">
+		<div class="list-group">
+			<!-- IF allowProfileImageUploads -->
+			<button type="button" class="list-group-item" data-action="upload">
+				<span class="hidden-xs hidden-sm">
+					[[user:upload_new_picture]]
+				</span>
+				<span class="visible-xs-inline visible-sm-inline">
+					<i class="fa fa-plus"></i>
+					<i class="fa fa-upload"></i>
+				</span>
+			</button>
+			<!-- ENDIF allowProfileImageUploads -->
+			<button type="button" class="list-group-item" data-action="upload-url">
+				<span class="hidden-xs hidden-sm">
+					[[user:upload_new_picture_from_url]]
+				</span>
+				<span class="visible-xs-inline visible-sm-inline">
+					<i class="fa fa-plus"></i>
+					<i class="fa fa-link"></i>
+				</span>
+			</button>
+			<!-- IF uploaded -->
+			<button type="button" class="list-group-item" data-action="remove-uploaded">
+				<span class="hidden-xs hidden-sm">
+					[[user:remove_uploaded_picture]]
+				</span>
+				<span class="visible-xs-inline visible-sm-inline">
+					<i class="fa fa-picture-o"></i>
+					<i class="fa fa-long-arrow-right"></i>
+					<i class="fa fa-trash-o"></i>
+				</span>
+			</button>
+			<!-- ENDIF uploaded -->
+		</div>
+	</div>
+</div>
+
+<hr />
+
+<h4>[[user:avatar-background-colour]]</h4>
+
+<label><input type="radio" name="icon:bgColor" value="transparent" /><span></span></label>
+{{{ each iconBackgrounds }}}
+<label><input type="radio" name="icon:bgColor" value="{@value}" /><span style="background-color: {@value};"></span></label>
+{{{ end }}}