Skip to content

Commit

Permalink
Merge pull request #56 from LS-LEDA/dev
Browse files Browse the repository at this point in the history
v0.2.1 minor improvements
  • Loading branch information
JiahuiChen99 committed Nov 17, 2021
2 parents d7b44c0 + 9fda004 commit aa36624
Show file tree
Hide file tree
Showing 17 changed files with 319 additions and 60 deletions.
5 changes: 4 additions & 1 deletion .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -22,4 +22,7 @@ pnpm-debug.log*
*.sln
*.sw?

./package-lock.json
./package-lock.json

#Electron-builder output
/dist_electron
15 changes: 12 additions & 3 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -5,15 +5,21 @@
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
"lint": "vue-cli-service lint",
"electron:build": "vue-cli-service electron:build",
"electron:serve": "vue-cli-service electron:serve",
"postinstall": "electron-builder install-app-deps",
"postuninstall": "electron-builder install-app-deps"
},
"main": "background.js",
"dependencies": {
"@jamescoyle/vue-icon": "^0.1.2",
"@mdi/js": "^6.3.95",
"chart.js": "^3.6.0",
"core-js": "^3.6.5",
"vue": "^3.0.0",
"vue-router": "^4.0.12"
"vue-router": "^4.0.12",
"vuex": "^4.0.2"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^5.0.0-beta.6",
Expand All @@ -22,12 +28,15 @@
"@vue/compiler-sfc": "^3.2.20",
"autoprefixer": "^10.3.7",
"babel-eslint": "^10.1.0",
"electron": "^15.3.1",
"electron-devtools-installer": "^3.1.0",
"eslint": "^7.32.0",
"eslint-plugin-vue": "^7.20.0",
"postcss": "^8.3.11",
"post-loader": "^2.0.0",
"postcss-cli": "^9.0.1",
"tailwindcss": "^2.2.17"
"tailwindcss": "^2.2.17",
"vue-cli-plugin-electron-builder": "~2.1.1"
},
"eslintConfig": {
"root": true,
Expand Down
1 change: 1 addition & 0 deletions public/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
</head>
<body>
<noscript>
Expand Down
2 changes: 1 addition & 1 deletion src/App.vue
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<div class="flex flex-row h-screen w-screen">
<div class="flex flex-row h-screen w-screen select-none">
<!-- Left navigation bar -->
<NavigationBar/>
<!-- Page rendered by router -->
Expand Down
99 changes: 99 additions & 0 deletions src/background.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,99 @@
'use strict'

import { app, protocol, BrowserWindow } from 'electron'
import { createProtocol } from 'vue-cli-plugin-electron-builder/lib'
import installExtension, { VUEJS3_DEVTOOLS } from 'electron-devtools-installer'
const path = require('path')
const isDevelopment = process.env.NODE_ENV !== 'production'

// Scheme must be registered before the app is ready
protocol.registerSchemesAsPrivileged([
{ scheme: 'app', privileges: { secure: true, standard: true } }
])

async function createWindow() {
// We cannot require the screen module until the app is ready.
const { screen } = require('electron')

// Create a window that fills the screen's available work area.
const primaryDisplay = screen.getPrimaryDisplay()
const { width, height } = primaryDisplay.workAreaSize

// Create the browser window.
const win = new BrowserWindow({
width: width,
height: height,
// Don't show the window until it's ready, this prevents any white flickering
show: false,
icon: path.join(__dirname, '/jsmla_logo.png'),
webPreferences: {

// Use pluginOptions.nodeIntegration, leave this alone
// See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info
nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION,
contextIsolation: !process.env.ELECTRON_NODE_INTEGRATION
}
})

// Hide App Menu & maximize the window
win.setMenu(null);
win.maximize()

if (process.env.WEBPACK_DEV_SERVER_URL) {
// Load the url of the dev server if in development mode
await win.loadURL(process.env.WEBPACK_DEV_SERVER_URL)
if (!process.env.IS_TEST) win.webContents.openDevTools({
mode: "detach"
})
win.show();
} else {
createProtocol('app')
// Load the index.html when not in development
win.loadURL('app://./index.html')
}
}

// Quit when all windows are closed.
app.on('window-all-closed', () => {
// On macOS it is common for applications and their menu bar
// to stay active until the user quits explicitly with Cmd + Q
if (process.platform !== 'darwin') {
app.quit()
}
})

app.on('activate', () => {
// On macOS it's common to re-create a window in the app when the
// dock icon is clicked and there are no other windows open.
if (BrowserWindow.getAllWindows().length === 0) createWindow()
})

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', async () => {
if (isDevelopment && !process.env.IS_TEST) {
// Install Vue Devtools
try {
await installExtension(VUEJS3_DEVTOOLS)
} catch (e) {
console.error('Vue Devtools failed to install:', e.toString())
}
}
createWindow()
})

// Exit cleanly on request from parent process in development mode.
if (isDevelopment) {
if (process.platform === 'win32') {
process.on('message', (data) => {
if (data === 'graceful-exit') {
app.quit()
}
})
} else {
process.on('SIGTERM', () => {
app.quit()
})
}
}
11 changes: 10 additions & 1 deletion src/components/NavigationBar/DownloadButton.vue
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,16 @@ export default {
components: {
SvgIcon
},
props: ['nav_state'],
computed: {
/**
* Navigation bar state:
* true: expanded
* false: shrank
*/
nav_state() {
return this.$store.state.navigation_bar_status
}
},
data() {
return {
download_icon: mdiCloudDownload,
Expand Down
28 changes: 16 additions & 12 deletions src/components/NavigationBar/NavigationBar.vue
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
<template>
<div class="ml-2 my-2 sm:w-max xl:w-2/12 flex flex-col bg-white rounded-xl ">
<div :class="nav_state ? 'w-80' : 'w-20'" class="ml-2 my-2 flex flex-col bg-white rounded-xl transform transition-all duration-700">
<NavigationHeader/>
<router-link :to="page.page_link" v-for="(page, index) in pages" :key="index" class="mx-2">
<NavigationButton :page="page"/>
</router-link>
<div class="flex flex-col flex-1 justify-end">
<DownloadButton :nav_state="nav_state"/>
<DownloadButton/>
</div>
</div>
</template>
Expand All @@ -28,36 +28,40 @@ export default {
NavigationButton,
DownloadButton
},
computed: {
/**
* Navigation bar state:
* true: expanded
* false: shrank
*/
nav_state() {
return this.$store.state.navigation_bar_status
}
},
data() {
return {
pages: [
{
button_name: 'Import data',
button_icon: mdiDatabaseImportOutline,
page_link: 'import-data'
page_link: '/import-data'
},
{
button_name: 'Dashboard',
button_icon: mdiViewDashboardOutline,
page_link: 'dashboard'
page_link: '/dashboard'
},
{
button_name: 'Plugins',
button_icon: mdiToyBrickPlusOutline,
page_link: 'plugins'
page_link: '/plugins'
},
{
button_name: 'Configuration',
button_icon: mdiCogOutline,
page_link: 'settings'
page_link: '/settings'
}
],
/**
* Navigation bar state:
* true: expanded
* false: shrank
*/
nav_state: true
}
}
}
Expand Down
18 changes: 14 additions & 4 deletions src/components/NavigationBar/NavigationButton.vue
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
<template>
<button type="button" class="flex flex-row bg-blue-100 hover:bg-blue-200 rounded-lg px-4 py-2 my-2 font-bold w-full">
<svg-icon
type="mdi" :path="page.button_icon"></svg-icon>
<span class="ml-3">{{ page.button_name }}</span>
<button type="button" class="flex flex-row bg-blue-100 hover:bg-blue-200 rounded-lg px-4 py-2 my-2 font-bold w-full"
:class="nav_state ? null : 'justify-center'">
<svg-icon type="mdi" :path="page.button_icon"></svg-icon>
<span class="ml-3" v-if="nav_state">{{ page.button_name }}</span>
</button>
</template>

Expand All @@ -11,6 +11,16 @@ import SvgIcon from '@jamescoyle/vue-icon'
export default {
name: "NavigationButton.vue",
computed: {
/**
* Navigation bar state:
* true: expanded
* false: shrank
*/
nav_state() {
return this.$store.state.navigation_bar_status
}
},
props: ['page'],
components: {
SvgIcon
Expand Down
68 changes: 56 additions & 12 deletions src/components/NavigationBar/NavigationHeader.vue
Original file line number Diff line number Diff line change
@@ -1,17 +1,31 @@
<template>
<div class="flex flex-row py-2 mx-2 my-5 h-20">
<div class="flex-initial">
<img class="w-auto h-full rounded-lg"
src="/assets/jsmla_logo.png" alt="jsMLA Logo">
<div class="flex flex-row py-2 mx-2 my-5 h-20" :class="nav_state ? null : 'justify-center items-center'">
<!-- Navigation bar App logo routed -->
<div class="self-center" :class="logo_hovered ? 'z-0' : 'z-50'">
<router-link :to="imported_data ? '/dashboard' : '/import-data'"
:class="logo_hovered ? 'invisible' : null"
@mouseover="logo_hover"
@mouseleave="logo_not_hover">
<img class="max-h-16 rounded-lg origin-center transform transition duration-500"
src="/assets/jsmla_logo.png" alt="jsMLA Logo">
</router-link>
</div>
<div class="flex-initial mx-4 font-bold text-4xl self-center">
<h1>jsMLA</h1>
</div>
<div class="flex flex-1 w-max justify-end">
<button type="button" class="self-center flex flex-row justify-self-end">
<svg-icon size="36" type="mdi" :path="path" class="hover:drop-shadow shrink_icon"></svg-icon>
</button>
<!-- Application name -->
<!--<transition name="fade">-->
<div class="flex-1 mx-4 font-bold text-2xl self-center hover:cursor-pointer" v-if="nav_state">
<router-link :to="imported_data ? '/dashboard' : '/import-data'">
<h1>jsMLA</h1>
</router-link>
</div>
<!--</transition>-->
<!-- Navigation shrink button -->
<button type="button" class="flex self-center center w-auto place-items-center"
:class="nav_state ? null : 'absolute transform transition duration-700 rotate-180'"
@click="changeNavigationBarStatus"
@mouseover="logo_hover"
@mouseleave="logo_not_hover">
<svg-icon size="36" type="mdi" :path="path" class="hover:drop-shadow shrink_icon place-self-center"/>
</button>
</div>
</template>

Expand All @@ -25,9 +39,32 @@ export default {
components: {
SvgIcon,
},
computed: {
nav_state() {
return this.$store.state.navigation_bar_status
},
imported_data() {
return this.$store.state.imported_data
}
},
data() {
return {
path: mdiChevronDoubleLeft
path: mdiChevronDoubleLeft,
logo_hovered: false
}
},
methods: {
// Expand or shrink navigation bar
changeNavigationBarStatus() {
this.$store.commit('changeNavigationBarStatus')
},
logo_hover() {
if(!this.nav_state) {
this.logo_hovered = true
}
},
logo_not_hover() {
this.logo_hovered = false
}
}
}
Expand All @@ -37,4 +74,11 @@ export default {
.shrink_icon {
color: gray;
}
.fade-enter-active, .fade-leave-active {
transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
opacity: 0;
}
</style>
6 changes: 3 additions & 3 deletions src/components/Summary/InteractionCard.vue
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
<template>
<!-- Interactions Card -->
<div class="flex w-full h-72 bg-white rounded-3xl p-10 mt-5 hover:cursor-pointer filter drop-shadow-lg
<div class="flex w-full h-96 bg-white rounded-3xl p-10 mt-5 hover:cursor-pointer filter drop-shadow-lg
transform transition duration-500 hover:scale-[101%]">
<!-- Card Information -->
<div class="flex flex-col w-5/12 justify-self-center self-center space-y-3">
<span class="text-5xl"> Total of Interactions </span>
<span class="text-6xl font-bold"> {{ interactions_count.toLocaleString() }} </span>
</div>
<!-- Card graphics -->
<div class="w-full w-full text-center mx-6 font-bold text-4xl rounded-3xl">
<canvas class="max-h-full" id="total_interactions_chart"></canvas>
<div class="flex relative w-full w-full text-center mx-6 font-bold text-4xl rounded-3xl">
<canvas class="max-h-full max-w-full" id="total_interactions_chart"></canvas>
</div>
</div>
</template>
Expand Down
4 changes: 2 additions & 2 deletions src/components/Summary/SummaryCard.vue
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<template>
<div class="flex flex-col w-full bg-white rounded-3xl w-full filter drop-shadow-lg
transform transition duration-500 hover:scale-[101%] select-none p-10 pb-5" :class="card_status ? 'pb-10': null">
<div class="flex flex-col w-full bg-white rounded-3xl filter drop-shadow-lg
transform transition duration-500 hover:scale-[101%] p-10 pb-5" :class="card_status ? 'pb-10': null">
<!-- Card information -->
<template v-if="card_status">
<svg-icon class="items-end place-self-end hover:cursor-pointer text-gray-400" type="mdi" :path=close_icon @click="changeView()"></svg-icon>
Expand Down
Loading

0 comments on commit aa36624

Please sign in to comment.