From b0a98e7f12da2e6790f768a75965970c48d15b0b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bar=C4=B1=C5=9F=20Soner=20U=C5=9Fakl=C4=B1?=
 <barisusakli@gmail.com>
Date: Thu, 29 Sep 2022 12:30:54 -0400
Subject: [PATCH] breaking: move/rename change_picture_modal to core

---
 public/scss/client.scss                   |  5 ++
 public/scss/generics.scss                 |  1 -
 public/scss/modules/picture-switcher.scss | 69 +++++++++++++++++++++++
 public/src/modules/accounts/picture.js    |  2 +-
 src/meta/css.js                           |  4 +-
 src/views/modals/change-picture.tpl       | 61 ++++++++++++++++++++
 6 files changed, 137 insertions(+), 5 deletions(-)
 create mode 100644 public/scss/client.scss
 create mode 100644 public/scss/modules/picture-switcher.scss
 create mode 100644 src/views/modals/change-picture.tpl

diff --git a/public/scss/client.scss b/public/scss/client.scss
new file mode 100644
index 0000000000..8c574983ac
--- /dev/null
+++ b/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"
\ No newline at end of file
diff --git a/public/scss/generics.scss b/public/scss/generics.scss
index fb30e45420..ac5a4ff88d 100644
--- a/public/scss/generics.scss
+++ b/public/scss/generics.scss
@@ -126,7 +126,6 @@
 }
 
 .necro-post {
-	font-size: 1.5em;
 	text-align: center;
 	text-transform: uppercase;
 }
diff --git a/public/scss/modules/picture-switcher.scss b/public/scss/modules/picture-switcher.scss
new file mode 100644
index 0000000000..05572c56dd
--- /dev/null
+++ b/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;
+			}
+		}
+	}
+}
\ No newline at end of file
diff --git a/public/src/modules/accounts/picture.js b/public/src/modules/accounts/picture.js
index ff1531be8d..418d1e5e2c 100644
--- a/public/src/modules/accounts/picture.js
+++ b/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'] },
diff --git a/src/meta/css.js b/src/meta/css.js
index df84ab2d28..8a82cdbd6c 100644
--- a/src/meta/css.js
+++ b/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) {
diff --git a/src/views/modals/change-picture.tpl b/src/views/modals/change-picture.tpl
new file mode 100644
index 0000000000..af5c203306
--- /dev/null
+++ b/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 }}}
\ No newline at end of file