mirror of
https://github.com/BetterSEQTA/BetterSEQTA-Plus.git
synced 2026-06-06 03:34:40 +00:00
feat: visual improvements to search
This commit is contained in:
@@ -322,11 +322,11 @@
|
|||||||
{#if result.type === 'command'}
|
{#if result.type === 'command'}
|
||||||
{@const staticItem = item as StaticCommandItem}
|
{@const staticItem = item as StaticCommandItem}
|
||||||
<button
|
<button
|
||||||
class="w-full flex items-center px-2 py-1.5 rounded-lg select-none cursor-pointer group transition-colors duration-100
|
class="w-full flex items-center px-2 py-1.5 rounded-lg select-none cursor-pointer group transition-colors duration-100 ring-0 dark:ring-zinc-600/50
|
||||||
{isSelected ? 'bg-zinc-900/5 dark:bg-white/10 text-zinc-900 dark:text-white' : 'hover:bg-zinc-500/5 dark:hover:bg-white/5 text-zinc-800 dark:text-zinc-200'}"
|
{isSelected ? 'bg-zinc-900/5 dark:bg-white/10 text-zinc-900 dark:text-white dark:ring-[1px] dark:shadow' : 'hover:bg-zinc-500/5 dark:hover:bg-white/5 text-zinc-800 dark:text-zinc-200'}"
|
||||||
onclick={() => executeItemAction(staticItem)}
|
onclick={() => executeItemAction(staticItem)}
|
||||||
>
|
>
|
||||||
<div class="flex-none w-8 h-8 text-xl font-IconFamily flex items-center justify-center {isSelected ? 'text-zinc-900 dark:text-white' : 'text-zinc-600 dark:text-zinc-400'}">{staticItem.icon}</div>
|
<div class="flex-none w-8 h-8 text-xl font-IconFamily flex items-center justify-center bg-gradient-to-br from-[#FA5D5D] to-[#DC2F30] rounded-md text-white">{staticItem.icon}</div>
|
||||||
<span class="ml-4 text-lg truncate">
|
<span class="ml-4 text-lg truncate">
|
||||||
<HighlightedText text={staticItem.text} term={searchTerm} matches={result.matches} />
|
<HighlightedText text={staticItem.text} term={searchTerm} matches={result.matches} />
|
||||||
</span>
|
</span>
|
||||||
@@ -348,7 +348,7 @@
|
|||||||
{:else}
|
{:else}
|
||||||
<button
|
<button
|
||||||
class="w-full flex flex-col px-2 py-1.5 rounded-lg select-none cursor-pointer group
|
class="w-full flex flex-col px-2 py-1.5 rounded-lg select-none cursor-pointer group
|
||||||
{isSelected ? 'bg-zinc-900/5 dark:bg-white/10 text-zinc-900 dark:text-white' : 'hover:bg-zinc-500/5 dark:hover:bg-white/5 text-zinc-800 dark:text-zinc-200'}"
|
{isSelected ? 'bg-zinc-900/5 dark:bg-white/10 text-zinc-900 dark:text-white dark:ring-[1px]' : 'hover:bg-zinc-500/5 dark:hover:bg-white/5 text-zinc-800 dark:text-zinc-200'}"
|
||||||
onclick={() => executeItemAction(dynamicItem)}
|
onclick={() => executeItemAction(dynamicItem)}
|
||||||
>
|
>
|
||||||
<div class="flex items-center w-full">
|
<div class="flex items-center w-full">
|
||||||
|
|||||||
@@ -13,12 +13,12 @@
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<button
|
<button
|
||||||
class="w-full flex flex-col px-2 py-1.5 rounded-lg select-none cursor-pointer group transition-colors duration-100
|
class="w-full flex flex-col px-2 py-1.5 rounded-lg select-none cursor-pointer group transition-colors duration-100 ring-0 dark:ring-zinc-600/50
|
||||||
{isSelected ? 'bg-zinc-900/5 dark:bg-white/10 text-zinc-900 dark:text-white' : 'hover:bg-zinc-500/5 dark:hover:bg-white/5 text-zinc-800 dark:text-zinc-200'}"
|
{isSelected ? 'bg-zinc-900/5 dark:bg-white/10 text-zinc-900 dark:text-white dark:ring-[1px] dark:shadow' : 'hover:bg-zinc-500/5 dark:hover:bg-white/5 text-zinc-800 dark:text-zinc-200'}"
|
||||||
onclick={onclick}
|
onclick={onclick}
|
||||||
>
|
>
|
||||||
<div class="flex items-center w-full">
|
<div class="flex items-center w-full">
|
||||||
<div class="flex-none w-8 h-8 text-xl font-IconFamily flex items-center justify-center {isSelected ? 'text-zinc-900 dark:text-white' : 'text-zinc-600 dark:text-zinc-400'}">{item.metadata?.icon || '\uebee'}</div>
|
<div class="flex-none w-8 h-8 text-xl font-IconFamily flex items-center justify-center bg-gradient-to-br from-[#59F675] to-[#1BC636] rounded-md text-white">{item.metadata?.icon || '\uebee'}</div>
|
||||||
<span class="ml-4 text-lg truncate">
|
<span class="ml-4 text-lg truncate">
|
||||||
<HighlightedText text={item.text} term={searchTerm} matches={matches} />
|
<HighlightedText text={item.text} term={searchTerm} matches={matches} />
|
||||||
</span>
|
</span>
|
||||||
|
|||||||
@@ -13,12 +13,12 @@
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<button
|
<button
|
||||||
class="w-full flex flex-col px-2 py-1.5 rounded-lg select-none cursor-pointer group transition-colors duration-100
|
class="w-full flex flex-col px-2 py-1.5 rounded-lg select-none cursor-pointer group transition-colors duration-100 ring-0 dark:ring-zinc-600/50
|
||||||
{isSelected ? 'bg-zinc-900/5 dark:bg-white/10 text-zinc-900 dark:text-white' : 'hover:bg-zinc-500/5 dark:hover:bg-white/5 text-zinc-800 dark:text-zinc-200'}"
|
{isSelected ? 'bg-zinc-900/5 dark:bg-white/10 text-zinc-900 dark:text-white dark:ring-[1px] dark:shadow' : 'hover:bg-zinc-500/5 dark:hover:bg-white/5 text-zinc-800 dark:text-zinc-200'}"
|
||||||
onclick={onclick}
|
onclick={onclick}
|
||||||
>
|
>
|
||||||
<div class="flex items-center w-full">
|
<div class="flex items-center w-full">
|
||||||
<div class="flex-none w-8 h-8 text-xl font-IconFamily flex items-center justify-center {isSelected ? 'text-zinc-900 dark:text-white' : 'text-zinc-600 dark:text-zinc-400'}">{item.metadata?.icon || '\uebe7'}</div>
|
<div class="flex-none w-8 h-8 text-xl font-IconFamily flex items-center justify-center text-white bg-gradient-to-br from-[#59aaf6] to-[#1b62c6] rounded-md">{item.metadata?.icon || '\uebe7'}</div>
|
||||||
<span class="ml-4 text-lg truncate">
|
<span class="ml-4 text-lg truncate">
|
||||||
<HighlightedText text={item.text} term={searchTerm} matches={matches} />
|
<HighlightedText text={item.text} term={searchTerm} matches={matches} />
|
||||||
</span>
|
</span>
|
||||||
|
|||||||
@@ -13,18 +13,18 @@ import type { IndexItem } from '../../indexing/types';
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<button
|
<button
|
||||||
class="w-full flex flex-col px-2 py-1.5 rounded-lg select-none cursor-pointer group transition-colors duration-100
|
class="w-full flex flex-col px-2 py-1.5 rounded-lg select-none cursor-pointer group transition-colors duration-100 ring-0 dark:ring-zinc-600/50
|
||||||
{isSelected ? 'bg-zinc-900/5 dark:bg-white/10 text-zinc-900 dark:text-white' : 'hover:bg-zinc-500/5 dark:hover:bg-white/5 text-zinc-800 dark:text-zinc-200'}"
|
{isSelected ? 'bg-zinc-900/5 dark:bg-white/10 text-zinc-900 dark:text-white dark:ring-[1px] dark:shadow' : 'hover:bg-zinc-500/5 dark:hover:bg-white/5 text-zinc-800 dark:text-zinc-200'}"
|
||||||
onclick={onclick}
|
onclick={onclick}
|
||||||
>
|
>
|
||||||
<div class="flex items-center w-full {item.metadata.isActive ? 'opacity-100' : 'opacity-70'}">
|
<div class="flex items-center w-full">
|
||||||
<div class="flex-none w-8 h-8 text-xl font-IconFamily flex items-center justify-center {isSelected ? 'text-zinc-900 dark:text-white' : 'text-zinc-600 dark:text-zinc-400'}">
|
<div class="flex-none w-8 h-8 text-xl font-IconFamily flex items-center justify-center text-white {item.metadata?.type === 'assessments' ? 'bg-gradient-to-br from-[#fa915d] to-[#dc6c2f] rounded-md' : 'bg-gradient-to-br from-[#4FBBFE] to-[#2090F3] rounded-md'} {item.metadata.isActive ? 'opacity-100' : 'opacity-80'}">
|
||||||
{item.metadata?.type === 'assessments' ? '\ueac3' : '\ueb4d'}
|
{item.metadata?.type === 'assessments' ? '\ueac3' : '\ueb4d'}
|
||||||
</div>
|
</div>
|
||||||
<span class="ml-4 text-lg truncate">
|
<span class="ml-4 text-lg truncate {item.metadata.isActive ? 'opacity-100' : 'opacity-70'}">
|
||||||
<HighlightedText text={item.text} term={searchTerm} matches={matches} />
|
<HighlightedText text={item.text} term={searchTerm} matches={matches} />
|
||||||
</span>
|
</span>
|
||||||
<span class="flex-none ml-auto text-xs text-zinc-500 dark:text-zinc-400">
|
<span class="flex-none ml-auto text-xs text-zinc-500 dark:text-zinc-400 {item.metadata.isActive ? 'opacity-100' : 'opacity-70'}">
|
||||||
{item.metadata?.subjectCode}
|
{item.metadata?.subjectCode}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user