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";
:host {
--core-format-text-background-gradient-rgb: var(--background-rgb, #{$ion-item-background-rgb});
--course-storage-max-activity-height: 120px;
ion-card.section ion-card-header {
@ -23,8 +22,8 @@
min-height: var(--course-storage-max-activity-height);
position: absolute;
@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: 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: -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(--background-gradient-rgb), 0) calc(100% - 30px), rgba(var(--background-gradient-rgb), 1) calc(100% - 20px));
z-index: 6;
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;
if (!this.maxHeight || (window.innerWidth > 576 && window.innerHeight > 576)) {
// Do not collapse on big screens.
if (!this.maxHeight) {
// Do not collapse.
return;
}
@ -91,9 +91,6 @@ export class CoreCollapsibleItemDirective implements OnInit {
*/
protected calculateHeight(): void {
// @todo: Work on calculate this height better.
if (!this.maxHeight) {
return;
}
// Remove max-height (if any) to calculate the real height.
const initialMaxHeight = this.element.style.maxHeight;
@ -117,7 +114,11 @@ export class CoreCollapsibleItemDirective implements OnInit {
this.toggleExpandEnabled = 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;
}
@ -128,6 +129,7 @@ export class CoreCollapsibleItemDirective implements OnInit {
const toggleText = document.createElement('span');
toggleText.classList.add('collapsible-toggle-text');
toggleText.classList.add('sr-only');
toggleButton.appendChild(toggleText);
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 {
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;
}
// Add expand/collapse buttons
const toggleButton = document.createElement('ion-button');
toggleButton.classList.add('core-format-text-toggle');
toggleButton.classList.add('collapsible-toggle');
toggleButton.setAttribute('fill', 'clear');
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);
const expandArrow = document.createElement('span');
expandArrow.classList.add('core-format-text-arrow');
expandArrow.classList.add('collapsible-toggle-arrow');
toggleButton.appendChild(expandArrow);
this.element.appendChild(toggleButton);
@ -313,12 +318,12 @@ export class CoreFormatTextDirective implements OnChanges {
expand = !this.expanded;
}
this.expanded = expand;
this.element.classList.toggle('core-text-format-expanded', expand);
this.element.classList.toggle('core-text-format-collapsed', !expand);
this.element.classList.toggle('collapsible-expanded', expand);
this.element.classList.toggle('collapsible-collapsed', !expand);
this.element.style.maxHeight = expand ? '' : this.maxHeight + 'px';
const toggleButton = this.element.querySelector('ion-button.core-format-text-toggle');
const toggleText = toggleButton?.querySelector('.core-format-text-toggle-text');
const toggleButton = this.element.querySelector('ion-button.collapsible-toggle');
const toggleText = toggleButton?.querySelector('.collapsible-toggle-text');
if (!toggleButton || !toggleText) {
return;
}
@ -396,8 +401,7 @@ export class CoreFormatTextDirective implements OnChanges {
this.element.classList.add('core-disable-media-adapt');
this.contentSpan.innerHTML = ''; // Remove current contents.
if (this.maxHeight && result.div.innerHTML != '' &&
(window.innerWidth < 576 || window.innerHeight < 576)) { // Don't collapse in big screens.
if (this.maxHeight && result.div.innerHTML != '') {
// Move the children to the current element to be able to calculate the height.
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-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-loader-shine: 251,251,251;
}
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-loader-shine: 90,90,90;
}
@ -51,12 +49,12 @@ core-format-text {
display: inline;
}
.core-format-text-toggle {
.collapsible-toggle {
display: none !important;
}
}
.core-format-text-toggle {
.collapsible-toggle {
display: none;
}
@ -84,81 +82,21 @@ core-format-text {
}
// This is to allow clicks in radio/checkbox content.
&.core-text-formatted {
&.collapsible-enabled {
cursor: pointer;
pointer-events: auto;
.core-format-text-toggle {
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);
}
}
@include collapsible-item();
}
}
@if ($core-format-text-never-shorten) {
&[maxHeight],
&[ng-reflect-max-height] {
&.core-text-formatted.core-text-format-expanded {
&.collapsible-enabled.collapsible-expanded {
max-height: none !important;
.core-format-text-toggle {
.collapsible-toggle {
display: none !important;
}

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

@ -219,9 +219,84 @@
--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.
@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-display-toggle: none;
--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);
}
}
}
@include collapsible-item();
}
ion-header.no-title {

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

@ -97,6 +97,10 @@
--core-combobox-color: var(--text-color);
--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-text-color: var(--white);
--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-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-text-color: var(--gray-900);
--core-login-input-background: var(--white);