Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added Line Awesome icon font to on icon picker field #3342

Closed
wants to merge 3 commits into from
Closed

Added Line Awesome icon font to on icon picker field #3342

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
56e909a
Added line awesome icon font to icon picker field
promatik Nov 19, 2020
7d3cd49
Minor typo fix on material font css path
promatik Nov 19, 2020
32c2c49
Fix for line awesome, converted `fa` > `la` before save, and `la` > `…
promatik Nov 20, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 18 additions & 2 deletions src/resources/views/crud/fields/icon_picker.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,10 @@
$fontIconFilePath = asset('packages/bootstrap-iconpicker/icon-fonts/elusive-icons-2.0.0/css/elusive-icons.min.css');
break;
case 'meterialdesign':
$fontIconFilePath = asset('packages/bootstrap-iconpicker/icon-fonts/material-design-1.1.1/css)/material-design-iconic-font.min.css');
$fontIconFilePath = asset('packages/bootstrap-iconpicker/icon-fonts/material-design-1.1.1/css/material-design-iconic-font.min.css');
break;
case 'lineawesome':
$fontIconFilePath = asset('packages/line-awesome/dist/font-awesome-line-awesome/css/all.min.css');
break;
default:
$fontIconFilePath = asset('packages/bootstrap-iconpicker/icon-fonts/font-awesome-5.12.0-1/css/all.min.css');
Expand All @@ -32,6 +35,12 @@

$field['font_icon_file_path'] = $field['font_icon_file_path'] ?? $fontIconFilePath;

$value = old(square_brackets_to_dots($field['name'])) ?? $field['value'] ?? $field['default'] ?? '';

if($field['iconset'] === 'lineawesome') {
$value = preg_replace("/^la(.) la/", 'fa$1 fa', $value);
}
Comment on lines +40 to +42
Copy link
Member

Choose a reason for hiding this comment

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

Hmm i'm pretty sure this work, yes. But... if feels a bit like hardcoding it, doesn't it?

It makes me wonder - what happens with the other fonts? Metronic definitely doesn't use the "fa fa-x" syntax so... I'm weary of merging a solution that will make this field work one way for line-awesome and a different way for all other fields.

I think it'll make it more difficult to maintain down the line. And more difficult to read and understand.

So yes it's a solution 😀 But I don't think it's the solution we're looking for 😅

What if we fix this upstream? Any way we can do that? Please see my latest comment in the thread, just posted.


@endphp

@include('crud::fields.inc.wrapper_start')
Expand All @@ -45,7 +54,7 @@
name="{{ $field['name'] }}"
data-iconset="{{ $field['iconset'] }}"
data-init-function="bpFieldInitIconPickerElement"
value="{{ old(square_brackets_to_dots($field['name'])) ?? $field['value'] ?? $field['default'] ?? '' }}"
value="{{ $value }}"
@include('crud::fields.inc.attributes')
>
</div>
Expand Down Expand Up @@ -94,6 +103,13 @@ function bpFieldInitIconPickerElement(element) {
$($iconButton).iconpicker({
iconset: $iconset,
icon: $icon
})
.on('change', function(e){
if($iconset === 'lineawesome') {
let lineicon = e.icon.replace(/^fa(.) fa/g, 'la$1 la');
// Icon picker stops the propagation of the on change event, and dispatch it's own before changing the value --}}
setTimeout(() => element.val(lineicon), 100);
}
});

element.siblings('button[role=icon-selector]').on('change', function(e) {
Expand Down