Merge pull request #1070 from batuhawk/master

Tooltips added for dashboard status
This commit is contained in:
Batuhan Baş 2020-01-02 13:09:49 +03:00 committed by GitHub
commit bcc0ba960a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 100 additions and 34 deletions

View File

@ -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

View File

@ -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 {

View File

@ -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: [],
};
},

View File

@ -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
],

View File

@ -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

View File

@ -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>

View File

@ -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>

View File

@ -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>