Merge pull request #1070 from batuhawk/master
Tooltips added for dashboard status
This commit is contained in:
commit
bcc0ba960a
6
public/css/custom.css
vendored
6
public/css/custom.css
vendored
@ -55,6 +55,12 @@ button:focus
|
||||
}
|
||||
/*--------Cursor Pointer Finish--------*/
|
||||
|
||||
/*--------Cursor Default--------*/
|
||||
.cursor-default
|
||||
{
|
||||
cursor: default !important;
|
||||
}
|
||||
/*--------Cursor Default Finish--------*/
|
||||
|
||||
/*--------Table Head Search--------*/
|
||||
.table-header-search
|
||||
|
10
public/css/element.css
vendored
10
public/css/element.css
vendored
@ -6239,11 +6239,11 @@
|
||||
|
||||
.el-tooltip__popper.is-light {
|
||||
background: #FFF;
|
||||
border: 1px solid #303133
|
||||
border: 1px solid #FFF
|
||||
}
|
||||
|
||||
.el-tooltip__popper.is-light[x-placement^=top] .popper__arrow {
|
||||
border-top-color: #303133
|
||||
border-top-color: #FFF
|
||||
}
|
||||
|
||||
.el-tooltip__popper.is-light[x-placement^=top] .popper__arrow::after {
|
||||
@ -6251,7 +6251,7 @@
|
||||
}
|
||||
|
||||
.el-tooltip__popper.is-light[x-placement^=bottom] .popper__arrow {
|
||||
border-bottom-color: #303133
|
||||
border-bottom-color: #FFF
|
||||
}
|
||||
|
||||
.el-tooltip__popper.is-light[x-placement^=bottom] .popper__arrow::after {
|
||||
@ -6259,7 +6259,7 @@
|
||||
}
|
||||
|
||||
.el-tooltip__popper.is-light[x-placement^=left] .popper__arrow {
|
||||
border-left-color: #303133
|
||||
border-left-color: #FFF
|
||||
}
|
||||
|
||||
.el-tooltip__popper.is-light[x-placement^=left] .popper__arrow::after {
|
||||
@ -6267,7 +6267,7 @@
|
||||
}
|
||||
|
||||
.el-tooltip__popper.is-light[x-placement^=right] .popper__arrow {
|
||||
border-right-color: #303133
|
||||
border-right-color: #FFF
|
||||
}
|
||||
|
||||
.el-tooltip__popper.is-light[x-placement^=right] .popper__arrow::after {
|
||||
|
@ -14,15 +14,16 @@ import {getQueryVariable} from './../../plugins/functions';
|
||||
import AkauntingDashboard from './../../components/AkauntingDashboard';
|
||||
import AkauntingWidget from './../../components/AkauntingWidget';
|
||||
|
||||
import {DatePicker} from 'element-ui';
|
||||
import {DatePicker, Tooltip} from 'element-ui';
|
||||
|
||||
Vue.use(DatePicker);
|
||||
Vue.use(DatePicker, Tooltip);
|
||||
|
||||
const dashboard = new Vue({
|
||||
el: '#main-body',
|
||||
|
||||
components: {
|
||||
[DatePicker.name]: DatePicker,
|
||||
[Tooltip.name]: Tooltip,
|
||||
AkauntingDashboard,
|
||||
AkauntingWidget
|
||||
},
|
||||
@ -51,6 +52,7 @@ const dashboard = new Vue({
|
||||
sort: 0,
|
||||
},
|
||||
filter_date: [],
|
||||
|
||||
};
|
||||
},
|
||||
|
||||
|
@ -11,12 +11,17 @@ import Vue from 'vue';
|
||||
|
||||
import Global from './../../mixins/global';
|
||||
|
||||
import Form from './../../plugins/form';
|
||||
import BulkAction from './../../plugins/bulk-action';
|
||||
import {Tooltip} from 'element-ui';
|
||||
|
||||
Vue.use(Tooltip);
|
||||
|
||||
const app = new Vue({
|
||||
el: '#app',
|
||||
|
||||
components: {
|
||||
[Tooltip.name]: Tooltip,
|
||||
},
|
||||
|
||||
mixins: [
|
||||
Global
|
||||
],
|
||||
|
@ -20,11 +20,18 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<div class="progress progress-xs mb-0" data-toggle="tooltip" data-placement="top" title="{{ $progress['total'] }} / {{ $progress['unpaid'] }}">
|
||||
<div class="progress-bar bg-danger" role="progressbar" aria-valuenow="{{ !empty($progress['total']) ? (100 / $progress['total']) * $progress['unpaid'] : '0' }}" aria-valuemin="0" aria-valuemax="100" style="width: {{ !empty($progress['total']) ? (100 / $progress['total']) * $progress['unpaid'] : '0' }}%"></div>
|
||||
<el-tooltip
|
||||
content="{{ $progress['total'] }} / {{ $progress['unpaid'] }}"
|
||||
effect="light"
|
||||
:open-delay="200"
|
||||
placement="top"
|
||||
popper-class="text-dark">
|
||||
<div class="card-footer">
|
||||
<div class="progress progress-xs mb-0">
|
||||
<div class="progress-bar bg-danger" role="progressbar" aria-valuenow="{{ !empty($progress['total']) ? (100 / $progress['total']) * $progress['unpaid'] : '0' }}" aria-valuemin="0" aria-valuemax="100" style="width: {{ !empty($progress['total']) ? (100 / $progress['total']) * $progress['unpaid'] : '0' }}%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -44,11 +51,18 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<div class="progress progress-xs mb-0" data-toggle="tooltip" data-placement="top" title="{{ $progress['total'] }} / {{ $progress['paid'] }}">
|
||||
<div class="progress-bar bg-success" role="progressbar" aria-valuenow="{{ !empty($progress['total']) ? (100 / $progress['total']) * $progress['paid'] : '0' }}" aria-valuemin="0" aria-valuemax="100" style="width: {{ !empty($progress['total']) ? (100 / $progress['total']) * $progress['paid'] : '0' }}%"></div>
|
||||
<el-tooltip
|
||||
content="{{ $progress['total'] }} / {{ $progress['paid'] }}"
|
||||
effect="light"
|
||||
:open-delay="200"
|
||||
placement="top"
|
||||
popper-class="text-dark">
|
||||
<div class="card-footer">
|
||||
<div class="progress progress-xs mb-0">
|
||||
<div class="progress-bar bg-success" role="progressbar" aria-valuenow="{{ !empty($progress['total']) ? (100 / $progress['total']) * $progress['paid'] : '0' }}" aria-valuemin="0" aria-valuemax="100" style="width: {{ !empty($progress['total']) ? (100 / $progress['total']) * $progress['paid'] : '0' }}%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -68,11 +82,18 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<div class="progress progress-xs mb-0" data-toggle="tooltip" data-placement="top" title="{{ $progress['total'] }} / {{ $progress['overdue'] }}">
|
||||
<div class="progress-bar bg-warning" role="progressbar" aria-valuenow="{{ !empty($progress['total']) ? (100 / $progress['total']) * $progress['overdue'] : '0' }}" aria-valuemin="0" aria-valuemax="100" style="width: {{ !empty($progress['total']) ? (100 / $progress['total']) * $progress['overdue'] : '0' }}%"></div>
|
||||
<el-tooltip
|
||||
content="{{ $progress['total'] }} / {{ $progress['overdue'] }}"
|
||||
effect="light"
|
||||
:open-delay="200"
|
||||
placement="top"
|
||||
popper-class="text-dark">
|
||||
<div class="card-footer">
|
||||
<div class="progress progress-xs mb-0">
|
||||
<div class="progress-bar bg-warning" role="progressbar" aria-valuenow="{{ !empty($progress['total']) ? (100 / $progress['total']) * $progress['overdue'] : '0' }}" aria-valuemin="0" aria-valuemax="100" style="width: {{ !empty($progress['total']) ? (100 / $progress['total']) * $progress['overdue'] : '0' }}%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -92,18 +113,25 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<div class="progress progress-xs mb-0" data-toggle="tooltip" data-placement="top" title="{{ $progress['total'] }} / {{ $progress['partially_paid'] }}">
|
||||
<div class="progress-bar bg-info" role="progressbar" aria-valuenow="{{ !empty($progress['total']) ? (100 / $progress['total']) * $progress['partially_paid'] : '0' }}" aria-valuemin="0" aria-valuemax="100" style="width: {{ !empty($progress['total']) ? (100 / $progress['total']) * $progress['partially_paid'] : '0' }}%"></div>
|
||||
<el-tooltip
|
||||
content="{{ $progress['total'] }} / {{ $progress['partially_paid'] }}"
|
||||
effect="light"
|
||||
:open-delay="200"
|
||||
placement="top"
|
||||
popper-class="text-dark">
|
||||
<div class="card-footer">
|
||||
<div class="progress progress-xs mb-0">
|
||||
<div class="progress-bar bg-info" role="progressbar" aria-valuenow="{{ !empty($progress['total']) ? (100 / $progress['total']) * $progress['partially_paid'] : '0' }}" aria-valuemin="0" aria-valuemax="100" style="width: {{ !empty($progress['total']) ? (100 / $progress['total']) * $progress['partially_paid'] : '0' }}%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="mb-0">{{ trans('dashboard.cash_flow') }}</h4>
|
||||
<h4 class="mb-0">{{ trans('widgets.cash_flow') }}</h4>
|
||||
</div>
|
||||
<div class="card-body pt-0" id="chart">
|
||||
{!! $chart->container() !!}
|
||||
@ -116,3 +144,7 @@
|
||||
@push('body_js')
|
||||
{!! $chart->script() !!}
|
||||
@endpush
|
||||
|
||||
@push('scripts_start')
|
||||
<script src="{{ asset('public/js/portal/dashboard.js?v=' . version('short')) }}"></script>
|
||||
@endpush
|
||||
|
@ -16,9 +16,16 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="mt-3 mb-0 text-sm" title="{{ trans('widgets.open_bills') }}: {{ $totals['open'] }}<br>{{ trans('widgets.overdue_bills') }}: {{ $totals['overdue'] }}" data-toggle="tooltip" data-html="true">
|
||||
<p class="mt-3 mb-0 text-sm cursor-default">
|
||||
<span class="text-white">{{ trans('widgets.payables') }}</span>
|
||||
<span class="text-white font-weight-bold float-right">{{ $totals['open'] }} / {{ $totals['overdue'] }}</span>
|
||||
<el-tooltip
|
||||
content="{{ trans('widgets.open_bills') }}: {{ $totals['open'] }} / {{ trans('widgets.overdue_bills') }}: {{ $totals['overdue'] }}"
|
||||
effect="light"
|
||||
:open-delay="200"
|
||||
placement="top"
|
||||
popper-class="text-dark">
|
||||
<span class="text-white font-weight-bold float-right">{{ $totals['open'] }} / {{ $totals['overdue'] }}</span>
|
||||
</el-tooltip>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -16,10 +16,17 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="mt-3 mb-0 text-sm" title="{{ trans('widgets.open_invoices') }}: {{ $totals['open'] }}<br>{{ trans('widgets.overdue_invoices') }}: {{ $totals['overdue'] }}" data-toggle="tooltip" data-html="true">
|
||||
<span class="text-white">{{ trans('widgets.receivables') }}</span>
|
||||
<span class="text-white font-weight-bold float-right">{{ $totals['open'] }} / {{ $totals['overdue'] }}</span>
|
||||
</p>
|
||||
<p class="mt-3 mb-0 text-sm cursor-default">
|
||||
<span class="text-white">{{ trans('widgets.receivables') }}</span>
|
||||
<el-tooltip
|
||||
content="{{ trans('widgets.open_invoices') }}: {{ $totals['open'] }} / {{ trans('widgets.overdue_invoices') }}: {{ $totals['overdue'] }}"
|
||||
effect="light"
|
||||
:open-delay="200"
|
||||
placement="top"
|
||||
popper-class="text-dark">
|
||||
<span class="text-white font-weight-bold float-right">{{ $totals['open'] }} / {{ $totals['overdue'] }}</span>
|
||||
</el-tooltip>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -16,9 +16,16 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="mt-3 mb-0 text-sm" title="{{ trans('widgets.open_profit') }}: {{ $totals['open'] }}<br>{{ trans('widgets.overdue_profit') }}: {{ $totals['overdue'] }}" data-toggle="tooltip" data-html="true">
|
||||
<p class="mt-3 mb-0 text-sm cursor-default">
|
||||
<span class="text-white">{{ trans('general.upcoming') }}</span>
|
||||
<span class="text-white font-weight-bold float-right">{{ $totals['open'] }} / {{ $totals['overdue'] }}</span>
|
||||
<el-tooltip
|
||||
content="{{ trans('widgets.open_profit') }}: {{ $totals['open'] }} / {{ trans('widgets.overdue_profit') }}: {{ $totals['overdue'] }}"
|
||||
effect="light"
|
||||
:open-delay="200"
|
||||
placement="top"
|
||||
popper-class="text-dark">
|
||||
<span class="text-white font-weight-bold float-right">{{ $totals['open'] }} / {{ $totals['overdue'] }}</span>
|
||||
</el-tooltip>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
Loading…
x
Reference in New Issue
Block a user