ui changes

This commit is contained in:
MuslemRahimi 2024-12-08 18:29:59 +01:00
parent c951bda884
commit 1830e7894d

View File

@ -1854,7 +1854,7 @@ const handleKeyDown = (event) => {
function changeRuleCondition(name: string, state: string) { function changeRuleCondition(name: string, state: string) {
ruleName = name; ruleName = name;
ruleCondition[ruleName] = state; ruleCondition[ruleName] = state?.toLowerCase();
} }
let checkedItems = new Map( let checkedItems = new Map(
@ -2703,6 +2703,8 @@ const handleKeyDown = (event) => {
{:else} {:else}
{ruleCondition[row?.rule] !== undefined {ruleCondition[row?.rule] !== undefined
? ruleCondition[row?.rule] ? ruleCondition[row?.rule]
?.replace("under", "Under")
?.replace("over", "Over")
: ""} : ""}
{valueMappings[row?.rule]} {valueMappings[row?.rule]}
{/if} {/if}
@ -2732,41 +2734,53 @@ const handleKeyDown = (event) => {
<div <div
class="flex items-center justify-start gap-x-1" class="flex items-center justify-start gap-x-1"
> >
<div <!--Start Dropdown for Condition-->
class="relative inline-block flex flex-row items-center justify-center" <div class="relative inline-block text-left">
> <DropdownMenu.Root>
<label <DropdownMenu.Trigger asChild let:builder
on:click={() => ><Button
changeRuleCondition(row?.rule, "under")} builders={[builder]}
class="cursor-pointer flex flex-row mr-2 justify-center items-center" class="w-fit -mt-1 -ml-2 bg-[#09090B] flex flex-row justify-between items-center text-white"
> >
<input <span
type="radio" class="truncate ml-2 text-sm sm:text-[1rem]"
class="radio ring-0 checked:bg-[#fff] bg-[#09090B] border border-gray-600 mr-2" >
checked={ruleCondition[row?.rule] === {ruleCondition[ruleName]
"under"} ?.replace("under", "Under")
name={row?.rule} ?.replace("over", "Over")}
/> </span>
<span class="label-text text-white" <svg
>Under</span class="-mr-1 ml-1 h-5 w-5 xs:ml-2 !ml-0 sm:ml-0 inline-block"
> viewBox="0 0 20 20"
</label> fill="currentColor"
<label style="max-width:40px"
on:click={() => aria-hidden="true"
changeRuleCondition(row?.rule, "over")} ><path
class="cursor-pointer flex flex-row ml-2 justify-center items-center" fill-rule="evenodd"
> d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
<input clip-rule="evenodd"
type="radio" ></path></svg
class="radio checked:bg-[#fff] bg-[#09090B] border border-gray-600 mr-2" >
checked={ruleCondition[row?.rule] === </Button>
"over"} </DropdownMenu.Trigger>
name={row?.rule} <DropdownMenu.Content>
/> <DropdownMenu.Group>
<span class="label-text text-white">Over</span {#each ["Over", "Under"] as item}
> <DropdownMenu.Item
</label> on:click={() =>
changeRuleCondition(
row?.rule,
item,
)}
class="cursor-pointer text-[1rem] font-normal"
>{item}</DropdownMenu.Item
>
{/each}
</DropdownMenu.Group>
</DropdownMenu.Content>
</DropdownMenu.Root>
</div> </div>
<!--End Dropdown for Condition-->
</div> </div>
</DropdownMenu.Label> </DropdownMenu.Label>
{:else} {:else}
@ -2808,6 +2822,8 @@ const handleKeyDown = (event) => {
> >
{ruleCondition[row?.rule] !== undefined {ruleCondition[row?.rule] !== undefined
? ruleCondition[row?.rule] ? ruleCondition[row?.rule]
?.replace("under", "Under")
?.replace("over", "Over")
: ""} : ""}
{newValue} {newValue}
</button> </button>