From 138ce38a5e3673ff4c458aad4a6be39f4e28649d Mon Sep 17 00:00:00 2001 From: Daniel Supernault Date: Sat, 4 May 2019 18:14:59 -0600 Subject: [PATCH 1/4] Update AccountTransformer --- app/Transformer/Api/AccountTransformer.php | 1 + 1 file changed, 1 insertion(+) diff --git a/app/Transformer/Api/AccountTransformer.php b/app/Transformer/Api/AccountTransformer.php index dff080a5d..3e1b6d34b 100644 --- a/app/Transformer/Api/AccountTransformer.php +++ b/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, From 0afd048c133459b9f53ddb8d8322ee9ecfbe79dd Mon Sep 17 00:00:00 2001 From: Daniel Supernault Date: Sat, 4 May 2019 18:15:34 -0600 Subject: [PATCH 2/4] Update LabsSettings controller --- .../Controllers/Settings/LabsSettings.php | 26 ++++++++++++++++++- 1 file changed, 25 insertions(+), 1 deletion(-) diff --git a/app/Http/Controllers/Settings/LabsSettings.php b/app/Http/Controllers/Settings/LabsSettings.php index 8d6187fda..1d783e2f7 100644 --- a/app/Http/Controllers/Settings/LabsSettings.php +++ b/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' + ]; + } } \ No newline at end of file From 493ab2f7a3fcd640ac948058863d3631b1def4e8 Mon Sep 17 00:00:00 2001 From: Daniel Supernault Date: Sat, 4 May 2019 18:17:28 -0600 Subject: [PATCH 3/4] Add custom header backgrounds to MomentUI profiles --- resources/assets/js/components/Profile.vue | 12 ++- resources/assets/sass/app.scss | 2 + resources/assets/sass/appdark.scss | 2 + resources/assets/sass/moment.scss | 98 +++++++++++++++++ resources/views/settings/labs.blade.php | 118 +++++++++++++++++++++ 5 files changed, 231 insertions(+), 1 deletion(-) create mode 100644 resources/assets/sass/moment.scss diff --git a/resources/assets/js/components/Profile.vue b/resources/assets/js/components/Profile.vue index be2884baf..21d9f650d 100644 --- a/resources/assets/js/components/Profile.vue +++ b/resources/assets/js/components/Profile.vue @@ -294,7 +294,7 @@
-
+
@@ -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; } } } diff --git a/resources/assets/sass/app.scss b/resources/assets/sass/app.scss index 179a956ce..2ead5cc68 100644 --- a/resources/assets/sass/app.scss +++ b/resources/assets/sass/app.scss @@ -24,3 +24,5 @@ @import '~plyr/dist/plyr.css'; @import '~vue-loading-overlay/dist/vue-loading.css'; + +@import "moment"; diff --git a/resources/assets/sass/appdark.scss b/resources/assets/sass/appdark.scss index a8bcbae68..34e83e884 100644 --- a/resources/assets/sass/appdark.scss +++ b/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"; diff --git a/resources/assets/sass/moment.scss b/resources/assets/sass/moment.scss new file mode 100644 index 000000000..0d642d1f7 --- /dev/null +++ b/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); +} \ No newline at end of file diff --git a/resources/views/settings/labs.blade.php b/resources/views/settings/labs.blade.php index c7dcae813..2b8d47215 100644 --- a/resources/views/settings/labs.blade.php +++ b/resources/views/settings/labs.blade.php @@ -31,6 +31,124 @@

MomentUI offers an alternative layout for posts and your profile.

+ @if($profile->profile_layout == 'moment') +
+ +
+
+
+

+

+

+

Default

+ header_bg == 'default' || !$profile->header_bg ? 'checked':''}}> +
+
+
+
+

+

+

+

Azure

+ header_bg == 'azure' ? 'checked':''}}> +
+
+
+
+

+

+

+

Passion

+ header_bg == 'passion' ? 'checked':''}}> +
+
+
+
+

+

+

+

Reef

+ header_bg == 'reef' ? 'checked':''}}> +
+
+
+
+

+

+

+

Lush

+ header_bg == 'lush' ? 'checked':''}}> +
+
+
+
+

+

+

+

Neon

+ header_bg == 'neon' ? 'checked':''}}> +
+
+
+
+

+

+

+

Flare

+ header_bg == 'flare' ? 'checked':''}}> +
+
+
+
+

+

+

+

Morning

+ header_bg == 'morning' ? 'checked':''}}> +
+
+
+
+

+

+

+

Tranquil

+ header_bg == 'tranquil' ? 'checked':''}}> +
+
+
+
+

+

+

+

Mauve

+ header_bg == 'mauve' ? 'checked':''}}> +
+
+
+
+

+

+

+

Argon

+ header_bg == 'argon' ? 'checked':''}}> +
+
+
+
+

+

+

+

Royal

+ header_bg == 'royal' ? 'checked':''}}> +
+
+
+

Set your MomentUI profile background color. Adding a custom header image will be supported in a future version.

+
+ @endif
hasCookie('dark-mode') ? 'checked':''}}>