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

MOBILE-3833 format-text: Change toggle style

main
Pau Ferrer Ocaña 2022-02-23 15:57:10 +01:00
parent daf4090ac6
commit 15dbfa514a
8 changed files with 118 additions and 160 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/addons/storagemanager/pages/course-storage/course-storage.scss
View File

@ -1,7 +1,6 @@
@import "~theme/globals"; @import "~theme/globals";
:host { :host {
--core-format-text-background-gradient-rgb: var(--background-rgb, #{$ion-item-background-rgb});
--course-storage-max-activity-height: 120px; --course-storage-max-activity-height: 120px;
ion-card.section ion-card-header { ion-card.section ion-card-header {
@ -23,8 +22,8 @@
min-height: var(--course-storage-max-activity-height); min-height: var(--course-storage-max-activity-height);
position: absolute; position: absolute;
@include position(0, 0, null, 0); @include position(0, 0, null, 0);
background: -webkit-linear-gradient(top, rgba(var(--core-format-text-background-gradient-rgb), 0) calc(100% - 30px), rgba(var(--core-format-text-background-gradient-rgb), 1) calc(100% - 20px)); background: -webkit-linear-gradient(top, rgba(var(--background-gradient-rgb), 0) calc(100% - 30px), rgba(var(--background-gradient-rgb), 1) calc(100% - 20px));
background: linear-gradient(to bottom, rgba(var(--core-format-text-background-gradient-rgb), 0) calc(100% - 30px), rgba(var(--core-format-text-background-gradient-rgb), 1) calc(100% - 20px)); background: linear-gradient(to bottom, rgba(var(--background-gradient-rgb), 0) calc(100% - 30px), rgba(var(--background-gradient-rgb), 1) calc(100% - 20px));
z-index: 6; z-index: 6;
pointer-events: none; pointer-events: none;
} }

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

@ -64,8 +64,8 @@ export class CoreCollapsibleItemDirective implements OnInit {
} }
this.maxHeight = this.maxHeight < defaultMaxHeight ? defaultMaxHeight : this.maxHeight; this.maxHeight = this.maxHeight < defaultMaxHeight ? defaultMaxHeight : this.maxHeight;
if (!this.maxHeight || (window.innerWidth > 576 && window.innerHeight > 576)) { if (!this.maxHeight) {
// Do not collapse on big screens. // Do not collapse.
return; return;
} }
@ -91,9 +91,6 @@ export class CoreCollapsibleItemDirective implements OnInit {
*/ */
protected calculateHeight(): void { protected calculateHeight(): void {
// @todo: Work on calculate this height better. // @todo: Work on calculate this height better.
if (!this.maxHeight) {
return;
}
// Remove max-height (if any) to calculate the real height. // Remove max-height (if any) to calculate the real height.
const initialMaxHeight = this.element.style.maxHeight; const initialMaxHeight = this.element.style.maxHeight;
@ -117,7 +114,11 @@ export class CoreCollapsibleItemDirective implements OnInit {
this.toggleExpandEnabled = enable; this.toggleExpandEnabled = enable;
this.element.classList.toggle('collapsible-enabled', enable); this.element.classList.toggle('collapsible-enabled', enable);
if (!enable || this.element.querySelector('ion-button.collapsible-toggle')) { if (!enable || this.element.querySelector('ion-button.collapsible-toggle')) {
this.element.style.maxHeight = !enable || this.expanded
? ''
: this.maxHeight + 'px';
return; return;
} }
@ -128,6 +129,7 @@ export class CoreCollapsibleItemDirective implements OnInit {
const toggleText = document.createElement('span'); const toggleText = document.createElement('span');
toggleText.classList.add('collapsible-toggle-text'); toggleText.classList.add('collapsible-toggle-text');
toggleText.classList.add('sr-only');
toggleButton.appendChild(toggleText); toggleButton.appendChild(toggleText);
const expandArrow = document.createElement('span'); const expandArrow = document.createElement('span');

26
src/core/directives/format-text.ts
View File

@ -279,23 +279,28 @@ export class CoreFormatTextDirective implements OnChanges {
*/ */
protected setExpandButtonEnabled(enable: boolean): void { protected setExpandButtonEnabled(enable: boolean): void {
this.toggleExpandEnabled = enable; this.toggleExpandEnabled = enable;
this.element.classList.toggle('core-text-formatted', enable); this.element.classList.toggle('collapsible-enabled', enable);
if (!enable || this.element.querySelector('ion-button.collapsible-toggle')) {
this.element.style.maxHeight = !enable || this.expanded
? ''
: this.maxHeight + 'px';
if (!enable || this.element.querySelector('ion-button.core-format-text-toggle')) {
return; return;
} }
// Add expand/collapse buttons // Add expand/collapse buttons
const toggleButton = document.createElement('ion-button'); const toggleButton = document.createElement('ion-button');
toggleButton.classList.add('core-format-text-toggle'); toggleButton.classList.add('collapsible-toggle');
toggleButton.setAttribute('fill', 'clear'); toggleButton.setAttribute('fill', 'clear');
const toggleText = document.createElement('span'); const toggleText = document.createElement('span');
toggleText.classList.add('core-format-text-toggle-text'); toggleText.classList.add('collapsible-toggle-text');
toggleText.classList.add('sr-only');
toggleButton.appendChild(toggleText); toggleButton.appendChild(toggleText);
const expandArrow = document.createElement('span'); const expandArrow = document.createElement('span');
expandArrow.classList.add('core-format-text-arrow'); expandArrow.classList.add('collapsible-toggle-arrow');
toggleButton.appendChild(expandArrow); toggleButton.appendChild(expandArrow);
this.element.appendChild(toggleButton); this.element.appendChild(toggleButton);
@ -313,12 +318,12 @@ export class CoreFormatTextDirective implements OnChanges {
expand = !this.expanded; expand = !this.expanded;
} }
this.expanded = expand; this.expanded = expand;
this.element.classList.toggle('core-text-format-expanded', expand); this.element.classList.toggle('collapsible-expanded', expand);
this.element.classList.toggle('core-text-format-collapsed', !expand); this.element.classList.toggle('collapsible-collapsed', !expand);
this.element.style.maxHeight = expand ? '' : this.maxHeight + 'px'; this.element.style.maxHeight = expand ? '' : this.maxHeight + 'px';
const toggleButton = this.element.querySelector('ion-button.core-format-text-toggle'); const toggleButton = this.element.querySelector('ion-button.collapsible-toggle');
const toggleText = toggleButton?.querySelector('.core-format-text-toggle-text'); const toggleText = toggleButton?.querySelector('.collapsible-toggle-text');
if (!toggleButton || !toggleText) { if (!toggleButton || !toggleText) {
return; return;
} }
@ -396,8 +401,7 @@ export class CoreFormatTextDirective implements OnChanges {
this.element.classList.add('core-disable-media-adapt'); this.element.classList.add('core-disable-media-adapt');
this.contentSpan.innerHTML = ''; // Remove current contents. this.contentSpan.innerHTML = ''; // Remove current contents.
if (this.maxHeight && result.div.innerHTML != '' && if (this.maxHeight && result.div.innerHTML != '') {
(window.innerWidth < 576 || window.innerHeight < 576)) { // Don't collapse in big screens.
// Move the children to the current element to be able to calculate the height. // Move the children to the current element to be able to calculate the height.
CoreDomUtils.moveChildren(result.div, this.contentSpan); CoreDomUtils.moveChildren(result.div, this.contentSpan);

74
src/theme/components/format-text.scss
View File

@ -4,13 +4,11 @@
core-format-text { core-format-text {
--core-format-text-background: var(--background, var(--ion-item-background)); --core-format-text-background: var(--background, var(--ion-item-background));
--core-format-text-background-gradient-rgb: var(--background-rgb, #{$ion-item-background-rgb});
--core-format-text-viewer-icon-background: rgba(255, 255, 255, .5); --core-format-text-viewer-icon-background: rgba(255, 255, 255, .5);
--core-format-text-loader-shine: 251,251,251; --core-format-text-loader-shine: 251,251,251;
} }
body.dark core-format-text { body.dark core-format-text {
--core-format-text-background-gradient-rgb: var(--background-rgb, #{$ion-item-background-dark-rgb});
--core-format-text-viewer-icon-background: rgba(0, 0, 0, .5); --core-format-text-viewer-icon-background: rgba(0, 0, 0, .5);
--core-format-text-loader-shine: 90,90,90; --core-format-text-loader-shine: 90,90,90;
} }
@ -51,12 +49,12 @@ core-format-text {
display: inline; display: inline;
} }
.core-format-text-toggle { .collapsible-toggle {
display: none !important; display: none !important;
} }
} }
.core-format-text-toggle { .collapsible-toggle {
display: none; display: none;
} }
@ -84,81 +82,21 @@ core-format-text {
} }
// This is to allow clicks in radio/checkbox content. // This is to allow clicks in radio/checkbox content.
&.core-text-formatted { &.collapsible-enabled {
cursor: pointer; cursor: pointer;
pointer-events: auto; pointer-events: auto;
.core-format-text-toggle { @include collapsible-item();
display: block;
position: absolute;
bottom: 0;
left: 0;
right: 0;
text-align: center;
z-index: 7;
text-transform: none;
text-align: end;
font-size: 14px;
background-color: var(--core-format-text-background);
color: var(--text-color);
margin: 0;
.core-format-text-arrow {
width: var(--a11y-min-target-size);
height: var(--a11y-min-target-size);
background-position: center;
background-repeat: no-repeat;
background-size: 14px 14px;
@include core-transition(transform, 500ms);
@include push-arrow-color(626262, true);
@include darkmode() {
@include push-arrow-color(ffffff, true);
}
}
}
&.core-text-format-collapsed {
overflow: hidden;
min-height: 50px;
.core-format-text-arrow {
transform: rotate(90deg);
}
&:before {
content: '';
height: 100%;
position: absolute;
@include position(null, 0, 0, 0);
background: -webkit-linear-gradient(top, rgba(var(--core-format-text-background-gradient-rgb), 0) calc(100% - 60px), rgba(var(--core-format-text-background-gradient-rgb), 1) calc(100% - 40px));
background: linear-gradient(to bottom, rgba(var(--core-format-text-background-gradient-rgb), 0) calc(100% - 60px), rgba(var(--core-format-text-background-gradient-rgb), 1) calc(100% - 40px));
z-index: 6;
}
}
&.core-text-format-expanded {
max-height: none !important;
padding-bottom: 50px; // So the Show less button can fit.
.core-format-text-arrow {
transform: rotate(-90deg);
}
}
} }
} }
@if ($core-format-text-never-shorten) { @if ($core-format-text-never-shorten) {
&[maxHeight], &[maxHeight],
&[ng-reflect-max-height] { &[ng-reflect-max-height] {
&.core-text-formatted.core-text-format-expanded { &.collapsible-enabled.collapsible-expanded {
max-height: none !important; max-height: none !important;
.core-format-text-toggle { .collapsible-toggle {
display: none !important; display: none !important;
} }

77
src/theme/globals.mixins.scss
View File

@ -219,9 +219,84 @@
--horizontal-margin: 6px; --horizontal-margin: 6px;
} }
} }
} }
@mixin collapsible-item() {
--display-toggle: none;
.collapsible-toggle {
display: var(--display-toggle);
}
@include media-breakpoint-down(sm) {
&.collapsible-enabled {
position:relative;
--display-toggle: block;
.collapsible-toggle {
position: absolute;
@include position (null, 0, 0, null);
text-align: center;
z-index: 7;
text-transform: none;
font-size: 14px;
font-weight: normal;
background-color: var(--collapsible-toggle-background);
color: var(--collapsible-toggle-text);
min-height: var(--a11y-min-target-size);
min-width: var(--a11y-min-target-size);
--border-radius: var(--huge-radius);
border-radius: var(--border-radius);
--padding-start: 0px;
--padding-end: 0px;
margin: 0px;
.collapsible-toggle-arrow {
width: var(--a11y-min-target-size);
height: var(--a11y-min-target-size);
background-position: center;
background-repeat: no-repeat;
background-size: 14px 14px;
@include core-transition(transform, 500ms);
@include push-arrow-color(626262, true);
@include darkmode() {
@include push-arrow-color(ffffff, true);
}
}
}
&.collapsible-collapsed {
overflow: hidden;
min-height: calc(var(--collapsible-min-button-height) + 12px);
.collapsible-toggle-arrow {
transform: rotate(90deg);
}
&:before {
content: '';
height: 100%;
position: absolute;
@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: linear-gradient(to bottom, rgba(var(--background-gradient-rgb), 0) calc(100% - 56px), rgba(var(--background-gradient-rgb), 1) calc(100% - 5px));
z-index: 6;
}
}
&.collapsible-expanded {
max-height: none !important;
padding-bottom: var(--collapsible-min-button-height); // So the Show less button can fit.
.collapsible-toggle-arrow {
transform: rotate(-90deg);
}
}
}
}
}
// Color mixins. // Color mixins.
@function get_brightness($color) { @function get_brightness($color) {

72
src/theme/theme.base.scss
View File

@ -1439,77 +1439,7 @@ ion-grid.core-no-grid > ion-row {
} }
[collapsible-item] { [collapsible-item] {
--collapsible-display-toggle: none; @include collapsible-item();
--collapsible-toggle-background: var(--ion-item-background);
--collapsible-min-button-height: 44px;
.collapsible-toggle {
display: var(--collapsible-display-toggle);
}
&.collapsible-enabled {
--collapsible-display-toggle: block;
.collapsible-toggle {
display: var(--collapsible-display-toggle);
position: absolute;
bottom: 0;
left: 0;
right: 0;
text-align: center;
z-index: 7;
text-transform: none;
text-align: end;
font-size: 14px;
background-color: var(--collapsible-toggle-background);
color: var(--text-color);
margin: 0;
.collapsible-toggle-arrow {
width: var(--a11y-min-target-size);
height: var(--a11y-min-target-size);
background-position: center;
background-repeat: no-repeat;
background-size: 14px 14px;
@include core-transition(transform, 500ms);
@include push-arrow-color(626262, true);
@include darkmode() {
@include push-arrow-color(ffffff, true);
}
}
}
&.collapsible-collapsed {
overflow: hidden;
min-height: calc(var(--collapsible-min-button-height) + 12);
.collapsible-toggle-arrow {
transform: rotate(90deg);
}
&:before {
content: '';
height: 100%;
position: absolute;
@include position(null, 0, 0, 0);
background: -webkit-linear-gradient(top, rgba(var(--core-format-text-background-gradient-rgb), 0) calc(100% - 60px), rgba(var(--core-format-text-background-gradient-rgb), 1) calc(100% - 40px));
background: linear-gradient(to bottom, rgba(var(--core-format-text-background-gradient-rgb), 0) calc(100% - 60px), rgba(var(--core-format-text-background-gradient-rgb), 1) calc(100% - 40px));
z-index: 6;
}
}
&.collapsible-expanded {
max-height: none !important;
padding-bottom: var(--collapsible-min-button-height); // So the Show less button can fit.
.collapsible-toggle-arrow {
transform: rotate(-90deg);
}
}
}
} }
ion-header.no-title { ion-header.no-title {

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

@ -97,6 +97,10 @@
--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);
--background-gradient-rgb: #{$ion-item-background-dark-rgb};
--core-login-background: var(--gray-900); --core-login-background: var(--gray-900);
--core-login-text-color: var(--white); --core-login-text-color: var(--white);
--core-login-input-background: var(--core-login-background); --core-login-input-background: var(--core-login-background);

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

@ -288,6 +288,12 @@
--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-min-button-height: 44px;
--collapsible-toggle-text: var(--text-color);
--background-gradient-rgb: #{$ion-item-background-rgb};
--core-login-background: var(--white); --core-login-background: var(--white);
--core-login-text-color: var(--gray-900); --core-login-text-color: var(--gray-900);
--core-login-input-background: var(--white); --core-login-input-background: var(--white);