[IMP] *: replace fa-spinner with fa-circle-o-notch
Slightly improve the overall UI of Odoo with a more modern feel by updating the current 'loading' icons that look quite old school. Use fa-circle-o-notch instead of old style fa-spinner task-2346142 closes odoo/odoo#59454 Related: odoo/enterprise#13908 Signed-off-by: Aaron Bohy (aab) <aab@odoo.com>
This commit is contained in:
Mohammed Shekha
@@ -113,7 +113,7 @@
|
||||
|
||||
<!-- Rendering of thread when messaging not yet ready -->
|
||||
<div t-name="im_livechat.legacy.mail.widget.ThreadLoading" class="o_mail_thread_loading">
|
||||
<i class="o_mail_thread_loading_icon fa fa-spinner fa-spin"/>
|
||||
<i class="o_mail_thread_loading_icon fa fa-circle-o-notch fa-spin"/>
|
||||
<span>Please wait...</span>
|
||||
</div>
|
||||
|
||||
@@ -636,7 +636,7 @@
|
||||
<t t-name="im_livechat.legacy.mail.widget.Thread.LoadMore">
|
||||
<div class="o_thread_show_more">
|
||||
<t t-if="options.loadMoreOnScroll">
|
||||
<span><i class="fa fa-spinner fa-spin" role="img" aria-label="Please wait" title="Please wait"/> Loading older messages... </span>
|
||||
<span><i class="fa fa-circle-o-notch fa-spin" role="img" aria-label="Please wait" title="Please wait"/> Loading older messages... </span>
|
||||
</t>
|
||||
<t t-else="">
|
||||
<button class="btn btn-link">-------- Show older messages --------</button>
|
||||
|
||||
@@ -79,7 +79,7 @@
|
||||
<!-- Uploading icon -->
|
||||
<t t-if="attachment.isUploading and attachment.isLinkedToComposer">
|
||||
<div class="o_Attachment_asideItem o_Attachment_asideItemUploading" title="Uploading">
|
||||
<i class="fa fa-spin fa-spinner"/>
|
||||
<i class="fa fa-spin fa-circle-o-notch"/>
|
||||
</div>
|
||||
</t>
|
||||
<!-- Uploaded icon -->
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
<Chatter chatterLocalId="chatter.localId"/>
|
||||
</t>
|
||||
<t t-else="">
|
||||
<div class="o_ChatterContainer_noChatter"><i class="o_ChatterContainer_noChatterIcon fa fa-spinner fa-spin"/>Please wait...</div>
|
||||
<div class="o_ChatterContainer_noChatter"><i class="o_ChatterContainer_noChatterIcon fa fa-circle-o-notch fa-spin"/>Please wait...</div>
|
||||
</t>
|
||||
</div>
|
||||
</t>
|
||||
|
||||
@@ -43,7 +43,7 @@
|
||||
<span class="o_ChatterTopbar_buttonCount o_ChatterTopbar_buttonAttachmentsCount" t-esc="chatter.thread ? chatter.thread.allAttachments.length : 0"/>
|
||||
</t>
|
||||
<t t-else="">
|
||||
<i class="o_ChatterTopbar_buttonAttachmentsCountLoader fa fa-spinner fa-spin" aria-label="Attachment counter loading..."/>
|
||||
<i class="o_ChatterTopbar_buttonAttachmentsCountLoader fa fa-circle-o-notch fa-spin" aria-label="Attachment counter loading..."/>
|
||||
</t>
|
||||
</button>
|
||||
<t t-if="chatter.hasFollowers and chatter.thread">
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
}"
|
||||
>
|
||||
<t t-if="!env.isMessagingInitialized()">
|
||||
<div class="o_Discuss_messagingNotInitialized"><i class="o_Discuss_messagingNotInitializedIcon fa fa-spinner fa-spin"/>Please wait...</div>
|
||||
<div class="o_Discuss_messagingNotInitialized"><i class="o_Discuss_messagingNotInitializedIcon fa fa-circle-o-notch fa-spin"/>Please wait...</div>
|
||||
</t>
|
||||
<t t-else="">
|
||||
<t t-if="!env.messaging.device.isMobile">
|
||||
|
||||
@@ -95,7 +95,7 @@
|
||||
<t t-name="mail.MessageList.loadMore" owl="1">
|
||||
<t t-if="threadView.threadCache.isLoadingMore">
|
||||
<div class="o_MessageList_item o_MessageList_isLoadingMore">
|
||||
<i class="o_MessageList_isLoadingMoreIcon fa fa-spin fa-spinner"/>
|
||||
<i class="o_MessageList_isLoadingMoreIcon fa fa-spin fa-circle-o-notch"/>
|
||||
Loading...
|
||||
</div>
|
||||
</t>
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
<a class="o_MessagingMenu_toggler" t-att-class="{ 'o-no-notification': messagingMenu ? !messagingMenu.counter : false }" href="#" title="Conversations" role="button" t-att-aria-expanded="messagingMenu and messagingMenu.isOpen ? 'true' : 'false'" aria-haspopup="true" t-on-click="_onClickToggler">
|
||||
<i class="o_MessagingMenu_icon fa fa-comments" role="img" aria-label="Messages"/>
|
||||
<t t-if="!env.isMessagingInitialized()">
|
||||
<i class="o_MessagingMenu_loading fa fa-spinner fa-spin"/>
|
||||
<i class="o_MessagingMenu_loading fa fa-circle-o-notch fa-spin"/>
|
||||
</t>
|
||||
<t t-elif="messagingMenu.counter > 0">
|
||||
<span class="o_MessagingMenu_counter badge badge-pill">
|
||||
@@ -17,7 +17,7 @@
|
||||
<t t-if="messagingMenu and messagingMenu.isOpen">
|
||||
<div class="o_MessagingMenu_dropdownMenu dropdown-menu dropdown-menu-right" t-att-class="{ 'o-mobile': env.messaging.device.isMobile, 'o-messaging-not-initialized': !env.messaging.isInitialized }" role="menu">
|
||||
<t t-if="!env.messaging.isInitialized">
|
||||
<span><i class="o_MessagingMenu_dropdownLoadingIcon fa fa-spinner fa-spin"/>Please wait...</span>
|
||||
<span><i class="o_MessagingMenu_dropdownLoadingIcon fa fa-circle-o-notch fa-spin"/>Please wait...</span>
|
||||
</t>
|
||||
<t t-else="">
|
||||
<div class="o_MessagingMenu_dropdownMenuHeader" t-att-class="{ 'o-mobile': env.messaging.device.isMobile }">
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
<t t-if="threadView">
|
||||
<t t-if="threadView.isLoading and !threadView.threadCache.isLoaded" name="loadingCondition">
|
||||
<div class="o_ThreadView_loading">
|
||||
<span><i class="o_ThreadView_loadingIcon fa fa-spinner fa-spin" title="Loading..." role="img"/>Loading...</span>
|
||||
<span><i class="o_ThreadView_loadingIcon fa fa-circle-o-notch fa-spin" title="Loading..." role="img"/>Loading...</span>
|
||||
</div>
|
||||
</t>
|
||||
<t t-elif="threadView.threadCache.isLoaded or threadView.thread.isTemporary">
|
||||
|
||||
@@ -19,7 +19,7 @@
|
||||
|
||||
<t t-name="mail.KanbanActivityLoading">
|
||||
<div class="dropdown-item text-center o_no_activity">
|
||||
<span class="fa fa-spinner fa-spin fa-2x" role="img" aria-label="Loading..." title="Loading..."/>
|
||||
<span class="fa fa-circle-o-notch fa-spin fa-2x" role="img" aria-label="Loading..." title="Loading..."/>
|
||||
</div>
|
||||
</t>
|
||||
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
title="Proxy Connected"></i>
|
||||
</span>
|
||||
<span t-if="state.status === 'connecting'" class="js_connecting">
|
||||
<i class="fa fa-fw fa-spin fa-spinner" role="img" aria-label="Connecting to Proxy"
|
||||
<i class="fa fa-fw fa-spin fa-circle-o-notch" role="img" aria-label="Connecting to Proxy"
|
||||
title="Connecting to Proxy"></i>
|
||||
</span>
|
||||
<span t-if="state.status === 'warning'" class="js_warning oe_orange">
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
title="Synchronisation Connected"></i>
|
||||
</div>
|
||||
<div t-if="state.status === 'connecting'" class="js_connecting oe_icon">
|
||||
<i class="fa fa-fw fa-spin fa-spinner" role="img"
|
||||
<i class="fa fa-fw fa-spin fa-circle-o-notch" role="img"
|
||||
aria-label="Synchronisation Connecting" title="Synchronisation Connecting"></i>
|
||||
</div>
|
||||
<div t-if="state.status === 'disconnected'" class="js_disconnected oe_icon oe_red">
|
||||
|
||||
+2
-2
@@ -40,7 +40,7 @@
|
||||
Request sent
|
||||
</div>
|
||||
<div>
|
||||
<i class="fa fa-spinner fa-spin" role="img" />
|
||||
<i class="fa fa-circle-o-notch fa-spin" role="img" />
|
||||
</div>
|
||||
</t>
|
||||
<t t-elif="props.line.payment_status == 'reversing'">
|
||||
@@ -48,7 +48,7 @@
|
||||
Reversal request sent to terminal
|
||||
</div>
|
||||
<div>
|
||||
<i class="fa fa-spinner fa-spin" role="img" />
|
||||
<i class="fa fa-circle-o-notch fa-spin" role="img" />
|
||||
</div>
|
||||
</t>
|
||||
<t t-elif="props.line.payment_status == 'done'">
|
||||
|
||||
@@ -279,15 +279,15 @@ odoo.define('point_of_sale.tests.PaymentScreen', function (require) {
|
||||
|
||||
parent.line.setPaymentStatus('waiting');
|
||||
await testUtils.nextTick();
|
||||
assert.ok(parent.el.querySelector('.paymentline i.fa-spinner'));
|
||||
assert.ok(parent.el.querySelector('.paymentline i.fa-circle-o-notch'));
|
||||
|
||||
parent.line.setPaymentStatus('waitingCancel');
|
||||
await testUtils.nextTick();
|
||||
assert.ok(parent.el.querySelector('.paymentline i.fa-spinner'));
|
||||
assert.ok(parent.el.querySelector('.paymentline i.fa-circle-o-notch'));
|
||||
|
||||
parent.line.setPaymentStatus('reversing');
|
||||
await testUtils.nextTick();
|
||||
assert.ok(parent.el.querySelector('.paymentline i.fa-spinner'));
|
||||
assert.ok(parent.el.querySelector('.paymentline i.fa-circle-o-notch'));
|
||||
|
||||
parent.line.setPaymentStatus('done');
|
||||
await testUtils.nextTick();
|
||||
|
||||
@@ -178,7 +178,7 @@
|
||||
</t>
|
||||
<t t-elif="placeholder_count">
|
||||
<span class="badge badge-secondary badge-pill" t-att-data-placeholder_count="placeholder_count">
|
||||
<i class="fa fa-spin fa-spinner"></i>
|
||||
<i class="fa fa-spin fa-circle-o-notch"></i>
|
||||
</span>
|
||||
</t>
|
||||
</a>
|
||||
|
||||
@@ -231,7 +231,7 @@ var FieldMany2One = AbstractField.extend({
|
||||
_addAutocompleteSource: function (method, params) {
|
||||
this._autocompleteSources.push({
|
||||
method: method,
|
||||
placeholder: (params.placeholder ? _t(params.placeholder) : _t('Loading...')) + '<i class="fa fa-spinner fa-spin pull-right"></i>' ,
|
||||
placeholder: (params.placeholder ? _t(params.placeholder) : _t('Loading...')) + '<i class="fa fa-spin fa-circle-o-notch pull-right"></i>' ,
|
||||
validation: params.validation,
|
||||
loading: false,
|
||||
order: params.order || 999
|
||||
|
||||
@@ -305,7 +305,7 @@ var PublicRoot = publicWidget.RootWidget.extend({
|
||||
var $buttons = $(ev.currentTarget).find('button[type="submit"], a.a-submit');
|
||||
_.each($buttons, function (btn) {
|
||||
var $btn = $(btn);
|
||||
$btn.html('<i class="fa fa-spinner fa-spin"></i> ' + $btn.text());
|
||||
$btn.prepend('<i class="fa fa-circle-o-notch fa-spin"></i> ');
|
||||
$btn.prop('disabled', true);
|
||||
});
|
||||
},
|
||||
|
||||
@@ -1659,7 +1659,7 @@
|
||||
</div>
|
||||
</t>
|
||||
<t t-name="Spinner">
|
||||
<div class="o_spinner"><i class="fa fa-spinner fa-spin" role="img" aria-label="Loading, please wait..." title="Loading, please wait..."/></div>
|
||||
<div class="o_spinner"><i class="fa fa-circle-o-notch fa-spin" role="img" aria-label="Loading, please wait..." title="Loading, please wait..."/></div>
|
||||
</t>
|
||||
<t t-name="M2ODialog">
|
||||
<div>
|
||||
@@ -1847,7 +1847,7 @@
|
||||
|
||||
<t t-name="web.IframeWrapper">
|
||||
<div class="o_preview_iframe_wrapper">
|
||||
<i class="o_iframe_wrapper_spinner fa fa-spinner fa-spin fa-4x" style="color: #875a7b; z-index: 2"/>
|
||||
<i class="o_iframe_wrapper_spinner fa fa-circle-o-notch fa-spin fa-4x" style="color: #875a7b; z-index: 2"/>
|
||||
<!--suppress CheckTagEmptyBody -->
|
||||
<iframe src="about:blank" class="o_preview_iframe" style="display:none"></iframe>
|
||||
</div>
|
||||
|
||||
@@ -2638,7 +2638,7 @@ var SnippetsMenu = Widget.extend({
|
||||
},
|
||||
}, {
|
||||
text: _t("Install in progress"),
|
||||
icon: 'fa-spin fa-spinner fa-pulse mr8',
|
||||
icon: 'fa-spin fa-circle-o-notch fa-spin mr8',
|
||||
classes: 'btn-primary disabled o_hidden',
|
||||
}, {
|
||||
text: _t("Cancel"),
|
||||
|
||||
@@ -685,7 +685,7 @@ var Dashboard = AbstractAction.extend({
|
||||
|
||||
// Utility functions
|
||||
addLoader: function(selector) {
|
||||
var loader = '<span class="fa fa-3x fa-spin fa-spinner fa-pulse"/>';
|
||||
var loader = '<span class="fa fa-3x fa-spin fa-circle-o-notch fa-spin"/>';
|
||||
selector.html("<div class='o_loader'>" + loader + "</div>");
|
||||
},
|
||||
getValue: function(d) { return d[1]; },
|
||||
|
||||
@@ -307,7 +307,7 @@ var NewContentMenu = websiteNavbarData.WebsiteNavbarActionWidget.extend({
|
||||
}
|
||||
// change style to use spinner
|
||||
$i.removeClass()
|
||||
.addClass('fa fa-spin fa-spinner fa-pulse')
|
||||
.addClass('fa fa-spin fa-circle-o-notch fa-spin')
|
||||
.css('background-image', 'none');
|
||||
$p.removeClass('o_uninstalled_module')
|
||||
.text(_.str.sprintf(self.newContentText.installPleaseWait, name));
|
||||
|
||||
@@ -60,7 +60,7 @@
|
||||
<div t-else="" class="d-flex flex-column">
|
||||
<div id="o_wemeet_jitsi_iframe">
|
||||
<div class="o_wjitsi_chat_room_loading position-absolute w-100 text-center text-muted">
|
||||
<i class="fa fa-spin fa-spinner mr-3"/>
|
||||
<i class="fa fa-spin fa-circle-o-notch mr-3"/>
|
||||
<span>Loading your room...</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -24,7 +24,7 @@
|
||||
t-att-data-track-website-image-url="track.website_image_url"
|
||||
t-att-data-youtube-video-id="track.youtube_video_id">
|
||||
<div class="position-absolute o_wevent_event_track_live_loading w-100 d-flex align-items-center justify-content-center text-white h4">
|
||||
<i class="fa fa-spin fa-spinner position-relative"/>
|
||||
<i class="fa fa-spin fa-circle-o-notch position-relative"/>
|
||||
<span class="pl-2">Loading Video...</span>
|
||||
</div>
|
||||
<div id="o_wevent_youtube_iframe_container" class="w-100"/>
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
<div class="modal-content border-0">
|
||||
<main class="modal-body p-0">
|
||||
<div class="o_wjitsi_chat_room_loading position-absolute w-100 text-center text-muted">
|
||||
<i class="fa fa-spin fa-spinner mr-3"/>
|
||||
<i class="fa fa-spin fa-circle-o-notch mr-3"/>
|
||||
<span>Loading your room...</span>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
@@ -58,7 +58,8 @@ publicWidget.registry.websiteSaleDelivery = publicWidget.Widget.extend({
|
||||
* @param {jQuery} $carrierInput
|
||||
*/
|
||||
_showLoading: function ($carrierInput) {
|
||||
$carrierInput.siblings('.o_wsale_delivery_badge_price').html('<span class="fa fa-spinner fa-spin"/>');
|
||||
$carrierInput.siblings('.o_wsale_delivery_badge_price').empty();
|
||||
$carrierInput.siblings('.o_wsale_delivery_badge_price').append('<span class="fa fa-circle-o-notch fa-spin"/>');
|
||||
},
|
||||
/**
|
||||
* @private
|
||||
|
||||
@@ -41,7 +41,7 @@
|
||||
<t t-name="website.slide.upload.modal.uploading">
|
||||
<div class="text-center" role="status">
|
||||
<div class="fa-3x">
|
||||
<i class="fa fa-spinner fa-pulse"></i>
|
||||
<i class="fa fa-circle-o-notch fa-spin"></i>
|
||||
</div>
|
||||
<h4>Uploading document ...</h4>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user