IntenseFinance/firefly-iii
3
0
Fork 0
mirror of https://github.com/firefly-iii/firefly-iii.git synced 2025-02-25 18:45:27 -06:00
Code Issues Packages Projects Releases Wiki Activity

Better boxes in v3

Browse Source
This commit is contained in:
James Cole 2023-01-21 20:08:45 +01:00
parent fc0adfd375
commit 3d96f5df58
No known key found for this signature in database
GPG Key ID: B49A324B7EAD6D80
4 changed files with 49 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
frontend/src/components/dashboard/AccountChart.vue
View File

@ -19,19 +19,9 @@
--> -->
<template> <template>
<div class="q-mt-sm q-mr-sm"> <q-card flat bordered>
<q-card bordered>
<q-item>
<q-item-section>
<q-item-label><strong>Bla bla accounts</strong></q-item-label>
</q-item-section>
</q-item>
<q-separator/>
<ApexChart ref="chart" :options="options" :series="series" height="350" type="line"></ApexChart> <ApexChart ref="chart" :options="options" :series="series" height="350" type="line"></ApexChart>
</q-card> </q-card>
</div>
<div>
</div>
</template> </template>
<script> <script>

2
frontend/src/components/dashboard/SpendInsightBox.vue
View File

@ -25,7 +25,7 @@
<q-card bordered flat> <q-card bordered flat>
<q-item> <q-item>
<q-item-section> <q-item-section>
<q-item-label><strong>{{ $t('firefly.left_to_spend') }} x</strong></q-item-label> <q-item-label><strong>{{ $t('firefly.left_to_spend') }}</strong></q-item-label>
</q-item-section> </q-item-section>
</q-item> </q-item>
<q-separator/> <q-separator/>

57
frontend/src/layouts/MainLayout.vue
View File

@ -37,7 +37,7 @@ page container: q-ma-xs (margin all, xs) AND q-mb-md to give the page content so
<q-header reveal class="bg-primary text-white"> <q-header reveal class="bg-primary text-white">
<q-toolbar> <q-toolbar>
<q-btn dense flat icon="fas fa-bars" round @click="toggleLeftDrawer"/> <q-btn flat icon="fas fa-bars" round @click="toggleLeftDrawer"/>
<q-toolbar-title> <q-toolbar-title>
<q-avatar> <q-avatar>
@ -46,7 +46,6 @@ page container: q-ma-xs (margin all, xs) AND q-mb-md to give the page content so
Firefly III Firefly III
</q-toolbar-title> </q-toolbar-title>
<q-select <q-select
ref="search" v-model="search" :stack-label="false" class="q-mx-xs" color="black" dark ref="search" v-model="search" :stack-label="false" class="q-mx-xs" color="black" dark
dense dense
@ -156,9 +155,9 @@ page container: q-ma-xs (margin all, xs) AND q-mb-md to give the page content so
</q-header> </q-header>
<q-drawer show-if-above v-model="leftDrawerOpen" side="left" bordered> <q-drawer show-if-above v-model="leftDrawerOpen" side="left" bordered>
<q-scroll-area class="fit"> <q-scroll-area class="fit">
<div class="q-pt-xs"> <div class="q-pt-md">
<q-list :dense="true"> <q-list>
<q-item v-ripple :to="{ name: 'index' }" clickable :dense="true"> <q-item v-ripple :to="{ name: 'index' }" clickable>
<q-item-section avatar> <q-item-section avatar>
<q-icon name="fas fa-tachometer-alt"/> <q-icon name="fas fa-tachometer-alt"/>
</q-item-section> </q-item-section>
@ -166,7 +165,7 @@ page container: q-ma-xs (margin all, xs) AND q-mb-md to give the page content so
Dashboard Dashboard
</q-item-section> </q-item-section>
</q-item> </q-item>
<q-item v-ripple :to="{ name: 'budgets.index' }" clickable :dense="true"> <q-item v-ripple :to="{ name: 'budgets.index' }" clickable>
<q-item-section avatar> <q-item-section avatar>
<q-icon name="fas fa-chart-pie"/> <q-icon name="fas fa-chart-pie"/>
</q-item-section> </q-item-section>
@ -174,7 +173,7 @@ page container: q-ma-xs (margin all, xs) AND q-mb-md to give the page content so
Budgets Budgets
</q-item-section> </q-item-section>
</q-item> </q-item>
<q-item v-ripple :to="{ name: 'subscriptions.index' }" clickable :dense="true"> <q-item v-ripple :to="{ name: 'subscriptions.index' }" clickable>
<q-item-section avatar> <q-item-section avatar>
<q-icon name="far fa-calendar-alt"/> <q-icon name="far fa-calendar-alt"/>
</q-item-section> </q-item-section>
@ -182,7 +181,7 @@ page container: q-ma-xs (margin all, xs) AND q-mb-md to give the page content so
Subscriptions Subscriptions
</q-item-section> </q-item-section>
</q-item> </q-item>
<q-item v-ripple :to="{ name: 'piggy-banks.index' }" clickable :dense="true"> <q-item v-ripple :to="{ name: 'piggy-banks.index' }" clickable>
<q-item-section avatar> <q-item-section avatar>
<q-icon name="fas fa-piggy-bank"/> <q-icon name="fas fa-piggy-bank"/>
</q-item-section> </q-item-section>
@ -191,32 +190,32 @@ page container: q-ma-xs (margin all, xs) AND q-mb-md to give the page content so
</q-item-section> </q-item-section>
</q-item> </q-item>
<q-expansion-item :dense="true" <q-expansion-item
:default-opened="this.$route.name === 'transactions.index' || this.$route.name === 'transactions.show'" :default-opened="this.$route.name === 'transactions.index' || this.$route.name === 'transactions.show'"
expand-separator expand-separator
icon="fas fa-exchange-alt" icon="fas fa-exchange-alt"
label="Transactions" label="Transactions"
> >
<q-item :dense="true" v-ripple :inset-level="1" :to="{ name: 'transactions.index', params: {type: 'withdrawal'} }" <q-item v-ripple :inset-level="1" :to="{ name: 'transactions.index', params: {type: 'withdrawal'} }"
clickable> clickable>
<q-item-section> <q-item-section>
Withdrawals Withdrawals
</q-item-section> </q-item-section>
</q-item> </q-item>
<q-item :dense="true" v-ripple :inset-level="1" :to="{ name: 'transactions.index', params: {type: 'deposit'} }" <q-item v-ripple :inset-level="1" :to="{ name: 'transactions.index', params: {type: 'deposit'} }"
clickable> clickable>
<q-item-section> <q-item-section>
Deposits Deposits
</q-item-section> </q-item-section>
</q-item> </q-item>
<q-item :dense="true" v-ripple :inset-level="1" :to="{ name: 'transactions.index', params: {type: 'transfers'} }" <q-item v-ripple :inset-level="1" :to="{ name: 'transactions.index', params: {type: 'transfers'} }"
clickable> clickable>
<q-item-section> <q-item-section>
Transfers Transfers
</q-item-section> </q-item-section>
</q-item> </q-item>
<q-item :dense="true" v-ripple :inset-level="1" :to="{ name: 'transactions.index', params: {type: 'all'} }" <q-item v-ripple :inset-level="1" :to="{ name: 'transactions.index', params: {type: 'all'} }"
clickable> clickable>
<q-item-section> <q-item-section>
@ -228,18 +227,18 @@ page container: q-ma-xs (margin all, xs) AND q-mb-md to give the page content so
</q-expansion-item> </q-expansion-item>
<q-expansion-item :dense="true" <q-expansion-item
default-unopened default-unopened
expand-separator expand-separator
icon="fas fa-microchip" icon="fas fa-microchip"
label="Automation" label="Automation"
> >
<q-item :dense="true" v-ripple :inset-level="1" :to="{ name: 'rules.index' }" clickable> <q-item v-ripple :inset-level="1" :to="{ name: 'rules.index' }" clickable>
<q-item-section> <q-item-section>
Rules Rules
</q-item-section> </q-item-section>
</q-item> </q-item>
<q-item :dense="true" v-ripple :inset-level="1" :to="{ name: 'recurring.index' }" clickable> <q-item v-ripple :inset-level="1" :to="{ name: 'recurring.index' }" clickable>
<q-item-section> <q-item-section>
Recurring transactions Recurring transactions
</q-item-section> </q-item-section>
@ -247,18 +246,18 @@ page container: q-ma-xs (margin all, xs) AND q-mb-md to give the page content so
</q-expansion-item> </q-expansion-item>
<q-expansion-item :dense="true" <q-expansion-item
:default-opened="this.$route.name === 'accounts.index' || this.$route.name === 'accounts.show'" :default-opened="this.$route.name === 'accounts.index' || this.$route.name === 'accounts.show'"
expand-separator expand-separator
icon="fas fa-credit-card" icon="fas fa-credit-card"
label="Accounts" label="Accounts"
> >
<q-item :dense="true" v-ripple :inset-level="1" :to="{ name: 'accounts.index', params: {type: 'asset'} }" clickable> <q-item v-ripple :inset-level="1" :to="{ name: 'accounts.index', params: {type: 'asset'} }" clickable>
<q-item-section> <q-item-section>
Asset accounts Asset accounts
</q-item-section> </q-item-section>
</q-item> </q-item>
<q-item :dense="true" v-ripple :inset-level="1" :to="{ name: 'accounts.index', params: {type: 'expense'} }" clickable> <q-item v-ripple :inset-level="1" :to="{ name: 'accounts.index', params: {type: 'expense'} }" clickable>
<q-item-section> <q-item-section>
Expense accounts Expense accounts
</q-item-section> </q-item-section>
@ -268,7 +267,7 @@ page container: q-ma-xs (margin all, xs) AND q-mb-md to give the page content so
Revenue accounts Revenue accounts
</q-item-section> </q-item-section>
</q-item> </q-item>
<q-item :dense="true" v-ripple :inset-level="1" :to="{ name: 'accounts.index', params: {type: 'liabilities'} }" <q-item v-ripple :inset-level="1" :to="{ name: 'accounts.index', params: {type: 'liabilities'} }"
clickable> clickable>
<q-item-section> <q-item-section>
Liabilities Liabilities
@ -277,29 +276,29 @@ page container: q-ma-xs (margin all, xs) AND q-mb-md to give the page content so
</q-expansion-item> </q-expansion-item>
<q-expansion-item :dense="true" <q-expansion-item
default-unopened default-unopened
expand-separator expand-separator
icon="fas fa-tags" icon="fas fa-tags"
label="Classification" label="Classification"
> >
<q-item :dense="true" v-ripple :inset-level="1" :to="{ name: 'categories.index' }" clickable> <q-item v-ripple :inset-level="1" :to="{ name: 'categories.index' }" clickable>
<q-item-section> <q-item-section>
Categories Categories
</q-item-section> </q-item-section>
</q-item> </q-item>
<q-item :dense="true" v-ripple :inset-level="1" :to="{ name: 'tags.index' }" clickable> <q-item v-ripple :inset-level="1" :to="{ name: 'tags.index' }" clickable>
<q-item-section> <q-item-section>
Tags Tags
</q-item-section> </q-item-section>
</q-item> </q-item>
<q-item :dense="true" v-ripple :inset-level="1" :to="{ name: 'groups.index'}" clickable> <q-item v-ripple :inset-level="1" :to="{ name: 'groups.index'}" clickable>
<q-item-section> <q-item-section>
Groups Groups
</q-item-section> </q-item-section>
</q-item> </q-item>
</q-expansion-item> </q-expansion-item>
<q-item :dense="true" v-ripple :to="{ name: 'reports.index'}" clickable> <q-item v-ripple :to="{ name: 'reports.index'}" clickable>
<q-item-section avatar> <q-item-section avatar>
<q-icon name="far fa-chart-bar"/> <q-icon name="far fa-chart-bar"/>
</q-item-section> </q-item-section>
@ -313,10 +312,10 @@ page container: q-ma-xs (margin all, xs) AND q-mb-md to give the page content so
</q-drawer> </q-drawer>
<q-page-container class="q-ma-xs"> <q-page-container>
<Alert></Alert> <Alert></Alert>
<!-- breadcrumb, page title? --> <!-- breadcrumb, page title? -->
<div class="q-mb-md"> <div class="q-ma-md">
<div class="row"> <div class="row">
<div class="col-6"> <div class="col-6">
<h4 class="q-ma-none q-pa-none"> <h4 class="q-ma-none q-pa-none">
@ -333,10 +332,10 @@ page container: q-ma-xs (margin all, xs) AND q-mb-md to give the page content so
</div> </div>
</div> </div>
<router-view/> <router-view />
</q-page-container> </q-page-container>
<q-footer class="bg-grey-8 text-white" elevated> <q-footer class="bg-grey-8 text-white" bordered>
<q-toolbar> <q-toolbar>
<div> <div>
<small>Firefly III v v6.0.0-alpha.2 &copy; James Cole, AGPL-3.0-or-later.</small> <small>Firefly III v v6.0.0-alpha.2 &copy; James Cole, AGPL-3.0-or-later.</small>

30
frontend/src/pages/dashboard/Dashboard.vue
View File

@ -19,20 +19,20 @@
--> -->
<template> <template>
<div> <q-page class="q-ma-md">
<div class="row"> <div class="row">
<div class="col q-mr-sm"> <div class="col-xl-4 col-lg-4 col-md-6 q-pr-sm">
<BillInsightBox/> <BillInsightBox/>
</div> </div>
<div class="col q-mx-sm"> <div class="col-xl-4 col-lg-4 col-md-6 q-px-sm">
<SpendInsightBox/> <SpendInsightBox/>
</div> </div>
<div class="col q-ml-sm"> <div class="col-xl-4 col-lg-4 col-md-6 q-pl-sm">
<NetWorthInsightBox/> <NetWorthInsightBox/>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col"> <div class="col-12 q-pt-sm q-pb-sm">
<AccountChart/> <AccountChart/>
</div> </div>
</div> </div>
@ -75,19 +75,27 @@
square square
vertical-actions-align="right" vertical-actions-align="right"
> >
<q-fab-action :label="$t('firefly.new_budget')" :to="{ name: 'budgets.create' }" color="primary" icon="fas fa-chart-pie" <q-fab-action :label="$t('firefly.new_budget')" :to="{ name: 'budgets.create' }" color="primary"
icon="fas fa-chart-pie"
square/> square/>
<q-fab-action :label="$t('firefly.new_asset_account')" :to="{ name: 'accounts.create', params: {type: 'asset'} }" color="primary" icon="far fa-money-bill-alt" <q-fab-action :label="$t('firefly.new_asset_account')"
:to="{ name: 'accounts.create', params: {type: 'asset'} }" color="primary"
icon="far fa-money-bill-alt"
square/> square/>
<q-fab-action :label="$t('firefly.newTransfer')" :to="{ name: 'transactions.create', params: {type: 'transfer'} }" color="primary" icon="fas fa-exchange-alt" <q-fab-action :label="$t('firefly.newTransfer')"
:to="{ name: 'transactions.create', params: {type: 'transfer'} }" color="primary"
icon="fas fa-exchange-alt"
square/> square/>
<q-fab-action :label="$t('firefly.newDeposit')" :to="{ name: 'transactions.create', params: {type: 'deposit'} }" color="primary" icon="fas fa-long-arrow-alt-right" <q-fab-action :label="$t('firefly.newDeposit')" :to="{ name: 'transactions.create', params: {type: 'deposit'} }"
color="primary" icon="fas fa-long-arrow-alt-right"
square/> square/>
<q-fab-action :label="$t('firefly.newWithdrawal')" :to="{ name: 'transactions.create', params: {type: 'withdrawal'} }" color="primary" icon="fas fa-long-arrow-alt-left" <q-fab-action :label="$t('firefly.newWithdrawal')"
:to="{ name: 'transactions.create', params: {type: 'withdrawal'} }" color="primary"
icon="fas fa-long-arrow-alt-left"
square/> square/>
</q-fab> </q-fab>
</q-page-sticky> </q-page-sticky>
</div> </q-page>
</template> </template>
<script> <script>