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>
<div class="q-mt-sm q-mr-sm">
<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/>
<q-card flat bordered>
<ApexChart ref="chart" :options="options" :series="series" height="350" type="line"></ApexChart>
</q-card>
</div>
<div>
</div>
</template>
<script>

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

@ -25,7 +25,7 @@
<q-card bordered flat>
<q-item>
<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>
<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-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-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
</q-toolbar-title>
<q-select
ref="search" v-model="search" :stack-label="false" class="q-mx-xs" color="black" dark
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-drawer show-if-above v-model="leftDrawerOpen" side="left" bordered>
<q-scroll-area class="fit">
<div class="q-pt-xs">
<q-list :dense="true">
<q-item v-ripple :to="{ name: 'index' }" clickable :dense="true">
<div class="q-pt-md">
<q-list>
<q-item v-ripple :to="{ name: 'index' }" clickable>
<q-item-section avatar>
<q-icon name="fas fa-tachometer-alt"/>
</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
</q-item-section>
</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-icon name="fas fa-chart-pie"/>
</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
</q-item-section>
</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-icon name="far fa-calendar-alt"/>
</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
</q-item-section>
</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-icon name="fas fa-piggy-bank"/>
</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>
<q-expansion-item :dense="true"
<q-expansion-item
:default-opened="this.$route.name === 'transactions.index' || this.$route.name === 'transactions.show'"
expand-separator
icon="fas fa-exchange-alt"
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>
<q-item-section>
Withdrawals
</q-item-section>
</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>
<q-item-section>
Deposits
</q-item-section>
</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>
<q-item-section>
Transfers
</q-item-section>
</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>
<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 :dense="true"
<q-expansion-item
default-unopened
expand-separator
icon="fas fa-microchip"
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>
Rules
</q-item-section>
</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>
Recurring transactions
</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 :dense="true"
<q-expansion-item
:default-opened="this.$route.name === 'accounts.index' || this.$route.name === 'accounts.show'"
expand-separator
icon="fas fa-credit-card"
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>
Asset accounts
</q-item-section>
</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>
Expense accounts
</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
</q-item-section>
</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>
<q-item-section>
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 :dense="true"
<q-expansion-item
default-unopened
expand-separator
icon="fas fa-tags"
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>
Categories
</q-item-section>
</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>
Tags
</q-item-section>
</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>
Groups
</q-item-section>
</q-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-icon name="far fa-chart-bar"/>
</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-page-container class="q-ma-xs">
<q-page-container>
<Alert></Alert>
<!-- breadcrumb, page title? -->
<div class="q-mb-md">
<div class="q-ma-md">
<div class="row">
<div class="col-6">
<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>
<router-view/>
<router-view />
</q-page-container>
<q-footer class="bg-grey-8 text-white" elevated>
<q-footer class="bg-grey-8 text-white" bordered>
<q-toolbar>
<div>
<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>
<div>
<q-page class="q-ma-md">
<div class="row">
<div class="col q-mr-sm">
<div class="col-xl-4 col-lg-4 col-md-6 q-pr-sm">
<BillInsightBox/>
</div>
<div class="col q-mx-sm">
<div class="col-xl-4 col-lg-4 col-md-6 q-px-sm">
<SpendInsightBox/>
</div>
<div class="col q-ml-sm">
<div class="col-xl-4 col-lg-4 col-md-6 q-pl-sm">
<NetWorthInsightBox/>
</div>
</div>
<div class="row">
<div class="col">
<div class="col-12 q-pt-sm q-pb-sm">
<AccountChart/>
</div>
</div>
@ -75,19 +75,27 @@
square
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/>
<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/>
<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/>
<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/>
<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/>
</q-fab>
</q-page-sticky>
</div>
</q-page>
</template>
<script>