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

MOBILE-3746 format-text: Convert show more to ion-button

main
Dani Palou 2021-05-12 11:52:19 +02:00
parent 35c2a569b5
commit e1502fe0be
2 changed files with 12 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -256,14 +256,17 @@ export class CoreFormatTextDirective implements OnChanges {
*/ */
protected displayShowMore(): void { protected displayShowMore(): void {
const expandInFullview = CoreUtils.isTrueOrOne(this.fullOnClick) || false; const expandInFullview = CoreUtils.isTrueOrOne(this.fullOnClick) || false;
const showMoreDiv = document.createElement('div'); const showMoreButton = document.createElement('ion-button');
showMoreDiv.classList.add('core-show-more'); showMoreButton.classList.add('core-show-more');
showMoreDiv.innerHTML = Translate.instant('core.showmore'); showMoreButton.setAttribute('fill', 'clear');
this.element.appendChild(showMoreDiv); showMoreButton.innerHTML = Translate.instant('core.showmore');
this.element.appendChild(showMoreButton);
if (expandInFullview) { if (expandInFullview) {
this.element.classList.add('core-expand-in-fullview'); this.element.classList.add('core-expand-in-fullview');
} else {
showMoreButton.setAttribute('aria-expanded', 'false');
} }
this.element.classList.add('core-text-formatted'); this.element.classList.add('core-text-formatted');
this.element.classList.add('core-shortened'); this.element.classList.add('core-shortened');
@ -624,11 +627,8 @@ export class CoreFormatTextDirective implements OnChanges {
* "Hide" the "Show more" in the element if it's shown. * "Hide" the "Show more" in the element if it's shown.
*/ */
protected hideShowMore(): void { protected hideShowMore(): void {
const showMoreDiv = this.element.querySelector('div.core-show-more'); const showMoreButton = this.element.querySelector('ion-button.core-show-more');
showMoreButton?.remove();
if (showMoreDiv) {
showMoreDiv.remove();
}
this.element.classList.remove('core-expand-in-fullview'); this.element.classList.remove('core-expand-in-fullview');
this.element.classList.remove('core-text-formatted'); this.element.classList.remove('core-text-formatted');

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

@ -38,6 +38,7 @@ core-format-text {
min-height: 50px; min-height: 50px;
.core-show-more { .core-show-more {
text-transform: none;
text-align: end; text-align: end;
font-size: 14px; font-size: 14px;
display: block; display: block;
@ -45,7 +46,7 @@ core-format-text {
@include position(null, 0, 0, null); @include position(null, 0, 0, null);
z-index: 7; z-index: 7;
background-color: var(--background); background-color: var(--background);
color: var(--color); color: var(--text-color);
padding-left: 10px; // RTL padding-left: 10px; // RTL
} }
@ -68,7 +69,7 @@ core-format-text {
&.core-expand-in-fullview { &.core-expand-in-fullview {
.core-show-more { .core-show-more {
@include push-arrow-color(626262, true); @include push-arrow-color(626262, true);
@include padding-horizontal(null, 18px); @include padding-horizontal(null, 5px);
@include background-position(end, 0, center); @include background-position(end, 0, center);
background-repeat: no-repeat; background-repeat: no-repeat;