Skip to content

Commit cac7f25

Browse files
tjprescotttjprescott
committed
Code review comments.
1 parent 780a058 commit cac7f25

File tree

4 files changed

+101
-33
lines changed

4 files changed

+101
-33
lines changed

‎src/dotnet/APIView/APIViewWeb/Client/css/shared/theme-colors.scss‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@
1818
--border-color: #{bootstrap.shade-color($base-bg-color, 20%)};
1919
--border-color-transparent: #{bootstrap.shade-color($base-bg-color, 2%)};
2020
--primary-btn-color: #fff;
21+
--checkbox-icon-color: #{bootstrap.$primary};
2122
/*----Links------------------------------------------------------*/
2223
--link-color: #{bootstrap.$primary};
2324
--link-active: #{bootstrap.shade-color(bootstrap.$primary, 20%)};
@@ -86,7 +87,7 @@
8687
--dark-overlay: rgba(0, 0, 0, 0.1);
8788
--client-type-bg: rgba(13, 110, 253, 0.08);
8889
/*----SVG-------------------------------------------------*/
89-
--svg-check-box: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
90+
--svg-check-box: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
9091
--svg-switch: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
9192
}
9293

@@ -111,6 +112,7 @@
111112
--border-color: #{bootstrap.tint-color($base-bg-color, 20%)};
112113
--border-color-transparent: #{bootstrap.tint-color($base-bg-color, 7%)};
113114
--primary-btn-color: #fff;
115+
--checkbox-icon-color: #fff;
114116
/*----Links------------------------------------------------------*/
115117
--link-color: #{$primary-color};
116118
--link-active: #{bootstrap.tint-color($primary-color, 20%)};
@@ -205,7 +207,8 @@
205207
--danger-color: #{$danger-color};
206208
--border-color: #{bootstrap.tint-color($base-bg-color, 20%)};
207209
--border-color-transparent: #{bootstrap.tint-color($base-bg-color, 7%)};
208-
--primary-btn-color: #{$base-bg-color};
210+
--primary-btn-color: #fff;
211+
--checkbox-icon-color: #{$primary-color};
209212
/*----Links------------------------------------------------------*/
210213
--link-color: #{$primary-color};
211214
--link-active: #{bootstrap.tint-color($primary-color, 10%)};
@@ -274,6 +277,6 @@
274277
--dark-overlay: rgba(0, 0, 0, 0.3);
275278
--client-type-bg: rgba(255, 189, 0, 0.15);
276279
/*----SVG-------------------------------------------------*/
277-
--svg-check-box: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='dimgray' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
278-
--svg-switch: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='dimgray'/%3e%3c/svg%3e");
280+
--svg-check-box: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
281+
--svg-switch: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
279282
}

‎src/dotnet/APIView/ClientSPA/src/app/_components/shared/comment-thread/comment-thread.component.html‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,9 +27,9 @@
2727
(onHide)="onSeverityDropdownHide()"
2828
optionLabel="label"
2929
optionValue="value"
30-
[style]="{'min-width': '100px', 'font-size': '0.75rem'}"
3130
styleClass="severity-dropdown"
3231
overlayStyleClass="severity-dropdown-panel"
32+
appendTo="body"
3333
(click)="$event.stopPropagation()">
3434
</p-select>
3535
</div>
@@ -138,8 +138,9 @@
138138
(ngModelChange)="onSeveritySelectionChange($event)"
139139
optionLabel="label"
140140
optionValue="value"
141-
[style]="{'min-width': '120px'}"
141+
styleClass="severity-dropdown"
142142
overlayStyleClass="severity-dropdown-panel"
143+
appendTo="body"
143144
[showClear]="false">
144145
</p-select>
145146
</div>

‎src/dotnet/APIView/ClientSPA/src/app/_components/shared/comment-thread/comment-thread.component.scss‎

Lines changed: 0 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -157,17 +157,6 @@
157157
&:hover { transform: none !important; box-shadow: none !important; }
158158
.severity-edit-icon { display: none !important; }
159159
}
160-
161-
p-select .p-select {
162-
border: 1px solid var(--border-color) !important;
163-
border-radius: 12px !important;
164-
background: var(--base-fg-color) !important;
165-
box-shadow: 0 2px 8px rgba(0,0,0,.08) !important;
166-
transition: all .2s !important;
167-
min-height: 36px !important;
168-
.p-select-label { padding: 8px 16px !important; font-size: 14px !important; font-weight: 500 !important; color: var(--base-text-color) !important; border-radius: 12px 0 0 12px !important; background: var(--base-fg-color) !important; border: none !important; }
169-
.p-select-dropdown { width: 36px !important; border-left: 1px solid var(--border-color) !important; background: var(--base-fg-color) !important; border-radius: 0 12px 12px 0 !important; border: none !important; .p-select-dropdown-icon { color: var(--base-text-color) !important; font-size: 12px !important; } }
170-
}
171160
}
172161

173162
:host-context(.dark-theme), :host-context(.dark-solarized-theme) {

‎src/dotnet/APIView/ClientSPA/src/ng-prime-overrides.scss‎

Lines changed: 91 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -170,7 +170,7 @@ p-contextmenusub {
170170
}
171171

172172
.p-checkbox .p-checkbox-box .p-checkbox-icon {
173-
color: var(--primary-btn-color) !important;
173+
color: var(--checkbox-icon-color) !important;
174174
}
175175

176176
.p-datatable .p-datatable-tbody > tr:focus {
@@ -572,6 +572,70 @@ html body .p-multiselect-overlay .p-multiselect-list .p-multiselect-option:focus
572572
color: var(--primary-btn-color) !important;
573573
}
574574

575+
/* Severity Dropdown Styling */
576+
.severity-dropdown,
577+
p-select.severity-dropdown {
578+
min-width: 100px !important;
579+
max-width: 150px !important;
580+
}
581+
582+
.severity-dropdown .p-select,
583+
p-select.severity-dropdown .p-select,
584+
.p-component.severity-dropdown,
585+
.severity-edit-container .p-select {
586+
border: 1px solid var(--border-color) !important;
587+
border-radius: 20px !important;
588+
background: var(--base-fg-color) !important;
589+
box-shadow: none !important;
590+
transition: all .2s !important;
591+
max-height: 32px !important;
592+
height: 32px !important;
593+
min-height: 32px !important;
594+
min-width: 100px !important;
595+
max-width: 150px !important;
596+
overflow: hidden !important;
597+
}
598+
599+
.severity-dropdown .p-select .p-select-label,
600+
p-select.severity-dropdown .p-select .p-select-label,
601+
.severity-edit-container .p-select .p-select-label {
602+
padding: 4px 12px !important;
603+
font-size: 0.75rem !important;
604+
font-weight: 500 !important;
605+
color: var(--base-text-color) !important;
606+
border-radius: 20px 0 0 20px !important;
607+
background: var(--base-fg-color) !important;
608+
border: none !important;
609+
line-height: 1.2 !important;
610+
height: 30px !important;
611+
display: flex !important;
612+
align-items: center !important;
613+
}
614+
615+
.severity-dropdown .p-select .p-select-dropdown,
616+
p-select.severity-dropdown .p-select .p-select-dropdown,
617+
.severity-edit-container .p-select .p-select-dropdown {
618+
width: 32px !important;
619+
min-width: 32px !important;
620+
max-width: 32px !important;
621+
height: 32px !important;
622+
border-left: 1px solid var(--border-color) !important;
623+
background: var(--base-fg-color) !important;
624+
border-radius: 0 20px 20px 0 !important;
625+
border: none !important;
626+
display: flex !important;
627+
align-items: center !important;
628+
justify-content: center !important;
629+
padding: 0 !important;
630+
}
631+
632+
.severity-dropdown .p-select .p-select-dropdown .p-select-dropdown-icon,
633+
p-select.severity-dropdown .p-select .p-select-dropdown .p-select-dropdown-icon,
634+
.severity-edit-container .p-select .p-select-dropdown .p-select-dropdown-icon {
635+
color: var(--base-text-color) !important;
636+
font-size: 11px !important;
637+
}
638+
575639
/* Emphasis Badge (Global) */
576640
.emphasis-badge {
577641
border-radius: 5px;
@@ -820,12 +884,19 @@ html body .p-multiselect-overlay .p-multiselect-list .p-multiselect-option:not(.
820884
p-inputswitch, .p-inputswitch, .p-toggleswitch {
821885
width: 40px !important;
822886
height: 24px !important;
887+
flex-shrink: 0 !important;
888+
min-width: 40px !important;
823889
}
824890

825-
.p-inputswitch .p-inputswitch-slider, .p-toggleswitch .p-toggleswitch-slider {
891+
.p-inputswitch .p-inputswitch-slider,
892+
.p-toggleswitch .p-toggleswitch-slider {
826893
border-radius: 30px;
827894
background: var(--base-bg-color);
828895
border: 1px solid var(--border-color);
896+
position: relative;
897+
width: 40px !important;
898+
height: 24px !important;
899+
flex-shrink: 0 !important;
829900
}
830901

831902
.p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider,
@@ -834,28 +905,32 @@ p-inputswitch, .p-inputswitch, .p-toggleswitch {
834905
border-color: var(--link-active) !important;
835906
}
836907

837-
.p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before,
838-
.p-toggleswitch.p-toggleswitch-checked .p-toggleswitch-slider:before {
839-
transform: none !important;
840-
left: calc(100% - 1.25rem) !important;
841-
background: var(--primary-btn-color) !important;
842-
}
843-
844908
.p-inputswitch.p-inputswitch-checked .p-inputswitch-slider,
845909
.p-toggleswitch.p-toggleswitch-checked .p-toggleswitch-slider {
846910
background: var(--primary-color) !important;
847911
border-color: var(--primary-color) !important;
848912
}
849913

914+
.p-toggleswitch-handle {
915+
background: #6c757d !important;
916+
width: 16px !important;
917+
height: 16px !important;
918+
left: 2px !important;
919+
top: 50% !important;
920+
margin-top: -8px !important;
921+
border-radius: 50% !important;
922+
transition: all 0.2s !important;
923+
position: absolute !important;
924+
}
925+
926+
.p-toggleswitch-checked .p-toggleswitch-handle {
927+
left: 20px !important;
928+
background: #ffffff !important;
929+
}
930+
850931
.p-inputswitch .p-inputswitch-slider:before,
851932
.p-toggleswitch .p-toggleswitch-slider:before {
852-
background: var(--border-color);
853-
width: 1rem;
854-
height: 1rem;
855-
left: 0.25rem;
856-
margin-top: -0.5rem;
857-
border-radius: 50%;
858-
transition-duration: 0.2s;
933+
display: none !important;
859934
}
860935

861936
.p-message .p-message-content {

0 commit comments

Comments
 (0)