Update animation and styles for rtl

vaadin · Jan 21, 2020 · 5c8585c · 5c8585c
1 parent f3e5b72
commit 5c8585c
Show file tree

Hide file tree

Showing 15 changed files with 163 additions and 7 deletions.
diff --git a/src/vaadin-progress-bar.html b/src/vaadin-progress-bar.html
@@ -33,6 +33,11 @@
         transform: scaleX(var(--vaadin-progress-value));
       }
 
+      /* RTL specific styles */
+
+      :host([dir="rtl"]) [part="value"] {
+        transform-origin: 100% 50%;
+      }
     </style>
 
     <div part="bar">

diff --git a/test/visual/default.html b/test/visual/default.html
@@ -4,7 +4,17 @@
   <meta charset="UTF-8">
   <title></title>
   <script src="../../bower_components/webcomponentsjs/webcomponents-lite.js"></script>
-  <link href="../../vaadin-progress-bar.html" rel="import">
+  <script>
+    const theme = window.location.search.replace(/.*theme=(\w+).*/, '$1') || 'lumo';
+    document.write(`<link rel="import" href="../../theme/${theme}/vaadin-progress-bar.html">`);
+
+    window.addEventListener('WebComponentsReady', function() {
+      customElements.whenDefined('vaadin-progress-bar').then(function() {
+        window.ShadyDOM && window.ShadyDOM.flush(); // Force DOM composition
+        window.webComponentsAreReady = true; // Checked in gemini before capture callback
+      });
+    });
+  </script>
 </head>
 
 <body>

diff --git a/test/visual/rtl.html b/test/visual/rtl.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+
+<head lang="en">
+  <meta charset="UTF-8">
+  <title></title>
+  <script src="../../bower_components/webcomponentsjs/webcomponents-lite.js"></script>
+  <script>
+    const theme = window.location.search.replace(/.*theme=(\w+).*/, '$1') || 'lumo';
+    document.write(`<link rel="import" href="../../theme/${theme}/vaadin-progress-bar.html">`);
+    document.documentElement.setAttribute('dir', 'rtl');
+
+    window.addEventListener('WebComponentsReady', function() {
+      customElements.whenDefined('vaadin-progress-bar').then(function() {
+        window.ShadyDOM && window.ShadyDOM.flush(); // Force DOM composition
+        window.webComponentsAreReady = true; // Checked in gemini before capture callback
+      });
+    });
+  </script>
+</head>
+
+<body>
+
+  <span id="rtl-tests">
+    <vaadin-progress-bar value="0.1">
+    </vaadin-progress-bar>
+  </span>
+
+</body>
diff --git a/...ual/screens/vaadin-progress-bar/default-rtl-lumo/vaadin-progress-bar/chrome.png b/...ual/screens/vaadin-progress-bar/default-rtl-lumo/vaadin-progress-bar/chrome.png
diff --git a/...al/screens/vaadin-progress-bar/default-rtl-lumo/vaadin-progress-bar/firefox.png b/...al/screens/vaadin-progress-bar/default-rtl-lumo/vaadin-progress-bar/firefox.png
diff --git a/...screens/vaadin-progress-bar/default-rtl-material/vaadin-progress-bar/chrome.png b/...screens/vaadin-progress-bar/default-rtl-material/vaadin-progress-bar/chrome.png
diff --git a/...creens/vaadin-progress-bar/default-rtl-material/vaadin-progress-bar/firefox.png b/...creens/vaadin-progress-bar/default-rtl-material/vaadin-progress-bar/firefox.png
diff --git a/...l/screens/vaadin-progress-bar/default-tests-lumo/vaadin-progress-bar/chrome.png b/...l/screens/vaadin-progress-bar/default-tests-lumo/vaadin-progress-bar/chrome.png
diff --git a/...ult-tests/vaadin-progress-bar/firefox.png → ...ests-lumo/vaadin-progress-bar/firefox.png b/...ult-tests/vaadin-progress-bar/firefox.png → ...ests-lumo/vaadin-progress-bar/firefox.png
diff --git a/...reens/vaadin-progress-bar/default-tests-material/vaadin-progress-bar/chrome.png b/...reens/vaadin-progress-bar/default-tests-material/vaadin-progress-bar/chrome.png
diff --git a/...eens/vaadin-progress-bar/default-tests-material/vaadin-progress-bar/firefox.png b/...eens/vaadin-progress-bar/default-tests-material/vaadin-progress-bar/firefox.png
diff --git a/...visual/screens/vaadin-progress-bar/default-tests/vaadin-progress-bar/chrome.png b/...visual/screens/vaadin-progress-bar/default-tests/vaadin-progress-bar/chrome.png
diff --git a/test/visual/test.js b/test/visual/test.js
@@ -1,6 +1,9 @@
 gemini.suite('vaadin-progress-bar', function(rootSuite) {
   function wait(actions, find) {
-    actions.wait(5000);
+    return actions
+      .waitForJSCondition(function(window) {
+        return window.webComponentsAreReady;
+      }, 80000);
   }
 
   function goToAboutBlank(actions, find) {
@@ -14,11 +17,20 @@ gemini.suite('vaadin-progress-bar', function(rootSuite) {
     .before(wait)
     .after(goToAboutBlank);
 
-  gemini.suite('default-tests', function(suite) {
-    suite
-      .setUrl('default.html')
-      .setCaptureElements('#default-tests')
-      .capture('vaadin-progress-bar');
+  ['lumo', 'material'].forEach(theme => {
+    gemini.suite(`default-tests-${theme}`, function(suite) {
+      suite
+        .setUrl(`default.html?theme=${theme}`)
+        .setCaptureElements('#default-tests')
+        .capture('vaadin-progress-bar');
+    });
+
+    gemini.suite(`default-rtl-${theme}`, function(suite) {
+      suite
+        .setUrl(`rtl.html?theme=${theme}`)
+        .setCaptureElements('#rtl-tests')
+        .capture('vaadin-progress-bar');
+    });
   });
 
 });
diff --git a/theme/lumo/vaadin-progress-bar-styles.html b/theme/lumo/vaadin-progress-bar-styles.html
@@ -122,6 +122,76 @@
         --lumo-progress-indeterminate-progress-bar-background: linear-gradient(to right, var(--lumo-success-color-10pct) 10%, var(--lumo-success-color));
         --lumo-progress-indeterminate-progress-bar-background-reverse: linear-gradient(to left, var(--lumo-success-color-10pct) 10%, var(--lumo-success-color));
       }
+
+      /* RTL specific styles */
+
+      :host([indeterminate][dir="rtl"]) [part="value"] {
+        --lumo-progress-indeterminate-progress-bar-background: linear-gradient(to left, var(--lumo-primary-color-10pct) 10%, var(--lumo-primary-color));
+        --lumo-progress-indeterminate-progress-bar-background-reverse: linear-gradient(to right, var(--lumo-primary-color-10pct) 10%, var(--lumo-primary-color));
+        animation: vaadin-progress-indeterminate-rtl 1.6s infinite cubic-bezier(.355, .045, .645, 1);
+      }
+
+      :host(:not([aria-valuenow])[dir="rtl"]) [part="value"]::before,
+      :host([indeterminate][dir="rtl"]) [part="value"]::before {
+        animation: vaadin-progress-pulse3 1.6s infinite cubic-bezier(.355, .045, .645, 1);
+      }
+
+      @keyframes vaadin-progress-indeterminate-rtl {
+        0% {
+          transform: scaleX(0.015);
+          transform-origin: 100% 0%;
+        }
+
+        25% {
+          transform: scaleX(0.4);
+        }
+
+        50% {
+          transform: scaleX(0.015);
+          transform-origin: 0% 0%;
+          background-image: var(--lumo-progress-indeterminate-progress-bar-background);
+        }
+
+        50.1% {
+          transform: scaleX(0.015);
+          transform-origin: 0% 0%;
+          background-image: var(--lumo-progress-indeterminate-progress-bar-background-reverse);
+        }
+
+        75% {
+          transform: scaleX(0.4);
+        }
+
+        100% {
+          transform: scaleX(0.015);
+          transform-origin: 100% 0%;
+          background-image: var(--lumo-progress-indeterminate-progress-bar-background-reverse);
+        }
+      }
+
+      /* Contrast color */
+
+      :host([theme~="contrast"][dir="rtl"]) [part="value"],
+      :host([theme~="contrast"][dir="rtl"]) [part="value"]::before {
+        --lumo-progress-indeterminate-progress-bar-background: linear-gradient(to left, var(--lumo-contrast-5pct) 10%, var(--lumo-contrast-80pct));
+        --lumo-progress-indeterminate-progress-bar-background-reverse: linear-gradient(to right, var(--lumo-contrast-5pct) 10%, var(--lumo-contrast-60pct));
+      }
+
+      /* Error color */
+
+      :host([theme~="error"][dir="rtl"]) [part="value"],
+      :host([theme~="error"][dir="rtl"]) [part="value"]::before {
+        --lumo-progress-indeterminate-progress-bar-background: linear-gradient(to left, var(--lumo-error-color-10pct) 10%, var(--lumo-error-color));
+        --lumo-progress-indeterminate-progress-bar-background-reverse: linear-gradient(to right, var(--lumo-error-color-10pct) 10%, var(--lumo-error-color));
+      }
+
+      /* Primary color */
+
+      :host([theme~="success"][dir="rtl"]) [part="value"],
+      :host([theme~="success"][dir="rtl"]) [part="value"]::before {
+        --lumo-progress-indeterminate-progress-bar-background: linear-gradient(to left, var(--lumo-success-color-10pct) 10%, var(--lumo-success-color));
+        --lumo-progress-indeterminate-progress-bar-background-reverse: linear-gradient(to right, var(--lumo-success-color-10pct) 10%, var(--lumo-success-color));
+      }
     </style>
   </template>
 </dom-module>

diff --git a/theme/material/vaadin-progress-bar-styles.html b/theme/material/vaadin-progress-bar-styles.html
@@ -82,6 +82,37 @@
         }
       }
 
+      /* RTL specific styles */
+
+      :host([dir="rtl"]) [part="bar"] {
+        transform-origin: 100% 0;
+      }
+
+      :host([indeterminate][dir="rtl"]) [part="bar"] {
+        left: auto;
+        right: -100%;
+        animation: primary-indeterminate-translate-rtl 2s infinite linear;
+      }
+
+      @keyframes primary-indeterminate-translate-rtl {
+        0% {
+          transform: translateX(0);
+        }
+
+        20% {
+          animation-timing-function: cubic-bezier(.5, 0, .701732, .495819);
+          transform: translateX(0);
+        }
+
+        59.15% {
+          animation-timing-function: cubic-bezier(.302435, .381352, .55, .956352);
+          transform: translateX(-83.67142%);
+        }
+
+        100% {
+          transform: translateX(-200.611057%);
+        }
+      }
     </style>
   </template>
 </dom-module>