mirror of
https://github.com/pixelfed/pixelfed.git
synced 2024-11-22 06:21:27 +00:00
Merge pull request #1265 from pixelfed/frontend-ui-refactor
Frontend ui refactor
This commit is contained in:
daniel
GitHub
commit
8f303c5fac
11 changed files with 257 additions and 2 deletions
|
|
@ -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,
|
||||
|
|
|
|||
BIN
public/css/app.css
vendored
BIN
public/css/app.css
vendored
Binary file not shown.
BIN
public/css/appdark.css
vendored
BIN
public/css/appdark.css
vendored
Binary file not shown.
BIN
public/js/profile.js
vendored
BIN
public/js/profile.js
vendored
Binary file not shown.
Binary file not shown.
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
2
resources/assets/sass/app.scss
vendored
2
resources/assets/sass/app.scss
vendored
|
|
@ -24,3 +24,5 @@
|
|||
@import '~plyr/dist/plyr.css';
|
||||
|
||||
@import '~vue-loading-overlay/dist/vue-loading.css';
|
||||
|
||||
@import "moment";
|
||||
|
|
|
|||
2
resources/assets/sass/appdark.scss
vendored
2
resources/assets/sass/appdark.scss
vendored
|
|
@ -66,3 +66,5 @@ textarea {
|
|||
@import '~plyr/dist/plyr.css';
|
||||
|
||||
@import '~vue-loading-overlay/dist/vue-loading.css';
|
||||
|
||||
@import "moment";
|
||||
|
|
|
|||
98
resources/assets/sass/moment.scss
vendored
Normal file
98
resources/assets/sass/moment.scss
vendored
Normal file
|
|
@ -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…
Reference in a new issue