From 3bff490e90e315d9025d821ee9a27f0469b6a331 Mon Sep 17 00:00:00 2001 From: Marcella Maki Date: Tue, 14 May 2024 12:18:50 -0400 Subject: [PATCH 1/3] upgrade KDS version to latest, which updates the points icon to match the new brand --- kolibri/core/package.json | 2 +- packages/kolibri-core-for-export/package.json | 2 +- yarn.lock | 17 +++++++++++++---- 3 files changed, 15 insertions(+), 6 deletions(-) diff --git a/kolibri/core/package.json b/kolibri/core/package.json index b9bb026cda2..ec9c26b809a 100644 --- a/kolibri/core/package.json +++ b/kolibri/core/package.json @@ -21,7 +21,7 @@ "js-cookie": "^3.0.5", "knuth-shuffle-seeded": "^1.0.6", "kolibri-constants": "0.2.0", - "kolibri-design-system": "4.2.0", + "kolibri-design-system": "4.3.0", "lockr": "0.8.5", "lodash": "^4.17.21", "loglevel": "^1.8.1", diff --git a/packages/kolibri-core-for-export/package.json b/packages/kolibri-core-for-export/package.json index b64ba80e7c0..b734d33ec2b 100644 --- a/packages/kolibri-core-for-export/package.json +++ b/packages/kolibri-core-for-export/package.json @@ -24,7 +24,7 @@ "js-cookie": "^3.0.5", "knuth-shuffle-seeded": "^1.0.6", "kolibri-constants": "0.2.0", - "kolibri-design-system": "4.2.0", + "kolibri-design-system": "4.3.0", "lockr": "0.8.5", "lodash": "^4.17.21", "loglevel": "^1.8.1", diff --git a/yarn.lock b/yarn.lock index 2eebc9b22b6..cbfe2cbe5a4 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2284,6 +2284,15 @@ aphrodite@1.1.0: asap "^2.0.3" inline-style-prefixer "^2.0.0" +"aphrodite@git+https://github.com/learningequality/aphrodite.git": + version "2.2.3" + uid fdc8d7be8912a5cf17f74ff10f124013c52c3e32 + resolved "git+https://github.com/learningequality/aphrodite.git#fdc8d7be8912a5cf17f74ff10f124013c52c3e32" + dependencies: + asap "^2.0.3" + inline-style-prefixer "^4.0.2" + string-hash "^1.1.3" + "aphrodite@https://github.com/learningequality/aphrodite/": version "2.2.3" resolved "https://github.com/learningequality/aphrodite/#fdc8d7be8912a5cf17f74ff10f124013c52c3e32" @@ -7567,10 +7576,10 @@ kolibri-constants@0.2.0: resolved "https://registry.yarnpkg.com/kolibri-constants/-/kolibri-constants-0.2.0.tgz#47c9d773894e23251ba5ac4db420822e45603142" integrity sha512-WYDMGDzB9gNxRbpX1O2cGe1HrJvLvSZGwMuAv6dqrxJgPf7iO+Hi40/1CXjHM7nk5CRt+hn5bqnMzCBmj1omPA== -kolibri-design-system@4.2.0: - version "4.2.0" - resolved "https://registry.yarnpkg.com/kolibri-design-system/-/kolibri-design-system-4.2.0.tgz#7ef5355ecfd330893e4f9b37ec2bcad6b4cd9e56" - integrity sha512-50lkYsPIx0zfrbAwsEC5QPMJcpmZGmne8BhFVtgcWS4xEn6Uc6BefHQAxqZriomnLRd5otAP3XwFkrkycly0fA== +kolibri-design-system@4.3.0: + version "4.3.0" + resolved "https://registry.yarnpkg.com/kolibri-design-system/-/kolibri-design-system-4.3.0.tgz#feefc61bfa9ab3c098281751d8ad582d91639108" + integrity sha512-uHtqoXQSdb8ID8uMU3A1EdlZ4JXlLLkvzOt4MgURDatVz+6d9Yc4Y9GtolkcDLgeMoUq+FqojbQKjD4i1fH1pw== dependencies: "@vue/composition-api" "1.7.2" aphrodite "https://github.com/learningequality/aphrodite/" From c22bda9dc5efbf26dc70f945fa8a3df99ffd1871 Mon Sep 17 00:00:00 2001 From: Marcella Maki Date: Tue, 14 May 2024 13:32:16 -0400 Subject: [PATCH 2/3] Set points icon to blue in AppBar --- kolibri/core/assets/src/views/AppBar.vue | 1 + 1 file changed, 1 insertion(+) diff --git a/kolibri/core/assets/src/views/AppBar.vue b/kolibri/core/assets/src/views/AppBar.vue index a238ad7da9e..0691801c2e6 100644 --- a/kolibri/core/assets/src/views/AppBar.vue +++ b/kolibri/core/assets/src/views/AppBar.vue @@ -60,6 +60,7 @@ ref="pointsButton" icon="pointsActive" :ariaLabel="$tr('pointsAriaLabel')" + :color="$themeTokens.primary" />
{{ $formatNumber(totalPoints) }} From 7d4d35b5e8c378ecee28c35a762beb7ea1c13922 Mon Sep 17 00:00:00 2001 From: Marcella Maki Date: Tue, 14 May 2024 16:20:33 -0400 Subject: [PATCH 3/3] Remove now-unnecessary PointsIcon component, and refactor for simpler icon usage. Minor styling tweak to correct alignment after this --- kolibri/core/assets/src/core-app/apiSpec.js | 2 -- kolibri/core/assets/src/views/AppBar.vue | 2 +- .../assets/src/views/PointsIcon/index.vue | 32 ------------------- kolibri/core/assets/src/views/TotalPoints.vue | 10 +++--- .../src/views/CompletionModal/index.vue | 8 +++-- .../assets/src/views/ProfilePage/index.vue | 7 ++-- 6 files changed, 14 insertions(+), 47 deletions(-) delete mode 100644 kolibri/core/assets/src/views/PointsIcon/index.vue diff --git a/kolibri/core/assets/src/core-app/apiSpec.js b/kolibri/core/assets/src/core-app/apiSpec.js index 3a806490170..876110d004b 100644 --- a/kolibri/core/assets/src/core-app/apiSpec.js +++ b/kolibri/core/assets/src/core-app/apiSpec.js @@ -45,7 +45,6 @@ import CoreLogo from '../views/CoreLogo'; import LanguageSwitcherList from '../views/language-switcher/LanguageSwitcherList'; import LanguageSwitcherModal from '../views/language-switcher/LanguageSwitcherModal'; import ElapsedTime from '../views/ElapsedTime'; -import PointsIcon from '../views/PointsIcon'; import TotalPoints from '../views/TotalPoints'; import AuthMessage from '../views/AuthMessage'; import FilterTextbox from '../views/FilterTextbox'; @@ -169,7 +168,6 @@ export default { LanguageSwitcherModal, LanguageSwitcherList, ElapsedTime, - PointsIcon, TotalPoints, AuthMessage, FilterTextbox, diff --git a/kolibri/core/assets/src/views/AppBar.vue b/kolibri/core/assets/src/views/AppBar.vue index 0691801c2e6..ab14d94092f 100644 --- a/kolibri/core/assets/src/views/AppBar.vue +++ b/kolibri/core/assets/src/views/AppBar.vue @@ -56,7 +56,7 @@ > - - -
- - -
- - - - - - - - diff --git a/kolibri/core/assets/src/views/TotalPoints.vue b/kolibri/core/assets/src/views/TotalPoints.vue index b0ec1c0f4ba..4086f40ae0c 100644 --- a/kolibri/core/assets/src/views/TotalPoints.vue +++ b/kolibri/core/assets/src/views/TotalPoints.vue @@ -2,7 +2,10 @@
- +
{{ $formatNumber(totalPoints) }} @@ -22,13 +25,9 @@ import { mapGetters, mapActions } from 'vuex'; import responsiveWindowMixin from 'kolibri.coreVue.mixins.responsiveWindowMixin'; - import PointsIcon from 'kolibri.coreVue.components.PointsIcon'; export default { name: 'TotalPoints', - components: { - PointsIcon, - }, mixins: [responsiveWindowMixin], computed: { ...mapGetters(['totalPoints', 'currentUserId', 'isUserLoggedIn']), @@ -63,7 +62,6 @@ height: 32px; text-align: center; // Aligns the round background with its siblings - vertical-align: middle; border-radius: 100%; } diff --git a/kolibri/plugins/learn/assets/src/views/CompletionModal/index.vue b/kolibri/plugins/learn/assets/src/views/CompletionModal/index.vue index 86eecc3a451..dc4e77d123c 100644 --- a/kolibri/plugins/learn/assets/src/views/CompletionModal/index.vue +++ b/kolibri/plugins/learn/assets/src/views/CompletionModal/index.vue @@ -62,7 +62,11 @@ {{ $tr('plusPoints', { points }) }} - +
{{ $tr('keepUpTheGreatProgress') }}
@@ -148,7 +152,6 @@ import UiAlert from 'kolibri-design-system/lib/keen/UiAlert'; import { MaxPointsPerContent } from 'kolibri.coreVue.vuex.constants'; import FocusTrap from 'kolibri.coreVue.components.FocusTrap'; - import PointsIcon from 'kolibri.coreVue.components.PointsIcon'; import { ContentNodeResource } from 'kolibri.resources'; import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings'; import { currentDeviceData } from '../../composables/useDevices'; @@ -173,7 +176,6 @@ name: 'CompletionModal', components: { FocusTrap, - PointsIcon, CompletionModalSection, ResourceItem, UiAlert, diff --git a/kolibri/plugins/user_profile/assets/src/views/ProfilePage/index.vue b/kolibri/plugins/user_profile/assets/src/views/ProfilePage/index.vue index 7e48e89ed48..01feaa35ed5 100644 --- a/kolibri/plugins/user_profile/assets/src/views/ProfilePage/index.vue +++ b/kolibri/plugins/user_profile/assets/src/views/ProfilePage/index.vue @@ -32,7 +32,10 @@ {{ $tr('points') }} - + {{ $formatNumber(totalPoints) }} @@ -192,7 +195,6 @@ import pickBy from 'lodash/pickBy'; import responsiveWindowMixin from 'kolibri.coreVue.mixins.responsiveWindowMixin'; import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings'; - import PointsIcon from 'kolibri.coreVue.components.PointsIcon'; import PermissionsIcon from 'kolibri.coreVue.components.PermissionsIcon'; import UserTypeDisplay from 'kolibri.coreVue.components.UserTypeDisplay'; import { PermissionTypes } from 'kolibri.coreVue.vuex.constants'; @@ -218,7 +220,6 @@ NotificationsRoot, GenderDisplayText, PermissionsIcon, - PointsIcon, UserTypeDisplay, }, mixins: [responsiveWindowMixin, commonCoreStrings],