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