From 575c0adf60663029922b31ff454a32017a29bd1b Mon Sep 17 00:00:00 2001 From: "Petter H. Juliussen" <petter.juliussen@origo.oslo.kommune.no> Date: Wed, 18 Oct 2023 11:00:00 +0200 Subject: [PATCH] Use less flamboyant color coding of objectives and key results --- src/components/KeyResultLinkCard.vue | 6 +-- src/components/panes/KeyResultPane.vue | 73 +++++++++++--------------- src/components/panes/ObjectivePane.vue | 29 +++++----- src/locale/locales/en-US.json | 2 +- src/locale/locales/nb-NO.json | 2 +- 5 files changed, 52 insertions(+), 60 deletions(-) diff --git a/src/components/KeyResultLinkCard.vue b/src/components/KeyResultLinkCard.vue index 243adb939..6c876de2f 100644 --- a/src/components/KeyResultLinkCard.vue +++ b/src/components/KeyResultLinkCard.vue @@ -31,7 +31,7 @@ </div> </div> - <progress-bar :progression="progression" skin="yellow" compact /> + <progress-bar :progression="progression" compact /> </div> </a> </router-link> @@ -111,8 +111,8 @@ export default { &--active { color: var(--color-hover); - background-color: var(--color-yellow-5); - border-color: var(--color-yellow); + background-color: var(--color-blue-5); + border: 2px solid var(--color-hover); } } diff --git a/src/components/panes/KeyResultPane.vue b/src/components/panes/KeyResultPane.vue index 154fd5644..97f4e15e6 100644 --- a/src/components/panes/KeyResultPane.vue +++ b/src/components/panes/KeyResultPane.vue @@ -13,11 +13,13 @@ :breadcrumbs="breadcrumbs" /> + <h1 class="key-result-pane__title pkt-txt-18-medium"> + {{ $t('general.keyResult') }} + </h1> + <div class="key-result-pane__details"> <div class="key-result-pane__header"> - <pkt-tag text-style="normal-text" skin="yellow"> - {{ $t('general.keyResult') }} - </pkt-tag> + <h2 class="pkt-txt-18-medium">{{ activeKeyResult.name }}</h2> <pkt-button v-if="hasEditRights" @@ -30,31 +32,17 @@ /> </div> - <h2 class="pkt-txt-18-medium">{{ activeKeyResult.name }}</h2> - <HTML-output v-if="activeKeyResult.description" class="key-result-pane__description" :html="activeKeyResult.description" /> - <h4 class="pkt-txt-14-medium">{{ $t('keyResult.progression') }}:</h4> - - <svg ref="graph" class="key-result-pane__graph"></svg> - - <progress-bar - :progression="progression" - :right-label="progressionRightLabel" - skin="yellow" - /> - </div> - - <div class="key-result-pane__values"> - <div class="key-result-pane__values-header"> - <h3 class="pkt-txt-16-medium">{{ $t('keyResult.registeredValues') }}</h3> + <div class="key-result-pane__progression"> + <h4 class="pkt-txt-14-medium">{{ $t('keyResult.progression') }}</h4> <pkt-button v-if="hasEditRights" - :text="$t('keyResult.newValue')" + :text="$t('widget.history.value')" skin="primary" size="small" variant="icon-left" @@ -63,6 +51,14 @@ /> </div> + <svg ref="graph" class="key-result-pane__graph"></svg> + + <progress-bar :progression="progression" :right-label="progressionRightLabel" /> + </div> + + <div class="key-result-pane__values"> + <h3 class="pkt-txt-16-medium">{{ $t('keyResult.registeredValues') }}</h3> + <div v-if="isLoading"> <loading-small /> {{ $t('general.loading') }} @@ -124,7 +120,7 @@ import Progress from '@/db/Progress'; import LineChart from '@/util/LineChart'; import { getRandomInt } from '@/util'; import { getKeyResultProgressDetails } from '@/util/keyResultProgress'; -import { PktAlert, PktBreadcrumbs, PktButton, PktTag } from '@oslokommune/punkt-vue2'; +import { PktAlert, PktBreadcrumbs, PktButton } from '@oslokommune/punkt-vue2'; import PaneWrapper from '@/components/panes/PaneWrapper.vue'; // import WidgetKeyResultNotes from '@/components/widgets/WidgetKeyResultNotes.vue'; import WidgetKeyResultDetails from '@/components/widgets/WidgetKeyResultDetails.vue'; @@ -142,7 +138,6 @@ export default { PktAlert, PktButton, PktBreadcrumbs, - PktTag, PaneWrapper, // WidgetKeyResultNotes, WidgetKeyResultDetails, @@ -333,7 +328,13 @@ export default { @use '@oslokommune/punkt-css/dist/scss/abstracts/mixins/typography' as *; .key-result-pane { - background-color: #faf6f1; + background-color: var(--color-gray); + + &__title { + @include bp('laptop-up') { + margin-top: 2rem; + } + } &__details { display: flex; @@ -341,11 +342,7 @@ export default { gap: 1rem; padding: 1.5rem; background-color: var(--color-white); - border-left: 0.25rem solid var(--color-yellow-50); - - @include bp('laptop-up') { - margin-top: 2rem; - } + border-left: 0.125rem solid var(--color-yellow-50); } &__header { @@ -358,27 +355,21 @@ export default { } } + &__progression { + display: flex; + align-items: center; + justify-content: space-between; + margin-top: 0.5rem; + } + &__values { margin-top: 3rem; - - &-header { - display: flex; - align-items: center; - justify-content: space-between; - margin-bottom: 1rem; - } } &__table { margin-top: 1rem; } - &__graph { - --graph-value-line: var(--color-yellow); - --graph-symbol-fill: var(--color-yellow); - --graph-symbol-color: var(--color-yellow-100); - } - &__widgets { margin-top: 3rem; diff --git a/src/components/panes/ObjectivePane.vue b/src/components/panes/ObjectivePane.vue index d0164ca9e..daf8c775b 100644 --- a/src/components/panes/ObjectivePane.vue +++ b/src/components/panes/ObjectivePane.vue @@ -11,11 +11,13 @@ :breadcrumbs="breadcrumbs" /> + <h1 class="objective-pane__title pkt-txt-18-medium"> + {{ $t('general.objective') }} + </h1> + <div class="objective-pane__details"> <div class="objective-pane__header"> - <pkt-tag text-style="normal-text" skin="blue"> - {{ $t('general.objective') }} - </pkt-tag> + <h2 class="pkt-txt-18-medium">{{ activeObjective.name }}</h2> <pkt-button v-if="hasEditRights" @@ -28,8 +30,6 @@ /> </div> - <h2 class="pkt-txt-18-medium">{{ activeObjective.name }}</h2> - <HTML-output v-if="activeObjective.description" class="objective-pane__description" @@ -78,7 +78,7 @@ <h3 class="pkt-txt-16-medium">{{ $t('general.keyResults') }}</h3> <pkt-button v-if="hasEditRights" - :text="$t('btn.createKeyResult')" + :text="$t('general.keyResult')" skin="primary" size="small" variant="icon-left" @@ -146,7 +146,7 @@ <script> import { format } from 'd3-format'; import { mapGetters, mapState } from 'vuex'; -import { PktBreadcrumbs, PktButton, PktTag } from '@oslokommune/punkt-vue2'; +import { PktBreadcrumbs, PktButton } from '@oslokommune/punkt-vue2'; import draggable from 'vuedraggable'; import { compareKeyResults, contributorTagColor, contributorTagMode } from '@/util/okr'; import { dateLong, periodDates, uniqueBy } from '@/util'; @@ -174,7 +174,6 @@ export default { LoadingSmall, PktBreadcrumbs, PktButton, - PktTag, ProgressBar, WidgetWeights, WidgetObjectiveDetails, @@ -274,7 +273,13 @@ export default { @use '@oslokommune/punkt-css/dist/scss/abstracts/mixins/typography' as *; .objective-pane { - background-color: #f5f5f8; + background-color: var(--color-gray-light); + + &__title { + @include bp('laptop-up') { + margin-top: 2rem; + } + } &__details { display: flex; @@ -282,11 +287,7 @@ export default { gap: 1rem; padding: 1.5rem; background-color: var(--color-white); - border-left: 0.25rem solid var(--color-blue-light); - - @include bp('laptop-up') { - margin-top: 2rem; - } + border-left: 0.125rem solid var(--color-blue); } &__header { diff --git a/src/locale/locales/en-US.json b/src/locale/locales/en-US.json index 00f73c2c6..c3e9c7b86 100644 --- a/src/locale/locales/en-US.json +++ b/src/locale/locales/en-US.json @@ -347,7 +347,7 @@ "description": "Description", "startValue": "Start value", "targetValue": "Target value", - "progression": "Progression", + "progression": "Key result progression:", "unit": "Unit of measurement", "defaultUnit": "percent", "newValue": "New value", diff --git a/src/locale/locales/nb-NO.json b/src/locale/locales/nb-NO.json index 2b6bd4c11..ff50aa020 100644 --- a/src/locale/locales/nb-NO.json +++ b/src/locale/locales/nb-NO.json @@ -347,7 +347,7 @@ "description": "Beskrivelse", "startValue": "Startverdi", "targetValue": "Målverdi", - "progression": "Progresjon", + "progression": "Progresjon for nøkkelresultatet:", "unit": "Måleenhet", "defaultUnit": "prosent", "newValue": "Ny verdi",