Skip to content

Commit

Permalink
Standardize loading spinners
Browse files Browse the repository at this point in the history
  • Loading branch information
@cconard96
cconard96 authored Jan 23, 2025
1 parent 3f74e92 commit be2b2f5
Show file tree
Hide file tree
Showing 13 changed files with 136 additions and 158 deletions.
7 changes: 0 additions & 7 deletions css/includes/components/_utils.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,13 +44,6 @@
transition: border-color 0.3s;
}

// Apply the same font-size and line-height as btn-text.
// Useful when replacing a btn-text content by a loading icon.
.btn-text-loading {
font-size: var(--tblr-btn-font-size) !important;
line-height: var(--tblr-btn-line-height) !important;
}

.w-fit-content {
width: fit-content !important;
}
Expand Down
13 changes: 3 additions & 10 deletions js/modules/IllustrationPicker/Controller.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -167,16 +167,9 @@ export class GlpiIllustrationPickerController
const button = this.#container
.querySelector(`[data-glpi-icon-picker-go-to-page="${page}"]`)
;
const button_text = button.querySelector(
'[data-glpi-icon-picker-pagination-text'
);
const button_loading_indicator = button.querySelector(
'[data-glpi-icon-picker-pagination-loading-icon'
);

button.classList.add('active');
button_text.classList.add('d-none');
button_loading_indicator.classList.remove('d-none');
button.classList.add('btn-loading');

// Apply loading indicator to the search results
this.#getSearchResultsDiv().style.opacity = 0.7;
Expand Down Expand Up @@ -225,13 +218,13 @@ export class GlpiIllustrationPickerController

#getSearchDefaultIcon()
{
return this.#container.querySelector('[data-glpi-icon-picker-filter-default-icon')
return this.#container.querySelector('[data-glpi-icon-picker-filter-default-icon]')
;
}

#getSearchLoadingIcon()
{
return this.#container.querySelector('[data-glpi-icon-picker-filter-loading-icon');
return this.#container.querySelector('[data-glpi-icon-picker-filter-loading-icon]');
}

#getSearchResultsDiv()
Expand Down
2 changes: 1 addition & 1 deletion src/Ajax.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -428,7 +428,7 @@ class='nav-link justify-content-between $navlinkp $display_class'
updateCurrentTab();
return;
}
$(target).html('<i class=\"fas fa-3x fa-spinner fa-pulse position-absolute m-5 start-50\"></i>');
$(target).html(`<span class="spinner-border spinner-border position-absolute m-5 start-50" role="status" aria-hidden="true"></span>`);
$.get(url, function(data) {
$(target).html(data);
Expand Down
2 changes: 1 addition & 1 deletion src/Glpi/Dashboard/Grid.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -153,7 +153,7 @@ public function getCards()

$card_html = <<<HTML
<div class="loading-card">
<i class="fas fa-spinner fa-spin fa-3x"></i>
<span class="spinner-border spinner-border" role="status" aria-hidden="true"></span>
</div>
HTML;
$this->addGridItem(
Expand Down
2 changes: 1 addition & 1 deletion src/Impact.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1064,7 +1064,7 @@ public static function printImpactNetworkContainer()
echo '</div>'; // <div class="impact-side-search-no-results">

echo '<div class="impact-side-search-spinner">';
echo '<i class="fas fa-spinner fa-2x fa-spin"></i>';
echo '<span class="spinner-border spinner-border m-3" role="status" aria-hidden="true"></span>';
echo '</div>'; // <div class="impact-side-search-spinner">

echo '</div>'; // <div class="impact-side-search-panel">
Expand Down
2 changes: 1 addition & 1 deletion templates/central/widget_tab.html.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@
'widget': this_obj.data('widget'),
'params': this_obj.data('params')
};
this_obj.html('<i class="fas fa-3x fa-spinner fa-spin ms-auto"></i>')
this_obj.html('<span class="spinner-border ms-auto" role="status" aria-hidden="true"></span>')
.load('{{ path('/ajax/central.php') }}', params, function(response, status, xhr) {
const parent = this_obj.closest('.grid-item').parent();
Expand Down
12 changes: 6 additions & 6 deletions templates/components/form/inventory_info.html.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -100,15 +100,15 @@
<div class="mb-3 col-12 col-sm-4">
<label class="form-label" >
{{ __('Agent status') }}
<i id="update-status" class="fas fa-sync" role="button" title="{{ __('Ask agent about its current status') }}"></i>
<i id="update-status" class="ti ti-refresh d-inline-block" role="button" title="{{ __('Ask agent about its current status') }}"></i>
</label>
<span id='agent_status'>{{ __('Unknown') }}</span>
</div>

<div class="mb-3 col-12 col-sm-4">
<label class="form-label" >
{{ __('Request inventory') }}
<i id="update-inventory" class="fas fa-sync" role="button" title="{{ __('Request agent to proceed an new inventory') }}"></i>
<i id="update-inventory" class="ti ti-refresh d-inline-block" role="button" title="{{ __('Request agent to proceed an new inventory') }}"></i>
</label>
<span id='inventory_status'>{{ __('Unknown') }}</span>
</div>
Expand All @@ -118,7 +118,7 @@
$(function () {
$('#update-status').on('click', function() {
var icon = $(this);
icon.addClass('fa-spin');
icon.addClass('icon-rotate');
$.ajax({
type: 'POST',
url: '{{ path('/ajax/agent.php') }}',
Expand All @@ -132,14 +132,14 @@
$('#agent_status').text(json.answer);
},
complete: function() {
icon.removeClass('fa-spin');
icon.removeClass('icon-rotate');
}
});
});
$('#update-inventory').on('click', function() {
var icon = $(this);
icon.addClass("fa-spin");
icon.addClass('icon-rotate');
$.ajax({
type: 'POST',
url: '{{ path('/ajax/agent.php') }}',
Expand All @@ -153,7 +153,7 @@
$('#inventory_status').text(json.answer);
},
complete: function() {
icon.removeClass('fa-spin');
icon.removeClass('icon-rotate');
}
});
});
Expand Down
5 changes: 1 addition & 4 deletions templates/components/illustration/icon_picker_modal.html.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,10 +53,7 @@
class="ti ti-search"
data-glpi-icon-picker-filter-default-icon
></i>
<i
class="ti ti-loader-2 fa-spin d-none"
data-glpi-icon-picker-filter-loading-icon
></i>
<span class="spinner-border spinner-border d-none" role="status" aria-hidden="true" data-glpi-icon-picker-filter-loading-icon></span>
</span>
<input
type="text"
Expand Down
9 changes: 1 addition & 8 deletions templates/components/illustration/icon_picker_search_results.html.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,14 +71,7 @@
aria-label="{{ __('Go to page %s')|format(i) }}"
data-glpi-icon-picker-go-to-page="{{ i }}"
>
<span
class="btn-text"
data-glpi-icon-picker-pagination-text
>{{ i }}</span>
<i
class="btn-text-loading ti ti-loader-2 fa-spin d-none"
data-glpi-icon-picker-pagination-loading-icon
></i>
<span class="btn-text" data-glpi-icon-picker-pagination-text>{{ i }}</span>
</button>
{% endif %}
{% endfor %}
Expand Down
14 changes: 7 additions & 7 deletions templates/components/itilobject/actors/field.html.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -191,13 +191,13 @@
} else if ("{{ actortype }}" == "requester") {
label = "{{ __('Number of tickets as requester') }}";
}
const existing_element = $(
`<span class="assign_infos ms-1" title="${label}"
data-bs-toggle="tooltip" data-bs-placement="top"
data-id="${items_id}" data-fk="${fk}">
<i class="fas fa-spinner fa-spin"></i>
</span>`
);
const existing_element = $(`
<span class="assign_infos ms-1" title="${label}"
data-bs-toggle="tooltip" data-bs-placement="top"
data-id="${items_id}" data-fk="${fk}">
<span class="spinner-border" role="status" aria-hidden="true"></span>
</span>
`);
option_element.append(existing_element);
$.get("{{ path('/ajax/actorinformation.php') }}", {
Expand Down
2 changes: 1 addition & 1 deletion templates/components/itilobject/timeline/timeline.html.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -237,7 +237,7 @@ $(function() {
content_block.find(".read-only-content").hide();
content_block.find(".edit-content").show()
.find(".ajax-content")
.html('<i class="fas fa-3x fa-spinner fa-spin ms-auto"></i>')
.html('<span class="spinner-border ms-auto" role="status" aria-hidden="true"></span>')
.load("{{ path('/ajax/timeline.php') }}", {
'action' : 'viewsubitem',
'type' : itemtype,
Expand Down
Loading

0 comments on commit be2b2f5

Please sign in to comment.