Fluent: load panel&indicator restyle (#25914)

Co-authored-by: Alexander Bulychev <[email protected]> Co-authored-by: EugeniyKiyashko <[email protected]>
DevExpress · Oct 31, 2023 · 511efcd · 511efcd
1 parent 4d7e405
commit 511efcd
Show file tree

Hide file tree

Showing 9 changed files with 73 additions and 46 deletions.
diff --git a/packages/devextreme/js/ui/load_panel.d.ts b/packages/devextreme/js/ui/load_panel.d.ts
@@ -125,6 +125,7 @@ export interface dxLoadPanelOptions extends dxOverlayOptions<dxLoadPanel> {
      * @docid
      * @default 90
      * @default 60 &for(Material)
+     * @default 'auto' &for(Fluent)
      * @public
      */
     height?: number | string | (() => number | string);
@@ -181,6 +182,7 @@ export interface dxLoadPanelOptions extends dxOverlayOptions<dxLoadPanel> {
      * @docid
      * @default 222
      * @default 60 &for(Material)
+     * @default 'auto' &for(Fluent)
      * @public
      */
     width?: number | string | (() => number | string);

diff --git a/packages/devextreme/js/ui/load_panel.js b/packages/devextreme/js/ui/load_panel.js
@@ -6,7 +6,7 @@ import { extend } from '../core/utils/extend';
 import LoadIndicator from './load_indicator';
 import Overlay from './overlay/ui.overlay';
 import { Deferred } from '../core/utils/deferred';
-import { isMaterialBased } from './themes';
+import { isMaterial, isMaterialBased, isFluent } from './themes';
 
 // STYLE loadPanel
 
@@ -87,19 +87,24 @@ const LoadPanel = Overlay.inherit({
             },
             {
                 device: function() {
-                    return isMaterialBased();
+                    return isMaterial();
                 },
                 options: {
                     message: '',
-
                     width: 60,
-
                     height: 60,
-
                     maxHeight: 60,
-
                     maxWidth: 60
                 }
+            },
+            {
+                device: function() {
+                    return isFluent();
+                },
+                options: {
+                    width: 'auto',
+                    height: 'auto',
+                }
             }
         ]);
     },

diff --git a/packages/devextreme/scss/widgets/fluent/button/_colors.scss b/packages/devextreme/scss/widgets/fluent/button/_colors.scss
@@ -208,7 +208,7 @@ $button-success-outlined-selected-bg: null !default;
 $button-accent-foreground-color: null !default;
 
 @if $mode == "light" {
-  $button-accent-foreground-color: darken(desaturate(adjust-hue($base-accent, -2), 9.10), 23.53) !default;
+  $button-accent-foreground-color: darken(desaturate(adjust-hue($base-accent, -2), 9.10), 23.53) !default; // #0a2e4a
 
   $button-default-bg: $base-accent !default;
   $button-default-hover-bg: $base-accent-hover !default;

diff --git a/packages/devextreme/scss/widgets/fluent/loadIndicator/_colors.scss b/packages/devextreme/scss/widgets/fluent/loadIndicator/_colors.scss
@@ -9,3 +9,12 @@
 * $type color
 */
 $load-indicator-segment-bg-color: $base-accent !default;
+$load-indicator-inner-segment-border-color: null !default;
+
+@if $mode == "light" {
+  $load-indicator-inner-segment-border-color: lighten(saturate(adjust-hue($base-accent, 2.9), 2.2), 44.3) !default; // #B4D6FA
+}
+
+@if $mode == "dark" {
+  $load-indicator-inner-segment-border-color: $base-accent-selected !default; 
+}
diff --git a/packages/devextreme/scss/widgets/fluent/loadIndicator/_index.scss b/packages/devextreme/scss/widgets/fluent/loadIndicator/_index.scss
@@ -48,8 +48,8 @@
   border-radius: 50%;
 }
 
-.dx-loadindicator-segment2,
-.dx-loadindicator-segment0 {
+.dx-loadindicator-segment0,
+.dx-loadindicator-segment1 {
   width: 50%;
   height: 100%;
   overflow: hidden;
@@ -59,7 +59,7 @@
   }
 }
 
-.dx-loadindicator-segment2 {
+.dx-loadindicator-segment0 {
   left: 0;
 
   .dx-loadindicator-segment-inner {
@@ -69,29 +69,34 @@
   }
 }
 
-.dx-loadindicator-segment0 {
-  right: 0;
+.dx-loadindicator-segment2 {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  box-sizing: border-box;
 
   .dx-loadindicator-segment-inner {
-    left: -100%;
-    border-left-color: transparent;
-    transform: rotate(129deg);
-    animation: dx-right-segment-rotation 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
+    border-color: $load-indicator-inner-segment-border-color;
+    width: 100%;
+    left: 0;
   }
 }
 
 .dx-loadindicator-segment1 {
-  position: absolute;
-  top: 0;
-  left: 45%;
-  width: 10%;
-  height: 100%;
-  overflow: hidden;
-  box-sizing: border-box;
+  right: 0;
 
   .dx-loadindicator-segment-inner {
-    width: 1000%;
-    left: -450%;
+    left: -100%;
+    border-left-color: transparent;
+    transform: rotate(129deg);
+    animation: dx-right-segment-rotation 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
+
+    &::after {
+      right: 0;
+    }
   }
 }
 

diff --git a/packages/devextreme/scss/widgets/fluent/loadPanel/_colors.scss b/packages/devextreme/scss/widgets/fluent/loadPanel/_colors.scss
@@ -5,20 +5,10 @@
 
 // adduse
 
-$loadpanel-border-color: null !default;
 $loadpanel-content-shadow-color: color.change($base-shadow-color, $alpha: 0.25) !default;
 
 /**
 * $name 20. Loadpanel background color
 * $type color
 */
 $loadpanel-content-bg: $overlay-content-bg !default;
-
-@if $mode == "light" {
-  $loadpanel-border-color: $overlay-border-color !default;
-}
-
-@if $mode == "dark" {
-  $loadpanel-border-color: rgba(0, 0, 0, 0.2) !default;
-}
-
diff --git a/packages/devextreme/scss/widgets/fluent/loadPanel/_index.scss b/packages/devextreme/scss/widgets/fluent/loadPanel/_index.scss
@@ -10,13 +10,9 @@
 
 
 .dx-loadpanel-content {
-  border: 1px solid $loadpanel-border-color;
+  border: none;
   background: $loadpanel-content-bg;
-  padding: 13px;
-  border-radius: 50%;
-  box-shadow: 0 6px 12px $loadpanel-content-shadow-color;
-}
-
-.dx-loadpanel-message {
-  display: none;
+  padding: $load-panel-padding;
+  border-radius: $load-panel-border-radius;
+  box-shadow: $load-panel-box-shadow;
 }
diff --git a/packages/devextreme/scss/widgets/fluent/loadPanel/_sizes.scss b/packages/devextreme/scss/widgets/fluent/loadPanel/_sizes.scss
@@ -1,4 +1,9 @@
+@use "sass:color";
+@use "../colors" as *;
 @use "../sizes" as *;
 
 // adduse
 
+$load-panel-padding: 12px 24px !default;
+$load-panel-border-radius: 8px !default;
+$load-panel-box-shadow: 0 8px 16px 0 color.change($base-shadow-color, $alpha: 0.14) !default;
diff --git a/packages/devextreme/testing/tests/DevExpress.ui/defaultOptions.tests.js b/packages/devextreme/testing/tests/DevExpress.ui/defaultOptions.tests.js
@@ -1270,11 +1270,26 @@ testComponentDefaults(LoadPanel,
         message: ''
     },
     function() {
-        this.origIsMaterialBased = themes.isMaterialBased;
-        themes.isMaterialBased = function() { return true; };
+        this.origIsMaterial = themes.isMaterial;
+        themes.isMaterial = function() { return true; };
     },
     function() {
-        themes.isMaterialBased = this.origIsMaterialBased;
+        themes.isMaterial = this.origIsMaterial;
+    }
+);
+
+testComponentDefaults(LoadPanel,
+    {},
+    {
+        width: 'auto',
+        height: 'auto'
+    },
+    function() {
+        this.origIsFluent = themes.isFluent;
+        themes.isFluent = function() { return true; };
+    },
+    function() {
+        themes.isFluent = this.origIsFluent;
     }
 );