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

7
package-lock.json generated
View file

@ -1,6 +1,6 @@
{
"name": "openflexure-ev",
"version": "1.1.0-beta.2",
"version": "1.1.0-beta.3",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
@ -7307,6 +7307,11 @@
"object-visit": "^1.0.0"
}
},
"material-design-icons": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/material-design-icons/-/material-design-icons-3.0.1.tgz",
"integrity": "sha1-mnHEh0chjrylHlGmbaaCA4zct78="
},
"md5.js": {
"version": "1.3.5",
"resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz",

3
package.json
View file

@ -27,7 +27,8 @@
"custom-electron-titlebar": "^3.0.8",
"electron-context-menu": "^0.11.0",
"electron-store": "^3.2.0",
"electron-updater": "^4.0.6"
"electron-updater": "^4.0.6",
"material-design-icons": "^3.0.1"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^3.3.0",

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({