Replaced qtip with tippy.js

This commit is contained in:
Alex Tselegidis 2020-10-22 12:29:09 +03:00
parent 4203bf5851
commit 9604aa4ef9
19 changed files with 65 additions and 110 deletions

View file

@ -10,7 +10,6 @@
<link rel="stylesheet" type="text/css" href="<?= asset_url('assets/ext/bootstrap/css/bootstrap.min.css') ?>">
<link rel="stylesheet" type="text/css" href="<?= asset_url('assets/ext/jquery-ui/jquery-ui.min.css') ?>">
<link rel="stylesheet" type="text/css" href="<?= asset_url('assets/ext/jquery-qtip/jquery.qtip.min.css') ?>">
<link rel="stylesheet" type="text/css" href="<?= asset_url('assets/ext/cookieconsent/cookieconsent.min.css') ?>">
<link rel="stylesheet" type="text/css" href="<?= asset_url('assets/css/frontend.css') ?>">
<link rel="stylesheet" type="text/css" href="<?= asset_url('assets/css/general.css') ?>">
@ -32,17 +31,17 @@
<span id="company-name"><?= $company_name ?></span>
<div id="steps">
<div id="step-1" class="book-step active-step" title="<?= lang('service_and_provider') ?>">
<div id="step-1" class="book-step active-step" data-tippy-content="<?= lang('service_and_provider') ?>">
<strong>1</strong>
</div>
<div id="step-2" class="book-step" title="<?= lang('appointment_date_and_time') ?>">
<div id="step-2" class="book-step" data-toggle="tooltip" data-tippy-content="<?= lang('appointment_date_and_time') ?>">
<strong>2</strong>
</div>
<div id="step-3" class="book-step" title="<?= lang('customer_information') ?>">
<div id="step-3" class="book-step" data-toggle="tooltip" data-tippy-content="<?= lang('customer_information') ?>">
<strong>3</strong>
</div>
<div id="step-4" class="book-step" title="<?= lang('appointment_confirmation') ?>">
<div id="step-4" class="book-step" data-toggle="tooltip" data-tippy-content="<?= lang('appointment_confirmation') ?>">
<strong>4</strong>
</div>
</div>
@ -450,9 +449,10 @@
<script src="<?= asset_url('assets/js/general_functions.js') ?>"></script>
<script src="<?= asset_url('assets/ext/jquery/jquery.min.js') ?>"></script>
<script src="<?= asset_url('assets/ext/jquery-ui/jquery-ui.min.js') ?>"></script>
<script src="<?= asset_url('assets/ext/jquery-qtip/jquery.qtip.min.js') ?>"></script>
<script src="<?= asset_url('assets/ext/cookieconsent/cookieconsent.min.js') ?>"></script>
<script src="<?= asset_url('assets/ext/bootstrap/js/bootstrap.bundle.min.js') ?>"></script>
<script src="<?= asset_url('assets/ext/popper/popper.min.js') ?>"></script>
<script src="<?= asset_url('assets/ext/tippy/tippy-bundle.umd.min.js') ?>"></script>
<script src="<?= asset_url('assets/ext/datejs/date.min.js') ?>"></script>
<script src="<?= asset_url('assets/ext/moment/moment.min.js') ?>"></script>
<script src="<?= asset_url('assets/ext/moment/moment-timezone-with-data.min.js') ?>"></script>

View file

@ -44,7 +44,7 @@
<div id="calendar-filter" class="col-12 col-sm-5">
<div class="form-group calendar-filter-items">
<select id="select-filter-item" class="form-control col"
title="<?= lang('select_filter_item_hint') ?>">
data-tippy-content="<?= lang('select_filter_item_hint') ?>">
</select>
</div>
</div>
@ -53,13 +53,13 @@
<?php if (($role_slug == DB_SLUG_ADMIN || $role_slug == DB_SLUG_PROVIDER)
&& config('google_sync_feature') == TRUE): ?>
<button id="google-sync" class="btn btn-primary"
title="<?= lang('trigger_google_sync_hint') ?>">
data-tippy-content="<?= lang('trigger_google_sync_hint') ?>">
<i class="fas fa-sync-alt"></i>
<span><?= lang('synchronize') ?></span>
</button>
<button id="enable-sync" class="btn btn-light" data-toggle="button"
title="<?= lang('enable_appointment_sync_hint') ?>">
data-tippy-content="<?= lang('enable_appointment_sync_hint') ?>">
<i class="far fa-calendar-alt mr-2"></i>
<span><?= lang('enable_sync') ?></span>
</button>
@ -90,20 +90,20 @@
</div>
<?php endif ?>
<button id="reload-appointments" class="btn btn-light" title="<?= lang('reload_appointments_hint') ?>">
<button id="reload-appointments" class="btn btn-light" data-tippy-content="<?= lang('reload_appointments_hint') ?>">
<i class="fas fa-sync-alt"></i>
</button>
<?php if($calendar_view === 'default'): ?>
<a class="btn btn-light" href="<?= site_url('backend?view=table') ?>"
title="<?= lang('table') ?>">
data-tippy-content="<?= lang('table') ?>">
<i class="fas fa-table"></i>
</a>
<?php endif ?>
<?php if($calendar_view === 'table'): ?>
<a class="btn btn-light" href="<?= site_url('backend?view=default') ?>"
title="<?= lang('default') ?>">
data-tippy-content="<?= lang('default') ?>">
<i class="fas fa-calendar-alt"></i>
</a>
<?php endif ?>
@ -272,12 +272,12 @@
<legend>
<?= lang('customer_details_title') ?>
<button id="new-customer" class="btn btn-outline-secondary btn-sm" type="button"
title="<?= lang('clear_fields_add_existing_customer_hint') ?>">
data-tippy-content="<?= lang('clear_fields_add_existing_customer_hint') ?>">
<i class="far fa-plus-square mr-2"></i>
<?= lang('new') ?>
</button>
<button id="select-customer" class="btn btn-outline-secondary btn-sm" type="button"
title="<?= lang('pick_existing_customer_hint') ?>">
data-tippy-content="<?= lang('pick_existing_customer_hint') ?>">
<i class="far fa-hand-pointer mr-2"></i>
<span>
<?= lang('select') ?>

View file

@ -35,10 +35,10 @@
<div class="input-group-addon">
<div>
<button class="filter btn btn-outline-secondary" type="submit" title="<?= lang('filter') ?>">
<button class="filter btn btn-outline-secondary" type="submit" data-tippy-content="<?= lang('filter') ?>">
<i class="fas fa-search"></i>
</button>
<button class="clear btn btn-outline-secondary" type="button" title="<?= lang('clear') ?>">
<button class="clear btn btn-outline-secondary" type="button" data-tippy-content="<?= lang('clear') ?>">
<i class="fas fa-redo-alt"></i>
</button>
</div>

View file

@ -8,7 +8,6 @@
<link rel="stylesheet" type="text/css" href="<?= asset_url('assets/ext/bootstrap/css/bootstrap.min.css') ?>">
<link rel="stylesheet" type="text/css" href="<?= asset_url('assets/ext/jquery-ui/jquery-ui.min.css') ?>">
<link rel="stylesheet" type="text/css" href="<?= asset_url('assets/ext/jquery-qtip/jquery.qtip.min.css') ?>">
<link rel="stylesheet" type="text/css" href="<?= asset_url('assets/ext/trumbowyg/ui/trumbowyg.min.css') ?>">
<link rel="stylesheet" type="text/css" href="<?= asset_url('assets/ext/select2/select2.min.css') ?>">
<link rel="stylesheet" type="text/css" href="<?= asset_url('assets/css/backend.css') ?>">
@ -25,8 +24,9 @@
<script src="<?= asset_url('assets/ext/jquery/jquery.min.js') ?>"></script>
<script src="<?= asset_url('assets/ext/bootstrap/js/bootstrap.bundle.min.js') ?>"></script>
<script src="<?= asset_url('assets/ext/popper/popper.min.js') ?>"></script>
<script src="<?= asset_url('assets/ext/tippy/tippy-bundle.umd.min.js') ?>"></script>
<script src="<?= asset_url('assets/ext/jquery-ui/jquery-ui.min.js') ?>"></script>
<script src="<?= asset_url('assets/ext/jquery-qtip/jquery.qtip.min.js') ?>"></script>
<script src="<?= asset_url('assets/ext/moment/moment.min.js') ?>"></script>
<script src="<?= asset_url('assets/ext/datejs/date.min.js') ?>"></script>
<script src="<?= asset_url('assets/ext/trumbowyg/trumbowyg.min.js') ?>"></script>
@ -53,7 +53,7 @@
<?php $active = ($active_menu == PRIV_APPOINTMENTS) ? 'active' : '' ?>
<li class="nav-item <?= $active . $hidden ?>">
<a href="<?= site_url('backend') ?>" class="nav-link"
title="<?= lang('manage_appointment_record_hint') ?>">
data-tippy-content="<?= lang('manage_appointment_record_hint') ?>">
<i class="far fa-calendar-alt mr-2"></i>
<?= lang('calendar') ?>
</a>
@ -63,7 +63,7 @@
<?php $active = ($active_menu == PRIV_CUSTOMERS) ? 'active' : '' ?>
<li class="nav-item <?= $active . $hidden ?>">
<a href="<?= site_url('backend/customers') ?>" class="nav-link"
title="<?= lang('manage_customers_hint') ?>">
data-tippy-content="<?= lang('manage_customers_hint') ?>">
<i class="fas fa-user-friends mr-2"></i>
<?= lang('customers') ?>
</a>
@ -73,7 +73,7 @@
<?php $active = ($active_menu == PRIV_SERVICES) ? 'active' : '' ?>
<li class="nav-item <?= $active . $hidden ?>">
<a href="<?= site_url('backend/services') ?>" class="nav-link"
title="<?= lang('manage_services_hint') ?>">
data-tippy-content="<?= lang('manage_services_hint') ?>">
<i class="fas fa-business-time mr-2"></i>
<?= lang('services') ?>
</a>
@ -83,7 +83,7 @@
<?php $active = ($active_menu == PRIV_USERS) ? 'active' : '' ?>
<li class="nav-item <?= $active . $hidden ?>">
<a href="<?= site_url('backend/users') ?>" class="nav-link"
title="<?= lang('manage_users_hint') ?>">
data-tippy-content="<?= lang('manage_users_hint') ?>">
<i class="fas fa-users-cog mr-2"></i>
<?= lang('users') ?>
</a>
@ -94,7 +94,7 @@
<?php $active = ($active_menu == PRIV_SYSTEM_SETTINGS) ? 'active' : '' ?>
<li class="nav-item <?= $active . $hidden ?>">
<a href="<?= site_url('backend/settings') ?>" class="nav-link"
title="<?= lang('settings_hint') ?>">
data-tippy-content="<?= lang('settings_hint') ?>">
<i class="fas fa-cogs mr-2"></i>
<?= lang('settings') ?>
</a>
@ -102,7 +102,7 @@
<li class="nav-item">
<a href="<?= site_url('user/logout') ?>" class="nav-link"
title="<?= lang('log_out_hint') ?>">
data-tippy-content="<?= lang('log_out_hint') ?>">
<i class="fas fa-sign-out-alt mr-2"></i>
<?= lang('log_out') ?>
</a>

View file

@ -51,10 +51,10 @@
<div class="input-group-addon">
<div>
<button class="filter btn btn-outline-secondary" type="submit" title="<?= lang('filter') ?>">
<button class="filter btn btn-outline-secondary" type="submit" data-tippy-content="<?= lang('filter') ?>">
<i class="fas fa-search"></i>
</button>
<button class="clear btn btn-outline-secondary" type="button" title="<?= lang('clear') ?>">
<button class="clear btn btn-outline-secondary" type="button" data-tippy-content="<?= lang('clear') ?>">
<i class="fas fa-redo-alt"></i>
</button>
</div>
@ -192,10 +192,10 @@
<div class="input-group-addon">
<div>
<button class="filter btn btn-outline-secondary" type="submit" title="<?= lang('filter') ?>">
<button class="filter btn btn-outline-secondary" type="submit" data-tippy-content="<?= lang('filter') ?>">
<i class="fas fa-search"></i>
</button>
<button class="clear btn btn-outline-secondary" type="button" title="<?= lang('clear') ?>">
<button class="clear btn btn-outline-secondary" type="button" data-tippy-content="<?= lang('clear') ?>">
<i class="fas fa-redo-alt"></i>
</button>
</div>

View file

@ -70,7 +70,7 @@
<?= lang('general_settings') ?>
<?php if ($privileges[PRIV_SYSTEM_SETTINGS]['edit'] == TRUE): ?>
<button type="button" class="save-settings btn btn-primary btn-sm mb-2"
title="<?= lang('save') ?>">
data-tippy-content="<?= lang('save') ?>">
<i class="far fa-check-square mr-2"></i>
<?= lang('save') ?>
</button>
@ -223,7 +223,7 @@
<?= lang('business_logic') ?>
<?php if ($privileges[PRIV_SYSTEM_SETTINGS]['edit'] == TRUE): ?>
<button type="button" class="save-settings btn btn-primary btn-sm mb-2"
title="<?= lang('save') ?>">
data-tippy-content="<?= lang('save') ?>">
<i class="far fa-check-square mr-2"></i>
<?= lang('save') ?>
</button>
@ -311,7 +311,7 @@
<?= lang('legal_contents') ?>
<?php if ($privileges[PRIV_SYSTEM_SETTINGS]['edit'] == TRUE): ?>
<button type="button" class="save-settings btn btn-primary btn-sm mb-2"
title="<?= lang('save') ?>">
data-tippy-content="<?= lang('save') ?>">
<i class="far fa-check-square mr-2"></i>
<?= lang('save') ?>
</button>
@ -392,7 +392,7 @@
<?= lang('personal_information') ?>
<?php if ($privileges[PRIV_USER_SETTINGS]['edit'] == TRUE): ?>
<button type="button" class="save-settings btn btn-primary btn-sm mb-2"
title="<?= lang('save') ?>">
data-tippy-content="<?= lang('save') ?>">
<i class="far fa-check-square mr-2"></i>
<?= lang('save') ?>
</button>

View file

@ -68,10 +68,10 @@
<span class="input-group-addon">
<div>
<button class="filter btn btn-outline-secondary" type="submit" title="<?= lang('filter') ?>">
<button class="filter btn btn-outline-secondary" type="submit" data-tippy-content="<?= lang('filter') ?>">
<i class="fas fa-search"></i>
</button>
<button class="clear btn btn-outline-secondary" type="button" title="<?= lang('clear') ?>">
<button class="clear btn btn-outline-secondary" type="button" data-tippy-content="<?= lang('clear') ?>">
<i class="fas fa-redo-alt"></i>
</button>
</div>
@ -284,7 +284,7 @@
<div class="working-plan-view tab-pane fade clearfix" id="working-plan">
<h3><?= lang('working_plan') ?></h3>
<button id="reset-working-plan" class="btn btn-primary"
title="<?= lang('reset_working_plan') ?>">
data-tippy-content="<?= lang('reset_working_plan') ?>">
<i class="fas fa-redo-alt mr-2"></i>
<?= lang('reset_plan') ?></button>
<table class="working-plan table table-striped mt-2">
@ -374,10 +374,10 @@
<span class="input-group-addon">
<div>
<button class="filter btn btn-outline-secondary" type="submit" title="<?= lang('filter') ?>">
<button class="filter btn btn-outline-secondary" type="submit" data-tippy-content="<?= lang('filter') ?>">
<i class="fas fa-search"></i>
</button>
<button class="clear btn btn-outline-secondary" type="button" title="<?= lang('clear') ?>">
<button class="clear btn btn-outline-secondary" type="button" data-tippy-content="<?= lang('clear') ?>">
<i class="fas fa-redo-alt"></i>
</button>
</div>
@ -580,10 +580,10 @@
<span class="input-group-addon">
<div>
<button class="filter btn btn-outline-secondary" type="submit" title="<?= lang('filter') ?>">
<button class="filter btn btn-outline-secondary" type="submit" data-tippy-content="<?= lang('filter') ?>">
<i class="fas fa-search"></i>
</button>
<button class="clear btn btn-outline-secondary" type="button" title="<?= lang('clear') ?>">
<button class="clear btn btn-outline-secondary" type="button" data-tippy-content="<?= lang('clear') ?>">
<i class="fas fa-redo-alt"></i>
</button>
</div>

View file

@ -147,6 +147,7 @@ body {
text-align: center;
color: #0bb98d;
transition: all .3s linear;
cursor: default;
}
#book-appointment-wizard .active-step {
@ -171,10 +172,6 @@ body {
border-top: 1px solid #ebeef1;
}
#book-appointment-wizard #steps .custom-qtip {
border-width: 2px;
}
#book-appointment-wizard #available-hours {
overflow: auto;
margin: 15px 0;

View file

@ -15,17 +15,6 @@
}
}
body .custom-qtip {
border: none;
border-radius: 0;
padding: 10px;
box-shadow: 1px 1px 3px #767676;
background: #EFFDF6;
font-size: 12px;
line-height: 20px;
color: #258D53;
}
body .ui-widget {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-size: 1.1em;

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

6
assets/ext/popper/popper.min.js vendored Normal file

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View file

@ -25,7 +25,7 @@ window.Backend = window.Backend || {};
/**
* Main javascript code for the backend of Easy!Appointments.
*/
$(document).ready(function () {
$(function () {
$(window)
.on('resize', function () {
Backend.placeFooterToBottom();
@ -40,15 +40,7 @@ window.Backend = window.Backend || {};
$('#loading').hide();
});
$('.menu-item').qtip({
position: {
my: 'top center',
at: 'bottom center'
},
style: {
classes: 'qtip-green qtip-shadow custom-qtip'
}
});
tippy('[data-tippy-content]');
GeneralFunctions.enableLanguageSelection($('#select-language'));
});

View file

@ -1612,27 +1612,6 @@ window.BackendCalendarDefaultView = window.BackendCalendarDefaultView || {};
$dialog.modal('show');
}
// Apply qtip to control tooltips.
$('#calendar-toolbar button').qtip({
position: {
my: 'top center',
at: 'bottom center'
},
style: {
classes: 'qtip-green qtip-shadow custom-qtip'
}
});
$('#select-filter-item').qtip({
position: {
my: 'middle left',
at: 'middle right'
},
style: {
classes: 'qtip-green qtip-shadow custom-qtip'
}
});
if (!$('#select-filter-item option').length) {
$('#calendar-actions button').prop('disabled', true);
}

View file

@ -113,16 +113,6 @@ window.BackendUsers = window.BackendUsers || {};
.appendTo('#secretary-providers');
});
$('#reset-working-plan').qtip({
position: {
my: 'top center',
at: 'bottom center'
},
style: {
classes: 'qtip-green qtip-shadow custom-qtip'
}
});
// Bind event handlers.
if (defaultEventHandlers) {
bindEventHandlers();

View file

@ -89,15 +89,7 @@ window.FrontendBook = window.FrontendBook || {};
FrontendBook.manageMode = manageMode;
// Initialize page's components (tooltips, datepickers etc).
$('.book-step').qtip({
position: {
my: 'top center',
at: 'bottom center'
},
style: {
classes: 'qtip-green qtip-shadow custom-qtip'
}
});
tippy('[data-tippy-content]');
var weekDayId = GeneralFunctions.getWeekDayId(GlobalVariables.firstWeekday);

13
package-lock.json generated
View file

@ -14,6 +14,11 @@
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-5.15.1.tgz",
"integrity": "sha512-OEdH7SyC1suTdhBGW91/zBfR6qaIhThbcN8PUXtXilY4GYnSBbVqOntdHbC1vXwsDnX0Qix2m2+DSU1J51ybOQ=="
},
"@popperjs/core": {
"version": "2.5.3",
"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.5.3.tgz",
"integrity": "sha512-RFwCobxsvZ6j7twS7dHIZQZituMIDJJNHS/qY6iuthVebxS3zhRY+jaC2roEKiAYaVuTcGmX6Luc6YBcf6zJVg=="
},
"abbrev": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
@ -13848,6 +13853,14 @@
"integrity": "sha1-dkpaEa9QVhkhsTPztE5hhofg9cM=",
"dev": true
},
"tippy.js": {
"version": "6.2.7",
"resolved": "https://registry.npmjs.org/tippy.js/-/tippy.js-6.2.7.tgz",
"integrity": "sha512-k+kWF9AJz5xLQHBi3K/XlmJiyu+p9gsCyc5qZhxxGaJWIW8SMjw1R+C7saUnP33IM8gUhDA2xX//ejRSwqR0tA==",
"requires": {
"@popperjs/core": "^2.4.4"
}
},
"to-absolute-glob": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/to-absolute-glob/-/to-absolute-glob-2.0.2.tgz",

View file

@ -34,6 +34,7 @@
"moment": "^2.29.1",
"moment-timezone": "^0.5.31",
"qtip2": "^3.0.3",
"tippy.js": "^6.2.7",
"trumbowyg": "^2.21.0"
},
"devDependencies": {