Tooloop/Caramel-CRM
2
0
Fork 0
Code Issues 61 Pull Requests Projects 3 Releases Wiki Activity

Overall design work

Browse Source
This commit is contained in:
Daniel Stock
2025-11-11 11:49:38 +01:00
parent 2f9397abea
commit 63202b0845
12 changed files with 101 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/js/components/ui/button/index.ts
+1 -1
View File
@@ -12,7 +12,7 @@ export const buttonVariants = cva(
action:
'bg-blue-600 border-b-1 border-t-1 border-t-blue-400 border-b-blue-800 active:bg-blue-700 hover:bg-blue-500 text-white',
destructive:
'bg-destructive dark:bg-red-700 text-white border-b-1 border-t-1 border-t-red-200 border-b-red-700 dark:border-t-red-400 dark:border-b-red-800 hover:bg-red-600 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40',
'bg-destructive dark:bg-red-700 text-white border-b-1 border-t-1 border-t-red-200 border-b-red-700 dark:border-t-red-400 dark:border-b-red-800 hover:bg-red-600 hover:bg-red-600 active:bg-red-500 active:inset-shadow-red-950 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40',
outline:
'border bg-background hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
secondary:
resources/js/components/ui/send-mail-dialog/index.ts
+1
View File
@@ -0,0 +1 @@
export { default as SendMailDialog } from "./SendMailDialog.vue"
resources/js/components/ui/sidebar/Sidebar.vue
+3 -3
View File
@@ -63,7 +63,7 @@ const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
<!-- This is what handles the sidebar gap on desktop -->
<div
:class="cn(
'relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear',
'relative w-(--sidebar-width) bg-transparent transition-[width] duration-100 ease-linear',
'group-data-[collapsible=offcanvas]:w-0',
'group-data-[side=right]:rotate-180',
variant === 'floating' || variant === 'inset'
@@ -73,14 +73,14 @@ const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
/>
<div
:class="cn(
'fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex',
'fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-100 ease-linear md:flex',
side === 'left'
? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'
: 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',
// Adjust the padding for floating and inset variants.
variant === 'floating' || variant === 'inset'
? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]'
: 'group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l',
: 'p-4 pr-2 group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-0 group-data-[side=right]:border-0',
props.class,
)"
v-bind="$attrs"
resources/js/components/ui/sidebar/SidebarProvider.vue
+4 -1
View File
@@ -66,6 +66,9 @@ provideSidebarContext({
<template>
<TooltipProvider :delay-duration="0">
<!-- :class="cn('group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full', props.class)" -->
<!-- :class="cn('group/sidebar-wrapper has-data-[variant=inset]:bg-linear-45 from-orange-200 to-orange-300 flex min-h-svh w-full', props.class)" -->
<!-- linear-[45deg,rgb(235,217,178)_0%,_rgb(237,183,83)_100%] -->
<div
data-slot="sidebar-wrapper"
:style="{
@@ -74,7 +77,7 @@ provideSidebarContext({
}"
:class="cn('group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full', props.class)"
v-bind="$attrs"
>
>
<slot />
</div>
</TooltipProvider>
resources/js/components/ui/sidebar/utils.ts
+2 -2
View File
@@ -3,9 +3,9 @@ import { createContext } from 'reka-ui'
export const SIDEBAR_COOKIE_NAME = 'sidebar_state'
export const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
export const SIDEBAR_WIDTH = '16rem'
export const SIDEBAR_WIDTH = '14rem'
export const SIDEBAR_WIDTH_MOBILE = '18rem'
export const SIDEBAR_WIDTH_ICON = '3rem'
export const SIDEBAR_WIDTH_ICON = '4rem'
export const SIDEBAR_KEYBOARD_SHORTCUT = 'b'
export const [useSidebar, provideSidebarContext] = createContext<{
resources/js/components/ui/status-badge/index.ts
+14 -9
View File
@@ -4,22 +4,22 @@ import { cva } from "class-variance-authority"
export { default as StatusBadge } from "./StatusBadge.vue"
export const statusBadgeVariants = cva(
"shadow inline-flex items-center justify-center aspect-1/1 p-1 lg:aspect-auto lg:px-2 lg:py-0.5 rounded-full lg:rounded-md border text-xs font-medium lg:w-full whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
"inline-flex items-center justify-center bg-gray-50 dark:bg-neutral-700 border-1 aspect-1/1 p-1 lg:aspect-auto lg:px-2 lg:py-0.5 rounded-full lg:rounded-sm text-xs lg:w-full whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
{
variants: {
variant: {
draft:
"text-foreground bg-slate-100 dark:bg-zinc-500 [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
"border-dashed text-muted-foreground dark:bg-transparent",
issued:
"border-transparent bg-sky-400 dark:bg-sky-700 [a&]:hover:bg-primary/90",
"bg-transparent border-sky-200 text-sky-600 dark:bg-sky-800 dark:text-sky-300 dark:border-0",
paid:
"border-transparent bg-lime-500 dark:bg-lime-700 text-lime-950 dark:text-lime-200 [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40",
"border-none bg-lime-400 dark:bg-lime-900 dark:text-lime-400",
due:
"border-transparent bg-amber-300 text-amber-900 [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40",
"font-bold border-none bg-amber-300 text-amber-800 dark:bg-amber-900 dark:text-amber-500",
reminded:
"border-transparent bg-destructive text-destructive-foreground [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40",
"font-bold border-none bg-red-500 text-red-100 dark:bg-red-900 dark:text-red-200 dark:font-normal",
cancelled:
"text-foreground bg-slate-400 dark:bg-zinc-700 [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
"bg-background text-foreground",
},
size: {
@@ -45,7 +45,12 @@ export const statusBadgeLabels: { [key: string]: string } = {
cancelled: 'Storniert'
}
export function statusBadgeTextColor(status: string): string {
export function statusTextStyle(status: string): string {
if (status === 'draft') return 'text-muted-foreground'
if (status === 'due') return 'text-amber-600'
if (status === 'reminded') return 'text-red-600 dark:text-red-400'
if (status === 'cancelled') return 'line-through text-muted-foreground decoration-gray-300'
return (['due', 'reminded'].includes(status)) ?
'var(--color-destructive)' :
''
@@ -61,5 +66,5 @@ export const castToStatusVariant = (status: string): StatusBadgeVariants['varian
'cancelled': 'cancelled',
};
return statusMapping[status] || 'draft'; // 'draft' als Standardwert
return statusMapping[status] || 'draft';
};