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

MOBILE-3814 collapsible: Reduce collapsible item size

main
Pau Ferrer Ocaña 2022-03-09 16:18:03 +01:00
parent 494382921f
commit b0165e87e4
18 changed files with 47 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/addons/mod/assign/components/feedback-plugin/addon-mod-assign-feedback-plugin.html
View File

@ -8,7 +8,7 @@
{{ 'addon.mod_assign.feedbacknotsupported' | translate }} {{ 'addon.mod_assign.feedbacknotsupported' | translate }}
</ion-badge> </ion-badge>
<p *ngIf="text"> <p *ngIf="text">
<core-format-text [component]="component" [componentId]="assign.cmid" [collapsible-item]="120" [text]="text" <core-format-text [component]="component" [componentId]="assign.cmid" collapsible-item [text]="text"
contextLevel="module" [contextInstanceId]="assign.cmid" [courseId]="assign.course"> contextLevel="module" [contextInstanceId]="assign.cmid" [courseId]="assign.course">
</core-format-text> </core-format-text>
</p> </p>

2
src/addons/mod/assign/components/submission-plugin/addon-mod-assign-submission-plugin.html
View File

@ -8,7 +8,7 @@
{{ 'addon.mod_assign.submissionnotsupported' | translate }} {{ 'addon.mod_assign.submissionnotsupported' | translate }}
</ion-badge> </ion-badge>
<p *ngIf="text"> <p *ngIf="text">
<core-format-text [component]="component" [componentId]="assign.cmid" [collapsible-item]="120" [text]="text" <core-format-text [component]="component" [componentId]="assign.cmid" collapsible-item [text]="text"
contextLevel="module" [contextInstanceId]="assign.cmid" [courseId]="assign.course"> contextLevel="module" [contextInstanceId]="assign.cmid" [courseId]="assign.course">
</core-format-text> </core-format-text>
</p> </p>

4
src/addons/mod/assign/feedback/comments/component/addon-mod-assign-feedback-comments.html
View File

@ -3,8 +3,8 @@
<ion-label> <ion-label>
<h2>{{ plugin.name }}</h2> <h2>{{ plugin.name }}</h2>
<p> <p>
<core-format-text [component]="component" [componentId]="assign.cmid" [collapsible-item]="120" [text]="text" <core-format-text [component]="component" [componentId]="assign.cmid" collapsible-item [text]="text" contextLevel="module"
contextLevel="module" [contextInstanceId]="assign.cmid" [courseId]="assign.course"> [contextInstanceId]="assign.cmid" [courseId]="assign.course">
</core-format-text> </core-format-text>
</p> </p>
</ion-label> </ion-label>

4
src/addons/mod/assign/submission/onlinetext/component/addon-mod-assign-submission-onlinetext.html
View File

@ -4,8 +4,8 @@
<h2>{{ plugin.name }}</h2> <h2>{{ plugin.name }}</h2>
<p *ngIf="words">{{ 'addon.mod_assign.numwords' | translate: {'$a': words} }}</p> <p *ngIf="words">{{ 'addon.mod_assign.numwords' | translate: {'$a': words} }}</p>
<p> <p>
<core-format-text [component]="component" [componentId]="assign.cmid" [collapsible-item]="120" [text]="text" <core-format-text [component]="component" [componentId]="assign.cmid" collapsible-item [text]="text" contextLevel="module"
contextLevel="module" [contextInstanceId]="assign.cmid" [courseId]="assign.course"> [contextInstanceId]="assign.cmid" [courseId]="assign.course">
</core-format-text> </core-format-text>
</p> </p>
</ion-label> </ion-label>

2
src/addons/mod/lesson/pages/user-retake/user-retake.html
View File

@ -87,7 +87,7 @@
<ion-label> <ion-label>
<h3 class="item-heading">{{ 'addon.mod_lesson.question' | translate }}</h3> <h3 class="item-heading">{{ 'addon.mod_lesson.question' | translate }}</h3>
<p> <p>
<core-format-text [component]="component" [componentId]="lesson?.coursemodule" [collapsible-item]="50" <core-format-text [component]="component" [componentId]="lesson?.coursemodule" collapsible-item
[text]="page.contents" contextLevel="module" [contextInstanceId]="lesson?.coursemodule" [text]="page.contents" contextLevel="module" [contextInstanceId]="lesson?.coursemodule"
[courseId]="courseId"> [courseId]="courseId">
</core-format-text> </core-format-text>

10
src/addons/mod/workshop/components/index/addon-mod-workshop-index.html
View File

@ -58,8 +58,8 @@
<ion-item class="ion-text-wrap"> <ion-item class="ion-text-wrap">
<ion-label> <ion-label>
<h2>{{ 'addon.mod_workshop.conclusion' | translate }}</h2> <h2>{{ 'addon.mod_workshop.conclusion' | translate }}</h2>
<core-format-text [collapsible-item]="120" [component]="component" [componentId]="module.id" <core-format-text collapsible-item [component]="component" [componentId]="module.id" [text]="workshop!.conclusion"
[text]="workshop!.conclusion" contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId"> contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId">
</core-format-text> </core-format-text>
</ion-label> </ion-label>
</ion-item> </ion-item>
@ -91,8 +91,8 @@
<ion-item class="ion-text-wrap"> <ion-item class="ion-text-wrap">
<ion-label> <ion-label>
<h2>{{ 'addon.mod_workshop.areainstructauthors' | translate }}</h2> <h2>{{ 'addon.mod_workshop.areainstructauthors' | translate }}</h2>
<core-format-text [collapsible-item]="120" [component]="component" [componentId]="module.id" <core-format-text collapsible-item [component]="component" [componentId]="module.id" [text]="workshop!.instructauthors"
[text]="workshop!.instructauthors" contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId"> contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId">
</core-format-text> </core-format-text>
</ion-label> </ion-label>
</ion-item> </ion-item>
@ -141,7 +141,7 @@
<ion-item class="ion-text-wrap"> <ion-item class="ion-text-wrap">
<ion-label> <ion-label>
<h2>{{ 'addon.mod_workshop.areainstructreviewers' | translate }}</h2> <h2>{{ 'addon.mod_workshop.areainstructreviewers' | translate }}</h2>
<core-format-text [collapsible-item]="120" [component]="component" [componentId]="module.id" <core-format-text collapsible-item [component]="component" [componentId]="module.id"
[text]="workshop!.instructreviewers" contextLevel="module" [contextInstanceId]="module.id" [text]="workshop!.instructreviewers" contextLevel="module" [contextInstanceId]="module.id"
[courseId]="courseId"> [courseId]="courseId">
</core-format-text> </core-format-text>

2
src/addons/notifications/pages/list/list.html
View File

@ -64,7 +64,7 @@
<ion-item class="ion-text-wrap"> <ion-item class="ion-text-wrap">
<ion-label> <ion-label>
<core-format-text [text]="notification.mobiletext | coreCreateLinks" contextLevel="system" [contextInstanceId]="0" <core-format-text [text]="notification.mobiletext | coreCreateLinks" contextLevel="system" [contextInstanceId]="0"
[collapsible-item]="120"> collapsible-item>
</core-format-text> </core-format-text>
</ion-label> </ion-label>
</ion-item> </ion-item>

6
src/core/directives/collapsible-item.ts
View File

@ -20,8 +20,8 @@ import { CoreComponentsRegistry } from '@singletons/components-registry';
import { CoreEventLoadingChangedData, CoreEventObserver, CoreEvents } from '@singletons/events'; import { CoreEventLoadingChangedData, CoreEventObserver, CoreEvents } from '@singletons/events';
import { CoreFormatTextDirective } from './format-text'; import { CoreFormatTextDirective } from './format-text';
const defaultMaxHeight = 64; const defaultMaxHeight = 80;
const buttonHeight = 44; const minMaxHeight = 56;
/** /**
* Directive to make an element collapsible. * Directive to make an element collapsible.
@ -70,7 +70,7 @@ export class CoreCollapsibleItemDirective implements OnInit {
} else { } else {
this.maxHeight = this.height; this.maxHeight = this.height;
} }
this.maxHeight = this.maxHeight < defaultMaxHeight ? defaultMaxHeight : this.maxHeight; this.maxHeight = this.maxHeight < minMaxHeight ? defaultMaxHeight : this.maxHeight;
if (!this.maxHeight) { if (!this.maxHeight) {
// Do not collapse. // Do not collapse.

2
src/core/features/course/components/module-description/core-course-module-description.html
View File

@ -1,7 +1,7 @@
<ion-card *ngIf="description"> <ion-card *ngIf="description">
<ion-item class="ion-text-wrap"> <ion-item class="ion-text-wrap">
<ion-label> <ion-label>
<core-format-text [text]="description" [component]="component" [componentId]="componentId" [collapsible-item]="120" <core-format-text [text]="description" [component]="component" [componentId]="componentId" collapsible-item
[contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId" [courseId]="courseId"> [contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId" [courseId]="courseId">
</core-format-text> </core-format-text>
</ion-label> </ion-label>

2
src/core/features/course/components/module-info/core-course-module-info.html
View File

@ -46,7 +46,7 @@
<ion-item class="ion-text-wrap" *ngIf="description"> <ion-item class="ion-text-wrap" *ngIf="description">
<ion-label> <ion-label>
<core-format-text [text]="description" [component]="component" [componentId]="componentId" contextLevel="module" <core-format-text [text]="description" [component]="component" [componentId]="componentId" contextLevel="module"
[contextInstanceId]="module.id" [courseId]="courseId" [collapsible-item]="expandDescription ? null : 120"> [contextInstanceId]="module.id" [courseId]="courseId" [collapsible-item]="expandDescription ? null : ''">
</core-format-text> </core-format-text>
</ion-label> </ion-label>
</ion-item> </ion-item>

4
src/core/features/course/components/module-summary/module-summary.html
View File

@ -49,7 +49,7 @@
{{ 'core.description' | translate}} {{ 'core.description' | translate}}
</p> </p>
<core-format-text [text]="description" [component]="component" [componentId]="componentId" contextLevel="module" <core-format-text [text]="description" [component]="component" [componentId]="componentId" contextLevel="module"
[contextInstanceId]="module.id" [courseId]="courseId" [collapsible-item]="120"> [contextInstanceId]="module.id" [courseId]="courseId" collapsible-item>
</core-format-text> </core-format-text>
</ion-label> </ion-label>
</ion-item> </ion-item>
@ -169,7 +169,7 @@
<ion-label> <ion-label>
<p class="item-heading">{{ 'core.grades.feedback' | translate}}</p> <p class="item-heading">{{ 'core.grades.feedback' | translate}}</p>
<p> <p>
<core-format-text [collapsible-item]="120" [text]="grade.feedback" contextLevel="course" <core-format-text collapsible-item [text]="grade.feedback" contextLevel="course"
[contextInstanceId]="courseId"> [contextInstanceId]="courseId">
</core-format-text> </core-format-text>
</p> </p>

2
src/core/features/course/components/module/core-course-module.html
View File

@ -66,7 +66,7 @@
class="ion-text-wrap core-course-module-handler core-course-module-info {{module.handlerData.class}}" [ngClass]="{ class="ion-text-wrap core-course-module-handler core-course-module-info {{module.handlerData.class}}" [ngClass]="{
'item-dimmed': module.visible === 0 || module.uservisible === false 'item-dimmed': module.visible === 0 || module.uservisible === false
}"> }">
<ion-label collapsible-item> <ion-label [collapsible-item]="64">
<core-format-text class="core-module-description" *ngIf="module.description" [text]="module.description" <core-format-text class="core-module-description" *ngIf="module.description" [text]="module.description"
contextLevel="module" [contextInstanceId]="module.id" [courseId]="module.course"> contextLevel="module" [contextInstanceId]="module.id" [courseId]="module.course">
</core-format-text> </core-format-text>

5
src/core/features/course/pages/course-summary/course-summary.html
View File

@ -72,8 +72,7 @@
<p class="item-heading"> <p class="item-heading">
{{'core.summary' | translate}} {{'core.summary' | translate}}
</p> </p>
<core-format-text [text]="course.summary" [collapsible-item]="120" contextLevel="course" <core-format-text [text]="course.summary" collapsible-item contextLevel="course" [contextInstanceId]="course.id">
[contextInstanceId]="course.id">
</core-format-text> </core-format-text>
</ion-label> </ion-label>
</ion-item> </ion-item>
@ -105,7 +104,7 @@
</core-format-text> </core-format-text>
</span><span class="core-customfieldseparator">: </span> </span><span class="core-customfieldseparator">: </span>
<span class="core-customfieldvalue"> <span class="core-customfieldvalue">
<core-format-text [text]="field.value" [collapsible-item]="120" contextLevel="course" <core-format-text [text]="field.value" collapsible-item contextLevel="course"
[contextInstanceId]="course.id"> [contextInstanceId]="course.id">
</core-format-text> </core-format-text>
</span> </span>

2
src/core/features/courses/pages/categories/categories.html
View File

@ -34,7 +34,7 @@
</core-format-text> </core-format-text>
</p> </p>
<p *ngIf="currentCategory.description"> <p *ngIf="currentCategory.description">
<core-format-text [text]="currentCategory.description" [collapsible-item]="120" contextLevel="coursecat" <core-format-text [text]="currentCategory.description" collapsible-item contextLevel="coursecat"
[contextInstanceId]="currentCategory.id"></core-format-text> [contextInstanceId]="currentCategory.id"></core-format-text>
</p> </p>
</ion-label> </ion-label>

4
src/core/features/grades/pages/course/course.html
View File

@ -55,7 +55,7 @@
</td> </td>
<td *ngIf="column.name === 'feedback' && row.feedback !== undefined" <td *ngIf="column.name === 'feedback' && row.feedback !== undefined"
class="ion-text-start core-grades-table-feedback" [class.ion-hide-md-down]="column.hiddenPhone"> class="ion-text-start core-grades-table-feedback" [class.ion-hide-md-down]="column.hiddenPhone">
<core-format-text [collapsible-item]="120" [text]="row.feedback" contextLevel="course" <core-format-text collapsible-item [text]="row.feedback" contextLevel="course"
[contextInstanceId]="courseId"> [contextInstanceId]="courseId">
</core-format-text> </core-format-text>
</td> </td>
@ -124,7 +124,7 @@
<ion-label> <ion-label>
<h2>{{ 'core.grades.feedback' | translate}}</h2> <h2>{{ 'core.grades.feedback' | translate}}</h2>
<p> <p>
<core-format-text [collapsible-item]="120" [text]="row.feedback" contextLevel="course" <core-format-text collapsible-item [text]="row.feedback" contextLevel="course"
[contextInstanceId]="courseId"> [contextInstanceId]="courseId">
</core-format-text> </core-format-text>
</p> </p>

22
src/theme/components/collapsible-item.scss
View File

@ -2,6 +2,8 @@
.collapsible-item { .collapsible-item {
--display-toggle: none; --display-toggle: none;
--height: none; --height: none;
--toggle-size: 24px;
--gradient-size: 44px;
&.collapsible-loading-height { &.collapsible-loading-height {
display: block !important; display: block !important;
@ -17,10 +19,10 @@
@include media-breakpoint-down(sm) { @include media-breakpoint-down(sm) {
&.collapsible-enabled:not(.collapsible-loading-height) { &.collapsible-enabled:not(.collapsible-loading-height) {
position: relative; position: relative;
padding-bottom: var(--collapsible-min-button-height); // So the Show less button can fit. padding-bottom: var(--toggle-size); // So the Show less button can fit.
--display-toggle: block; --display-toggle: block;
@include core-transition(height max-height, 300ms); @include core-transition(height max-height, 300ms);
height: calc(var(--height, auto) + var(--collapsible-min-button-height)); height: calc(var(--height, auto) + var(--toggle-size));
.collapsible-toggle { .collapsible-toggle {
position: absolute; position: absolute;
@ -28,12 +30,12 @@
text-align: center; text-align: center;
z-index: 7; z-index: 7;
text-transform: none; text-transform: none;
font-size: 14px; font-size: 11px;
font-weight: normal; font-weight: normal;
background-color: var(--collapsible-toggle-background); background-color: var(--collapsible-toggle-background);
color: var(--collapsible-toggle-text); color: var(--collapsible-toggle-text);
min-height: var(--a11y-min-target-size); min-height: var(--toggle-size);
min-width: var(--a11y-min-target-size); min-width: var(--toggle-size);
--border-radius: var(--huge-radius); --border-radius: var(--huge-radius);
border-radius: var(--border-radius); border-radius: var(--border-radius);
--padding-start: 0px; --padding-start: 0px;
@ -41,8 +43,8 @@
margin: 0px; margin: 0px;
.collapsible-toggle-arrow { .collapsible-toggle-arrow {
width: var(--a11y-min-target-size); width: var(--toggle-size);
height: var(--a11y-min-target-size); height: var(--toggle-size);
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
@ -61,7 +63,7 @@
&.collapsible-collapsed { &.collapsible-collapsed {
overflow: hidden; overflow: hidden;
min-height: calc(var(--collapsible-min-button-height) + 12px); min-height: calc(var(--toggle-size) + 12px);
height: var(--height, auto); height: var(--height, auto);
.collapsible-toggle-arrow { .collapsible-toggle-arrow {
@ -73,8 +75,8 @@
height: 60px; height: 60px;
position: absolute; position: absolute;
@include position(null, 0, 0, 0); @include position(null, 0, 0, 0);
background: -webkit-linear-gradient(top, rgba(var(--background-gradient-rgb), 0) calc(100% - 56px), rgba(var(--background-gradient-rgb), 1) calc(100% - 5px)); background: -webkit-linear-gradient(top, rgba(var(--background-gradient-rgb), 0) calc(100% - var(--gradient-size)), rgba(var(--background-gradient-rgb), 1) calc(100% - 4px));
background: linear-gradient(to bottom, rgba(var(--background-gradient-rgb), 0) calc(100% - 56px), rgba(var(--background-gradient-rgb), 1) calc(100% - 5px)); background: linear-gradient(to bottom, rgba(var(--background-gradient-rgb), 0) calc(100% - var(--gradient-size)), rgba(var(--background-gradient-rgb), 1) calc(100% - 4px));
z-index: 6; z-index: 6;
} }
} }

10
src/theme/theme.dark.scss
View File

@ -39,7 +39,11 @@
--subdued-text-color: var(--medium); --subdued-text-color: var(--medium);
--stroke: var(--gray-700); --stroke: var(--gray-700);
--contrast-background: black; --contrast-background: var(--gray-900);
--drop-shadow: 0, 0, 0, 1;
--scroll-shadow-bottom: drop-shadow(0px -3px 3px rgba(var(--drop-shadow)));
--scroll-shadow-top: drop-shadow(0px 3px 3px rgba(var(--drop-shadow)));
--ion-card-color: var(--text-color); --ion-card-color: var(--text-color);
--ion-card-background: var(--ion-item-background); --ion-card-background: var(--ion-item-background);
@ -73,7 +77,7 @@
--core-header-toolbar-color: var(--text-color); --core-header-toolbar-color: var(--text-color);
--core-header-toolbar-border-color: var(--stroke); --core-header-toolbar-border-color: var(--stroke);
--core-tabs-background: var(--gray-800); --core-tabs-background: var(--gray-900);
--core-tab-background: var(--core-tabs-background); --core-tab-background: var(--core-tabs-background);
--core-tab-color: var(--subdued-text-color); --core-tab-color: var(--subdued-text-color);
--core-tab-border-color: var(--gray-200); --core-tab-border-color: var(--gray-200);
@ -104,7 +108,7 @@
--core-combobox-color: var(--text-color); --core-combobox-color: var(--text-color);
--core-combobox-border-color: var(--core-input-stroke); --core-combobox-border-color: var(--core-input-stroke);
--collapsible-toggle-background: var(--light); --collapsible-toggle-text: var(--medium);
--background-gradient-rgb: #{$ion-item-background-dark-rgb}; --background-gradient-rgb: #{$ion-item-background-dark-rgb};

5
src/theme/theme.light.scss
View File

@ -315,9 +315,8 @@
--selected-item-color: var(--primary); --selected-item-color: var(--primary);
--selected-item-border-width: 5px; --selected-item-border-width: 5px;
--collapsible-toggle-background: var(--light); --collapsible-toggle-background: transparent;
--collapsible-min-button-height: 44px; --collapsible-toggle-text: var(--medium);
--collapsible-toggle-text: var(--text-color);
--background-gradient-rgb: #{$ion-item-background-rgb}; --background-gradient-rgb: #{$ion-item-background-rgb};