From edc382fb2ce0997e86c7d10b44be8b60a87bcbeb Mon Sep 17 00:00:00 2001 From: benjaminJ Date: Thu, 1 Sep 2022 11:55:54 +0200 Subject: [PATCH 1/4] fix: use a button to open/close the side menu --- addon/components/freestyle-guide/index.hbs | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/addon/components/freestyle-guide/index.hbs b/addon/components/freestyle-guide/index.hbs index ee935863..646af4e3 100644 --- a/addon/components/freestyle-guide/index.hbs +++ b/addon/components/freestyle-guide/index.hbs @@ -13,14 +13,13 @@
{{@title}}
{{@subtitle}}
- - +
From 2b44446c8b57de522a8e90e9b9f82e600f7c856d Mon Sep 17 00:00:00 2001 From: benjaminJ Date: Thu, 8 Sep 2022 09:36:32 +0200 Subject: [PATCH 2/4] chore(deps): Install ember-focus-trap --- package.json | 1 + yarn.lock | 42 ++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 43 insertions(+) diff --git a/package.json b/package.json index a67157b4..f0ce7e44 100644 --- a/package.json +++ b/package.json @@ -41,6 +41,7 @@ "ember-auto-import": "^2.4.2", "ember-cli-babel": "^7.26.11", "ember-cli-htmlbars": "^6.1.0", + "ember-focus-trap": "^1.0.1", "ember-modifier": "^3.2.7", "ember-named-blocks-polyfill": "^0.2.5", "ember-truth-helpers": "^3.1.1", diff --git a/yarn.lock b/yarn.lock index c31a3cf7..6241b1c0 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1294,6 +1294,14 @@ ember-cli-version-checker "^5.1.2" semver "^7.3.5" +"@embroider/addon-shim@^1.0.0": + version "1.8.3" + resolved "https://registry.yarnpkg.com/@embroider/addon-shim/-/addon-shim-1.8.3.tgz#2368510b8ce42d50d02cb3289c32e260dfa34bd9" + integrity sha512-7pyHwzT6ESXc3nZsB8rfnirLkUhQWdvj6CkYH+0MUPN74mX4rslf7pnBqZE/KZkW3uBIaBYvU8fxi0hcKC/Paw== + dependencies: + "@embroider/shared-internals" "^1.8.3" + semver "^7.3.5" + "@embroider/macros@1.8.1", "@embroider/macros@^1.0.0", "@embroider/macros@^1.6.0": version "1.8.1" resolved "https://registry.yarnpkg.com/@embroider/macros/-/macros-1.8.1.tgz#a74a36ae092213c82d9848a568fbbe9dbf08a110" @@ -1335,6 +1343,20 @@ semver "^7.3.5" typescript-memoize "^1.0.1" +"@embroider/shared-internals@^1.8.3": + version "1.8.3" + resolved "https://registry.yarnpkg.com/@embroider/shared-internals/-/shared-internals-1.8.3.tgz#52d868dc80016e9fe983552c0e516f437bf9b9f9" + integrity sha512-N5Gho6Qk8z5u+mxLCcMYAoQMbN4MmH+z2jXwQHVs859bxuZTxwF6kKtsybDAASCtd2YGxEmzcc1Ja/wM28824w== + dependencies: + babel-import-util "^1.1.0" + ember-rfc176-data "^0.3.17" + fs-extra "^9.1.0" + js-string-escape "^1.0.1" + lodash "^4.17.21" + resolve-package-path "^4.0.1" + semver "^7.3.5" + typescript-memoize "^1.0.1" + "@embroider/test-setup@^1.8.3": version "1.8.3" resolved "https://registry.yarnpkg.com/@embroider/test-setup/-/test-setup-1.8.3.tgz#445b9fe5a363ce50367ac2114750597f98d7806d" @@ -5793,6 +5815,14 @@ ember-export-application-global@^2.0.1: resolved "https://registry.yarnpkg.com/ember-export-application-global/-/ember-export-application-global-2.0.1.tgz#b120a70e322ab208defc9e2daebe8d0dfc2dcd46" integrity sha512-B7wiurPgsxsSGzJuPFkpBWnaeuCu2PGpG2BjyrfA1VcL7//o+5RSnZqiCEY326y7qmxb2GoCgo0ft03KBU0rRw== +ember-focus-trap@^1.0.1: + version "1.0.1" + resolved "https://registry.yarnpkg.com/ember-focus-trap/-/ember-focus-trap-1.0.1.tgz#a99565f6ce55d500b92a0965e79e3ad04219f157" + integrity sha512-ZUyq5ZkIuXp+ng9rCMkqBh36/V95PltL7iljStkma4+651xlAy3Z84L9WOu/uOJyVpNUxii8RJBbAySHV6c+RQ== + dependencies: + "@embroider/addon-shim" "^1.0.0" + focus-trap "^6.7.1" + ember-load-initializers@^2.1.2: version "2.1.2" resolved "https://registry.yarnpkg.com/ember-load-initializers/-/ember-load-initializers-2.1.2.tgz#8a47a656c1f64f9b10cecdb4e22a9d52ad9c7efa" @@ -6898,6 +6928,13 @@ flush-write-stream@^1.0.0: inherits "^2.0.3" readable-stream "^2.3.6" +focus-trap@^6.7.1: + version "6.9.4" + resolved "https://registry.yarnpkg.com/focus-trap/-/focus-trap-6.9.4.tgz#436da1a1d935c48b97da63cd8f361c6f3aa16444" + integrity sha512-v2NTsZe2FF59Y+sDykKY+XjqZ0cPfhq/hikWVL88BqLivnNiEffAsac6rP6H45ff9wG9LL5ToiDqrLEP9GX9mw== + dependencies: + tabbable "^5.3.3" + follow-redirects@^1.0.0: version "1.14.9" resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.14.9.tgz#dd4ea157de7bfaf9ea9b3fbd85aa16951f78d8d7" @@ -11829,6 +11866,11 @@ sync-disk-cache@^2.0.0: rimraf "^3.0.0" username-sync "^1.0.2" +tabbable@^5.3.3: + version "5.3.3" + resolved "https://registry.yarnpkg.com/tabbable/-/tabbable-5.3.3.tgz#aac0ff88c73b22d6c3c5a50b1586310006b47fbf" + integrity sha512-QD9qKY3StfbZqWOPLp0++pOrAVb/HbUi5xCc8cUo4XjP19808oaMiDzn0leBY5mCespIBM0CIZePzZjgzR83kA== + table@^6.0.9, table@^6.8.0: version "6.8.0" resolved "https://registry.yarnpkg.com/table/-/table-6.8.0.tgz#87e28f14fa4321c3377ba286f07b79b281a3b3ca" From f858e1979f189dd25b042ddc300ef1f5bdefa97f Mon Sep 17 00:00:00 2001 From: benjaminJ Date: Thu, 1 Sep 2022 14:49:13 +0200 Subject: [PATCH 3/4] feat: trap focus inside control menu when opened --- addon/components/freestyle-guide/index.hbs | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/addon/components/freestyle-guide/index.hbs b/addon/components/freestyle-guide/index.hbs index 646af4e3..fd772cae 100644 --- a/addon/components/freestyle-guide/index.hbs +++ b/addon/components/freestyle-guide/index.hbs @@ -38,9 +38,17 @@ {{/if}} {{#if this.showAside}} -
- + \ No newline at end of file From 079ce08ad3fc7b1f59f641ead008c79a47146cd3 Mon Sep 17 00:00:00 2001 From: benjaminJ Date: Thu, 1 Sep 2022 14:53:08 +0200 Subject: [PATCH 4/4] fix: aside button style --- app/styles/components/freestyle-guide.scss | 7 +++++++ vendor/ember-freestyle.css | 5 +++++ 2 files changed, 12 insertions(+) diff --git a/app/styles/components/freestyle-guide.scss b/app/styles/components/freestyle-guide.scss index b1adbc6c..fb3e10cf 100644 --- a/app/styles/components/freestyle-guide.scss +++ b/app/styles/components/freestyle-guide.scss @@ -39,6 +39,12 @@ $FreestyleGuide-boxShadow: 0 2px 5px 0 $FreestyleGuide-shadow1, text-align: center; } + &-cta--aside { + background: none; + border: 0; + padding: 0; + } + &-ctaIcon { &:hover { fill: $FreestyleGuide-color--primary; @@ -113,6 +119,7 @@ $FreestyleGuide-boxShadow: 0 2px 5px 0 $FreestyleGuide-shadow1, display: flex; height: 100%; font-size: 1.4rem; + & > span { margin: auto; } diff --git a/vendor/ember-freestyle.css b/vendor/ember-freestyle.css index c072fa78..ada6371a 100644 --- a/vendor/ember-freestyle.css +++ b/vendor/ember-freestyle.css @@ -22,6 +22,11 @@ font-size: 1.4rem; text-align: center; } +.FreestyleGuide-cta--aside { + background: none; + border: 0; + padding: 0; +} .FreestyleGuide-ctaIcon:hover { fill: #00bcd4; }