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

Merge pull request #3149 from crazyserver/MOBILE-3814 

Mobile 3814
main
Dani Palou 2022-03-02 08:04:39 +01:00 committed by GitHub
parent e37b68dd47 389a1c8964
commit 0b214e4989
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 331 additions and 307 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/addons/messages/pages/discussion/discussion.html
View File

@ -69,8 +69,7 @@
<h2 class="sr-only">{{ title }}</h2>
<ion-list class="addon-messages-discussion-container list-item-limited-width" [class.addon-messages-discussion-group]="isGroup"
[attr.aria-live]="'polite'">
<ion-list class="addon-messages-discussion-container" [class.addon-messages-discussion-group]="isGroup" [attr.aria-live]="'polite'">
<ng-container *ngFor="let message of messages; index as index; last as last">
<h3 class="ion-text-center addon-messages-date" *ngIf="message.showDate">
{{ message.timecreated | coreFormatDate: "strftimedayshort" }}
@ -100,10 +99,10 @@
</div>
<!-- Some messages have <p> and some others don't. Add a <p> so they all have same styles. -->
<p class="addon-message-text">
<div class="addon-message-text">
<core-format-text (afterRender)="last && scrollToBottom()" [text]="message.text" contextLevel="system"
[contextInstanceId]="0"></core-format-text>
</p>
</div>
</ion-label>
<ion-note *ngIf="!message.pending" slot="end">{{ message.timecreated | coreFormatDate: "strftimetime" }}</ion-note>
<ion-note *ngIf="message.pending" slot="end">

6
src/addons/mod/chat/pages/chat/chat.html
View File

@ -93,13 +93,13 @@
<div>{{ message.userfullname }}</div>
</h2>
<p class="addon-message-text">
<div class="addon-message-text">
<core-format-text [text]="message.message" contextLevel="module" [contextInstanceId]="cmId"
[courseId]="courseId" (afterRender)="last && scrollToBottom()">
</core-format-text>
</p>
</div>
</ion-label>
<ion-note>{{ message.timestamp * 1000 | coreFormatDate: "strftimetime" }}</ion-note>
<ion-note slot="end">{{ message.timestamp * 1000 | coreFormatDate: "strftimetime" }}</ion-note>
<div class="tail" *ngIf="message.showTail"></div>
</ion-item>
</ng-container>

6
src/addons/mod/chat/pages/session-messages/session-messages.html
View File

@ -86,13 +86,13 @@
<div *ngIf="message.showUserData">{{ message.userfullname }}</div>
</h2>
<p class="addon-message-text">
<div class="addon-message-text">
<core-format-text [text]="message.message" contextLevel="module" [contextInstanceId]="cmId"
[courseId]="courseId">
</core-format-text>
</p>
<ion-note>{{ message.timestamp * 1000 | coreFormatDate: "strftimetime" }}</ion-note>
</div>
</ion-label>
<ion-note slot="end">{{ message.timestamp * 1000 | coreFormatDate: "strftimetime" }}</ion-note>
<div class="tail" *ngIf="message.showTail"></div>
</ion-item>
</ng-container>

81
src/core/directives/collapsible-footer.ts
View File

@ -17,6 +17,10 @@ import { ScrollDetail } from '@ionic/core';
import { IonContent } from '@ionic/angular';
import { CoreUtils } from '@services/utils/utils';
import { CoreMath } from '@singletons/math';
import { CoreComponentsRegistry } from '@singletons/components-registry';
import { CoreFormatTextDirective } from './format-text';
import { CoreDomUtils } from '@services/utils/dom';
import { CoreEventLoadingChangedData, CoreEventObserver, CoreEvents } from '@singletons/events';
/**
* Directive to make an element fixed at the bottom collapsible when scrolling.
@ -32,11 +36,12 @@ export class CoreCollapsibleFooterDirective implements OnInit, OnDestroy {
protected element: HTMLElement;
protected initialHeight = 0;
protected initialPaddingBottom = 0;
protected initialPaddingBottom = '0px';
protected previousTop = 0;
protected previousHeight = 0;
protected stickTimeout?: number;
protected content?: HTMLIonContentElement | null;
protected loadingChangedListener?: CoreEventObserver;
constructor(el: ElementRef, protected ionContent: IonContent) {
this.element = el.nativeElement;
@ -44,30 +49,28 @@ export class CoreCollapsibleFooterDirective implements OnInit, OnDestroy {
}
/**
* Setup scroll event listener.
*
* @param retries Number of retries left.
* Calculate the height of the footer.
*/
protected async listenScrollEvents(retries = 5): Promise<void> {
// Already initialized.
if (this.initialHeight > 0) {
return;
}
protected async calculateHeight(): Promise<void> {
await this.waitFormatTextsRendered(this.element);
this.initialHeight = this.element.getBoundingClientRect().height;
if (this.initialHeight == 0 && retries > 0) {
await CoreUtils.nextTicks(50);
this.listenScrollEvents(retries - 1);
return;
}
await CoreUtils.nextTick();
// Set a minimum height value.
this.initialHeight = this.initialHeight || 48;
this.initialHeight = this.element.getBoundingClientRect().height || 48;
this.previousHeight = this.initialHeight;
this.setBarHeight(this.initialHeight);
}
/**
* Setup scroll event listener.
*/
protected async listenScrollEvents(): Promise<void> {
if (this.content) {
return;
}
this.content = this.element.closest('ion-content');
if (!this.content) {
@ -82,12 +85,15 @@ export class CoreCollapsibleFooterDirective implements OnInit, OnDestroy {
}
// Set a padding to not overlap elements.
this.initialPaddingBottom = parseFloat(this.content.style.getPropertyValue('--padding-bottom') || '0');
this.content.style.setProperty('--padding-bottom', this.initialPaddingBottom + this.initialHeight + 'px');
this.initialPaddingBottom = this.content.style.getPropertyValue('--padding-bottom') || this.initialPaddingBottom;
this.content.style.setProperty(
'--padding-bottom',
`calc(${this.initialPaddingBottom} + var(--core-collapsible-footer-height, 0px))`,
);
const scroll = await this.content.getScrollElement();
this.content.scrollEvents = true;
this.setBarHeight(this.initialHeight);
this.content.addEventListener('ionScroll', (e: CustomEvent<ScrollDetail>): void => {
if (!this.content) {
return;
@ -98,6 +104,19 @@ export class CoreCollapsibleFooterDirective implements OnInit, OnDestroy {
}
/**
* Wait until all <core-format-text> children inside the element are done rendering.
*
* @param element Element.
*/
protected async waitFormatTextsRendered(element: Element): Promise<void> {
const formatTexts = Array
.from(element.querySelectorAll('core-format-text'))
.map(element => CoreComponentsRegistry.resolve(element, CoreFormatTextDirective));
await Promise.all(formatTexts.map(formatText => formatText?.rendered()));
}
/**
* On scroll function.
*
@ -144,15 +163,29 @@ export class CoreCollapsibleFooterDirective implements OnInit, OnDestroy {
/**
* @inheritdoc
*/
ngOnInit(): void {
async ngOnInit(): Promise<void> {
// Calculate the height now.
await this.calculateHeight();
setTimeout(() => this.calculateHeight(), 200); // Try again, sometimes the first calculation is wrong.
this.listenScrollEvents();
// Recalculate the height if a parent core-loading displays the content.
this.loadingChangedListener =
CoreEvents.on(CoreEvents.CORE_LOADING_CHANGED, async (data: CoreEventLoadingChangedData) => {
if (data.loaded && CoreDomUtils.closest(this.element.parentElement, '#' + data.uniqueId)) {
// The format-text is inside the loading, re-calculate the height.
await this.calculateHeight();
setTimeout(() => this.calculateHeight(), 200);
}
});
}
/**
* @inheritdoc
*/
async ngOnDestroy(): Promise<void> {
this.content?.style.setProperty('--padding-bottom', this.initialPaddingBottom + 'px');
this.content?.style.setProperty('--padding-bottom', this.initialPaddingBottom);
}
}

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

@ -14,8 +14,11 @@
import { Directive, ElementRef, Input, OnInit } from '@angular/core';
import { CoreDomUtils } from '@services/utils/dom';
import { CoreUtils } from '@services/utils/utils';
import { Translate } from '@singletons';
import { CoreComponentsRegistry } from '@singletons/components-registry';
import { CoreEventLoadingChangedData, CoreEventObserver, CoreEvents } from '@singletons/events';
import { CoreFormatTextDirective } from './format-text';
const defaultMaxHeight = 56;
const buttonHeight = 44;
@ -54,7 +57,7 @@ export class CoreCollapsibleItemDirective implements OnInit {
/**
* @inheritdoc
*/
ngOnInit(): void {
async ngOnInit(): Promise<void> {
if (typeof this.height === 'string') {
this.maxHeight = this.height === ''
? defaultMaxHeight
@ -70,31 +73,44 @@ export class CoreCollapsibleItemDirective implements OnInit {
}
// Calculate the height now.
this.calculateHeight();
await this.calculateHeight();
setTimeout(() => this.calculateHeight(), 200); // Try again, sometimes the first calculation is wrong.
this.setExpandButtonEnabled(false);
// Recalculate the height if a parent core-loading displays the content.
this.loadingChangedListener =
CoreEvents.on(CoreEvents.CORE_LOADING_CHANGED, (data: CoreEventLoadingChangedData) => {
CoreEvents.on(CoreEvents.CORE_LOADING_CHANGED, async (data: CoreEventLoadingChangedData) => {
if (data.loaded && CoreDomUtils.closest(this.element.parentElement, '#' + data.uniqueId)) {
// The format-text is inside the loading, re-calculate the height.
this.calculateHeight();
// The element is inside the loading, re-calculate the height.
await this.calculateHeight();
setTimeout(() => this.calculateHeight(), 200);
}
});
}
/**
* Wait until all <core-format-text> children inside the element are done rendering.
*
* @param element Element.
*/
protected async waitFormatTextsRendered(element: Element): Promise<void> {
const formatTexts = Array
.from(element.querySelectorAll('core-format-text'))
.map(element => CoreComponentsRegistry.resolve(element, CoreFormatTextDirective));
await Promise.all(formatTexts.map(formatText => formatText?.rendered()));
}
/**
* Calculate the height and check if we need to display show more or not.
*/
protected calculateHeight(): void {
// @todo: Work on calculate this height better.
protected async calculateHeight(): Promise<void> {
await this.waitFormatTextsRendered(this.element);
// Remove max-height (if any) to calculate the real height.
const initialMaxHeight = this.element.style.maxHeight;
this.element.style.maxHeight = '';
this.element.style.maxHeight = 'none';
await CoreUtils.nextTick();
const height = CoreDomUtils.getElementHeight(this.element) || 0;
@ -102,7 +118,7 @@ export class CoreCollapsibleItemDirective implements OnInit {
this.element.style.maxHeight = initialMaxHeight;
// If cannot calculate height, shorten always.
this.setExpandButtonEnabled(!height || height > this.maxHeight);
this.setExpandButtonEnabled(!height || height >= this.maxHeight);
}
/**
@ -115,9 +131,7 @@ export class CoreCollapsibleItemDirective implements OnInit {
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';
this.setMaxHeight(!enable || this.expanded? undefined : this.maxHeight);
return;
}
@ -141,6 +155,19 @@ export class CoreCollapsibleItemDirective implements OnInit {
this.toggleExpand(this.expanded);
}
/**
* Set max height to element.
*
* @param maxHeight Max height if collapsed or undefined if expanded.
*/
protected setMaxHeight(maxHeight?: number): void {
if (maxHeight) {
this.element.style.setProperty('--max-height', maxHeight + buttonHeight + 'px');
} else {
this.element.style.removeProperty('--max-height');
}
}
/**
* Expand or collapse text.
*
@ -151,13 +178,8 @@ export class CoreCollapsibleItemDirective implements OnInit {
expand = !this.expanded;
}
this.expanded = expand;
this.element.classList.toggle('collapsible-expanded', expand);
this.element.classList.toggle('collapsible-collapsed', !expand);
if (expand) {
this.element.style.setProperty('--max-height', this.maxHeight + buttonHeight + 'px');
} else {
this.element.style.removeProperty('--max-height');
}
this.setMaxHeight(!expand? this.maxHeight: undefined);
const toggleButton = this.element.querySelector('ion-button.collapsible-toggle');
const toggleText = toggleButton?.querySelector('.collapsible-toggle-text');

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

@ -272,15 +272,19 @@ export class CoreFormatTextDirective implements OnChanges {
/**
* Calculate the height and check if we need to display show more or not.
*/
protected calculateHeight(): void {
protected async calculateHeight(): Promise<void> {
// @todo: Work on calculate this height better.
if (!this.maxHeight) {
return;
}
await this.rendered();
// Remove max-height (if any) to calculate the real height.
const initialMaxHeight = this.element.style.maxHeight;
this.element.style.maxHeight = '';
this.element.style.maxHeight = 'none';
await CoreUtils.nextTick();
const height = this.getElementHeight(this.element);
@ -288,7 +292,20 @@ export class CoreFormatTextDirective implements OnChanges {
this.element.style.maxHeight = initialMaxHeight;
// If cannot calculate height, shorten always.
this.setExpandButtonEnabled(!height || height > this.maxHeight);
this.setExpandButtonEnabled(!height || height >= this.maxHeight);
}
/**
* Set max height to element.
*
* @param maxHeight Max height if collapsed or undefined if expanded.
*/
protected setMaxHeight(maxHeight?: number): void {
if (maxHeight) {
this.element.style.setProperty('--max-height', maxHeight + 'px');
} else {
this.element.style.removeProperty('--max-height');
}
}
/**
@ -301,9 +318,7 @@ export class CoreFormatTextDirective implements OnChanges {
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';
this.setMaxHeight(!enable || this.expanded? undefined : this.maxHeight);
return;
}
@ -337,13 +352,9 @@ export class CoreFormatTextDirective implements OnChanges {
expand = !this.expanded;
}
this.expanded = expand;
this.element.classList.toggle('collapsible-expanded', expand);
this.element.classList.toggle('collapsible-collapsed', !expand);
if (expand) {
this.element.style.setProperty('--max-height', this.maxHeight + 'px');
} else {
this.element.style.removeProperty('--max-height');
}
this.setMaxHeight(!expand? this.maxHeight: undefined);
const toggleButton = this.element.querySelector('ion-button.collapsible-toggle');
const toggleText = toggleButton?.querySelector('.collapsible-toggle-text');
if (!toggleButton || !toggleText) {

12
src/core/features/comments/pages/viewer/viewer.html
View File

@ -38,7 +38,7 @@
<core-infinite-loading [enabled]="canLoadMore" position="top" (action)="loadPrevious($event)" [error]="loadMoreError">
</core-infinite-loading>
<ion-list class="addon-messages-discussion-container list-item-limited-width">
<ion-list class="addon-messages-discussion-container">
<ng-container *ngFor="let comment of comments; index as index; last as last">
<p class="ion-text-center addon-messages-date" *ngIf="comment.showDate">
@ -56,13 +56,13 @@
<div>{{ comment.fullname }}</div>
</h2>
<p class="addon-message-text">
<div class="addon-message-text">
<core-format-text [text]="comment.content" [contextLevel]="contextLevel" [contextInstanceId]="instanceId"
[courseId]="courseId">
</core-format-text>
</p>
</div>
</ion-label>
<ion-note>
<ion-note slot="end">
<ng-container *ngIf="!comment.deleted">
{{ comment.timecreated * 1000 | coreFormatDate: 'strftimetime' }}
</ng-container>
@ -94,11 +94,11 @@
{{ 'core.thereisdatatosync' | translate:{$a: 'core.comments.comments' | translate | lowercase } }}
</p>
<p class="addon-message-text">
<div class="addon-message-text">
<core-format-text [text]="offlineComment.content" [contextLevel]="contextLevel" [contextInstanceId]="instanceId"
[courseId]="courseId">
</core-format-text>
</p>
</div>
</ion-label>
<ion-note>
<ion-icon name="fas-clock" aria-hidden="true"></ion-icon> {{ 'core.notsent' | translate }}

2
src/core/features/mainmenu/components/user-menu/user-menu.ts
View File

@ -207,7 +207,7 @@ export class CoreMainMenuUserMenuComponent implements OnInit, OnDestroy {
const closeAll = await CoreDomUtils.openSideModal<boolean>({
component: CoreLoginSitesComponent,
cssClass: 'core-modal-lateral-sm',
cssClass: 'core-modal-lateral core-modal-lateral-sm',
});
if (closeAll) {

102
src/theme/components/discussion.scss
View File

@ -1,37 +1,48 @@
@import "~theme/globals.scss";
:host {
ion-content {
--background: var(--background-alternative);
:host-context(.ios) {
ion-footer .toolbar:last-child {
padding-bottom: 4px;
min-height: 0;
}
}
ion-content {
--content-background: var(--background-alternative);
--background: var(--content-background);
&::part(scroll) {
padding-bottom: 0 !important;
}
}
}
.addon-messages-discussion-container {
.addon-messages-discussion-container {
display: flex;
flex-direction: column;
padding-bottom: 15px;
background: var(--background-alternative);
}
padding-bottom: 16px !important;
background: var(--content-background);
}
.addon-messages-date {
.addon-messages-date {
font-weight: normal;
font-size: 0.9rem;
}
}
// Message item.
ion-item.addon-message {
--message-background: var(--addon-messages-message-bg);
--message-activated-background: var(--addon-messages-message-activated-bg);
--message-alignment: flex-start;
// Message item.
ion-item.addon-message {
border: 0;
border-radius: var(--small-radius);
border-radius: var(--medium-radius);
padding: 0 8px 0 8px;
margin: 10px 8px 0 8px;
--background: var(--addon-messages-message-bg);
background: var(--background);
align-self: flex-start;
margin: 8px;
--background: var(--message-background);
background: var(--message-background);
align-self: var(--message-alignment);
width: 90%;
max-width: 90%;
max-width: var(--list-item-max-width);
--min-height: var(--a11y-min-target-size);
position: relative;
@include core-transition(width);
@ -45,6 +56,10 @@
margin: 0;
}
&:hover {
filter: drop-shadow(2px 2px 2px rgba(0,0,0,.3));
}
core-format-text > p:only-child {
display: inline;
}
@ -67,7 +82,8 @@
div {
font-weight: 500;
flex-grow: 1;
@include padding-horizontal(.5rem);
padding-left: .5rem;
padding-right: .5rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
@ -78,12 +94,12 @@
color: var(--addon-messages-message-note-text);
font-size: var(--addon-messages-message-note-font-size);
margin: 0;
padding: 0 0 8px 0;
align-self: flex-end;
padding: 8px 0;
align-self: flex-start;
}
&[tappable]:active {
--background: var(--addon-messages-message-activated-bg);
--message-background: var(--message-activated-background);
}
ion-label {
@ -106,16 +122,14 @@
position: absolute;
touch-action: none;
bottom: 0;
border-bottom-color: var(--message-background);
}
// Defines when an item-message is the user's.
&.addon-message-mine {
--background: var(--addon-messages-message-mine-bg);
align-self: flex-end;
&[tappable]:active {
--background: var(--addon-messages-message-mine-activated-bg);
}
--message-background: var(--addon-messages-message-mine-bg);
--message-activated-background: var(--addon-messages-message-mine-activated-bg);
--message-alignment: flex-end;
.spinner {
@include float(end);
@ -130,28 +144,19 @@
.tail {
@include position(null, -8px, null, null);
@include margin-horizontal(null, -0.5rem);
border-bottom-color: var(--addon-messages-message-mine-bg);
}
&[tappable]:active .tail {
border-bottom-color: var(--addon-messages-message-mine-activated-bg);
}
}
&.addon-message-not-mine .tail {
border-bottom-color: var(--addon-messages-message-bg);
@include position(null, null, null, -8px);
@include margin-horizontal(-0.5rem, null);
}
&[tappable].addon-message-not-mine.activated .tail {
border-bottom-color: var(--addon-messages-message-activated-bg);
}
.addon-messages-delete-button {
min-height: initial;
line-height: initial;
@include margin(0, null, 0, null);
margin-top: 0px;
margin-bottom: 0px;
height: var(--a11y-min-target-size) !important;
align-self: flex-end;
@ -163,23 +168,6 @@
}
&.addon-message-no-user {
margin-top: 8px;
}
}
ion-item.addon-message.addon-message-mine + ion-item.addon-message.addon-message-no-user.addon-message-mine,
ion-item.addon-message.addon-message-not-mine + ion-item.addon-message.addon-message-no-user.addon-message-not-mine {
.item-heading {
margin-bottom: 0;
}
padding-top: 0;
}
}
:host-context(.ios) {
ion-footer .toolbar:last-child {
padding-bottom: 4px;
min-height: 0;
margin-top: 0px;
}
}

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

@ -235,6 +235,7 @@
@include media-breakpoint-down(sm) {
&.collapsible-enabled {
position:relative;
padding-bottom: var(--collapsible-min-button-height); // So the Show less button can fit.
--display-toggle: block;
.collapsible-toggle {
@ -262,6 +263,8 @@
background-position: center;
background-repeat: no-repeat;
background-size: 14px 14px;
transform: rotate(-90deg);
@include core-transition(transform, 500ms);
@include push-arrow-color(626262, true);
@ -275,7 +278,7 @@
&.collapsible-collapsed {
overflow: hidden;
min-height: calc(var(--collapsible-min-button-height) + 12px);
max-height: calc(var(--max-height), auto);
max-height: calc(var(--max-height, auto));
.collapsible-toggle-arrow {
transform: rotate(90deg);
@ -291,15 +294,6 @@
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);
}
}
}
}
}

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

@ -79,8 +79,6 @@ $screen-breakpoints: (
xl: 1200px
) !default;
$modal-lateral-width: 360px;
$core-course-image-background: #81ecec, #74b9ff, #a29bfe, #dfe6e9, #00b894, #0984e3, #b2bec3, #fdcb6e, #fd79a8, #6c5ce7 !default;
$core-dd-question-colors: #FFFFFF, #B0C4DE, #DCDCDC, #D8BFD8, #87CEFA, #DAA520, #FFD700, #F0E68C !default;
$core-text-hightlight-background-color: lighten($blue, 40%) !default;

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

@ -628,55 +628,31 @@ body.core-iframe-fullscreen ion-router-outlet {
z-index: 100000 !important;
}
.core-modal-lateral .modal-wrapper {
@include margin-horizontal(16px, null);
}
@media only screen and (min-height: 400px) and (min-width: #{$modal-lateral-width}) {
.core-modal-lateral {
.core-modal-lateral {
--ion-safe-area-left: 0px;
--ion-safe-area-right: 0px;
.modal-wrapper {
@include margin-horizontal(var(--modal-lateral-margin), null);
position: absolute;
@include position(0 !important, 0 !important, 0 !important, unset !important);
display: block;
height: 100% !important;
width: auto;
min-width: calc(#{$modal-lateral-width} - 16px);
width: calc(100% - var(--modal-lateral-margin));
max-width: calc(var(--modal-lateral-max-width));
box-shadow: 0 28px 48px rgba(0, 0, 0, 0.4);
}
ion-backdrop {
visibility: visible;
}
}
}
@each $breakpoint, $width in $screen-breakpoints {
.core-modal-lateral-#{$breakpoint} .modal-wrapper {
@include margin-horizontal(16px, null);
}
@media only screen and (min-height: 400px) and (min-width: #{$width}) {
.core-modal-lateral-#{$breakpoint} {
--ion-safe-area-left: 0px;
--ion-safe-area-right: 0px;
.modal-wrapper {
position: absolute;
@include position(0 !important, 0 !important, 0 !important, unset !important);
display: block;
height: 100% !important;
width: auto;
min-width: #{$width};
box-shadow: 0 28px 48px rgba(0, 0, 0, 0.4);
--modal-lateral-max-width: #{$width};
}
ion-backdrop {
visibility: visible;
}
}
}
}
// Hidden submit button.

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

@ -81,6 +81,9 @@
--list-item-max-width: 768px;
--modal-lateral-max-width: 320px;
--modal-lateral-margin: 56px;
--contrast-background: white;
--ion-text-color: var(--text-color);
@ -104,7 +107,7 @@
ion-content {
--background: var(--ion-background-color);
--background-alternative: var(--light);
--background-alternative: var(--gray-200);
}
--core-bottom-tabs-background: var(--white);
@ -324,8 +327,8 @@
--addon-messages-message-activated-bg: var(--gray-200);
--addon-messages-message-note-text: var(--gray-500);
--addon-messages-message-note-font-size: 75%;
--addon-messages-message-mine-bg: var(--gray-200);
--addon-messages-message-mine-activated-bg: var(--gray-300);
--addon-messages-message-mine-bg: var(--gray-300);
--addon-messages-message-mine-activated-bg: var(--gray-400);
--addon-messages-avatar-size: 30px;
--addon-messages-discussion-badge: var(--primary);
--addon-messages-discussion-badge-text: var(--white);