Merge pull request #1265 from pixelfed/frontend-ui-refactor

Frontend ui refactor

app/Http/Controllers/Settings/LabsSettings.php

@@ -24,7 +24,8 @@ trait LabsSettings {
 		$this->validate($request, [
 			'profile_layout' => 'nullable',
 			'dark_mode'	=> 'nullable',
-			'profile_suggestions' => 'nullable'
+			'profile_suggestions' => 'nullable',
+			'moment_bg' => 'nullable'
 		]);
 
 		$changes = false;
@@ -60,6 +61,12 @@ trait LabsSettings {
 			SuggestionService::del($profile->id);
 		}
 
+		if($request->has('moment_bg') && $profile->profile_layout == 'moment') {
+			$bg = in_array($request->input('moment_bg'), $this->momentBackgrounds()) ? $request->input('moment_bg') : 'default';
+			$profile->header_bg = $bg;
+			$changes = true;
+		}
+
 		if($changes == true) {
 			$profile->save();
 		}
@@ -69,4 +76,21 @@ trait LabsSettings {
 			->cookie($cookie);
 	}
 
+	protected function momentBackgrounds()
+	{
+		return [
+			'default',
+			'azure',
+			'passion',
+			'reef',
+			'lush',
+			'neon',
+			'flare',
+			'morning',
+			'tranquil',
+			'mauve',
+			'argon',
+			'royal'
+		];
+	}
 }

app/Transformer/Api/AccountTransformer.php

@@ -26,6 +26,7 @@ class AccountTransformer extends Fractal\TransformerAbstract
 			'avatar_static' => $profile->avatarUrl(),
 			'header' => null,
 			'header_static' => null,
+			'header_bg' => $profile->header_bg,
 			'moved' => null,
 			'fields' => null,
 			'bot' => null,

public/mix-manifest.json

@@ -1,14 +1,14 @@
 {
     "/js/activity.js": "/js/activity.js?id=7915246c3bc2b7e9770e",
     "/js/app.js": "/js/app.js?id=1f05f00eec0e86f49dd4",
-    "/css/app.css": "/css/app.css?id=b407fd02a5b7526f85b4",
+    "/css/app.css": "/css/app.css?id=3a974ff74b6b5905a73c",
-    "/css/appdark.css": "/css/appdark.css?id=b4a7cf4f8dd06abe699e",
+    "/css/appdark.css": "/css/appdark.css?id=107806a000e2ca675a3c",
     "/css/landing.css": "/css/landing.css?id=d3610108213e88dc080c",
     "/js/components.js": "/js/components.js?id=25d082643150ee79150c",
     "/js/compose.js": "/js/compose.js?id=4d8c53b4575f463214f2",
     "/js/developers.js": "/js/developers.js?id=1359f11c7349301903f8",
     "/js/discover.js": "/js/discover.js?id=75fb12b06ee23fa05186",
-    "/js/profile.js": "/js/profile.js?id=b267c34e3f9168a8b307",
+    "/js/profile.js": "/js/profile.js?id=6386a007bdb1796dcc80",
     "/js/search.js": "/js/search.js?id=0d3d080dc05f4f49b204",
     "/js/status.js": "/js/status.js?id=bf48fe9060a74d1180f2",
     "/js/timeline.js": "/js/timeline.js?id=5733f9cee9d22c20a716"

resources/assets/js/components/Profile.vue

@@ -294,7 +294,7 @@
 		</div>
 
 		<div v-if="profileLayout == 'moment'">
-			<div class="w-100 h-100 mt-n3 bg-pixelfed" style="width:100%;min-height:274px;">
+			<div :class="momentBackground()" style="width:100%;min-height:274px;">
 			</div>
 			<div class="bg-white border-bottom">
 				<div class="container">
@@ -1045,6 +1045,16 @@ export default {
 					this.profile.following_count--;
 				}
 			})
+		},
+
+		momentBackground() {
+			let c = 'w-100 h-100 mt-n3 ';
+			if(this.profile.header_bg) {
+				c += this.profile.header_bg == 'default' ? 'bg-pixelfed' : 'bg-moment-' + this.profile.header_bg;
+			} else {
+				c += 'bg-pixelfed';
+			}
+			return c;
 		}
 	}
 }

resources/assets/sass/app.scss

@@ -24,3 +24,5 @@
 @import '~plyr/dist/plyr.css';
 
 @import '~vue-loading-overlay/dist/vue-loading.css';
+
+@import "moment";

resources/assets/sass/appdark.scss

@@ -66,3 +66,5 @@ textarea {
 @import '~plyr/dist/plyr.css';
 
 @import '~vue-loading-overlay/dist/vue-loading.css';
+
+@import "moment";

resources/assets/sass/moment.scss

@@ -0,0 +1,98 @@
+/* 
+	red
+*/
+.bg-moment-passion {
+	background: #e53935;
+	background: -webkit-linear-gradient(to left, #e35d5b, #e53935);
+	background: linear-gradient(to left, #e35d5b, #e53935);
+}
+
+/* 
+	teal/purple
+*/
+.bg-moment-azure {
+	background: #7F7FD5;
+	background: -webkit-linear-gradient(to left, #91EAE4, #86A8E7, #7F7FD5);
+	background: linear-gradient(to left, #91EAE4, #86A8E7, #7F7FD5);
+}
+
+/*
+	blue
+*/
+.bg-moment-reef {
+	background: #00d2ff;
+	background: -webkit-linear-gradient(to right, #3a7bd5, #00d2ff);
+	background: linear-gradient(to right, #3a7bd5, #00d2ff);
+}
+
+/*
+	lush green
+*/
+.bg-moment-lush {
+	background: #56ab2f;
+	background: -webkit-linear-gradient(to left, #a8e063, #56ab2f);
+	background: linear-gradient(to left, #a8e063, #56ab2f);
+}
+
+/*
+	neon green
+*/
+.bg-moment-neon {
+	background: #B3FFAB;
+	background: -webkit-linear-gradient(to right, #12FFF7, #B3FFAB);
+	background: linear-gradient(to right, #12FFF7, #B3FFAB);
+}
+
+/*
+	orange
+*/
+.bg-moment-flare {
+	background: #f12711;
+	background: -webkit-linear-gradient(to left, #f5af19, #f12711);
+	background: linear-gradient(to left, #f5af19, #f12711);
+}
+
+/*
+	orange/pink
+*/
+	.bg-moment-morning {
+	background: #FF5F6D;
+	background: -webkit-linear-gradient(to left, #FFC371, #FF5F6D);
+	background: linear-gradient(to left, #FFC371, #FF5F6D);
+}
+
+/*
+	pink
+*/
+.bg-moment-tranquil {
+	background: #EECDA3;
+	background: -webkit-linear-gradient(to right, #EF629F, #EECDA3);
+	background: linear-gradient(to right, #EF629F, #EECDA3);
+}
+
+/*
+	purple
+*/
+.bg-moment-mauve {
+	background: #42275a;
+	background: -webkit-linear-gradient(to left, #734b6d, #42275a);
+	background: linear-gradient(to left, #734b6d, #42275a);
+}
+
+/* 
+	purple
+*/
+.bg-moment-argon {
+	background: #03001e;
+	background: -webkit-linear-gradient(to left, #fdeff9, #ec38bc, #7303c0, #03001e);
+	background: linear-gradient(to left, #fdeff9, #ec38bc, #7303c0, #03001e);
+}
+
+/*
+	dark blue
+*/
+.bg-moment-royal {
+	background: #141E30;
+	background: -webkit-linear-gradient(to left, #243B55, #141E30);
+	background: linear-gradient(to left, #243B55, #141E30);
+}

resources/views/settings/labs.blade.php

@@ -31,6 +31,124 @@
 			</label>
 			<p class="text-muted small help-text">MomentUI offers an alternative layout for posts and your profile.</p>
 		</div>
+		@if($profile->profile_layout == 'moment')
+		<div class="form-check pb-3">
+			<label class="form-check-label font-weight-bold mb-3" for="profile_layout">
+				{{__('MomentUI Profile Header Color')}}
+			</label>
+			<div class="row">
+				<div class="col-6 col-sm-3 pb-5">
+					<div class="">
+						<p class="form-check-label">
+							<div class="bg-pixelfed rounded-circle box-shadow" style="width:60px; height:60px"></div>
+						</p>
+						<p class="mb-0 small text-muted">Default</p>
+						<input class="form-check-input mx-0 pl-0" type="radio" name="moment_bg" value="default" {{$profile->header_bg == 'default' || !$profile->header_bg ? 'checked':''}}>
+					</div>
+				</div>
+				<div class="col-6 col-sm-3 pb-5">
+					<div class="">
+						<p class="form-check-label">
+							<div class="bg-moment-azure rounded-circle box-shadow" style="width:60px; height:60px"></div>
+						</p>
+						<p class="mb-0 small text-muted">Azure</p>
+						<input class="form-check-input mx-0" type="radio" name="moment_bg" value="azure" {{$profile->header_bg == 'azure' ? 'checked':''}}>
+					</div>
+				</div>
+				<div class="col-6 col-sm-3 pb-5">
+					<div class="">
+						<p class="form-check-label">
+							<div class="bg-moment-passion rounded-circle box-shadow" style="width:60px; height:60px"></div>
+						</p>
+						<p class="mb-0 small text-muted">Passion</p>
+						<input class="form-check-input mx-0" type="radio" name="moment_bg" value="passion" {{$profile->header_bg == 'passion' ? 'checked':''}}>
+					</div>
+				</div>
+				<div class="col-6 col-sm-3 pb-5">
+					<div class="">
+						<p class="form-check-label">
+							<div class="bg-moment-reef rounded-circle box-shadow" style="width:60px; height:60px"></div>
+						</p>
+						<p class="mb-0 small text-muted">Reef</p>
+						<input class="form-check-input mx-0" type="radio" name="moment_bg" value="reef" {{$profile->header_bg == 'reef' ? 'checked':''}}>
+					</div>
+				</div>
+				<div class="col-6 col-sm-3 pb-5">
+					<div class="">
+						<p class="form-check-label">
+							<div class="bg-moment-lush rounded-circle box-shadow" style="width:60px; height:60px"></div>
+						</p>
+						<p class="mb-0 small text-muted">Lush</p>
+						<input class="form-check-input mx-0" type="radio" name="moment_bg" value="lush" {{$profile->header_bg == 'lush' ? 'checked':''}}>
+					</div>
+				</div>
+				<div class="col-6 col-sm-3 pb-5">
+					<div class="">
+						<p class="form-check-label">
+							<div class="bg-moment-neon rounded-circle box-shadow" style="width:60px; height:60px"></div>
+						</p>
+						<p class="mb-0 small text-muted">Neon</p>
+						<input class="form-check-input mx-0" type="radio" name="moment_bg" value="neon" {{$profile->header_bg == 'neon' ? 'checked':''}}>
+					</div>
+				</div>
+				<div class="col-6 col-sm-3 pb-5">
+					<div class="">
+						<p class="form-check-label">
+							<div class="bg-moment-flare rounded-circle box-shadow" style="width:60px; height:60px"></div>
+						</p>
+						<p class="mb-0 small text-muted">Flare</p>
+						<input class="form-check-input mx-0" type="radio" name="moment_bg" value="flare" {{$profile->header_bg == 'flare' ? 'checked':''}}>
+					</div>
+				</div>
+				<div class="col-6 col-sm-3 pb-5">
+					<div class="">
+						<p class="form-check-label">
+							<div class="bg-moment-morning rounded-circle box-shadow" style="width:60px; height:60px"></div>
+						</p>
+						<p class="mb-0 small text-muted">Morning</p>
+						<input class="form-check-input mx-0" type="radio" name="moment_bg" value="morning" {{$profile->header_bg == 'morning' ? 'checked':''}}>
+					</div>
+				</div>
+				<div class="col-6 col-sm-3 pb-5">
+					<div class="">
+						<p class="form-check-label">
+							<div class="bg-moment-tranquil rounded-circle box-shadow" style="width:60px; height:60px"></div>
+						</p>
+						<p class="mb-0 small text-muted">Tranquil</p>
+						<input class="form-check-input mx-0" type="radio" name="moment_bg" value="tranquil" {{$profile->header_bg == 'tranquil' ? 'checked':''}}>
+					</div>
+				</div>
+				<div class="col-6 col-sm-3 pb-5">
+					<div class="">
+						<p class="form-check-label">
+							<div class="bg-moment-mauve rounded-circle box-shadow" style="width:60px; height:60px"></div>
+						</p>
+						<p class="mb-0 small text-muted">Mauve</p>
+						<input class="form-check-input mx-0" type="radio" name="moment_bg" value="mauve" {{$profile->header_bg == 'mauve' ? 'checked':''}}>
+					</div>
+				</div>
+				<div class="col-6 col-sm-3 pb-5">
+					<div class="">
+						<p class="form-check-label">
+							<div class="bg-moment-argon rounded-circle box-shadow" style="width:60px; height:60px"></div>
+						</p>
+						<p class="mb-0 small text-muted">Argon</p>
+						<input class="form-check-input mx-0" type="radio" name="moment_bg" value="argon" {{$profile->header_bg == 'argon' ? 'checked':''}}>
+					</div>
+				</div>
+				<div class="col-6 col-sm-3 pb-5">
+					<div class="">
+						<p class="form-check-label">
+							<div class="bg-moment-royal rounded-circle box-shadow" style="width:60px; height:60px"></div>
+						</p>
+						<p class="mb-0 small text-muted">Royal</p>
+						<input class="form-check-input mx-0" type="radio" name="moment_bg" value="royal" {{$profile->header_bg == 'royal' ? 'checked':''}}>
+					</div>
+				</div>
+			</div>
+			<p class="text-muted small help-text">Set your MomentUI profile background color. Adding a custom header image will be supported in a future version.</p>
+		</div>
+		@endif
 		<div class="form-check pb-3">
 			<input class="form-check-input" type="checkbox" name="dark_mode" id="dark_mode" {{request()->hasCookie('dark-mode') ? 'checked':''}}>
 			<label class="form-check-label font-weight-bold" for="dark_mode">