diff --git a/app/Http/Controllers/AdminController.php b/app/Http/Controllers/AdminController.php index 83ab1007..47cd5495 100644 --- a/app/Http/Controllers/AdminController.php +++ b/app/Http/Controllers/AdminController.php @@ -70,17 +70,6 @@ class AdminController extends Controller public function customize(Request $request) { - if ($request->input('action') == 'color') { - $this->validate($request, [ - 'color_scheme' => 'required', - ]); - - $color_scheme = str_replace('_', '-', $request->input('color_scheme')); - option(['color_scheme' => $color_scheme]); - - return json(trans('admin.customize.change-color.success'), 0); - } - $homepage = Option::form('homepage', OptionForm::AUTO_DETECT, function ($form) { $form->text('home_pic_url')->hint(); @@ -107,10 +96,12 @@ class AdminController extends Controller $form->textarea('custom_js', 'JavaScript')->rows(6); })->addMessage()->handle(); - return view('admin.customize', [ - 'forms' => compact('homepage', 'customJsCss'), - 'extra' => ['currentSkin' => option('color_scheme')], - ]); + if ($request->isMethod('post') && $request->input('action') == 'color') { + $color = $this->validate($request, ['color' => 'required'])['color']; + option(['color_scheme' => $color]); + } + + return view('admin.customize', ['forms' => compact('homepage', 'customJsCss')]); } public function score() diff --git a/resources/assets/src/scripts/route.ts b/resources/assets/src/scripts/route.ts index a66ae257..e6cbaa76 100644 --- a/resources/assets/src/scripts/route.ts +++ b/resources/assets/src/scripts/route.ts @@ -62,8 +62,9 @@ export default [ }, { path: 'admin/customize', - component: () => import('../views/admin/Customization.vue'), - el: '#change-color', + module: [ + () => import('../views/admin/Customization'), + ], }, { path: 'admin/plugins/manage', diff --git a/resources/assets/src/views/admin/Customization.ts b/resources/assets/src/views/admin/Customization.ts new file mode 100644 index 00000000..0bc212ec --- /dev/null +++ b/resources/assets/src/views/admin/Customization.ts @@ -0,0 +1,16 @@ +function handler(event: Event): void { + document.body.className = + document.body.className.replace( + /skin-\w+(?:-light)?/, + // eslint-disable-next-line no-extra-parens + (event.target as HTMLInputElement).value + ) +} + +const table = document.querySelector('#change-color') +/* istanbul ignore next */ +if (table) { + table.addEventListener('change', handler) +} + +export default handler diff --git a/resources/assets/src/views/admin/Customization.vue b/resources/assets/src/views/admin/Customization.vue deleted file mode 100644 index 49d28e6c..00000000 --- a/resources/assets/src/views/admin/Customization.vue +++ /dev/null @@ -1,59 +0,0 @@ - - - diff --git a/resources/assets/tests/views/admin/Customization.test.ts b/resources/assets/tests/views/admin/Customization.test.ts index 58e3451a..e001392c 100644 --- a/resources/assets/tests/views/admin/Customization.test.ts +++ b/resources/assets/tests/views/admin/Customization.test.ts @@ -1,26 +1,10 @@ -import Vue from 'vue' -import { mount } from '@vue/test-utils' -import Customization from '@/views/admin/Customization.vue' - -window.blessing.extra = { currentSkin: 'skin-blue' } +import handler from '@/views/admin/Customization' test('preview color', () => { document.body.classList.add('skin-blue') - const wrapper = mount(Customization) - wrapper.findAll('a').at(2) - .trigger('click') - expect(document.body.classList.contains('skin-blue')).toBeFalse() - expect(document.body.classList.contains('skin-yellow')).toBeTrue() -}) + const target = document.createElement('input') + target.value = 'skin-purple' + handler({ target } as any as Event) -test('submit color', () => { - Vue.prototype.$http.post.mockResolvedValue({ code: 0, message: '' }) - const wrapper = mount(Customization) - wrapper.findAll('a').at(4) - .trigger('click') - wrapper.find('button').trigger('click') - expect(Vue.prototype.$http.post).toBeCalledWith( - '/admin/customize?action=color', - { color_scheme: 'skin-green' } - ) + expect(document.body.classList.contains('skin-purple')).toBeTrue() }) diff --git a/resources/misc/changelogs/en/4.3.0.md b/resources/misc/changelogs/en/4.3.0.md index 24348446..2f6755f5 100644 --- a/resources/misc/changelogs/en/4.3.0.md +++ b/resources/misc/changelogs/en/4.3.0.md @@ -6,3 +6,4 @@ ## Tweaked - Tweaked style of chart at administration panel. +- Optimized panel of changing theme color. diff --git a/resources/misc/changelogs/zh_CN/4.3.0.md b/resources/misc/changelogs/zh_CN/4.3.0.md index 1e798871..23651add 100644 --- a/resources/misc/changelogs/zh_CN/4.3.0.md +++ b/resources/misc/changelogs/zh_CN/4.3.0.md @@ -6,3 +6,4 @@ ## 调整 - 调整管理面板中的图表样式 +- 优化「更改配色」的面板 diff --git a/resources/views/admin/customize.blade.php b/resources/views/admin/customize.blade.php index e9937b54..3939cef4 100644 --- a/resources/views/admin/customize.blade.php +++ b/resources/views/admin/customize.blade.php @@ -22,7 +22,50 @@
-
+
+ @csrf +
+

+ @lang('admin.customize.change-color.title') +

+
+
+ + @php + $colors = ['blue', 'yellow', 'green', 'purple', 'red', 'black']; + @endphp + + @foreach ($colors as $color) + + + + + + + + + @endforeach + +
@lang('admin.customize.colors.'.$color) + +
@lang('admin.customize.colors.'.$color.'-light') + +
+
+
+ +
+
@@ -35,9 +78,4 @@
- - - @endsection diff --git a/tests/AdminControllerTest.php b/tests/AdminControllerTest.php index 1ba9cb03..005ff99f 100644 --- a/tests/AdminControllerTest.php +++ b/tests/AdminControllerTest.php @@ -36,16 +36,10 @@ class AdminControllerTest extends BrowserKitTestCase public function testCustomize() { - // Check if `color_scheme` is existed or not - $this->getJson('/admin/customize?action=color') - ->seeJsonStructure(['errors' => ['color_scheme']]); - // Change color - $this->get('/admin/customize?action=color&color_scheme=skin-purple') - ->seeJson([ - 'code' => 0, - 'message' => trans('admin.customize.change-color.success'), - ]); + $this->visit('/admin/customize') + ->select('skin-purple', 'color') + ->press('submit_color'); $this->assertEquals('skin-purple', option('color_scheme')); $this->visit('/admin/customize')