UI tweak

resources/assets/src/views/skinlib/Show.vue

@@ -7,53 +7,57 @@
         :init-position-z="60"
       >
         <template slot="footer">
-          <button
+          <el-button v-if="!auth" disabled :title="$t('skinlib.show.anonymous')">
-            v-if="!auth"
+            {{ $t('skinlib.addToCloset') }}
-            v-t="'skinlib.addToCloset'"
+          </el-button>
-            disabled
-            :title="$t('skinlib.show.anonymous')"
-            class="btn btn-primary pull-right"
-          />
           <template v-else>
             <a
               v-if="liked"
-              v-t="'skinlib.apply'"
+              native-type="a"
               :href="`${baseUrl}/user/closet?tid=${tid}`"
-              class="btn btn-success pull-right pulled-right-btn"
+              class="el-button el-button--success el-button--medium"
-            />
+            >
-            <a
+              {{ $t('skinlib.apply') }}
+            </a>
+            <el-button
               v-if="liked"
-              v-t="'skinlib.removeFromCloset'"
+              type="primary"
-              class="btn btn-primary pull-right pulled-right-btn"
+              size="medium"
+              data-test="removeFromCloset"
               @click="removeFromCloset"
-            />
+            >
-            <a
+              {{ $t('skinlib.removeFromCloset') }}
+            </el-button>
+            <el-button
               v-else
-              v-t="'skinlib.addToCloset'"
+              type="primary"
-              class="btn btn-primary pull-right pulled-right-btn"
+              size="medium"
+              data-test="addToCloset"
               @click="addToCloset"
-            />
+            >
-            <button
+              {{ $t('skinlib.addToCloset') }}
+            </el-button>
+            <el-button
               v-if="type !== 'cape'"
-              v-t="'user.setAsAvatar'"
+              size="medium"
-              class="btn btn-default pull-right pulled-right-btn"
+              data-test="setAsAvatar"
               @click="setAsAvatar"
-            />
+            >
+              {{ $t('user.setAsAvatar') }}
+            </el-button>
             <a
               v-if="canBeDownloaded"
               v-t="'skinlib.show.download'"
-              class="btn btn-default pull-right"
+              class="el-button el-button--default el-button--medium"
               :href="`${baseUrl}/raw/${tid}.png`"
               :download="`${name}`.png"
             />
           </template>
           <div
-            class="btn likes"
+            class="btn likes pull-right"
             style="cursor: auto;"
             :style="{ color: liked ? '#e0353b' : '#333' }"
             :title="$t('skinlib.show.likes')"
-            data-toggle="tooltip"
-            data-placement="top"
           >
             <i class="fas fa-heart" />
             <span>{{ likes }}</span>
@@ -130,8 +134,10 @@
         </div><!-- /.box-body -->
 
         <div class="box-footer">
-          <a v-t="togglePrivacyText" class="btn btn-warning" @click="togglePrivacy" />
+          <el-button type="warning" @click="togglePrivacy">{{ $t(togglePrivacyText) }}</el-button>
-          <a v-t="'skinlib.show.delete-texture'" class="btn btn-danger pull-right" @click="deleteTexture" />
+          <el-button type="danger" class="pull-right" @click="deleteTexture">
+            {{ $t('skinlib.show.delete-texture') }}
+          </el-button>
         </div><!-- /.box-footer -->
       </div>
     </div>
@@ -321,7 +327,4 @@ export default {
 <style lang="stylus">
 .table > tbody > tr > td
   border-top 0
-
-.pulled-right-btn
-  margin-left 12px
 </style>

resources/assets/tests/views/skinlib/Show.test.ts

@@ -1,5 +1,6 @@
 import Vue from 'vue'
 import { mount } from '@vue/test-utils'
+import { Button } from 'element-ui'
 import Show from '@/views/skinlib/Show.vue'
 import { MessageBoxData } from 'element-ui/types/message-box'
 import { flushPromises } from '../../utils'
@@ -34,7 +35,7 @@ test('button for adding to closet should be disabled if not auth', () => {
     },
     stubs: { previewer },
   })
-  expect(wrapper.find('.btn-primary').attributes('disabled')).toBe('disabled')
+  expect(wrapper.find(Button).attributes('disabled')).toBe('disabled')
 })
 
 test('button for adding to closet should be disabled if auth', () => {
@@ -46,7 +47,7 @@ test('button for adding to closet should be disabled if auth', () => {
     },
     stubs: { previewer },
   })
-  expect(wrapper.find('.btn-primary').text()).toBe('skinlib.removeFromCloset')
+  expect(wrapper.find('[data-test="removeFromCloset"]').exists()).toBeTrue()
 })
 
 test('likes count indicator', async () => {
@@ -126,7 +127,7 @@ test('operation panel should not be rendered if not auth', () => {
       $route: ['/skinlib/show/1', '1'],
     },
   })
-  expect(wrapper.contains('.box-warning')).toBeFalse()
+  expect(wrapper.find('.box-warning').exists()).toBeFalse()
 })
 
 test('link to downloading texture', async () => {
@@ -142,26 +143,30 @@ test('link to downloading texture', async () => {
   expect(wrapper.contains('span[title="123"]')).toBeTrue()
 })
 
-test('set as avatar', () => {
+test('set as avatar', async () => {
   Object.assign(window.blessing.extra, { currentUid: 1, inCloset: true })
   Vue.prototype.$http.get.mockResolvedValueOnce({ type: 'steve' })
-    .mockResolvedValueOnce({ type: 'cape' })
   const wrapper = mount(Show, {
     mocks: {
       $route: ['/skinlib/show/1', '1'],
     },
     stubs: { previewer },
   })
-  wrapper.find('button.btn-default').trigger('click')
+  await wrapper.vm.$nextTick()
+  wrapper.find('[data-test="setAsAvatar"]').trigger('click')
   expect(Vue.prototype.$confirm).toBeCalled()
+})
 
-  const noSetAsAvatar = mount(Show, {
+test('hide "set avatar" button when texture is cape', async () => {
+  Vue.prototype.$http.get.mockResolvedValueOnce({ type: 'cape' })
+  const wrapper = mount(Show, {
     mocks: {
       $route: ['/skinlib/show/1', '1'],
     },
     stubs: { previewer },
   })
-  expect(noSetAsAvatar.find('button.btn-default').isEmpty()).toBeTrue()
+  await wrapper.vm.$nextTick()
+  expect(wrapper.find('[data-test="setAsAvatar"]').exists()).toBeFalse()
 })
 
 test('add to closet', async () => {
@@ -175,7 +180,7 @@ test('add to closet', async () => {
     },
     stubs: { previewer },
   })
-  wrapper.find('.btn-primary').trigger('click')
+  wrapper.find('[data-test="addToCloset"]').trigger('click')
   await flushPromises()
   expect(wrapper.vm.likes).toBe(3)
   expect(wrapper.vm.liked).toBeTrue()
@@ -191,7 +196,7 @@ test('remove from closet', async () => {
     },
     stubs: { previewer },
   })
-  wrapper.find('.btn-primary').trigger('click')
+  wrapper.find('[data-test="removeFromCloset"]').trigger('click')
   await flushPromises()
   expect(wrapper.vm.likes).toBe(1)
   expect(wrapper.vm.liked).toBeFalse()
@@ -293,7 +298,10 @@ test('toggle privacy', async () => {
     },
     stubs: { previewer },
   })
-  const button = wrapper.find('.btn-warning')
+  const button = wrapper
+    .find('.box-warning')
+    .findAll(Button)
+    .at(0)
 
   button.trigger('click')
   expect(Vue.prototype.$http.post).not.toBeCalled()
@@ -329,7 +337,10 @@ test('delete texture', async () => {
     },
     stubs: { previewer },
   })
-  const button = wrapper.find('.btn-danger')
+  const button = wrapper
+    .find('.box-warning')
+    .findAll(Button)
+    .at(1)
 
   button.trigger('click')
   expect(Vue.prototype.$http.post).not.toBeCalled()