From 0460290458fcce808302c87d075426af6146fdc0 Mon Sep 17 00:00:00 2001 From: kgough Date: Fri, 25 Aug 2017 12:14:31 +1000 Subject: [PATCH 1/8] fix(ZNTA-2186) remove borders from editor inputs, change classes to IDs in modals --- .../components/GlossaryTermModal/component.js | 2 +- .../RejectTranslationModal/index.css | 29 ++++++++++--------- .../RejectTranslationModal/index.js | 2 +- .../app/editor/containers/Root/index.css | 5 ++++ .../SuggestionDetailsModal/index.js | 2 +- 5 files changed, 23 insertions(+), 17 deletions(-) diff --git a/server/zanata-frontend/src/frontend/app/editor/components/GlossaryTermModal/component.js b/server/zanata-frontend/src/frontend/app/editor/components/GlossaryTermModal/component.js index 5d1ac31ea41..00025bf0c9d 100644 --- a/server/zanata-frontend/src/frontend/app/editor/components/GlossaryTermModal/component.js +++ b/server/zanata-frontend/src/frontend/app/editor/components/GlossaryTermModal/component.js @@ -72,7 +72,7 @@ class GlossaryTermModal extends React.Component { + id="glossary-modal"> Glossary details diff --git a/server/zanata-frontend/src/frontend/app/editor/components/RejectTranslationModal/index.css b/server/zanata-frontend/src/frontend/app/editor/components/RejectTranslationModal/index.css index 9beda9fa3ec..0973d2a3bb8 100644 --- a/server/zanata-frontend/src/frontend/app/editor/components/RejectTranslationModal/index.css +++ b/server/zanata-frontend/src/frontend/app/editor/components/RejectTranslationModal/index.css @@ -1,12 +1,12 @@ :root { - --TM-input-border: solid 1px rgb(99, 156, 173); - --TM-input-border-radius: 8px; - --TM-large-spacing: 6rem; - --TM-default-margin: 0.75rem; - --TM-small-margin: 0.375rem; - --TM-text-color: rgb(84, 102, 119); - --TM-icon-vert-alignment: middle; - --TM-dropdown-text-color: #03a6d7; + --TM-input-border: solid 1px rgb(99, 156, 173); + --TM-input-border-radius: 8px; + --TM-large-spacing: 6rem; + --TM-default-margin: 0.75rem; + --TM-small-margin: 0.375rem; + --TM-text-color: rgb(84, 102, 119); + --TM-icon-vert-alignment: middle; + --TM-dropdown-text-color: #03a6d7; } .flex { @@ -17,6 +17,7 @@ #prioritytitle, #criteriatitle { margin-right: var(--TM-default-margin); } + .modal-body { color: var(--TM-text-color); } @@ -25,13 +26,13 @@ margin-left: 1.5rem; } -.InputGroup--outlined { - border: var(--TM-input-border); +.modal-body .InputGroup--outlined { + border: var(--TM-input-border) !important; } -.Dropdown { +.modal-body .Dropdown { border-radius: var(--TM-input-border-radius); - border: var(--TM-input-border); + border: var(--TM-input-border) !important; } .criteria { @@ -41,7 +42,7 @@ a.Dropdown-item span.s0 { vertical-align: var(--TM-icon-vert-alignment); margin-left: var(--TM-small-margin); - } +} .InputGroup--outlined.commenting { margin-top: 2rem; @@ -79,7 +80,7 @@ a.Dropdown-item span.s0 { vertical-align: var(--TM-icon-vert-alignment); } -button.close { +#rejection-modal button.close { display: none; visibility: hidden; } diff --git a/server/zanata-frontend/src/frontend/app/editor/components/RejectTranslationModal/index.js b/server/zanata-frontend/src/frontend/app/editor/components/RejectTranslationModal/index.js index 08a95642e0a..ecb4a321066 100644 --- a/server/zanata-frontend/src/frontend/app/editor/components/RejectTranslationModal/index.js +++ b/server/zanata-frontend/src/frontend/app/editor/components/RejectTranslationModal/index.js @@ -74,7 +74,7 @@ export class RejectTranslationModal extends Component { + id="rejection-modal"> Reject translation diff --git a/server/zanata-frontend/src/frontend/app/editor/containers/Root/index.css b/server/zanata-frontend/src/frontend/app/editor/containers/Root/index.css index 3e38d1e72d9..c71fb81ad24 100644 --- a/server/zanata-frontend/src/frontend/app/editor/containers/Root/index.css +++ b/server/zanata-frontend/src/frontend/app/editor/containers/Root/index.css @@ -615,6 +615,11 @@ button.Link--neutral .row span.u-ltemd-hidden { label span.n1 { vertical-align: middle !important; } + +.InputGroup--outlined, .Dropdown { + border: none; +} + /** * Media Queries */ diff --git a/server/zanata-frontend/src/frontend/app/editor/containers/SuggestionDetailsModal/index.js b/server/zanata-frontend/src/frontend/app/editor/containers/SuggestionDetailsModal/index.js index 825f03e4ec6..7ebf5386143 100644 --- a/server/zanata-frontend/src/frontend/app/editor/containers/SuggestionDetailsModal/index.js +++ b/server/zanata-frontend/src/frontend/app/editor/containers/SuggestionDetailsModal/index.js @@ -49,7 +49,7 @@ class SuggestionDetailsModal extends Component { + id="suggestions-modal"> Suggestion Details From e60932f9d9d0fb8c5458f86307685cd19c74237d Mon Sep 17 00:00:00 2001 From: kgough Date: Fri, 25 Aug 2017 12:26:29 +1000 Subject: [PATCH 2/8] fix(ZNTA-2186) removed redundant css --- .../src/frontend/app/editor/containers/Root/index.css | 5 ----- 1 file changed, 5 deletions(-) diff --git a/server/zanata-frontend/src/frontend/app/editor/containers/Root/index.css b/server/zanata-frontend/src/frontend/app/editor/containers/Root/index.css index c71fb81ad24..3e38d1e72d9 100644 --- a/server/zanata-frontend/src/frontend/app/editor/containers/Root/index.css +++ b/server/zanata-frontend/src/frontend/app/editor/containers/Root/index.css @@ -615,11 +615,6 @@ button.Link--neutral .row span.u-ltemd-hidden { label span.n1 { vertical-align: middle !important; } - -.InputGroup--outlined, .Dropdown { - border: none; -} - /** * Media Queries */ From 3732668e64f89d02c500558a44417bf8f0e34333 Mon Sep 17 00:00:00 2001 From: kgough Date: Fri, 25 Aug 2017 15:55:23 +1000 Subject: [PATCH 3/8] fix(ZNTA-2186) remove redundant css from editor search input component directories --- .../components/EditorSearchInput/index.css | 82 ---------------- .../components/GlossarySearchInput/index.css | 97 ------------------- .../SuggestionSearchInput/index.css | 96 ------------------ 3 files changed, 275 deletions(-) delete mode 100644 server/zanata-frontend/src/frontend/app/editor/components/GlossarySearchInput/index.css delete mode 100644 server/zanata-frontend/src/frontend/app/editor/components/SuggestionSearchInput/index.css diff --git a/server/zanata-frontend/src/frontend/app/editor/components/EditorSearchInput/index.css b/server/zanata-frontend/src/frontend/app/editor/components/EditorSearchInput/index.css index 62969e1652d..43dc3a68dcf 100644 --- a/server/zanata-frontend/src/frontend/app/editor/components/EditorSearchInput/index.css +++ b/server/zanata-frontend/src/frontend/app/editor/components/EditorSearchInput/index.css @@ -1,14 +1,3 @@ -/** @define InputGroup; use strict */ - -:root { - --InputGroup-rhythm: 1.5rem; - --InputGroup-input-color: #20718A; - --InputGroup-addon-color: color(#20718A tint(30%)); - --InputGroup-border-color: color(#20718A tint(60%)); - --InputGroup-border--focus-color: color(#20718A tint(30%)); - --InputGroup-transition: 0.2s cubic-bezier(.26, .47, .36, .94); -} - .InputEditorSearch { margin-left: 0.75em; display: inline-flex; @@ -73,77 +62,6 @@ li.inline-search-list span { color: #20718A; } -.InputGroup { - position: relative; - display: table; - border-collapse: separate; -} - -.InputGroup-input, .InputGroup-addon, .InputGroup-button { - display: table-cell; - transition: var(--InputGroup-transition); -} - -.InputGroup-input, .InputGroup-addon { - background-color: transparent; - padding: 0 calc(var(--InputGroup-rhythm) * .25); -} - -.InputGroup-input { - border: none; - color: var(--InputGroup-input-color); -} - -.InputGroup-addon { - color: var(--InputGroup-addon-color); - text-align: center; - width: 1%; - white-space: nowrap; - vertical-align: middle; -} - -.InputGroup-addon:before { - content: ' '; -} - -.InputGroup.is-focused .InputGroup-input, .InputGroup.is-focused .InputGroup-addon { - background-color: #fff; -} - -.InputGroup--bordered .InputGroup-input, .InputGroup--bordered .InputGroup-addon, .InputGroup--outlined .InputGroup-input, .InputGroup--outlined .InputGroup-addon { - border-top: 1px solid var(--InputGroup-border-color); - border-bottom: 1px solid var(--InputGroup-border-color); -} - -.InputGroup--bordered .InputGroup-input { - border-left: 1px solid var(--InputGroup-border-color); - border-right: 1px solid var(--InputGroup-border-color); -} - -.InputGroup--outlined .InputGroup-input:first-child, .InputGroup--outlined .InputGroup-addon:first-child { - border-left: 1px solid var(--InputGroup-border-color); -} - -.InputGroup--outlined .InputGroup-input:last-child, .InputGroup--outlined .InputGroup-addon:last-child { - border-right: 1px solid var(--InputGroup-border-color); -} - -.InputGroup--bordered.is-focused .InputGroup-input, .InputGroup--bordered.is-focused .InputGroup-addon, .InputGroup--outlined.is-focused .InputGroup-input, .InputGroup--outlined.is-focused .InputGroup-addon { - border-color: var(--InputGroup-border--focus-color); -} - -.InputGroup--rounded .InputGroup-input:first-child, .InputGroup--rounded .InputGroup-addon:first-child { - border-bottom-left-radius: calc(var(--InputGroup-rhythm) * 1); - border-top-left-radius: calc(var(--InputGroup-rhythm) * 1); - padding-left: calc(var(--InputGroup-rhythm) * .375); -} - -.InputGroup--rounded .InputGroup-input:last-child, .InputGroup--rounded .InputGroup-addon:last-child { - border-bottom-right-radius: calc(var(--InputGroup-rhythm) * 1); - border-top-right-radius: calc(var(--InputGroup-rhythm) * 1); - padding-right: calc(var(--InputGroup-rhythm) * .375); -} - .InputEditorSearch .panel.panel-default { z-index: 1000 !important; } diff --git a/server/zanata-frontend/src/frontend/app/editor/components/GlossarySearchInput/index.css b/server/zanata-frontend/src/frontend/app/editor/components/GlossarySearchInput/index.css deleted file mode 100644 index 1461f4d243a..00000000000 --- a/server/zanata-frontend/src/frontend/app/editor/components/GlossarySearchInput/index.css +++ /dev/null @@ -1,97 +0,0 @@ -/** @define InputGroup; use strict */ - -:root { - --InputGroup-rhythm: 1.5rem; - --InputGroup-input-color: #20718A; - --InputGroup-addon-color: color(#20718A tint(30%)); - --InputGroup-border-color: color(#20718A tint(60%)); - --InputGroup-border--focus-color: color(#20718A tint(30%)); - --InputGroup-transition: 0.2s cubic-bezier(.26, .47, .36, .94); -} - -.InputGroup { - position: relative; - display: table; - border-collapse: separate; -} - -.InputGroup-input, -.InputGroup-addon, -.InputGroup-button { - display: table-cell; - transition: var(--InputGroup-transition); -} - -.InputGroup-input, -.InputGroup-addon { - background-color: transparent; - padding: 0 calc(var(--InputGroup-rhythm) * .25); -} - -.InputGroup-input { - border: none; - width: 100%; - color: var(--InputGroup-input-color); - max-height: 1.875em; -} - -.InputGroup-addon { - color: var(--InputGroup-addon-color); - text-align: center; - width: 1%; - white-space: nowrap; - vertical-align: middle; -} - -.InputGroup-addon:before { - content: ' '; -} - -.InputGroup.is-focused .InputGroup-input, -.InputGroup.is-focused .InputGroup-addon { - background-color: #fff; -} - -.InputGroup--bordered .InputGroup-input, -.InputGroup--bordered .InputGroup-addon, -.InputGroup--outlined .InputGroup-input, -.InputGroup--outlined .InputGroup-addon { - border-top: 1px solid var(--InputGroup-border-color); - border-bottom: 1px solid var(--InputGroup-border-color); -} - -.InputGroup--bordered .InputGroup-input { - border-left: 1px solid var(--InputGroup-border-color); - border-right: 1px solid var(--InputGroup-border-color); -} - -.InputGroup--outlined .InputGroup-input:first-child, -.InputGroup--outlined .InputGroup-addon:first-child { - border-left: 1px solid var(--InputGroup-border-color); -} - -.InputGroup--outlined .InputGroup-input:last-child, -.InputGroup--outlined .InputGroup-addon:last-child { - border-right: 1px solid var(--InputGroup-border-color); -} - -.InputGroup--bordered.is-focused .InputGroup-input, -.InputGroup--bordered.is-focused .InputGroup-addon, -.InputGroup--outlined.is-focused .InputGroup-input, -.InputGroup--outlined.is-focused .InputGroup-addon { - border-color: var(--InputGroup-border--focus-color); -} - -.InputGroup--rounded .InputGroup-input:first-child, -.InputGroup--rounded .InputGroup-addon:first-child { - border-bottom-left-radius: calc(var(--InputGroup-rhythm) * 1); - border-top-left-radius: calc(var(--InputGroup-rhythm) * 1); - padding-left: calc(var(--InputGroup-rhythm) * .375); -} - -.InputGroup--rounded .InputGroup-input:last-child, -.InputGroup--rounded .InputGroup-addon:last-child { - border-bottom-right-radius: calc(var(--InputGroup-rhythm) * 1); - border-top-right-radius: calc(var(--InputGroup-rhythm) * 1); - padding-right: calc(var(--InputGroup-rhythm) * .375); -} diff --git a/server/zanata-frontend/src/frontend/app/editor/components/SuggestionSearchInput/index.css b/server/zanata-frontend/src/frontend/app/editor/components/SuggestionSearchInput/index.css deleted file mode 100644 index ed79dd5cc46..00000000000 --- a/server/zanata-frontend/src/frontend/app/editor/components/SuggestionSearchInput/index.css +++ /dev/null @@ -1,96 +0,0 @@ -/** @define InputGroup; use strict */ - -:root { - --InputGroup-rhythm: 1.5rem; - --InputGroup-input-color: #20718A; - --InputGroup-addon-color: color(#20718A tint(30%)); - --InputGroup-border-color: color(#20718A tint(60%)); - --InputGroup-border--focus-color: color(#20718A tint(30%)); - --InputGroup-transition: 0.2s cubic-bezier(.26, .47, .36, .94); -} - -.InputGroup { - position: relative; - display: table; - border-collapse: separate; -} - -.InputGroup-input, -.InputGroup-addon, -.InputGroup-button { - display: table-cell; - transition: var(--InputGroup-transition); -} - -.InputGroup-input, -.InputGroup-addon { - background-color: transparent; - padding: 0 calc(var(--InputGroup-rhythm) * .25); -} - -.InputGroup-input { - border: none; - width: 100%; - color: var(--InputGroup-input-color); -} - -.InputGroup-addon { - color: var(--InputGroup-addon-color); - text-align: center; - width: 1%; - white-space: nowrap; - vertical-align: middle; -} - -.InputGroup-addon:before { - content: ' '; -} - -.InputGroup.is-focused .InputGroup-input, -.InputGroup.is-focused .InputGroup-addon { - background-color: #fff; -} - -.InputGroup--bordered .InputGroup-input, -.InputGroup--bordered .InputGroup-addon, -.InputGroup--outlined .InputGroup-input, -.InputGroup--outlined .InputGroup-addon { - border-top: 1px solid var(--InputGroup-border-color); - border-bottom: 1px solid var(--InputGroup-border-color); -} - -.InputGroup--bordered .InputGroup-input { - border-left: 1px solid var(--InputGroup-border-color); - border-right: 1px solid var(--InputGroup-border-color); -} - -.InputGroup--outlined .InputGroup-input:first-child, -.InputGroup--outlined .InputGroup-addon:first-child { - border-left: 1px solid var(--InputGroup-border-color); -} - -.InputGroup--outlined .InputGroup-input:last-child, -.InputGroup--outlined .InputGroup-addon:last-child { - border-right: 1px solid var(--InputGroup-border-color); -} - -.InputGroup--bordered.is-focused .InputGroup-input, -.InputGroup--bordered.is-focused .InputGroup-addon, -.InputGroup--outlined.is-focused .InputGroup-input, -.InputGroup--outlined.is-focused .InputGroup-addon { - border-color: var(--InputGroup-border--focus-color); -} - -.InputGroup--rounded .InputGroup-input:first-child, -.InputGroup--rounded .InputGroup-addon:first-child { - border-bottom-left-radius: calc(var(--InputGroup-rhythm) * 1); - border-top-left-radius: calc(var(--InputGroup-rhythm) * 1); - padding-left: calc(var(--InputGroup-rhythm) * .375); -} - -.InputGroup--rounded .InputGroup-input:last-child, -.InputGroup--rounded .InputGroup-addon:last-child { - border-bottom-right-radius: calc(var(--InputGroup-rhythm) * 1); - border-top-right-radius: calc(var(--InputGroup-rhythm) * 1); - padding-right: calc(var(--InputGroup-rhythm) * .375); -} From 1b1c135d318e95123bc8ceee315da12ca2769862 Mon Sep 17 00:00:00 2001 From: kgough Date: Fri, 25 Aug 2017 15:57:49 +1000 Subject: [PATCH 4/8] feat(ZNTA-2186) remove redundant css from editor search input components --- .../src/frontend/app/editor/app.css | 2 - .../app/editor/containers/Root/index.css | 169 ++++++++++++++---- 2 files changed, 130 insertions(+), 41 deletions(-) diff --git a/server/zanata-frontend/src/frontend/app/editor/app.css b/server/zanata-frontend/src/frontend/app/editor/app.css index c3c767ae6f9..31e1f15b57d 100644 --- a/server/zanata-frontend/src/frontend/app/editor/app.css +++ b/server/zanata-frontend/src/frontend/app/editor/app.css @@ -22,8 +22,6 @@ @import './components/SplitDropdown/index.css'; @import './components/Button/index.css'; @import './components/GlossaryTermModal/index.css'; -@import './components/GlossarySearchInput/index.css'; -@import './components/SuggestionSearchInput/index.css'; @import './components/Dropdown/index.css'; @import './containers/EditorHeader/index.css'; @import './components/EditorSearchInput/index.css'; diff --git a/server/zanata-frontend/src/frontend/app/editor/containers/Root/index.css b/server/zanata-frontend/src/frontend/app/editor/containers/Root/index.css index 3e38d1e72d9..db83dc0c548 100644 --- a/server/zanata-frontend/src/frontend/app/editor/containers/Root/index.css +++ b/server/zanata-frontend/src/frontend/app/editor/containers/Root/index.css @@ -1,18 +1,111 @@ /** @define Editor; use strict */ :root { - --Editor-rhythm : 1.5rem; - --Editor-transition-ease : cubic-bezier(.175, .885, .320, 1.275); - --Editor-color-status-bg : color(#416988 tint(82%)); - --Editor-color-translation-bg : #ECEFF0; - --Editor-loader-z-index : 900; - --Editor-panel-z-index : 200; - --Editor-suggestions-header-z-index : 300; - --Editor-suggestionsSearch-z-index : 300; + --Editor-rhythm: 1.5rem; + --Editor-transition-ease: cubic-bezier(.175, .885, .320, 1.275); + --Editor-color-status-bg: color(#416988 tint(82%)); + --Editor-color-translation-bg: #ECEFF0; + --Editor-loader-z-index: 900; + --Editor-panel-z-index: 200; + --Editor-suggestions-header-z-index: 300; + --Editor-suggestionsSearch-z-index: 300; --LogoLoader-transition-ease: cubic-bezier(.175, .885, .320, 1.275); - --Editor-color-light : #90b8c5; - --Editor-color-dark : #20718a; - --Editor-color-bright : #1ba7d9; + --Editor-color-light: #90b8c5; + --Editor-color-dark: #20718a; + --Editor-color-bright: #1ba7d9; + --InputGroup-rhythm: 1.5rem; + --InputGroup-input-color: #20718A; + --InputGroup-addon-color: color(#20718A tint(30%)); + --InputGroup-border-color: color(#20718A tint(60%)); + --InputGroup-border--focus-color: color(#20718A tint(30%)); + --InputGroup-transition: 0.2s cubic-bezier(.26, .47, .36, .94); +} + +.InputGroup { + position: relative; + display: table; + border-collapse: separate; +} + +.InputGroup-input, +.InputGroup-addon, +.InputGroup-button { + display: table-cell; + transition: var(--InputGroup-transition); +} + +.InputGroup-input, +.InputGroup-addon { + background-color: transparent; + padding: 0 calc(var(--InputGroup-rhythm) * .25); +} + +.InputGroup-input { + border: none; + width: 100%; + color: var(--InputGroup-input-color); + max-height: 1.875em; +} + +.InputGroup-addon { + color: var(--InputGroup-addon-color); + text-align: center; + width: 1%; + white-space: nowrap; + vertical-align: middle; +} + +.InputGroup-addon:before { + content: ' '; +} + +.InputGroup.is-focused .InputGroup-input, +.InputGroup.is-focused .InputGroup-addon { + background-color: #fff; +} + +.InputGroup--bordered .InputGroup-input, +.InputGroup--bordered .InputGroup-addon, +.InputGroup--outlined .InputGroup-input, +.InputGroup--outlined .InputGroup-addon { + border-top: 1px solid var(--InputGroup-border-color); + border-bottom: 1px solid var(--InputGroup-border-color); +} + +.InputGroup--bordered .InputGroup-input { + border-left: 1px solid var(--InputGroup-border-color); + border-right: 1px solid var(--InputGroup-border-color); +} + +.InputGroup--outlined .InputGroup-input:first-child, +.InputGroup--outlined .InputGroup-addon:first-child { + border-left: 1px solid var(--InputGroup-border-color); +} + +.InputGroup--outlined .InputGroup-input:last-child, +.InputGroup--outlined .InputGroup-addon:last-child { + border-right: 1px solid var(--InputGroup-border-color); +} + +.InputGroup--bordered.is-focused .InputGroup-input, +.InputGroup--bordered.is-focused .InputGroup-addon, +.InputGroup--outlined.is-focused .InputGroup-input, +.InputGroup--outlined.is-focused .InputGroup-addon { + border-color: var(--InputGroup-border--focus-color); +} + +.InputGroup--rounded .InputGroup-input:first-child, +.InputGroup--rounded .InputGroup-addon:first-child { + border-bottom-left-radius: calc(var(--InputGroup-rhythm) * 1); + border-top-left-radius: calc(var(--InputGroup-rhythm) * 1); + padding-left: calc(var(--InputGroup-rhythm) * .375); +} + +.InputGroup--rounded .InputGroup-input:last-child, +.InputGroup--rounded .InputGroup-addon:last-child { + border-bottom-right-radius: calc(var(--InputGroup-rhythm) * 1); + border-top-right-radius: calc(var(--InputGroup-rhythm) * 1); + padding-right: calc(var(--InputGroup-rhythm) * .375); } .stretched-box { @@ -260,7 +353,7 @@ li.docName span.ellipsis { bottom: 0; left: 0; overflow: hidden; - box-shadow: 0 -calc(var(--Editor-rhythm) * .125) var(--Header-rhythm) rgba(0,0,0,.1); + box-shadow: 0 -calc(var(--Editor-rhythm) *.125) var(--Header-rhythm) rgba(0, 0, 0, .1); /*transform: translateY(100%);*/ } @@ -269,7 +362,7 @@ li.docName span.ellipsis { top: 0; left: 0; right: 0; - box-shadow: 0 1px 1px rgba(0,0,0,0.1); + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); z-index: var(--Editor-suggestions-header-z-index); user-select: none; } @@ -309,7 +402,7 @@ li.docName span.ellipsis { } .modal-title { - font-weight:300; + font-weight: 300; } h4.modal-title { @@ -340,11 +433,11 @@ h4.modal-title { color: #333; } -.row span.s1, .row span.s0, .row span.n1 { +.row span.s1, .row span.s0, .row span.n1 { vertical-align: sub; } -.btn-group-xs>.btn, .btn-xs { +.btn-group-xs > .btn, .btn-xs { padding: 1px 5px; font-size: 12px; line-height: 1.5; @@ -517,9 +610,8 @@ ul.source-infolist { } ul.u-listInline li .u-textSuccess, ul.u-listInline li .u-textSecondary, -ul.u-listInline li .u-textHighlight -{ - width:120%; +ul.u-listInline li .u-textHighlight { + width: 120%; } /* bootstrap override */ @@ -609,12 +701,13 @@ button.close:focus, button.close:hover, button.close:active:focus { * FIXME use a utility class for this adjustment instead. Probably * .u-vAlignSuper, which could go next to .u-vAlignMiddle in utils-display */ button.Link--neutral .row span.u-ltemd-hidden { - vertical-align:super; + vertical-align: super; } label span.n1 { vertical-align: middle !important; } + /** * Media Queries */ @@ -627,49 +720,46 @@ label span.n1 { @media (--gtemd-viewport) { .Editor-translations { - background: - linear-gradient(to right, var(--Editor-color-status-bg), var(--Editor-color-status-bg)), - linear-gradient(to right, var(--Editor-color-translation-bg), var(--Editor-color-translation-bg)); - background-position: - center, - right; - background-size: - var(--rhythm) 100%, - 50% 100%; - background-repeat: - no-repeat; + background: linear-gradient(to right, var(--Editor-color-status-bg), var(--Editor-color-status-bg)), + linear-gradient(to right, var(--Editor-color-translation-bg), var(--Editor-color-translation-bg)); + background-position: center, + right; + background-size: var(--rhythm) 100%, + 50% 100%; + background-repeat: no-repeat; } } -@media (max-width:740px) { +@media (max-width: 740px) { .TransUnit-heading { padding-left: 1.5em; } + td.long-string { display: table-row !important; padding-bottom: 0 !important; max-width: 10em !important; } + .long-string span { max-width: 9.5em !important; } } -@media (min-width:741px) { +@media (min-width: 741px) { .TransUnit-heading { padding-left: 0 !important; } } - -@media (max-width:909px) { +@media (max-width: 909px) { .info-icon { text-align: left; } .hide-small { - display:none; + display: none; visibility: hidden; } @@ -710,7 +800,7 @@ label span.n1 { } -@media (min-width:910px) { +@media (min-width: 910px) { .hide-mdplus { display: none; visibility: hidden; @@ -743,10 +833,11 @@ label span.n1 { } } -@media (min-width:1100px) { - td.long-string { +@media (min-width: 1100px) { + td.long-string { max-width: 10em; } + .long-string span { max-width: 9.5em; } From 8d645868aa2b921a508b0ad2cde67e6ba44ae384 Mon Sep 17 00:00:00 2001 From: kgough Date: Mon, 28 Aug 2017 11:15:33 +1000 Subject: [PATCH 5/8] fix(ZNTA-2186) css fixes for RejectTranslationModal --- .../app/editor/components/RejectTranslationModal/index.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/server/zanata-frontend/src/frontend/app/editor/components/RejectTranslationModal/index.css b/server/zanata-frontend/src/frontend/app/editor/components/RejectTranslationModal/index.css index 0973d2a3bb8..b87e363f61b 100644 --- a/server/zanata-frontend/src/frontend/app/editor/components/RejectTranslationModal/index.css +++ b/server/zanata-frontend/src/frontend/app/editor/components/RejectTranslationModal/index.css @@ -18,7 +18,7 @@ margin-right: var(--TM-default-margin); } -.modal-body { +#rejection-modal .modal-body { color: var(--TM-text-color); } From 32d150a5d6dec5f3584eff9e47d4e8441033b4fa Mon Sep 17 00:00:00 2001 From: kgough Date: Mon, 28 Aug 2017 11:51:50 +1000 Subject: [PATCH 6/8] fix(ZNTA-2186) refactoring and other changes for PR --- .../src/frontend/app/editor/app.css | 1 + .../components/GlossaryTermModal/component.js | 2 +- .../editor/components/InputGroup/index.css | 95 ++++++++++++++++++ .../RejectTranslationModal/index.css | 28 +++--- .../RejectTranslationModal/index.js | 2 +- .../app/editor/containers/Root/index.css | 96 +------------------ .../SuggestionDetailsModal/index.js | 2 +- 7 files changed, 114 insertions(+), 112 deletions(-) create mode 100644 server/zanata-frontend/src/frontend/app/editor/components/InputGroup/index.css diff --git a/server/zanata-frontend/src/frontend/app/editor/app.css b/server/zanata-frontend/src/frontend/app/editor/app.css index 31e1f15b57d..2f95acad09d 100644 --- a/server/zanata-frontend/src/frontend/app/editor/app.css +++ b/server/zanata-frontend/src/frontend/app/editor/app.css @@ -34,6 +34,7 @@ @import './components/ToggleSwitch/index.css'; @import './components/TransUnit/index.css'; @import './components/RejectTranslationModal/index.css'; +@import './components/InputGroup/index.css'; /** * Views diff --git a/server/zanata-frontend/src/frontend/app/editor/components/GlossaryTermModal/component.js b/server/zanata-frontend/src/frontend/app/editor/components/GlossaryTermModal/component.js index 00025bf0c9d..4d9dfec3b29 100644 --- a/server/zanata-frontend/src/frontend/app/editor/components/GlossaryTermModal/component.js +++ b/server/zanata-frontend/src/frontend/app/editor/components/GlossaryTermModal/component.js @@ -72,7 +72,7 @@ class GlossaryTermModal extends React.Component { + id="GlossaryTermModal"> Glossary details diff --git a/server/zanata-frontend/src/frontend/app/editor/components/InputGroup/index.css b/server/zanata-frontend/src/frontend/app/editor/components/InputGroup/index.css new file mode 100644 index 00000000000..384e2ad5c7f --- /dev/null +++ b/server/zanata-frontend/src/frontend/app/editor/components/InputGroup/index.css @@ -0,0 +1,95 @@ +:root { +--InputGroup-rhythm: 1.5rem; +--InputGroup-input-color: #20718A; +--InputGroup-addon-color: color(#20718A tint(30%)); +--InputGroup-border-color: color(#20718A tint(60%)); +--InputGroup-border--focus-color: color(#20718A tint(30%)); +--InputGroup-transition: 0.2s cubic-bezier(.26, .47, .36, .94); +} + +.InputGroup { + position: relative; + display: table; + border-collapse: separate; +} + +.InputGroup-input, +.InputGroup-addon, +.InputGroup-button { + display: table-cell; + transition: var(--InputGroup-transition); +} + +.InputGroup-input, +.InputGroup-addon { + background-color: transparent; + padding: 0 calc(var(--InputGroup-rhythm) * .25); +} + +.InputGroup-input { + border: none; + width: 100%; + color: var(--InputGroup-input-color); + max-height: 1.875em; +} + +.InputGroup-addon { + color: var(--InputGroup-addon-color); + text-align: center; + width: 1%; + white-space: nowrap; + vertical-align: middle; +} + +.InputGroup-addon:before { + content: ' '; +} + +.InputGroup.is-focused .InputGroup-input, +.InputGroup.is-focused .InputGroup-addon { + background-color: #fff; +} + +.InputGroup--bordered .InputGroup-input, +.InputGroup--bordered .InputGroup-addon, +.InputGroup--outlined .InputGroup-input, +.InputGroup--outlined .InputGroup-addon { + border-top: 1px solid var(--InputGroup-border-color); + border-bottom: 1px solid var(--InputGroup-border-color); +} + +.InputGroup--bordered .InputGroup-input { + border-left: 1px solid var(--InputGroup-border-color); + border-right: 1px solid var(--InputGroup-border-color); +} + +.InputGroup--outlined .InputGroup-input:first-child, +.InputGroup--outlined .InputGroup-addon:first-child { + border-left: 1px solid var(--InputGroup-border-color); +} + +.InputGroup--outlined .InputGroup-input:last-child, +.InputGroup--outlined .InputGroup-addon:last-child { + border-right: 1px solid var(--InputGroup-border-color); +} + +.InputGroup--bordered.is-focused .InputGroup-input, +.InputGroup--bordered.is-focused .InputGroup-addon, +.InputGroup--outlined.is-focused .InputGroup-input, +.InputGroup--outlined.is-focused .InputGroup-addon { + border-color: var(--InputGroup-border--focus-color); +} + +.InputGroup--rounded .InputGroup-input:first-child, +.InputGroup--rounded .InputGroup-addon:first-child { + border-bottom-left-radius: calc(var(--InputGroup-rhythm) * 1); + border-top-left-radius: calc(var(--InputGroup-rhythm) * 1); + padding-left: calc(var(--InputGroup-rhythm) * .375); +} + +.InputGroup--rounded .InputGroup-input:last-child, +.InputGroup--rounded .InputGroup-addon:last-child { + border-bottom-right-radius: calc(var(--InputGroup-rhythm) * 1); + border-top-right-radius: calc(var(--InputGroup-rhythm) * 1); + padding-right: calc(var(--InputGroup-rhythm) * .375); +} diff --git a/server/zanata-frontend/src/frontend/app/editor/components/RejectTranslationModal/index.css b/server/zanata-frontend/src/frontend/app/editor/components/RejectTranslationModal/index.css index b87e363f61b..d8517c84706 100644 --- a/server/zanata-frontend/src/frontend/app/editor/components/RejectTranslationModal/index.css +++ b/server/zanata-frontend/src/frontend/app/editor/components/RejectTranslationModal/index.css @@ -9,7 +9,7 @@ --TM-dropdown-text-color: #03a6d7; } -.flex { +#RejectTranslationModal .flex { flex-direction: row; align-items: center; } @@ -18,33 +18,33 @@ margin-right: var(--TM-default-margin); } -#rejection-modal .modal-body { +#RejectTranslationModal .modal-body { color: var(--TM-text-color); } -.priority-dd { +#RejectTranslationModal .priority-dd { margin-left: 1.5rem; } -.modal-body .InputGroup--outlined { +#RejectTranslationModal .modal-body .InputGroup--outlined { border: var(--TM-input-border) !important; } -.modal-body .Dropdown { +#RejectTranslationModal .modal-body .Dropdown { border-radius: var(--TM-input-border-radius); border: var(--TM-input-border) !important; } -.criteria { +#RejectTranslationModal .criteria { flex-grow: 2; } -a.Dropdown-item span.s0 { +#RejectTranslationModal a.Dropdown-item span.s0 { vertical-align: var(--TM-icon-vert-alignment); margin-left: var(--TM-small-margin); } -.InputGroup--outlined.commenting { +#RejectTranslationModal .InputGroup--outlined.commenting { margin-top: 2rem; max-width: 100%; min-width: 100%; @@ -54,7 +54,7 @@ a.Dropdown-item span.s0 { min-height: var(--TM-large-spacing); } -.modal-footer .Button--primary { +#RejectTranslationModal .modal-footer .Button--primary { margin-left: var(--TM-default-margin); } @@ -62,25 +62,25 @@ a.Dropdown-item span.s0 { vertical-align: sub; } -.Dropdown-item { +#RejectTranslationModal .Dropdown-item { color: var(--TM-dropdown-text-color); } -.Dropdown-item:hover { +#RejectTranslationModal .Dropdown-item:hover { background-color: #fcfcfc; color: var(--TM-dropdown-text-color); } -.Dropdown-toggle .Dropdown-item:hover { +#RejectTranslationModal .Dropdown-toggle .Dropdown-item:hover { border-radius: 0.4rem; } -.Dropdown-item span.n1 { +#RejectTranslationModal .Dropdown-item span.n1 { margin-left: var(--TM-small-margin); vertical-align: var(--TM-icon-vert-alignment); } -#rejection-modal button.close { +#RejectTranslationModal button.close { display: none; visibility: hidden; } diff --git a/server/zanata-frontend/src/frontend/app/editor/components/RejectTranslationModal/index.js b/server/zanata-frontend/src/frontend/app/editor/components/RejectTranslationModal/index.js index ecb4a321066..beeb1d7e4c1 100644 --- a/server/zanata-frontend/src/frontend/app/editor/components/RejectTranslationModal/index.js +++ b/server/zanata-frontend/src/frontend/app/editor/components/RejectTranslationModal/index.js @@ -74,7 +74,7 @@ export class RejectTranslationModal extends Component { + id="RejectTranslationModal"> Reject translation diff --git a/server/zanata-frontend/src/frontend/app/editor/containers/Root/index.css b/server/zanata-frontend/src/frontend/app/editor/containers/Root/index.css index db83dc0c548..76901ddb1f2 100644 --- a/server/zanata-frontend/src/frontend/app/editor/containers/Root/index.css +++ b/server/zanata-frontend/src/frontend/app/editor/containers/Root/index.css @@ -13,99 +13,6 @@ --Editor-color-light: #90b8c5; --Editor-color-dark: #20718a; --Editor-color-bright: #1ba7d9; - --InputGroup-rhythm: 1.5rem; - --InputGroup-input-color: #20718A; - --InputGroup-addon-color: color(#20718A tint(30%)); - --InputGroup-border-color: color(#20718A tint(60%)); - --InputGroup-border--focus-color: color(#20718A tint(30%)); - --InputGroup-transition: 0.2s cubic-bezier(.26, .47, .36, .94); -} - -.InputGroup { - position: relative; - display: table; - border-collapse: separate; -} - -.InputGroup-input, -.InputGroup-addon, -.InputGroup-button { - display: table-cell; - transition: var(--InputGroup-transition); -} - -.InputGroup-input, -.InputGroup-addon { - background-color: transparent; - padding: 0 calc(var(--InputGroup-rhythm) * .25); -} - -.InputGroup-input { - border: none; - width: 100%; - color: var(--InputGroup-input-color); - max-height: 1.875em; -} - -.InputGroup-addon { - color: var(--InputGroup-addon-color); - text-align: center; - width: 1%; - white-space: nowrap; - vertical-align: middle; -} - -.InputGroup-addon:before { - content: ' '; -} - -.InputGroup.is-focused .InputGroup-input, -.InputGroup.is-focused .InputGroup-addon { - background-color: #fff; -} - -.InputGroup--bordered .InputGroup-input, -.InputGroup--bordered .InputGroup-addon, -.InputGroup--outlined .InputGroup-input, -.InputGroup--outlined .InputGroup-addon { - border-top: 1px solid var(--InputGroup-border-color); - border-bottom: 1px solid var(--InputGroup-border-color); -} - -.InputGroup--bordered .InputGroup-input { - border-left: 1px solid var(--InputGroup-border-color); - border-right: 1px solid var(--InputGroup-border-color); -} - -.InputGroup--outlined .InputGroup-input:first-child, -.InputGroup--outlined .InputGroup-addon:first-child { - border-left: 1px solid var(--InputGroup-border-color); -} - -.InputGroup--outlined .InputGroup-input:last-child, -.InputGroup--outlined .InputGroup-addon:last-child { - border-right: 1px solid var(--InputGroup-border-color); -} - -.InputGroup--bordered.is-focused .InputGroup-input, -.InputGroup--bordered.is-focused .InputGroup-addon, -.InputGroup--outlined.is-focused .InputGroup-input, -.InputGroup--outlined.is-focused .InputGroup-addon { - border-color: var(--InputGroup-border--focus-color); -} - -.InputGroup--rounded .InputGroup-input:first-child, -.InputGroup--rounded .InputGroup-addon:first-child { - border-bottom-left-radius: calc(var(--InputGroup-rhythm) * 1); - border-top-left-radius: calc(var(--InputGroup-rhythm) * 1); - padding-left: calc(var(--InputGroup-rhythm) * .375); -} - -.InputGroup--rounded .InputGroup-input:last-child, -.InputGroup--rounded .InputGroup-addon:last-child { - border-bottom-right-radius: calc(var(--InputGroup-rhythm) * 1); - border-top-right-radius: calc(var(--InputGroup-rhythm) * 1); - padding-right: calc(var(--InputGroup-rhythm) * .375); } .stretched-box { @@ -724,8 +631,7 @@ label span.n1 { linear-gradient(to right, var(--Editor-color-translation-bg), var(--Editor-color-translation-bg)); background-position: center, right; - background-size: var(--rhythm) 100%, - 50% 100%; + background-size: var(--rhythm) 100%, 50% 100%; background-repeat: no-repeat; } } diff --git a/server/zanata-frontend/src/frontend/app/editor/containers/SuggestionDetailsModal/index.js b/server/zanata-frontend/src/frontend/app/editor/containers/SuggestionDetailsModal/index.js index 7ebf5386143..e86a5373a4b 100644 --- a/server/zanata-frontend/src/frontend/app/editor/containers/SuggestionDetailsModal/index.js +++ b/server/zanata-frontend/src/frontend/app/editor/containers/SuggestionDetailsModal/index.js @@ -49,7 +49,7 @@ class SuggestionDetailsModal extends Component { + id="SuggestionDetailsModal"> Suggestion Details From 18ceba8633f984eaa6ce4018c6d6b83e4c95a2a3 Mon Sep 17 00:00:00 2001 From: kgough Date: Mon, 28 Aug 2017 12:02:52 +1000 Subject: [PATCH 7/8] fix(ZNTA-2186) fixed indentation in css --- .../src/frontend/app/editor/containers/Root/index.css | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/server/zanata-frontend/src/frontend/app/editor/containers/Root/index.css b/server/zanata-frontend/src/frontend/app/editor/containers/Root/index.css index 76901ddb1f2..d016868f5b3 100644 --- a/server/zanata-frontend/src/frontend/app/editor/containers/Root/index.css +++ b/server/zanata-frontend/src/frontend/app/editor/containers/Root/index.css @@ -628,9 +628,8 @@ label span.n1 { @media (--gtemd-viewport) { .Editor-translations { background: linear-gradient(to right, var(--Editor-color-status-bg), var(--Editor-color-status-bg)), - linear-gradient(to right, var(--Editor-color-translation-bg), var(--Editor-color-translation-bg)); - background-position: center, - right; + linear-gradient(to right, var(--Editor-color-translation-bg), var(--Editor-color-translation-bg)); + background-position: center, right; background-size: var(--rhythm) 100%, 50% 100%; background-repeat: no-repeat; } From 115adb6a45c459f66f4e4e514cf0b5f7003f93d6 Mon Sep 17 00:00:00 2001 From: Sean Flanigan Date: Mon, 28 Aug 2017 12:43:27 +1000 Subject: [PATCH 8/8] Add wildcard suites for IDEs (#497) --- server/pom.xml | 6 ++++++ server/services/pom.xml | 6 ++++++ server/services/src/test/java/ServicesITCases.kt | 14 ++++++++++++++ server/services/src/test/java/ServicesUTCases.kt | 12 ++++++++++++ server/zanata-war/pom.xml | 6 ++++++ .../zanata-war/src/test/java/ZanataWarITCases.kt | 14 ++++++++++++++ .../zanata-war/src/test/java/ZanataWarUTCases.kt | 12 ++++++++++++ 7 files changed, 70 insertions(+) create mode 100644 server/services/src/test/java/ServicesITCases.kt create mode 100644 server/services/src/test/java/ServicesUTCases.kt create mode 100644 server/zanata-war/src/test/java/ZanataWarITCases.kt create mode 100644 server/zanata-war/src/test/java/ZanataWarUTCases.kt diff --git a/server/pom.xml b/server/pom.xml index 3b1a81bb841..8dd0e2e95c4 100644 --- a/server/pom.xml +++ b/server/pom.xml @@ -218,6 +218,12 @@ test + + com.googlecode.junit-toolbox + junit-toolbox + 2.3 + test + org.jboss.resteasy resteasy-jaxrs diff --git a/server/services/pom.xml b/server/services/pom.xml index 2bc10d9c445..c7cee0f1f61 100644 --- a/server/services/pom.xml +++ b/server/services/pom.xml @@ -1144,6 +1144,12 @@ test + + com.googlecode.junit-toolbox + junit-toolbox + test + + org.concordion concordion diff --git a/server/services/src/test/java/ServicesITCases.kt b/server/services/src/test/java/ServicesITCases.kt new file mode 100644 index 00000000000..2fa2db2251a --- /dev/null +++ b/server/services/src/test/java/ServicesITCases.kt @@ -0,0 +1,14 @@ +import com.googlecode.junittoolbox.SuiteClasses +import com.googlecode.junittoolbox.WildcardPatternSuite +import org.junit.runner.RunWith + +/** + * This JUnit Suite class provides a way of running all the Arquillian tests + * in 'services' from IntelliJ. To use it, just create an Arquillian Run + * Configuration and choose this class in the Configuration tab + * instead of an individual test. + * @author Sean Flanigan sflaniga@redhat.com + */ +@RunWith(WildcardPatternSuite::class) +@SuiteClasses("**/*ITCase.class") +class ServicesITCases diff --git a/server/services/src/test/java/ServicesUTCases.kt b/server/services/src/test/java/ServicesUTCases.kt new file mode 100644 index 00000000000..9f8328bca12 --- /dev/null +++ b/server/services/src/test/java/ServicesUTCases.kt @@ -0,0 +1,12 @@ +import com.googlecode.junittoolbox.SuiteClasses +import com.googlecode.junittoolbox.WildcardPatternSuite +import org.junit.runner.RunWith + +/** + * This JUnit Suite class provides a way of running all the unit tests + * in 'services' from IntelliJ (without picking up integration tests). + * @author Sean Flanigan sflaniga@redhat.com + */ +@RunWith(WildcardPatternSuite::class) +@SuiteClasses("**/*Test.class", "**/*Tests.class") +class ServicesUTCases diff --git a/server/zanata-war/pom.xml b/server/zanata-war/pom.xml index cb526621fba..8ff827a9891 100644 --- a/server/zanata-war/pom.xml +++ b/server/zanata-war/pom.xml @@ -1544,6 +1544,12 @@ test + + com.googlecode.junit-toolbox + junit-toolbox + test + + org.concordion concordion diff --git a/server/zanata-war/src/test/java/ZanataWarITCases.kt b/server/zanata-war/src/test/java/ZanataWarITCases.kt new file mode 100644 index 00000000000..d6f79a6e181 --- /dev/null +++ b/server/zanata-war/src/test/java/ZanataWarITCases.kt @@ -0,0 +1,14 @@ +import com.googlecode.junittoolbox.SuiteClasses +import com.googlecode.junittoolbox.WildcardPatternSuite +import org.junit.runner.RunWith + +/** + * This JUnit Suite class provides a way of running all the Arquillian tests + * in 'zanata-war' from IntelliJ. To use it, just create an Arquillian Run + * Configuration and choose this class in the Configuration tab + * instead of an individual test. + * @author Sean Flanigan sflaniga@redhat.com + */ +@RunWith(WildcardPatternSuite::class) +@SuiteClasses("**/*ITCase.class") +class ZanataWarITCases diff --git a/server/zanata-war/src/test/java/ZanataWarUTCases.kt b/server/zanata-war/src/test/java/ZanataWarUTCases.kt new file mode 100644 index 00000000000..07c937337a6 --- /dev/null +++ b/server/zanata-war/src/test/java/ZanataWarUTCases.kt @@ -0,0 +1,12 @@ +import com.googlecode.junittoolbox.SuiteClasses +import com.googlecode.junittoolbox.WildcardPatternSuite +import org.junit.runner.RunWith + +/** + * This JUnit Suite class provides a way of running all the unit tests + * in 'zanata-war' from IntelliJ (without picking up integration tests). + * @author Sean Flanigan sflaniga@redhat.com + */ +@RunWith(WildcardPatternSuite::class) +@SuiteClasses("**/*Test.class", "**/*Tests.class") +class ZanataWarUTCases