rahix/openflexure-microscope-server
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Switch to material icons for tabs

Browse source
This commit is contained in:
Joel Collins 2019-06-17 11:41:45 +01:00
parent 4db11c018d
commit 09f9ad6f7d
6 changed files with 33 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/assets/less/theme.less
View file

@ -207,6 +207,10 @@
/*
* Links
*/
.uk-link {
color: @global-muted-color;
}
.uk-link:hover, a:hover {
color: @global-primary-background;
}

2
src/components/genericComponents/tabIcon.vue
View file

@ -1,9 +1,11 @@
<template>
<a
href="#"
class="uk-link"
:class="classObject"
:uk-tooltip="tooltipOptions"
@click="setThisTab">
<slot></slot>
</a>
</template>

22
src/components/panelLeft.vue
View file

@ -3,12 +3,22 @@
<!-- Vertical tab bar -->
<div id="switcher-left" class="uk-flex uk-flex-column uk-padding-remove uk-width-auto uk-height-1-1">
<tabIcon id="connect" uk-icon="server" :requireConnection="false" :currentTab="currentTab" @set-tab="setTab" />
<tabIcon id="navigate" uk-icon="location" :requireConnection="true" :currentTab="currentTab" @set-tab="setTab" />
<tabIcon id="capture" uk-icon="camera" :requireConnection="true" :currentTab="currentTab" @set-tab="setTab" />
<tabIcon id="settings" uk-icon="cog" :requireConnection="false" :currentTab="currentTab" @set-tab="setTab" />
<tabIcon id="connect" :requireConnection="false" :currentTab="currentTab" @set-tab="setTab">
<i class="material-icons">settings_ethernet</i>
</tabIcon>
<tabIcon id="navigate" :requireConnection="true" :currentTab="currentTab" @set-tab="setTab">
<i class="material-icons">gamepad</i>
</tabIcon>
<tabIcon id="capture" :requireConnection="true" :currentTab="currentTab" @set-tab="setTab">
<i class="material-icons">camera_alt</i>
</tabIcon>
<tabIcon id="settings" :requireConnection="false" :currentTab="currentTab" @set-tab="setTab">
<i class="material-icons">settings</i>
</tabIcon>
<tabIcon v-for="plugin in $store.state.apiPlugins" :key="plugin.id" :id="plugin.id" :uk-icon="plugin.icon" :requireConnection="plugin.requiresConnection" :currentTab="currentTab" @set-tab="setTab" />
<tabIcon v-for="plugin in $store.state.apiPlugins" :key="plugin.id" :id="plugin.id" :uk-icon="plugin.icon" :requireConnection="plugin.requiresConnection" :currentTab="currentTab" @set-tab="setTab">
<i class="material-icons">{{ plugin.icon || "extension" }}</i>
</tabIcon>
</div>
@ -118,7 +128,7 @@ export default {
}
#switcher-left a{
padding: 12px 20px;
padding: 10px 16px;
}
#switcher-left{

3
src/main.js
View file

@ -7,6 +7,9 @@ import UIkit from 'uikit';
import Icons from 'uikit/dist/js/uikit-icons';
UIkit.use(Icons);
// Import MD icons
import 'material-design-icons/iconfont/material-icons.css'
Vue.config.productionTip = false
Vue.mixin({