From 00715d2232196b11c77d6cdefada6cd36995f628 Mon Sep 17 00:00:00 2001 From: Rafal Paradowski Date: Tue, 3 Dec 2024 12:53:40 +0100 Subject: [PATCH 01/29] Use notify_team_new_comment workflow action from .github repo --- .github/workflows/notify_team_new_comment.yml | 30 ++----------------- 1 file changed, 3 insertions(+), 27 deletions(-) diff --git a/.github/workflows/notify_team_new_comment.yml b/.github/workflows/notify_team_new_comment.yml index f3ceae972..07a837e4d 100644 --- a/.github/workflows/notify_team_new_comment.yml +++ b/.github/workflows/notify_team_new_comment.yml @@ -6,30 +6,6 @@ on: jobs: contributor_issue_comment: - name: Contributor issue comment - - if: >- - ${{ - !github.event.issue.pull_request && - github.event.comment.author_association != 'MEMBER' && - github.event.comment.author_association != 'OWNER' - }} - - runs-on: ubuntu-latest - steps: - - name: Escape title double quotes - id: escape_title - env: - ISSUE_TITLE: ${{ github.event.issue.title }} - run: echo "ISSUE_TITLE=${ISSUE_TITLE//\"/\\\"}" >> "$GITHUB_OUTPUT" - - - name: Send message to Slack channel - env: - SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }} - SLACK_WEBHOOK_TYPE: INCOMING_WEBHOOK - uses: slackapi/slack-github-action@v1.27.0 - with: - payload: | - { - "text": "*[KDS] New comment on issue: <${{ github.event.issue.html_url }}#issuecomment-${{ github.event.comment.id }}|${{ steps.escape_title.outputs.ISSUE_TITLE }} by ${{ github.event.comment.user.login }}>*" - } + uses: learningequality/.github/.github/workflows/notify_team_new_comment.yml@main + secrets: + SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }} From 35ea6700425c7daaf1a61eff6a8dbb5499563e91 Mon Sep 17 00:00:00 2001 From: Michaela Robosova Date: Thu, 5 Dec 2024 16:28:58 +0100 Subject: [PATCH 02/29] Prepend KCard class names with 'k' to prevent from aggressive overrides from global Vuetify styles in Studio, for example when KCard's '.title' styles were changed unexpectedly by the Vuetify '.title' styles. --- lib/cards/KCard.vue | 150 ++++++++++++++++++------------------- lib/cards/KCardGrid.vue | 8 +- lib/cards/SkeletonCard.vue | 18 ++--- 3 files changed, 88 insertions(+), 88 deletions(-) diff --git a/lib/cards/KCard.vue b/lib/cards/KCard.vue index a3f9581d4..913144b51 100644 --- a/lib/cards/KCard.vue +++ b/lib/cards/KCard.vue @@ -5,7 +5,7 @@ to allow for @click.stop on buttons and similar rendered within a card via its slots -->
  • -
    -
    +
    +
    - + {{ title }} @@ -115,7 +115,7 @@
    @@ -125,7 +125,7 @@
    @@ -153,7 +153,7 @@
    @@ -166,7 +166,7 @@ -->
    @@ -395,7 +395,7 @@ this.thumbnailDisplay === ThumbnailDisplays.LARGE ) { return { - cardAreaClasses: ['vertical-with-large-thumbnail'], + cardAreaClasses: ['k-vertical-with-large-thumbnail'], thumbnailAspectRatio: undefined, thumbnailStyles: { ...thumbnailCommonStyles, @@ -409,7 +409,7 @@ this.thumbnailDisplay === ThumbnailDisplays.SMALL ) { return { - cardAreaClasses: ['vertical-with-small-thumbnail'], + cardAreaClasses: ['k-vertical-with-small-thumbnail'], thumbnailAspectRatio: undefined, thumbnailStyles: { ...thumbnailCommonStyles, @@ -423,7 +423,7 @@ this.thumbnailDisplay === ThumbnailDisplays.NONE ) { return { - cardAreaClasses: ['vertical-with-none-thumbnail'], + cardAreaClasses: ['k-vertical-with-none-thumbnail'], thumbnailAspectRatio: undefined, thumbnailStyles: undefined, }; @@ -435,8 +435,8 @@ ) { return { cardAreaClasses: [ - 'horizontal-with-large-thumbnail', - `thumbnail-align-${this.thumbnailAlign}`, + 'k-horizontal-with-large-thumbnail', + `k-thumbnail-align-${this.thumbnailAlign}`, ], thumbnailAspectRatio: undefined, thumbnailStyles: { @@ -452,8 +452,8 @@ ) { return { cardAreaClasses: [ - 'horizontal-with-small-thumbnail', - `thumbnail-align-${this.thumbnailAlign}`, + 'k-horizontal-with-small-thumbnail', + `k-thumbnail-align-${this.thumbnailAlign}`, ], thumbnailAspectRatio: '1:1', thumbnailStyles: { @@ -468,7 +468,7 @@ this.thumbnailDisplay === ThumbnailDisplays.NONE ) { return { - cardAreaClasses: ['horizontal-with-none-thumbnail'], + cardAreaClasses: ['k-horizontal-with-none-thumbnail'], thumbnailAspectRatio: undefined, thumbnailStyles: undefined, }; @@ -560,18 +560,18 @@ list-style-type: none; cursor: pointer; - &.with-selection-controls { + &.k-with-selection-controls { display: flex; flex-direction: row-reverse; align-items: center; - .selection-control { + .k-selection-control { margin-right: 20px; } } } - .card-area { + .k-card-area { @extend %dropshadow-2dp; display: flex; @@ -589,13 +589,13 @@ } } - .heading { + .k-heading { font-size: 16px; font-weight: 600; line-height: 1.5; } - .title { + .k-title { display: inline-block; // allows title placeholder in the skeleton card width: 100%; // allows title placeholder in the skeleton card color: inherit; @@ -607,19 +607,19 @@ // are grouped together in all layoyts, abstract them // into one whole here. Simplifies common spacing // styles as well as layout-specific styles. - .around-title { + .k-around-title { display: flex; flex-direction: column; - .heading { + .k-heading { order: 2; } - .above-title { + .k-above-title { order: 1; } - .below-title { + .k-below-title { order: 3; } } @@ -627,42 +627,42 @@ /************* Spacing *************/ // first reset - .around-title, - .heading, - .above-title, - .below-title, - .footer { + .k-around-title, + .k-heading, + .k-above-title, + .k-below-title, + .k-footer { padding: 0; margin: 0; } /* stylelint-disable no-duplicate-selectors */ - .around-title { + .k-around-title { padding: $spacer; } /* stylelint-enable no-duplicate-selectors */ - .footer { + .k-footer { padding: 0 $spacer $spacer $spacer; } - .above-title { + .k-above-title { padding-bottom: calc(#{$spacer} / 2); } - .below-title { + .k-below-title { padding-top: calc(#{$spacer} / 2); } /************* Thumbnail **************/ /* stylelint-disable no-duplicate-selectors */ - .thumbnail { + .k-thumbnail { position: relative; /* for absolute positioning of .thumbnail-placeholder */ } /* stylelint-enable no-duplicate-selectors */ - .thumbnail-placeholder { + .k-thumbnail-placeholder { position: absolute; top: 0; right: 0; @@ -677,86 +677,86 @@ /************* Layout-specific styles *************/ - .vertical-with-large-thumbnail { - .upper-card-area { + .k-vertical-with-large-thumbnail { + .k-upper-card-area { display: flex; flex-direction: column; } - .thumbnail { + .k-thumbnail { order: 1; height: 180px; } - .around-title { + .k-around-title { order: 2; } } - .vertical-with-small-thumbnail { + .k-vertical-with-small-thumbnail { /* stylelint-disable scss/at-extend-no-missing-placeholder */ - @extend .vertical-with-large-thumbnail; + @extend .k-vertical-with-large-thumbnail; /* stylelint-enable scss/at-extend-no-missing-placeholder */ - .thumbnail { + .k-thumbnail { height: calc(180px - #{$spacer}); margin: $spacer $spacer 0; } } - .horizontal-with-small-thumbnail { - .upper-card-area { + .k-horizontal-with-small-thumbnail { + .k-upper-card-area { display: flex; flex-direction: row; align-items: flex-start; } - .thumbnail { + .k-thumbnail { width: 30%; margin-top: $spacer; margin-bottom: $spacer; } - .around-title { + .k-around-title { width: 70%; } - &.thumbnail-align-left { - .thumbnail { + &.k-thumbnail-align-left { + .k-thumbnail { order: 1; margin-left: $spacer; } - .around-title { + .k-around-title { order: 2; } } - &.thumbnail-align-right { - .thumbnail { + &.k-thumbnail-align-right { + .k-thumbnail { order: 2; margin-right: $spacer; } - .around-title { + .k-around-title { order: 1; } } } - .horizontal-with-large-thumbnail { + .k-horizontal-with-large-thumbnail { // override few styles from .horizontal-with-small-thumbnail // to stretch the thumbnail to the full height of the card /* stylelint-disable scss/at-extend-no-missing-placeholder */ - @extend .horizontal-with-small-thumbnail; + @extend .k-horizontal-with-small-thumbnail; /* stylelint-enable scss/at-extend-no-missing-placeholder */ - &.card-area { + &.k-card-area { position: relative; /* for absolute positioning of .thumbnail */ } - .thumbnail { + .k-thumbnail { position: absolute; width: 40%; height: 100%; @@ -764,31 +764,31 @@ margin-bottom: 0; } - .around-title, - .footer { + .k-around-title, + .k-footer { width: 60%; } - &.thumbnail-align-left { - .thumbnail { + &.k-thumbnail-align-left { + .k-thumbnail { left: 0; margin-left: 0; } - .around-title, - .footer { + .k-around-title, + .k-footer { margin-left: auto; } } - &.thumbnail-align-right { - .thumbnail { + &.k-thumbnail-align-right { + .k-thumbnail { right: 0; margin-right: 0; } - .around-title, - .footer { + .k-around-title, + .k-footer { margin-right: auto; } } diff --git a/lib/cards/KCardGrid.vue b/lib/cards/KCardGrid.vue index d7ef459bc..c03029517 100644 --- a/lib/cards/KCardGrid.vue +++ b/lib/cards/KCardGrid.vue @@ -2,7 +2,7 @@
      DEBUG
      breakpoint: {{ windowBreakpoint }}
      @@ -194,7 +194,7 @@ opacity: 0; } - .card-grid { + .k-card-grid { position: relative; // for '.debug' absolute positioning } @@ -208,7 +208,7 @@ list-style: none; } - .debug { + .k-debug { position: absolute; top: 0; left: 0; diff --git a/lib/cards/SkeletonCard.vue b/lib/cards/SkeletonCard.vue index 525588751..2fa5bf9db 100644 --- a/lib/cards/SkeletonCard.vue +++ b/lib/cards/SkeletonCard.vue @@ -8,7 +8,7 @@ :headingLevel="2" isSkeleton aria-hidden="true" - class="skeleton-card" + class="k-skeleton-card" title="_" :style="{ height: height }" :orientation="orientation" @@ -17,14 +17,14 @@ > @@ -127,22 +121,22 @@ !KolibriIcons[alias].learningActivity && !KolibriIcons[alias].resourceCategory ); - }) + }), ).filter(this.termFilter); }, withColor() { return sortedIconAliases( - getIconGroups(alias => Boolean(KolibriIcons[alias].defaultColor)) + getIconGroups(alias => Boolean(KolibriIcons[alias].defaultColor)), ).filter(this.termFilter); }, learningActivities() { return sortedIconAliases( - getIconGroups(alias => Boolean(KolibriIcons[alias].learningActivity)) + getIconGroups(alias => Boolean(KolibriIcons[alias].learningActivity)), ).filter(this.termFilter); }, resourceCategories() { return sortedIconAliases( - getIconGroups(alias => Boolean(KolibriIcons[alias].resourceCategory)) + getIconGroups(alias => Boolean(KolibriIcons[alias].resourceCategory)), ).filter(this.termFilter); }, }, diff --git a/docs/pages/icons/index.vue b/docs/pages/icons/index.vue index 73f732010..28a9e35bb 100644 --- a/docs/pages/icons/index.vue +++ b/docs/pages/icons/index.vue @@ -1,101 +1,204 @@ diff --git a/docs/pages/index.vue b/docs/pages/index.vue index ea2704d12..c8ccbe194 100644 --- a/docs/pages/index.vue +++ b/docs/pages/index.vue @@ -1,10 +1,13 @@ diff --git a/docs/pages/installation.vue b/docs/pages/installation.vue index 442731521..17e8491fe 100644 --- a/docs/pages/installation.vue +++ b/docs/pages/installation.vue @@ -1,41 +1,69 @@ - diff --git a/docs/pages/kbreadcrumbs.vue b/docs/pages/kbreadcrumbs.vue index c00bfcf90..921e7693a 100644 --- a/docs/pages/kbreadcrumbs.vue +++ b/docs/pages/kbreadcrumbs.vue @@ -1,10 +1,13 @@