From 32a920d18735d596f8cac2feafdaa0f85b325598 Mon Sep 17 00:00:00 2001 From: Felix Cornelissen Date: Mon, 28 Aug 2023 12:32:10 +0200 Subject: [PATCH 01/61] wip --- src/assets/design-tokens.scss | 5 ++- src/assets/main.scss | 8 ++-- src/components/MultiSelect.vue | 39 ++++++++++++------- .../contactmoment/ContactmomentStarter.vue | 2 +- .../contactmoment/ContactmomentSwitcher.vue | 6 +-- src/layout/TheHeader.vue | 26 ++++++------- src/layout/TheSidebar.vue | 1 - 7 files changed, 47 insertions(+), 40 deletions(-) diff --git a/src/assets/design-tokens.scss b/src/assets/design-tokens.scss index 9c6e1cf57..02938d41b 100644 --- a/src/assets/design-tokens.scss +++ b/src/assets/design-tokens.scss @@ -5,8 +5,9 @@ --color-secondary: #eceff1; --color-tertiary: #778da9; --color-headings: #1b263b; - --color-accent: #258839; - --color-accent-hover: #89cf5e; + --color-accent: #acc8e5; + --color-accent-text: black; + --color-accent-hover: #cfe4f7; --color-accent-hover-text: var(--color-headings); --color-error: #c82d2d; --color-error-hover: #f47171; diff --git a/src/assets/main.scss b/src/assets/main.scss index bfa33cc2c..f049aaddf 100644 --- a/src/assets/main.scss +++ b/src/assets/main.scss @@ -17,10 +17,8 @@ body { overflow-y: hidden; display: grid; grid-template: "aside header" auto "nothing main" 1fr / 21.25rem 1fr; - border-top: 4px solid var(--color-primary); &.contactmoment-loopt { - border-top-color: var(--color-accent); grid-template-areas: "aside header" "aside main"; > aside { @@ -101,8 +99,8 @@ h2 { label:first-child > select, > label:first-child + input, label:first-child + select { - border-start-start-radius: var(--radius-large); - border-end-start-radius: var(--radius-large); + border-start-start-radius: var(--radius-default); + border-end-start-radius: var(--radius-default); border-inline-start: var(--border-style); } @@ -111,7 +109,7 @@ h2 { } > :last-child { - border-radius: 0 var(--radius-large) var(--radius-large) 0; + border-radius: 0 var(--radius-default) var(--radius-default) 0; border-inline-end: var(--border-style); } diff --git a/src/components/MultiSelect.vue b/src/components/MultiSelect.vue index 919ffcc02..6e94cdb3c 100644 --- a/src/components/MultiSelect.vue +++ b/src/components/MultiSelect.vue @@ -53,16 +53,28 @@ onClickOutside(detailsEl, () => { diff --git a/src/features/contactmoment/ContactmomentStarter.vue b/src/features/contactmoment/ContactmomentStarter.vue index b50e6e659..82ceb15be 100644 --- a/src/features/contactmoment/ContactmomentStarter.vue +++ b/src/features/contactmoment/ContactmomentStarter.vue @@ -54,7 +54,7 @@ const onStartContactMoment = async () => { .start-button { --utrecht-button-min-inline-size: 15rem; --utrecht-button-background-color: var(--color-accent); - --utrecht-button-color: var(--color-white); + --utrecht-button-color: var(--color-accent-text); --utrecht-button-hover-background-color: var(--color-accent-hover); --utrecht-button-hover-color: black; } diff --git a/src/features/contactmoment/ContactmomentSwitcher.vue b/src/features/contactmoment/ContactmomentSwitcher.vue index 9d69d0347..be1a6b81e 100644 --- a/src/features/contactmoment/ContactmomentSwitcher.vue +++ b/src/features/contactmoment/ContactmomentSwitcher.vue @@ -73,7 +73,7 @@ const moments = computed(() => closeDetails(); }, }; - }) + }), ); const detailsEl = ref(); @@ -106,6 +106,7 @@ menu { inline-size: 100%; border-radius: var(--radius-default); box-shadow: var(--shadow-default); + justify-content: flex-start; li { border-block-end: 1px solid black; @@ -133,12 +134,11 @@ menu { } .current-moment { - color: var(--color-accent); font-style: italic; } .name { - font-weight: bold; + font-weight: 400; } .contact, diff --git a/src/layout/TheHeader.vue b/src/layout/TheHeader.vue index 6fdedf09f..3501b31c1 100644 --- a/src/layout/TheHeader.vue +++ b/src/layout/TheHeader.vue @@ -5,13 +5,7 @@ :class="{ contactmomentLoopt: contactmomentStore.contactmomentLoopt }" > - Uitloggen + @@ -88,7 +87,7 @@ const contactmomentStore = useContactmomentStore(); const featuredWerkberichtenCount = useFeaturedWerkberichtenCount(); const isRedacteur = computed( - () => user.success && user.data.isLoggedIn && user.data.isRedacteur + () => user.success && user.data.isLoggedIn && user.data.isRedacteur, ); @@ -97,7 +96,7 @@ header { background-color: var(--color-primary); display: grid; grid-template-areas: - "bar logout" + "bar bar" "results results" "expand expand" "nav nav"; @@ -105,11 +104,8 @@ header { align-items: center; .log-out { - grid-area: logout; - color: var(--color-white); - padding: var(--spacing-small); - margin-left: auto; - margin-right: var(--container-padding); + margin-inline-start: auto; + margin-inline-end: 0; } } diff --git a/src/layout/TheSidebar.vue b/src/layout/TheSidebar.vue index ffbf78217..f2c161161 100644 --- a/src/layout/TheSidebar.vue +++ b/src/layout/TheSidebar.vue @@ -160,7 +160,6 @@ aside { flex: 1; color: var(--utrecht-form-label-color); padding: var(--spacing-default); - min-height: 90%; textarea::placeholder { font-style: italic; From b5e03ec33073904c87d8a2941d462f6d82b71229 Mon Sep 17 00:00:00 2001 From: Felix Cornelissen Date: Mon, 28 Aug 2023 18:22:42 +0200 Subject: [PATCH 02/61] wip --- src/assets/design-tokens.scss | 2 +- src/assets/icons/icons.scss | 33 +++- src/assets/icons/sort.svg | 1 + src/assets/main.scss | 88 +++++++---- src/components/BackLink.vue | 28 ++++ src/components/ExpandableTableList.vue | 82 +++++----- src/components/MultiSelect.vue | 3 +- .../ContactmomentenOverzicht.vue | 2 +- .../ContactverzoekenOverzicht.vue | 2 +- .../klant/contact/ContactenOverzicht.vue | 7 + src/features/search/GlobalSearch.vue | 2 +- src/features/werkbericht/WerkBericht.vue | 12 +- .../zaaksysteem/components/ZaakAlgemeen.vue | 130 ++++++--------- src/layout/TheHeader.vue | 40 +++-- src/main.ts | 16 ++ src/views/BedrijfDetailView.vue | 144 ++++++++--------- src/views/ContactDetailView.vue | 96 +++++------- src/views/HomeView.vue | 16 +- src/views/PersoonDetailView.vue | 148 ++++++++---------- src/views/ZaakDetailView.vue | 96 +++++------- 20 files changed, 491 insertions(+), 457 deletions(-) create mode 100644 src/assets/icons/sort.svg create mode 100644 src/components/BackLink.vue diff --git a/src/assets/design-tokens.scss b/src/assets/design-tokens.scss index 02938d41b..31ade0f6d 100644 --- a/src/assets/design-tokens.scss +++ b/src/assets/design-tokens.scss @@ -124,7 +124,7 @@ --utrecht-form-input-border-radius: var(--radius-default); --utrecht-form-input-border-width: 1px; --utrecht-form-input-color: black; - --utrecht-form-input-font-size: 1.125rem; + --utrecht-form-input-font-size: 1rem; --utrecht-form-input-padding-block-end: var(--spacing-small); --utrecht-form-input-padding-block-start: var(--spacing-small); --utrecht-form-input-padding-inline-end: var(--spacing-small); diff --git a/src/assets/icons/icons.scss b/src/assets/icons/icons.scss index fa93aeb7d..5e6be5142 100644 --- a/src/assets/icons/icons.scss +++ b/src/assets/icons/icons.scss @@ -40,7 +40,9 @@ .icon-before.chevron-down::before, .icon-after.chevron-down::after, .icon-before.chevron-right::before, -.icon-after.chevron-right::after { +.icon-after.chevron-right::after, +.icon-before.chevron-left::before, +.icon-after.chevron-left::after { min-block-size: 0.6rem; mask-image: url("@/assets/icons/chevron-down.svg"); } @@ -50,6 +52,11 @@ rotate: (-90deg); } +.icon-before.chevron-left::before, +.icon-after.chevron-left::after { + rotate: (90deg); +} + .icon-before.circle-xmark::before, .icon-after.circle-xmark::after { mask-image: url("@/assets/icons/circle-xmark.svg"); @@ -111,3 +118,27 @@ .icon-after.loupe::after { mask-image: url("@/assets/icons/loupe.svg"); } + +.icon-before.sort-descending::before, +.icon-after.sort-descending::after, +.icon-before.sort-ascending::before, +.icon-after.sort-ascending::after { + mask-image: url("@/assets/icons/sort.svg"); + min-inline-size: 0.5rem; + min-block-size: 0.5rem; +} + +.icon-before.sort-descending::before, +.icon-before.sort-ascending::before { + margin-inline-end: 0.5ch; +} + +.icon-after.sort-descending::after, +.icon-after.sort-ascending::after { + margin-inline-start: 0.5ch; +} + +.icon-before.sort-ascending::before, +.icon-after.sort-ascending::after { + rotate: 180deg; +} diff --git a/src/assets/icons/sort.svg b/src/assets/icons/sort.svg new file mode 100644 index 000000000..b4e1c98fb --- /dev/null +++ b/src/assets/icons/sort.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/main.scss b/src/assets/main.scss index f049aaddf..300a2e785 100644 --- a/src/assets/main.scss +++ b/src/assets/main.scss @@ -13,10 +13,9 @@ body { .app-layout { position: relative; - min-height: 100vh; - overflow-y: hidden; display: grid; grid-template: "aside header" auto "nothing main" 1fr / 21.25rem 1fr; + height: 100vh; &.contactmoment-loopt { grid-template-areas: "aside header" "aside main"; @@ -24,23 +23,14 @@ body { > aside { height: 100vh; } - - overflow: hidden; - max-height: 100vh; - - &.hide-sidebar { - main { - overflow: visible; - } - } - - main { - overflow: auto; - } } &.hide-sidebar { grid-template-areas: "header header" "nothing main"; + + > aside { + display: none; + } } } @@ -56,6 +46,7 @@ body { grid-area: main; padding: var(--spacing-large); padding-inline-end: var(--container-padding); + overflow-y: auto; } .utrecht-select { @@ -124,7 +115,9 @@ h2 { input, select { - padding: var(--spacing-small); + padding: var(--utrecht-form-input-padding-block-start); + font-size: var(--utrecht-form-input-font-size); + line-height: var(--utrecht-button-line-height); } label { @@ -146,7 +139,8 @@ h2 { padding-inline-start: var(--spacing-default); &::placeholder { - color: black; + color: var(--color-primary); + font-style: italic; } } } @@ -218,26 +212,53 @@ details { &[open] > summary::after { transform: rotate(180deg); } + + summary + * { + margin-block-start: 1px; + } } /* TABLES */ -table.overview { +table.overview, +ul.overview { + --column-padding: var(--spacing-default); + width: 100%; - thead { - color: var(--color-white); - background-color: var(--color-tertiary); + thead, + .header-row { + color: var(--color-accent-text); + background: var(--color-accent); + font-weight: 600; } - tr { - border: 1px solid var(--color-tertiary); + > tbody > tr, + > li:not(:first-child) { + border-bottom: 1px solid var(--color-accent); + } + + th, + td, + dt, + dd, + summary > *, + .header-row > * { + padding-block: var(--spacing-small); + padding-inline: var(--column-padding); + } + + li:nth-child(odd) summary, + li:nth-child(odd) details, + tbody > tr:nth-child(even) { + background-color: var(--color-secondary); + } + tr { th, td { text-align: left; - padding-inline: var(--spacing-default); &:not(.wrap) { white-space: nowrap; @@ -245,12 +266,10 @@ table.overview { } td { - padding-block: var(--spacing-default); font-weight: normal; } th { - padding-block: var(--spacing-small); font-weight: 600; } @@ -268,10 +287,20 @@ table.overview { a, button { - color: var(--color-tertiary); + color: inherit; } } +th[aria-sort="descending"] { + @extend .icon-after; + @extend .sort-descending; +} + +th[aria-sort="ascending"] { + @extend .icon-after; + @extend .sort-ascending; +} + tr.row-link { position: relative; @@ -419,3 +448,8 @@ dt { margin-block-start: var(--spacing-small); } } + +// TABS ON DETAIL PAGE +main > h1 + [role="tablist"] { + margin-block-start: var(--spacing-small); +} diff --git a/src/components/BackLink.vue b/src/components/BackLink.vue new file mode 100644 index 000000000..b3111d5fa --- /dev/null +++ b/src/components/BackLink.vue @@ -0,0 +1,28 @@ + + + + + diff --git a/src/components/ExpandableTableList.vue b/src/components/ExpandableTableList.vue index 04147dd80..941b62092 100644 --- a/src/components/ExpandableTableList.vue +++ b/src/components/ExpandableTableList.vue @@ -1,20 +1,20 @@ diff --git a/src/features/search/GlobalSearch.vue b/src/features/search/GlobalSearch.vue index dba6e4064..74035f9a4 100644 --- a/src/features/search/GlobalSearch.vue +++ b/src/features/search/GlobalSearch.vue @@ -16,7 +16,7 @@ diff --git a/src/features/werkbericht/WerkBericht.vue b/src/features/werkbericht/WerkBericht.vue index 5306d6fd0..787f1e7c8 100644 --- a/src/features/werkbericht/WerkBericht.vue +++ b/src/features/werkbericht/WerkBericht.vue @@ -122,18 +122,18 @@ const berichtSelectedInContactmoment = computed(() => { return foundInNieuwsberichten || foundInWerkinstructies; }); -const read = ref(props.bericht.read); +const read = ref(false); +const toggleReadIsLoading = ref(false); watch( () => props.bericht, (b) => { if (!toggleReadIsLoading.value) { - read.value = b.read; + read.value = b?.read ?? false; } }, + { immediate: true }, ); -const toggleReadIsLoading = ref(false); - const toggleRead = (): Promise => { toggleReadIsLoading.value = true; const wasRead = read.value; @@ -242,7 +242,7 @@ article { .save-bericht-to-contactmoment-checkbox { accent-color: var(--color-primary); - transform: scale(1.25) translateY(-1px); + transform: scale(1.25) translateY(10%); margin: 0; } @@ -276,7 +276,7 @@ article { line-height: var(--line-height-default); } - :deep(p) { + .correct-header :deep(p) { &:not(:first-child) { margin-top: 1em; } diff --git a/src/features/zaaksysteem/components/ZaakAlgemeen.vue b/src/features/zaaksysteem/components/ZaakAlgemeen.vue index d459fe6ab..7ebbe80c8 100644 --- a/src/features/zaaksysteem/components/ZaakAlgemeen.vue +++ b/src/features/zaaksysteem/components/ZaakAlgemeen.vue @@ -1,60 +1,44 @@ @@ -69,42 +53,18 @@ defineProps<{ diff --git a/src/layout/TheHeader.vue b/src/layout/TheHeader.vue index 3501b31c1..d77996250 100644 --- a/src/layout/TheHeader.vue +++ b/src/layout/TheHeader.vue @@ -2,37 +2,48 @@