bnilsen/custom_ui
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add theme store and input, update some components to use theme

Browse source
This commit is contained in:
Casey 2025-12-12 14:21:42 -06:00
parent 43c205e577
commit 0c55c9996f
12 changed files with 459 additions and 68 deletions
Download patch file Download diff file Expand all files Collapse all files

92
frontend/src/components/CompanySelector.vue Normal file
View file

@ -0,0 +1,92 @@
<script setup>
import { computed } from "vue";
import Select from "primevue/select";
import { useCompanyStore } from "@/stores/company";
const companyStore = useCompanyStore();
const companyOptions = computed(() =>
companyStore.companies.map((company) => ({ label: company, value: company })),
);
const selectedCompany = computed({
get: () => companyStore.selectedCompany,
set: (value) => companyStore.setSelectedCompany(value),
});
const fontSize = computed(() => {
const len = selectedCompany.value.length;
if (len > 12) return '0.75rem';
if (len > 10) return '0.8rem';
return '0.875rem';
});
</script>
<template>
<div class="company-selector">
<Select
v-model="selectedCompany"
:options="companyOptions"
option-label="label"
option-value="value"
placeholder="Select Company"
class="company-select"
/>
</div>
</template>
<style scoped>
.company-selector {
margin-bottom: 6px;
}
.company-select {
width: 170px;
}
:deep(.p-select) {
border-radius: 6px;
border: 1px solid var(--surface-border);
background-color: var(--surface-card);
color: var(--text-color);
transition: all 0.2s ease;
}
:deep(.p-select:hover) {
border-color: var(--theme-primary);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
:deep(.p-select.p-focus) {
border-color: var(--theme-primary);
box-shadow: 0 0 0 1px var(--theme-primary);
}
:deep(.p-select .p-select-label) {
padding: 0.5rem 0.75rem;
font-size: v-bind(fontSize);
font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
:deep(.p-select .p-select-trigger) {
padding: 0 0.75rem;
}
:deep(.p-select-overlay) {
border-radius: 6px;
border: 1px solid var(--surface-border);
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
:deep(.p-select-option) {
padding: 0.5rem 0.75rem;
font-size: 0.875rem;
}
:deep(.p-select-option:hover) {
background-color: var(--surface-hover);
}
</style>

16
frontend/src/components/SideBar.vue
View file

@ -204,15 +204,15 @@ const handleCategoryClick = (category) => {
<style lang="css">
.sidebar-button.active,
.sidebar-button.active:hover{
background-color: var(--primary-color);
background-color: var(--theme-primary);
color: white;
border-left: 3px solid var(--primary-600);
border-left: 3px solid var(--theme-primary-strong);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
}
.sidebar-button:hover {
background-color: var(--surface-hover);
color: var(--primary-color);
color: var(--theme-primary);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.24);
transform: translateX(1px);
}
@ -234,7 +234,7 @@ const handleCategoryClick = (category) => {
}
.sidebar-button:hover .button-icon {
opacity: 1;
color: black;
color: var(--theme-primary);
}
.button-text {
@ -285,7 +285,7 @@ const handleCategoryClick = (category) => {
min-width: 170px;
align-self: flex-start;
gap: 5px;
background-color: var(--surface-ground);
background-color: var(--theme-surface-alt);
padding: 10px;
border-radius: 8px;
margin-top: 10px;
@ -306,9 +306,9 @@ const handleCategoryClick = (category) => {
width: 28px;
height: 28px;
border-radius: 50%;
border: 2px solid var(--primary-color);
border: 2px solid var(--theme-primary);
background-color: var(--surface-0);
color: var(--primary-color);
color: var(--theme-primary);
display: flex;
align-items: center;
justify-content: center;
@ -319,7 +319,7 @@ const handleCategoryClick = (category) => {
}
.sidebar-toggle:hover {
background-color: var(--primary-color);
background-color: var(--theme-primary);
color: white;
transform: scale(1.15);
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);

2
frontend/src/components/calendar/CalendarNavigation.vue
View file

@ -57,7 +57,7 @@ const onTabChange = (event) => {
justify-content: center;
align-items: center;
height: 400px;
color: #6c757d;
color: var(--theme-text-muted);
font-size: 1.2rem;
}
</style>

34
frontend/src/components/calendar/jobs/JobsCalendar.vue
View file

@ -816,7 +816,7 @@ onMounted(async () => {
align-items: center;
margin-bottom: 20px;
padding-bottom: 15px;
border-bottom: 1px solid #e0e0e0;
border-bottom: 1px solid var(--surface-border);
}
.header-controls {
@ -828,7 +828,7 @@ onMounted(async () => {
.day-display-btn {
font-weight: 600;
font-size: 1.1em;
color: #1976d2 !important;
color: var(--theme-primary) !important;
text-transform: none;
letter-spacing: normal;
min-width: 320px;
@ -867,16 +867,16 @@ onMounted(async () => {
.calendar-header-row {
display: grid;
border-bottom: 2px solid #e0e0e0;
background-color: #f8f9fa;
border-bottom: 2px solid var(--surface-border);
background-color: var(--surface-hover);
}
.time-column-header {
padding: 16px 8px;
font-weight: 600;
text-align: center;
border-right: 1px solid #e0e0e0;
color: #666;
border-right: 1px solid var(--surface-border);
color: var(--theme-text-muted);
}
.foreman-header {
@ -888,19 +888,19 @@ onMounted(async () => {
}
.foreman-header:hover {
background-color: #f0f0f0;
background-color: var(--surface-hover);
}
.foreman-name {
font-weight: 600;
font-size: 0.9em;
margin-bottom: 4px;
color: #1976d2;
color: var(--theme-primary);
}
.foreman-jobs {
font-size: 0.75em;
color: #666;
color: var(--theme-text-muted);
font-weight: 500;
}
@ -912,30 +912,30 @@ onMounted(async () => {
.time-row {
display: grid;
min-height: 40px;
border-bottom: 1px solid #f0f0f0;
border-bottom: 1px solid var(--surface-border);
}
.time-row:nth-child(odd) {
background-color: #fafafa;
background-color: var(--surface-hover);
}
.time-column {
padding: 8px;
border-right: 1px solid #e0e0e0;
border-right: 1px solid var(--surface-border);
display: flex;
align-items: center;
justify-content: center;
background-color: #f8f9fa;
background-color: var(--surface-hover);
}
.time-label {
font-size: 0.75em;
color: #666;
color: var(--theme-text-muted);
font-weight: 500;
}
.foreman-column {
border-right: 1px solid #e0e0e0;
border-right: 1px solid var(--surface-border);
position: relative;
cursor: pointer;
transition: background-color 0.2s;
@ -943,11 +943,11 @@ onMounted(async () => {
}
.foreman-column:hover {
background-color: #f0f8ff;
background-color: var(--theme-surface-alt);
}
.foreman-column.current-time {
background-color: #fff3e0;
background-color: var(--theme-surface-alt);
}
.foreman-column.drag-over {

6
frontend/src/components/clientView/AdditionalInfoBar.vue
View file

@ -19,9 +19,9 @@ const props = defineProps({
align-items: center;
justify-content: center;
padding: 0.25rem 1rem;
background: linear-gradient(135deg, #f0f9f0 0%, #e8f5e8 100%);
color: #2d5a47;
border-bottom: 1px solid #c8e6c9;
background: linear-gradient(135deg, var(--theme-gradient-start) 0%, var(--theme-gradient-end) 100%);
color: #fff;
border-bottom: 1px solid var(--theme-primary-strong);
font-size: 0.75rem;
font-weight: 500;
min-height: 30px;

10
frontend/src/components/clientView/TopBar.vue
View file

@ -75,9 +75,9 @@ const formatDate = (date) => {
align-items: center;
justify-content: space-between;
padding: 0.5rem 1rem;
background: linear-gradient(135deg, #0d4f3c 0%, #1a5f4a 100%);
background: linear-gradient(135deg, var(--theme-gradient-start) 0%, var(--theme-gradient-end) 100%);
color: #fff;
border-bottom: 1px solid #2d5a47;
border-bottom: 1px solid var(--theme-primary-strong);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
flex-wrap: wrap;
gap: 0.5rem;
@ -93,7 +93,7 @@ const formatDate = (date) => {
.section-label {
font-weight: 500;
color: #adb5bd;
color: var(--theme-text-muted);
white-space: nowrap;
font-size: 0.85rem;
}
@ -130,7 +130,7 @@ const formatDate = (date) => {
.customer-name {
font-size: 0.75rem;
color: #adb5bd;
color: var(--theme-text-muted);
font-weight: 500;
}
@ -145,7 +145,7 @@ const formatDate = (date) => {
gap: 0.25rem;
font-weight: 500;
font-size: 0.8rem;
background: #495057;
background: var(--theme-primary-strong);
padding: 0.25rem 0.5rem;
border-radius: 10px;
white-space: nowrap;

68
frontend/src/components/common/DataTable.vue
View file

@ -1190,31 +1190,33 @@ defineExpose({
/* Modern DataTable Styling */
/* Filter Panel Styles */
.dt-filter-panel {
background: #ffffff;
border: 1px solid #e5e7eb;
background: var(--surface-card);
border: 1px solid var(--surface-border);
border-radius: 6px;
margin-bottom: 0.5rem;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.dt-filter-header {
padding: 0.5rem 0.75rem 0.25rem;
border-bottom: 1px solid #f3f4f6;
border-bottom: 1px solid var(--surface-border);
}
.dt-filter-title {
margin: 0;
font-size: 0.75rem;
font-weight: 600;
color: #374151;
color: var(--theme-text);
display: flex;
align-items: center;
gap: 0.375rem;
}
.dt-filter-title i {
color: #6366f1;
color: var(--theme-primary);
}
.dt-filter-content {
@ -1237,20 +1239,22 @@ defineExpose({
.dt-filter-label {
font-size: 0.75rem;
font-weight: 500;
color: #374151;
color: var(--theme-text);
}
.dt-filter-input {
border: 1px solid #d1d5db;
border: 1px solid var(--surface-border);
border-radius: 4px;
padding: 0.375rem 0.5rem;
font-size: 0.75rem;
transition: border-color 0.2s ease;
background: #ffffff;
background: var(--surface-card);
}
.dt-filter-input:focus {
border-color: #6366f1;
border-color: var(--theme-primary);
outline: none;
}
@ -1269,13 +1273,14 @@ defineExpose({
padding: 0.375rem 0.75rem;
}
.dt-filter-status {
margin-top: 0.5rem;
padding: 0.375rem 0.5rem;
background: #f9fafb;
background: var(--surface-hover);
border-radius: 4px;
font-size: 0.7rem;
color: #6b7280;
color: var(--theme-text-muted);
display: flex;
align-items: center;
gap: 0.375rem;
@ -1283,8 +1288,8 @@ defineExpose({
/* Pagination Panel Styles */
.dt-pagination-panel {
background: #ffffff;
border: 1px solid #e5e7eb;
background: var(--surface-card);
border: 1px solid var(--surface-border);
border-radius: 6px;
margin-bottom: 0.5rem;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
@ -1303,12 +1308,12 @@ defineExpose({
display: flex;
align-items: center;
gap: 0.375rem;
color: #6b7280;
color: var(--theme-text-muted);
font-size: 0.75rem;
}
.dt-pagination-info i {
color: #6366f1;
color: var(--theme-primary);
font-size: 0.75rem;
}
@ -1320,31 +1325,31 @@ defineExpose({
.dt-pagination-label {
font-size: 0.75rem;
color: #374151;
color: var(--theme-text);
font-weight: 500;
}
.dt-pagination-select {
border: 1px solid #d1d5db;
border: 1px solid var(--surface-border);
border-radius: 4px;
padding: 0.25rem 0.5rem;
font-size: 0.75rem;
background: white;
background: var(--surface-card);
transition: border-color 0.2s ease;
}
.dt-pagination-select:focus {
border-color: #6366f1;
border-color: var(--theme-primary);
outline: none;
}
/* Bulk Actions Panel Styles */
.dt-bulk-actions-panel {
background: #fef7ed;
border: 1px solid #fed7aa;
background: var(--theme-surface-alt);
border: 1px solid var(--surface-border);
border-radius: 6px;
margin-bottom: 0.5rem;
box-shadow: 0 1px 2px rgba(251, 146, 60, 0.1);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
animation: slideInBulk 0.2s ease-out;
}
@ -1379,12 +1384,13 @@ defineExpose({
padding: 0.375rem 0.75rem;
}
.dt-bulk-actions-status {
padding: 0.25rem 0.5rem;
background: rgba(255, 255, 255, 0.8);
background: var(--surface-card);
border-radius: 4px;
font-size: 0.7rem;
color: #ea580c;
color: var(--theme-secondary);
display: flex;
align-items: center;
gap: 0.375rem;
@ -1392,13 +1398,14 @@ defineExpose({
}
/* Global Actions Panel Styles */
.dt-global-actions-panel {
background: #ffffff;
border: 1px solid #e5e7eb;
background: var(--surface-card);
border: 1px solid var(--surface-border);
border-radius: 6px;
margin-bottom: 0.5rem;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
border-left: 3px solid #6366f1;
border-left: 3px solid var(--theme-primary);
}
.dt-global-actions-content {
@ -1469,12 +1476,13 @@ defineExpose({
color: white;
}
.dt-global-actions-status {
padding: 0.375rem 0.75rem;
background: #f9fafb;
border-top: 1px solid #f3f4f6;
background: var(--surface-hover);
border-top: 1px solid var(--surface-border);
font-size: 0.7rem;
color: #6b7280;
color: var(--theme-text-muted);
display: flex;
align-items: center;
gap: 0.375rem;