diff --git a/app/assets/javascripts/templates/admin/panels/exchange_products_panel_footer.html.haml b/app/assets/javascripts/templates/admin/panels/exchange_products_panel_footer.html.haml index df3c510fed..e458c913ff 100644 --- a/app/assets/javascripts/templates/admin/panels/exchange_products_panel_footer.html.haml +++ b/app/assets/javascripts/templates/admin/panels/exchange_products_panel_footer.html.haml @@ -6,6 +6,6 @@ .sixteen.columns.alpha#loading{ 'ng-show' => 'productsLoading()' } %br - %img.spinner{ src: image_path("/spinning-circles.svg")} + %i.spinner.fa.fa-spin.fa-circle-o-notch %h1 {{ 'js.admin.panels.exchange_products.loading_variants' | t }} diff --git a/app/views/admin/customers/index.html.haml b/app/views/admin/customers/index.html.haml index 877e9a1d91..52b844871d 100644 --- a/app/views/admin/customers/index.html.haml +++ b/app/views/admin/customers/index.html.haml @@ -35,9 +35,9 @@ .row{ 'ng-if' => 'shop_id && RequestMonitor.loading' } .sixteen.columns.alpha#loading - = render partial: "components/spinner" + = render partial: "components/admin_spinner" %h1 - =t :loading_customers + = t :loading_customers .row{ :class => "sixteen columns alpha", 'ng-show' => '!RequestMonitor.loading && filteredCustomers.length == 0'} %h1#no_results diff --git a/app/views/admin/enterprises/_enterprise_user_index.html.haml b/app/views/admin/enterprises/_enterprise_user_index.html.haml index b8426b104b..46090da6af 100644 --- a/app/views/admin/enterprises/_enterprise_user_index.html.haml +++ b/app/views/admin/enterprises/_enterprise_user_index.html.haml @@ -9,8 +9,9 @@ %columns-dropdown{ action: "#{controller_name}_#{action_name}" } .row{ 'ng-if' => '!loaded' } .sixteen.columns.alpha#loading - = render partial: "components/spinner" - %h1= t('.loading_enterprises') + = render partial: "components/admin_spinner" + %h1 + = t('.loading_enterprises') .row{ :class => "sixteen columns alpha", 'ng-show' => 'loaded && filteredEnterprises.length == 0'} %h1#no_results= t('.no_enterprises_found') diff --git a/app/views/admin/enterprises/form/_primary_details.html.haml b/app/views/admin/enterprises/form/_primary_details.html.haml index 6331d7c25f..28507311ea 100644 --- a/app/views/admin/enterprises/form/_primary_details.html.haml +++ b/app/views/admin/enterprises/form/_primary_details.html.haml @@ -57,7 +57,7 @@ = f.text_field :permalink, { 'ng-model' => "Enterprise.permalink", placeholder: "eg. your-shop-name", 'ng-model-options' => "{ updateOn: 'default blur', debounce: {'default': 300, 'blur': 0} }" } .two.columns.omega %div{ng: {show: "checking", cloak: true}, style: "width: 30px; height: 30px;"} - = render partial: "components/spinner" + = render partial: "components/admin_spinner" %span{ ng: { class: 'availability.toLowerCase()', hide: "checking" } } {{ availability }} %i{ ng: { class: "{'icon-ok-sign': availability == 'Available', 'icon-remove-sign': availability == 'Unavailable'}" } } diff --git a/app/views/admin/order_cycles/_loading_flash.html.haml b/app/views/admin/order_cycles/_loading_flash.html.haml index ffd05c59b1..64689ffe29 100644 --- a/app/views/admin/order_cycles/_loading_flash.html.haml +++ b/app/views/admin/order_cycles/_loading_flash.html.haml @@ -1,6 +1,6 @@ %div.sixteen.columns.alpha.omega#loading{ ng: { cloak: true, if: 'RequestMonitor.loading' } } - = render partial: "components/spinner" + = render partial: "components/admin_spinner" %h1{ ng: { hide: 'orderCycles.length > 0' } } - =t('.loading_order_cycles') + = t('.loading_order_cycles') %h1{ ng: { show: 'orderCycles.length > 0' } } - =t('.loading') + = t('.loading') diff --git a/app/views/admin/subscriptions/_loading_flash.html.haml b/app/views/admin/subscriptions/_loading_flash.html.haml index 130d92bb18..b4a85be210 100644 --- a/app/views/admin/subscriptions/_loading_flash.html.haml +++ b/app/views/admin/subscriptions/_loading_flash.html.haml @@ -1,3 +1,4 @@ %div.sixteen.columns.alpha.omega#loading{ ng: { cloak: true, if: 'shop_id && RequestMonitor.loading' } } - = render partial: "components/spinner" - %h1= t('.loading') + = render partial: "components/admin_spinner" + %h1 + = t('.loading') diff --git a/app/views/admin/variant_overrides/_loading_flash.html.haml b/app/views/admin/variant_overrides/_loading_flash.html.haml index 7832fd2160..0095c543e8 100644 --- a/app/views/admin/variant_overrides/_loading_flash.html.haml +++ b/app/views/admin/variant_overrides/_loading_flash.html.haml @@ -1,3 +1,4 @@ %div.sixteen.columns.alpha.omega#loading{ ng: { cloak: true, if: 'hub_id && products.length == 0 && RequestMonitor.loading' } } - = render partial: "components/spinner" - %h1= t('.loading_inventory') + = render partial: "components/admin_spinner" + %h1 + = t('.loading_inventory') diff --git a/app/views/components/_admin_spinner.haml b/app/views/components/_admin_spinner.haml new file mode 100644 index 0000000000..e54228246b --- /dev/null +++ b/app/views/components/_admin_spinner.haml @@ -0,0 +1 @@ +%i.spinner.fa.fa-spin.fa-circle-o-notch diff --git a/app/views/spree/admin/orders/bulk_management.html.haml b/app/views/spree/admin/orders/bulk_management.html.haml index 1177f7ae58..9aabb4c7e7 100644 --- a/app/views/spree/admin/orders/bulk_management.html.haml +++ b/app/views/spree/admin/orders/bulk_management.html.haml @@ -103,7 +103,7 @@ %columns-dropdown{ action: "#{controller_name}_#{action_name}" } %div.sixteen.columns.alpha#loading{ 'ng-if' => 'RequestMonitor.loading' } - = render partial: "components/spinner" + = render partial: "components/admin_spinner" %h1 = t("admin.orders.bulk_management.loading") diff --git a/app/views/spree/admin/orders/index.html.haml b/app/views/spree/admin/orders/index.html.haml index 0d889cce2c..f47102e916 100644 --- a/app/views/spree/admin/orders/index.html.haml +++ b/app/views/spree/admin/orders/index.html.haml @@ -92,13 +92,10 @@ %div{'ng-if' => 'order.ready_to_capture'} %button.icon-capture.icon_link.no-text{'ng-click' => 'capturePayment(order)', rel: 'nofollow', 'ofn-with-tip' => t('.capture')} -.orders-loading{'ng-show' => 'RequestMonitor.loading'} - .row - .small-12.columns.fullwidth.text-center - = render partial: "components/spinner" - .row - .small-12.columns.fullwidth.text-center - %span= t('.loading') +.sixteen.columns.alpha#loading{ 'ng-show' => 'RequestMonitor.loading' } + = render partial: "components/admin_spinner" + %h1 + = t('.loading') %div{'ng-show' => "!RequestMonitor.loading && orders.length > 0" } = render partial: 'admin/shared/angular_pagination' diff --git a/app/views/spree/admin/products/index/_indicators.html.haml b/app/views/spree/admin/products/index/_indicators.html.haml index ae68aa7b00..54ea6041ea 100644 --- a/app/views/spree/admin/products/index/_indicators.html.haml +++ b/app/views/spree/admin/products/index/_indicators.html.haml @@ -1,7 +1,7 @@ %div.sixteen.columns.alpha#loading{ 'ng-if' => 'RequestMonitor.loading' } - %br - = render partial: "components/spinner" - %h1= t('.title') + = render partial: "components/admin_spinner" + %h1 + = t('.title') %div.sixteen.columns.alpha{ 'ng-show' => '!RequestMonitor.loading && products.length == 0 && q.query.length == 0' } %h1#no_results= t('.no_products') diff --git a/app/views/spree/admin/taxonomies/edit.haml b/app/views/spree/admin/taxonomies/edit.haml index 1f11fbb56c..521efbc568 100755 --- a/app/views/spree/admin/taxonomies/edit.haml +++ b/app/views/spree/admin/taxonomies/edit.haml @@ -20,10 +20,6 @@ Spree.routes.taxonomy_taxons_path = "#{main_app.api_v0_taxonomy_taxons_path(@taxonomy)}"; Spree.routes.admin_taxonomy_taxons_path = "#{spree.admin_taxonomy_taxons_path(@taxonomy)}"; #taxonomy_tree.tree - #progress{style: "display:none;"} - = image_pack_tag 'select2-spinner.gif', title: 'Spinner', style: "vertical-align:bottom;" - = t("spree.updating") - \.. .info= t("spree.taxonomy_tree_instruction") %br/ .filter-actions.actions diff --git a/app/views/spree/layouts/admin/_progress_spinner.html.haml b/app/views/spree/layouts/admin/_progress_spinner.html.haml index 6d0c9c72ba..8ea8dbf5c3 100644 --- a/app/views/spree/layouts/admin/_progress_spinner.html.haml +++ b/app/views/spree/layouts/admin/_progress_spinner.html.haml @@ -1,4 +1,4 @@ #progress - %i.spinner.fa.fa-spin.fa-circle-o-notch + = render partial: "components/admin_spinner" = Spree.t(:loading) \... diff --git a/app/webpacker/css/admin/components/progress.scss b/app/webpacker/css/admin/components/progress.scss index f62f64d85f..2b2c9d0673 100644 --- a/app/webpacker/css/admin/components/progress.scss +++ b/app/webpacker/css/admin/components/progress.scss @@ -20,3 +20,23 @@ margin-right: 5px; } } + +// Loading message replacing a table when it's loading for example +#loading { + text-align: center; + padding: 2rem 0; + color: $color-4; + + i { + font-size: 2rem; + } + img.spinner { + border: 0px; + width: 100px; + height: 100px; + } + h1 { + margin-top: 20px; + color: inherit; + } +} diff --git a/app/webpacker/css/admin/openfoodnetwork.scss b/app/webpacker/css/admin/openfoodnetwork.scss index 5ba6b879db..a573de4126 100644 --- a/app/webpacker/css/admin/openfoodnetwork.scss +++ b/app/webpacker/css/admin/openfoodnetwork.scss @@ -203,19 +203,6 @@ table#listing_enterprise_groups { } } -#loading { - text-align: center; - img.spinner { - border: 0px; - width: 100px; - height: 100px; - } - h1 { - margin-top: 20px; - color: gray; - } -} - .field_with_errors > input { border-color: red; } diff --git a/app/webpacker/css/admin/orders.scss b/app/webpacker/css/admin/orders.scss index b107947151..2316b27f66 100644 --- a/app/webpacker/css/admin/orders.scss +++ b/app/webpacker/css/admin/orders.scss @@ -90,18 +90,6 @@ table.index td.actions { text-align: left; } -.orders-loading { - margin-top: 1em; - - img { - width: 85px; - } - - span { - font-size: 1.2em; - } -} - .index-controls { button { diff --git a/spec/system/admin/bulk_order_management_spec.rb b/spec/system/admin/bulk_order_management_spec.rb index 1a633554d4..e3a2d57288 100644 --- a/spec/system/admin/bulk_order_management_spec.rb +++ b/spec/system/admin/bulk_order_management_spec.rb @@ -418,7 +418,7 @@ describe ' expect(page).to have_select2 'order_cycle_filter', with_options: OrderCycle.pluck(:name).unshift("All") select2_select oc1.name, from: "order_cycle_filter" - expect(page).to have_no_selector "#loading img.spinner" + expect(page).to have_no_selector "#loading i" expect(page).to have_selector "tr#li_#{li1.id}" expect(page).to have_no_selector "tr#li_#{li2.id}" end diff --git a/spec/system/admin/bulk_product_update_spec.rb b/spec/system/admin/bulk_product_update_spec.rb index c340dc4167..63c3a323fc 100644 --- a/spec/system/admin/bulk_product_update_spec.rb +++ b/spec/system/admin/bulk_product_update_spec.rb @@ -852,10 +852,10 @@ describe ' attach_file 'image-upload', Rails.root.join("public/500.jpg"), visible: false # Shows spinner whilst loading - expect(page).to have_css "img.spinner", visible: true + expect(page).to have_css ".spinner", visible: true end - expect(page).to have_no_css "img.spinner", visible: true + expect(page).to have_no_css ".spinner", visible: true expect(page).to have_no_selector "div.reveal-modal" within "table#listing_products tr#p_#{product.id}" do