Customization (DT) Beta - Font Icon Picker #2078

kodinkat · 2023-05-23T15:31:20Z

…ield icon rendering logic to better support font icon displaying

prykon

@kodinkat Thanks so much for coding this! I'm testing it as we speak.

In order to keep the UI consistent, could you...?

Make the edit field settings modal card flip and make the icon selector modal unflip
Add the dt-admin-modal-overlay class when opening the icons modal

Thanks again!

kodinkat · 2023-05-24T15:34:19Z

@kodinkat Thanks so much for coding this! I'm testing it as we speak.

In order to keep the UI consistent, could you...?

Make the edit field settings modal card flip and make the icon selector modal unflip

Add the dt-admin-modal-overlay class when opening the icons modal

Thanks again!

@prykon That's now in for you... Updating font icon picker dialog to adopt flip animation turned out to be slightly fiddlier then anticipated; so let me know if anything...

…ols-theme into customize-dt-beta-font-icon-picker

prykon · 2023-05-26T13:16:01Z

@kodinkat I would add a margin: 1.5em to the .ui-dialog-buttonset
Aside from that, everything looks good!

prykon · 2023-05-31T13:24:13Z

I think we're good to merge, @corsacca

corsacca · 2023-06-02T10:54:02Z

@kodinkat
I tried changing one of the milestones icons and the display shows:

kodinkat · 2023-06-05T10:25:07Z

@prykon @corsacca - See if recent updates now address multi-select mdi icon preview issues.

prykon · 2023-06-05T13:42:24Z

@kodinkat Icon updates properly on the admin page and dt frontend but not if it's inside a multi select...

This is ok

This is broken

kodinkat · 2023-06-05T15:43:29Z

@prykon try it now and let me know.. :)

prykon · 2023-06-05T16:42:04Z

@kodinkat It works now! Found one more bug, though...

Looks like this:

corsacca · 2023-06-06T06:19:26Z

@prykon, That looks like an issue with the Church Health and not with the implementation of the font icon picker. Maybe a separate issue?
I bet it does the same with setting a church health icon to a font icon in the legacy settings.

corsacca · 2023-06-06T06:29:54Z

dt-core/global-functions.php


- <?php
+ // Determine icon html element shape to be adopted.


@kodinkat, font icons need to use the font-icon field, not the icon field, then the code at line 340 works

…health logic to support displaying of font icons

kodinkat · 2023-06-06T11:50:12Z

@prykon @corsacca give it a try now and let me know how things hold up, especially on the group church health side of things! :)

prykon · 2023-06-06T12:21:09Z

@kodinkat Looks good now!

corsacca · 2023-06-06T14:43:32Z

dt-core/admin/js/dt-options.js

@@ -91,7 +239,9 @@ jQuery(document).ready(function ($) {
 * Icon selector modal dialog
 */

- function display_icon_selector_dialog(parent_form, icon_input) {
+ function display_icon_selector_dialog(parent_form, icon_input, callback = function (source) {
+ console.log(source);


is this debug or needed?

corsacca · 2023-06-06T14:57:46Z

dt-core/admin/js/dt-options.js

@@ -313,7 +469,9 @@ jQuery(document).ready(function ($) {
 * Icon selector modal dialog - Handle Icon Save
 */

- function handle_icon_save(dialog, parent_form, icon_input) {
+ function handle_icon_save(dialog, parent_form, icon_input, callback = function (source) {
+ console.log(source);


@kodinkat is this debug or needed?

corsacca · 2023-06-06T15:06:05Z

@kodinkat @prykon looking good guys.
@kodinkat i tried adding a new field and got:

There is a trim() error, but then show:

this is what a new field (multi_select) looks like:

kodinkat · 2023-06-07T09:42:14Z

@kodinkat @prykon looking good guys. @kodinkat i tried adding a new field and got: There is a trim() error, but then show:

this is what a new field (multi_select) looks like:

@corsacca sanity checked new field / option flows and both held true for me. @prykon does it hold true for you?

prykon · 2023-06-07T12:53:02Z

@kodinkat Thanks for hanging in there for this one; so many ins and outs!

I found a bug...

Steps to reproduce:

Create a new field
Click to edit the field (no icon image is shown, but this might be out of scope)
Edit the field name only (don't change icon settings)
Re-click to edit the field (icon image now appears but is broken).

Apparently, it's saving the icon value to undefined and that also breaks the frontend...

kodinkat · 2023-06-08T10:13:54Z

@kodinkat Thanks for hanging in there for this one; so many ins and outs!

I found a bug...

Steps to reproduce:

Create a new field

Click to edit the field (no icon image is shown, but this might be out of scope)

Edit the field name only (don't change icon settings)

Re-click to edit the field (icon image now appears but is broken).

Apparently, it's saving the icon value to undefined and that also breaks the frontend...

@prykon thanks for this and for the steps; which helped me to reproduce! A fix has now been pushed, so feel free to have a play and let me know if there are still any remaining hidden bugs..... :)

prykon · 2023-06-08T13:34:17Z

@kodinkat
Found a UI thing... the 'Change Icon' button should not be on a new line.

@corsacca Do we want icons on field options for a dropdown field type?

Everything else looks great!

prykon · 2023-06-09T12:18:23Z

Looking good, @kodinkat!
I think it's requiring an onclick prevent default or something.

Screen.Recording.2023-06-09.at.09.17.31.mov

kodinkat · 2023-06-09T12:38:44Z

Looking good, @kodinkat! I think it's requiring an onclick prevent default or something.

Screen.Recording.2023-06-09.at.09.17.31.mov

@prykon thanks for this... However, issue not showing up on my end for .change-icon-button button class types or any other buttons..

Anyway, just to be on the safe-side, I've added e.preventDefault() on .change-icon-button click events; but not on any others, to avoid disrupting any pre-existing logic..

prykon · 2023-06-09T12:56:12Z

Looking good, @kodinkat! I think it's requiring an onclick prevent default or something.
Screen.Recording.2023-06-09.at.09.17.31.mov

@prykon thanks for this... However, issue not showing up on my end for .change-icon-button button class types or any other buttons..

Anyway, just to be on the safe-side, I've added e.preventDefault() on .change-icon-button click events; but not on any others, to avoid disrupting any pre-existing logic..

@kodinkat It's working now! Also, no other bugs found.

@corsacca are we good to push?

corsacca · 2023-06-09T15:16:33Z

Very nice work guys! :) @kodinkat @prykon

Added customization dt beta font icon picker support + Updated core f…

2d35160

…ield icon rendering logic to better support font icon displaying

corsacca requested a review from prykon May 23, 2023 16:14

prykon requested changes May 23, 2023

View reviewed changes

Updated font icon ui to support flip animation

a0779d2

kodinkat added 2 commits May 24, 2023 16:53

Merge branch 'master' of https://github.com/DiscipleTools/disciple-to…

7654fab

…ols-theme into customize-dt-beta-font-icon-picker

Tweaked mdi font icon sizes

2576051

prykon approved these changes May 26, 2023

View reviewed changes

Additional ui dialog buttonset styling

f819fac

Display updated multi-select mdi icons within preview panel

1e31e3b

Addressed frontend multiselect mdi rendering issue

e4c588a

corsacca reviewed Jun 6, 2023

View reviewed changes

Updated multi-select font icon display logic + Updated groups church …

edca528

…health logic to support displaying of font icons

corsacca reviewed Jun 6, 2023

View reviewed changes

Removal of unwanted debug statements + Sanity checked new field flow

770f40e

Captured that pesky undefined bug! ;-)

068d6a0

Ensure change icon button is on same line

dcbaa17

Prevent default click events on .change-icon-button clicks

5020129

corsacca merged commit 43b57e8 into DiscipleTools:master Jun 9, 2023
2 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Customization (DT) Beta - Font Icon Picker #2078

Customization (DT) Beta - Font Icon Picker #2078

kodinkat commented May 23, 2023

prykon left a comment •

edited

Loading

kodinkat commented May 24, 2023 •

edited

Loading

prykon commented May 26, 2023

prykon commented May 31, 2023

corsacca commented Jun 2, 2023

kodinkat commented Jun 5, 2023

prykon commented Jun 5, 2023

kodinkat commented Jun 5, 2023

prykon commented Jun 5, 2023

corsacca commented Jun 6, 2023 •

edited

Loading

corsacca Jun 6, 2023

kodinkat commented Jun 6, 2023

prykon commented Jun 6, 2023

corsacca Jun 6, 2023

corsacca Jun 6, 2023

corsacca commented Jun 6, 2023

kodinkat commented Jun 7, 2023

prykon commented Jun 7, 2023 •

edited

Loading

kodinkat commented Jun 8, 2023

prykon commented Jun 8, 2023 •

edited

Loading

prykon commented Jun 9, 2023

kodinkat commented Jun 9, 2023

prykon commented Jun 9, 2023

corsacca commented Jun 9, 2023

Customization (DT) Beta - Font Icon Picker #2078

Customization (DT) Beta - Font Icon Picker #2078

Conversation

kodinkat commented May 23, 2023

prykon left a comment • edited Loading

Choose a reason for hiding this comment

kodinkat commented May 24, 2023 • edited Loading

prykon commented May 26, 2023

prykon commented May 31, 2023

corsacca commented Jun 2, 2023

kodinkat commented Jun 5, 2023

prykon commented Jun 5, 2023

kodinkat commented Jun 5, 2023

prykon commented Jun 5, 2023

corsacca commented Jun 6, 2023 • edited Loading

corsacca Jun 6, 2023

Choose a reason for hiding this comment

kodinkat commented Jun 6, 2023

prykon commented Jun 6, 2023

corsacca Jun 6, 2023

Choose a reason for hiding this comment

corsacca Jun 6, 2023

Choose a reason for hiding this comment

corsacca commented Jun 6, 2023

kodinkat commented Jun 7, 2023

prykon commented Jun 7, 2023 • edited Loading

kodinkat commented Jun 8, 2023

prykon commented Jun 8, 2023 • edited Loading

prykon commented Jun 9, 2023

kodinkat commented Jun 9, 2023

prykon commented Jun 9, 2023

corsacca commented Jun 9, 2023

prykon left a comment •

edited

Loading

kodinkat commented May 24, 2023 •

edited

Loading

corsacca commented Jun 6, 2023 •

edited

Loading

prykon commented Jun 7, 2023 •

edited

Loading

prykon commented Jun 8, 2023 •

edited

Loading