From a6a33f6b56c0eac0a9d40fe4e78cce3026e58091 Mon Sep 17 00:00:00 2001 From: Carlos Alcaide Date: Fri, 11 Jun 2021 14:48:41 -0700 Subject: [PATCH 1/7] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20Create=20reveal=20co?= =?UTF-8?q?mponent=20for=20desktop=20client?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Create reveal component for desktop client. ✅ Closes: ICU-1432 --- ui/desktop/app/components/reveal/index.hbs | 17 ++++++ ui/desktop/app/components/reveal/index.js | 14 +++++ ui/desktop/app/styles/app.scss | 52 ++++++++----------- .../integration/components/reveal-test.js | 47 +++++++++++++++++ 4 files changed, 101 insertions(+), 29 deletions(-) create mode 100644 ui/desktop/app/components/reveal/index.hbs create mode 100644 ui/desktop/app/components/reveal/index.js create mode 100644 ui/desktop/tests/integration/components/reveal-test.js diff --git a/ui/desktop/app/components/reveal/index.hbs b/ui/desktop/app/components/reveal/index.hbs new file mode 100644 index 000000000..3f8a551eb --- /dev/null +++ b/ui/desktop/app/components/reveal/index.hbs @@ -0,0 +1,17 @@ +
+ + + {{if this.isOpen @textWhenOpen @textWhenClose}} + + + +
+ +{{#if this.isOpen}} + + {{yield}} + +{{/if}} \ No newline at end of file diff --git a/ui/desktop/app/components/reveal/index.js b/ui/desktop/app/components/reveal/index.js new file mode 100644 index 000000000..f2833ba37 --- /dev/null +++ b/ui/desktop/app/components/reveal/index.js @@ -0,0 +1,14 @@ +import Component from '@glimmer/component'; +import { tracked } from '@glimmer/tracking'; +import { action } from '@ember/object'; + +export default class RevealComponent extends Component { + // =attributes + @tracked isOpen = false; + + // =actions + @action + toggle() { + this.isOpen = !this.isOpen; + } +} diff --git a/ui/desktop/app/styles/app.scss b/ui/desktop/app/styles/app.scss index cc21ec36f..64acd993f 100644 --- a/ui/desktop/app/styles/app.scss +++ b/ui/desktop/app/styles/app.scss @@ -319,7 +319,6 @@ } .change-origin { - @include type.type(s); color: var(--ui-border-starker-1); margin: sizing.rems(l) 0 0 0; text-align: center; @@ -361,34 +360,29 @@ } } - // .credentials-card { - // display: flex; - // flex-direction: column; - // margin-bottom: 12px; +.reveal { + display: flex; + margin-bottom: sizing.rems(m); - // &:last-child { margin-bottom: 0; } + .reveal-summary { + align-items: center; + color: var(--info); + display: flex; + flex-direction: row; + // Hide default twistie triangle + // Firefox + list-style-type: none; + // Webkit / Chromium + &::-webkit-details-marker { + display: none; + } - // .credentials-card-header { - // display: flex; - // flex-direction: row; - - // div { - // display: flex; - // width: 50%; - - // &:last-child { - // justify-content: flex-end; - // } - // } - // // border-bottom: 1px solid grey; - // } - - // .credentials-card-body { - // // background: yellow; - // } - - // .credentials-card-footer { - // // background: pink; - // } - // } + &::marker { + display: none; + } + } +} + +.reveal-content { + display: flex; } diff --git a/ui/desktop/tests/integration/components/reveal-test.js b/ui/desktop/tests/integration/components/reveal-test.js new file mode 100644 index 000000000..4c8f5497d --- /dev/null +++ b/ui/desktop/tests/integration/components/reveal-test.js @@ -0,0 +1,47 @@ +import { module, test } from 'qunit'; +import { setupRenderingTest } from 'ember-qunit'; +import { render, find, click } from '@ember/test-helpers'; +import { hbs } from 'ember-cli-htmlbars'; + +module('Integration | Component | reveal', function (hooks) { + setupRenderingTest(hooks); + + test('it renders', async function (assert) { + assert.expect(3); + await render(hbs` + + `); + assert.ok(find('.reveal')); + assert.ok(find('.reveal-summary')); + assert.ok(find('.reveal-summary').textContent.trim(), 'View content'); + }); + + test('it renders with content, opens, show the content, close and hide the content', async function (assert) { + await render(hbs` + + 
+          
+            {
+              "auth": null,
+              "lease_duration": 3600,
+              "lease_id": "",
+              "renewable": false
+            }
+          
+
+ + `); + assert.notOk(find('.reveal-content')); + await click('details'); + assert.ok(find('.reveal-content')); + assert.ok(find('.reveal-content pre code')); + await click('details'); + assert.notOk(find('.reveal-content')); + }); +}); From b209ff7b2afd406783bfcc0d1499e52af5edf656 Mon Sep 17 00:00:00 2001 From: Carlos Alcaide Date: Fri, 11 Jun 2021 15:00:31 -0700 Subject: [PATCH 2/7] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20Fix=20commited=20mis?= =?UTF-8?q?take?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Fix a line of code I delete by accident on my previous commit --- ui/desktop/app/styles/app.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/ui/desktop/app/styles/app.scss b/ui/desktop/app/styles/app.scss index 64acd993f..821c274d8 100644 --- a/ui/desktop/app/styles/app.scss +++ b/ui/desktop/app/styles/app.scss @@ -319,6 +319,7 @@ } .change-origin { + @include type.type(s); color: var(--ui-border-starker-1); margin: sizing.rems(l) 0 0 0; text-align: center; From 62b097170c203692e575d99778ef08001ba29063 Mon Sep 17 00:00:00 2001 From: Carlos Alcaide Date: Fri, 18 Jun 2021 12:29:39 -0700 Subject: [PATCH 3/7] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20Changes=20from=20pre?= =?UTF-8?q?vious=20PR=20suggestions?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Refactor RevealComponent class to inherit from RoseDropdown, no logic need it. Now there is no need to keep any logic or state. - Refactor component, to toggle Summary text and set chevron icon with CSS. - Removed old commented code. Please feel free to suggest a change to bring it back if can be useful. --- .../rose/components/dropdown/_item.scss | 5 ---- ui/desktop/app/components/reveal/index.hbs | 21 +++++++-------- ui/desktop/app/components/reveal/index.js | 15 +++-------- ui/desktop/app/styles/app.scss | 27 +++++++++++++++++++ .../integration/components/reveal-test.js | 13 ++++----- 5 files changed, 47 insertions(+), 34 deletions(-) diff --git a/addons/rose/addon/styles/rose/components/dropdown/_item.scss b/addons/rose/addon/styles/rose/components/dropdown/_item.scss index a0f4b0a67..b38dd5903 100644 --- a/addons/rose/addon/styles/rose/components/dropdown/_item.scss +++ b/addons/rose/addon/styles/rose/components/dropdown/_item.scss @@ -57,11 +57,6 @@ $checkmark: url("data:image/svg+xml;utf-8, +
-
- {{if this.isOpen @textWhenOpen @textWhenClose}} + + {{@textWhenClose}} + + + {{@textWhenOpen}} - - - -{{#if this.isOpen}} - + + {{yield}} -{{/if}} \ No newline at end of file + \ No newline at end of file diff --git a/ui/desktop/app/components/reveal/index.js b/ui/desktop/app/components/reveal/index.js index f2833ba37..339596663 100644 --- a/ui/desktop/app/components/reveal/index.js +++ b/ui/desktop/app/components/reveal/index.js @@ -1,14 +1,7 @@ -import Component from '@glimmer/component'; -import { tracked } from '@glimmer/tracking'; -import { action } from '@ember/object'; +import RoseDropdownComponent from 'rose/components/rose/dropdown'; -export default class RevealComponent extends Component { - // =attributes - @tracked isOpen = false; - - // =actions - @action - toggle() { - this.isOpen = !this.isOpen; +export default class RevealComponent extends RoseDropdownComponent { + constructor() { + super(...arguments); } } diff --git a/ui/desktop/app/styles/app.scss b/ui/desktop/app/styles/app.scss index 821c274d8..fc806580d 100644 --- a/ui/desktop/app/styles/app.scss +++ b/ui/desktop/app/styles/app.scss @@ -360,11 +360,38 @@ width: 50%; } } +} + + +$chevron-up: "data:image/svg+xml;utf-8,"; +$chevron-down: "data:image/svg+xml;utf-8,"; .reveal { display: flex; margin-bottom: sizing.rems(m); + &:not([open]) .reveal-summary { + .reveal-summary-text-close { + background: url($chevron-down) no-repeat right center; + padding-right: sizing.rems(l); + } + + .reveal-summary-text-open { + display: none; + } + } + + &[open] .reveal-summary { + .reveal-summary-text-open { + background: url($chevron-up) no-repeat right center; + padding-right: sizing.rems(l); + } + + .reveal-summary-text-close { + display: none; + } + } + .reveal-summary { align-items: center; color: var(--info); diff --git a/ui/desktop/tests/integration/components/reveal-test.js b/ui/desktop/tests/integration/components/reveal-test.js index 4c8f5497d..4acf7b69e 100644 --- a/ui/desktop/tests/integration/components/reveal-test.js +++ b/ui/desktop/tests/integration/components/reveal-test.js @@ -20,6 +20,7 @@ module('Integration | Component | reveal', function (hooks) { }); test('it renders with content, opens, show the content, close and hide the content', async function (assert) { + assert.expect(3); await render(hbs` `); - assert.notOk(find('.reveal-content')); - await click('details'); - assert.ok(find('.reveal-content')); - assert.ok(find('.reveal-content pre code')); - await click('details'); - assert.notOk(find('.reveal-content')); + + assert.notOk(find('details').open); + await click('summary'); + assert.ok(find('details').open); + await click('summary'); + assert.notOk(find('details').open); }); }); From e47c3bd14ef1795102b1bebc6205b18e96380eaa Mon Sep 17 00:00:00 2001 From: Carlos Alcaide Date: Fri, 18 Jun 2021 15:27:52 -0700 Subject: [PATCH 4/7] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20Change=20Dropdown=20?= =?UTF-8?q?behaviour?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Now when you click inside the dropdown it does not close. --- ui/desktop/app/components/reveal/index.hbs | 2 +- ui/desktop/app/components/reveal/index.js | 6 +----- 2 files changed, 2 insertions(+), 6 deletions(-) diff --git a/ui/desktop/app/components/reveal/index.hbs b/ui/desktop/app/components/reveal/index.hbs index 3e1de8ee9..5674a8036 100644 --- a/ui/desktop/app/components/reveal/index.hbs +++ b/ui/desktop/app/components/reveal/index.hbs @@ -8,7 +8,7 @@ - + {{yield}} \ No newline at end of file diff --git a/ui/desktop/app/components/reveal/index.js b/ui/desktop/app/components/reveal/index.js index 339596663..a4db866c4 100644 --- a/ui/desktop/app/components/reveal/index.js +++ b/ui/desktop/app/components/reveal/index.js @@ -1,7 +1,3 @@ import RoseDropdownComponent from 'rose/components/rose/dropdown'; -export default class RevealComponent extends RoseDropdownComponent { - constructor() { - super(...arguments); - } -} +export default class RevealComponent extends RoseDropdownComponent {} From 2b5afa0e2c361a6550a580321e632745798114cb Mon Sep 17 00:00:00 2001 From: Randall Morey Date: Tue, 22 Jun 2021 15:35:19 -0400 Subject: [PATCH 5/7] chore: add more example content to credentials card --- .../scopes/scope/projects/targets.hbs | 32 +++++++++++++++++-- 1 file changed, 29 insertions(+), 3 deletions(-) diff --git a/ui/desktop/app/templates/scopes/scope/projects/targets.hbs b/ui/desktop/app/templates/scopes/scope/projects/targets.hbs index 1fa2603c6..fb8f3789e 100644 --- a/ui/desktop/app/templates/scopes/scope/projects/targets.hbs +++ b/ui/desktop/app/templates/scopes/scope/projects/targets.hbs @@ -35,6 +35,15 @@

Credentials

+ <:header> + + + <:body> @@ -55,8 +64,25 @@ - - }} + <:footer> + + 
+                    
+  {
+    "auth": null,
+    "lease_duration": 3600,
+    "lease_id": "",
+    "renewable": false
+  }
+                    
+
+ + + --}} + <:footer>
@@ -83,4 +109,4 @@ {{/each}} {{/each}} -{{outlet}} \ No newline at end of file +{{outlet}} From 3fcff99024e15c9a00dead2ef35fb21c0987ac9f Mon Sep 17 00:00:00 2001 From: Randall Morey Date: Tue, 22 Jun 2021 15:35:47 -0400 Subject: [PATCH 6/7] fix: template syntax error --- ui/desktop/app/templates/scopes/scope/projects/targets.hbs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui/desktop/app/templates/scopes/scope/projects/targets.hbs b/ui/desktop/app/templates/scopes/scope/projects/targets.hbs index fb8f3789e..d9066001a 100644 --- a/ui/desktop/app/templates/scopes/scope/projects/targets.hbs +++ b/ui/desktop/app/templates/scopes/scope/projects/targets.hbs @@ -30,7 +30,7 @@

- {{! + {{!--

Credentials

From 1143fb02cc1e1460688522a750d152056f8ce3e1 Mon Sep 17 00:00:00 2001 From: Randall Morey Date: Tue, 22 Jun 2021 16:43:02 -0400 Subject: [PATCH 7/7] =?UTF-8?q?chore:=20=F0=9F=A4=96=20polish=20up=20revea?= =?UTF-8?q?l=20component?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ui/desktop/.stylelintrc.json | 3 +- ui/desktop/app/components/reveal/index.hbs | 8 +-- ui/desktop/app/styles/app.scss | 68 +++++++++---------- .../scopes/scope/projects/targets.hbs | 2 +- .../integration/components/reveal-test.js | 4 +- 5 files changed, 42 insertions(+), 43 deletions(-) diff --git a/ui/desktop/.stylelintrc.json b/ui/desktop/.stylelintrc.json index b20f46ce4..d28c485da 100644 --- a/ui/desktop/.stylelintrc.json +++ b/ui/desktop/.stylelintrc.json @@ -6,6 +6,7 @@ "scss/at-extend-no-missing-placeholder": null, "function-parentheses-space-inside": null, "property-no-vendor-prefix": null, - "at-rule-no-vendor-prefix": null + "at-rule-no-vendor-prefix": null, + "order/properties-alphabetical-order": null } } diff --git a/ui/desktop/app/components/reveal/index.hbs b/ui/desktop/app/components/reveal/index.hbs index 5674a8036..8e15785dd 100644 --- a/ui/desktop/app/components/reveal/index.hbs +++ b/ui/desktop/app/components/reveal/index.hbs @@ -1,9 +1,9 @@ -
- - +
+ + {{@textWhenClose}} - + {{@textWhenOpen}} diff --git a/ui/desktop/app/styles/app.scss b/ui/desktop/app/styles/app.scss index 09e6ce142..00313f9ea 100644 --- a/ui/desktop/app/styles/app.scss +++ b/ui/desktop/app/styles/app.scss @@ -361,40 +361,22 @@ } } -$chevron-up: "data:image/svg+xml;utf-8,"; -$chevron-down: "data:image/svg+xml;utf-8,"; +// Reveal component (app/components/reveal) +$chevron-up: url("data:image/svg+xml;utf-8,"); +$chevron-down: url("data:image/svg+xml;utf-8,"); .reveal { - display: flex; - margin-bottom: sizing.rems(m); + --trigger-color: var(--action); - &:not([open]) .reveal-summary { - .reveal-summary-text-close { - background: url($chevron-down) no-repeat right center; - padding-right: sizing.rems(l); - } + .reveal-trigger { + background: url($chevron-down) no-repeat right center; + color: var(--trigger-color); + cursor: default; + display: inline-block; + overflow: hidden; + padding-right: sizing.rems(l); + white-space: nowrap; - .reveal-summary-text-open { - display: none; - } - } - - &[open] .reveal-summary { - .reveal-summary-text-open { - background: url($chevron-up) no-repeat right center; - padding-right: sizing.rems(l); - } - - .reveal-summary-text-close { - display: none; - } - } - - .reveal-summary { - align-items: center; - color: var(--info); - display: flex; - flex-direction: row; // Hide default twistie triangle // Firefox list-style-type: none; @@ -406,14 +388,30 @@ $chevron-down: "data:image/svg+xml;utf-8, `); assert.ok(find('.reveal')); - assert.ok(find('.reveal-summary')); - assert.ok(find('.reveal-summary').textContent.trim(), 'View content'); + assert.ok(find('.reveal-trigger')); + assert.ok(find('.reveal-trigger').textContent.trim(), 'View content'); }); test('it renders with content, opens, show the content, close and hide the content', async function (assert) {