jan/openreplay
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

added toggler disabled colors, visibility default values, no items warning text to search field

Browse source
This commit is contained in:
sylenien 2022-05-12 16:33:28 +02:00 • committed by Delirium
parent 1529510d25
commit 64ebd07e57
4 changed files with 10 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
frontend/app/components/shared/EventFilter/FilterModal/FilterModal.js
View file

@ -119,7 +119,7 @@ export default class FilterModal extends React.PureComponent {
return (!displayed ? null :
<div className={ stl.modal }>
<div className={ stl.modal }>
<div className={ stl.filterListStatic }>
{
filteredList.map(category => (

9
frontend/app/components/shared/SessionSettings/components/ListingVisibility.tsx
View file

@ -18,7 +18,7 @@ function ListingVisibility(props) {
const { settingsStore } = useStore();
const sessionSettings = useObserver(() => settingsStore.sessionSettings)
const [durationSettings, setDurationSettings] = React.useState(sessionSettings.durationFilter);
return (
<>
<h3 className="text-lg">Listing Visibility</h3>
@ -27,7 +27,7 @@ function ListingVisibility(props) {
<div className="col-span-4">
<Select
options={numberOptions}
defaultValue={durationSettings.operator}
defaultValue={numberOptions[0].value}
onChange={({ value }) => {
setDurationSettings({ ...durationSettings, operator: value });
setChanged(true);
@ -39,6 +39,7 @@ function ListingVisibility(props) {
value={durationSettings.count}
type="number"
name="count"
placeholder="E.g 10"
style={{ height: '38px', width: '100%'}}
onChange={(e, { value }) => {
setDurationSettings({ ...durationSettings, count: value });
@ -48,7 +49,7 @@ function ListingVisibility(props) {
</div>
<div className="col-span-3">
<Select
defaultValue={durationSettings.countType}
defaultValue={periodOptions[1].value}
options={periodOptions}
onChange={({ value }) => {
setDurationSettings({ ...durationSettings, countType: value });
@ -67,4 +68,4 @@ function ListingVisibility(props) {
);
}
export default ListingVisibility;
export default ListingVisibility;

3
frontend/app/components/ui/Toggler/toggler.css
View file

@ -39,12 +39,10 @@
width: 20px;
left: 0;
bottom: -2px;
/* background-color: white; */
transition: .4s;
border-radius: 50%;
border: solid 1px rgba(0, 0, 0, 0.2);
background: #394EFF;
box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px rgba(0, 0, 0, 0.14), 0px 1px 3px rgba(0, 0, 0, 0.12);
}
@ -55,6 +53,7 @@
.slider.checked:before {
border: solid 1px $teal;
background-color: $teal !important;
transform: translateX(15px);
}

3
frontend/app/svg/icons/binoculars.svg Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-binoculars" viewBox="0 0 16 16">
<path d="M3 2.5A1.5 1.5 0 0 1 4.5 1h1A1.5 1.5 0 0 1 7 2.5V5h2V2.5A1.5 1.5 0 0 1 10.5 1h1A1.5 1.5 0 0 1 13 2.5v2.382a.5.5 0 0 0 .276.447l.895.447A1.5 1.5 0 0 1 15 7.118V14.5a1.5 1.5 0 0 1-1.5 1.5h-3A1.5 1.5 0 0 1 9 14.5v-3a.5.5 0 0 1 .146-.354l.854-.853V9.5a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5v.793l.854.853A.5.5 0 0 1 7 11.5v3A1.5 1.5 0 0 1 5.5 16h-3A1.5 1.5 0 0 1 1 14.5V7.118a1.5 1.5 0 0 1 .83-1.342l.894-.447A.5.5 0 0 0 3 4.882V2.5zM4.5 2a.5.5 0 0 0-.5.5V3h2v-.5a.5.5 0 0 0-.5-.5h-1zM6 4H4v.882a1.5 1.5 0 0 1-.83 1.342l-.894.447A.5.5 0 0 0 2 7.118V13h4v-1.293l-.854-.853A.5.5 0 0 1 5 10.5v-1A1.5 1.5 0 0 1 6.5 8h3A1.5 1.5 0 0 1 11 9.5v1a.5.5 0 0 1-.146.354l-.854.853V13h4V7.118a.5.5 0 0 0-.276-.447l-.895-.447A1.5 1.5 0 0 1 12 4.882V4h-2v1.5a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5V4zm4-1h2v-.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5V3zm4 11h-4v.5a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5V14zm-8 0H2v.5a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5V14z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1 KiB