diff --git a/bower.json b/bower.json index eee6afb..877c312 100644 --- a/bower.json +++ b/bower.json @@ -27,17 +27,16 @@ "dependencies": { "polymer": "^2.0.0", "vaadin-themable-mixin": "vaadin/vaadin-themable-mixin#^1.2.0", - "vaadin-element-mixin": "vaadin/vaadin-element-mixin#^2.0.0", - "vaadin-lumo-styles": "vaadin/vaadin-lumo-styles#^1.1.0", - "vaadin-material-styles": "vaadin/vaadin-material-styles#^1.1.0", - "vaadin-button": "vaadin/vaadin-button#^2.1.0" + "vaadin-element-mixin": "vaadin/vaadin-element-mixin#^2.3.0", + "vaadin-lumo-styles": "vaadin/vaadin-lumo-styles#^1.6.0", + "vaadin-material-styles": "vaadin/vaadin-material-styles#^1.3.2", + "vaadin-button": "vaadin/vaadin-button#^2.3.0-alpha1" }, "devDependencies": { "iron-component-page": "^3.0.0", - "iron-demo-helpers": "^2.0.0", "webcomponentsjs": "^1.0.0", "web-component-tester": "^6.1.5", - "vaadin-demo-helpers": "vaadin/vaadin-demo-helpers#^3.0.0", + "vaadin-demo-helpers": "vaadin/vaadin-demo-helpers#^3.1.0-alpha1", "vaadin-tabs": "vaadin/vaadin-tabs#^3.0.2", "vaadin-icons": "vaadin/vaadin-icons#^4.2.0" } diff --git a/src/vaadin-app-layout.html b/src/vaadin-app-layout.html index d365866..d5922f3 100644 --- a/src/vaadin-app-layout.html +++ b/src/vaadin-app-layout.html @@ -31,6 +31,11 @@ padding-left: var(--vaadin-app-layout-navbar-offset-left); } + :host([dir="rtl"]) { + padding-left: 0; + padding-right: var(--vaadin-app-layout-navbar-offset-left); + } + :host([hidden]), [hidden] { display: none !important; @@ -79,10 +84,14 @@ z-index: 1; } - :host([primary-section="drawer"][drawer-opened]:not([overlay])) [part="navbar"] { + :host(:not([dir="rtl"])[primary-section="drawer"][drawer-opened]:not([overlay])) [part="navbar"] { left: var(--vaadin-app-layout-drawer-offset-left, 0); } + :host([dir="rtl"][primary-section="drawer"][drawer-opened]:not([overlay])) [part="navbar"] { + right: var(--vaadin-app-layout-drawer-offset-left, 0); + } + :host([primary-section="drawer"]) [part="drawer"] { top: 0; } @@ -149,10 +158,29 @@ touch-action: manipulation; } - :host([drawer-opened]:not([overlay])) { + :host([dir="rtl"]) [part="drawer"] { + left: auto; + right: var(--vaadin-app-layout-navbar-offset-start, 0); + transform: translateX(100%); + } + + :host([dir="rtl"]) [part="navbar"], + :host([dir="rtl"]) [part="navbar"]::before { + transition: right var(--vaadin-app-layout-transition); + } + + :host([dir="rtl"][drawer-opened]) [part='drawer'] { + transform: translateX(0%); + } + + :host(:not([dir="rtl"])[drawer-opened]:not([overlay])) { padding-left: var(--vaadin-app-layout-drawer-offset-left); } + :host([dir="rtl"][drawer-opened]:not([overlay])) { + padding-right: var(--vaadin-app-layout-drawer-offset-left); + } + @media (max-width: 800px), (max-height: 600px) { :host { diff --git a/test/visual/screens/vaadin-app-layout/drawer-lumo-dark/rtl/chrome.png b/test/visual/screens/vaadin-app-layout/drawer-lumo-dark/rtl/chrome.png new file mode 100644 index 0000000..73d3eaa Binary files /dev/null and b/test/visual/screens/vaadin-app-layout/drawer-lumo-dark/rtl/chrome.png differ diff --git a/test/visual/screens/vaadin-app-layout/drawer-lumo-dark/rtl/firefox.png b/test/visual/screens/vaadin-app-layout/drawer-lumo-dark/rtl/firefox.png new file mode 100644 index 0000000..5743962 Binary files /dev/null and b/test/visual/screens/vaadin-app-layout/drawer-lumo-dark/rtl/firefox.png differ diff --git a/test/visual/screens/vaadin-app-layout/drawer-lumo/rtl/chrome.png b/test/visual/screens/vaadin-app-layout/drawer-lumo/rtl/chrome.png new file mode 100644 index 0000000..9752563 Binary files /dev/null and b/test/visual/screens/vaadin-app-layout/drawer-lumo/rtl/chrome.png differ diff --git a/test/visual/screens/vaadin-app-layout/drawer-lumo/rtl/firefox.png b/test/visual/screens/vaadin-app-layout/drawer-lumo/rtl/firefox.png new file mode 100644 index 0000000..4e95b9d Binary files /dev/null and b/test/visual/screens/vaadin-app-layout/drawer-lumo/rtl/firefox.png differ diff --git a/test/visual/screens/vaadin-app-layout/drawer-material/rtl/chrome.png b/test/visual/screens/vaadin-app-layout/drawer-material/rtl/chrome.png new file mode 100644 index 0000000..19a1d8d Binary files /dev/null and b/test/visual/screens/vaadin-app-layout/drawer-material/rtl/chrome.png differ diff --git a/test/visual/screens/vaadin-app-layout/drawer-material/rtl/firefox.png b/test/visual/screens/vaadin-app-layout/drawer-material/rtl/firefox.png new file mode 100644 index 0000000..60abd1e Binary files /dev/null and b/test/visual/screens/vaadin-app-layout/drawer-material/rtl/firefox.png differ diff --git a/test/visual/screens/vaadin-app-layout/primary-drawer-lumo-dark/rtl/chrome.png b/test/visual/screens/vaadin-app-layout/primary-drawer-lumo-dark/rtl/chrome.png new file mode 100644 index 0000000..7dd1875 Binary files /dev/null and b/test/visual/screens/vaadin-app-layout/primary-drawer-lumo-dark/rtl/chrome.png differ diff --git a/test/visual/screens/vaadin-app-layout/primary-drawer-lumo-dark/rtl/firefox.png b/test/visual/screens/vaadin-app-layout/primary-drawer-lumo-dark/rtl/firefox.png new file mode 100644 index 0000000..c76582e Binary files /dev/null and b/test/visual/screens/vaadin-app-layout/primary-drawer-lumo-dark/rtl/firefox.png differ diff --git a/test/visual/screens/vaadin-app-layout/primary-drawer-lumo/rtl/chrome.png b/test/visual/screens/vaadin-app-layout/primary-drawer-lumo/rtl/chrome.png new file mode 100644 index 0000000..0b8b8d4 Binary files /dev/null and b/test/visual/screens/vaadin-app-layout/primary-drawer-lumo/rtl/chrome.png differ diff --git a/test/visual/screens/vaadin-app-layout/primary-drawer-lumo/rtl/firefox.png b/test/visual/screens/vaadin-app-layout/primary-drawer-lumo/rtl/firefox.png new file mode 100644 index 0000000..10eb7be Binary files /dev/null and b/test/visual/screens/vaadin-app-layout/primary-drawer-lumo/rtl/firefox.png differ diff --git a/test/visual/screens/vaadin-app-layout/primary-drawer-material/rtl/chrome.png b/test/visual/screens/vaadin-app-layout/primary-drawer-material/rtl/chrome.png new file mode 100644 index 0000000..038e2f6 Binary files /dev/null and b/test/visual/screens/vaadin-app-layout/primary-drawer-material/rtl/chrome.png differ diff --git a/test/visual/screens/vaadin-app-layout/primary-drawer-material/rtl/firefox.png b/test/visual/screens/vaadin-app-layout/primary-drawer-material/rtl/firefox.png new file mode 100644 index 0000000..d23b0d0 Binary files /dev/null and b/test/visual/screens/vaadin-app-layout/primary-drawer-material/rtl/firefox.png differ diff --git a/test/visual/test.js b/test/visual/test.js index c1bb354..f452968 100644 --- a/test/visual/test.js +++ b/test/visual/test.js @@ -22,14 +22,24 @@ gemini.suite('vaadin-app-layout', function(rootSuite) { suite .setUrl(`/drawer.html?theme=${theme}`) .setCaptureElements('#drawer-tests') - .capture('default'); + .capture('default') + .capture('rtl', actions => { + actions.executeJS(function(window) { + window.document.documentElement.setAttribute('dir', 'rtl'); + }); + }); }); gemini.suite(`primary-drawer-${theme}`, function(suite) { suite .setUrl(`/primary-drawer.html?theme=${theme}`) .setCaptureElements('#primary-drawer-tests') - .capture('default'); + .capture('default') + .capture('rtl', actions => { + actions.executeJS(function(window) { + window.document.documentElement.setAttribute('dir', 'rtl'); + }); + }); }); gemini.suite(`tabs-${theme}`, function(suite) { diff --git a/theme/lumo/vaadin-app-layout-styles.html b/theme/lumo/vaadin-app-layout-styles.html index 724810b..ac049e8 100644 --- a/theme/lumo/vaadin-app-layout-styles.html +++ b/theme/lumo/vaadin-app-layout-styles.html @@ -9,10 +9,14 @@ background: var(--lumo-base-color) linear-gradient(var(--lumo-contrast-5pct), var(--lumo-contrast-5pct)); } - :host(:not([overlay])) [part="drawer"] { + :host(:not([dir='rtl']):not([overlay])) [part='drawer'] { border-right: 1px solid var(--lumo-contrast-10pct); } + :host([dir='rtl']:not([overlay])) [part='drawer'] { + border-left: 1px solid var(--lumo-contrast-10pct); + } + :host([overlay]) [part="drawer"]::before { background: var(--lumo-base-color); } diff --git a/theme/material/vaadin-app-layout-styles.html b/theme/material/vaadin-app-layout-styles.html index f0d691a..e82e483 100644 --- a/theme/material/vaadin-app-layout-styles.html +++ b/theme/material/vaadin-app-layout-styles.html @@ -18,9 +18,16 @@ [part="drawer"] { background: var(--material-background-color); + } + + :host(:not([dir='rtl'])) [part='drawer'] { border-right: 1px solid var(--material-secondary-background-color); } + :host([dir='rtl']) [part='drawer'] { + border-left: 1px solid var(--material-secondary-background-color); + } + :host([primary-section="drawer"]) [part="drawer"] { z-index: 1; } diff --git a/theme/material/vaadin-drawer-toggle-styles.html b/theme/material/vaadin-drawer-toggle-styles.html index e1d2480..ac93b7e 100644 --- a/theme/material/vaadin-drawer-toggle-styles.html +++ b/theme/material/vaadin-drawer-toggle-styles.html @@ -8,11 +8,18 @@ min-width: 0 !important; width: 48px; height: 48px; - margin-right: 1em; padding: 0; border-radius: 50%; } + :host(:not([dir="rtl"])) { + margin-right: 1em; + } + + :host([dir="rtl"]) { + margin-left: 1em; + } + [part="icon"], [part="icon"]::after, [part="icon"]::before {