forked from oppia/oppia
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Fix part of oppia#18384: Reusable carousel component for learner dash…
…board redesign (oppia#20306) * Added nav Update with newest commits from PR 20185 * Updated margins * Corrected shifts for card nav * Updated shift * Fixed nav spacing * Added translation key * Replaced explicit width with var cardWidth * fixed margins and import errors * Updated spacing between sections * Changed width to include margin and added test cases * Added card-display tests * Refactored logic * Refactored nextCard() * Reverted testing statements to default * Removed comments * Updated TODO comments * Replaced headings with i18n keys,font-awesome for nav buttons; added comments * Renamed folder * Updated view more button * Updated styling for view more button * Fixed capitalization of description and community text for cards * Fixed lint errors, added copyright * Updated lesson card test case * Renamed variable * Changed selector * Updated variable names * Removed extra file from prev commit
- Loading branch information
1 parent
6476a58
commit 9cc8aab
Showing
12 changed files
with
366 additions
and
35 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
76 changes: 76 additions & 0 deletions
76
core/templates/pages/learner-dashboard-page/card-display/card-display.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,76 @@ | ||
| <div class="d-flex flex-column h-100 mb-4 w-100" [ngStyle]="{'max-width': (tabType === 'homeFull' || tabType.includes('progress') ? '100%' : 'fit-content')}"> | ||
| <div class="d-flex justify-content-between"> | ||
| <p class="card-display-heading"> {{ headingI18n | translate }} </p> | ||
| <div class="d-flex" *ngIf="(numCards > 1) && ((numCards - 1) * cardWidth + (cardWidth - 32) > cards.offsetWidth) && (tabType.includes('home'))"> | ||
| <button [disabled]="currentShift === 0" class="mr-2 px-0 card-display-button" (click)="nextCard(currentShift - 1)"> | ||
| <span class="fas fa-chevron-left"></span> | ||
| </button> | ||
| <p> </p> | ||
| <button [disabled]="currentShift === getMaxShifts(cards.offsetWidth)" class="px-0 card-display-button" (click)="nextCard(currentShift + 1)"> | ||
| <span class="fas fa-chevron-right"></span> | ||
| </button> | ||
| </div> | ||
| </div> | ||
| <hr color="#00645c" class="mt-2 mb-4" size="2" width="100%"> | ||
| <div class="d-flex card-display-content-container pb-1 mb-n1" #cards> | ||
| <ng-content></ng-content> | ||
| </div> | ||
| <!--TODO(#18384): Implement view more for progress tab--> | ||
| <button *ngIf="!tabType.includes('home')" class="align-self-end card-display-more-button mt-4"> | ||
| {{ 'I18N_LEARNER_DASHBOARD_CARD_DISPLAY_BUTTON' | translate }} | ||
| <span class="fas fa-chevron-down ml-2"></span> | ||
| </button> | ||
| </div> | ||
|
|
||
| <style> | ||
| :host { | ||
| max-width: fit-content; | ||
| overflow: hidden; | ||
| } | ||
|
|
||
| .card-display-button { | ||
| align-items: center; | ||
| background-color: #00645c; | ||
| border: none; | ||
| border-radius: .25em; | ||
| color: #fff; | ||
| display: flex; | ||
| height: 24px; | ||
| justify-content: center; | ||
| width: 24px; | ||
| } | ||
|
|
||
| .card-display-button:disabled { | ||
| background-color: #667085; | ||
| } | ||
|
|
||
| .card-display-button:not(:disabled):hover { | ||
| background-color: #429488; | ||
| } | ||
|
|
||
| .card-display-more-button { | ||
| align-items: center; | ||
| background-color: #fff; | ||
| border: none; | ||
| border-radius: .25em; | ||
| color: #00645c; | ||
| display: flex; | ||
| font-weight: 500; | ||
| justify-content: center; | ||
| padding: 8px; | ||
| } | ||
|
|
||
| .card-display-content-container { | ||
| display: flex; | ||
| max-width: 100%; | ||
| overflow-x: hidden; | ||
| padding: .5px; | ||
| } | ||
|
|
||
| .card-display-heading { | ||
| color: #333; | ||
| font-size: 20px; | ||
| font-weight: 500; | ||
| margin-bottom: 0; | ||
| } | ||
| </style> |
156 changes: 156 additions & 0 deletions
156
core/templates/pages/learner-dashboard-page/card-display/card-display.component.spec.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,156 @@ | ||
| // Copyright 2024 The Oppia Authors. All Rights Reserved. | ||
| // | ||
| // Licensed under the Apache License, Version 2.0 (the "License"); | ||
| // you may not use this file except in compliance with the License. | ||
| // You may obtain a copy of the License at | ||
| // | ||
| // http://www.apache.org/licenses/LICENSE-2.0 | ||
| // | ||
| // Unless required by applicable law or agreed to in writing, software | ||
| // distributed under the License is distributed on an "AS-IS" BASIS, | ||
| // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | ||
| // See the License for the specific language governing permissions and | ||
| // limitations under the License. | ||
|
|
||
| /** | ||
| * @fileoverview Unit tests for CardDisplayComponent | ||
| */ | ||
|
|
||
| import {HttpClientTestingModule} from '@angular/common/http/testing'; | ||
| import {FormsModule} from '@angular/forms'; | ||
| import {waitForAsync, ComponentFixture, TestBed} from '@angular/core/testing'; | ||
| import {MockTranslatePipe} from 'tests/unit-test-utils'; | ||
| import {CardDisplayComponent} from './card-display.component'; | ||
| import {NO_ERRORS_SCHEMA} from '@angular/core'; | ||
|
|
||
| describe('CardDisplayComponent', () => { | ||
| let component: CardDisplayComponent; | ||
| let fixture: ComponentFixture<CardDisplayComponent>; | ||
| let scrollLeftSetterSpy: jasmine.Spy; | ||
|
|
||
| beforeEach(waitForAsync(() => { | ||
| TestBed.configureTestingModule({ | ||
| imports: [FormsModule, HttpClientTestingModule], | ||
| declarations: [CardDisplayComponent, MockTranslatePipe], | ||
| schemas: [NO_ERRORS_SCHEMA], | ||
| }).compileComponents(); | ||
| })); | ||
|
|
||
| beforeEach(() => { | ||
| fixture = TestBed.createComponent(CardDisplayComponent); | ||
| component = fixture.componentInstance; | ||
|
|
||
| component.numCards = 5; | ||
| component.tabType = 'home'; | ||
| component.headingI18n = 'I18N_LEARNER_DASHBOARD_HOME_SAVED_SECTION'; | ||
| fixture.detectChanges(); | ||
|
|
||
| spyOnProperty( | ||
| component.cards.nativeElement, | ||
| 'offsetWidth', | ||
| 'get' | ||
| ).and.returnValue(400); | ||
| scrollLeftSetterSpy = spyOnProperty( | ||
| component.cards.nativeElement, | ||
| 'scrollLeft', | ||
| 'set' | ||
| ); | ||
| }); | ||
|
|
||
| it('should return 0 shifts for getMaxShifts if container can fit cards perfectly', () => { | ||
| component.numCards = 2; | ||
|
|
||
| expect(component.getMaxShifts(650)).toEqual(0); | ||
| }); | ||
|
|
||
| it('should return correct number of shifts for getMaxShifts if container cannot fit cards', () => { | ||
| expect(component.getMaxShifts(400)).toEqual(4); | ||
| }); | ||
|
|
||
| describe('when shifting cards container to the right', () => { | ||
| it('should shift by (cardWidth - 32) if first shift to the right', () => { | ||
| component.nextCard(1); | ||
|
|
||
| fixture.detectChanges(); | ||
|
|
||
| expect(scrollLeftSetterSpy.calls.mostRecent().args[0]).toBe(200); | ||
| }); | ||
|
|
||
| it('should shift by cardWidth if not first shift or last to the right', () => { | ||
| spyOnProperty( | ||
| component.cards.nativeElement, | ||
| 'scrollLeft', | ||
| 'get' | ||
| ).and.returnValue(200); | ||
|
|
||
| component.currentShift = 1; | ||
| component.nextCard(2); | ||
|
|
||
| fixture.detectChanges(); | ||
|
|
||
| expect(scrollLeftSetterSpy.calls.mostRecent().args[0]).toBe(432); | ||
| }); | ||
|
|
||
| it('should shift by remainder needed to show last card if last shift to the right', () => { | ||
| spyOnProperty( | ||
| component.cards.nativeElement, | ||
| 'scrollLeft', | ||
| 'get' | ||
| ).and.returnValue(664); | ||
|
|
||
| component.currentShift = 3; | ||
| component.nextCard(4); | ||
|
|
||
| fixture.detectChanges(); | ||
|
|
||
| expect(scrollLeftSetterSpy.calls.mostRecent().args[0]).toBe(756.5); | ||
| }); | ||
| }); | ||
|
|
||
| describe('when shifting cards container to the left', () => { | ||
| it('should shift by remainder needed to show last if first shift', () => { | ||
| spyOnProperty( | ||
| component.cards.nativeElement, | ||
| 'scrollLeft', | ||
| 'get' | ||
| ).and.returnValue(756.5); | ||
|
|
||
| component.currentShift = 4; | ||
| component.nextCard(3); | ||
|
|
||
| fixture.detectChanges(); | ||
|
|
||
| expect(scrollLeftSetterSpy.calls.mostRecent().args[0]).toBe(664); | ||
| }); | ||
|
|
||
| it('should shift by cardWidth if not first shift or last', () => { | ||
| spyOnProperty( | ||
| component.cards.nativeElement, | ||
| 'scrollLeft', | ||
| 'get' | ||
| ).and.returnValue(664); | ||
|
|
||
| component.currentShift = 3; | ||
| component.nextCard(2); | ||
|
|
||
| fixture.detectChanges(); | ||
|
|
||
| expect(scrollLeftSetterSpy.calls.mostRecent().args[0]).toBe(432); | ||
| }); | ||
|
|
||
| it('should shift by (cardWidth - 32) if last shift', () => { | ||
| spyOnProperty( | ||
| component.cards.nativeElement, | ||
| 'scrollLeft', | ||
| 'get' | ||
| ).and.returnValue(200); | ||
|
|
||
| component.currentShift = 1; | ||
| component.nextCard(0); | ||
|
|
||
| fixture.detectChanges(); | ||
|
|
||
| expect(scrollLeftSetterSpy.calls.mostRecent().args[0]).toBe(0); | ||
| }); | ||
| }); | ||
| }); |
Oops, something went wrong.