From 3bfb6fe5eea00219bfa8d1336472d81f39be83ff Mon Sep 17 00:00:00 2001 From: Carlos Alcaide Date: Thu, 3 Jun 2021 10:05:43 -0700 Subject: [PATCH 1/8] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20New=20Card=20compone?= =?UTF-8?q?nt=20with=20header,=20body=20and=20footer?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Add the new Card component with header, body and footer for the desktop client. This card will be used within the connection dialog to show credentials โœ… Closes: ICU-1432 --- ui/desktop/app/components/card/index.hbs | 15 ++++++++++ .../tests/integration/components/card-test.js | 28 +++++++++++++++++++ 2 files changed, 43 insertions(+) create mode 100644 ui/desktop/app/components/card/index.hbs create mode 100644 ui/desktop/tests/integration/components/card-test.js diff --git a/ui/desktop/app/components/card/index.hbs b/ui/desktop/app/components/card/index.hbs new file mode 100644 index 000000000..1000ab795 --- /dev/null +++ b/ui/desktop/app/components/card/index.hbs @@ -0,0 +1,15 @@ +
+ {{yield + (hash + header=(component + 'rose/anonymous' tagName='header' class='credentials-card-header' + ) + body=(component + 'rose/anonymous' tagName='div' class='credentials-card-body' + ) + footer=(component + 'rose/anonymous' tagName='footer' class='credentials-card-footer' + ) + ) + }} +
\ No newline at end of file diff --git a/ui/desktop/tests/integration/components/card-test.js b/ui/desktop/tests/integration/components/card-test.js new file mode 100644 index 000000000..a48efd669 --- /dev/null +++ b/ui/desktop/tests/integration/components/card-test.js @@ -0,0 +1,28 @@ +import { module, test } from 'qunit'; +import { setupRenderingTest } from 'ember-qunit'; +import { render, find } from '@ember/test-helpers'; +import { hbs } from 'ember-cli-htmlbars'; + +module('Integration | Component | card', function (hooks) { + setupRenderingTest(hooks); + + test('it renders', async function (assert) { + await render(hbs``); + assert.ok(find('.credentials-card')); + }); + + test('it renders with content', async function (assert) { + await render(hbs` + + + + + + `); + + assert.ok(find('.credentials-card')); + assert.ok(find('.credentials-card-header')); + assert.ok(find('.credentials-card-body')); + assert.ok(find('.credentials-card-footer')); + }); +}); From b0a23487765018b0d2b36808e2c5be8fc70bf99c Mon Sep 17 00:00:00 2001 From: Carlos Alcaide Date: Tue, 8 Jun 2021 11:07:50 -0700 Subject: [PATCH 2/8] Refactor component name to just card and change tests to accommodate the changes --- ui/desktop/app/components/card/index.hbs | 10 ++-- ui/desktop/app/styles/app.scss | 57 ++++++++----------- .../tests/integration/components/card-test.js | 10 ++-- 3 files changed, 35 insertions(+), 42 deletions(-) diff --git a/ui/desktop/app/components/card/index.hbs b/ui/desktop/app/components/card/index.hbs index 1000ab795..1b571a872 100644 --- a/ui/desktop/app/components/card/index.hbs +++ b/ui/desktop/app/components/card/index.hbs @@ -1,15 +1,15 @@ -
+
{{yield (hash header=(component - 'rose/anonymous' tagName='header' class='credentials-card-header' + 'rose/anonymous' tagName='header' class='card-header' ) body=(component - 'rose/anonymous' tagName='div' class='credentials-card-body' + 'rose/anonymous' tagName='div' class='card-body' ) footer=(component - 'rose/anonymous' tagName='footer' class='credentials-card-footer' + 'rose/anonymous' tagName='footer' class='card-footer' ) ) }} -
\ No newline at end of file +
diff --git a/ui/desktop/app/styles/app.scss b/ui/desktop/app/styles/app.scss index cc21ec36f..de383ddd5 100644 --- a/ui/desktop/app/styles/app.scss +++ b/ui/desktop/app/styles/app.scss @@ -346,7 +346,6 @@ .rose-dialog-footer { align-items: center; - display: flex; div:nth-child(1) { display: flex; @@ -360,35 +359,29 @@ width: 50%; } } - - // .credentials-card { - // display: flex; - // flex-direction: column; - // margin-bottom: 12px; - - // &:last-child { margin-bottom: 0; } - - // .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; - // } - // } +} + +// Card component (app/componetns/card) +.card { + border: sizing.rems(xxxxs) solid var(--ui-gray-subtler-3); + display: flex; + flex-direction: column; + margin-bottom: sizing.rems(m); + + .card-header { + border-bottom: sizing.rems(xxxxs) solid var(--ui-gray-subtler-3); + display: flex; + } + + .card-body { + display: flex; + flex-direction: column; + padding: sizing.rems(s); + } + + .card-footer { + border-top: sizing.rems(xxxxs) solid var(--ui-gray-subtler-3); + display: flex; + padding: sizing.rems(s); + } } diff --git a/ui/desktop/tests/integration/components/card-test.js b/ui/desktop/tests/integration/components/card-test.js index a48efd669..03c63ab96 100644 --- a/ui/desktop/tests/integration/components/card-test.js +++ b/ui/desktop/tests/integration/components/card-test.js @@ -8,7 +8,7 @@ module('Integration | Component | card', function (hooks) { test('it renders', async function (assert) { await render(hbs``); - assert.ok(find('.credentials-card')); + assert.ok(find('.card')); }); test('it renders with content', async function (assert) { @@ -20,9 +20,9 @@ module('Integration | Component | card', function (hooks) { `); - assert.ok(find('.credentials-card')); - assert.ok(find('.credentials-card-header')); - assert.ok(find('.credentials-card-body')); - assert.ok(find('.credentials-card-footer')); + assert.ok(find('.card')); + assert.ok(find('.card-header')); + assert.ok(find('.card-body')); + assert.ok(find('.card-footer')); }); }); From 939dd1640912ca0e3be4fcf8247aff19cb7d0445 Mon Sep 17 00:00:00 2001 From: Carlos Alcaide Date: Tue, 8 Jun 2021 12:02:29 -0700 Subject: [PATCH 3/8] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20Change=20component?= =?UTF-8?q?=20name=20and=20add=20attributes?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Change the component name to a more generic name (card). Add heading attributes. โœ… Closes: ICU-1432 --- ui/desktop/app/components/card/index.hbs | 22 ++++++++++--------- .../tests/integration/components/card-test.js | 18 +++++++++++++++ 2 files changed, 30 insertions(+), 10 deletions(-) diff --git a/ui/desktop/app/components/card/index.hbs b/ui/desktop/app/components/card/index.hbs index 1b571a872..d0d766aeb 100644 --- a/ui/desktop/app/components/card/index.hbs +++ b/ui/desktop/app/components/card/index.hbs @@ -1,15 +1,17 @@
+
+
+ {{#if @icon}} + + {{/if}} + {{@heading}} +
+ {{yield (hash header=(component 'rose/anonymous'))}} +
{{yield (hash - header=(component - 'rose/anonymous' tagName='header' class='card-header' - ) - body=(component - 'rose/anonymous' tagName='div' class='card-body' - ) - footer=(component - 'rose/anonymous' tagName='footer' class='card-footer' - ) + body=(component 'rose/anonymous' tagName='div' class='card-body') + footer=(component 'rose/anonymous' tagName='footer' class='card-footer') ) }} -
+ \ No newline at end of file diff --git a/ui/desktop/tests/integration/components/card-test.js b/ui/desktop/tests/integration/components/card-test.js index 03c63ab96..8df798416 100644 --- a/ui/desktop/tests/integration/components/card-test.js +++ b/ui/desktop/tests/integration/components/card-test.js @@ -25,4 +25,22 @@ module('Integration | Component | card', function (hooks) { assert.ok(find('.card-body')); assert.ok(find('.card-footer')); }); + + test('header renders an icon when defined', async function (assert) { + await render(hbs` + + + + + + `); + + assert.ok(find('.card')); + assert.ok(find('.card-header')); + assert.ok(find('.card-header .rose-icon')); + assert.equal(this.element.textContent.trim(), 'This is a heading test'); + }); }); From 445d789344e14c3a327548fc0b68adb431c86cf2 Mon Sep 17 00:00:00 2001 From: Carlos Alcaide Date: Wed, 16 Jun 2021 13:42:57 -0700 Subject: [PATCH 4/8] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20Update=20PR=20with?= =?UTF-8?q?=20suggestions?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Apply forgoten padding and alignment styles for header. BREAKING CHANGE: ๐Ÿงจ - Refactor to use named block withint the card component. --- ui/desktop/app/components/card/index.hbs | 24 +++++++++++------------- ui/desktop/app/styles/app.scss | 8 ++++++++ 2 files changed, 19 insertions(+), 13 deletions(-) diff --git a/ui/desktop/app/components/card/index.hbs b/ui/desktop/app/components/card/index.hbs index d0d766aeb..07debfc77 100644 --- a/ui/desktop/app/components/card/index.hbs +++ b/ui/desktop/app/components/card/index.hbs @@ -1,17 +1,15 @@
-
- {{#if @icon}} - - {{/if}} - {{@heading}} -
- {{yield (hash header=(component 'rose/anonymous'))}} + {{#if @heading}} +
+ {{#if @icon}} + + {{/if}} + {{@heading}} +
+ {{/if}} + {{yield to='header'}}
- {{yield - (hash - body=(component 'rose/anonymous' tagName='div' class='card-body') - footer=(component 'rose/anonymous' tagName='footer' class='card-footer') - ) - }} +
{{yield to='body'}}
+
{{yield to='footer'}}
\ No newline at end of file diff --git a/ui/desktop/app/styles/app.scss b/ui/desktop/app/styles/app.scss index de383ddd5..b829c2938 100644 --- a/ui/desktop/app/styles/app.scss +++ b/ui/desktop/app/styles/app.scss @@ -371,6 +371,14 @@ .card-header { border-bottom: sizing.rems(xxxxs) solid var(--ui-gray-subtler-3); display: flex; + justify-content: flex-start; + padding: sizing.rems(s); + + div { + display: flex; + flex-shrink: 1; + width: 100%; + } } .card-body { From bfdaacc2cdc4c7294f8751e46fcdfd814321f4e5 Mon Sep 17 00:00:00 2001 From: Carlos Alcaide Date: Fri, 18 Jun 2021 16:23:07 -0700 Subject: [PATCH 5/8] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20Changing=20div=20for?= =?UTF-8?q?=20h2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Changing the heading text container from a div to an h2 --- ui/desktop/app/components/card/index.hbs | 4 ++-- ui/desktop/app/styles/app.scss | 9 ++++++++- 2 files changed, 10 insertions(+), 3 deletions(-) diff --git a/ui/desktop/app/components/card/index.hbs b/ui/desktop/app/components/card/index.hbs index 07debfc77..28e1f869f 100644 --- a/ui/desktop/app/components/card/index.hbs +++ b/ui/desktop/app/components/card/index.hbs @@ -1,12 +1,12 @@
{{#if @heading}} -
+

{{#if @icon}} {{/if}} {{@heading}} -

+ {{/if}} {{yield to='header'}}
diff --git a/ui/desktop/app/styles/app.scss b/ui/desktop/app/styles/app.scss index b829c2938..e314e01ce 100644 --- a/ui/desktop/app/styles/app.scss +++ b/ui/desktop/app/styles/app.scss @@ -369,12 +369,19 @@ margin-bottom: sizing.rems(m); .card-header { + align-items: center; border-bottom: sizing.rems(xxxxs) solid var(--ui-gray-subtler-3); display: flex; justify-content: flex-start; padding: sizing.rems(s); - div { + h2 { + @include type.type(s, normal); + color: var(--ui-gray-starker-1); + } + + div, + h2 { display: flex; flex-shrink: 1; width: 100%; From c3561a106366fc399c0a13beb4c14ba048effceb Mon Sep 17 00:00:00 2001 From: Randall Morey Date: Tue, 22 Jun 2021 12:08:31 -0400 Subject: [PATCH 6/8] chore: tweak card styles --- ui/desktop/app/styles/app.scss | 14 +++--- .../scopes/scope/projects/targets.hbs | 45 ++++++++++++++----- 2 files changed, 40 insertions(+), 19 deletions(-) diff --git a/ui/desktop/app/styles/app.scss b/ui/desktop/app/styles/app.scss index e314e01ce..537e540ed 100644 --- a/ui/desktop/app/styles/app.scss +++ b/ui/desktop/app/styles/app.scss @@ -373,30 +373,26 @@ border-bottom: sizing.rems(xxxxs) solid var(--ui-gray-subtler-3); display: flex; justify-content: flex-start; - padding: sizing.rems(s); + padding: sizing.rems(s) sizing.rems(m); h2 { @include type.type(s, normal); color: var(--ui-gray-starker-1); + margin: 0; + padding: sizing.rems(xxs) + sizing.rems(xxxs) 0; } - div, - h2 { - display: flex; - flex-shrink: 1; - width: 100%; + .rose-icon { + margin-right: sizing.rems(xxxs); } } .card-body { - display: flex; - flex-direction: column; padding: sizing.rems(s); } .card-footer { border-top: sizing.rems(xxxxs) solid var(--ui-gray-subtler-3); - display: flex; padding: sizing.rems(s); } } diff --git a/ui/desktop/app/templates/scopes/scope/projects/targets.hbs b/ui/desktop/app/templates/scopes/scope/projects/targets.hbs index 3fee051d6..5e6f624f4 100644 --- a/ui/desktop/app/templates/scopes/scope/projects/targets.hbs +++ b/ui/desktop/app/templates/scopes/scope/projects/targets.hbs @@ -20,18 +20,43 @@ <:body>

{{t 'resources.target.messages.proxy_url.title'}} ({{t 'resources.target.types.tcp'}})

- - {{session.proxy_address}}:{{session.proxy_port}} - +

+ + {{session.proxy_address}}:{{session.proxy_port}} + +

- {{! + {{!-- -

Credentials

}} +

Credentials

+ + <:body> + + + + Key + Value + + + + + Foo + Value + + + ttl + Test + + + + + +--}} <:footer>
@@ -58,4 +83,4 @@ {{/each}} {{/each}} -{{outlet}} \ No newline at end of file +{{outlet}} From 8934e4455878300b7c88b329fe71965968341752 Mon Sep 17 00:00:00 2001 From: Randall Morey Date: Tue, 22 Jun 2021 12:26:20 -0400 Subject: [PATCH 7/8] tweak styles --- addons/core/public/app-icons/credential.svg | 4 ++ addons/core/public/app-icons/credentials.svg | 9 +++++ .../styles/rose/components/table/_table.scss | 27 ++++++++++++- ui/desktop/app/components/card/index.hbs | 40 ++++++++++++------- .../scopes/scope/projects/targets.hbs | 10 ++--- 5 files changed, 69 insertions(+), 21 deletions(-) create mode 100644 addons/core/public/app-icons/credential.svg create mode 100644 addons/core/public/app-icons/credentials.svg diff --git a/addons/core/public/app-icons/credential.svg b/addons/core/public/app-icons/credential.svg new file mode 100644 index 000000000..fb9bc8a1d --- /dev/null +++ b/addons/core/public/app-icons/credential.svg @@ -0,0 +1,4 @@ + + + + diff --git a/addons/core/public/app-icons/credentials.svg b/addons/core/public/app-icons/credentials.svg new file mode 100644 index 000000000..72c15d48a --- /dev/null +++ b/addons/core/public/app-icons/credentials.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/addons/rose/addon/styles/rose/components/table/_table.scss b/addons/rose/addon/styles/rose/components/table/_table.scss index 40520adee..279deda1a 100644 --- a/addons/rose/addon/styles/rose/components/table/_table.scss +++ b/addons/rose/addon/styles/rose/components/table/_table.scss @@ -9,6 +9,10 @@ .rose-table-row { border-bottom: sizing.rems(xxxxs) solid var(--ui-gray-subtler-3); text-align: left; + + &:last-child { + border-bottom: 0; + } } // This styles are add to stop the input to apply extra margin (default on forms) @@ -39,6 +43,9 @@ .rose-table-header-cell { @include type.type(s, semibold); + } + + .rose-table-header .rose-table-header-cell { color: var(--ui-gray); } @@ -67,11 +74,27 @@ } &.rose-table-condensed { - .rose-table-cell { + .rose-table-cell, + .rose-table-header-cell { @include type.type(s); $lineHeight: math.div(36, 14); line-height: $lineHeight; - padding: math.div(sizing.rems(s), 2) sizing.rems(s); + padding: sizing.rems(xxs) + sizing.rems(xxxxs) sizing.rems(s); + + &:first-child { + padding-left: 0; + } + } + .rose-table-header { + .rose-table-header-cell { + $lineHeight: math.div(16, 14); + line-height: $lineHeight; + padding: sizing.rems(xs) sizing.rems(s); + + &:first-child { + padding-left: 0; + } + } } } diff --git a/ui/desktop/app/components/card/index.hbs b/ui/desktop/app/components/card/index.hbs index 28e1f869f..e7525224f 100644 --- a/ui/desktop/app/components/card/index.hbs +++ b/ui/desktop/app/components/card/index.hbs @@ -1,15 +1,27 @@
-
- {{#if @heading}} -

- {{#if @icon}} - - {{/if}} - {{@heading}} -

- {{/if}} - {{yield to='header'}} -
-
{{yield to='body'}}
-
{{yield to='footer'}}
-
\ No newline at end of file + {{#if (if (has-block 'header') true @heading)}} +
+ {{#if @heading}} +

+ {{#if @icon}} + + {{/if}} + {{@heading}} +

+ {{/if}} + + {{yield to='header'}} + +
+ {{/if}} + +
+ {{yield to='body'}} +
+ + {{#if (has-block 'footer')}} +
+ {{yield to='footer'}} +
+ {{/if}} +
diff --git a/ui/desktop/app/templates/scopes/scope/projects/targets.hbs b/ui/desktop/app/templates/scopes/scope/projects/targets.hbs index 5e6f624f4..09eae199b 100644 --- a/ui/desktop/app/templates/scopes/scope/projects/targets.hbs +++ b/ui/desktop/app/templates/scopes/scope/projects/targets.hbs @@ -32,20 +32,20 @@ {{!-- -

Credentials

+

Credentials

--}} - + <:body> - Key + Key Value - Foo + foo Value @@ -56,7 +56,7 @@ ---}} + <:footer>
From 4abf4e5550f3756bd1067b1c299d2ceab0f7fb14 Mon Sep 17 00:00:00 2001 From: Randall Morey Date: Tue, 22 Jun 2021 12:58:34 -0400 Subject: [PATCH 8/8] =?UTF-8?q?chore:=20=F0=9F=A4=96=20polish=20card=20and?= =?UTF-8?q?=20example=20card=20usage?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ui/desktop/app/components/card/index.hbs | 2 +- .../templates/scopes/scope/projects/targets.hbs | 8 ++++---- .../tests/integration/components/card-test.js | 17 ++++++++--------- 3 files changed, 13 insertions(+), 14 deletions(-) diff --git a/ui/desktop/app/components/card/index.hbs b/ui/desktop/app/components/card/index.hbs index e7525224f..1516a7bcf 100644 --- a/ui/desktop/app/components/card/index.hbs +++ b/ui/desktop/app/components/card/index.hbs @@ -24,4 +24,4 @@ {{yield to='footer'}} {{/if}} - + \ No newline at end of file diff --git a/ui/desktop/app/templates/scopes/scope/projects/targets.hbs b/ui/desktop/app/templates/scopes/scope/projects/targets.hbs index 09eae199b..1fa2603c6 100644 --- a/ui/desktop/app/templates/scopes/scope/projects/targets.hbs +++ b/ui/desktop/app/templates/scopes/scope/projects/targets.hbs @@ -30,9 +30,9 @@

- {{!-- + {{! -

Credentials

--}} +

Credentials

<:body> @@ -56,7 +56,7 @@ - + }} <:footer>
@@ -83,4 +83,4 @@ {{/each}} {{/each}} -{{outlet}} +{{outlet}} \ No newline at end of file diff --git a/ui/desktop/tests/integration/components/card-test.js b/ui/desktop/tests/integration/components/card-test.js index 8df798416..fdb37919b 100644 --- a/ui/desktop/tests/integration/components/card-test.js +++ b/ui/desktop/tests/integration/components/card-test.js @@ -13,10 +13,10 @@ module('Integration | Component | card', function (hooks) { test('it renders with content', async function (assert) { await render(hbs` - - - - + + <:header> + <:body> + <:footer> `); @@ -30,11 +30,10 @@ module('Integration | Component | card', function (hooks) { await render(hbs` - - - + @icon='key'> + <:header> + <:body> + <:footer> `);