Skip to content

Commit

Permalink
#5090 the favorites icon overlaps unsplit nucleotide names in the rna…
Browse files Browse the repository at this point in the history 
… and favorites tab (#5129)

* feat: add new styles for favorites monomer block

* update snapshots test

* update tests

* update tests
  • Loading branch information
@KristinaKasyanovskaya
KristinaKasyanovskaya authored Jul 23, 2024
1 parent e7c7320 commit 21691ea
Show file tree
Hide file tree
Showing 21 changed files with 33 additions and 30 deletions.
Binary file modified ...iases-wh-038c1-otides-monomer-2-Amino-dA-2-6-Diaminopurine-1-chromium-linux.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...iases-wh-330f7-eotides-monomer-AmMC6T-Amino-Modifier-C6-dT-1-chromium-linux.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...iases-wh-4ff59-des-monomer-5-Bromo-dU-5-Bromo-deoxyuridine-1-chromium-linux.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...iases-wh-76ddc-leotides-monomer-5HydMe-dC-Hydroxymethyl-dC-1-chromium-linux.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...iases-wh-b232c-mer-Super-T-5-hydroxybutynl-2’-deoxyuridine-1-chromium-linux.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...ction--a53db--and-CHEMs-then-switch-to-Micro-mode-and-back-1-chromium-linux.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...ction--afd6d-ide-Library-and-switch-to-Micro-mode-and-back-1-chromium-linux.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...nomers-c3a4f-moved-from-favourites-when-clicking-star-sign-1-chromium-linux.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...ptide--7cbad-n-Peptide-that-already-is-added-to-favourites-1-chromium-linux.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...ptide--87f15-n-Peptide-that-already-is-added-to-favourites-2-chromium-linux.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...apshots/Peptide-library-testing-add-molecule-in-favourites-1-chromium-linux.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...snapshots/RNA-Library-Add-Custom-preset-to-Presets-section-1-chromium-linux.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified .../RNA-Library-Add-Custom-preset-to-Presets-section-and-Edit-1-chromium-linux.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...om-preset-to-Presets-section-and-display-after-page-reload-1-chromium-linux.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...om-preset-to-Presets-section-and-display-after-page-reload-2-chromium-linux.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...d-Custom-preset-to-Presets-section-then-Duplicate-and-Edit-1-chromium-linux.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...hots/RNA-Library-Add-same-Custom-preset-to-Presets-section-1-chromium-linux.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion ...s/src/components/monomerLibrary/RnaPresetGroup/__snapshots__/RnaPresetGroup.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ exports[`Test Rna Preset Group component should render 1`] = `
class="css-1yj2br2"
>
<div
class="css-xhoies"
class="css-1nulf5p"
data-rna-preset-item-name="U"
data-testid="U_U_R_P"
>
Expand Down
42 changes: 21 additions & 21 deletions ...rc/components/monomerLibrary/monomerLibraryGroup/__snapshots__/MonomerGroup.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

exports[`Monomer Group should apply correct style if selected 1`] = `
<div
class="css-9xm0yj"
class="css-ehm7r7"
data-monomer-item-id="RRMonomerName___RRName"
data-testid="RRMonomerName___RRName"
>
Expand Down Expand Up @@ -34,7 +34,7 @@ Object {
class="css-1yj2br2"
>
<div
class="css-13ejbjh"
class="css-oypk73"
data-monomer-item-id="RRMonomerName___RRName"
data-testid="RRMonomerName___RRName"
>
Expand All @@ -48,7 +48,7 @@ Object {
</div>
</div>
<div
class="css-146eslx"
class="css-qogw85"
data-monomer-item-id="mAMonomerName___mAName"
data-testid="mAMonomerName___mAName"
>
Expand All @@ -62,7 +62,7 @@ Object {
</div>
</div>
<div
class="css-1wt06uo"
class="css-cnzlx6"
data-monomer-item-id="dDMonomerName___dDName"
data-testid="dDMonomerName___dDName"
>
Expand All @@ -76,7 +76,7 @@ Object {
</div>
</div>
<div
class="css-13ejbjh"
class="css-oypk73"
data-monomer-item-id="arRMonomerName___arRName"
data-testid="arRMonomerName___arRName"
>
Expand All @@ -90,7 +90,7 @@ Object {
</div>
</div>
<div
class="css-146eslx"
class="css-qogw85"
data-monomer-item-id="LdLMonomerName___LdLRName"
data-testid="LdLMonomerName___LdLRName"
>
Expand Down Expand Up @@ -120,7 +120,7 @@ Object {
class="css-1yj2br2"
>
<div
class="css-13ejbjh"
class="css-oypk73"
data-monomer-item-id="RRMonomerName___RRName"
data-testid="RRMonomerName___RRName"
>
Expand All @@ -134,7 +134,7 @@ Object {
</div>
</div>
<div
class="css-146eslx"
class="css-qogw85"
data-monomer-item-id="mAMonomerName___mAName"
data-testid="mAMonomerName___mAName"
>
Expand All @@ -148,7 +148,7 @@ Object {
</div>
</div>
<div
class="css-1wt06uo"
class="css-cnzlx6"
data-monomer-item-id="dDMonomerName___dDName"
data-testid="dDMonomerName___dDName"
>
Expand All @@ -162,7 +162,7 @@ Object {
</div>
</div>
<div
class="css-13ejbjh"
class="css-oypk73"
data-monomer-item-id="arRMonomerName___arRName"
data-testid="arRMonomerName___arRName"
>
Expand All @@ -176,7 +176,7 @@ Object {
</div>
</div>
<div
class="css-146eslx"
class="css-qogw85"
data-monomer-item-id="LdLMonomerName___LdLRName"
data-testid="LdLMonomerName___LdLRName"
>
Expand Down Expand Up @@ -258,7 +258,7 @@ Object {
class="css-1yj2br2"
>
<div
class="css-13ejbjh"
class="css-oypk73"
data-monomer-item-id="RRMonomerName___RRName"
data-testid="RRMonomerName___RRName"
>
Expand All @@ -272,7 +272,7 @@ Object {
</div>
</div>
<div
class="css-146eslx"
class="css-qogw85"
data-monomer-item-id="mAMonomerName___mAName"
data-testid="mAMonomerName___mAName"
>
Expand All @@ -286,7 +286,7 @@ Object {
</div>
</div>
<div
class="css-1wt06uo"
class="css-cnzlx6"
data-monomer-item-id="dDMonomerName___dDName"
data-testid="dDMonomerName___dDName"
>
Expand All @@ -300,7 +300,7 @@ Object {
</div>
</div>
<div
class="css-13ejbjh"
class="css-oypk73"
data-monomer-item-id="arRMonomerName___arRName"
data-testid="arRMonomerName___arRName"
>
Expand All @@ -314,7 +314,7 @@ Object {
</div>
</div>
<div
class="css-146eslx"
class="css-qogw85"
data-monomer-item-id="LdLMonomerName___LdLRName"
data-testid="LdLMonomerName___LdLRName"
>
Expand All @@ -339,7 +339,7 @@ Object {
class="css-1yj2br2"
>
<div
class="css-13ejbjh"
class="css-oypk73"
data-monomer-item-id="RRMonomerName___RRName"
data-testid="RRMonomerName___RRName"
>
Expand All @@ -353,7 +353,7 @@ Object {
</div>
</div>
<div
class="css-146eslx"
class="css-qogw85"
data-monomer-item-id="mAMonomerName___mAName"
data-testid="mAMonomerName___mAName"
>
Expand All @@ -367,7 +367,7 @@ Object {
</div>
</div>
<div
class="css-1wt06uo"
class="css-cnzlx6"
data-monomer-item-id="dDMonomerName___dDName"
data-testid="dDMonomerName___dDName"
>
Expand All @@ -381,7 +381,7 @@ Object {
</div>
</div>
<div
class="css-13ejbjh"
class="css-oypk73"
data-monomer-item-id="arRMonomerName___arRName"
data-testid="arRMonomerName___arRName"
>
Expand All @@ -395,7 +395,7 @@ Object {
</div>
</div>
<div
class="css-146eslx"
class="css-qogw85"
data-monomer-item-id="LdLMonomerName___LdLRName"
data-testid="LdLMonomerName___LdLRName"
>
Expand Down
11 changes: 7 additions & 4 deletions packages/ketcher-macromolecules/src/components/monomerLibrary/monomerLibraryItem/styles.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,8 +26,9 @@ export const Card = styled.div<{
cursor: ${({ disabled }) => (disabled ? 'default' : 'pointer')};
opacity: ${({ disabled }) => (disabled ? '0.4' : '1')};
display: flex;
justify-content: center;
justify-content: space-between;
align-items: center;
padding: 0 5px;
font-size: ${({ theme }) => theme.ketcher.font.size.small};
color: ${({ theme }) => theme.ketcher.color.text.primary};
position: relative;
Expand Down Expand Up @@ -77,18 +78,20 @@ export const Card = styled.div<{
position: absolute;
bottom: ${({ selected }) => (selected ? '4px' : '6px')};
left: ${({ selected }) => (selected ? '4px' : '6px')};
text-overflow: ellipsis;
max-width: calc(100% - 12px);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 85%;
}
> .star {
color: #e1e5ea;
position: absolute;
top: 12px;
right: 4px;
right: 3px;
font-size: 15px;
opacity: 0;
transition: 0.2s ease;
flex-shrink: 0;
&.visible {
visibility: visible;
opacity: 1;
Expand Down
8 changes: 4 additions & 4 deletions .../src/components/monomerLibrary/monomerLibraryList/__snapshots__/MonomerList.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ Object {
class="css-1yj2br2"
>
<div
class="css-l69gvp"
class="css-1xf91or"
data-monomer-item-id="Phe4SD___(2S)-2-amino-3-{4-[(4S)-2,6-dioxo-1,3-diazinane-4-amido]phenyl}propanoic acid"
data-testid="Phe4SD___(2S)-2-amino-3-{4-[(4S)-2,6-dioxo-1,3-diazinane-4-amido]phenyl}propanoic acid"
>
Expand Down Expand Up @@ -44,7 +44,7 @@ Object {
class="css-1yj2br2"
>
<div
class="css-l69gvp"
class="css-1xf91or"
data-monomer-item-id="Phe4SD___(2S)-2-amino-3-{4-[(4S)-2,6-dioxo-1,3-diazinane-4-amido]phenyl}propanoic acid"
data-testid="Phe4SD___(2S)-2-amino-3-{4-[(4S)-2,6-dioxo-1,3-diazinane-4-amido]phenyl}propanoic acid"
>
Expand Down Expand Up @@ -130,7 +130,7 @@ Object {
class="css-1yj2br2"
>
<div
class="css-146eslx"
class="css-qogw85"
data-monomer-item-id="PEG2___Diethylene Glycol"
data-testid="PEG2___Diethylene Glycol"
>
Expand Down Expand Up @@ -159,7 +159,7 @@ Object {
class="css-1yj2br2"
>
<div
class="css-146eslx"
class="css-qogw85"
data-monomer-item-id="PEG2___Diethylene Glycol"
data-testid="PEG2___Diethylene Glycol"
>
Expand Down

0 comments on commit 21691ea

Please sign in to comment.