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

Frontend ui refactor
pull/1281/head
daniel 6 years ago committed by GitHub
commit 8f303c5fac
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -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'
];
}
}

@ -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,

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

@ -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/appdark.css": "/css/appdark.css?id=b4a7cf4f8dd06abe699e",
"/css/app.css": "/css/app.css?id=3a974ff74b6b5905a73c",
"/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"

@ -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;
}
}
}

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

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

@ -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);
}

@ -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">

Loading…
Cancel
Save