Add complex icon picker (close #13)
parent
079194b68e
commit
42485a9e95
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,33 @@
|
||||
<?php
|
||||
/*
|
||||
* This Source Code Form is subject to the terms of the Mozilla Public
|
||||
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
*/
|
||||
|
||||
include_once __DIR__ . "/fontawesome5_iconlist.php";
|
||||
?>
|
||||
<div class="card">
|
||||
<div class="input-group" id="iconsearchrow">
|
||||
<div class="input-group-prepend px-2">
|
||||
<span class="input-group-text"><i class="fas fa-search"></i></span>
|
||||
</div>
|
||||
<input type="text" id="icon_search" class="form-control" />
|
||||
</div>
|
||||
<div class="icon_bin">
|
||||
<?php
|
||||
foreach ($FONTAWESOME as $fa => $info) {
|
||||
?>
|
||||
<label title="<?php echo $info["label"]; ?>" data-search="<?php echo implode(" ", $info["search"]) . ' ' . strtolower($info["label"]); ?>" data-icon="<?php echo $fa; ?>">
|
||||
<input type="radio" class="iconselector_radio" name="selectedicon" value="<?php echo $fa; ?>" />
|
||||
<div class="card icon">
|
||||
<div class="card-body m-0 p-1">
|
||||
<span class="<?php echo $fa; ?> fa-fw"></span>
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
<?php
|
||||
}
|
||||
?>
|
||||
</div>
|
||||
</div>
|
@ -0,0 +1,50 @@
|
||||
/*
|
||||
This Source Code Form is subject to the terms of the Mozilla Public
|
||||
License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
*/
|
||||
.icon_bin {
|
||||
min-height: 100px;
|
||||
height: 30vh;
|
||||
overflow-y: scroll;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.icon_bin label input[type=radio] {
|
||||
visibility: hidden;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.icon_bin label input[type=radio].form-check-input {
|
||||
visibility: visible;
|
||||
position: inherit;
|
||||
}
|
||||
|
||||
.icon_bin label input[type=radio] + .icon {
|
||||
cursor: pointer;
|
||||
border: 3px solid white;
|
||||
margin: 2px;
|
||||
}
|
||||
|
||||
.icon_bin label input[type=radio]:checked + .icon {
|
||||
transform: scale(1.5);
|
||||
z-index: 10;
|
||||
box-shadow: 0 0 3px black;
|
||||
}
|
||||
|
||||
.icon_bin label .icon:hover {
|
||||
transform: scale(2);
|
||||
z-index: 11;
|
||||
}
|
||||
|
||||
.icon_bin label {
|
||||
max-width: 50px;
|
||||
}
|
||||
|
||||
#iconsearchrow {
|
||||
box-shadow: inset 0 -1px 0 #ddd;
|
||||
}
|
||||
|
||||
#iconsearchrow:focus-within {
|
||||
box-shadow: inset 0 -2px 0 #2196F3;
|
||||
}
|
@ -0,0 +1,26 @@
|
||||
/*
|
||||
* This Source Code Form is subject to the terms of the Mozilla Public
|
||||
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
*/
|
||||
|
||||
function initIconSearch() {
|
||||
$("#icon_search").keyup(function () {
|
||||
var q = $("#icon_search").val().toLowerCase();
|
||||
var icons = $(".icon_bin label");
|
||||
if (q == "") {
|
||||
icons.removeClass("d-none");
|
||||
} else {
|
||||
icons.addClass("d-none");
|
||||
var matches = icons.filter(function () {
|
||||
return $(this).data("search").includes(q);
|
||||
});
|
||||
matches.removeClass("d-none");
|
||||
}
|
||||
});
|
||||
|
||||
$(".iconselector_radio").change(function () {
|
||||
console.log($(this).val());
|
||||
$("#selectedicon").html("<i class=\"" + $(this).val() + " fa-fw\"></i>");
|
||||
});
|
||||
}
|
Loading…
Reference in New Issue