Skip to content

Commit 5f37506

Browse files
joedixonjoedixon
authored
Migrate the settings page to Tailwind UI and Blade UI Kit (#570)
* Move edit password page * Add new form components * wip * Wire up settings page * Add account removal * Fix tests * Apply fixes from StyleCI * Remove sidebar * Add Twitter handle * Apply fixes from StyleCI * Convert to anonymous components * Comment unused components * Update formatting * Update component attributes * Enable components
1 parent 70ed339 commit 5f37506

File tree

20 files changed

+411
-172
lines changed

20 files changed

+411
-172
lines changed

‎app/Http/Controllers/Settings/PasswordController.php‎

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -15,17 +15,12 @@ public function __construct()
1515
$this->middleware(Authenticate::class);
1616
}
1717

18-
public function edit()
19-
{
20-
return view('users.settings.password');
21-
}
22-
2318
public function update(UpdatePasswordRequest $request)
2419
{
2520
$this->dispatchNow(new UpdatePassword(Auth::user(), $request->newPassword()));
2621

2722
$this->success('settings.password.updated');
2823

29-
return redirect()->route('settings.password');
24+
return redirect()->route('settings.profile');
3025
}
3126
}

‎app/Http/Controllers/Settings/ProfileController.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ public function __construct()
2020

2121
public function edit()
2222
{
23-
return view('users.settings.profile');
23+
return view('users.settings.settings');
2424
}
2525

2626
public function update(UpdateProfileRequest $request)

‎config/blade-ui-kit.php‎

Lines changed: 125 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,125 @@
1+
<?php
2+
3+
use BladeUIKit\Components;
4+
5+
return [
6+
7+
/*
8+
|--------------------------------------------------------------------------
9+
| Components
10+
|--------------------------------------------------------------------------
11+
|
12+
| Below you reference all components that should be loaded for your app.
13+
| By default all components from Blade UI Kit are loaded in. You can
14+
| disable or overwrite any component class or alias that you want.
15+
|
16+
*/
17+
18+
'components' => [
19+
// 'alert' => Components\Alerts\Alert::class,
20+
'avatar' => Components\Support\Avatar::class,
21+
// 'carbon' => Components\DateTime\Carbon::class,
22+
// 'checkbox' => Components\Forms\Inputs\Checkbox::class,
23+
// 'color-picker' => Components\Forms\Inputs\ColorPicker::class,
24+
// 'countdown' => Components\DateTime\Countdown::class,
25+
// 'cron' => Components\Support\Cron::class,
26+
// 'dropdown' => Components\Navigation\Dropdown::class,
27+
// 'easy-mde' => Components\Editors\EasyMDE::class,
28+
'email' => Components\Forms\Inputs\Email::class,
29+
// 'error' => Components\Forms\Error::class,
30+
'form' => Components\Forms\Form::class,
31+
// 'form-button' => Components\Buttons\FormButton::class,
32+
// 'html' => Components\Layouts\Html::class,
33+
'input' => Components\Forms\Inputs\Input::class,
34+
'label' => Components\Forms\Label::class,
35+
// 'logout' => Components\Buttons\Logout::class,
36+
// 'mapbox' => Components\Maps\Mapbox::class,
37+
// 'markdown' => Components\Markdown\Markdown::class,
38+
'password' => Components\Forms\Inputs\Password::class,
39+
// 'pikaday' => Components\Forms\Inputs\Pikaday::class,
40+
// 'social-meta' => Components\Layouts\SocialMeta::class,
41+
'textarea' => Components\Forms\Inputs\Textarea::class,
42+
// 'toc' => Components\Markdown\ToC::class,
43+
// 'trix' => Components\Editors\Trix::class,
44+
// 'unsplash' => Components\Support\Unsplash::class,
45+
],
46+
47+
/*
48+
|--------------------------------------------------------------------------
49+
| Livewire Components
50+
|--------------------------------------------------------------------------
51+
|
52+
| Below you reference all the Livewire components that should be loaded
53+
| for your app. By default all components from Blade UI Kit are loaded in.
54+
|
55+
*/
56+
57+
'livewire' => [
58+
//
59+
],
60+
61+
/*
62+
|--------------------------------------------------------------------------
63+
| Components Prefix
64+
|--------------------------------------------------------------------------
65+
|
66+
| This value will set a prefix for all Blade UI Kit components.
67+
| By default it's empty. This is useful if you want to avoid
68+
| collision with components from other libraries.
69+
|
70+
| If set with "buk", for example, you can reference components like:
71+
|
72+
| <x-buk-easy-mde />
73+
|
74+
*/
75+
76+
'prefix' => '',
77+
78+
/*
79+
|--------------------------------------------------------------------------
80+
| Third Party Asset Libraries
81+
|--------------------------------------------------------------------------
82+
|
83+
| These settings hold reference to all third party libraries and their
84+
| asset files served through a CDN. Individual components can require
85+
| these asset files through their static `$assets` property.
86+
|
87+
*/
88+
89+
'assets' => [
90+
91+
'alpine' => 'https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.3.5/dist/alpine.min.js',
92+
93+
'easy-mde' => [
94+
'https://unpkg.com/easymde/dist/easymde.min.css',
95+
'https://unpkg.com/easymde/dist/easymde.min.js',
96+
],
97+
98+
'mapbox' => [
99+
'https://api.mapbox.com/mapbox-gl-js/v1.8.1/mapbox-gl.css',
100+
'https://api.mapbox.com/mapbox-gl-js/v1.8.1/mapbox-gl.js',
101+
],
102+
103+
'moment' => [
104+
'https://cdn.jsdelivr.net/npm/moment@2.26.0/moment.min.js',
105+
'https://cdn.jsdelivr.net/npm/moment-timezone@0.5.31/builds/moment-timezone-with-data.min.js',
106+
],
107+
108+
'pickr' => [
109+
'https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/themes/classic.min.css',
110+
'https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/pickr.min.js',
111+
],
112+
113+
'pikaday' => [
114+
'https://cdn.jsdelivr.net/npm/pikaday/css/pikaday.css',
115+
'https://cdn.jsdelivr.net/npm/pikaday/pikaday.js',
116+
],
117+
118+
'trix' => [
119+
'https://unpkg.com/trix@1.2.3/dist/trix.css',
120+
'https://unpkg.com/trix@1.2.3/dist/trix.js',
121+
],
122+
123+
],
124+
125+
];

‎resources/css/forms.css‎

Lines changed: 31 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,104 +1,104 @@
1-
.form-group {
1+
.standard .form-group {
22
@apply flex flex-col mb-4;
33
}
44

5-
label {
5+
.standard label {
66
@apply mb-1 text-gray-600 block uppercase text-sm;
77
}
88

9-
input[type='text'],
10-
input[type='password'],
11-
input[type='email'],
12-
select {
9+
.standard input[type='text'],
10+
.standard input[type='password'],
11+
.standard input[type='email'],
12+
.standard select {
1313
@apply h-12;
1414
}
1515

16-
input[type='text'],
17-
input[type='password'],
18-
input[type='email'],
19-
textarea,
20-
select {
16+
.standard input[type='text'],
17+
.standard input[type='password'],
18+
.standard input[type='email'],
19+
.standard textarea,
20+
.standard select {
2121
@apply rounded border-2 p-3 w-full;
2222
}
2323

24-
select {
24+
.standard select {
2525
@apply appearance-none;
2626
}
2727

28-
input.nav-search {
28+
.standard input.nav-search {
2929
@apply pl-10 pr-3 py-2;
3030
}
3131

32-
input[type='checkbox'] {
32+
.standard input[type='checkbox'] {
3333
@apply mr-1;
3434
}
3535

36-
.help-block {
36+
.standard .help-block {
3737
@apply text-red-500 text-sm;
3838
}
3939

4040
/** Markdown editor **/
41-
.form-group .editor {
41+
.standard .form-group .editor {
4242
@apply rounded-t-none;
4343
}
4444

45-
.form-group .editor-toolbar {
45+
.standard .form-group .editor-toolbar {
4646
@apply border-2 border-b-0 rounded rounded-b-none border-gray-300;
4747
}
4848

49-
.form-group .CodeMirror {
49+
.standard .form-group .CodeMirror {
5050
@apply border-2 rounded rounded-t-none border-gray-300;
5151
}
5252

5353
/** Choices.js **/
54-
.choices__input.choices__input--cloned {
54+
.standard .choices__input.choices__input--cloned {
5555
@apply hidden;
5656
}
5757

58-
.choices__inner {
58+
.standard .choices__inner {
5959
@apply rounded border-2 border-gray-300 w-full bg-white h-12 p-2 flex items-center !important;
6060
}
6161

62-
.choices__list--dropdown {
62+
.standard .choices__list--dropdown {
6363
@apply border-2 border-gray-300 !important;
6464
}
6565

66-
.choices__list--single {
66+
.standard .choices__list--single {
6767
@apply p-0 !important;
6868
}
6969

70-
.choices__item {
70+
.standard .choices__item {
7171
@apply text-sm bg-gray-200 text-gray-700 cursor-pointer rounded px-2 py-1 my-0 border-0 !important;
7272
}
7373

74-
.choices__item.choices__item--choice {
74+
.standard .choices__item.choices__item--choice {
7575
@apply rounded-none py-2 !important;
7676
}
7777

78-
.choices__item.choices__item--choice.choices__item--selectable {
78+
.standard .choices__item.choices__item--choice.choices__item--selectable {
7979
@apply bg-white rounded-none text-gray-700 p-2 !important;
8080
}
8181

82-
.choices__item.choices__item--choice.choices__item--selectable:hover {
82+
.standard .choices__item.choices__item--choice.choices__item--selectable:hover {
8383
@apply bg-gray-200 !important;
8484
}
8585

86-
.choices__item.choices__item--selectable {
86+
.standard .choices__item.choices__item--selectable {
8787
@apply bg-lio-500 border-lio-500 text-white !important;
8888
}
8989

90-
.choices__list--single > .choices__item.choices__item--selectable {
90+
.standard .choices__list--single > .choices__item.choices__item--selectable {
9191
@apply bg-white text-gray-700 !important;
9292
}
9393

94-
.choices__item.is-highlighted {
94+
.standard .choices__item.is-highlighted {
9595
@apply bg-lio-600 border-lio-600 text-white !important;
9696
}
9797

98-
.choices[data-type*='select-one']:after {
98+
.standard .choices[data-type*='select-one']:after {
9999
border-color: theme('colors.gray.500') transparent transparent transparent !important;
100100
}
101101

102-
.choices[data-type*='select-one'] .choices__input {
102+
.standard .choices[data-type*='select-one'] .choices__input {
103103
@apply rounded-none border-b-2 border-gray-300 !important;
104104
}

‎resources/helpers.php‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,16 @@ function active($routes, bool $condition = true): string
1010
}
1111
}
1212

13+
if (! function_exists('is_active')) {
14+
/**
15+
* Determines if the given routes are active.
16+
*/
17+
function is_active($routes): string
18+
{
19+
return call_user_func_array([app('router'), 'is'], (array) $routes);
20+
}
21+
}
22+
1323
if (! function_exists('md_to_html')) {
1424
/**
1525
* Convert Markdown to HTML.

‎resources/views/components/buttons/danger-button.blade.php‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
@props(['type' => 'button'])
2+
3+
<span class="inline-flex rounded-md shadow-sm">
4+
<button type="{{ $type }}" class="bg-red-600 border border-transparent rounded-md py-2 px-4 inline-flex justify-center text-sm leading-5 font-medium text-white hover:bg-red-700 focus:outline-none focus:border-red-900 focus:shadow-outline-red active:bg-red-900 transition duration-150 ease-in-out" {{ $attributes }}>
5+
{{ $slot }}
6+
</button>
7+
</span>

‎resources/views/components/buttons/primary-button.blade.php‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
@props(['type' => 'button'])
2+
3+
<span class="inline-flex rounded-md shadow-sm">
4+
<button type="{{ $type }}" class="bg-lio-600 border border-transparent rounded-md py-2 px-4 inline-flex justify-center text-sm leading-5 font-medium text-white hover:bg-lio-700 focus:outline-none focus:border-lio-900 focus:shadow-outline-lio active:bg-lio-900 transition duration-150 ease-in-out">
5+
{{ $slot }}
6+
</button>
7+
</span>

‎resources/views/layouts/base.blade.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@
3333
@livewireStyles
3434
</head>
3535

36-
<body class="{{ $bodyClass ?? '' }} font-sans bg-white" x-data="{ activeModal: null }">
36+
<body class="{{ $bodyClass ?? '' }} {{ isset($isTailwindUi) && $isTailwindUi ? '' : 'standard' }} font-sans bg-white" x-data="{ activeModal: null }">
3737

3838
@include('layouts._ads._banner')
3939
@include('layouts._nav')

‎resources/views/layouts/settings.blade.php‎

Lines changed: 0 additions & 31 deletions
This file was deleted.

0 commit comments

Comments
 (0)