Skynet/misc_pterodactyl-panel
6
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Update navigation icons

Browse source
This commit is contained in:
Dane Everitt 2018-09-13 21:23:13 -07:00
parent 5404b81193
commit 63375d0f37
No known key found for this signature in database
GPG key ID: EEA66103B3D71F53
3 changed files with 27 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
resources/assets/scripts/components/Icon.vue Normal file
View file

@ -0,0 +1,18 @@
<template>
<i class="ion" :class="iconClass"></i>
</template>
<script>
export default {
props: {
type: {type: String, required: true},
iconStyle: {type: String, default: 'ios'},
},
computed: {
iconClass: function () {
return `ion-${this.iconStyle}-${this.type}`;
}
},
}
</script>

13
resources/assets/scripts/components/core/Navigation.vue
View file

@ -44,22 +44,22 @@
<ul>
<li>
<router-link :to="{ name: 'dashboard' }">
<server-icon aria-label="Server dashboard" class="h-4"/>
<Icon type="cube"/>
</router-link>
</li>
<li>
<router-link :to="{ name: 'account' }">
<user-icon aria-label="Profile management" class="h-4"/>
<Icon type="contact"/>
</router-link>
</li>
<li>
<a :href="this.route('admin.index')">
<settings-icon aria-label="Administrative controls" class="h-4"/>
<Icon type="cog"/>
</a>
</li>
<li>
<a :href="this.route('auth.logout')" v-on:click.prevent="doLogout">
<log-out-icon aria-label="Sign out" class="h-4"/>
<Icon type="log-out"/>
</a>
</li>
</ul>
@ -70,12 +70,11 @@
<script>
import debounce from 'lodash/debounce';
import { mapState } from 'vuex';
import { LogOutIcon, ServerIcon, SettingsIcon, UserIcon } from 'vue-feather-icons'
import Icon from '../Icon';
export default {
name: 'navigation',
components: { LogOutIcon, ServerIcon, SettingsIcon, UserIcon },
components: {Icon},
data: function () {
return {
loadingResults: false,

5
resources/assets/styles/components/navigation.css
View file

@ -17,7 +17,8 @@
& > .search-box {
& > .search-input {
@apply .text-sm .p-2 .mt-3 .mx-3 .rounded .border .border-blue-darker .bg-grey-lightest .text-grey-darkest;
@apply .text-sm .p-2 .mx-3 .rounded .border .border-blue-darker .bg-grey-lightest .text-grey-darkest;
margin-top: 0.6rem;
width: 26rem;
opacity: 0.7;
transition: ease-in-out opacity 150ms;
@ -53,7 +54,7 @@
& > li {
@apply .inline-block;
& > a {
@apply .block .h-full .no-underline .text-grey-lighter .font-light .text-sm .p-5;
@apply .block .h-full .no-underline .text-grey-lighter .font-light .text-xl .px-5 .py-4;
&:hover {
@apply .bg-blue-dark;