CIT/Vmeda.Online
3
0
Fork 1
forked from EVOgeek/Vmeda.Online
Code Pull Requests Activity

MOBILE-3833 timeline: Import styles from myoverview

Browse Source
This commit is contained in:
Pau Ferrer Ocaña 2022-04-06 10:58:36 +02:00
parent 6bf1bb7cb4
commit 9de662f896
6 changed files with 98 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/addons/block/timeline/components/events/addon-block-timeline-events.html
View File

@ -53,7 +53,7 @@
</ion-row>
</ion-col>
<ion-col class="addon-block-timeline-activity-action ion-no-padding" *ngIf="event.action?.actionable">
<ion-button fill="outline" (click)="action($event, event.action.url)" [title]="event.action.name">
<ion-button fill="outline" (click)="action($event, event.action.url)" [title]="event.action.name" class="chip">
{{event.action.name}}
<ion-badge slot="end" class="ion-margin-start" *ngIf="event.action.showitemcount">
{{event.action.itemcount}}

29
src/addons/block/timeline/components/timeline/addon-block-timeline.html
View File

@ -4,13 +4,21 @@
</ion-label>
</ion-item-divider>
<core-loading [hideUntil]="loaded">
<ion-row class="ion-no-padding ion-justify-content-between ion-align-items-center">
<ion-col size="auto" class="ion-no-padding">
<core-combobox [selection]="filter" (onChange)="switchFilter($event)" icon="fas-filter">
<ion-row class="ion-hide-md-up addon-block-timeline-filter" *ngIf="searchEnabled">
<ion-col>
<!-- Filter courses. -->
<core-search-box (onSubmit)="searchTextChanged($event)" (onClear)="searchTextChanged()"
[placeholder]="'addon.block_timeline.searchevents' | translate" autocorrect="off" spellcheck="false" lengthCheck="2"
searchArea="AddonBlockTimeline"></core-search-box>
</ion-col>
</ion-row>
<ion-row class="ion-justify-content-between ion-align-items-center addon-block-timeline-filter">
<ion-col size="auto">
<core-combobox [selection]="filter" (onChange)="switchFilter($event)">
<ion-select-option class="ion-text-wrap" value="all">
{{ 'core.all' | translate }}
</ion-select-option>
<ion-select-option class="ion-text-wrap" value="overdue">
<ion-select-option class="ion-text-wrap core-select-option-border-bottom" value="overdue">
{{ 'addon.block_timeline.overdue' | translate }}
</ion-select-option>
<ion-select-option class="ion-text-wrap core-select-option-title" disabled value="disabled">
@ -30,13 +38,13 @@
</ion-select-option>
</core-combobox>
</ion-col>
<ion-col class="ion-no-padding ion-hide-md-down" *ngIf="searchEnabled">
<ion-col class="ion-hide-md-down" *ngIf="searchEnabled">
<!-- Filter courses. -->
<core-search-box (onSubmit)="searchTextChanged($event)" (onClear)="searchTextChanged()"
[placeholder]="'addon.block_timeline.searchevents' | translate" autocorrect="off" spellcheck="false" lengthCheck="2"
searchArea="AddonBlockTimeline"></core-search-box>
</ion-col>
<ion-col size="auto" class="ion-no-padding">
<ion-col size="auto">
<core-combobox [label]="'core.sortby' | translate" [selection]="sort" (onChange)="switchSort($event)"
icon="fas-sort-amount-down-alt">
<ion-select-option class="ion-text-wrap" value="sortbydates">
@ -48,14 +56,7 @@
</core-combobox>
</ion-col>
</ion-row>
<ion-row class="ion-no-padding ion-hide-md-up" *ngIf="searchEnabled">
<ion-col class="ion-no-padding">
<!-- Filter courses. -->
<core-search-box (onSubmit)="searchTextChanged($event)" (onClear)="searchTextChanged()"
[placeholder]="'addon.block_timeline.searchevents' | translate" autocorrect="off" spellcheck="false" lengthCheck="2"
searchArea="AddonBlockTimeline"></core-search-box>
</ion-col>
</ion-row>
<core-loading [hideUntil]="timeline.loaded" [hidden]="sort != 'sortbydates'">
<addon-block-timeline-events [events]="timeline.events" [canLoadMore]="timeline.canLoadMore" (loadMore)="loadMore()"

38
src/addons/block/timeline/components/timeline/timeline.scss Normal file
View File

@ -0,0 +1,38 @@
:host {
ion-row.addon-block-timeline-filter {
margin: 8px;
padding: 0;
ion-col {
padding: 0;
margin-right: 2px;
margin-left: 2px;
}
ion-button,
core-combobox ::ng-deep ion-button {
--border-width: 0;
--a11y-min-target-size: 40px;
margin: 0;
.select-icon {
display: none;
}
ion-icon {
font-size: 20px;
}
}
core-combobox ::ng-deep ion-select {
margin: 0;
--a11y-min-target-size: 40px;
}
core-search-box {
padding: 0;
margin: 0;
--height: 40px;
}
}
}

1
src/addons/block/timeline/components/timeline/timeline.ts
View File

@ -31,6 +31,7 @@ import { CoreNavigator } from '@services/navigator';
@Component({
selector: 'addon-block-timeline',
templateUrl: 'addon-block-timeline.html',
styleUrls: ['timeline.scss'],
})
export class AddonBlockTimelineComponent extends CoreBlockBaseComponent implements OnInit {

48
src/core/features/search/components/search-box/core-search-box.html
View File

@ -1,26 +1,24 @@
<ion-card>
<form (ngSubmit)="submitForm($event)" role="search" #searchForm>
<ion-item>
<ion-label class="sr-only">{{ placeholder }}</ion-label>
<ion-input type="search" name="search" [(ngModel)]="searchText" [placeholder]="placeholder" [autocorrect]="autocorrect"
[spellcheck]="spellcheck" [core-auto-focus]="autoFocus" [disabled]="disabled" role="searchbox" (ionFocus)="focus($event)">
</ion-input>
<ion-button slot="end" fill="clear" type="submit" [attr.aria-label]="searchLabel"
[disabled]="disabled || !searchText || (searchText.length < lengthCheck)">
<ion-icon name="fas-search" slot="icon-only" aria-hidden="true"></ion-icon>
</ion-button>
<ion-button *ngIf="showClear" slot="end" fill="clear" [attr.aria-label]="'core.clearsearch' | translate"
[disabled]="searched == '' || disabled" (click)="clearForm()">
<ion-icon name="fas-backspace" slot="icon-only" aria-hidden="true" flip-rtl></ion-icon>
</ion-button>
<form (ngSubmit)="submitForm($event)" role="search" #searchForm>
<ion-item class="search-box">
<ion-label class="sr-only">{{ placeholder }}</ion-label>
<ion-input type="search" name="search" [(ngModel)]="searchText" [placeholder]="placeholder" [autocorrect]="autocorrect"
[spellcheck]="spellcheck" [core-auto-focus]="autoFocus" [disabled]="disabled" role="searchbox" (ionFocus)="focus($event)">
</ion-input>
<ion-button slot="end" fill="clear" type="submit" [attr.aria-label]="searchLabel"
[disabled]="disabled || !searchText || (searchText.length < lengthCheck)">
<ion-icon name="fas-search" slot="icon-only" aria-hidden="true"></ion-icon>
</ion-button>
<ion-button *ngIf="showClear" slot="end" fill="clear" [attr.aria-label]="'core.clearsearch' | translate"
[disabled]="searched == '' || disabled" (click)="clearForm()">
<ion-icon name="fas-backspace" slot="icon-only" aria-hidden="true" flip-rtl></ion-icon>
</ion-button>
</ion-item>
<ion-list class="core-search-history" [hidden]="!historyShown">
<ion-item button class="ion-text-wrap" *ngFor="let item of history" (click)="historyClicked($event, item.searchedtext)" tabindex="0"
detail="true">
<ion-icon name="fas-history" slot="start" aria-hidden="true">
</ion-icon>
<ion-label>{{item.searchedtext}}</ion-label>
</ion-item>
<ion-list class="core-search-history" [hidden]="!historyShown">
<ion-item button class="ion-text-wrap" *ngFor="let item of history" (click)="historyClicked($event, item.searchedtext)"
tabindex="0" detail="true">
<ion-icon name="fas-history" slot="start" aria-hidden="true">
</ion-icon>
<ion-label>{{item.searchedtext}}</ion-label>
</ion-item>
</ion-list>
</form>
</ion-card>
</ion-list>
</form>

29
src/core/features/search/components/search-box/search-box.scss
View File

@ -1,29 +1,40 @@
:host {
min-height: var(--a11y-min-target-size);
--height: var(--a11y-min-target-size);
--search-height: calc(var(--height) - 2px);
min-height: var(--height);
display: block;
position: relative;
margin: 8px;
ion-card {
form {
position: absolute;
left: 0;
right: 0;
z-index: 4;
margin: 0;
--border-color: var(--core-search-box-border-color);
--border-radius: var(--core-search-box-border-radius);
--background: var(--core-search-box-background);
--color: var(--core-search-box-border-color);
border: 1px solid var(--core-search-box-border-color);
border-radius: var(--core-search-box-border-radius);
background: var(--core-search-box-background);
color: var(--core-search-box-border-color);
.search-box {
--min-height: var(--search-height);
border-radius: var(--core-search-box-border-radius);
}
ion-button.button {
margin: 0;
--a11y-min-target-size: var(--search-height);
}
}
ion-button.button {
margin: 0;
}
.core-search-history {
max-height: calc(-120px + 80vh);
overflow-y: auto;
background: var(--core-search-box-background);
border-radius: 0 0 var(--core-search-box-border-radius) var(--core-search-box-border-radius);
--ion-item-background: var(--core-search-box-background);
.item:hover {