CIT/Vmeda.Online
3
0
Fork 1
forked from EVOgeek/Vmeda.Online
Code Pull Requests Activity

MOBILE-3320 ios: Fixes on tabs and format text styles

Browse Source
This commit is contained in:
Pau Ferrer Ocaña 2021-05-21 11:43:55 +02:00
parent eff001f6bc
commit d23ff1aba7
6 changed files with 53 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/core/components/tabs/tabs.scss
View File

@ -1,6 +1,7 @@
:host {
--tabs-background: var(--core-tabs-background);
--tabs-color: var(--color);
--height: 56px;
height: 100%;
display: block;
@ -12,8 +13,8 @@
ion-tab-bar.core-tabs-bar {
position: relative;
width: 100%;
height: auto;
background: var(--tabs-background);
height: var(--height);
color: var(--tabs-color);
-webkit-filter: drop-shadow(0px 3px 3px rgba(var(--drop-shadow)));
filter: drop-shadow(0px 3px 3px rgba(var(--drop-shadow)));
@ -26,7 +27,7 @@
.tab-slide {
border-bottom: 2px solid transparent;
min-width: 100px;
min-height: 56px;
min-height: var(--height);
cursor: pointer;
overflow: hidden;
@ -95,3 +96,8 @@
}
}
}
:host-context(.ios) {
--height: 53px;
}

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

@ -206,20 +206,21 @@ export class CoreFormatTextDirective implements OnChanges {
const imgSrc = CoreTextUtils.escapeHTML(img.getAttribute('data-original-src') || img.getAttribute('src'));
const label = Translate.instant('core.openfullimage');
const anchor = document.createElement('a');
const button = document.createElement('button');
anchor.classList.add('core-image-viewer-icon');
anchor.setAttribute('aria-label', label);
button.classList.add('core-image-viewer-icon');
button.setAttribute('aria-label', label);
// Add an ion-icon item to apply the right styles, but the ion-icon component won't be executed.
anchor.innerHTML = '<ion-icon name="fas-search" src="assets/fonts/font-awesome/solid/search.svg"></ion-icon>';
button.innerHTML = '<ion-icon name="fas-search" aria-hidden="true" src="assets/fonts/font-awesome/solid/search.svg">\
</ion-icon>';
anchor.addEventListener('click', (e: Event) => {
button.addEventListener('click', (e: Event) => {
e.preventDefault();
e.stopPropagation();
CoreDomUtils.viewImage(imgSrc, img.getAttribute('alt'), this.component, this.componentId, true);
});
img.parentNode?.appendChild(anchor);
img.parentNode?.appendChild(button);
});
}

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

@ -2,6 +2,18 @@
/** Styles of elements inside the directive should be placed in format-text.scss */
@import "~theme/globals";
:root {
--background: var(--background, #{$ion-item-background});
--background-gradient-rgb: var(--background-rgb, #{color-to-rgb-list($ion-item-background)});
--viewer-icon-background: rgba(255, 255, 255, .5);
}
:root body.dark {
--background: var(--background, #{$ion-item-background-dark});
--background-gradient-rgb: var(--background-rgb, #{color-to-rgb-list($ion-item-background-dark)});
--viewer-icon-background: rgba(0, 0, 0, .5);
}
core-format-text {
user-select: text;
word-break: break-word;
@ -47,20 +59,19 @@ core-format-text {
z-index: 7;
background-color: var(--background);
color: var(--text-color);
padding-left: 10px; // RTL
@include padding(null, null, null, 10px);
margin: 0;
}
&:before {
content: '';
height: 100%;
position: absolute;
right: 0;
bottom: 0;
left: 0;
background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) calc(100% - 50px), var(--background) calc(100% - 15px));
background: -webkit-gradient(left top, left bottom, color-stop(calc(100% - 50px), rgba(0, 0, 0, 0)), color-stop(calc(100% - 15px), var(--background)));
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) calc(100% - 50px), var(--background) calc(100% - 15px));
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) calc(100% - 50px), var(--background) calc(100% - 15px));
@include position(null, 0, 0, 0);
background: -moz-linear-gradient(top, rgba(var(--background-gradient-rgb), 0) calc(100% - 50px), rgba(var(--background-gradient-rgb), 1) calc(100% - 15px));
background: -webkit-gradient(left top, left bottom, color-stop(calc(100% - 50px), rgba(var(--background-gradient-rgb), 0)), color-stop(calc(100% - 15px), rgba(var(--background-gradient-rgb), 1)));
background: -webkit-linear-gradient(top, rgba(var(--background-gradient-rgb), 0) calc(100% - 50px), rgba(var(--background-gradient-rgb), 1) calc(100% - 15px));
background: linear-gradient(to bottom, rgba(var(--background-gradient-rgb), 0) calc(100% - 50px), rgba(var(--background-gradient-rgb), 1) calc(100% - 15px));
z-index: 6;
}
}
@ -70,7 +81,7 @@ core-format-text {
.core-show-more {
@include push-arrow-color(626262, true);
@include padding-horizontal(null, 5px);
@include background-position(end, 0, center);
@include background-position(end, 5px, center);
background-repeat: no-repeat;
background-size: 14px 14px;
@ -93,18 +104,17 @@ core-format-text {
@include position(null, 10px, 10px, null);
color: var(--black);
border-radius: 5px;
background-color: rgba(255, 255, 255, .5);
text-align: center;
cursor: pointer;
background-color: var(--viewer-icon-background);
display: flex;
width: 32px;
height: 32px;
max-width: 32px;
line-height: 32px;
width: var(--a11y-min-target-size);
height: var(--a11y-min-target-size);
max-width: var(--a11y-min-target-size);
font-size: 24px;
ion-icon {
margin-top: 3px;
flex: 1;
align-self: center;
}
&:hover {
@ -112,9 +122,3 @@ core-format-text {
}
}
}
body.dark {
core-format-text .core-image-viewer-icon {
background-color: rgba(0, 0, 0, .5);
}
}

16
src/theme/globals.variables.scss
View File

@ -72,17 +72,17 @@ $text-color-dark: $white !default;
$link-color: $blue !default;
$link-color-dark: $blue-light !default;
$background-color: $gray-light !default;
$background-color-dark: #{$shade-90} !default;
$background-color-dark: $shade-90 !default;
$subdued-text-color: $gray-darker !default;
$ion-item-background: $white !default;
$ion-item-background-dark: #{$shade-80} !default;
$ion-item-divider-background: #{$gray-lighter} !default;
$ion-item-divider-color: #{$text-color} !default;
$core-spacer-background: #{$ion-item-divider-background} !default;
$ion-item-divider-background-dark: #{$shade-75} !default;
$ion-item-divider-color-dark: #{$text-color-dark} !default;
$core-spacer-background-dark: #{$shade-100} !default;
$ion-item-background-dark: $shade-80 !default;
$ion-item-divider-background: $gray-lighter !default;
$ion-item-divider-color: $text-color !default;
$core-spacer-background: $ion-item-divider-background !default;
$ion-item-divider-background-dark: $shade-75 !default;
$ion-item-divider-color-dark: $text-color-dark !default;
$core-spacer-background-dark: $shade-100 !default;
$core-online-color: #5cb85c !default;

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

@ -7,10 +7,10 @@
:root body.dark {
--ion-background-color: #{$background-color-dark};
--ion-background-color-rgb: color-to-rgb-list(var(--ion-background-color));
--ion-background-color-rgb: #{color-to-rgb-list($background-color-dark)};
--ion-text-color: #{$text-color-dark};
--ion-text-color-rgb: color-to-rgb-list(var(--ion-text-color));
--ion-text-color-rgb: #{color-to-rgb-list($text-color-dark)};
// Enlighten the ionic shades.
--ion-color-step-50: #1e1e1e;

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

@ -70,7 +70,7 @@
--module-icon-size: 24px;
--ion-background-color: #{$background-color};
--ion-background-color-rgb: color-to-rgb-list(var(--ion-background-color));
--ion-background-color-rgb: #{color-to-rgb-list($background-color)};
--ion-text-color: #{$text-color};
--ion-text-color-rgb: 58,58,58;