Use buttons from Element UI

This commit is contained in:
Pig Fang 2019-03-30 18:36:01 +08:00
parent 1e3816d1d4
commit 7589ec8f2b
18 changed files with 144 additions and 154 deletions

View File

@ -148,7 +148,7 @@ class OptionForm
'name' => '',
], $info);
$classes = "btn btn-{$info['style']} ".implode(' ', (array) Arr::get($info, 'class'));
$classes = "el-button el-button--{$info['style']} ".implode(' ', (array) Arr::get($info, 'class'));
if ($info['href']) {
$this->buttons[] = "<a href='{$info['href']}' class='$classes'>{$info['text']}</a>";

View File

@ -27,7 +27,9 @@
</table>
</div>
<div class="box-footer">
<button v-t="'general.submit'" class="btn btn-primary" @click="submit" />
<el-button type="primary" @click="submit">
{{ $t('general.submit') }}
</el-button>
</div>
</div>
</template>

View File

@ -30,9 +30,10 @@
</span>
<span v-else-if="props.column.field === 'operations'">
<template v-if="props.row.installed">
<button
<el-button
v-if="props.row.update_available"
class="btn btn-success btn-sm"
type="success"
size="medium"
:disabled="installing === props.row.name"
@click="updatePlugin(props.row)"
>
@ -42,17 +43,27 @@
<template v-else>
<i class="fas fa-sync-alt" /> {{ $t('admin.updatePlugin') }}
</template>
</button>
<button v-else-if="props.row.enabled" class="btn btn-primary btn-sm" disabled>
</el-button>
<el-button
v-else-if="props.row.enabled"
type="primary"
size="medium"
disabled
>
<i class="fas fa-check" /> {{ $t('admin.statusEnabled') }}
</button>
<button v-else class="btn btn-primary btn-sm" @click="enablePlugin(props.row)">
</el-button>
<el-button
v-else
type="primary"
size="medium"
@click="enablePlugin(props.row)"
>
<i class="fas fa-plug" /> {{ $t('admin.enablePlugin') }}
</button>
</el-button>
</template>
<button
<el-button
v-else
class="btn btn-default btn-sm"
size="medium"
:disabled="installing === props.row.name"
@click="installPlugin(props.row)"
>
@ -62,7 +73,7 @@
<template v-else>
<i class="fas fa-download" /> {{ $t('admin.installPlugin') }}
</template>
</button>
</el-button>
</span>
<span v-else v-text="props.formattedRow[props.column.field]" />
</template>

View File

@ -46,18 +46,17 @@
</a>
</span>
<span v-else-if="props.column.field === 'operations'">
<button
v-t="'admin.changeTexture'"
class="btn btn-default"
<el-button
data-toggle="modal"
data-target="#modal-change-texture"
size="medium"
@click="textureChanges.originalIndex = props.row.originalIndex"
/>
<button
v-t="'admin.deletePlayer'"
class="btn btn-danger"
>{{ $t('admin.changeTexture') }}</el-button>
<el-button
type="danger"
size="medium"
@click="deletePlayer(props.row)"
/>
>{{ $t('admin.deletePlayer') }}</el-button>
</span>
<span v-else v-text="props.formattedRow[props.column.field]" />
</template>
@ -101,13 +100,10 @@
</div>
</div>
<div class="modal-footer">
<button
v-t="'general.close'"
type="button"
class="btn btn-default"
data-dismiss="modal"
/>
<a v-t="'general.submit'" class="btn btn-primary" @click="changeTexture" />
<el-button data-dismiss="modal">{{ $t('general.close') }}</el-button>
<el-button type="primary" data-test="changeTexture" @click="changeTexture">
{{ $t('general.submit') }}
</el-button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->

View File

@ -1,14 +1,14 @@
<template>
<span>
<button
<el-button
v-if="!updating"
class="btn btn-primary"
type="primary"
:disabled="!canUpdate"
@click="update"
>{{ $t('admin.updateButton') }}</button>
<button v-else disabled class="btn btn-primary">
>{{ $t('admin.updateButton') }}</el-button>
<el-button v-else disabled type="primary">
<i class="fa fa-spinner fa-spin" /> {{ $t('admin.preparing') }}
</button>
</el-button>
<div
id="modal-start-download"
@ -19,12 +19,11 @@
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button
type="button"
<el-button
class="close"
data-dismiss="modal"
aria-label="Close"
><span aria-hidden="true">&times;</span></button>
><span aria-hidden="true">&times;</span></el-button>
<h4 v-t="'admin.downloading'" class="modal-title" />
</div>
<div class="modal-body">

View File

@ -67,17 +67,18 @@
</a>
</span>
<div v-else-if="props.column.field === 'operations'">
<button
v-t="'admin.changePassword'"
class="btn btn-default"
@click="changePassword(props.row)"
/>
<button
v-t="'admin.deleteUser'"
<el-button size="medium" @click="changePassword(props.row)">
{{ $t('admin.changePassword') }}
</el-button>
<el-button
:disabled="props.row.permission >= 2 || (props.row.operations === 1 && props.row.permission >= 1)"
class="btn btn-danger"
type="danger"
size="medium"
data-test="deleteUser"
@click="deleteUser(props.row)"
/>
>
{{ $t('admin.deleteUser') }}
</el-button>
</div>
<span v-else v-text="props.formattedRow[props.column.field]" />
</template>

View File

@ -127,18 +127,17 @@
<div class="col-md-4">
<previewer closet-mode :skin="skinUrl" :cape="capeUrl">
<template #footer>
<button
v-t="'user.useAs'"
class="btn btn-primary"
<el-button
type="primary"
data-toggle="modal"
data-target="#modal-use-as"
@click="applyTexture"
/>
<button
v-t="'user.resetSelected'"
class="btn btn-default pull-right"
@click="resetSelected"
/>
>
{{ $t('user.useAs') }}
</el-button>
<el-button data-test="resetSelected" class="pull-right" @click="resetSelected">
{{ $t('user.resetSelected') }}
</el-button>
</template>
</previewer>
</div>
@ -181,8 +180,10 @@
<p v-else v-t="'user.closet.use-as.empty'" />
</div>
<div class="modal-footer">
<a v-t="'user.closet.use-as.add'" href="./player" class="btn btn-default pull-left" />
<a v-t="'general.submit'" class="btn btn-primary" @click="submitApplyTexture" />
<a v-t="'user.closet.use-as.add'" href="./player" class="el-button pull-left" />
<el-button type="primary" data-test="submitApplyTexture" @click="submitApplyTexture">
{{ $t('general.submit') }}
</el-button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->

View File

@ -24,31 +24,33 @@
<td class="pid">{{ player.pid }}</td>
<td class="player-name">{{ player.name }}</td>
<td>
<a
v-t="'user.player.edit-pname'"
class="btn btn-default btn-sm"
@click="changeName(player)"
/>
<a
v-t="'user.player.delete-texture'"
class="btn btn-warning btn-sm"
<el-button size="medium" @click="changeName(player)">
{{ $t('user.player.edit-pname') }}
</el-button>
<el-button
size="medium"
type="warning"
data-toggle="modal"
data-target="#modal-clear-texture"
/>
<a
v-t="'user.player.delete-player'"
class="btn btn-danger btn-sm"
>
{{ $t('user.player.delete-texture') }}
</el-button>
<el-button
size="medium"
type="danger"
@click="deletePlayer(player, index)"
/>
>
{{ $t('user.player.delete-player') }}
</el-button>
</td>
</tr>
</tbody>
</table>
</div>
<div class="box-footer clearfix">
<button class="btn btn-primary pull-left" data-toggle="modal" data-target="#modal-add-player">
<el-button type="primary" data-toggle="modal" data-target="#modal-add-player">
<i class="fas fa-plus" aria-hidden="true" /> &nbsp;{{ $t('user.player.add-player') }}
</button>
</el-button>
</div>
</div>
@ -70,12 +72,9 @@
title="user.player.player-info"
>
<template #footer>
<button
v-t="'user.switch2dPreview'"
class="btn btn-default"
data-test="to2d"
@click="togglePreviewer"
/>
<el-button data-test="to2d" @click="togglePreviewer">
{{ $t('user.switch2dPreview') }}
</el-button>
</template>
</previewer>
<div v-else class="box">
@ -109,11 +108,9 @@
</div>
</div><!-- /.box-body -->
<div class="box-footer">
<button
v-t="'user.switch3dPreview'"
class="btn btn-default"
@click="togglePreviewer"
/>
<el-button @click="togglePreviewer">
{{ $t('user.switch3dPreview') }}
</el-button>
</div>
</div><!-- /.box -->
</div>
@ -162,13 +159,10 @@
</div>
</div>
<div class="modal-footer">
<button
v-t="'general.close'"
type="button"
class="btn btn-default"
data-dismiss="modal"
/>
<a v-t="'general.submit'" class="btn btn-primary" @click="addPlayer" />
<el-button data-dismiss="modal">{{ $t('general.close') }}</el-button>
<el-button type="primary" data-test="addPlayer" @click="addPlayer">
{{ $t('general.submit') }}
</el-button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
@ -203,13 +197,10 @@
</label>
</div>
<div class="modal-footer">
<button
v-t="'general.close'"
type="button"
class="btn btn-default"
data-dismiss="modal"
/>
<a v-t="'general.submit'" class="btn btn-primary" @click="clearTexture" />
<el-button data-dismiss="modal">{{ $t('general.close') }}</el-button>
<el-button type="primary" data-test="clearTexture" @click="clearTexture">
{{ $t('general.submit') }}
</el-button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->

View File

@ -10,12 +10,9 @@
<!-- eslint-disable-next-line vue/no-v-html -->
<div class="box-body" v-html="$t('user.profile.avatar.notice')" /><!-- /.box-body -->
<div class="box-footer">
<button
v-t="'user.resetAvatar'"
class="btn btn-primary pull-right"
data-test="resetAvatar"
@click="resetAvatar"
/>
<el-button type="primary" data-test="resetAvatar" @click="resetAvatar">
{{ $t('user.resetAvatar') }}
</el-button>
</div>
</div>
@ -55,12 +52,9 @@
</div>
</div><!-- /.box-body -->
<div class="box-footer">
<button
v-t="'user.profile.password.button'"
class="btn btn-primary"
data-test="changePassword"
@click="changePassword"
/>
<el-button type="primary" data-test="changePassword" @click="changePassword">
{{ $t('user.profile.password.button') }}
</el-button>
</div>
</div><!-- /.box -->
</div>
@ -82,12 +76,9 @@
</div>
</div><!-- /.box-body -->
<div class="box-footer">
<button
v-t="'general.submit'"
class="btn btn-primary"
data-test="changeNickName"
@click="changeNickName"
/>
<el-button type="primary" data-test="changeNickName" @click="changeNickName">
{{ $t('general.submit') }}
</el-button>
</div>
</div>
@ -118,12 +109,9 @@
</div>
</div><!-- /.box-body -->
<div class="box-footer">
<button
v-t="'user.profile.email.button'"
class="btn btn-warning"
data-test="changeEmail"
@click="changeEmail"
/>
<el-button type="primary" data-test="changeEmail" @click="changeEmail">
{{ $t('user.profile.email.button') }}
</el-button>
</div>
</div>
@ -134,16 +122,15 @@
<div class="box-body">
<template v-if="isAdmin">
<p v-t="'user.profile.delete.admin'" />
<button v-t="'user.profile.delete.button'" class="btn btn-danger" disabled />
<el-button type="danger" disabled>
{{ $t('user.profile.delete.button') }}
</el-button>
</template>
<template v-else>
<p v-t="{ path: 'user.profile.delete.notice', args: { site: siteName } }" />
<button
v-t="'user.profile.delete.button'"
class="btn btn-danger"
data-toggle="modal"
data-target="#modal-delete-account"
/>
<el-button type="danger" data-toggle="modal" data-target="#modal-delete-account">
{{ $t('user.profile.delete.button') }}
</el-button>
</template>
</div><!-- /.box-body -->
</div>

View File

@ -1,5 +1,6 @@
import Vue from 'vue'
import { mount } from '@vue/test-utils'
import { Button } from 'element-ui'
import { MessageBoxData } from 'element-ui/types/message-box'
import { flushPromises } from '../../utils'
import Players from '@/views/admin/Players.vue'
@ -28,8 +29,11 @@ test('change texture', async () => {
const wrapper = mount(Players)
await wrapper.vm.$nextTick()
const button = wrapper.find('.btn-primary')
wrapper.find('.btn-default').trigger('click')
const button = wrapper.find('[data-test=changeTexture]')
wrapper
.findAll(Button)
.at(0)
.trigger('click')
wrapper.find('.modal-body').find('input')
.setValue('5')
@ -130,7 +134,7 @@ test('delete player', async () => {
const wrapper = mount(Players)
await wrapper.vm.$nextTick()
const button = wrapper.find('.btn-danger')
const button = wrapper.findAll(Button).at(1)
button.trigger('click')
expect(Vue.prototype.$http.post).not.toBeCalled()

View File

@ -9,7 +9,7 @@ afterEach(() => {
test('button should be disabled if update is unavailable', () => {
window.blessing.extra = { canUpdate: false }
const wrapper = mount(Update)
expect(wrapper.find('.btn').attributes('disabled')).toBe('disabled')
expect(wrapper.find('button').attributes('disabled')).toBe('disabled')
})
test('perform update', async () => {
@ -22,7 +22,7 @@ test('perform update', async () => {
Vue.prototype.$http.get
.mockResolvedValue({ total: 2048, downloaded: 2048 })
const wrapper = mount(Update)
const button = wrapper.find('.btn')
const button = wrapper.find('button')
button.trigger('click')
await flushPromises()

View File

@ -2,6 +2,7 @@ import Vue from 'vue'
import { mount } from '@vue/test-utils'
import Users from '@/views/admin/Users.vue'
import '@/scripts/i18n'
import { Button } from 'element-ui'
import { MessageBoxData } from 'element-ui/types/message-box'
import { flushPromises } from '../../utils'
@ -146,7 +147,7 @@ test('deletion button should not be displayed for super admins', async () => {
})
const wrapper = mount(Users)
await wrapper.vm.$nextTick()
expect(wrapper.find('.btn-danger').attributes('disabled')).toBe('disabled')
expect(wrapper.find('[data-test="deleteUser"]').attributes('disabled')).toBe('disabled')
})
test('deletion button should be displayed for admins as super admin', async () => {
@ -159,7 +160,7 @@ test('deletion button should be displayed for admins as super admin', async () =
})
const wrapper = mount(Users)
await wrapper.vm.$nextTick()
expect(wrapper.find('.btn-danger').attributes('disabled')).toBeNil()
expect(wrapper.find('[data-test="deleteUser"]').attributes('disabled')).toBeNil()
})
test('deletion button should be displayed for normal users as super admin', async () => {
@ -172,7 +173,7 @@ test('deletion button should be displayed for normal users as super admin', asyn
})
const wrapper = mount(Users)
await wrapper.vm.$nextTick()
expect(wrapper.find('.btn-danger').attributes('disabled')).toBeNil()
expect(wrapper.find('[data-test="deleteUser"]').attributes('disabled')).toBeNil()
})
test('deletion button should be displayed for banned users as super admin', async () => {
@ -185,7 +186,7 @@ test('deletion button should be displayed for banned users as super admin', asyn
})
const wrapper = mount(Users)
await wrapper.vm.$nextTick()
expect(wrapper.find('.btn-danger').attributes('disabled')).toBeNil()
expect(wrapper.find('[data-test="deleteUser"]').attributes('disabled')).toBeNil()
})
test('deletion button should not be displayed for other admins as admin', async () => {
@ -198,7 +199,7 @@ test('deletion button should not be displayed for other admins as admin', async
})
const wrapper = mount(Users)
await wrapper.vm.$nextTick()
expect(wrapper.find('.btn-danger').attributes('disabled')).toBe('disabled')
expect(wrapper.find('[data-test="deleteUser"]').attributes('disabled')).toBe('disabled')
})
test('deletion button should be displayed for normal users as admin', async () => {
@ -211,7 +212,7 @@ test('deletion button should be displayed for normal users as admin', async () =
})
const wrapper = mount(Users)
await wrapper.vm.$nextTick()
expect(wrapper.find('.btn-danger').attributes('disabled')).toBeNil()
expect(wrapper.find('[data-test="deleteUser"]').attributes('disabled')).toBeNil()
})
test('deletion button should be displayed for banned users as admin', async () => {
@ -224,7 +225,7 @@ test('deletion button should be displayed for banned users as admin', async () =
})
const wrapper = mount(Users)
await wrapper.vm.$nextTick()
expect(wrapper.find('.btn-danger').attributes('disabled')).toBeNil()
expect(wrapper.find('[data-test="deleteUser"]').attributes('disabled')).toBeNil()
})
test('change email', async () => {
@ -343,7 +344,7 @@ test('change password', async () => {
const wrapper = mount(Users)
await wrapper.vm.$nextTick()
const button = wrapper.find('.btn-default')
const button = wrapper.findAll(Button).at(0)
button.trigger('click')
expect(Vue.prototype.$http.post).not.toBeCalled()
@ -480,7 +481,7 @@ test('delete user', async () => {
const wrapper = mount(Users)
await wrapper.vm.$nextTick()
const button = wrapper.find('.btn-danger')
const button = wrapper.findAll(Button).at(1)
button.trigger('click')
expect(Vue.prototype.$http.post).not.toBeCalled()

View File

@ -206,7 +206,7 @@ test('submit applying texture', async () => {
Vue.prototype.$http.post.mockResolvedValueOnce({ errno: 1 })
.mockResolvedValue({ errno: 0, msg: 'ok' })
const wrapper = mount(Closet)
const button = wrapper.find('.modal-footer > a:nth-child(2)')
const button = wrapper.find('[data-test=submitApplyTexture]')
button.trigger('click')
expect(Vue.prototype.$message.info).toBeCalledWith('user.emptySelectedPlayer')
@ -252,9 +252,7 @@ test('reset selected texture', () => {
skinUrl: 'a',
capeUrl: 'b',
})
wrapper.find(Previewer).findAll('button')
.at(1)
.trigger('click')
wrapper.find('[data-test="resetSelected"]').trigger('click')
expect(wrapper.vm).toEqual(expect.objectContaining({
selectedSkin: 0,
selectedCape: 0,

View File

@ -1,5 +1,6 @@
import Vue from 'vue'
import { mount } from '@vue/test-utils'
import { Button } from 'element-ui'
import { MessageBoxData } from 'element-ui/types/message-box'
import { flushPromises } from '../../utils'
import Players from '@/views/user/Players.vue'
@ -74,7 +75,7 @@ test('change player name', async () => {
})
const wrapper = mount(Players)
await wrapper.vm.$nextTick()
const button = wrapper.find('.btn-default')
const button = wrapper.findAll(Button).at(0)
button.trigger('click')
expect(Vue.prototype.$http.post).not.toBeCalled()
@ -103,7 +104,7 @@ test('delete player', async () => {
.mockResolvedValue('confirm')
const wrapper = mount(Players)
await wrapper.vm.$nextTick()
const button = wrapper.find('.btn-danger')
const button = wrapper.findAll(Button).at(2)
button.trigger('click')
expect(Vue.prototype.$http.post).not.toBeCalled()
@ -130,8 +131,7 @@ test('add player', async () => {
.mockResolvedValueOnce({ errno: 1 })
.mockResolvedValue({ errno: 0 })
const wrapper = mount(Players)
const button = wrapper.findAll('.modal-footer').at(0)
.find('a')
const button = wrapper.find('[data-test=addPlayer]')
wrapper.find('input[type="text"]').setValue('the-new')
button.trigger('click')
@ -160,8 +160,7 @@ test('clear texture', async () => {
.mockResolvedValue({ errno: 0, msg: 'ok' })
const wrapper = mount(Players)
await wrapper.vm.$nextTick()
const button = wrapper.findAll('.modal-footer').at(1)
.find('a')
const button = wrapper.find('[data-test=clearTexture]')
wrapper.find('.player').trigger('click')
button.trigger('click')

View File

@ -125,7 +125,7 @@ update:
text: "Download Link:"
link: Click to download full update package.
check-github: <a href=":url" target="_blank" class="btn btn-default pull-right">Check GitHub Releases</a>
check-github: <a href=":url" target="_blank" class="el-button pull-right">Check GitHub Releases</a>
button: Update Now
cautions:

View File

@ -130,7 +130,7 @@ update:
text: 下载地址:
link: 点击下载完整安装包
check-github: <a href=":url" target="_blank" class="btn btn-default pull-right">查看 GitHub Releases</a>
check-github: <a href=":url" target="_blank" class="el-button pull-right">查看 GitHub Releases</a>
button: 马上升级
cautions:

View File

@ -95,7 +95,7 @@
</div><!-- /.box-body -->
<div class="box-footer">
<span id="update-button"></span>
{!! trans('admin.update.info.check-github', ['url' => 'https://github.com/printempw/blessing-skin-server/releases']) !!}
{!! trans('admin.update.info.check-github', ['url' => 'https://github.com/bs-community/blessing-skin-server/releases']) !!}
</div>
</div>

View File

@ -67,7 +67,7 @@
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">@lang('general.close')</button>
<button class="el-button" data-dismiss="modal">@lang('general.close')</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->