From 377b54a9987946121ec34e4be286cf027835824c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Vladim=C3=ADr=20Gorej?= Date: Wed, 16 Aug 2023 16:43:31 +0200 Subject: [PATCH] fix(ui): change copy to clipboard button location (#9111) Refs #8465 Refs #8153 Refs #8131 --- src/core/components/operation-summary.jsx | 17 +- src/style/_buttons.scss | 230 +++++++++--------- .../e2e/features/external-docs.cy.js | 6 +- 3 files changed, 133 insertions(+), 120 deletions(-) diff --git a/src/core/components/operation-summary.jsx b/src/core/components/operation-summary.jsx index 5e384864..b4aed9c9 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 42773ecb..92948d35 100644 --- a/src/style/_buttons.scss +++ b/src/style/_buttons.scss @@ -1,113 +1,113 @@ .btn { - font-size: 14px; - font-weight: bold; + font-size: 14px; + font-weight: bold; - padding: 5px 23px; + padding: 5px 23px; - transition: all .3s; + 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); + border: 2px solid $btn-border-color; + border-radius: 4px; + background: transparent; + box-shadow: 0 1px 2px rgba($btn-box-shadow-color,.1); - @include text_headline(); + @include text_headline(); - &.btn-sm + &.btn-sm + { + font-size: 12px; + padding: 4px 23px; + } + + &[disabled] + { + cursor: not-allowed; + + opacity: .3; + } + + &:hover + { + box-shadow: 0 0 5px rgba($btn-box-shadow-color,.3); + } + + &.cancel + { + border-color: $btn-cancel-border-color; + background-color: $btn-cancel-background-color; + @include text_headline($btn-cancel-font-color); + } + + &.authorize + { + line-height: 1; + + display: inline; + + color: $btn-authorize-font-color; + border-color: $btn-authorize-border-color; + background-color: $btn-authorize-background-color; + + span { - font-size: 12px; - padding: 4px 23px; + float: left; + + padding: 4px 20px 0 0; } - &[disabled] + svg { - cursor: not-allowed; - - opacity: .3; + fill: $btn-authorize-svg-fill-color; } + } - &:hover - { - box-shadow: 0 0 5px rgba($btn-box-shadow-color,.3); - } - - &.cancel - { - border-color: $btn-cancel-border-color; - background-color: $btn-cancel-background-color; - @include text_headline($btn-cancel-font-color); - } - - &.authorize - { - line-height: 1; - - display: inline; - - color: $btn-authorize-font-color; - border-color: $btn-authorize-border-color; - background-color: $btn-authorize-background-color; - - span - { - float: left; - - padding: 4px 20px 0 0; - } - - svg - { - 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; - } + &.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 + .btn + { + flex: 1; + + &:first-child { - flex: 1; - - &:first-child - { - border-radius: 4px 0 0 4px; - } - - &:last-child - { - border-radius: 0 4px 4px 0; - } + border-radius: 4px 0 0 4px; } + + &:last-child + { + border-radius: 0 4px 4px 0; + } + } } .authorization__btn { - padding: 0 0 0 10px; + 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, @@ -128,44 +128,44 @@ .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; - - &:hover - { - svg - { - fill: $expand-methods-svg-fill-color-hover; - } - } + padding: 0 10px; + &:hover + { svg { - transition: all .3s; - - fill: $expand-methods-svg-fill-color; + fill: $expand-methods-svg-fill-color-hover; } + } + + svg + { + transition: all .3s; + + fill: $expand-methods-svg-fill-color; + } } button { - cursor: pointer; + cursor: pointer; - &.invalid - { - @include invalidFormElement(); - } + &.invalid + { + @include invalidFormElement(); + } } .copy-to-clipboard @@ -192,6 +192,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 +221,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; +} diff --git a/test/e2e-cypress/e2e/features/external-docs.cy.js b/test/e2e-cypress/e2e/features/external-docs.cy.js index e9d1c9ae..bb2126fb 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")