EVOgeek
/
Vmeda.Online
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

MOBILE-2335 course: Add styles to module handler

main
Pau Ferrer Ocaña 2018-02-08 16:26:37 +01:00
parent 00ef0fa0a9
commit 15edcbb94f
5 changed files with 143 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/addon/mod/label/label.scss 100644
View File

@ -0,0 +1,3 @@
a.core-course-module-handler.addon-mod-label-handler {
align-items: center;
}

8
src/core/course/components/format/format.html
View File

@ -12,7 +12,7 @@
<core-loading [hideUntil]="loaded">
<!-- Section selector. -->
<core-dynamic-component [component]="sectionSelectorComponent" [data]="data">
<div *ngIf="displaySectionSelector && sections && sections.length" no-padding class="clearfix">
<div text-wrap *ngIf="displaySectionSelector && sections && sections.length" no-padding class="clearfix">
<!-- @todo: How to display availabilityinfo and not visible messages? -->
<ion-select [ngModel]="selectedSection" (ngModelChange)="sectionChanged($event)" [compareWith]="compareSections" [selectOptions]="selectOptions" float-start interface="popover">
<ion-option *ngFor="let section of sections" [value]="section">{{section.formattedName || section.name}}</ion-option>
@ -63,7 +63,7 @@
<!-- Template to render a section download button/progress. -->
<ng-template #sectionDownloadTemplate let-section="section">
<div *ngIf="section && downloadEnabled" float-end>
<div *ngIf="section && downloadEnabled" class="core-button-spinner" float-end>
<!-- Download button. -->
<button *ngIf="section.showDownload && !section.isDownloading && !section.isCalculating" (click)="prefetch($event, section)" ion-button icon-only clear color="dark" [attr.aria-label]="'core.download' | translate">
<ion-icon name="cloud-download"></ion-icon>
@ -72,9 +72,9 @@
<button *ngIf="section.showRefresh && !section.isDownloading && !section.isCalculating" (click)="prefetch($event, section)" ion-button icon-only clear color="dark" [attr.aria-label]="'core.refresh' | translate">
<ion-icon name="refresh"></ion-icon>
</button>
<!-- Spinner (downloading or calculating status). -->
<ion-spinner *ngIf="(section.isDownloading && section.total > 0) || section.isCalculating"></ion-spinner>
<!-- Download progress. -->
<ion-badge class="core-course-download-section-progress" *ngIf="section.isDownloading && section.total > 0 && section.count < section.total">{{section.count}} / {{section.total}}</ion-badge>
<!-- Spinner (downloading or calculating status). -->
<ion-spinner *ngIf="(section.isDownloading && section.total > 0) || section.isCalculating"></ion-spinner>
</div>
</ng-template>

6
src/core/course/components/format/format.scss 100644
View File

@ -0,0 +1,6 @@
ion-badge.core-course-download-section-progress {
display: block;
float: left;
margin-top: 12px;
margin-right: 12px;
}

53
src/core/course/components/module/module.html
View File

@ -1,36 +1,39 @@
<a *ngIf="module && module.visibleoncoursepage !== 0" ion-item text-wrap id="core-course-module-{{module.id}}" class="core-course-module-handler {{module.handlerData.class}}" (click)="moduleClicked($event)" [ngClass]="{'item-media': module.handlerData.icon, 'core-not-clickable': !module.handlerData.action || !module.uservisible === false, 'item-dimmed': module.visible === 0 || module.uservisible === false}" title="{{ module.handlerData.title }}" detail-none>
<img item-start *ngIf="module.handlerData.icon" [src]="module.handlerData.icon" alt="" role="presentation" class="core-module-icon">
<div class="core-module-title">
<core-format-text [text]="module.handlerData.title"></core-format-text>
<core-format-text [text]="module.handlerData.title"></core-format-text>
<!-- Buttons. -->
<div item-end *ngIf="module.uservisible !== false" class="buttons core-module-buttons" [ngClass]="{'core-button-completion': module.completionstatus}">
<!-- Module completion. -->
<core-course-module-completion *ngIf="module.completionstatus" [completion]="module.completionstatus" [moduleName]="module.name" (completionChanged)="completionChanged.emit()"></core-course-module-completion>
<!-- Buttons. -->
<div float-end *ngIf="module.uservisible !== false" class="buttons core-module-buttons" [ngClass]="{'core-button-completion': module.completionstatus}">
<!-- Module completion. -->
<core-course-module-completion *ngIf="module.completionstatus" [completion]="module.completionstatus" [moduleName]="module.name" (completionChanged)="completionChanged.emit()"></core-course-module-completion>
<div class="core-module-buttons-more">
<!-- Download button. -->
<button *ngIf="downloadEnabled && showDownload" [hidden]="spinner || module.handlerData.spinner" ion-button icon-only clear (click)="download($event, false)" color="dark" class="core-animate-show-hide" [attr.aria-label]="'core.download' | translate">
<ion-icon name="cloud-download"></ion-icon>
</button>
<!-- Download button. -->
<button *ngIf="downloadEnabled && showDownload" [hidden]="spinner || module.handlerData.spinner" ion-button icon-only clear (click)="download($event, false)" color="dark" class="core-animate-show-hide" [attr.aria-label]="'core.download' | translate">
<ion-icon name="cloud-download"></ion-icon>
</button>
<!-- Refresh button. -->
<button *ngIf="downloadEnabled && showRefresh" [hidden]="spinner || module.handlerData.spinner" ion-button icon-only clear (click)="download($event, true)" color="dark" class="core-animate-show-hide" [attr.aria-label]="'core.refresh' | translate">
<ion-icon name="refresh"></ion-icon>
</button>
<!-- Refresh button. -->
<button *ngIf="downloadEnabled && showRefresh" [hidden]="spinner || module.handlerData.spinner" ion-button icon-only clear (click)="download($event, true)" color="dark" class="core-animate-show-hide" [attr.aria-label]="'core.refresh' | translate">
<ion-icon name="refresh"></ion-icon>
</button>
<!-- Buttons defined by the module handler. -->
<button ion-button icon-only clear *ngFor="let button of module.handlerData.buttons" [hidden]="button.hidden || spinner || module.handlerData.spinner" (click)="buttonClicked($event, button)" color="dark" class="core-animate-show-hide" [attr.aria-label]="button.label | translate">
<ion-icon [name]="button.icon" [ios]="button.iosIcon || ''" [md]="button.mdIcon || ''"></ion-icon>
</button>
<!-- Buttons defined by the module handler. -->
<button ion-button icon-only clear *ngFor="let button of module.handlerData.buttons" [hidden]="button.hidden || spinner || module.handlerData.spinner" (click)="buttonClicked($event, button)" color="dark" class="core-animate-show-hide" [attr.aria-label]="button.label | translate">
<ion-icon [name]="button.icon" [ios]="button.iosIcon || ''" [md]="button.mdIcon || ''"></ion-icon>
</button>
<!-- Spinner. -->
<ion-spinner *ngIf="spinner || module.handlerData.spinner" class="core-animate-show-hide"></ion-spinner>
</div>
</div>
<!-- Spinner. -->
<ion-spinner *ngIf="spinner || module.handlerData.spinner" class="core-animate-show-hide"></ion-spinner>
<div *ngIf="module.visible === 0 || module.availabilityinfo">
<ion-badge item-end *ngIf="module.visible === 0">{{ 'core.course.hiddenfromstudents' | translate }}</ion-badge>
<ion-badge item-end *ngIf="module.availabilityinfo"><core-format-text [text]="module.availabilityinfo"></core-format-text></ion-badge>
</div>
</div>
<div *ngIf="module.visible === 0 || module.availabilityinfo">
<ion-badge item-end *ngIf="module.visible === 0">{{ 'core.course.hiddenfromstudents' | translate }}</ion-badge>
<ion-badge item-end *ngIf="module.availabilityinfo"><core-format-text [text]="module.availabilityinfo"></core-format-text></ion-badge>
</div>
<core-format-text *ngIf="module.description" maxHeight="80" [text]="module.description"></core-format-text>
<core-format-text class="core-module-description" *ngIf="module.description" maxHeight="80" [text]="module.description"></core-format-text>
</a>

117
src/core/course/components/module/module.scss
View File

@ -2,29 +2,116 @@ core-course-module {
a.core-course-module-handler {
align-items: flex-start;
item-inner {
min-height: 52px;
&.item .item-inner {
padding-right: 0;
}
.label {
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
}
.core-module-icon {
align-items: flex-start;
}
}
.core-module-icon {
align-items: flex-start;
}
.core-module-buttons {
.core-module-title {
display: flex;
flex-flow: row;
align-items: center;
z-index: 1;
cursor: pointer;
pointer-events: auto;
position: absolute;
right: 0;
top: 4px;
align-items: flex-start;
.spinner {
right: 7px;
core-format-text {
flex-grow: 2;
}
.core-module-buttons {
margin: 0;
}
.core-module-buttons,
.core-module-buttons-more {
display: flex;
flex-flow: row;
align-items: center;
z-index: 1;
}
.core-module-buttons core-course-module-completion,
.core-module-buttons-more button {
cursor: pointer;
pointer-events: auto;
}
.core-module-buttons-more .spinner {
right: 13px;
position: absolute;
}
}
}
.md core-course-module {
.core-module-description,
.core-module-description .core-show-more {
padding-right: $label-md-margin-end;
}
a.core-course-module-handler .core-module-icon {
margin-top: $label-md-margin-top;
margin-bottom: $label-md-margin-bottom;
}
.core-module-title core-format-text {
padding-top: $label-md-margin-top + 3;
}
.button-md {
margin-top: 8px;
margin-bottom: 8px;
}
.core-module-buttons-more {
min-height: 52px;
min-width: 53px;
}
}
.ios core-course-module {
.core-module-description,
.core-module-description .core-show-more {
padding-right: $label-ios-margin-end;
}
a.core-course-module-handler .core-module-icon {
margin-top: $label-ios-margin-top;
margin-bottom: $label-ios-margin-bottom;
}
.core-module-title core-format-text {
padding-top: $label-ios-margin-top + 3;
}
.core-module-buttons-more {
min-height: 53px;
min-width: 58px;
}
}
.wp core-course-module {
.core-module-description,
.core-module-description .core-show-more {
padding-right: ($item-wp-padding-end / 2);
}
a.core-course-module-handler .core-module-icon {
margin-top: $item-wp-padding-top;
margin-bottom: $item-wp-padding-bottom;
}
.core-module-title core-format-text {
padding-top: $item-wp-padding-top + 3;
}
.button-wp {
margin-top: 8px;
margin-bottom: 8px;
}
}