diff --git a/public/locales/fi/translation.json b/public/locales/fi/translation.json index 971ce35a3..4ffee5bce 100644 --- a/public/locales/fi/translation.json +++ b/public/locales/fi/translation.json @@ -266,9 +266,9 @@ "fieldset-info":"Yhteensä {{fieldAmount}} tietuetta.", "no-fields":"Suodatinvalinnalla ei löytynyt tämän otsikon alta suodatettavia kenttiä.", "link-to-map":"Linkki projektin karttapalveluun.", - "add-new-board":"Lisää uusi lautakunta", - "add-new-presence":"Lisää uusi esilläolo", - "add-new-review": "Lisää uusi nähtävilläolo", + "add-new-board":"Lisää lautakunta", + "add-new-presence":"Lisää esilläolo", + "add-new-review": "Lisää nähtävilläolo", "adding":"Lisätään", "saving":"Tietoja tallennetaan", "deleting":"Poistetaan" diff --git a/src/components/ProjectTimeline/VisTimeline.scss b/src/components/ProjectTimeline/VisTimeline.scss index bda92d3ee..264f58193 100644 --- a/src/components/ProjectTimeline/VisTimeline.scss +++ b/src/components/ProjectTimeline/VisTimeline.scss @@ -65,7 +65,6 @@ } .timeline-menu-container { - padding-top: $size12; position: sticky; top: 0; background-color: #ffffff; @@ -78,6 +77,7 @@ align-items: center; .time-menu{ padding-left: 291px; + padding-top: $size12; button { --min-size: $size32; //hds syntax width: $size44; @@ -103,6 +103,7 @@ } } .today-menu{ + padding-top: $size12; button { --min-size: $size32; //hds syntax height: $size44; @@ -150,7 +151,6 @@ color: $black1; border: 1px #1A1A1A solid; border-radius: $size16; - margin-bottom: $size12; margin-right: $size16; &:hover { background-color: $color-black-20; @@ -178,7 +178,6 @@ border: 1px #1A1A1A solid; border-radius: $size16; outline-offset: 2px; - margin-bottom: $size16; margin-right: $size16; outline: 3px solid $color-coat-of-arms; } @@ -330,6 +329,10 @@ &.past { background: $color-gray; } + &.board-only { + background-color: transparent; + left: 0; + } } .vis-dot.board-only{ @@ -957,6 +960,8 @@ .foreground-highlight{ background-color: #F0F0FF80; + z-index: 100; + min-height: 36px; } .january-first { border-left:$size1 solid $border-gray4 !important; diff --git a/src/components/ProjectTimeline/VisTimelineGroup.jsx b/src/components/ProjectTimeline/VisTimelineGroup.jsx index 5aa3888bb..3e9f27163 100644 --- a/src/components/ProjectTimeline/VisTimelineGroup.jsx +++ b/src/components/ProjectTimeline/VisTimelineGroup.jsx @@ -333,7 +333,6 @@ const VisTimelineGroup = forwardRef(({ groups, items, deadlines, visValues, dead const openDialog = (data, container) => { const groupId = data.id; - const phaseId = `${data?.phaseID}_${data?.id}`; const timelineElement = timelineRef?.current; setToggleTimelineModal(prev => { @@ -351,7 +350,7 @@ const VisTimelineGroup = forwardRef(({ groups, items, deadlines, visValues, dead if (timelineElement) { removeHighlights(timelineElement); - addHighlights(timelineElement, phaseId, data, container); + addHighlights(timelineElement, data, container); } setTimelineData({group: data.nestedInGroup, content: data.content}); @@ -375,31 +374,34 @@ const VisTimelineGroup = forwardRef(({ groups, items, deadlines, visValues, dead }); }; - const addHighlights = (timelineElement, phaseId, data, container) => { - if (phaseId && timelineElement) { - const matchedItem = timelineElement.querySelector(`.vis-item[class*="${phaseId}"]`); - if (matchedItem) { - const groupEl = matchedItem.closest(".vis-group"); + const addHighlights = (timelineElement, data, container) => { + // Remove previous highlights + timelineElement + .querySelectorAll(".vis-group.foreground-highlight") + .forEach(el => el.classList.remove("foreground-highlight")); + + // setTimeout(..., 0) ensures DOM elements are rendered before highlighting; + // without it, elements may not exist yet, causing highlight logic to fail. + setTimeout(() => { + if (timelineElement && data?.deadlinegroup) { + const groupEls = timelineElement.querySelectorAll(`.vis-group.${data.deadlinegroup}`); + const groupEl = Array.from(groupEls).find( + el => el.parentElement?.classList?.contains('vis-foreground') + ); + groupEl?.classList?.add("foreground-highlight"); if (groupEl) { - localStorage.setItem('timelineHighlightedElement', phaseId); - groupEl.classList.add("foreground-highlight"); + localStorage.setItem('timelineHighlightedElement', data.deadlinegroup); } } - } - if (container) { + container?.classList?.add("highlight-selected"); - if (container.parentElement.parentElement) { - container.parentElement.parentElement.classList.add("highlight-selected"); - } + container?.parentElement?.parentElement?.classList?.add("highlight-selected"); localStorage.setItem('menuHighlight', data.className ? data.className : false); - } - const groupContainer = timelineElement.querySelector(`#timeline-group-${data.id}`); - if (groupContainer) { - groupContainer.classList.add("highlight-selected"); - if (groupContainer.parentElement.parentElement) { - groupContainer.parentElement.parentElement.classList.add("highlight-selected"); - } - } + + const groupContainer = timelineElement.querySelector(`#timeline-group-${data.id}`); + groupContainer?.classList?.add("highlight-selected"); + groupContainer?.parentElement?.parentElement?.classList?.add("highlight-selected"); + }, 0); }; const handleClosePanel = () => { diff --git a/src/components/common/Fonts.scss b/src/components/common/Fonts.scss index 7e439e964..a0a32c074 100644 --- a/src/components/common/Fonts.scss +++ b/src/components/common/Fonts.scss @@ -1,7 +1,6 @@ @font-face { font-family: 'Helsinki Grotesk Regular'; - src: url('../../assets/fonts/HelsinkiGrotesk-Regular.woff2') format('woff2'), - url('../../assets/fonts/HelsinkiGrotesk-Regular.woff') format('woff'), + src: url('../../assets/fonts/HelsinkiGrotesk-Regular.woff') format('woff'), url('../../assets/fonts/HelsinkiGrotesk-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; @@ -10,8 +9,7 @@ @font-face { font-family: 'Helsinki Grotesk Bold'; - src: url('../../assets/fonts/HelsinkiGrotesk-Bold.woff2') format('woff2'), - url('../../assets/fonts/HelsinkiGrotesk-Bold.woff') format('woff'), + src: url('../../assets/fonts/HelsinkiGrotesk-Bold.woff') format('woff'), url('../../assets/fonts/HelsinkiGrotesk-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; @@ -20,8 +18,7 @@ @font-face { font-family: 'Helsinki Grotesk Medium'; - src: url('../../assets/fonts/HelsinkiGrotesk-Medium.woff2') format('woff2'), - url('../../assets/fonts/HelsinkiGrotesk-Medium.woff') format('woff'), + src: url('../../assets/fonts/HelsinkiGrotesk-Medium.woff') format('woff'), url('../../assets/fonts/HelsinkiGrotesk-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; @@ -30,8 +27,7 @@ @font-face { font-family: 'Helsinki Grotesk Medium Italic'; - src: url('../../assets/fonts/HelsinkiGrotesk-MediumItalic.woff2') format('woff2'), - url('../../assets/fonts/HelsinkiGrotesk-MediumItalic.woff') format('woff'), + src: url('../../assets/fonts/HelsinkiGrotesk-MediumItalic.woff') format('woff'), url('../../assets/fonts/HelsinkiGrotesk-MediumItalic.ttf') format('truetype'); font-weight: 500; font-style: italic; diff --git a/src/components/common/_Common.scss b/src/components/common/_Common.scss index 7088b0567..b99201989 100644 --- a/src/components/common/_Common.scss +++ b/src/components/common/_Common.scss @@ -1150,13 +1150,17 @@ header{ padding-left: $size34 !important; padding-top: $size16 !important; padding-bottom: $size24 !important; + font-family: 'Helsinki Grotesk Medium', sans-serif !important; .button-primary,.button-danger,.button-secondary { margin-right: $size16; } .button-secondary{ border: 2px solid $color-error; - color: $color-error + color: $color-error; + &:hover { + background-color: $color-error-light; + } } } } diff --git a/src/components/common/colors.scss b/src/components/common/colors.scss index 8e955dd47..7941311b3 100644 --- a/src/components/common/colors.scss +++ b/src/components/common/colors.scss @@ -96,7 +96,7 @@ $color-black-5: #F2F2F2; $color-black-10: #e5e5e5; $color-black-20: #ccc; $color-black-30: #b2b2b2; -$color-black-40: #999898; +$color-black-40: #999999; $color-black-50: #808080; $color-black-60: #666; $color-black-70: #4c4c4c; diff --git a/src/components/project/EditProjectTimetableModal/index.jsx b/src/components/project/EditProjectTimetableModal/index.jsx index 440b1ac80..43b9fe4d8 100644 --- a/src/components/project/EditProjectTimetableModal/index.jsx +++ b/src/components/project/EditProjectTimetableModal/index.jsx @@ -618,6 +618,7 @@ class EditProjectTimeTableModal extends Component { startDate = formValues && formValues["hyvaksymispaatos_pvm"] ? new Date(formValues["hyvaksymispaatos_pvm"]) : phaseStart + startDate.setHours(12, 0, 0, 0); } else{ //If formValues has deadline.attribute use that values, it if not then use deadline[i].date in startDate. diff --git a/src/components/projectEdit/ProjectEdit.scss b/src/components/projectEdit/ProjectEdit.scss index 06793c07e..7f1e8c665 100644 --- a/src/components/projectEdit/ProjectEdit.scss +++ b/src/components/projectEdit/ProjectEdit.scss @@ -591,8 +591,9 @@ } &::-webkit-scrollbar-track { - background-color: transparent; - margin-block-start: 165px; + background-color: #D8D8D8; + margin-block-start: 155px; + margin-block-end: 4px; } .timeline-group-header { @@ -658,7 +659,7 @@ justify-content: flex-start; margin:0; div{ - margin: $size12; + margin: $size10; } span{ color: $black1; @@ -673,7 +674,6 @@ color: $color-black-40 !important; cursor: not-allowed; pointer-events: none; - border: none; span { color: $color-black-40 !important; } @@ -685,7 +685,7 @@ } .add-button-info{ - color: $color-info; + color: #0062b9; padding-left: $size48; padding-right: $size24; padding-bottom: $size12; @@ -710,6 +710,10 @@ margin: 0px 0 0 0 !important; border-top: 1px solid #808080 !important; background-color: #fff !important; + font-family: 'Helsinki Grotesk Medium', sans-serif !important; + font-size: $size16; + font-weight: 500; + line-height: $size24; .form-buttons{ margin-top: 24px; margin-bottom: 24px; @@ -738,12 +742,6 @@ } .timeline-edit-right{ -/* max-height: 79vh; - max-width: 513px !important; - margin: auto 8px auto auto !important; - position: relative !important; - margin-top: 70px !important; - overflow-y: auto; */ height: calc(98% - 177px); max-width: 529px !important; position: absolute !important;