From a58b9073d5994b45e441f0d4c1e1e12a99b8275f Mon Sep 17 00:00:00 2001 From: Anastasiia Moskvina Date: Wed, 2 Mar 2022 11:55:58 +0300 Subject: [PATCH 1/4] fix styles --- .../components/document/Save/Save.module.less | 180 +++++++++--------- packages/ketcher-react/src/style/mixins.less | 2 + .../ketcher-react/src/style/variables.less | 1 + 3 files changed, 93 insertions(+), 90 deletions(-) diff --git a/packages/ketcher-react/src/script/ui/views/modal/components/document/Save/Save.module.less b/packages/ketcher-react/src/script/ui/views/modal/components/document/Save/Save.module.less index d2919f5b6b..abd633ba05 100644 --- a/packages/ketcher-react/src/script/ui/views/modal/components/document/Save/Save.module.less +++ b/packages/ketcher-react/src/script/ui/views/modal/components/document/Save/Save.module.less @@ -14,10 +14,10 @@ * limitations under the License. ***************************************************************************/ -@import '../../../../../../../style/variables.less'; -@import '../../../../../../../style/mixins.less'; - -@save-container-width-large: 485px; + @import '../../../../../../../style/variables.less'; + @import '../../../../../../../style/mixins.less'; + +@save-container-width-large: 482px; @save-container-height-large: 315px; @save-container-width-small: 380px; @save-container-height-small: 325px; @@ -81,89 +81,89 @@ input { height: 25px !important; - width: 190px; - } - - > span { - margin-right: 8px; - } - - :global(.MuiOutlinedInput-root .MuiSelect-select) { - width: 145px; - } - } - } - - .previewArea { - display: block; - min-height: 225px; - min-width: 325px; - height: 100%; - overflow: auto; - white-space: pre; - cursor: text; - resize: none; - color: @color-text-primary; - font-size: 12px; - - .scrollbar_thin(); - } - - .saveImageContainer { - width: @save-container-width-large; - height: @save-container-height-large; - } - - footer { - display: flex; - flex-direction: row; - flex-wrap: nowrap; - justify-content: flex-end; - margin-bottom: 10px; - - .ok { - .button-main(); - - border: none; - margin-right: 2px; - margin-left: 10px; - float: right; - } - } - - .imageContainer { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - height: 100%; - - img { - background-color: @color-background-primary; - height: 220px; - width: 220px; - padding: 5px; - } - } - - .previewMessage { - text-align: center; - margin: auto; - } -} - -:global(.smallEditor) { - .formContainer { - width: @save-container-width-small; - height: @save-container-height-small; - } - - .warnings { - height: 50px; - } - - .saveImageContainer { - width: @save-container-width-small; - height: @save-container-height-small; - } -} + } + + > span { + margin-right: 8px; + } + + :global(.MuiOutlinedInput-root .MuiSelect-select) { + width: 145px; + } + } + } + + .previewArea { + font-family: @Consolas; // same font for all browsers + display: block; + min-height: 225px; + min-width: 325px; + overflow: auto; + white-space: pre; + cursor: text; + resize: none; + color: @color-text-primary; + font-size: 12px; + + .scrollbar_thin(); + } + + .saveImageContainer { + width: @save-container-width-large; + height: @save-container-height-large; + } + + footer { + display: flex; + flex-direction: row; + flex-wrap: nowrap; + justify-content: flex-end; + margin-bottom: 10px; + + .ok { + .button-main(); + + border: none; + margin-right: 2px; + margin-left: 10px; + float: right; + } + } + + .imageContainer { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + height: 100%; + + img { + background-color: @color-background-primary; + height: 220px; + width: 220px; + padding: 5px; + } + } + + .previewMessage { + text-align: center; + margin: auto; + } + } + + :global(.smallEditor) { + .formContainer { + width: @save-container-width-small; + height: @save-container-height-small; + } + + .warnings { + height: 50px; + } + + .saveImageContainer { + width: @save-container-width-small; + height: @save-container-height-small; + } + } + \ No newline at end of file diff --git a/packages/ketcher-react/src/style/mixins.less b/packages/ketcher-react/src/style/mixins.less index 851eb60914..8e1ef9e680 100644 --- a/packages/ketcher-react/src/style/mixins.less +++ b/packages/ketcher-react/src/style/mixins.less @@ -457,4 +457,6 @@ &::-webkit-scrollbar-thumb:active { background-color: @color-scroll; } + + scrollbar-width: thin; // mozilla } diff --git a/packages/ketcher-react/src/style/variables.less b/packages/ketcher-react/src/style/variables.less index e329870352..e7a171cf68 100644 --- a/packages/ketcher-react/src/style/variables.less +++ b/packages/ketcher-react/src/style/variables.less @@ -25,6 +25,7 @@ @Inter: Inter, FreeSans, Arimo, 'Droid Sans', Helvetica, 'Helvetica Neue', Arial, sans-serif; +@Consolas: Consolas; //Modal margin @margin-top-bottom: 10px; From 2ee69dc15c14cf60b4b567c793eaa707a1661acc Mon Sep 17 00:00:00 2001 From: Anastasiia Moskvina Date: Wed, 2 Mar 2022 12:07:41 +0300 Subject: [PATCH 2/4] apply formatting --- .../components/document/Save/Save.module.less | 177 +++++++++--------- 1 file changed, 88 insertions(+), 89 deletions(-) diff --git a/packages/ketcher-react/src/script/ui/views/modal/components/document/Save/Save.module.less b/packages/ketcher-react/src/script/ui/views/modal/components/document/Save/Save.module.less index abd633ba05..6429ad6f42 100644 --- a/packages/ketcher-react/src/script/ui/views/modal/components/document/Save/Save.module.less +++ b/packages/ketcher-react/src/script/ui/views/modal/components/document/Save/Save.module.less @@ -14,9 +14,9 @@ * limitations under the License. ***************************************************************************/ - @import '../../../../../../../style/variables.less'; - @import '../../../../../../../style/mixins.less'; - +@import '../../../../../../../style/variables.less'; +@import '../../../../../../../style/mixins.less'; + @save-container-width-large: 482px; @save-container-height-large: 315px; @save-container-width-small: 380px; @@ -81,89 +81,88 @@ input { height: 25px !important; - } - - > span { - margin-right: 8px; - } - - :global(.MuiOutlinedInput-root .MuiSelect-select) { - width: 145px; - } - } - } - - .previewArea { - font-family: @Consolas; // same font for all browsers - display: block; - min-height: 225px; - min-width: 325px; - overflow: auto; - white-space: pre; - cursor: text; - resize: none; - color: @color-text-primary; - font-size: 12px; - - .scrollbar_thin(); - } - - .saveImageContainer { - width: @save-container-width-large; - height: @save-container-height-large; - } - - footer { - display: flex; - flex-direction: row; - flex-wrap: nowrap; - justify-content: flex-end; - margin-bottom: 10px; - - .ok { - .button-main(); - - border: none; - margin-right: 2px; - margin-left: 10px; - float: right; - } - } - - .imageContainer { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - height: 100%; - - img { - background-color: @color-background-primary; - height: 220px; - width: 220px; - padding: 5px; - } - } - - .previewMessage { - text-align: center; - margin: auto; - } - } - - :global(.smallEditor) { - .formContainer { - width: @save-container-width-small; - height: @save-container-height-small; - } - - .warnings { - height: 50px; - } - - .saveImageContainer { - width: @save-container-width-small; - height: @save-container-height-small; - } - } - \ No newline at end of file + } + + > span { + margin-right: 8px; + } + + :global(.MuiOutlinedInput-root .MuiSelect-select) { + width: 145px; + } + } + } + + .previewArea { + font-family: @Consolas; // same font for all browsers + display: block; + min-height: 225px; + min-width: 325px; + overflow: auto; + white-space: pre; + cursor: text; + resize: none; + color: @color-text-primary; + font-size: 12px; + + .scrollbar_thin(); + } + + .saveImageContainer { + width: @save-container-width-large; + height: @save-container-height-large; + } + + footer { + display: flex; + flex-direction: row; + flex-wrap: nowrap; + justify-content: flex-end; + margin-bottom: 10px; + + .ok { + .button-main(); + + border: none; + margin-right: 2px; + margin-left: 10px; + float: right; + } + } + + .imageContainer { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + height: 100%; + + img { + background-color: @color-background-primary; + height: 220px; + width: 220px; + padding: 5px; + } + } + + .previewMessage { + text-align: center; + margin: auto; + } +} + +:global(.smallEditor) { + .formContainer { + width: @save-container-width-small; + height: @save-container-height-small; + } + + .warnings { + height: 50px; + } + + .saveImageContainer { + width: @save-container-width-small; + height: @save-container-height-small; + } +} From 8c8a6c5822b138d8def60e984663693f138e8043 Mon Sep 17 00:00:00 2001 From: Anastasiia Moskvina Date: Wed, 2 Mar 2022 18:10:50 +0300 Subject: [PATCH 3/4] add fallback font for mac os, add height for thin scrollbar --- .../ui/views/modal/components/document/Save/Save.module.less | 5 +++-- packages/ketcher-react/src/style/mixins.less | 1 + packages/ketcher-react/src/style/variables.less | 2 +- 3 files changed, 5 insertions(+), 3 deletions(-) diff --git a/packages/ketcher-react/src/script/ui/views/modal/components/document/Save/Save.module.less b/packages/ketcher-react/src/script/ui/views/modal/components/document/Save/Save.module.less index 6429ad6f42..0b004d884f 100644 --- a/packages/ketcher-react/src/script/ui/views/modal/components/document/Save/Save.module.less +++ b/packages/ketcher-react/src/script/ui/views/modal/components/document/Save/Save.module.less @@ -43,7 +43,7 @@ height: fit-content; border: none; border-radius: 4px; - margin: 2px; + margin: 2px 0; padding: 2px 5px; overflow: auto; @@ -94,10 +94,11 @@ } .previewArea { - font-family: @Consolas; // same font for all browsers + font-family: @Monospace; display: block; min-height: 225px; min-width: 325px; + height: 100%; overflow: auto; white-space: pre; cursor: text; diff --git a/packages/ketcher-react/src/style/mixins.less b/packages/ketcher-react/src/style/mixins.less index 8e1ef9e680..cb3f180b69 100644 --- a/packages/ketcher-react/src/style/mixins.less +++ b/packages/ketcher-react/src/style/mixins.less @@ -443,6 +443,7 @@ .scrollbar_thin { &::-webkit-scrollbar { width: 4px; + height: 4px; background-color: @color-scroll-inactive; border-radius: 2px; -webkit-border-radius: 2px; diff --git a/packages/ketcher-react/src/style/variables.less b/packages/ketcher-react/src/style/variables.less index e7a171cf68..fae1c635be 100644 --- a/packages/ketcher-react/src/style/variables.less +++ b/packages/ketcher-react/src/style/variables.less @@ -25,7 +25,7 @@ @Inter: Inter, FreeSans, Arimo, 'Droid Sans', Helvetica, 'Helvetica Neue', Arial, sans-serif; -@Consolas: Consolas; +@Monospace: Consolas, Menlo, monospace; //Modal margin @margin-top-bottom: 10px; From 7f410749978a275236d54f908d86dd31490957eb Mon Sep 17 00:00:00 2001 From: Anastasiia Moskvina Date: Thu, 3 Mar 2022 12:49:34 +0300 Subject: [PATCH 4/4] remove font settings for textarea --- .../ui/views/modal/components/document/Save/Save.module.less | 5 ++--- packages/ketcher-react/src/style/variables.less | 1 - 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/packages/ketcher-react/src/script/ui/views/modal/components/document/Save/Save.module.less b/packages/ketcher-react/src/script/ui/views/modal/components/document/Save/Save.module.less index 0b004d884f..22053b25e2 100644 --- a/packages/ketcher-react/src/script/ui/views/modal/components/document/Save/Save.module.less +++ b/packages/ketcher-react/src/script/ui/views/modal/components/document/Save/Save.module.less @@ -40,7 +40,7 @@ .warnings { max-height: 50px; - height: fit-content; + flex-shrink: 0; border: none; border-radius: 4px; margin: 2px 0; @@ -51,7 +51,7 @@ .warningsContainer { display: flex; - + .warningsArr { color: @error-color; margin: 2px; @@ -94,7 +94,6 @@ } .previewArea { - font-family: @Monospace; display: block; min-height: 225px; min-width: 325px; diff --git a/packages/ketcher-react/src/style/variables.less b/packages/ketcher-react/src/style/variables.less index fae1c635be..e329870352 100644 --- a/packages/ketcher-react/src/style/variables.less +++ b/packages/ketcher-react/src/style/variables.less @@ -25,7 +25,6 @@ @Inter: Inter, FreeSans, Arimo, 'Droid Sans', Helvetica, 'Helvetica Neue', Arial, sans-serif; -@Monospace: Consolas, Menlo, monospace; //Modal margin @margin-top-bottom: 10px;