From 82da9a34add6a2097b00cd4a435510e89c73a960 Mon Sep 17 00:00:00 2001 From: John Cowen Date: Thu, 25 Apr 2019 15:45:57 +0000 Subject: [PATCH 1/6] ui: Integrate new pills with icons 1. Introduce the idea of 'policy types' instead of just 'is-management' with a new policy/typeof helper 2. Add placeholders for all structure icons, and start replacing the older ones. 3. %pills no default to transparent, the gray is added at a project level 4. Started to introduce a saner way to size tables, basically sane defaults with the ability to overwrite for the more involved tables --- ui-v2/app/helpers/policy/is-management.js | 8 - ui-v2/app/helpers/policy/typeof.js | 18 + .../base/decoration/base-placeholders.scss | 11 + .../styles/base/icons/base-placeholders.scss | 13 + .../app/styles/base/icons/base-variables.scss | 3 +- .../styles/base/icons/icon-placeholders.scss | 494 ++++++++++++++++++ ui-v2/app/styles/base/icons/index.scss | 2 + ui-v2/app/styles/components/anchors.scss | 7 +- ui-v2/app/styles/components/pill.scss | 22 + ui-v2/app/styles/components/pill/skin.scss | 1 - ui-v2/app/styles/components/table/layout.scss | 2 +- ui-v2/app/styles/components/table/skin.scss | 12 +- .../styles/components/tabular-collection.scss | 133 ++--- ui-v2/app/styles/core/typography.scss | 5 +- .../styles/routes/dc/acls/tokens/index.scss | 3 - ui-v2/app/styles/variables/index.scss | 5 - ui-v2/app/templates/dc/acls/policies/edit.hbs | 4 +- .../app/templates/dc/acls/policies/index.hbs | 4 +- ui-v2/app/templates/dc/acls/roles/index.hbs | 9 +- ui-v2/app/templates/dc/acls/tokens/index.hbs | 2 +- .../{is-management-test.js => typeof-test.js} | 8 +- .../unit/helpers/policy/is-management-test.js | 13 - 22 files changed, 643 insertions(+), 136 deletions(-) delete mode 100644 ui-v2/app/helpers/policy/is-management.js create mode 100644 ui-v2/app/helpers/policy/typeof.js create mode 100644 ui-v2/app/styles/base/icons/base-placeholders.scss create mode 100644 ui-v2/app/styles/base/icons/icon-placeholders.scss rename ui-v2/tests/integration/helpers/policy/{is-management-test.js => typeof-test.js} (61%) delete mode 100644 ui-v2/tests/unit/helpers/policy/is-management-test.js diff --git a/ui-v2/app/helpers/policy/is-management.js b/ui-v2/app/helpers/policy/is-management.js deleted file mode 100644 index d35093f22712..000000000000 --- a/ui-v2/app/helpers/policy/is-management.js +++ /dev/null @@ -1,8 +0,0 @@ -import { helper } from '@ember/component/helper'; -import { get } from '@ember/object'; -const MANAGEMENT_ID = '00000000-0000-0000-0000-000000000001'; -export function isManagement(params, hash) { - return get(params[0], 'ID') === MANAGEMENT_ID; -} - -export default helper(isManagement); diff --git a/ui-v2/app/helpers/policy/typeof.js b/ui-v2/app/helpers/policy/typeof.js new file mode 100644 index 000000000000..ec4b5e441ad9 --- /dev/null +++ b/ui-v2/app/helpers/policy/typeof.js @@ -0,0 +1,18 @@ +import { helper } from '@ember/component/helper'; +import { get } from '@ember/object'; +const MANAGEMENT_ID = '00000000-0000-0000-0000-000000000001'; +export function typeOf(params, hash) { + const item = params[0]; + switch (true) { + case get(item, 'ID') === MANAGEMENT_ID: + return 'policy-management'; + case typeof get(item, 'template') === 'undefined': + return 'role'; + case get(item, 'template') !== '': + return 'policy-service-identity'; + default: + return 'policy'; + } +} + +export default helper(typeOf); diff --git a/ui-v2/app/styles/base/decoration/base-placeholders.scss b/ui-v2/app/styles/base/decoration/base-placeholders.scss index 42a6acd54ced..69bc7f7f7152 100644 --- a/ui-v2/app/styles/base/decoration/base-placeholders.scss +++ b/ui-v2/app/styles/base/decoration/base-placeholders.scss @@ -1,3 +1,14 @@ +%visually-hidden { + position: absolute !important; + height: 1px; + width: 1px; + overflow: hidden; + clip: rect(1px, 1px, 1px, 1px); +} +%visually-hidden-text { + text-indent: -9000px; + font-size: 0; +} %decor-border-000 { border-style: solid; border-width: 0; diff --git a/ui-v2/app/styles/base/icons/base-placeholders.scss b/ui-v2/app/styles/base/icons/base-placeholders.scss new file mode 100644 index 000000000000..0d873f2e5932 --- /dev/null +++ b/ui-v2/app/styles/base/icons/base-placeholders.scss @@ -0,0 +1,13 @@ +%with-icon { + background-repeat: no-repeat; + background-position: center; +} +%as-pseudo { + display: inline-block; + content: ''; + visibility: visible; + background-size: contain; + width: 1.2em; + height: 1.2em; + vertical-align: text-top; +} diff --git a/ui-v2/app/styles/base/icons/base-variables.scss b/ui-v2/app/styles/base/icons/base-variables.scss index e63eeb064212..1be5ffae1b19 100644 --- a/ui-v2/app/styles/base/icons/base-variables.scss +++ b/ui-v2/app/styles/base/icons/base-variables.scss @@ -73,10 +73,11 @@ $queue-svg: url('data:image/svg+xml;charset=UTF-8,'); $run-svg: url('data:image/svg+xml;charset=UTF-8,'); $search-svg: url('data:image/svg+xml;charset=UTF-8,'); +$service-identity-svg: url('data:image/svg+xml;charset=UTF-8,'); $settings-svg: url('data:image/svg+xml;charset=UTF-8,'); $star-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); $star-outline-svg: url('data:image/svg+xml;charset=UTF-8,'); -$star-svg: url('data:image/svg+xml;charset=UTF-8,'); +$star-svg: url('data:image/svg+xml;charset=UTF-8,'); $sub-arrow-left-svg: url('data:image/svg+xml;charset=UTF-8,'); $sub-arrow-right-svg: url('data:image/svg+xml;charset=UTF-8,'); $swap-horizontal-svg: url('data:image/svg+xml;charset=UTF-8,'); diff --git a/ui-v2/app/styles/base/icons/icon-placeholders.scss b/ui-v2/app/styles/base/icons/icon-placeholders.scss new file mode 100644 index 000000000000..f6d41b930850 --- /dev/null +++ b/ui-v2/app/styles/base/icons/icon-placeholders.scss @@ -0,0 +1,494 @@ +%with-alert-circle-fill-icon { + @extend %with-icon; + background-image: $alert-circle-fill-svg; +} + +%with-alert-circle-outline-icon { + @extend %with-icon; + background-image: $alert-circle-outline-svg; +} + +%with-alert-triangle-icon { + @extend %with-icon; + background-image: $alert-triangle-svg; +} + +%with-arrow-down-icon { + @extend %with-icon; + background-image: $arrow-down-svg; +} + +%with-arrow-left-icon { + @extend %with-icon; + background-image: $arrow-left-svg; +} + +%with-arrow-right-icon { + @extend %with-icon; + background-image: $arrow-right-svg; +} + +%with-arrow-up-icon { + @extend %with-icon; + background-image: $arrow-up-svg; +} + +%with-calendar-icon { + @extend %with-icon; + background-image: $calendar-svg; +} + +%with-cancel-circle-fill-icon { + @extend %with-icon; + background-image: $cancel-circle-fill-svg; +} + +%with-cancel-circle-outline-icon { + @extend %with-icon; + background-image: $cancel-circle-outline-svg; +} + +%with-cancel-plain-icon { + @extend %with-icon; + background-image: $cancel-plain-svg; +} + +%with-cancel-square-fill-icon { + @extend %with-icon; + background-image: $cancel-square-fill-svg; +} + +%with-cancel-square-outline-icon { + @extend %with-icon; + background-image: $cancel-square-outline-svg; +} + +%with-caret-down-icon { + @extend %with-icon; + background-image: $caret-down-svg; +} + +%with-caret-up-icon { + @extend %with-icon; + background-image: $caret-up-svg; +} + +%with-check-circle-fill-icon { + @extend %with-icon; + background-image: $check-circle-fill-svg; +} + +%with-check-circle-outline-icon { + @extend %with-icon; + background-image: $check-circle-outline-svg; +} + +%with-check-plain-icon { + @extend %with-icon; + background-image: $check-plain-svg; +} + +%with-chevron-down-2-icon { + @extend %with-icon; + background-image: $chevron-down-2-svg; +} + +%with-chevron-down-icon { + @extend %with-icon; + background-image: $chevron-down-svg; +} + +%with-chevron-left-icon { + @extend %with-icon; + background-image: $chevron-left-svg; +} + +%with-chevron-right-icon { + @extend %with-icon; + background-image: $chevron-right-svg; +} + +%with-chevron-up-icon { + @extend %with-icon; + background-image: $chevron-up-svg; +} + +%with-chevron-icon { + @extend %with-icon; + background-image: $chevron-svg; +} + +%with-clock-fill-icon { + @extend %with-icon; + background-image: $clock-fill-svg; +} + +%with-clock-outline-icon { + @extend %with-icon; + background-image: $clock-outline-svg; +} + +%with-code-icon { + @extend %with-icon; + background-image: $code-svg; +} + +%with-consul-logo-color-icon { + @extend %with-icon; + background-image: $consul-logo-color-svg; +} + +%with-copy-action-icon { + @extend %with-icon; + background-image: $copy-action-svg; +} + +%with-copy-success-icon { + @extend %with-icon; + background-image: $copy-success-svg; +} + +%with-disabled-icon { + @extend %with-icon; + background-image: $disabled-svg; +} + +%with-download-icon { + @extend %with-icon; + background-image: $download-svg; +} + +%with-edit-icon { + @extend %with-icon; + background-image: $edit-svg; +} + +%with-exit-icon { + @extend %with-icon; + background-image: $exit-svg; +} + +%with-expand-less-icon { + @extend %with-icon; + background-image: $expand-less-svg; +} + +%with-expand-more-icon { + @extend %with-icon; + background-image: $expand-more-svg; +} + +%with-eye-icon { + @extend %with-icon; + background-image: $eye-svg; +} + +%with-file-fill-icon { + @extend %with-icon; + background-image: $file-fill-svg; +} + +%with-file-outline-icon { + @extend %with-icon; + background-image: $file-outline-svg; +} + +%with-filter-icon { + @extend %with-icon; + background-image: $filter-svg; +} + +%with-flag-icon { + @extend %with-icon; + background-image: $flag-svg; +} + +%with-folder-fill-icon { + @extend %with-icon; + background-image: $folder-fill-svg; +} + +%with-folder-outline-icon { + @extend %with-icon; + background-image: $folder-outline-svg; +} + +%with-git-branch-icon { + @extend %with-icon; + background-image: $git-branch-svg; +} + +%with-git-commit-icon { + @extend %with-icon; + background-image: $git-commit-svg; +} + +%with-git-pull-request-icon { + @extend %with-icon; + background-image: $git-pull-request-svg; +} + +%with-hashicorp-logo-icon { + @extend %with-icon; + background-image: $hashicorp-logo-svg; +} + +%with-help-circle-fill-icon { + @extend %with-icon; + background-image: $help-circle-fill-svg; +} + +%with-help-circle-outline-icon { + @extend %with-icon; + background-image: $help-circle-outline-svg; +} + +%with-history-icon { + @extend %with-icon; + background-image: $history-svg; +} + +%with-info-circle-fill-icon { + @extend %with-icon; + background-image: $info-circle-fill-svg; +} + +%with-info-circle-outline-icon { + @extend %with-icon; + background-image: $info-circle-outline-svg; +} + +%with-kubernetes-logo-color-icon { + @extend %with-icon; + background-image: $kubernetes-logo-color-svg; +} + +%with-link-icon { + @extend %with-icon; + background-image: $link-svg; +} + +%with-loading-icon { + @extend %with-icon; + background-image: $loading-svg; +} + +%with-lock-closed-icon { + @extend %with-icon; + background-image: $lock-closed-svg; +} + +%with-lock-disabled-icon { + @extend %with-icon; + background-image: $lock-disabled-svg; +} + +%with-lock-open-icon { + @extend %with-icon; + background-image: $lock-open-svg; +} + +%with-menu-icon { + @extend %with-icon; + background-image: $menu-svg; +} + +%with-minus-circle-fill-icon { + @extend %with-icon; + background-image: $minus-circle-fill-svg; +} + +%with-minus-circle-outline-icon { + @extend %with-icon; + background-image: $minus-circle-outline-svg; +} + +%with-minus-plain-icon { + @extend %with-icon; + background-image: $minus-plain-svg; +} + +%with-minus-square-fill-icon { + @extend %with-icon; + background-image: $minus-square-fill-svg; +} + +%with-minus-icon { + @extend %with-icon; + background-image: $minus-svg; +} + +%with-more-horizontal-icon { + @extend %with-icon; + background-image: $more-horizontal-svg; +} + +%with-more-vertical-icon { + @extend %with-icon; + background-image: $more-vertical-svg; +} + +%with-nomad-logo-color-icon { + @extend %with-icon; + background-image: $nomad-logo-color-svg; +} + +%with-plus-circle-fill-icon { + @extend %with-icon; + background-image: $plus-circle-fill-svg; +} + +%with-plus-circle-outline-icon { + @extend %with-icon; + background-image: $plus-circle-outline-svg; +} + +%with-plus-plain-icon { + @extend %with-icon; + background-image: $plus-plain-svg; +} + +%with-plus-square-fill-icon { + @extend %with-icon; + background-image: $plus-square-fill-svg; +} + +%with-queue-icon { + @extend %with-icon; + background-image: $queue-svg; +} + +%with-refresh-icon { + @extend %with-icon; + background-image: $refresh-svg; +} + +%with-run-icon { + @extend %with-icon; + background-image: $run-svg; +} + +%with-search-icon { + @extend %with-icon; + background-image: $search-svg; +} + +%with-service-identity-icon { + @extend %with-icon; + background-image: $service-identity-svg; +} + +%with-settings-icon { + @extend %with-icon; + background-image: $settings-svg; +} + +%with-star-fill-icon { + @extend %with-icon; + background-image: $star-fill-svg; +} + +%with-star-outline-icon { + @extend %with-icon; + background-image: $star-outline-svg; +} + +%with-star-icon { + @extend %with-icon; + background-image: $star-svg; +} + +%with-sub-arrow-left-icon { + @extend %with-icon; + background-image: $sub-arrow-left-svg; +} + +%with-sub-arrow-right-icon { + @extend %with-icon; + background-image: $sub-arrow-right-svg; +} + +%with-swap-horizontal-icon { + @extend %with-icon; + background-image: $swap-horizontal-svg; +} + +%with-swap-vertical-icon { + @extend %with-icon; + background-image: $swap-vertical-svg; +} + +%with-terraform-logo-color-icon { + @extend %with-icon; + background-image: $terraform-logo-color-svg; +} + +%with-tier-enterprise-icon { + @extend %with-icon; + background-image: $tier-enterprise-svg; +} + +%with-tier-oss-icon { + @extend %with-icon; + background-image: $tier-oss-svg; +} + +%with-trash-icon { + @extend %with-icon; + background-image: $trash-svg; +} + +%with-tune-icon { + @extend %with-icon; + background-image: $tune-svg; +} + +%with-unfold-less-icon { + @extend %with-icon; + background-image: $unfold-less-svg; +} + +%with-unfold-more-icon { + @extend %with-icon; + background-image: $unfold-more-svg; +} + +%with-upload-icon { + @extend %with-icon; + background-image: $upload-svg; +} + +%with-user-organization-icon { + @extend %with-icon; + background-image: $user-organization-svg; +} + +%with-user-plain-icon { + @extend %with-icon; + background-image: $user-plain-svg; +} + +%with-user-square-fill-icon { + @extend %with-icon; + background-image: $user-square-fill-svg; +} + +%with-user-square-outline-icon { + @extend %with-icon; + background-image: $user-square-outline-svg; +} + +%with-user-team-icon { + @extend %with-icon; + background-image: $user-team-svg; +} + +%with-visibility-hide-icon { + @extend %with-icon; + background-image: $visibility-hide-svg; +} + +%with-visibility-show-icon { + @extend %with-icon; + background-image: $visibility-show-svg; +} diff --git a/ui-v2/app/styles/base/icons/index.scss b/ui-v2/app/styles/base/icons/index.scss index bb221c7e8f97..17b18ac3c64d 100644 --- a/ui-v2/app/styles/base/icons/index.scss +++ b/ui-v2/app/styles/base/icons/index.scss @@ -1 +1,3 @@ @import './base-variables'; +@import './base-placeholders'; +@import './icon-placeholders'; diff --git a/ui-v2/app/styles/components/anchors.scss b/ui-v2/app/styles/components/anchors.scss index a4ac20ee7b4b..af16dbd1b63b 100644 --- a/ui-v2/app/styles/components/anchors.scss +++ b/ui-v2/app/styles/components/anchors.scss @@ -2,12 +2,13 @@ %main-content a { color: $gray-900; } -%main-content a[rel*='help'] { - @extend %with-info; -} %main-content label a[rel*='help'] { color: $gray-400; } +%main-content a[rel*='help']::after { + @extend %with-info-circle-outline-icon, %as-pseudo; + opacity: 0.4; +} [role='tabpanel'] > p:only-child [rel*='help']::after { content: none; diff --git a/ui-v2/app/styles/components/pill.scss b/ui-v2/app/styles/components/pill.scss index af1809c33957..05dd079250d3 100644 --- a/ui-v2/app/styles/components/pill.scss +++ b/ui-v2/app/styles/components/pill.scss @@ -3,3 +3,25 @@ td strong, %tag-list span { @extend %pill; } + +%pill:not([class]) { + @extend %frame-gray-900; +} +%pill[class]::before { + @extend %as-pseudo; + margin-right: 3px; +} +%pill.policy::before { + @extend %with-file-fill-icon; + opacity: 0.3; +} +%pill.policy-management::before { + @extend %with-star-icon; +} +%pill.policy-service-identity::before { + @extend %with-service-identity-icon; +} +%pill.role::before { + @extend %with-user-plain-icon; + opacity: 0.3; +} diff --git a/ui-v2/app/styles/components/pill/skin.scss b/ui-v2/app/styles/components/pill/skin.scss index b234ac46dff3..f1cf7bdc77a9 100644 --- a/ui-v2/app/styles/components/pill/skin.scss +++ b/ui-v2/app/styles/components/pill/skin.scss @@ -1,4 +1,3 @@ %pill { - @extend %frame-gray-900; border-radius: $radius-small; } diff --git a/ui-v2/app/styles/components/table/layout.scss b/ui-v2/app/styles/components/table/layout.scss index 6cf8ef1ccd2f..bcc0893432d3 100644 --- a/ui-v2/app/styles/components/table/layout.scss +++ b/ui-v2/app/styles/components/table/layout.scss @@ -2,7 +2,7 @@ table { width: 100%; } %table-actions { - width: 60px; + width: 60px !important; } th.actions input { display: none; diff --git a/ui-v2/app/styles/components/table/skin.scss b/ui-v2/app/styles/components/table/skin.scss index 9ab4efc978f9..4eea3a5cf240 100644 --- a/ui-v2/app/styles/components/table/skin.scss +++ b/ui-v2/app/styles/components/table/skin.scss @@ -3,11 +3,13 @@ td { border-bottom: $decor-border-100; } th { - color: $gray-400 !important; -} -th { - border-color: $keyline-dark; + border-color: $gray-300; } td { - border-color: $keyline-mid; + border-color: $gray-200; + color: $gray-500; +} +th, +td strong { + color: $gray-600; } diff --git a/ui-v2/app/styles/components/tabular-collection.scss b/ui-v2/app/styles/components/tabular-collection.scss index ae890282a129..705789a46d49 100644 --- a/ui-v2/app/styles/components/tabular-collection.scss +++ b/ui-v2/app/styles/components/tabular-collection.scss @@ -31,30 +31,49 @@ table.dom-recycling { /* using: */ /* calc(<100% divided by number of non-fixed width cells> - ) */ -/*TODO: trs only live in tables, get rid of table */ -html.template-service.template-list main table tr { - @extend %services-row; +table tr > *:nth-last-child(2):first-child, +table tr > *:nth-last-child(2):first-child ~ * { + width: calc(100% / 2); } -html.template-service.template-show #instances table tr { - @extend %instances-row; +table tr > *:nth-last-child(3):first-child, +table tr > *:nth-last-child(3):first-child ~ * { + width: calc(100% / 3); } -html.template-instance.template-show #upstreams table tr { - @extend %upstreams-row; +table tr > *:nth-last-child(4):first-child, +table tr > *:nth-last-child(4):first-child ~ * { + width: calc(100% / 4); +} +table tr > *:nth-last-child(5):first-child, +table tr > *:nth-last-child(5):first-child ~ * { + width: calc(100% / 5); +} + +table.has-actions tr > .actions { + @extend %table-actions; } -html.template-intention.template-list main table tr { - @extend %intentions-row; +table.has-actions tr > *:nth-last-child(2):first-child, +table.has-actions tr > *:nth-last-child(2):first-child ~ * { + width: calc(100% - 60px); } -html.template-kv.template-list main table tr { - @extend %kvs-row; +table.has-actions tr > *:nth-last-child(3):first-child, +table.has-actions tr > *:nth-last-child(3):first-child ~ * { + width: calc(50% - 30px); } -html.template-acl.template-list main table tr { - @extend %acls-row; +table.has-actions tr > *:nth-last-child(4):first-child, +table.has-actions tr > *:nth-last-child(4):first-child ~ * { + width: calc(33% - 20px); } -html.template-policy.template-list main table tr { - @extend %policies-row; +table.has-actions tr > *:nth-last-child(5):first-child, +table.has-actions tr > *:nth-last-child(5):first-child ~ * { + width: calc(25% - 15px); } -html.template-role.template-list main table tr { - @extend %roles-row; + +/*TODO: trs only live in tables, get rid of table */ +html.template-service.template-list main table tr { + @extend %services-row; +} +html.template-service.template-show #instances table tr { + @extend %instances-row; } html.template-token.template-list main table tr { @extend %tokens-row; @@ -70,12 +89,30 @@ html.template-token.template-list main table tr td.me ~ td, html.template-token.template-list main table tr th { @extend %tokens-your-row; } -html.template-node.template-show main table tr { - @extend %node-services-row; -} html.template-node.template-show main table.sessions tr { @extend %node-sessions-row; } +%tokens-row > *:first-child, +%tokens-minimal-row > *:not(last-child), +%tokens-row > *:nth-child(2), +%tokens-your-row:nth-last-child(2) { + width: 120px; +} +%tokens-row > *:nth-child(3) { + width: calc(50% - 150px); +} +%tokens-row > *:nth-child(4) { + width: calc(50% - 150px); +} +%tokens-your-row:nth-child(4) { + width: calc(50% - 270px) !important; +} +%tokens-row > *:last-child { + @extend %table-actions; +} +%tokens-minimal-row > *:last-child { + width: calc(100% - 240px) !important; +} @media #{$--horizontal-session-list} { %node-sessions-row > * { // (100% / 7) - (300px / 6) - (120px / 6) @@ -106,37 +143,6 @@ html.template-node.template-show main table.sessions tr { display: none; } } -%intentions-row > * { - width: calc(25% - 15px); -} -%intentions-row > *:last-child { - @extend %table-actions; -} -%acls-row > * { - width: calc(50% - 30px); -} -%acls-row > *:last-child { - @extend %table-actions; -} -%tokens-row > *:first-child, -%tokens-minimal-row > *:not(last-child), -%tokens-row > *:nth-child(2), -%tokens-your-row:nth-last-child(2) { - width: 120px; -} -%tokens-row > *:nth-child(3), -%tokens-row > *:nth-child(4) { - width: calc(50% - 150px); -} -%tokens-your-row:nth-child(4) { - width: calc(50% - 270px) !important; -} -%tokens-row > *:last-child { - @extend %table-actions; -} -%tokens-minimal-row > *:last-child { - width: calc(100% - 240px); -} @media #{$--lt-medium-table} { /* Token > Policies */ /* Token > Your Token */ @@ -153,28 +159,6 @@ html.template-node.template-show main table.sessions tr { width: calc(100% / 4); } } - -%kvs-row > *:first-child { - width: calc(100% - 60px); -} -%kvs-row > *:last-child { - @extend %table-actions; -} -%node-services-row > * { - width: calc(100% / 3); -} -%policies-row > * { - width: calc(33% - 20px); -} -%policies-row > *:last-child { - @extend %table-actions; -} -%roles-row > * { - width: calc(33% - 20px); -} -%roles-row > *:last-child { - @extend %table-actions; -} // this will get auto calculated later in tabular-collection.js // keeping this here for reference // %services-row > * { @@ -190,6 +174,3 @@ html.template-node.template-show main table.sessions tr { %instances-row > * { width: calc(100% / 5); } -%upstreams-row > * { - width: calc(100% / 4); -} diff --git a/ui-v2/app/styles/core/typography.scss b/ui-v2/app/styles/core/typography.scss index d37be70581e3..acbb7d827bb2 100644 --- a/ui-v2/app/styles/core/typography.scss +++ b/ui-v2/app/styles/core/typography.scss @@ -39,9 +39,7 @@ h2, %healthcheck-output dt, %copy-button, %app-content div > dl > dt, -td:first-child a { - font-weight: $typo-weight-semibold; -} +td:first-child a, fieldset > header, %form-element > span, %toggle label span, @@ -52,6 +50,7 @@ caption { font-weight: $typo-weight-semibold !important; } th, +td strong, %breadcrumbs li > *, %action-group-action, %tab-nav, diff --git a/ui-v2/app/styles/routes/dc/acls/tokens/index.scss b/ui-v2/app/styles/routes/dc/acls/tokens/index.scss index 0eefb379da24..da023689a38c 100644 --- a/ui-v2/app/styles/routes/dc/acls/tokens/index.scss +++ b/ui-v2/app/styles/routes/dc/acls/tokens/index.scss @@ -4,9 +4,6 @@ cursor: pointer; float: right; } -%pill.policy-management { - @extend %with-star; -} %token-yours { text-indent: 20px; color: $blue-500; diff --git a/ui-v2/app/styles/variables/index.scss b/ui-v2/app/styles/variables/index.scss index a5f40df0c762..6689805bbc18 100644 --- a/ui-v2/app/styles/variables/index.scss +++ b/ui-v2/app/styles/variables/index.scss @@ -4,11 +4,6 @@ $gray-025: #fafbfc; $magenta-800-no-hash: 5a1434; -$keyline-light: $gray-100; // h1 -$keyline-mid: $gray-200; // td, footer -$keyline-dark: $gray-300; // th -$keyline-darker: $gray-400; - // decoration // undecided $radius-small: $decor-radius-100; diff --git a/ui-v2/app/templates/dc/acls/policies/edit.hbs b/ui-v2/app/templates/dc/acls/policies/edit.hbs index b2b585b1b796..b322153143d5 100644 --- a/ui-v2/app/templates/dc/acls/policies/edit.hbs +++ b/ui-v2/app/templates/dc/acls/policies/edit.hbs @@ -19,7 +19,7 @@ {{#if create }} New Policy {{else}} - {{#if (policy/is-management item)}} + {{#if (eq (policy/typeof item) 'policy-management')}} View Policy {{else}} Edit Policy @@ -31,7 +31,7 @@ {{/block-slot}} {{#block-slot 'content'}} -{{#if (policy/is-management item)}} +{{#if (eq (policy/typeof item) 'policy-management')}} {{ partial 'dc/acls/policies/view'}} {{else}} {{ partial 'dc/acls/policies/form'}} diff --git a/ui-v2/app/templates/dc/acls/policies/index.hbs b/ui-v2/app/templates/dc/acls/policies/index.hbs index e5bf59aca125..da156c8c4399 100644 --- a/ui-v2/app/templates/dc/acls/policies/index.hbs +++ b/ui-v2/app/templates/dc/acls/policies/index.hbs @@ -37,7 +37,7 @@ {{/block-slot}} {{#block-slot 'row' }} - {{item.Name}} + {{item.Name}} {{join ', ' (policy/datacenters item)}} @@ -51,7 +51,7 @@ {{#block-slot 'action' as |confirm|}} {{#action-group index=index onchange=(action change) checked=(if (eq checked index) 'checked')}}