fediport/pixelfed
2
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

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

Browse source 
Frontend ui refactor
This commit is contained in:
daniel 2019-05-04 18:19:14 -06:00 committed by GitHub
parent 6e715eb0df bdf25d5fe3
commit 8f303c5fac
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
11 changed files with 263 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
app/Http/Controllers/Settings/LabsSettings.php
View file

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

1
app/Transformer/Api/AccountTransformer.php
View file

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

2
public/css/app.css vendored
View file

File diff suppressed because one or more lines are too long

2
public/css/appdark.css vendored
View file

File diff suppressed because one or more lines are too long

2
public/js/profile.js vendored
View file

File diff suppressed because one or more lines are too long

6
public/mix-manifest.json
View file

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

12
resources/assets/js/components/Profile.vue
View file

@ -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
View file

@ -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
View file

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

118
resources/views/settings/labs.blade.php
View file

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