adalal/solidtime
1
0
Fork 0
mirror of https://github.com/solidtime-io/solidtime.git synced 2026-08-08 00:02:15 +01:00
Code Issues Packages Projects Releases Wiki Activity

improve focus state styling

Browse Source
This commit is contained in:
Gregor Vostrak
2025-01-27 14:12:56 +01:00
parent dce608e403
commit b783ea9ecd
27 changed files with 319 additions and 178 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
resources/js/Components/Common/Report/ReportTableRow.vue
View File

@@ -87,7 +87,7 @@ async function deleteReport() {
<span v-else>Copied!</span>
</SecondaryButton>
<button
class="outline-0 focus-visible:ring-2 w-6 h-6 flex items-center justify-center rounded focus-visible:ring-white/80"
class="outline-0 focus-visible:ring-2 w-6 h-6 flex items-center justify-center rounded focus-visible:ring-ring"
@click="openSharableLink">
<ArrowTopRightOnSquareIcon
class="w-4 text-text-tertiary hover:text-text-secondary transition"></ArrowTopRightOnSquareIcon>

2
resources/js/Components/Common/Reporting/ReportingExportModal.vue
View File

@@ -25,7 +25,7 @@ function downloadCurrentExport() {
@close="showExportModal = false"
:show="showExportModal">
<button
class="text-text-tertiary w-6 mx-auto absolute focus-visible:outline-none focus-visible:ring-2 rounded-full focus-visible:ring-white/80 transition focus-visible:text-text-primary hover:text-text-primary top-2 right-2">
class="text-text-tertiary w-6 mx-auto absolute focus-visible:outline-none focus-visible:ring-2 rounded-full focus-visible:ring-ring transition focus-visible:text-text-primary hover:text-text-primary top-2 right-2">
<XMarkIcon @click="showExportModal = false"></XMarkIcon>
</button>
<div class="text-center text-text-primary py-6">

6
resources/js/Pages/ReportingDetailed.vue
View File

@@ -485,13 +485,13 @@ async function downloadExport(format: ExportFormat) {
</template>
<style lang="postcss">
.navigation-item {
@apply bg-quaternary h-8 w-8 flex items-center justify-center rounded border border-border-primary text-text-tertiary hover:text-text-primary transition cursor-pointer hover:border-border-secondary hover:bg-secondary focus-visible:text-text-primary focus-visible:outline-0 focus-visible:ring-2 focus-visible:ring-white/80;
@apply bg-quaternary h-8 w-8 flex items-center justify-center rounded border border-border-primary text-text-tertiary hover:text-text-primary transition cursor-pointer hover:border-border-secondary hover:bg-secondary focus-visible:text-text-primary focus-visible:outline-0 focus-visible:ring-2 focus-visible:ring-ring;
}
.pagination-item {
@apply bg-secondary h-8 w-8 flex items-center justify-center rounded border border-border-tertiary text-text-secondary hover:text-text-primary transition cursor-pointer hover:border-border-secondary hover:bg-secondary focus-visible:text-text-primary focus-visible:outline-0 focus-visible:ring-2 focus-visible:ring-white/80;
@apply bg-secondary h-8 w-8 flex items-center justify-center rounded border border-border-tertiary text-text-secondary hover:text-text-primary transition cursor-pointer hover:border-border-secondary hover:bg-secondary focus-visible:text-text-primary focus-visible:outline-0 focus-visible:ring-2 focus-visible:ring-ring;
}
.pagination-item[data-selected] {
@apply text-white bg-accent-300/10 border border-accent-300/20 rounded-md font-medium hover:bg-accent-300/20 active:bg-accent-300/20 outline-0 focus-visible:ring-2 focus:ring-white/80 transition ease-in-out duration-150;
@apply text-white bg-accent-300/10 border border-accent-300/20 rounded-md font-medium hover:bg-accent-300/20 active:bg-accent-300/20 outline-0 focus-visible:ring-2 focus:ring-ring transition ease-in-out duration-150;
}
</style>

6
resources/js/Pages/ReportingShared.vue
View File

@@ -174,13 +174,13 @@ watch(currentPage, () => {
</template>
<style lang="postcss">
.navigation-item {
@apply bg-quaternary h-8 w-8 flex items-center justify-center rounded border border-border-primary text-text-tertiary hover:text-text-primary transition cursor-pointer hover:border-border-secondary hover:bg-secondary focus-visible:text-text-primary focus-visible:outline-0 focus-visible:ring-2 focus-visible:ring-white/80;
@apply bg-quaternary h-8 w-8 flex items-center justify-center rounded border border-border-primary text-text-tertiary hover:text-text-primary transition cursor-pointer hover:border-border-secondary hover:bg-secondary focus-visible:text-text-primary focus-visible:outline-0 focus-visible:ring-2 focus-visible:ring-ring;
}
.pagination-item {
@apply bg-secondary h-8 w-8 flex items-center justify-center rounded border border-border-tertiary text-text-secondary hover:text-text-primary transition cursor-pointer hover:border-border-secondary hover:bg-secondary focus-visible:text-text-primary focus-visible:outline-0 focus-visible:ring-2 focus-visible:ring-white/80;
@apply bg-secondary h-8 w-8 flex items-center justify-center rounded border border-border-tertiary text-text-secondary hover:text-text-primary transition cursor-pointer hover:border-border-secondary hover:bg-secondary focus-visible:text-text-primary focus-visible:outline-0 focus-visible:ring-2 focus-visible:ring-ring;
}
.pagination-item[data-selected] {
@apply text-white bg-accent-300/10 border border-accent-300/20 rounded-md font-medium hover:bg-accent-300/20 active:bg-accent-300/20 outline-0 focus-visible:ring-2 focus:ring-white/80 transition ease-in-out duration-150;
@apply text-white bg-accent-300/10 border border-accent-300/20 rounded-md font-medium hover:bg-accent-300/20 active:bg-accent-300/20 outline-0 focus-visible:ring-2 focus:ring-ring transition ease-in-out duration-150;
}
</style>

10
resources/js/packages/ui/src/Badge.vue
View File

@@ -30,6 +30,13 @@ const borderClasses = computed(() => {
}
return '';
});
const tagClasses = computed(() => {
if (props.tag === 'button') {
return 'hover:bg-tertiary';
}
return '';
});
</script>
<template>
@@ -37,9 +44,10 @@ const borderClasses = computed(() => {
:is="tag"
:class="
twMerge(
tagClasses,
badgeClasses[size],
borderClasses,
'rounded inline-flex items-center font-semibold text-white disabled:text-text-quaternary outline-0 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/80',
'rounded transition inline-flex items-center font-semibold text-white disabled:text-text-quaternary outline-0 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
props.class
)
">

2
resources/js/packages/ui/src/Buttons/PrimaryButton.vue
View File

@@ -21,7 +21,7 @@ const props = withDefaults(
<button
:type="type"
:disabled="loading"
class="inline-flex items-center px-2 sm:px-3 py-1 sm:py-2 bg-accent-300/10 border border-accent-300/20 rounded-md font-medium text-xs sm:text-sm text-white hover:bg-accent-300/20 active:bg-accent-300/20 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 transition ease-in-out duration-150">
class="inline-flex items-center px-2 sm:px-3 py-1 sm:py-2 bg-accent-300/10 border border-accent-300/20 rounded-md font-medium text-xs sm:text-sm text-white hover:bg-accent-300/20 active:bg-accent-300/20 focus:outline-none focus-visible:ring-2 focus-visible:border-transparent focus-visible:ring-ring transition ease-in-out duration-150">
<span
:class="
twMerge('flex items-center ', props.icon ? 'space-x-1.5' : '')

2
resources/js/packages/ui/src/Buttons/SecondaryButton.vue
View File

@@ -31,7 +31,7 @@ const sizeClasses = {
:disabled="loading"
:class="
twMerge(
'bg-button-secondary-background border border-button-secondary-border hover:bg-button-secondary-background-hover shadow-sm transition text-white rounded-lg font-semibold inline-flex items-center space-x-1.5 focus-visible:border-input-border-active focus:outline-none focus:ring-0 disabled:opacity-25 ease-in-out',
'bg-button-secondary-background border border-button-secondary-border hover:bg-button-secondary-background-hover shadow-sm transition text-white rounded-lg font-semibold inline-flex items-center space-x-1.5 focus-visible:outline-none focus-visible:border-transparent focus-visible:ring-2 focus-visible:ring-ring focus:border-transparent disabled:opacity-25 ease-in-out',
sizeClasses[props.size],
props.class
)

4
resources/js/packages/ui/src/GroupedItemsCountButton.vue
View File

@@ -17,7 +17,7 @@ const expandedStatusClasses = computed(() => {
if (props.expanded) {
return 'border-card-border border bg-card-background-active text-white';
}
return 'border-card-border border bg-card-background text-muted';
return 'border-card-border border bg-card-background hover:bg-card-background-active hover:text-text-primary transition text-muted';
});
</script>
@@ -25,7 +25,7 @@ const expandedStatusClasses = computed(() => {
<button
:class="
twMerge(
'font-medium rounded flex items-center transition justify-center',
'font-medium rounded flex items-center transition justify-center focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:border-transparent',
expandedStatusClasses,
props.size
)

4
resources/js/packages/ui/src/Input/BillableToggleButton.vue
View File

@@ -35,7 +35,7 @@ const iconSizeClasses = computed(() => {
});
const iconSizeWrapperClasses =
props.size === 'small' ? 'w-6 sm:w-8 h-6 sm:h-8' : 'w-11 h-11';
props.size === 'small' ? 'w-6 sm:w-8 h-6 sm:h-8' : 'w-10 h-10';
</script>
<template>
@@ -45,7 +45,7 @@ const iconSizeWrapperClasses =
twMerge(
iconColorClasses,
iconSizeWrapperClasses,
'flex-shrink-0 ring-0 focus:outline-none focus:ring-0 transition focus:bg-card-background-separator hover:bg-card-background-separator rounded-full flex items-center justify-center'
'flex-shrink-0 ring-0 focus:outline-none focus-visible:ring-2 focus-visible:ring-ring transition focus:bg-card-background-separator hover:bg-card-background-separator rounded-full flex items-center justify-center'
)
">
<BillableIcon :class="iconSizeClasses"></BillableIcon>

2
resources/js/packages/ui/src/Input/Checkbox.vue
View File

@@ -35,5 +35,5 @@ const proxyChecked = computed({
type="checkbox"
:id="id"
:value="value"
class="h-4 w-4 rounded bg-card-background border-input-border text-accent-500/80 focus:ring-accent-500/80" />
class="h-4 w-4 rounded bg-card-background border-input-border text-accent-500/80 focus:outline-none focus:ring-ring/50 focus-visible:outline-none focus-visible:ring-ring/50" />
</template>

2
resources/js/packages/ui/src/Input/TextInput.vue
View File

@@ -24,7 +24,7 @@ const model = defineModel();
ref="input"
:class="
twMerge(
'border-input-border border bg-input-background text-white focus:ring-input-border-active focus:ring-0 focus-visible:border-input-border-active rounded-md shadow-sm',
'border-input-border border bg-input-background text-white focus-visible:ring-2 focus-visible:ring-ring focus-visible:border-transparent rounded-md shadow-sm',
props.class
)
"

119
resources/js/packages/ui/src/Input/TimePickerSimple.vue Normal file
View File

@@ -0,0 +1,119 @@
<script setup lang="ts">
import { ref, watch } from 'vue';
import { getLocalizedDayJs } from '@/packages/ui/src/utils/time';
import { useFocus } from '@vueuse/core';
import { TextInput } from '@/packages/ui/src';
import { twMerge } from 'tailwind-merge';
// This has to be a localized timestamp, not UTC
const model = defineModel<string | null>({
default: null,
});
const props = withDefaults(
defineProps<{
size: 'base' | 'large';
focus: boolean;
}>(),
{
size: 'base',
focus: false,
}
);
function updateTime(event: Event) {
const target = event.target as HTMLInputElement;
const newValue = target.value.trim();
if (newValue.split(':').length === 2) {
const [hours, minutes] = newValue.split(':');
if (!isNaN(parseInt(hours)) && !isNaN(parseInt(minutes))) {
model.value = getLocalizedDayJs(model.value)
.set('hours', Math.min(parseInt(hours), 23))
.set('minutes', Math.min(parseInt(minutes), 59))
.format();
emit('changed', model.value);
}
}
// check if input is only numbers
else if (/^\d+$/.test(newValue)) {
if (newValue.length === 4) {
// parse 1300 to 13:00
const [hours, minutes] = [
newValue.slice(0, 2),
newValue.slice(2, 4),
];
model.value = getLocalizedDayJs(model.value)
.set('hours', Math.min(parseInt(hours), 23))
.set('minutes', Math.min(parseInt(minutes), 59))
.format();
emit('changed', model.value);
} else if (newValue.length === 3) {
// parse 130 to 01:30
const [hours, minutes] = [
newValue.slice(0, 1),
newValue.slice(1, 3),
];
model.value = getLocalizedDayJs(model.value)
.set('hours', Math.min(parseInt(hours), 23))
.set('minutes', Math.min(parseInt(minutes), 59))
.format();
emit('changed', model.value);
} else if (newValue.length === 2) {
// parse 13 to 13:00
model.value = getLocalizedDayJs(model.value)
.set('hours', Math.min(parseInt(newValue), 23))
.set('minutes', 0)
.format();
emit('changed', model.value);
} else if (newValue.length === 1) {
// parse 1 to 01:00
model.value = getLocalizedDayJs(model.value)
.set('hours', Math.min(parseInt(newValue), 23))
.set('minutes', 0)
.format();
emit('changed', model.value);
}
}
inputValue.value = getLocalizedDayJs(model.value).format('HH:mm');
}
watch(model, (value) => {
inputValue.value = value ? getLocalizedDayJs(value).format('HH:mm') : null;
});
const timeInput = ref<HTMLInputElement | null>(null);
const emit = defineEmits(['changed']);
useFocus(timeInput, { initialValue: props.focus });
const inputValue = ref(
model.value ? getLocalizedDayJs(model.value).format('HH:mm') : null
);
const open = ref(false);
</script>
<template>
<TextInput
v-bind="$attrs"
v-model="inputValue"
ref="timeInput"
:class="
twMerge('text-center w-24 px-3 py-2', size === 'large' && 'w-28')
"
@blur="updateTime"
@keydown.enter="
updateTime($event);
open = false;
"
@keydown.tab="open = false"
@focus="($event.target as HTMLInputElement).select()"
@mouseup="($event.target as HTMLInputElement).select()"
@click="($event.target as HTMLInputElement).select()"
@pointerup="($event.target as HTMLInputElement).select()"
@focusin="open = true"
data-testid="time_picker_input"
type="text" />
</template>
<style scoped></style>

14
resources/js/packages/ui/src/Input/TimeRangeSelector.vue
View File

@@ -1,6 +1,5 @@
<script setup lang="ts">
import { defineProps, ref, watch } from 'vue';
import TimePicker from '@/packages/ui/src/Input/TimePicker.vue';
import { useFocusWithin } from '@vueuse/core';
import DatePicker from '@/packages/ui/src/Input/DatePicker.vue';
import {
@@ -8,6 +7,7 @@ import {
getLocalizedDayJs,
} from '@/packages/ui/src/utils/time';
import dayjs from 'dayjs';
import TimePickerSimple from '@/packages/ui/src/Input/TimePickerSimple.vue';
const props = defineProps<{
start: string;
@@ -16,7 +16,7 @@ const props = defineProps<{
}>();
// The timestamps for the changed event are UTC
const emit = defineEmits(['changed']);
const emit = defineEmits(['changed', 'close']);
const tempStart = ref(
props.start ? getLocalizedDayJs(props.start).format() : dayjs().format()
@@ -58,24 +58,26 @@ watch(focused, (newValue, oldValue) => {
<div class="px-2">
<div class="font-bold text-white text-sm pb-2">Start</div>
<div class="space-y-2">
<TimePicker
<TimePickerSimple
data-testid="time_entry_range_start"
tabindex="0"
:focus
@changed="updateTimeEntry"
v-model="tempStart"></TimePicker>
v-model="tempStart"></TimePickerSimple>
<DatePicker
class="text-xs text-text-tertiary max-w-24 px-1.5 py-1.5"
@changed="updateTimeEntry"
@blur.stop.prevent="emit('close')"
v-model="tempStart"></DatePicker>
</div>
</div>
<div class="px-2">
<div class="font-bold text-white text-sm pb-2">End</div>
<div v-if="tempEnd !== null" class="space-y-2">
<TimePicker
<TimePickerSimple
data-testid="time_entry_range_end"
@changed="updateTimeEntry"
v-model="tempEnd"></TimePicker>
v-model="tempEnd"></TimePickerSimple>
<DatePicker
class="text-xs text-text-tertiary max-w-24 px-1.5 py-1.5"
@changed="updateTimeEntry"

4
resources/js/packages/ui/src/MoreOptionsDropdown.vue
View File

@@ -10,10 +10,10 @@ defineProps<{
<Dropdown align="bottom-end">
<template #trigger>
<button
class="focus-visible:outline-none focus-visible:bg-card-background rounded-full focus-visible:ring-1 focus-visible:ring-input-border-active focus-visible:opacity-100 hover:bg-card-background group-hover:opacity-100 opacity-20 transition-opacity text-muted"
class="focus-visible:outline-none focus-visible:bg-card-background rounded-full focus-visible:ring-2 focus-visible:ring-ring focus-visible:opacity-100 hover:bg-card-background group-hover:opacity-100 opacity-20 transition-opacity text-muted"
:aria-label="label">
<svg
class="h-10 w-10 p-2 rounded-full"
class="h-8 w-8 p-1 rounded-full"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg">
<path

6
resources/js/packages/ui/src/Tag/TagBadge.vue
View File

@@ -28,10 +28,8 @@ const indicatorClasses = {
<template>
<Badge :name :size :tag :class="props.class" :color :border>
<TagIcon
:style="{ color: color }"
:class="twMerge(indicatorClasses[size])"></TagIcon>
<span>
<TagIcon :class="twMerge(indicatorClasses[size])"></TagIcon>
<span v-if="name">
{{ name }}
</span>
</Badge>

22
resources/js/packages/ui/src/TimeEntry/TimeEntryAggregateRow.vue
View File

@@ -23,6 +23,7 @@ import {
import TimeEntryRow from '@/packages/ui/src/TimeEntry/TimeEntryRow.vue';
import GroupedItemsCountButton from '@/packages/ui/src/GroupedItemsCountButton.vue';
import type { TimeEntriesGroupedByType } from '@/types/time-entries';
import { Checkbox } from '@/packages/ui/src';
const props = defineProps<{
timeEntry: TimeEntriesGroupedByType;
@@ -76,6 +77,7 @@ function updateProjectAndTask(projectId: string, taskId: string) {
}
const expanded = ref(false);
function onSelectChange(event: Event) {
const target = event.target as HTMLInputElement;
if (target.checked) {
@@ -92,10 +94,10 @@ function onSelectChange(event: Event) {
data-testid="time_entry_row">
<MainContainer class="min-w-0">
<div
class="sm:flex py-0.5 items-center min-w-0 justify-between group">
class="sm:flex py-2 items-center min-w-0 justify-between group">
<div class="flex space-x-3 items-center min-w-0">
<input
@change="onSelectChange"
<Checkbox
@update:checked="onSelectChange"
:checked="
timeEntry.timeEntries.every(
(aggregateTimeEntry: TimeEntry) =>
@@ -103,9 +105,7 @@ function onSelectChange(event: Event) {
aggregateTimeEntry
)
)
"
type="checkbox"
class="h-4 w-4 rounded bg-card-background border-input-border text-accent-500/80 focus:ring-accent-500/80" />
" />
<div class="flex items-center min-w-0">
<GroupedItemsCountButton
:expanded="expanded"
@@ -113,7 +113,7 @@ function onSelectChange(event: Event) {
{{ timeEntry?.timeEntries?.length }}
</GroupedItemsCountButton>
<TimeEntryDescriptionInput
class="min-w-0"
class="min-w-0 mr-4"
@changed="updateTimeEntryDescription"
:modelValue="
timeEntry.description
@@ -130,6 +130,7 @@ function onSelectChange(event: Event) {
:project="timeEntry.project_id"
:enableEstimatedTime
:currency="currency"
class="border border-border-primary"
:task="
timeEntry.task_id
"></TimeTrackerProjectTaskDropdown>
@@ -143,6 +144,7 @@ function onSelectChange(event: Event) {
:modelValue="timeEntry.tags"></TimeEntryRowTagDropdown>
<BillableToggleButton
:modelValue="timeEntry.billable"
class="opacity-50 focus-visible:opacity-100 group-hover:opacity-100"
size="small"
@changed="
updateTimeEntryBillable
@@ -150,13 +152,13 @@ function onSelectChange(event: Event) {
<div class="flex-1">
<button
@click="expanded = !expanded"
class="hidden lg:block text-muted w-[110px] px-2 py-2 bg-transparent text-center hover:bg-card-background rounded-lg border border-transparent hover:border-card-border text-sm font-medium">
class="hidden lg:block text-muted w-[105px] px-1 py-1.5 bg-transparent text-center hover:bg-card-background rounded-lg border border-transparent hover:border-card-border text-sm font-medium focus-visible:outline-none focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:bg-tertiary">
{{ formatStartEnd(timeEntry.start, timeEntry.end) }}
</button>
</div>
<button
@click="expanded = !expanded"
class="text-white w-[100px] px-3 py-2 bg-transparent text-center hover:bg-card-background rounded-lg border border-transparent hover:border-card-border text-sm font-semibold">
class="text-white min-w-[90px] px-2 py-1.5 bg-transparent text-center hover:bg-card-background rounded-lg border border-transparent hover:border-card-border text-sm font-semibold focus-visible:outline-none focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:bg-tertiary">
{{
formatHumanReadableDuration(timeEntry.duration ?? 0)
}}
@@ -165,7 +167,7 @@ function onSelectChange(event: Event) {
<TimeTrackerStartStop
@changed="onStartStopClick(timeEntry)"
:active="!!(timeEntry.start && !timeEntry.end)"
class="opacity-20 hidden sm:flex group-hover:opacity-100"></TimeTrackerStartStop>
class="opacity-20 hidden sm:flex group-hover:opacity-100 focus-visible:opacity-100"></TimeTrackerStartStop>
<TimeEntryMoreOptionsDropdown
@delete="
deleteTimeEntries(timeEntry?.timeEntries ?? [])

2
resources/js/packages/ui/src/TimeEntry/TimeEntryDescriptionInput.vue
View File

@@ -36,7 +36,7 @@ const displaysPlaceholder = computed(() => {
<div class="relative text-sm font-medium min-w-0">
<div
:class="[
'opacity-0 py-2 text-sm whitespace-pre min-w-0 pl-3 pr-1',
'opacity-0 h-4 text-sm whitespace-pre font-medium min-w-0 pl-3 pr-1',
{ 'min-w-[130px]': displaysPlaceholder },
]">
{{ liveDataValue }}

4
resources/js/packages/ui/src/TimeEntry/TimeEntryMassActionRow.vue
View File

@@ -88,14 +88,14 @@ const showMassUpdateModal = ref(false);
>Select All</InputLabel
>
<button
class="text-text-tertiary flex space-x-1 items-center hover:text-text-secondary transition focus-visible:ring-2 outline-0 focus-visible:text-text-primary focus-visible:ring-white/80 rounded h-full px-2"
class="text-text-tertiary flex space-x-1 items-center hover:text-text-secondary transition focus-visible:ring-2 outline-0 focus-visible:text-text-primary focus-visible:ring-ring rounded h-full px-2"
@click="showMassUpdateModal = true"
v-if="selectedTimeEntries.length">
<PencilSquareIcon class="w-4"></PencilSquareIcon>
<span> Edit </span>
</button>
<button
class="text-red-400 h-full px-2 space-x-1 items-center flex hover:text-red-500 transition focus-visible:ring-2 outline-0 focus-visible:text-red-500 focus-visible:ring-white/80 rounded"
class="text-red-400 h-full px-2 space-x-1 items-center flex hover:text-red-500 transition focus-visible:ring-2 outline-0 focus-visible:text-red-500 focus-visible:ring-ring rounded"
@click="deleteSelected"
v-if="selectedTimeEntries.length">
<TrashIcon class="w-3.5"></TrashIcon>

4
resources/js/packages/ui/src/TimeEntry/TimeEntryRangeSelector.vue
View File

@@ -33,10 +33,10 @@ const open = ref(false);
data-testid="time_entry_range_selector"
:class="
twMerge(
'text-muted w-[110px] px-2 bg-transparent text-center hover:bg-card-background rounded-lg border border-transparent hover:border-card-border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/80',
'text-muted w-[105px] px-2 bg-transparent text-center hover:bg-card-background rounded-lg border border-transparent hover:border-card-border focus-visible:outline-none focus:outline-none focus-visible:ring-2 focus-visible:text-text-primary focus-visible:ring-ring focus-visible:bg-tertiary',
showDate
? 'text-xs py-1.5 font-semibold'
: 'text-sm py-2 font-medium',
: 'text-sm py-1.5 font-medium',
open && 'border-card-border bg-card-background'
)
">

23
resources/js/packages/ui/src/TimeEntry/TimeEntryRow.vue
View File

@@ -19,6 +19,7 @@ import TimeEntryMoreOptionsDropdown from '@/packages/ui/src/TimeEntry/TimeEntryM
import BillableToggleButton from '@/packages/ui/src/Input/BillableToggleButton.vue';
import { computed } from 'vue';
import TimeTrackerProjectTaskDropdown from '@/packages/ui/src/TimeTracker/TimeTrackerProjectTaskDropdown.vue';
import { Checkbox } from '@/packages/ui/src';
const props = defineProps<{
timeEntry: TimeEntry;
@@ -96,16 +97,15 @@ function onSelectChange(event: Event) {
data-testid="time_entry_row">
<MainContainer class="min-w-0">
<div
class="sm:flex py-0.5 min-w-0 items-center justify-between group">
<div class="flex space-x-1 items-center min-w-0">
<input
@change="onSelectChange"
:checked="selected"
type="checkbox"
class="h-4 w-4 rounded bg-card-background border-input-border text-accent-500/80 focus:ring-accent-500/80" />
<div class="w-7 h-7" v-if="indent === true"></div>
class="sm:flex py-2 min-w-0 items-center justify-between group">
<div class="flex items-center min-w-0">
<Checkbox
@update:checked="onSelectChange"
:checked="selected" />
<div class="w-10 h-7" v-if="indent === true"></div>
<TimeEntryDescriptionInput
@changed="updateTimeEntryDescription"
class="min-w-0 mr-4"
:modelValue="
timeEntry.description
"></TimeEntryDescriptionInput>
@@ -120,12 +120,14 @@ function onSelectChange(event: Event) {
@changed="updateProjectAndTask"
:project="timeEntry.project_id"
:currency="currency"
class="border border-border-primary"
:enableEstimatedTime
:task="
timeEntry.task_id
"></TimeTrackerProjectTaskDropdown>
</div>
<div class="flex items-center font-medium lg:space-x-2">
<div
class="flex items-center font-medium space-x-1 lg:space-x-2">
<div class="text-sm px-2" v-if="showMember && members">
{{ memberName }}
</div>
@@ -136,6 +138,7 @@ function onSelectChange(event: Event) {
:modelValue="timeEntry.tags"></TimeEntryRowTagDropdown>
<BillableToggleButton
:modelValue="timeEntry.billable"
class="opacity-50 group-hover:opacity-100 focus-visible:opacity-100"
size="small"
@changed="
updateTimeEntryBillable
@@ -159,7 +162,7 @@ function onSelectChange(event: Event) {
<TimeTrackerStartStop
@changed="onStartStopClick"
:active="!!(timeEntry.start && !timeEntry.end)"
class="opacity-20 hidden sm:flex group-hover:opacity-100"></TimeTrackerStartStop>
class="opacity-20 hidden sm:flex focus-visible:opacity-100 group-hover:opacity-100"></TimeTrackerStartStop>
<TimeEntryMoreOptionsDropdown
@delete="
deleteTimeEntry

2
resources/js/packages/ui/src/TimeEntry/TimeEntryRowDurationInput.vue
View File

@@ -71,7 +71,7 @@ function selectInput(event: Event) {
<template #trigger>
<input
data-testid="time_entry_duration_input"
class="text-white w-[100px] px-3 py-2 bg-transparent text-center hover:bg-card-background rounded-lg border border-transparent hover:border-card-border text-sm font-semibold focus-visible:border-transparent focus-visible:ring-2 focus-visible:ring-white/80"
class="text-white w-[90px] px-2 py-1.5 bg-transparent text-center hover:bg-card-background rounded-lg border border-transparent hover:border-card-border text-sm font-semibold focus-visible:bg-tertiary focus-visible:border-transparent focus-visible:ring-2 focus-visible:ring-ring"
@focus="selectInput"
@keydown.tab="open = false"
@blur="updateTimerAndStartLiveTimerUpdate"

2
resources/js/packages/ui/src/TimeEntry/TimeEntryRowHeading.vue
View File

@@ -56,7 +56,7 @@ function selectUnselectAll(value: boolean) {
{{ formatDate(date) }}
</span>
</div>
<div class="text-muted pr-[90px] lg:pr-[108px]">
<div class="text-muted pr-[90px] lg:pr-[92px]">
<span class="font-semibold">
{{ formatHumanReadableDuration(duration) }}
</span>

4
resources/js/packages/ui/src/TimeEntry/TimeEntryRowTagDropdown.vue
View File

@@ -31,11 +31,11 @@ const timeEntryTags = computed<Tag[]>(() => {
<template #trigger>
<button
data-testid="time_entry_tag_dropdown"
class="opacity-50 group-hover:opacity-100 transition">
class="opacity-50 group-hover:opacity-100 group/dropdown focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:opacity-100 transition focus:bg-card-background-separator hover:bg-card-background-separator rounded-full flex items-center justify-center">
<TagBadge
:border="false"
size="large"
class="border-0"
class="border-0 sm:px-1.5 text-icon-default group-focus-within/dropdown:text-text-primary"
:name="
timeEntryTags.map((tag: Tag) => tag.name).join(', ')
"></TagBadge>

240
resources/js/packages/ui/src/TimeTracker/TimeTrackerProjectTaskDropdown.vue
View File

@@ -32,6 +32,7 @@ const project = defineModel<string | null>('project', {
const searchInput = ref<HTMLInputElement | null>(null);
const open = ref(false);
const dropdownViewport = ref<HTMLElement | null>(null);
import { UseFocusTrap } from '@vueuse/integrations/useFocusTrap/component';
const searchValue = ref('');
@@ -586,132 +587,139 @@ const showCreateProject = ref(false);
</ProjectBadge>
</template>
<template #content>
<input
:value="searchValue"
@input="updateSearchValue"
@keydown.enter="addClientIfNoneExists"
@click.prevent="searchInput?.focus()"
data-testid="client_dropdown_search"
@keydown.up.prevent="moveHighlightUp"
@keydown.down.prevent="moveHighlightDown"
@keydown.right.prevent="expandProject"
@keydown.left.prevent="collapseProject"
ref="searchInput"
class="bg-card-background border-0 placeholder-muted text-sm text-white py-2.5 focus:ring-0 border-b border-card-background-separator focus:border-card-background-separator w-full"
placeholder="Search for a project or task..." />
<div
ref="dropdownViewport"
@mousemove="mouseEnterHighlightActivated = true"
class="min-w-[350px] max-h-[350px] overflow-y-scroll relative">
<template v-for="client in filteredResults" :key="client.id">
<div
v-if="client.id !== 'no_project_no_client'"
class="w-full pb-1 pt-2 px-2 text-text-tertiary text-xs font-semibold flex space-x-1 items-center">
<span>
{{ client.name }}
</span>
</div>
<UseFocusTrap
v-if="open"
:options="{ immediate: true, allowOutsideClick: true }">
<input
:value="searchValue"
@input="updateSearchValue"
@keydown.enter.prevent="addClientIfNoneExists"
data-testid="client_dropdown_search"
@keydown.up.prevent="moveHighlightUp"
@keydown.down.prevent="moveHighlightDown"
@keydown.right.prevent="expandProject"
@keydown.left.prevent="collapseProject"
ref="searchInput"
class="bg-card-background border-0 placeholder-muted text-sm text-white py-2.5 focus:ring-0 border-b border-card-background-separator focus:border-card-background-separator w-full"
placeholder="Search for a project or task..." />
<div
ref="dropdownViewport"
@mousemove="mouseEnterHighlightActivated = true"
class="min-w-[350px] max-h-[350px] overflow-y-scroll relative">
<template
v-for="projectWithTasks in client.projects"
:key="projectWithTasks.id">
v-for="client in filteredResults"
:key="client.id">
<div
role="option"
class="px-1 py-0.5 cursor-default"
:value="projectWithTasks.id"
@click="selectProject(projectWithTasks.id)"
:data-project-id="projectWithTasks.id">
v-if="client.id !== 'no_project_no_client'"
class="w-full pb-1 pt-2 px-2 text-text-tertiary text-xs font-semibold flex space-x-1 items-center">
<span>
{{ client.name }}
</span>
</div>
<template
v-for="projectWithTasks in client.projects"
:key="projectWithTasks.id">
<div
class="rounded-lg"
:class="{
'bg-card-background-active':
projectWithTasks.id ===
highlightedItemId,
}">
<ProjectDropdownItem
class="hover:!bg-transparent"
:selected="
isProjectSelected(projectWithTasks)
"
@mouseenter="
setHighlightItemId(projectWithTasks.id)
"
:name="projectWithTasks.name"
:color="projectWithTasks.color">
<template #actions>
<button
tabindex="-1"
v-if="
projectWithTasks.tasks.length >
0
"
@click.prevent.stop="
() => {
projectWithTasks.expanded =
!projectWithTasks.expanded;
searchInput?.focus();
}
"
class="px-2 py-0.5 mr-2 relative transition items-center rounded flex space-x-0.5 text-xs"
:class="{
'bg-white/5 text-text-secondary':
projectWithTasks.expanded,
'hover:bg-white/5 hover:text-text-secondary text-text-tertiary':
!projectWithTasks.expanded,
}">
<span
>{{
role="option"
class="px-1 py-0.5 cursor-default"
:value="projectWithTasks.id"
@click="selectProject(projectWithTasks.id)"
:data-project-id="projectWithTasks.id">
<div
class="rounded-lg"
:class="{
'bg-card-background-active':
projectWithTasks.id ===
highlightedItemId,
}">
<ProjectDropdownItem
class="hover:!bg-transparent"
:selected="
isProjectSelected(projectWithTasks)
"
@mouseenter="
setHighlightItemId(
projectWithTasks.id
)
"
:name="projectWithTasks.name"
:color="projectWithTasks.color">
<template #actions>
<button
tabindex="-1"
v-if="
projectWithTasks.tasks
.length
}}
Tasks</span
>
<ChevronDownIcon
.length > 0
"
@click.prevent.stop="
() => {
projectWithTasks.expanded =
!projectWithTasks.expanded;
searchInput?.focus();
}
"
class="px-2 py-0.5 mr-2 relative transition items-center rounded flex space-x-0.5 text-xs"
:class="{
'transform rotate-180':
'bg-white/5 text-text-secondary':
projectWithTasks.expanded,
}"
class="w-4"></ChevronDownIcon>
</button>
</template>
</ProjectDropdownItem>
'hover:bg-white/5 hover:text-text-secondary text-text-tertiary':
!projectWithTasks.expanded,
}">
<span
>{{
projectWithTasks.tasks
.length
}}
Tasks</span
>
<ChevronDownIcon
:class="{
'transform rotate-180':
projectWithTasks.expanded,
}"
class="w-4"></ChevronDownIcon>
</button>
</template>
</ProjectDropdownItem>
</div>
</div>
</div>
<div
v-if="projectWithTasks.expanded"
class="bg-quaternary">
<div
v-for="task in projectWithTasks.tasks"
:key="task.id"
@click="selectTask(task.id)"
@mouseenter="setHighlightItemId(task.id)"
:data-task-id="task.id"
:class="{
'bg-card-background-active':
task.id === highlightedItemId,
}"
class="flex items-center space-x-2 w-full px-5 py-1.5 text-start text-xs font-semibold leading-5 text-white focus:outline-none focus:bg-card-background-active transition duration-150 ease-in-out">
<MinusIcon
class="w-3 h-3 text-text-quaternary"></MinusIcon>
<span>{{ task.name }}</span>
v-if="projectWithTasks.expanded"
class="bg-quaternary">
<div
v-for="task in projectWithTasks.tasks"
:key="task.id"
@click="selectTask(task.id)"
@mouseenter="setHighlightItemId(task.id)"
:data-task-id="task.id"
:class="{
'bg-card-background-active':
task.id === highlightedItemId,
}"
class="flex items-center space-x-2 w-full px-5 py-1.5 text-start text-xs font-semibold leading-5 text-white focus:outline-none focus:bg-card-background-active transition duration-150 ease-in-out">
<MinusIcon
class="w-3 h-3 text-text-quaternary"></MinusIcon>
<span>{{ task.name }}</span>
</div>
</div>
</div>
</template>
</template>
</template>
</div>
<div
v-if="canCreateProject"
class="hover:bg-card-background-active rounded-b-lg">
<button
@click="
open = false;
showCreateProject = true;
"
class="text-white flex space-x-3 items-center px-4 py-3 text-xs font-semibold border-t border-card-background-separator">
<PlusCircleIcon
class="w-5 flex-shrink-0 text-icon-default"></PlusCircleIcon>
<span>Create new Project</span>
</button>
</div>
</div>
<div
v-if="canCreateProject"
class="hover:bg-card-background-active rounded-b-lg">
<button
@click="
open = false;
showCreateProject = true;
"
class="text-white flex space-x-3 items-center px-4 py-3 text-xs font-semibold border-t border-card-background-separator">
<PlusCircleIcon
class="w-5 flex-shrink-0 text-icon-default"></PlusCircleIcon>
<span>Create new Project</span>
</button>
</div>
</UseFocusTrap>
</template>
</Dropdown>
<ProjectCreateModal

2
resources/js/packages/ui/src/TimeTracker/TimeTrackerTagDropdown.vue
View File

@@ -37,7 +37,7 @@ defineProps<{
:class="
twMerge(
iconColorClasses,
'flex-shrink-0 ring-0 focus:outline-none focus:ring-0 transition focus-visible:bg-card-background-separator hover:bg-card-background-separator rounded-full w-11 h-11 flex items-center justify-center'
'flex-shrink-0 ring-0 focus:outline-none focus:ring-2 focus:ring-ring transition focus-visible:bg-card-background-separator hover:bg-card-background-separator rounded-full w-10 h-10 flex items-center justify-center'
)
">
<TagIcon class="w-5 h-5 lg:h-6 lg:w-6"></TagIcon>

6
resources/js/packages/ui/src/TimeTrackerStartStop.vue
View File

@@ -16,8 +16,8 @@ const props = withDefaults(
);
const buttonSizeClasses = {
small: 'w-6 h-6 bg-accent-200/40 hover:bg-accent-300/70',
base: 'w-8 h-8 bg-accent-200/40 hover:scale-110 hover:bg-accent-300/70 ring-accent-200/10 focus-visible:ring-white/80 ring-4 hover:ring-4',
large: 'w-11 h-11 ring-accent-200/10 focus-visible:ring-white/80 ring-4 sm:ring-[6px] hover:scale-110',
base: 'w-8 h-8 bg-accent-200/40 hover:scale-110 hover:bg-accent-300/70 ring-accent-200/10 focus-visible:ring-ring ring-4 hover:ring-4',
large: 'w-11 h-11 ring-accent-200/10 focus-visible:ring-ring focus-visible:ring-2 ring-4 sm:ring-[6px] hover:scale-110',
};
const iconClass = {
small: 'w-2.5 h-2.5',
@@ -29,7 +29,7 @@ const buttonColorClasses = computed(() => {
if (props.active) {
return 'bg-red-400/80 hover:bg-red-500/80 focus:bg-red-500/80';
} else {
return 'bg-accent-300/70 hover:bg-accent-400/70 focus:bg-accent-500/70';
return 'bg-accent-300/70 hover:bg-accent-400/70 focus:bg-accent-700';
}
});

1
tailwind.config.js
View File

@@ -24,6 +24,7 @@ export default {
sans: ['Outfit', ...defaultTheme.fontFamily.sans],
},
colors: {
'ring': 'rgba(255,255,255,0.5)',
'primary': 'var(--color-bg-primary)',
'secondary': 'var(--color-bg-secondary)',
'tertiary': 'var(--color-bg-tertiary)',