From d973bd3028255052140918cc161be0423fef436c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= Date: Tue, 1 Mar 2022 15:38:22 +0100 Subject: [PATCH] MOBILE-3814 messages: Fix on some styles --- .../messages/pages/discussion/discussion.html | 7 +- src/addons/mod/chat/pages/chat/chat.html | 6 +- .../session-messages/session-messages.html | 6 +- .../comments/pages/viewer/viewer.html | 12 +- .../components/user-menu/user-menu.ts | 2 +- src/theme/components/discussion.scss | 342 +++++++++--------- src/theme/theme.light.scss | 6 +- 7 files changed, 184 insertions(+), 197 deletions(-) diff --git a/src/addons/messages/pages/discussion/discussion.html b/src/addons/messages/pages/discussion/discussion.html index 7427dbd18..cc9770632 100644 --- a/src/addons/messages/pages/discussion/discussion.html +++ b/src/addons/messages/pages/discussion/discussion.html @@ -69,8 +69,7 @@

{{ title }}

- +

{{ message.timecreated | coreFormatDate: "strftimedayshort" }} @@ -100,10 +99,10 @@ -

+

-

+
{{ message.timecreated | coreFormatDate: "strftimetime" }} diff --git a/src/addons/mod/chat/pages/chat/chat.html b/src/addons/mod/chat/pages/chat/chat.html index 0fc26f280..92e022753 100644 --- a/src/addons/mod/chat/pages/chat/chat.html +++ b/src/addons/mod/chat/pages/chat/chat.html @@ -93,13 +93,13 @@
{{ message.userfullname }}

-

+

-

+
- {{ message.timestamp * 1000 | coreFormatDate: "strftimetime" }} + {{ message.timestamp * 1000 | coreFormatDate: "strftimetime" }}
diff --git a/src/addons/mod/chat/pages/session-messages/session-messages.html b/src/addons/mod/chat/pages/session-messages/session-messages.html index 7d0a57911..501e76cf8 100644 --- a/src/addons/mod/chat/pages/session-messages/session-messages.html +++ b/src/addons/mod/chat/pages/session-messages/session-messages.html @@ -86,13 +86,13 @@
{{ message.userfullname }}
-

+

-

- {{ message.timestamp * 1000 | coreFormatDate: "strftimetime" }} +
+ {{ message.timestamp * 1000 | coreFormatDate: "strftimetime" }}
diff --git a/src/core/features/comments/pages/viewer/viewer.html b/src/core/features/comments/pages/viewer/viewer.html index 4e1336a18..8a909686e 100644 --- a/src/core/features/comments/pages/viewer/viewer.html +++ b/src/core/features/comments/pages/viewer/viewer.html @@ -38,7 +38,7 @@ - +

@@ -56,13 +56,13 @@

{{ comment.fullname }}
-

+

-

+
- + {{ comment.timecreated * 1000 | coreFormatDate: 'strftimetime' }} @@ -94,11 +94,11 @@ {{ 'core.thereisdatatosync' | translate:{$a: 'core.comments.comments' | translate | lowercase } }}

-

+

-

+
{{ 'core.notsent' | translate }} diff --git a/src/core/features/mainmenu/components/user-menu/user-menu.ts b/src/core/features/mainmenu/components/user-menu/user-menu.ts index a43cb3f66..87cd958f9 100644 --- a/src/core/features/mainmenu/components/user-menu/user-menu.ts +++ b/src/core/features/mainmenu/components/user-menu/user-menu.ts @@ -207,7 +207,7 @@ export class CoreMainMenuUserMenuComponent implements OnInit, OnDestroy { const closeAll = await CoreDomUtils.openSideModal({ component: CoreLoginSitesComponent, - cssClass: 'core-modal-lateral-sm', + cssClass: 'core-modal-lateral core-modal-lateral-sm', }); if (closeAll) { diff --git a/src/theme/components/discussion.scss b/src/theme/components/discussion.scss index be9ec19d3..d6756b142 100644 --- a/src/theme/components/discussion.scss +++ b/src/theme/components/discussion.scss @@ -1,185 +1,173 @@ @import "~theme/globals.scss"; -:host { - ion-content { - --background: var(--background-alternative); - - &::part(scroll) { - padding-bottom: 0 !important; - } - } - - .addon-messages-discussion-container { - display: flex; - flex-direction: column; - padding-bottom: 15px; - background: var(--background-alternative); - } - - .addon-messages-date { - font-weight: normal; - font-size: 0.9rem; - } - - // Message item. - ion-item.addon-message { - border: 0; - border-radius: var(--small-radius); - padding: 0 8px 0 8px; - margin: 10px 8px 0 8px; - --background: var(--addon-messages-message-bg); - background: var(--background); - align-self: flex-start; - width: 90%; - max-width: 90%; - --min-height: var(--a11y-min-target-size); - position: relative; - @include core-transition(width); - // This is needed to display bubble tails. - overflow: visible; - - &::part(native) { - --inner-border-width: 0px; - --inner-padding-end: 0px; - padding: 0; - margin: 0; - } - - core-format-text > p:only-child { - display: inline; - } - - .addon-message-user { - display: flex; - flex-direction: row; - justify-content: space-between; - align-items: center; - margin-bottom: .5rem; - margin-top: 0; - color: var(--ion-text-color); - - core-user-avatar { - display: block; - --core-avatar-size: var(--addon-messages-avatar-size); - margin: 0; - } - - div { - font-weight: 500; - flex-grow: 1; - @include padding-horizontal(.5rem); - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } - } - - ion-note { - 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; - } - - &[tappable]:active { - --background: var(--addon-messages-message-activated-bg); - } - - ion-label { - margin: 0; - padding: 8px 0; - } - - .addon-message-text { - display: inline-flex; - * { - color: var(--ion-text-color); - } - } - - .tail { - content: ''; - width: 0; - height: 0; - border: 0.5rem solid transparent; - position: absolute; - touch-action: none; - bottom: 0; - } - - // 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); - } - - .spinner { - @include float(end); - @include margin(2px, -3px, -2px, 5px); - - svg { - width: 16px; - height: 16px; - } - } - - .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); - height: var(--a11y-min-target-size) !important; - align-self: flex-end; - - ion-icon { - font-size: 1.4em; - line-height: initial; - color: var(--danger); - } - } - - &.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; } } + +ion-content { + --content-background: var(--background-alternative); + --background: var(--content-background); + + &::part(scroll) { + padding-bottom: 0 !important; + } +} + +.addon-messages-discussion-container { + display: flex; + flex-direction: column; + padding-bottom: 16px !important; + background: var(--content-background); +} + +.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; + + border: 0; + border-radius: var(--medium-radius); + padding: 0 8px 0 8px; + margin: 8px; + --background: var(--message-background); + background: var(--message-background); + align-self: var(--message-alignment); + width: 90%; + max-width: var(--list-item-max-width); + --min-height: var(--a11y-min-target-size); + position: relative; + @include core-transition(width); + // This is needed to display bubble tails. + overflow: visible; + + &::part(native) { + --inner-border-width: 0px; + --inner-padding-end: 0px; + padding: 0; + margin: 0; + } + + &:hover { + filter: drop-shadow(2px 2px 2px rgba(0,0,0,.3)); + } + + core-format-text > p:only-child { + display: inline; + } + + .addon-message-user { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + margin-bottom: .5rem; + margin-top: 0; + color: var(--ion-text-color); + + core-user-avatar { + display: block; + --core-avatar-size: var(--addon-messages-avatar-size); + margin: 0; + } + + div { + font-weight: 500; + flex-grow: 1; + padding-left: .5rem; + padding-right: .5rem; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + } + + ion-note { + color: var(--addon-messages-message-note-text); + font-size: var(--addon-messages-message-note-font-size); + margin: 0; + padding: 8px 0; + align-self: flex-start; + } + + &[tappable]:active { + --message-background: var(--message-activated-background); + } + + ion-label { + margin: 0; + padding: 8px 0; + } + + .addon-message-text { + display: inline-flex; + * { + color: var(--ion-text-color); + } + } + + .tail { + content: ''; + width: 0; + height: 0; + border: 0.5rem solid transparent; + 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 { + --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); + @include margin(2px, -3px, -2px, 5px); + + svg { + width: 16px; + height: 16px; + } + } + + .tail { + @include position(null, -8px, null, null); + @include margin-horizontal(null, -0.5rem); + } + } + + &.addon-message-not-mine .tail { + @include position(null, null, null, -8px); + @include margin-horizontal(-0.5rem, null); + } + + .addon-messages-delete-button { + min-height: initial; + line-height: initial; + margin-top: 0px; + margin-bottom: 0px; + height: var(--a11y-min-target-size) !important; + align-self: flex-end; + + ion-icon { + font-size: 1.4em; + line-height: initial; + color: var(--danger); + } + } + + &.addon-message-no-user { + margin-top: 0px; + } +} diff --git a/src/theme/theme.light.scss b/src/theme/theme.light.scss index e04f70066..5b44db892 100644 --- a/src/theme/theme.light.scss +++ b/src/theme/theme.light.scss @@ -104,7 +104,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 +324,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);