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

Merge branch 'master' into 'stable'

Browse source 
v0.2.6

See merge request openflexure/openflexure-microscope-jsclient!29
This commit is contained in:
Joel Collins 2019-05-28 14:41:23 +00:00
commit 96070b17f5
9 changed files with 89 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

2
package.json
View file

@ -1,6 +1,6 @@
{
"name": "openflexure-ev",
"version": "0.2.5",
"version": "0.2.6",
"private": true,
"description": "An electron-based user client for the OpenFlexure Microscope Server",
"author": "OpenFlexure <contact@openflexure.org> (https://www.openflexure.org)",

24
src/App.vue
View file

@ -1,11 +1,11 @@
<template>
<div id="app">
<div id="app" v-bind:class="handleTheme">
<div uk-grid class="uk-height-1-1 uk-margin-remove uk-padding-remove" margin=0>
<div id="sidebar-container" v-bind:class="{ 'overlay-panel': this.window.width<850 }" class="uk-padding-remove uk-first-column uk-inline uk-height-1-1">
<div id="overlay-toggle">
<a href="" class="uk-icon-button uk-box-shadow-small uk-box-shadow-hover-medium action-btn-outline" uk-icon="menu" uk-toggle="target: #left-panel-container; animation: uk-animation-slide-left-small, uk-animation-slide-left-small" ></a>
</div>
<div id="left-panel-container" class="uk-padding-remove uk-card uk-card-default uk-width-auto uk-height-1-1">
<div id="left-panel-container" class="uk-padding-remove uk-card uk-card-default uk-width-auto uk-height-1-1" v-bind:class="{ 'uk-card-secondary': $store.state.globalSettings.darkMode }">
<panelLeft/>
</div>
</div>
@ -81,6 +81,15 @@ export default {
console.log("Triggered beforeunload")
this.$root.$emit('globalTogglePreview', false)
}
},
computed: {
handleTheme: function () {
return {
'uk-light': this.$store.state.globalSettings.darkMode,
'uk-background-secondary': this.$store.state.globalSettings.darkMode
}
}
}
}
@ -123,6 +132,17 @@ body, html {
border: 1px solid lightgray;
}
.uk-light .uk-icon-button {
background-color: rgb(52, 52, 52);
}
.uk-light .uk-icon-button:hover, .uk-light .uk-icon-button:focus {
background-color: rgb(70, 70, 70);
}
.uk-light .uk-card-default {
background: #222
}
.uk-disabled {
pointer-events: none;
opacity: 0.5;

8
src/components/paneDisplayComponents/galleryComponents/captureCard.vue
View file

@ -1,10 +1,10 @@
<template>
<div class="captureCard uk-card uk-card-default uk-card-hover uk-padding-remove uk-width-medium uk-margin-right">
<div class="captureCard uk-card uk-card-default uk-card-hover uk-padding-remove uk-width-medium uk-margin-right" v-bind:class="{ 'uk-card-secondary': $store.state.globalSettings.darkMode }">
<div class="uk-card-media-top">
<a class="lightbox-link" v-bind:href="imgURL" v-bind:data-caption="metadata.filename">
<img class="uk-width-1-1" v-bind:src="thumbURL" v-bind:alt="metadata.id" uk-img>
<img class="uk-width-1-1" v-bind:data-src="thumbURL" v-bind:alt="metadata.id" width="300" height="225" uk-img>
</a>
</div>
@ -39,7 +39,7 @@
<div v-bind:id="metadataModalID" uk-modal>
<div class="uk-modal-dialog uk-modal-body">
<div class="uk-modal-dialog uk-modal-body" v-bind:class="{ 'uk-light uk-background-secondary': $store.state.globalSettings.darkMode }" >
<button class="uk-modal-close-default" type="button" uk-close></button>
<h2 class="uk-modal-title">{{ metadata.filename }}</h2>
<p><b>Path: </b>{{ path }}</p>
@ -56,7 +56,7 @@
<div v-bind:id="tagModalID" uk-modal>
<form class="uk-modal-dialog uk-modal-body uk-margin-auto-vertical" @submit.prevent="handleTagSubmit">
<form class="uk-modal-dialog uk-modal-body uk-margin-auto-vertical" v-bind:class="{ 'uk-light uk-background-secondary': $store.state.globalSettings.darkMode }" @submit.prevent="handleTagSubmit">
<div class="uk-inline">
<span class="uk-form-icon" uk-icon="icon: tag"></span>

2
src/components/paneDisplayComponents/galleryComponents/scanCard.vue
View file

@ -4,7 +4,7 @@
<div class="uk-card-media-top">
<a href="#" >
<img class="uk-width-1-1" v-bind:src="thumbnail" v-bind:alt="metadata.scan_id" v-on:click="$root.$emit('globalUpdateCaptureFolder', metadata.custom.scan_id)" uk-img>
<img class="uk-width-1-1" v-bind:data-src="thumbnail" v-bind:alt="metadata.scan_id" width="300" height="225" v-on:click="$root.$emit('globalUpdateCaptureFolder', metadata.custom.scan_id)" uk-img>
</a>
</div>

10
src/components/paneDisplayComponents/galleryDisplay.vue
View file

@ -1,15 +1,14 @@
<template>
<div class="galleryDisplay uk-padding uk-padding-remove-top">
<nav class="uk-navbar-container navbar" uk-navbar="mode: click">
<nav class="uk-navbar-container uk-navbar-transparent navbar" uk-navbar="mode: click">
<div class="uk-navbar-left uk-padding-remove-top uk-padding-remove-bottom">
<ul class="uk-navbar-nav">
<li v-bind:class="[sortDescending ? 'uk-active' : '']"><a v-on:click="sortDescending=true;" class="uk-icon-link" href="#" uk-icon="icon: arrow-down"></a></li>
<li v-bind:class="[!sortDescending ? 'uk-active' : '']"><a v-on:click="sortDescending=false;" class="uk-icon-link" href="#" uk-icon="icon: arrow-up"></a></li>
<li>
<a href="#">Filter</a>
<div class="uk-navbar-dropdown">
<div class="uk-navbar-dropdown" v-bind:class="{ 'uk-light uk-background-secondary': $store.state.globalSettings.darkMode }">
<ul class="uk-nav uk-navbar-dropdown-nav">
<form class="uk-form-stacked">
<div v-for="tag in allTags" :key="tag" class="uk-margin-small">
@ -264,7 +263,8 @@ export default {
<style scoped lang="less">
.navbar {
background-color: #fff !important;
border-bottom: 1px solid #e5e5e5;
border-width: 0 0 1px 0;
border-style: solid;
border-color: rgba(180, 180, 180, 0.25)
}
</style>

7
src/components/paneSettings.vue
View file

@ -1,6 +1,9 @@
<template>
<div id="paneSettings">
<h3>Settings</h3>
<appSettings/>
<ul uk-accordion="multiple: true">
<li>
<a class="uk-accordion-title" href="#">Stream settings</a>
@ -26,6 +29,7 @@
import streamSettings from './paneSettingsComponents/streamSettings.vue'
import microscopeSettings from './paneSettingsComponents/microscopeSettings.vue'
import cameraSettings from './paneSettingsComponents/cameraSettings.vue'
import appSettings from './paneSettingsComponents/appSettings.vue'
// Export main app
export default {
@ -34,7 +38,8 @@ export default {
components: {
streamSettings,
cameraSettings,
microscopeSettings
microscopeSettings,
appSettings
}
}

46
src/components/paneSettingsComponents/appSettings.vue Normal file
View file

@ -0,0 +1,46 @@
<template>
<div id="appSettings">
<p><label><input v-model="darkMode" class="uk-checkbox" type="checkbox"> Enable dark theme</label></p>
</div>
</template>
<script>
// Export main app
export default {
name: 'appSettings',
data: function () {
return {}
},
mounted() {
// Try loading settings from localStorage. If null, don't change.
this.darkMode = this.getLocalStorageObj('darkMode') || this.darkMode
},
watch: {
darkMode(newdarkMode) {
console.log("Saving darkmode setting")
this.setLocalStorageObj('darkMode', this.darkMode)
}
},
computed: {
darkMode: {
get() {
return this.$store.state.globalSettings.darkMode;
},
set(value) {
this.$store.commit("changeSetting", ['darkMode', value]);
}
}
}
}
</script>
<style lang="less">
</style>

4
src/components/paneSettingsComponents/streamSettings.vue
View file

@ -1,5 +1,5 @@
<template>
<div id="appSettings">
<div id="streamSettings">
<p><label><input v-model="disableStream" class="uk-checkbox" type="checkbox"> Disable live stream</label></p>
@ -15,7 +15,7 @@
// Export main app
export default {
name: 'appSettings',
name: 'streamSettings',
data: function () {
return {}

3
src/store.js
View file

@ -18,7 +18,8 @@ export default new Vuex.Store({
globalSettings: {
disableStream: false,
autoGpuPreview: false,
trackWindow: true
trackWindow: true,
darkMode: false
}
},