Skip to content

Commit

Permalink
Merge remote-tracking branch 'AlejandroCano/ResponsiveSearchControl'
Browse files Browse the repository at this point in the history
  • Loading branch information
@olmobrutall
olmobrutall committed Dec 17, 2022
2 parents 9cde3bb + 82ef576 commit 41fc3c0
Showing 1 changed file with 2 additions and 2 deletions.
4 changes: 2 additions & 2 deletions Signum.React/Scripts/Finder.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2129,7 +2129,7 @@ function initFormatRules(): FormatRule[] {

return (
<span className={multiLineClass}>
{cell.split(",").map((t, i) => <a key={i} href="tel:">{t.trim()}</a>).joinCommaHtml(",")}
{cell.split(",").map((t, i) => <a key={i} href={`tel:${t.trim()}`}>{t.trim()}</a>).joinCommaHtml(",")}
</span>
);
}, false, "telephone-link-cell")
Expand All @@ -2153,7 +2153,7 @@ function initFormatRules(): FormatRule[] {

return (
<span className={multiLineClass}>
<a href="mailto:">{cell}</a>
<a href={`mailto:${cell}`}>{cell}</a>
</span>
);
}, false, "email-link-cell")
Expand Down

2 comments on commit 41fc3c0

@olmobrutall
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Responsive SearchControl

Thanks to @MehdyKarimpour, the SearchControl is much more mobile-friendly.

The previous behaviour was to shown a table with table-responsibe that allows horizontal scrolling.

image

Now by default a more mobile-friendly will be shown below sm breakpoint:

image

Internally a completely different render mechanism is used. Each element has a header with a checkbox for selecting and a full-text link (instead of an small arrow). Still the new mobile-friently mode respects all the CellFormatter infrastructure.

By clicking in the yellow button you can swith from table-mode to mobile-mode.

If you want to change the default mode, of hide the button to swith modes. you can use SeachControlLoaded.mobileOptions (globally) or configure for one particular query QuerySettings.mobileOptions or for one particula SearchControl (SearchControlProps.mobileOptions).

Note that the buttons in the SearchControl toolbar have also been simplified (no label).

CellFormatters for Telephone and E-Mail

Finally now there are new automatic formatters for e-mail address and telephone.

The new formatters use <a href="tel:..."/> and <a href="mailto:..."/> when the server informas that the property has a TelephoneValidatorAttribute and EMailValidatorAttribute.

If this behaviour makes problems in your application, you can remove the Finder.formatRule in your MainAdmin.tsx (globlally) or define a custom formatter for a property route using Finder.registerPropertyFormatter.

Thanks @MehdyKarimpour for the great work!

@mehdy-karimpour
Copy link
Contributor

@mehdy-karimpour mehdy-karimpour commented on 41fc3c0 Dec 17, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You're welcome. Thanks @olmobrutall for the valuable support! 👍

Please sign in to comment.