From 1eca5b9609b44ba8c8f058bc6bd2148bfebd7c82 Mon Sep 17 00:00:00 2001 From: Vladimir Gorej Date: Wed, 2 Aug 2023 16:42:18 +0200 Subject: [PATCH 1/2] fix(ui): change copy to cliboard button location Refs #8465 Refs #8153 Refs #8131 --- src/core/components/operation-summary.jsx | 17 +- src/style/_buttons.scss | 213 ++++++++++++---------- 2 files changed, 121 insertions(+), 109 deletions(-) diff --git a/src/core/components/operation-summary.jsx b/src/core/components/operation-summary.jsx index 5e38486427d..b4aed9c9920 100644 --- a/src/core/components/operation-summary.jsx +++ b/src/core/components/operation-summary.jsx @@ -83,11 +83,8 @@ export default class OperationSummary extends PureComponent { } {displayOperationId && (originalOperationId || operationId) ? {originalOperationId || operationId} : null} - - {isShown ? : } - - + { allowAnonymous ? null : } - + {/* TODO: use wrapComponents here, swagger-ui doesn't care about jumpToPath */} ) - } } diff --git a/src/style/_buttons.scss b/src/style/_buttons.scss index 42773ecb3a4..773bc50d32b 100644 --- a/src/style/_buttons.scss +++ b/src/style/_buttons.scss @@ -1,113 +1,111 @@ .btn { - font-size: 14px; - font-weight: bold; + font-size: 14px; + font-weight: bold; - padding: 5px 23px; + padding: 5px 23px; - transition: all .3s; - - border: 2px solid $btn-border-color; - border-radius: 4px; - background: transparent; - box-shadow: 0 1px 2px rgba($btn-box-shadow-color,.1); + transition: all .3s; - @include text_headline(); + border: 2px solid $btn-border-color; + border-radius: 4px; + background: transparent; + box-shadow: 0 1px 2px rgba($btn-box-shadow-color,.1); - &.btn-sm - { - font-size: 12px; - padding: 4px 23px; - } + @include text_headline(); - &[disabled] - { - cursor: not-allowed; + &.btn-sm + { + font-size: 12px; + padding: 4px 23px; + } - opacity: .3; - } + &[disabled] + { + cursor: not-allowed; - &:hover - { - box-shadow: 0 0 5px rgba($btn-box-shadow-color,.3); - } + opacity: .3; + } - &.cancel - { - border-color: $btn-cancel-border-color; - background-color: $btn-cancel-background-color; - @include text_headline($btn-cancel-font-color); - } + &:hover + { + box-shadow: 0 0 5px rgba($btn-box-shadow-color,.3); + } - &.authorize - { - line-height: 1; + &.cancel + { + border-color: $btn-cancel-border-color; + background-color: $btn-cancel-background-color; + @include text_headline($btn-cancel-font-color); + } - display: inline; + &.authorize + { + line-height: 1; - color: $btn-authorize-font-color; - border-color: $btn-authorize-border-color; - background-color: $btn-authorize-background-color; + display: inline; - span - { - float: left; + color: $btn-authorize-font-color; + border-color: $btn-authorize-border-color; + background-color: $btn-authorize-background-color; - padding: 4px 20px 0 0; - } + span + { + float: left; - svg - { - fill: $btn-authorize-svg-fill-color; - } + padding: 4px 20px 0 0; } - &.execute + svg { - background-color: $btn-execute-background-color-alt; - color: $btn-execute-font-color; - border-color: $btn-execute-border-color; + fill: $btn-authorize-svg-fill-color; } + } + + &.execute + { + background-color: $btn-execute-background-color-alt; + color: $btn-execute-font-color; + border-color: $btn-execute-border-color; + } } .btn-group { - display: flex; + display: flex; - padding: 30px; + padding: 30px; - .btn - { - flex: 1; + .btn + { + flex: 1; - &:first-child - { - border-radius: 4px 0 0 4px; - } + &:first-child + { + border-radius: 4px 0 0 4px; + } - &:last-child - { - border-radius: 0 4px 4px 0; - } + &:last-child + { + border-radius: 0 4px 4px 0; } + } } .authorization__btn { - padding: 0 0 0 10px; - - border: none; - background: none; + border: none; + background: none; - .locked - { - opacity: 1; - } + &.locked + { + opacity: 1; + } - .unlocked - { - opacity: .4; - } + &.unlocked + { + opacity: .4; + } } .opblock-summary-control, @@ -125,47 +123,48 @@ } } + .expand-methods, .expand-operation { - border: none; - background: none; + border: none; + background: none; - svg - { - width: 20px; - height: 20px; - } + svg + { + width: 20px; + height: 20px; + } } .expand-methods { - padding: 0 10px; + padding: 0 10px; - &:hover + &:hover + { + svg { - svg - { - fill: $expand-methods-svg-fill-color-hover; - } + fill: $expand-methods-svg-fill-color-hover; } + } - svg - { - transition: all .3s; + svg + { + transition: all .3s; - fill: $expand-methods-svg-fill-color; - } + fill: $expand-methods-svg-fill-color; + } } button { - cursor: pointer; + cursor: pointer; - &.invalid - { - @include invalidFormElement(); - } + &.invalid + { + @include invalidFormElement(); + } } .copy-to-clipboard @@ -192,6 +191,18 @@ button } } +.copy-to-clipboard:active +{ + background: #5e626f; +} + +.opblock-control-arrow +{ + border: none; + text-align: center; + background: none; +} + // overrides for smaller copy button for curl command .curl-command .copy-to-clipboard { @@ -209,6 +220,6 @@ button // overrides for copy to clipboard button .opblock .opblock-summary .view-line-link.copy-to-clipboard { - height: 26px; - position: unset; -} \ No newline at end of file + height: 26px; + position: unset; +} From f9dee84ec3dff7cf5aa28ae9f450fe6835b9f7c7 Mon Sep 17 00:00:00 2001 From: Vladimir Gorej Date: Wed, 16 Aug 2023 16:32:15 +0200 Subject: [PATCH 2/2] test: fix --- src/style/_buttons.scss | 7 ++++--- test/e2e-cypress/e2e/features/external-docs.cy.js | 6 +++--- 2 files changed, 7 insertions(+), 6 deletions(-) diff --git a/src/style/_buttons.scss b/src/style/_buttons.scss index 773bc50d32b..92948d35885 100644 --- a/src/style/_buttons.scss +++ b/src/style/_buttons.scss @@ -94,15 +94,17 @@ .authorization__btn { + padding: 0 0 0 10px; + border: none; background: none; - &.locked + .locked { opacity: 1; } - &.unlocked + .unlocked { opacity: .4; } @@ -123,7 +125,6 @@ } } - .expand-methods, .expand-operation { diff --git a/test/e2e-cypress/e2e/features/external-docs.cy.js b/test/e2e-cypress/e2e/features/external-docs.cy.js index e9d1c9ae526..bb2126fbc57 100644 --- a/test/e2e-cypress/e2e/features/external-docs.cy.js +++ b/test/e2e-cypress/e2e/features/external-docs.cy.js @@ -35,7 +35,7 @@ function ExternalDocsTest(baseUrl) { .and("have.attr", "href", "http://swagger.io") }) }) - + describe("for Tags", () => { it("should display link to external docs with description", () => { cy.visit(baseUrl) @@ -87,7 +87,7 @@ function ExternalDocsTest(baseUrl) { describe("for Operation", () => { it("should display link to external docs with description", () => { cy.visit(baseUrl) - .get("#operations-pet-updatePet button") + .get("#operations-pet-updatePet button.opblock-summary-control") .click() .get("#operations-pet-updatePet .opblock-external-docs-wrapper .opblock-external-docs__description") .should("contain.text", "More details about putting a pet") @@ -97,7 +97,7 @@ function ExternalDocsTest(baseUrl) { it("should display link to external docs without description", () => { cy.visit(baseUrl) - .get("#operations-pet-addPet button") + .get("#operations-pet-addPet button.opblock-summary-control") .click() .get("#operations-pet-addPet .opblock-external-docs-wrapper .opblock-external-docs__description") .should("not.exist")