server icon indicating copy to clipboard operation
server copied to clipboard

Enhancement/hashtype autocomplete

Open robinduerhager opened this issue 2 years ago • 4 comments

Closes #752 . Adds Autocompletion for Hashtypes via Select2 JQuery Plugin.

Sadly, the Select2 Bootstrap Theme has not been updated since 5 years, so the styling is a bit outdated / different than the rest of the project, but it's ok imo.

Animation

robinduerhager avatar Jun 08 '22 00:06 robinduerhager

There is actually a Bootstrap 5 theme for select2.

robinduerhager avatar Jun 08 '22 11:06 robinduerhager

Test the code, seems to work. Noticed that the select2 suggestions bar does not scale and has same static width? See attached screenshot

image

Also noted from @s3inlc the select2 doesn't seem to be compatible with darkmode.

image

zyronix avatar Jun 29 '22 18:06 zyronix

https://user-images.githubusercontent.com/18482238/177008178-383a7854-9202-4919-a647-ffb29775a0c0.mp4

Sorry, i accidently rendered this as an mp4 instead of a gif 😅 .

I added a few media breakpoints for the sizing of the select in head.template.html to make this responsive. I also changed some scss variables to integrate some form of dark mode (i only changed them so at least the single select mode looks like a dark mode).

In case you wonder, here are the variables and values i changed in the select2-bootstrap5-theme project:

// src/_variables.scss

$s2bs5-color:                            #aaaaaa !default;
$s2bs5-placeholder-color:        #aaaaaa !default;
$s2bs5-bg:                                #32383e !default;

$s2bs5-border-color:                #1d2227 !default;
$s2bs5-box-shadow:                #2c3035 !default;

$s2bs5-indicator:                url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23cecfd0' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !default;

$s2bs5-focus-border-color:       #1d2227 !default;
$s2bs5-focus-box-shadow:         0 0 0 .2rem rgba(58, 63, 68, .25) !default;

I will commit a changelog entry and if you are good with the results I think this can be merged :).

robinduerhager avatar Jul 02 '22 16:07 robinduerhager

Thanks, looks good, but have to test it a bit more; expecting to add it with the release we are currently working on.

zyronix avatar Aug 02 '22 18:08 zyronix

I tested it a bit more, looks good to us, so I'll merge it. Thanks for the contribution and updates.

s3inlc avatar Aug 19 '22 12:08 s3inlc