Skip to content

Commit

Permalink
AG-1709: migrate InputSwitch to ToggleSwitch; AG-1710: remove styles …
Browse files Browse the repository at this point in the history 
…specific to gene-druggability component
  • Loading branch information
@hallieswan
hallieswan authored and EC2 Default User committed Mar 10, 2025
1 parent 6d31844 commit a2438d6
Show file tree
Hide file tree
Showing 4 changed files with 9 additions and 309 deletions.
10 changes: 5 additions & 5 deletions apps/agora/app/src/app/myPrimeNGPreset.ts
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import { ApplicationConfig } from '@angular/core';
import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
import { providePrimeNG } from 'primeng/config';
import Lara from '@primeng/themes/lara';
import { definePreset } from '@primeng/themes';
import Lara from '@primeng/themes/lara';
import { providePrimeNG } from 'primeng/config';

export const MyPreset = definePreset(Lara, {
primitive: {
Expand Down Expand Up @@ -4798,8 +4798,8 @@ export const MyPreset = definePreset(Lara, {
},
toggleswitch: {
root: {
width: '3rem',
height: '1.75rem',
width: '2.25rem',
height: '1.25rem',
borderRadius: '30px',
gap: '0.25rem',
shadow: '{form.field.shadow}',
Expand All @@ -4821,7 +4821,7 @@ export const MyPreset = definePreset(Lara, {
},
handle: {
borderRadius: '50%',
size: '1.25rem',
size: '0.85rem',
},
colorScheme: {
light: {
Expand Down
4 changes: 2 additions & 2 deletions libs/agora/gene-comparison-tool/src/lib/gene-comparison-tool.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -126,7 +126,7 @@ <h1 class="gct-heading h2">Gene Comparison Tool</h1>
<div class="gct-significance-control">
<div>Hide insignificant</div>
<div>
<p-inputSwitch
<p-toggleswitch
[pTooltip]="
'When on, this will filter out all statistically insignificant results. Current significance cutoff is: ' +
significanceThreshold
Expand All @@ -136,7 +136,7 @@ <h1 class="gct-heading h2">Gene Comparison Tool</h1>
tooltipStyleClass="tooltip"
[(ngModel)]="significanceThresholdActive"
(onChange)="setSignificanceThresholdActive(significanceThresholdActive)"
></p-inputSwitch>
></p-toggleswitch>
</div>
<div>
<p-overlayPanel
Expand Down
4 changes: 2 additions & 2 deletions libs/agora/gene-comparison-tool/src/lib/gene-comparison-tool.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,9 +47,9 @@ import { GeneComparisonToolScorePanelComponent } from './components/gene-compari
import { FormsModule } from '@angular/forms';
import { PopoverLinkComponent } from '@sagebionetworks/agora/genes';
import { LoadingIconComponent, SvgIconComponent } from '@sagebionetworks/agora/shared';
import { InputSwitchModule } from 'primeng/inputswitch';
import { OverlayPanelModule } from 'primeng/overlaypanel';
import { SelectModule } from 'primeng/select';
import { ToggleSwitchModule } from 'primeng/toggleswitch';
import { GeneComparisonToolFilterListComponent } from './components/gene-comparison-tool-filter-list/gene-comparison-tool-filter-list.component';
import { GeneComparisonToolHowToPanelComponent } from './components/gene-comparison-tool-how-to-panel/gene-comparison-tool-how-to-panel.component';
import { GeneComparisonToolLegendPanelComponent } from './components/gene-comparison-tool-legend-panel/gene-comparison-tool-legend-panel.component';
Expand All @@ -64,7 +64,7 @@ import { GeneComparisonToolLegendPanelComponent } from './components/gene-compar
TableModule,
TooltipModule,
SelectModule,
InputSwitchModule,
ToggleSwitchModule,
PopoverLinkComponent,
OverlayPanelModule,
SvgIconComponent,
Expand Down
300 changes: 0 additions & 300 deletions libs/agora/styles/src/lib/components/_shame.scss
View file
Original file line number Diff line number Diff line change
@@ -1,303 +1,3 @@
/* stylelint-disable no-descending-specificity */

.gd-accordion {
.p-accordion {
.p-accordion-tab {
margin-bottom: var(--spacing-lg);
}

.p-accordion-toggle-icon {
position: absolute;
right: 60px;
top: calc(50% - 14px);
font-size: 24px;
}

.p-accordion-header {
padding: 0;
border: 1px solid var(--color-gray-300);

a {
padding: var(--spacing-xl) 144px var(--spacing-xl) var(--spacing-xl);
}

.row {
align-items: center;
}

&:hover {
.p-accordion-toggle-icon {
color: var(--color-action-primary);
}
}
}

.p-accordion-content {
padding: var(--spacing-xl);
border: 1px solid var(--color-gray-300);
border-top: none;
background-color: var(--color-gray-100);

.gd-accordion-content-heading {
text-align: center;
font-weight: 700;
}

.gd-accordion-content-description {
text-align: center;
font-size: var(--font-size-xs);
font-style: italic;
margin-bottom: var(--spacing-lg);
}

.bucket-inner-row {
padding-bottom: 30px;
}

.content-title {
font-size: var(--font-size-xs);
vertical-align: middle;
padding-left: 30px;
}

.icon-class {
width: 81px;
font-size: var(--font-size-xs);
text-align: center;
margin-bottom: 12px;
margin-top: 12px;
}

.vertical-auto {
margin-top: auto;
margin-bottom: auto;
}
}
}

p-header {
width: 100%;
}

.inner-row-header {
height: 46px;
}

span {
vertical-align: middle;
margin-top: auto;
margin-bottom: auto;
}

.content-row {
padding-top: 30px;
padding-bottom: 30px;

.inner-row {
.header-title {
line-height: var(--font-size-md);
font-size: var(--font-size-sm);
text-align: center;
margin-bottom: 15px;
margin-top: 12px;
}
}

.content-header-description {
text-align: center;
margin-bottom: 25px;
line-height: var(--font-size-xs);
font-size: var(--font-size-xxs);
height: 46px;
}

.vertical-auto {
margin-top: auto;
margin-bottom: auto;
}

.bottom-auto {
margin-bottom: auto;
}
}

.header-title {
line-height: var(--font-size-xxl);
font-size: var(--font-size-lg);
}

.header-score > div,
.icon-wrapper > div:nth-child(2) {
margin-left: auto;
margin-right: auto;
border-radius: 50%;
cursor: pointer;
}

.container {
display: inline-block;
min-height: 99px;
width: 100%;
max-width: 100%;
padding-left: 0;

.header-title,
.header-score,
.header-description {
@include respond-to('ex-small') {
min-height: 43px;
margin-top: 25.5px !important;
}

@include respond-to('small') {
min-height: 43px;
margin-top: 25.5px !important;
}

@include respond-to('medium') {
margin-top: auto !important;
min-height: 0;
}

@include respond-to('large') {
margin-top: auto !important;
min-height: 0;
}

@include respond-to('ex-large') {
margin-top: auto !important;
min-height: 0;
}
}

.header-description {
line-height: var(--font-size-xl);
font-size: var(--font-size-md);
}

.row {
min-height: 99px;

> [class*='col-'] {
vertical-align: middle;
margin-top: auto;
margin-bottom: auto;
}
}
}

.icon-wrapper {
width: 81px !important;
display: inline-table;
}

.icon-description {
position: relative;
height: 0;
padding: 50% 0;
top: -12px;
left: -0.5px;
font-size: var(--font-size-xl);
text-align: center;
}

.icon-class {
width: 81px;
line-height: var(--font-size-xs);
font-size: var(--font-size-xxs);
text-align: center;
margin-bottom: 12px;
margin-top: 12px;
}

.custom-caret-down {
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
}

.caret-wrapper {
margin: 0 0 10px calc(50% - 10px);
}

.class-description {
padding: 15px;
}

.criteria-row {
padding-left: 15px;
padding-right: 15px;
min-height: 0 !important;
}

.criteria-title {
margin-top: 0;
margin-bottom: 9px;
font-size: var(--font-size-lg);
}

.criteria-description {
margin-top: 0;
}
}

p-inputswitch {
display: block;

.p-inputswitch {
display: block;
width: 36px;
height: 20px;
}

.p-inputswitch .p-inputswitch-slider {
background: #ced4da;
transition:
background-color 0.2s,
color 0.2s,
border-color 0.2s,
box-shadow 0.2s;
border-radius: 30px;
}

.p-inputswitch .p-inputswitch-slider::before {
background: #fff;
width: 14px;
height: 14px;
left: 4px;
margin-top: -7px;
border-radius: 50%;
transition-duration: 0.2s;
}

.p-inputswitch.p-inputswitch-checked .p-inputswitch-slider::before {
transform: translateX(14px);
background: #fff;
}

.p-inputswitch.p-focus .p-inputswitch-slider {
outline: 0 none;
outline-offset: 0;
}

.p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider {
background: #b6bfc8;
}

.p-inputswitch.p-inputswitch-checked .p-inputswitch-slider {
background: var(--color-action-primary);
}

.p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider {
background: var(--color-action-primary);
}
}

p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch {
border-color: #e24c4c;
}

.popover {
max-width: 425px;
background: #fff;
Expand Down

0 comments on commit a2438d6

Please sign in to comment.